/* ==========================================================================
   ShopDrop design system v3 — "Depth, Speed, Zero-Trust"
   Two themes, one accent, elevation that means distance, motion only where it
   reports real state. Everything below is used by three apps: the marketing
   site, the counter dashboard, and the customer phone flow.

   Palette: warm ink rather than blue-black, a jade accent rather than a neon
   mint, and brass as the second colour. The old accent was hsl(168 78% 55%),
   which is a highlighter — hard to look at for eight hours and wrong next to a
   citizen's identity document. Colour is expressed as --accent-h/-s/-l so a
   theme override is three lines.
   ========================================================================== */

:root {
  /* Jade, not neon mint. The old accent was hsl(168 78% 55%), which reads as a
     highlighter next to a citizen's Aadhaar card. Hue, saturation and lightness
     are separate properties so a theme override is three lines, not fifteen. */
  --accent-h: 158;
  --accent-s: 42%;
  --accent-l: 47%;

  --accent:        hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-deep:   hsl(var(--accent-h) 44% 34%);
  --accent-soft:   hsl(var(--accent-h) 38% 62%);
  --accent-ghost:  hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.13);
  --accent-line:   hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.32);
  --accent-glow:   hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.22);

  /* Brass. The second accent used to be an electric violet, which fought the
     green instead of sitting beside it. --violet is kept as an alias because
     three apps and two 3D scenes reference it. */
  --sand:          #c2a173;
  --sand-ghost:    rgba(194, 161, 115, 0.14);
  --violet:        var(--sand);
  --violet-ghost:  var(--sand-ghost);

  --warn:          #d0a054;
  --warn-ghost:    rgba(208, 160, 84, 0.14);
  --danger:        #d4685f;
  --danger-ghost:  rgba(212, 104, 95, 0.13);
  --ok:            #4f9d6b;
  --ok-ghost:      rgba(79, 157, 107, 0.14);

  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-2xl: 32px;
  --r-pill: 999px;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fast: 150ms;
  --mid: 260ms;
  --slow: 460ms;

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, monospace;

  --rail: 232px;
  --topbar-h: 58px;
}

/* ------------------------------------------------------------ dark (default) */

:root, :root[data-theme='dark'] {
  color-scheme: dark;
  --bg:          #0b0d0c;
  --bg-deep:     #070908;
  --bg-raised:   #111413;
  --bg-card:     #151917;
  --bg-hi:       #1c211f;
  --bg-input:    #0e1110;
  --line:        #242a27;
  --line-soft:   #1b201e;
  --line-strong: #333b38;

  --text:        #e7ebe8;
  --text-dim:    #9aa5a0;
  --text-faint:  #79847f;

  --glass:       rgba(17, 20, 19, 0.76);
  --glass-line:  rgba(255, 255, 255, 0.06);
  --sheen:       rgba(255, 255, 255, 0.045);

  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.34);
  --shadow-2: 0 8px 22px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 22px 52px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 8px 26px var(--accent-glow);

  --page-glow:
    radial-gradient(1200px 640px at 78% -14%, hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.08), transparent 62%),
    radial-gradient(920px 540px at 6% 106%, rgba(194, 161, 115, 0.06), transparent 64%);
}

/* --------------------------------------------------------------- light */

:root[data-theme='light'] {
  color-scheme: light;
  --bg:          #f6f5f2;
  --bg-deep:     #edece7;
  --bg-raised:   #ffffff;
  --bg-card:     #ffffff;
  --bg-hi:       #f2f1ec;
  --bg-input:    #faf9f6;
  --line:        #e3e1da;
  --line-soft:   #edece6;
  --line-strong: #c9c6bc;

  --text:        #141a17;
  --text-dim:    #55605b;
  --text-faint:  #7d8883;

  --accent-s:    48%;
  --accent-l:    31%;
  --accent-deep: hsl(var(--accent-h) 50% 24%);
  --accent-soft: hsl(var(--accent-h) 40% 42%);
  --accent-ghost: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.09);
  --accent-line:  hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.26);
  --accent-glow:  hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.16);

  --sand:       #8a6636;
  --sand-ghost: rgba(138, 102, 54, 0.11);
  --warn:       #9a6f1e;
  --warn-ghost: rgba(154, 111, 30, 0.11);
  --danger:     #b03f37;
  --danger-ghost: rgba(176, 63, 55, 0.10);
  --ok:         #2f7a4d;
  --ok-ghost:   rgba(47, 122, 77, 0.11);

  --glass:      rgba(255, 255, 255, 0.8);
  --glass-line: rgba(20, 26, 23, 0.08);
  --sheen:      rgba(20, 26, 23, 0.025);

  --shadow-1: 0 1px 2px rgba(38, 34, 26, 0.07);
  --shadow-2: 0 8px 22px rgba(38, 34, 26, 0.09);
  --shadow-3: 0 22px 48px rgba(38, 34, 26, 0.14);
  --shadow-accent: 0 8px 22px var(--accent-glow);

  --page-glow:
    radial-gradient(1100px 600px at 80% -16%, hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.07), transparent 62%),
    radial-gradient(900px 520px at 4% 104%, rgba(138, 102, 54, 0.05), transparent 64%);
}

