/* ==========================================================================
   NewPOS — design system
   Built on the RouteCloud Gateway header/hero/card styles, extended with the
   portal chrome (sidebar, tables, forms, log viewers), the POS terminal and a
   dark theme.
   ========================================================================== */

:root{
  --bg:#ffffff;
  --panel:#f6f8fa;
  --panel-2:#fbfcfd;
  --ink:#0d1117;
  --ink-soft:#24292f;
  --muted:#57606a;
  --border:#d8dee4;
  --border-soft:#eaeef2;

  --brand:#0a7d54;
  --brand-ink:#065f40;
  --brand-soft:#e6f4ee;

  --ok:#1a7f37;      --ok-soft:#e6f4ea;
  --warn:#9a6700;    --warn-soft:#fff8e1;
  --bad:#cf222e;     --bad-soft:#ffebe9;
  --info:#0969da;    --info-soft:#e8f0fe;

  --code-bg:#0d1117; --code-ink:#e6edf3;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --shadow:0 1px 2px rgba(27,31,36,.06),0 3px 8px rgba(27,31,36,.04);
  --radius:12px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1117; --panel:#161b22; --panel-2:#1c2128;
    --ink:#e6edf3; --ink-soft:#c9d1d9; --muted:#8b949e;
    --border:#30363d; --border-soft:#21262d;
    --brand:#3fb950; --brand-ink:#56d364; --brand-soft:#132d1c;
    --ok:#3fb950; --ok-soft:#12261a;
    --warn:#d29922; --warn-soft:#2b2410;
    --bad:#f85149; --bad-soft:#2d1315;
    --info:#58a6ff; --info-soft:#12233b;
    --code-bg:#010409; --code-ink:#e6edf3;
    --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}

:root[data-theme="dark"]{
  --bg:#0d1117; --panel:#161b22; --panel-2:#1c2128;
  --ink:#e6edf3; --ink-soft:#c9d1d9; --muted:#8b949e;
  --border:#30363d; --border-soft:#21262d;
  --brand:#3fb950; --brand-ink:#56d364; --brand-soft:#132d1c;
  --ok:#3fb950; --ok-soft:#12261a;
  --warn:#d29922; --warn-soft:#2b2410;
  --bad:#f85149; --bad-soft:#2d1315;
  --info:#58a6ff; --info-soft:#12233b;
  --code-bg:#010409; --code-ink:#e6edf3;
  --shadow:0 1px 2px rgba(0,0,0,.4);
}

*{box-sizing:border-box}

/* The browser's own [hidden] rule is a bare `display:none` with no class, so
   ANY rule that sets display on the same element beats it and the thing stays
   on screen. That silently broke the customer display (the welcome panel is
   display:flex, so it never went away and covered the basket), the scanner's
   fallback notice, and several buttons. Hiding must win. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
     font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
hr{border:0;border-top:1px solid var(--border);margin:24px 0}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-size:.92em}
.nowrap{white-space:nowrap}
.sm{font-size:12.5px}
.right{text-align:right}
.center{text-align:center}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:760px}

/* ------------------------------------------------------------- public site */
header{border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:40}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:16px}
.brand{font-weight:700;color:var(--ink);font-size:16px}
.brand span{color:var(--brand)}
.brand:hover{text-decoration:none}
.hdr-links{display:flex;align-items:center;gap:8px}

.btn{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;cursor:pointer;
     background:var(--brand);color:#fff;border:1px solid var(--brand);padding:9px 16px;border-radius:9px}
.btn:hover{filter:brightness(1.08);text-decoration:none;color:#fff}
.btn.sec{background:transparent;color:var(--ink);border-color:var(--border)}
.btn.sec:hover{background:var(--panel);color:var(--ink)}
.btn.danger{background:var(--bad);border-color:var(--bad)}
.btn.sm{padding:5px 11px;font-size:13px;border-radius:7px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

.hero{padding:66px 0 46px;text-align:center}
.status{display:inline-flex;align-items:center;gap:7px;background:var(--brand-soft);color:var(--brand);
        border-radius:99px;padding:5px 13px;font-size:12.5px;font-weight:600;margin-bottom:20px}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor}
h1{font-size:clamp(30px,5.4vw,46px);line-height:1.12;letter-spacing:-.03em;margin:0 0 16px}
h1 em{font-style:normal;color:var(--brand)}
.lede{font-size:18px;color:var(--muted);max-width:36em;margin:0 auto 28px}
.cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}

.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
       background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:44px 0}
.strip div{background:var(--bg);padding:18px 16px;text-align:center}
.strip b{display:block;font-size:21px;letter-spacing:-.02em}
.strip small{color:var(--muted);font-size:12.5px}

section{padding:34px 0}
h2{font-size:23px;letter-spacing:-.02em;margin:0 0 8px}
h3{font-size:17px;letter-spacing:-.01em;margin:0 0 8px}
.sub{color:var(--muted);margin:0 0 24px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px}
.card h3{font-size:16px;margin:0 0 6px}
.card p{margin:0;color:var(--muted);font-size:14.5px}
/* A denser list of the same cards, for a sidebar. */
.cards.tight{grid-template-columns:1fr;gap:9px}
.cards.tight .card{padding:12px 14px}
.cards.tight .card h3{font-size:14px;margin:0 0 3px}
.cards.tight .card p{font-size:12.8px;line-height:1.45}
a.card{color:inherit;text-decoration:none;display:block;transition:border-color .12s}
a.card:hover{border-color:var(--brand);text-decoration:none}
.card .num{width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
           display:grid;place-items:center;font-size:13px;font-weight:700;margin-bottom:12px}

pre{background:var(--code-bg);color:var(--code-ink);border-radius:12px;padding:20px;overflow-x:auto;
    font-family:var(--mono);font-size:13.2px;line-height:1.6;margin:0}
