/* ============================================================
 * 瑞帆雷MODS - EURO TRUCK SIMULATOR INDUSTRIAL RACING STYLE
 *
 * 设计理念: 欧洲卡车模拟器 x 越野竞技 x 电竞赛车
 * 核心元素: 沥青路面 / 金属工业 / 橙色警示 / 碳纤维
 * 禁止: 紫色 / AI深蓝风 / emoji
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800;900&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* ===== 工业色系 - 沥青/金属/警示橙 ===== */
    --asphalt-0: #0a0a0a;
    --asphalt-1: #111111;
    --asphalt-2: #1a1a1a;
    --asphalt-3: #242424;
    --asphalt-4: #2e2e2e;
    --asphalt-5: #3a3a3a;

    /* 金属灰 */
    --metal-dark: #3d3d3d;
    --metal-mid: #6b6b6b;
    --metal-light: #9e9e9e;
    --metal-bright: #c8c8c8;

    /* 警示橙 - 主强调色 */
    --warning-core: #ff6b00;
    --warning-bright: #ff8c00;
    --warning-glow: #ffa040;
    --warning-dim: #cc5500;
    --warning-subtle: rgba(255, 107, 0, 0.12);

    /* 电竞青绿 - 辅助强调 */
    --cyber-cyan: #00e5b8;
    --cyber-teal: #00b894;
    --cyber-acid: #39ff14;

    /* 危险红 */
    --danger-core: #dc2626;
    --danger-bright: #ef4444;

    /* 渐变系统 */
    --grad-asphalt: linear-gradient(180deg, var(--asphalt-1) 0%, var(--asphalt-0) 100%);
    --grad-metal: linear-gradient(180deg, var(--asphalt-3) 0%, var(--asphalt-2) 100%);
    --grad-warning: linear-gradient(135deg, var(--warning-core) 0%, var(--warning-bright) 100%);
    --grad-warning-reverse: linear-gradient(135deg, var(--warning-bright) 0%, var(--warning-core) 100%);
    --grad-cyber: linear-gradient(135deg, var(--cyber-cyan) 0%, var(--cyber-teal) 100%);
    --grad-danger: linear-gradient(135deg, var(--danger-core) 0%, var(--danger-bright) 100%);

    /* 材质效果 */
    --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

    /* 阴影系统 - 工业硬阴影 */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.8);
    --shadow-warning: 0 4px 20px rgba(255, 107, 0, 0.35);
    --shadow-cyber: 0 4px 20px rgba(0, 229, 184, 0.25);

    /* 文字 */
    --text-primary: #f0f0f0;
    --text-secondary: #9a9a9a;
    --text-muted: #606060;
    --text-warning: var(--warning-bright);
    --text-cyber: var(--cyber-cyan);

    /* 字体 */
    --font-display: 'Orbitron', 'Rajdhani', sans-serif;
    --font-ui: 'Rajdhani', 'Inter', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* 间距 */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;
    --sp-2xl: 48px;

    /* 圆角 - 工业风格偏锐利 */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* 动画 */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html {
    scroll-behavior: smooth;
    font-size: 15px;
}

body {
    min-height: 100vh;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--asphalt-0);
    /* 沥青路面纹理背景 */
    background-image:
        /* 噪点纹理 */
        var(--texture-noise),
        /* 微妙的网格线 - 道路标线感 */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 99px,
            rgba(255, 107, 0, 0.02) 99px,
            rgba(255, 107, 0, 0.02) 100px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 99px,
            rgba(255, 107, 0, 0.02) 99px,
            rgba(255, 107, 0, 0.02) 100px
        );
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* 顶部环境光 - 模拟路灯/车灯效果 */
body::before {
    content: "";
    position: fixed;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 600px;
    background: radial-gradient(
        ellipse at center top,
        rgba(255, 140, 0, 0.06) 0%,
        rgba(255, 107, 0, 0.03) 30%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

/* 底部反光 - 模拟湿沥青反射 */
body::after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(
        to top,
        rgba(255, 140, 0, 0.03) 0%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--asphalt-1); }
::-webkit-scrollbar-thumb {
    background: var(--asphalt-4);
    border: 1px solid var(--asphalt-3);
}
::-webkit-scrollbar-thumb:hover { background: var(--warning-core); }

::selection {
    background: rgba(255, 107, 0, 0.25);
    color: var(--text-primary);
}

a {
    color: var(--warning-bright);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--warning-glow); text-decoration: underline; }

img { max-width: 100%; display: block; }

.wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--sp-lg);
    position: relative;
    z-index: 1;
}

/* ============================================================
 * 顶部导航栏 - 工业金属驾驶舱风格
 * ============================================================ */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 2px solid var(--asphalt-3);
    box-shadow:
        0 2px 0 var(--warning-core),
        0 4px 24px rgba(0, 0, 0, 0.8);
}
.topbar-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 var(--sp-lg);
    height: 64px;
}

/* 品牌 Logo - 金属铭牌风格 */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(255, 107, 0, 0.3);
}
.brand-logo {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 900;
    color: var(--asphalt-0);
    background: var(--grad-warning);
    position: relative;
    clip-path: polygon(
        10% 0%, 90% 0%, 100% 10%, 100% 90%,
        90% 100%, 10% 100%, 0% 90%, 0% 10%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 0 20px rgba(255, 107, 0, 0.4);
    transition: all 0.3s var(--ease-spring);
}
.brand:hover .brand-logo {
    transform: scale(1.08) rotate(-3deg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 0 30px rgba(255, 107, 0, 0.6);
}
.brand-logo-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: inherit;
}

/* 导航菜单 - 仪表盘按钮风格 */
.nav {
    margin-left: 40px;
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    position: relative;
}
.nav a {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 10px 18px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    transition: all 0.25s ease;
    border-bottom: 2px solid transparent;
}
.nav a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: calc(100% - 36px);
    height: 2px;
    background: var(--grad-warning);
    transition: transform 0.3s var(--ease-out);
}
.nav a:hover {
    color: var(--text-primary);
    background: rgba(255, 107, 0, 0.06);
    text-decoration: none;
}
.nav a:hover::before {
    transform: translateX(-50%) scaleX(1);
}
.nav a.active {
    color: var(--warning-bright);
    background: rgba(255, 107, 0, 0.08);
    border-bottom-color: var(--warning-core);
}
.nav a.active::before {
    transform: translateX(-50%) scaleX(1);
}