* { box-sizing: border-box; }
/* The UA rule for [hidden] is display:none, but any author `display` beats it
   — so a hidden .badge (inline-flex) rendered as an empty pill. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { height: 100%; }

body {
  margin: 0;
  /* Colour and image set separately on purpose: several mobile browsers drop
     `background-attachment: fixed`, and with the shorthand that took the solid
     colour down with it — leaving the page rendering on white. */
  background-color: var(--bg);
  background-image: var(--page-glow);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 660; letter-spacing: -0.021em; line-height: 1.16; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.16rem; }
h3 { font-size: 0.99rem; }
h4 { font-size: 0.86rem; }
p { margin: 0 0 0.75rem; color: var(--text-dim); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent-ghost); color: var(--text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); background-clip: content-box; }

/* ------------------------------------------------------------- layout */

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 22px; }
.wrap-wide { max-width: 1560px; margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 470px; margin: 0 auto; padding: 0 20px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.spacer { flex: 1; }
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); font-size: 0.82rem; }
.tiny { font-size: 0.75rem; }
.center { text-align: center; }
.hidden { display: none !important; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accent { color: var(--accent); }
.scroll-y { overflow-y: auto; }

/* --------------------------------------------------------------- brand */

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 690; letter-spacing: -0.022em; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep));
  position: relative;
  box-shadow: 0 0 0 1px var(--accent-line), 0 6px 20px var(--accent-glow);
  transition: transform var(--mid) var(--ease-back), box-shadow var(--mid);
}
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); box-shadow: 0 0 0 1px var(--accent-line), 0 10px 30px var(--accent-glow); }
.brand-mark::after {
  content: ''; position: absolute; inset: 8px 7px;
  border-radius: 2px; background: var(--bg-deep);
  clip-path: polygon(50% 0, 100% 46%, 72% 46%, 72% 100%, 28% 100%, 28% 46%, 0 46%);
}
:root[data-theme='light'] .brand-mark::after { background: #fff; }
.brand-sub { color: var(--text-faint); font-weight: 520; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------------------------------------------------------------- card */

.card {
  background: linear-gradient(180deg, var(--bg-card), color-mix(in srgb, var(--bg-card) 86%, var(--bg-raised)));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-1), inset 0 1px 0 var(--sheen);
  position: relative;
}
.card-tight { padding: 13px; }
.card-flush { padding: 0; overflow: hidden; }
.card-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }

/* Glass: used for anything floating above the page (bars, sheets, palette). */
.glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--glass-line);
}

/* A hairline of light along the top edge — reads as a lit surface, cheaply. */
.sheen::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sheen) 18%, var(--sheen) 82%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

/* ------------------------------------------------------- 3D tilt cards */

.tilt-scene { perspective: 1100px; }
.tilt {
  transform-style: preserve-3d;
  transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease);
  will-change: transform;
}
.tilt-scene:hover .tilt { box-shadow: var(--shadow-3); }
.tilt > * { transform: translateZ(0.01px); }
.tilt-pop { transform: translateZ(38px); }
.tilt-pop-sm { transform: translateZ(18px); }

/* Rim light that follows the pointer, set from JS via --mx / --my. */
.tilt-glow::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), var(--accent-ghost), transparent 62%);
  opacity: 0; transition: opacity var(--mid); pointer-events: none;
}
.tilt-scene:hover .tilt-glow::after { opacity: 1; }

/* ------------------------------------------------------------- buttons */

button, .btn {
  font: inherit; font-weight: 570;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-hi);
  color: var(--text);
  padding: 9px 15px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform var(--fast) var(--ease), background var(--fast), border-color var(--fast),
              opacity var(--fast), box-shadow var(--fast), color var(--fast);
  white-space: nowrap;
  position: relative;
}
button:hover, .btn:hover { border-color: var(--line-strong); background: var(--bg-card); text-decoration: none; }
button:active, .btn:active { transform: translateY(1px) scale(0.992); }
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button[disabled], .btn[disabled] { opacity: 0.42; cursor: not-allowed; }
button[disabled]:active { transform: none; }

.btn-primary {
  background: linear-gradient(180deg, var(--accent-soft) -40%, var(--accent) 40%, var(--accent-deep));
  border-color: transparent; color: #04120f; font-weight: 680;
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
:root[data-theme='light'] .btn-primary { color: #fff; }
.btn-primary:hover {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  border-color: transparent;
  box-shadow: 0 14px 40px var(--accent-glow);
}
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 34%, transparent); background: var(--danger-ghost); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); border-color: color-mix(in srgb, var(--danger) 52%, transparent); }
.btn-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 34%, transparent); background: var(--ok-ghost); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { background: var(--bg-hi); border-color: var(--line); color: var(--text); }
.btn-outline { background: transparent; }
.btn-sm { padding: 6px 11px; font-size: 0.83rem; border-radius: var(--r-sm); gap: 6px; }
.btn-xs { padding: 3px 8px; font-size: 0.75rem; border-radius: var(--r-xs); gap: 5px; }
.btn-lg { padding: 15px 24px; font-size: 1.03rem; border-radius: var(--r-lg); }
.btn-block { width: 100%; }
.btn-icon { padding: 8px; width: 34px; height: 34px; }
.btn-icon.btn-sm { width: 29px; height: 29px; padding: 5px; }
.btn svg { flex: none; }

