/* ═══════════════════════════════════════════════════════════════
   modern.css · 现代化覆盖层 v1
   加载顺序：style.css → modern.css （Dash 字母序）
   策略：只覆盖关键视觉 token，不改任何 className 选择器
   ═══════════════════════════════════════════════════════════════ */

/* ─── 字体：引入 Inter（字符宽度优雅、信息密度高） ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ─── 重新定义 :root 变量（v2 · 强对比版）─────────────────── */
:root {
    /* 主色：增强对比度 */
    --brand-primary:      #0055A4;
    --brand-primary-10:   rgba(0,85,164,0.10);
    --brand-primary-20:   rgba(0,85,164,0.18);
    --brand-dark:         #003d7a;
    --brand-light:        #4a8fc9;
    --brand-cyan:         #06b6d4;

    /* 语义色（light 加深为 200 级，浅色块仍能看清） */
    --success:            #10b981;
    --success-light:      #a7f3d0;
    --warning:            #f59e0b;
    --warning-light:      #fde68a;
    --danger:             #ef4444;
    --danger-light:       #fecaca;
    --info:               #3b82f6;
    --info-light:         #bfdbfe;

    /* 中性色 */
    --slate-50:           #f8fafc;
    --slate-100:          #f1f5f9;
    --slate-200:          #e2e8f0;
    --slate-300:          #cbd5e1;
    --slate-400:          #94a3b8;
    --slate-500:          #64748b;
    --slate-600:          #475569;
    --slate-700:          #334155;
    --slate-800:          #1e293b;
    --slate-900:          #0f172a;

    /* 层次色：页面背景明显灰，让白卡片"浮"出来 */
    --bg-page:            #eef2f7;
    --bg-card:            #ffffff;
    --bg-subtle:          #f1f5f9;
    --border-subtle:      #cbd5e1;       /* slate-300 而非 200，边界清晰 */
    --border-normal:      #94a3b8;       /* slate-400 */

    /* 阴影：加深一档，"浮起"感 */
    --shadow-xs:          0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
    --shadow-sm:          0 2px 4px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.05);
    --shadow-md:          0 6px 12px -2px rgba(15,23,42,0.12), 0 3px 6px -3px rgba(15,23,42,0.06);
    --shadow-lg:          0 16px 28px -6px rgba(15,23,42,0.16), 0 6px 12px -6px rgba(15,23,42,0.08);
    --shadow-xl:          0 24px 48px -12px rgba(15,23,42,0.20), 0 10px 20px -10px rgba(15,23,42,0.10);
    --shadow-primary:     0 6px 18px rgba(0,85,164,0.28);

    /* 圆角：更柔和 */
    --radius-sm:          8px;
    --radius-md:          12px;
    --radius-lg:          16px;
    --radius-xl:          24px;

    /* 字号梯度（数值密度优化） */
    --fs-xxs:             10px;
    --fs-xs:              11px;
    --fs-sm:              12px;
    --fs-base:            13px;
    --fs-md:              14px;
    --fs-lg:              16px;
    --fs-xl:              19px;
    --fs-2xl:             24px;
    --fs-3xl:             30px;
    --fs-4xl:             40px;

    /* 过渡 */
    --t-fast:             0.12s cubic-bezier(0.4,0,0.2,1);
    --t-normal:           0.2s cubic-bezier(0.4,0,0.2,1);
    --t-slow:             0.35s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Body / 全局排版 ─────────────────────────────────────── */
body {
    background: var(--bg-page);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC',
                 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    color: var(--slate-900);                  /* 从 800 → 900，更深 */
    line-height: 1.5;
    font-size: var(--fs-md);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
}

/* 全局淡灰文本统一加深一档：避免"看不清" */
.text-muted, small, .small {
    color: var(--slate-600) !important;       /* Bootstrap 默认 muted 太淡 */
}

/* 数字栏（KPI 数字、表格金额等）字重加强 */
strong, b { font-weight: 700; color: var(--slate-900); }

