:root{
  --bg:#f4f6f9;--panel:#fff;--ink:#16202e;--mute:#5d6b7e;--line:#dfe5ec;--brand:#0f5c6e;--brand-d:#0a4553;--brand-l:#e3f1f4;
  --ok:#17794a;--ok-bg:#e1f4ea;--warn:#8a5a00;--warn-bg:#fdf0d2;--bad:#b3261e;--bad-bg:#fbe4e2;--info:#27507f;--info-bg:#e5eefa;
  --side:#0e2a36;--side-ink:#c9dbe2;--radius:8px;--shadow:0 1px 2px rgba(16,32,46,.06),0 4px 14px rgba(16,32,46,.05);
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0f161d;--panel:#18222c;--ink:#e6edf4;--mute:#97a6b8;--line:#2a3846;--brand:#4cb5c9;--brand-d:#7ccbdb;--brand-l:#173540;
  --ok:#5ad39b;--ok-bg:#12372a;--warn:#f0c15a;--warn-bg:#3a2f12;--bad:#ff8b82;--bad-bg:#40201e;--info:#8cb6ee;--info-bg:#1b2c44;--side:#0a1218;--side-ink:#a9bcc7;}}
:root[data-theme=dark]{--bg:#0f161d;--panel:#18222c;--ink:#e6edf4;--mute:#97a6b8;--line:#2a3846;--brand:#4cb5c9;--brand-d:#7ccbdb;--brand-l:#173540;--ok:#5ad39b;--ok-bg:#12372a;--warn:#f0c15a;--warn-bg:#3a2f12;--bad:#ff8b82;--bad-bg:#40201e;--info:#8cb6ee;--info-bg:#1b2c44;--side:#0a1218;--side-ink:#a9bcc7}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;background:var(--bg);color:var(--ink)}
h1{font-size:22px;margin:0}h2{font-size:18px;margin:0}h3{font-size:15px;margin:0}
a{color:var(--brand)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---- login ---- */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login-hero{background:linear-gradient(160deg,#0e2a36,#0f5c6e);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between}
.login-hero .logo{font-size:26px;font-weight:800;letter-spacing:.5px}
.login-hero ul{list-style:none;padding:0;margin:28px 0;display:grid;gap:12px;font-size:15px;opacity:.95}
.login-hero li::before{content:"✓";margin-right:10px;color:#7fe0c0}
.login-hero small{opacity:.7}
.login-card{display:flex;align-items:center;justify-content:center;padding:32px}
.login-card form{width:100%;max-width:380px;display:grid;gap:14px}
.login-card h2{font-size:24px}
.login-card .sub{color:var(--mute);margin:0 0 6px}
@media(max-width:820px){.login-wrap{grid-template-columns:1fr}.login-hero{display:none}}

/* ---- shell ---- */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--side);color:var(--side-ink);position:sticky;top:0;height:100vh;overflow:auto;padding:14px 10px}
.side .brand{color:#fff;font-weight:800;font-size:18px;padding:6px 10px 2px}
.side .co{padding:0 10px 14px;font-size:12px;opacity:.75}
.side .grp{font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.55;padding:14px 10px 4px}
.side a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;color:var(--side-ink);text-decoration:none}
.side a:hover{background:rgba(255,255,255,.07)}
.side a.on{background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:10px;padding:10px 20px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top .grow{flex:1}
.top .me{font-size:13px;color:var(--mute);text-align:right;line-height:1.2}
.top .me b{color:var(--ink);display:block}
.menu-btn{display:none}
.content{padding:22px;max-width:1500px;width:100%}
@media(max-width:900px){.app{grid-template-columns:1fr}.side{position:fixed;left:-260px;width:250px;z-index:50;transition:left .2s}.side.open{left:0}.menu-btn{display:inline-flex}.content{padding:14px}}

.page-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px;flex-wrap:wrap}
.sub{color:var(--mute);margin:4px 0 0}
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---- controls ---- */
.btn{border:1px solid var(--line);background:var(--panel);padding:7px 14px;border-radius:6px;cursor:pointer;font-weight:500;white-space:nowrap}
.btn:hover{border-color:var(--brand)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-d)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.sm{padding:3px 9px;font-size:12.5px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.icon-btn{border:0;background:transparent;cursor:pointer;font-size:16px;padding:4px 8px;border-radius:6px;color:var(--mute)}
.icon-btn:hover{background:var(--brand-l)}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
input[type=checkbox]{width:auto}
textarea{resize:vertical}
label{font-weight:600;font-size:13px;display:block;margin-bottom:4px}
.req{color:var(--bad)}
.hint{color:var(--mute);font-size:12px;display:block;margin-top:3px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.form .row.full,.form>.hint{grid-column:1/-1}
.form .check{display:flex;gap:8px;align-items:center;font-weight:500}
@media(max-width:700px){.form{grid-template-columns:1fr}}
.lines .line{display:flex;gap:8px;margin-bottom:6px;align-items:center}
.lines .line>span{flex:1;min-width:0}
.lines .line .x{flex:0 0 34px}
.lines .head{font-size:12px;color:var(--mute);font-weight:600}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filters input,.filters select{width:auto;min-width:150px}

/* ---- cards / tables ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.card-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.card>*:not(.card-head){padding:0}
.card .pad,.card>.empty,.card>.kv{padding:14px 16px}
.tbl-wrap{overflow:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);text-align:left;padding:9px 12px;background:var(--bg);white-space:nowrap}
.tbl td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top}
.tbl .r{text-align:right}
.tbl tr.click{cursor:pointer}.tbl tr.click:hover td{background:var(--brand-l)}
.tbl td .btn{margin:0 4px 4px 0}
.empty{padding:28px;text-align:center;color:var(--mute)}.empty.err{color:var(--bad)}
.loading{padding:28px;text-align:center;color:var(--mute)}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)}.badge.warn{background:var(--warn-bg);color:var(--warn)}.badge.bad{background:var(--bad-bg);color:var(--bad)}.badge.info{background:var(--info-bg);color:var(--info)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}
.kv dt{color:var(--mute)}.kv dd{margin:0;font-weight:500}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin-bottom:16px}
.stat{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
a.stat:hover{border-color:var(--brand)}
.stat .v{font-size:26px;font-weight:700}.stat .l{color:var(--mute);font-size:13px}
.stat.warn .v{color:var(--warn)}.stat.bad .v{color:var(--bad)}.stat.ok .v{color:var(--ok)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:1000px){.cols2{grid-template-columns:1fr}}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow:auto}
.tabs button{border:0;background:none;padding:9px 14px;cursor:pointer;color:var(--mute);border-bottom:2px solid transparent;font-weight:600;white-space:nowrap}
.tabs button.on{color:var(--brand);border-color:var(--brand)}
.steps{display:flex;gap:6px;flex-wrap:wrap}
.step{padding:3px 10px;border-radius:99px;background:var(--bg);border:1px solid var(--line);font-size:12px;color:var(--mute)}
.step.done{background:var(--ok-bg);color:var(--ok);border-color:transparent}.step.now{background:var(--brand);color:#fff;border-color:transparent}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.muted{color:var(--mute)}

/* ---- modal / toast ---- */
.backdrop{position:fixed;inset:0;background:rgba(10,20,30,.55);display:flex;align-items:flex-start;justify-content:center;padding:4vh 12px;z-index:100;overflow:auto}
.modal{background:var(--panel);border-radius:10px;width:100%;max-width:560px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal.wide{max-width:900px}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal-body{padding:18px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line)}
#toasts{position:fixed;right:16px;bottom:16px;display:grid;gap:8px;z-index:200;max-width:min(420px,calc(100vw - 32px))}
.toast{padding:11px 15px;border-radius:8px;background:var(--ink);color:var(--bg);box-shadow:var(--shadow);font-weight:500}
.toast.err{background:var(--bad);color:#fff}.toast.ok{background:var(--ok);color:#fff}
.scanbox{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.scan-in{flex:1;min-width:200px;font-size:16px;border:2px solid var(--brand)}
.cam{width:100%;border-radius:8px;background:#000;max-height:60vh}
.label-card{display:flex;gap:16px;align-items:center}.label-card .qr svg{width:170px;height:170px}.label-txt{font-weight:600;line-height:1.6}
.pw{position:relative}.pw button{position:absolute;right:6px;top:27px}
.notif{max-height:60vh;overflow:auto}.notif div{padding:9px 4px;border-bottom:1px solid var(--line)}.notif .un{font-weight:700}
#print-area{display:none}
@media print{
  body.printing>*:not(#print-area){display:none!important}
  body.printing #print-area{display:block;color:#000;background:#fff;padding:12mm}
  .label-print{display:flex;gap:10mm;align-items:center}.label-print .qr svg{width:45mm;height:45mm}
  .inv h2{margin:0 0 8px}.inv table{width:100%;border-collapse:collapse}.inv th,.inv td{border:1px solid #888;padding:5px 8px;text-align:left}
}

/* ---- responsive tables become cards on phones ---- */
@media(max-width:700px){
  .tbl thead{display:none}.tbl tr{display:block;border-top:1px solid var(--line);padding:6px 0}
  .tbl td{display:flex;justify-content:space-between;gap:12px;border:0;padding:4px 12px}
  .tbl td::before{content:attr(data-label);color:var(--mute);font-size:12px;flex:0 0 38%}
  .tbl td.r{text-align:left}
}

.flow{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:16px}
.flow .card{margin:0}
.flow .rows a{display:flex;justify-content:space-between;align-items:center;padding:9px 16px;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.flow .rows a:hover{background:var(--brand-l)}
.flow .rows b{font-size:17px}
.flow .rows .warn b{color:var(--warn)}.flow .rows .bad b{color:var(--bad)}