/* 车匠云 · 汽修门店管理系统 — 预览版样式
   design: 石墨绿 + 暖纸底 + 琥珀强调 / 发丝线 + 微阴影 / 数字用 DIN Alternate */

:root{
  --wb: 250px;
  --bg:#F6F5F1;
  --card:#FFFFFF;
  --ink:#171C1A;
  --ink2:#5F6A66;
  --ink3:#8C9691;
  --line:#E7E5DF;
  --line2:#F1EFE9;
  --brand:#1E6F55;
  --brand-d:#123F32;
  --brand-l:#E7F1EC;
  --amber:#C1712A;
  --amber-l:#FBF0E1;
  --red:#AF452C;
  --red-l:#FBEAE4;
  --blue:#2E5C8A;
  --blue-l:#E9F0F7;
  --sb:#111A16;
  --sb2:#0B120F;
  --sb-ink:#93A29B;
  --r:10px;
  --r-sm:8px;
  --sh:0 1px 2px rgba(23,28,26,.04), 0 10px 28px -18px rgba(23,28,26,.18);
  --num:"DIN Alternate","SF Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:600}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ───────── shell ───────── */
.app{display:grid;grid-template-columns:var(--wb) 1fr;height:100vh;overflow:hidden}

.sidebar{
  background:var(--sb);
  color:var(--sb-ink);display:flex;flex-direction:column;overflow:hidden;
  border-right:1px solid #0A100D;
}
.sb-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 16px}
.sb-logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(145deg,#2A8A69,#14523E);
  display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.sb-logo svg{width:17px;height:17px;color:#EAF4EF}
.sb-name{color:#F2F6F4;font-size:14px;font-weight:600;letter-spacing:.02em}
.sb-name small{display:block;font-weight:400;font-size:10.5px;color:#7E8F87;letter-spacing:.12em;margin-top:1px}
.sb-store{
  margin:2px 14px 10px;padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:#C6D3CD;
}
.sb-store b{font-weight:500;color:#EAF2EE}
.sb-nav{flex:1;overflow-y:auto;padding:4px 12px 16px;scrollbar-width:thin}
.sb-nav::-webkit-scrollbar{width:6px}
.sb-nav::-webkit-scrollbar-thumb{background:#243029;border-radius:3px}
.sb-group{margin-top:1px}
.sb-gh{display:flex;align-items:center;gap:8px;padding:8px 8px 5px;color:#6C7C74;
  font-size:10.5px;letter-spacing:.09em;color:#71827A;text-transform:uppercase;cursor:pointer;
  position:sticky;top:0;background:var(--sb);z-index:2;user-select:none}
.sb-gh:hover{color:#A2B0A9}
.sb-gh svg{width:13px;height:13px;opacity:.85}
.sb-gh em{margin-left:auto;font-style:normal;font-size:10px;color:#4E5E56;letter-spacing:.04em;
  font-family:"DIN Alternate",system-ui;padding:0 2px;transition:opacity .15s}
.sb-gh .cv{width:0;height:0;border-left:3.4px solid transparent;border-right:3.4px solid transparent;
  border-top:4.4px solid #5A6A62;margin-left:2px;transition:transform .18s;flex:none}
.sb-group.collapsed .sb-gh .cv{transform:rotate(-90deg)}
.sb-group.collapsed .sb-body{display:none}
.sb-group.collapsed .sb-gh em{opacity:.5}
.sb-body{padding-bottom:2px}
.sb-item{display:flex;align-items:center;gap:8px;position:relative;padding:5px 10px 5px 9px;margin:0;
  border-radius:7px;color:#A9B5AE;font-size:13px;cursor:pointer;
  transition:background .13s,color .13s;text-decoration:none}
.sb-item .sb-i{width:14px;height:14px;flex:none;opacity:.62;transition:opacity .13s}
.sb-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-item:hover{background:rgba(255,255,255,.055);color:#E6EFEA}
.sb-item:hover .sb-i{opacity:.9}
.sb-item.active{background:linear-gradient(90deg,rgba(80,190,152,.20),rgba(80,190,152,.10));color:#FFFFFF;font-weight:500}
.sb-item.active .sb-i{opacity:1;color:#7FD9B6}
.sb-item.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:16px;border-radius:0 3px 3px 0;background:#4FC79A}
.sb-item .hb{width:6px;height:6px;border-radius:50%;background:var(--amber);margin-left:auto;flex:none;
  box-shadow:0 0 0 3px rgba(193,113,42,.16)}
.sb-group.cur .sb-gh{color:#9FB0A8}
.sb-foot{padding:10px 16px 14px;border-top:1px solid rgba(255,255,255,.06);
  font-size:11px;color:#5D6D65;display:flex;justify-content:space-between;align-items:center}

/* 底部登录用户 */
.sb-user{display:flex;align-items:center;gap:10px;padding:12px 14px;margin:0 10px 2px;
  border-top:1px solid rgba(255,255,255,.07);background:transparent}
.su-av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,#2A8A69,#134C39);color:#EAF4EF;font-size:12px;font-weight:600}
.su-t{min-width:0;line-height:1.3}
.su-t b{display:block;font-size:12.5px;font-weight:500;color:#E7F0EB}
.su-t small{display:block;font-size:10.5px;color:#6E7E76;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-out{margin-left:auto;color:#5D6D65;display:grid;place-items:center;width:24px;height:24px;
  border-radius:6px;text-decoration:none;transition:.15s}
.su-out:hover{background:rgba(255,255,255,.07);color:#C9D6CF}
.su-out svg{width:14px;height:14px}

/* ───────── topbar ───────── */
.main{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topbar{height:58px;flex:none;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 20px}
.search{flex:0 0 330px;height:34px;background:#F7F6F2;border:1px solid var(--line);border-radius:8px;
  display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--ink3);font-size:12.5px}
.search svg{width:14px;height:14px;flex:none}
.search kbd{margin-left:auto;font:11px/1 var(--num);color:var(--ink3);background:#fff;
  border:1px solid var(--line);border-radius:4px;padding:3px 5px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.tb-pill{height:26px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:999px;
  background:var(--amber-l);color:#8A4E14;font-size:11.5px;border:1px solid #F2DFC6;white-space:nowrap}
/* 行内小图标统一尺寸，避免 svg 取默认 300×150 撑破容器 */
.chip svg,.tb-pill svg,.note svg,.toast svg,.legend svg,.quick svg,.tch svg,
.legend span svg,.hint svg{width:13px;height:13px;flex:none}
.tb-date{font-size:11.5px;color:var(--ink3);font-family:var(--num);letter-spacing:.02em}
.tb-icon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--ink2);
  border:1px solid transparent;position:relative}
.tb-icon:hover{background:#F7F6F2;border-color:var(--line)}
.tb-icon svg{width:16px;height:16px}
.tb-icon .bdg{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 2px #fff}
.tb-user{display:flex;align-items:center;gap:8px;padding-left:10px;margin-left:2px;
  border-left:1px solid var(--line);height:34px}
.avatar{width:29px;height:29px;border-radius:50%;background:#DFE9E4;color:#1C5B45;
  display:grid;place-items:center;font-size:12px;font-weight:600}
.tb-user b{font-size:12.5px;font-weight:500;display:block;line-height:1.2}
.tb-user span{font-size:11px;color:var(--ink3)}

.content{flex:1;overflow-y:auto;padding:20px 24px 44px;scrollbar-width:thin}
.content::-webkit-scrollbar{width:9px}
.content::-webkit-scrollbar-thumb{background:#DCD9D1;border-radius:5px;border:2px solid var(--bg)}

/* ───────── page header ───────── */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.ph h1{font-size:19px;letter-spacing:-.01em}
.ph .sub{font-size:12.5px;color:var(--ink2);margin-top:5px}
.ph .sub b{font-weight:600;color:var(--ink)}
.ph-r{display:flex;align-items:center;gap:8px;flex:none}
.crumb{font-size:11.5px;color:var(--ink3);margin-bottom:7px;letter-spacing:.02em}
.crumb b{color:var(--ink2);font-weight:500}

/* ───────── primitives ───────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--line2)}
.card-hd h3{font-size:13.5px}
.card-hd .hint{font-size:11.5px;color:var(--ink3)}
.card-bd{padding:16px}
.card-bd.tight{padding:0}

.btn{height:33px;padding:0 13px;border-radius:8px;font-size:12.5px;border:1px solid var(--line);
  background:#fff;color:var(--ink);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:background .15s,border-color .15s}
.btn:hover{background:#FAF9F5;border-color:#DCD9D1}
.btn svg{width:14px;height:14px}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:#1A6049;border-color:#1A6049}
.btn-amber{background:var(--amber);border-color:var(--amber);color:#fff}
.btn-amber:hover{background:#AA6424;border-color:#AA6424}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink2)}
.btn-ghost:hover{background:#F4F2EC;border-color:transparent}
.btn-sm{height:27px;padding:0 10px;font-size:11.5px;border-radius:6px}
.btn-sm svg{width:12px;height:12px}

.seg{display:inline-flex;background:#F1EFE9;border:1px solid var(--line);border-radius:8px;padding:2px}
.seg b{font-weight:500;font-size:12px;color:var(--ink2);padding:4px 11px;border-radius:6px;cursor:pointer}
.seg b.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(23,28,26,.08)}

.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{height:29px;padding:0 11px;border-radius:7px;border:1px solid var(--line);background:#fff;
  font-size:12px;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip .n{font-family:var(--num);font-size:11px;opacity:.75}

.pill{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;border-radius:999px;
  font-size:11.5px;line-height:1;white-space:nowrap}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85}
.pill.plain::before{display:none}
.p-green{background:var(--brand-l);color:#156044}
.p-amber{background:var(--amber-l);color:#8A4E14}
.p-red{background:var(--red-l);color:#8C3521}
.p-blue{background:var(--blue-l);color:#28527A}
.p-gray{background:#F2F1EC;color:#6B7470}

.tbl-scroll{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.1em;color:var(--ink3);font-weight:600;
  padding:9px 14px;background:#FBFAF6;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tbody tr:hover{background:#FBFAF6}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.tbl .mono{font-family:var(--num);font-variant-numeric:tabular-nums}
.tbl .strong{font-weight:600}
.tbl .mut{color:var(--ink3)}
.tbl tr.warn td{background:#FEFAF3}
.tbl tr.warn:hover td{background:#FDF6EB}

.grid{display:grid;gap:13px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:13px}
.split-l{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:13px}

/* KPI */
.kpi{padding:14px 16px 13px;position:relative;overflow:hidden}
.kpi .k-lb{font-size:11.5px;color:var(--ink2);letter-spacing:.02em;display:flex;align-items:center;gap:6px}
.kpi .k-lb svg{width:13px;height:13px;color:var(--ink3)}
.kpi .k-v{font-family:var(--num);font-size:29px;line-height:1.15;margin-top:8px;letter-spacing:-.01em}
.kpi .k-v i{font-style:normal;font-size:14px;color:var(--ink2);margin-left:2px;font-family:inherit}
.kpi .k-f{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:11.5px;color:var(--ink3)}
.delta{display:inline-flex;align-items:center;gap:3px;font-family:var(--num);font-size:11.5px;
  padding:1px 5px;border-radius:5px}
.delta.up{color:#156044;background:var(--brand-l)}
.delta.dn{color:#8C3521;background:var(--red-l)}
.kpi .spark{position:absolute;right:12px;bottom:12px;opacity:.9}

/* dashboard chart */
.chart-wrap{padding:8px 6px 2px}
.legend{display:flex;gap:14px;font-size:11.5px;color:var(--ink2)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}
.donut-lb{display:flex;flex-direction:column;gap:9px;font-size:12px}
.donut-lb .row{display:flex;align-items:center;gap:8px}
.donut-lb .row i{width:8px;height:8px;border-radius:2px;flex:none}
.donut-lb .row span{color:var(--ink2)}
.donut-lb .row b{margin-left:auto;font-family:var(--num);font-weight:500}
.donut-lb .row em{font-style:normal;color:var(--ink3);font-family:var(--num);width:38px;text-align:right}

/* bays */
.bays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bay{border:1px solid var(--line);border-radius:9px;padding:11px 12px;background:#fff;position:relative}
.bay::after{content:"";position:absolute;left:0;top:11px;bottom:11px;width:2px;border-radius:2px;background:#DDDAD2}
.bay.run::after{background:var(--brand)}
.bay.wait::after{background:var(--amber)}
.bay.free::after{background:#D5D2CA}
.bay .b-h{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink2)}
.bay .b-h b{font-size:12.5px;color:var(--ink);font-weight:600}
.bay .plate{font-family:var(--num);font-size:16px;letter-spacing:.02em;margin:7px 0 2px}
.bay .car{font-size:11.5px;color:var(--ink3)}
.bay .job{font-size:11.5px;color:var(--ink2);margin-top:7px;min-height:17px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{height:4px;border-radius:3px;background:#EFEDE6;margin-top:9px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--brand)}
.bay.wait .bar i{background:var(--amber)}
.bay .b-f{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:11px;color:var(--ink3)}
.tch{display:flex;align-items:center;gap:5px}
.tch .av{width:17px;height:17px;border-radius:50%;background:#E4EBE7;color:#1C5B45;
  font-size:9.5px;display:grid;place-items:center;font-weight:600}

/* todo list */
.todo li{list-style:none;display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line2)}
.todo{margin:0;padding:0}
.todo li:last-child{border-bottom:0}
.todo .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none}
.todo .ic svg{width:14px;height:14px}
.todo .tx{min-width:0;flex:1}
.todo .tx b{font-size:12.5px;font-weight:500;display:block}
.todo .tx span{font-size:11.5px;color:var(--ink3);display:block;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo .go{font-size:11.5px;color:var(--brand);flex:none}

/* booking timeline */
.tl-hd{display:grid;grid-template-columns:58px repeat(5,minmax(0,1fr));border-bottom:1px solid var(--line);background:#FBFAF6}
.tl-hd .hd{padding:8px 6px 9px;text-align:center;font-size:11.5px;color:var(--ink2);
  border-left:1px solid var(--line2)}
.tl-hd .hd .av{width:21px;height:21px;border-radius:50%;background:#E7EDE9;color:#1C5B45;
  font-size:10px;display:grid;place-items:center;margin:0 auto 4px;font-weight:600}
.tl-bd{display:grid;grid-template-columns:58px repeat(5,minmax(0,1fr))}
.tl-bd .timecol{position:relative;height:540px;border-right:1px solid var(--line2)}
.tl-bd .timecol span{position:absolute;right:8px;font-family:var(--num);font-size:10px;color:var(--ink3);
  transform:translateY(-6px)}
.tl-bd .col{position:relative;height:540px;border-left:1px solid var(--line2);
  background-image:repeating-linear-gradient(to bottom,transparent 0 53px,var(--line2) 53px 54px)}
.tl-bd .col:first-of-type{border-left:0}
.tl-bd .slot{position:absolute;left:4px;right:4px;border-radius:7px;padding:5px 7px;overflow:hidden;
  font-size:10.5px;line-height:1.3;border:1px solid transparent;box-shadow:0 1px 1px rgba(23,28,26,.03)}
.tl-bd .slot b{display:block;font-family:var(--num);font-size:11px;font-weight:600;letter-spacing:.01em}
.tl-bd .slot span{display:block;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-bd .s-run{background:var(--brand-l);border-color:#CFE4D9;color:#14563E}
.tl-bd .s-book{background:#FFFDF7;border-color:#EADFC6;color:#7C5A1D}
.tl-bd .s-new{background:#FBF0E4;border-color:#F0DDC4;color:#8A4E14}
.tl-bd .nowline{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--red);z-index:3}
.tl-bd .nowline::before{content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;
  border-radius:50%;background:var(--red)}
.chart{display:block;width:100%;height:auto}

/* kanban */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;align-items:start}
.col-hd{display:flex;align-items:center;gap:7px;padding:2px 4px 9px;font-size:12px;color:var(--ink2)}
.col-hd b{color:var(--ink);font-size:12.5px;font-weight:600}
.col-hd .n{font-family:var(--num);font-size:11px;background:#E9E7E0;color:var(--ink2);
  padding:1px 6px;border-radius:999px}
.col-bd{background:#F1EFE9;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:8px;
  min-height:430px;border:1px solid #EDEBE4}
.job{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 11px;
  box-shadow:0 1px 2px rgba(23,28,26,.04);cursor:grab}
.job:hover{border-color:#D6D2C8}
.job .j-top{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--ink3)}
.job .j-top .num{font-size:10.5px;letter-spacing:.02em}
.job .j-plate{font-family:var(--num);font-size:14.5px;margin:6px 0 1px;letter-spacing:.02em}
.job .j-car{font-size:11px;color:var(--ink3)}
.job .j-job{font-size:11.5px;color:var(--ink2);margin-top:7px;padding-top:7px;border-top:1px dashed var(--line2)}
.job .j-f{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--ink3)}
.job.urgent{border-left:2px solid var(--amber)}

/* detail / form */
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 14px}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld label{font-size:11px;color:var(--ink3);letter-spacing:.02em}
.fld .in{height:33px;border:1px solid var(--line);border-radius:7px;background:#fff;
  display:flex;align-items:center;padding:0 10px;font-size:12.5px;color:var(--ink);overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.fld .in.mut{color:var(--ink3);background:#FBFAF6}
.fld .in b{font-weight:500}
.sec-t{font-size:12px;color:var(--ink2);letter-spacing:.06em;margin:18px 0 10px;display:flex;
  align-items:center;gap:8px}
.sec-t::after{content:"";flex:1;height:1px;background:var(--line2)}
.sec-t em{font-style:normal;font-size:10.5px;color:var(--ink3);letter-spacing:0}

/* inspection grid */
.insp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.insp .it{border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:#fff}
.insp .it .n{font-size:11.5px;color:var(--ink2)}
.insp .it .s{font-size:11px;margin-top:5px;display:flex;align-items:center;gap:5px}
.insp .it .s::before{content:"";width:6px;height:6px;border-radius:50%}
.insp .ok .s{color:#156044}.insp .ok .s::before{background:#2E8A66}
.insp .warn .s{color:#8A4E14}.insp .warn .s::before{background:var(--amber)}
.insp .bad .s{color:#8C3521}.insp .bad .s::before{background:var(--red)}

/* summary / totals */
.totals{margin-left:auto;width:290px;font-size:12.5px}
.totals .tr{display:flex;justify-content:space-between;padding:6px 0;color:var(--ink2)}
.totals .tr b{font-family:var(--num);font-weight:500;color:var(--ink)}
.totals .tr.big{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;color:var(--ink)}
.totals .tr.big b{font-size:21px;color:var(--brand-d);font-weight:600}
.pay{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:6px}
.pay .p{border:1px solid var(--line);border-radius:8px;padding:10px;text-align:center;font-size:12px;color:var(--ink2);background:#fff}
.pay .p svg{width:17px;height:17px;display:block;margin:0 auto 6px;color:var(--ink3)}
.pay .p.on{border-color:var(--brand);background:var(--brand-l);color:#14563E}
.pay .p.on svg{color:var(--brand)}

/* customer */
.cust-split{display:grid;grid-template-columns:302px minmax(0,1fr);gap:13px}
.cust-split>*{min-width:0;max-width:100%}
.clist{max-height:none}
.clist .it{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line2);cursor:pointer}
.clist .it:hover{background:#FBFAF6}
.clist .it.on{background:var(--brand-l)}
.clist .it .av{width:30px;height:30px;border-radius:50%;background:#E7EDE9;color:#1C5B45;
  display:grid;place-items:center;font-size:11.5px;font-weight:600;flex:none}
.clist .it .tx{min-width:0}
.clist .it .tx b{font-size:12.5px;display:block}
.clist .it .tx span{font-size:11px;color:var(--ink3)}
.timeline{position:relative;padding-left:16px}
.timeline::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--line)}
.timeline .ev{position:relative;padding:0 0 14px 2px}
.timeline .ev::before{content:"";position:absolute;left:-15px;top:5px;width:7px;height:7px;border-radius:50%;
  background:#fff;border:1.5px solid #C9C5BA}
.timeline .ev.on::before{border-color:var(--brand);background:var(--brand)}
.timeline .ev b{font-size:12.5px;font-weight:500;display:block}
.timeline .ev span{font-size:11.5px;color:var(--ink3)}

/* matrix */
.mx{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
.mx th{font-size:10.5px;letter-spacing:.08em;color:var(--ink3);font-weight:600;padding:9px 10px;
  background:#FBFAF6;border-bottom:1px solid var(--line);text-align:center}
.mx th:first-child{text-align:left}
.mx td{padding:8px 10px;border-bottom:1px solid var(--line2);text-align:center;color:var(--ink3)}
.mx td:first-child{text-align:left;color:var(--ink);font-weight:500}
.mx .ck{width:15px;height:15px;border-radius:4px;border:1px solid #D9D5CB;display:inline-block;background:#fff}
.mx .ck.on{background:var(--brand);border-color:var(--brand);position:relative}
.mx .ck.on::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;
  border:1.6px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}

/* generic page skeleton */
.empty{padding:34px 20px;text-align:center;color:var(--ink3);font-size:12.5px}
.empty b{display:block;color:var(--ink2);font-size:13px;margin-bottom:6px;font-weight:500}
.note{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:8px;
  background:#FBFAF6;border:1px solid var(--line);font-size:11.5px;color:var(--ink2);line-height:1.6}
.note svg{width:14px;height:14px;flex:none;margin-top:1px;color:var(--ink3)}

/* toast */
.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,14px);opacity:0;pointer-events:none;
  background:#171C1A;color:#F5F7F5;font-size:12.5px;padding:9px 15px;border-radius:9px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);transition:.22s;z-index:99;display:flex;gap:8px;align-items:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast svg{width:14px;height:14px;color:#4FC79A}

@media (max-width:1220px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bays{grid-template-columns:repeat(2,minmax(0,1fr))}
  .insp{grid-template-columns:repeat(4,minmax(0,1fr))}
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .cust-split{grid-template-columns:1fr}
  .split,.split-l{grid-template-columns:1fr}
  .g3,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pay{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ───────── 截图模式（仅 scripts/shoot.mjs 使用）：解除内层滚动，按内容高度整页捕获 ───────── */
body.shoot{min-height:900px}
body.shoot,body.shoot .app{height:auto;min-height:900px;overflow:visible;position:relative}
body.shoot .main{grid-column:2;overflow:visible}
body.shoot .sidebar{position:absolute;top:0;left:0;bottom:0;width:var(--wb)}
body.shoot .content{height:auto;overflow:visible;padding-bottom:26px}

/* 快捷操作 */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quick .q{display:flex;align-items:center;gap:7px;padding:9px 10px;border:1px solid var(--line);
  border-radius:8px;font-size:12px;color:var(--ink2);cursor:pointer;background:#FCFBF8}
.quick .q:hover{border-color:#CFE0D7;background:#F7FBF9;color:var(--brand-d)}
.quick .q svg{width:14px;height:14px;color:var(--brand)}

/* 侧栏底部链接 */
.sb-links{display:flex;align-items:center;gap:6px;padding:0 16px 4px;font-size:11px;color:#5D6D65;white-space:nowrap}
.sb-ver{padding:0 16px 14px;font-size:10px;color:#46554D;letter-spacing:.02em;white-space:nowrap}
.sb-links a{color:var(--ink3);text-decoration:none;transition:color .15s}
.sb-links a:hover{color:var(--brand-d)}
.sb-links i{color:var(--line);font-style:normal}

/* ───────── 看板 2.0：KPI 图标 / 三栏 / 完成率 / 预警 ───────── */
.kpi .k-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.kpi .k-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;margin-top:-2px}
.kpi .k-ic svg{width:15px;height:15px}
.kpi .k-v{margin-top:6px}
.kpi .k-f .delta{margin-right:6px}
.kpi .k-f{line-height:1.5}
.split3 .card{display:flex;flex-direction:column}
.split3 .card .card-bd{flex:1}

.split3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.12fr);gap:13px;align-items:stretch}

.barlist{display:flex;flex-direction:column;gap:11px;margin:-2px 0 0}
.bl-row{display:flex;gap:9px;align-items:flex-start}
.bl-row .av{width:24px;height:24px;border-radius:50%;background:#E7EDE9;color:#1C5B45;font-size:11px;
  display:grid;place-items:center;flex:none;margin-top:1px}
.bl-main{flex:1;min-width:0}
.bl-hd{display:flex;align-items:baseline;gap:6px;font-size:12px}
.bl-hd b{font-weight:500}
.bl-hd span{font-size:10.5px;color:var(--ink3)}
.bl-hd em{margin-left:auto;font-style:normal;font-size:12px;color:var(--ink2)}
.bl-bar{height:5px;border-radius:3px;background:#EDF1EE;margin:5px 0 3px;overflow:hidden}
.bl-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#3D8F72,#1E6F55)}
.bl-ft{font-size:10.5px;color:var(--ink3)}

.alist{list-style:none;margin:-2px 0 0;padding:0}
.alist li{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid var(--line2);align-items:flex-start}
.alist li:last-child{border-bottom:0}
.alist .lv{flex:none;margin-top:1px}
.alist .tx{flex:1;min-width:0}
.alist .tx b{display:block;font-size:12px;font-weight:500;line-height:1.45}
.alist .tx span{display:block;font-size:10.5px;color:var(--ink3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alist .tm{flex:none;font-size:10px;color:var(--ink3);margin-top:2px}
.alist .pill{font-size:10.5px;padding:1px 6px}
.donut-lb .row em{width:34px;text-align:right;font-variant-numeric:tabular-nums}
.donut-lb .row b{width:52px;text-align:right;font-variant-numeric:tabular-nums}
.donut-lb .row span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:1240px){.split3{grid-template-columns:1fr 1fr}}
@media (max-width:1000px){.split3{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════
   移动端适配（≤1000 抽屉导航 / ≤760 手机版式 / ≤420 紧凑档）
   ═══════════════════════════════════════════════════════════════ */

/* 汉堡按钮与顶栏品牌：桌面不显示 */
.tb-burger,.tb-brand{display:none}
.sb-x{display:none}

/* ── 窄桌面/平板：侧栏仍常驻左侧，只收窄 ── */
@media (min-width:761px) and (max-width:1000px){
  .app{grid-template-columns:224px minmax(0,1fr)}
  .sidebar{width:224px}
  .sb-item{padding:8px 9px;font-size:13px}
  .sb-gh{padding:10px 7px 5px;font-size:10.5px}
  .sb-store{font-size:12px;padding:8px 10px}
  .sb-nav{padding-bottom:6px}
  .tbl{min-width:600px}
  .search{display:none}
}

/* ── 手机：侧栏改为抽屉（可开可关） ── */
@media (max-width:760px){
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:min(84vw,300px);z-index:200;
    transform:translateX(-102%);transition:transform .26s cubic-bezier(.32,.72,0,1);
    box-shadow:0 0 44px rgba(0,0,0,.42);border-right:0;
  }
  body.nav-open .sidebar{transform:none}
  .tb-burger{display:grid;place-items:center;width:38px;height:38px;flex:none;border:0;border-radius:9px;
    background:transparent;color:var(--ink);padding:0;margin-right:2px}
  .tb-burger svg{width:20px;height:20px}
  .tb-brand{display:block;font-size:14.5px;font-weight:600;letter-spacing:.02em;margin-right:auto}
  .search{display:none}
  .sb-x{display:grid;place-items:center;margin-left:auto;width:30px;height:30px;border:0;
    border-radius:8px;background:rgba(255,255,255,.06);color:#A9B5AE;cursor:pointer;padding:0}
  .sb-x svg{width:15px;height:15px}
  .nav-scrim{position:fixed;inset:0;background:rgba(10,16,13,.46);z-index:190;opacity:0;
    pointer-events:none;transition:opacity .22s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  body.nav-open .nav-scrim{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
  .sb-nav{padding-bottom:8px}
  .sb-item{padding:9px 10px;font-size:14px}
  .sb-gh{padding:11px 8px 6px;font-size:11px}
  .app{height:100dvh}
}

/* ── 手机版式 ── */
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .seg-lb{font-size:11px;color:var(--ink3);margin-right:2px;white-space:nowrap}
  .kpi .k-f{color:var(--ink2)}
  /* 百分比条：条后面补数字，避免只剩一根条看不懂 */
  .pct-cell{display:flex;align-items:center;gap:7px;white-space:nowrap}
  .pct-cell .bar{flex:1;min-width:0}
  .pct-cell .pct{font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
  .tbl-scroll table.mx th:first-child,.tbl-scroll table.mx td:first-child{min-width:86px;white-space:nowrap}
  /* 权限矩阵：首列吸附 + 滑动提示，横向滚动才看得出来 */
  .tbl-scroll table.mx th:first-child,.tbl-scroll table.mx td:first-child{
    position:sticky;left:0;background:#fff;z-index:3;box-shadow:7px 0 9px -7px rgba(12,32,24,.22)}
  .tbl-scroll table.mx thead th:first-child{background:#FBFAF6}
  .scroll-hint{font-size:11px;color:var(--ink3);padding:7px 2px 0;display:flex;align-items:center;gap:5px}
  .cust-hd{flex-wrap:wrap;row-gap:10px}
  .cust-stats{width:100%;justify-content:space-between;gap:8px;text-align:left;
    border-top:1px solid var(--line);padding-top:10px}
  .cust-stats .num{font-size:17px!important}
  /* 窄屏根因：内容区/网格子项的 min-width:auto 会被长表格顶宽，导致整块被裁 */
  .content,.content>*,.grid,.split,.split-l,.split3,.card,.card-bd{min-width:0;max-width:100%}
  .tbl-scroll{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .topbar{height:52px;padding:0 12px 0 8px;gap:6px}
  .tb-burger{display:grid;place-items:center;width:38px;height:38px;flex:none;border:0;border-radius:9px;
    background:transparent;color:var(--ink);padding:0;margin-right:2px}
  .tb-burger svg{width:20px;height:20px}
  .tb-burger:active{background:#F1EFE9}
  .tb-brand{display:block;font-size:14.5px;font-weight:600;letter-spacing:.02em;margin-right:auto}
  .search{display:none}
  .tb-date,.tb-pill{display:none}
  .tb-right{gap:4px;margin-left:auto}
  .tb-icon{width:34px;height:34px}
  .tb-user{padding-left:2px}
  .tb-user div{display:none}
  .avatar{width:30px;height:30px;font-size:12px}

  .content{padding:12px 13px calc(38px + env(safe-area-inset-bottom))}
  .crumb{display:none}

  /* 页头改为纵向：标题一行、操作一行，不再挤压换行 */
  .ph{flex-direction:column;align-items:stretch;gap:11px;margin-bottom:13px}
  .ph h1{font-size:17.5px;line-height:1.3}
  .ph .sub{font-size:12px;margin-top:4px;line-height:1.5}
  .ph-r{flex-wrap:wrap;gap:7px;width:100%}
  .ph-r .btn{height:34px}
  .seg{flex:1 1 auto}
  .seg b{padding:7px 10px;font-size:12px;text-align:center;flex:1 1 auto}

  /* 卡片 */
  .card{border-radius:10px}
  .card-hd{padding:11px 13px;flex-wrap:wrap;gap:6px}
  .card-hd h3{font-size:13px}
  .card-bd{padding:13px}
  .grid{gap:10px}
  .g2,.g3,.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split3{grid-template-columns:1fr}
  .bays,.board{grid-template-columns:1fr}
  .insp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pay{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}

  /* KPI 卡：两列但收紧内边距与数字级差 */
  .kpi{padding:11px 12px 10px}
  .kpi .k-lb{font-size:11px;gap:5px}
  .kpi .k-v{font-size:22px;margin-top:5px}
  .kpi .k-v i{font-size:12px}
  .kpi .k-f{font-size:10.5px;gap:4px;margin-top:5px;line-height:1.35;letter-spacing:0;
    display:block;white-space:normal;overflow-wrap:anywhere}
  .kpi .k-f .delta{display:inline-block;vertical-align:1px;margin-right:4px}
  .kpi .spark{display:none}
  .kpi .k-ic{width:26px;height:26px;border-radius:8px}
  .kpi .k-ic svg{width:13px;height:13px}

  /* 图表区 */
  .chart-wrap{padding:4px 2px 0}

  /* 表格 → 卡片式纵排（表头由 JS 写入 data-label） */
  table.tbl{font-size:12.5px}
  table.tbl thead{display:none}
  table.tbl,table.tbl tbody,table.tbl tr,table.tbl td{display:block;width:100%}
  table.tbl tr{padding:11px 13px 8px;border-bottom:1px solid var(--line2)}
  table.tbl tbody tr:last-child{border-bottom:0}
  table.tbl tbody tr:hover{background:transparent}
  table.tbl tr.warn{background:#FEFAF3}
  table.tbl td{
    display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline;
    padding:4px 0;border:0;text-align:right;line-height:1.45;word-break:break-word;
  }
  table.tbl td::before{
    content:attr(data-label);color:var(--ink3);font-size:11.5px;font-weight:500;
    text-align:left;white-space:nowrap;letter-spacing:.02em;
  }
  table.tbl td[data-label=""]::before{display:none}
  table.tbl td:empty{display:none}
  table.tbl .r{text-align:right}
  /* 首列当行标题：加粗、去掉标签，像卡片标题 */
  table.tbl tr>td:first-child{padding-top:0;padding-bottom:6px;
    font-weight:600;font-size:13px;grid-template-columns:1fr;text-align:left}
  table.tbl tr>td:first-child::before{display:none}

  /* 权限矩阵等宽表：横向滚动兜底 */
  .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -13px;padding:0 13px}
  .tbl-scroll table.mx{min-width:520px}
  table.mx{font-size:12px}

  /* 过滤器与标签 */
  .chips{gap:6px}
  .chip{height:30px;font-size:12px;padding:0 10px}

  /* 提示条与说明 */
  .note{font-size:11.5px;line-height:1.55;padding:10px 12px}
  .toast{width:calc(100vw - 32px);max-width:none;justify-content:center}
}

/* ── 小屏（iPhone 12/13/14/15 及以下） ── */
@media (max-width:420px){
  .g2,.g3,.g5{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr}
  .grid.g4:has(.kpi){grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .kpi .k-v{font-size:21px}
  .content{padding-left:11px;padding-right:11px}
  .ph h1{font-size:16.5px}
}

/* 触屏设备：去掉 hover 残留，加大点击区 */
@media (hover:none){
  .btn:hover{background:#fff;border-color:var(--line)}
  .btn-primary:hover{background:var(--brand)}
  .tbl tbody tr:hover{background:transparent}
  .sb-item:hover{background:transparent;color:#A9B5AE}
  .sb-item.active:hover{color:#fff}
}