/* 采购登记系统 · styles
   Visual design taken over from prototype.html (its <style> block), with these changes:
   - system font stacks only, no web fonts;
   - [hidden] always wins: the prototype's .overlay / .toast set display:flex, which
     overrode the hidden attribute;
   - no runtime inline styles anywhere (CSP without 'unsafe-inline'): color swatches
     and the 汇总 bars use the fixed classes at the end of this file;
   - the brand logo is a static image (icons/icon-192.png) in the size and corner radius
     of the prototype's 采 seal, which it replaces. */

[hidden]{display:none !important}

:root{
  /* Layout: one phone-width column; sticky top bar; fixed tab bar with the order "slip" docked above it */
  --bg:#F1F3F7; --surface:#FFFFFF; --sunk:#E7EBF1; --line:#D3DAE4; --fg:#111823; --muted:#5B6576;
  --accent:#2446C7; --on-accent:#FFFFFF; --accent-soft:#E1E7FA;
  --ok:#14774A; --ok-soft:#DBF0E4; --warn:#985600; --warn-soft:#F9EAD2; --danger:#BC2A2A; --danger-soft:#F9DEDE;
  --shadow:0 1px 2px rgba(17,24,35,.06),0 6px 18px rgba(17,24,35,.07);
  --scrim:rgba(17,24,35,.42);
  --ui:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  --num:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --r:12px; --w:460px; --nav:58px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1118; --surface:#161B24; --sunk:#1F2532; --line:#2B3342; --fg:#E7EBF2; --muted:#9AA3B3;
    --accent:#86A2FF; --on-accent:#0D1118; --accent-soft:#1E2847;
    --ok:#56C892; --ok-soft:#12301F; --warn:#F2AD52; --warn-soft:#352610; --danger:#FF8080; --danger-soft:#3A1818;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35); --scrim:rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1118; --surface:#161B24; --sunk:#1F2532; --line:#2B3342; --fg:#E7EBF2; --muted:#9AA3B3;
  --accent:#86A2FF; --on-accent:#0D1118; --accent-soft:#1E2847;
  --ok:#56C892; --ok-soft:#12301F; --warn:#F2AD52; --warn-soft:#352610; --danger:#FF8080; --danger-soft:#3A1818;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35); --scrim:rgba(0,0,0,.6);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--fg);font-family:var(--ui);font-size:15px;line-height:1.5;-webkit-text-size-adjust:100%}
body.lock{overflow:hidden}
button{font-family:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}

.app{max-width:var(--w);margin:0 auto;padding-inline:16px;padding-block:0 calc(var(--nav) + 40px + env(safe-area-inset-bottom,0px))}
body.has-slip .app{padding-bottom:calc(var(--nav) + 132px + env(safe-area-inset-bottom,0px))}
#main{display:flex;flex-direction:column;gap:14px}

/* top bar */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:15;margin-inline:-16px;padding:10px 16px;background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
/* 每日采购任务 under the header: one line a task (a narrow phone: its numbers on a second line), no bars, no big cards */
.tasks{margin-bottom:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0 12px 2px}
.tasks-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;border:0;padding:4px 0;min-height:32px;color:var(--fg)}
.tasks-title{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.tasks-all{font-size:13px;font-weight:600;color:var(--accent)}
.task-list{list-style:none;margin:0;padding:0}
.task-row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;padding:3px 0;border-top:1px dashed var(--line)}
.task-name{flex:1 1 auto;min-width:0;font:600 14px/1.3 var(--num);overflow-wrap:anywhere}
.task-st{margin-left:auto;font:700 14px/1.3 var(--num);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--accent)}
.task-row.is-done .task-st{color:var(--ok)}
.tasks .tasks-more{display:block;padding:2px 0;min-height:30px;font-size:13.5px}
/* the task sheet and the admin page: a compact list; an admin's buttons beside or under the task */
.task-sheet-list{flex:none;list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.task-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 12px;border-top:1px solid var(--line)}
.task-item:first-child{border-top:0}
.task-item.is-off .ti-name{color:var(--muted)}
.ti-main{flex:1 1 210px;min-width:0;display:flex;flex-direction:column;gap:2px}
.ti-name{font:600 15px/1.35 var(--num);overflow-wrap:anywhere}
.ti-name .pill{margin-left:6px}
.ti-st{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font:700 14.5px/1.35 var(--num);font-variant-numeric:tabular-nums;color:var(--accent)}
.task-item.is-done .ti-st{color:var(--ok)}
.ti-note{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.ti-acts{display:flex;flex-wrap:wrap;gap:6px}
.ti-acts .ti-del{color:var(--danger)}
.task-adm-bar{display:flex;align-items:flex-end;gap:10px}
.task-adm-bar .lbl{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);font-weight:600}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:.02em}
.logo{width:30px;height:30px;border-radius:7px;display:block;flex:none;object-fit:cover}
.who{display:flex;align-items:center;gap:6px;font-size:14px}