/* CTA 按钮 - 液态玻璃引擎启动风格 */
.nav a.cta {
    margin-left: auto;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffd699;
    background: rgba(255, 107, 0, 0.14);
    padding: 10px 22px;
    border: 1px solid rgba(255, 140, 0, 0.28);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;

    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.12),
        inset -1px 1px 0 rgba(255, 255, 255, 0.08),
        inset 4px -4px 0 rgba(255, 255, 255, 0.06),
        inset -4px 4px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(255, 107, 0, 0.25);

    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    filter: brightness(1.02);

    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav a.cta::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 32%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 18px);
    height: calc(100% - 18px);
    border-radius: 10px;
    border: 1px solid rgba(255, 160, 64, 0.2);
    filter: blur(6px);
}
.nav a.cta::after {
    z-index: 2;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    filter: blur(2px);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.22) 0%,
        transparent 28%,
        transparent 72%,
        rgba(255, 255, 255, 0.12) 100%
    );
    pointer-events: none;
}
.nav a.cta:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px) scale(1.01);
    background: rgba(255, 107, 0, 0.20);
    border-color: rgba(255, 140, 0, 0.45);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.16),
        inset -1px 1px 0 rgba(255, 255, 255, 0.10),
        inset 4px -4px 0 rgba(255, 255, 255, 0.08),
        inset -4px 4px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        0 8px 28px rgba(255, 107, 0, 0.40),
        0 0 24px rgba(255, 107, 0, 0.12);
    filter: brightness(1.06);
}

/* 导航指示条 */
.nav-indicator {
    position: absolute;
    bottom: -2px;
    height: 2px;
    background: var(--grad-warning);
    box-shadow: 0 0 12px rgba(255, 107, 0, 0.6);
    transition: left 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.2s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

/* ============================================================
 * 工业面板通用样式
 * ============================================================ */
.glass {
    background: var(--grad-metal);
    border: 1px solid var(--asphalt-4);
    border-top: 2px solid var(--asphalt-4);
    border-radius: var(--radius-md);
    position: relative;
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: all 0.3s ease;
}
.glass::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 107, 0, 0.3),
        transparent
    );
}
.glass:hover {
    border-color: var(--metal-dark);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 107, 0, 0.1);
    transform: translateY(-2px);
}
.glass-2 {
    background: linear-gradient(180deg, var(--asphalt-2) 0%, var(--asphalt-1) 100%);
    border: 1px solid var(--asphalt-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: all 0.3s ease;
}
.glass-3 {
    background: var(--asphalt-3);
    border: 1px solid var(--asphalt-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* ============================================================
 * 页面主体
 * ============================================================ */
.main {
    padding: 24px 0 56px;
}
.main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
}
.col-main { min-width: 0; }
.col-side { min-width: 0; }

/* ============================================================
 * MOD 卡片 - 碳纤维赛车部件风格
 * ============================================================ */
.mod-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    padding: 18px;
    margin-bottom: 14px;
    background: var(--grad-metal);
    border: 1px solid var(--asphalt-4);
    border-left: 3px solid var(--asphalt-4);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    transition: all 0.35s var(--ease-out);
    box-shadow: var(--shadow-md);
}
/* 卡片左边缘装饰线 - 激活时亮起 */
.mod-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--grad-warning);
    opacity: 0;
    transition: opacity 0.3s ease;
}
/* 顶部高光线 */
.mod-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 107, 0, 0.2) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mod-card:hover {
    border-left-color: var(--warning-core);
    border-color: var(--metal-dark);
    transform: translateX(4px);
    box-shadow:
        var(--shadow-xl),
        0 0 30px rgba(255, 107, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.mod-card:hover::before { opacity: 1; }
.mod-card:hover::after { opacity: 1; }
.mod-card:active { transform: translateX(2px); }

/* 封面图 - 金属边框显示器风格 */
.mod-cover {
    position: relative;
    width: 220px;
    height: 138px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--asphalt-2);
    border: 2px solid var(--asphalt-4);
    transition: all 0.35s var(--ease-out);
}
.mod-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 107, 0, 0);
    pointer-events: none;
    transition: border-color 0.3s ease;
    z-index: 2;
}
.mod-card:hover .mod-cover {
    border-color: var(--warning-core);
    box-shadow: var(--shadow-warning), inset 0 0 20px rgba(255, 107, 0, 0.1);
}
.mod-card:hover .mod-cover::before {
    border-color: rgba(255, 107, 0, 0.4);
}
.mod-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s var(--ease-out);
    filter: saturate(0.85) contrast(1.05);
}
.mod-card:hover .mod-cover img {
    transform: scale(1.06);
    filter: saturate(1.1) contrast(1.08);
}
.mod-cover .placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-size: 13px;
    font-family: var(--font-ui);
    letter-spacing: 1px;
    background:
        repeating-linear-gradient(
            -45deg,
            var(--asphalt-2),
            var(--asphalt-2) 8px,
            var(--asphalt-3) 8px,
            var(--asphalt-3) 16px
        );
}

/* MOD 信息区 */
.mod-body { padding: 2px 0; min-width: 0; }
.mod-title {
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.35;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    text-transform: uppercase;
}

/* 元数据行 - 仪表盘数据风格 */
.mod-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--text-secondary);
    font-size: 12px;
    font-family: var(--font-ui);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}
.mod-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
}
.mod-meta .meta-item::before {
    content: "";
    width: 4px;
    height: 4px;
    background: var(--warning-core);
    border-radius: 0;
    display: inline-block;
}

/* 标签 - 反光贴纸风格 */
.tag {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    background: var(--asphalt-3);
    color: var(--text-secondary);
    border: 1px solid var(--asphalt-4);
    border-radius: var(--radius-xs);
    vertical-align: middle;
    transition: all 0.25s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
}
.tag::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.08),
        transparent
    );
    transition: left 0.4s ease;
}
.tag:hover {
    transform: translateY(-1px);
    border-color: var(--metal-mid);
}
.tag:hover::before { left: 150%; }
.tag.cat {
    background: rgba(0, 184, 148, 0.1);
    color: var(--cyber-teal);
    border-color: rgba(0, 184, 148, 0.25);
}
.tag.hot {
    background: rgba(220, 38, 38, 0.1);
    color: var(--danger-bright);
    border-color: rgba(220, 38, 38, 0.25);
}
.mod-meta .tag {
    background: rgba(255, 107, 0, 0.1);
    color: var(--warning-bright);
    border-color: rgba(255, 107, 0, 0.25);
}

/* 描述文字 */
.mod-desc {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
 * 右侧栏 - 工业控制面板风格
 * ============================================================ */
.side-block {
    margin-bottom: 16px;
    padding: 20px;
    background: var(--grad-metal);
    border: 1px solid var(--asphalt-4);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}
.side-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--warning-core),
        transparent 80%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}
.side-block:hover {
    border-color: var(--metal-dark);
    transform: translateX(-3px);
    box-shadow: var(--shadow-lg);
}
.side-block:hover::before { opacity: 1; }

