/* ─── VELLON · Free-gelato campaign — app styles ──────────────────────────
   Bespoke surfaces built on VELLON tokens. Two mobile "URLs": customer (/) and
   staff (/staff). Mobile is pixel-faithful to the design; the ≥768px staff
   dashboard is bespoke (see “STAFF · TABLET/DESKTOP” at the bottom). */

:root {
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --stage-bg: #DED8CB; /* warm neutral behind the phone screen */
}

*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; }

/* Wordmark — Jost stand-in for the VELLON geometric grotesque (see tokens.css). */
.g-wordmark { font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.30em;
  text-transform: uppercase; line-height: 1; white-space: nowrap; color: currentColor;
  -webkit-user-select: none; user-select: none; }

/* ── phone shell ─────────────────────────────────────────────── */
.g-stage {
  min-height: 100vh; min-height: 100dvh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--stage-bg);
}
.g-phone {
  position: relative; width: 100%; max-width: 430px;
  height: 100vh; height: 100dvh;
  background: var(--surface-page); overflow: hidden;
  display: flex; flex-direction: column;
}
@media (min-width: 500px) {
  .g-stage { padding: 28px; }
  .g-phone { height: min(920px, calc(100dvh - 56px)); border-radius: 30px; box-shadow: var(--shadow-float); }
}
/* #root must fill the phone shell (a flex column) so the inner .g-scroll gets a
   bounded height to scroll within. Without this it collapses to content height
   and tall screens — e.g. the customer form — overflow the clipped .g-phone with
   no way to reach the consent checkbox / submit button below the fold. */
#root { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.g-app { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.g-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.g-scroll--center { display: flex; flex-direction: column; }
.g-scroll--center > * { margin: auto; width: 100%; }

/* ── shared bits ─────────────────────────────────────────────── */
.g-spin { display: inline-block; border-radius: 50%; border: 2px solid var(--border-strong);
  border-top-color: var(--ink-900); animation: g-spin 700ms linear infinite; box-sizing: border-box; vertical-align: middle; }
@keyframes g-spin { to { transform: rotate(360deg); } }
.g-hint-err { display: inline-flex; align-items: center; gap: 6px; }
.g-link { color: var(--ink-900); text-decoration: underline; text-underline-offset: 2px; background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.g-link:hover { color: var(--ink-700); }
.g-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* focus visibility on bespoke controls */
.g-numpad__key:focus-visible, .g-seg__btn:focus-visible, .dock__chip:focus-visible,
.g-tabbar__t:focus-visible, .g-result__cta:focus-visible, .g-scanbtn:focus-visible, .g-link:focus-visible,
.g-csvbtn:focus-visible, .g-consent__cb:focus-visible + .g-consent__box, .g-search__in:focus-visible,
.g-codeinput:focus-visible, .g-cam__x:focus-visible, .g-cam__manual:focus-visible,
.g-topbar__out:focus-visible, .g-backlink:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ═══ CUSTOMER ═══════════════════════════════════════════════ */
.g-cust-wrap { padding: 22px 22px 30px; }
.g-hero { text-align: center; padding-top: 12px; }
.g-hero__eyebrow { font: var(--font-label); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 20px; }
.g-hero__art { width: 122px; height: 122px; border-radius: 50%; background: var(--pistachio-100); color: var(--pistachio-600); display: grid; place-items: center; margin: 0 auto 20px; }
.g-hero__kicker { font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--ink-500); margin-bottom: 6px; }
.g-hero__title { font-family: var(--font-sans); font-weight: 500; font-size: 40px; line-height: 1.02; letter-spacing: -0.01em; color: var(--ink-900); margin: 0; }
.g-hero__title em { display: inline-block; font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 52px; color: var(--pistachio-600); line-height: 1; margin-top: 2px; }
.g-hero__sub { font: var(--font-body); color: var(--ink-700); max-width: 300px; margin: 16px auto 0; }