/* Busy state: the label stays, a bar runs underneath. No spinner swap. */
.btn.busy { pointer-events: none; opacity: 0.85; }
.btn.busy::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  animation: sweep 1s linear infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.kbd {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  padding: 2px 6px; border-radius: 5px; color: var(--text-faint);
  background: var(--bg-input); border: 1px solid var(--line); border-bottom-width: 2px;
}

/* -------------------------------------------------------------- inputs */

label { display: block; font-size: 0.81rem; color: var(--text-dim); margin-bottom: 6px; font-weight: 550; }
/* `input:not([type])` included on purpose: a bare <input> defaults to text but
   is not matched by [type='text'], and would keep its 20-character intrinsic
   width — wide enough to widen the whole layout viewport on a phone. */
input:not([type]), input[type='text'], input[type='email'], input[type='password'], input[type='number'],
input[type='search'], input[type='tel'], select, textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--bg-input); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px 12px;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
textarea { resize: vertical; min-height: 74px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-ghost); outline: none;
}
input:not([type]):hover, input[type='text']:hover, input[type='email']:hover, input[type='password']:hover, input[type='search']:hover,
input[type='tel']:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
input[type='range'] { -webkit-appearance: none; appearance: none; background: transparent; width: 100%; height: 20px; padding: 0; border: 0; }
input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: var(--line); }
input[type='range']::-moz-range-track { height: 4px; border-radius: 99px; background: var(--line); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; margin-top: -6px;
  background: var(--accent); border: 2px solid var(--bg-card); box-shadow: 0 2px 8px var(--accent-glow); cursor: grab;
}
input[type='range']::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg-card); cursor: grab;
}

.field-icon { position: relative; }
.field-icon input { padding-left: 36px; }
.field-icon > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 40px; height: 23px; border-radius: var(--r-pill);
  background: var(--bg-input); border: 1px solid var(--line);
  position: relative; transition: background var(--fast), border-color var(--fast); flex: none;
}
.switch-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--text-faint);
  transition: transform var(--mid) var(--ease-back), background var(--fast);
}
.switch input:checked + .switch-track { background: var(--accent-ghost); border-color: var(--accent-line); }
.switch input:checked + .switch-track::after { transform: translateX(17px); background: var(--accent); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

.seg { display: inline-flex; background: var(--bg-input); border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; gap: 3px; }
.seg button { border: none; background: transparent; padding: 6px 13px; border-radius: 9px; font-size: 0.85rem; color: var(--text-dim); box-shadow: none; }
.seg button:hover { background: var(--bg-hi); }
.seg button[aria-pressed='true'] { background: var(--accent-ghost); color: var(--accent); }

.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: 0.88rem; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-box {
  width: 18px; height: 18px; border-radius: 5px; flex: none;
  border: 1.5px solid var(--line-strong); background: var(--bg-input);
  display: grid; place-items: center; transition: all var(--fast) var(--ease);
}
.check-box svg { opacity: 0; transform: scale(0.5); transition: all var(--fast) var(--ease-back); color: #04120f; }
:root[data-theme='light'] .check-box svg { color: #fff; }
.check input:checked + .check-box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check-box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check-box { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------- status pill (§6.1) */

.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 10px; border-radius: var(--r-pill);
  background: var(--bg-input); border: 1px solid var(--line);
  font-size: 0.82rem; font-weight: 560; color: var(--text-dim);
  transition: color var(--mid), border-color var(--mid), background var(--mid);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex: none; transition: background var(--mid); }
.status-pill[data-state='connecting'] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 34%, transparent); background: var(--warn-ghost); }
.status-pill[data-state='connecting'] .status-dot { background: var(--warn); animation: pulse 1.15s var(--ease) infinite; }
.status-pill[data-state='peer_found'],
.status-pill[data-state='transferring'] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-ghost); }
.status-pill[data-state='peer_found'] .status-dot { background: var(--accent); }
.status-pill[data-state='transferring'] .status-dot { background: var(--accent); animation: pulse 0.7s var(--ease) infinite; }
.status-pill[data-state='complete'] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 34%, transparent); background: var(--ok-ghost); }
.status-pill[data-state='complete'] .status-dot { background: var(--ok); }
.status-pill[data-state='error'] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-ghost); }
.status-pill[data-state='error'] .status-dot { background: var(--danger); }

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }

/* ------------------------------------------------------- progress ring */

