/* Merchant portal — the product layer on top of opera.css (vendored as-is, never edited).
   Only the accent and the food-delivery components are ours; layout and base components are Opera's.
   Spacing scale: 4 · 8 · 12 · 16 · 20 · 24. Controls: 38 px (--h), compact 32 px in the top bar. */
:root{--acc:#c9a9e6;--acc-soft:rgba(201,169,230,.14);--bar:#c9a9e6;--on-acc:#1d1028;--acc-line:rgba(201,169,230,.38);--acc-bg:rgba(201,169,230,.09);
  --ok-bg:rgba(46,160,67,.10);--warn-strong:#f0a020;--go:#08734f;--on-go:#fff;--card2:#161e28;--shadow:0 8px 24px rgba(0,0,0,.35);--wa:#25d366;--star:#f2b632}
:root[data-theme="light"]{--acc:#5e2a84;--acc-soft:rgba(94,42,132,.08);--bar:#5e2a84;--on-acc:#fff;--acc-line:rgba(94,42,132,.28);--acc-bg:rgba(94,42,132,.05);
  --ok:#08734f;--ok-bg:rgba(8,115,79,.08);--warn-strong:#a15c00;--go:#08734f;--on-go:#fff;--card2:#f7f6fa;--shadow:0 8px 24px rgba(15,23,32,.10);--wa:#0b7a43;--star:#f2b632}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
#main{max-width:1560px}
.shell{height:100vh;height:100dvh}

/* brand mark */
.mark-svg{width:30px;height:30px;display:block;border-radius:8px}

.brand .mark{display:inline-flex}.wm{font-weight:800;letter-spacing:-.4px;color:var(--acc);white-space:nowrap}
.devb{display:inline-block;margin-left:4px;padding:0 5px;border-radius:4px;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);font-size:10px;font-weight:700}

/* compact sidebar (house admin) */
.side a.it{padding:7px 14px;font-size:14px;gap:10px}
.side .grp{padding:12px 14px 3px;cursor:default}
.side .foot{padding:10px 14px;display:flex;align-items:center;gap:8px}.side .foot .who{flex:1;min-width:0}.side .foot .who small{display:block;color:var(--mut)}
.side .foot form{margin:0}
.linkbtn{background:none;border:0;height:auto;padding:4px;color:var(--mut);font-weight:400;display:inline-flex;align-items:center}.linkbtn:hover{color:var(--txt)}
.colbtn{display:inline-flex;align-items:center;justify-content:center;width:28px}.colbtn svg.i{transition:transform .15s}.shell.col .colbtn svg.i{transform:rotate(180deg)}
.shell.col .side .grp span{display:none}.shell.col .side .grp::before{content:"";display:block;width:18px;border-top:1px solid var(--line)}
.shell.col .side .foot{flex-direction:column;padding:10px 0}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--acc-soft);color:var(--acc);display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;flex:none}
.cnt{margin-left:auto;font-size:11px;font-weight:650;line-height:18px;padding:0 7px;border-radius:9px;background:var(--hover-btn);color:var(--mut);font-variant-numeric:tabular-nums}
.cnt.acc{background:var(--acc);color:var(--on-acc)}.cnt.bad{background:var(--bad);color:#fff}
.side a.it .cnt[hidden]{display:none}

/* top bar */
.topbar .crumb{color:var(--mut);font-size:13.5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar .crumb b{color:var(--txt);font-weight:620}.topbar .crumb a{color:var(--mut)}
.topbar .crumb .sep{margin:0 6px;opacity:.6}
.topbar form{margin:0}.topbar .ctx .osel,.topbar .ctx select{min-width:0}
.topbar .osel>button.osel-btn.osel-btn,.topbar select{height:32px;font-size:13px}
.mswitch .osel{min-width:190px;max-width:260px}
.mname{font-weight:600;font-size:13.5px}
.tgl{height:32px}
.stchip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:16px;border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--txt);text-decoration:none!important;white-space:nowrap}
.stchip .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.stchip.ok{border-color:var(--ok);color:var(--ok)}.stchip.warn{border-color:var(--warn);color:var(--warn)}.stchip.bad{border-color:var(--bad-line);color:var(--bad)}
form.lang{display:inline-flex;align-items:center;margin:0}