/* Tombola (Silkd × Vellon) hero variants */
.g-hero__title--tombola { font-size: 26px; line-height: 1.24; letter-spacing: 0; }
.g-hero__sub--tombola { max-width: 340px; font-size: 15px; }
.g-hero__rules { font: var(--font-caption); font-size: 13px; margin: 14px auto 0; }
.g-cobrand { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 4px auto 22px; }
.g-cobrand__logo { display: block; width: auto; }
/* silkd runs a touch taller so its x-height reads even against VELLON's caps */
.g-cobrand__logo--vellon { height: 22px; }
.g-cobrand__logo--silkd { height: 27px; }
.g-cobrand__x { font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--pistachio-600); }

.g-form { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.g-form .vln-field__input { height: 52px; font-size: 16px; border-radius: var(--radius-md); }
.g-form .vln-field__label { font-size: 11px; }
.g-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* honeypot */

.g-consent { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 6px 2px; min-height: 44px; position: relative; }
.g-consent__cb { position: absolute; opacity: 0; width: 0; height: 0; }
.g-consent__box { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface-card);
  display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; color: var(--cream-100); transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.g-consent__box svg { opacity: 0; }
.g-consent__cb:checked + .g-consent__box { background: var(--ink-900); border-color: var(--ink-900); }
.g-consent__cb:checked + .g-consent__box svg { opacity: 1; }
.g-consent__txt { font: var(--font-caption); font-size: 13.5px; line-height: 1.5; color: var(--ink-700); }
.g-consent--flag .g-consent__box { border-color: var(--danger); }

.g-submit { margin-top: 6px; }
.g-submit__hint { display: flex; align-items: center; justify-content: center; gap: 6px; font: var(--font-caption); color: var(--ink-500); margin: 12px 0 0; }
.g-submit__safe { text-align: center; font: var(--font-caption); color: var(--ink-400); margin: 12px 0 0; }

/* voucher / ticket */
.g-voucher-wrap { padding: 22px 22px 34px; display: flex; flex-direction: column; align-items: center; gap: 18px; position: relative; }
.g-voucher-wrap > * { position: relative; z-index: 1; }
.g-vhead { text-align: center; }
.g-vhead__badge { display: inline-flex; align-items: center; gap: 7px; background: var(--pistachio-100); color: var(--pistachio-600);
  padding: 7px 14px 6px; border-radius: 999px; font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.g-vhead__badge--used { background: var(--cream-200); color: var(--ink-500); }
.g-vhead__title { font-family: var(--font-sans); font-weight: 500; font-size: 22px; color: var(--ink-900); margin: 14px 0 0; }

.g-ticket { width: 100%; max-width: 342px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 22px 22px 4px; position: relative; }
.g-ticket__top { display: flex; align-items: center; justify-content: space-between; }
.g-ticket__logo { font-size: 16px; color: var(--ink-900); }
.g-ticket__metier { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--ink-400); }
.g-ticket__reward { text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 23px; color: var(--pistachio-600); margin-top: 14px; }
.g-ticket__qr { display: flex; justify-content: center; padding: 14px 0 4px; position: relative; }
.g-ticket__qr canvas, .g-ticket__qr svg { display: block; width: 176px; height: 176px; }
.g-ticket__code { text-align: center; font-family: var(--font-mono); font-size: 30px; font-weight: 600; letter-spacing: 0.16em; color: var(--ink-900); margin-top: 12px; }
.g-ticket__perf { position: relative; height: 0; border-top: 2px dashed var(--border-strong); margin: 22px -22px; }
.g-ticket__perf::before, .g-ticket__perf::after { content: ""; position: absolute; top: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-page); }
.g-ticket__perf::before { left: -12px; }
.g-ticket__perf::after { right: -12px; }
.g-ticket__stub { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0 20px; }
.g-ticket__stubcol { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.g-ticket__stubcol--r { text-align: right; }
.g-ticket__stublabel { font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-400); }
.g-ticket__stubval { font-family: var(--font-sans); font-size: 14px; color: var(--ink-800); }
.g-ticket--used .g-ticket__qr canvas, .g-ticket--used .g-ticket__qr svg { filter: grayscale(1); opacity: 0.32; }
.g-stamp { position: absolute; top: 92px; left: 50%; transform: translate(-50%, -50%) rotate(-13deg);
  border: 3px solid var(--terracotta-500); color: var(--terracotta-600); font-family: var(--font-sans); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 24px; padding: 5px 16px; border-radius: 8px; opacity: 0.9; }