pre .c{color:#7d8590}.s{color:#a5d6ff}.k{color:#ff7b72}.n{color:#79c0ff}

footer{border-top:1px solid var(--border);margin-top:40px;padding:26px 0 60px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted)}

/* ------------------------------------------------------------ portal shell */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}

.side{background:var(--panel);border-right:1px solid var(--border);
      display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .top{padding:16px 16px 12px;border-bottom:1px solid var(--border-soft)}
.side .env{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
           letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:5px;margin-top:7px}
.side .env.production{background:var(--ok-soft);color:var(--ok)}
.side .env.sandbox{background:var(--warn-soft);color:var(--warn)}
.side .env.trial{background:var(--info-soft);color:var(--info)}
.side .env.grace,.side .env.expired{background:var(--bad-soft);color:var(--bad)}
.side nav{padding:6px 10px 16px;flex:1}

/* A group is a block, separated by a hairline. Headings and links were told
   apart only by capitalisation before, which is not a difference you notice
   at a glance — so people kept clicking the headings. Now a heading is a
   small, dim, wide-tracked label with no icon, no box, no hover and no
   pointer; a link is a full-height row with an icon and a hit area. */
.navgroup + .navgroup{margin-top:10px;padding-top:12px;border-top:1px solid var(--border-soft)}

.side .grp{margin:0 0 4px;padding:0 10px;font-size:10px;font-weight:700;letter-spacing:.11em;
           text-transform:uppercase;color:var(--muted);opacity:.62;cursor:default;
           -webkit-user-select:none;user-select:none;pointer-events:none}

.side a{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;
        border-radius:8px;color:var(--ink-soft);font-size:14px;font-weight:500;line-height:1.25}
.side a .ic{width:17px;height:17px;flex:none;opacity:.62;
            fill:none;stroke:currentColor;stroke-width:1.8;
            stroke-linecap:round;stroke-linejoin:round}
.side a .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side a:hover{background:var(--border-soft);text-decoration:none;color:var(--ink)}
.side a:hover .ic{opacity:.9}
.side a:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

.side a.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
.side a.on .ic{opacity:1}
/* An accent bar on the sidebar edge, so the current page is obvious even
   when the tint is washed out by a bright shop light. */
.side a.on::before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
                   width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--brand)}
.side .count{margin-left:auto;background:var(--bad);color:#fff;font-size:11px;font-weight:700;
             padding:1px 6px;border-radius:99px;min-width:19px;text-align:center}
.side a.on .count{background:var(--brand);color:#fff}
.side .who{border-top:1px solid var(--border-soft);padding:12px 16px;font-size:13px}
.side .who b{display:block;font-size:13.5px}
.side .who small{color:var(--muted)}

.main{min-width:0;display:flex;flex-direction:column}
.bar{border-bottom:1px solid var(--border);padding:16px 26px;display:flex;align-items:center;
     justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--bg);position:sticky;top:0;z-index:30}
.bar h1{font-size:20px;margin:0;letter-spacing:-.02em}
.bar .sub{margin:2px 0 0;font-size:13.5px}
.bar .acts{display:flex;gap:8px;flex-wrap:wrap}
.body{padding:22px 26px 60px;flex:1}

/* ------------------------------------------------------------ stat tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
.tile{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px}
.tile .lbl{font-size:12.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.tile .val{font-size:26px;font-weight:700;letter-spacing:-.025em;margin:6px 0 2px;line-height:1.1}
.tile .val.sm{font-size:20px}
.tile .delta{font-size:12.5px;color:var(--muted)}
.tile .delta.up{color:var(--ok)} .tile .delta.down{color:var(--bad)}
.tile.alert{border-color:var(--bad);background:var(--bad-soft)}
.tile.alert .val{color:var(--bad)}
.tile.good{border-color:var(--ok)}
a.tile{color:inherit}
a.tile:hover{text-decoration:none;border-color:var(--brand)}

/* ------------------------------------------------------------------ panel */
.panel{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
       margin-bottom:20px;overflow:hidden}
.panel > header{position:static;border:0;border-bottom:1px solid var(--border);padding:13px 18px;
                background:var(--panel-2);display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel > header h2{font-size:15px;margin:0;letter-spacing:-.01em}
.panel > header .hint{font-size:12.5px;color:var(--muted);font-weight:400}
.panel .pad{padding:18px}
.panel .pad + .pad{border-top:1px solid var(--border-soft)}

/* ------------------------------------------------------------------ table */
.tbl{width:100%;border-collapse:collapse;font-size:13.8px}
.tbl th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
        color:var(--muted);padding:9px 14px;border-bottom:1px solid var(--border);background:var(--panel-2);
        white-space:nowrap}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
.tbl tbody tr:hover{background:var(--panel-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{font-family:var(--mono);text-align:right;white-space:nowrap;font-size:13px}
.tbl a{font-weight:500}
.tbl tfoot td{padding:10px 14px;border-top:1px solid var(--border);font-weight:700;background:var(--panel-2)}
/* A sortable heading says so before you click it, not after. */
.tbl th.sortable{cursor:pointer;user-select:none;position:relative;padding-right:24px}
.tbl th.sortable:hover{color:var(--ink)}
.tbl th.sortable::after{content:"↕";position:absolute;right:10px;opacity:.35;font-size:11px}
.tbl th.sortable:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.tbl th.sorted{color:var(--brand)}
.tbl th.sorted::after{opacity:1}
.tbl th[data-dir="asc"]::after{content:"↑"}
.tbl th[data-dir="desc"]::after{content:"↓"}
.scroll{overflow-x:auto}
.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:5px}

/* ------------------------------------------------------------------ pills */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
      padding:2px 9px;border-radius:99px;white-space:nowrap;border:1px solid transparent}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 25%,transparent)}
