/* ============ 基础 ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root{
  --blue:#2f6bff; --blue-d:#1d4ed8; --blue-l:#eef2ff;
  --ink:#0f172a; --text:#111827; --gray:#6b7280; --gray-l:#9ca3af;
  --line:#eef1f6; --line2:#e5e7eb; --bg:#f5f6f8;
  --ok:#16a34a; --warn:#b45309; --bad:#dc2626;
}
html,body{ height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  background:#ededed; color:var(--text); font-size:14px;
  display:flex; justify-content:center; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.app{ width:100%; max-width:440px; background:var(--bg); min-height:100vh; display:flex; flex-direction:column; position:relative; }
.desk-side{ display:none; }

/* ============ 登录 ============ */
.login-screen{ min-height:100vh; background:linear-gradient(160deg,#2f6bff,#1741a6 62%,#0f2a75); padding:44px 22px 24px; display:flex; flex-direction:column; }
.lg-brand{ color:#fff; font-size:26px; font-weight:700; letter-spacing:1px; }
.lg-sub{ color:rgba(255,255,255,.82); font-size:13px; margin:8px 0 26px; line-height:1.6; }
.login-box{ background:#fff; border-radius:16px; padding:18px 16px 16px; box-shadow:0 12px 32px rgba(9,20,60,.22); }
.login-box .field:last-of-type{ margin-bottom:14px; }
.lg-tip{ font-size:11.5px; color:var(--gray-l); line-height:1.7; margin-top:12px; text-align:center; }
.lg-tip b{ color:var(--blue-d); }
.lg-foot{ color:rgba(255,255,255,.6); font-size:11px; text-align:center; margin-top:auto; padding-top:18px; line-height:1.6; }

/* ============ 顶栏 ============ */
.topbar{ background:linear-gradient(135deg,#2f6bff,#1d4ed8); color:#fff; padding:12px 14px 13px; display:flex; align-items:center; justify-content:space-between; gap:10px; position:sticky; top:0; z-index:30; }
.tb-name{ font-size:16px; font-weight:600; line-height:1.3; }
.tb-sub{ font-size:11.5px; opacity:.88; margin-top:3px; }
.tb-btn{ border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12); color:#fff; font-size:11.5px; padding:5px 10px; border-radius:8px; cursor:pointer; font-family:inherit; flex-shrink:0; }

/* ============ 主体 ============ */
.body{ flex:1; padding:12px 12px 78px; }
.page{ display:none; animation:fade .18s ease; }
.page.on{ display:block; }
@keyframes fade{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

.card{ background:#fff; border-radius:12px; padding:14px; margin-bottom:12px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.card h3{ font-size:14px; color:var(--text); margin-bottom:10px; display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.card h3 .tip{ font-size:11px; color:var(--gray-l); font-weight:400; flex-shrink:0; }
.hint{ font-size:11px; color:var(--gray-l); line-height:1.65; }
.hint b{ color:var(--gray); }
.hint.center{ text-align:center; margin-top:8px; }
.mt8{ margin-top:8px; } .mb8{ margin-bottom:8px; }

.field{ margin-bottom:12px; }
.field label{ display:block; font-size:12px; color:var(--gray); margin-bottom:5px; }
.field label .req{ color:#ef4444; }
.field label .opt{ color:var(--gray-l); font-size:11px; }
.field select,.field input,.field textarea{
  width:100%; border:1px solid var(--line2); border-radius:8px; padding:9px 10px; font-size:14px;
  background:#fafafa; color:var(--text); outline:none; font-family:inherit;
}
.field input[disabled],.field select[disabled]{ color:var(--gray-l); background:#f4f5f7; }
.field select:focus,.field input:focus,.field textarea:focus{ border-color:var(--blue); background:#fff; }
.field textarea{ min-height:76px; line-height:1.6; resize:vertical; }
.row2{ display:flex; gap:10px; } .row2>*{ flex:1; min-width:0; }
.row3{ display:flex; gap:8px; } .row3>*{ flex:1; min-width:0; }
.act-row{ display:flex; gap:8px; margin-top:2px; }

.btn{ width:100%; border:none; border-radius:10px; padding:13px; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; }
.btn:active{ opacity:.85; }
.btn-primary{ background:#2f6bff; color:#fff; box-shadow:0 4px 12px rgba(47,107,255,.22); }
.btn-primary[disabled]{ background:#b9c7ea; box-shadow:none; }
.btn-ghost{ background:var(--blue-l); color:var(--blue-d); padding:10px; font-size:13px; }
.btn-dash{ background:#fff; border:1px dashed #b6c6ee; color:#3b6ae0; padding:11px; font-size:13px; }
.btn-plain{ background:#fff; border:1px solid var(--line2); color:#374151; padding:10px; font-size:13px; }
.btn-danger{ background:#fff; border:1px solid #fecaca; color:var(--bad); padding:10px; font-size:13px; }
.btn-mini{ flex-shrink:0; width:auto; border:1px solid var(--blue); background:#fff; color:var(--blue-d); font-size:12px; padding:0 12px; border-radius:8px; cursor:pointer; font-family:inherit; }
.btn-sm{ padding:7px 12px; font-size:12px; border-radius:8px; border:none; cursor:pointer; font-family:inherit; background:var(--blue-l); color:var(--blue-d); }

/* ============ 汇总 / 指标 ============ */
.sum{ background:#0f172a; color:#fff; border-radius:12px; padding:12px; margin-bottom:12px; }
.sum .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px 4px; text-align:center; }
.sum .v{ font-size:15px; font-weight:700; }
.sum .v.hi{ color:#7dd3a0; } .sum .v.warn{ color:#fbbf24; }
.sum .k{ font-size:10.5px; color:#94a3b8; margin-top:2px; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.stats.c3{ grid-template-columns:repeat(3,1fr); }
.stats.c2{ grid-template-columns:repeat(2,1fr); }
.stat{ background:#fff; border-radius:10px; padding:10px 4px; text-align:center; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.stat .v{ font-size:16px; font-weight:700; color:var(--blue-d); }
.stat .v.sm{ font-size:14px; }
.stat .v.ok{ color:var(--ok); } .stat .v.warn{ color:var(--warn); } .stat .v.bad{ color:var(--bad); }
.stat .k{ font-size:10.5px; color:var(--gray-l); margin-top:3px; }

/* ============ 明细行 ============ */
.line{ border:1px solid var(--line); border-radius:10px; padding:11px; margin-bottom:10px; background:#fbfcfe; }
.line.warn-box{ border-color:#fbbf24; background:#fffbeb; }
.line-hd{ display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; gap:8px; }
.line-hd .idx{ font-size:12px; font-weight:600; color:var(--blue-d); background:var(--blue-l); padding:2px 8px; border-radius:20px; }
.line-hd .cov{ font-size:11px; padding:2px 7px; border-radius:20px; }
.line .del{ border:none; background:none; color:#f07171; font-size:12px; cursor:pointer; padding:2px 4px; }
.line .field{ margin-bottom:8px; }
.line .field input{ padding:8px 10px; font-size:13.5px; }
.line .mini{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.line .mini .wide{ grid-column:span 2; }
.warn-in{ border-color:#f59e0b !important; background:#fffbeb !important; }
.err-in{ border-color:#ef4444 !important; background:#fef2f2 !important; }
.reason-box{ border-top:1px dashed #fbd38d; padding-top:9px; margin-top:2px; }
.reason-box label{ color:var(--warn) !important; }

/* ============ 图表 ============ */
.bar-item{ display:flex; align-items:center; margin-bottom:10px; font-size:12px; gap:8px; }
.bar-item:last-child{ margin-bottom:0; }
.bar-item .name{ width:92px; color:#374151; font-size:12px; line-height:1.25; flex-shrink:0; }
.bar-item .name small{ display:block; color:var(--gray-l); font-size:10px; }
.bar-item .track{ flex:1; background:#f1f3f7; border-radius:6px; height:20px; overflow:hidden; }
.bar-item .fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,#5b8bff,#2f6bff); display:flex; align-items:center; justify-content:flex-end; color:#fff; font-size:10.5px; padding-right:6px; min-width:34px; }
.bar-item.orange .fill{ background:linear-gradient(90deg,#ffb25b,#f97316); }
.bar-item.green .fill{ background:linear-gradient(90deg,#4ade80,#16a34a); }
.bar-item.slate .fill{ background:linear-gradient(90deg,#a3b3d9,#64748b); }
.bar-item.red .fill{ background:linear-gradient(90deg,#f87171,#dc2626); }
.funnel{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.funnel .stage{ color:#fff; border-radius:6px; text-align:center; padding:9px 0; font-size:12px; min-width:86px; }
.funnel .stage b{ font-size:13px; }
.funnel .stage i{ font-style:normal; opacity:.85; font-size:11px; margin-left:6px; }
.spark{ display:flex; align-items:flex-end; gap:4px; height:64px; padding-top:4px; }
.spark .col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; height:100%; justify-content:flex-end; }
.spark .bar{ width:100%; background:linear-gradient(180deg,#5b8bff,#2f6bff); border-radius:3px 3px 0 0; min-height:2px; }
.spark .bar.zero{ background:#e5e7eb; }
.spark .lb{ font-size:9.5px; color:var(--gray-l); }

/* ============ 列表 / 表格 ============ */
.item{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid #f1f3f7; }
.item:last-child{ border-bottom:none; }
.avatar{ width:36px; height:36px; border-radius:50%; background:var(--blue-l); color:var(--blue-d); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; flex-shrink:0; }
.avatar.red{ background:#fee2e2; color:var(--bad); }
.avatar.yellow{ background:#fef3c7; color:var(--warn); }
.avatar.green{ background:#dcfce7; color:var(--ok); }
.avatar.gray{ background:#f4f4f5; color:#a1a1aa; }
.it-info{ flex:1; min-width:0; }
.it-nm{ font-size:14px; color:var(--text); font-weight:500; }
.it-meta{ font-size:11px; color:var(--gray-l); margin-top:2px; line-height:1.45; }
.badge{ font-size:10px; padding:2px 7px; border-radius:20px; margin-left:6px; vertical-align:1px; white-space:nowrap; }
.badge.red{ background:#fee2e2; color:var(--bad); }
.badge.yellow{ background:#fef3c7; color:var(--warn); }
.badge.green{ background:#dcfce7; color:#15803d; }
.badge.blue{ background:var(--blue-l); color:var(--blue-d); }
.badge.gray{ background:#f4f4f5; color:#a1a1aa; }
.btn-urge{ border:none; background:var(--blue-l); color:var(--blue-d); font-size:12px; padding:7px 12px; border-radius:8px; cursor:pointer; flex-shrink:0; }
.btn-urge:disabled{ background:#f4f4f5; color:#a1a1aa; }
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl{ width:100%; border-collapse:collapse; font-size:12px; min-width:420px; }
.tbl th{ color:var(--gray); font-weight:500; text-align:left; padding:7px 4px; border-bottom:1px solid var(--line2); line-height:1.35; white-space:nowrap; }
.tbl td{ padding:9px 4px; border-bottom:1px solid #f1f3f7; color:#374151; line-height:1.4; }
.tbl tr:last-child td{ border-bottom:none; }
.num-b{ font-weight:600; color:var(--text); }
.num-sys{ color:var(--gray-l); font-size:11px; }
.empty{ text-align:center; color:var(--gray-l); font-size:12.5px; padding:22px 8px; line-height:1.7; }

/* ============ 段控件 / 筛选 ============ */
.seg{ display:flex; background:#f1f3f7; border-radius:9px; padding:3px; margin-bottom:12px; }
.seg button{ flex:1; border:none; background:none; font-size:12.5px; color:var(--gray); padding:7px 0; border-radius:7px; cursor:pointer; font-family:inherit; }
.seg button.on{ background:#fff; color:var(--blue-d); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.filter{ display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.filter select,.filter input{ flex:1; min-width:0; border:1px solid var(--line2); border-radius:8px; padding:8px 9px; font-size:13px; background:#fff; color:var(--text); outline:none; font-family:inherit; }

/* ============ 标签 / 主数据 ============ */
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ background:#f1f5fd; color:#3b5f9e; font-size:11.5px; padding:4px 9px; border-radius:14px; border:none; font-family:inherit; cursor:default; }
.chip.off{ background:#f4f4f5; color:#a1a1aa; text-decoration:line-through; }
.chip.tap{ cursor:pointer; }
.chip.add{ background:#fff; border:1px dashed #c7d2e8; color:#7b8aa8; }
.deptgrp{ margin-bottom:11px; }
.deptgrp:last-child{ margin-bottom:0; }
.deptgrp .gh{ font-size:12px; font-weight:600; color:#374151; margin-bottom:6px; display:flex; justify-content:space-between; }
.deptgrp .gh span{ font-weight:400; color:var(--gray-l); font-size:11px; }
.kv{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid #f1f3f7; font-size:13px; gap:10px; }
.kv:last-child{ border-bottom:none; }
.kv .k{ color:var(--gray); font-size:12.5px; }
.kv .v{ color:var(--text); text-align:right; }

/* ============ 底部导航 ============ */
.tabbar{ position:fixed; bottom:0; width:100%; max-width:440px; background:#fff; border-top:1px solid var(--line2); display:flex; padding-bottom:env(safe-area-inset-bottom); z-index:40; }
.tabbar button{ flex:1; border:none; background:none; padding:7px 0 6px; color:var(--gray-l); font-family:inherit; cursor:pointer; }
.tabbar button.on{ color:var(--blue-d); }
.tabbar .ico{ font-size:17px; line-height:1.1; }
.tabbar .lbl{ font-size:10.5px; margin-top:2px; }
.tabbar .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--bad); vertical-align:top; margin-left:2px; }

/* ============ 弹窗 / toast ============ */
.mask{ position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:60; display:flex; align-items:flex-end; justify-content:center; }
.modal{ background:#fff; width:100%; max-width:440px; border-radius:16px 16px 0 0; padding:16px 16px calc(14px + env(safe-area-inset-bottom)); max-height:86vh; overflow-y:auto; animation:up .22s ease; }
@keyframes up{ from{transform:translateY(30px);opacity:.4} to{transform:none;opacity:1} }
.modal-hd{ font-size:15px; font-weight:600; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; }
.modal-hd .x{ border:none; background:none; color:var(--gray-l); font-size:18px; cursor:pointer; line-height:1; }
.modal-ft{ display:flex; gap:10px; margin-top:6px; }
.modal-ft .btn{ flex:1; padding:12px; font-size:14.5px; }
.toast{ position:fixed; top:38%; left:50%; transform:translate(-50%,-50%); background:rgba(17,24,39,.92); color:#fff; padding:12px 20px; border-radius:10px; font-size:13.5px; display:none; z-index:99; max-width:78%; text-align:center; line-height:1.55; }
.foot{ text-align:center; font-size:11px; color:#b0b6c0; padding:4px 0 16px; line-height:1.65; }

/* ============ 桌面预览 ============ */
@media (min-width:960px){
  body{ align-items:center; gap:44px; padding:26px 24px; }
  .app{ border-radius:18px; box-shadow:0 16px 48px rgba(15,23,42,.16); height:calc(100vh - 52px); max-height:920px; min-height:0; overflow:hidden; }
  .body{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .topbar{ border-radius:0; }
  .tabbar{ position:absolute; bottom:0; border-radius:0 0 18px 18px; }
  .mask{ align-items:center; }
  .modal{ border-radius:16px; }
  .desk-side{ display:block; width:320px; flex-shrink:0; }
  .desk-side .brand{ font-size:12.5px; color:var(--blue); font-weight:600; letter-spacing:.5px; }
  .desk-side h2{ font-size:25px; color:var(--ink); margin:8px 0 6px; letter-spacing:-.5px; }
  .desk-side .lead{ font-size:13px; color:#64748b; line-height:1.7; margin-bottom:20px; }
  .desk-side ul{ list-style:none; }
  .desk-side li{ display:flex; gap:10px; font-size:13px; color:#334155; line-height:1.6; margin-bottom:13px; }
  .desk-side li b{ display:block; font-size:13.5px; color:var(--ink); margin-bottom:2px; }
  .desk-side .no{ flex-shrink:0; width:20px; height:20px; border-radius:6px; background:var(--blue-l); color:var(--blue-d); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .desk-side .note{ font-size:11.5px; color:#94a3b8; line-height:1.7; border-top:1px solid var(--line2); padding-top:12px; margin-top:4px; }
}