.g-savecard { width: 100%; max-width: 342px; background: var(--cream-050); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.g-savecard__row { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-700); }
.g-savecard__title { font-family: var(--font-sans); font-weight: 500; font-size: 14px; color: var(--ink-900); margin: 0 0 3px; }
.g-savecard__sub { font: var(--font-caption); color: var(--ink-500); margin: 0; }
.g-note { width: 100%; max-width: 342px; display: flex; gap: 10px; align-items: flex-start; background: var(--cream-050); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px 16px; color: var(--ink-500); font: var(--font-caption); }
.g-note--used { color: var(--ink-700); }

/* celebration — restrained: single ring + staggered rise (no confetti) */
.g-celebrate { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.g-celebrate__ring { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--pistachio-500); animation: g-ring 900ms var(--ease-out) forwards; }
@keyframes g-ring { from { transform: scale(0.3); opacity: 0.5; } to { transform: scale(6); opacity: 0; } }
.g-rise { opacity: 0; animation: g-rise 440ms var(--ease-out) forwards; }
@keyframes g-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* customer state screens */
.g-state { padding: 30px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 360px; }
.g-state__icon { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; }
.g-state__icon--warn { background: #F0E3CC; color: #7A5A28; }
.g-state__icon--err { background: var(--terracotta-100); color: var(--terracotta-600); }
.g-state__icon--info { background: var(--pistachio-100); color: var(--pistachio-600); }
.g-state__title { font-family: var(--font-sans); font-weight: 500; font-size: 23px; color: var(--ink-900); margin: 0; }
.g-state__body { font: var(--font-body); color: var(--ink-500); margin: 0; }
.g-state__code { font-family: var(--font-mono); font-size: 24px; font-weight: 600; letter-spacing: 0.14em; color: var(--ink-900);
  background: var(--surface-card); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: 12px 18px; margin: 4px 0; }
.g-state__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 8px; }

/* ═══ STAFF ══════════════════════════════════════════════════ */
.g-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-page); flex-shrink: 0; }
.g-topbar__logo { font-size: 14px; color: var(--ink-900); }
.g-topbar__who { display: flex; align-items: center; gap: 6px; }
.g-topbar__op { display: inline-flex; align-items: center; gap: 6px; font: var(--font-caption); color: var(--ink-700); background: var(--cream-050); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 5px 11px; }
.g-topbar__out { background: none; border: none; color: var(--ink-500); cursor: pointer; padding: 6px; border-radius: 999px; display: grid; place-items: center; }
.g-topbar__out:hover { background: var(--hover-darken); color: var(--ink-900); }

.g-staffpad { padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 16px; }

.g-offline { display: flex; align-items: center; gap: 9px; background: #F0E3CC; color: #7A5A28; border-radius: var(--radius-md); padding: 11px 14px; font: var(--font-caption); }

.g-stats { display: flex; align-items: stretch; background: var(--cream-050); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 15px 4px; }
.g-stat { flex: 1; text-align: center; padding: 0 6px; }
.g-stat__value { font-family: var(--font-sans); font-weight: 500; font-size: 27px; color: var(--ink-900); line-height: 1; }
.g-stat__label { font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); margin-top: 7px; }
.g-stat__sub { font-family: var(--font-sans); font-size: 10.5px; color: var(--ink-400); margin-top: 2px; }
.g-stats__div { width: 1px; background: var(--border-subtle); }

/* visitors → signup funnel (mobile) */
.g-statwrap { display: flex; flex-direction: column; gap: 12px; }
.g-funmini { background: var(--cream-050); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.g-funmini__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.g-funmini__label { font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); }
.g-funmini__rate { font-family: var(--font-sans); font-weight: 500; font-size: 21px; color: var(--ink-900); line-height: 1; font-variant-numeric: tabular-nums; }
.g-funmini__meter { position: relative; height: 8px; border-radius: 999px; background: var(--cream-200); overflow: hidden; }
.g-funmini__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }
.g-funmini__sub { font-family: var(--font-sans); font-size: 11px; color: var(--ink-400); }