.pill.info{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.pill.neutral{background:var(--border-soft);color:var(--muted);border-color:var(--border)}
.tag{display:inline-block;font-family:var(--mono);font-size:11.5px;background:var(--border-soft);
     border:1px solid var(--border);padding:1px 6px;border-radius:5px;color:var(--ink-soft)}

/* ------------------------------------------------------------------ forms */
.field{margin-bottom:15px}
.field > label{display:block;font-size:13.5px;font-weight:600;margin-bottom:5px}
.field .help{font-size:12.5px;color:var(--muted);margin-top:5px}
.field .err{font-size:12.5px;color:var(--bad);margin-top:5px;font-weight:500}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],
input[type=url],input[type=date],input[type=datetime-local],input[type=search],select,textarea{
  width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--bg);
  border:1px solid var(--border);border-radius:9px;padding:8px 11px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
input[aria-invalid="true"]{border-color:var(--bad)}
textarea{min-height:88px;resize:vertical;font-family:inherit}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
       linear-gradient(135deg,var(--muted) 50%,transparent 50%);
       background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
       background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.row.two{grid-template-columns:1fr 1fr}
.row.three{grid-template-columns:repeat(3,1fr)}
.inline{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.check{display:flex;align-items:flex-start;gap:9px;font-size:14px;padding:7px 0}
.check input{margin-top:3px;width:15px;height:15px;accent-color:var(--brand);flex-shrink:0}
.check span{flex:1}
.check small{display:block;color:var(--muted);font-size:12.5px}

/* A row of cards you pick one of — a radio group that reads as a decision
   rather than as five dots. */
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.choice{position:relative;display:block;padding:13px 14px;border:1px solid var(--border);
  border-radius:var(--radius);cursor:pointer;background:var(--panel-2);transition:border-color .12s,background .12s}
.choice:hover{border-color:var(--brand)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice b{display:block;font-size:14px;margin-bottom:3px}
.choice span{display:block;font-size:12.5px;color:var(--muted);line-height:1.4}
.choice.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.choice.on b{color:var(--brand)}

/* Short inline ticks — days of the week, and the like. */
.checks{display:flex;flex-wrap:wrap;gap:6px}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;padding:6px 11px;
  border:1px solid var(--border);border-radius:9px;cursor:pointer;background:var(--panel-2)}
.chk input{width:15px;height:15px;accent-color:var(--brand);margin:0}
.chk:has(input:checked){border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:600}
fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:0 0 18px}
legend{font-size:13px;font-weight:700;padding:0 7px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}

.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;
         padding:14px 18px;background:var(--panel-2);border-bottom:1px solid var(--border)}
.filters .f{min-width:130px}
.filters label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;
               letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
.filters input,.filters select{padding:6px 10px;font-size:13.5px}

/* ------------------------------------------------------------------ alerts */
.note{border:1px solid var(--border);border-left-width:3px;border-radius:9px;
      padding:12px 15px;margin-bottom:16px;font-size:14px}
.note.success{background:var(--ok-soft);border-color:var(--ok)}
.note.error{background:var(--bad-soft);border-color:var(--bad)}
.note.warning{background:var(--warn-soft);border-color:var(--warn)}
.note.info{background:var(--info-soft);border-color:var(--info)}
.note b{display:block;margin-bottom:3px}
.note code{font-family:var(--mono);font-size:.9em;background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px}

/* ------------------------------------------------------------------- misc */
.kv{display:grid;grid-template-columns:180px 1fr;gap:1px;background:var(--border-soft);
    border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;font-size:13.8px}
.kv dt{background:var(--panel-2);padding:9px 14px;font-weight:600;color:var(--muted);margin:0}
.kv dd{background:var(--bg);padding:9px 14px;margin:0;word-break:break-word}

.bars{display:flex;flex-direction:column;gap:9px}
.bars .b{display:grid;grid-template-columns:1fr 62px;gap:11px;align-items:center;font-size:13.5px}
.bars .track{background:var(--border-soft);border-radius:99px;height:8px;overflow:hidden;position:relative}
.bars .fill{background:var(--brand);height:100%;border-radius:99px;transition:width .3s}
.bars .fill.bad{background:var(--bad)} .bars .fill.warn{background:var(--warn)}
.bars .lbl{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:3px}

/* ----------------------------------------------------------- charts -- */
/* Real SVG charts. The CSS bar stacks above are still used for small
   "top five" lists where an axis would be more furniture than information. */
.chartbox{position:relative;width:100%;min-height:40px}
.chartbox svg{display:block;overflow:visible}
.chartbox .grid{stroke:var(--border-soft);stroke-width:1;shape-rendering:crispEdges}
.chartbox .axis{fill:var(--muted);font-size:11px;font-family:var(--sans)}
.chartbox .axis.val{font-family:var(--mono);font-size:11px;fill:var(--ink-soft)}
.chartbox .guide{stroke:var(--border);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.chartbox .pt{pointer-events:none}
.chartbox .bar,.chartbox .slice{transition:opacity .12s}
.chartbox .bar:hover,.chartbox .slice:hover{opacity:.78}
.chartbox .zone:focus{outline:2px solid var(--brand);outline-offset:-2px}
.chartbox .donut-val{fill:var(--ink);font-size:19px;font-weight:700;font-family:var(--sans)}
.chartbox .donut-sub{fill:var(--muted);font-size:11.5px;font-family:var(--sans)}

.chartlegend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:8px;
  font-size:12.5px;color:var(--muted)}
.chartlegend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}

.charttip{position:absolute;z-index:80;pointer-events:none;background:var(--ink);color:var(--bg);
  border-radius:8px;padding:8px 11px;font-size:12.5px;line-height:1.55;box-shadow:var(--shadow);
  max-width:240px}
