:root{
  --bg:#14100c; --panel:#1f1811; --panel2:#2a2016; --line:#3d2f1e;
  --gold:#f5a623; --gold2:#ffc95e; --ink:#f7ead2; --dim:#b8a684;
  --green:#37c978; --red:#e5534b; --amber:#f0b429; --blue:#58a6ff;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; overscroll-behavior:none}
button{font:inherit;color:inherit;background:var(--panel2);border:1px solid var(--line);
  border-radius:12px;padding:12px 16px;cursor:pointer;min-height:52px}
button:active{transform:scale(.98)}
button.gold{background:var(--gold);color:#1c1206;border-color:var(--gold);font-weight:700}
button.green{background:var(--green);color:#06280f;border-color:var(--green);font-weight:700}
button.red{background:var(--red);color:#fff;border-color:var(--red);font-weight:700}
button.ghost{background:transparent}
button:disabled{opacity:.45}
input,select,textarea{font:inherit;color:var(--ink);background:#100c08;border:1px solid var(--line);
  border-radius:10px;padding:12px;min-height:52px;width:100%}
h1,h2,h3{margin:.2em 0}
.small{font-size:.82em;color:var(--dim)}
.dim{color:var(--dim)}
.big{font-size:1.25em;font-weight:700}
.money{font-variant-numeric:tabular-nums;white-space:nowrap}

/* top bar */
.topbar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#0d0a07;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.topbar .clock{font-size:1.3em;font-weight:800}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.85em}
.chip.offline-chip{background:var(--red,#c0392b);border-color:var(--red,#c0392b);color:#fff;font-weight:700}
.chip.sync-chip{border-color:var(--gold);color:var(--gold);font-weight:700}
.mgr-badge{margin-left:auto;background:#241a08;border:2px solid var(--gold);color:var(--gold);
  font-weight:800;border-radius:999px;padding:10px 18px;letter-spacing:.5px;user-select:none;touch-action:none}
.banner{background:#3a2a05;color:var(--gold2);text-align:center;padding:8px 12px;font-size:.92em;border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:8px;background:#0d0a07;border-bottom:1px solid var(--line)}
.tabs button{white-space:nowrap;flex:1}
.tabs button.on{background:var(--gold);color:#1c1206;border-color:var(--gold);font-weight:700}
.tabs.phone{display:none}
.wrap{padding:12px;max-width:1400px;margin:0 auto}
.moresheet{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.moresheet button{min-height:72px;font-size:1.05em}
.moresheet button.on{background:var(--gold);color:#1c1206;border-color:var(--gold);font-weight:700}
/* phones: slim top bar; the tab bar sits at the bottom of the screen in
   thumb reach (Counter, Orders, Members, More), icons over labels */
@media(max-width:700px){
  .topbar{gap:8px;padding:6px 10px}
  .topbar .clock{font-size:1.1em}
  .topbar .chip.shopname{display:none}
  .topbar .chip{padding:5px 10px;white-space:nowrap}
  .mgr-badge{padding:8px 12px;font-size:.8em;white-space:nowrap}
  .tabs.full{display:none}
  .tabs.phone{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:fixed;left:0;right:0;bottom:0;z-index:55;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(13,10,7,.95);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.06);border-bottom:0}
  .tabs.phone button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:4px 2px;
    font-size:.78em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent;box-shadow:none;border:0;border-radius:14px;color:var(--dim)}
  .tabs.phone button .ti{font-size:1.5em;line-height:1}
  .tabs.phone button .tl{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .tabs.phone button.on{background:rgba(245,166,35,.15);color:var(--gold2);font-weight:800}
  .wrap{padding:10px 8px calc(84px + env(safe-area-inset-bottom))}
}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
.row{display:flex;gap:10px;align-items:center}
.row.wrap2{flex-wrap:wrap}
.grow{flex:1}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
/* menu buttons (phones): name and price only, no empty picture box; a
   button with a real photo shows it on top. iPads: see Counter layout. */
.tile{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:10px;min-height:72px;
  display:flex;flex-direction:column;justify-content:space-between;gap:6px;text-align:left}
.tile .nm{font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.tile .pr{color:var(--gold2);font-weight:700}
.tile .ph{display:block;height:64px;border-radius:8px;overflow:hidden;background:#3a2b1a}
.tile .ph img{display:block;width:100%;height:100%;object-fit:cover}
.tile .ph.none{display:none}
.tile .tbot{display:flex;align-items:center;gap:8px}
.tile .addbtn{display:none}
.deptbar{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px}
.deptbar button{white-space:nowrap}
.deptbar button.on{background:var(--gold);color:#1c1206;border-color:var(--gold);font-weight:700}

/* counter: menu left, ticket right — on a counter iPad in portrait too */
.poslayout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:12px;align-items:start}
.posmenu{min-width:0}
.deptbar{scroll-padding:0 24px;-webkit-overflow-scrolling:touch}
.ticket{position:sticky;top:78px;display:flex;flex-direction:column;gap:8px;margin-bottom:0;
  max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px)}
.ticket .tlines{flex:1 1 auto;min-height:96px;overflow-y:auto;overscroll-behavior:contain;margin:0 -4px;padding:0 4px}
.ticket .tfoot{flex:0 0 auto;border-top:1px solid var(--line);padding-top:6px}
.ticket .tmember input{min-height:48px}
/* under CASH and CARD: More (tip, discount, clear) and the other ways to pay */
.tactions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.tactions button{padding:8px 6px;font-size:.9em;min-height:48px}
.ticketbar{display:none}
/* iPad portrait (744–1100 wide): narrower ticket, tighter tiles, still side by side */
@media(max-width:1100px){
  .poslayout{grid-template-columns:minmax(0,1fr) 340px}
  .poslayout .grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
  .poslayout .tile{min-height:64px;padding:8px}
}
.tclose,.drawer-back{display:none}
/* phones (700px and under): the menu fills the screen; a bar fixed at the
   bottom always shows the total and Pay; tapping it slides the ticket up
   over the menu with CASH and CARD at the bottom, in thumb reach */
@media(max-width:700px){
  .poslayout{grid-template-columns:1fr;padding-bottom:66px}
  .poslayout .grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .poslayout .ticket{display:none}
  .poslayout.drawer-open .ticket{display:flex;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:80;
    height:92vh;height:92dvh;max-height:none;margin:0;border-radius:18px 18px 0 0;
    padding-bottom:calc(12px + env(safe-area-inset-bottom));animation:slideup .18s ease-out}
  .poslayout.drawer-open .drawer-back{display:block;position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.6)}
  .tclose{display:block;width:100%;min-height:44px;padding:6px;background:transparent;border:0;color:var(--dim);font-weight:700}
  .ticketbar{display:flex;align-items:center;gap:10px;position:fixed;left:10px;right:10px;
    bottom:calc(78px + env(safe-area-inset-bottom));z-index:50;min-height:60px;padding:8px 16px;
    background:linear-gradient(180deg,#ffb83d,#f5a623);color:#1c1206;border-color:transparent;font-weight:700;border-radius:18px;
    box-shadow:0 8px 22px rgba(0,0,0,.45)}
  .ticketbar .tb-total{font-size:1.25em;margin-left:auto}
  .ticketbar .tb-pay{background:#1c1206;color:var(--gold);border-radius:10px;padding:8px 14px}
  .poslayout.drawer-open .ticketbar{display:none}
}
@keyframes slideup{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
/* ticket line: name and price on top, controls under them — the item
   name always gets the full width, even in a narrow ticket */
.cartline{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "ctl ctl";
  gap:4px 8px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;background:#171208}
.cartline .lname{grid-area:name;min-width:0;overflow-wrap:anywhere}
.cartline .lprice{grid-area:price;text-align:right;font-weight:700;align-self:start}
.cartline .lctl{grid-area:ctl;display:flex;gap:8px;align-items:center;justify-content:flex-end}
.cartline .lctl button{min-height:44px;padding:8px 12px}
.cartline .lctl .stepper{margin-right:auto}
/* wide counters (over 1100px): one row per line */
@media(min-width:1101px){
  .cartline{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"name ctl price"}
  .cartline .lctl .stepper{margin-right:0}
  .cartline .lprice{min-width:70px;align-self:center}
}
.cartline.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:44px;height:44px;min-height:44px;padding:0;font-size:1.2em;font-weight:800}
.stepper .n{min-width:28px;text-align:center;font-weight:800}
.modrow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line)}
.modpanel{border:1px solid var(--gold);border-radius:10px;padding:8px 10px;margin:-2px 0 8px;background:#1b140b}
.modpanel .modrow:last-child{border-bottom:0}
.totals div{display:flex;justify-content:space-between;padding:3px 0}
.totals .grand{font-size:1.3em;font-weight:800;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.payrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.payrow button{min-height:64px;font-size:1.1em}
.padhint{margin:4px 0 0}
.quick button.exact{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.salesbtn{margin-left:8px;min-height:40px;padding:6px 12px;font-size:.9em;white-space:nowrap}
.paymorelist{display:grid;gap:10px;margin:10px 0}
.paymorelist button{min-height:64px;text-align:left;padding:10px 14px}
.sfchips{gap:6px;margin:8px 0}
.sfchips button{min-height:40px;padding:6px 12px;font-size:.9em}
/* Owner reports (HQ) */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{min-height:44px;padding:6px 12px}
.report h3{font-size:1em}
.hbar{display:flex;align-items:center;gap:8px;padding:3px 0}
.hbar span{width:56px;flex:none;font-size:.85em;color:var(--dim,#b9a98a)}
.htrack{flex:1;height:14px;background:#171208;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.htrack i{display:block;height:100%;background:var(--gold)}
.hbar b{min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
.sflist{max-height:58vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sfrow{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;background:#171208}
.sfrow.refunded{border-color:var(--red)}
.paybadges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.paybadge{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:.85em;background:var(--panel2);white-space:nowrap}
.paybadge.pb-cash{border-color:var(--green)}
.paybadge.pb-card{border-color:var(--gold)}
.paybadge.pb-gift{border-color:var(--amber)}
.paybadge.pb-online{border-color:var(--blue)}

/* kitchen */
.kcols{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media(max-width:800px){.kcols{grid-template-columns:1fr}}
.tkt{background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--gold);border-radius:12px;padding:12px;margin-bottom:10px}
.tkt.prep{border-left-color:var(--blue)}
.tkt .num{font-size:1.5em;font-weight:900}
.tkt .cust{font-size:1.2em;font-weight:800}
.tkt.flash{animation:flash 1s ease-in-out 3}
@keyframes flash{50%{background:#4a3608}}
.badge{display:inline-block;border-radius:8px;padding:3px 9px;font-size:.8em;font-weight:800;background:var(--panel2);border:1px solid var(--line)}
.badge.paid{background:var(--green);color:#06280f;border-color:var(--green)}
.badge.deliv{background:#7a2d8e;color:#fff;border-color:#7a2d8e}
.badge.offline{background:var(--red,#c0392b);color:#fff;border-color:var(--red,#c0392b);font-weight:700}
.offline-note{color:var(--red,#c0392b);font-weight:700;margin-top:4px}
.badge.chan{background:#233a56;color:#bcd7ff;border-color:#233a56}
.timer{font-weight:900;font-variant-numeric:tabular-nums}
.timer.warn{color:var(--amber)} .timer.late{color:var(--red)}
.strip{display:flex;gap:8px;overflow-x:auto;padding:6px 0}
.strip .done-tkt{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;white-space:nowrap}

/* setup + pads */
.centerbox{max-width:560px;margin:6vh auto;padding:16px}
.rolebtn{display:block;width:100%;text-align:left;margin-bottom:10px;padding:18px;font-size:1.1em}
.pinpad{display:grid;grid-template-columns:repeat(3,84px);gap:10px;justify-content:center;margin:14px auto}
.pinpad button{height:64px;font-size:1.4em;font-weight:800;border-radius:50%}
.dots{display:flex;gap:10px;justify-content:center;margin:10px}
.dots span{width:16px;height:16px;border-radius:50%;border:2px solid var(--dim)}
.dots span.f{background:var(--gold);border-color:var(--gold)}
.pattern{display:grid;grid-template-columns:repeat(3,72px);gap:22px;justify-content:center;margin:18px auto;touch-action:none}
.pattern .dot{width:34px;height:34px;border-radius:50%;border:3px solid var(--dim);margin:auto;background:#0d0a07}
.pattern .dot.on{background:var(--gold);border-color:var(--gold)}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:90;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:18px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;max-width:640px;width:100%}
.modal.wide{max-width:900px}

/* TK Assistant chat */
.amsg{padding:10px 12px;border-radius:12px;margin-bottom:8px;background:var(--panel2);border:1px solid var(--line);line-height:1.45}
.amsg.me{background:#233a56;border-color:#35507a;text-align:right}
.amsg div{margin:2px 0}
.fab-asst{position:fixed;right:16px;bottom:16px;z-index:60;width:60px;height:60px;border-radius:50%;border:2px solid #0c0d10;background:linear-gradient(180deg,#ffd34d,#f5b90d);font-size:28px;box-shadow:0 6px 18px rgba(0,0,0,.45);cursor:pointer}
.fab-badge{position:absolute;top:-8px;right:-8px;background:#e5534b;color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:2px 7px;border:2px solid #0c0d10}

/* employee shift slip */
.shift-slip{background:#fff;color:#171207;border-radius:12px;padding:20px;max-width:460px;margin:0 auto 12px}
.shift-slip h2,.shift-slip h3{text-align:center;margin:.15em 0}
.shift-slip p{text-align:center}
.shift-slip .small{color:#665842}
.shift-lines{border-top:2px solid #171207;border-bottom:2px solid #171207;padding:8px 0;margin-top:12px}
.shift-lines div{display:flex;justify-content:space-between;gap:14px;padding:6px 0}
@media print{
  body{background:#fff!important}
  body *{visibility:hidden!important}
  #shift-print,#shift-print *{visibility:visible!important}
  #shift-print{position:fixed!important;inset:0 auto auto 0!important;width:100%!important;max-width:none!important;margin:0!important;border-radius:0!important}
  .no-print{display:none!important}
}

/* customer screen */
.custfull{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:#0b0906}
.custfull.dim{opacity:.38}
.custfull h1{font-size:2.2em}
.custfull .total{font-size:2em;font-weight:900;color:var(--gold2)}
.custfull .bigbtn{min-width:210px;min-height:76px;font-size:1.2em;margin:6px}
.keypad{display:grid;grid-template-columns:repeat(3,84px);gap:10px;justify-content:center}
.keypad button{height:60px;font-size:1.3em;font-weight:800}

/* stock + lists */
.srow{display:flex;gap:8px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;background:#171208;flex-wrap:wrap}
.tag{font-size:.75em;font-weight:900;border-radius:6px;padding:2px 8px}
.tag.low{background:var(--amber);color:#231600}.tag.out{background:var(--red);color:#fff}.tag.ok{background:var(--green);color:#06280f}
.stampcard{display:flex;gap:6px;margin:6px 0}
.stampcard span{width:34px;height:34px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:.8em}
.stampcard span.f{background:var(--gold);color:#1c1206;font-weight:900}
table{width:100%;border-collapse:collapse}
td,th{padding:7px;border-bottom:1px solid var(--line);text-align:left}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .d{background:var(--panel2);border:1px solid var(--line);border-radius:10px;min-height:76px;padding:6px;font-size:.82em}
.cal .d.today{border-color:var(--gold)}
.cal .ev{background:#3a2a05;border-radius:6px;padding:2px 5px;margin-top:4px;color:var(--gold2)}
.cal .ev.auto{background:#233a56;color:#bcd7ff}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#06280f;color:#d8ffe6;
  border:1px solid var(--green);border-radius:12px;padding:12px 20px;z-index:200;font-weight:700;max-width:92vw;text-align:center}
.toast.err{background:#3a0d0a;color:#ffd7d2;border-color:var(--red)}
.kbd-hint{font-size:.75em;color:var(--dim)}
.seg{display:flex;gap:6px}
.seg button.on{background:var(--gold);color:#1c1206;border-color:var(--gold);font-weight:700}

/* on-screen pads: discount %, cash given, loyalty join */
.quick{gap:8px;margin:8px 0}
.quick button{flex:1 1 30%;min-height:60px;font-size:1.1em;font-weight:700}
.padval{display:block;text-align:center;font-size:2.2em;font-weight:900;font-variant-numeric:tabular-nums;margin:6px 0}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:360px;margin:8px auto}
.numpad button{min-height:64px;font-size:1.4em;font-weight:800}
.padgo{margin-top:12px}
.padgo button{min-height:64px;font-size:1.1em}
.cashgiven{text-align:center;background:#100c08;border:1px solid var(--line);border-radius:12px;padding:8px}
.padchange{display:block;font-size:1.2em;font-weight:800;color:var(--gold2)}
.changebox{text-align:center;padding:18px 0}
.changeamt{font-size:3.6em;font-weight:900;color:var(--green);font-variant-numeric:tabular-nums;line-height:1.1}
.bigin{font-size:1.4em;min-height:64px;text-align:center}

/* HQ calendar as a list on phones; wide tables scroll sideways */
.callist{display:none}
.cday{display:flex;gap:12px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;background:var(--panel2)}
.cday.today{border-color:var(--gold)}
.cdate{min-width:48px;display:flex;flex-direction:column;align-items:center}
.cdate b{font-size:1.4em;line-height:1.1}
.callist .ev{background:#3a2a05;border-radius:6px;padding:6px 8px;margin-bottom:4px;color:var(--gold2)}
.callist .ev.auto{background:#233a56;color:#bcd7ff}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll table{min-width:420px}

/* phones: pads come up from the bottom and always fit — the Take / Set
   button stays on screen; the robot sits above the counter's bottom bar
   and hides while the ticket is open */
@media(max-width:700px){
  .cal{display:none}
  .callist{display:block}
  .overlay{padding:0}
  .modal{margin-top:auto;border-radius:18px 18px 0 0;padding:12px 12px calc(12px + env(safe-area-inset-bottom));max-width:none}
  .modal h2{font-size:1.2em}
  .quick button{min-height:48px;font-size:1em;flex:1 1 28%}
  .padval{font-size:1.8em;margin:2px 0}
  .cashgiven{padding:6px}
  .numpad{gap:6px}
  .numpad button{min-height:52px;font-size:1.25em}
  .modal .padgo{position:sticky;bottom:calc(-12px - env(safe-area-inset-bottom));margin:8px -12px 0;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line)}
  .changeamt{font-size:3em}
  .fab-asst{width:48px;height:48px;font-size:22px;right:12px;bottom:calc(80px + env(safe-area-inset-bottom))}
  .fab-asst.fab-pos{bottom:calc(150px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .fab-asst.fab-hide{display:none}
}

/* counter add-ons: a picked drink's add-ons take the menu's place —
   group tabs on top, big tiles below, each with its own count */
.addon{margin-bottom:0}
.addon-head{margin-bottom:4px}
.modtabs{margin-top:4px}
.modtabs button{min-height:52px}
.modtabs .mcount{display:inline-block;min-width:22px;border-radius:999px;padding:0 7px;margin-left:4px;font-size:.85em;
  background:var(--gold);color:#1c1206;font-weight:800}
.modtabs button.on .mcount{background:#1c1206;color:var(--gold)}
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.modtile{display:flex;flex-direction:column;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:8px;min-width:0}
.modtile.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);background:#2a1f0c}
.modtile .mt-add{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:6px;
  min-height:72px;padding:6px;text-align:left;background:transparent;border:0;width:100%}
.modtile .mt-name{font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.modtile .mt-price{color:var(--gold2);font-weight:700}
.modtile .stepper{justify-content:space-between}
.modtile .stepper button{width:52px;height:48px;min-height:48px}
.modtile .stepper button[disabled]{opacity:.35}
.addon-sum{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
@media(max-width:1100px){.modgrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}}
@media(max-width:700px){
  .modgrid{grid-template-columns:1fr 1fr}
  .modtile .stepper button{width:44px}
}

/* loyalty at the pay step: counter ticket, cash pad and customer screen */
.loyadd{min-height:52px;font-weight:800;border:1px dashed var(--gold);background:transparent;color:var(--gold2)}
.tloynote{margin:2px 0 4px;color:var(--gold2)}
.padloy{align-items:center;gap:8px;margin:4px 0 8px;padding:8px 10px;border:1px solid var(--gold);border-radius:12px;background:#2a1f0c}
.padloy button{min-height:52px;white-space:nowrap}
.custloy{margin:12px 0;padding:12px 16px;border:2px solid var(--gold);border-radius:16px;background:#2a1f0c;font-size:1.15em;text-align:center}
.custloy .bigbtn{margin-top:8px}
.custfull .stampcard{justify-content:center}

/* manager door: one button in the tab strip — 🔒 Manager (Face ID) or 🔓 Lock */
.doorbtn{margin-left:auto;min-height:48px;font-weight:800;border:1px dashed var(--gold);background:transparent;color:var(--gold2);white-space:nowrap}
.doorbtn.open{border-style:solid;background:#2a1f0c}
.moresheet .doorbtn{margin-left:0;width:100%}
.idleseg{flex-wrap:wrap}
.idleseg button{min-height:48px;min-width:72px}
.tabs .doorbtn{flex:0 0 auto}

/* owner phone: today's money at a glance */
.owner{max-width:760px}
.olive{font-size:.85em;font-weight:700;color:var(--green);margin:2px 2px 8px}
.olive.stale{color:var(--amber)}
.owner .banner{border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
.ostale{opacity:.55}
.ohero{text-align:center;padding:18px 14px}
.obig{font-size:2.6em;font-weight:900;color:var(--gold2);line-height:1.1;margin:6px 0}
.obar{margin:10px 0}
.otrack{height:8px;border-radius:999px;background:var(--panel2);overflow:hidden;margin-top:4px}
.otrack span{display:block;height:100%;background:var(--gold);border-radius:999px}
.ogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ostat{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.ostat b{font-size:1.35em}
.owner [data-otab]{min-height:48px}
.ownerlock{text-align:center}
.ownerlock .gold.big{min-height:64px;margin:14px 0}
.offline{text-align:center}
.offline img{border-radius:22px;margin-bottom:8px}
@media(max-width:760px){.ogrid{grid-template-columns:1fr 1fr}}

/* phones: the back office (HQ, Menu, Stock, Team) stacks instead of
   squeezing tablet rows — fields two to a line or full width, nothing
   wider than the screen, buttons big enough for a thumb */
@media(max-width:700px){
  .wrap .card{padding:12px}
  .wrap .row.wrap2 > input:not([type=checkbox]),
  .wrap .row.wrap2 > select{flex:1 1 calc(50% - 5px);max-width:none!important;min-width:0}
  .wrap .row.wrap2 > input.grow{flex-basis:100%}
  .wrap .row.wrap2 > button{flex:1 1 auto}
  .wrap .card > .row{flex-wrap:wrap}
  .wrap .card > .row > input.grow{flex-basis:100%}
  .wrap .card > .row > input.grow + button{flex:1 1 auto}
  .srow input,.srow select{max-width:none!important;flex:1 1 120px;min-width:0}
  .srow button{min-height:44px}
  .srow .grow{min-width:55%}
  .seg{overflow-x:auto}
  .seg button{flex:1 0 auto}
  .totals div{gap:10px}
  .totals div span:first-child{min-width:0}
  .totals .money button{min-height:36px;padding:4px 10px}
  .wrap .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  h2{font-size:1.3em}
}

/* ---------- Inventory & Ordering ---------- */
.viewseg{margin-bottom:12px;flex-wrap:wrap}
.tag.po-draft{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}
.tag.po-ordered{background:var(--blue);color:#06182e}
.tag.po-received{background:var(--green);color:#06280f}
.tag.po-cancelled{background:#4a3a2a;color:var(--dim)}
.porow{text-align:left;gap:10px}
.checks{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.chk{display:inline-flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-height:44px}
.chk input{width:22px;height:22px;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.chips button.on{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}

/* Sold out today: still sellable at the counter, marked so staff know. */
.tile.sold{opacity:.6}
.tile .soldtag{align-self:flex-start;background:var(--red);color:#fff;font-size:.72em;font-weight:900;border-radius:6px;padding:2px 6px;margin-top:4px}

/* ---------- Menu boards (TVs) ---------- */
/* Read across a shop from a TV: big type, high contrast, gold on dark. */
.board{min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);
  padding:2.2vw 2.6vw 1.6vw;font-size:clamp(16px,1.55vw,40px);cursor:default}
.board .bhead{display:flex;align-items:center;gap:1.4vw;border-bottom:3px solid var(--gold);padding-bottom:1vw;margin-bottom:1.4vw}
.board .bhead img{width:4.2vw;height:4.2vw;min-width:44px;min-height:44px;border-radius:18%}
.board .bshop{font-size:2.3em;font-weight:900;color:var(--gold);line-height:1.05;letter-spacing:.01em}
.board .btitle{font-size:1.15em;color:var(--gold2);font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.board .bclock{font-size:1.3em;font-weight:800;color:var(--dim)}
.board .bcols{flex:1;column-count:2;column-gap:3.4vw;column-fill:balance}
.board .bsec{break-inside:avoid;margin-bottom:1.6vw}
.board .bsec h2{margin:0 0 .45em;font-size:1.35em;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--line);padding-bottom:.2em}
.board .bitem{display:flex;align-items:baseline;gap:.5em;padding:.18em 0;font-size:1.1em;font-weight:700}
.board .bname{flex:0 1 auto}
.board .bdots{flex:1;border-bottom:2px dotted #4d3b25;transform:translateY(-.25em);min-width:1em}
.board .bprice{color:var(--gold2);font-weight:900;white-space:nowrap}
.board .bitem.out .bname{color:var(--dim);text-decoration:line-through;text-decoration-thickness:2px}
.board .bsold{background:var(--red);color:#fff;font-size:.7em;font-weight:900;border-radius:.3em;padding:.12em .45em;white-space:nowrap}
.board .bmods{font-size:.78em;color:var(--dim);margin-top:.3em;line-height:1.35}
.board .bempty{font-size:1.4em;color:var(--dim);text-align:center;margin-top:10vh}
.board .bfoot{display:flex;justify-content:space-between;gap:1em;border-top:1px solid var(--line);padding-top:.8vw;margin-top:.6vw;color:var(--dim);font-size:.9em}
.board.dense{font-size:clamp(14px,1.25vw,32px)}
.board.dense .bcols{column-count:3}
.board.xdense{font-size:clamp(12px,1vw,26px)}
.board.xdense .bcols{column-count:4}
@media (orientation:portrait){.board .bcols{column-count:1}.board.dense .bcols,.board.xdense .bcols{column-count:2}}
.board-badge{position:fixed;right:10px;bottom:10px;opacity:.25;padding:6px 10px;font-size:.8em;z-index:5}
.board-badge:hover,.board-badge:focus{opacity:1}
.bpreview{border:1px solid var(--line);border-radius:10px;overflow:hidden;max-height:70vh;overflow-y:auto}
.bpreview .board{min-height:0;font-size:13px}
.bpreview .board .bhead img{width:40px;height:40px;min-width:40px;min-height:40px}
/* AI staff desk: what the in-POS staff got ready */
.aprow{text-align:left;align-items:flex-start}
.aprow.ap-flag{border-color:var(--red)}
.aprow.ap-ready{border-color:var(--gold)}

/* ================= Modern look (v20261113.32) =================
   Soft "cloud" buttons: rounded, a soft shadow instead of a hard border,
   and a press that sinks a little and springs back. Fewer borders, pill
   departments, a bigger total. Same dark and gold. Every animation is
   under 0.2 s, and they all switch off for people who ask for less motion. */
:root{
  --soft:inset 0 1px 0 rgba(255,255,255,.05),0 2px 4px rgba(0,0,0,.28),0 8px 18px rgba(0,0,0,.2);
  --soft-press:inset 0 1px 2px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.3);
  --spring:cubic-bezier(.2,.9,.3,1.3);
}
button{border-radius:16px;border-color:rgba(255,255,255,.05);background:linear-gradient(180deg,#31261a,#281f15);box-shadow:var(--soft);
  transition:transform .14s var(--spring),box-shadow .14s ease;touch-action:manipulation;-webkit-user-select:none;user-select:none}
button:active{transform:scale(.97);box-shadow:var(--soft-press);transition-duration:.05s}
button.gold{background:linear-gradient(180deg,#ffb83d,#f5a623);border-color:transparent}
button.green{background:linear-gradient(180deg,#46d889,#33bf71);border-color:transparent}
button.red{background:linear-gradient(180deg,#ef6a62,#e04a42);border-color:transparent}
button.ghost{background:transparent;box-shadow:none;border-color:rgba(255,255,255,.09)}
button:disabled{box-shadow:none;transform:none}
input,select,textarea{border-radius:14px;border-color:rgba(255,255,255,.08)}
.topbar{border-bottom-color:rgba(255,255,255,.05)}
.tabs{border-bottom-color:rgba(255,255,255,.05);gap:8px}
.tabs button{border-radius:999px}
.card{border-color:transparent;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.24);padding:16px;margin-bottom:14px}
.srow{border-color:rgba(255,255,255,.05);border-radius:14px}
button.srow{background:#1a140c}
.chip{border-color:rgba(255,255,255,.07)}

/* menu buttons */
.grid{gap:12px}
.tile{position:relative;border-color:rgba(255,255,255,.05);border-radius:18px;padding:12px}
.tile.added{animation:tilepop .16s var(--spring)}
.tile .plus1{position:absolute;top:6px;right:8px;background:var(--gold);color:#1c1206;font-weight:900;font-size:.8em;
  border-radius:999px;padding:2px 9px;box-shadow:0 2px 6px rgba(0,0,0,.35);animation:plusup .16s ease-out}
@keyframes tilepop{from{transform:scale(.94)}to{transform:none}}
@keyframes plusup{from{transform:translateY(6px) scale(.8);opacity:0}to{transform:none;opacity:1}}

/* departments: pill buttons in a bar that stays at the top while the menu
   scrolls; swipe the menu sideways for the next or previous one */
.deptbar{gap:8px;scrollbar-width:none}
.deptbar::-webkit-scrollbar{display:none}
.deptbar button{border-radius:999px;min-height:48px;padding:10px 18px;box-shadow:none;background:#241b12}
.deptbar button.on{background:linear-gradient(180deg,#ffb83d,#f5a623);box-shadow:0 4px 12px rgba(245,166,35,.25)}
.posmenu > .deptbar{position:sticky;top:var(--topH,62px);z-index:30;background:var(--bg);margin:0 -4px;padding:8px 4px 10px}
.deptbar .allbtn{position:sticky;left:0;z-index:2;flex:0 0 auto;background:#2c2013;color:var(--gold);font-weight:700;box-shadow:5px 0 8px -3px rgba(0,0,0,.5)}
.deptpage{padding:2px 0 8px;animation:deptin .16s ease-out}
@keyframes deptin{from{opacity:.35;transform:translateX(10px)}to{opacity:1;transform:none}}
.depthead{display:flex;align-items:center;gap:12px;padding:2px 0 10px}
.deptback{min-height:44px;padding:8px 16px;border-radius:999px;font-weight:700}
.depttitle{font-size:20px}
.deptgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.depttile{min-height:84px;border-radius:18px;background:var(--panel2);border:1px solid var(--line);padding:12px;font-size:16.5px;font-weight:600;text-align:left;color:var(--ink)}
.depttile.on{background:linear-gradient(180deg,#ffb83d,#f5a623);color:#1c1206;border-color:var(--gold);font-weight:700}
@media(min-width:701px){.deptgrid{grid-template-columns:repeat(3,1fr)}}
.posmenu .grid{touch-action:pan-y}
.grid.slide-next{animation:slidenext .16s ease-out}
.grid.slide-prev{animation:slideprev .16s ease-out}
@keyframes slidenext{from{transform:translateX(28px);opacity:.35}to{transform:none;opacity:1}}
@keyframes slideprev{from{transform:translateX(-28px);opacity:.35}to{transform:none;opacity:1}}

/* the ticket: lines glide, a long swipe left takes one off (it turns red
   first), and the total is the biggest thing on it */
.ticket .tlines{overflow-x:hidden}
.ticket .tfoot{border-top-color:rgba(255,255,255,.06)}
.cartline{position:relative;touch-action:pan-y;border-color:transparent;border-radius:14px;background:#1a140c;
  transition:transform .15s ease,background-color .12s ease,box-shadow .12s ease}
.cartline.dragging{transition:none}
.cartline.swipe-del{background:#5c1a15;box-shadow:0 0 0 2px var(--red)}
.cartline.swipe-del::after{content:"Remove";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-weight:900;color:#fff}
.totals .grand{font-size:1.6em;border-top-color:rgba(255,255,255,.08)}
.payrow button{min-height:68px;border-radius:18px;font-size:1.15em}
.tclose .grab{display:block;width:44px;height:5px;border-radius:999px;background:rgba(255,255,255,.22);margin:0 auto 6px}

/* pads and sheets slide up from the bottom; pull one down to close it
   (its own Cancel runs, so nothing rings) */
.overlay{padding:0;animation:fadein .14s ease-out}
.modal{margin:auto auto 0;border-radius:24px 24px 0 0;border-color:transparent;box-shadow:0 -12px 40px rgba(0,0,0,.45);
  padding:10px 18px calc(18px + env(safe-area-inset-bottom));animation:sheetup .18s cubic-bezier(.2,.9,.3,1);transition:transform .15s ease}
.modal .grab{width:44px;height:5px;border-radius:999px;background:rgba(255,255,255,.22);margin:0 auto 12px}
.paymorelist button{border-radius:18px}
.delbtn{box-shadow:0 0 0 1px rgba(229,83,75,.55)}
@keyframes sheetup{from{transform:translateY(28%);opacity:.5}to{transform:none;opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.toast{border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.45)}

/* HQ: six big tiles, each its own page with a Back button */
.hqhome{margin-bottom:14px}
.hqtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.hqtile{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;min-height:132px;padding:16px;text-align:left;border-radius:22px}
.hqtile .hqi{font-size:2em;line-height:1;margin-bottom:auto}
.hqtile b{font-size:1.15em}
.hqtiles2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.hqtile2{min-height:60px;text-align:left}
.hqcount{display:inline-block;background:var(--gold);color:#1c1206;border-radius:999px;padding:0 8px;font-size:.8em;font-weight:900;margin-left:4px}
.hqhead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.hqback{min-height:48px;padding:8px 18px;border-radius:999px}
.hqday{margin-bottom:12px}
.fourup{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0}
.four{display:flex;flex-direction:column;gap:4px;background:#1a140c;border-radius:16px;padding:14px;min-width:0}
.four b{font-size:1.7em;font-weight:900}
.four.net b{color:var(--gold2)}
.detailsbtn{width:100%}
.mrow{width:100%;text-align:left}
@media(max-width:900px){.hqtiles{grid-template-columns:1fr 1fr}.fourup{grid-template-columns:1fr 1fr}}
@media(max-width:700px){
  .hqtile{min-height:108px;padding:14px}
  .four b{font-size:1.4em}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ================= Add-ons (v20261113.33)
   One scrolling sheet with every group on it, the picked add-ons as chips
   with an X, quick picks on the drink's line. Phones and Orders: the sheet
   slides up over the menu (tap the dim menu or pull down to close). iPad
   counter: the sheet takes the menu's place, as before. */
.mchips,.mquick{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mchip{min-height:40px;padding:6px 10px 6px 12px;border-radius:999px;background:#2a1f0c;color:var(--gold2);font-weight:800;
  box-shadow:0 0 0 1px var(--gold);font-size:.92em}
.mchip .x{display:inline-block;margin-left:6px;color:#fff;opacity:.8}
.mq{min-height:40px;padding:6px 12px;border-radius:999px;background:#241b12;color:var(--text,#eee);font-weight:700;font-size:.9em;
  box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.addon-picked{min-height:40px;align-items:center;margin:4px 0 8px}
.mgroup{margin-top:10px}
.mgroup-h{font-weight:900;margin:2px 0 8px;color:var(--gold2)}
.mgroup-h .mcount{display:inline-block;min-width:22px;border-radius:999px;padding:0 7px;margin-left:4px;font-size:.85em;background:var(--gold);color:#1c1206;text-align:center}
.addon-grab{display:none;width:44px;height:5px;border-radius:999px;background:rgba(255,255,255,.22);margin:0 auto 8px}
.addon-back{display:none}
@media(min-width:701px){
  /* iPad counter: the sheet stands where the menu was */
  .posmenu.editing > .deptbar,.posmenu.editing > .grid{display:none}
}
.addon-back{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55)}
#ord-mods .addon-back{display:block}
#ord-mods #addon-sheet{position:fixed;left:0;right:0;bottom:0;z-index:71;margin:0 auto;max-width:760px;max-height:78vh;
  overflow-y:auto;overscroll-behavior:contain;border-radius:24px 24px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.45);
  padding:10px 16px calc(16px + env(safe-area-inset-bottom));transition:transform .15s ease}
#ord-mods .addon-grab{display:block}
#addon-sheet.anim{animation:sheetup .18s cubic-bezier(.2,.9,.3,1)}
@media(max-width:700px){
  .posmenu.editing .addon-back{display:block}
  .posmenu.editing #addon-sheet{position:fixed;left:0;right:0;bottom:0;z-index:71;margin:0;max-height:78vh;overflow-y:auto;
    overscroll-behavior:contain;border-radius:24px 24px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.45);
    padding:10px 14px calc(16px + env(safe-area-inset-bottom));transition:transform .15s ease}
  .posmenu.editing .addon-grab{display:block}
}

/* ================= Clean counter (v20261113.34)
   The counter shows selling only: a ☰ side menu holds every other screen
   (iPad and phone), the lock warning is a small chip by TK · MANAGER, Done
   stays at the top of the add-ons, and add-on counts change right on the
   ticket line. */
.navbtn{min-width:48px;min-height:48px;padding:6px 12px;font-size:1.4em;line-height:1;border-radius:14px}
.herechip{font-weight:800;color:var(--gold2)}
.lockchip{min-height:40px;padding:6px 12px;border-radius:999px;font-size:.82em;font-weight:800;white-space:nowrap;
  background:#3a2a05;color:var(--gold2);border:1px solid rgba(245,166,35,.55);box-shadow:none}
.mgr-badge{flex:0 0 auto}
.lockchip{margin-left:auto}
.lockchip + .mgr-badge{margin-left:0}
.nav-back{display:none;position:fixed;inset:0;z-index:84;background:rgba(0,0,0,.55)}
.nav-back.open{display:block}
.sidenav{position:fixed;top:0;left:0;bottom:0;z-index:85;width:300px;max-width:84vw;overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel);box-shadow:12px 0 40px rgba(0,0,0,.5);border-radius:0 22px 22px 0;
  padding:calc(12px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-105%);visibility:hidden;transition:transform .15s ease}
.sidenav.open{transform:none;visibility:visible}
.sidenav.anim{animation:navin .16s cubic-bezier(.2,.9,.3,1)}
@keyframes navin{from{transform:translateX(-40%);opacity:.5}to{transform:none;opacity:1}}
.navhead{margin-bottom:10px}
.navlist{display:flex;flex-direction:column;gap:8px}
.navlist button{min-height:56px;text-align:left;padding:10px 16px;font-size:1.05em;border-radius:16px}
.navlist button.on{background:var(--gold);color:#1c1206;border-color:var(--gold);font-weight:800}
.navwarn{margin-top:14px;color:var(--gold2)}
.navlogout{width:100%;margin-top:12px;min-height:52px;border-radius:16px;font-weight:700;text-align:left;padding:10px 16px;font-size:1.02em}
/* add-ons: the drink name, price and Done stay at the top of the sheet */
#addon-sheet .addon-head{position:sticky;top:0;z-index:3;background:var(--panel);margin:0 -14px;padding:8px 14px 6px}
@media(min-width:701px){
  /* iPad counter: the sheet scrolls by itself, like the ticket beside it */
  .posmenu.editing #addon-sheet{position:sticky;top:calc(var(--topH,62px) + 8px);max-height:calc(100vh - var(--topH,62px) - 24px);
    max-height:calc(100dvh - var(--topH,62px) - 24px);overflow-y:auto;overscroll-behavior:contain;padding-top:0}
}
/* ticket line: quick picks and add-on counts kept small so the line stays short */
.mquick{gap:5px;margin-top:5px}
.mq{min-height:36px;padding:4px 10px;font-size:.8em}
.lchip{display:inline-flex;align-items:center;gap:2px;border-radius:999px;background:#2a1f0c;box-shadow:0 0 0 1px var(--gold);padding:2px;max-width:100%}
.lchip .lc-n{padding:0 6px;color:var(--gold2);font-weight:800;font-size:.86em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lchip .lc-b,.lchip .lc-x{min-width:36px;min-height:36px;width:36px;height:36px;padding:0;border-radius:50%;font-weight:900;font-size:1.05em;box-shadow:none}
.lchip .lc-x{background:transparent;border-color:transparent;color:#fff;opacity:.75;font-size:.9em}
/* the counter has no bottom tab bar now, so the Pay bar and the robot sit lower */
@media(max-width:700px){
  .cshell .wrap{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .cshell .ticketbar{bottom:calc(10px + env(safe-area-inset-bottom))}
  .cshell .fab-asst{bottom:calc(16px + env(safe-area-inset-bottom))}
  .cshell .fab-asst.fab-pos{bottom:calc(84px + env(safe-area-inset-bottom))}
  .navbtn{min-width:44px;min-height:44px;padding:4px 10px}
  .lockchip{padding:5px 9px;font-size:.75em}
}
@media(max-width:700px){
  .lockchip .lk-t{display:none}
}
/* ‹ Counter: the way back from any screen opened from ☰ (v20261113.35).
   It sticks under the top bar, so it's there however far the page scrolls. */
.pagebar{position:sticky;top:var(--topH,62px);z-index:39;display:flex;align-items:center;gap:12px;
  padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--line)}
.backbtn{min-height:48px;padding:8px 18px;border-radius:999px;font-size:1.05em;font-weight:800;
  background:var(--gold);color:#1c1206;border-color:var(--gold);flex:0 0 auto}
.pagename{font-size:1.1em;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(max-width:700px){
  .pagebar{padding:6px 10px}
  .backbtn{min-height:44px;padding:6px 16px}
}

/* ================= Counter layout (v20261114.45; every width, v.47)
   The departments stand in a column at the left of the menu, always on
   screen, with the search on top; the open one is lit gold. Owner,
   Nov 14: approved for the iPad sideways, then the same day: "Make
   the phone look like the iPad picture too." So the column stands at
   every width and takes the place of the pill bar and \u2637 All on the
   counter. Menu buttons are cards: a photo on top only when one is
   uploaded (owner: "Hid it"), name, price and a round green +. The
   ticket keeps its side panel on wide screens; on phones it stays
   the slide-up ticket over the gold Pay bar \u2014 a fixed side ticket
   would leave no room for the items. */
[hidden]{display:none!important}
.srchead{grid-column:1 / -1;display:flex;align-items:center;gap:10px;color:var(--dim);font-size:.92em}
.srchead button{min-height:44px;padding:6px 14px;border-radius:999px}
.posmenu{display:grid;grid-template-columns:106px minmax(0,1fr);grid-template-rows:repeat(4,auto) 1fr;column-gap:10px;row-gap:0;align-items:start}
.posmenu > *{grid-column:2}
.posmenu > .deptrail{grid-column:1;grid-row:1 / -1;display:flex;flex-direction:column;gap:6px;align-self:start;
  position:sticky;top:calc(var(--topH,62px) + 6px);max-height:calc(100vh - var(--topH,62px) - 16px);
  max-height:calc(100dvh - var(--topH,62px) - 16px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  background:var(--panel);border:1px solid rgba(255,255,255,.05);border-radius:18px;padding:8px 6px}
.deptrail::-webkit-scrollbar{display:none}
.deptrail button{min-height:44px;padding:8px;border-radius:12px;text-align:left;font-size:13px;line-height:1.2;
  background:transparent;border-color:transparent;box-shadow:none;color:var(--ink)}
.deptrail button.top{color:var(--gold2);font-weight:700}
.deptrail button.on{background:linear-gradient(180deg,#ffb83d,#f5a623);color:#1c1206;font-weight:800;box-shadow:0 4px 12px rgba(245,166,35,.25)}
.railsearch{position:relative;margin-bottom:4px}
.railsearch input{width:100%;min-height:44px;border-radius:12px;padding:8px 30px 8px 10px;font-size:13px;
  background:var(--panel2);border:1px solid var(--line);color:var(--ink)}
.railsearch .railclear{position:absolute;right:3px;top:3px;min-height:38px;width:30px;padding:0;border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:var(--dim)}
.posmenu .grid{grid-template-columns:repeat(2,1fr);gap:10px}
/* a card per item at every width */
.tile:is([data-add],[data-oadd]){padding:0;min-height:0;gap:0;justify-content:flex-start;overflow:hidden;background:#241c15;border-radius:16px}
.tile:is([data-add],[data-oadd]) .ph{display:block;height:76px;border-radius:0;overflow:hidden;background:#3a2b1a}
.tile:is([data-add],[data-oadd]) .nm{padding:8px 10px 2px;font-size:14px;font-weight:600}
.tile:is([data-add],[data-oadd]) .tbot{margin-top:auto;padding:4px 10px 10px}
.tile:is([data-add],[data-oadd]) .pr{font-size:15px}
.tile:is([data-add],[data-oadd]) .addbtn{display:flex;margin-left:auto;flex:none;width:28px;height:28px;border-radius:999px;
  align-items:center;justify-content:center;background:#35c759;color:#fff;font-weight:800;font-size:18px;line-height:1}
.tile:is([data-add],[data-oadd]) .soldtag{margin:0 10px 8px}
.tile:is([data-add],[data-oadd]) .plus1{top:8px;right:8px}
@media(min-width:701px){
  .posmenu{grid-template-columns:150px minmax(0,1fr);column-gap:12px}
  .posmenu .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .deptrail button{font-size:14px;padding:10px}
  .railsearch input{font-size:14px;min-height:46px}
  .tile:is([data-add],[data-oadd]) .ph{height:84px}
  .tile:is([data-add],[data-oadd]) .nm{padding:10px 12px 2px;font-size:16px}
  .tile:is([data-add],[data-oadd]) .tbot{padding:4px 12px 12px}
  .tile:is([data-add],[data-oadd]) .pr{font-size:16px}
  .tile:is([data-add],[data-oadd]) .addbtn{width:30px;height:30px;font-size:19px}
}
@media(min-width:1024px){
  .poslayout{grid-template-columns:minmax(0,1fr) 340px}
  .posmenu{grid-template-columns:172px minmax(0,1fr)}
  .posmenu .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .deptrail button{font-size:15px;padding:10px 12px;min-height:46px}
  .railsearch input{font-size:15px;padding:10px 38px 10px 12px}
  .tile:is([data-add],[data-oadd]) .ph{height:104px}
  /* CASH green and CARD dark with a gold edge, as on the owner's picture */
  .poslayout .payrow #pay-card{background:#2a211a;border:1px solid #6b5322;color:var(--ink)}
  .poslayout .payrow #pay-card .small{color:var(--dim)!important}
}
/* Edit Menu: add your own photo of an item */
.hiddenfile{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.photobtn{display:inline-flex;align-items:center;min-height:52px;padding:12px 16px;border-radius:12px;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line);font-weight:700}
.photoprev{width:64px;height:64px;border-radius:12px;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel2);border:1px solid var(--line)}
.photoprev.none{font-size:.72em;color:var(--dim);text-align:center}
.photoedit .row{flex-wrap:wrap}
@media(min-width:701px){#orders-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}

/* Pull-to-refresh pill: follows the finger from the top of the screen. */
.ptrpill{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:50%;transform:translate(-50%,-90px);z-index:200;background:#2b2118;color:var(--gold,#f0b429);border:1px solid #4a3826;border-radius:999px;padding:8px 16px;font-weight:700;font-size:15px;box-shadow:0 6px 18px rgba(0,0,0,.45);pointer-events:none;white-space:nowrap}
.qrbox{background:#fff;border-radius:14px;padding:14px;width:248px;max-width:80vw;margin:10px auto}
.qrbox svg{display:block;width:100%;height:auto}