/* buttons & links that look like buttons */
a.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--h);padding:0 14px;border:1px solid var(--line);border-radius:8px;color:var(--txt);background:var(--card);font-size:14px;text-decoration:none!important;white-space:nowrap}
a.btn:hover{border-color:var(--line2)}
a.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:600}
a.btn.bad{color:var(--bad)}a.btn.mini,button.mini{height:30px;padding:0 10px;font-size:12.5px}
a.btn.wa{color:var(--wa);border-color:var(--wa)}
button.danger{background:var(--bad);border-color:var(--bad);color:#fff}
button.go,button.big.go{background:var(--go);border-color:var(--go);color:var(--on-go)}
.inl-f{display:inline-flex;margin:0}
.ib-b{width:38px;padding:0;justify-content:center}

/* screen header, tabs, sections */
.cab{align-items:center;margin-bottom:16px}.cab>div:first-child{min-width:0}.cab .act{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.cab h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tabsp{margin:0 0 18px}.tabsp a{display:inline-flex;align-items:center;gap:7px}.tabsp a .cnt{margin-left:0}
.sec-h{display:flex;align-items:center;gap:8px;margin:22px 0 10px}.sec-h:first-child{margin-top:0}.sec-h h2{margin:0}.sec-h .act{margin-left:auto}
.card h4{margin:0 0 12px;font-size:14.5px;font-weight:650;display:flex;align-items:center;gap:8px}.card h4 svg.i{color:var(--mut)}
.card{overflow:visible}.card.tbl{padding:4px 8px;overflow-x:auto}
.card-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}.card-h h4{margin:0}.card-h .mut{margin-left:auto;font-size:12.5px}
.grid2{gap:16px}.grid2>.card,.grid3>.card{min-width:0}
.mt{margin-top:16px}.small{font-size:12.5px}.grow{flex:1}
.s2{display:block;color:var(--mut);font-size:12px;white-space:normal}
.empty{padding:26px 10px;color:var(--mut);text-align:center;font-size:13.5px}
.soon{border:1px dashed var(--line2);border-radius:12px;padding:40px 20px;text-align:center;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:6px}
.soon b{color:var(--txt);font-size:15px}.soon svg.i{width:26px;height:26px;color:var(--acc)}
.flash{border-radius:9px;padding:10px 13px;margin-bottom:16px;display:flex;gap:10px;align-items:center;font-size:14px;border:1px solid var(--line)}
.flash.ok{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}.flash.bad{border-color:var(--bad-line);background:var(--bad-bg);color:var(--bad)}
.alert{gap:10px}.alert>a.btn,.alert>button{margin-left:auto;flex:none}.alert.big-alert{padding:14px 16px}.alert.big-alert div{display:flex;flex-direction:column;gap:2px}
.pill{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-weight:550;padding:1px 8px;font-size:11.5px;line-height:18px}.pill svg.i{width:12px;height:12px}
.pill.ok{background:var(--ok-bg)}.pill.bad{background:var(--bad-bg)}.pill.warn{background:var(--warn-bg)}.pill.acc{background:var(--acc-bg)}
.stars{color:var(--star);letter-spacing:1px}.stars i{color:var(--line2);font-style:normal}
td.wrap{white-space:normal;min-width:160px}td.act{text-align:right;white-space:nowrap}td.act>*+*{margin-left:6px}
td .neg,td.neg,.neg{color:var(--bad)}
table.kv td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line);vertical-align:top;white-space:normal}table.kv tr:last-child td{border-bottom:0}table.kv td:first-child{color:var(--mut);width:42%}
table.kv tr:hover td{background:none}table.kv tr.tot td{font-weight:700;color:var(--txt);border-top:2px solid var(--line2)}
.tfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}.tfoot .pager{margin:0 0 0 auto}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px;font-size:13px;color:var(--mut)}
.pager a{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;color:var(--txt);background:var(--card);text-decoration:none!important}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.row.quick{margin-top:16px;justify-content:flex-end}
ul.plain{list-style:none;margin:0 0 12px;padding:0;font-size:15px;font-weight:600}

