/* ==========================================================================
   Truend Shop — light design system

   Base language is the app's own "Obsidian & Ember" (src/theme/theme.ts)
   translated to paper: ink is the action colour, brass is a micro-dose,
   hairlines separate.
   Glass on paper — see the "Glass" block at the end of this file. Content is
   translucent with no blur; only floating layers blur. No glows, no springs;
   motion is a 120ms fade.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}

:root{
  /* surfaces */
  --paper:#F6F5F2;
  --surface:#FFFFFF;
  --surface-2:#FBFAF8;
  --surface-3:#F0EEE9;
  --surface-4:#E8E5DE;

  /* strokes */
  --line:rgba(12,12,14,.09);
  --line-2:rgba(12,12,14,.16);
  --line-3:rgba(12,12,14,.26);

  /* ink */
  --ink:#0C0C0E;
  --text:#0C0C0E;
  --text-dim:rgba(12,12,14,.60);
  --text-faint:rgba(12,12,14,.38);
  --on-ink:#F2F0EB;

  /* brass — micro-dose accent */
  --brass:#C9A56A;
  --brass-deep:#9A7838;
  --brass-fill:rgba(201,165,106,.16);
  --brass-line:rgba(201,165,106,.45);

  /* semantics — muted, never candy */
  --good:#0E7A45;   --good-fill:rgba(14,122,69,.10);
  --danger:#B3261E; --danger-fill:rgba(179,38,30,.09);
  --warn:#8A6100;   --warn-fill:rgba(138,97,0,.11);
  --info:#1D4ED8;   --info-fill:rgba(29,78,216,.08);


  /* ---- elevation ---- */
  --e1:0 1px 2px rgba(12,12,14,.04);
  --e2:0 2px 4px rgba(12,12,14,.04),0 10px 20px -10px rgba(12,12,14,.10);
  --e3:0 8px 20px -6px rgba(12,12,14,.10),0 24px 48px -22px rgba(12,12,14,.20);
  --e4:0 8px 24px -12px rgba(12,12,14,.18),0 40px 80px -28px rgba(12,12,14,.34);

  /* ---- motion ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --fast:120ms; --base:120ms; --slow:120ms;

  /* radii */
  --r-chip:9px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px;

  /* control heights — every interactive control resolves to one of these,
     so a filter row never mixes a 42px field with a 38px button */
  --ctl:40px; --ctl-sm:32px; --ctl-lg:48px;

  /* spacing scale — block rhythm is one value, not eight near-misses */
  --gap:16px; --gap-sm:10px; --gap-lg:24px;

  /* legacy aliases — older screens still ask for these names; they resolve
     into the palette above so there is one source of truth, not two. */
  --accent:var(--brass-deep); --accent-hi:var(--brass); --accent-lo:var(--brass-deep);
  --green:var(--good);  --green-bg:var(--good-fill);
  --red:var(--danger);  --red-bg:var(--danger-fill);
  --amber:var(--warn);  --amber-bg:var(--warn-fill);
  --blue:var(--info);   --blue-bg:var(--info-fill);
  --muted:var(--text-dim); --text-2:var(--text-dim);
  --bg:var(--paper); --r:var(--r-md);

  --sb-w:238px;
  /* Inter has no Malayalam glyphs, so മലയാളം falls through to Noto Sans
     Malayalam — its file only downloads once Malayalam is on screen */
  --font:'Inter','Noto Sans Malayalam',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Outfit','Inter','Noto Sans Malayalam',-apple-system,'Segoe UI',sans-serif;
}

body{
  font-family:var(--font);background:var(--paper);color:var(--text);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overscroll-behavior-y:none;
}
::selection{background:rgba(201,165,106,.28)}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.022em;line-height:1.18}
h1{font-size:22px;letter-spacing:-.028em} h2{font-size:17px} h3{font-size:14.5px} h4{font-size:13px}
h1,h2,h3,h4{text-wrap:balance} p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{width:18px;height:18px;flex:none;vertical-align:middle}
:focus{outline:none}
:focus-visible{outline:2px solid rgba(12,12,14,.45);outline-offset:2px;border-radius:8px}
/* a dialog takes focus so Tab starts inside it; the sheet itself is not a control, so no ring around it */
.modal:focus-visible{outline:none}

/* quiet, native-feeling scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(12,12,14,.18) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(12,12,14,.16);border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(12,12,14,.3);background-clip:content-box}

/* ---------- typographic utilities ---------- */
.num{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.022em}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.muted{color:var(--text-dim)}
.small{font-size:12.5px}
.tiny{font-size:11.5px;color:var(--text-dim)}
.upper{font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--text-dim)}
.right{text-align:right} .center{text-align:center}
.grow{flex:1;min-width:0} .nowrap{white-space:nowrap}
.row{display:flex;align-items:center;gap:10px}
.col{display:flex;flex-direction:column;gap:10px}
.wrap{flex-wrap:wrap}
.hide{display:none !important}
.strike{text-decoration:line-through;opacity:.55}

/* ---------- the wordmark ---------- */
/* truend.in draws it live: Outfit 800, -0.033em, closed by a rounded-square
   brass stop on the baseline. Never a round dot, never another colour. */
.wm{font-family:var(--display);font-weight:800;letter-spacing:-.033em;display:inline-flex;align-items:baseline;gap:.08em}
.wm::after{content:"";display:inline-block;width:.217em;height:.217em;border-radius:.059em;background:var(--brass)}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--sb-w) 1fr;height:100vh;height:100dvh}

.sidebar{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface-3);color:var(--text-dim);border-right:1px solid var(--line);
}
.sidebar>*{position:relative}
.sb-brand{padding:20px 18px 14px}
.sb-logo{font-size:19px;color:var(--ink)}
.sb-sub{font-size:11.5px;color:var(--text-faint);margin-top:1px;font-weight:500}
.sb-shop{margin:2px 14px 12px;padding-top:12px;border-top:1px solid var(--line)}
.sb-shop b{color:var(--text);font-size:13px;display:block;font-weight:600}
.sb-shop .tiny{color:var(--text-faint);font-variant-numeric:tabular-nums}
.sb-nav{flex:1;overflow-y:auto;padding:2px 10px 12px}
.sb-sec{padding:16px 10px 6px;font-size:11.5px;color:var(--text-faint);font-weight:500}
.sb-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;cursor:pointer;
  font-size:13.5px;font-weight:500;color:var(--text-dim);position:relative;
  transition:color var(--fast) var(--ease),background var(--fast) var(--ease),transform var(--fast) var(--ease)}
.sb-item:hover{color:var(--text);background:rgba(12,12,14,.045)}
.sb-item:active{transform:scale(.985)}
.sb-item.on{color:var(--ink);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.sb-item.on::before{content:"";position:absolute;left:-10px;top:10px;bottom:10px;width:2px;
  border-radius:0 2px 2px 0;background:var(--brass)}
.sb-item svg{width:17px;height:17px;opacity:.62;transition:opacity var(--fast)}
.sb-item.on svg{opacity:1}
.sb-item .pill{margin-left:auto;background:rgba(12,12,14,.07);color:var(--text);border-radius:6px;
  padding:1px 7px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.sb-foot{border-top:1px solid var(--line);padding:10px}
.sb-user{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:9px;cursor:pointer;
  transition:background var(--fast) var(--ease)}
.sb-user:hover{background:rgba(12,12,14,.045)}
.sb-user b{color:var(--text);font-size:13px;display:block;line-height:1.3;font-weight:600}
.sb-user .tiny{color:var(--text-faint)}
.sb-user svg{opacity:.45}
.avatar{width:30px;height:30px;border-radius:8px;background:var(--ink);color:var(--on-ink);
  display:grid;place-items:center;font-weight:600;font-size:12.5px;flex:none;font-family:var(--display);
  box-shadow:none}

.main{overflow-y:auto;position:relative;display:flex;flex-direction:column;background:var(--paper)}

.chrome{position:sticky;top:0;z-index:30}
/* chrome and content share ONE centred measure, so nothing is stranded at
   the right edge of a wide window */
.bar-in{max-width:1448px;margin:0 auto;width:100%;padding:0 24px;display:flex;align-items:center;gap:14px}
.topbar{
  padding:14px 0;display:flex;min-height:62px;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:background var(--base) var(--ease),border-color var(--base) var(--ease),box-shadow var(--base) var(--ease);
}
.topbar.scrolled{border-bottom-color:var(--line)}
.topbar .sub{font-size:12.5px;color:var(--text-dim);margin-top:2px}
.view{padding:20px 24px 90px;flex:1;max-width:1448px;width:100%;margin:0 auto}
.view.flush{padding:0;max-width:none;margin:0}

/* content settles in on a route change only, never on a state re-render */
@media(prefers-reduced-motion:no-preference){
  .view.enter{animation:fade var(--fast) var(--ease)}
}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* mobile */
.mob-tabs{display:none}
.burger{display:none}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;inset:0 auto 0 0;width:var(--sb-w);z-index:100;
    transform:translateX(-102%);transition:transform var(--base) var(--ease);box-shadow:var(--e4)}
  body.nav-open .sidebar{transform:none}
  body.nav-open::after{content:"";position:fixed;inset:0;z-index:99;background:rgba(12,12,14,.34);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade var(--fast) var(--ease)}
  .burger{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
    border:1px solid var(--line-2);background:var(--surface);cursor:pointer;box-shadow:var(--e1)}
  .view{padding:16px 15px 104px}
  .topbar{padding:11px 0;min-height:56px}
  .bar-in{padding:0 15px}
  .mob-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;bottom:0;left:0;right:0;z-index:60;
    padding:7px 4px calc(7px + env(safe-area-inset-bottom));
    background:var(--surface);box-shadow:0 -1px 0 var(--line)}
  .mob-tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;font-size:10px;
    color:var(--text-faint);cursor:pointer;font-weight:500;border-radius:12px;
    transition:color var(--fast) var(--ease)}
  .mob-tab svg{width:20px;height:20px;transition:transform var(--base) var(--ease)}
  .mob-tab.on{color:var(--ink)}
  h1{font-size:18px}
}

/* sub-navigation: siblings of the current page, in the chrome. Deliberately
   pills, so it never reads as the content tabs inside a page body. */
.subnav{display:flex;padding:10px 0;overflow-x:auto;
  scrollbar-width:none;background:var(--paper);
  border-bottom:1px solid var(--line)}
.subnav::-webkit-scrollbar{display:none}
.subnav .bar-in{gap:6px}
.snav{padding:6px 14px;border-radius:var(--r-chip);font-size:13px;font-weight:500;color:var(--text-dim);
  cursor:pointer;white-space:nowrap;border:1px solid transparent;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.snav:hover{color:var(--text);background:rgba(12,12,14,.05)}
.snav.on{background:var(--surface);color:var(--text);font-weight:600;border-color:var(--line-2);box-shadow:var(--e1)}
@media(max-width:900px){.subnav{padding:9px 0}}

/* ---------- cards — content layer: opaque, crisp ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e1);
  transition:box-shadow var(--base) var(--ease),border-color var(--base) var(--ease),transform var(--base) var(--ease)}
.card.pad{padding:18px}
.card.click:hover{box-shadow:var(--e2);border-color:var(--line-2);transform:translateY(-1px)}
/* fixed height so two cards side by side always align, whether or not the
   header carries a button */
.card-h{display:flex;align-items:center;gap:10px;padding:0 18px;min-height:54px;
  border-bottom:1px solid var(--line)}
.card-h .btn.sm{margin-right:-6px}
.card-h h3{flex:1}
.card-b{padding:18px}
.card-b.flush{padding:0}

.grid{display:grid;gap:14px}
.card-b .grid,.modal-b .grid{row-gap:18px;column-gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g4,.g3,.g2{grid-template-columns:1fr}}

.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;
  box-shadow:var(--e1);position:relative;overflow:hidden;
  transition:background var(--fast) var(--ease)}
.kpi .lbl{font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--text-dim)}
.kpi .val{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;margin-top:8px;line-height:1.1}
.kpi .foot{font-size:12px;color:var(--text-dim);margin-top:6px}
.kpi.hot{border-color:var(--brass-line);
  background:var(--surface)}

/* a stat strip: the page-header numbers as ONE surface with hairline cells —
   one card, not a grid of floating tiles. */
.strip{display:flex;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--e1);overflow:hidden}
.strip .kpi{flex:1 1 190px;border:0;border-radius:0;box-shadow:none;background:transparent;
  position:relative;padding:15px 20px}