.ring { --pct: 0; width: 112px; height: 112px; position: relative; display: grid; place-items: center; }
.ring .dial { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring .mark { position: absolute; width: 34px; height: 34px; }
.ring circle { fill: none; stroke-width: 6; }
.ring .track { stroke: var(--line); }
.ring .bar {
  stroke: var(--accent); stroke-linecap: round;
  stroke-dasharray: 302; stroke-dashoffset: calc(302 - 302 * var(--pct));
  transition: stroke-dashoffset var(--mid) var(--ease);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.ring-label { font-size: 1.06rem; font-weight: 670; }
.ring-check { stroke: var(--ok); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.ring.done .bar { stroke: var(--ok); }
.ring.done .ring-check { animation: draw-check 220ms var(--ease) forwards; }
@keyframes draw-check { to { stroke-dashoffset: 0; } }

/* -------------------------------------------------------- progress bar */

.bar-track { height: 5px; border-radius: var(--r-pill); background: var(--line-soft); overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: var(--r-pill); background: var(--accent); transition: width 140ms linear, background var(--mid); }
.bar-fill.warn { background: var(--warn); }
.bar-fill.danger { background: var(--danger); }
.bar-fill.ok { background: var(--ok); }
.bar-fill.stripe {
  background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.22) 25%, transparent 25%, transparent 50%,
    rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.22) 75%, transparent 75%);
  background-size: 14px 14px; animation: stripe 700ms linear infinite;
}
@keyframes stripe { to { background-position: 14px 0; } }

/* --------------------------------------------------------- QR + code */

.qr-frame {
  background: #fff; border-radius: var(--r-lg); padding: 13px;
  width: 100%; max-width: 272px; margin: 0 auto; aspect-ratio: 1;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--line);
  position: relative;
}
.qr-frame svg { width: 100%; height: 100%; display: block; }
.qr-reveal { animation: qr-in 340ms var(--ease); }
@keyframes qr-in {
  from { clip-path: circle(0% at 50% 50%); opacity: 0.4; }
  to   { clip-path: circle(78% at 50% 50%); opacity: 1; }
}
/* Scan sweep: a live QR looks live from across a counter. */
.qr-frame.live::after {
  content: ''; position: absolute; left: 13px; right: 13px; height: 34%;
  border-radius: 8px; pointer-events: none;
  background: linear-gradient(180deg, transparent, hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.15), transparent);
  animation: qr-sweep 2.6s var(--ease) infinite;
}
@keyframes qr-sweep { 0% { top: 13px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 62%; opacity: 0; } }

.code-readout {
  font-family: var(--mono); font-size: 2.2rem; font-weight: 700;
  letter-spacing: 0.16em; color: var(--text);
  text-shadow: 0 0 28px var(--accent-glow);
}

/* --------------------------------------------------------------- badge */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.71rem; font-weight: 620; letter-spacing: 0.025em;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--bg-input); border: 1px solid var(--line); color: var(--text-dim);
  white-space: nowrap;
}
.badge-live { color: var(--accent); border-color: var(--accent-line); background: var(--accent-ghost); }
.badge-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 34%, transparent); background: var(--warn-ghost); }
.badge-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 34%, transparent); background: var(--danger-ghost); }
.badge-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 34%, transparent); background: var(--ok-ghost); }
.badge-violet { color: var(--sand); border-color: rgba(194, 161, 115, 0.32); background: var(--sand-ghost); }
.badge-dot::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--bg-input); color: var(--text-dim);
  font-size: 0.82rem; font-weight: 540; cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip[aria-pressed='true'] { background: var(--accent-ghost); border-color: var(--accent-line); color: var(--accent); }

/* --------------------------------------------------------------- modal */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 8, 7, 0.7); backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: 20px;
  animation: fade-in var(--fast) var(--ease);
}
.modal {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-3);
  width: min(980px, 100%); max-height: 92vh; display: flex; flex-direction: column;
  animation: modal-in var(--mid) var(--ease);
  overflow: hidden;
}
.modal-sm { width: min(460px, 100%); }
.modal-md { width: min(640px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line-soft); flex: none; }
.modal-body { padding: 18px; overflow: auto; flex: 1; }
.modal-foot { display: flex; gap: 9px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; flex: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Right-hand drawer — chat and per-customer detail live here. */
.drawer-backdrop { position: fixed; inset: 0; z-index: 58; background: rgba(6, 8, 7, 0.5); animation: fade-in var(--fast); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 59;
  width: min(430px, 100%); display: flex; flex-direction: column;
  background: var(--bg-raised); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  animation: drawer-in var(--mid) var(--ease);
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
.drawer.out { animation: drawer-out var(--fast) var(--ease) forwards; }
@keyframes drawer-out { to { transform: translateX(100%); opacity: 0.6; } }

/* Bottom sheet — the phone's modal idiom. */
.sheet-backdrop { position: fixed; inset: 0; z-index: 58; background: rgba(6, 8, 7, 0.62); backdrop-filter: blur(5px); animation: fade-in var(--fast); display: flex; align-items: flex-end; }
.sheet {
  width: 100%; background: var(--bg-raised); border-top: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
  max-height: 86vh; overflow: auto; animation: sheet-in var(--mid) var(--ease);
}
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
.sheet-grip { width: 38px; height: 4px; border-radius: 99px; background: var(--line-strong); margin: 6px auto 14px; }

/* --------------------------------------------------------------- toast */

.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; pointer-events: none; }
.toast {
  background: var(--bg-card); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-md); padding: 11px 15px; box-shadow: var(--shadow-2);
  max-width: 360px; font-size: 0.88rem; animation: toast-in var(--mid) var(--ease-back);
  pointer-events: auto; display: flex; gap: 10px; align-items: flex-start;
}
.toast.err { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--warn); }
.toast.ok { border-left-color: var(--ok); }
.toast.out { animation: toast-out var(--fast) var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(26px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(26px); } }
@media (max-width: 560px) {
  /* Clear of the phone's sticky send bar, which owns the bottom edge. */
  .toasts { left: 14px; right: 14px; bottom: 92px; align-items: stretch; }
  .toast { max-width: none; }
}

