/* ═══════════════════════════════════════════
   资源下载站 · DEMO 全量样式
   深空渐变 + 玻璃拟态
   ═══════════════════════════════════════════ */

/* ── 主题色变量 (P2: 方便换肤, 避免硬编码) ── */
:root {
    --color-primary: #4da3ff;
    --color-primary-dark: #2e7fd9;
    --color-accent: #f0a04b;
    --color-accent-dark: #e07b2e;
    --color-bg: #0b0f1a;
    --color-bg-2: #101828;
    --color-bg-3: #0b1220;
    --color-card: rgba(255,255,255,0.04);
    --color-card-border: rgba(255,255,255,0.08);
    --color-text: #e8edf5;
    --color-text-muted: #a0aec0;
    --color-text-dim: #8b98a8;
    --color-text-faint: #6b7a8c;
    --color-free: #3fb950;
    --color-free-dark: #2ea043;
    /* z-index 层级规范 (P2) */
    --z-bg: 0;
    --z-content: 5;
    --z-nav: 100;
    --z-search: 20;
    --z-modal: 1000;
    --z-top: 9999;
    /* 首页横幅: 单一数据源, 驱动背景高度/内容起点/搜索框居中, 各断点只改 --banner-h */
    --banner-h: 515px;
    --nav-h: 71px;
    /* 间距 */
    --gap: 20px;
    --radius: 14px;
    --radius-sm: 8px;
}

/* ── 现代重置 (P1: 避免 * 全量遍历, 只重置常用元素) ── */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote {
    margin: 0; padding: 0;
}
ul, ol { list-style: none; }