.strip .kpi::after{display:none}
.strip .kpi::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--line)}
.strip .kpi:first-child::before{display:none}
.strip .kpi:hover{transform:none;box-shadow:none;background:var(--surface-2)}
.strip .kpi .val{font-size:23px;margin-top:7px}
.strip .kpi.hot{background:var(--surface)}
@media(max-width:820px){
  .strip .kpi{flex:1 1 50%}
  .strip .kpi:nth-child(odd)::before{display:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 15px;height:var(--ctl);
  border-radius:11px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);
  font-weight:500;font-size:13.5px;cursor:pointer;white-space:nowrap;position:relative;box-shadow:var(--e1);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease),transform var(--fast) var(--ease)}
.btn:hover{background:var(--surface-2);border-color:var(--line-3);box-shadow:var(--e2)}
.btn:active{transform:scale(.97);box-shadow:var(--e1)}
.btn svg{width:16px;height:16px}
/* primary: flat ink — the highest-contrast thing on the screen */
.btn.primary,.btn.dark{background:#0C0C0E;border-color:#0C0C0E;color:var(--on-ink);font-weight:600;box-shadow:none}
.btn.primary:hover,.btn.dark:hover{background:#2A2A30}
.btn.danger{color:var(--danger);border-color:rgba(179,38,30,.3)}
.btn.danger:hover{background:var(--danger-fill);border-color:var(--danger)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--text-dim);box-shadow:none}
.btn.ghost:hover{background:rgba(12,12,14,.05);color:var(--text);box-shadow:none}
.btn.lg{height:var(--ctl-lg);font-size:14.5px;padding:0 20px;border-radius:13px}
.btn.xl{height:56px;font-size:16px;border-radius:15px;font-weight:600}
.btn.sm{height:var(--ctl-sm);font-size:12.5px;padding:0 11px;border-radius:9px;gap:6px}
.btn.sm svg{width:14px;height:14px}
.btn.block{width:100%}
.btn.icon{width:var(--ctl);padding:0}
.btn.sm.icon{width:var(--ctl-sm)}
.btn[disabled]{opacity:.35;pointer-events:none;box-shadow:none}

.chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;border-radius:var(--r-chip);
  border:1px solid var(--line-2);background:var(--surface);cursor:pointer;font-size:13px;font-weight:500;
  white-space:nowrap;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
    color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.chip:hover{border-color:var(--line-3);background:var(--surface-2)}
.chip:active{transform:scale(.97)}
.chip.on{background:#0C0C0E;border-color:#0C0C0E;color:var(--on-ink)}
.chip.on b{color:rgba(242,240,235,.62) !important}
.chip.sm{height:28px;padding:0 12px;font-size:12px}

/* State is carried by a dot, not by a coloured block behind the words. One
   badge shape everywhere: neutral ones are plain text, anything with meaning
   gets a 6px dot in front of it. Reads calmer and stops a table of "In stock"
   rows from looking like a bag of sweets. */
.badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;
  background:none;padding:0;color:var(--text-dim);white-space:nowrap;vertical-align:middle}
/* a dot needs a little air when it follows inline text */
.badge{margin-left:5px}
.badge:first-child{margin-left:0}
.badge+.badge{margin-left:12px}
.badge.green,.badge.amber,.badge.red,.badge.blue,.badge.orange,
.badge.gradeA,.badge.gradeB,.badge.gradeC{color:var(--text)}
.badge.green::before,.badge.amber::before,.badge.red::before,.badge.blue::before,
.badge.orange::before,.badge.gradeA::before,.badge.gradeB::before,.badge.gradeC::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none}
.badge.green::before{background:var(--good)}
.badge.amber::before{background:var(--warn)}
.badge.red::before{background:var(--danger)}
.badge.blue::before{background:var(--info)}
.badge.orange::before{background:var(--brass)}
.badge .dot{display:none}

/* ---------- forms ---------- */
/* Form rhythm: field groups inside a card or modal body always sit one gap
   apart. Previously each screen hand-rolled a margin-top and they disagreed. */
.card-b>.field+.field,.card-b>.field+.grid,.card-b>.grid+.field,.card-b>.grid+.grid,
.card-b>.field+.secrow,.card-b>.grid+.note,.card-b>.field+.note,
.modal-b>.field+.field,.modal-b>.field+.grid,.modal-b>.grid+.field,.modal-b>.grid+.grid,
.modal-b>.grid+.note,.modal-b>.field+.note{margin-top:var(--gap)}
.card-b>.btn:last-child,.card-b>.row:last-child{margin-top:var(--gap-lg)}
.card-b>.field-block+.field,.card-b>.grid+.field-block,.card-b>.field+.field-block,
.card-b>.field-block+.grid,.card-b>.field-block+.field-block{margin-top:var(--gap)}
/* a note that belongs to the field above it, not a block of its own */
.fieldnote{font-size:12px;margin-top:7px;color:var(--good);line-height:1.4}
.field{display:flex;flex-direction:column;gap:7px}
/* :not(.check) so a checkbox's own label is not styled as a field caption */
.field>label:not(.check){font-size:12px;font-weight:500;color:var(--text-dim)}
.input,.select,textarea.input{width:100%;height:var(--ctl);padding:0 13px;border:1px solid var(--line-2);
  border-radius:11px;background:var(--surface);outline:none;font-size:14px;
  box-shadow:inset 0 1px 2px rgba(12,12,14,.03);
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
textarea.input{height:auto;padding:11px 13px;resize:vertical;min-height:72px;line-height:1.55}
.input:hover:not(:disabled),.select:hover:not(:disabled),textarea.input:hover{border-color:var(--line-3)}
.input:focus,.select:focus,textarea.input:focus{border-color:var(--ink);
  box-shadow:0 0 0 3.5px rgba(12,12,14,.08),inset 0 1px 2px rgba(12,12,14,.03)}
.input::placeholder{color:var(--text-faint)}
.input.lg{height:52px;font-size:15.5px}
.input.err{border-color:var(--danger);box-shadow:0 0 0 3.5px rgba(179,38,30,.10)}
.input:disabled,.select:disabled{background:var(--surface-2);color:var(--text-dim);box-shadow:none}
.select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(12,12,14,0.45)' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.err-txt{color:var(--danger);font-size:12px;font-weight:500}
.searchbox{position:relative}
.searchbox>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  color:var(--text-faint);pointer-events:none;transition:color var(--fast) var(--ease)}
.searchbox:focus-within>svg{color:var(--ink)}
.searchbox .input{padding-left:38px}
.check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;user-select:none}
.check input{width:17px;height:17px;accent-color:var(--ink);flex:none;cursor:pointer}
.seg{display:inline-flex;background:var(--surface-3);border-radius:11px;padding:3px;gap:2px;
  box-shadow:inset 0 1px 2px rgba(12,12,14,.05)}
.seg button{border:1px solid transparent;background:transparent;padding:6px 14px;border-radius:8px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--text-faint);
  transition:background var(--base) var(--ease),color var(--fast) var(--ease),box-shadow var(--base) var(--ease)}
.seg button:hover{color:var(--text-dim)}
.seg button.on{background:var(--surface);color:var(--text);font-weight:600;border-color:var(--line);box-shadow:var(--e1)}

/* ---------- toolbar ---------- */
/* The search + filters + actions row that sits above almost every list.
   One component, so the eleven screens that have one all read alike. */
.toolbar{display:flex;align-items:center;gap:var(--gap-sm);flex-wrap:wrap;margin-bottom:var(--gap)}
.toolbar>*{flex:none}
.toolbar>.searchbox{flex:1 1 280px;min-width:200px}
.toolbar .chip{height:var(--ctl)}
.toolbar .select{width:auto;min-width:130px}
.toolbar .spacer{flex:1 1 auto;min-width:0}
.toolbar .seg{height:var(--ctl);align-items:center}
.toolbar .divider{width:1px;height:22px;background:var(--line-2);margin:0 2px}
@media(max-width:640px){
  .toolbar>.searchbox{flex:1 1 100%}
  .toolbar .select{flex:1 1 auto}
}

/* a heading inside a modal or card body */
.secrow{display:flex;align-items:center;gap:12px;margin:22px 0 10px;padding-bottom:9px;
  border-bottom:1px solid var(--line)}
.secrow .upper{flex:1}
.secrow:first-child{margin-top:0}
/* inside the POS pane and other flush contexts it still needs breathing room */
.pos-left .secrow{margin-top:20px}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;margin-bottom:var(--gap)}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:10px 2px;margin-right:18px;cursor:pointer;font-weight:500;font-size:13.5px;color:var(--text-dim);
  border-bottom:1.5px solid transparent;white-space:nowrap;margin-bottom:-1px;
  transition:color var(--fast) var(--ease),border-color var(--base) var(--ease)}
.tab:hover{color:var(--text)}
.tab.on{color:var(--text);border-bottom-color:var(--ink)}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto;overscroll-behavior-x:contain}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;padding:11px 14px;font-size:12px;
  color:var(--text-dim);font-weight:500;border-bottom:1px solid var(--line);background:var(--surface);white-space:nowrap}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
/* figures line up in columns; text keeps Inter's normal hyphens (tnum widened "Walk-in", "26-27") */
.tbl td.n{font-variant-numeric:tabular-nums}
/* breathe against the card edge */
.tbl th:first-child,.tbl td:first-child{padding-left:20px}
.tbl th:last-child,.tbl td:last-child{padding-right:20px}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background var(--fast) var(--ease)}
.tbl tbody tr.click{cursor:pointer}
.tbl tbody tr.click:hover{background:var(--surface-2)}
/* the trailing chevron is an affordance, not decoration — it earns its ink
   on hover, the same way list rows behave */
.tbl td:last-child>svg{color:var(--text-faint);opacity:.3;transition:opacity var(--fast) var(--ease),transform var(--base) var(--ease)}
.tbl tbody tr:hover td:last-child>svg{opacity:1;transform:translateX(2px)}
.tbl td.n,.tbl th.n{text-align:right}
/* the quiet second line inside a cell */
.tbl td .tiny{margin-top:2px;line-height:1.35}
.tbl td.n b,.tbl td b.num{font-family:var(--display);font-weight:600;letter-spacing:-.012em}
.tbl tfoot td{padding:13px 18px;font-weight:600;border-top:1px solid var(--line-2);background:var(--surface-2)}

.empty{padding:56px 24px;text-align:center;color:var(--text-dim);max-width:44ch;margin:0 auto}
.empty .ic{width:44px;height:44px;border-radius:13px;background:var(--surface-3);display:grid;
  place-items:center;margin:0 auto 14px;box-shadow:inset 0 0 0 1px rgba(12,12,14,.04)}
.empty .ic svg{width:19px;height:19px;color:var(--text-faint)}
.empty b{display:block;color:var(--text);font-size:15.5px;margin-bottom:6px;font-family:var(--display);
  font-weight:600;text-wrap:balance}
.empty .sub{font-size:13px;line-height:1.55;text-wrap:balance}
.skel{background:var(--surface-3);
  border-radius:6px;height:13px}

/* ---------- overlays: solid sheets on a dimmed page ---------- */
.scrim{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(12,12,14,.34);animation:fade var(--fast) var(--ease)}
.modal{width:100%;max-width:520px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);background:var(--surface);
  
  box-shadow:var(--e4);animation:fade var(--fast) var(--ease)}
.modal.wide{max-width:880px}
.modal.xwide{max-width:1080px}
.modal-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.modal-h h2{flex:1;font-size:16px}
.modal-b{padding:22px;overflow-y:auto;flex:1}
.modal-f{padding:15px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:640px){
  .scrim{padding:0;align-items:flex-end}
  .modal{max-width:none;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:94vh}
  .modal-f .btn{flex:1}
}
.x{width:var(--ctl-sm);height:var(--ctl-sm);border-radius:9px;border:0;background:rgba(12,12,14,.06);cursor:pointer;
  display:grid;place-items:center;color:var(--text-dim);transition:background var(--fast),color var(--fast)}
.x:hover{background:rgba(12,12,14,.11);color:var(--text)}

#toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:500;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{padding:12px 18px;border-radius:14px;font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:10px;
  max-width:90vw;color:var(--on-ink);background:#1B1B1F;
  
  box-shadow:var(--e4);animation:fade var(--fast) var(--ease)}
.toast svg{width:16px;height:16px;opacity:.65}
.toast.green svg{color:#5FD79B;opacity:1}
.toast.red svg{color:#F09A94;opacity:1}
.toast.amber svg{color:var(--brass);opacity:1}

/* ---------- POS ---------- */
.pos{display:grid;grid-template-columns:1fr 396px;height:calc(100vh - 62px);overflow:hidden}
.pos-left{overflow-y:auto;padding:20px 22px 40px;border-right:1px solid var(--line)}
.pos-right{overflow-y:auto;background:var(--surface);display:flex;flex-direction:column;
  box-shadow:-1px 0 0 var(--line),-24px 0 48px -40px rgba(12,12,14,.4)}
@media(max-width:1000px){
  .pos{grid-template-columns:1fr;height:auto;overflow:visible}
  .pos-left{border-right:0;padding:16px 15px 4px}
  .pos-right{border-top:1px solid var(--line);box-shadow:none}
}
.scan{position:relative}
.scan .input{height:58px;font-size:15.5px;padding-left:48px;border-radius:15px;background:var(--surface);
  box-shadow:var(--e1),inset 0 1px 2px rgba(12,12,14,.03)}
.scan .input:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(12,12,14,.07),var(--e2)}
.scan>svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:19px;height:19px;
  color:var(--text-faint);transition:color var(--fast) var(--ease)}