/* -------------------------------------------------------------- topbar */

.topbar {
  position: sticky; top: 0; z-index: 40;
  box-shadow: inset 0 -1px 0 var(--sheen);
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-inner { display: flex; align-items: center; gap: 14px; padding: 11px 22px; max-width: 1560px; margin: 0 auto; min-height: var(--topbar-h); }

/* Marketing nav is the first thing to overflow a phone: the links push the bar
   past the viewport, and the layout viewport widens to fit it. Drop them —
   every one is reachable by scrolling the page they link into. */
@media (max-width: 760px) {
  .topbar-inner { gap: 9px; padding: 10px 16px; }
  .topbar-inner .nav-link { display: none; }
}

/* ------------------------------------------------------- app shell */

.shell { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }
.rail {
  border-right: 1px solid var(--line-soft);
  background: var(--bg-raised);
  padding: 14px 12px; display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.rail-group { margin-top: 14px; }
.rail-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-faint); font-weight: 640; padding: 0 10px; margin-bottom: 6px; }
.rail-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: var(--r-md); border: 1px solid transparent;
  background: transparent; color: var(--text-dim); font-size: 0.89rem; font-weight: 540;
  justify-content: flex-start; text-align: left; box-shadow: none;
}
.rail-item:hover { background: var(--bg-hi); border-color: transparent; color: var(--text); }
.rail-item[aria-current='true'] { background: var(--accent-ghost); color: var(--accent); border-color: var(--accent-line); }
.rail-item[aria-current='true']::before {
  content: ''; position: absolute; left: -12px; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--accent); box-shadow: 0 0 12px var(--accent-glow);
}
.rail-item { position: relative; }
.rail-item .ico { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; align-items: center; justify-content: center; background: var(--bg-hi); flex: none; transition: background var(--fast), color var(--fast); }
.rail-item[aria-current='true'] .ico { background: var(--accent); color: #04120f; }
@media (max-width: 1020px) {
  .rail-item[aria-current='true']::before { display: none; }
  .rail-item .ico { width: 24px; height: 24px; background: transparent; }
  .rail-item[aria-current='true'] .ico { background: transparent; color: var(--accent); }
}
.rail-item svg { flex: none; }
.rail-item .count { margin-left: auto; font-size: 0.74rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.rail-item[aria-current='true'] .count { color: var(--accent); }

.pane { padding: 20px 24px 60px; min-width: 0; }
@media (max-width: 1020px) {
  .shell { grid-template-columns: 1fr; }
  /* The rail becomes a thumb-reachable tab bar. */
  .rail {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto;
    flex-direction: row; justify-content: space-around; overflow-x: auto; z-index: 45; border-right: 0;
    border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--glass); backdrop-filter: blur(16px);
  }
  .rail-group, .rail-label, .rail .brand, .rail .spacer { display: none; }
  .rail-item { flex-direction: column; gap: 3px; font-size: 0.68rem; padding: 6px 10px; min-width: 62px; }
  .rail-item .count {
    margin-left: 0; position: absolute; top: 2px; right: 8px;
    background: var(--accent); color: #04120f; border-radius: 99px;
    min-width: 15px; height: 15px; font-size: 0.62rem; font-weight: 700;
    display: grid; place-items: center; padding: 0 4px;
  }
  .rail-item .count:empty { display: none; }
  .pane { padding: 16px 16px 96px; }
}

/* The counter dashboard is a desktop tool, but a tablet or a phone should not
   be a broken experience — the header is where it fails first. */
@media (max-width: 720px) {
  .topbar-inner { gap: 8px; padding: 9px 16px; flex-wrap: nowrap; }
  .topbar-inner h1 { font-size: 0.95rem; }
  .topbar-inner > div:first-child { min-width: 0; overflow: hidden; }
  .topbar-inner > div:first-child h1,
  .topbar-inner > div:first-child .faint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #shop-sub, .hide-sm { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .stat { padding: 11px 12px; }
  .stat-value { font-size: 1.32rem; }
  .action-bar { left: 12px; right: 12px; transform: none; justify-content: flex-start; }
  .action-bar span:not(.badge) { flex: none; }
  @keyframes bar-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
  .drawer { width: 100%; }
  .modal { border-radius: var(--r-lg); }
}

/* ---------------------------------------------------------- stat tiles */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 13px 15px; position: relative; overflow: hidden;
}
.stat-label { font-size: 0.74rem; color: var(--text-faint); font-weight: 560; letter-spacing: 0.02em; }
.stat-value { font-size: 1.72rem; font-weight: 700; letter-spacing: -0.035em; margin-top: 2px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 0.75rem; color: var(--text-faint); }
.stat::after {
  content: ''; position: absolute; right: -20px; top: -20px; width: 78px; height: 78px;
  border-radius: 50%; background: var(--accent-ghost); filter: blur(14px);
}
.stat.violet::after { background: var(--violet-ghost); }
.stat.warn::after { background: var(--warn-ghost); }