.charttip[hidden]{display:none}
.charttip b{color:inherit;font-weight:700}
.charttip span{display:block;white-space:nowrap}
.charttip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}

/* A tile can carry its own trend line under the number. */
.tile .chartbox.spark{margin-top:9px;min-height:0;opacity:.9}
.tile:hover .chartbox.spark{opacity:1}

.spark{display:flex;align-items:flex-end;gap:2px;height:56px}
.spark i{flex:1;background:var(--brand-soft);border-radius:2px 2px 0 0;min-height:2px;position:relative}
.spark i:hover{background:var(--brand)}
.spark i.fail{background:var(--bad-soft)}

.pager{display:flex;align-items:center;justify-content:space-between;gap:14px;
       padding:13px 18px;border-top:1px solid var(--border);font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.pager .links{display:flex;gap:6px}
.pager a,.pager span.cur{padding:4px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px}
.pager span.cur{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600}

.trace{font-family:var(--mono);font-size:12.5px;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.trace .step{padding:8px 13px;border-bottom:1px solid var(--border-soft);display:flex;gap:11px;align-items:baseline}
.trace .step:last-child{border-bottom:0}
.trace .step.hit{background:var(--ok-soft)}
.trace .step.miss{color:var(--muted)}
.trace .mark{width:15px;flex-shrink:0;font-weight:700}
.trace .step.hit .mark{color:var(--ok)}

.copy{display:flex;gap:8px;align-items:center}
.copy code{flex:1;font-family:var(--mono);font-size:12.5px;background:var(--panel);border:1px solid var(--border);
           padding:8px 11px;border-radius:8px;overflow-x:auto;white-space:nowrap}

/* Grid and flex children default to min-width:auto, which means a wide table
   refuses to shrink and pushes its track past the viewport — the page then
   scrolls sideways at ANY screen size, and the .scroll wrapper is useless
   because its parent has already expanded. minmax(0,…) and min-width:0 let the
   column shrink so .scroll does its job. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:20px;align-items:start}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.split>*,.stack>*,.panel,.main>*{min-width:0}
.scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}

/* ------------------------------------------------------------------- auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:32px 20px;background:var(--panel)}
.auth .box{width:100%;max-width:404px;background:var(--bg);border:1px solid var(--border);
           border-radius:16px;padding:32px;box-shadow:var(--shadow)}
.auth h1{font-size:22px;margin:0 0 6px;text-align:center}
.auth .lede{font-size:14px;margin:0 0 24px;text-align:center}
.auth .foot{text-align:center;margin-top:20px;font-size:13px;color:var(--muted)}
.auth .btn{width:100%;justify-content:center;padding:11px}
.otp{letter-spacing:.55em;text-align:center;font-size:23px;font-family:var(--mono);font-weight:600;
     padding:13px 11px !important}

/* ------------------------------------------------------ mobile navigation */
/* Driven by a checkbox rather than JavaScript: the menu is the only way to
   reach most of the portal, so it must not depend on a script loading. */
.nav-toggle{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
.burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;
        margin-right:2px;border:1px solid var(--border);border-radius:9px;background:var(--panel);
        cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent}
.burger:hover{background:var(--border-soft)}
.burger span{display:block;position:relative;width:17px;height:1.5px;background:var(--ink);
             border-radius:2px;transition:background .15s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;
             background:var(--ink);border-radius:2px;transition:transform .18s ease}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.scrim{display:none}

/* Keyboard users must be able to see focus on the toggle. */
.nav-toggle:focus-visible+.shell .burger{outline:2px solid var(--brand);outline-offset:2px}

@media (min-width:961px){
  /* Never leave the sidebar hidden on desktop, whatever state the toggle
     was left in on a narrower screen. */
  .side{transform:none !important;visibility:visible !important}
}

@media (max-width:960px){
  .shell{grid-template-columns:1fr}

  .burger{display:inline-flex}

  .side{position:fixed;top:0;left:0;bottom:0;width:264px;max-width:86vw;z-index:60;
        height:100vh;overflow-y:auto;border-right:1px solid var(--border);
        transform:translateX(-100%);visibility:hidden;
        transition:transform .22s ease,visibility .22s;
        box-shadow:0 0 0 rgba(0,0,0,0)}

  .nav-toggle:checked+.shell .side{transform:translateX(0);visibility:visible;
        box-shadow:0 18px 48px rgba(0,0,0,.28)}

  /* Tapping outside closes the menu. A label, so it needs no script. */
  .nav-toggle:checked+.shell .scrim{display:block;position:fixed;inset:0;z-index:55;
        background:rgba(0,0,0,.42);cursor:pointer}

  .nav-toggle:checked+.shell .burger span{background:transparent}
  .nav-toggle:checked+.shell .burger span::before{transform:translateY(5.5px) rotate(45deg)}
  .nav-toggle:checked+.shell .burger span::after{transform:translateY(-5.5px) rotate(-45deg)}

  /* Larger tap targets once the menu is a touch surface. */
  .side nav a{padding:11px 12px;font-size:14.5px}
  .side nav a.on::before{left:-10px;height:24px}
  .side .grp{padding:0 12px;font-size:10.5px}

  .bar{padding:12px 16px;gap:10px;flex-wrap:nowrap}
  .bar h1{font-size:17px}
  .bar .sub{display:none}
  .bar .acts{margin-left:auto}
  .body{padding:16px 16px 48px}

  .split{grid-template-columns:minmax(0,1fr)}
  .kv{grid-template-columns:1fr}
  .kv dt{padding-bottom:0;background:var(--bg)}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px}
  .tile{padding:13px}
  .tile .val{font-size:20px}

  .filters{gap:8px}
  .filters .f{min-width:0;flex:1 1 140px}
  .filters .btn{flex:0 0 auto}

  /* Forms go single column; two inputs side by side on a phone are unusable. */
  .row,.row.two,.row.three{grid-template-columns:1fr}

  .panel>header{flex-wrap:wrap;gap:8px}
  .tbl{font-size:13px}
  .tbl th,.tbl td{padding:8px 10px}
  .pager{flex-direction:column;gap:10px;align-items:flex-start}
}

@media (max-width:520px){
  .body{padding:13px 12px 42px}
  .bar{padding:10px 12px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btn{padding:8px 13px;font-size:14px}
  .panel>header{padding:12px 14px}
  .pad{padding:14px}
  .filters{padding:12px 14px}
  .note{padding:11px 13px;font-size:13.5px}
}

/* Reduced-motion users get the same behaviour without the slide. */
@media (prefers-reduced-motion:reduce){
  .side,.burger span,.burger span::before,.burger span::after{transition:none}
}

@media print{
  .side,.bar .acts,.filters,.pager,.no-print{display:none}
  .shell{grid-template-columns:1fr}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   NewPOS additions — till, toasts, modals, charts, receipts
   ========================================================================== */

/* ------------------------------------------------------------------ toasts */
.toasts{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;gap:8px;
        max-width:min(380px,92vw)}
.toast{background:var(--bg);border:1px solid var(--border);border-left-width:3px;border-radius:10px;
       padding:11px 14px;box-shadow:0 8px 28px rgba(0,0,0,.18);font-size:14px;
       animation:toast-in .18s ease}
.toast.success{border-left-color:var(--ok)}
.toast.error{border-left-color:var(--bad)}
.toast.warning{border-left-color:var(--warn)}
.toast.info{border-left-color:var(--info)}
.toast b{display:block;font-size:13.5px;margin-bottom:2px}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------ modals */
.modal{position:fixed;inset:0;z-index:150;display:none;place-items:center;padding:20px;
       background:rgba(0,0,0,.45)}
.modal.open{display:grid}
.modal .box{background:var(--bg);border:1px solid var(--border);border-radius:14px;width:100%;
            max-width:520px;max-height:88vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.modal .box.wide{max-width:860px}
.modal .box > header{display:flex;align-items:center;justify-content:space-between;gap:12px;
            padding:14px 18px;border-bottom:1px solid var(--border);background:var(--panel-2);
            position:sticky;top:0;z-index:2}
.modal .box > header h2{margin:0;font-size:16px}
.modal .box .pad{padding:18px}
.modal .box > footer{padding:14px 18px;border-top:1px solid var(--border);display:flex;gap:9px;
            justify-content:flex-end;background:var(--panel-2);position:sticky;bottom:0}
.x{background:none;border:0;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.x:hover{color:var(--ink)}

/* -------------------------------------------------------------------- POS */
.pos{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);
     height:100vh;overflow:hidden;background:var(--bg)}
.pos-left{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--border)}
.pos-right{display:flex;flex-direction:column;background:var(--panel);min-width:0}

.pos-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);
         background:var(--bg);flex-wrap:wrap}
.pos-bar .brand{font-size:15px;white-space:nowrap}
.pos-bar .spacer{flex:1}
.scanbox{position:relative;flex:1 1 320px;min-width:180px}
.scanbox input{padding-left:36px;font-size:15px;height:42px}
.scanbox::before{content:"⌕";position:absolute;left:12px;top:50%;transform:translateY(-50%);
                 color:var(--muted);font-size:18px;pointer-events:none}
.netdot{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);
        padding:4px 9px;border-radius:99px;background:var(--panel);border:1px solid var(--border);white-space:nowrap}
