/* ========================================================
   ByteNic Theme V1 - 核心完全体（降服 Chromium 内核专版）
   ======================================================== */

/* 1. 终极底色硬垫底，从最底层的 html 就锁死暗色，不给浏览器留任何白/黑真空期 */
html {
    background-color: #0d1117 !important;
}

body,
#body-wrap {
    background: transparent !important;
}

/* 隐藏默认背景 */
#web_bg {
    display: none !important;
}

/* 顶部Banner */
#page-header {
    background: transparent !important;
}
#page-header::before {
    background: rgba(0,0,0,.28) !important;
}

/* 导航栏 */
#nav {
    background: rgba(15,20,28,.28) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* 所有卡片：强制开启 isolation 隔离层，防止毛玻璃在跳转时因为找不到底色而发生重绘黑闪 */
.recent-post-item,
.card-widget,
.layout>div:first-child:not(.recent-posts),
.layout>.recent-posts>.pagination>*,
#archive,
#page,
#category,
#tag {
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
    isolation: isolate !important; /* 👈 告诉 Chromium 将卡片渲染上下文独立，不与外部混合计算 */
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

/* 鼠标悬停 */
.recent-post-item:hover,
.card-widget:hover {
    border-color: rgba(77,163,255,.45) !important;
}

/* 锁死点击瞬间触发的变形 */
.recent-post-item:active,
.recent-post-item:focus,
.card-widget:active,
a:active,
a:focus {
    outline: none !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
    transform: none !important;
}

/* Footer */
#footer {
    background: rgba(18,22,28,.35) !important;
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,.08);
}

/* TOC */
#card-toc {
    background: rgba(18,22,28,.35) !important;
}

/* 搜索框 */
.search-dialog {
    background: rgba(18,22,28,.75) !important;
    backdrop-filter: blur(25px);
}

/* 滚动条 */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background: #4DA3FF;
    border-radius: 20px;
}

/* 选中文字 */
::selection {
    background: #4DA3FF;
    color: white;
}

/* 深色模式标准平铺 */
[data-theme="dark"] .recent-post-item,
[data-theme="dark"] .card-widget,
[data-theme="dark"] .layout>div:first-child:not(.recent-posts),
[data-theme="dark"] .layout>.recent-posts>.pagination>* {
    background: rgba(15,18,24,.42) !important;
}

/* 浅色模式标准平铺 */
[data-theme="light"] .recent-post-item,
[data-theme="light"] .card-widget,
[data-theme="light"] .layout>div:first-child:not(.recent-posts),
[data-theme="light"] .layout>.recent-posts>.pagination>* {
    background: rgba(255,255,255,.32) !important;
}

/* 强化文字清晰度 */
#nav .site-page,
.card-widget .item-headline,
.card-widget .headline {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#nav .site-page:hover {
    color: #4DA3FF !important;
    text-shadow: 0 0 8px rgba(77, 163, 255, 0.6);
}

/* ========================================================
   📱 手机端响应式优化（与电脑端共用同一个视频背景）
   ======================================================== */
@media screen and (max-width: 768px) {
    /* 1. 解除手机端对视频的隐藏，让它和电脑端一样正常显示 */
    .full-bg-video {
        display: block !important;
    }
    
    /* 2. 彻底关闭原本的图片背景 */
    #web_bg {
        display: none !important;
    }

    /* 3. 针对移动端浏览器（如手机 Edge/Safari）微调卡片模糊，确保滑屏时流畅不卡顿 */
    .recent-post-item,
    .card-widget,
    .layout>div:first-child:not(.recent-posts) {
        backdrop-filter: blur(16px) !important; /* 稍微调低一点点手机端的模糊半径，大幅减少手机 GPU 的滑屏渲染压力 */
        -webkit-backdrop-filter: blur(16px) !important;
    }
}