/* ------------------------------------------------- customer cards (§6.2) */

.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap: 14px; align-items: start; }
.feed.list { grid-template-columns: 1fr; }

.cust-card {
  position: relative;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color var(--fast), transform var(--fast) var(--ease), box-shadow var(--fast);
}
.cust-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.cust-card.selected { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-2); }
.cust-card.arriving { animation: card-in 380ms var(--ease-back); }
.cust-card.arriving::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-lg); pointer-events: none; z-index: 3;
  background: var(--accent-ghost); animation: highlight-fade 2s var(--ease) forwards;
}
.cust-card.dissolving { animation: card-out 420ms var(--ease) forwards; pointer-events: none; }
.cust-card.live-edge::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  animation: edge-run 2s var(--ease) infinite;
}
@keyframes edge-run { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes card-in { from { opacity: 0; transform: translateY(-20px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes highlight-fade { 0% { opacity: 1; } 60% { opacity: 0.5; } 100% { opacity: 0; } }
@keyframes card-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.93); } }

.cust-head { position: relative; padding: 12px 14px 10px; border-bottom: 1px solid var(--line-soft); }
.cust-name { font-weight: 645; font-size: 1rem; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cust-body { padding: 12px 14px; }
.cust-foot { padding: 9px 12px 12px; display: flex; gap: 7px; }

.token {
  font-family: var(--mono); font-weight: 700; font-size: 0.78rem;
  min-width: 30px; height: 24px; padding: 0 7px; border-radius: var(--r-sm);
  display: inline-grid; place-items: center; flex: none;
  background: var(--accent-ghost); color: var(--accent); border: 1px solid var(--accent-line);
}

.thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.thumb-grid.wide { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.thumb {
  aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; cursor: pointer;
  background: var(--bg-input); border: 1px solid var(--line);
  display: grid; place-items: center; position: relative; padding: 0;
  transition: transform var(--fast) var(--ease), border-color var(--fast), box-shadow var(--fast);
}
.thumb:hover { transform: translateY(-2px) scale(1.03); border-color: var(--accent-line); box-shadow: var(--shadow-2); z-index: 2; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .pdf-tag { font-size: 0.64rem; font-weight: 700; color: var(--text-dim); letter-spacing: 0.06em; }
.thumb.incoming { border-color: var(--accent-line); }
.thumb.picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line); }
.thumb-pick {
  position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 5px; z-index: 2;
  background: rgba(0, 0, 0, 0.55); border: 1.5px solid rgba(255, 255, 255, 0.6);
  display: grid; place-items: center; color: #fff; opacity: 0; transition: opacity var(--fast);
}
.thumb:hover .thumb-pick, .thumb.picked .thumb-pick { opacity: 1; }
.thumb.picked .thumb-pick { background: var(--accent); border-color: var(--accent); color: #04120f; }
.thumb-tag {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 3px 5px;
  font-size: 0.62rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thumb.sent-back { border-color: color-mix(in srgb, var(--sand) 34%, transparent); }

.ttl-strip { padding: 0 14px 11px; }
.ttl-label { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-faint); margin-bottom: 5px; }

/* ------------------------------------------------------------ checklist */

.checklist { display: flex; flex-direction: column; gap: 7px; }
.check-row {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-input);
  transition: all var(--fast) var(--ease);
}
.check-row.done { border-color: var(--ok); background: var(--ok-ghost); }
.check-row.done .check-row-label { text-decoration: line-through; color: var(--text-faint); }
.check-row-mark {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); color: transparent; transition: all var(--mid) var(--ease-back);
}
.check-row.done .check-row-mark { background: var(--ok); border-color: var(--ok); color: #04120f; transform: scale(1.06); }
.check-row-label { font-size: 0.9rem; font-weight: 545; }
.check-row-hint { font-size: 0.76rem; color: var(--text-faint); }

/* ----------------------------------------------------------------- chat */

.chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.bubble {
  max-width: 82%; padding: 9px 13px; border-radius: 15px; font-size: 0.89rem; line-height: 1.45;
  animation: bubble-in var(--mid) var(--ease-back); word-break: break-word;
}
.bubble.them { align-self: flex-start; background: var(--bg-hi); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.bubble.me { align-self: flex-end; background: var(--accent-ghost); border: 1px solid var(--accent-line); color: var(--text); border-bottom-right-radius: 5px; }
.bubble.sys { align-self: center; background: transparent; color: var(--text-faint); font-size: 0.78rem; border: 0; padding: 2px; }
.bubble-time { font-size: 0.68rem; color: var(--text-faint); margin-top: 3px; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(7px) scale(0.97); } to { opacity: 1; transform: none; } }
.chat-compose { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line-soft); align-items: flex-end; }
.chat-compose textarea { min-height: 40px; max-height: 120px; padding: 9px 12px; border-radius: var(--r-md); }
.typing { display: inline-flex; gap: 3px; align-items: center; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); animation: typing 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ------------------------------------------------------ command palette */

.palette-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(6, 8, 7, 0.6); backdrop-filter: blur(6px); display: flex; justify-content: center; padding-top: 12vh; animation: fade-in var(--fast); }
.palette {
  width: min(560px, calc(100% - 32px)); height: fit-content; max-height: 62vh;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); overflow: hidden; display: flex; flex-direction: column;
  animation: modal-in var(--mid) var(--ease);
}
.palette input { border: 0; border-radius: 0; border-bottom: 1px solid var(--line-soft); padding: 15px 18px; font-size: 1rem; background: transparent; }
.palette input:focus { box-shadow: none; border-color: var(--line-soft); }
.palette-list { overflow-y: auto; padding: 6px; }
.palette-item {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px;
  border-radius: var(--r-sm); border: 0; background: transparent; color: var(--text);
  font-size: 0.9rem; justify-content: flex-start; text-align: left; box-shadow: none;
}
.palette-item[aria-selected='true'] { background: var(--accent-ghost); color: var(--accent); }
.palette-item .hint { margin-left: auto; font-size: 0.74rem; color: var(--text-faint); }

