:root{
  --primary:#2563eb; --primary-dark:#1d4ed8; --primary-soft:#e8f1fb;
  --bg:#f0f2f5; --card:#ffffff; --border:#e7e9ee; --border-strong:#d6dae2;
  --text:#1f2937; --muted:#6b7280; --light:#9ca3af;
  --success:#16a34a; --success-bg:#e8f7ee;
  --warn:#d97706; --warn-bg:#fef3e2;
  --danger:#dc2626; --danger-bg:#fdecea;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  color:var(--text); background:var(--bg); font-size:14px; line-height:1.5;
}
.hidden{ display:none !important; }
.app{ display:flex; min-height:100vh; }

/* 侧边栏 */
.sidebar{ width:248px; flex:none; background:var(--card); border-right:1px solid var(--border); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.brand{ height:56px; display:flex; align-items:center; gap:10px; padding:0 16px; border-bottom:1px solid var(--border); flex:none; }
.brand .logo{ width:32px; height:32px; border-radius:8px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.brand .logo svg{ width:18px; height:18px; }
.brand .name{ font-size:15px; font-weight:600; }
.brand .sub{ font-size:11px; color:var(--light); margin-top:1px; }
.nav{ flex:1; overflow-y:auto; padding:4px 0 16px; }
.nav-group-title{ padding:14px 16px 6px; font-size:12px; color:var(--light); letter-spacing:.5px; font-weight:500; }
.nav-item{ display:flex; align-items:center; gap:10px; padding:9px 16px; color:#3f4650; cursor:pointer; border-left:3px solid transparent; font-size:13.5px; user-select:none; }
.nav-item svg{ width:16px; height:16px; flex:none; color:var(--light); }
.nav-item .pill{ margin-left:auto; font-size:10px; padding:1px 6px; border-radius:999px; background:#eef0f3; color:var(--light); }
.nav-item:hover{ background:#f5f7fa; }
.nav-item.active{ background:var(--primary-soft); color:var(--primary); border-left-color:var(--primary); font-weight:500; }
.nav-item.active svg{ color:var(--primary); }

/* 顶栏 */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ height:56px; background:var(--card); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 24px; flex:none; }
.breadcrumb{ font-size:13px; color:var(--muted); }
.breadcrumb .cur{ color:var(--text); font-weight:500; }
.breadcrumb .sep{ margin:0 6px; color:var(--light); }
.user{ display:flex; align-items:center; gap:8px; font-size:13px; }
.avatar{ width:28px; height:28px; border-radius:50%; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; }

.content{ flex:1; padding:24px; overflow-y:auto; }
.page-head{ margin-bottom:16px; }
.page-head h1{ font-size:20px; font-weight:600; display:flex; align-items:center; gap:10px; }
.page-head .cat-tag{ font-size:12px; font-weight:400; color:var(--primary); background:var(--primary-soft); padding:2px 10px; border-radius:999px; }
.page-head .ready-tag{ font-size:12px; font-weight:400; color:var(--success); background:var(--success-bg); padding:2px 10px; border-radius:999px; }
.page-head .desc{ color:var(--muted); margin-top:4px; font-size:13px; }

/* 步骤条 */
.steps{ display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px 18px; margin-bottom:16px; }
.step{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
.step-num{ width:22px; height:22px; border-radius:50%; background:#eef0f3; color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
.step.active{ color:var(--primary); font-weight:500; }
.step.active .step-num{ background:var(--primary); color:#fff; }
.step-arrow{ color:var(--light); }

.card{ background:var(--card); border:1px solid var(--border); border-radius:8px; padding:20px; margin-bottom:16px; }
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.card-title{ font-size:14px; font-weight:600; }
.card-tip{ color:var(--light); font-size:12px; }

/* 上传 */
.dropzone{ border:1.5px dashed var(--border-strong); border-radius:8px; padding:22px 16px; text-align:center; color:var(--muted); cursor:pointer; background:#fafbfc; transition:.15s; margin-bottom:12px; }
.dropzone:last-child{ margin-bottom:0; }
.dropzone:hover, .dropzone.dragover{ border-color:var(--primary); color:var(--primary); background:#f3f7ff; }
.dropzone.has-file{ border-style:solid; border-color:var(--border-strong); background:#fff; }
.dz-icon svg{ width:26px; height:26px; margin-bottom:6px; color:var(--light); }
.dz-text{ font-size:14px; }
.dz-hint{ font-size:12px; color:var(--light); margin-top:2px; }
.file-chip{ display:flex; align-items:center; gap:12px; text-align:left; }
.file-ico{ width:36px; height:36px; border-radius:8px; background:#eef7ee; color:#16a34a; display:flex; align-items:center; justify-content:center; flex:none; }
.file-ico svg{ width:18px; height:18px; }
.file-meta{ flex:1; min-width:0; }
.file-name{ font-size:13.5px; color:var(--text); font-weight:500; word-break:break-all; }
.file-size{ font-size:12px; color:var(--light); margin-top:1px; }
.dz-remove{ width:22px; height:22px; border-radius:50%; color:var(--light); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; flex:none; }
.dz-remove:hover{ background:#fee2e2; color:var(--danger); }

.sample-bar{ display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:13px; color:var(--muted); }
.link-btn{ color:var(--primary); cursor:pointer; background:none; border:none; font-size:13px; font-family:inherit; padding:0; }
.link-btn:hover{ text-decoration:underline; }

/* 按钮 */
.btn{ display:inline-flex; align-items:center; gap:7px; border-radius:6px; padding:8px 18px; font-size:14px; cursor:pointer; border:1px solid transparent; transition:.15s; font-family:inherit; line-height:1.4; }
.btn svg{ width:15px; height:15px; }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover:not(:disabled){ background:var(--primary-dark); }
.btn-outline{ background:#fff; border-color:var(--border-strong); color:var(--text); }
.btn-outline:hover{ border-color:var(--primary); color:var(--primary); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-sm{ padding:6px 14px; font-size:13px; }
.spinner{ width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* 统计 */
.stats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-bottom:16px; }
.stat{ background:var(--card); border:1px solid var(--border); border-radius:8px; padding:14px 16px; }
.stat .label{ font-size:12px; color:var(--muted); }
.stat .value{ font-size:22px; font-weight:600; margin-top:4px; }
.stat.hl .value{ color:var(--danger); }

/* 过滤 */
.filter-bar{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.chip{ padding:4px 12px; border-radius:999px; font-size:12.5px; border:1px solid var(--border-strong); background:#fff; color:var(--muted); cursor:pointer; }
.chip.active{ background:var(--primary-soft); border-color:var(--primary); color:var(--primary); }

/* 表格 */
.table-wrap{ overflow:auto; border:1px solid var(--border); border-radius:8px; }
table{ width:100%; border-collapse:collapse; font-size:13px; min-width:560px; }
th{ background:#f7f8fa; color:#3f4650; font-weight:600; text-align:left; padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap; }
td{ padding:10px 14px; border-bottom:1px solid #f0f1f3; color:var(--text); }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover td{ background:#fafbfc; }
tr.row-diff td{ background:#fffaf5; }
.muted{ color:var(--light); }
.diff-cell{ color:var(--danger); font-weight:600; }

.badge{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; line-height:1.5; }
.badge-ok{ background:var(--success-bg); color:var(--success); }
.badge-warn{ background:var(--warn-bg); color:var(--warn); }
.badge-danger{ background:var(--danger-bg); color:var(--danger); }
.badge-info{ background:var(--primary-soft); color:var(--primary); }

/* 提示框 */
.err-box{ background:#fff7f7; border:1px solid #fecaca; border-radius:8px; padding:12px 16px; margin-bottom:16px; font-size:13px; color:#b91c1c; }
.err-box .err-title{ font-weight:600; margin-bottom:4px; }
.pending-box{ background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:12px 16px; margin-bottom:16px; font-size:13px; color:#92400e; }

/* 占位 */
.dev-banner{ background:var(--card); border:1px dashed var(--border-strong); border-radius:8px; padding:40px 20px; text-align:center; color:var(--muted); }
.dev-banner .dev-ico{ font-size:40px; margin-bottom:12px; color:var(--light); }
.dev-banner h2{ font-size:16px; color:var(--text); margin-bottom:6px; }
.dev-banner p{ font-size:13px; color:var(--light); }
.demo-note{ color:var(--light); font-size:12px; margin-top:10px; }

/* 班次设置 */
.shift-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.shift-grid label{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); }
.shift-grid input{ padding:8px 10px; border:1px solid var(--border-strong); border-radius:6px; font-size:14px; font-family:inherit; color:var(--text); background:#fff; }

/* 口径说明 + 柱状图 */
.basis-note{ background:var(--primary-soft); border:1px solid var(--primary); border-radius:8px; padding:10px 16px; margin-bottom:16px; font-size:13px; color:var(--primary-dark); }
.basis-note b{ font-weight:600; }
.chart-wrap{ overflow-x:auto; }
.dept-chart{ display:block; width:100%; height:auto; }
.dept-chart .bar{ fill:var(--primary); }
.dept-chart .bar:hover{ fill:var(--primary-dark); }
.dept-chart .bar-label{ fill:var(--text); font-size:12px; font-weight:600; }
.dept-chart .dept-label{ fill:var(--muted); font-size:12px; }
.dept-chart .axis-line{ stroke:var(--border-strong); stroke-width:1; }