/* 侧栏标题 - 面板标签风格 */
.side-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--warning-bright);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--asphalt-4);
    letter-spacing: 3px;
    text-transform: uppercase;
    position: relative;
}
.side-title::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 40px;
    height: 1px;
    background: var(--grad-warning);
}

/* 站长卡片 - 驾驶员档案风格 */
.webmaster-card {
    text-align: center;
    padding: 26px 22px;
    background: var(--grad-metal);
    border: 1px solid var(--asphalt-4);
    border-radius: var(--radius-md);
}
.webmaster-avatar {
    width: 88px;
    height: 88px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--grad-warning);
    border: 3px solid var(--asphalt-3);
    outline: 2px solid var(--warning-core);
    outline-offset: 2px;
    display: grid;
    place-items: center;
    color: var(--asphalt-0);
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 900;
    overflow: hidden;
    box-shadow:
        0 0 30px rgba(255, 107, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
    transition: all 0.4s var(--ease-spring);
    position: relative;
}
/* 头像光环动画 */
.webmaster-avatar::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(255, 107, 0, 0);
    transition: border-color 0.4s ease;
}
.webmaster-avatar:hover {
    transform: scale(1.08) rotate(3deg);
    box-shadow:
        0 0 40px rgba(255, 107, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
}
.webmaster-avatar:hover::after {
    border-color: rgba(255, 107, 0, 0.4);
}
.webmaster-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.webmaster-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* ---- 认证行（图标 + 文字） ---- */
.verify-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

/* ---- 认证徽章 + 扫光效果 ---- */
.verify-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 1.5px solid rgba(0, 229, 184, 0.35);
    cursor: default;
    flex-shrink: 0;

    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.10),
        inset -1px 1px 0 rgba(255, 255, 255, 0.05),
        0 0 12px rgba(0, 229, 184, 0.15);

    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.verify-badge:hover {
    border-color: rgba(0, 229, 184, 0.65);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.14),
        inset -1px 1px 0 rgba(255, 255, 255, 0.08),
        0 0 20px rgba(0, 229, 184, 0.30),
        0 0 40px rgba(0, 229, 184, 0.10);
    transform: scale(1.12);
}

/* 扫光遮罩层 */
.verify-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 245, 208, 0.30) 50%,
        transparent 100%
    );
    animation: verifyScan 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes verifyScan {
    0% { left: -60%; opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { left: 160%; opacity: 0; }
}

/* 认证图标 */
.verify-icon {
    width: 14px;
    height: 14px;
    filter: drop-shadow(0 0 3px rgba(0, 229, 184, 0.5));
    transition: filter 0.3s ease;
}
.verify-badge:hover .verify-icon {
    filter: drop-shadow(0 0 6px rgba(0, 229, 184, 0.8));
}

/* 认证文字 */
.verify-text {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    line-height: 1.3;
}
.verify-no {
    color: #00e5b8;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.webmaster-intro {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.7;
}

/* 社交链接 - 方形工业按钮 */
.webmaster-socials {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.webmaster-socials a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;

    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.08),
        inset -1px 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3);

    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);

    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.webmaster-socials a:hover {
    color: #ffd699;
    background: rgba(255, 107, 0, 0.12);
    border-color: rgba(255, 140, 0, 0.30);
    text-decoration: none;
    transform: translateY(-3px) scale(1.05);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.12),
        inset -1px 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        0 6px 18px rgba(255, 107, 0, 0.28);
}

/* 联系卡片 */
.contact-card { padding: 20px; }
.contact-list { display: flex; flex-direction: column; gap: 8px; }

/* ---- 液态玻璃联系卡片项 ---- */
.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 107, 0, 0.06);
    border: 1px solid rgba(255, 140, 0, 0.15);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-secondary);

    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.08),
        inset -1px 1px 0 rgba(255, 255, 255, 0.04),
        inset 4px -4px 0 rgba(255, 255, 255, 0.03),
        inset -4px 4px 0 rgba(255, 255, 255, 0.02),
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        0 2px 10px rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);

    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.contact-item:hover {
    background: rgba(255, 107, 0, 0.12);
    border-color: rgba(255, 140, 0, 0.32);
    color: var(--text-primary);
    text-decoration: none;
    transform: translateX(4px) scale(1.01);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.11),
        inset -1px 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px rgba(0, 0, 0, 0.30),
        0 4px 16px rgba(255, 107, 0, 0.18),
        -4px 0 0 rgba(255, 140, 0, 0.5);
}

/* 液态玻璃联系标签 */
.contact-label {
    flex-shrink: 0;
    width: 46px;
    height: 24px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #ffd699;
    background: rgba(255, 107, 0, 0.14);
    border: 1px solid rgba(255, 140, 0, 0.28);
    border-radius: 7px;

    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.14),
        inset -1px 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(0, 0, 0, 0.3),
        0 1px 6px rgba(255, 107, 0, 0.22);

    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
}
.contact-email {
    font-size: 12px;
    font-family: "SF Mono", "Consolas", "Monaco", monospace;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.contact-item:hover .contact-email { color: var(--text-primary); }

/* 排行榜列表 - 数据终端风格 */
.rank-list { padding: 8px 20px 14px; }
.rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--asphalt-3);
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}
.rank-item:last-child { border-bottom: none; }
.rank-item:hover {
    color: var(--text-primary);
    padding-left: 6px;
}
.rank-item .num {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    background: var(--asphalt-3);
    color: var(--text-muted);
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}
/* 前三名特殊样式 - 奖杯金属质感 */
.rank-item:nth-child(1) .num {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: var(--asphalt-0);
    box-shadow: 0 2px 8px rgba(255, 183, 0, 0.4);
}
.rank-item:nth-child(2) .num {
    background: linear-gradient(135deg, #b8b8b8, #8a8a8a);
    color: var(--asphalt-0);
}
.rank-item:nth-child(3) .num {
    background: linear-gradient(135deg, #cd7f32, #a0522d);
    color: #fff;
}
.rank-item a {
    color: inherit;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.rank-item a:hover {
    color: var(--warning-bright);
    text-decoration: none;
}

/* ============================================================
 * 按钮系统 - 液态玻璃风格 (iOS Liquid Glass x 工业竞技)
 *
 * 核心技术来源: yetai 液态玻璃样式
 * 适配: 深色沥青背景 + 警示橙/电竞青色调
 * ============================================================ */

/* ---- 液态玻璃基础层 ---- */
.btn {
    --lg-bg: rgba(255, 107, 0, 0.12);
    --lg-border: rgba(255, 140, 0, 0.25);
    --lg-glow: rgba(255, 107, 0, 0.35);
    --lg-text: #ffd699;
    --lg-shadow: rgba(255, 107, 0, 0.25);
    --lg-reflection: rgba(255, 255, 255, 0.18);
    --lg-inner-glow: rgba(255, 160, 64, 0.15);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 26px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--lg-text);
    background: var(--lg-bg);
    border: 1px solid var(--lg-border);
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;

    /* 液态玻璃核心：多层内阴影模拟厚度与折射 */
    box-shadow:
        /* 顶部高光边缘 */
        inset 1px -1px 0 rgba(255, 255, 255, 0.12),
        inset -1px 1px 0 rgba(255, 255, 255, 0.08),
        /* 内部深度折射 */
        inset 4px -4px 0 rgba(255, 255, 255, 0.06),
        inset -4px 4px 0 rgba(255, 255, 255, 0.04),
        /* 内边框暗线 */
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        /* 外投影 */
        0 4px 16px var(--lg-shadow),
        0 1px 3px rgba(0, 0, 0, 0.5);

    /* 毛玻璃模糊 */
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);

    /* 微调亮度增强玻璃感 */
    filter: brightness(1.02);

    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 液态玻璃 ::before - 内部光晕环（模拟液体折射中心） */
.btn::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 32%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 18px);
    height: calc(100% - 18px);
    border-radius: 10px;
    border: 1px solid rgba(255, 160, 64, 0.2);
    filter: blur(6px);
    opacity: 0.7;
    transition: all 0.35s ease;
}

