/* ---------- design tokens ---------- */
:root{
  --fs:1;
  --font:-apple-system,"SF Pro Text",Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:18px;--r2:12px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="dark"]{
  --bg:#0c0d10;--bg2:#121419;--card:#181b21;--card2:#1f232b;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --ink:#f4f5f7;--ink2:#b9bec8;--ink3:#7d8595;
  --new:#5b8def;--prep:#e8a33d;--ready:#3ec97a;--late:#ef5b5b;--done:#7d8595;
  --new-bg:rgba(91,141,239,.14);--prep-bg:rgba(232,163,61,.14);--ready-bg:rgba(62,201,122,.14);--late-bg:rgba(239,91,91,.16);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --ring-track:rgba(255,255,255,.08);
}
:root[data-theme="light"]{
  --bg:#f3f1ec;--bg2:#ebe8e1;--card:#ffffff;--card2:#f7f5f0;--line:rgba(20,18,12,.08);--line2:rgba(20,18,12,.16);
  --ink:#16161a;--ink2:#4b4f58;--ink3:#8a8f9a;
  --new:#2f6fe0;--prep:#c8841c;--ready:#1f9d5a;--late:#d8403f;--done:#8a8f9a;
  --new-bg:rgba(47,111,224,.10);--prep-bg:rgba(200,132,28,.12);--ready-bg:rgba(31,157,90,.12);--late-bg:rgba(216,64,63,.12);
  --shadow:0 10px 30px rgba(30,25,10,.10);
  --ring-track:rgba(20,18,12,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:calc(15px*var(--fs))/1.35 var(--font);overscroll-behavior:none;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select{font:inherit}
.hidden{display:none!important}
#app{display:flex;flex-direction:column;height:100%}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;gap:14px;padding:calc(10px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) 10px calc(18px + env(safe-area-inset-left));min-height:60px}
.top .title{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05em;letter-spacing:-.01em}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--ink3);position:relative;flex:0 0 auto}
.pulse.connected{background:var(--ready)}
.pulse.connected::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--ready);opacity:0;animation:ripple 2.4s infinite}
.pulse.connecting,.pulse.reconnecting{background:var(--prep)}.pulse.error{background:var(--late)}
@keyframes ripple{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.locswitch{display:flex;gap:6px}
.locswitch button{padding:8px 12px;border-radius:999px;color:var(--ink3);font-weight:600}
.locswitch button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.locchip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:var(--card2);color:var(--ink);font-weight:700;font-size:.95em;border:1px solid var(--line);cursor:pointer}
.locchip:active{filter:brightness(.94)}
.locchip .car{color:var(--ink3);font-size:.8em}
.row.prow2{flex-wrap:wrap;gap:10px 12px} .row.prow2 .l{flex:1 1 180px;min-width:0} .row.prow2 .l label{white-space:normal}
.row.prow2 .acts{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 100%;padding-left:21px}
.ib.prn{position:relative} .ib.prn::after{content:"";position:absolute;right:6px;top:7px;width:9px;height:9px;border-radius:50%;background:transparent;border:2px solid var(--bg)}
.ib.prn.on::after{background:var(--ready)} .ib.prn.off::after{background:var(--late)}
.prepchip.on{background:var(--prep-bg);color:var(--prep);border-color:color-mix(in srgb,var(--prep) 45%,transparent)}
.locrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;border-radius:12px;background:none;border:0;cursor:pointer;color:var(--ink)}
.locrow+.locrow{border-top:1px solid var(--line)}
.locrow.on{background:var(--card2)}
.locrow .tick{margin-left:auto;color:var(--ready);font-weight:900;font-size:1.1em}
.locrow.add{color:var(--ink2)} .locrow .plus{width:9px;text-align:center;font-weight:900;font-size:1.2em;color:var(--new)}
.locrow .l label{font-weight:800;font-size:1.05em}
.spacer{flex:1}
.stats{display:flex;gap:18px;color:var(--ink3);font-variant-numeric:tabular-nums;font-weight:600}
.stats b{color:var(--ink);font-weight:800}
.seg{display:flex;background:var(--bg2);border-radius:999px;padding:3px}
.seg button{padding:7px 14px;border-radius:999px;font-weight:700;color:var(--ink3)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.top{position:relative}
.seg.main{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:4px}
.seg.main button{padding:9px 22px;font-size:1.12em;font-variant-numeric:tabular-nums}
.seg.main button b{font-weight:900;color:var(--ink2);margin-right:2px}
.seg.main button.on b{color:var(--ink)}
.ib{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink2);font-size:1.15em}
.ib:active{background:var(--card2)}
.clock{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink2);font-size:1.05em}