.netdot i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block}
.netdot.off i{background:var(--bad)}
.netdot .q{color:var(--warn);font-weight:700}

.pos-scroll{flex:1;overflow-y:auto;padding:12px 14px}
.grid-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:10px}
.pcard{background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:11px;
       cursor:pointer;text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column;gap:4px;
       min-height:92px;transition:border-color .12s,transform .06s}
.pcard:hover{border-color:var(--brand)}
.pcard:active{transform:scale(.985)}
.pcard b{font-size:13.5px;line-height:1.3;font-weight:600;
         display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .p{font-size:15px;font-weight:700;color:var(--brand);margin-top:auto}
.pcard .s{font-size:11.5px;color:var(--muted)}
.pcard.out{opacity:.62}
.pcard.out .s{color:var(--bad)}

.chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:9px;margin-bottom:4px}
.chip{border:1px solid var(--border);background:var(--panel);border-radius:99px;padding:5px 13px;
      font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;color:var(--ink-soft)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* cart */
.cart-head{padding:11px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;
           justify-content:space-between;gap:10px;background:var(--panel-2)}
.cart-head b{font-size:14px}
.cart{flex:1;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:7px}
.citem{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 11px}
.citem .t{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.citem .t b{font-size:13.5px;font-weight:600;line-height:1.35}
.citem .t .amt{font-family:var(--mono);font-size:13.5px;font-weight:700;white-space:nowrap}
.citem .m{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.citem .meta{font-size:11.5px;color:var(--muted)}
.citem .imei{font-family:var(--mono);font-size:11px;color:var(--info);word-break:break-all}
.qtybox{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.qtybox button{width:30px;height:30px;border:0;background:var(--panel);color:var(--ink);font-size:16px;
               cursor:pointer;line-height:1}
.qtybox button:hover{background:var(--border-soft)}
.qtybox input{width:58px;border:0;border-left:1px solid var(--border);border-right:1px solid var(--border);
              text-align:center;padding:5px 2px;font-size:13.5px;border-radius:0;height:30px}
.qtybox input:focus{box-shadow:none}
.lnk{background:none;border:0;color:var(--muted);font-size:12.5px;cursor:pointer;padding:2px 4px;font-weight:500}
.lnk:hover{color:var(--bad)}
.lnk.b{color:var(--brand)}

.totals{border-top:1px solid var(--border);padding:12px 14px;background:var(--bg)}
.totals .l{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted);margin-bottom:5px}
.totals .l.big{font-size:21px;font-weight:700;color:var(--ink);margin:9px 0 2px;letter-spacing:-.02em}
.totals .l.big span:last-child{font-family:var(--mono)}
.paybtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 12px}
.paybtns .btn{justify-content:center;padding:12px 10px;font-size:14.5px}
.paybtns .btn.full{grid-column:1/-1;font-size:16px;padding:14px}

.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.keypad button{padding:14px 0;font-size:17px;font-weight:600;border:1px solid var(--border);
               background:var(--panel);border-radius:9px;cursor:pointer;color:var(--ink)}
.keypad button:hover{background:var(--border-soft)}
.keypad button.wide{grid-column:span 2}
.amount-display{font-family:var(--mono);font-size:30px;font-weight:700;text-align:right;padding:12px 14px;
                background:var(--panel);border:1px solid var(--border);border-radius:10px;margin-bottom:12px;
                letter-spacing:-.02em;overflow-x:auto}

.suggest{display:flex;gap:7px;overflow-x:auto;padding:9px 12px;border-top:1px solid var(--border);
         background:var(--info-soft)}
.suggest .s-lbl{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
                color:var(--info);align-self:center;white-space:nowrap}
.suggest button{border:1px solid color-mix(in srgb,var(--info) 30%,transparent);background:var(--bg);
                border-radius:99px;padding:5px 12px;font-size:12.5px;white-space:nowrap;cursor:pointer;
                color:var(--ink);font-weight:500}
.suggest button:hover{border-color:var(--info)}

@media (max-width:900px){
  .pos{grid-template-columns:1fr;height:auto;min-height:100vh}
  .pos-left{border-right:0;border-bottom:1px solid var(--border)}
  .pos-right{position:sticky;bottom:0;max-height:62vh}
  .grid-products{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}

/* ------------------------------------------------------------- mini chart */
.chart{display:flex;align-items:flex-end;gap:4px;height:160px;padding:10px 0}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;
            min-width:0;height:100%}
.chart .bar{width:100%;background:var(--brand);border-radius:3px 3px 0 0;min-height:2px;
            transition:height .3s;position:relative}
.chart .bar.p{background:var(--brand-soft);border:1px solid var(--brand)}
.chart .cap{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
            max-width:100%}
.chart .col:hover .bar{filter:brightness(1.12)}
.legend{display:flex;gap:14px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* --------------------------------------------------------------- receipts */
.receipt{max-width:320px;margin:0 auto;font-family:var(--mono);font-size:12.5px;line-height:1.5;
         background:#fff;color:#000;padding:14px}
.receipt h2{text-align:center;font-size:15px;margin:0 0 2px;font-family:var(--sans)}
.receipt .c{text-align:center}
.receipt hr{border:0;border-top:1px dashed #999;margin:8px 0}
.receipt table{width:100%;border-collapse:collapse}
.receipt td{padding:1px 0;vertical-align:top}
.receipt .r{text-align:right}
.receipt .tot{font-weight:700;font-size:14px}
@media print{
  .receipt{max-width:none;padding:0}
  body{background:#fff}
  @page{margin:6mm}
}

/* --------------------------------------------------------------- insights */
.insight{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border-soft)}
.insight:last-child{border-bottom:0}
.insight .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
             font-size:15px;font-weight:700}
.insight.good .ic{background:var(--ok-soft);color:var(--ok)}
.insight.warn .ic{background:var(--warn-soft);color:var(--warn)}
.insight.bad .ic{background:var(--bad-soft);color:var(--bad)}
.insight.info .ic{background:var(--info-soft);color:var(--info)}
.insight .tx{min-width:0;flex:1}
.insight .tx b{display:block;font-size:14px;line-height:1.4;margin-bottom:2px}
.insight .tx p{margin:0;font-size:13px;color:var(--muted)}
.insight .tx a{font-size:12.5px;font-weight:600}

/* ------------------------------------------------------------------- misc */
.avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
        display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto}
.tabs a{padding:9px 14px;font-size:14px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;
        white-space:nowrap}
.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs a.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:start}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.flex.between{justify-content:space-between}
.mt{margin-top:16px}.mb{margin-bottom:16px}.mt0{margin-top:0}.mb0{margin-bottom:0}
.hide{display:none !important}
.sticky-actions{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--border);
                padding:12px 0;display:flex;gap:9px;justify-content:flex-end;z-index:10}
.imei-chip{display:inline-block;font-family:var(--mono);font-size:11.5px;background:var(--info-soft);
           color:var(--info);border:1px solid color-mix(in srgb,var(--info) 25%,transparent);
           padding:2px 7px;border-radius:6px;margin:2px 3px 2px 0}
.trial-bar{background:var(--warn-soft);border-bottom:1px solid var(--warn);color:var(--warn);
           padding:8px 26px;font-size:13.5px;font-weight:600;display:flex;gap:12px;align-items:center;
           justify-content:space-between;flex-wrap:wrap}
.trial-bar a{color:var(--warn);text-decoration:underline}

/* --------------------------------------------------- filter bar alignment */
/* Every control is the same height and sits on the same baseline, whatever
   the label length. The search box takes the slack; the button never wraps
   onto a line of its own on desktop. */
.filters{align-items:end}
.filters .f{display:flex;flex-direction:column;justify-content:flex-end;min-width:150px}
.filters .f.grow{flex:1 1 240px;min-width:180px}
.filters .f.none{min-width:0;flex:0 0 auto}
.filters label{min-height:15px;line-height:15px}
.filters input,.filters select,.filters .btn{height:34px;line-height:1}
.filters .btn{padding:0 15px;align-self:flex-end}
@media (max-width:640px){
  .filters .f,.filters .f.grow{flex:1 1 100%;min-width:0}
  .filters .f.none{flex:1 1 100%}
  .filters .btn{width:100%;justify-content:center}
}

/* ------------------------------------------------------- table columns */
/* Fixed-ish widths stop money and percentage columns dancing about as the
   product names change length. */
.tbl.cols .w-cat{width:13%}
.tbl.cols .w-branch{width:12%}
.tbl.cols .w-money{width:10%}
.tbl.cols .w-pct{width:8%}
.tbl.cols .w-stock{width:11%}
.tbl.cols .w-codes{width:12%}
.tbl.cols td.num,.tbl.cols th.right{font-variant-numeric:tabular-nums}
@media (max-width:960px){
  .tbl.cols th,.tbl.cols td{width:auto}
}

/* ==========================================================================
   Customer-facing display
   Read from two metres away, in a shop with the lights on. Type scales with
   the viewport so the same page suits a 10" tablet and a 32" monitor.
   ========================================================================== */
.cust{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg);
      color:var(--ink);font-size:clamp(15px,1.6vw,22px);overflow:hidden;user-select:none}