/* 液态玻璃 ::after - 表面反射光泽（模拟液体表面反光） */
.btn::after {
    z-index: 2;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    filter: blur(2px);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.22) 0%,
        transparent 28%,
        transparent 72%,
        rgba(255, 255, 255, 0.12) 100%
    );
    transition: all 0.4s ease;
    pointer-events: none;
}

/* 内圈装饰线 */
.btn .btn-inner-ring {
    position: absolute;
    z-index: 1;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    filter: blur(0.5px);
    pointer-events: none;
}

/* Hover 状态 - 液体上浮发光 */
.btn:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px) scale(1.01);
    --lg-bg: rgba(255, 107, 0, 0.18);
    --lg-border: rgba(255, 140, 0, 0.45);
    --lg-glow: rgba(255, 107, 0, 0.5);
    --lg-shadow: rgba(255, 107, 0, 0.4);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.16),
        inset -1px 1px 0 rgba(255, 255, 255, 0.10),
        inset 4px -4px 0 rgba(255, 255, 255, 0.08),
        inset -4px 4px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        0 8px 28px var(--lg-shadow),
        0 2px 6px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(255, 107, 0, 0.12);
    filter: brightness(1.06);
}
.btn:hover::before {
    border-color: rgba(255, 180, 80, 0.35);
    filter: blur(8px);
    opacity: 1;
}
.btn:hover::after {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.30) 0%,
        transparent 24%,
        transparent 76%,
        rgba(255, 255, 255, 0.16) 100%
    );
}

/* Active 状态 - 按压下沉（液体压缩） */
.btn:active {
    transform: translateY(0) scale(0.98);
    --lg-bg: rgba(255, 107, 0, 0.22);
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.3),
        inset -1px -1px 2px rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px rgba(0, 0, 0, 0.45),
        0 2px 8px rgba(255, 107, 0, 0.2);
    filter: brightness(0.96);
}
.btn:active::before { opacity: 0.4; }
.btn:active::after { opacity: 0.5; }

/* ---- 电竞青色变体 ---- */
.btn-cyan {
    --lg-bg: rgba(0, 229, 184, 0.10);
    --lg-border: rgba(0, 229, 184, 0.22);
    --lg-glow: rgba(0, 229, 184, 0.30);
    --lg-text: #a0fff0;
    --lg-shadow: rgba(0, 229, 184, 0.20);
    --lg-reflection: rgba(0, 229, 184, 0.14);
    --lg-inner-glow: rgba(0, 245, 208, 0.12);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.10),
        inset -1px 1px 0 rgba(255, 255, 255, 0.06),
        inset 4px -4px 0 rgba(255, 255, 255, 0.05),
        inset -4px 4px 0 rgba(255, 255, 255, 0.03),
        inset 0 0 0 1px rgba(0, 0, 0, 0.42),
        0 4px 16px var(--lg-shadow),
        0 1px 3px rgba(0, 0, 0, 0.5);
}
.btn-cyan:hover {
    --lg-bg: rgba(0, 229, 184, 0.16);
    --lg-border: rgba(0, 229, 184, 0.40);
    --lg-shadow: rgba(0, 229, 184, 0.35);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.14),
        inset -1px 1px 0 rgba(255, 255, 255, 0.08),
        inset 4px -4px 0 rgba(255, 255, 255, 0.07),
        inset -4px 4px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 1px rgba(0, 0, 0, 0.36),
        0 8px 28px var(--lg-shadow),
        0 2px 6px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(0, 229, 184, 0.10);
}
.btn-cyan::before { border-color: rgba(0, 229, 184, 0.18); }
.btn-cyan:hover::before { border-color: rgba(0, 245, 208, 0.30); }

/* ---- 危险红色变体 ---- */
.btn-danger {
    --lg-bg: rgba(220, 38, 38, 0.12);
    --lg-border: rgba(239, 68, 68, 0.25);
    --lg-glow: rgba(239, 68, 68, 0.30);
    --lg-text: #ffaaaa;
    --lg-shadow: rgba(220, 38, 38, 0.22);
    --lg-reflection: rgba(255, 255, 255, 0.14);
    --lg-inner-glow: rgba(255, 120, 120, 0.12);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.10),
        inset -1px 1px 0 rgba(255, 255, 255, 0.06),
        inset 4px -4px 0 rgba(255, 255, 255, 0.05),
        inset -4px 4px 0 rgba(255, 255, 255, 0.03),
        inset 0 0 0 1px rgba(0, 0, 0, 0.42),
        0 4px 16px var(--lg-shadow),
        0 1px 3px rgba(0, 0, 0, 0.5);
}
.btn-danger:hover {
    --lg-bg: rgba(220, 38, 38, 0.18);
    --lg-border: rgba(239, 68, 68, 0.42);
    --lg-shadow: rgba(220, 38, 38, 0.38);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.14),
        inset -1px 1px 0 rgba(255, 255, 255, 0.08),
        inset 4px -4px 0 rgba(255, 255, 255, 0.07),
        inset -4px 4px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 1px rgba(0, 0, 0, 0.36),
        0 8px 28px var(--lg-shadow),
        0 2px 6px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(220, 38, 38, 0.10);
}
.btn-danger::before { border-color: rgba(239, 68, 68, 0.18); }
.btn-danger:hover::before { border-color: rgba(255, 120, 120, 0.30); }