.g-scanbtn { display: flex; align-items: center; gap: 16px; width: 100%; background: var(--ink-900); color: var(--cream-100); border: none; border-radius: var(--radius-lg); padding: 20px 22px; cursor: pointer; text-align: left; transition: background var(--duration-fast) var(--ease-out); }
.g-scanbtn:hover { background: var(--ink-700); }
.g-scanbtn:active { background: var(--ink-800); }
.g-scanbtn__ic { width: 54px; height: 54px; border-radius: 15px; background: rgba(241,239,234,0.10); display: grid; place-items: center; flex-shrink: 0; }
.g-scanbtn__tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.g-scanbtn__title { font-family: var(--font-sans); font-weight: 500; font-size: 19px; white-space: nowrap; }
.g-scanbtn__sub { font-family: var(--font-sans); font-size: 12.5px; color: var(--cream-300); }

.g-sechead { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.g-sechead > span:first-child { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-700); }
.g-sechead__count { font-family: var(--font-sans); font-size: 12px; color: var(--ink-500); background: var(--cream-200); border-radius: 999px; padding: 2px 10px; min-width: 20px; text-align: center; }

.g-redlist { display: flex; flex-direction: column; }
.g-red { display: flex; align-items: center; gap: 14px; padding: 13px 2px; border-bottom: 1px solid var(--border-subtle); }
.g-red:last-child { border-bottom: none; }
.g-red__time { display: flex; flex-direction: column; min-width: 46px; }
.g-red__hm { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.g-red__d { font-family: var(--font-sans); font-size: 11px; color: var(--ink-400); }
.g-red__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.g-red__name { font-family: var(--font-sans); font-size: 15px; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-red__code { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ink-500); }
.g-red__sub { font: var(--font-caption); color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.g-red__by { display: inline-flex; align-items: center; gap: 5px; font: var(--font-caption); color: var(--ink-500); white-space: nowrap; }

.g-search { display: flex; align-items: center; gap: 10px; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0 12px; height: 48px; }
.g-search__in { flex: 1; min-width: 0; border: none; background: none; font: var(--font-body); font-size: 16px; color: var(--ink-900); outline: none; }
.g-search__in::placeholder { color: var(--ink-400); }
.g-search__clear { background: none; border: none; color: var(--ink-400); cursor: pointer; padding: 4px; display: grid; place-items: center; }

.g-filterrow { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.g-seg { display: inline-flex; background: var(--cream-050); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 3px; }
.g-seg__btn { border: none; background: none; padding: 7px 13px; border-radius: 999px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--ink-500); cursor: pointer; }
.g-seg__btn--on { background: var(--ink-900); color: var(--cream-100); }
.g-csvbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); background: none; border-radius: 999px; padding: 8px 14px; font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; color: var(--ink-900); }
.g-csvbtn:hover:not(:disabled) { background: var(--hover-darken); }
.g-csvbtn:disabled { opacity: 0.4; cursor: not-allowed; }