.scan:focus-within>svg{color:var(--ink)}
/* the results popover: a solid sheet above content */
.results{margin-top:10px;border-radius:var(--r-md);overflow:hidden;max-height:340px;overflow-y:auto;
  background:var(--surface);
  box-shadow:var(--e3);animation:fade var(--fast) var(--ease)}
.res{display:flex;align-items:center;gap:13px;padding:12px 15px;border-bottom:1px solid var(--line);cursor:pointer;
  transition:background var(--fast) var(--ease)}
.res:last-child{border-bottom:0}
.res:hover{background:rgba(12,12,14,.045)}
.res .nm{font-weight:500}
.thumb{width:38px;height:38px;border-radius:11px;background:var(--surface-3);display:grid;place-items:center;
  font-size:10.5px;font-weight:600;color:var(--text-faint);flex:none;overflow:hidden;
  font-family:var(--display);letter-spacing:.04em;box-shadow:inset 0 0 0 1px rgba(12,12,14,.05)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb svg{width:16px;height:16px}
.cart-line{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start;
  animation:fade var(--fast) var(--ease)}
.cart-line .nm{font-weight:500;font-size:13.5px}
.qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:9px;overflow:hidden;height:var(--ctl-sm);background:var(--surface)}
.qty button{width:30px;height:30px;border:0;background:transparent;cursor:pointer;font-size:15px;color:var(--text-dim);
  transition:background var(--fast),color var(--fast)}
.qty button:hover{background:var(--surface-3);color:var(--text)}
.qty span{min-width:26px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;font-size:13px}
.sumrow{display:flex;justify-content:space-between;padding:5px 0;font-size:13px}
.sumrow.big{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.025em;
  padding-top:12px;margin-top:8px;border-top:1px solid var(--line)}
.paybar{position:sticky;bottom:0;padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:var(--surface);box-shadow:0 -1px 0 var(--line)}

/* ---------- wizard ---------- */
.steps{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.step{display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:var(--r-chip);
  background:var(--surface-3);font-size:12.5px;font-weight:500;color:var(--text-dim);white-space:nowrap;cursor:pointer;
  transition:background var(--base) var(--ease),color var(--fast) var(--ease),box-shadow var(--base) var(--ease)}
.step .n{width:19px;height:19px;border-radius:50%;background:var(--surface);color:var(--text-faint);
  display:grid;place-items:center;font-size:10.5px;font-weight:600;border:1px solid var(--line-2)}
.step.on{background:#0C0C0E;color:var(--on-ink)}
.step.on .n{background:rgba(242,240,235,.2);color:var(--on-ink);border-color:transparent}
.step.done{background:var(--surface);color:var(--text);border:1px solid var(--line-2);box-shadow:var(--e1)}
.step.done .n{background:var(--good);color:#fff;border-color:transparent}
.drop{border:1px dashed var(--line-3);border-radius:var(--r-md);text-align:center;cursor:pointer;
  background:var(--surface-2);position:relative;overflow:hidden;height:168px;display:grid;place-items:center;
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease),transform var(--fast) var(--ease)}
.drop:hover{border-color:var(--ink);background:var(--surface-3);transform:translateY(-1px)}
.drop svg{color:var(--text-faint)}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drop .lbl{font-size:11px;font-weight:500;color:var(--text-faint);margin-top:6px}
.drop.has .lbl{position:absolute;bottom:0;left:0;right:0;padding:6px;margin:0;color:#fff;
  background:rgba(12,12,14,.62)}
.cond{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}

/* ---------- kanban ---------- */
.kan{display:grid;grid-template-columns:repeat(5,minmax(196px,1fr));gap:10px;overflow-x:auto;padding-bottom:10px}
.kcol{background:rgba(12,12,14,.022);border:1px solid var(--line);border-radius:var(--r-md);
  display:flex;flex-direction:column;min-height:220px;transition:background var(--fast),border-color var(--fast)}
.kcol.over{border-color:var(--ink);background:rgba(12,12,14,.05)}
.kcol-h{padding:11px 13px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;color:var(--text)}
.kcol-h .c{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text-faint)}
.kcards{padding:10px;display:flex;flex-direction:column;gap:10px;flex:1}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:12px;cursor:pointer;
  box-shadow:var(--e1);transition:box-shadow var(--base) var(--ease),transform var(--base) var(--ease),border-color var(--fast)}
.kcard:hover{border-color:var(--line-2);box-shadow:var(--e2);transform:translateY(-2px)}
.kcard.drag{opacity:.35;transform:scale(.97)}

/* ---------- misc ---------- */
.timeline{position:relative;padding-left:20px}
.timeline::before{content:"";position:absolute;left:4px;top:7px;bottom:7px;width:1px;background:var(--line-2)}
.tl{position:relative;padding:0 0 18px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:-20px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--ink);box-shadow:0 0 0 3px var(--surface)}
.tl.dim::before{background:var(--surface);border:1px solid var(--line-3)}

.bar-chart{display:flex;align-items:flex-end;gap:8px;height:158px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.bar{width:100%;max-width:46px;margin:0 auto;border-radius:7px 7px 3px 3px;min-height:2px;
  background:var(--ink);
  transition:filter var(--fast) var(--ease);transform-origin:bottom}
.bar:hover{filter:brightness(1.4)}
.hbar{height:6px;border-radius:3px;background:var(--ink);min-width:2px;opacity:.82;
  transition:width var(--slow) var(--ease)}
.hbar.g{background:var(--good)} .hbar.b{background:var(--info)} .hbar.a{background:var(--brass-deep)}
.split-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--surface-3);gap:2px}
.split-bar>div{border-radius:2px;transition:width var(--slow) var(--ease)}

.wa{background:var(--surface-2);border:1px solid var(--line);border-left:2px solid var(--good);
  border-radius:0 12px 12px 0;padding:14px 16px;font-size:13.5px;white-space:pre-wrap;line-height:1.6;color:var(--text)}
.qr-svg{display:block;flex:none;background:#fff;border:1px solid var(--line-2);border-radius:4px}
.note{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  font-size:12.5px;color:var(--text-dim);line-height:1.6}
.note b{color:var(--text)}
.badge.gradeA::before{background:var(--good)}
.badge.gradeB::before{background:var(--info)}
.badge.gradeC::before{background:var(--warn)}
.kbd{display:inline-block;border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;font-size:10.5px;
  font-weight:500;background:var(--surface-2);min-width:20px;text-align:center;color:var(--text-dim);font-family:var(--font)}
.btn.primary .kbd,.btn.dark .kbd,.chip.on .kbd{background:rgba(242,240,235,.15);border-color:transparent;color:rgba(242,240,235,.78)}
.lock{opacity:.4;pointer-events:none}
.click{cursor:pointer}

/* ---------- sign-in and first-run setup ----------
   Left: ink panel that says what the app does (features, a sample bill, plans), or on
   setup the top of the shop's own bill, filling in as they type. Right: the form. */
.auth{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);background:var(--paper)}
.auth-brand{position:sticky;top:0;height:100dvh;overflow-y:auto;color:var(--on-ink);background:#0C0C0E;scrollbar-width:none}
.auth-brand::-webkit-scrollbar{display:none}
.ab-in{min-height:100%;display:flex;flex-direction:column;gap:34px;padding:44px 52px 34px;max-width:780px}
.ab-top{display:flex;align-items:baseline;gap:10px}
.ab-biz{font-size:13px;font-weight:500;color:rgba(242,240,235,.5)}
.ab-hero{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:34px;align-items:center}
.auth-brand .lede{margin:0;font-family:var(--display);font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1.12;color:var(--on-ink);text-wrap:balance}
.auth-brand .sub{margin:14px 0 0;max-width:46ch;font-size:14.5px;line-height:1.6;color:rgba(242,240,235,.6)}
/* the paper bill on the ink panel */
.ab-bill{background:#F6F5F2;color:#0C0C0E;border-radius:14px;padding:16px 16px 14px;font-size:12px;line-height:1.35}
.ab-bill-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:10px;margin-bottom:2px;border-bottom:1px solid rgba(12,12,14,.12)}
.ab-bill-h b{font-family:var(--display);font-size:14px;font-weight:600}
.ab-bill-h span{font-size:11.5px;color:rgba(12,12,14,.55)}
.ab-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed rgba(12,12,14,.14)}
.ab-line b{display:block;font-size:12.5px;font-weight:600}
.ab-line span{font-size:11px;color:rgba(12,12,14,.55)}
.ab-line>.num{font-size:12.5px;color:#0C0C0E;white-space:nowrap}
.ab-sum{display:flex;justify-content:space-between;padding:8px 0 2px;color:rgba(12,12,14,.6)}
.ab-tot{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0 10px;font-family:var(--display);font-size:13px;font-weight:600}
.ab-tot b{font-size:19px;font-weight:600}
.ab-pay{display:flex;flex-wrap:wrap;gap:6px}
.ab-pay span{padding:3px 9px;border-radius:7px;background:rgba(12,12,14,.06);font-size:11px;font-weight:500}
.ab-feats{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin:0}
.ab-feats>div{padding:14px 0 15px;border-top:1px solid rgba(242,240,235,.1)}
.ab-feats dt{font-size:14px;font-weight:600;color:var(--on-ink)}
.ab-feats dd{margin:4px 0 0;font-size:13px;line-height:1.5;color:rgba(242,240,235,.55)}
.ab-plans{display:flex;flex-wrap:wrap;gap:12px 40px;padding-top:18px;border-top:1px solid rgba(242,240,235,.1);font-size:13.5px;color:rgba(242,240,235,.68)}
.ab-plans b,.ab-plans .num{color:var(--on-ink);font-weight:600}
.ab-pl-s{display:block;margin-top:2px;font-size:12.5px;color:rgba(242,240,235,.46)}
.ab-trial{flex-basis:100%;font-size:12.5px;color:rgba(242,240,235,.46)}
.auth-brand .foot{margin-top:auto;font-size:12px;color:rgba(242,240,235,.32)}
.ab-k{margin-bottom:12px;font-size:13px;font-weight:600;color:rgba(242,240,235,.62)}
.ab-next{margin:0;padding-left:18px;font-size:13.5px;line-height:1.55;color:rgba(242,240,235,.62)}
.ab-next li{padding:4px 0}
.ab-next li::marker{color:rgba(242,240,235,.38)}
.auth-brand .su-prev+.sub{margin-top:18px}
/* the shop's own bill header (setup) */
.pv-shop{margin-top:12px;font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em}
.pv-l{margin-top:3px;font-size:12px;color:rgba(12,12,14,.62);overflow-wrap:anywhere}
.ab-bill .ph{color:rgba(12,12,14,.3)}
.pv-note{margin-top:7px;font-size:11px;color:rgba(12,12,14,.55)}
.pv-rows{display:grid;gap:7px;margin-top:16px}
.pv-rows span{height:8px;border-radius:4px;background:rgba(12,12,14,.07)}
.pv-rows span:nth-child(2){width:78%}
.pv-rows span:nth-child(3){width:52%}
.su-prev-m{display:none;margin:0 0 6px;border:1px solid var(--line)}

/* the form side */
.auth-form{display:flex;align-items:center;justify-content:center;padding:48px 32px}
.auth-form .inner{width:100%;max-width:396px}
.auth-wm{margin-bottom:30px;font-size:20px}
.auth-h{font-size:28px;line-height:1.15;letter-spacing:-.03em;text-wrap:balance}
.auth-sub{margin:10px 0 26px;font-size:14.5px;line-height:1.55;color:var(--text-dim)}
.ph-in{display:flex;align-items:stretch;border:1px solid var(--line-2);border-radius:13px;background:var(--surface);transition:border-color .12s,box-shadow .12s}
.ph-in:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(12,12,14,.08)}
.ph-in.err{border-color:var(--danger)}
.ph-cc{display:flex;align-items:center;padding:0 14px;border-right:1px solid var(--line);font-family:var(--display);font-weight:600;color:var(--text-dim)}
.ph-in .input{flex:1;min-width:0;border:0;box-shadow:none;background:transparent;font-family:var(--display);font-size:17px;letter-spacing:.02em}
.ph-in .input:focus{box-shadow:none;outline:none}
.auth-alt{margin-top:10px}
.auth-steps{margin-top:32px;padding-top:22px;border-top:1px solid var(--line)}
.auth-steps-h{margin-bottom:14px;font-size:14px;font-weight:600}
.auth-steps ol{display:grid;gap:13px;margin:0;padding:0;list-style:none;counter-reset:st}
.auth-steps li{display:grid;grid-template-columns:24px 1fr;column-gap:12px;counter-increment:st}
.auth-steps li::before{content:counter(st);grid-row:span 2;display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--line-2);border-radius:50%;
  font-size:11.5px;font-weight:600;color:var(--text-dim)}