/* ---- 尺寸变体 ---- */
.btn-block { display: flex; width: 100%; padding: 13px 28px; }
.btn-lg {
    padding: 14px 34px;
    font-size: 14px;
    border-radius: 14px;
}
.btn-sm {
    padding: 7px 16px;
    font-size: 11px;
    border-radius: 8px;
}
.btn-sm::before { width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 6px; }
.btn-sm::after { border-radius: 8px; }

/* ---- 幽灵/轮廓按钮（透明底液态玻璃）---- */
.btn-ghost {
    --lg-bg: rgba(255, 255, 255, 0.04);
    --lg-border: rgba(255, 255, 255, 0.12);
    --lg-glow: rgba(255, 255, 255, 0.08);
    --lg-text: var(--text-secondary);
    --lg-shadow: rgba(0, 0, 0, 0.2);
    --lg-reflection: rgba(255, 255, 255, 0.08);
    --lg-inner-glow: rgba(255, 255, 255, 0.04);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.08),
        inset -1px 1px 0 rgba(255, 255, 255, 0.05),
        inset 4px -4px 0 rgba(255, 255, 255, 0.03),
        inset -4px 4px 0 rgba(255, 255, 255, 0.02),
        inset 0 0 0 1px rgba(0, 0, 0, 0.45),
        0 2px 10px rgba(0, 0, 0, 0.3);
}
.btn-ghost:hover {
    --lg-bg: rgba(255, 255, 255, 0.08);
    --lg-border: rgba(255, 255, 255, 0.22);
    --lg-text: var(--text-primary);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.12),
        inset -1px 1px 0 rgba(255, 255, 255, 0.07),
        inset 4px -4px 0 rgba(255, 255, 255, 0.05),
        inset -4px 4px 0 rgba(255, 255, 255, 0.03),
        inset 0 0 0 1px rgba(0, 0, 0, 0.40),
        0 6px 20px rgba(0, 0, 0, 0.35);
}
.btn-ghost::before { border-color: rgba(255, 255, 255, 0.08); }
.btn-ghost:hover::before { border-color: rgba(255, 255, 255, 0.18); }

/* ============================================================
 * 表单控件 - 工业输入终端风格
 * ============================================================ */
.field { margin-bottom: 18px; }
.field label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
/* ---- 液态玻璃表单元素 ---- */
.input, .textarea, .select {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    outline: none;

    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.06),
        inset -1px 1px 0 rgba(255, 255, 255, 0.03),
        inset 0 0 0 1px rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);

    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.input:focus, .textarea:focus, .select:focus {
    border-color: rgba(255, 140, 0, 0.40);
    background: rgba(255, 107, 0, 0.04);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.08),
        inset -1px 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 1px rgba(0, 0, 0, 0.30),
        0 0 0 3px rgba(255, 107, 0, 0.12),
        0 4px 20px rgba(0, 0, 0, 0.4);
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }

.file-input {
    display: block;
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.file-input:hover {
    border-color: rgba(255, 140, 0, 0.30);
    background: rgba(255, 107, 0, 0.04);
}
.file-input::file-selector-button {
    margin-right: 14px;
    padding: 8px 16px;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffd699;
    background: rgba(255, 107, 0, 0.14);
    border: 1px solid rgba(255, 140, 0, 0.28);
    border-radius: 7px;
    cursor: pointer;

    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.12),
        inset -1px 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px rgba(0, 0, 0, 0.3),
        0 1px 6px rgba(255, 107, 0, 0.2);

    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);

    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.file-input::file-selector-button:hover {
    background: rgba(255, 107, 0, 0.22);
    border-color: rgba(255, 140, 0, 0.45);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.16),
        inset -1px 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(0, 0, 0, 0.28),
        0 2px 12px rgba(255, 107, 0, 0.32);
}

/* ============================================================
 * 详情页
 * ============================================================ */
.detail {
    padding: 24px;
    margin-bottom: 20px;
    background: var(--grad-metal);
    border: 1px solid var(--asphalt-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.detail-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 16px;
    line-height: 1.25;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    text-shadow: 0 0 30px rgba(255, 107, 0, 0.2);
}
.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: var(--font-ui);
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--asphalt-4);
    letter-spacing: 0.5px;
}
.detail-cover {
    width: 100%;
    max-width: 780px;
    margin: 0 auto 24px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--asphalt-4);
    box-shadow: var(--shadow-lg);
}
.detail-cover img { width: 100%; height: auto; display: block; }
.detail-desc {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.85;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 下载区域 - 加油站泵风格 */
.download-box {
    margin: 28px 0;
    padding: 32px;
    text-align: center;
    background: var(--asphalt-1);
    border: 2px solid var(--asphalt-4);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}
.download-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff6b00, #42a5f5, #66bb6a, #ab47bc, #ff6b00);
    background-size: 200% 100%;
}
.download-box.has-multi-disk::before {
    animation: diskGradientShift 4s ease-in-out infinite;
}
@keyframes diskGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.download-box::after {
    content: "DOWNLOAD";
    position: absolute;
    top: 8px;
    right: 12px;
    font-family: var(--font-display);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--text-muted);
    opacity: 0.4;
}
.download-box .tip {
    color: var(--text-secondary);
    font-size: 14px;
    font-family: var(--font-ui);
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}
.download-box.locked .tip { color: var(--warning-bright); }
.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 48px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #a0fff0;
    background: rgba(0, 229, 184, 0.10);
    border: 1px solid rgba(0, 229, 184, 0.24);
    border-radius: 16px;
    text-decoration: none;
    position: relative;
    overflow: hidden;

    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.10),
        inset -1px 1px 0 rgba(255, 255, 255, 0.06),
        inset 4px -4px 0 rgba(255, 255, 255, 0.05),
        inset -4px 4px 0 rgba(255, 255, 255, 0.03),
        inset 0 0 0 1px rgba(0, 0, 0, 0.42),
        0 6px 24px rgba(0, 229, 184, 0.20);

    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    filter: brightness(1.02);

    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.btn-download::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 22px);
    height: calc(100% - 22px);
    border-radius: 13px;
    border: 1px solid rgba(0, 245, 208, 0.18);
    filter: blur(7px);
}
.btn-download::after {
    z-index: 2;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    filter: blur(2px);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.18) 0%,
        transparent 26%,
        transparent 74%,
        rgba(0, 229, 184, 0.10) 100%
    );
    pointer-events: none;
}
.btn-download:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-3px) scale(1.01);
    background: rgba(0, 229, 184, 0.16);
    border-color: rgba(0, 229, 184, 0.40);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.14),
        inset -1px 1px 0 rgba(255, 255, 255, 0.08),
        inset 4px -4px 0 rgba(255, 255, 255, 0.07),
        inset -4px 4px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 1px rgba(0, 0, 0, 0.36),
        0 10px 36px rgba(0, 229, 184, 0.36),
        0 0 30px rgba(0, 229, 184, 0.12);
    filter: brightness(1.06);
}