.cust-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
          padding:clamp(10px,1.6vh,20px) clamp(16px,2.5vw,34px);
          border-bottom:1px solid var(--border);background:var(--panel)}
.cust-top b{display:block;font-size:clamp(17px,2.1vw,30px);letter-spacing:-.02em;line-height:1.15}
.cust-top span{color:var(--muted);font-size:clamp(12px,1.1vw,16px)}
.cust-serving{color:var(--brand);font-weight:600;font-size:clamp(13px,1.2vw,19px);text-align:right}

/* ------------------------------------------------------------------ idle */
.cust-idle{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
           text-align:center;padding:24px;gap:6px}
.cust-idle .mark{width:clamp(72px,9vw,128px);height:clamp(72px,9vw,128px);border-radius:50%;
                 background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;
                 font-size:clamp(34px,4.4vw,62px);font-weight:700;margin-bottom:14px}
.cust-idle h1{font-size:clamp(30px,4.6vw,66px);margin:0;letter-spacing:-.03em}
.cust-idle p{font-size:clamp(15px,1.7vw,25px);color:var(--muted);margin:0}
.cust-idle small{color:var(--muted);font-size:clamp(12px,1.1vw,16px);margin-top:14px}

/* ---------------------------------------------------------------- basket */
.cust-list{flex:1;overflow-y:auto;padding:clamp(6px,1vh,14px) clamp(12px,2.2vw,30px);
           scroll-behavior:smooth}