/* ─── 滚动条：更细更现代 ──────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--slate-300);
    border-radius: 999px;
    transition: background var(--t-fast);
}
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

/* ─── 侧边栏：从重渐变改为单色 + 微妙叠加 ──────────────────── */
.app-sidebar {
    background: linear-gradient(180deg, #0a1628 0%, #0f2440 100%);
    box-shadow: 1px 0 3px rgba(0,0,0,0.04);
}
.app-sidebar .brand {
    background: rgba(0,0,0,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.app-sidebar .brand h4 {
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 18px;
}
.app-sidebar .brand small {
    color: rgba(255,255,255,0.50);
    font-weight: 500;
    letter-spacing: 0.04em;
}
.app-sidebar .nav-section-title {
    color: rgba(255,255,255,0.40) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    font-size: 10px !important;
    padding: 14px 22px 6px 32px !important;
}
.app-sidebar .nav-link {
    color: rgba(255,255,255,0.72);
    margin: 1px 8px;
    padding: 7px 14px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 13px;
    transition: all var(--t-fast);
}
.app-sidebar .nav-link:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
    padding-left: 14px;       /* 不再用偏移，保持稳定 */
}
.app-sidebar .nav-link.active {
    background: rgba(59,130,246,0.18);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(59,130,246,0.30);
}
.app-sidebar .nav-link.active::before {
    background: var(--brand-cyan);
    box-shadow: 0 0 8px rgba(6,182,212,0.50);
}
.app-sidebar .nav-group::before {
    background: var(--section-color, transparent);
    opacity: 0.20;
}

/* 顶栏已删除（场景/密级下拉无人使用）— 全局兼容隐藏老 DOM */
.app-topbar, .app-topbar-v2 { display: none !important; }

/* ─── 主内容区：宽度限制移除，顶部留白增加 ─────────────────── */
.app-main {
    padding: 32px 40px 80px;
    max-width: none;          /* 移除 1600px 限制，自适应宽屏 */
}
.app-main > * { animation: fadeInUp 0.3s cubic-bezier(0.4,0,0.2,1); }

/* ─── Hero 页头：实色顶条 + 强对比 ──────────────────────── */
.page-hero {
    padding: 22px 28px;
    margin-bottom: 20px;
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-cyan) 100%);
}
.page-hero .hero-title {
    color: var(--slate-900);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 0;
}
.page-hero .hero-subtitle {
    color: var(--slate-600);          /* 加深，不再 dim */
    font-size: 13px;
    margin-top: 4px;
    font-weight: 500;
}

/* ─── KPI 指标卡：强对比 + 顶部色条 + 数字醒目 ──────────── */
.metric-card {
    padding: 18px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: all var(--t-normal);
}
.metric-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--slate-300);
}
.metric-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 3px;
    width: auto;
    background: var(--brand-primary);
    border-radius: 0;
    opacity: 1;
}
.metric-card .metric-label {
    font-size: 11px;
    color: var(--slate-600);          /* 比 slate-500 加深一档 */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.metric-card .metric-value {
    font-size: 28px;                  /* 从 24 → 28，更醒目 */
    font-weight: 800;
    color: var(--brand-primary);      /* 用品牌色而非 slate-900 */
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}
.metric-card .metric-delta {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-700);
    margin-top: 6px;
}

/* ─── Section Header：粗壮一些 ──────────────────────────── */
.section-header {
    color: var(--slate-900);
    font-size: 16px;
    font-weight: 800;                  /* 700 → 800 */
    margin: 28px 0 14px;
    padding: 6px 0 8px 14px;
    letter-spacing: -0.01em;
    line-height: 1.4;
    border-bottom: 2px solid var(--slate-200);  /* 加底分隔 */
}
.section-header::before {
    width: 4px;                        /* 从 3 → 4 */
    background: var(--brand-primary);
    border-radius: 2px;
    top: 6px; bottom: 8px;
}
.section-header::after { display: none; }
.section-header + small,
.section-header small {
    display: block;
    color: var(--slate-600);           /* 从 500 → 600 */
    font-weight: 500;
    font-size: 12px;
    margin-left: 0;
    margin-top: 4px;
}

/* ─── Cards / Panels：白底 + 清晰边框 + 实在阴影 ──────── */
.card,
.card-panel {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    transition: all var(--t-normal);
}
.card:hover,
.card-panel:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--slate-400);
}
.card-header {
    background: var(--slate-50);
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 700;
    color: var(--slate-800);
    padding: 12px 18px;
    font-size: 13px;
}