/* ---- 多网盘下载按钮容器 ---- */
.download-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

/* ---- 夸克网盘（主线路）- 警示橙 ---- */
.btn-disk-quark {
    --lg-bg: rgba(255, 107, 0, 0.14);
    --lg-border: rgba(255, 140, 0, 0.28);
    --lg-text: #ffd699;
    --lg-glow: rgba(255, 107, 0, 0.30);
}
.btn-disk-quark:hover {
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.18),
        inset -1px 1px 0 rgba(255, 255, 255, 0.10),
        inset 4px -4px 0 rgba(255, 255, 255, 0.08),
        inset -4px 4px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        0 10px 36px rgba(255, 107, 0, 0.42),
        0 0 30px rgba(255, 107, 0, 0.15);
}

/* ---- 百度网盘（备用）- 百度蓝 ---- */
.btn-disk-baidu {
    --lg-bg: rgba(66, 165, 245, 0.10);
    --lg-border: rgba(66, 165, 245, 0.22);
    --lg-text: #b3d9ff;
    --lg-glow: rgba(66, 165, 245, 0.20);
    padding: 13px 36px;
    font-size: 13px;
}
.btn-disk-baidu::before { border-color: rgba(100, 181, 246, 0.16); }
.btn-disk-baidu::after {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.16) 0%,
        transparent 26%,
        transparent 74%,
        rgba(66, 165, 245, 0.08) 100%
    );
}
.btn-disk-baidu:hover {
    color: #fff;
    background: rgba(66, 165, 245, 0.16);
    border-color: rgba(66, 165, 245, 0.38);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.14),
        inset -1px 1px 0 rgba(255, 255, 255, 0.08),
        inset 4px -4px 0 rgba(255, 255, 255, 0.07),
        inset -4px 4px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 1px rgba(0, 0, 0, 0.36),
        0 8px 28px rgba(66, 165, 245, 0.32),
        0 0 24px rgba(66, 165, 245, 0.10);
}

/* ---- 城通网盘（备用）- 翠绿 ---- */
.btn-disk-ctfile {
    --lg-bg: rgba(102, 187, 106, 0.10);
    --lg-border: rgba(102, 187, 106, 0.22);
    --lg-text: #c8e6c9;
    --lg-glow: rgba(102, 187, 106, 0.20);
    padding: 13px 36px;
    font-size: 13px;
}
.btn-disk-ctfile::before { border-color: rgba(129, 199, 132, 0.16); }
.btn-disk-ctfile::after {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.16) 0%,
        transparent 26%,
        transparent 74%,
        rgba(102, 187, 106, 0.08) 100%
    );
}
.btn-disk-ctfile:hover {
    color: #fff;
    background: rgba(102, 187, 106, 0.16);
    border-color: rgba(102, 187, 106, 0.38);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.14),
        inset -1px 1px 0 rgba(255, 255, 255, 0.08),
        inset 4px -4px 0 rgba(255, 255, 255, 0.07),
        inset -4px 4px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 1px rgba(0, 0, 0, 0.36),
        0 8px 28px rgba(102, 187, 106, 0.32),
        0 0 24px rgba(102, 187, 106, 0.10);
}

/* ---- 其他网盘（备用）- 紫罗兰 ---- */
.btn-disk-other {
    --lg-bg: rgba(171, 71, 188, 0.10);
    --lg-border: rgba(171, 71, 188, 0.22);
    --lg-text: #e1bee7;
    --lg-glow: rgba(171, 71, 188, 0.20);
    padding: 13px 36px;
    font-size: 13px;
}
.btn-disk-other::before { border-color: rgba(186, 104, 200, 0.16); }
.btn-disk-other::after {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.16) 0%,
        transparent 26%,
        transparent 74%,
        rgba(171, 71, 188, 0.08) 100%
    );
}
.btn-disk-other:hover {
    color: #fff;
    background: rgba(171, 71, 188, 0.16);
    border-color: rgba(171, 71, 188, 0.38);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.14),
        inset -1px 1px 0 rgba(255, 255, 255, 0.08),
        inset 4px -4px 0 rgba(255, 255, 255, 0.07),
        inset -4px 4px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 1px rgba(0, 0, 0, 0.36),
        0 8px 28px rgba(171, 71, 188, 0.32),
        0 0 24px rgba(171, 71, 188, 0.10);
}

/* 评论区域 */
.comment-section { padding: 24px; }
.comment-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--asphalt-4);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.comment-form { margin-bottom: 24px; }
.comment-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.comment-list { display: flex; flex-direction: column; gap: 12px; }
.comment-item {
    padding: 14px 16px;
    background: var(--asphalt-2);
    border: 1px solid var(--asphalt-4);
    border-left: 2px solid var(--asphalt-4);
    border-radius: var(--radius-sm);
    transition: all 0.25s ease;
}
.comment-item:hover {
    border-left-color: var(--cyber-cyan);
    background: var(--asphalt-1);
}
.comment-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    color: var(--cyber-cyan);
    letter-spacing: 0.5px;
}
.comment-time {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 400;
    font-family: var(--font-body);
}
.comment-content {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
}
.no-comment {
    color: var(--text-muted);
    text-align: center;
    padding: 28px;
    font-size: 13px;
    font-family: var(--font-ui);
    letter-spacing: 1px;
}

/* 提示信息 - 工业警报风格 */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 13px;
    font-family: var(--font-ui);
    font-weight: 500;
    border: 1px solid;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.5px;
}
.alert-ok {
    background: rgba(0, 184, 148, 0.08);
    color: var(--cyber-teal);
    border-color: rgba(0, 184, 148, 0.25);
}
.alert-err {
    background: rgba(220, 38, 38, 0.08);
    color: var(--danger-bright);
    border-color: rgba(220, 38, 38, 0.25);
}
.alert-info {
    background: rgba(255, 107, 0, 0.08);
    color: var(--warning-bright);
    border-color: rgba(255, 107, 0, 0.25);
}

/* ============================================================
 * 友情链接 - 路牌/路标风格
 * ============================================================ */
