/* ---- bridge: legacy var names → semantic tokens (keeps every
       existing template working; new code should use the new names) ---- */
    :root {
      --brand:var(--acc); --brand-hov:var(--acc-h); --brand-down:var(--acc-d);
      --brand-d:var(--acc-t); --accent:var(--acc);
      --brand-soft:var(--acc-soft); --brand-ring:var(--acc-soft);
      --ink:var(--text); --muted:var(--mut); --line:var(--hair); --card:var(--surface);
      --surface-3:var(--well);
      --success:var(--ok-t); --success-bg:var(--ok-soft);
      --warn:var(--warn-t); --warn-bg:var(--warn-soft);
      --danger:var(--bad-t); --danger-bg:var(--bad-soft);
      --info:var(--acc-t); --info-bg:var(--acc-soft);
      --radius:10px; --radius-sm:8px;
      --shadow-1:0 1px 2px rgba(0,0,0,.06);
      --shadow-2:0 4px 14px rgba(0,0,0,.09), 0 1px 3px rgba(0,0,0,.05);
      --shadow-3:var(--shadow-e);
      --font-disp:"Fraunces","Iowan Old Style",Palatino,Georgia,serif;
      --font-ui:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
      --ease:cubic-bezier(.2,.7,.3,1);
    }
    * { box-sizing:border-box; font-family:var(--font-ui); -webkit-font-smoothing:antialiased; }
    html,body { margin:0; height:100%; background:var(--bg); color:var(--text); font-size:14px; line-height:1.45;
      transition:background .3s ease, color .3s ease; }
    h1,h2,h3,h4 { letter-spacing:-0.01em; }
    button { cursor:pointer; border:0; border-radius:var(--radius-sm); font-weight:600; font-size:13.5px; color:var(--text); background:transparent;
      transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease), transform .1s var(--ease);
      -webkit-tap-highlight-color:transparent; }
    button:active { transform:scale(.98); }
    button:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
    /* Keyboard focus for clickable non-button elements (nav, floor tables, tabs, links, chips) */
    a:focus-visible, [role="button"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible,
    .navitem:focus-visible, .tab:focus-visible, .felem:focus-visible, .tbl:focus-visible {
      outline:2px solid var(--acc); outline-offset:2px; border-radius:6px; }
    button:disabled { opacity:.5; cursor:not-allowed; }
    input,select,textarea { border:1px solid var(--hair); border-radius:var(--radius-sm); padding:9px 12px; height:40px;
      font-size:14px; width:100%; background:var(--surface); color:var(--text); appearance:none; -webkit-appearance:none; font-family:var(--font-ui);
      transition:border-color .16s var(--ease), box-shadow .16s var(--ease); }
    textarea { height:auto; min-height:80px; }
    select { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 10px center; padding-right:32px; }
    input:hover,select:hover,textarea:hover { border-color:var(--mut); }
    input:focus,select:focus,textarea:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft); }
    input::placeholder,textarea::placeholder { color:var(--faint); }
    input[type="date"] { min-width:130px; }
    /* Checkboxes/radios must escape the global text-input styling above —
       appearance:none + width:100% + height:40px turns them into blank
       borderless boxes that never show their checked state. */
    input[type="checkbox"], input[type="radio"] {
      appearance:auto; -webkit-appearance:auto; width:17px; height:17px; min-width:17px;
      padding:0; margin:0; flex:0 0 auto; accent-color:var(--acc); cursor:pointer;
      border:none; border-radius:0; background:none; box-shadow:none !important; }
    .switch input[type="checkbox"] { width:0; height:0; min-width:0; opacity:0; position:absolute; }
    label { font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--mut); display:block; margin:12px 0 5px; }
    .hide { display:none !important; }
    ::selection { background:var(--acc); color:var(--on-acc); }

    /* Inline SVG icons (Lucide) */
    .ic { flex:0 0 auto; vertical-align:-3.5px; }
    button .ic, .chip .ic, .pill .ic { vertical-align:-3px; }
    h3 .ic { vertical-align:-3px; margin-right:6px; color:var(--mut); }

    /* Numbers: tabular everywhere money/quantities appear */
    table, .sumrow, .kpi .v, .receipt, .right, .barlabel, .tile .p, #cartTotal { font-variant-numeric:tabular-nums lining-nums; }

    /* ---- Login: the masthead ---- */
    #login, #setup { height:100%; display:flex; align-items:center; justify-content:center; background:var(--bg); }
    #setup { align-items:flex-start; overflow-y:auto; padding:5vh 0; }
    #setup .box { margin:auto; }
    #setup label { margin-top:10px; display:block; }
    #login .box, #setup .box { background:var(--surface); padding:36px 34px 30px; border-radius:0; width:392px;
      border:1px solid var(--rule); border-top:4px solid var(--rule); box-shadow:var(--shadow-e); position:relative; }
    #login .box::before, #setup .box::before { content:""; position:absolute; left:0; right:0; top:2px; border-top:1px solid var(--rule); }
    #login h1, #setup h1 { margin:0 0 2px; font-family:var(--font-disp); font-size:30px; font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; gap:11px; }
    #login h1 .logo-mark, #setup h1 .logo-mark { width:34px; height:34px; border-radius:0; background:transparent; color:var(--acc); display:inline-flex; align-items:center; justify-content:center; }
    #login p.sub, #setup p.sub { margin:0 0 22px; color:var(--mut); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
    .btn { background:var(--acc); color:var(--on-acc); padding:11px 16px; width:100%; font-size:14px; font-weight:700; border-radius:var(--radius-sm); min-height:44px; }
    .btn:hover { background:var(--acc-h); }
    .btn:active { background:var(--acc-d); }

    /* ---- Shell ---- */
    #shell { display:none; height:100%; grid-template-columns:232px 1fr; grid-template-rows:60px 1fr; grid-template-areas:"side top" "side main"; }
    #side { grid-area:side; background:var(--surface); border-right:1px solid var(--hair); color:var(--text); display:flex; flex-direction:column; padding:12px 10px; }
    /* Brand block matches the top bar's 60px height and goes full-bleed, so its
       bottom rule lines up exactly with #top's — one continuous line across the app. */
    #side .logo { height:60px; margin:-12px -10px 8px; padding:0 20px; font-family:var(--font-disp); font-weight:700; font-size:19px; color:var(--text); display:flex; align-items:center; gap:9px; border-bottom:2px solid var(--rule); }
    #side .logo .logo-mark { width:24px; height:24px; border-radius:0; background:transparent; color:var(--acc); display:inline-flex; align-items:center; justify-content:center; }
    /* Live flame brand mark — theme-aware (currentColor), subtle for a work tool. */
    .pos-flame { overflow:visible; }
    .pos-flame .pf-glow { fill:currentColor; opacity:.24; transform-box:fill-box; transform-origin:50% 50%; }
    .pos-flame .pf-lick { transform-box:fill-box; transform-origin:50% 92%; will-change:transform; }
    .pos-flame .pf-ember { fill:currentColor; transform-box:fill-box; transform-origin:50% 50%; opacity:0; }
    @media (prefers-reduced-motion:no-preference){
      .pos-flame .pf-lick { animation:pfLick 2.9s ease-in-out infinite; }
      .pos-flame .pf-glow { animation:pfGlow 3.2s ease-in-out infinite; }
      .pos-flame .pf-e1 { animation:pfEmber 3.6s ease-in 0s infinite; }
      .pos-flame .pf-e2 { animation:pfEmber 4.1s ease-in 1.4s infinite; }
    }
    @keyframes pfLick { 0%,100%{transform:scaleY(1) scaleX(1) rotate(0deg)} 25%{transform:scaleY(1.045) scaleX(.99) rotate(.5deg)} 50%{transform:scaleY(.98) scaleX(1.008) rotate(-.4deg)} 75%{transform:scaleY(1.03) scaleX(.994) rotate(.3deg)} }
    @keyframes pfGlow { 0%,100%{opacity:.18;transform:scale(1)} 50%{opacity:.42;transform:scale(1.12)} }
    @keyframes pfEmber { 0%{opacity:0;transform:translateY(0) scale(1)} 18%{opacity:.65} 100%{opacity:0;transform:translateY(-11px) scale(.3)} }
    #side nav { flex:1; overflow:auto; display:flex; flex-direction:column; gap:1px; scrollbar-width:thin; }
    .navgroup { margin:14px 10px 4px; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); }
    .navgroup:first-child { margin-top:2px; }
    .navitem { position:relative; display:flex; align-items:center; gap:10px; padding:8px 10px; font-size:13.5px; color:var(--text-2); cursor:pointer; border-radius:6px; font-weight:500; transition:background .15s var(--ease), color .15s var(--ease); }
    .navitem .ic { color:var(--mut); transition:color .15s var(--ease); }
    .navitem:hover { background:var(--surface-2); color:var(--text); }
    .navitem:hover .ic { color:var(--text); }
    .navitem.active { background:var(--acc-soft); color:var(--acc-t); font-weight:700; }
    .navitem.active .ic { color:var(--acc-t); }
    .navitem.active::before { content:""; position:absolute; left:-10px; top:5px; bottom:5px; width:3px; background:var(--acc); }
    /* Waiting-for-you count: a booking nobody notices is a booking lost. */
    .nbadge { margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--bad,#e0464d); color:#fff;
              font-size:11px; font-weight:800; line-height:18px; text-align:center; flex:0 0 auto; }
    #tabbar .tab { position:relative; }
    #tabbar .nbadge { position:absolute; top:2px; left:50%; margin-left:4px; }
    @media (prefers-reduced-motion: no-preference) { .nbadge.pop { animation:nbpop .45s var(--ease); } }
    @keyframes nbpop { 0%{transform:scale(.4);opacity:0;} 60%{transform:scale(1.18);} 100%{transform:scale(1);opacity:1;} }
    .navitem .i { display:inline-flex; align-items:center; }
    .navitem.locked { color:var(--faint); }
    .navitem.locked .ic { color:var(--faint); }
    .navitem.locked:hover { background:var(--surface-2); }
    #side .foot { padding:12px 10px 4px; font-size:12px; color:var(--mut); border-top:1px solid var(--hair); margin-top:8px; }

    #top { grid-area:top; background:var(--bg); border-bottom:2px solid var(--rule); display:flex; align-items:center; gap:10px; padding:0 24px; }
    #top .title { font-family:var(--font-disp); font-weight:700; font-size:21px; flex:1; letter-spacing:-.015em; }
    .chip { display:inline-flex; align-items:center; gap:6px; background:var(--acc-soft); color:var(--acc-t); padding:5px 12px; border-radius:999px; font-size:12px; font-weight:600; line-height:1.4; border:1px solid transparent; white-space:nowrap; }
    .chip.warn { background:var(--warn-soft); color:var(--warn-t); }
    .ghost { background:var(--surface); color:var(--text); border:1px solid var(--hair); padding:8px 14px; display:inline-flex; align-items:center; gap:6px; line-height:1.4; border-radius:var(--radius-sm); font-size:13.5px; }
    .ghost:hover { background:var(--surface-2); border-color:var(--mut); }
    .segbtn { background:var(--surface); color:var(--text); border:1px solid var(--hair); padding:6px 13px; border-radius:6px; font-size:13px; font-weight:500; cursor:pointer; }
    .segbtn:hover { background:var(--surface-2); }
    .segbtn.active { background:var(--acc); border-color:var(--acc); color:var(--on-acc); font-weight:700; }
    .segbtn.on { background:var(--acc); border-color:var(--acc); color:var(--on-acc); font-weight:700; }
    .nsgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin-top:6px; }
    .nschip { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; background:var(--surface); border:1px solid var(--hair); border-radius:10px; padding:10px 12px; cursor:pointer; transition:border-color .12s var(--ease), background .12s var(--ease), transform .08s var(--ease); }
    .nschip:hover { background:var(--surface-2); transform:translateY(-1px); }
    .nschip.on { border-color:var(--acc); background:var(--acc-soft); box-shadow:0 0 0 1px var(--acc); }
    .nschip b { font-size:13.5px; } .nschip small { font-size:11px; line-height:1.35; }

    #main { grid-area:main; overflow:auto; padding:24px; scrollbar-gutter:stable; }
    .card { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
    .card h3 { margin:0 0 12px; font-family:var(--font-disp); font-size:16.5px; font-weight:700; display:flex; align-items:center; letter-spacing:-.01em; }
    .row { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; }
    .col { flex:1; min-width:260px; }
    table { width:100%; border-collapse:collapse; font-size:13.5px; }
    th,td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--hair-soft); }
    th { color:var(--mut); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; border-bottom:2px solid var(--rule); }
    tbody tr { transition:background .12s var(--ease); }
    tbody tr:hover { background:var(--acc-soft); }
    tbody tr:last-child td { border-bottom:0; }
    .muted { color:var(--mut); font-size:13px; }
    .right { text-align:right; }
    .pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; line-height:1.5; }
    .pill.green { background:var(--ok-soft); color:var(--ok-t); } .pill.amber { background:var(--warn-soft); color:var(--warn-t); }
    .pill.grey { background:var(--well); color:var(--text-2); }

    /* Empty states */
    .empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:36px 20px; text-align:center; }
    .eico { width:44px; height:44px; border-radius:var(--radius); background:var(--surface-2); color:var(--mut); display:flex; align-items:center; justify-content:center; }
    .empty p { margin:0; color:var(--mut); font-size:13.5px; }
    .empty h4 { margin:0; font-family:var(--font-disp); font-size:16px; }

    /* Skeleton loading */
    @keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
    .skel { border-radius:6px; height:12px; background:linear-gradient(90deg,var(--surface-2) 25%,var(--well) 37%,var(--surface-2) 63%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
    .skel.lg { height:26px; } .skel.card-block { height:84px; border-radius:var(--radius); }

    /* ---- POS (the till: instant, 44px+, no animation debt) ---- */
    .pos { display:grid; grid-template-columns:1fr 372px; gap:16px; height:100%; }
    .pos .left { display:flex; flex-direction:column; min-height:0; min-width:0; }
    .searchwrap { flex:1; min-width:150px; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-sm); padding:0 12px; height:40px; color:var(--mut); transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
    .searchwrap:focus-within { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft); }
    .searchwrap input { border:0; height:38px; padding:0; background:transparent; box-shadow:none !important; }
    .searchwrap input:focus { border:0; box-shadow:none !important; }
    .cats { display:flex; gap:8px; flex-wrap:nowrap; flex:0 0 auto; overflow-x:auto; margin-bottom:12px; padding-bottom:4px; scrollbar-width:none; }
    .cats::-webkit-scrollbar { display:none; }
    .cat { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:9px 16px; min-height:38px; border-radius:999px; background:var(--surface); border:1px solid var(--hair); font-size:13px; font-weight:500; color:var(--text); transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); cursor:pointer; }
    .cat .cdot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
    .cat:hover { border-color:var(--mut); background:var(--surface-2); }
    .cat.active { background:var(--inv-bg); color:var(--inv-text); border-color:var(--inv-bg); font-weight:700; }
    .tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px; overflow:auto; align-content:start; }
    .tile { position:relative; background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-sm); padding:14px 12px 12px; min-height:96px; display:flex; flex-direction:column; justify-content:space-between; gap:6px; cursor:pointer; transition:background .12s var(--ease), transform .08s var(--ease), border-color .12s var(--ease); user-select:none; -webkit-user-select:none; overflow:hidden; }
    .tile::before { content:""; position:absolute; left:0; top:0; right:0; height:3px; background:var(--tile-c, var(--acc)); }
    .tile:hover { background:var(--surface-2); border-color:var(--mut); }
    .tile:active { transform:scale(.975); }
    .tile .n { font-weight:600; font-size:13.5px; line-height:1.35; }

    /* Touch-first till: remove the 300ms tap delay on interactive elements,
       and give category/segment controls the same press feedback as tiles. */
    button, .navitem, .tile, .cat, .segbtn, .chip, .ghost, [role="button"] { touch-action:manipulation; }
    .cat, .segbtn { transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .08s var(--ease); }
    .cat:active, .segbtn:active { transform:scale(.96); }
    .tile .p { color:var(--text); font-size:13.5px; font-weight:700; }
    .tile .p .pu { color:var(--mut); font-size:11.5px; font-weight:500; }
    .tile.t86 { opacity:.55; background:var(--surface-2); cursor:not-allowed; }
    .tile.t86::before { background:var(--faint); }
    .tile.t86:hover { transform:none; }
    .b86 { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:0; background:var(--inv-bg); color:var(--inv-text); font-size:9.5px; font-weight:800; letter-spacing:.06em; vertical-align:middle; }
    .b86.low { background:var(--warn-soft); color:var(--warn-t); border:1px solid var(--warn-t); }
    .ticket { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); display:flex; flex-direction:column; min-height:0; }
    .ticket .hd { padding:14px 16px; border-bottom:2px solid var(--rule); display:flex; align-items:center; gap:8px; }
    /* min-height guarantees the ITEMS are always visible — on short screens
       the big totals/actions footer was swallowing all the space, leaving
       "only the sum". If height runs out, the FOOTER scrolls, never the
       item list out of existence. */
    .ticket .lines { flex:1 1 auto; min-height:110px; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 16px; }
    .ticket .ft { flex:0 1 auto; min-height:0; overflow-y:auto; }
    .tline { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--hair-soft); }
    .ticket .ft { padding:14px 16px; border-top:1px solid var(--hair); background:var(--surface-2); border-radius:0 0 var(--radius) var(--radius); }
    .charge { background:var(--acc); color:var(--on-acc); padding:13px 15px; width:100%; font-size:15px; font-weight:800; min-height:52px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; justify-content:center; gap:8px; }
    .charge:hover { background:var(--acc-h); }
    .charge:active { background:var(--acc-d); }
    .qbtn { width:30px; height:30px; min-width:30px; border-radius:6px; background:var(--surface-2); border:1px solid var(--hair); font-size:15px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
    .qbtn:hover { background:var(--well); }
    .sumrow { display:flex; justify-content:space-between; font-size:13.5px; margin:3px 0; color:var(--text-2); }
    .sumrow.total { font-family:var(--font-disp); font-size:22px; font-weight:600; margin-top:8px; color:var(--text); }
    #vatRow { font-size:12px; color:var(--mut); }
    .qbtn.rm { background:transparent; border-color:transparent; color:var(--faint); }
    .qbtn.rm:hover { background:var(--bad-soft); color:var(--bad-t); }

    /* ---- Modal ---- */
    @keyframes fadein { from { opacity:0; } to { opacity:1; } }
    @keyframes popin { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
    .overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:70; animation:fadein .16s var(--ease); }
    .modal { background:var(--surface); border-radius:var(--radius); padding:24px; width:400px; max-width:92vw; max-height:86vh; overflow-y:auto; box-shadow:var(--shadow-e); border:1px solid var(--hair); border-top:4px solid var(--rule); animation:popin .2s var(--ease); }
    .modal.wide { width:660px; }
    /* Primary actions in a long modal stay visible while the body scrolls
       — a charge screen must never hide "Take payment" below the fold. */
    .modal-actions { position:sticky; bottom:0; margin:18px -24px -24px; padding:14px 24px calc(14px + env(safe-area-inset-bottom));
      background:var(--surface); border-top:1px solid var(--hair); display:flex; justify-content:flex-end; gap:10px; }
    .modal-actions .btn { min-height:48px; }
    .modal table { width:100%; table-layout:auto; }
    .modal table td, .modal table th { white-space:nowrap; }
    .modal table thead th { position:sticky; top:-24px; background:var(--surface); z-index:1; }
    .modal h3 { margin:0 0 14px; font-family:var(--font-disp); font-size:17px; font-weight:700; display:flex; align-items:center; }
    .seg { display:flex; gap:2px; background:var(--surface-2); padding:3px; border-radius:var(--radius-sm); border:1px solid var(--hair); }
    .seg button { flex:1; padding:8px 10px; background:transparent; color:var(--mut); border-radius:6px; font-weight:500; font-size:13px; white-space:nowrap; }
    .seg button.on { background:var(--surface); color:var(--text); font-weight:700; box-shadow:var(--shadow-1); }
    .receipt { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; color:var(--text); }
    .receipt .r { display:flex; justify-content:space-between; } .receipt hr { border:0; border-top:1px dashed var(--mut); }

    @keyframes toastin { from { opacity:0; transform:translate(-50%,8px); } to { opacity:1; transform:translate(-50%,0); } }
    .toast { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--inv-bg); color:var(--inv-text); border-left:3px solid var(--acc); padding:11px 18px; border-radius:6px; z-index:80; box-shadow:var(--shadow-e); font-size:13.5px; font-weight:500; animation:toastin .18s var(--ease); max-width:min(480px,90vw); }
    .inline { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
    .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    /* KPI cards: big editorial numbers, hairline separations */
    .kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:16px; }
    .kpi { background:var(--surface); border:1px solid var(--hair); border-top:3px solid var(--rule); border-radius:var(--radius-sm); padding:16px 18px; }
    .kpi .l { color:var(--mut); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; }
    .kpi .v { font-family:var(--font-disp); font-size:27px; font-weight:600; margin-top:6px; letter-spacing:-0.02em; }
    .kpi .s { font-size:12px; color:var(--mut); margin-top:3px; }
    .iconbtn { background:var(--surface-2); color:var(--text); border:1px solid transparent; padding:6px 12px; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:5px; line-height:1.5; border-radius:6px; }
    .iconbtn:hover { background:var(--well); }
    .iconbtn.danger { background:var(--bad-soft); color:var(--bad-t); }
    .iconbtn.danger:hover { background:var(--bad-soft); filter:brightness(.96); }
    .recipe-row { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
    /* Charts: data-journalism bars — value beside label, accent fill, flat track */
    .barlabel { display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px; }
    .bar { height:12px; background:var(--track); border-radius:0; overflow:hidden; }
    .bar > span { display:block; height:100%; background:var(--acc); border-radius:0; transition:width .5s var(--ease); }
    /* Toggle switch */
    .switchrow { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
    .switchrow label { margin:0; }
    .switch { position:relative; display:inline-block; width:44px; height:26px; flex:0 0 auto; }
    .switch input { opacity:0; width:0; height:0; }
    .switch .track { position:absolute; inset:0; background:var(--well); border-radius:999px; transition:background .16s var(--ease); cursor:pointer; }
    .switch .track::before { content:""; position:absolute; width:22px; height:22px; left:2px; top:2px; background:var(--surface); border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .16s var(--ease); }
    .switch input:checked + .track { background:var(--acc); }
    .switch input:checked + .track::before { transform:translateX(18px); }

    /* ---- Floor plan: the room as a monochrome map ---- */
    #floor { position:relative; background:var(--map-base); border:1px solid var(--hair); border-radius:var(--radius);
      height:min(62vh,560px); overflow:hidden;
      background-image:radial-gradient(var(--hair) 1px, transparent 1px); background-size:26px 26px; }
    .tbl { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center;
      justify-content:center; cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:none;
      background:var(--surface); border:2px solid var(--mut); color:var(--text);
      transition:box-shadow .15s var(--ease); }
    .tbl:hover { box-shadow:var(--shadow-2); }
    .tbl.round { border-radius:50%; } .tbl.square { border-radius:12px; }
    .tbl .nm { font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:3px; } .tbl .st { font-size:10px; color:var(--mut); font-variant-numeric:tabular-nums; }
    .tbl.occ { background:var(--inv-bg); border-color:var(--inv-bg); color:var(--inv-text); }
    .tbl.occ .st { color:var(--inv-text); opacity:.75; }
    .tbl.slow { background:var(--acc); border-color:var(--acc-d); color:var(--on-acc); }
    .tbl.slow .st { color:var(--on-acc); opacity:.85; }
    .tbl.dragging { box-shadow:var(--shadow-e); z-index:5; opacity:.9; }
    .tbl .seat { position:absolute; width:11px; height:11px; border-radius:50%;
      background:var(--well); border:1.5px solid var(--mut); z-index:-1; }
    .tbl.occ .seat { background:var(--acc-soft); border-color:var(--acc); }
    .tbl.slow .seat { background:var(--acc-soft); border-color:var(--acc-d); }
    .tbl.editable { outline:1.5px dashed var(--acc); outline-offset:3px; cursor:grab; }
    .tts { display:flex; flex-wrap:wrap; justify-content:center; gap:1px; margin-top:1px; }
    .tt { display:inline-flex; align-items:center; gap:2px; font-size:8.5px; font-weight:700; border-radius:4px; padding:1px 4px; line-height:1.5; font-variant-numeric:tabular-nums; }
    .tt.g { background:var(--ok-soft); color:var(--ok-t); } .tt.a { background:var(--warn-soft); color:var(--warn-t); } .tt.r { background:var(--bad-soft); color:var(--bad-t); }
    #timeRow .tt { font-size:12px; padding:3px 8px; border-radius:6px; }
    .felem { position:absolute; transform:translate(-50%,-50%); touch-action:none; }
    .felem.wall { background:var(--inv-bg); border-radius:2px; }
    .felem.pillar { background:var(--mut); border-radius:50%; border:2px solid var(--text-2); }
    .felem.door { background:var(--acc-soft); border:2px solid var(--acc); border-radius:4px; }
    .felem.label { background:transparent; color:var(--mut); font-size:12px; font-weight:700;
      text-transform:uppercase; letter-spacing:.12em; white-space:nowrap; display:flex; align-items:center; justify-content:center; }
    .felem.editable { cursor:grab; outline:1.5px dashed var(--acc); outline-offset:2px; }
    #floorTabs { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
    #floorLegend { display:flex; gap:14px; margin-top:10px; font-size:12px; color:var(--mut); align-items:center; flex-wrap:wrap; }
    .lgd { display:inline-flex; align-items:center; gap:6px; }
    .lgd i { width:14px; height:14px; border-radius:50%; display:inline-block; border:2px solid var(--hair); background:var(--surface); }

    /* ---------- Mobile / tablet (touch-first) ---------- */
    #tabbar { display:none; grid-area:tabs; background:var(--surface); border-top:2px solid var(--rule); padding:6px 8px calc(6px + env(safe-area-inset-bottom));
      justify-content:space-around; align-items:stretch; z-index:40; }
    .tab { flex:1; max-width:96px; display:flex; flex-direction:column; align-items:center; gap:3px;
      padding:6px 2px; border-radius:8px; cursor:pointer; color:var(--mut); font-size:10.5px; font-weight:600;
      -webkit-tap-highlight-color:transparent; transition:color .15s var(--ease); }
    .tab .i { display:inline-flex; align-items:center; justify-content:center; }
    .tab.active { color:var(--acc-t); }
    .tab:active { background:var(--surface-2); }
    #cartBar { display:none; position:fixed; left:12px; right:12px; bottom:calc(66px + env(safe-area-inset-bottom));
      background:var(--acc); color:var(--on-acc); border-radius:var(--radius); padding:15px 20px; z-index:45;
      justify-content:space-between; align-items:center; gap:10px; font-weight:800; font-size:15px;
      box-shadow:var(--shadow-e); cursor:pointer; -webkit-tap-highlight-color:transparent; }
    #cartBar:active { transform:scale(.98); }
    .sheet-close { display:none; }
    @keyframes sheetup { from { transform:translateY(40px); opacity:0; } to { transform:translateY(0); opacity:1; } }

    @media (max-width:900px){
      #shell { grid-template-columns:1fr; grid-template-rows:auto 1fr auto; grid-template-areas:"top" "main" "tabs"; }
      #side { display:none; }
      #tabbar { display:flex; }
      #top { padding:6px 14px; padding-top:calc(6px + env(safe-area-inset-top)); height:auto; min-height:56px; flex-wrap:wrap; row-gap:4px; }
      #top .title { font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:60px; }
      #main { padding:14px; padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
      input,select,textarea { font-size:16px; }  /* ≥16px stops iOS zoom-jump on focus */
      .card { overflow-x:auto; }
      .card table { min-width:640px; }  /* wide tables scroll sideways instead of crushing rows */
      td button { white-space:nowrap; }
      td.inline { flex-wrap:nowrap; }   /* action buttons stay on one row */
      .grid2 { grid-template-columns:1fr; }
      .toast { bottom:calc(78px + env(safe-area-inset-bottom)); max-width:88vw; text-align:center; }
      #login .box, #setup .box { width:min(392px, 92vw); }

      /* Sale: tiles get the screen, ticket becomes a slide-up sheet */
      .pos { display:flex; flex-direction:column; height:auto; }
      .cats { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:none; }
      .cats::-webkit-scrollbar { display:none; }
      .cat { flex:0 0 auto; }
      .tiles { grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); overflow:visible; padding-bottom:120px; }
      .pos .ticket { position:fixed; inset:0; top:auto; height:calc(100% - env(safe-area-inset-top) - 40px);
        z-index:60; border-radius:16px 16px 0 0; box-shadow:var(--shadow-e);
        transform:translateY(105%); transition:transform .28s cubic-bezier(.32,.72,.35,1); }
      .pos.ticket-open .ticket { transform:translateY(0); }
      .pos .ticket .ft { padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
      .sheet-close { display:inline-flex; }
      #cartBar { display:flex; }
      .pos.ticket-open ~ * #cartBar, .pos.ticket-open #cartBar { display:none; }

      /* Modals slide up as bottom sheets */
      .overlay { align-items:flex-end; }
      .modal, .modal.wide { width:100%; max-width:100%; border-radius:16px 16px 0 0; max-height:88vh;
        padding-bottom:calc(24px + env(safe-area-inset-bottom)); animation:sheetup .22s ease-out; }
    }

    /* Phone-width: the top bar is for selling, not licence admin — the
       VAT and plan chips live on desktop/tablet only. */
    @media (max-width:600px){
      #vatChip, #planChip { display:none !important; }
    }

    /* Tablet portrait (601–900px): the primary POS device. Nav stays in
       the bottom tab bar, but the Sale screen gets its two panes back —
       tiles beside a docked cart, no slide-up sheet needed. */
    @media (min-width:601px) and (max-width:900px){
      .pos { display:grid; grid-template-columns:1fr 320px; gap:12px; height:100%; min-height:0; }
      /* Cap the docked bill column to the viewport so its own list scrolls
         instead of the totals footer sliding off-screen. */
      .pos .ticket { position:static; inset:auto; transform:none; border-radius:var(--radius);
        box-shadow:none; transition:none; height:auto;
        max-height:calc(100vh - 150px); max-height:calc(100dvh - 150px); }
      .tiles { overflow:auto; padding-bottom:12px; }
      #cartBar { display:none !important; }
      .sheet-close { display:none; }
    }

    /* Bigger touch targets on any touch device */
    @media (pointer:coarse){
      .qbtn { width:44px; height:44px; font-size:18px; }
      .cat { padding:11px 18px; font-size:14px; }
      .tile { min-height:96px; padding:14px; }
      .ghost, .segbtn, .iconbtn { padding:10px 16px; font-size:14px; }
      th,td { padding:12px 8px; }
      .navitem { padding:12px 10px; font-size:14.5px; }
      .btn, .charge { min-height:44px; }
    }

    /* ---- Benchmark ---- */
    .bmtiers { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
    .bmtier { flex:1; min-width:120px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 14px; border-radius:var(--radius-sm); background:var(--surface-2); border:1.5px solid transparent; color:var(--text); text-align:left; }
    .bmtier b { font-size:13px; } .bmtier span { font-size:11.5px; color:var(--mut); }
    .bmtier.on { background:var(--acc-soft); border-color:var(--acc); }
    .bmtier.on span { color:var(--acc-t); }
    .bmchip { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px; background:var(--surface-2); font-size:12.5px; font-weight:600; }
    .bmchip.lock { opacity:.55; }
    .bmauto { display:inline-block; padding:4px 10px; border-radius:999px; background:var(--acc-soft); color:var(--acc-t); font-size:11.5px; font-weight:700; }
    .bmdot { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:5px; vertical-align:middle; }
    .bmadvice { margin-top:10px; padding:14px 16px; background:var(--acc-soft); border-left:3px solid var(--acc); border-radius:6px; font-size:13.5px; line-height:1.55; }
    /* Market benchmark: map popups themed like editorial info cards */
    .leaflet-container { background:var(--map-base) !important; }
    .leaflet-popup-content-wrapper { border-radius:8px !important; box-shadow:var(--shadow-e) !important;
      background:var(--surface) !important; color:var(--text) !important; border:1px solid var(--hair); border-top:3px solid var(--rule); }
    .leaflet-popup-tip { background:var(--surface) !important; }
    .leaflet-popup-content { margin:12px 14px !important; font-family:inherit !important; }
    .leaflet-control-attribution { background:var(--surface) !important; color:var(--mut) !important; }
    .leaflet-control-attribution a { color:var(--acc-t) !important; }
    .leaflet-bar a { background:var(--surface) !important; color:var(--text) !important; border-color:var(--hair) !important; }
    .bmpop { font-size:12.5px; min-width:200px; }
    .bmpop-hd { font-family:var(--font-disp); font-size:13.5px; margin-bottom:2px; }
    .bmpr { display:flex; align-items:baseline; gap:6px; padding:3px 0; border-bottom:1px solid var(--hair-soft); }
    .bmpr:last-child { border-bottom:0; }
    .bmpr span { flex:1; color:var(--mut); }
    .bmpr i { font-style:normal; font-size:10.5px; color:var(--acc-t); background:var(--acc-soft); padding:1px 6px; border-radius:999px; }
    .bmact { margin-top:6px; padding:7px 10px; background:var(--acc-soft); border-radius:6px; font-size:12px; line-height:1.5; }
    .bmact a { color:var(--acc-t); font-weight:700; text-decoration:none; }
    .bm-mile { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:6px; margin:6px 0; font-size:13px; }
    .bm-mile.up { background:var(--ok-soft); color:var(--ok-t); }
    .bm-mile.down { background:var(--warn-soft); color:var(--warn-t); }
    .bmconsent-list { display:flex; flex-direction:column; gap:6px; font-size:13px; margin:10px 0 14px; }
    .bmconsent-list .ic { color:var(--acc); }

    /* ---- Appearance settings: theme cards + accent swatches ---- */
    .ap-themes { display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:12px; margin-top:6px; }
    .ap-theme { border:1px solid var(--hair); border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; background:var(--surface); padding:0; text-align:center; transition:transform .15s var(--ease), box-shadow .2s; }
    .ap-theme:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); }
    .ap-theme.on { box-shadow:0 0 0 2px var(--acc); border-color:var(--acc); }
    .ap-sw { height:52px; display:flex; }
    .ap-sw i { flex:1; }
    .ap-name { display:block; font-size:12px; font-weight:700; padding:8px 4px; }
    .ap-accents { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:14px; margin-top:6px; }
    .ap-acc { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; background:none; border:0; padding:6px 2px; border-radius:var(--radius-sm); }
    .ap-acc:hover { background:var(--surface-2); }
    .ap-acc i { width:44px; height:44px; border-radius:50%; border:1px solid var(--hair); position:relative; }
    .ap-acc.on i::after { content:""; position:absolute; inset:-5px; border:2px solid var(--acc); border-radius:50%; }
    .ap-acc span { font-size:11px; font-weight:600; color:var(--text-2); }

    /* Animated totals: money that just changed gives a satisfying pop */
    @keyframes moneybump { 0%{transform:scale(1)} 45%{transform:scale(1.07)} 100%{transform:scale(1)} }
    .bump { animation:moneybump .32s var(--ease); display:inline-block; }

    /* ---------- In-app AI help assistant (floating, on every screen) ---------- */
    #helpFab{ position:fixed; right:20px; bottom:20px; z-index:120; height:50px; padding:0 18px 0 15px; border:0; border-radius:999px;
      background:var(--acc); color:var(--on-acc); font:inherit; font-weight:700; font-size:14px; cursor:pointer;
      display:inline-flex; align-items:center; gap:9px; box-shadow:var(--shadow-e); transition:transform .18s var(--ease), background .18s; }
    #helpFab:hover{ transform:translateY(-2px); background:var(--acc-h); }
    #helpFab:focus-visible{ outline:3px solid var(--acc); outline-offset:3px; }
    #helpFab svg{ width:20px; height:20px; }
    #helpFab.hidden{ display:none; }
    @media(max-width:720px){ #helpFab{ bottom:76px; padding:0; width:50px; justify-content:center; } #helpFab .lbl{ display:none; } }
    #helpBot{ position:fixed; right:20px; bottom:20px; z-index:121; width:min(400px,calc(100vw - 32px)); height:min(600px,calc(100vh - 40px));
      background:var(--surface); border:1px solid var(--hair); border-radius:18px; box-shadow:var(--shadow-e); display:none; flex-direction:column; overflow:hidden; }
    #helpBot.open{ display:flex; animation:popin .2s var(--ease); }
    @media(max-width:720px){ #helpBot{ right:10px; bottom:10px; width:calc(100vw - 20px); height:calc(100vh - 24px); } }
    .hbot-head{ display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--hair); background:var(--surface-2); }
    .hbot-head .dot{ width:34px; height:34px; border-radius:50%; background:var(--acc); color:var(--on-acc); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
    .hbot-head h4{ margin:0; font-size:15px; color:var(--text); line-height:1.1; }
    .hbot-head p{ margin:2px 0 0; font-size:11.5px; color:var(--mut); }
    .hbot-head .x{ margin-left:auto; background:transparent; border:0; color:var(--mut); cursor:pointer; padding:6px; border-radius:8px; line-height:0; }
    .hbot-head .x:hover{ color:var(--text); background:var(--hair-soft); }
    .hbot-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
    .hbot-msg{ max-width:88%; padding:10px 13px; border-radius:13px; font-size:13.5px; line-height:1.5; }
    .hbot-msg.bot{ background:var(--surface-2); color:var(--text); border-bottom-left-radius:4px; align-self:flex-start; }
    .hbot-msg.me{ background:var(--acc); color:var(--on-acc); border-bottom-right-radius:4px; align-self:flex-end; font-weight:500; }
    .hbot-chips{ display:flex; flex-wrap:wrap; gap:7px; }
    .hbot-chip{ background:transparent; border:1px solid var(--hair); color:var(--text); font:inherit; font-size:12px; padding:7px 11px; border-radius:999px; cursor:pointer; text-align:left; }
    .hbot-chip:hover{ background:var(--surface-2); border-color:var(--acc); }
    .hbot-foot{ border-top:1px solid var(--hair); padding:12px; background:var(--surface-2); display:flex; align-items:center; gap:8px; }
    .hbot-foot input{ flex:1; background:var(--bg); border:1px solid var(--hair); color:var(--text); border-radius:10px; padding:10px 12px; font:inherit; font-size:13.5px; }
    .hbot-foot input:focus{ outline:2px solid var(--acc); outline-offset:0; border-color:var(--acc); }
    .hbot-send{ flex:0 0 auto; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; background:var(--acc); color:var(--on-acc); border:0; border-radius:10px; cursor:pointer; }
    .hbot-send:hover{ background:var(--acc-h); }
    .hbot-typing{ display:inline-flex; gap:4px; align-items:center; }
    .hbot-typing span{ width:6px; height:6px; border-radius:50%; background:var(--mut); display:inline-block; animation:hbotBlink 1.2s infinite ease-in-out; }
    .hbot-typing span:nth-child(2){ animation-delay:.2s; } .hbot-typing span:nth-child(3){ animation-delay:.4s; }
    @keyframes hbotBlink{ 0%,80%,100%{opacity:.25; transform:translateY(0)} 40%{opacity:1; transform:translateY(-2px)} }

    /* Respect reduced motion everywhere, full stop */
    @media (prefers-reduced-motion:reduce){
      *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
    }