/* ─── 按钮：更立体、更精致 ────────────────────────────────── */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0;
    padding: 7px 14px;
    transition: all var(--t-fast);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm {
    font-size: 12px;
    padding: 5px 11px;
    border-radius: 6px;
}
.btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}
.btn-primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    box-shadow: 0 4px 12px rgba(0,85,164,0.30);
}
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { background: #059669; border-color: #059669; box-shadow: 0 4px 12px rgba(16,185,129,0.30); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; box-shadow: 0 4px 12px rgba(239,68,68,0.30); }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-secondary { background: var(--slate-600); border-color: var(--slate-600); color: #fff; }
.btn-info { background: var(--info); border-color: var(--info); color: #fff; }
.btn-light {
    background: var(--slate-100);
    border-color: var(--slate-200);
    color: var(--slate-700);
}
.btn-outline-primary {
    color: var(--brand-primary);
    border: 1px solid var(--slate-300);
    background: #fff;
}
.btn-outline-primary:hover {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-info {
    background: #fff;
    border-color: var(--slate-300);
}

/* ─── 表单 ──────────────────────────────────────────────── */
/* 注意：button.dash-dropdown 不应在此规则中（它由 style.css 的 all:unset 重置，
   再被 .dash-dropdown-trigger 容器统一控制 padding/border） */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--slate-300);
    font-size: 13px;
    padding: 7px 11px;
    transition: all var(--t-fast);
    background: #fff;
}
.form-control:hover, .form-select:hover {
    border-color: var(--slate-400);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-10);
    outline: none;
}
.form-label, label {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-700);
    margin-bottom: 4px;
}

/* dcc.Dropdown 触发区 — 修复错位：统一 box-sizing 与宽度 */
.dash-dropdown-wrapper {
    width: 100%;
    box-sizing: border-box;
}
.dash-dropdown-trigger {
    border-radius: var(--radius-sm);
    border: 1px solid var(--slate-300);
    min-height: 36px;
    padding: 0 10px;
    width: 100%;                      /* 占满外层容器，防 grid col 内偏移 */
    box-sizing: border-box;
    transition: all var(--t-fast);
}
.dash-dropdown-trigger:hover { border-color: var(--slate-400); }
.dash-dropdown-trigger:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-10);
}
/* button 本体撑满 trigger，内部不再加 padding（避免叠加偏移） */
button.dash-dropdown {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}
/* portal 弹层 — 提高 z-index，确保宽度跟随 trigger */
.dash-dropdown-content {
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--border-subtle) !important;
    z-index: 10000 !important;        /* 高于一切（含 modal） */
    margin-top: 2px;                  /* 与 trigger 之间留 2px 间隙 */
}
.dash-dropdown-content .dash-dropdown-option {
    padding: 8px 12px;
    border-bottom: 1px solid var(--slate-100);
    font-size: 13px;
    line-height: 1.4;
}
.dash-dropdown-content .dash-dropdown-option:hover {
    background: var(--slate-50) !important;
    color: var(--slate-900);
}
.dash-dropdown-content .dash-dropdown-option[aria-selected="true"],
.dash-dropdown-content .dash-dropdown-option.selected {
    background: var(--brand-primary-10) !important;
    color: var(--brand-primary) !important;
    font-weight: 600;
}

/* ─── Tabs：更现代、更清爽 ────────────────────────────────── */
.nav-tabs {
    border-bottom: 1px solid var(--border-subtle);
    gap: 4px;
}
.nav-tabs .nav-link {
    color: var(--slate-500);
    font-weight: 600;
    padding: 10px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 6px 6px 0 0;
    transition: all var(--t-fast);
    font-size: 13px;
}
.nav-tabs .nav-link:hover {
    color: var(--slate-800);
    background: var(--slate-50);
}
.nav-tabs .nav-link.active {
    color: var(--brand-primary);
    background: transparent;
    border-bottom-color: var(--brand-primary);
    font-weight: 700;
}