.friend-links-section {
    width: 100%;
    padding: 0 var(--sp-lg);
    margin-bottom: 0;
}
.friend-links-box {
    background: var(--asphalt-1);
    border: 1px solid var(--asphalt-4);
    border-top: 3px solid var(--warning-core);
    border-radius: var(--radius-md);
    padding: 22px 28px;
    text-align: center;
    box-shadow: var(--shadow-md);
}
.friend-links-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--warning-bright);
    margin-bottom: 18px;
    letter-spacing: 4px;
    text-transform: uppercase;
}
.friend-links-title::before,
.friend-links-title::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--grad-warning);
}
.friend-links-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.friend-link-item {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    text-decoration: none;
    letter-spacing: 0.5px;

    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.06),
        inset -1px 1px 0 rgba(255, 255, 255, 0.03),
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.2);

    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);

    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.friend-link-item:hover {
    color: #ffd699;
    background: rgba(255, 107, 0, 0.08);
    border-color: rgba(255, 140, 0, 0.25);
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        inset 1px -1px 0 rgba(255, 255, 255, 0.10),
        inset -1px 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        0 4px 14px rgba(255, 107, 0, 0.18);
    text-decoration: none;
}
.friend-link-sep {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .friend-links-box { padding: 18px 20px; }
    .friend-link-item { font-size: 11px; padding: 6px 12px; }
}

/* ============================================================
 * Footer - 底部底盘/排气管风格
 * ============================================================ */

/* ---- 版权信息区域（独立于备案号上方） ---- */
footer.copyright-section {
    padding: 28px var(--sp-lg);
    text-align: center;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 14, 0.96) 0%,
        var(--asphalt-0) 100%
    );
    border-top: 1px solid var(--asphalt-4);
    position: relative;
}
footer.copyright-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 107, 0, 0.4),
        transparent
    );
}

.copyright-main {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.copyright-detail {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    line-height: 1.6;
}

.copyright-item {
    display: inline-block;
    margin: 2px 4px;
}

.copyright-sep {
    color: var(--asphalt-5);
    margin: 0 4px;
    opacity: 0.5;
}

/* ---- 备案信息区域 ---- */
footer.beian {
    padding: 24px var(--sp-lg);
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    font-family: var(--font-ui);
    background: var(--asphalt-0);
    border-top: 3px solid var(--asphalt-3);
    position: relative;
}
footer.beian::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--warning-core) 30%,
        var(--warning-bright) 50%,
        var(--warning-core) 70%,
        transparent 100%
    );
}
footer.beian a {
    color: var(--warning-bright);
    margin: 0 6px;
    transition: color 0.2s ease;
}
footer.beian a:hover { color: var(--warning-glow); }
footer.beian .sep {
    color: var(--asphalt-4);
    margin: 0 6px;
}

/* ============================================================
 * Admin Panel - 控制中心风格
 * ============================================================ */
.admin-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 100vh;
}
.admin-side {
    background: var(--asphalt-1);
    border-right: 2px solid var(--asphalt-3);
    padding: 24px 0;
}
.admin-side .brand {
    padding: 0 24px 24px;
    border-bottom: 1px solid var(--asphalt-4);
    margin-bottom: 16px;
}
.admin-menu { list-style: none; }
.admin-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}
.admin-menu a:hover {
    background: rgba(255, 107, 0, 0.04);
    color: var(--text-primary);
    text-decoration: none;
}
.admin-menu a.active {
    background: rgba(255, 107, 0, 0.08);
    color: var(--warning-bright);
    border-left-color: var(--warning-core);
}
.admin-menu .ico {
    width: 18px;
    display: inline-block;
    text-align: center;
    font-size: 15px;
    color: var(--warning-core);
}

.admin-main { padding: 0; min-width: 0; }
.admin-top {
    background: var(--asphalt-1);
    border-bottom: 2px solid var(--asphalt-3);
    padding: 16px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.admin-top h2 {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.admin-top .user {
    color: var(--text-secondary);
    font-size: 13px;
    font-family: var(--font-ui);
}
.admin-top .user a {
    margin-left: 16px;
    color: var(--warning-bright);
    font-size: 12px;
}

.admin-content { padding: 28px; }
.card {
    background: var(--grad-metal);
    border: 1px solid var(--asphalt-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 24px 26px;
    margin-bottom: 20px;
}
.card h3 {
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--asphalt-4);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.stat-card {
    padding: 22px;
    background: var(--grad-metal);
    border: 1px solid var(--asphalt-4);
    border-radius: var(--radius-md);
    text-align: left;
    transition: all 0.3s ease;
}
.stat-card:hover {
    border-color: var(--warning-core);
    transform: translateY(-2px);
}
.stat-card .stat-label {
    color: var(--text-secondary);
    font-size: 12px;
    font-family: var(--font-ui);
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.stat-card .stat-num {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -1px;
}
.stat-card .stat-ico {
    float: right;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 900;
    color: var(--asphalt-0);
    background: var(--grad-warning);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-warning);
}

/* Login Page */
.login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}
.login-box {
    width: 100%;
    max-width: 400px;
    padding: 40px 36px;
    background: var(--grad-metal);
    border: 1px solid var(--asphalt-4);
    border-top: 3px solid var(--warning-core);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}
.login-title {
    text-align: center;
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 8px;
    letter-spacing: 4px;
    text-transform: uppercase;
}
.login-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 28px;
    font-family: var(--font-ui);
    letter-spacing: 1px;
}

/* ==================== Notice Bar - 警报横幅 ==================== */
.notice-bar {
    width: 100%;
    max-width: 1200px;
    margin: 16px auto 0;
    background: var(--asphalt-1);
    border: 1px solid var(--asphalt-4);
    border-left: 4px solid var(--warning-core);
    border-radius: var(--radius-sm);
    overflow: hidden;
    animation: slideInDown 0.4s var(--ease-out);
    transition: all 0.3s ease;
}
.notice-bar:hover {
    box-shadow: var(--shadow-lg);
    border-left-color: var(--warning-bright);
}
@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.notice-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
}
.notice-icon {
    font-size: 18px;
    line-height: 1.5;
    flex-shrink: 0;
    color: var(--warning-bright);
    margin-top: 2px;
}
.notice-content {
    flex: 1;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.75;
    word-break: break-word;
}
.notice-content p { margin: 0 0 8px; }
.notice-content p:last-child { margin-bottom: 0; }
.notice-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.notice-close:hover { color: var(--danger-bright); transform: scale(1.15); }

@media (max-width: 768px) {
    .notice-inner { padding: 12px 16px; gap: 10px; }
    .notice-content { font-size: 12px; }
}