.cust-item{display:grid;grid-template-columns:1fr auto;gap:2px clamp(12px,2vw,28px);
           align-items:baseline;padding:clamp(7px,1.1vh,14px) 0;
           border-bottom:1px solid var(--border-soft)}
.cust-item:last-child{border-bottom:0}
.cust-item .n{font-size:clamp(16px,1.9vw,28px);font-weight:600;line-height:1.25;
              grid-column:1;overflow-wrap:anywhere}
.cust-item .n em{font-style:normal;font-size:.72em;color:var(--muted);font-weight:500}
.cust-item .q{grid-column:1;font-size:clamp(12px,1.2vw,18px);color:var(--muted);
              font-variant-numeric:tabular-nums}
.cust-item .t{grid-column:2;grid-row:1/3;align-self:center;font-family:var(--mono);
              font-size:clamp(17px,2vw,30px);font-weight:700;font-variant-numeric:tabular-nums;
              white-space:nowrap}
/* The item just scanned gets a moment of attention. */
.cust-item:last-child{animation:cust-in .22s ease}
@keyframes cust-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ----------------------------------------------------------------- total */
.cust-foot{border-top:2px solid var(--border);background:var(--panel);
           padding:clamp(10px,1.5vh,20px) clamp(16px,2.5vw,34px)}
.cust-foot .row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
                font-size:clamp(14px,1.4vw,21px);color:var(--muted);padding:2px 0}
.cust-foot .row b{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.cust-foot .row.discount b{color:var(--ok)}
.cust-foot .row.total{font-size:clamp(20px,2.6vw,38px);color:var(--ink);font-weight:700;
                      letter-spacing:-.02em;margin-top:6px;padding-top:10px;
                      border-top:1px solid var(--border)}
.cust-foot .row.total b{font-size:clamp(26px,3.6vw,56px);color:var(--brand);line-height:1.05}
.cust-foot .note{text-align:center;color:var(--muted);font-size:clamp(11px,1vw,15px);margin-top:8px}

/* ------------------------------------------------------------------ paid */
.cust-paid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
           text-align:center;padding:24px;gap:8px;background:var(--ok-soft)}
.cust-paid .tick{width:clamp(72px,9vw,130px);height:clamp(72px,9vw,130px);border-radius:50%;
                 background:var(--ok);color:#fff;display:grid;place-items:center;
                 font-size:clamp(38px,4.8vw,70px);margin-bottom:10px;animation:cust-pop .3s ease}
@keyframes cust-pop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.cust-paid h1{font-size:clamp(30px,4.4vw,62px);margin:0;color:var(--ok)}
.cust-paid .paid-total{font-family:var(--mono);font-size:clamp(22px,3vw,44px);font-weight:700;margin:0}
.cust-paid .paid-change{font-size:clamp(17px,2.1vw,30px);font-weight:600;color:var(--ink);margin:4px 0 0}
.cust-paid small{color:var(--muted);font-size:clamp(12px,1.1vw,16px);margin-top:10px}

.cust-link{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
           background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);
           padding:6px 16px;border-radius:99px;font-size:13px;font-weight:600}

/* --------------------------------------------------- setup page preview */
.cust-preview{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
              background:var(--panel-2);font-size:13.5px}