/* ─── Alerts：更柔和 ────────────────────────────────────── */
.alert {
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    border-left: 3px solid;
    padding: 12px 16px;
    font-size: 13px;
    box-shadow: var(--shadow-xs);
}
.alert-info {
    background: var(--info-light); border-left-color: var(--info);
    color: #1e3a8a; border-color: rgba(59,130,246,0.18);
}
.alert-success {
    background: var(--success-light); border-left-color: var(--success);
    color: #065f46; border-color: rgba(16,185,129,0.18);
}
.alert-warning {
    background: var(--warning-light); border-left-color: var(--warning);
    color: #92400e; border-color: rgba(245,158,11,0.18);
}
.alert-danger {
    background: var(--danger-light); border-left-color: var(--danger);
    color: #991b1b; border-color: rgba(239,68,68,0.18);
}
.alert-light {
    background: var(--slate-50); border-left-color: var(--slate-400);
    color: var(--slate-700); border-color: var(--slate-200);
}

/* ─── Badges：更精致 ────────────────────────────────────── */
.badge {
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
}
.badge.bg-primary   { background: var(--brand-primary-10) !important; color: var(--brand-primary) !important; }
.badge.bg-success   { background: var(--success-light) !important;    color: #065f46 !important; }
.badge.bg-warning   { background: var(--warning-light) !important;    color: #92400e !important; }
.badge.bg-danger    { background: var(--danger-light) !important;     color: #991b1b !important; }
.badge.bg-info      { background: var(--info-light) !important;       color: #1e3a8a !important; }
.badge.bg-secondary { background: var(--slate-100) !important;        color: var(--slate-700) !important; }
.badge.bg-light     { background: var(--slate-50) !important;         color: var(--slate-600) !important; border: 1px solid var(--slate-200); }

/* ─── DataTable / AgGrid 现代化（quartz 风格）──────────── */
.dash-table-container .dash-spreadsheet-container {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.dash-spreadsheet-container .dash-spreadsheet-inner table {
    font-size: 13px !important;
}
.dash-header {
    background: var(--slate-50) !important;
    color: var(--slate-700) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    font-weight: 700 !important;
}

/* AgGrid 整体优化（含 ag-theme-balham/quartz） */
.ag-theme-balham,
.ag-theme-quartz,
.ag-theme-alpine {
    --ag-borders: 1px solid var(--border-subtle);
    --ag-border-color: var(--border-subtle);
    --ag-row-border-color: var(--slate-100);
    --ag-cell-horizontal-border: 1px solid var(--slate-100);
    --ag-header-background-color: var(--slate-50);
    --ag-header-foreground-color: var(--slate-700);
    --ag-header-cell-hover-background-color: var(--slate-100);
    --ag-row-hover-color: var(--brand-primary-10);
    --ag-selected-row-background-color: var(--brand-primary-10);
    --ag-font-family: 'Inter', -apple-system, 'PingFang SC', sans-serif;
    --ag-font-size: 13px;
    --ag-grid-size: 6px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
}
.ag-theme-balham .ag-header,
.ag-theme-quartz .ag-header,
.ag-theme-alpine .ag-header {
    background: var(--slate-50) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}
.ag-theme-balham .ag-header-cell-text,
.ag-theme-quartz .ag-header-cell-text,
.ag-theme-alpine .ag-header-cell-text {
    font-weight: 700;
    font-size: 12px;
    color: var(--slate-700);
    letter-spacing: 0.01em;
}
.ag-theme-balham .ag-row,
.ag-theme-quartz .ag-row,
.ag-theme-alpine .ag-row {
    font-size: 13px;
}
.ag-theme-balham .ag-row:hover,
.ag-theme-quartz .ag-row:hover,
.ag-theme-alpine .ag-row:hover {
    background: var(--brand-primary-10) !important;
}

/* ─── ListGroup ────────────────────────────────────────── */
.list-group-item {
    border-color: var(--border-subtle);
    font-size: 13px;
    padding: 10px 14px;
}
.list-group-item:hover {
    background: var(--slate-50);
}

/* ─── Modal：更现代 ────────────────────────────────────── */
.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}
.modal-header {
    border-bottom: 1px solid var(--border-subtle);
    padding: 18px 24px 14px;
    font-weight: 700;
}
.modal-body { padding: 18px 24px; font-size: 13px; }
.modal-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 14px 24px;
}

/* ─── 工具类细节 ───────────────────────────────────────── */
hr { border-color: var(--border-subtle); opacity: 0.5; }

/* 输入聚焦光晕统一 */
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* 数字字体（金额/年份等） — tabular-nums */
.metric-value, .ag-cell, .badge,
[class*="numeric"] {
    font-variant-numeric: tabular-nums;
}

/* 链接 */
a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-dark); text-decoration: underline; }

/* ─── 全局货币徽章 现代化 ────────────────────────────── */
.currency-badge {
    background: rgba(15,23,42,0.92);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px);
    letter-spacing: 0.02em;
}

/* ─── 入场动画：更柔和 ────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   v25 · 通用 UI class (inline style 收口)
   用法：html.Div("28400", className="kpi-value") 替代 style={...}
   只收口高频模式 —— 各页根据需要渐进替换
   ═══════════════════════════════════════════════════════════════ */

/* KPI 数字梯度 */
.kpi-value {
    font-size: var(--fs-3xl);       /* 30px */
    font-weight: 700;
    color: var(--slate-900);
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.kpi-value-lg { font-size: var(--fs-4xl); font-weight: 800; color: var(--slate-900); }
.kpi-value-md { font-size: var(--fs-2xl); font-weight: 700; color: var(--slate-900); }
.kpi-value-sm { font-size: var(--fs-xl);  font-weight: 700; color: var(--slate-900); }

.kpi-label {
    font-size: var(--fs-sm);        /* 12px */
    color: var(--slate-500);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
}

.kpi-delta-up   { color: var(--success); font-size: var(--fs-xs); font-weight: 600; }
.kpi-delta-down { color: var(--danger);  font-size: var(--fs-xs); font-weight: 600; }
.kpi-delta-flat { color: var(--slate-500); font-size: var(--fs-xs); }

/* 卡片标题 */
.card-title-std {
    font-size: var(--fs-lg);        /* 16px */
    font-weight: 600;
    color: var(--slate-800);
    margin-bottom: 4px;
}
.card-subtitle-std {
    font-size: var(--fs-sm);
    color: var(--slate-500);
    font-weight: 400;
}

/* 辅助文字 */
.muted      { color: var(--slate-500); }
.muted-dim  { color: var(--slate-400); }
.footnote   { font-size: var(--fs-xs); color: var(--slate-400); line-height: 1.5; }
.hint       { font-size: var(--fs-xs); color: var(--slate-500); font-style: italic; }

/* 标签徽章（统一替代 inline style 的各色 badge） */
.badge-std {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.6;
}
.badge-primary { background: var(--brand-primary-10); color: var(--brand-primary); }
.badge-success { background: rgba(16,185,129,0.12); color: var(--success); }
.badge-warning { background: rgba(245,158,11,0.12); color: var(--warning); }
.badge-danger  { background: rgba(239,68,68,0.12);  color: var(--danger); }
.badge-muted   { background: var(--slate-100); color: var(--slate-600); }

/* 空状态容器（搭配 components.ui.empty_state）*/
.empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--slate-400);
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-subtle);
}
.empty-state-icon { font-size: 32px; display: block; margin-bottom: 8px; }
.empty-state-text { font-size: var(--fs-md); color: var(--slate-500); margin-bottom: 4px; }
.empty-state-hint { font-size: var(--fs-xs); color: var(--slate-400); }

/* 数据新鲜度胶囊（搭配 freshness_badge） */
.freshness-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--slate-100);
    color: var(--slate-600);
    font-size: var(--fs-xs);
    font-weight: 500;
    border: 1px solid var(--border-subtle);
}
.freshness-badge::before {
    content: "●";
    color: var(--success);
    font-size: 10px;
    line-height: 1;
}

/* Loading 统一容器（搭配 loading_wrapper） */
.loading-wrap-std {
    min-height: 240px;
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   v25 骨架屏 — 替代 dcc.Loading 圈圈
   ═══════════════════════════════════════════════════════════════ */
.skeleton-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.skeleton-bar {
    height: 18px;
    background: linear-gradient(90deg,
        var(--slate-100) 0%,
        var(--slate-200) 50%,
        var(--slate-100) 100%);
    background-size: 200% 100%;
    border-radius: 6px;
    animation: skeleton-pulse 1.6s ease-in-out infinite;
}
@keyframes skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}