/* ==================== AI Summary - 终端输出风格 ==================== */
.ai-summary {
    width: 100%;
    max-width: 1200px;
    margin: 16px auto 0;
    background: var(--asphalt-1);
    border: 1px solid var(--asphalt-4);
    border-radius: var(--radius-md);
    overflow: hidden;
    animation: slideInDown 0.4s var(--ease-out);
    transition: all 0.3s ease;
}
.ai-summary:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--metal-dark);
}
.ai-summary-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--asphalt-4);
    background: var(--asphalt-2);
}
.ai-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--asphalt-0);
    background: var(--grad-cyber);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-cyber);
}
.ai-summary-title {
    font-family: var(--font-ui);
    color: var(--cyber-cyan);
    font-size: 13px;
    font-weight: 700;
    flex: 1;
    letter-spacing: 0.5px;
}
.ai-refresh {
    background: none;
    border: 1px solid var(--asphalt-4);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-xs);
    transition: all 0.25s ease;
    line-height: 1;
}
.ai-refresh:hover {
    color: var(--cyber-cyan);
    border-color: var(--cyber-cyan);
    background: rgba(0, 229, 184, 0.06);
}
.ai-refresh.spinning { animation: spin 0.6s ease; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.ai-summary-body {
    padding: 16px 20px 18px;
    min-height: 70px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.85;
    word-break: break-word;
    font-family: var(--font-body);
}

.ai-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
}
.ai-loading-dot {
    width: 8px; height: 8px;
    background: var(--cyber-cyan);
    animation: bounce 1.4s ease-in-out infinite;
}
.ai-loading-dot:nth-child(2) { animation-delay: .16s; }
.ai-loading-dot:nth-child(3) { animation-delay: .32s; }
@keyframes bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30% { transform: translateY(-8px); opacity: 1; }
}
.ai-loading-text {
    margin-left: 10px;
    color: var(--text-muted);
    font-size: 12px;
    font-family: var(--font-ui);
    letter-spacing: 1px;
}

.ai-typing-text { display: inline; white-space: pre-wrap; }
.ai-cursor {
    display: inline-block;
    color: var(--cyber-cyan);
    font-weight: 700;
    animation: blink .7s step-end infinite;
    margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

.ai-summary-body.done .ai-loading { display: none; }
.ai-summary-body.done .ai-cursor { display: none; }

.ai-summary-footer {
    padding: 0 20px 14px;
    text-align: right;
}
.ai-cache-tag {
    font-size: 10px;
    font-family: var(--font-ui);
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .ai-summary-header { padding: 12px 16px 8px; }
    .ai-summary-body { padding: 12px 16px 14px; font-size: 12px; }
}

/* ==================== Banner / Carousel - 赛道大屏风格 ==================== */
.hero-banner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 24px auto 12px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--asphalt-1);
    border: 2px solid var(--asphalt-4);
    box-shadow: var(--shadow-lg);
}
.banner-slides {
    position: relative;
    width: 100%;
    height: 380px;
}
.banner-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
    z-index: 1;
}
.banner-slide.active { opacity: 1; z-index: 2; }
.banner-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.9) contrast(1.05);
}
.banner-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px 28px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.92));
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.banner-btn {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    z-index: 5;
    width: 44px; height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xs);
    background: rgba(0, 0, 0, 0.6);
    color: #fff; font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.banner-btn:hover {
    background: var(--warning-core);
    border-color: var(--warning-core);
    color: var(--asphalt-0);
    transform: translateY(-50%) scale(1.08);
    box-shadow: var(--shadow-warning);
}
.banner-prev { left: 14px; }
.banner-next { right: 14px; }

.banner-dots {
    position: absolute;
    bottom: 16px; left: 50%; transform: translateX(-50%);
    z-index: 5;
    display: flex; gap: 10px;
}
.banner-dot {
    width: 10px; height: 10px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: all 0.3s ease;
    transform: rotate(45deg);
}
.banner-dot.active,
.banner-dot:hover {
    background: var(--warning-bright);
    transform: rotate(45deg) scale(1.2);
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
}

@media (max-width: 768px) {
    .banner-slides { height: 220px; }
    .banner-btn { width: 36px; height: 36px; font-size: 14px; }
    .banner-caption { font-size: 13px; padding: 14px 18px; }
}

/* ==================== 动画系统 ==================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes pulseWarning {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(255, 107, 0, 0); }
}

.fade-in-up { animation: fadeInUp 0.55s var(--ease-out) both; }
.fade-in-left { animation: fadeInLeft 0.55s var(--ease-out) both; }
.fade-in-right { animation: fadeInRight 0.55s var(--ease-out) both; }
.scale-in { animation: scaleIn 0.5s var(--ease-spring) both; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }

/* Utility Classes */
.text-muted { color: var(--text-muted); }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }

:focus-visible {
    outline: 2px solid var(--warning-core);
    outline-offset: 2px;
}

/* ============================================================
 * Responsive Design
 * ============================================================ */
@media (max-width: 1024px) {
    .main-grid { grid-template-columns: 1fr; }
    .col-side { order: -1; }
    .mod-card { grid-template-columns: 180px 1fr; }
    .mod-cover { width: 180px; height: 115px; }
    .admin-layout { grid-template-columns: 1fr; }
    .admin-side {
        border-right: none;
        border-bottom: 2px solid var(--asphalt-3);
        padding: 16px;
    }
    .admin-menu { display: flex; flex-wrap: wrap; }
    .admin-menu a { border-left: none; border-bottom: 3px solid transparent; }
    .admin-menu a.active { border-left: none; border-bottom-color: var(--warning-core); }
}

@media (max-width: 768px) {
    .topbar-inner { padding: 0 var(--sp-md); height: 58px; }
    .brand { font-size: 15px; letter-spacing: 2px; }
    .brand-logo { width: 38px; height: 38px; font-size: 16px; }
    .nav { margin-left: 14px; gap: 2px; }
    .nav a { padding: 8px 12px; font-size: 12px; letter-spacing: 1px; }
    .wrap { padding: 0 var(--sp-md); }
    .main { padding: 20px 0 48px; }
    .main-grid { gap: 18px; }
    .mod-card { grid-template-columns: 140px 1fr; padding: 14px; gap: 14px; }
    .mod-cover { width: 140px; height: 95px; }
    .mod-title { font-size: 15px; }
    .detail { padding: 18px; }
    .detail-title { font-size: 22px; }
    .comment-section { padding: 18px; }
    .comment-form .row { grid-template-columns: 1fr; }
    .side-block { padding: 16px; }
    .webmaster-avatar { width: 76px; height: 76px; font-size: 28px; }
    footer.beian { padding: 20px var(--sp-md); }
    footer.copyright-section { padding: 22px var(--sp-md); }
    .friend-links-section { padding: 0 var(--sp-md); }
}

@media (max-width: 480px) {
    .nav { display: none; }
    .mod-card { grid-template-columns: 1fr; }
    .mod-cover { width: 100%; height: 180px; }
    .btn-download { padding: 14px 28px; font-size: 13px; }
    .stats-grid { grid-template-columns: 1fr; }

    /* 版权信息移动端适配 */
    .copyright-main { font-size: 13px; letter-spacing: 1px; }
    .copyright-detail { font-size: 10px; }
    .copyright-item { display: block; margin: 4px 0; }
    .copyright-sep { display: none; }
}