/* ---------------------------------------------------------- action bar */

/* Appears when documents are selected; lifts off the page rather than pushing it. */
.action-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 9px; padding: 9px 11px 9px 15px;
  border-radius: var(--r-pill); box-shadow: var(--shadow-3);
  background: var(--glass); backdrop-filter: blur(18px) saturate(1.6); border: 1px solid var(--glass-line);
  animation: bar-in var(--mid) var(--ease-back); max-width: calc(100% - 28px); overflow-x: auto;
}
@keyframes bar-in { from { opacity: 0; transform: translate(-50%, 22px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 1020px) { .action-bar { bottom: 78px; } }

/* ------------------------------------------------------------ file rows */

/* Shared by the phone's review queue and the operator's tools tray, so the two
   cannot drift. Previously these lived only in the customer page's inline
   styles, which left every thumbnail on the dashboard rendering at full size. */
.queue-item {
  display: flex; gap: 11px; align-items: center; padding: 9px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-card);
}
.queue-thumb {
  width: 54px; height: 54px; border-radius: var(--r-sm); object-fit: cover; flex: none;
  background: var(--bg-input); display: grid; place-items: center;
  font-size: 0.62rem; font-weight: 700; color: var(--text-dim);
}

/* --------------------------------------------------------- drop zone */

.dropzone {
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
  padding: 26px 18px; text-align: center; color: var(--text-faint);
  transition: all var(--fast) var(--ease); background: var(--bg-input);
}
.dropzone.over { border-color: var(--accent); background: var(--accent-ghost); color: var(--accent); transform: scale(1.01); }

/* ---------------------------------------------------------- empty state */

.empty { text-align: center; padding: 46px 20px; color: var(--text-faint); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.empty svg { color: var(--line-strong); margin-bottom: 10px; }

.skeleton { background: linear-gradient(90deg, var(--bg-hi) 25%, var(--line-soft) 37%, var(--bg-hi) 63%); background-size: 400% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--r-sm); }
@keyframes shimmer { to { background-position: -400% 0; } }

/* ------------------------------------------------------------ marketing */

.hero { position: relative; padding: 34px 0 54px; display: flex; align-items: center; overflow: hidden; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-inner { position: relative; z-index: 1; width: 100%; }
.hero h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.03; letter-spacing: -0.035em; }
.hero-lead { font-size: clamp(1rem, 1.6vw, 1.16rem); max-width: 540px; }
.gradient-text {
  background: linear-gradient(100deg, var(--accent), var(--violet) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section { padding: 84px 0; position: relative; }
.section-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--accent); font-weight: 650; margin-bottom: 10px; }
.eyebrow { font-size: clamp(1.5rem, 3vw, 2.15rem); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 12px; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }

.step-num {
  width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center;
  font-weight: 700; font-size: 0.92rem; background: var(--accent-ghost); color: var(--accent);
  border: 1px solid var(--accent-line);
}

/* ------------------------------------------------------------ utilities */

.grid-2 { display: grid; grid-template-columns: 352px 1fr; gap: 18px; align-items: start; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; }
@media (max-width: 980px) { .grid-2 { grid-template-columns: 1fr; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.divider { height: 1px; background: var(--line-soft); margin: 4px 0; }

.tooltip { position: relative; }
.tooltip::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--bg-hi); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 5px 9px; font-size: 0.75rem; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--fast), transform var(--fast); box-shadow: var(--shadow-2); z-index: 30; font-weight: 500;
}
.tooltip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==================================================== counter view (v3) */

/* One row of numbers instead of four cards. The same four facts in a third of
   the height, which is the height the customer queue gets back. */