/* filter bar: every control 38 px, aligned on the field (labels above), actions on the right */
.filters{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;margin:0 0 16px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.filters label.ff{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;min-width:150px}
.filters label.ff.grow{flex:1 1 240px}
.filters label.ff input,.filters label.ff select,.filters label.ff .osel{width:100%;text-transform:none;letter-spacing:0}
.filters .fact{display:flex;gap:8px;align-items:center;margin-left:auto}
.fcount{font-size:12.5px;color:var(--mut);white-space:nowrap;margin-right:4px}
.srch{position:relative;display:block}.srch svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--mut);pointer-events:none}.srch input{padding-left:34px;width:100%}
label.ff{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px}

/* forms: grouped fields, footer with Cancel + Save on the right */
.form .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 14px}
.form label.f{min-width:0}
.form textarea{width:100%}
.hint{display:block;margin:-8px 0 12px;font-size:11.5px;color:var(--mut);text-transform:none;letter-spacing:0}
.ffoot{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.card .ffoot:first-child{border-top:0;margin-top:0;padding-top:0}
form.form>.ffoot{border-top:0}
.checks{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
label.chk{display:flex;align-items:flex-start;gap:9px;font-size:14px;cursor:pointer;color:var(--txt)}label.chk input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--acc);flex:none}
label.chk small{display:block;color:var(--mut);font-size:12px}
label.chk.chip{align-items:center;padding:6px 11px;border:1px solid var(--line);border-radius:18px;font-size:13px;background:var(--card)}label.chk.chip input{margin:0}
label.chk.chip:has(input:checked){border-color:var(--acc);background:var(--acc-bg)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px}
.imgprev{position:relative;margin:4px 0 18px;height:150px}.imgprev .cover{display:block;width:100%;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.imgprev .cover.ph{display:flex;align-items:center;justify-content:center;color:var(--mut);background:var(--card2);font-size:13px}
.imgprev .logo{position:absolute;left:16px;bottom:0;width:64px;height:64px;border-radius:14px;object-fit:cover;border:3px solid var(--card);background:var(--card2)}
.imgprev .logo.ph{display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:var(--acc)}

/* modal (app.js) */
.modal-bg.center{align-items:center;justify-content:center;padding:16px}
.modal.confirm{max-width:440px;margin:auto}.modal.confirm h3{margin:0 0 8px;font-size:17px;font-weight:650}.modal.confirm p{margin:0 0 10px;font-size:14px;line-height:1.5}
.modal.confirm .confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.page-loading{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 55%,transparent);cursor:progress}
.page-loading .spin{width:40px;height:40px;border-radius:50%;border:4px solid var(--line2);border-top-color:var(--acc);animation:pl-spin .75s linear infinite}
@keyframes pl-spin{to{transform:rotate(360deg)}}
.ntoast{position:fixed;right:18px;bottom:18px;z-index:95;background:var(--card);border:1px solid var(--ok);color:var(--txt);padding:11px 15px;border-radius:10px;box-shadow:var(--shadow);font-size:14px;transition:opacity .4s,transform .4s}
.ntoast.bad{border-color:var(--bad)}.ntoast.out{opacity:0;transform:translateY(8px)}

/* sign-in */
body.login{display:flex;flex-direction:column;min-height:100vh;background:radial-gradient(1200px 500px at 50% -10%,var(--acc-bg),transparent),var(--bg)}
#login{max-width:400px;width:calc(100% - 32px);margin:10vh auto 24px;padding:30px 28px}
#login .theme-row{display:flex;justify-content:flex-end;gap:8px;align-items:center;margin-bottom:14px}
#login .theme-row .osel>button.osel-btn.osel-btn,#login .theme-row select{height:32px;font-size:13px}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:4px}.logo-lockup{margin:0;line-height:0}.logo-lockup img{height:56px;width:auto}
.lk-dark{display:none}:root[data-theme="dark"] .lk-light{display:none}:root[data-theme="dark"] .lk-dark{display:inline-flex;align-items:center;gap:10px;line-height:1}.lk-dark .mark-svg{width:44px;height:44px;border-radius:11px}.lk-dark .wm{font-size:30px}
#login .theme-row button{width:auto}
#login .prod{color:var(--mut);font-size:13.5px;font-weight:600}
.login-brand h1{font-size:22px;margin:0;line-height:1.1}.login-brand .prod{color:var(--mut);font-size:13px}.login-brand .pill{margin-left:auto}
#login .sub{color:var(--mut);font-size:13.5px;margin:10px 0 18px}#login .err{font-size:13.5px;margin:0 0 12px}
#login button[type=submit]{height:42px;font-size:15px}
.login-foot{color:var(--mut);font-size:12.5px;text-align:center;margin:16px 0 0}