/* pills / badges */
.pill{display:inline-flex;align-items:center;font-size:12px;line-height:1;padding:4px 8px;border-radius:999px;background:var(--sunk);color:var(--muted);white-space:nowrap;font-weight:600}
.pill-accent{background:var(--accent-soft);color:var(--accent)}
.pill-ok{background:var(--ok-soft);color:var(--ok)}
.pill-warn{background:var(--warn-soft);color:var(--warn)}
.pill-danger{background:var(--danger-soft);color:var(--danger)}
.badge{display:inline-block;font:600 11px/1 var(--ui);padding:3px 5px;border-radius:5px;background:var(--warn-soft);color:var(--warn);vertical-align:2px;margin-left:6px;letter-spacing:.02em}

/* segmented */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--sunk);padding:4px;border-radius:12px;gap:4px}
.seg button{min-height:40px;border:0;background:transparent;border-radius:9px;font-weight:600;font-size:15px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}

/* field sections: one card per step, the chosen value echoed in the header so it stays visible when scrolled */
.fld{display:flex;flex-direction:column;gap:10px;padding:12px 14px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.fld.is-picked{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.fld-head{display:flex;align-items:baseline;gap:8px;min-height:22px}
.fld-head h3{font-size:13.5px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.fld-hint{font-size:12px;color:var(--muted)}
.fld-val{margin-left:auto;font:600 15px/1 var(--num);color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.help{font-size:13px;color:var(--muted)}
.empty-hint{font-size:13px;color:var(--muted);padding:10px 12px;border:1px dashed var(--line);border-radius:10px}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:46px;padding:0 15px;display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:var(--bg);color:var(--fg);border-radius:11px;font:500 17px/1.15 var(--num);letter-spacing:.01em}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 35%,transparent)}
.chip[aria-pressed="true"]::before{content:"✓";font-size:13px}
.chip-other{border-style:dashed;color:var(--accent);background:transparent;font-family:var(--ui);font-size:15px}
.chip:disabled{opacity:.4;cursor:not-allowed}
.chip-sm{min-height:38px;padding:0 12px;font-size:15px}
.chip-badge{font:600 11px/1 var(--ui);padding:3px 5px;border-radius:5px;background:var(--warn-soft);color:var(--warn)}
.sw{display:inline-block;width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);vertical-align:-1px;margin-right:2px}
.chip[aria-pressed="true"] .sw{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 2px var(--on-accent)}

.other-row{display:flex;gap:8px;align-items:center}
.other-row .inp{flex:1;min-width:0}

/* inputs & buttons */
.inp,.sel{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);font:16px/1.4 var(--ui)}
.inp::placeholder{color:var(--muted)}
textarea.inp{resize:vertical;font-family:var(--num);font-size:17px;line-height:1.5}
.btn{min-height:44px;padding:0 16px;border-radius:10px;font-weight:600;font-size:16px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:disabled{background:var(--sunk);color:var(--muted);cursor:not-allowed}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--fg)}
.btn-danger{background:var(--danger);color:var(--surface)}
.btn-sm{min-height:38px;padding:0 12px;font-size:14px}
.btn-block{width:100%}
.row-btns{display:flex;gap:8px;flex-wrap:wrap}
.link-btn{background:none;border:0;padding:6px 4px;color:var(--accent);font-size:14px;font-weight:600;min-height:36px}
.link-btn.danger{color:var(--danger)}
.icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:16px;display:grid;place-items:center}
.icon-btn:disabled{opacity:.35;cursor:not-allowed}

