/* TCL 舆情 / AI 增长平台 — 多主题 */

/* ============== Theme: 深海蓝 midnight (default) — 仿 5100 ============== */
:root, [data-theme="midnight"] {
    --bg: #0f1923;
    --bg-2: #142233;
    --panel: #152238;
    --panel-2: #1a2d4a;
    --border: #1e3a5f;
    --border-2: #2a4a6e;
    --text: #e0e6ed;
    --text-2: #a8b9cc;
    --text-3: #7a8fa6;
    --muted: #5a7a9a;
    --primary: #4facfe;
    --primary-2: #1a56db;
    --primary-grad: linear-gradient(135deg, #1a56db, #4facfe);
    --success: #50e3c2;
    --warning: #f1c40f;
    --error: #e74c3c;
    --pink: #ff6b9d;
    --hero-grad: linear-gradient(135deg, #1e3a5f 0%, #1a2744 50%, #162033 100%);
    --kpi-grad: linear-gradient(135deg, #152238, #1a2d4a);
    --kpi-glow: rgba(79,172,254,.12);
    --shadow: 0 4px 12px rgba(0,0,0,.25);
    --chart-1: #4facfe; --chart-2: #ff6b9d; --chart-3: #50e3c2; --chart-4: #f1c40f;
    --chart-5: #e74c3c; --chart-6: #9d6bff; --chart-7: #fb8b5c; --chart-8: #a8b9cc;
    /* 动态标题栏 hero */
    --hero-bg-deep: linear-gradient(135deg, #1e3a5f 0%, #1a2744 50%, #162033 100%);
    --hero-light-1: rgba(96, 165, 250, .28);
    --hero-light-2: rgba(255, 107, 157, .16);
    --hero-light-3: rgba(80, 227, 194, .14);
    --hero-title-grad: linear-gradient(135deg, #ffffff 0%, #4facfe 55%, #ff6b9d 100%);
}

/* ============== Theme: 曜石黑 obsidian — 仿 5100 ============== */
[data-theme="obsidian"] {
    --bg: #101010;
    --bg-2: #161616;
    --panel: #1c1c1c;
    --panel-2: #242424;
    --border: #333333;
    --border-2: #444444;
    --text: #e5e5e5;
    --text-2: #b0b0b0;
    --text-3: #8a8a8a;
    --muted: #666666;
    --primary: #a78bfa;
    --primary-2: #7c3aed;
    --primary-grad: linear-gradient(135deg, #7c3aed, #a78bfa);
    --success: #4ade80;
    --warning: #fbbf24;
    --error: #f87171;
    --pink: #f0abfc;
    --hero-grad: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
    --kpi-grad: linear-gradient(135deg, #1c1c1c, #242424);
    --kpi-glow: rgba(167,139,250,.14);
    --shadow: 0 4px 12px rgba(0,0,0,.5);
    --chart-1: #a78bfa; --chart-2: #f0abfc; --chart-3: #4ade80; --chart-4: #fbbf24;
    --chart-5: #f87171; --chart-6: #60a5fa; --chart-7: #fb8b5c; --chart-8: #9ca3af;
    --hero-bg-deep: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
    --hero-light-1: rgba(167, 139, 250, .30);
    --hero-light-2: rgba(240, 171, 252, .18);
    --hero-light-3: rgba(74, 222, 128, .12);
    --hero-title-grad: linear-gradient(135deg, #ffffff 0%, #a78bfa 50%, #f0abfc 100%);
}

/* ============== Theme: 银石灰 silver — 仿 5100 ============== */
[data-theme="silver"] {
    --bg: #1a1c23;
    --bg-2: #1f222b;
    --panel: #22252e;
    --panel-2: #282b36;
    --border: #3a3d4a;
    --border-2: #4a4e5c;
    --text: #e2e4ea;
    --text-2: #b4b8c4;
    --text-3: #8a8e9a;
    --muted: #6a6e7a;
    --primary: #60a5fa;
    --primary-2: #2563eb;
    --primary-grad: linear-gradient(135deg, #2563eb, #60a5fa);
    --success: #34d399;
    --warning: #fbbf24;
    --error: #f87171;
    --pink: #f472b6;
    --hero-grad: linear-gradient(135deg, #374151 0%, #4b5563 50%, #374151 100%);
    --kpi-grad: linear-gradient(135deg, #22252e, #282b36);
    --kpi-glow: rgba(96,165,250,.12);
    --shadow: 0 4px 12px rgba(0,0,0,.35);
    --chart-1: #60a5fa; --chart-2: #f472b6; --chart-3: #34d399; --chart-4: #fbbf24;
    --chart-5: #f87171; --chart-6: #a78bfa; --chart-7: #fb923c; --chart-8: #94a3b8;
    --hero-bg-deep: linear-gradient(135deg, #374151 0%, #4b5563 50%, #374151 100%);
    --hero-light-1: rgba(96, 165, 250, .26);
    --hero-light-2: rgba(244, 114, 182, .16);
    --hero-light-3: rgba(52, 211, 153, .14);
    --hero-title-grad: linear-gradient(135deg, #ffffff 0%, #cbd5e1 40%, #60a5fa 100%);
}

/* ============== Theme: 晨光白 daylight — 仿 5100 ============== */
[data-theme="daylight"] {
    --bg: #f4f6fb;
    --bg-2: #ffffff;
    --panel: #ffffff;
    --panel-2: #f9fafb;
    --border: #e5e7eb;
    --border-2: #d1d5db;
    --text: #111827;
    --text-2: #374151;
    --text-3: #6b7280;
    --muted: #9ca3af;
    --primary: #2563eb;
    --primary-2: #1e40af;
    --primary-grad: linear-gradient(135deg, #1e40af, #2563eb);
    --success: #059669;
    --warning: #d97706;
    --error: #dc2626;
    --pink: #db2777;
    --hero-grad: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #4f46e5 100%);
    --kpi-grad: linear-gradient(135deg, #ffffff, #f9fafb);
    --kpi-glow: rgba(37,99,235,.10);
    --shadow: 0 4px 12px rgba(0,0,0,.06);
    --chart-1: #2563eb; --chart-2: #db2777; --chart-3: #059669; --chart-4: #d97706;
    --chart-5: #dc2626; --chart-6: #7c3aed; --chart-7: #ea580c; --chart-8: #64748b;
    --hero-bg-deep: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #4f46e5 100%);
    --hero-light-1: rgba(255, 255, 255, .35);
    --hero-light-2: rgba(219, 39, 119, .18);
    --hero-light-3: rgba(5, 150, 105, .16);
    --hero-title-grad: linear-gradient(135deg, #ffffff 0%, #bfdbfe 50%, #ffffff 100%);
}

/* ============== Theme: 大促红 festive — 仿 5100 ============== */
[data-theme="festive"] {
    --bg: #fff5ec;
    --bg-2: #fffaf2;
    --panel: #ffffff;
    --panel-2: #fef0e0;
    --border: #f0d4be;
    --border-2: #e8c4a8;
    --text: #3a1a14;
    --text-2: #6e3a2a;
    --text-3: #9a7060;
    --muted: #b89070;
    --primary: #c8161d;
    --primary-2: #8b0010;
    --primary-grad: linear-gradient(135deg, #8b0010, #c8161d);
    --success: #15803d;
    --warning: #d97706;
    --error: #c8161d;
    --pink: #db2777;
    --hero-grad: linear-gradient(135deg, #8b0010 0%, #c8161d 48%, #fdd835 100%);
    --kpi-grad: linear-gradient(135deg, #ffffff, #fef0e0);
    --kpi-glow: rgba(200,22,29,.10);
    --shadow: 0 8px 24px rgba(139,0,16,.12);
    --chart-1: #c8161d; --chart-2: #fdd835; --chart-3: #ea580c; --chart-4: #15803d;
    --chart-5: #0284c7; --chart-6: #9333ea; --chart-7: #db2777; --chart-8: #9a7060;
    --hero-bg-deep: linear-gradient(135deg, #8b0010 0%, #c8161d 48%, #fdd835 100%);
    --hero-light-1: rgba(253, 216, 53, .30);
    --hero-light-2: rgba(248, 113, 113, .20);
    --hero-light-3: rgba(253, 216, 53, .16);
    --hero-title-grad: linear-gradient(135deg, #ffffff 0%, #fdd835 60%, #ffffff 100%);
}

/* ============== Base ============== */
* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue',
                 Helvetica, 'Microsoft YaHei', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background .25s, color .25s;
    /* .layout 上有 zoom:0.88，zoom 副作用让 scrollWidth 报告值偏大（约 100/88≈14% 虚高），
       浏览器据此显示水平滚动条，用户不小心一滑 sidebar 就被推出视野。
       视觉真实尺寸不溢出，所以裁掉这个虚假滚动条无害。 */
    overflow-x: hidden;
}
a { color: var(--primary); text-decoration: none; }
a:hover { opacity: 0.85; }
code { font-family: 'SF Mono', Monaco, monospace; font-size: 12px; }

/* ============== Layout ============== */
.layout {
    display: flex;
    /* zoom:0.70 让视觉高度 = DOM 高度 × 0.70，所以 DOM 给 142.9vh 视觉刚好 100vh */
    height: 142.9vh;
    overflow: hidden;
    zoom: 0.70;
}
.main {
    flex: 1; min-width: 0;
    height: 100%;
    overflow-y: auto;   /* 主内容自己滚 → sidebar 不动 */
}
.sidebar {
    width: 220px;
    background: var(--bg-2);
    border-right: 1px solid var(--border);
    padding: 0 0 18px;
    flex-shrink: 0;
    transition: background .25s, border-color .25s;
    /* .layout 限死视口高度 + overflow:hidden，main 自己滚 → sidebar 永远固定贴左 */
    height: 100%;
    overflow-y: auto;
}
.sidebar .logo {
    height: 48px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.sidebar .logo h1 {
    font-size: 14px; font-weight: 600; color: var(--text); margin: 0;
}
.sidebar .logo p {
    font-size: 11px; color: var(--text-3); margin: 3px 0 0;
}
.sidebar .menu-group { padding: 6px 0; }
.sidebar .menu-group-title {
    font-size: 11px; color: var(--text-3);
    padding: 8px 20px 4px; text-transform: uppercase; letter-spacing: .5px;
}
.sidebar a.menu-item {
    display: block; padding: 7px 20px;
    color: var(--text-2);
    font-size: 13px;
    border-left: 2px solid transparent;
    transition: all .15s;
}
.sidebar a.menu-item:hover {
    background: var(--kpi-glow);
    color: var(--text); opacity: 1;
}
.sidebar a.menu-item.active {
    background: var(--kpi-glow);
    color: var(--primary); border-left-color: var(--primary);
}
.sidebar a.menu-item.locked { color: var(--muted); cursor: not-allowed; }
.sidebar a.menu-item.locked::after {
    content: '🔒'; margin-left: 6px; font-size: 10px;
}

.topbar {
    height: 48px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}
.topbar .title { font-size: 14px; color: var(--text); }
.topbar .userbox {
    display: flex; align-items: center; gap: 14px;
    font-size: 12px; color: var(--text-2);
}
.topbar .userbox .role {
    background: var(--kpi-glow);
    color: var(--primary); padding: 2px 8px; border-radius: 4px;
    font-size: 11px;
}
.topbar .userbox a { color: var(--text-3); }

/* Theme switcher */
.theme-switcher {
    display: flex; gap: 4px;
    background: var(--panel);
    border: 1px solid var(--border);
    padding: 3px; border-radius: 8px;
}
.theme-switcher button {
    width: 22px; height: 22px;
    border: 1px solid transparent;
    border-radius: 5px; cursor: pointer;
    padding: 0; outline: none;
    transition: transform .15s;
    position: relative;
}
.theme-switcher button:hover { transform: scale(1.1); }
.theme-switcher button.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--kpi-glow);
}
.theme-switcher button[data-th="midnight"] { background: linear-gradient(135deg, #4facfe, #1e3a5f); }
.theme-switcher button[data-th="obsidian"] { background: linear-gradient(135deg, #a78bfa, #1a1a2e); }
.theme-switcher button[data-th="silver"]   { background: linear-gradient(135deg, #94a3b8, #4b5563); }
.theme-switcher button[data-th="daylight"] { background: linear-gradient(135deg, #ffffff, #2563eb); }
.theme-switcher button[data-th="festive"]  { background: linear-gradient(135deg, #8b0010, #c8161d, #fdd835); }

.content { padding: 20px; }
/* 窄屏：内边距收紧 + 侧栏压窄，给主区让出空间 */
@media (max-width: 1280px) {
    .content { padding: 14px 16px; }
    .sidebar { width: 184px; }
    .sidebar .logo { padding: 0 14px 14px; }
    .sidebar a.menu-item { padding: 6px 14px; font-size: 12.5px; }
    .topbar { padding: 0 14px; }
}
.page-title {
    font-size: 18px; font-weight: 600;
    color: var(--text); margin: 0 0 4px;
}
.page-subtitle {
    color: var(--text-3); font-size: 12px; margin: 0 0 18px;
}

/* 带流光的页面标题条 */
.page-hero {
    position: relative;
    background: var(--hero-grad);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 22px;
    margin-bottom: 18px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--shadow);
}
.page-hero h1 {
    position: relative; z-index: 2;
    font-size: 18px; font-weight: 600; color: var(--text); margin: 0 0 4px;
}
.page-hero .desc {
    position: relative; z-index: 2;
    color: var(--text-3); font-size: 12px; margin: 0;
}

/* ============== Cards ============== */
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 13px 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    transition: background .25s, border-color .25s;
}
.card-title {
    font-size: 13px; color: var(--text-2);
    font-weight: 600; margin: 0 0 12px;
    display: flex; justify-content: space-between; align-items: center;
}
.card-title .sub { color: var(--text-3); font-size: 11px; font-weight: 400; }

/* Stat / KPI cards */
.stat-grid, .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 4px;
    margin-bottom: 12px;
}
/* 窄屏 KPI 卡更紧凑：避免单行只能塞 2-3 个 */
@media (max-width: 1280px) {
    .stat-grid, .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }
    .stat-card, .kpi { padding: 11px 13px; }
    .stat-card .value, .kpi .num { font-size: 21px; }
}
.stat-card, .kpi {
    background: var(--kpi-grad);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .15s, box-shadow .15s;
}
.stat-card:hover, .kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.kpi::before {
    content: ''; position: absolute; top: -10px; right: -10px;
    width: 100px; height: 100px;
    background: radial-gradient(circle, var(--kpi-glow) 0%, transparent 70%);
    pointer-events: none;
}
.stat-card .label, .kpi .lab { font-size: 12px; color: var(--text-2); margin-bottom: 5px; letter-spacing: .2px; font-weight: 500; }
.stat-card .value, .kpi .num { font-size: 24px; color: var(--text); font-weight: 600; line-height: 1.1; }
.kpi .num small { font-size: 13px; color: var(--text-2); font-weight: 400; margin-left: 2px; }
.stat-card .extra, .kpi .ext { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.kpi.k-warn .num { color: var(--warning); }
.kpi.k-error .num { color: var(--error); }
.kpi.k-ok .num { color: var(--success); }
.kpi.k-info .num { color: var(--primary); }

.kpi .delta {
    font-size: 11px; margin-top: 4px;
    display: inline-block; padding: 1px 6px; border-radius: 3px;
}
.delta.up { background: rgba(231,76,60,.15); color: var(--error); }
.delta.dn { background: rgba(80,227,194,.15); color: var(--success); }
.delta.eq { background: rgba(122,143,166,.15); color: var(--text-3); }

/* ============== 流媒体海报式 Hero ============== */
.hero, .page-hero {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    margin-bottom: 16px;
    background: var(--hero-bg-deep);
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.hero::before, .page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 60% at 75% 28%, var(--hero-light-1) 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 18% 78%, var(--hero-light-2) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 92% 92%, var(--hero-light-3) 0%, transparent 55%);
    pointer-events: none;
    z-index: 1;
}
.hero::after, .page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 0%, var(--hero-bg-deep) 130%),
        repeating-linear-gradient(115deg, transparent 0 20px, rgba(255,255,255,.012) 20px 21px);
    pointer-events: none;
    z-index: 1;
}
.hero > *, .page-hero > * { position: relative; z-index: 2; }

/* 首页 hero — 紧凑海报 */
.hero {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    padding: 5px 14px; border-radius: 999px;
    font-size: 11px; color: var(--text-2);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    letter-spacing: .5px;
    margin-bottom: 14px;
}
.hero-title {
    font-size: 22px; font-weight: 700;
    line-height: 1.3; letter-spacing: -.3px;
    background: var(--hero-title-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; color: transparent;
    margin: 0;
}
.hero-desc {
    color: var(--text-2); font-size: 14px; margin: 0 0 6px;
}
.hero-meta {
    color: var(--text-3); font-size: 11px;
}
.hero-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
}

/* 子页面 page-hero — 紧凑版 */
.page-hero {
    padding: 16px 20px;
}
.page-hero h1 {
    font-size: 16px; font-weight: 700;
    line-height: 1.3; letter-spacing: -.2px;
    background: var(--hero-title-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; color: transparent;
    margin: 0 0 2px;
}
.page-hero .desc {
    color: var(--text-3); font-size: 11.5px; margin: 0;
}

/* 标题字体加深：取消渐变描边，用实色加重 + 阴影，铺在动画 hero 上更清晰 */
.hero-title-solid {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .5px;
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

/* 动态标题栏 — 注入的动画 canvas（仿 5100 page-header） */
.hero canvas.hero-bg, .page-hero canvas.hero-bg {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0; display: block; pointer-events: none;
}
/* canvas 已铺满，弱化静态光斑/网纹叠层避免发灰 */
.hero.has-anim::before, .page-hero.has-anim::before { opacity: .5; }
.hero.has-anim::after, .page-hero.has-anim::after { opacity: .35; }

/* Login 海报式背景 */
body.login-bg {
    background: var(--hero-bg-deep);
    position: relative;
    overflow-x: hidden;
}
body.login-bg::before {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse 50% 50% at 25% 30%, var(--hero-light-1) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 78% 75%, var(--hero-light-2) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 70% 18%, var(--hero-light-3) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
body.login-bg .login-box { position: relative; z-index: 2; }
body.login-bg .login-box .logo-area h1 {
    background: var(--hero-title-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; color: transparent;
}

/* row layouts */
.row { display: grid; gap: 14px; margin-bottom: 14px; }
.r-2 { grid-template-columns: 1fr 1fr; }
.r-3 { grid-template-columns: 1fr 1fr 1fr; }
.r-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.r-23, .r-12 { grid-template-columns: 1fr 1fr; }
.r-13 { grid-template-columns: 1fr 2fr; }
/* 笔记本/窄屏：四列 → 双列 */
@media (max-width: 1400px) {
    .r-4 { grid-template-columns: 1fr 1fr; }
}
/* 13" 笔记本及以下：所有多列堆叠为单列 */
@media (max-width: 1100px) {
    .r-2, .r-3, .r-4, .r-23, .r-12, .r-13 { grid-template-columns: 1fr; }
}
.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow);
    transition: background .25s, border-color .25s;
}
.panel h3 {
    margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text);
    display: flex; justify-content: space-between; align-items: center;
}
.panel h3 .sub { color: var(--text-3); font-size: 11px; font-weight: 400; }
.chart { width: 100%; }

/* ============== Forms ============== */
.form-group { margin-bottom: 10px; }
.form-group label {
    display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 3px;
}
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 5px 10px;
    background: var(--bg);
    border: 1px solid var(--border-2);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    outline: none;
    font-family: inherit;
    transition: border-color .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--primary);
}
.form-row {
    display: flex; gap: 10px; align-items: end;
    flex-wrap: wrap; margin-bottom: 10px;
}
.form-row > * { flex: 1; min-width: 120px; }
.form-row .form-group { margin-bottom: 0; }

.btn {
    display: inline-block;
    padding: 7px 14px;
    background: var(--primary);
    color: #fff; border: none; border-radius: 6px;
    font-size: 13px; cursor: pointer;
    transition: opacity .15s, transform .1s;
    text-decoration: none;
    font-family: inherit;
}
.btn:hover { opacity: 0.85; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary-grad); }
.btn-secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--border-2); }
.btn-danger { background: var(--error); }
.btn-success { background: var(--success); color: var(--bg); }
.btn-sm { padding: 4px 10px; font-size: 11px; }

/* ============== Tables ============== */
.table-wrap {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    max-height: 600px;
}
table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
table.data-table th, table.data-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.data-table th {
    background: var(--panel-2);
    color: var(--text-2);
    font-weight: 600;
    text-align: center;          /* 表头统一居中 */
    position: sticky; top: 0;
    z-index: 1;
}
table.data-table tr:hover td {
    background: var(--kpi-glow);
}
table.data-table td.wrap { white-space: normal; max-width: 360px; }

.badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 11px;
    background: var(--kpi-glow);
    color: var(--primary);
}
.badge-error { background: rgba(231,76,60,.15); color: var(--error); }
.badge-warning { background: rgba(241,196,15,.15); color: var(--warning); }
.badge-success { background: rgba(80,227,194,.15); color: var(--success); }
.badge-muted { background: rgba(122,143,166,.12); color: var(--text-3); }

/* ===== 筛选条 + 美化下拉框 ===== */
.filter-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fl-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--text-2);
    letter-spacing: .3px;
}
.fl-label::before {
    content: ''; width: 3px; height: 14px; border-radius: 2px;
    background: var(--primary-grad);
}
.sel {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    font-family: inherit; font-size: 13px; color: var(--text);
    background-color: var(--panel-2);
    border: 1px solid var(--border-2);
    border-radius: 9px;
    padding: 8px 34px 8px 14px;
    min-width: 168px; cursor: pointer;
    box-shadow: var(--shadow);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
    /* 自绘 chevron */
    background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                      linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
    background-position: calc(100% - 17px) center, calc(100% - 12px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.sel:hover { border-color: var(--primary); background-color: var(--panel); }
.sel:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--kpi-glow);
    background-image: linear-gradient(45deg, transparent 50%, var(--primary) 50%),
                      linear-gradient(135deg, var(--primary) 50%, transparent 50%);
}
.sel option { background: var(--panel); color: var(--text); }
.fl-spacer { margin-left: auto; }

/* ===== 自定义下拉（替换原生 option 弹层，可主题化）===== */
.dd { position: relative; display: inline-block; max-width: 100%; min-width: 0; }
.dd > select.sel { position: absolute; opacity: 0; pointer-events: none; width: 100%; height: 100%; left: 0; top: 0; }
.dd-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-family: inherit; font-size: 13px; color: var(--text);
    background-color: var(--panel-2);
    border: 1px solid var(--border-2);
    border-radius: 6px;
    padding: 5px 12px; min-width: 0; width: 100%; max-width: 100%; cursor: pointer;
    box-shadow: var(--shadow);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.dd-btn > .dd-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1 1 auto; min-width: 0;
}
.form-group .dd { display: block; width: 100%; }
.dd-btn:hover { border-color: var(--primary); background-color: var(--panel); }
.dd-btn .dd-caret {
    width: 7px; height: 7px; border-right: 1.5px solid var(--text-3);
    border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg);
    transition: transform .18s; margin-bottom: 2px; flex-shrink: 0;
}
.dd.open .dd-btn {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--kpi-glow);
    background-color: var(--panel);
}
.dd.open .dd-btn .dd-caret { transform: rotate(225deg); margin-bottom: -2px; border-color: var(--primary); }
.dd-panel {
    position: absolute; z-index: 50; left: 0; top: calc(100% + 6px);
    min-width: 100%; width: max-content; max-width: 320px;
    background: var(--panel);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.32);
    padding: 6px;
    max-height: 300px; overflow-y: auto;
    opacity: 0; transform: translateY(-6px) scale(.98);
    transform-origin: top left; pointer-events: none;
    transition: opacity .15s, transform .15s;
}
.dd.open .dd-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.dd-opt {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 7px;
    font-size: 13px; color: var(--text-2);
    cursor: pointer; white-space: nowrap;
    transition: background .12s, color .12s;
}
.dd-opt:hover { background: var(--panel-2); color: var(--text); }
.dd-opt.sel-active {
    background: var(--kpi-glow); color: var(--primary); font-weight: 600;
}
.dd-opt .dd-tick {
    width: 14px; flex-shrink: 0; color: var(--primary);
    opacity: 0; font-size: 12px;
}
.dd-opt.sel-active .dd-tick { opacity: 1; }
.dd-empty { padding: 14px 12px; font-size: 12px; color: var(--text-3); text-align: center; }

/* Flash */
.flash-list { margin: 0 0 16px; padding: 0; list-style: none; }
.flash-msg {
    padding: 9px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 8px;
}
.flash-error { background: rgba(231,76,60,.15); color: var(--error); border: 1px solid rgba(231,76,60,.3); }
.flash-warning { background: rgba(241,196,15,.15); color: var(--warning); border: 1px solid rgba(241,196,15,.3); }
.flash-success { background: rgba(80,227,194,.15); color: var(--success); border: 1px solid rgba(80,227,194,.3); }

/* Pagination */
.pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 14px 0; flex-wrap: wrap;
}
.pager .pager-info { font-size: 13px; color: var(--text-2); }
.pager .pager-btns { display: flex; gap: 10px; }
.pager button {
    padding: 7px 18px;
    background: var(--panel);
    border: 1px solid var(--border-2);
    color: var(--text-2);
    border-radius: 9px; cursor: pointer; font-size: 13px;
    font-family: inherit; transition: all .15s;
}
.pager button:hover:not(:disabled) {
    border-color: var(--primary); color: var(--primary);
    background: var(--panel-2);
}
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }

/* 表格内容居中，第一列除外（保持左对齐）；表头仍全部居中 */
table.data-table td { text-align: center; }
table.data-table td:first-child { text-align: left; }

/* Placeholder page */
.placeholder-box {
    background: var(--panel);
    border: 1px dashed var(--border-2);
    border-radius: 12px;
    padding: 56px 30px;
    text-align: center;
}
.placeholder-box .icon {
    font-size: 40px; color: var(--muted); margin-bottom: 12px;
}
.placeholder-box h2 { color: var(--text); margin: 0 0 8px; }
.placeholder-box p { color: var(--text-3); margin: 4px 0; }

/* Alert cards */
.alert-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.alert-card {
    background: rgba(231,76,60,.08);
    border: 1px solid rgba(231,76,60,.25);
    border-radius: 8px;
    padding: 8px 10px;
}
.alert-card .top {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; color: var(--text-2);
}
.alert-card .top .plat { color: var(--primary); }
.alert-card .top .date { color: var(--text-3); }
.alert-card .kw { font-size: 13px; color: var(--text); font-weight: 600; margin: 4px 0; }
.alert-card .rate { font-size: 18px; color: var(--error); font-weight: 600; }

/* High interact list */
.hi-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.hi-item {
    background: var(--bg);
    border-left: 2px solid var(--primary);
    padding: 6px 10px; border-radius: 4px;
    font-size: 11.5px;
}
.hi-item .meta { color: var(--text-3); font-size: 10.5px; }
.hi-item .meta .sep { color: var(--text-3); margin: 0 4px; }
.hi-item .title { color: var(--text); margin-top: 2px; }
.hi-item .title a { color: var(--text); }
.hi-item .title a:hover { color: var(--primary); }
.hi-item .stat { color: var(--pink); font-size: 10.5px; }
a.hi-item { display: block; text-decoration: none; transition: background .15s, border-color .15s, transform .1s; }
a.hi-item:hover { background: var(--panel-2); border-left-color: var(--pink); }
a.hi-item:active { transform: scale(.997); }
.hi-item .hi-note { color: var(--primary); font-size: 10.5px; }
a.hi-item:hover .hi-note { text-decoration: underline; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }