/* ============================================================
 * V2 公共样式 - All-in-One
 * 包含: Design Tokens + Reset + 工具类 + 表单 + 表格 + 模态框
 *      + flatpickr + 卡片 + 按钮 + 标签 + 消息 + 分页 + Loading
 * 规则: 单文件加载，零 @import，避免串行/闪烁/重复定义
 * ============================================================ */

/* ===== Design Tokens ===== */
:root {
    /* 主色 */
    --c-primary: #2B5AED;
    --c-primary-hover: #4D74F5;
    --c-primary-light: #E8EEFF;
    --c-primary-bg: #F0F4FF;
    /* 状态色 */
    --c-success: #22C55E;  --c-success-hover: #16A34A;  --c-success-light: #ECFDF5;
    --c-danger:  #EF4444;  --c-danger-hover:  #DC2626;  --c-danger-light:  #FEF2F2;
    --c-warning: #F59E0B;  --c-warning-hover: #D97706;  --c-warning-light: #FFFBEB;
    --c-info:    #6366F1;  --c-info-light:    #EEF2FF;
    --c-purple:  #7C3AED;  --c-purple-light:  #F5F3FF;
    /* 中性 */
    --c-bg: #F1F5F9;
    --c-surface: #FFFFFF;
    --c-border: #E2E8F0;
    --c-border-light: #F1F5F9;
    --c-divider: #F5F5F5;
    --c-text: #1E293B;
    --c-text-secondary: #64748B;
    --c-text-muted: #94A3B8;
    --c-text-placeholder: #CBD5E1;
    --c-sidebar: #001529;
    --c-sidebar-hover: #002140;
    --c-sidebar-active: var(--c-primary);
    /* 间距 */
    --sp-1: 4px;  --sp-2: 8px;  --sp-2-5: 10px;  --sp-3: 12px;  --sp-3-5: 14px;
    --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;     --sp-8: 32px;   --sp-10: 40px;
    /* 字号 */
    --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px;
    --fs-md: 14px;  --fs-md-lg: 15px; --fs-lg: 16px; --fs-xl: 18px;
    --fs-xxl: 20px; --fs-2xl: 22px; --fs-3xl: 28px;
    --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
    /* 圆角 */
    --r-xs: 3px; --r-sm: 4px; --r-smd: 6px; --r-md: 8px;
    --r-slg: 10px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px;
    /* 阴影 */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
    --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,.08);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.12);
    --shadow-xl: 0 20px 60px rgba(0,0,0,.16);
    /* 过渡 */
    --ease-out: cubic-bezier(.16,1,.3,1);
    --duration-fast: .15s;
    --duration-normal: .25s;
    /* 层级 */
    --z-dropdown: 100; --z-sticky: 200; --z-modal: 1000; --z-toast: 9999;
    /* 旧别名兼容（页面历史可能引用） */
    --blue: var(--c-primary); --blue-hover: var(--c-primary-hover); --blue-light: var(--c-primary-light);
    --green: var(--c-success); --green-light: var(--c-success-light);
    --red: var(--c-danger); --red-light: var(--c-danger-light);
    --orange: var(--c-warning); --orange-light: var(--c-warning-light);
      --purple-text: var(--c-purple);
      --gray: var(--c-text-muted);
      --bg: var(--c-bg);
      --border: var(--c-border); --border-light: var(--c-border-light);
      --text: var(--c-text); --text-secondary: var(--c-text-secondary); --text-muted: var(--c-text-muted);
      --radius: 8px;
}

/* ===== Reset ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { line-height: 1.3; }
h1 { font-size: var(--fs-2xl); font-weight: 700; }
h2 { font-size: var(--fs-xl); font-weight: 700; }
h3 { font-size: var(--fs-lg); font-weight: 600; }
h4 { font-size: var(--fs-base); font-weight: 600; }
.card-header h2 { font-size: var(--fs-lg); margin: 0; }

/* ===== 统计卡片网格（参考素材投产标准） ===== */
.summary-grid, .stats-grid, .stat-row, .kpi-row, .stats,
.stats-row, .summary-cards, .summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
/* 统一统计卡片: .stat-card / .sum-card / .summary-card / .s-card 同样式 */
.stat-card, .sum-card, .summary-card, .s-card {
    background: var(--c-surface);
    border-radius: var(--r-md);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    border-left: 3px solid var(--c-primary);
}
/* 颜色变体 */
.stat-card.cost,   .sum-card.cost,   .summary-card.cost,   .s-card.cost   { border-left-color: #ff4d4f; }
.stat-card.amount, .sum-card.amount, .summary-card.amount, .s-card.amount { border-left-color: #fa8c16; }
.stat-card.roi,    .sum-card.roi,    .summary-card.roi,    .s-card.roi,    .stat-card.c2 { border-left-color: #52c41a; }
.stat-card.conv,   .sum-card.conv,   .summary-card.conv,   .s-card.conv,   .stat-card.c4 { border-left-color: #722ed1; }
.stat-card.material, .sum-card.material, .stat-card.c5 { border-left-color: #13c2c2; }
.stat-card.c1  { border-left-color: #fa8c16; }
.stat-card.c3  { border-left-color: #1890ff; }
.stat-card.pink, .sum-card.pink, .summary-card.pink, .s-card.pink { border-left-color: #eb2f96; }
.stat-card.green, .summary-card.green, .s-card.green   { border-left-color: #52c41a; }
.stat-card.orange, .summary-card.orange, .s-card.orange { border-left-color: #fa8c16; }
.stat-card.red, .summary-card.red, .s-card.red         { border-left-color: #ff4d4f; }
.stat-card.blue, .summary-card.blue, .s-card.blue       { border-left-color: #1890ff; }
.stat-card.cyan, .summary-card.cyan, .s-card.cyan       { border-left-color: #13c2c2; }
.stat-card.purple, .summary-card.purple, .s-card.purple { border-left-color: #722ed1; }
/* 内部元素兼容多种类名 */
.stat-card .label, .stat-card .lbl, .stat-card .stat-label,
.sum-card .label, .summary-card .label, .s-card .label {
    display: block; font-size: var(--fs-sm); color: var(--c-text-secondary);
    margin-bottom: 4px; white-space: nowrap;
}
.stat-card .value, .stat-card .num, .stat-card .stat-value,
.sum-card .value, .summary-card .value, .s-card .value, .stat-card .val {
    display: block; font-size: var(--fs-xl); font-weight: 700;
    color: var(--c-text); line-height: 1.3;
}
.stat-card .sub, .stat-card .unit, .stat-card .stat-sub,
.sum-card .unit, .summary-card .sub {
    font-size: var(--fs-xs); font-weight: 400;
    color: var(--c-text-muted); margin-left: 2px;
}
@media (max-width: 768px) {
    .summary-grid, .stats-grid, .stat-row, .kpi-row, .stats,
    .stats-row, .summary-cards, .summary {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .stat-card, .sum-card, .summary-card, .s-card { padding: 10px 12px; }
    .stat-card .value, .stat-card .num, .stat-card .stat-value, .stat-card .val,
    .sum-card .value, .summary-card .value, .s-card .value { font-size: var(--fs-lg); }
}
@media (max-width: 480px) {
    .summary-grid, .stats-grid, .stat-row, .kpi-row, .stats,
    .stats-row, .summary-cards, .summary {
        grid-template-columns: 1fr;
    }
}
code, .mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: var(--fs-xs);
    color: var(--c-text-secondary);
}
button { font-family: inherit; }

/* ===== 容器 ===== */
.container { width: 100%; padding: var(--sp-4) var(--sp-5); }

/* ===== 工具类 ===== */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.text-muted  { color: var(--c-text-muted); }
.text-primary { color: var(--c-primary); }
.text-success { color: var(--c-success); }
.text-danger  { color: var(--c-danger); }
.text-warning { color: var(--c-warning); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }
.mt-1{margin-top:var(--sp-1);} .mt-2{margin-top:var(--sp-2);} .mt-3{margin-top:var(--sp-3);}
.mt-4{margin-top:var(--sp-4);} .mt-5{margin-top:var(--sp-5);} .mt-6{margin-top:var(--sp-6);}
.mb-1{margin-bottom:var(--sp-1);} .mb-2{margin-bottom:var(--sp-2);} .mb-3{margin-bottom:var(--sp-3);}
.mb-4{margin-bottom:var(--sp-4);} .mb-5{margin-bottom:var(--sp-5);} .mb-6{margin-bottom:var(--sp-6);}
.gap-1{gap:var(--sp-1);} .gap-2{gap:var(--sp-2);} .gap-3{gap:var(--sp-3);} .gap-4{gap:var(--sp-4);}
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-1 { flex: 1; }
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.required { color: var(--c-danger); }
.nowrap { white-space: nowrap; }

/* ===== 返回链接 ===== */
.back-link {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-base); color: var(--c-primary);
    text-decoration: none; margin-bottom: var(--sp-3);
}
.back-link:hover { text-decoration: underline; }

/* ===== Page Header / Panel / Card ===== */
.hd {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
}
.hd h1 { font-size: var(--fs-lg); margin: 0; }
.page-header {
    background: var(--c-surface);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
    box-shadow: var(--shadow-xs);
}
.page-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
}
.subtitle, .page-subtitle {
    color: var(--c-text-muted);
    font-size: var(--fs-base);
    margin-top: var(--sp-1);
}
.panel {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: var(--sp-5) var(--sp-6);
    box-shadow: var(--shadow-xs);
}
.card {
    background: var(--c-surface);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-5);
    transition: box-shadow var(--duration-fast) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--c-border-light);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); flex-wrap: wrap;
}
.card-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    display: flex; align-items: center; gap: var(--sp-2);
}
.card-body { padding: var(--sp-4) var(--sp-5); overflow-x: auto; }
.card-body--flush { padding: 0; }

/* ===== Button ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
    padding: var(--sp-2) 18px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--duration-fast) var(--ease-out);
    line-height: 1.5;
    position: relative;
    color: inherit;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-hover); box-shadow: 0 4px 12px rgba(43,90,237,.25); color: #fff; }
.btn-success { background: var(--c-success); color: #fff; }
.btn-success:hover { background: var(--c-success-hover); color: #fff; }
.btn-danger  { background: var(--c-danger); color: #fff; }
.btn-danger:hover { background: var(--c-danger-hover); color: #fff; }
.btn-warning, .btn-orange { background: var(--c-warning); color: #fff; }
.btn-warning:hover, .btn-orange:hover { background: var(--c-warning-hover); color: #fff; }
.btn-ghost, .btn-default {
    background: var(--c-surface); color: var(--c-text-secondary);
    border: 1px solid var(--c-border);
}
.btn-ghost:hover, .btn-default:hover {
    color: var(--c-primary); border-color: var(--c-primary);
    background: var(--c-primary-bg);
}
.btn-text {
    background: transparent; color: var(--c-primary);
    padding: var(--sp-1) var(--sp-2);
}
.btn-text:hover { background: var(--c-primary-bg); }
.btn-sm { padding: 3px 10px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-lg { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-md); }
.btn-block { width: 100%; }
.btn-group { display: flex; gap: var(--sp-2); }
.btn-quick {
    padding: 4px 12px; font-size: var(--fs-sm); border-radius: var(--r-full);
    cursor: pointer; border: 1px solid var(--c-border);
    background: var(--c-surface); color: var(--c-text-secondary);
    transition: all var(--duration-fast) var(--ease-out);
}
.btn-quick:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn-quick.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ===== Tag / Badge ===== */
.tag {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
    line-height: 1.6; white-space: nowrap;
}
.tag-success, .tag-green, .tag-ongoing, .tag-active { background: var(--c-success-light); color: var(--c-success); }
.tag-danger,  .tag-fail,  .tag-error  { background: var(--c-danger-light);  color: var(--c-danger); }
.tag-warning, .tag-pending { background: var(--c-warning-light); color: var(--c-warning); }
.tag-info,    .tag-blue   { background: var(--c-info-light);    color: var(--c-info); }
.tag-purple               { background: var(--c-purple-light);  color: var(--c-purple); }
.tag-default, .tag-off, .tag-disabled, .tag-ended, .tag-inactive {
    background: var(--c-border-light); color: var(--c-text-muted);
}
.badge {
    display: inline-block;
    background: var(--c-border-light); padding: 2px 8px;
    border-radius: var(--r-lg); font-size: var(--fs-sm);
    color: var(--c-text-muted); font-weight: var(--fw-medium);
}
.badge-primary { background: var(--c-primary-light); color: var(--c-primary); }
.badge-success { background: var(--c-success-light); color: var(--c-success); }
.badge-danger  { background: var(--c-danger-light);  color: var(--c-danger); }
.badge-warning { background: var(--c-warning-light); color: var(--c-warning); }

/* ===== Form ===== */
.form-group { margin-bottom: var(--sp-3); }
.form-item  { margin-bottom: var(--sp-4); }
.form-row {
    display: flex; gap: var(--sp-3); align-items: center;
    flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.form-group label, .form-item label, .form-label {
    display: block; font-size: var(--fs-sm);
    font-weight: var(--fw-medium); color: var(--c-text-secondary);
    margin-bottom: var(--sp-1);
}
input[type="text"], input[type="number"], input[type="search"],
input[type="email"], input[type="password"], input[type="url"],
input[type="date"], input[type="tel"], input[type="datetime-local"],
input[type="time"],
select, textarea, .form-control {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    color: var(--c-text);
    background: var(--c-surface);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
    outline: none;
    font-family: inherit;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(43,90,237,.1);
}
input::placeholder, textarea::placeholder {
    color: var(--c-text-placeholder);
}
input:disabled, select:disabled, textarea:disabled {
    background: var(--c-border-light);
    color: var(--c-text-muted);
    cursor: not-allowed;
}
textarea { resize: vertical; min-height: 80px; }
.field-focused label { color: var(--c-primary) !important; }
.form-actions {
    display: flex; gap: var(--sp-3); justify-content: flex-end;
    margin-top: var(--sp-5);
}

/* ===== Filter Bar ===== */
.filter-bar {
    background: var(--c-surface);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-5);
    box-shadow: var(--shadow-xs);
    display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end;
}
.filter-row {
    display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center;
    width: 100%;
}
.search-bar { display: flex; gap: var(--sp-2); align-items: center; }

/* ===== Toolbar ===== */
.toolbar {
    display: flex; gap: var(--sp-3); flex-wrap: wrap;
    align-items: center; margin-bottom: var(--sp-4);
    padding: var(--sp-3);
    background: var(--c-surface);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
}

/* ===== Table ===== */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
thead { background: var(--c-bg); }
th {
    padding: var(--sp-3) var(--sp-4);
    text-align: left; font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text-secondary);
    white-space: nowrap; border-bottom: 2px solid var(--c-border);
}
td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border-light);
    vertical-align: middle;
}
tbody tr { transition: background var(--duration-fast); }
tbody tr:hover { background: var(--c-primary-bg); }
tbody tr:nth-child(even) { background: #FAFBFD; }
tbody tr:nth-child(even):hover { background: var(--c-primary-bg); }
.tbl-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]::after { content: '⇅'; margin-left: 4px; opacity: .3; font-size: 10px; }
th.sort-asc::after  { content: '↑'; opacity: 1; color: var(--c-primary); }
th.sort-desc::after { content: '↓'; opacity: 1; color: var(--c-primary); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.cost { text-align: right; color: var(--c-danger); font-weight: 600; font-variant-numeric: tabular-nums; }
.editing {
    background: var(--c-primary-bg) !important;
    border-color: var(--c-primary) !important;
}
td .roi-positive { color: var(--c-success); font-weight: 600; }
td .roi-negative { color: var(--c-danger); font-weight: 600; }

/* ===== Modal ===== */
.modal {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.4); z-index: var(--z-modal);
    align-items: center; justify-content: center;
}
.modal.show { display: flex; }
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
    z-index: var(--z-modal);
}
.modal-overlay.show { display: flex; }
.modal-content, .modal-box {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    max-width: 550px; width: 90%;
    max-height: 80vh; overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: slideUp var(--duration-normal) var(--ease-out);
}
.modal-box { max-width: 500px; max-height: 85vh; }
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--sp-5);
    font-size: var(--fs-lg); font-weight: var(--fw-semibold);
}
.modal-close {
    background: none; border: none; font-size: 20px;
    cursor: pointer; color: var(--c-text-muted);
    width: 32px; height: 32px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--duration-fast);
}
.modal-close:hover { background: var(--c-border-light); color: var(--c-text); }
.modal-body { padding: 0; }
.modal-footer {
    margin-top: var(--sp-5);
    text-align: right; display: flex; gap: var(--sp-3);
    justify-content: flex-end;
}

/* ===== Message / Alert ===== */
.msg, .alert {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    margin-bottom: var(--sp-4);
    display: flex; align-items: center; gap: var(--sp-2);
}
.msg.warning, .alert-warning {
    background: var(--c-warning-light); color: #92400E;
    border: 1px solid #FDE68A;
}
.msg.info, .alert-info { background: var(--c-info-light); color: #3730A3; }
.msg.success, .msg.ok, .alert-success {
    background: var(--c-success-light); color: #065F46;
    border: 1px solid #A7F3D0;
}
.msg.error, .msg.err, .alert-error, .alert-danger {
    background: var(--c-danger-light); color: #991B1B;
    border: 1px solid #FECACA;
}
.tip  { font-size: var(--fs-sm); color: var(--c-text-muted); }
.hint { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 3px; }
.error-box {
    background: var(--c-danger-light);
    border: 1px solid #FECACA;
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    color: #991B1B; font-size: var(--fs-sm);
}

/* ===== Toast ===== */
.toast {
    position: fixed; top: 20px; left: 50%;
    transform: translateX(-50%);
    background: var(--c-text); color: #fff;
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-md);
    font-size: var(--fs-base); z-index: var(--z-toast);
    box-shadow: var(--shadow-lg);
    display: none;
}
.toast.show {
    display: block;
    animation: slideDown var(--duration-normal) var(--ease-out);
}

/* ===== Empty ===== */
.empty, .empty-state, .empty-hint {
    text-align: center; padding: 60px var(--sp-5);
    color: var(--c-text-muted);
}
.empty-icon {
    font-size: 36px; margin-bottom: var(--sp-3); opacity: .5;
}

/* ===== Tabs ===== */
.tabs {
    display: flex; gap: 4px;
    background: var(--c-surface);
    border-radius: var(--r-md) var(--r-md) 0 0;
    padding: var(--sp-2) var(--sp-2) 0;
    box-shadow: var(--shadow-xs);
}
.tab {
    padding: var(--sp-3) var(--sp-5);
    cursor: pointer; border-radius: var(--r-md) var(--r-md) 0 0;
    color: var(--c-text-secondary);
    font-weight: var(--fw-medium);
    transition: all var(--duration-fast);
    border: none; background: transparent;
    font-size: var(--fs-base);
}
.tab:hover { color: var(--c-primary); background: var(--c-primary-bg); }
.tab.active {
    color: var(--c-primary); background: var(--c-surface);
    font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-xs);
}