/* quantity: typed, not picked */
.stepper{display:grid;grid-template-columns:56px 1fr 56px;gap:8px}
.step{min-height:60px;border-radius:11px;border:1.5px solid var(--line);background:var(--bg);font-size:26px;font-weight:500}
.qty-wrap{position:relative}
.qty-inp{min-height:60px;width:100%;text-align:center;padding-right:34px;border:1.5px solid var(--line);border-radius:11px;background:var(--bg);color:var(--fg);font:700 32px/1 var(--num);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.qty-inp::-webkit-outer-spin-button,.qty-inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-inp:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
/* 信用卡: [CH] [Bugang] [0007] in one row on a 360px phone too, whichever company is ticked; narrower: wraps */
.card-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.card-pick .chips{flex:none}
.card-pick .chip{padding:0 12px}
.card-inp{flex:1 1 5em;min-width:5em;max-width:200px;font:600 20px/1.3 var(--num);font-variant-numeric:tabular-nums;letter-spacing:.12em}
.card-inp::placeholder{font-size:15px;font-weight:500;letter-spacing:0}
[data-step="card"] .fld-val{max-width:80%}
.qty-unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--muted);pointer-events:none}
details.note{padding:4px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
details.note summary{cursor:pointer;color:var(--muted);font-size:14px;min-height:40px;display:flex;align-items:center;list-style:none}
details.note summary::-webkit-details-marker{display:none}
details.note[open]{padding-bottom:14px}
details.note[open] summary{margin-bottom:6px}

/* the slip (confirm bar) */
.slip{position:fixed;left:0;right:0;bottom:calc(var(--nav) + env(safe-area-inset-bottom,0px));z-index:19;background:var(--surface);border-top:1.5px dashed var(--line);box-shadow:0 -6px 18px rgba(17,24,35,.06)}
.slip-in{max-width:var(--w);margin:0 auto;padding:10px 16px;display:flex;gap:12px;align-items:center}
.slip-sum{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.slip-line{font:600 17px/1.25 var(--num);display:flex;flex-wrap:wrap;align-items:center;column-gap:5px;row-gap:2px}
.slip-line > span{display:inline-flex;align-items:center;gap:4px}
.slip-miss{color:var(--muted);font-weight:500;border-bottom:1px dashed var(--muted)}
.slip-qty{color:var(--accent);font-weight:700}
.dot{color:var(--muted)}
.slip-note{font-size:12px;color:var(--muted)}
.btn-submit{min-height:52px;padding:0 22px;font-size:17px}

/* tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar-in{max-width:var(--w);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);height:var(--nav)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:12px;background:none;border:0}
.tab[aria-current="page"]{color:var(--accent);font-weight:700}
.ico{display:block;width:22px;height:22px}
.ico svg{width:100%;height:100%;display:block}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav) + 16px + env(safe-area-inset-bottom,0px));z-index:30;width:calc(100% - 32px);max-width:calc(var(--w) - 32px);background:var(--fg);color:var(--bg);border-radius:12px;padding:10px 12px 10px 14px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);font-size:14px}
body.has-slip .toast{bottom:calc(var(--nav) + 92px + env(safe-area-inset-bottom,0px))}
.toast-msg{flex:1;min-width:0}
.toast-act{background:none;border:1px solid currentColor;color:inherit;border-radius:8px;padding:6px 12px;font-weight:700;min-height:36px}
.toast-err{background:var(--danger);color:var(--surface)}
/* 每日采购任务: the short banner at the top — over the header only, never over the inputs, the slip or the tab bar */
.taskbanner{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;transform:translateX(-50%);z-index:25;width:calc(100% - 24px);max-width:calc(var(--w) - 24px);display:flex;align-items:stretch;background:var(--accent);color:var(--on-accent);border-radius:14px;box-shadow:var(--shadow);opacity:1;transition:opacity .4s ease}
.taskbanner.is-leaving{opacity:0}
.tb-open{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:none;border:0;color:inherit;text-align:left;padding:9px 4px 9px 14px;font:14px/1.35 var(--num);overflow-wrap:anywhere}
.tb-open strong{font-size:15px}
.tb-sub{opacity:.85;font-size:13px}
.tb-close{flex:none;width:46px;min-height:44px;background:none;border:0;color:inherit;font-size:24px;line-height:1}
@media (prefers-reduced-motion: reduce){.taskbanner{transition:none}}

/* overlay / sheet */
.overlay{position:fixed;inset:0;z-index:40;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:var(--w);max-height:90vh;max-height:90dvh;background:var(--bg);border-radius:18px 18px 0 0;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:var(--shadow)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.sheet-head h2{font-size:17px}
.sheet-body{overflow:auto;padding:12px 16px;display:flex;flex-direction:column;gap:12px}
.sheet-foot{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--line);background:var(--surface)}
.sheet-msg{flex:1;min-width:0;font-size:12.5px;color:var(--muted)}
.sheet-text{font:600 17px/1.4 var(--num)}

/* lists & cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.filters{display:flex;flex-direction:column;gap:10px}
.filter-row{display:flex;gap:10px;align-items:center}
.filter-row .sel{flex:1;min-width:0}
.sync{font-size:12px;color:var(--muted)}
.day{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.04em;padding-top:6px}
.day span{font-weight:500}
.list{display:flex;flex-direction:column;gap:8px}
.rec{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.rec-store{font-size:13px;color:var(--muted);font-weight:600}
.rec-item{font:600 18px/1.3 var(--num);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rec-meta{font-size:12.5px;color:var(--muted);margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 8px}
.rec-note{background:var(--sunk);padding:1px 6px;border-radius:5px;color:var(--fg)}
.rec-card{font-family:var(--num);font-variant-numeric:tabular-nums;white-space:nowrap}
.rec-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:4px}
.rec-qty{font:700 28px/1 var(--num);font-variant-numeric:tabular-nums}
.rec-qty small{font-size:16px;color:var(--muted);margin-right:1px}
.rec-acts{display:flex;gap:2px}
.rec-lock{font-size:11.5px;color:var(--muted)}
.empty{padding:28px 12px;text-align:center;color:var(--muted);font-size:14px;border:1px dashed var(--line);border-radius:var(--r)}

/* switch */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;min-height:44px;font-size:14px;position:relative;white-space:nowrap}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch-track{width:46px;height:28px;border-radius:14px;background:var(--line);position:relative;flex:none;transition:background .15s}
.switch-track::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow);transition:transform .15s}
.switch input:checked + .switch-track{background:var(--accent)}
.switch input:checked + .switch-track::after{transform:translateX(18px)}
.switch input:focus-visible + .switch-track{outline:2px solid var(--accent);outline-offset:2px}
.switch-row{display:flex;justify-content:space-between;width:100%;white-space:normal}
.sw-text{display:flex;flex-direction:column;gap:2px}
.sw-text small{color:var(--muted);font-size:12.5px}