.metrics {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2px; margin-bottom: 14px; overflow: hidden;
}
.metric { flex: 1 1 130px; display: flex; align-items: baseline; gap: 8px; padding: 11px 15px; position: relative; min-width: 0; }
.metric + .metric::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--line-soft); }
.metric b { font-size: 1.42rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.metric span { font-size: 0.82rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric i { font-style: normal; font-size: 0.76rem; color: var(--text-faint); margin-left: auto; white-space: nowrap; }
.metric.live b { color: var(--accent); }
@media (max-width: 620px) { .metric { flex: 1 1 46%; } .metric:nth-child(odd)::before { display: none; } }

/* Session column is narrower than the old 352px, because the QR no longer
   shares it with a permanently expanded settings panel. */
.counter-grid { display: grid; grid-template-columns: 316px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1080px) { .counter-grid { grid-template-columns: 1fr; } }

.session-card { padding: 16px; }
.session-card .qr-frame { max-width: 100%; margin: 0; }
button.qr-frame {
  border: 0; font: inherit; cursor: zoom-in; display: block; width: 100%;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
button.qr-frame:hover {
  background: #fff; transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3), 0 0 0 2px var(--accent-line);
}
button.qr-frame:active { transform: none; }
.qr-frame .tap-hint {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-size: 0.66rem; font-weight: 640; letter-spacing: 0.04em; text-transform: uppercase;
  color: #4a5450; opacity: 0; transition: opacity var(--fast); pointer-events: none;
}
button.qr-frame:hover .tap-hint { opacity: 1; }

.code-line { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.code-line .code-readout { font-size: 1.68rem; letter-spacing: 0.14em; }

/* Everything that is set once a day, folded away but one click deep. */
.settings-fold { border-top: 1px solid var(--line-soft); margin-top: 14px; padding-top: 4px; }
.settings-fold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 9px 2px; font-size: 0.85rem; font-weight: 570; color: var(--text-dim);
}
.settings-fold > summary::-webkit-details-marker { display: none; }
.settings-fold > summary::after { content: ''; margin-left: auto; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--mid) var(--ease); }
.settings-fold[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.settings-fold > summary:hover { color: var(--text); }

/* The QR, shown big enough to scan from the customer's side of the counter. */
.qr-big { display: grid; place-items: center; gap: 16px; padding: 6px 0 2px; }
.qr-big .qr-frame { max-width: min(62vh, 460px); }
.qr-big .code-readout { font-size: 2.6rem; }

/* Two labelled banks instead of one row of seven equal tabs. */
.tool-tabs { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.tool-group { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tool-group-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-faint); font-weight: 660; flex: none; }
.tool-group .seg { flex-wrap: wrap; }
@media (max-width: 900px) { .tool-group { flex: 1 1 100%; } }

/* ============================================ document workspace (v3) */

/* Image left, controls right, each with its own scroll. The old single column
   meant expanding the compression panel pushed the document off screen, so an
   operator adjusted brightness while looking at a slider. */
.dv { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 14px; align-items: start; }
.dv-stage {
  position: sticky; top: 0; background: var(--bg-input); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px; display: grid; place-items: center;
  min-height: 320px; height: min(68vh, 700px); overflow: auto;
}
.dv-panel { display: flex; flex-direction: column; gap: 10px; max-height: min(68vh, 700px); overflow-y: auto; padding-right: 3px; scrollbar-width: thin; }
@media (max-width: 900px) {
  .dv { grid-template-columns: 1fr; }
  .dv-stage { position: static; height: auto; max-height: 44vh; }
  .dv-panel { max-height: none; overflow: visible; }
}

.dv-group { border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--bg-input); padding: 12px; }
.dv-group > h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-faint); margin-bottom: 10px; font-weight: 650; }

/* Big labelled targets. A counter is used standing up, often with a queue. */
.dv-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.dv-tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 8px; min-height: 66px; border-radius: var(--r-sm); font-size: 0.8rem; font-weight: 560;
  line-height: 1.2; text-align: center; white-space: normal;
}
.dv-tool svg { color: var(--text-dim); }
.dv-tool:hover svg { color: var(--accent); }
.dv-tool[aria-pressed='true'] { background: var(--accent-ghost); border-color: var(--accent-line); color: var(--accent); }
.dv-tool[aria-pressed='true'] svg { color: var(--accent); }
.dv-tools.three { grid-template-columns: repeat(3, 1fr); }
.dv-tools.three .dv-tool { min-height: 60px; font-size: 0.74rem; }

.dv-slider { display: grid; gap: 4px; }
.dv-slider .row-between { font-size: 0.78rem; color: var(--text-dim); }
.dv-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.dv-fields label { font-size: 0.72rem; margin-bottom: 3px; }
.dv-fields input, .dv-fields select { padding: 7px 9px; font-size: 0.85rem; }
.dv-meta { font-size: 0.76rem; color: var(--text-faint); display: flex; justify-content: space-between; gap: 8px; }

/* Destructive action pulled away from the primary one, so "erase this
   citizen's document" is not one slip from "download it". */
.modal-foot > .btn-danger:first-child { margin-right: auto; }
.modal-xl { width: min(1240px, 100%); }

/* ------------------------------------------- reduced motion (§6.2 last) */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .qr-reveal { clip-path: none; }
  button.qr-frame:hover { transform: none; }
  .qr-frame.live::after { display: none; }
  .tilt { transform: none !important; }
}

@media print {
  .topbar, .rail, .action-bar, .toasts, button { display: none !important; }
  body { background: #fff; color: #000; }
}