/* Layout: one-column field tool. Sticky property bar on top, tab bar on the bottom, thumb-sized controls. Work-order / stockroom-tag vernacular. */
:root{
  --bg:#e9edf0; --surface:#ffffff; --sunk:#f3f5f7; --line:#d6dde3; --ink:#15202b; --mut:#5e6b77;
  --accent:#f2b705; --accent-ink:#1a1400; --steel:#24486b; --steel-soft:#e1e9f1;
  --ok:#1f7a4d; --ok-soft:#e2f2e9; --warn:#a35f00; --warn-soft:#fbefd9; --bad:#c0352b; --bad-soft:#fbe5e3;
  --shadow:0 1px 2px rgba(21,32,43,.06),0 6px 20px rgba(21,32,43,.06);
  --sky1:#2c5a84; --sky2:#9cc0dc; --bldg:#1b3550; --bldg2:#24486b; --bldg3:#3a6189; --win:#ffd75e; --win-off:#3f6a93;
  --f-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f151b; --surface:#18212a; --sunk:#121a21; --line:#2a3642; --ink:#e7edf2; --mut:#93a2b0;
  --accent:#f5c22b; --accent-ink:#1a1400; --steel:#8db6dd; --steel-soft:#1d2c3a;
  --ok:#4fc489; --ok-soft:#163026; --warn:#f0a845; --warn-soft:#33260f; --bad:#ff7a6e; --bad-soft:#3a1a18;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25); --sky1:#0b1622; --sky2:#1f3a55; --bldg:#0c141c; --bldg2:#132230; --bldg3:#1b3044; --win:#f5c22b; --win-off:#1f3346; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f151b; --surface:#18212a; --sunk:#121a21; --line:#2a3642; --ink:#e7edf2; --mut:#93a2b0;
  --accent:#f5c22b; --accent-ink:#1a1400; --steel:#8db6dd; --steel-soft:#1d2c3a;
  --ok:#4fc489; --ok-soft:#163026; --warn:#f0a845; --warn-soft:#33260f; --bad:#ff7a6e; --bad-soft:#3a1a18;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25); --sky1:#0b1622; --sky2:#1f3a55; --bldg:#0c141c; --bldg2:#132230; --bldg3:#1b3044; --win:#f5c22b; --win-off:#1f3346; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:16px/1.4 var(--f-body);-webkit-tap-highlight-color:transparent;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.mut{color:var(--mut)}
svg.i{width:22px;height:22px;flex:none}

/* Top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--sky1);color:#fff;overflow:hidden}
.hdart{position:absolute;inset:0}
.hdart svg{position:absolute;inset:0;width:100%;height:100%}
.hdart::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,20,.15) 0%,rgba(8,14,20,.35) 45%,rgba(8,14,20,.85) 100%)}
.top .wrap{position:relative;z-index:1}
:root .top{--tline:rgba(255,255,255,.14)}
.top .wrap{padding-block:22px 12px;display:grid;gap:14px}
.brand{display:flex;align-items:center;gap:10px}
.mark{width:34px;height:34px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.brand h1{text-shadow:0 2px 10px rgba(0,0,0,.45);font:800 26px/1 var(--f-display);letter-spacing:.02em;text-transform:uppercase;margin:0;flex:1;min-width:0}
.brand h1 small{display:block;font:500 12px/1.3 var(--f-body);letter-spacing:.04em;text-transform:none;opacity:.7;margin-top:3px}
.who{display:flex;align-items:center;gap:6px;background:rgba(8,14,20,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--tline);border-radius:99px;padding:6px 10px 6px 6px;color:#fff;font-weight:600;font-size:14px;max-width:45%}
.who .av{width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:700 12px var(--f-body);flex:none}
.who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.props{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:rgba(8,14,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:10px;padding:4px}
.props button{border:0;background:transparent;color:rgba(255,255,255,.85);padding:9px 4px;border-radius:7px;font:700 15px/1 var(--f-display);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.props button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

/* Bottom nav */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
nav.tabs .in{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
nav.tabs button{border:0;background:none;padding:9px 2px 10px;display:grid;justify-items:center;gap:3px;color:var(--mut);font-size:12px;font-weight:600;position:relative}
nav.tabs button[aria-current="page"]{color:var(--ink)}
nav.tabs button[aria-current="page"]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
nav.tabs .dot{position:absolute;top:5px;left:calc(50% + 7px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;font:700 11px/17px var(--f-body)}

main{padding-block:14px 8px;display:grid;gap:14px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:4px 2px -4px}
.sec-h h2{font:700 15px/1 var(--f-display);text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:0}
.sec-h button{border:0;background:none;color:var(--steel);font-weight:600;font-size:14px;padding:4px 0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.pad{padding:14px}

/* Banner */
.banner{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:var(--sky1);min-height:150px;display:flex;align-items:flex-end}
.banner svg.art{position:absolute;inset:0;width:100%;height:100%}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,20,0) 30%,rgba(8,14,20,.78) 100%)}
.banner .txt{position:relative;z-index:1;padding:16px;color:#fff;display:grid;gap:4px;min-width:0}
.banner .eb{font:700 12px/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.banner .ttl{font:800 40px/.95 var(--f-display);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance;overflow-wrap:anywhere}
.banner .st{font-size:14px;font-weight:600;opacity:.9}
.banner .st b{font-family:var(--f-mono);font-weight:600}
.banner .st .r{color:#ffb4ab}
.banner.slim{min-height:96px}.banner.slim .ttl{font-size:28px}

/* Home tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:left;display:grid;gap:4px;box-shadow:var(--shadow)}
.tile b{font:700 30px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.tile span{font-size:13px;color:var(--mut);font-weight:600}
.tile.alert{border-color:var(--bad);background:var(--bad-soft)}
.tile.alert b{color:var(--bad)}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qa{display:flex;align-items:center;gap:10px;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:16px;text-align:left;box-shadow:var(--shadow)}
.qa .ic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:none}
.qa.take .ic{background:var(--bad-soft);color:var(--bad)}
.qa.recv .ic{background:var(--ok-soft);color:var(--ok)}
.qa small{display:block;font-weight:500;font-size:13px;color:var(--mut)}

/* Rows */
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line);min-width:0}
.row:first-child{border-top:0}
.row .ic{width:42px;height:42px;border-radius:10px;background:var(--steel-soft);color:var(--steel);display:grid;place-items:center;flex:none}
.row .tx{flex:1;min-width:0;display:grid;gap:2px;text-align:left;background:none;border:0;padding:0}
.row .nm{font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.row .sb{font-size:13px;color:var(--mut);overflow-wrap:anywhere}
.lvl{height:4px;border-radius:2px;background:var(--sunk);overflow:hidden;margin-top:5px;max-width:160px}
.lvl i{display:block;height:100%;border-radius:2px;background:var(--ok)}
.lvl.low i{background:var(--bad)} .lvl.mid i{background:var(--warn)}
.ctl{display:flex;align-items:center;gap:6px;flex:none}
.pm{width:44px;height:44px;border-radius:11px;border:1px solid var(--line);background:var(--sunk);display:grid;place-items:center;color:var(--ink);transition:transform .08s}
.pm:active{transform:scale(.92)}
.pm.plus{background:var(--steel);border-color:var(--steel);color:var(--surface)}
.qty{min-width:48px;text-align:center;display:grid;line-height:1}
.qty b{font:600 22px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.qty small{font-size:11px;color:var(--mut);margin-top:3px}
.qty.low b{color:var(--bad)}
.qty.pend b{color:var(--steel)}
.pill{display:inline-flex;align-items:center;gap:4px;font:700 11px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:5px;vertical-align:2px;margin-left:6px}
.pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.ok{background:var(--ok-soft);color:var(--ok)}
.cat-h{padding:9px 14px;background:var(--sunk);font:700 13px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);display:flex;gap:8px;align-items:center;border-top:1px solid var(--line)}
.cat-h:first-child{border-top:0}
.cat-h span{margin-left:auto;font-family:var(--f-mono);letter-spacing:0}

/* Toolbar */
.search{position:relative}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--mut)}
input.f,select.f,textarea.f{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:11px;background:var(--surface);min-width:0}
.search input{padding-left:42px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:8px 13px;font-weight:600;font-size:14px;display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip.red[aria-pressed="true"]{background:var(--bad);border-color:var(--bad);color:#fff}
.chip .n{font-family:var(--f-mono);font-size:12px;opacity:.8}

/* Activity */
.day{padding:8px 14px;font:700 13px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);background:var(--sunk);border-top:1px solid var(--line)}
.day:first-child{border-top:0}
.delta{font:600 18px/1 var(--f-mono);font-variant-numeric:tabular-nums;flex:none;text-align:right}
.delta small{display:block;font:500 11px var(--f-body);color:var(--mut);margin-top:3px}
.delta.in{color:var(--ok)} .delta.out{color:var(--bad)} .delta.xf{color:var(--steel)}
.ic.in{background:var(--ok-soft);color:var(--ok)} .ic.out{background:var(--bad-soft);color:var(--bad)} .ic.xf{background:var(--steel-soft);color:var(--steel)}

/* Buttons */
.btn{border:0;border-radius:11px;padding:13px 16px;font-weight:700;font-size:16px;background:var(--steel);color:var(--surface);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.ghost{background:var(--sunk);color:var(--ink);border:1px solid var(--line)}
.btn.red{background:var(--bad);color:#fff}
.btn.green{background:var(--ok);color:#fff}
.btn.yellow{background:var(--accent);color:var(--accent-ink)}
.btn[disabled]{opacity:.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
label.lb{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--mut)}

/* Reports */
.kv{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center}
.hbar{height:8px;border-radius:4px;background:var(--sunk);overflow:hidden;grid-column:1/-1;margin-top:-4px}
.hbar i{display:block;height:100%;background:var(--steel);border-radius:4px}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px 12px;border-top:1px solid var(--line);text-align:left;white-space:nowrap}
th{font:700 12px var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);border-top:0;background:var(--sunk)}
td.r,th.r{text-align:right}
.chart text{fill:var(--mut);font:500 10px var(--f-mono)}
.chart .gl{stroke:var(--line)}
.chart rect.b{fill:var(--steel)}
.chart rect.b.hi{fill:var(--accent)}

/* Sheet + toast */
.scrim{position:fixed;inset:0;z-index:20;background:rgba(10,15,20,.55);display:flex;align-items:flex-end;justify-content:center;animation:fd .15s ease}
.sheet{background:var(--surface);width:100%;max-width:760px;border-radius:20px 20px 0 0;max-height:92%;overflow:auto;padding:8px max(18px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));animation:up .2s cubic-bezier(.2,.8,.2,1)}
.grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 12px}
.sheet h3{font:800 24px/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.02em;margin:0;text-wrap:balance}
.sheet .stack{display:grid;gap:12px}
.big{display:flex;align-items:center;justify-content:center;gap:16px;padding:6px 0}
.big input{width:120px;text-align:center;font:600 40px/1 var(--f-mono);border:0;background:var(--sunk);border-radius:14px;padding:12px 4px;min-width:0}
.big .pm{width:58px;height:58px;border-radius:14px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--sunk);border-radius:11px;padding:4px}
.seg button{border:0;background:none;border-radius:8px;padding:10px 4px;font-weight:700;font-size:14px;color:var(--mut)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.levels div{background:var(--sunk);border-radius:10px;padding:9px;display:grid;gap:2px}
.levels div.cur{outline:2px solid var(--accent)}
.levels b{font:600 20px/1 var(--f-mono)} .levels span{font-size:12px;color:var(--mut);font-weight:600}
.levels div.low b{color:var(--bad)}
.toast{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);border-radius:12px;padding:12px 8px 12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);width:min(520px,calc(100% - 32px));font-weight:600;animation:up .2s ease}
.toast span{flex:1;min-width:0}
.toast button{border:0;background:none;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:6px 10px}
.empty{padding:26px 18px;text-align:center;display:grid;gap:8px;justify-items:center;color:var(--mut)}
.empty b{color:var(--ink);font-size:17px}
.prop-ck{display:grid;grid-template-columns:auto 1fr 84px 84px;gap:8px;align-items:center}
.prop-ck input[type=checkbox]{width:22px;height:22px;accent-color:var(--steel)}
.prop-ck .hd{font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.prop-ck input.f{padding:10px 8px;text-align:center}
.team-row{display:flex;gap:8px;align-items:center}
.skel{height:64px;background:linear-gradient(90deg,var(--sunk),var(--surface),var(--sunk));background-size:200% 100%;animation:sh 1.2s linear infinite;border-top:1px solid var(--line)}
@keyframes up{from{transform:translateY(24px);opacity:0}}
@keyframes fd{from{opacity:0}}
@keyframes sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:380px){.props button{font-size:13px}.tile b{font-size:24px}.pm{width:40px;height:40px}}