.g-empty { text-align: center; padding: 34px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.g-empty--sm { padding: 26px 20px; }
.g-empty__ic { width: 60px; height: 60px; border-radius: 50%; background: var(--cream-050); border: 1px solid var(--border-subtle); display: grid; place-items: center; color: var(--ink-400); }
.g-empty--sm .g-empty__ic { width: 48px; height: 48px; }
.g-empty__t { font-family: var(--font-sans); font-size: 16px; color: var(--ink-800); margin: 4px 0 0; }
.g-empty__s { font: var(--font-caption); color: var(--ink-500); margin: 0; max-width: 260px; }

/* bottom tabs */
.g-tabbar { display: flex; border-top: 1px solid var(--border-subtle); background: var(--surface-page); flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom); }
.g-tabbar__t { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 0 13px; background: none; border: none; cursor: pointer; color: var(--ink-400); font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.g-tabbar__t--on { color: var(--ink-900); }

/* PIN */
.g-pin { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 24px 24px 30px; }
.g-pin__head { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; }
.g-pin__logo { font-size: 18px; color: var(--ink-900); }
.g-pin__lockrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-500); }
.g-pin__body { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: auto 0; }
.g-pin__prompt { font-family: var(--font-sans); font-size: 18px; color: var(--ink-800); margin: 0; text-align: center; }
.g-pin__dots { display: flex; gap: 16px; }
.g-pin__dots--err { animation: g-shake 480ms var(--ease-out); }
.g-pin__dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-strong); transition: background var(--duration-fast), border-color var(--duration-fast); }
.g-pin__dot--on { background: var(--ink-900); border-color: var(--ink-900); }
.g-pin__dot--err { border-color: var(--terracotta-500); }
.g-pin__dot--on.g-pin__dot--err { background: var(--terracotta-500); }
.g-pin__err { display: inline-flex; align-items: center; gap: 6px; font: var(--font-caption); color: var(--terracotta-600); margin: 0; }
.g-pin__pad { width: 100%; max-width: 300px; margin-top: 6px; }
@keyframes g-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

/* numpad */
.g-numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.g-numpad__key { height: 64px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 26px; font-weight: 400; color: var(--ink-900); cursor: pointer; display: grid; place-items: center; transition: background var(--duration-fast) var(--ease-out); }
.g-numpad__key:hover:not(:disabled) { background: var(--cream-050); }
.g-numpad__key:active:not(:disabled) { background: var(--cream-200); }
.g-numpad__key--util { background: transparent; border-color: transparent; color: var(--ink-700); }
.g-numpad__key--util:hover:not(:disabled) { background: var(--hover-darken); }
.g-numpad__gap { visibility: hidden; }

/* manual entry */
.g-backlink { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--ink-700); font: var(--font-caption); cursor: pointer; padding: 4px 0; align-self: flex-start; }
.g-manual__title { font-family: var(--font-sans); font-weight: 500; font-size: 23px; color: var(--ink-900); margin: 8px 0 0; }
.g-manual__sub { font: var(--font-body); color: var(--ink-500); margin: 6px 0 0; }
.g-codeinput { width: 100%; box-sizing: border-box; text-align: center; font-family: var(--font-mono); font-size: 30px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; height: 72px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); color: var(--ink-900); outline: none; margin-top: 8px; }
.g-codeinput:focus { border-color: var(--ink-900); }
.g-codeinput::placeholder { color: var(--ink-300); letter-spacing: 0.22em; }
.g-manual__hint { text-align: center; font: var(--font-caption); color: var(--ink-400); margin: 0; }
.g-pin__setup { text-align: center; font: var(--font-caption); color: var(--ink-500); margin: 4px 0 0; max-width: 240px; }