/* ─── ORDERS BOARD ────────────────────────────────────────────────────────── */
body.is-board #main{max-width:none}
.bhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.bh-l{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.bh-l h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.4px}
.bh-r{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.live{display:inline-flex;align-items:center;gap:2px;font-size:12.5px;color:var(--ok);font-weight:600;height:var(--h);padding:0 6px}
.live.off{color:var(--bad)}.live.off .live-dot{background:var(--bad);animation:none}
.aa{display:inline-flex;align-items:center;gap:6px;height:var(--h);padding:0 12px;border-radius:8px;border:1px dashed var(--line2);color:var(--mut);font-size:13px}
.aa.on{border-style:solid;border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
button[data-sound-toggle].off{color:var(--bad);border-color:var(--bad-line)}
.nalert{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:12px 16px;border-radius:12px;border:2px solid var(--bad);background:var(--bad-bg);color:var(--txt);font-size:15px;animation:nal 1s infinite}
.nalert[hidden]{display:none}.nalert svg.i{color:var(--bad);width:22px;height:22px}.nalert b{font-size:16px}.nalert button{margin-left:auto}
@keyframes nal{50%{border-color:var(--warn-strong)}}
@media (prefers-reduced-motion:reduce){.nalert{animation:none}}

details.sched{margin:0 0 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
details.sched[hidden]{display:none}
details.sched summary{cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:650;list-style:none}details.sched summary::-webkit-details-marker{display:none}
details.sched .cnt{margin-left:0}
.bcards.row-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:12px}

.btabs{display:none}
.board{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);gap:12px;align-items:start;min-height:calc(100vh - 210px)}
.bcol{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:10px;min-width:0;min-height:100%}
.bcol h4{display:flex;align-items:center;gap:8px;margin:2px 4px 10px;font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);font-weight:700}
.bcol h4 .cnt{margin-left:auto;font-size:12px;line-height:20px;padding:0 8px}
.bcol.c-new{border-color:var(--acc-line);background:linear-gradient(var(--acc-bg),var(--acc-bg)),var(--card2)}
body.alerting .bcol.c-new{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad) inset}
.bcards{display:flex;flex-direction:column;gap:10px}
.bempty{color:var(--mut);font-size:13px;text-align:center;padding:22px 8px;margin:0;border:1px dashed var(--line);border-radius:10px}.bempty[hidden]{display:none}
.slot.fresh>.oc{animation:fresh .9s ease-out}@keyframes fresh{from{transform:scale(.97);box-shadow:0 0 0 3px var(--acc)}to{transform:none}}