/* ---- standalone additions ---- */
html,body{margin:0}
html{background:var(--bg)}
[hidden]{display:none!important}
body{min-height:100vh}
.top{top:0}
.top .wrap{padding-top:calc(22px + env(safe-area-inset-top,0px))}
.small{font-size:13px}
.h2{font:800 26px/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;margin:0}
.stack-g{display:grid;gap:12px}
.note{padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600}
.note.bad{background:var(--bad-soft);color:var(--bad)}
.note.ok{background:var(--ok-soft);color:var(--ok)}
.linkbtn{border:0;background:none;color:var(--steel);font-weight:600;padding:6px;justify-self:center}
body.auth{padding-bottom:24px}
body.auth .top .wrap{padding-bottom:28px}
body.auth main{max-width:440px}
.ic.av{border-radius:50%;font-weight:700;font-size:14px}
.big-av{width:52px;height:52px;border-radius:50%;background:var(--steel-soft);color:var(--steel);display:grid;place-items:center;font-weight:700;font-size:18px;flex:none}
.sheet-ic{width:46px;height:46px;border-radius:11px;background:var(--steel-soft);color:var(--steel);display:grid;place-items:center;flex:none}
.row.off{opacity:.6}
.rowbtn{width:100%;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left}
.label-sm{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-top:4px}
.seg.seg2{grid-template-columns:1fr 1fr}
.seg.seg4{grid-template-columns:repeat(4,1fr)}
.seg button[disabled]{opacity:.4}
.creds{display:grid;gap:10px}
.creds div{display:grid;gap:2px}
.creds b{font-size:18px;overflow-wrap:anywhere}