/* ── settings (own PIN + staff management) ───────────────────── */
.g-settings { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 560px; margin: 0 auto; }
.g-set__title { font-family: var(--font-sans); font-weight: 500; font-size: 23px; color: var(--ink-900); margin: 4px 0 0; }
.g-card { display: flex; flex-direction: column; gap: 14px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 18px; }
.g-set__sechead { display: flex; align-items: center; font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-700); }
.g-set__me { display: flex; align-items: center; gap: 12px; }
.g-set__meic { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 999px; background: var(--cream-100); color: var(--ink-700); border: 1px solid var(--border-subtle); }
.g-set__meinfo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.g-set__mename { font-family: var(--font-sans); font-size: 16px; color: var(--ink-900); }
.g-badge { align-self: flex-start; font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; }
.g-badge--admin { background: var(--ink-900); color: var(--cream-100); }
.g-badge--staff { background: var(--cream-200); color: var(--ink-700); }
.g-set__form { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
.g-set__field { display: flex; flex-direction: column; gap: 6px; }
.g-set__label { font: var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-700); }
.g-pininput { height: var(--control-h-md); padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--ink-900); font-family: var(--font-mono); font-size: 18px; letter-spacing: 0.3em; outline: none; box-sizing: border-box; }
.g-pininput:focus { border-color: var(--ink-900); }
.g-pininput::placeholder { color: var(--ink-300); letter-spacing: 0.3em; }
.g-set__err { font: var(--font-caption); color: var(--danger); margin: 0; }
.g-set__muted { font: var(--font-caption); color: var(--ink-500); margin: 4px 0; }
.g-set__staffhost { display: flex; flex-direction: column; gap: 12px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 18px; }
.g-set__list { display: flex; flex-direction: column; }
.g-set__row { display: flex; align-items: center; gap: 10px; padding: 12px 2px; border-bottom: 1px solid var(--border-subtle); }
.g-set__row:last-child { border-bottom: none; }
.g-set__rowmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.g-set__rowname { font-family: var(--font-sans); font-size: 15px; color: var(--ink-900); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-set__you { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); background: var(--cream-100); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 1px 7px; }
.g-set__rowact { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.g-set__abtn { display: grid; place-items: center; height: 34px; min-width: 34px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--ink-700); cursor: pointer; font-family: var(--font-sans); font-size: 13px; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.g-set__abtn:hover { background: var(--hover-darken); color: var(--ink-900); }
.g-set__abtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.g-set__abtn--danger { color: var(--danger); border-color: var(--danger); }
.g-set__abtn--danger:hover { background: var(--danger); color: var(--cream-100); }
.g-set__abtn .g-pininput, .g-set__rowact .g-pininput { height: 34px; width: 84px; font-size: 15px; letter-spacing: 0.2em; padding: 0 10px; }
.g-set__confirm { font: var(--font-caption); color: var(--ink-700); }
.g-set__add { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--border-subtle); }
.g-set__addhead { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-700); }
.g-set__addrow { display: flex; gap: 8px; }
.g-set__in { flex: 1; min-width: 0; height: var(--control-h-md); padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--ink-900); font: var(--font-body); outline: none; box-sizing: border-box; }
.g-set__in:focus { border-color: var(--ink-900); }
.g-set__addrow .g-pininput { width: 96px; flex-shrink: 0; }
.g-set__sel { height: var(--control-h-md); padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--ink-900); font: var(--font-body); cursor: pointer; flex-shrink: 0; }