.auth-steps li b{font-size:13.5px;font-weight:600}
.auth-steps li span{font-size:13px;line-height:1.5;color:var(--text-dim)}
.auth-fine{margin-top:16px;font-size:12.5px;line-height:1.5;color:var(--text-dim)}
.auth-m-feats,.auth-m-h{display:none}
/* the code: one real input over six boxes */
.otp{position:relative}
.otp-cells{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.otp-c{display:grid;place-items:center;height:58px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);
  font-family:var(--display);font-size:24px;font-weight:600;transition:border-color .12s,box-shadow .12s}
.otp:focus-within .otp-c.cur{border-color:var(--ink);box-shadow:0 0 0 3px rgba(12,12,14,.08)}
.otp:focus-within .otp-c.cur:empty::after{content:"";width:2px;height:24px;background:var(--ink);animation:tb-caret 1s steps(1) infinite}
.otp.err .otp-c{border-color:var(--danger)}
.otp-in{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;font-size:16px;cursor:text}
@keyframes tb-caret{50%{opacity:0}}
.auth-wait{height:3px;margin-top:26px;overflow:hidden;border-radius:2px;background:var(--line)}
.auth-wait span{display:block;width:40%;height:100%;background:var(--ink);animation:tb-wait 1.2s ease-in-out infinite}
@keyframes tb-wait{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@media(prefers-reduced-motion:reduce){.auth-wait span{width:100%;animation:none}.otp-c.cur:empty::after{animation:none}}
/* setup: sections and plan cards */
.su-sec{margin:28px 0 14px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;font-weight:600}
.auth-sub+.su-prev-m+.su-sec{margin-top:6px;padding-top:0;border-top:0}
.su-plan{gap:6px;padding:14px 15px}
.su-plan .su-price{font-size:12.5px}
.su-plan .su-price .num{display:inline;width:auto;font-size:22px;letter-spacing:-.02em;color:var(--text)}
.su-plan ul{display:grid;gap:4px;margin:6px 0 0;padding:0;list-style:none}
.su-plan li{position:relative;padding-left:12px;font-size:12.5px;line-height:1.4;color:var(--text-dim)}
.su-plan li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--text-faint)}

@media(max-width:1180px){
  .ab-hero{grid-template-columns:1fr}
  .ab-hero .ab-bill{max-width:340px}
}
@media(max-width:860px){
  .auth{grid-template-columns:1fr}
  .auth-brand{display:none}
  .auth-form{align-items:flex-start;padding:30px 20px 44px}
  .auth-wm{margin-bottom:24px}
  .auth-h{font-size:25px}
  .su-prev-m{display:block}
  .auth-sub+.su-prev-m+.su-sec{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
  .auth-m-h{display:block;margin:34px 0 4px;font-size:15px;font-weight:600}
  .auth-m-feats{display:grid;gap:0;margin:8px 0 0}
  .auth-m-feats>div{padding:12px 0;border-top:1px solid var(--line)}
  .auth-m-feats dt{font-size:13.5px;font-weight:600}
  .auth-m-feats dd{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-dim)}
}
@media(max-width:420px){.otp-cells{gap:6px}.otp-c{height:52px;font-size:22px}}

/* ---------- home ---------- */
/* One stat strip, then two quiet lists. */
.home{max-width:none}

/* rows stretch, so module edges align no matter how the data moves */
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;margin-top:16px}
.home-grid>*{min-width:0}
.home-grid>.card{display:flex;flex-direction:column}
.home-grid>.card>.card-b{flex:1}
/* when a card stretches to match its row, its rows share the extra space
   rather than leaving a gap under the last hairline */
.home-grid .card-b.flush{display:flex;flex-direction:column}
.home-grid .card-b.flush>div{flex:1 1 auto}
@media(max-width:980px){.home-grid{grid-template-columns:1fr}}

/* rows, not nested boxes — hairlines carry the structure inside a card */
.qrow{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background var(--fast) var(--ease)}
.qrow:last-child{border-bottom:0}
.qrow:hover{background:var(--surface-2)}
.qrow-t{font-size:14px;font-weight:500}
.qrow-s{font-size:12px;color:var(--text-dim);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow .amt{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;text-align:right;white-space:nowrap}
.qrow .chev{color:var(--text-faint);opacity:0;transition:opacity var(--fast) var(--ease),transform var(--base) var(--ease)}
.qrow:hover .chev{opacity:1;transform:translateX(3px)}
.qrow .thumb{width:32px;height:32px;font-size:12px;color:var(--text-dim)}
/* one small dot carries urgency — no tinted icon squares */
.tone{width:7px;height:7px;border-radius:50%;flex:none;background:var(--line-3)}
.tone.good{background:var(--good);box-shadow:0 0 0 3px var(--good-fill)}
.tone.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warn-fill)}
.tone.danger{background:var(--danger);box-shadow:0 0 0 3px var(--danger-fill)}
.qcalm{padding:22px 18px;color:var(--text-dim);font-size:13.5px;display:flex;align-items:center;gap:9px}
.qcalm svg{width:16px;height:16px;color:var(--good)}

@media(max-width:640px){.qrow .chev{display:none}}

/* ---------- marketplace listing card ---------- */
/* a faithful preview of the Truend app / truend.in card, so nothing is
   published blind */
.tr-card{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);
  box-shadow:var(--e1);max-width:340px}
.tr-shot{position:relative;aspect-ratio:4/3;background:var(--surface-3);display:grid;place-items:center;overflow:hidden}
.tr-shot img{width:100%;height:100%;object-fit:cover}
.tr-noshot{text-align:center;color:var(--text-faint);font-size:12px}
.tr-noshot svg{width:22px;height:22px;margin-bottom:6px}
.tr-grade{position:absolute;top:10px;left:10px;background:var(--surface);border-radius:var(--r-chip);
  padding:4px 10px;box-shadow:var(--e1)}
.tr-count{position:absolute;bottom:10px;right:10px;background:rgba(12,12,14,.7);color:var(--on-ink);
  border-radius:var(--r-chip);padding:3px 9px;font-size:11px;font-weight:500}
.tr-body{padding:14px 16px 16px}
.tr-card-title{font-size:15px;font-weight:600;font-family:var(--display);letter-spacing:-.015em;line-height:1.25}
.tr-desc{font-size:12.5px;color:var(--text-dim);line-height:1.55;margin-top:10px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tr-inc{font-size:11px;color:var(--text-dim);background:var(--surface-3);border-radius:var(--r-chip);padding:3px 9px}
.tr-seller{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);margin-top:14px;padding-top:12px}