/* the order card: big and readable */
.oc{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line2);border-radius:12px;padding:12px 13px;font-size:14.5px;display:flex;flex-direction:column;gap:8px}
.oc.s-placed{border-left-color:var(--bad)}.oc.s-confirmed,.oc.s-preparing{border-left-color:var(--warn-strong)}.oc.s-ready{border-left-color:var(--ok)}.oc.s-dispatched{border-left-color:var(--acc)}
.oc.s-concluded{border-left-color:var(--ok)}.oc.s-cancelled{border-left-color:var(--bad-line);opacity:.8}
.oc-h{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap}
.oc .code{white-space:nowrap;font-size:18px;font-weight:800;letter-spacing:.3px;color:var(--txt);font-variant-numeric:tabular-nums}
.ful{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--mut);padding:2px 8px;border-radius:12px;background:var(--hover-btn)}.ful svg.i{width:14px;height:14px}
.ful.pickup{color:var(--acc);background:var(--acc-bg)}
.tm{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-weight:750;font-size:15px;font-variant-numeric:tabular-nums;padding:3px 9px;border-radius:8px;color:var(--mut);background:var(--hover-btn)}
.tm svg.i{width:14px;height:14px}
.tm.ok{color:var(--ok);background:var(--ok-bg)}.tm.warn{color:var(--warn-strong);background:var(--warn-bg)}.tm.bad{color:#fff;background:var(--bad);animation:p 1s infinite}
.oc-who{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;color:var(--mut);font-size:13px}.oc-who b{color:var(--txt);font-size:16px}
.oc-meta{display:flex;flex-wrap:wrap;gap:2px 10px;color:var(--mut);font-size:12.5px;margin-top:-4px}
.oc-sched,.oc-addr{font-size:13px;color:var(--mut);display:flex;gap:6px;align-items:center}.oc-sched{color:var(--acc);font-weight:600}
ul.oc-items{list-style:none;margin:0;padding:8px 0 0;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:7px}
ul.oc-items>li{display:flex;gap:8px;align-items:flex-start}
ul.oc-items .q{font-weight:800;min-width:26px;color:var(--acc);font-variant-numeric:tabular-nums}
ul.oc-items .n{font-weight:600}
ul.oc-items>li>div{flex:1;min-width:0}
ul.opts{list-style:none;margin:2px 0 0;padding:0;font-size:13px;color:var(--mut)}ul.opts li::before{content:"+ "}ul.opts i{font-style:normal;opacity:.7;margin-left:6px;font-size:11.5px}ul.opts em{font-style:normal;margin-left:6px}
.inote,.onote,.cutl{margin:4px 0 0;font-size:13px;display:flex;gap:6px;align-items:flex-start;font-weight:600;color:var(--warn-strong)}
.onote{padding:7px 9px;border-radius:8px;background:var(--warn-bg);margin:0}.cutl{color:var(--mut);font-weight:500;margin:0}
.inote svg.i,.onote svg.i{flex:none;margin-top:2px;width:14px;height:14px}
.oc-money{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.oc-money .tot{font-size:17px;font-variant-numeric:tabular-nums}
.oc-f{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.act-f{display:block;margin:0}.act-f button{width:100%;justify-content:center}
button.big{height:46px;font-size:15.5px;border-radius:10px}
.waitc{display:flex;align-items:center;gap:8px;justify-content:center;height:46px;border-radius:10px;border:1px dashed var(--line2);color:var(--mut);font-size:13.5px;text-align:center;padding:0 8px}
.oc-tools{display:flex;gap:6px;justify-content:flex-end}
a.ib{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;border:1px solid var(--line);color:var(--txt);background:var(--card);text-decoration:none!important}
a.ib:hover{border-color:var(--line2)}a.ib.wa{color:var(--wa)}a.ib.bad{color:var(--bad)}a.ib svg.i{width:18px;height:18px}
.oc.mini{padding:9px 11px;gap:4px;font-size:13px}.oc.mini .oc-h{flex-wrap:wrap;gap:4px 6px}.oc.mini .code{font-size:14.5px}.oc.mini .tm{font-size:12px;font-weight:600;padding:1px 6px}.oc.mini .oc-who b{font-size:13.5px}
.oc.mini .oc-who span{white-space:normal}.oc.mini .tot{font-size:14px}

/* order detail */
.dhead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px}.dhead h3{margin:0;font-size:24px;font-weight:750;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dhead .sub2{color:var(--mut);font-size:13.5px;margin-top:4px}.dhead .act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}.dhead .act .act-f button{width:auto}
.dgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}.dgrid.wide{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);margin-top:16px}
.dcol{display:flex;flex-direction:column;gap:16px;min-width:0}
ul.oc-items.big{font-size:15px}ul.oc-items.big .p{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.sums{margin-top:12px}.sums td.n{text-align:right}
.paybox{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.brk-h{display:flex;align-items:center;gap:8px}.brk-h h4{margin:0}.brk-h .pill{margin-left:auto}
.brk-you{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:14px 0 10px;padding:14px;border-radius:10px;background:var(--ok-bg);border:1px solid var(--ok)}
.brk-you span{font-weight:600}.brk-you b{font-size:26px;color:var(--ok);font-variant-numeric:tabular-nums}
.brk-t td.n{text-align:right;white-space:nowrap}
ol.tl{list-style:none;margin:0;padding:0;position:relative}ol.tl::before{content:"";position:absolute;left:52px;top:6px;bottom:6px;border-left:2px solid var(--line)}
ol.tl li{display:flex;gap:16px;padding:5px 0;align-items:baseline;position:relative}
ol.tl li::before{content:"";position:absolute;left:48px;top:11px;width:10px;height:10px;border-radius:50%;background:var(--line2)}
ol.tl li.s-concluded::before,ol.tl li.s-ready::before{background:var(--ok)}ol.tl li.s-cancelled::before{background:var(--bad)}ol.tl li.s-placed::before{background:var(--acc)}
.tl-t{width:40px;flex:none;color:var(--mut);font-size:12.5px;font-variant-numeric:tabular-nums}.tl-d{padding-left:14px}.tl-d small{display:block;color:var(--mut)}
.eta-f{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.eta-f label.ff{width:110px}.eta-f input{width:100%}
.chat .msgs{display:flex;flex-direction:column;gap:8px;max-height:320px;min-height:90px;overflow-y:auto;padding:4px 2px 10px}
.msg{display:flex;flex-direction:column;max-width:82%}.msg.me{align-self:flex-end;align-items:flex-end}
.bubble{padding:8px 12px;border-radius:12px;background:var(--hover-btn);white-space:pre-wrap;overflow-wrap:anywhere}.msg.me .bubble{background:var(--acc);color:var(--on-acc)}
.msg small{color:var(--mut);font-size:11px;margin-top:2px}
.chat-f{display:flex;gap:8px;margin-top:6px}.chat-f input{flex:1;min-width:0}
.chat>a.btn{margin-top:10px;width:100%}

/* dashboard */
.kpis.k6{grid-template-columns:repeat(6,minmax(0,1fr))}.kpis.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi .v{font-variant-numeric:tabular-nums}.kpi .v.bad{color:var(--bad)}.kpi .v.ok{color:var(--ok)}.kpi .v.warn{color:var(--warn)}
.chartwrap{width:100%}svg.dchart{display:block;width:100%;height:240px}
svg.dchart .bar{fill:var(--bar);opacity:.85}svg.dchart .bar:hover{opacity:1}svg.dchart .base{stroke:var(--line)}
svg.dchart .line{fill:none;stroke:var(--txt);stroke-width:2;opacity:.75}svg.dchart .pt{fill:var(--card);stroke:var(--txt);stroke-width:1.5}
svg.dchart .ax{fill:var(--mut);font-size:11px}
.legend{display:flex;gap:16px;justify-content:flex-end;font-size:12px;color:var(--mut);margin-top:6px}.legend span{display:inline-flex;align-items:center;gap:6px}
.lg-bar{width:12px;height:10px;border-radius:2px;background:var(--bar)}.lg-line{width:14px;height:2px;background:var(--txt)}
ol.top{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.top-n{display:flex;justify-content:space-between;gap:10px;font-size:14px}.top-n span{min-width:0}
svg.top-b{display:block;width:100%;height:6px;margin:4px 0 2px}svg.top-b .bg,.rv-bar svg .bg{fill:var(--line)}svg.top-b .fg,.rv-bar svg .fg{fill:var(--acc)}
ol.top small{color:var(--mut);font-size:12px}
.stctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
button.switch{background:var(--card);color:var(--bad);border:1px solid var(--bad-line);gap:9px;padding:0 14px 0 6px;font-weight:650}
button.switch .knob{width:36px;height:22px;border-radius:11px;background:var(--line2);position:relative;transition:background .15s}
button.switch .knob::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
button.switch.on{color:var(--ok);border-color:var(--ok)}button.switch.on .knob{background:var(--ok)}button.switch.on .knob::after{left:17px}
.pause-q{gap:8px}.pause-q .osel{width:110px}

/* store */
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.hday{border:1px solid var(--line);border-radius:10px;padding:10px 12px}.hday-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}.hday-h button{margin-left:auto}
.hrow{display:flex;gap:8px;align-items:center;margin-bottom:8px}.hrow input{flex:1;min-width:0}
.hclosed{margin:0}.hday:has([data-rows] .hrow) .hclosed{display:none}
.rrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 38px;gap:10px;align-items:end;margin-bottom:10px}.rrow input{width:100%}
.chipb.on{border-color:var(--acc);color:var(--acc)}
.form .chips{margin-bottom:14px}

/* menu */
.mcat{margin-bottom:14px}.mcat.off{opacity:.75}
.mcat-h{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:10px}.mcat-h h4{margin:0 0 2px}.mcat-h .act{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
ul.mitems{list-style:none;margin:0;padding:0}
li.mi{display:flex;align-items:center;gap:12px;padding:10px 4px;border-top:1px solid var(--line)}li.mi.off .mi-m b{color:var(--mut)}
.thumb{width:56px;height:56px;border-radius:10px;background:var(--card2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;color:var(--mut)}.thumb img{width:100%;height:100%;object-fit:cover}
.mi-m{flex:1;min-width:0}.mi-m b{color:var(--txt);font-size:15px}.mi-m .s2{max-width:640px}
.mi-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:5px}
.price{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:15px}.price s{color:var(--mut);font-size:12.5px}
.mi-a{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:470px}
.mv{display:inline-flex;gap:4px}.mvph{display:inline-block;width:30px}
.mv button{width:30px;padding:0;justify-content:center}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
ul.olist{list-style:none;margin:0;padding:0}ul.olist li{display:flex;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:14px}ul.olist li span:first-child{flex:1}ul.olist li.off{opacity:.6}
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
label.chk.gopt{border:1px solid var(--line);border-radius:10px;padding:10px 12px}label.chk.gopt:has(input:checked){border-color:var(--acc);background:var(--acc-bg)}
.egrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}.egrid>form{display:flex;flex-direction:column;gap:16px;min-width:0}
.egrid>form>.ffoot{margin-top:0;padding-top:0}
.preview{position:sticky;top:0}.pv-h{display:flex;align-items:center;gap:8px;font-weight:650;margin-bottom:12px;color:var(--mut);font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.pv-phone{border:1px solid var(--line2);border-radius:20px;overflow:hidden;background:var(--bg)}
.pv-img{height:170px;background:var(--card2);display:flex;align-items:center;justify-content:center;color:var(--mut)}.pv-img img{width:100%;height:100%;object-fit:cover}.pv-img svg.i{width:40px;height:40px}
.pv-b{padding:14px}.pv-b h5{margin:0 0 4px;font-size:18px;font-weight:700;overflow-wrap:anywhere}.pv-b p{margin:0 0 8px;color:var(--mut);font-size:13.5px;overflow-wrap:anywhere}
.pv-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}.pvt{font-size:11px;padding:1px 7px;border-radius:9px;background:var(--hover-btn);color:var(--mut)}
.pv-price{font-size:17px;margin-bottom:10px}.pv-price s{color:var(--mut);font-size:13px;margin-right:4px}.pv-price .promo{color:var(--ok)}
.pvg{border-top:1px solid var(--line);padding:9px 0}.pvg-h{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:5px;font-size:13.5px}
.pvg-r{font-size:10.5px;padding:1px 7px;border-radius:8px;background:var(--hover-btn);color:var(--mut);white-space:nowrap}.pvg-r.req{background:var(--txt);color:var(--bg)}
.pvo{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0}.pvo-n{flex:1}.pvo-p{color:var(--mut)}.pvo.more{color:var(--mut);padding-left:22px}
.pvo-c{width:14px;height:14px;border-radius:50%;border:2px solid var(--line2);flex:none}.pvo-c.sq{border-radius:4px}
.pv-add{display:flex;gap:10px;align-items:center;margin-top:12px}.pv-qty{border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-weight:700;white-space:nowrap}
.pv-btn{flex:1;text-align:center;background:var(--acc);color:var(--on-acc);border-radius:9px;padding:9px 10px;font-weight:700;font-size:14px}

/* reviews */
.rv-top{display:grid;grid-template-columns:220px minmax(0,1fr) 220px;gap:16px;margin-bottom:16px}
.rv-score{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.rv-score b{font-size:40px;line-height:1}.rv-score .stars{font-size:18px}
.rv-dist{display:flex;flex-direction:column;gap:6px;justify-content:center}
.rv-bar{display:grid;grid-template-columns:30px 1fr 34px;gap:10px;align-items:center;color:var(--txt);text-decoration:none!important;font-size:13px}.rv-bar svg{width:100%;height:8px}.rv-bar b{text-align:right;font-variant-numeric:tabular-nums}
.rv-un{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.rv-un .l{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.5px}.rv-un b{font-size:32px}.rv-un b.warn{color:var(--warn)}
.rv-list{display:flex;flex-direction:column;gap:12px}
.rv header{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.rv header>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.rv header>.pill,.rv header>a.btn{margin-left:auto}
.rv-c{margin:10px 0 6px;font-size:15px;overflow-wrap:anywhere}
.rv-reply{margin-top:10px;padding:10px 12px;border-left:3px solid var(--acc);background:var(--acc-bg);border-radius:0 8px 8px 0}.rv-reply p{margin:4px 0}

/* marketing / support / settings */
.pick{margin-bottom:12px}.pick>b{display:block;margin-bottom:6px;font-size:13px}
.faq{display:grid;gap:10px}.faq details summary{cursor:pointer}.faq details p{margin:10px 0 0;color:var(--mut)}
.msgs.static{max-height:none}

/* ─── responsive ───────────────────────────────────────────────────────────── */
@media(max-width:1360px){.kpis.k6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1300px){
  /* tablet: the board scrolls sideways — light and smooth, columns snap (house rule for kanban) */
  .board{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .bcol{flex:0 0 300px;scroll-snap-align:start}.bcol.c-new{flex-basis:330px}.bcol.c-done{flex-basis:250px}
  .egrid{grid-template-columns:minmax(0,1fr) 320px}
}
@media(max-width:1100px){.dgrid,.dgrid.wide{grid-template-columns:minmax(0,1fr)}.rv-top{grid-template-columns:1fr 1fr}.rv-dist{grid-column:1/-1;order:3}.egrid{grid-template-columns:minmax(0,1fr)}.preview{position:static}}
@media(max-width:820px){
  .body{padding:12px}
  .topbar{gap:8px}.topbar .crumb{flex:1}.stchip span:not(.dot){display:none}.stchip{padding:0 9px}
  .mswitch .osel{min-width:0;max-width:150px}.topbar form.lang{display:none}
  .kpis.k4,.kpis.k6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .cab .act{margin-left:0;justify-content:flex-start;width:100%}
  .filters .fact{width:100%;justify-content:flex-end}
  .filters label.ff{flex:1 1 140px;min-width:0}
  #main td,#main .s2,#main b{overflow-wrap:anywhere}
  .rrow{grid-template-columns:repeat(2,minmax(0,1fr)) 38px}.rrow label:nth-child(3){grid-column:1}
  /* phone board: one column at a time, chosen in the tab row (counts on each) */
  .btabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
  .btabs button{flex:1 1 auto;height:36px;padding:0 10px;font-size:13px;gap:6px}.btabs button .cnt{margin-left:2px}
  .btabs button.on{border-color:var(--acc);color:var(--acc);background:var(--acc-bg)}
  .board{display:block;overflow:visible;min-height:0}
  .bcol{display:none;min-height:0}
  .board[data-active-col="new"] .c-new,.board[data-active-col="preparing"] .c-preparing,.board[data-active-col="ready"] .c-ready,.board[data-active-col="delivery"] .c-delivery,.board[data-active-col="done"] .c-done{display:block}
  .bhead .bh-r{margin-left:0;justify-content:flex-start}
  .rv-top{grid-template-columns:1fr}
}
@media(max-width:640px){
  table.stk,table.stk tbody,table.stk tr,table.stk td{display:block;width:100%}
  table.stk tr.stk-h{display:none}
  table.stk tr{padding:8px 4px;border-bottom:1px solid var(--line)}table.stk tr:last-child{border-bottom:0}
  table.stk td{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:3px 8px;border:0;text-align:right;white-space:normal;min-width:0;overflow-wrap:anywhere}
  table.stk td[data-label]::before{content:attr(data-label);flex:0 0 38%;max-width:38%;text-align:left;color:var(--mut);font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;padding-top:2px}
  table.stk td:not([data-label]){justify-content:flex-end}
  table.stk td.wrap{min-width:0}
  table.stk td>*{min-width:0}
  li.mi{flex-wrap:wrap}.mi-m{flex:1 1 calc(100% - 80px)}.mi-a{max-width:none;width:100%;justify-content:flex-start}.price{margin-left:68px}
  .filters{padding:10px}
  .dhead .act{margin-left:0;justify-content:flex-start}
  .eta-f label.ff{flex:1}
  .ffoot{justify-content:flex-end}
}
@media print{.noprint{display:none!important}}

/* own delivery: the restaurant marks "out for delivery" and "delivered" — big, unmissable */
button.big.own{height:54px;font-size:17px;font-weight:750;letter-spacing:.2px}
button.big.own.dispatch{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.autoc{margin:0;padding:8px 10px;border-radius:8px;background:var(--acc-bg);border:1px dashed var(--acc-line);font-size:12.5px;color:var(--txt);display:flex;gap:6px;align-items:flex-start}
.autoc svg.i{flex:none;margin-top:2px;width:14px;height:14px;color:var(--acc)}