body {
    font-family:'Microsoft YaHei','PingFang SC',sans-serif;
    background: radial-gradient(120vw 800px at 50% -10%, rgba(26,58,110,0.9) 0%, transparent 55%),
                radial-gradient(90vw 600px at -10% 30%, rgba(13,61,92,0.8) 0%, transparent 45%),
                linear-gradient(160deg, var(--color-bg) 0%, var(--color-bg-2) 50%, var(--color-bg-3) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    color: var(--color-text);
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: #fff; }

/* ── 顶部导航 ── */
.nav {
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 40px;
    background: rgba(16,24,40,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: sticky; top:0; z-index: var(--z-nav);
}
.logo { font-size:22px; font-weight:800; letter-spacing:1px; }
.logo a { display:flex; align-items:center; gap:9px; color: var(--color-text); }
.logo-img { height:32px; width:32px; display:block; flex:0 0 auto; }
.logo-word { color: var(--color-text); }
.logo-word.accent { color: var(--color-primary); }
.nav-links { display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.nav-links a { color: var(--color-text-muted); font-size:14px; transition:.2s; min-height:44px; display:flex; align-items:center; padding:0 6px; }
.nav-links a:hover { color:#fff; }
.nav-actions { display:flex; gap:12px; align-items:center; }
.btn { padding:8px 20px; border-radius:var(--radius-sm); font-weight:600; font-size:14px; }
.btn-primary { background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark)); color:#fff !important; box-shadow:0 4px 16px rgba(77,163,255,.3); }
.btn-vip { background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark)); color:#fff !important; }
.btn:hover { opacity:.88; }
/* P2: 点击态反馈 */
.btn:active, .dl-btn:active, .perm-btn:active { transform: scale(0.98); opacity: 0.8; }

/* ── 无障碍: 屏幕阅读器专用 ── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── 首页 Hero (唯一 h1 站名) ── */
.hero-title {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: transparent;
    background: linear-gradient(90deg, #4da3ff, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    margin: 0;
    padding: 0;
}
.hero {
    position: relative;
    text-align: center;
    min-height: 0;
    padding: 0;
}
/* 搜索框浮在背景区中央 (body 顶层, 相对 body 定位) */
.hero-search-wrap {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: var(--banner-h);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--nav-h) 20px 0;
    z-index: var(--z-search);
    pointer-events: none;
}
.hero-search-wrap > * { pointer-events: auto; }
.search-box {
    display: flex;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: rgba(11,15,26,0.75);
    border: 1px solid rgba(77,163,255,0.4);
    border-radius: 50px;
    padding: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.search-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    padding: 12px 20px;
    font-size: 15px;
}
.search-box button {
    background: linear-gradient(135deg,#4da3ff,#2e7fd9);
    border: none;
    border-radius: 40px;
    padding: 12px 30px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
/* 近期热门搜索 */
.hot-search {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.hot-search-label {
    color: #8b98a8;
    font-size: 13px;
}
.hot-search a {
    padding: 4px 14px;
    border-radius: 20px;
    background: rgba(11,15,26,0.6);
    border: 1px solid rgba(255,255,255,0.12);
    color: #a0aec0;
    font-size: 12px;
    transition: .2s;
}
.hot-search a:hover {
    border-color: #4da3ff;
    color: #4da3ff;
    background: rgba(77,163,255,0.15);
}

/* ── 分类标签 ── */
.cats { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin:24px auto 10px; max-width:1240px; padding:0 20px; }
.cat { padding:8px 22px; border-radius:30px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:#a0aec0; font-size:13px; transition:.2s; }
.cat:hover, .cat.active { background:rgba(77,163,255,0.15); border-color:#4da3ff; color:#4da3ff; }

/* ── 首页资源网格 (2列横版卡片) ── */
.home-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    margin: 24px 0;
    padding: 0;
}
.home-card {
    display: flex;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: all .25s ease;
    height: 150px;
}
.home-card:hover { transform: translateY(-3px); border-color: rgba(77,163,255,0.5); box-shadow: 0 14px 36px rgba(0,0,0,0.4), 0 0 18px rgba(77,163,255,0.1); }
.home-thumb {
    flex: 0 0 200px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a2a4a, #0f1a33);
}
.home-icon { font-size: 40px; filter: drop-shadow(0 4px 12px rgba(77,163,255,.4)); }
.home-body { flex: 1; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; }
.home-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.home-cate {
    flex-shrink: 0;
    background: rgba(77,163,255,0.12);
    border: 1px solid rgba(77,163,255,0.3);
    color: #4da3ff;
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}
.home-title { font-size: 15px; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-title a { color: #e8edf5; }
.home-title a:hover { color: #4da3ff; }
.home-desc {
    color: #8b98a8;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.home-foot { display: flex; align-items: center; gap: 14px; margin-top: 8px; color: #6b7a8c; font-size: 11px; }
.home-date, .home-views { display: flex; align-items: center; gap: 3px; }
.home-perm {
    margin-left: auto;
    padding: 3px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.perm-free { background: rgba(63,185,80,.15); color: #3fb950; border: 1px solid rgba(63,185,80,.3); }
.perm-paid { background: rgba(240,160,75,.15); color: #f0a04b; border: 1px solid rgba(240,160,75,.3); }
.perm-vip  { background: rgba(168,85,247,.15); color: #c084fc; border: 1px solid rgba(168,85,247,.3); }

/* ── 分类页资源网格 (2列横版卡片, 独立样式) ── */
.list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    margin: 24px 0;
    padding: 0;
}
.list-card {
    display: flex;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: all .25s ease;
    height: 150px;
}
.list-card:hover { transform: translateY(-3px); border-color: rgba(77,163,255,0.5); box-shadow: 0 14px 36px rgba(0,0,0,0.4), 0 0 18px rgba(77,163,255,0.1); }
.list-thumb {
    flex: 0 0 200px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a2a4a, #0f1a33);
}
.list-icon { font-size: 40px; filter: drop-shadow(0 4px 12px rgba(77,163,255,.4)); }
.list-body { flex: 1; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; }
.list-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.list-cate {
    flex-shrink: 0;
    background: rgba(77,163,255,0.12);
    border: 1px solid rgba(77,163,255,0.3);
    color: #4da3ff;
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}
.list-title { font-size: 15px; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-title a { color: #e8edf5; }
.list-title a:hover { color: #4da3ff; }
.list-desc {
    color: #8b98a8;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.list-foot { display: flex; align-items: center; gap: 14px; margin-top: 8px; color: #6b7a8c; font-size: 11px; }
.list-date, .list-views { display: flex; align-items: center; gap: 3px; }
.list-perm {
    margin-left: auto;
    padding: 3px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── 搜索页资源网格 (2列横版卡片, 独立样式) ── */
.search-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    margin: 24px 0;
    padding: 0;
}
.search-card {
    display: flex;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: all .25s ease;
    height: 150px;
}
.search-card:hover { transform: translateY(-3px); border-color: rgba(77,163,255,0.5); box-shadow: 0 14px 36px rgba(0,0,0,0.4), 0 0 18px rgba(77,163,255,0.1); }
.search-thumb {
    flex: 0 0 200px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a2a4a, #0f1a33);
}
.search-icon { font-size: 40px; filter: drop-shadow(0 4px 12px rgba(77,163,255,.4)); }
.search-body { flex: 1; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; }
.search-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.search-cate {
    flex-shrink: 0;
    background: rgba(77,163,255,0.12);
    border: 1px solid rgba(77,163,255,0.3);
    color: #4da3ff;
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}
.search-title { font-size: 15px; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-title a { color: #e8edf5; }
.search-title a:hover { color: #4da3ff; }
.search-desc {
    color: #8b98a8;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.search-foot { display: flex; align-items: center; gap: 14px; margin-top: 8px; color: #6b7a8c; font-size: 11px; }
.search-date, .search-views { display: flex; align-items: center; gap: 3px; }
.search-perm {
    margin-left: auto;
    padding: 3px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── 中间横幅模块 (左轮播 + 右三图) ── */
.mid-banner {
    max-width: 1440px;
    margin: 20px auto 40px; /* 顶部 20px 与横幅背景留隙; 底部 40px 与资源卡片留间隙 */
    padding: 0;
    position: relative;
    z-index: var(--z-content);
    width: 100%;
}
.mid-banner-inner {
    display: flex;
    gap: 14px;
    align-items: stretch;
}
/* 左轮播 890×300 */
.mid-slide {
    flex: 0 0 calc(65% - 7px);
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    min-height: 240px;
    border: 1px solid rgba(255,255,255,0.08);
    background: #0f1a33;
}
.mid-slide-item {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .6s ease;
}
.mid-slide-item.active { opacity: 1; }
.mid-slide-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: var(--z-content);
}
.mid-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: .2s;
}
.mid-dot.active { background: #4da3ff; width: 20px; border-radius: 4px; }
/* 右侧: 上长图 + 下两方图 */
.mid-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.mid-right-top {
    flex: 1;
    min-height: 100px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.08);
    display: block;
}
.mid-right-bottom {
    display: flex;
    gap: 14px;
}
.mid-right-sq {
    flex: 1;
    aspect-ratio: 285 / 165;
    /* P1: aspect-ratio 降级方案 - 旧浏览器用 padding-top 保持比例 */
    min-height: 90px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.08);
    display: block;
}
.mid-right-sq:hover, .mid-right-top:hover {
    border-color: rgba(77,163,255,0.5);
    transform: translateY(-2px);
    transition: .2s;
}

/* ── 会员横幅 ── */
.vip-banner {
    max-width:1240px; margin:40px auto; padding:30px 40px;
    background: linear-gradient(120deg, rgba(77,163,255,.12), rgba(240,160,75,.08));
    border:1px solid rgba(77,163,255,.3);
    border-radius:16px;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:16px;
}
.vip-banner h2 { font-size:20px; margin-bottom:6px; color:#e8edf5; }
.vip-banner p { color:#8b98a8; font-size:14px; }

/* ── 面包屑 (描边小框) ── */
.breadcrumb {
    /* 与下方 .page-layout 同宽 1440px, 左右完全对齐 */
    max-width: 1440px;
    margin: 20px auto 16px;
    padding: 10px 40px;
    color: #8b98a8;
    font-size: 13px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
    z-index: var(--z-content);
    /* 描边小框: 深空半透明 + 渐变描边 */
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    line-height: 1.5;
    box-sizing: border-box;
}
.breadcrumb::before {
    content: "🏠";
    font-size: 12px;
    opacity: .8;
}
.breadcrumb a { color: #4da3ff; text-decoration: none; transition: .2s; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.bc-sep { color: #5a6a7c; margin: 0 3px; font-size: 12px; }

/* ── 详情页 ── */
.page-layout {
    display: flex;
    gap: 24px;
    max-width: 1240px;
    margin: 30px auto;
    padding: 0 40px;
    align-items: flex-start;
}

/* 左侧侧栏 */
.sidebar-left {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 90px;
}
.side-block {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 20px;
}
.side-title {
    font-size: 15px;
    font-weight: 700;
    color: #e8edf5;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.side-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.side-tag {
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(77,163,255,0.1);
    border: 1px solid rgba(77,163,255,0.25);
    color: #4da3ff;
    font-size: 12px;
    transition: .2s;
}
.side-tag:hover { background: rgba(77,163,255,0.25); color: #fff; }
.side-rank { list-style: none; counter-reset: rank; }
.side-rank li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.side-rank li:last-child { border-bottom: none; }
.side-rank li a { color: #a0aec0; display: flex; align-items: center; gap: 8px; }
.side-rank li a:hover { color: #4da3ff; }
.rank-num {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    color: #8b98a8;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.side-rank li:nth-child(1) .rank-num { background: linear-gradient(135deg,#f0a04b,#e07b2e); color:#fff; }
.side-rank li:nth-child(2) .rank-num { background: linear-gradient(135deg,#a0aec0,#7a8a9a); color:#fff; }
.side-rank li:nth-child(3) .rank-num { background: linear-gradient(135deg,#c98a5e,#a86a3e); color:#fff; }

/* ── 下载权限模块 ── */
.perm-block {
    background: linear-gradient(160deg, rgba(77,163,255,0.12), rgba(240,160,75,0.06));
    border-color: rgba(77,163,255,0.35);
}
.perm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.perm-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1a2a4a, #0f1a33);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.perm-name {
    font-size: 14px;
    font-weight: 700;
    color: #e8edf5;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.perm-size { font-size: 12px; color: #8b98a8; margin-top: 3px; }
.perm-price { font-size: 13px; color: #c7d2e0; margin-top: 6px; }
.perm-price strong { color: #f0a04b; font-size: 17px; font-weight: 700; margin: 0 3px; }
.perm-status { margin-bottom: 14px; }
.perm-status div {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}
.perm-free { background: rgba(63,185,80,0.1); color: #3fb950; border: 1px solid rgba(63,185,80,0.3); }
.perm-paid-ok { background: rgba(63,185,80,0.1); color: #3fb950; border: 1px solid rgba(63,185,80,0.3); }
.perm-vip { background: rgba(240,160,75,0.1); color: #f0a04b; border: 1px solid rgba(240,160,75,0.3); }
.perm-lock { background: rgba(240,160,75,0.1); color: #f0a04b; border: 1px solid rgba(240,160,75,0.3); }
.perm-actions { display: flex; flex-direction: column; gap: 8px; }
.perm-btn {
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #fff !important;
    transition: .2s;
}
.perm-btn:hover { opacity: .88; transform: translateY(-1px); }
.perm-btn-ok { background: linear-gradient(135deg, #3fb950, #2ea043); }
.perm-btn-login { background: linear-gradient(135deg, #4da3ff, #2e7fd9); }
.perm-btn-pay { background: linear-gradient(135deg, #f0a04b, #e07b2e); box-shadow: 0 4px 14px rgba(240,160,75,0.3); }
.perm-btn-vip { background: linear-gradient(135deg, #a78bfa, #7c5cd6); }

/* 右侧内容区 */
.content-right {
    flex: 1;
    min-width: 0;
}
.post-detail {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 30px 36px;
}
.detail-head { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.detail-head h1 { font-size: 28px; font-weight: 700; margin-bottom: 10px; color: #e8edf5; }
.detail-head .detail-title { font-size: 24px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.detail-meta { display: flex; gap: 18px; color: #6b7a8c; font-size: 13px; flex-wrap: wrap; }
.detail-meta a { color: #6b7a8c; }
.detail-meta a:hover { color: #4da3ff; }
.detail-content { line-height: 1.9; color: #c8d0dc; }
.detail-content p { margin-bottom: 1em; }
.detail-content img { max-width: 100%; border-radius: 8px; }
.detail-content a { color: #4da3ff; }

/* ── 国外平台分享 ── */
.share-box {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.share-title, .rec-title {
    font-size: 16px;
    font-weight: 700;
    color: #e8edf5;
    margin-bottom: 14px;
}
.share-icons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.share-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    color: #fff !important;
    transition: .2s;
    text-decoration: none;
}
.share-icon:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
.si { font-size: 16px; }
.share-tg { background: linear-gradient(135deg,#2aabee,#229ed9); }
.share-tw { background: linear-gradient(135deg,#1da1f2,#0d8bdd); }
.share-fb { background: linear-gradient(135deg,#1877f2,#125db8); }
.share-wa { background: linear-gradient(135deg,#25d366,#1da851); }
.share-rd { background: linear-gradient(135deg,#ff4500,#d53a00); }
.share-vk { background: linear-gradient(135deg,#0077ff,#0058bd); }

/* ── 推荐资源 ── */
.rec-box {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.rec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.rec-card {
    display: flex;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    overflow: hidden;
    transition: .2s;
    height: 100px;
}
.rec-card:hover { transform: translateY(-3px); border-color: rgba(77,163,255,0.4); }
.rec-thumb {
    flex: 0 0 130px;
    width: 130px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#1a2a4a,#0f1a33);
}
.rec-icon { font-size: 28px; }
.rec-body { flex: 1; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; }
.rec-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rec-cate {
    flex-shrink: 0;
    background: rgba(77,163,255,0.12);
    border: 1px solid rgba(77,163,255,0.3);
    color: #4da3ff;
    font-size: 10px;
    padding: 1px 8px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}
.rec-name { font-size: 13px; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-name a { color: #e8edf5; }
.rec-name a:hover { color: #4da3ff; }
.rec-desc {
    color: #8b98a8;
    font-size: 11px;
    line-height: 1.4;
    margin-bottom: auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.rec-meta { display: flex; align-items: center; gap: 8px; color: #6b7a8c; font-size: 10px; margin-top: 6px; }
.rec-perm { margin-left: auto; padding: 2px 10px; font-size: 10px; }

/* ── 评论区 (官方类名, 深空风) ── */
.comment-area {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.comment-area .cmts,
.comment-area #divCommentPost {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 20px;
}
.comment-area .posttitle h4 {
    color: var(--color-text);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* 评论列表 */
.cmtsitem {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cmtsitem:last-child { border-bottom: none; }
.cmtsitem .avatar {
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 12px;
}
.cmtsitem .avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
}
.cmtscon { margin-left: 52px; }
.cmtshead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.cmtsname { color: var(--color-primary); font-size: 13px; font-weight: 600; }
.cmtsname a { color: var(--color-primary); }
.cmtsname em { color: var(--color-text-faint); font-style: normal; font-size: 11px; }
.cmtsdate { color: var(--color-text-faint); font-size: 11px; }
.cmtsbody { color: var(--color-text); font-size: 13px; line-height: 1.7; }
.cmtsbody p { margin: 0 0 8px; }
.cmtsfoot { margin-top: 8px; }
.cmtsfoot .reply {
    color: var(--color-text-faint);
    font-size: 11px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.cmtsfoot .reply:hover { color: var(--color-primary); }
/* 子评论 (回复嵌套) */
.cmtsreply {
    margin: 10px 0 0 20px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border-left: 2px solid rgba(77,163,255,0.3);
    border-radius: 0 8px 8px 0;
}
.cmtsreplyname { color: var(--color-primary); font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.cmtsreplybody { color: var(--color-text); font-size: 12px; line-height: 1.6; }
.cmtsreplybody p { margin: 0; }
/* 评论表单 */
.comment-area .comment { display: flex; gap: 14px; }
.comment-area .cmtimg { flex-shrink: 0; text-align: center; width: 64px; }
.comment-area .cmtimg img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: block;
    margin: 0 auto 4px;
}
.comment-area .cmtimg p { color: var(--color-text-faint); font-size: 11px; }
.comment-area .cmtarea { flex: 1; min-width: 0; }
.comment-area .cmtarea textarea {
    width: 100%;
    min-height: 90px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    padding: 12px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.comment-area .cmtarea textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(77,163,255,0.15);
}
.comment-area .cmtform { margin-top: 12px; }
.comment-area .cmtform p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.comment-area .cmtform input.text,
.comment-area .cmtform input.textcode {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: var(--color-text);
    padding: 8px 12px;
    font-size: 13px;
    flex: 1;
    max-width: 260px;
}
.comment-area .cmtform input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.comment-area .cmtform label {
    color: var(--color-text-dim);
    font-size: 12px;
    white-space: nowrap;
}
.comment-area .cmtform .imgcode {
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
}
.comment-area .cmtsubmit {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}
.comment-area .cmtsubmit .cmtbtn,
.comment-area .posttitle .cmtbtn {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 26px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
}
.comment-area .cmtsubmit .cmtbtn:hover,
.comment-area .posttitle .cmtbtn:hover { opacity: .88; }
.comment-area .posttitle .cmtbtn {
    background: rgba(255,255,255,0.08);
    padding: 4px 14px;
    font-size: 12px;
}
.comment-area .cmtsubmit span {
    color: var(--color-text-faint);
    font-size: 11px;
}
/* 无评论提示 */
.cmts.nocmt::after {
    content: attr(data-content);
    display: block;
    text-align: center;
    color: var(--color-text-faint);
    font-size: 13px;
    padding: 20px 0;
}
.cmtpagebar { margin-top: 12px; text-align: center; }
.cmtpagebar a, .cmtpagebar span {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 3px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--color-text-muted);
    font-size: 12px;
}
.cmtpagebar .now-page { background: rgba(77,163,255,0.2); border-color: var(--color-primary); color: var(--color-primary); }

/* ── 语言切换器 ── */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    padding: 3px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
}
.lang-link {
    padding: 3px 10px;
    border-radius: 16px;
    font-size: 12px;
    color: #a0aec0;
    text-decoration: none;
    transition: .2s;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
}
.lang-link:hover { color: #fff; }
.lang-link.active {
    background: rgba(77,163,255,0.2);
    color: #4da3ff;
    font-weight: 600;
}

/* ── 移动端汉堡按钮 (☰) ── */
.nav-burger {
    display: none; /* 桌面隐藏, 移动端显示 */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    cursor: pointer;
    margin-left: 12px;
}
.nav-burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: #e8edf5;
    border-radius: 2px;
    transition: .3s;
}
/* 展开时变 X */
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 移动端抽屉菜单 ── */
.nav-drawer {
    display: none; /* 桌面隐藏 */
    position: fixed;
    top: 64px;
    right: 0;
    width: 260px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: rgba(16,24,40,0.97);
    border-left: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    border-radius: 0 0 0 14px;
    padding: 16px 0;
    z-index: var(--z-modal);
    box-shadow: -8px 8px 30px rgba(0,0,0,0.5);
    transform: translateX(100%);
    transition: transform .3s ease;
}
.nav-drawer.open { transform: translateX(0); }
.drawer-links { display: flex; flex-direction: column; }
.drawer-links a {
    padding: 13px 22px;
    color: #a0aec0;
    font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    min-height: 44px;
    display: flex;
    align-items: center;
}
.drawer-links a:hover, .drawer-links a.active { color: #4da3ff; background: rgba(77,163,255,0.08); }
.drawer-actions { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.drawer-btn { text-align: center; }

/* ── 移动端右侧悬浮圆形按钮 (FAB) ── */
.fab-wrap {
    display: none; /* 桌面隐藏, 移动端显示 */
    position: fixed;
    right: 16px;
    bottom: 24px;
    z-index: var(--z-modal);
    flex-direction: column;
    gap: 12px;
}
.fab {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
    transition: transform .2s;
    text-decoration: none;
}
.fab:hover { transform: scale(1.08); }
.fab-top { background: linear-gradient(135deg, #f0a04b, #e07b2e); }
.fab-bottom { background: linear-gradient(135deg, #4da3ff, #2e7fd9); }

/* ── 响应式 ── */
@media (max-width: 900px) {
    .page-layout { flex-direction: column; padding: 0 16px; }
    .sidebar-left { width: 100%; position: static; }
    /* 修复: 手机下内容区不撑宽, 防止横向滚动 */
    .content-right { width: 100%; max-width: 100%; flex: none; margin: 0 auto; }
    .post-detail { width: 100%; max-width: 100%; padding: 20px 16px; box-sizing: border-box; margin: 0 auto 20px; }
    .detail-head h1 { font-size: 22px; }
    .detail-head .detail-title { font-size: 19px; }
    .detail-meta { gap: 12px; font-size: 12px; }
    .breadcrumb { padding: 8px 14px; font-size: 12px; }
    /* 评论表单: 手机下输入框撑满, 不溢出 */
    .comment-area .cmtform p { flex-wrap: wrap; }
    .comment-area .cmtform input.text,
    .comment-area .cmtform input.textcode { max-width: 100%; flex: 1 1 100%; }
    .comment-area .cmtform label { flex: 0 0 auto; }
    .comment-area .cmtsubmit { flex-wrap: wrap; }
    /* 推荐卡片: 手机下改竖版堆叠, 彻底不溢出 */
    .rec-card { height: auto; min-height: 0; flex-direction: column; }
    .rec-thumb { flex: none; width: 100%; height: 90px; }
    .rec-top { flex-wrap: wrap; }
    .rec-name { white-space: normal; }
    .rec-meta { flex-wrap: wrap; }
    .rec-meta .rec-perm { margin-left: 0; }
    .rec-body { min-width: 0; width: 100%; box-sizing: border-box; }
    .rec-body .rec-cate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rec-meta .rec-perm { flex-shrink: 0; }
    /* 文章正文内容: 防止宽元素溢出 */
    .detail-content { overflow-wrap: break-word; word-break: break-word; }
    .detail-content img, .detail-content video, .detail-content iframe,
    .detail-content table, .detail-content pre { max-width: 100%; height: auto; }
    .detail-content pre { overflow-x: auto; white-space: pre-wrap; }
}

/* ── 下载面板 ── */
.res-download-panel {
    margin: 0 0 24px; padding: 20px;
    background: linear-gradient(135deg, rgba(77,163,255,0.1), rgba(240,160,75,0.06));
    border: 1px solid rgba(77,163,255,0.3); border-radius: 12px;
}
.res-panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.res-panel-icon { font-size: 36px; }
.res-panel-head h3 { margin: 0 0 4px; font-size: 18px; color: #e8edf5; }
.res-panel-meta { display: flex; gap: 16px; flex-wrap: wrap; color: #8b98a8; font-size: 13px; }
.res-panel-price { color: #f0a04b; font-weight: 700; }
.res-panel-price.free { color: #3fb950; }
.res-panel-btns { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.res-btn-pay, .res-btn-free {
    padding: 12px 30px; border-radius: 8px; color: #fff !important;
    font-size: 15px; font-weight: 700; display: inline-block;
}
.res-btn-pay { background: linear-gradient(135deg, #f0a04b, #e07b2e); box-shadow: 0 4px 16px rgba(240,160,75,0.3); }
.res-btn-free { background: linear-gradient(135deg, #3fb950, #2ea043); }
.res-btn-pay:hover, .res-btn-free:hover { opacity: 0.88; color:#fff; }
.res-vip-tip { color: #4da3ff; font-size: 13px; }

/* ── 页脚 ── */
.footer { text-align:center; color:#5a6a7a; padding:40px; font-size:13px; border-top:1px solid rgba(255,255,255,0.05); margin-top:40px; }

/* ── 滚动条 ── */
/* P2: Firefox 滚动条标准属性 (兼容非 WebKit) */
* { scrollbar-width: thin; scrollbar-color: #2a3a52 var(--color-bg); }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background:#2a3a52; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ── 全屏背景横幅 2555×515 ── */
body { position: relative; }
.bg-banner {
    position: absolute; /* 从 fixed 改 absolute: 随文档流滚动, 消除滚动残影 */
    top: 0; left: 0; right: 0;
    height: var(--banner-h);
    background-size: auto var(--banner-h);      /* 保持原始横向尺寸, 按高度对齐 */
    background-position: center top;
    background-repeat: repeat-x;      /* 横向平铺, 宽屏不裁切不拉伸 */
    background-color: #0b0f1a; /* 兜底色, 防止图片加载前白闪 */
    z-index: var(--z-bg);
    pointer-events: none;
}
/* 内容上移到背景区 (背景 absolute 占位后, hero 拉回顶部) */
body.has-banner .hero {
    padding-top: calc(var(--banner-h) - var(--nav-h)); /* 横幅底边落在导航下方 */
}
/* 导航和内容浮在背景上 */
.nav {
    position: relative;
    z-index: var(--z-nav);
}
/* ═══ 全局布局约束: 所有页面内容从背景横幅下方开始 ═══ */
.hero, .grid, .vip-banner, .page-layout, .post-detail-wrap, main, .site-content {
    position: relative;
    z-index: var(--z-content);
    /* 顶部留出背景横幅高度 */
    margin-top: 0;
}
body.has-banner .page-layout {
    padding-top: var(--banner-h);
}
/* 统一内容宽度约束 */
.hero, .grid, .vip-banner, .page-layout {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}
/* 背景上面加一层遮罩, 保证可读性 */
.bg-banner::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(11,15,26,0.55) 0%, rgba(11,15,26,0.35) 40%, rgba(11,15,26,0.85) 100%);
}
.bg-banner > * { position: relative; z-index: 1; }
/* 横幅背景视频: 铺满, 位于遮罩之下 (z-index:-1 遮住底图, 可读性遮罩 .bg-banner::after 在上层) */
.bg-banner .bg-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: -1; pointer-events: none;
}

/* ── 主内容区 ── */
.site-main {
    display: block;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: var(--z-content);
}
.section-title {
    font-size: 22px;
    font-weight: 700;
    color: #e8edf5;
    margin: 30px 24px 16px;
    padding-left: 12px;
    border-left: 4px solid #4da3ff;
}

/* ── 页脚 (HostooCDN 风格, 2/3 高度) ── */
.site-footer {
    background: #0a0e17;
    border-top: 1px solid rgba(255,255,255,0.04);
    padding: 20px 24px 14px;
    margin-top: 30px;
    color: #8b96ad;
    font-size: 13px;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-cols {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 20px;
    padding-bottom: 14px;
}
.footer-brand .footer-logo {
    font-size: 15px;
    font-weight: 700;
    color: #e8ecf4;
    margin-bottom: 6px;
}
.footer-brand .footer-desc {
    color: #5a6a80;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 10px;
}
.footer-social { display: flex; gap: 8px; }
.footer-social a {
    color: #5a6a80;
    transition: color .2s;
    display: inline-flex;
    align-items: center;
}
.footer-social a:hover { color: #5b8cff; }
.footer-col-title {
    font-size: 12px;
    font-weight: 600;
    color: #5a6a80;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-links a {
    color: #b0bac8;
    font-size: 13px;
    text-decoration: none;
    transition: color .2s;
}
.footer-links a:hover { color: #5b8cff; }
.footer-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-contact li { color: #b0bac8; font-size: 13px; }
.footer-contact a { color: #b0bac8; text-decoration: none; transition: color .2s; }
.footer-contact a:hover { color: #5b8cff; }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.04);
    font-size: 12px;
}
.footer-copy { color: #3d4f63; }
.footer-legal { display: flex; gap: 16px; }
.footer-legal a { color: #3d4f63; text-decoration: none; transition: color .2s; }
.footer-legal a:hover { color: #8b96ad; }
.footer-icp { color: #3d4f63; text-decoration: none; }
.footer-icp:hover { color: #5b8cff; }
.dot-sep { color: #5a6a7c; margin: 0 8px; }

/* ── 上下篇导航 ── */
.post-nav {
    display: flex;
    gap: 16px;
    margin: 20px 1px 1px;
    max-width: 1200px;
}
.post-nav-item {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 16px;
    min-height: 44px;
}
.post-nav-item a {
    color: #a0aec0;
    text-decoration: none;
    font-size: 13px;
    display: block;
    line-height: 1.5;
}
.post-nav-item a:hover { color: #4da3ff; }
.pn-label { display: block; color: #4da3ff; font-weight: 600; margin-bottom: 4px; }
.pn-empty { color: #5a6a7c; font-size: 13px; }

/* ── 404 错误页 ── */
.error-page { text-align: center; padding: 100px 24px; }
.error-page h1 { font-size: 96px; font-weight: 900; color: #4da3ff; margin: 0 0 10px; }
.error-desc { color: #8b98a8; font-size: 16px; margin-bottom: 30px; }
.error-actions { display: flex; gap: 16px; justify-content: center; }

/* ── 独立页面 ── */
.page-single {
    max-width: 900px;
    margin: 30px auto;
    padding: 30px 40px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
}
.page-title { font-size: 28px; font-weight: 800; color: #e8edf5; margin-bottom: 10px; }
.page-meta { color: #6b7a8c; font-size: 13px; margin-bottom: 20px; display: flex; gap: 16px; }
.page-content { color: #c8d0dc; line-height: 1.8; font-size: 15px; }
.page-content img { max-width: 100%; height: auto; }

/* ── 面包屑当前项 ── */
.bc-current { color: #e8edf5; font-weight: 600; }

/* 搜索框大号 (搜索页) */
.search-box-lg { margin: 20px auto 0; }

/* ── 分类横幅 2560×120 全屏 ── */
.cate-banner {
    width: 100%;
    min-height: 120px;
    padding: 28px 24px;
    text-align: center;
    background: radial-gradient(800px 200px at 50% -50%, rgba(77,163,255,0.25) 0%, transparent 60%),
                linear-gradient(135deg, #16233f 0%, #0f1a33 50%, #14203a 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
    z-index: var(--z-content);
}
.cate-banner-inner { max-width: 1200px; margin: 0 auto; }
.cate-banner-title {
    font-size: 30px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 8px;
    background: linear-gradient(90deg, var(--color-primary), #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cate-banner-desc {
    color: var(--color-text-dim);
    font-size: 14px;
    margin: 0;
    max-width: 800px;
    margin: 0 auto;
}

/* ── 筛选排序工具栏 (与下方卡片网格同宽对齐) ── */
.filter-bar {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius);
    padding: 14px 20px;
    margin: 24px 0 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.filter-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.filter-label {
    color: var(--color-text-faint);
    font-size: 13px;
    flex-shrink: 0;
    font-weight: 600;
}
.filter-sorts { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-sort {
    padding: 6px 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--color-text-muted);
    font-size: 13px;
    transition: .2s;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}
.filter-sort:hover, .filter-sort.active {
    background: rgba(77,163,255,0.15);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ── 列表页 (分类/标签/日期) ── */
.list-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 30px 40px 40px;
    width: 100%;
}
.list-head {
    margin-bottom: 24px;
}
.list-head h1 {
    font-size: 30px;
    font-weight: 800;
    color: #e8edf5;
    margin-bottom: 16px;
    background: linear-gradient(90deg, #4da3ff, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sub-cates {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.sub-cate {
    padding: 6px 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #a0aec0;
    font-size: 13px;
    transition: .2s;
}
.sub-cate:hover, .sub-cate.active {
    background: rgba(77,163,255,0.15);
    border-color: #4da3ff;
    color: #4da3ff;
}
.pagination-wrap {
    text-align: center;
    margin: 30px 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.pagination-wrap a, .pagination-wrap span {
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #a0aec0;
    text-decoration: none;
    display: inline-block;
}
.pagination-wrap .now-page, .pagination-wrap .active {
    background: linear-gradient(135deg, #4da3ff, #2e7fd9);
    color: #fff !important;
    border-color: transparent;
}
.pagination-wrap a:hover {
    border-color: #4da3ff;
    color: #4da3ff;
}
.empty-tip {
    text-align: center;
    padding: 60px;
    color: #6b7a8c;
    font-size: 16px;
}

/* ── 响应式 (横版卡片: >768=2列, ≤768=1列) ── */
@media (max-width: 1200px) {
    .home-grid, .list-grid, .search-grid { padding: 0 20px; }
    .hero { padding: 0 20px; }
    .home-thumb, .list-thumb, .search-thumb { flex-basis: 180px; width: 180px; }
}
/* 992px 无 grid 变化 */
@media (max-width: 992px) {
    .nav { padding: 12px 20px; }
    .nav-links { gap: 16px; }
    :root { --banner-h: 400px; }
}
@media (max-width: 768px) {
    .nav { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
    /* 移动端: 隐藏导航链接和操作按钮, 显示汉堡+悬浮按钮 */
    .nav-links { display: none; }
    .nav-actions { display: none; }
    .nav-burger { display: flex; }
    .nav-drawer { display: block; }
    .fab-wrap { display: flex; }
    /* P2: 明确 nav 子元素 order, 防止新增元素导致布局错乱 */
    .nav .logo { order: 1; }
    .nav .nav-actions { order: 2; margin-left: auto; }
    .nav .nav-links { order: 3; gap: 12px; width: 100%; justify-content: center; }
    .nav .nav-burger { order: 4; margin-left: auto; }
    .home-grid, .list-grid, .search-grid { padding: 0 16px; grid-template-columns: 1fr; } /* 手机1列 */
    .home-card, .list-card, .search-card { height: 130px; }
    .home-thumb, .list-thumb, .search-thumb { flex-basis: 120px; width: 120px; }
    .home-icon, .list-icon, .search-icon { font-size: 32px; }
    /* 手机下标题换行不溢出 */
    .home-top, .list-top, .search-top { flex-wrap: wrap; }
    .home-title, .list-title, .search-title { white-space: normal; overflow: visible; min-width: 0; flex: 1; }
    .list-title a, .home-title a, .search-title a { display: block; max-width: 100%; overflow-wrap: break-word; }
    .home-desc, .list-desc, .search-desc { -webkit-line-clamp: 1; }
    .home-foot, .list-foot, .search-foot { flex-wrap: wrap; gap: 10px; }
    .home-perm, .list-perm, .search-perm { margin-left: 0; }
    .post-detail { padding: 20px 16px; margin: 0 auto; }
    .vip-banner { padding: 20px; }
    .banner-wrap { padding: 0 16px; }
    :root { --banner-h: 300px; }
    .hot-search { gap: 8px; }
    /* 中间横幅: 手机端竖排 */
    .mid-banner { padding: 0 16px; }
    .mid-banner-inner { flex-direction: column; }
    .mid-slide { flex: none; min-height: 180px; }
    .mid-right-top { min-height: 90px; }
}
@media (max-width: 480px) {
    .home-grid, .list-grid, .search-grid { padding: 0 12px; }
    :root { --banner-h: 240px; }
    .hot-search { display: none; }
    .search-box { margin: 0 10px; }
    .vip-banner h2 { font-size: 17px; }
}

/* ═══════════════════════════════════════════
   增强模块: 左侧悬浮导航 / 客服聊天 / 底部图片 / 丰富页脚
   ═══════════════════════════════════════════ */

/* ── 左侧悬浮长条小导航 (桌面端) ── */
.side-rail {
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px;
    background: rgba(16,24,40,0.72);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    z-index: var(--z-modal);
}
.side-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    min-width: 60px;
    border-radius: 10px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all .2s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
}
.side-rail-item:hover {
    color: #fff;
    background: rgba(77,163,255,0.15);
}
.side-rail-icon { font-size: 20px; line-height: 1; }
.side-rail-text { font-size: 12px; line-height: 1; white-space: nowrap; }

/* ── 客服悬浮按钮 (全站右下角) ── */
.service-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(77,163,255,0.4);
    transition: transform .2s ease;
    z-index: var(--z-modal);
}
.service-fab:hover { transform: scale(1.08); }
.service-fab:active { transform: scale(0.96); }
/* 呼吸光晕动画 */
.service-fab-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(77,163,255,0.6);
    animation: service-pulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes service-pulse {
    0% { transform: scale(1); opacity: .8; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* ── 客服聊天面板 ── */
.service-panel {
    position: fixed;
    right: 24px;
    bottom: 92px;
    width: 340px;
    max-width: calc(100vw - 32px);
    background: rgba(16,24,40,0.96);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease, visibility .25s;
    z-index: calc(var(--z-modal) + 1);
}
.service-panel.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.service-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(77,163,255,0.18), rgba(240,160,75,0.1));
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.service-head-info { display: flex; align-items: center; gap: 10px; }
.service-head-icon { font-size: 22px; }
.service-head-info strong { display: block; color: var(--color-text); font-size: 15px; }
.service-subtitle { display: block; color: var(--color-text-faint); font-size: 12px; margin-top: 2px; }
.service-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 13px;
    transition: background .2s;
}
.service-close:hover { background: rgba(255,255,255,0.16); color: #fff; }
.service-msgs {
    flex: 1;
    min-height: 180px;
    max-height: 260px;
    overflow-y: auto;
    padding: 14px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.service-msg {
    max-width: 85%;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
    word-break: break-word;
    animation: msg-in .2s ease;
}
@keyframes msg-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
.service-msg.bot {
    align-self: flex-start;
    background: rgba(255,255,255,0.07);
    color: var(--color-text);
    border-bottom-left-radius: 4px;
}
.service-msg.user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    border-bottom-right-radius: 4px;
}
.service-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px 10px;
}
.service-quick-btn {
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(77,163,255,0.35);
    background: rgba(77,163,255,0.08);
    color: var(--color-primary);
    font-size: 12px;
    cursor: pointer;
    transition: all .2s;
}
.service-quick-btn:hover { background: rgba(77,163,255,0.2); border-color: var(--color-primary); }
.service-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 8px 14px;
    border-top: 1px dashed rgba(255,255,255,0.1);
    color: var(--color-text-faint);
    font-size: 12px;
}
.service-contact a { color: var(--color-primary); text-decoration: none; }
.service-contact a:hover { text-decoration: underline; }
.service-form {
    display: flex;
    gap: 8px;
    padding: 10px 14px 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.service-input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: var(--color-text);
    font-size: 13px;
    outline: none;
    transition: border-color .2s;
}
.service-input:focus { border-color: var(--color-primary); }
.service-input::placeholder { color: var(--color-text-faint); }
.service-send {
    padding: 0 18px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
}
.service-send:hover { opacity: .88; }

/* ── 底部图片模块 (首页) ── */
.img-module {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px 10px;
}
.img-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.img-module-item {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    aspect-ratio: 3 / 2;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
a.img-module-item:hover {
    transform: translateY(-4px);
    border-color: rgba(77,163,255,0.5);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 16px rgba(77,163,255,0.12);
}
.img-module-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── 增强模块响应式 ── */
@media (max-width: 900px) {
    .side-rail { display: none; }
    .footer-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
    .footer-brand { grid-column: 1 / -1; }
    .img-module { padding: 0 16px; }
}
@media (max-width: 768px) {
    .fab-wrap { bottom: 96px; }
    .service-fab { right: 16px; bottom: 24px; width: 50px; height: 50px; font-size: 22px; }
    .service-panel { right: 12px; bottom: 84px; width: calc(100vw - 24px); }
    .img-module-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .footer-cols { grid-template-columns: 1fr; gap: 16px; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ── 首页分类模块 (后台「首页设置」homecids 渲染) ── */
.cate-block-grid{grid-template-columns:repeat(4,1fr); }
/* 图集样式 (style=3): 竖排大图, 文字不被挤压 */
.cate-block-gallery .home-card{flex-direction:column; height:auto; }
.cate-block-gallery .home-thumb{flex:none; width:100%; height:130px; }
.cate-block-gallery .home-icon{font-size:42px; }
.cate-block-gallery .home-body{padding:12px 14px; }
/* 圈子样式 (style=4): 圆形缩略图 + 居中 */
.cate-block-circle .home-card{flex-direction:column; align-items:center; height:auto; padding-bottom:12px; }
.cate-block-circle .home-thumb{width:96px; height:96px; border-radius:50%; margin:14px auto 0; flex:none; }
.cate-block-circle .home-icon{font-size:38px; }
.cate-block-circle .home-body{padding:10px 12px 0; text-align:center; }
.cate-block-circle .home-top{justify-content:center; }
.cate-block-circle .home-title{white-space:normal; overflow:visible; }
.cate-block-circle .home-foot{justify-content:center; gap:10px; flex-wrap:wrap; }
.cate-block-circle .home-perm{margin-left:0; }
@media (max-width:768px){
  .cate-block-grid{grid-template-columns:repeat(2,1fr) !important; }
  .cate-block-circle .home-thumb{width:72px; height:72px; }
}

/* ── 皇冠 SVG 图标 (会员入口, 替代 emoji) ── */
.crown-ico{
  width:16px; height:16px;
  display:inline-block;
  vertical-align:-3px;
  filter:drop-shadow(0 1px 2px rgba(146,64,14,.55));
}
.btn-vip .crown-ico{width:15px; height:15px; }
.fab .crown-ico{width:24px; height:24px; vertical-align:0; }
.side-rail-icon .crown-ico{width:20px; height:20px; vertical-align:0; }

/* ═══════ 模块布局样式 (后台可切换, 全局生效: 首页/分类页/内容页推荐) ═══════ */
/* 基础: 网格容器 */
.module-layout .home-grid, .module-layout .list-grid, .module-layout .rec-grid {
    display: grid; width: 100%; }
.module-layout .home-card, .module-layout .list-card, .module-layout .rec-card { height: 150px; }

/* 模式一: 四列网格卡片 (紧凑竖排, 高略大于宽: 335宽×345高) */
.module-layout.mod-grid4 .home-grid, .module-layout.mod-grid4 .list-grid, .module-layout.mod-grid4 .rec-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.module-layout.mod-grid4 .home-card, .module-layout.mod-grid4 .list-card, .module-layout.mod-grid4 .rec-card { flex-direction: column; height: auto; aspect-ratio: 335 / 345; overflow: hidden; }
.module-layout.mod-grid4 .home-thumb, .module-layout.mod-grid4 .list-thumb, .module-layout.mod-grid4 .rec-thumb { flex: 1; min-height: 0; width: 100%; }
.module-layout.mod-grid4 .home-icon, .module-layout.mod-grid4 .list-icon, .module-layout.mod-grid4 .rec-icon { font-size: 46px; }
.module-layout.mod-grid4 .home-body, .module-layout.mod-grid4 .list-body, .module-layout.mod-grid4 .rec-body { flex: 0 0 auto; padding: 10px 12px; }
.module-layout.mod-grid4 .home-title, .module-layout.mod-grid4 .list-title, .module-layout.mod-grid4 .rec-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 2.7em; overflow: hidden; }
.module-layout.mod-grid4 .home-desc, .module-layout.mod-grid4 .list-desc, .module-layout.mod-grid4 .rec-desc { -webkit-line-clamp: 1; }
.module-layout.mod-grid4 .home-foot, .module-layout.mod-grid4 .list-foot, .module-layout.mod-grid4 .rec-meta { flex-wrap: wrap; gap: 8px; }

/* 模式二: 双列横向摘要 (缩略图左+摘要右) */
.module-layout.mod-list2 .home-grid, .module-layout.mod-list2 .list-grid, .module-layout.mod-list2 .rec-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.module-layout.mod-list2 .home-card, .module-layout.mod-list2 .list-card, .module-layout.mod-list2 .rec-card { flex-direction: row; height: 150px; }
.module-layout.mod-list2 .home-thumb, .module-layout.mod-list2 .list-thumb, .module-layout.mod-list2 .rec-thumb { flex: 0 0 200px; width: 200px; }

/* 模式三: 单列通栏大图 */
.module-layout.mod-full .home-grid, .module-layout.mod-full .list-grid, .module-layout.mod-full .rec-grid { grid-template-columns: 1fr; gap: 22px; }
.module-layout.mod-full .home-card, .module-layout.mod-full .list-card, .module-layout.mod-full .rec-card { flex-direction: row; height: auto; min-height: 200px; }
.module-layout.mod-full .home-thumb, .module-layout.mod-full .list-thumb, .module-layout.mod-full .rec-thumb { flex: 0 0 55%; width: 55%; min-height: 200px; }
.module-layout.mod-full .home-icon, .module-layout.mod-full .list-icon, .module-layout.mod-full .rec-icon { font-size: 64px; }
.module-layout.mod-full .home-body, .module-layout.mod-full .list-body, .module-layout.mod-full .rec-body { padding: 24px 28px; justify-content: center; }
.module-layout.mod-full .home-title, .module-layout.mod-full .list-title, .module-layout.mod-full .rec-name { font-size: 22px; white-space: normal; }
.module-layout.mod-full .home-desc, .module-layout.mod-full .list-desc, .module-layout.mod-full .rec-desc { -webkit-line-clamp: 3; font-size: 13px; }
.module-layout.mod-full .home-foot, .module-layout.mod-full .list-foot, .module-layout.mod-full .rec-meta { margin-top: 14px; }

/* 响应式 */
@media (max-width: 1200px) {
  .module-layout.mod-grid4 .home-grid, .module-layout.mod-grid4 .list-grid, .module-layout.mod-grid4 .rec-grid { grid-template-columns: repeat(2, 1fr); }
  .module-layout.mod-list2 .home-grid, .module-layout.mod-list2 .list-grid, .module-layout.mod-list2 .rec-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .module-layout.mod-grid4 .home-grid, .module-layout.mod-grid4 .list-grid, .module-layout.mod-grid4 .rec-grid { grid-template-columns: 1fr; }
  .module-layout.mod-list2 .home-grid, .module-layout.mod-list2 .list-grid, .module-layout.mod-list2 .rec-grid { grid-template-columns: 1fr; }
  .module-layout.mod-list2 .home-thumb, .module-layout.mod-list2 .list-thumb, .module-layout.mod-list2 .rec-thumb { flex: 0 0 120px; width: 120px; }
  .module-layout.mod-full .home-thumb, .module-layout.mod-full .list-thumb, .module-layout.mod-full .rec-thumb { flex: 0 0 100%; width: 100%; min-height: 160px; }
  .module-layout.mod-full .home-card, .module-layout.mod-full .list-card, .module-layout.mod-full .rec-card { flex-direction: column; }
  .module-layout.mod-full .home-body, .module-layout.mod-full .list-body, .module-layout.mod-full .rec-body { padding: 14px 16px; }
}


/* ══ 主题切换按钮 ══ */
.theme-toggle{width:36px;height:36px;border-radius:50%;border:1px solid var(--color-card-border);background:var(--color-card);color:var(--color-text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;transition:.2s;}
.theme-toggle:hover{border-color:var(--color-primary);transform:rotate(15deg);}

/* ══ 右下角悬浮: 去掉客服外的2个圆形悬浮球 (保留客服球) ══ */
.fab-wrap{ display:none !important; }

/* ══ 移动端: 隐藏页脚(保留客服球), 资源卡片模块改纯文字居中推荐 ══ */
@media (max-width: 767px) {
  .site-footer{ display:none; }
  /* 移动端仅「猜你喜欢」转纯文字列表; 首页/分类卡保留卡片样式 */
  .rec-box.rec-3col .rec-grid{ display:block; }
  .rec-box.rec-3col .rec-card{
    flex-direction:row; align-items:center; justify-content:flex-start;
    background:none; border:none; box-shadow:none; border-radius:0;
    aspect-ratio:auto; height:auto; overflow:visible;
    padding:12px 4px 12px 16px; border-bottom:1px solid rgba(255,255,255,.08);
  }
  .rec-box.rec-3col .rec-thumb,
  .rec-box.rec-3col .rec-icon{ display:none; }
  .rec-box.rec-3col .rec-body{ flex:1; min-width:0; padding:0; }
  .rec-box.rec-3col .rec-name{ min-height:0; white-space:normal; overflow:visible; display:block; font-size:15px; }
  .rec-box.rec-3col .rec-name a{ color:var(--color-text); }
  .rec-box.rec-3col .rec-desc{ margin-top:4px; -webkit-line-clamp:2; color:var(--color-text-dim); }
  .rec-box.rec-3col .rec-meta{ margin-top:4px; gap:12px; color:var(--color-text-faint); }
}

/* ══ 详情页"猜你喜欢": 3 个模块展示, 显示原始比例 (桌面/平板) ══ */
@media (min-width: 768px){
  .rec-box.rec-3col .rec-grid{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .rec-box.rec-3col .rec-card{ flex-direction:column; height:auto; aspect-ratio:auto; overflow:hidden; }
  .rec-box.rec-3col .rec-thumb{ flex:none; width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
  .rec-box.rec-3col .rec-icon{ font-size:64px; }
  .rec-box.rec-3col .rec-body{ flex:none; padding:12px 14px; }
  .rec-box.rec-3col .rec-top{ flex-direction:column; align-items:flex-start; gap:4px; }
  .rec-box.rec-3col .rec-name{ min-height:0; -webkit-line-clamp:2; }
  .rec-box.rec-3col .rec-desc{ -webkit-line-clamp:2; }
}
@media (min-width:768px) and (max-width:1080px){
  .rec-box.rec-3col .rec-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ══ 顶部导航: 对齐 body 宽度 + LOGO/分类约束 + 更多下拉 ══ */
.nav{ padding:0 24px; }
.nav-inner{ max-width:1440px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; padding:13px 0; }
.logo{ flex:0 0 auto; max-width:200px; overflow:hidden; white-space:nowrap; }
.nav-cat{ max-width:6.4em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-more{ position:relative; }
.nav-more-btn{ cursor:pointer; }
.nav-more-menu{ position:absolute; top:100%; left:0; z-index:var(--z-top); margin-top:6px; padding:8px; min-width:190px; background:rgba(16,24,40,.96); border:1px solid rgba(255,255,255,.1); border-radius:12px; box-shadow:0 14px 36px rgba(0,0,0,.5); display:none; flex-direction:column; gap:2px; }
.nav-more:hover .nav-more-menu{ display:flex; }
.nav-more-menu a{ padding:8px 12px; border-radius:8px; color:var(--color-text-muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-more-menu a:hover{ background:rgba(77,163,255,.15); color:#fff; }
@media (min-width:768px){
  .nav-links{ flex:1; min-width:0; display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:4px; }
}

/* ══ 卡片图下: 分类(小圆点+名称)一行 + 标题在下一行 (自适应) ══ */
.home-top,.list-top,.rec-top{ flex-direction:column; align-items:flex-start; gap:4px; margin-bottom:6px; }
.home-cate,.list-cate,.rec-cate{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--color-text-dim); }
.cat-dot{ width:7px; height:7px; border-radius:50%; background:var(--color-primary); flex:none; }
.home-title,.list-title,.rec-name{ width:100%; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
/* 横向(双列)布局卡片改为自适应高度, 避免分类+标题两行被挤压截断 */
.module-layout.mod-list2 .home-card,
.module-layout.mod-list2 .list-card,
.module-layout.mod-list2 .rec-card{ height:auto; min-height:150px; }

/* ══ 猜你喜欢: 高度低于宽度 (缩略图改 16:9, 降低整体高度) ══ */
.rec-box.rec-3col .rec-thumb{ aspect-ratio:16/9; }
.rec-box.rec-3col .rec-icon{ font-size:44px; }

/* ══ 卡片模块: 四列网格只显示标题(隐藏摘要); 双列横向/单列通栏保留摘要 ══ */
.module-layout.mod-grid4 .home-desc,
.module-layout.mod-grid4 .list-desc,
.module-layout.mod-grid4 .rec-desc{ display:none; }

/* ══ 上一篇/下一篇: 模块边框线条可见 ══ */
.post-nav{ border-top:1px solid rgba(255,255,255,.12); padding-top:16px; }
.post-nav-item{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.15); }

/* 导航链接: 首页/分类 永不竖排(不换行不收缩), 空间不足时整体换行 */
@media (min-width:768px){
  .nav-links{ flex:1; min-width:0; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px; }
  .nav-links a{ white-space:nowrap; flex-shrink:0; }
  .nav-more{ flex-shrink:0; }
}

/* 顶部导航: 文字与 logo/按钮垂直居中对齐 (换行也用 align-content 居中) */
@media (min-width:768px){
  .nav-inner{ align-items:center; }
  .nav-links{ align-self:center; align-items:center; align-content:center; }
  .nav-links a{ display:inline-flex; align-items:center; }
  .nav-actions{ align-self:center; align-items:center; }
  .logo{ align-self:center; }
}

/* ══ 语义化面包屑 (ol/li) ══ */
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.breadcrumb li{ list-style:none; display:flex; align-items:center; gap:6px; }
.breadcrumb li+li::before{ content:"›"; color:var(--color-text-faint); }
.breadcrumb li[aria-current="page"]{ color:var(--color-text); }
/* ══ 卡片封面 img 填满 ══ */
.home-thumb img,.list-thumb img,.rec-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.rec-box.rec-3col .rec-thumb{ position:relative; overflow:hidden; }
/* ══ 分类页描述 ══ */
.list-section-title{ font-size:18px; color:var(--color-text); margin:6px 0; }
.cate-desc{ color:var(--color-text-dim); font-size:13px; line-height:1.8; margin:0 0 6px; }
.cate-desc-wrap{ padding:0 20px; }

/* ══ 单列通栏(full): 封面整图 + 所有信息叠图上 ══ */
.module-layout.mod-full .home-card,
.module-layout.mod-full .list-card{ position:relative; height:260px; overflow:hidden; }
.module-layout.mod-full .home-thumb,
.module-layout.mod-full .list-thumb{ position:absolute; inset:0; width:100%; height:100%; flex:none; }
.module-layout.mod-full .home-thumb img,
.module-layout.mod-full .list-thumb img{ width:100%; height:100%; object-fit:cover; }
.module-layout.mod-full .home-body,
.module-layout.mod-full .list-body{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; align-items:center; padding:0 24px; background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 100%); }
.module-layout.mod-full .home-title,
.module-layout.mod-full .list-title{ min-height:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.module-layout.mod-full .home-title a,
.module-layout.mod-full .list-title a{ color:rgba(255,255,255,.92); font-size:22px; text-shadow:0 2px 8px rgba(0,0,0,.55); }
.module-layout.mod-full .home-desc,
.module-layout.mod-full .list-desc{ color:rgba(255,255,255,.78); -webkit-line-clamp:2; text-align:center; max-width:80%; margin-top:6px; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.module-layout.mod-full .home-cate,
.module-layout.mod-full .list-cate{ position:absolute; left:20px; bottom:42px; color:#fff; background:rgba(0,0,0,.45); padding:2px 12px; border-radius:12px; font-size:12px; }
.module-layout.mod-full .home-foot,
.module-layout.mod-full .list-foot{ position:absolute; left:20px; right:20px; bottom:14px; justify-content:space-between; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.module-layout.mod-full .home-foot .home-perm,
.module-layout.mod-full .list-foot .list-perm{ margin-left:auto; }
/* 浅色模式: 图上文字仍白色, 叠加层保持深色 */
[data-theme="light"] .module-layout.mod-full .home-title a,
[data-theme="light"] .module-layout.mod-full .list-title a{ color:rgba(255,255,255,.92); }
[data-theme="light"] .module-layout.mod-full .home-desc,
[data-theme="light"] .module-layout.mod-full .list-desc{ color:rgba(255,255,255,.78); }
[data-theme="light"] .module-layout.mod-full .home-cate,
[data-theme="light"] .module-layout.mod-full .list-cate{ color:#fff; background:rgba(0,0,0,.45); }
[data-theme="light"] .module-layout.mod-full .home-foot,
[data-theme="light"] .module-layout.mod-full .list-foot{ color:#fff; }

/* 详情页"猜你喜欢"标题: 收敛字号与间距 */
.rec-title{ font-size:15px; margin:0 0 10px; }

/* ══ 详情页文章标签 ══ */
.post-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; }
.post-tags-label{ color:var(--color-text-faint); font-size:13px; }
.post-tag{ display:inline-block; padding:3px 12px; border-radius:20px; background:var(--color-card); border:1px solid var(--color-card-border); color:var(--color-text-dim); font-size:12px; text-decoration:none; transition:.2s; }
.post-tag:hover{ border-color:var(--color-primary); color:var(--color-primary); }
[data-theme="light"] .post-tag{ background:#fff; border-color:#d5dbe8; color:#4a5568; }
[data-theme="light"] .post-tag:hover{ border-color:#5b8cff; color:#2e7fd9; }

/* ══ 面包屑: 与 BODY 同宽(1440) 两端凸出于正文列 ══ */
.breadcrumb{ max-width:1360px; }

/* ══ 分类页排序框: 上移 + 分类标签行 ══ */
.filter-bar{ margin-top:12px; }
.cat-tag-row{ margin-bottom:20px; }
.cat-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.cat-tag{ padding:3px 12px; border-radius:20px; background:var(--color-card); border:1px solid var(--color-card-border); color:var(--color-text-dim); font-size:12px; text-decoration:none; transition:.2s; }
.cat-tag:hover{ border-color:var(--color-primary); color:var(--color-primary); }
[data-theme="light"] .cat-tag{ background:#fff; border-color:#d5dbe8; color:#4a5568; }
[data-theme="light"] .cat-tag:hover{ border-color:#5b8cff; color:#2e7fd9; }

/* ══ 分页横向排列 (ul.pagination 默认块级导致 li 竖排, 改为 flex) ══ */
.pagination{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; list-style:none; margin:0; padding:0; }
.pagination li{ display:block; }