/* a button that is waiting on the network */
.spin{width:14px;height:14px;border-radius:50%;flex:none;display:inline-block;
  border:2px solid rgba(242,240,235,.3);border-top-color:var(--on-ink);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn .spin{margin-right:2px}

/* ---------- barcodes & labels ---------- */
/* the global svg rule sizes icons; a barcode is not an icon */
svg.bc{width:100%;height:40px;flex:none;vertical-align:top}
.bc-block{display:inline-block;text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px 8px;box-shadow:var(--e1)}
.bc-txt{font-variant-numeric:tabular-nums;letter-spacing:.18em;font-size:11px;font-weight:600;
  margin-top:4px;color:#0C0C0E}

/* 38 x 25 mm thermal sticker, laid out as a cuttable sheet */
.lbl-sheet{display:flex;flex-wrap:wrap;gap:3mm;width:190mm;padding:5mm;background:#fff}
.lbl38{width:38mm;height:25mm;border:1px dashed #c8c8c8;border-radius:1mm;padding:1.2mm 1.5mm;
  display:flex;flex-direction:column;color:#000;overflow:hidden}
.lbl-shop{font-size:5pt;letter-spacing:.09em;text-transform:uppercase;color:#555}
.lbl-name{font-size:7.2pt;font-weight:600;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbl-sub{font-size:5.2pt;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.5mm}
.lbl38 svg.bc{width:100%;height:8.5mm;display:block}
.lbl-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:.5mm;gap:2mm}
.lbl-code{font-size:5.4pt;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.lbl-price{font-family:var(--display);font-size:8.5pt;font-weight:600;white-space:nowrap}

/* ---------- counter safety (Phase 1) ---------- */
.res.on{background:rgba(12,12,14,.07);box-shadow:inset 3px 0 0 var(--ink)}
.res-msg{padding:10px 15px;font-size:12.5px;font-weight:600;border-bottom:1px solid var(--line);background:var(--warn-fill);color:var(--warn)}
.restored{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:12.5px;font-weight:500;
  background:var(--warn-fill);color:var(--warn);border-bottom:1px solid var(--line)}
.restored .btn{margin-left:auto;flex:none}
.cart-line .below{color:var(--danger);font-weight:600}
.warnbox{border-color:var(--danger);background:var(--danger-fill)}

/* ---------- consistency pass (Phase 2/3) ---------- */
/* money: one family (Outfit), tabular, three sizes */
.amount-xl{font-family:var(--display);font-size:38px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.amount-lg{font-family:var(--display);font-size:28px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.amount-md{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.sumrow.big{font-size:22px}
.sumrow.sub{font-weight:600;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
/* the device's identity is what the cashier checks: full-strength ink, mono */
.cart-id{font-family:ui-monospace,'SF Mono',Consolas,monospace;font-size:12.5px;font-weight:600;color:var(--text);
  letter-spacing:.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.cart-id span{font-family:var(--font);font-size:10.5px;font-weight:600;color:var(--text-dim);letter-spacing:.04em;margin-right:6px}
.cell-id{font-family:ui-monospace,'SF Mono',Consolas,monospace;font-size:12.5px;font-weight:500;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cell-id div{color:var(--text-dim);font-weight:400}
/* a discount is a number, not an accent */
.disc{color:var(--text);font-weight:600}
/* applied state: outlined, so it never competes with the ink Payment button */
.btn.applied{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-weight:600}
/* counter feedback that waits for the cashier */
.scan-note{margin-top:8px;padding:9px 13px;border-radius:var(--r-sm);font-size:13px;font-weight:500}
.scan-note.err{background:var(--danger-fill);color:var(--danger)}
.scan-note.warn{background:var(--warn-fill);color:var(--warn)}
.err-txt:empty,.adj-prev:empty{display:none}
.adj-prev{margin:8px 0 6px;font-weight:600;font-variant-numeric:tabular-nums}
.added-note{margin-bottom:14px;padding:9px 13px;border-radius:var(--r-sm);background:var(--good-fill);color:var(--good);font-weight:500;font-size:13px}
/* payment rows: the mode is a plain label — nothing looks "paid" before it is */
.pay-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line)}
.pay-row:last-child{border-bottom:0}
.pay-row .input{height:38px}
.pay-mode{min-width:52px;font-size:13px;font-weight:600;color:var(--text)}
/* fold-away margin on the invoice screen */
.margin-fold{margin-top:12px}
.margin-fold summary{cursor:pointer;font-size:13px;font-weight:500;color:var(--text-dim);padding:6px 2px;width:max-content}
.margin-fold[open] summary{margin-bottom:8px}
.list-cap{margin-top:10px;font-size:12.5px;color:var(--text-dim)}
/* keyboard rows keep their focus ring inside the card's rounded clip */
[role="button"]:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.chip[role="button"]:focus-visible{outline-offset:2px}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* payment summary: due, received, then either what is owed or the change */
.pay-sum{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);padding:6px 14px}
.ps-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;font-size:13.5px}
.ps-row+.ps-row{border-top:1px solid var(--line)}
.ps-row b{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums;font-size:15px}
.ps-row.owe,.ps-row.bad{color:var(--danger);font-weight:600}
.ps-row.change{color:var(--good);font-weight:600}
.ps-row.change b,.ps-row.owe b{font-size:20px}
.ps-row.paid{color:var(--good);font-weight:600}
.cash-quick{margin-top:10px;gap:6px;align-items:center}

/* ---------- New Bill (2026-10-15) ----------
   Left: the scanner's workspace. Right: the receipt being written —
   customer, scrolling lines, and a footer the lines can never slide under. */
.pos-left{display:flex;flex-direction:column}
.pos-sec{margin:20px 0 8px}

/* the last thing added, large enough to read against the box */
.last{margin-top:16px;padding:16px 18px 18px;border-radius:var(--r-lg);background:var(--surface-2);
  border:1px solid rgba(255,255,255,.85);box-shadow:var(--e-card);
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:baseline}
.last-k{grid-column:1;font-size:12px;font-weight:500;color:var(--text-dim)}
.last-pr{grid-column:2;grid-row:1 / span 2;align-self:start;text-align:right;font-family:var(--display);font-size:24px;font-weight:600;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1.1}
.last-pr span{display:block;font-family:var(--font);font-size:12px;font-weight:500;color:var(--text-dim);letter-spacing:0;margin-top:2px}
.last-nm{grid-column:1;font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.022em;line-height:1.2;margin-top:4px}
.last-sub{grid-column:1 / -1;font-size:13px;color:var(--text-dim);margin-top:2px}
.last-ids{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.last-id{font-family:ui-monospace,'SF Mono',Consolas,monospace;font-size:21px;font-weight:600;letter-spacing:.06em;
  color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.last-id span{display:block;font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--text-dim);margin-bottom:2px}

/* quick add: an even grid of name + price, never a ragged row of pills */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.chip.qa{height:auto;min-height:54px;padding:9px 12px;box-shadow:none;border-radius:var(--r-md);white-space:normal;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:4px;text-align:left}
.qa-nm{font-size:13px;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qa-nm svg{width:14px;height:14px;margin:-2px 6px 0 0;color:var(--text-dim)}
.qa-pr{font-family:var(--display);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-dim)}
.chip.qa:hover .qa-pr{color:var(--text)}

/* shortcuts sit at the foot of the pane, out of the way until wanted */
.pos-keys{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--text-dim)}
.pos-keys .pk{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pos-left .card{margin-top:20px}

/* the receipt */
.pos-right{overflow:hidden}
.rc-cust{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);flex:none}
.rc-lines{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.rc-foot{flex:none;border-top:1px solid var(--line)}
.rc-adj{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px}
.rc-note{flex-basis:100%;font-size:12px;color:var(--text-dim)}
.rc-sum{padding:8px 16px 10px;border-top:1px solid var(--line);background:rgba(255,255,255,.5)}
.rc-sum .sumrow{padding:3px 0}
.rc-tax summary{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:13px;cursor:pointer;list-style:none;color:var(--text-dim)}
.rc-tax summary::-webkit-details-marker{display:none}
.rc-tax summary span:first-child::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 2px 8px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--fast) var(--ease)}
.rc-tax[open] summary span:first-child::after{transform:rotate(45deg);margin-bottom:4px}
.rc-tax summary .mono{font-weight:500;color:var(--text)}
.rc-tax[open]{padding-bottom:4px}
.rc-tax .sumrow{padding:2px 0 2px 12px;font-size:12.5px}
.rc-sum .sumrow.big{margin-top:6px;padding-top:10px}

/* a receipt line: name and amount, then detail, identity and actions */
.cart-line{display:block;padding:12px 16px;border-bottom:1px solid var(--line);animation:none} /* only the line just added moves (below); the rest never flicker on a re-render */
.cl-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cl-top .nm{font-weight:600;font-size:13.5px;min-width:0}
.cl-amt{font-family:var(--display);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:-.015em;white-space:nowrap}
.cl-sub{font-size:12px;color:var(--text-dim);margin-top:2px}
.cl-meta{margin-left:auto;font-size:11.5px;color:var(--text-dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.cl-acts{display:flex;align-items:center;gap:4px;margin-top:6px;margin-left:-8px}
.cl-one{font-size:12px;color:var(--text-dim);padding:0 8px}
.cl-del{color:var(--danger)}
.cl-acts .qty{margin-left:8px;margin-right:4px}

/* the line just added lights up where it landed, then settles */
@media(prefers-reduced-motion:no-preference){
  .cart-line.fresh,.last.fresh{animation:landed 1.2s var(--ease)}
}
@keyframes landed{from{background-color:var(--brass-fill)}to{background-color:transparent}}
.last.fresh{animation-name:landed-card}
@keyframes landed-card{from{box-shadow:var(--e-card),0 0 0 2px var(--brass-line)}to{box-shadow:var(--e-card),0 0 0 2px transparent}}

/* Pay: the label, the amount and its key, in one deliberate button */
.pay-go{justify-content:space-between;gap:10px;padding:0 18px}
.pay-go b{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-left:auto}

/* short screens: let the whole receipt scroll rather than squeeze the lines to nothing */
@media(min-width:1001px) and (max-height:620px){
  .pos-right{overflow-y:auto}
  .rc-lines{flex:none;overflow:visible}
}
@media(max-width:1000px){
  /* one column: the panes stack at their natural height (pos.js sets a desktop height inline) */
  .pos{height:auto !important}
  .pos-right{overflow:visible}
  .rc-lines{overflow:visible}
  .pos-keys{display:none}
}
@media(max-width:900px){
  .pos{padding-bottom:calc(76px + env(safe-area-inset-bottom))}  /* clear of the fixed tab bar */
}

/* pilot runs: said on every screen and on every printed document */
.pilot-bar{position:sticky;top:0;z-index:31;margin:0 24px;padding:7px 14px;border-radius:0 0 var(--r-sm) var(--r-sm);
  background:var(--warn);color:#fff;font-size:12.5px;font-weight:600;text-align:center}

/* ---------- print ---------- */
#print-root{display:none}
@media print{
  body{background:#fff}
  .shell,.mob-tabs,#toasts,#modal-root,.gs-drop,.ntf{display:none !important}
  #print-root{display:block !important}
  @page{margin:8mm}
}
/* Printed documents. One ink: a thermal head is black on white and an office laser not much
   richer, so hierarchy comes from size, weight and solid rules. The A4 may use fine rules
   (a laser draws them); the thermal never uses greys or hairlines, which dither. */
.doc{font-family:'Inter',Helvetica,Arial,sans-serif;color:#000;background:#fff;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
/* figures line up; text keeps normal hyphens (tnum widens the "-" in 26-27) */
.doc .rt,.a4-pay b,.a4-srow,.a4-grand,.a4-hsn td,.doc.t80 .li>span:last-child{font-variant-numeric:tabular-nums}
.doc .ctr{text-align:center}
.doc .rt{text-align:right}
.doc .cap{display:block;text-transform:uppercase;letter-spacing:.14em;font-weight:600;font-size:6.6pt;color:#555;margin-bottom:2px}
.doc .test-band{border:2px solid #000;padding:2mm;margin-bottom:3mm;text-align:center;font-weight:800;letter-spacing:.08em;font-size:9pt}

/* ---- A4 ---- */
/* a whole sheet: A4 less the 8mm print margin (210 × 297 → 194 × 281, kept at 279 so no printer
   rounds it onto a second page). The signature and the
   warranty slip sit at its foot, as on a printed pad; a long bill just fills the space */
.doc.a4{position:relative;width:190mm;min-height:279mm;display:flex;flex-direction:column;padding:11mm 10mm 9mm;margin:0 auto;font-size:8.5pt;line-height:1.4}
.doc.a4 table{width:100%;border-collapse:collapse}
.a4-comp{text-align:center;font-size:8.5pt;font-weight:700;border:1px solid #000;padding:3px 6px;margin-bottom:8px}
.a4-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:9px}
.a4-logo{display:block;height:13mm;max-width:50mm;object-fit:contain;margin-bottom:5px}
.a4-name{font-family:'Outfit',sans-serif;font-size:23pt;font-weight:700;letter-spacing:-.025em;line-height:1}
.a4-addr{margin-top:5px;color:#333;max-width:105mm}
.a4-doc{text-align:right;flex:none}
.a4-kind{font-size:7.4pt;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.a4-no{font-family:'Outfit',sans-serif;font-size:17pt;font-weight:600;letter-spacing:-.01em;line-height:1.1;margin-top:3px}
.a4-when{color:#333;margin-top:2px}
/* the paperwork strip: ruled top and bottom, cells split by fine rules */
.a4-facts{display:flex;border-top:2px solid #000;border-bottom:1px solid #000}
.a4-facts>div{flex:1 1 auto;padding:5px 9px;border-left:1px solid #ccc;font-size:8pt;white-space:nowrap}
.a4-facts>div:first-child{border-left:0;padding-left:0}
.a4-facts span{display:block;font-size:6.4pt;letter-spacing:.12em;text-transform:uppercase;color:#555;margin-bottom:1px}
.a4-parties{display:flex;gap:18px;padding:10px 0 12px}
.a4-parties>div:first-child{flex:1}
.a4-parties>div+div{width:56mm}
.a4-cust{font-family:'Outfit',sans-serif;font-size:13pt;font-weight:600;line-height:1.2;margin-bottom:1px}
.a4-pay{display:flex;justify-content:space-between;gap:8px;padding:1px 0}
.a4-lines{table-layout:fixed}
.a4-lines th{text-align:left;font-size:6.6pt;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#444;
  padding:0 4px 5px;border-bottom:1.5px solid #000}
.a4-lines th.rt,.a4-lines td.rt{text-align:right}
.a4-lines td{padding:8px 4px;border-bottom:1px solid #d6d6d6;vertical-align:top}
.a4-lines tr:has(+ .a4-idrow) td{border-bottom:0;padding-bottom:2px}
.a4-lines .a4-idrow td{padding-top:0}
.a4-idrow .a4-plate{margin-top:4px}
.a4-idrow .a4-sub{margin-top:0}
.a4-lines th:first-child,.a4-lines td:first-child{padding-left:0}
.a4-lines th:last-child,.a4-lines td:last-child{padding-right:0}
.a4-n{color:#555}
.a4-item{font-weight:600;font-size:9.6pt;line-height:1.25}
.a4-sub{font-size:7pt;color:#555;margin-top:1px}
.a4-amt{font-weight:700}
/* the device's identity plate: boxed, large, grouped like the box label */
.a4-plate{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 7px;margin-top:5px;border:1px solid #000;border-radius:3px;
  padding:3px 7px;font-size:9.4pt;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.a4-plate i{font-style:normal;white-space:nowrap}
/* IMEI digit groups: spaced by margin, not by characters */
.doc em{font-style:normal}
.doc em+em{margin-left:.32em}
.a4-plate span{font-size:6.2pt;font-weight:600;letter-spacing:.14em;color:#555;margin-right:5px}
.a4-plate i+i{margin-left:8px}
.a4-slip-i .a4-plate{display:block;border:0;padding:0;margin-top:4px}
.a4-slip-i .a4-plate i{display:block;margin-left:0}
.a4-foot{display:flex;gap:18px;margin-top:12px;align-items:flex-start}
.a4-left{flex:1;min-width:0}
.a4-right{width:68mm}
.a4-words{margin-bottom:10px;font-size:8.4pt}
.a4-hsn{margin-bottom:8px}
.a4-hsn th{text-align:left;font-size:6.2pt;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#555;padding:0 4px 3px;border-bottom:1px solid #000}
.a4-hsn th.rt,.a4-hsn td.rt{text-align:right}
.a4-hsn td{padding:2px 4px;border-bottom:1px solid #e2e2e2;font-size:7.8pt}
.a4-hsn th:first-child,.a4-hsn td:first-child{padding-left:0}
.a4-note{font-size:7.4pt;border-left:2px solid #000;padding:2px 0 2px 7px;margin-bottom:8px}
.a4-warr{font-size:8pt}
.a4-srow{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px solid #e2e2e2}
.a4-srow.a4-ex{font-weight:600}
.a4-grand{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:6px;padding-top:7px;border-top:2.5px solid #000}
.a4-grand span{font-size:7pt;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.a4-grand b{font-family:'Outfit',sans-serif;font-size:21pt;font-weight:700;letter-spacing:-.02em;line-height:1}
.a4-terms{display:flex;gap:18px;align-items:flex-end;margin-top:auto;padding-top:16px}
.a4-tt{flex:1;white-space:pre-line;font-size:7.4pt;color:#444;line-height:1.5}
.a4-sign{width:62mm;text-align:center;font-size:7.6pt;color:#333}
.a4-signline{height:13mm;border-bottom:1px solid #000;margin-bottom:4px}
.a4-void{position:absolute;top:62mm;left:0;right:0;text-align:center;font:800 54pt 'Outfit',sans-serif;letter-spacing:.12em;color:rgba(179,38,30,.16);transform:rotate(-16deg);pointer-events:none}
/* the warranty slip: under a dashed cut line, one card per device */
.a4-cut{position:relative;margin:16px 0 10px;border-top:1px dashed #000;text-align:center}
.a4-cut span{position:relative;top:-.75em;background:#fff;padding:0 10px;font-size:6.6pt;letter-spacing:.14em;text-transform:uppercase;color:#444}
.a4-slip{display:grid;gap:8px}
/* one strip per device, the width of the page: the phone on the left, its cover on the right */
.a4-slip-i{display:grid;grid-template-columns:1fr auto;column-gap:16px;border:1.5px solid #000;border-radius:4px;padding:9px 12px;break-inside:avoid}
.a4-slip-i>*{grid-column:1}
.a4-slip-d{font-family:'Outfit',sans-serif;font-size:12pt;font-weight:600;line-height:1.2}
.a4-slip-w{grid-column:2 !important;grid-row:1;text-align:right;font-family:'Outfit',sans-serif;font-size:12pt;font-weight:600}
.a4-slip-i>.a4-sub{grid-column:2;grid-row:2 / span 2;align-self:end;text-align:right}
.a4-slip-t{grid-column:1/-1;font-size:7.2pt;color:#444}

/* ---- thermal 80mm / 58mm ---- */
.doc.t80{width:76mm;padding:4mm 3mm;margin:0 auto;font-size:8.4pt;line-height:1.36}
.t80-logo{display:block;max-height:14mm;max-width:40mm;margin:0 auto 2mm;object-fit:contain}
.doc.t80 .shopname{font-family:'Outfit',sans-serif;font-size:17pt;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.t80-addr{font-size:7.4pt;margin-top:3px;line-height:1.3}
.t80-gst{font-size:7.8pt;font-weight:700;margin-top:3px}
.doc.t80 .band{margin:7px 0 6px;padding:3px 0;border-top:2px solid #000;border-bottom:2px solid #000;text-align:center;
  font-size:7.8pt;font-weight:800;letter-spacing:.24em;text-transform:uppercase}
.t80-meta{display:grid;grid-template-columns:1fr auto;gap:3px 8px}
.t80-meta>div:last-child{grid-column:1/-1}
.t80-meta span{display:block;font-size:6.4pt;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.doc.t80 .rule{border-top:2px solid #000;margin:6px 0}
.doc.t80 .thin{border-top:1px dashed #000;margin:5px 0}
.doc.t80 .li{display:flex;justify-content:space-between;gap:6px}
.doc.t80 .li .l{min-width:0}
/* price leaders: a dotted run from the description to the amount */
.doc.t80 .li.lead i{flex:1;border-bottom:1.5px dotted #000;margin-bottom:.32em;min-width:4mm}
.t80-item{margin:6px 0}
.t80-nm{font-weight:700;font-size:8.8pt;line-height:1.25}
.t80-sub{font-size:7pt;line-height:1.3}
.t80-id{display:inline-block;margin:3px 0 2px;border:1.5px solid #000;border-radius:2px;padding:1px 5px;
  font-size:8.6pt;font-weight:700;letter-spacing:.03em}
.t80-id i{display:block;font-style:normal;white-space:nowrap}
.t80-id span{font-size:6pt;letter-spacing:.12em;margin-right:4px}
.t80-slip .t80-id{display:block;border:0;padding:0}
.doc.t80 .totbar{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 4px;padding:5px 0 4px;border-top:2px solid #000;border-bottom:4px double #000}
.doc.t80 .totbar span:first-child{font-size:8pt;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.doc.t80 .totbar span:last-child{font-family:'Outfit',sans-serif;font-size:18pt;font-weight:700;letter-spacing:-.01em;line-height:1}
.t80-words{font-size:7pt;margin-top:4px}
.t80-terms{font-size:6.8pt;margin-top:6px;text-align:center;line-height:1.35}
.t80-cut{margin:10px 0 6px;border-top:1.5px dashed #000;text-align:center}
.t80-cut span{position:relative;top:-.7em;background:#fff;padding:0 6px;font-size:6.4pt;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.t80-slip{border:1.5px solid #000;border-radius:3px;padding:4px 6px;margin-bottom:4px}
.t80-slip-w{font-weight:800;margin-top:2px}
.t80-bn{font-family:'Outfit',sans-serif;font-size:11pt;font-weight:700;letter-spacing:.02em;margin-top:5px}
.t80-comp{text-align:center;font-size:9px;font-weight:700;border-bottom:1px dashed #000;padding-bottom:4px;margin-bottom:6px}
.doc.t80 .test-band{font-size:7.5pt;letter-spacing:.04em;padding:1.5mm}
.doc.t80 .qr{width:19mm;height:19mm;border-width:2px}
.doc.t80.t58{width:54mm;padding:2.5mm 1.5mm;font-size:7.4pt}
.doc.t80.t58 .shopname{font-size:13pt}
.doc.t80.t58 .t80-addr,.doc.t80.t58 .t80-sub,.doc.t80.t58 .t80-terms{font-size:6.4pt}
.doc.t80.t58 .t80-id{font-size:7.6pt}
.doc.t80.t58 .totbar span:last-child{font-size:14pt}

.preview-wrap{background:var(--surface-3);padding:22px;border-radius:var(--r-md);border:1px solid var(--line);
  display:flex;justify-content:center;overflow-x:auto;box-shadow:inset 0 1px 3px rgba(12,12,14,.05)}
.preview-wrap .doc{box-shadow:var(--e3)}

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

/* ---------- notifications ---------- */
.bell{position:relative;width:var(--ctl-sm);padding:0;justify-content:center}
.bell svg{width:18px;height:18px}
.bell-n{position:absolute;top:-4px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--danger);color:#fff;font-size:10px;font-weight:700;line-height:17px;text-align:center;
  font-variant-numeric:tabular-nums}
.ntf-scrim{position:fixed;inset:0;z-index:300}
.ntf{position:fixed;top:78px;right:16px;z-index:301;width:380px;max-width:calc(100vw - 32px);max-height:70vh;
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-md);box-shadow:var(--e3);animation:fade var(--fast) var(--ease)}
.ntf-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ntf-b{overflow-y:auto;flex:1}
.ntf-f{padding:6px 10px;border-top:1px solid var(--line)}
.ntf-i{display:flex;align-items:flex-start;gap:10px;padding:11px 12px 11px 14px;border-bottom:1px solid var(--line)}
.ntf-i:last-child{border-bottom:0}
.ntf-i.read{opacity:.55}
.ntf-t{cursor:pointer;min-width:0;font-size:13px}
.ntf-t:hover b{text-decoration:underline}
.ntf-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none;background:var(--line-3)}
.ntf-dot.red{background:var(--danger)} .ntf-dot.amber{background:var(--warn)}
@media(max-width:640px){.ntf{top:60px;right:8px;left:8px;width:auto}}

/* ---------- global search (topbar) ---------- */
.gs{position:relative;width:340px;flex:none}
.gs-in{position:relative}
.gs-in svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-faint);pointer-events:none}
.gs-in input{width:100%;height:var(--ctl);padding:0 12px 0 36px;border:1px solid var(--line-2);border-radius:11px;
  background:var(--surface);font:inherit;font-size:13.5px;color:var(--text);outline:0}
.gs-in input:focus{border-color:var(--ink)}
.gs-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:310;max-height:60vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--e3)}
.gs-drop[hidden]{display:none}
.gs-sec{padding:9px 14px 4px;font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--text-dim)}
.gs-row{display:flex;align-items:center;gap:11px;padding:9px 14px;cursor:pointer}
.gs-row:hover{background:var(--surface-2)}
.gs-row svg{width:16px;height:16px;color:var(--text-dim);flex:none}
.gs-row .k{min-width:0}
.gs-row .k b{font-weight:500;font-size:13.5px}
.gs-row .s{font-size:12px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-empty{padding:14px;color:var(--text-dim);font-size:13px}
@media(max-width:1100px){.gs{width:240px}}
@media(max-width:900px){.bar-in{flex-wrap:wrap}.gs{order:5;width:100%}}

/* auto-written listing text, read-only until Edit */
.tr-auto{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface-2)}

/* Malayalam script needs more line height and no tight tracking */
html:lang(ml) body{line-height:1.6}
html:lang(ml) h1,html:lang(ml) h2,html:lang(ml) h3,html:lang(ml) .upper,html:lang(ml) .kpi .lbl{letter-spacing:0}

/* phones: the content column must shrink to the viewport, never grow to its widest row */
.main{min-width:0}
@media(max-width:900px){.shell{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.topbar .btn.primary span{display:none}.topbar .btn.primary{padding:0 12px}}

/* ---------- receive stock ---------- */
.si-scan{width:100%}
.si-scan .gs-in input{height:var(--ctl-lg);font-size:15px}
.si-line{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}
.si-line.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.si-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.si-row+.si-row{margin-top:10px}
.si-f{display:flex;flex-direction:column;gap:4px}
.si-f>span{font-size:12px;font-weight:500;color:var(--text-dim)}
.si-row .check{height:var(--ctl)}
.si-imeis{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.si-sum{position:sticky;top:90px}
.gs-row.on{background:var(--surface-2)}

/* grid items may shrink below their longest line (ellipsis rows, long descriptions) */
.grid>*{min-width:0}

/* receiving checks */
.si-recon{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.si-rc{display:flex;flex-direction:column;align-items:center;min-width:76px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.si-rc b{font-family:var(--display);font-size:17px;font-variant-numeric:tabular-nums}
.si-rc span{font-size:11.5px;color:var(--text-dim)}
.si-rc.good b{color:var(--good)} .si-rc.bad b{color:var(--danger)} .si-rc.warn b{color:var(--warn)}
.si-wait{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--warn-fill);color:var(--text)}
.si-wait svg{width:16px;height:16px}
.si-bad{margin-top:8px;font-size:12px;color:var(--danger)}
.si-price{margin-top:8px;font-size:12px;color:var(--text-dim)}

.age-dot{display:inline-block;width:9px;height:9px;border-radius:50%}
.age-dot.green{background:var(--good)} .age-dot.amber{background:var(--warn)} .age-dot.red{background:var(--danger)}

/* GST scheme picker */
.scheme{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line-2);border-radius:var(--r-md);cursor:pointer;position:relative}
.scheme input{position:absolute;top:14px;right:14px}
.scheme b{font-size:14px}
.scheme span{font-size:12.5px;color:var(--text-dim);line-height:1.5}
.scheme.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.pay-acc{height:36px;max-width:190px}

/* ---------------------------------------------------------------- v1 additions */
.ntf-dot.blue{background:var(--info)}
/* the "List on Truend" switch: a button, so a click never fights the row it sits in */
.switch{position:relative;width:40px;height:24px;border-radius:12px;border:1px solid var(--line-3);background:var(--surface-3);cursor:pointer;flex:none;padding:0;transition:background .12s,border-color .12s}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(12,12,14,.18);transition:transform .12s}
.switch.on{background:var(--ink);border-color:var(--ink)}
.switch.on::after{transform:translateX(16px)}
.switch:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.home-grid{align-items:start}

/* ==========================================================================
   Glass (2026-10-14)

   Frosted panels on a warm brass/ink wash, in the palette above — no neon,
   no glows. Two tiers:
   - content (cards, stat tiles, inputs, buttons) is translucent white with a
     white rim. No backdrop-filter: the wash behind it is already soft, so it
     reads as frosted for free and costs nothing on a low-end tablet.
   - floating layers (sidebar, topbar, bill pane, modals, popovers, tabs,
     toasts) get the real blur.
   Numbers stay on near-opaque white so they read under shop lighting.
   ========================================================================== */
:root{
  --surface:rgba(255,255,255,.64);
  --surface-2:rgba(255,255,255,.82);
  --surface-3:rgba(255,255,255,.42);
  --glass:rgba(255,255,255,.56);
  --glass-hi:rgba(255,255,255,.86);
  --rim:rgba(255,255,255,.9);
  --blur:blur(22px) saturate(170%);
  --e1:inset 0 1px 0 var(--rim),0 1px 2px rgba(12,12,14,.04);
  --e2:inset 0 1px 0 var(--rim),0 2px 4px rgba(12,12,14,.04),0 14px 28px -14px rgba(12,12,14,.16);
  --e-card:inset 0 1px 0 var(--rim),0 1px 2px rgba(12,12,14,.03),0 18px 40px -26px rgba(12,12,14,.22);
}
body{background:
  radial-gradient(900px 620px at 0% 0%,rgba(201,165,106,.34),transparent 62%),
  radial-gradient(760px 560px at 62% 8%,rgba(226,196,137,.20),transparent 60%),
  radial-gradient(900px 760px at 100% 100%,rgba(12,12,14,.12),transparent 62%),
  radial-gradient(700px 520px at 18% 100%,rgba(168,133,75,.16),transparent 60%),
  #F1EEE8}
.main,.topbar,.subnav{background:transparent}

/* floating sidebar */
.shell{padding:12px 0 12px 12px;column-gap:12px}
:root{--shell-pad:24px}
.sidebar{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--rim);border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 #fff,0 24px 60px -30px rgba(12,12,14,.3)}
.sb-item:hover{background:rgba(255,255,255,.6)}
.sb-item.on{background:linear-gradient(180deg,#26262B,#0C0C0E);color:var(--on-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 18px -10px rgba(12,12,14,.6)}
.sb-item.on::before{display:none}
.sb-item.on svg{color:var(--brass)}
.sb-item.on .pill{background:rgba(242,240,235,.14);color:var(--on-ink)}
.sb-user:hover{background:rgba(255,255,255,.6)}
@media(max-width:900px){
  .shell{padding:0;column-gap:0}
  :root{--shell-pad:0px}
  .sidebar{inset:8px auto 8px 8px;background:var(--glass-hi);transform:translateX(calc(-100% - 16px))}
  .burger{background:var(--glass)}
}

/* topbar + subnav float over the scrolling page */
.topbar.scrolled,.subnav{background:rgba(241,238,232,.62);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.topbar.scrolled{border-bottom-color:rgba(255,255,255,.8);box-shadow:0 1px 0 var(--line)}
.subnav{border-bottom-color:rgba(255,255,255,.8);box-shadow:0 1px 0 var(--line)}

/* content glass */
.card,.kpi,.tr-card,.kcard,.si-line{border-color:rgba(255,255,255,.85);box-shadow:var(--e-card)}
.card,.tr-card{border-radius:var(--r-lg)}
.card.click:hover{border-color:#fff;background:var(--surface-2)}
.card-h{border-bottom-color:rgba(12,12,14,.07)}
.tbl th{background:rgba(255,255,255,.5)}

/* the stat strip becomes separate tiles */
.strip{background:none;border:0;box-shadow:none;overflow:visible;gap:12px}
.strip .kpi{border:1px solid rgba(255,255,255,.85);border-radius:var(--r-lg);background:var(--surface-2);
  box-shadow:var(--e-card);padding:16px 20px}
.strip .kpi::before{display:none}
.strip .kpi:hover,.strip .kpi.hot{background:var(--glass-hi)}
@media(max-width:820px){.strip .kpi{flex:1 1 calc(50% - 6px)}}

/* controls: glass fill, ink stays the action colour */
.btn,.chip,.input,.select,textarea.input,.gs-in input,.qty{border-color:rgba(12,12,14,.10)}
.btn:hover,.chip:hover{background:var(--glass-hi)}
.btn.primary,.btn.dark,.chip.on{background:linear-gradient(180deg,#2A2A30,#0C0C0E);border-color:#0C0C0E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 18px -10px rgba(12,12,14,.55)}
.btn.primary:hover,.btn.dark:hover{background:linear-gradient(180deg,#3A3A42,#16161A)}
.input:focus,.select:focus,textarea.input:focus,.gs-in input:focus,.scan .input:focus{background:var(--glass-hi)}
.switch::after{background:#fff}

/* floating layers: real blur */
.pos-left{border-right:0}
.pos-right{margin:0 12px 0 0;border-radius:var(--r-xl);border:1px solid var(--rim);
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 #fff,0 24px 60px -30px rgba(12,12,14,.3)}
.paybar{background:rgba(255,255,255,.7);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
@media(max-width:1000px){.pos-right{margin:0}}
.scrim{background:rgba(12,12,14,.26);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal,.results,.ntf,.gs-drop{background:var(--glass-hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--rim)}
.mob-tabs{background:rgba(255,255,255,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.toast{background:rgba(27,27,31,.84);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.auth-form{background:var(--glass)}

/* OS "reduce transparency": everything back to solid */
@media(prefers-reduced-transparency:reduce){
  :root{--surface:#fff;--surface-2:#FBFAF8;--surface-3:#F0EEE9;--glass:#fff;--glass-hi:#fff}
  body{background:var(--paper)}
  .sidebar,.pos-right,.modal,.results,.ntf,.gs-drop,.mob-tabs,.toast,.paybar,.topbar.scrolled,.subnav,.scrim{
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .topbar.scrolled,.subnav{background:var(--paper)}
}

/* ---------- Buy-in (2026-10-15) ----------
   The form on the left, the voucher on the right: pinned, so the amount,
   what the shop keeps and the Buy button stay in view while the form scrolls. */
.bi-page{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--gap);align-items:start}
.bi-sum{position:sticky;top:16px}
.bi-sum .card-b>.field+.field{margin-top:var(--gap)}
.bi-calc{margin:16px 0;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line)}
.bi-calc p{margin:0;font-size:12.5px;line-height:1.55;color:var(--text-dim)}
.bi-calc .sumrow{padding:3px 0}
.bi-calc .sumrow.neg .mono{color:var(--danger)}
.bi-calc .sumrow.big{margin-top:6px;padding-top:9px;border-top:1px solid var(--line);font-size:19px}
.bi-go{padding:0 18px 18px}
.bi-go .btn{width:100%;justify-content:center}
@media(max-width:1100px){
  .bi-page{grid-template-columns:1fr}
  .bi-sum{position:static}
}

/* ---------- Today: the week at a glance ---------- */
.home-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.wk-tot{font-family:var(--display);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.wk-tot span{font-family:var(--font);font-weight:500;font-size:12px;color:var(--text-dim);letter-spacing:0}
.wk-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;padding:14px 18px 16px;height:200px}
.wk-col{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.wk-v{font-size:11px;font-weight:500;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.wk-track{flex:1;width:100%;max-width:34px;display:flex;align-items:flex-end;border-bottom:1px solid var(--line-2)}
.wk-bar{width:100%;border-radius:6px 6px 2px 2px;background:rgba(12,12,14,.13)}
.wk-d{font-size:11.5px;font-weight:500;color:var(--text-dim)}
.wk-col.today .wk-bar{background:var(--ink);box-shadow:none}
.wk-col.today .wk-v,.wk-col.today .wk-d{color:var(--text);font-weight:600}
@media(prefers-reduced-motion:no-preference){
  .wk-bar{animation:wk-grow .6s var(--ease) both;transform-origin:bottom}
}
@keyframes wk-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- invoice view: the document, and the facts beside it ---------- */
.inv-page{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--gap);align-items:start}
.inv-side{position:sticky;top:16px}
.inv-side .sumrow.big{margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.inv-side .margin-fold{margin-top:14px;padding-top:6px;border-top:1px solid var(--line)}
@media(max-width:1100px){.inv-page{grid-template-columns:1fr}.inv-side{position:static}}

/* unit page: one primary action, then the rest as a quiet list, not a stack of boxes */
.unit-acts .btn.block:not(.primary){height:46px;margin:0 !important;padding:0 2px;justify-content:flex-start;gap:10px;
  background:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;font-weight:500}
.unit-acts .btn.block:not(.primary):hover{background:none;color:var(--text);text-decoration:underline;text-underline-offset:3px}
.unit-acts .btn.block:not(.primary) svg{display:none}
.unit-acts .btn.block.primary{margin-bottom:6px !important}
.unit-acts .btn.danger{color:var(--danger)}
.inv-side .sumrow.dim{color:var(--text-dim);font-size:12.5px}

/* ---------- phones: the money first, the rest a swipe away ---------- */
@media(max-width:640px){
  /* five tiles stacked pushed the day's invoices off the first screen;
     on a phone they become one swipeable row */
  .strip{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-left:-15px;margin-right:-15px;padding:2px 15px 6px;scroll-padding-inline:15px;overscroll-behavior-x:none}
  .strip::-webkit-scrollbar{display:none}
  .strip .kpi{flex:0 0 72%;scroll-snap-align:start}
  /* long tables keep the columns that answer "which one, how much" */
  .t-units th:nth-child(3),.t-units td:nth-child(3),.t-units th:nth-child(4),.t-units td:nth-child(4),
  .t-units th:nth-child(7),.t-units td:nth-child(7),
  .t-bills th:nth-child(4),.t-bills td:nth-child(4),.t-bills th:nth-child(5),.t-bills td:nth-child(5),
  .t-bills th:nth-child(7),.t-bills td:nth-child(7){display:none}
  /* invoices: the date folds under the number so the row fits without a sideways scroll */
  .t-bills th:nth-child(2),.t-bills td:nth-child(2){display:none}
  .t-bills td .b-when{display:block}
  /* vouchers: number, device, paid; Truend: device, price, stock */
  .t-vouch th:nth-child(2),.t-vouch td:nth-child(2),.t-vouch th:nth-child(4),.t-vouch td:nth-child(4),
  .t-vouch th:nth-child(6),.t-vouch td:nth-child(6),
  .t-live th:nth-child(2),.t-live td:nth-child(2),.t-live th:nth-child(4),.t-live td:nth-child(4){display:none}
  /* the device name was wrapping to four lines beside two IMEIs: one IMEI, tighter cells */
  .tbl th,.tbl td{padding-left:10px;padding-right:10px}
  .tbl th:first-child,.tbl td:first-child{padding-left:14px}
  .tbl th:last-child,.tbl td:last-child{padding-right:12px}
  .t-units .cell-id{font-size:11.5px}
  .t-units .cell-id div{display:none}
}
.t-bills td:first-child b{white-space:nowrap}
.t-bills .b-when{display:none}
.t-vouch td:first-child b{white-space:nowrap}

/* ---------- Clarity pass (2026-10-15) ----------
   Things that read as the wrong kind of thing: */
/* faint text was 2.6:1 against paper; .52 keeps it quiet and readable (~4.5:1) */
:root{--text-faint:rgba(12,12,14,.52)}
/* an unselected option read as disabled — the glass layer made the track invisible and the label faint */
.seg{background:rgba(12,12,14,.055)}
.seg button{color:var(--text-dim)}
.seg button:hover{color:var(--text)}
/* a note is information, not a field: no input-style outline */
.note,.bi-calc{background:rgba(12,12,14,.035);border-color:transparent}
.note.warnbox{border-color:var(--danger);background:var(--danger-fill)}
/* with the tab bar showing, the pay bar sat underneath it and the total was a scroll away:
   on a phone it is fixed just above the tabs, so Payment and the total are always one tap away */
@media(max-width:900px){
  .paybar{position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom));z-index:59;
    padding:10px 15px;box-shadow:0 -1px 0 var(--line)}
  .pos{padding-bottom:72px}
  /* a backdrop-filter makes the pane the containing block for fixed children — the bar
     would pin to the pane, off screen. On a phone the pane is ordinary page content. */
  .pos-right{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface-2)}
}
/* composition dealer's bill of supply: the Rule 3(1)(f) words, top of the document */
/* Rule 46(e): the buyer's address, asked for only when the bill needs it */
.rc-cust .rc-addr{grid-column:1/-1}
.rc-cust .input.need{border-color:var(--warn,#B7791F)}
.home .gst-warn{margin-bottom:14px}
/* first-run setup: GST asked as two plain choices */
.su-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.su-choice{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line-2);background:var(--surface);cursor:pointer;font:inherit;color:var(--text)}
.su-choice b{font-size:15px;font-weight:600}
.su-choice span{font-size:12.5px;color:var(--text-dim);line-height:1.4}
.su-choice:hover{border-color:rgba(12,12,14,.3)}
.su-choice.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#fff}
.auth-form .field+.field,.auth-form .grid+.field,.auth-form .field+.grid{margin-top:14px}
@media(max-width:420px){.su-choices{grid-template-columns:1fr}}
.auth-form .grid>.field{margin-top:0}

/* ---- device form: tap-first picking (buy-in, add unit) ---- */
.pick{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.pick-l{font-size:12.5px;font-weight:600;color:var(--text-dim);padding-top:6px}
.pick-c{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.pick-c .chip{font:inherit;font-size:12.5px;cursor:pointer}
.pick-in.input{height:28px;width:150px;font-size:12.5px;padding:0 10px;border-radius:var(--r-chip)}
.pick-c .err-txt{flex-basis:100%}
.uf-ids{margin-bottom:6px}
.scan-btn{gap:6px;padding:0 14px;flex:none}
.scan-btn span{font-weight:600}
.uf-note{font-size:12px;margin-top:5px;min-height:0}
.uf-note:empty{display:none}
.uf-note .good{color:var(--good);font-weight:600}
.uf-note .bad{color:var(--danger);font-weight:500}
.grades{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.grade-c{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:11px 13px;border-radius:12px;
  border:1px solid var(--line-2);background:var(--surface);cursor:pointer;font:inherit;color:var(--text)}
.grade-c b{font-size:14px;font-weight:600}
.grade-c span{font-size:12px;color:var(--text-dim);line-height:1.35}
.grade-c.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#fff}
.uf-more{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.uf-more summary{cursor:pointer;font-size:12.5px;color:var(--text-dim);font-weight:500}
/* buy-in voucher pane: the device as it will go into stock */
.bi-dev{padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);margin-bottom:12px}
.bi-dev b{font-size:15px}
.bi-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:7px;font-size:11.5px;background:var(--surface-3);color:var(--text-dim)}
.bi-tag.warn{background:var(--warn-fill);color:var(--warn)}
.bi-hist{margin:-2px 0 14px;padding:0 2px}
.bi-hist .sumrow{font-size:13px}
/* camera scanner */
.scan-box{position:relative;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:4/3}
.scan-box video{width:100%;height:100%;object-fit:cover;display:block}
.scan-aim{position:absolute;left:10%;right:10%;top:30%;bottom:30%;border:2px solid rgba(255,255,255,.85);border-radius:10px;box-shadow:0 0 0 999px rgba(0,0,0,.28)}
.scan-found{margin-top:10px;font-size:13px;color:var(--text-dim);min-height:22px}
.scan-found .row{justify-content:space-between;padding:4px 0}
.scan-found b{color:var(--text)}
@media(max-width:640px){
  .pick{grid-template-columns:1fr;gap:6px}
  .pick-l{padding-top:0}
  .grades{grid-template-columns:1fr}
  .pick-in.input{width:100%}
}
@media(max-width:900px){.grid.uf-photos{grid-template-columns:repeat(2,1fr)}}
.row-dup{gap:5px;margin-right:4px}
@media(max-width:900px){.row-dup span{display:none}}
/* view-only login: hide what changes things (the rules refuse it anyway) */
.ro .btn.primary,.ro .switch,.ro .row-dup,.ro .unit-acts,.ro [data-act="inv.adjust"],.ro [data-act="inv.edititem"],.ro [data-act="inv.cancel"],.ro [data-act="inv.addunit"],.ro [data-act="inv.additem"]{display:none !important}
.team-roles{grid-template-columns:1fr}
.team-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.team-row:first-child{border-top:0;padding-top:0}
.team-row .grow{min-width:180px}
.team-sel.select{width:auto;min-width:130px;height:34px}
/* Settings → Plan */
.plan-meter{margin-bottom:12px;font-size:13px}
.plan-bar{height:6px;border-radius:4px;background:var(--line-2);margin-top:6px;overflow:hidden}
.plan-bar span{display:block;height:100%;background:var(--ink);border-radius:4px}
.plan-bar.full span{background:var(--warn)}
.plan-card.cur{box-shadow:inset 0 0 0 1.5px var(--ink)}
.plan-price{margin-top:10px}
.plan-points{list-style:none;padding:0;margin:14px 0 18px;display:grid;gap:8px;font-size:13.5px}
.plan-points li{display:flex;gap:8px;align-items:flex-start}
.plan-points svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--good)}

/* ---------- installed app: no browser title bar (window-controls-overlay) ----------
   The app draws to the top of the window; the topbar becomes the title bar.
   Window buttons sit top-right, so the topbar keeps clear of them, and the empty
   strip along the top drags the window like a native one. */
@media (display-mode: window-controls-overlay){
  body::before{content:'';position:fixed;z-index:0;top:0;left:env(titlebar-area-x,0);width:env(titlebar-area-width,100%);height:env(titlebar-area-height,33px);pointer-events:none;app-region:drag;-webkit-app-region:drag}
  .topbar{app-region:drag;-webkit-app-region:drag;padding-right:calc(100vw - env(titlebar-area-x,0px) - env(titlebar-area-width,100vw))}
  button,a,input,select,textarea,label,summary,[data-act],[tabindex],.gs,.ntf,.results,.gs-drop,.modal,.scrim{app-region:no-drag;-webkit-app-region:no-drag}
  .chrome,.topbar{user-select:none}
}

/* ---------- feels like an app, not a page ----------
   No grey tap flash, no double-tap zoom delay, no long-press menu or text
   selection on buttons and navigation. Text people copy (IMEIs, invoice
   numbers, amounts) stays selectable. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
button,a,input,select,textarea,label,summary,[data-act],[role="button"]{touch-action:manipulation}
button,.btn,.chip,.pick,.seg,.sidebar,.mob-tabs,.nav-item,.topbar .btn,[role="button"],img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media (display-mode: standalone), (display-mode: window-controls-overlay){
  html,body{overscroll-behavior:none}
}

/* ==========================================================================
   Phones: native-feeling scroll, no zoom, solid surfaces, finger-sized targets
   ========================================================================== */
@media(max-width:900px){
  /* the page itself scrolls (iOS momentum, rubber band, tap the status bar to
     go to the top), not a box inside a fixed-height shell */
  html,body{height:auto}
  .shell{display:block;height:auto;min-height:100dvh}
  .main{overflow:visible;min-height:100dvh}
  .chrome{position:sticky;top:0;z-index:40}
  /* solid, crisp surfaces: no blur to recompute while scrolling */
  :root{--surface:#fff;--surface-2:#FBFAF8;--surface-3:#F0EEE9;--glass:#fff;--glass-hi:#fff}
  body{background:var(--paper)}
  .sidebar,.pos-right,.modal,.results,.ntf,.gs-drop,.mob-tabs,.toast,.paybar,.topbar,.topbar.scrolled,.subnav,.scrim{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .topbar,.topbar.scrolled,.subnav{background:var(--paper)}
  .topbar.scrolled{box-shadow:0 1px 0 var(--line)}
  .mob-tabs{background:#fff}
  .paybar{background:#fff}
  .toast{background:#1B1B1F}
  .scrim{background:rgba(12,12,14,.38)}
}

/* touch screens: 16px text in fields (iPhone zooms into anything smaller),
   targets a finger can hit */
@media(pointer:coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea,
  .input,.select,.pick-in.input,.gs-in input{font-size:16px!important}
  .btn,.btn.sm,.chip,.pick-c .chip,.seg button,.mob-tab,.burger,.x{min-height:40px}
  .btn.sm,.chip{padding-left:14px;padding-right:14px}
  .pick-in.input{height:40px}
  .btn.icon,.x,.bell{min-width:40px}
  /* instant press feedback (needs the touchstart listener in ui.js on iOS) */
  .chip:active,.mob-tab:active,.pick-c .chip:active,.seg button:active,[data-act].card:active{transform:scale(.97)}
  .btn,.chip,.mob-tab,.seg button{transition:transform 90ms ease,background-color 120ms ease}
  .tbl tbody tr.click:active{background:var(--surface-3)}
}

/* bottom sheets: slide up on the iOS curve, follow the finger when dragged */
@media(max-width:640px) and (prefers-reduced-motion:no-preference){
  .scrim{animation:fade 220ms ease}
  .modal{animation:sheet-up 340ms cubic-bezier(.32,.72,0,1)}
  .scrim.out{animation:fade-out 220ms ease forwards;pointer-events:none}
  .scrim.out .modal{animation:sheet-down 220ms cubic-bezier(.32,.72,0,1) forwards}
  .modal.drag{animation:none;transition:none}
  .modal.snap{transition:transform 260ms cubic-bezier(.32,.72,0,1)}
  .sidebar.drag{transition:none}
}
@media(max-width:640px){
  .modal-h{position:relative;padding-top:24px}
  .modal-h::before{content:"";position:absolute;top:8px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:var(--line-3)}
}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheet-down{to{transform:translateY(100%)}}
@keyframes fade-out{to{opacity:0}}

/* no pull-to-refresh reload on phones; the iPhone home-screen app has no reload
   gesture, so it keeps its bounce */
@media(max-width:900px){
  html:not(.ios-app){overscroll-behavior-y:none}
  /* sideways overscroll never becomes the browser's swipe-back */
  html,body{overscroll-behavior-x:none}
  .strip,.tbl-wrap,.rc-lines,.pick-c{overscroll-behavior-x:none}   /* a row at its end never hands the swipe to the browser */
  .view.drag{transition:none}
  .view.snap{transition:transform 240ms cubic-bezier(.32,.72,0,1),opacity 240ms ease}
}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  .view.enter.from-right{animation:tab-in-r 260ms cubic-bezier(.32,.72,0,1)}
  .view.enter.from-left{animation:tab-in-l 260ms cubic-bezier(.32,.72,0,1)}
}
@keyframes tab-in-r{from{transform:translateX(36px);opacity:.4}to{transform:none;opacity:1}}
@keyframes tab-in-l{from{transform:translateX(-36px);opacity:.4}to{transform:none;opacity:1}}

/* ---------- spacing that holds at any text size ---------- */
/* a button after a field (or after an error line) is always a step away from it,
   not only when it is the last thing in the card */
.card-b>.field+.btn,.card-b>.grid+.btn,.card-b>.err-txt+.btn,.card-b>.su-choices+.btn,
.modal-b>.field+.btn,.modal-b>.grid+.btn,.modal-b>.err-txt+.btn{margin-top:var(--gap-lg)}
/* choice cards grow with their text (two-line descriptions, large phone fonts) */
.su-choice{height:auto;min-height:0;white-space:normal}
.su-choice b,.su-choice span{display:block;width:100%}
/* label / value rows: the label keeps its width, the value wraps beside it */
.sumrow{gap:14px;align-items:baseline}
.sumrow>:first-child{flex:0 0 auto;max-width:45%}
.sumrow>:last-child:not(:first-child){text-align:right;min-width:0;overflow-wrap:anywhere}
/* Google's reCAPTCHA badge belongs to the sign-in screen only */
.shell~.grecaptcha-badge,body:has(.shell) .grecaptcha-badge{visibility:hidden!important}
@media(max-width:640px){
  /* notifications: a sheet with even margins under the top bar */
  .ntf{left:12px;right:12px;width:auto;max-width:none}
  .ntf-scrim{background:rgba(12,12,14,.28);animation:fade 160ms ease}
  .ntf-h span{white-space:nowrap}
}
@media(max-width:640px){
  /* rows of buttons and toolbars wrap instead of running off a small screen */
  .card-b .row,.modal-b .row{flex-wrap:wrap}
  .toolbar>.row.grow{flex:1 1 100%;min-width:0}
  .toolbar>.row.grow>.input,.toolbar>.row.grow>.searchbox{min-width:0;flex:1 1 auto}
  /* segmented choices share the width and wrap their words */
  .field .seg,.card-b>.seg{display:flex;width:100%}
  .field .seg button,.card-b>.seg button{flex:1 1 0;min-width:0;padding:6px 8px;white-space:normal;line-height:1.25}
}
/* Phones: the status bar is outside the page and iOS won't let a page dim it, so the layer
   behind the menu and sheets frosts the page in paper instead of darkening it. The bar is
   paper too, so it reads as part of the same frosted surface instead of a bright strip. */
@media(max-width:900px){
  body.nav-open::after,.scrim,.ntf-scrim{background:rgba(246,245,242,.6);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
}
@media(max-width:900px) and (prefers-reduced-transparency:reduce){
  body.nav-open::after,.scrim,.ntf-scrim{background:rgba(246,245,242,.94);-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
/* a page with a back button: one line each for the name and its IMEI / date, never wrapped into a tower */
.head-back{flex-wrap:nowrap;gap:4px;min-width:0}
.head-back>div{min-width:0}
.head-back h1,.head-back .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head-back .btn.icon{margin-left:-8px;flex:none}

/* a new version ready / offline (app.js) */
#app-status{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;transform:translateX(-50%);z-index:510;display:flex;flex-direction:column;gap:6px;width:min(640px,calc(100% - 24px))}
#app-status[hidden]{display:none}
.app-status-i{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:#1B1B1F;color:#F2F0EB;font-size:13.5px;line-height:1.4;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.app-status-i span{flex:1}
.app-status-i.off{background:#7A4B10}

/* Reports: stat tiles, chips and tables stack with the same gap */
.rep .strip,.rep>.card{margin-bottom:var(--gap)}
/* Close the day: the result sits right under the box it checks */
.cl-st{min-height:0;margin:-4px 0 10px}.cl-st:empty{display:none}
/* Add another shop: fields spaced like the rest of Settings */
.as-body .field+.field,.as-body .field+.grid,.as-body .grid+.field{margin-top:12px}
.as-body .grid>.field{margin-top:0}
.as-body .secrow{margin-top:20px}.as-body .secrow:first-child{margin-top:0}

/* Truend chats: the thread with a buyer */
.tr-thread{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:2px}
.tr-msg{max-width:78%;align-self:flex-start;background:var(--surface-2);border-radius:12px;padding:8px 11px;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.tr-msg.own{align-self:flex-end;background:var(--surface-3)}
.tr-msg img{max-width:220px;border-radius:8px;display:block}
.tr-msg .tiny{margin-top:3px}

/* the new-version banner: what to do if a reload doesn't bring it */
.app-status-i.upd small{display:block;margin-top:4px;font-size:12px;opacity:.8;line-height:1.4}

/* phones: a dialog's summary line sits above its buttons */
@media (max-width:600px){ .modal-f .as-sum{flex-basis:100%} .preview-wrap{padding:10px} }
.tr-offer-b{display:flex;gap:8px;margin-top:8px}
.install-steps{margin:0;padding-left:20px;line-height:1.55}
.install-steps li+li{margin-top:8px}
/* Team: what an admin can see — one switch per area */
.sees-list{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sees-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;font-weight:500}
.sees-row+.sees-row{border-top:1px solid var(--line)}