.cust-preview .hdr{background:var(--panel);padding:9px 13px;font-weight:700;
                   border-bottom:1px solid var(--border)}
.cust-preview .ln{display:flex;justify-content:space-between;padding:7px 13px;
                  border-bottom:1px solid var(--border-soft)}
.cust-preview .ln:last-child{border-bottom:0}
.cust-preview .ln.tot{font-weight:700;font-size:15px;background:var(--bg);color:var(--brand)}

.pair-code{font-family:var(--mono);font-size:clamp(30px,6vw,54px);font-weight:700;
           letter-spacing:.18em;text-align:center;padding:18px 10px;margin:14px 0 4px;
           background:var(--brand-soft);color:var(--brand);border-radius:var(--radius)}

@media print{.cust{display:none}}

/* ==========================================================================
   Camera scanner overlay
   ========================================================================== */
.scanner{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;
         background:#000;color:#fff;-webkit-user-select:none;user-select:none}
.scanner.open{display:flex}

.sc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
         padding:12px 16px;background:rgba(0,0,0,.85);flex:none}
.sc-head b{display:block;font-size:16px;line-height:1.2}
.sc-head .sc-hint{font-size:12.5px;opacity:.7}
.sc-x{background:none;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer;padding:0 6px}

.sc-stage{position:relative;flex:1;min-height:0;background:#000;overflow:hidden}
.sc-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Corner brackets, not a solid box — the customer's goods stay visible. */
.sc-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
          width:min(78vw,420px);height:min(40vh,240px);pointer-events:none}
.sc-frame i{position:absolute;width:30px;height:30px;border:3px solid var(--brand)}
.sc-frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.sc-frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.sc-frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 8px}
.sc-frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 8px 0}
.sc-frame::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;
                 background:var(--brand);opacity:.65;animation:sc-sweep 2.2s ease-in-out infinite}
@keyframes sc-sweep{0%,100%{transform:translateY(-70px)}50%{transform:translateY(70px)}}

.sc-flash{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);opacity:0;
          transition:opacity .18s;background:var(--brand);color:#fff;font-weight:700;
          padding:9px 20px;border-radius:99px;font-size:15px;max-width:88vw;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.sc-flash.bad{background:var(--bad)}

/* The saving an offer made, printed on the line it came off. */
.citem .offer{font-size:11.5px;font-weight:600;color:var(--ok);margin-top:2px}
/* Free items the cashier has to physically hand over. */
.gifts{margin:0 14px 10px;padding:9px 11px;border-radius:9px;background:var(--ok-soft);
  border:1px solid color-mix(in srgb,var(--ok) 25%,transparent);font-size:12.5px;color:var(--ok)}
.gifts div + div{margin-top:3px}
.sc-flash.warn{background:var(--warn);color:#1b1b1b}

.sc-unsupported{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
                padding:30px;background:#111;gap:8px}
.sc-unsupported b{font-size:17px}
.sc-unsupported p{font-size:14px;opacity:.75;margin:0;max-width:34em}

.sc-list{flex:none;max-height:30vh;overflow-y:auto;padding:10px 14px;background:#111;
         display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.sc-list:empty{display:none}
.sc-chip{display:inline-flex;align-items:center;gap:6px;background:#222;border:1px solid #3a3a3a;
         border-radius:8px;padding:5px 8px;font-family:var(--mono);font-size:12.5px}
.sc-chip button{background:none;border:0;color:#999;font-size:16px;line-height:1;cursor:pointer;padding:0}
.sc-chip button:hover{color:var(--bad)}
.sc-empty{opacity:.5;font-size:13px}

.sc-group{width:100%;border:1px solid #2a2a2a;border-radius:10px;padding:8px 10px;margin-bottom:6px}
.sc-group.current{border-color:var(--brand);background:rgba(10,125,84,.12)}
.sc-group-head{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;opacity:.7;
               margin-bottom:6px;display:flex;justify-content:space-between}

.sc-row{width:100%;display:flex;justify-content:space-between;gap:12px;font-size:13px;
        padding:5px 0;border-bottom:1px solid #222}
.sc-row .c{font-family:var(--mono);opacity:.65}
.sc-row .l{font-weight:600}

.sc-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
         padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:rgba(0,0,0,.9);flex-wrap:wrap}
.sc-tools,.sc-actions{display:flex;gap:8px;flex-wrap:wrap}
.sc-foot .btn.sec{background:#1c1c1c;border-color:#3a3a3a;color:#fff}
.sc-foot .btn.sec:hover{background:#2a2a2a;color:#fff}
.sc-foot .btn.sec.on{background:var(--warn);border-color:var(--warn);color:#1b1b1b}

@media (max-width:520px){
  .sc-foot{flex-direction:column;align-items:stretch}
  .sc-tools,.sc-actions{justify-content:center}
  .sc-actions .btn{flex:1;justify-content:center}
}

/* ------------------------------------------- per-person extra permissions */
.perm-extra{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;
            margin-top:14px;background:var(--panel-2)}
.perm-extra > summary{cursor:pointer;font-weight:600;font-size:14px;list-style:none;
                      display:flex;align-items:center;gap:8px}
.perm-extra > summary::-webkit-details-marker{display:none}
.perm-extra > summary::before{content:"▸";color:var(--muted);font-size:13px;transition:transform .15s}
.perm-extra[open] > summary::before{transform:rotate(90deg)}
.perm-extra fieldset.perm-group{margin:0 0 10px;padding:10px 12px;background:var(--bg)}
.perm-extra fieldset.perm-group:last-child{margin-bottom:0}
.perm-row small{display:block;color:var(--muted);font-size:12px}
.perm-row.covered{opacity:.55}
.perm-row.covered .in-role{color:var(--brand);font-weight:600}