/* ---------- lanes ---------- */
.lanes{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 18px 18px;min-height:0}
.lane{display:flex;flex-direction:column;min-height:0}
.lane header{display:flex;align-items:center;gap:10px;padding:6px 8px 12px;color:var(--ink3);font-weight:800;letter-spacing:.14em;font-size:.72em;text-transform:uppercase}
.lane header .n{margin-left:auto;font-variant-numeric:tabular-nums;font-size:1.25em;letter-spacing:0;color:var(--ink)}
.lane header i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.lane .list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:2px 2px 60px;scrollbar-width:none}
.lane .list::-webkit-scrollbar{display:none}
.lane.empty .list{align-items:center;justify-content:center;color:var(--ink3);font-weight:600;padding-bottom:20px}


/* Ready tab + platform status chips */
.pst-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-weight:800;font-size:.78em;letter-spacing:.02em;white-space:nowrap;background:var(--card2);color:var(--ink2);border:1px solid var(--line)}
.pst-chip.ready{background:var(--ready-bg);color:var(--ready);border-color:transparent}
.pst-chip.ofd{background:var(--prep-bg);color:var(--prep);border-color:transparent}
.pst-chip.dlv{background:var(--ready-bg);color:var(--ready);border-color:transparent}
.pst-chip.x{background:var(--late-bg);color:var(--late);border-color:transparent}
.pst-chip.hot{background:var(--late-bg);color:var(--late);border-color:transparent}
.tk .pstrow{display:flex;justify-content:flex-start}
.drow .pst-chip{flex:0 0 auto}
.hist .hsearch{display:flex;gap:8px;padding:0 0 10px}
.hist .hsearch input{flex:1;padding:12px 14px;border-radius:12px;background:var(--card2);border:1px solid var(--line);color:var(--ink);font-size:1em;font-weight:600}
.hist .dlist{margin-top:2px}
.hist .drow{flex-wrap:wrap;gap:8px}
.hist .drow .nm{max-width:none;flex:0 1 auto}
.hist .drow .dt{margin-left:auto;color:var(--ink3);font-weight:700;white-space:nowrap}
.hist .hday{padding:12px 2px 6px;color:var(--ink3);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.78em}
.hist .empty{padding:24px;text-align:center;color:var(--ink3);font-weight:700}
.detail .it .o .mp,.detail .it .o .mp0{float:right;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink2)}
.detail .it .o .mp0{color:var(--ink3);font-weight:600}
.detail .it .modsum{grid-column:2;display:flex;justify-content:space-between;color:var(--ink3);font-size:.88em;font-weight:700;margin-top:4px;border-top:1px dashed var(--line);padding-top:4px}
@media (max-width:560px){.top{flex-wrap:wrap!important;row-gap:8px!important;column-gap:3px!important}.top .ib{width:32px;height:32px;flex:0 0 32px;font-size:1.05em}.top .locchip{min-width:0;flex:0 1 auto}.top .spacer{flex:1 1 0;min-width:0}.seg.main{order:10;flex:1 0 100%;display:flex;margin:0!important}.seg.main button{flex:1;padding:8px 6px;font-size:.95em;white-space:nowrap}}
/* ---------- ticket ---------- */
.tk{flex:0 0 auto;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;position:relative;transition:transform .35s var(--ease),opacity .35s var(--ease);will-change:transform}
.tk.enter{animation:drop .5s var(--ease)}
@keyframes drop{0%{transform:translateY(-14px) scale(.98);opacity:0}100%{transform:none;opacity:1}}
.tk.leaving{transform:translateX(24px) scale(.96);opacity:0}
.tk.unseen::before{content:"";position:absolute;inset:0;border-radius:var(--r);border:2px solid var(--new);animation:glow 1.6s infinite;pointer-events:none}
@keyframes glow{0%,100%{opacity:1}50%{opacity:.25}}
.tk .body{padding:14px 16px 10px;display:flex;flex-direction:column;gap:10px}
.tk{position:relative}.tk .tkbtns{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:2}.tk.hasb1 .head .who{padding-right:40px}.tk.hasb2 .head .who{padding-right:80px}.tk .lball{width:34px;height:34px;border-radius:10px;background:var(--card2);border:1px solid var(--line);font-size:1em;line-height:1;display:grid;place-items:center;cursor:pointer;z-index:2}.tk .lball:active{transform:scale(.94)}.tk .lball:disabled{opacity:.6}
.tk .head{display:flex;align-items:center;gap:12px}
.ring{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:conic-gradient(var(--rc) calc(var(--p)*1%),var(--ring-track) 0);position:relative}
.ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--card)}
.ring span{position:relative;font:800 .95em/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--rc)}
.tk .who{flex:1;min-width:0}
.tk .name{font:800 1.4em/1.25 var(--font);letter-spacing:-.01em;overflow-wrap:anywhere}
.tk .name .rpt{margin-left:7px}
/* Repeat-order badge — how often this customer has ordered from this store before (Otter customerMetrics). */
.rpt{display:inline-flex;align-items:center;gap:4px;font:800 .58em/1 var(--font);letter-spacing:.06em;font-variant-numeric:tabular-nums;padding:4px 7px;border-radius:8px;border:1px solid var(--line);background:var(--card2);color:var(--ink2);white-space:nowrap;vertical-align:middle;position:relative;top:-.1em}
.rpt.new{color:var(--new);border-color:color-mix(in srgb,var(--new) 45%,transparent);background:color-mix(in srgb,var(--new) 12%,transparent)}
.rpt.vip{color:#f0a52a;border-color:#f0a52a66;background:#f0a52a1f}
.rpt.sm{font-size:.72em;padding:3px 6px;border-radius:7px;top:0}
.tk .code{font:900 1.35em/1.1 var(--mono);letter-spacing:.02em}
.tk .meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;color:var(--ink3);font-size:.92em;margin-top:5px;line-height:1.3}
.tk .meta .ch{margin-left:0;font-size:.78em;padding:3px 7px}
.tk .meta .nt{white-space:nowrap}
.tk .meta .num{font:800 1em/1 var(--mono);color:var(--ink2)}
.tk .meta .at{font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.tk .meta .b{color:var(--ink2);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.tk .meta .b i{width:8px;height:8px;border-radius:50%;background:var(--brand);display:inline-block}
.ch{font:800 .68em/1 var(--font);letter-spacing:.06em;padding:6px 7px;border-radius:7px;flex:0 0 auto;color:var(--ink);background:var(--card2);border:1px solid var(--line)}
.ch.ubereats{background:#06c16722;border-color:#06c16755}.ch.doordash{background:#ff300822;border-color:#ff300855}.ch.direct{background:#e11d7422;border-color:#e11d7455}.ch.menulog{background:#ff800022;border-color:#ff800055}
.ch.square,.ch.square-online,.ch.square-pos,.ch.square-kiosk,.ch.square-invoice{background:#3f7ef622;border-color:#3f7ef655}
.tk .items{display:flex;flex-direction:column;margin-top:3px;border-top:1.5px dashed var(--line2)}
.tk .it{display:grid;grid-template-columns:2.5em 1fr auto;gap:0 11px;align-items:baseline;padding:10px 0;border-bottom:1.5px dashed var(--line)}
.tk .it .lbl,.detail .it .lbl{grid-column:3;align-self:center;font-size:1.05em;padding:6px 9px;border-radius:9px;background:var(--card2);border:1px solid var(--line);line-height:1}
.tk .it .lbl.sent,.detail .it .lbl.sent{background:var(--ready-bg);border-color:var(--ready)}
.tk .it:last-child{border-bottom:0;padding-bottom:2px}
.tk .it .q{font:800 1.05em/1.4 var(--mono);color:var(--ink3);white-space:nowrap;text-align:right}
.tk .it .q.multi{color:#1b1300;background:var(--prep);border-radius:7px;padding:2px 7px;font-weight:900;font-size:1.14em;text-align:center}
.tk .it .n{font-weight:800;font-size:1.16em;line-height:1.25;letter-spacing:-.005em}
.tk .it .mods{grid-column:2;display:flex;flex-direction:column;gap:2px;margin-top:5px}
.tk .it .mod{color:var(--ink2);font-size:.98em;font-weight:600;line-height:1.35}
.tk .it .mod::before{content:"+";color:var(--ink3);font-weight:800;margin-right:6px}
.tk .it .mod.remove{color:var(--late)}
.tk .it .mod.remove::before{content:"–";color:var(--late)}
.tk .it .note,.tk .cnote{grid-column:2;color:var(--prep);font-weight:800;font-size:.98em;margin-top:5px;line-height:1.35}
.tk .cnote{grid-column:auto;background:var(--prep-bg);border-radius:10px;padding:9px 11px;margin-top:2px}
.tk .flags{display:flex;gap:6px;flex-wrap:wrap}
.contact{display:flex;flex-direction:column;gap:5px;border-top:1.5px dashed var(--line);padding-top:9px;margin-top:2px}
/* Driver band: the courier's status, big enough to read from across the kitchen */
.drv{display:flex;align-items:center;gap:10px;margin:10px 0 2px;padding:9px 11px;border-radius:12px;background:var(--prep-bg);color:var(--prep);border:1px solid color-mix(in srgb,var(--prep) 30%,transparent)}
.drv .ico{font-size:1.5em;line-height:1}
.drv .st{font-weight:900;font-size:1.12em;letter-spacing:-.01em;line-height:1.1;text-transform:uppercase}
.drv .sub{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:4px;font-size:.88em;color:var(--ink2);font-weight:600}
.drv .sub .tel{color:var(--new);font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}
.drv .sub .pin{font:800 .92em/1 var(--mono);background:var(--card);border:1px solid var(--line);padding:3px 6px;border-radius:6px;color:var(--ink)}
.drv.hot{background:var(--ready-bg);color:var(--ready);border-color:color-mix(in srgb,var(--ready) 40%,transparent);animation:drvpulse 1.6s infinite}
.drv.dim{background:var(--card2);color:var(--ink3);border-color:var(--line)}
@keyframes drvpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ready) 45%,transparent)}60%{box-shadow:0 0 0 7px transparent}}
.crow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.92em;color:var(--ink2);line-height:1.35}
.crow .who{font-weight:800;color:var(--ink);min-width:72px}
.crow .veh{color:var(--ink3)}
.crow .stage{font-weight:700;color:var(--prep)}
.crow.hot .stage{color:var(--late)}
.crow .tel{color:var(--new);font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.crow .pin{font:800 .95em/1 var(--mono);background:var(--card2);border:1px solid var(--line);padding:4px 7px;border-radius:7px;color:var(--ink);white-space:nowrap}
.crow.note span:last-child{color:var(--prep);font-weight:600}
.donelog{flex:1;min-height:0;overflow-y:auto;padding:0 18px 16px;display:flex;flex-direction:column}
.donelog .dh{display:flex;align-items:center;gap:10px;color:var(--ink3);font-weight:800;letter-spacing:.14em;font-size:.74em;text-transform:uppercase;padding:6px 0 10px;position:sticky;top:0;background:var(--bg);z-index:1}
.donelog .dh i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.donelog .dh .n{margin-left:auto;font-size:1.35em;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}
.donelog .dh .hint{letter-spacing:0;text-transform:none;font-weight:600}
.donelog .empty{color:var(--ink3);font-weight:600;padding:26px 4px;font-size:1.05em}
.dlist{display:flex;flex-direction:column;flex:0 0 auto;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.drow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;font-size:1em}
.drow:last-child{border-bottom:0}
.drow:active{background:var(--card2)}
.drow .mk{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--ready-bg);color:var(--ready);font-weight:900;flex:0 0 auto}
.drow.x .mk{background:var(--late-bg);color:var(--late)}
.drow .nm{font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32%}
.drow .num{font:700 .9em/1 var(--mono);color:var(--ink3)}
.drow .br{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);font-weight:600;white-space:nowrap}
.drow .br i{width:8px;height:8px;border-radius:50%;display:inline-block}
.drow .ic{color:var(--ink3);white-space:nowrap}
.drow .tm{margin-left:auto;font:700 .95em/1 var(--mono);color:var(--ink2);white-space:nowrap}
.drow.x .tm{color:var(--late)}
@media (max-width:560px){.donelog{padding:0 10px 12px}.drow{gap:8px;padding:11px 12px;flex-wrap:wrap}.drow .ic,.drow .br{font-size:.9em}}
/* phone list rows (active orders) */
.plist .prow{flex-wrap:nowrap;gap:12px;padding:12px 12px;border-left:4px solid var(--ink3)}
.plist .prow.st-NEW{border-left-color:var(--new)} .plist .prow.st-PREPARING{border-left-color:var(--prep)} .plist .prow.st-READY{border-left-color:var(--ready)}
.plist .prow .tmr{flex:0 0 52px;font:800 1.05em/1 var(--mono);color:var(--ink2);text-align:center}
.plist .prow.warn .tmr{color:var(--prep)} .plist .prow.late .tmr{color:var(--late)} .plist .prow.st-READY .tmr{color:var(--ready);font-size:1.3em}
.plist .prow .mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.plist .prow .l1{display:flex;align-items:center;gap:8px;min-width:0} .plist .prow .l1 .nm{font-weight:800;font-size:1.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plist .prow .l1 .num{font:700 .85em var(--mono);color:var(--ink3)} .plist .prow .l1 .ch{font-size:.62em;padding:3px 6px}
.plist .prow .l2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink3);font-size:.88em}
.plist .prow .l2 .br{display:inline-flex;align-items:center;gap:5px;color:var(--ink2);font-weight:700} .plist .prow .l2 .br i{width:7px;height:7px;border-radius:50%;display:inline-block}
.plist .prow .l2 .dst{color:var(--prep);font-weight:700} .plist .prow .l2 .dst.hot{color:var(--ready)} .plist .prow .l2 .note{color:var(--prep);font-weight:700}
.plist .prow .car{color:var(--ink3);font-size:1.3em}
.setup{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;margin-top:6px}
.setup .st{font-weight:700}
.setup .kv{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.setup .kv span{color:var(--ink3);font-weight:700;min-width:64px}
.setup code{font:700 1.02em var(--mono);background:var(--card);border:1px solid var(--line2);padding:6px 9px;border-radius:8px;user-select:all;word-break:break-all}
.flag{font-size:.74em;font-weight:700;color:var(--ink2);background:var(--card2);border:1px solid var(--line);padding:4px 9px;border-radius:999px}
.flag.hot{color:var(--late);background:var(--late-bg);border-color:transparent}
.flag.ok{color:var(--ready);background:var(--ready-bg);border-color:transparent}
.bump{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;font-weight:800;font-size:1.05em;letter-spacing:.01em;border-top:1px solid var(--line);color:var(--bc);background:var(--bb);transition:filter .1s}
.bump:active{filter:brightness(.92)}
.bump small{font-weight:600;color:var(--ink3);font-size:.8em;letter-spacing:0}
.tk.holding{transform:scale(.985)}
.tk .holdbar{position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--ink);opacity:.6;transition:width .55s linear}
.tk.holding .holdbar{width:100%}
.tk.st-NEW{--rc:var(--new);--bc:#fff;--bb:var(--new)}
.tk.st-PREPARING{--rc:var(--prep);--bc:#1b1300;--bb:var(--prep)}
.tk.st-READY{--rc:var(--ready);--bc:#04200f;--bb:var(--ready)}
.tk.st-CANCELLED{--rc:var(--late);--bc:#fff;--bb:var(--late);outline:3px solid var(--late);outline-offset:-3px}
.tk.st-CANCELLED .items{opacity:.55;text-decoration:line-through}
.tk .xbanner{background:var(--late);color:#fff;font-weight:900;letter-spacing:.06em;text-align:center;padding:9px 10px;border-radius:10px;font-size:1.02em}
.tk .xreason{color:var(--late);font-weight:700;text-align:center;padding:6px 8px 0;font-size:.88em;line-height:1.35}
.plist .prow.st-CANCELLED{border-left-color:var(--late)} .plist .prow.st-CANCELLED .tmr{color:var(--late)}
.plist .prow .pbtn{flex:0 0 auto;padding:9px 12px;border-radius:10px;font-weight:800;font-size:.9em;background:var(--ready);color:#04200f}
.plist .prow .pbtn.x{background:var(--late);color:#fff}
.tk.warn{--rc:var(--prep)}.tk.late{--rc:var(--late)}
.tk.late .code{color:var(--late)}
.tk.st-DONE{--rc:var(--done);opacity:.75}

/* ---------- expo view ---------- */
.expo{flex:1;display:grid;grid-template-columns:1.4fr 1fr;gap:14px;padding:0 18px 18px;min-height:0}
.expo .focus{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto}
.expo .focus .tk{--fs:1.15}
.expo .queue{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto}
.expo .qh{display:flex;align-items:center;gap:10px;padding:6px 8px 4px;color:var(--ink3);font-weight:800;letter-spacing:.14em;font-size:.72em;text-transform:uppercase}
.expo .qh i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.expo .qh .n{margin-left:auto;font-size:1.25em;letter-spacing:0;color:var(--ink)}
.expo .queue .tk .items{display:none}
/* ---------- prep-focused board ---------- */
.prep{flex:1;display:flex;flex-direction:column;gap:16px;padding:0 18px 16px;min-height:0;overflow-y:auto}
.sec{display:flex;flex-direction:column;gap:10px}
.sec>h4{margin:0;display:flex;align-items:center;gap:10px;color:var(--ink3);font-weight:800;letter-spacing:.14em;font-size:.74em;text-transform:uppercase}
.sec>h4 .n{margin-left:auto;font-size:1.35em;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}
.sec>h4 i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;align-content:start;align-items:start}
.grid.ready{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.sec.readysec{border-top:1px solid var(--line);padding-top:14px}
.prep .empty{color:var(--ink3);font-weight:600;padding:26px 4px;font-size:1.05em}

/* ---------- sheets / dialogs ---------- */
.veil{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:30;display:flex;justify-content:flex-end;animation:fade .2s}
.veil.center{align-items:center;justify-content:center}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{width:min(540px,100%);height:100%;background:var(--bg);display:flex;flex-direction:column;animation:slide .3s var(--ease)}
@keyframes slide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.dialog{width:min(480px,94%);max-height:92%;background:var(--bg);border-radius:24px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow);animation:pop .25s var(--ease)}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
.sh{display:flex;align-items:center;gap:12px;padding:calc(18px + env(safe-area-inset-top)) 20px 10px}
.sh h3{margin:0;font-size:1.25em;flex:1;letter-spacing:-.01em}
.sb{flex:1;overflow-y:auto;padding:8px 20px 20px;display:flex;flex-direction:column;gap:12px}
.sb>*{flex:0 0 auto}
.sf{padding:14px 20px calc(14px + env(safe-area-inset-bottom));display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line)}
.btn{flex:1;padding:16px 18px;border-radius:14px;font-weight:800;font-size:1.02em;text-align:center;background:var(--card);border:1px solid var(--line2);color:var(--ink)}
.btn:active{filter:brightness(.92)}
.btn.primary{background:var(--ink);color:var(--bg);border-color:transparent}
.btn.new{background:var(--new);color:#fff;border-color:transparent}
.btn.ready{background:var(--ready);color:#04200f;border-color:transparent}
.btn.danger{color:var(--late)}
.btn.quiet{flex:0 0 auto}
.group{background:var(--card);border-radius:16px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .l{flex:1;min-width:0}
.row label{font-weight:700;display:block}
.row .hint{color:var(--ink3);font-size:.85em;margin-top:2px}
.gh{color:var(--ink3);font-size:.72em;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:14px 4px 6px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:.9em;color:var(--ink2)}
.field input{padding:14px;border-radius:12px;border:1px solid var(--line2);background:var(--card);color:var(--ink);font-size:1.05em}
.field input:focus{outline:2px solid var(--new);border-color:transparent}
.pw{position:relative;display:flex;align-items:center}
.pw input{flex:1;padding-right:52px;width:100%}
.pw .eye{position:absolute;right:6px;background:none;border:0;color:var(--ink3);font-size:1.2em;padding:8px;cursor:pointer;line-height:1}
.sw{width:52px;height:32px;border-radius:999px;background:var(--line2);position:relative;flex:0 0 auto;transition:background .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:left .2s var(--ease);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.sw.on{background:var(--ready)}.sw.on::after{left:23px}
.step{display:flex;align-items:center;gap:4px;background:var(--bg2);border-radius:12px;padding:3px}
.step button{width:42px;height:40px;border-radius:9px;font-size:1.3em;font-weight:800;color:var(--ink2)}
.step button:active{background:var(--card)}
.step span{min-width:4.2em;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.pills{display:flex;gap:4px;background:var(--bg2);border-radius:12px;padding:3px}
.pills button{padding:9px 13px;border-radius:9px;font-weight:700;color:var(--ink3)}
.pills button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.detail .code{font:900 2em/1 var(--mono)}
.tk .it.tap{cursor:pointer}
.tk .it.tap:active{background:var(--card2)}
.dialog.item{max-width:520px;width:min(92vw,520px)}
.dialog.item .ih{display:flex;align-items:flex-start;gap:12px;margin-top:6px}
.dialog.item .ih .q{font:800 1.1em/1 var(--mono);padding:8px 10px;border-radius:9px;background:var(--card2);border:1px solid var(--line);flex:0 0 auto}
.dialog.item .ih .q.multi{background:var(--prep);color:#111;border-color:transparent}
.dialog.item .nm{font-weight:800;font-size:1.6em;line-height:1.15;letter-spacing:-.01em}
.dialog.item .im{margin:14px 0 0 2px;display:flex;flex-direction:column;gap:6px;font-size:1.2em;font-weight:600;color:var(--ink2)}
.dialog.item .im .mod::before{content:"+ ";color:var(--ink3)}
.dialog.item .im .mod.remove{color:var(--late)} .dialog.item .im .mod.remove::before{content:"NO ";font-weight:800}
.dialog.item .sf{flex-wrap:wrap;gap:8px}
.pay{margin-top:12px;border-radius:12px;border:1px solid var(--line);background:var(--card2);overflow:hidden}
.pay .pst{display:flex;align-items:center;gap:9px;padding:10px 12px;font-weight:800;border-bottom:1px solid var(--line)}
.pay .pst .dot{width:9px;height:9px;border-radius:50%;background:var(--ready)}
.pay.unpaid .pst .dot,.pay.partial .pst .dot{background:var(--late)} .pay.refunded .pst .dot{background:var(--ink3)}
.pay.unpaid .pst b,.pay.partial .pst b{color:var(--late)} .pay.paid .pst b{color:var(--ready)}
.pay .pst .how{font-weight:600;color:var(--ink2);font-size:.92em}
.pay .prows{padding:6px 12px 8px}
.pay .prow{display:flex;justify-content:space-between;gap:10px;padding:4px 0;color:var(--ink2);font-variant-numeric:tabular-nums}
.pay .prow.det{color:var(--ink3);font-size:.9em;padding:2px 0 2px 12px}
.pay .prow.neg{color:var(--prep)}
.pay .prow.tot{border-top:1px solid var(--line);margin-top:4px;padding-top:8px;color:var(--ink);font-weight:800;font-size:1.08em}
.pay .prow.due{color:var(--late);font-weight:800}
.detail .it{display:grid;grid-template-columns:2.4em 1fr auto;padding:12px 0;border-top:1px solid var(--line)}
.detail .it .g,.detail .it .o{grid-column:2}
.detail .it:first-child{border-top:0}
.detail .it .q{font:900 1.3em/1.3 var(--mono);color:var(--ink2)}
.detail .it .n{font-weight:800;font-size:1.1em}
.detail .g{grid-column:2;color:var(--ink3);font-size:.74em;letter-spacing:.12em;text-transform:uppercase;margin-top:8px;font-weight:800}
.detail .o{grid-column:2;font-size:1.02em;padding:2px 0}
.err{background:var(--late-bg);color:var(--late);padding:12px 14px;border-radius:12px;font-weight:700}
.ok{background:var(--ready-bg);color:var(--ready);padding:12px 14px;border-radius:12px;font-weight:700}
.offline{position:fixed;left:0;right:0;top:0;z-index:70;background:var(--late);color:#fff;text-align:center;font-weight:800;padding:10px;transform:translateY(-100%);transition:transform .3s var(--ease)}
.offline.on{transform:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:14px 20px;border-radius:999px;font-weight:800;z-index:60;box-shadow:var(--shadow);animation:pop .25s var(--ease);white-space:nowrap}

/* ---------- first run / start ---------- */
.hero{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.hero .card{width:min(460px,100%);background:var(--card);border-radius:28px;padding:34px 30px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px}
.hero h1{margin:0;font-size:1.7em;letter-spacing:-.02em}
.hero p{margin:0;color:var(--ink3);line-height:1.5}
.gate{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;text-align:center;padding:20px}
.gate .logo{width:76px;height:76px;display:grid;place-items:center}
.gate .logo svg{width:100%;height:100%;display:block}
.gate h1{margin:0;font-size:1.6em;letter-spacing:-.02em}
.gate p{margin:0;color:var(--ink3)}
.gate button{padding:18px 44px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:900;font-size:1.15em}
.done .tk{opacity:.85}
@media (max-width:980px){.lanes{display:flex;flex-direction:column;overflow-y:auto;gap:6px}.lane{min-height:0;flex:0 0 auto}.lane .list{flex:none;overflow:visible;padding-bottom:12px}.lane.empty .list{padding:6px 8px 14px;justify-content:flex-start}.stats{display:none}.expo{grid-template-columns:1fr}.tk .body{padding:16px 18px 12px}.bump{padding:20px}}
/* Phone — monitor orders on a handset: single readable column, condensed header, big tap targets */
@media (max-width:560px){
  .top{gap:8px;padding:calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left));min-height:52px;flex-wrap:nowrap}
  .top .title{font-size:0;gap:0} .top .title .pulse{width:10px;height:10px}
  .locchip{padding:7px 10px;font-size:.9em;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .prepchip{max-width:none}
  .clock{display:none}
  .stats{display:none}
  .seg.main{position:static;transform:none;margin-left:auto}
  .seg.main button{padding:7px 12px;font-size:1em}
  .top .title{max-width:30vw}
  .locchip{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
  .prep{gap:12px;padding:0 10px 14px}
  .grid{grid-template-columns:1fr;gap:10px}
  .grid.ready{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .sec.readysec{padding-top:12px}
  .tk .body{padding:14px 15px 10px}
  .tk .name{font-size:1.3em}
  .tk .it .n{font-size:1.1em}
  .ring{width:50px;height:50px}
  .bump{padding:18px}
  .expo{grid-template-columns:1fr}
  .expo .queue .tk .items{display:none}
}