/* ===== Pagination ===== */
.pagination, .pager {
    display: flex; gap: var(--sp-1); align-items: center;
    margin-top: var(--sp-4); justify-content: flex-end; flex-wrap: wrap;
}
.pagination button, .pager button, .pager a {
    padding: var(--sp-1) var(--sp-2);
    border: 1px solid var(--c-border); border-radius: var(--r-sm);
    background: var(--c-surface); color: var(--c-text-secondary);
    cursor: pointer; font-size: var(--fs-sm);
    transition: all var(--duration-fast);
    text-decoration: none;
    min-width: 28px;
    text-align: center;
}
.pagination button:hover, .pager button:hover, .pager a:hover {
    border-color: var(--c-primary); color: var(--c-primary); text-decoration: none;
}
.pagination button.active, .pager button.active, .pager a.active {
    background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}
.pagination button:disabled, .pager button:disabled {
    opacity: .4; cursor: not-allowed;
}
.pager-info { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* ===== Loading ===== */
.loading-mask {
    position: fixed; inset: 0;
    background: rgba(255,255,255,.65);
    display: none; align-items: center; justify-content: center;
    z-index: var(--z-modal);
}
.loading-mask.show { display: flex; }
.loading-spinner {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    background: var(--c-surface); padding: var(--sp-5) var(--sp-8);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    color: var(--c-text-secondary); font-size: var(--fs-sm);
}
.loading-spinner::before {
    content: ''; width: 32px; height: 32px;
    border: 3px solid var(--c-border);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

/* ===== 数值与状态色 ===== */
.num     { color: var(--c-primary); font-weight: var(--fw-semibold); }
.cost    { color: var(--c-danger);  font-weight: var(--fw-semibold); }
.success { color: var(--c-success); }
.revenue { color: var(--c-success); font-weight: var(--fw-semibold); }

/* ===== Footer / 杂项 ===== */
.footer { text-align: center; color: var(--c-text-muted); font-size: var(--fs-xs); padding: var(--sp-3); }
.date-btns { display: flex; gap: var(--sp-1); }
.flow {
    display: flex; align-items: center; justify-content: center;
    gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-4);
}
.endpoint {
    background: var(--c-success-light);
    border: 1px solid #A7F3D0;
    padding: var(--sp-4) 18px;
    border-radius: var(--r-md);
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: var(--fs-sm);
}
.nav {
    display: flex; gap: var(--sp-3); justify-content: center;
    margin-top: 30px; flex-wrap: wrap;
}

/* ===== flatpickr 日历（统一定义，避免冲突） ===== */
.flatpickr-input {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    color: var(--c-text);
    background: var(--c-surface);
    width: 210px;
    cursor: pointer;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.flatpickr-input:focus, .flatpickr-input.active {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(43,90,237,.1);
    outline: none;
}
.flatpickr-input[readonly] { background: var(--c-surface); }
.flatpickr-calendar {
    font-size: var(--fs-sm);
    width: 260px !important;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
}
.flatpickr-calendar.rangeMode { width: 260px !important; }
.flatpickr-days, .dayContainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: wrap !important;
}
.flatpickr-day {
    max-width: none !important;
    min-width: 0 !important;
    flex-basis: 14.2857% !important;
    height: 32px;
    line-height: 32px;
    font-size: var(--fs-sm);
    border-radius: var(--r-sm);
    transition: all var(--duration-fast);
}
.flatpickr-day:hover {
    background: var(--c-primary-bg);
    color: var(--c-primary);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--c-primary) !important;
    color: #fff !important;
    border-color: var(--c-primary) !important;
}
.flatpickr-day.today { border-color: var(--c-primary); }
.flatpickr-day.inRange {
    background: var(--c-primary-bg) !important;
    border-color: var(--c-primary-bg) !important;
    color: var(--c-primary) !important;
    box-shadow: none !important;
}
.flatpickr-months .flatpickr-month { height: 32px; }
.flatpickr-current-month {
    font-size: var(--fs-md);
    padding-top: 6px;
}
.flatpickr-prev-month, .flatpickr-next-month { padding: 6px 10px; }
.flatpickr-weekday {
    font-size: var(--fs-xs);
    height: 28px;
    line-height: 28px;
    color: var(--c-text-muted);
}

/* ===== 动画 ===== */
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown{ from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes spin     { to { transform: rotate(360deg); } }

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .container { padding: var(--sp-3); }
    .card-header { flex-direction: column; align-items: flex-start; }
    th, td { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); white-space: nowrap; }
    .form-row { flex-direction: column; align-items: stretch; }
    .form-row input, .form-row select { width: 100%; }
    .modal-content, .modal-box { padding: var(--sp-5); width: 95%; }
    .filter-bar { padding: var(--sp-3); gap: var(--sp-2); }
}