/* ── scanner (immersive dark) ────────────────────────────────── */
.g-cam { position: absolute; inset: 0; z-index: 20; background: var(--ink-900); color: var(--cream-100); display: flex; flex-direction: column; animation: g-fadein 200ms var(--ease-out); }
.g-cam__bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.g-cam__x { background: rgba(241,239,234,0.08); border: 1px solid var(--border-inverse); color: var(--cream-100); border-radius: 999px; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.g-cam__title { flex: 1; text-align: center; font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-100); }
.g-cam__net { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 11px; color: var(--cream-300); min-width: 38px; justify-content: flex-end; }
.g-cam__stage { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; background: #17130E; overflow: hidden; }
.g-cam__loading { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--cream-300); font: var(--font-caption); z-index: 2; }
.g-cam__view { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 0 24px; z-index: 2; }
.g-cam__hint { text-align: center; color: var(--cream-300); font-size: 13px; margin: 0; max-width: 280px; line-height: 1.5; }
.g-camwrap { position: relative; width: min(72vw, 300px); aspect-ratio: 1; }
.g-camwrap--fill { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; }
.g-reader { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; background: #000; }
.g-reader video { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.g-reader img { display: none !important; } /* html5-qrcode info/scan icons */
.g-reticle { width: 100%; height: 100%; position: absolute; inset: 0; }
.g-reticle__c { position: absolute; width: 30px; height: 30px; border: 3px solid var(--pistachio-500); }
.g-reticle__c--tl { top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 10px; }
.g-reticle__c--tr { top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 10px; }
.g-reticle__c--bl { bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 10px; }
.g-reticle__c--br { bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 10px; }
.g-reticle__laser { position: absolute; left: 8%; right: 8%; top: 6%; height: 2px; background: var(--pistachio-500); box-shadow: 0 0 14px var(--pistachio-500); border-radius: 2px; animation: g-scan 2.4s ease-in-out infinite; }
.g-reticle--still .g-reticle__laser { animation: none; top: 50%; }
@keyframes g-scan { 0% { top: 6%; } 50% { top: 92%; } 100% { top: 6%; } }
.g-cam__foot { padding: 14px 16px 22px; border-top: 1px solid var(--border-inverse); background: var(--ink-900); }
.g-cam__err { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--cream-100); padding: 0 26px; z-index: 2; }
.g-cam__err-ic { width: 60px; height: 60px; border-radius: 50%; background: rgba(241,239,234,0.08); border: 1px solid var(--border-inverse); display: grid; place-items: center; color: var(--caramel-300); }
.g-cam__err-t { font-family: var(--font-sans); font-size: 17px; margin: 4px 0 0; }
.g-cam__err-s { font-size: 13px; color: var(--cream-300); margin: 0; max-width: 300px; line-height: 1.5; }
.g-cam__manual { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; background: none; border: 1px solid var(--border-inverse); color: var(--cream-100); border-radius: 999px; padding: 13px; cursor: pointer; font-family: var(--font-sans); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; }
.g-cam__manual:hover { background: rgba(241,239,234,0.06); }

/* ── result (full-screen, 1-metre legible) ───────────────────── */
.g-result { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; color: var(--cream-050); animation: g-fadein 180ms var(--ease-out); }
.g-result__card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.g-result--ok .g-result__card { background: var(--pistachio-600); }
.g-result--bad .g-result__card { background: var(--terracotta-600); }
.g-result__top { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 26px; gap: 12px; }
.g-result__ring { width: 106px; height: 106px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.12); display: grid; place-items: center; margin-bottom: 10px; }
.g-result__head { font-family: var(--font-sans); font-weight: 600; font-size: 46px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; }
.g-result__name { font-family: var(--font-serif); font-style: italic; font-size: 27px; opacity: 0.96; margin-top: 4px; }
.g-result__code { font-family: var(--font-mono); font-size: 20px; letter-spacing: 0.18em; opacity: 0.82; margin-top: 6px; }
.g-result__meta { font-family: var(--font-sans); font-size: 13px; opacity: 0.8; margin-top: 4px; }
.g-result__actions { padding: 0 22px calc(30px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.g-result__cta { display: flex; align-items: center; justify-content: center; gap: 10px; height: 60px; border-radius: 999px; cursor: pointer; font-family: var(--font-sans); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; border: 1px solid transparent; }
.g-result__cta--solid { background: var(--cream-050); color: var(--ink-900); }
.g-result__cta--solid[disabled] { opacity: 0.6; cursor: default; }
.g-result__cta--ghost { background: transparent; color: var(--cream-050); border-color: rgba(255,255,255,0.5); }
.g-result__auto { text-align: center; font-family: var(--font-sans); font-size: 12px; opacity: 0.75; margin: 2px 0 0; }
@keyframes g-fadein { from { opacity: 0; } }

/* ── toasts ──────────────────────────────────────────────────── */
.g-toasts { position: absolute; left: 0; right: 0; bottom: 84px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; z-index: 70; pointer-events: none; }
.g-toasts .vln-toast { pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   STAFF · TABLET/DESKTOP (bespoke — not in the mobile design)
   ≥768: break out of the phone frame; scanner + live redemptions side by side.
   ≥1024: stats as a header row of cards; a wide redemptions table.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .g-stage--staff { padding: 0; align-items: stretch; background: var(--surface-page); }
  .g-phone--staff { max-width: none; width: 100%; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }

  .g-dash { flex: 1; min-height: 0; overflow-y: auto; width: 100%; max-width: var(--container-max);
    margin: 0 auto; box-sizing: border-box; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
  .g-dash__grid { display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-items: start; }
  .g-dash__viewbar { display: flex; }

  /* stat header cards */
  .g-stathead { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .g-statcard { background: var(--cream-050); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 18px 20px; }
  .g-statcard__value { font-family: var(--font-sans); font-weight: 500; font-size: 34px; color: var(--ink-900); line-height: 1; }
  .g-statcard__label { font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); margin-top: 9px; }
  .g-statcard__sub { font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-400); margin-top: 3px; }

  /* visitors → signup funnel (desktop) */
  .g-funnel { background: var(--cream-050); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 18px 20px; margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
  .g-funnel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .g-funnel__label { font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); }
  .g-funnel__rate { font-family: var(--font-sans); font-weight: 500; font-size: 34px; color: var(--ink-900); line-height: 1; font-variant-numeric: tabular-nums; }
  .g-funnel__meter { position: relative; height: 12px; border-radius: 999px; background: var(--cream-200); overflow: hidden; }
  .g-funnel__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }
  .g-funnel__legend { display: flex; gap: 22px; flex-wrap: wrap; }
  .g-funnel__leg { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-500); }
  .g-funnel__dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
  .g-funnel__dot--all { background: var(--cream-300); }
  .g-funnel__dot--conv { background: var(--accent); }

  /* embedded scanner card */
  .g-scancard { background: var(--ink-900); color: var(--cream-100); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; }
  .g-scancard__head { display: flex; align-items: center; justify-content: space-between; }
  .g-scancard__title { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
  .g-scancard__stage { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: #17130E; display: flex; align-items: center; justify-content: center; }
  .g-scancard__idle { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 20px; }
  .g-scancard__idle-ic { width: 66px; height: 66px; border-radius: 18px; background: rgba(241,239,234,0.08); display: grid; place-items: center; color: var(--pistachio-500); }
  .g-scancard__idle-t { font-size: 13px; color: var(--cream-300); margin: 0; max-width: 220px; line-height: 1.5; }
  .g-scancard__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--pistachio-500); color: var(--ink-900); border: none; border-radius: 999px; padding: 12px 22px; cursor: pointer; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
  .g-scancard__cta:hover { background: var(--pistachio-600); color: var(--cream-050); }
  .g-scancard__stop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; background: none; border: 1px solid var(--border-inverse); color: var(--cream-100); border-radius: 999px; padding: 11px; cursor: pointer; font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
  .g-scancard__manual { display: flex; flex-direction: column; gap: 8px; }
  .g-scancard__manual .g-codeinput { height: 56px; font-size: 24px; }
  .g-scancard__manlabel { font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-300); }

  /* list/table panel */
  .g-listpanel { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 18px 20px 8px; display: flex; flex-direction: column; gap: 16px; }
  .g-dash__toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
  .g-dash__toolbar .g-search { flex: 1; min-width: 220px; }

  .g-table { width: 100%; border-collapse: collapse; }
  .g-table th { text-align: left; font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); }
  .g-table td { padding: 13px 12px; border-bottom: 1px solid var(--border-subtle); font-family: var(--font-sans); font-size: 15px; color: var(--ink-900); }
  .g-table tr:last-child td { border-bottom: none; }
  .g-table__hm { font-variant-numeric: tabular-nums; font-weight: 500; }
  .g-table__code { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--ink-700); }
  .g-table__by { color: var(--ink-500); font-size: 13px; }
  .g-table__col--op, .g-table__col--date { display: none; }

  /* result becomes a centered modal card over a dimmed dashboard */
  .g-app--dash .g-result { background: rgba(27,23,18,0.55); align-items: center; justify-content: center; }
  .g-app--dash .g-result__card { flex: 0 1 auto; width: min(520px, 90vw); max-height: 86vh; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-float); }
  .g-app--dash .g-result__head { font-size: 40px; }
}
@media (min-width: 1024px) {
  .g-dash { padding: 28px 32px; gap: 24px; }
  .g-dash__grid { grid-template-columns: 400px 1fr; gap: 28px; }
  .g-table__col--op, .g-table__col--date { display: table-cell; }
}

/* ── reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .g-rise, .g-celebrate__ring, .g-reticle__laser, .g-result, .g-cam, .vln-dialog, .vln-dialog__overlay, .vln-toast { animation: none !important; }
  .g-rise { opacity: 1 !important; transform: none !important; }
  .g-celebrate { display: none !important; }
  .g-reticle__laser { top: 50% !important; }
  .g-pin__dots--err { animation: none !important; }
}