/* summary */
.stats{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.stat span{font-size:12px;color:var(--muted)}
.stat b{font:700 26px/1.05 var(--num);font-variant-numeric:tabular-nums}
.stat-main{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.stat-main span{color:var(--on-accent);opacity:.85}
.stat-main b{font-size:32px}
.sum-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sum-head{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;background:var(--sunk)}
.sum-head h3{font-size:16px}
.sum-total{font-size:13px;color:var(--muted)}
.sum-total b{font:700 22px/1 var(--num);color:var(--fg);font-variant-numeric:tabular-nums;margin-right:2px}
/* 按门店 / 按型号 rows, phone first: name + number / capacity · color / the card; the number is the largest */
.sum-line{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;padding:10px 14px;border-top:1px dashed var(--line)}
.sum-line:first-child{border-top:0}
.sl-name{grid-area:1/1;font:600 16px/1.3 var(--num);overflow-wrap:anywhere}
.sl-spec{grid-area:2/1;font:500 15px/1.35 var(--num);color:var(--muted);overflow-wrap:anywhere}
.sl-spec .sw{margin:0 4px 0 1px}
.sl-card{grid-area:3/1;font:600 15px/1.35 var(--num);font-variant-numeric:tabular-nums;color:var(--accent);overflow-wrap:anywhere}
.sl-card.sl-unset{color:var(--muted)}
.sl-q{grid-area:1/2;align-self:center;font:700 22px/1 var(--num);font-variant-numeric:tabular-nums;text-align:right}
.sr-q{font-weight:700;font-size:18px;font-variant-numeric:tabular-nums;text-align:right;min-width:2.5ch}
/* 按信用卡: a card ending, then each of its stores with rows 「model · capacity · color   qty」 */
.sum-store{padding:8px 14px 10px;border-top:1px dashed var(--line)}
.sum-store:first-of-type{border-top:0}
.sum-store h4{font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:2px}
.card-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;font:500 16px/1.3 var(--num)}
.card-row > span:first-child{display:inline-flex;align-items:center;gap:5px;min-width:0}
.bar{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.sum-bar{margin:10px 14px 2px}

/* paste preview */
.paste{min-height:150px}
.list-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.list-head h3{font-size:15px}
.pv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.pv-bad{border-color:var(--danger);background:var(--danger-soft)}
.pv-src{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.pv-fields{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:2px;font:600 16px/1.35 var(--num)}
.pv-f + .pv-f::before{content:"· ";color:var(--muted);font-weight:500}
.pv-miss{color:var(--danger);font-family:var(--ui);font-size:13px;font-weight:700}
.pv-st{font-size:12px;margin-top:3px;font-weight:600}
.pv-st.ok{color:var(--ok)} .pv-st.warn{color:var(--warn)} .pv-st.err{color:var(--danger)}
.pv-acts{display:flex;flex-direction:column;gap:2px}

/* me */
.me-card{display:flex;align-items:center;gap:12px}
.avatar{width:48px;height:48px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:20px;font-weight:700;flex:none}
.me-name{font-size:18px;font-weight:700}
.me-sub{font-size:13px;color:var(--muted)}
.menu{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.menu-row{width:100%;display:flex;align-items:center;gap:10px;padding:14px;background:none;border:0;border-top:1px solid var(--line);text-align:left;font-size:16px;min-height:56px}
.menu-row:first-child{border-top:0}
.menu-row .mr-text{flex:1;display:flex;flex-direction:column}
.menu-row small{color:var(--muted);font-size:12.5px}
.menu-row .chev{color:var(--muted);font-size:20px}
.menu-row.danger{color:var(--danger)}
.back{display:flex;align-items:center;gap:6px}
.back h2{font-size:18px}
.sec-title{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.06em;padding-top:4px}
.opt-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.opt-row{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;border-top:1px solid var(--line)}
.opt-row:first-child{border-top:0}
.opt-row.is-off .opt-name-btn{color:var(--muted);text-decoration:line-through}
.opt-name-btn{flex:1;min-width:0;text-align:left;background:none;border:0;font:600 17px/1.3 var(--num);padding:8px 0;overflow-wrap:anywhere}
.opt-acts{display:flex;gap:6px;align-items:center}
.add-row{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--sunk)}
.add-row .inp{flex:1;min-width:0}
.prod{display:flex;flex-direction:column;gap:10px}
.prod.is-off{opacity:.6}
.prod-head{display:flex;align-items:center;gap:8px}
.prod-lbl{font-size:12.5px;color:var(--muted);font-weight:600}
.tag-chip{display:inline-flex;align-items:center;gap:2px;min-height:38px;padding:0 4px 0 12px;border:1px solid var(--line);border-radius:10px;font:500 16px/1 var(--num);background:var(--bg)}
.tag-chip .x{border:0;background:none;width:30px;height:30px;font-size:18px;color:var(--muted);border-radius:8px}
.prod .add-row{margin:0 -14px -14px;border-radius:0 0 var(--r) var(--r)}
.unl-row{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-top:1px solid var(--line)}
.unl-row:first-child{border-top:0}
.unl-text{flex:1;min-width:0;display:flex;flex-direction:column}
.unl-text b{font:600 17px/1.3 var(--num)}
.unl-text small{color:var(--muted);font-size:12.5px}
.user-row{display:flex;flex-direction:column;gap:8px}
.user-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.user-top b{font-size:16px}
.user-sub{font-size:12.5px;color:var(--muted)}
.form{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.form label.lbl{font-size:13px;color:var(--muted);font-weight:600;display:flex;flex-direction:column;gap:4px}
.form-err{color:var(--danger);font-size:13px;font-weight:600}
.chk{display:flex;align-items:center;gap:8px;font-size:15px;min-height:40px}
.chk input{width:20px;height:20px;accent-color:var(--accent)}
details.card > summary{cursor:pointer;font-weight:700;color:var(--accent);list-style:none;min-height:24px}
details.card > summary::-webkit-details-marker{display:none}

/* login */
.login{display:flex;flex-direction:column;gap:14px;padding-top:6vh}
.login-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
/* the logo on the left, 中文 / 한국어 on the right: seen first on a phone; the language in use in blue */
.login-top{display:flex;align-items:center;justify-content:space-between;gap:12px;align-self:stretch}
.lang-seg{flex:none;padding:3px;gap:3px;border-radius:11px}
.lang-seg button{min-width:64px;padding:0 12px;color:var(--fg)}
.lang-seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);box-shadow:none}
.login-head .logo{width:52px;height:52px;border-radius:12px}
.login-head h1{font-size:26px;letter-spacing:.04em}
/* the login screen has no note under its title: a little more room between the title and the form */
.login-head h1:last-child{margin-bottom:6px}

@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* ---------- added for the production build ---------- */

/* color dots for the six known Apple colors (plan §3.2); unknown colors get no dot */
.sw-burgundy{background:#6E2233}
.sw-glacier{background:#D9E6EC}
.sw-silver{background:#D4D6DA}
.sw-black{background:#2A2B2F}
.sw-star-white{background:#F1EDE4}
.sw-night-sky{background:#1E2A47}

/* start-up screen */
.boot{min-height:60vh;display:grid;place-items:center;color:var(--muted);font-size:15px}
.boot-box{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}

/* second line inside a toast */
.toast-sub{display:block;font-size:12.5px;opacity:.85;margin-top:2px;overflow-wrap:anywhere}

/* notice above a form (e.g. 登录已失效) */
.form-note{font-size:13px;color:var(--warn);background:var(--warn-soft);padding:8px 10px;border-radius:8px}

/* 选项管理: the 「已停用」 pill after a model's name (the prototype spaced it with an inline style) */
.opt-name-btn .pill{margin-left:8px}

/* records / summary: the part an auto refresh repaints; its children stay items of #main */
.page-body{display:contents}

/* 自定义 date range: 从 / 到 inputs side by side */
.filter-row .lbl{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);font-weight:600}

/* 按型号 bars: the length as a fixed class (w4 … w100 = percent of the largest total),
   because a runtime width would be an inline style */
.bar .w4{width:4%} .bar .w5{width:5%} .bar .w6{width:6%} .bar .w7{width:7%} .bar .w8{width:8%} .bar .w9{width:9%} .bar .w10{width:10%} .bar .w11{width:11%}
.bar .w12{width:12%} .bar .w13{width:13%} .bar .w14{width:14%} .bar .w15{width:15%} .bar .w16{width:16%} .bar .w17{width:17%} .bar .w18{width:18%} .bar .w19{width:19%}
.bar .w20{width:20%} .bar .w21{width:21%} .bar .w22{width:22%} .bar .w23{width:23%} .bar .w24{width:24%} .bar .w25{width:25%} .bar .w26{width:26%} .bar .w27{width:27%}
.bar .w28{width:28%} .bar .w29{width:29%} .bar .w30{width:30%} .bar .w31{width:31%} .bar .w32{width:32%} .bar .w33{width:33%} .bar .w34{width:34%} .bar .w35{width:35%}
.bar .w36{width:36%} .bar .w37{width:37%} .bar .w38{width:38%} .bar .w39{width:39%} .bar .w40{width:40%} .bar .w41{width:41%} .bar .w42{width:42%} .bar .w43{width:43%}
.bar .w44{width:44%} .bar .w45{width:45%} .bar .w46{width:46%} .bar .w47{width:47%} .bar .w48{width:48%} .bar .w49{width:49%} .bar .w50{width:50%} .bar .w51{width:51%}
.bar .w52{width:52%} .bar .w53{width:53%} .bar .w54{width:54%} .bar .w55{width:55%} .bar .w56{width:56%} .bar .w57{width:57%} .bar .w58{width:58%} .bar .w59{width:59%}
.bar .w60{width:60%} .bar .w61{width:61%} .bar .w62{width:62%} .bar .w63{width:63%} .bar .w64{width:64%} .bar .w65{width:65%} .bar .w66{width:66%} .bar .w67{width:67%}
.bar .w68{width:68%} .bar .w69{width:69%} .bar .w70{width:70%} .bar .w71{width:71%} .bar .w72{width:72%} .bar .w73{width:73%} .bar .w74{width:74%} .bar .w75{width:75%}
.bar .w76{width:76%} .bar .w77{width:77%} .bar .w78{width:78%} .bar .w79{width:79%} .bar .w80{width:80%} .bar .w81{width:81%} .bar .w82{width:82%} .bar .w83{width:83%}
.bar .w84{width:84%} .bar .w85{width:85%} .bar .w86{width:86%} .bar .w87{width:87%} .bar .w88{width:88%} .bar .w89{width:89%} .bar .w90{width:90%} .bar .w91{width:91%}
.bar .w92{width:92%} .bar .w93{width:93%} .bar .w94{width:94%} .bar .w95{width:95%} .bar .w96{width:96%} .bar .w97{width:97%} .bar .w98{width:98%} .bar .w99{width:99%}
.bar .w100{width:100%}