/* ============================================
   主题: theme-blue (清爽蓝)
   --------------------------------------------
   加载方式: 默认 css/style.css 之后追加本文件(见 inc/front.php template_header)。
   所以这里只需写「与默认风格的差异」, 不用复制全量样式。
   换配色 = 覆盖 :root 变量; 换细节 = 追加规则覆盖。
   ============================================ */
:root{
    --bg:#0e1420;          /* 页面背景(深蓝黑) */
    --bg2:#141c2c;         /* 卡片背景 */
    --bg3:#1d2739;         /* 悬浮背景 */
    --line:#232f45;        /* 分割线 */
    --text:#e6ecf7;        /* 主文字 */
    --text2:#93a1bb;       /* 次级文字 */
    --accent:#2f7bff;      /* 主题蓝(替换默认红) */
    --accent2:#00c8ff;     /* 青色点缀 */
    --radius:14px;         /* 更大的圆角, 与默认风格的差异 */
}

/* 头部: 蓝色渐变描边, 与默认风格的红色调区分 */
.site-header{
    background:linear-gradient(180deg,rgba(20,28,44,.96),rgba(14,20,32,.92));
    border-bottom:1px solid rgba(47,123,255,.28);
}
.logo-icon{
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    border-radius:10px;
}
.main-nav a.active{
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow:0 4px 14px rgba(47,123,255,.35);
}
.search-box button{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.user-login{background:linear-gradient(135deg,var(--accent),var(--accent2))}

/* ---------- 自定义两行头部(tb-*) 的布局补齐 ----------
   结构见 templates/theme-blue/_header.php:
     第一行 <div class="header-inner tb-top">  ← 复用默认 .header-inner(限宽1200/居中/高56/flex/gap)
     第二行 <nav class="main-nav tb-nav" id="mainNav">
   默认 .main-nav 本来是第一行里的伸缩项(flex:1、占满 logo 与搜索之间的空白),
   被挪到第二行后需要自己居中限宽; 且第一行少了这个"占位"元素, 搜索/用户区得靠 margin-left:auto 推到右侧。
   ⚠ 这些只写在桌面断点内: ≤640px 时 .tb-nav 必须保持默认的 fixed 抽屉行为
     (top:var(--header-h)=56px 正好贴在第一行下方), 由 #navToggle 打开。 */
@media (min-width:641px){
    .tb-nav{
        flex:none;            /* 覆盖默认 .main-nav{flex:1} —— 它不再是第一行的伸缩项 */
        width:100%;
        max-width:1200px;     /* 与 .header-inner 同宽 */
        margin:0 auto;        /* 居中 */
        padding:0 14px 8px;   /* 左右与 .header-inner 的 padding 对齐, 底部留白 */
    }
    .tb-top .search-box{margin-left:auto}   /* 导航挪走后把搜索/登录推到右侧 */
}

/* 两行头部总高 = 56(第一行) + 导航行 ≈ 96px, 依赖 --header-h 的布局要跟着补,
   否则登录页 .login-wrap 的 min-height 会少算一行导致多出滚动条。 */
.login-wrap{min-height:calc(100vh - 96px - 60px)}
@media (max-width:640px){
    .login-wrap{min-height:calc(100vh - var(--header-h) - 60px)}   /* 移动端只有一行, 用回默认高度 */
}

/* 卡片: 更柔的底色 + 蓝色悬浮边框 */
.vcard{background:var(--bg2);border-radius:var(--radius);overflow:hidden;transition:.25s}
.vcard:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 0 1px rgba(47,123,255,.35)}

/* 分区标题: 左侧蓝色竖条 */
.section-title h2{border-left:3px solid var(--accent);padding-left:10px}

/* 热榜名次: 蓝色渐变 */
.hot-item.top1 i,.hot-item.top2 i,.hot-item.top3 i{
    background:linear-gradient(135deg,var(--accent),var(--accent2));
}

/* ---------- 播放页(play.php) ----------
   播放页主色已变量化(--accent), 上面 :root 覆盖即生效; 这里再补几条组件级微调。 */
.ep-item.on{
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
}