/* ============================================================
   DESIGN SYSTEM TOKENS
   ------------------------------------------------------------
   Single source of truth for the whole admin's visual language.
   Every recurring color/font/space/shadow value is named here.
   Components below MUST consume these tokens — do NOT hand-roll
   rgba(184, 121, 24, X) or repeat a font-family stack. If you
   need a value that isn't here yet, add it ONCE here, then use
   it everywhere it applies.

   Naming convention:
   - PRIMITIVE: --color-name           (raw color, no semantic)
   - TINTED BAND: --gold-tint-soft/medium/strong  (alpha layers)
   - EDGE: --gold-edge-soft/medium/strong         (border alphas)
   - SURFACE: --surface-band                       (opaque fill for sticky)
   - SEMANTIC: --color-success, --color-danger, etc.
   ============================================================ */
:root {
  /* --- Primitive colors --- */
  --ink: #15201d;
  --muted: #65736f;
  --paper: #f3f0e8;
  --panel: #fffdfa;
  --panel-2: #f8f6ef;
  --line: #ded8cb;
  --line-strong: #c9bfae;
  --leaf: #176b52;
  --leaf-dark: #0f493a;
  --teal: #0f7c80;
  --gold: #b87918;
  --rust: #a94a2f;
  --danger: #b4362b;
  --ok: #176b52;

  /* --- Gold-tinted layers ---
     Used everywhere a "warm accent band" is needed: group
     headers, batch pills' band, bulk-action bar, eyebrow tags. */
  --gold-tint-soft:    rgba(184, 121, 24, 0.06);
  --gold-tint-medium:  rgba(184, 121, 24, 0.12);
  --gold-tint-strong:  rgba(184, 121, 24, 0.18);
  --gold-edge-soft:    rgba(184, 121, 24, 0.20);
  --gold-edge-medium:  rgba(184, 121, 24, 0.35);
  --gold-edge-strong:  rgba(184, 121, 24, 0.55);

  /* --- Opaque "sticky-safe" cream-gold surfaces ---
     For elements that pin via position:sticky — rows scrolling
     underneath must not show through, so these are SOLID, not rgba. */
  --surface-band:       #f4ebd1;   /* group header body */
  --surface-band-head:  #f1ece0;   /* thead cells */

  /* --- Leaf-tinted layers (success / verified accents) --- */
  --leaf-tint-soft:    rgba(23, 107, 82, 0.08);
  --leaf-tint-medium:  rgba(23, 107, 82, 0.18);
  --leaf-edge-soft:    rgba(23, 107, 82, 0.28);
  --leaf-edge-medium:  rgba(23, 107, 82, 0.55);

  /* --- Ink-overlay layers (scrollbars, toasts, overlays) --- */
  --ink-overlay-soft:    rgba(15, 30, 22, 0.18);
  --ink-overlay-medium:  rgba(15, 30, 22, 0.38);
  --ink-overlay-toast:   rgba(15, 30, 22, 0.94);

  /* --- Typography stacks --- */
  --font-sans: "DM Sans", "Aptos", "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* --- Radii --- */
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* --- Motion --- */
  --duration-fast: 0.12s;
  --duration-base: 0.22s;
  --easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);

  /* --- Shadows --- layered for real depth (a tight contact shadow + a soft
     ambient spread) instead of one flat blur. This is what makes cards read
     as "floating" and crafted rather than flat boxes. */
  --shadow: 0 2px 6px rgba(21, 32, 29, 0.05), 0 24px 60px rgba(21, 32, 29, 0.12);
  --soft-shadow: 0 1px 2px rgba(21, 32, 29, 0.04), 0 6px 18px rgba(21, 32, 29, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(21, 32, 29, 0.05), 0 12px 28px rgba(21, 32, 29, 0.10);
  --shadow-toast: 0 10px 30px rgba(15, 30, 22, 0.30);
  --shadow-pill-cta: 0 6px 14px rgba(23, 107, 82, 0.20);

  /* --- Spacing scale (8px rhythm) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

/* ============================================================
   CHIP SYSTEM — the reusable "pill" component
   ------------------------------------------------------------
   Every small pill-shaped UI element across the admin (status
   badges, code chips, batch tags, customer badges, etc.) shares
   the same baseline shape. .chip captures that shape; modifier
   classes layer on colour, typography, behaviour.

   USAGE — compose like Lego bricks in HTML:
     <span class="chip chip--leaf-soft chip--pill">Active</span>
     <span class="chip chip--gold chip--mono">RDET-CCDF</span>
     <span class="chip chip--leaf">134CC125</span>
     <button class="chip chip--gold chip--mono chip--clickable">…</button>

   The existing semantic classes (.code-chip, .group-batch,
   .badge.*) still work — they're grandfathered. Their CSS
   already aligns with this system. When adding NEW pills,
   prefer .chip + modifiers over inventing a new class.
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  white-space: nowrap;
}

/* --- Colour variants --- */
.chip--gold       { background: var(--gold-tint-medium); border-color: var(--gold-edge-medium); color: var(--ink); }
.chip--gold-soft  { background: var(--gold-tint-soft);   border-color: var(--gold-edge-soft);   color: var(--gold); }
.chip--leaf       { background: var(--leaf-dark);        border-color: var(--leaf-edge-medium); color: #fff; }
.chip--leaf-soft  { background: var(--leaf-tint-soft);   border-color: var(--leaf-edge-soft);   color: var(--leaf-dark); }
.chip--teal-soft  { background: rgba(15, 124, 128, 0.14); border-color: rgba(15, 124, 128, 0.30); color: var(--teal); }
.chip--neutral    { background: rgba(101, 115, 111, 0.16); color: var(--muted); }
.chip--danger     { background: rgba(180, 54, 43, 0.12);  border-color: rgba(180, 54, 43, 0.30);  color: var(--danger); }

/* --- Shape variant: fully-rounded pill instead of soft-square --- */
.chip--pill { border-radius: var(--radius-pill); }

/* --- Typography variant: monospace for IDs / codes / hashes --- */
.chip--mono {
  font-family: var(--font-mono);
  letter-spacing: 0.10em;
  font-size: 14px;
}

/* --- Size variant: bigger pill (for emphasis) --- */
.chip--lg { padding: 6px 14px; font-size: 14px; }

/* --- Behaviour variant: clickable (lift on hover, pointer cursor) --- */
.chip--clickable {
  cursor: pointer;
  transition: background var(--duration-fast) ease, transform 0.08s ease, border-color var(--duration-fast) ease;
  box-shadow: none;          /* override global button drop-shadow */
}
.chip--clickable:hover { transform: translateY(-1px); }
.chip--clickable:active { transform: translateY(0); }

/* When .chip--gold meets .chip--clickable, the hover should brighten */
.chip--gold.chip--clickable:hover {
  background: var(--gold-tint-strong);
  border-color: var(--gold-edge-strong);
}

/* --- Re-run / "previously damaged" marker ---
   A small circular "↻" badge that sits beside a lifecycle chip (or inline
   inside a funnel chip) to flag a code that was once Damaged and has since
   been Reprinted back into the print queue. Stays with the code forever as
   a permanent history marker — even after it's pasted and verified, the
   marker tells you it has lived a previous life. */
.chip-rerun-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(180, 54, 43, 0.14);
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
/* When the mark sits INSIDE a funnel chip (e.g., "↻3" reprint pill), it
   loses its margin so it hugs the number, and inherits the chip's color
   tone instead of forcing red on a neutral background. */
.chip .chip-rerun-mark {
  margin-left: 0;
  margin-right: 4px;
  background: transparent;
  color: inherit;
  width: auto;
  height: auto;
  font-weight: 600;
}

/* --- Batch lifecycle funnel chip row ---
   Horizontal strip of count chips inside the Batches table: Pending →
   Printed → Pasted → Verified → Damaged (+ optional Reprint pill). Uses
   small gaps so the five numbers read as one visual unit, not five
   disconnected pills. */
.funnel-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.funnel-chips .chip {
  min-width: 28px;
  justify-content: center;
  padding: 3px 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-sans);
  background: #f6f5f1;
}

button,
.button-link {
  min-height: 42px;
  border: 1px solid rgba(15, 73, 58, 0.18);
  border-radius: var(--radius-md);
  padding: 0 16px;
  color: #fff;
  background: var(--leaf);
  box-shadow: var(--shadow-pill-cta);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
  transform: none;
}

button,
.button-link {
  transition: transform var(--duration-fast) var(--easing-standard),
              filter var(--duration-fast) var(--easing-standard),
              box-shadow var(--duration-fast) var(--easing-standard),
              border-color var(--duration-fast) var(--easing-standard);
}

button:hover,
.button-link:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

button:active,
.button-link:active {
  transform: translateY(0);
}

button.secondary,
.button-link.secondary {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}

input,
select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0 14px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  outline: none;
  transition: border-color var(--duration-fast) var(--easing-standard),
              box-shadow var(--duration-fast) var(--easing-standard);
}

input:focus,
select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(15, 124, 128, 0.12);
}

/* Visible keyboard focus on the customer-facing verify page. The global
   `outline: none` above strips the native ring, and the brand blocks only
   gave inputs a faint border tint — leaving keyboard users with no idea
   where focus is on a trust-critical page (WCAG 2.4.7). Use the per-brand
   accent (gold for Grella, blue for Diet Gear) as a clear focus ring on the
   fields AND the buttons, which previously had no focus style at all.
   Scoped to :focus-visible so mouse clicks don't show the ring. */
.public-page #code:focus-visible,
.public-page #phone:focus-visible,
.public-page .verify-submit:focus-visible,
.public-page .result-reset:focus-visible,
.public-page .result-share-btn:focus-visible {
  outline: 2px solid var(--public-accent);
  outline-offset: 2px;
}

label {
  display: grid;
  gap: 7px;
  /* Use ink (near-black) instead of muted grey — the field labels need to be
     clearly visible against the cream form background. Helper text inside
     labels (the <small> bits) keeps the muted colour for hierarchy. */
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

label small {
  color: var(--muted);
  font-weight: 600;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 15px 16px;
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
}

th {
  color: var(--muted);
  background: var(--panel-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

td small {
  color: var(--muted);
}

a {
  color: var(--leaf-dark);
  font-weight: 800;
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.public-page {
  --public-accent: #fdb91a;
  --public-accent-ink: #071124;
  --public-panel-border: rgba(253, 185, 26, 0.18);
  --public-code-border: rgba(253, 185, 26, 0.38);
  min-height: 100vh;
  display: block;
  padding: 0;
  color: #fff;
  background: #020a1a;
}

.public-page[data-brand="dietgear"] {
  --public-accent: #ffd21a;
  --public-accent-ink: #063077;
  --public-panel-border: #ffd21a;
  --public-code-border: #ffd21a;
  display: grid;
  place-items: center;
  padding: 48px 28px;
  color: #fff;
  background: #0059c8;
}

.public-page[data-brand="dietgear"] .grella-only {
  display: none !important;
}

.grella-topbar {
  position: relative;
  z-index: 4;
  width: 100%;
  min-height: 78px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid rgba(253, 185, 26, 0.28);
  padding: 0 clamp(22px, 4.4vw, 72px);
  background: rgba(2, 10, 26, 0.94);
}

.grella-top-logo {
  width: 146px;
  display: inline-flex;
  align-items: center;
}

.grella-top-logo img {
  width: 100%;
  display: block;
}

.grella-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 68px);
}

.grella-nav a,
.grella-help {
  color: rgba(255, 255, 255, 0.90);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

.grella-help {
  justify-self: end;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(253, 185, 26, 0.44);
  border-radius: 999px;
  padding: 0 22px;
}

.grella-help::before {
  content: "?";
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  margin-right: 10px;
  border: 1px solid var(--public-accent);
  border-radius: 50%;
  color: var(--public-accent);
  font-size: 13px;
}

.verify-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.62fr);
  gap: clamp(36px, 6vw, 92px);
  width: min(1510px, calc(100% - 9vw));
  margin: 0 auto;
  padding: clamp(50px, 6vw, 78px) 0 28px;
  align-items: stretch;
}

/* Diet Gear .verify-shell layout is defined in one authoritative block
   near the end of this file (search "Authoritative, self-contained
   layout"). Keeping it in a single place avoids the scattered, conflicting
   copies that previously made small edits risky. */

.brand-panel {
  position: relative;
  min-height: 470px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  border: 1px solid var(--public-panel-border);
  border-radius: 22px;
  padding: 48px 54px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.public-page[data-brand="grella"] .brand-panel {
  min-height: 560px;
  justify-content: center;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.public-page[data-brand="grella"] .brand-panel::before {
  content: "";
  position: absolute;
  width: min(440px, 42vw);
  aspect-ratio: 1;
  right: -2vw;
  top: 54px;
  border: 1px solid rgba(253, 185, 26, 0.22);
  border-radius: 50%;
  opacity: 0.9;
}

.public-page[data-brand="grella"] .brand-panel::after {
  content: "";
  position: absolute;
  width: min(320px, 30vw);
  aspect-ratio: 1;
  right: 3vw;
  top: 112px;
  border: 1px solid rgba(253, 185, 26, 0.14);
  border-radius: 50%;
}

.public-page[data-brand="dietgear"] .brand-panel {
  border-width: 2px;
  background: #064aa4;
}

.public-page[data-brand="dietgear"] .verify-card {
  border-width: 2px;
  border-color: #ffd21a;
  background: #ffffff;
  color: #06224f;
  box-shadow: 0 18px 46px rgba(0, 22, 64, 0.28);
}

.public-page[data-brand="dietgear"] .brand-panel {
  background: #064aa4;
}

.brand-hero {
  position: relative;
  z-index: 1;
}

.public-page[data-brand="grella"] .brand-hero {
  max-width: 760px;
}

.public-logo {
  width: min(174px, 58vw);
  display: inline-flex;
  align-items: center;
  margin-bottom: 28px;
  color: var(--public-accent);
  text-decoration: none;
}

.public-page[data-brand="grella"] .public-logo {
  display: none;
}

.public-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.public-page[data-brand="dietgear"] .public-logo {
  width: min(250px, 68vw);
  margin-bottom: 34px;
}

.brand-panel h1 {
  margin: 0;
  max-width: 520px;
  font-size: clamp(40px, 4.8vw, 58px);
  line-height: 1.22;
  letter-spacing: -0.04em;
}

.public-page[data-brand="grella"] .brand-panel h1 {
  max-width: 700px;
  font-family: var(--font-sans);
  font-size: clamp(54px, 5.2vw, 86px);
  line-height: 1.06;
  letter-spacing: -0.055em;
}

.public-page[data-brand="grella"] .brand-panel h1::first-letter {
  letter-spacing: -0.08em;
}

.public-page[data-brand="dietgear"] .brand-panel h1 {
  max-width: 590px;
  color: #fff;
  text-transform: uppercase;
}

.public-page[data-brand="dietgear"] .brand-panel .eyebrow {
  color: #ffd21a;
}

.public-page[data-brand="dietgear"] .brand-panel .lede {
  color: #e7f1ff;
}

.public-page[data-brand="dietgear"] .brand-panel .eyebrow svg {
  display: none;
}

.brand-panel .eyebrow,
.brand-panel .lede {
  color: rgba(255, 255, 255, 0.72);
}

.public-page[data-brand="grella"] .brand-panel .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.66);
  letter-spacing: 0.32em;
}

.public-page[data-brand="grella"] .brand-panel .eyebrow::before {
  content: "";
  width: 21px;
  height: 21px;
  display: inline-block;
  background: var(--public-accent);
  clip-path: polygon(50% 0, 88% 14%, 100% 50%, 88% 86%, 50% 100%, 12% 86%, 0 50%, 12% 14%);
}

.lede {
  margin: 16px 0 0;
  color: var(--muted);
  max-width: 480px;
  font-size: 13px;
  line-height: 1.55;
}

.public-page[data-brand="grella"] .lede {
  max-width: 620px;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.80);
  font-size: 19px;
}

.grella-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 690px;
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.88);
}

.grella-proof span {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0 24px 0 0;
  font-size: 14px;
  font-weight: 800;
}

.grella-proof span + span {
  padding-left: 24px;
}

.grella-proof span:last-child {
  border-right: none;
}

.grella-proof span::before {
  content: "";
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid rgba(253, 185, 26, 0.72);
  border-radius: 50%;
  background: rgba(253, 185, 26, 0.1);
}

.verify-card,
.form-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}

.verify-card {
  align-self: stretch;
  display: grid;
  align-content: center;
  border-color: var(--public-panel-border);
  border-radius: 22px;
  padding: 28px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.public-page[data-brand="grella"] .verify-card {
  position: relative;
  align-self: center;
  min-height: 600px;
  border-color: rgba(253, 185, 26, 0.62);
  border-radius: 22px;
  padding: 42px;
  background: rgba(6, 18, 43, 0.86);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.28);
}

.verify-card-head {
  margin-bottom: 20px;
}

.verify-card-head h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.04em;
}

.public-page[data-brand="grella"] .verify-card-head h2 {
  font-family: var(--font-sans);
  font-size: clamp(36px, 3.1vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.verify-card-head p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.66);
}

.public-page[data-brand="grella"] .verify-card-head p {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.80);
  font-size: 16px;
}

.public-page[data-brand="dietgear"] .verify-card-head .eyebrow {
  color: #0059c8;
}

.public-page[data-brand="dietgear"] .verify-card-head p {
  color: #51627e;
}

.public-page[data-brand="dietgear"] .verify-card label,
.public-page[data-brand="dietgear"] .verify-card .field-label {
  color: #1d3a6b;
}

.public-page[data-brand="dietgear"] .verify-card .phone-privacy-note {
  color: #51627e;
}

.public-page[data-brand="dietgear"] .verify-card a {
  color: #0059c8;
}

.verify-card form,
.form-card {
  display: grid;
  gap: 15px;
}

.verify-card input[name="code"],
#code {
  height: 58px;
  border-color: var(--public-code-border);
  color: #fff;
  background: rgba(8, 10, 24, 0.62);
  font-size: 26px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.public-page[data-brand="grella"] .verify-card input[name="code"],
.public-page[data-brand="grella"] #code {
  height: 60px;
  border-color: rgba(253, 185, 26, 0.88);
  border-radius: 8px;
  background: rgba(3, 12, 30, 0.78);
  font-size: 25px;
  letter-spacing: 0.12em;
}

.input-help {
  margin: -8px 0 2px;
  color: rgba(255, 255, 255, 0.60);
  font-size: 13px;
  font-weight: 800;
}

.public-page[data-brand="dietgear"] .input-help {
  color: #51627e;
}

.public-page[data-brand="dietgear"] .verify-card input[name="code"],
.public-page[data-brand="dietgear"] #code {
  color: #06224f;
  background: #eef3fb;
  border-color: #ffd21a;
}

.public-page[data-brand="dietgear"] .code-input-wrap,
.public-page[data-brand="dietgear"] .phone-input-wrap {
  position: relative;
  display: block;
}

.public-page[data-brand="dietgear"] .code-input-wrap .field-icon,
.public-page[data-brand="dietgear"] .phone-input-wrap .field-icon {
  position: absolute;
  z-index: 2;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  color: #0059c8;
  transform: translateY(-50%);
  pointer-events: none;
}

.public-page[data-brand="dietgear"] .code-input-wrap input,
.public-page[data-brand="dietgear"] .phone-input-wrap input {
  padding-left: 48px;
}

.public-page[data-brand="dietgear"] .phone-prefix {
  position: absolute;
  z-index: 2;
  left: 48px;
  top: 50%;
  color: #06224f;
  font-size: 13px;
  font-weight: 800;
  transform: translateY(-50%);
  pointer-events: none;
}

.public-page[data-brand="dietgear"] .phone-input-wrap input {
  padding-left: 84px;
}

.public-page .verify-card label {
  color: rgba(255, 255, 255, 0.72);
}

.public-page input {
  min-height: 52px;
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
  background: rgba(8, 10, 24, 0.5);
}

.public-page[data-brand="dietgear"] input {
  border-color: #cdd9ee;
  background: #eef3fb;
  color: #06224f;
}

.public-page[data-brand="dietgear"] input::placeholder {
  color: #93a6c4;
}

.public-page input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.public-page input:focus {
  border-color: var(--public-accent);
  box-shadow: none;
}

.public-page button {
  min-height: 56px;
  border: none;
  border-radius: 14px;
  color: var(--public-accent-ink);
  background: var(--public-accent);
  box-shadow: none;
}

.public-page[data-brand="grella"] button {
  min-height: 58px;
  border-radius: 8px;
  color: #071124;
  background: #fdb91a;
  font-size: 13px;
}

.public-page[data-brand="dietgear"] button {
  color: #071a2c;
  background: #ffd21a;
}

.result {
  margin-top: 18px;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  color: #111522;
  background: rgba(255, 255, 255, 0.92);
}

.result strong {
  display: block;
  margin-bottom: 6px;
  font-size: 22px;
}

.result.success {
  border-color: rgba(23, 107, 82, 0.38);
  background: rgba(23, 107, 82, 0.09);
}

.public-page[data-brand="dietgear"] .result.success {
  border-color: #2f9e44;
  background: #eef9ef;
}

.public-page[data-brand="dietgear"] .result.warning {
  border-color: #ffd21a;
  background: #fff7d6;
}

.public-page[data-brand="dietgear"] .result.error {
  border-color: #e0532f;
  background: #fff0ea;
}

.result.warning {
  border-color: rgba(184, 121, 24, 0.38);
  background: rgba(184, 121, 24, 0.11);
}

.result.error {
  border-color: rgba(180, 54, 43, 0.35);
  background: rgba(180, 54, 43, 0.09);
}

.result-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 0 13px;
  color: var(--public-accent-ink);
  background: var(--public-accent);
  text-decoration: none;
}

.support-note {
  margin: 15px 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  font-weight: 700;
}

.public-page[data-brand="dietgear"] .support-note {
  color: #1d3a6b;
}

.support-note a {
  color: var(--public-accent);
}

.grella-steps {
  position: relative;
  z-index: 1;
  width: min(1510px, calc(100% - 9vw));
  margin: 0 auto 34px;
  border: 1px solid rgba(253, 185, 26, 0.24);
  border-radius: 14px;
  padding: 18px 24px;
  background: rgba(6, 18, 43, 0.64);
}

.grella-steps > .eyebrow {
  margin-bottom: 12px;
  color: var(--public-accent);
  letter-spacing: 0.28em;
}

.grella-steps > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.grella-steps article {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 64px;
}

.grella-steps strong {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--public-accent);
  border-radius: 50%;
  color: var(--public-accent);
}

.grella-steps span {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
  line-height: 1.35;
}

.grella-trustbar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  border-top: 1px solid rgba(253, 185, 26, 0.22);
  padding: 24px clamp(22px, 4.4vw, 72px);
  background: rgba(2, 10, 26, 0.76);
}

.grella-trustbar span {
  display: grid;
  gap: 5px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0 28px;
}

.grella-trustbar span:first-child {
  padding-left: 0;
}

.grella-trustbar span:last-child {
  border-right: none;
}

.grella-trustbar strong {
  color: rgba(255, 255, 255, 0.94);
  font-size: 16px;
}

.grella-trustbar small {
  color: rgba(255, 255, 255, 0.58);
  font-weight: 700;
}

.admin-page {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
}

/* Hamburger toggle — hidden on desktop, shown on mobile. */
.sidebar-toggle {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 60;
  width: 44px;
  height: 44px;
  min-height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdfa;
  box-shadow: var(--soft-shadow);
  cursor: pointer;
}

.sidebar-toggle:hover {
  filter: brightness(0.98);
  transform: none;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  content: "";
  transition: transform 180ms ease, opacity 180ms ease;
}

.hamburger-icon {
  position: relative;
}

.hamburger-icon::before {
  position: absolute;
  top: -7px;
  left: 0;
}

.hamburger-icon::after {
  position: absolute;
  top: 7px;
  left: 0;
}

.admin-page.sidebar-open .hamburger-icon {
  background: transparent;
}

.admin-page.sidebar-open .hamburger-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.admin-page.sidebar-open .hamburger-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  background: rgba(15, 24, 22, 0.48);
}

.admin-page.sidebar-open .sidebar-backdrop {
  display: block;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  /* Flex column: the grouped nav scrolls in the middle (.nav-scroll), and the
     pinned footer (.side-foot: station chip + Security/verifier/Logout) stays at
     the bottom — matching the editorial prototype's sidebar. */
  display: flex;
  flex-direction: column;
  padding: 24px 16px 18px;
  color: #e7eee9;
  /* Flat solid ink — no gradient, no pinstripe overlay. */
  background: #15201d;
  min-height: 0;
}

.nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* No visible scrollbar (the concept sidebar has none) — still scrolls on very
     short screens via wheel/trackpad, but the bar is hidden. */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* old Edge/IE */
}
.nav-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* Chrome / Edge / Safari */

/* Section labels above each editorial nav group. */
.sidebar .nav-label {
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(216, 192, 137, 0.5);
  padding: 0 12px;
  margin: 18px 0 9px;
}
.sidebar .nav-scroll > .nav-label:first-child { margin-top: 2px; }

.sidebar .nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar .nav button,
.sidebar .nav a.nav-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  width: 100%;
  min-height: 0;
  padding: 9px 13px;
  color: rgba(231, 238, 233, 0.74);
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  border: 0;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 450;
  letter-spacing: 0.005em;
  position: relative;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}

/* Sidebar nav count badge — gold pill, pushed right (matches concept .badge). */
.sidebar .nav .badge {
  margin-left: auto;
  background: #c19a3e;
  color: #16352a;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 6px;
  border-radius: 20px;
  line-height: 1;
}
.sidebar .nav .badge:empty { display: none; }

/* Leading icon — inherits text colour via stroke="currentColor". */
.nav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  opacity: 0.62;
  stroke-width: 1.5;
}

.sidebar .nav button:hover,
.sidebar .nav a.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.sidebar .nav button:hover .nav-icon,
.sidebar .nav a.nav-link:hover .nav-icon { opacity: 0.9; }

/* Active tab — ivory pill + forest text + a brass marker bar, like the prototype. */
.sidebar .nav button.active {
  background: #faf7f0;
  color: #16352a;
  font-weight: 550;
}
.sidebar .nav button.active .nav-icon { opacity: 1; color: #c19a3e; }
.sidebar .nav button.active::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: #c19a3e;
  border-radius: 0 3px 3px 0;
}

/* Pinned footer: separator + station-status chip + footer nav. */
.side-foot { flex: none; padding-top: 16px; }
.side-foot .sep { height: 1px; background: rgba(216, 192, 137, 0.18); margin: 0 4px 14px; }
.station-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 10px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(216, 192, 137, 0.16);
}
.station-chip .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #76c08e; flex: none; position: relative;
}
.station-chip .pulse::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid rgba(118, 192, 142, 0.5);
  animation: stationRing 2.4s ease-out infinite;
}
@keyframes stationRing { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
.station-chip .t { font-size: 12px; color: #e7eee9; font-weight: 500; line-height: 1.3; }
.station-chip .s { font-size: 10.5px; color: rgba(231, 238, 233, 0.55); }

.admin-main {
  min-width: 0;
  /* No outer padding — the topbar and the content panels carry their own
     editorial padding (matches the prototype's .topbar + .content). */
  padding: 0;
}

.login-panel {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}
/* Auth brand header + "Welcome back" eyebrow — ported from concept-auth.html. */
.login-panel .auth-wrap { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; max-width: 392px; }
.login-panel .auth-wrap .form-card { width: 100%; }
.auth-brand { display: flex; flex-direction: column; align-items: center; }
.auth-brand .seal { width: 46px; height: 46px; border: 1px solid #d8c089; border-radius: 50%; display: grid; place-items: center; }
.auth-brand .seal b { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; color: #16352a; }
.auth-brand .mark { font-family: 'Fraunces', serif; font-size: 44px; font-weight: 400; line-height: 1; color: #16352a; letter-spacing: 0.01em; margin-top: 14px; }
.auth-brand .tag { font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: #8a8473; margin-top: 12px; }
.form-card .ck { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: #a87b1f; }
.login-panel .form-card button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.login-panel .form-card button[type="submit"] svg { width: 17px; height: 17px; stroke-width: 1.8; }
/* Login card shell + type — matched to concept .auth-card (measured values). */
.login-panel .form-card { border-color: #dcd3bd; border-radius: 18px; padding: 34px 32px 30px; gap: 18px; box-shadow: 0 10px 30px rgba(22,53,42,0.06), 0 1px 2px rgba(33,31,26,0.05); }
.login-panel .form-card h2 { font-size: 27px; color: #16352a; letter-spacing: -0.27px; margin: 0; }
.login-panel .form-card label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8473; gap: 7px; }
.login-panel .form-card label input { font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; color: #15201d; }
/* Keep autofilled inputs cream (override the browser's blue/yellow autofill tint). */
.login-panel .form-card input:-webkit-autofill,
.login-panel .form-card input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #fffdf9 inset; -webkit-text-fill-color: #15201d; caret-color: #15201d; }

/* Calls "Hung up — don't call" status: loud clay dot, badge, and quick-button states. */
section[data-panel="calls"].proto-scope .cc-status .st-dot[data-status="hung_up"] { background: #a4502f; }
section[data-panel="calls"].proto-scope .cbadge.hungup { background: #f4e4dd; color: #8c3a1f; border-color: #e6c4b4; }
section[data-panel="calls"].proto-scope .cc-actions .btn-act.btn-hangup { color: #a4502f; border-color: #e6c4b4; }
section[data-panel="calls"].proto-scope .cc-actions .btn-act.btn-hangup:hover { border-color: #a4502f; background: #f7ece8; }
section[data-panel="calls"].proto-scope .cc-actions .btn-act.btn-hangup.on { background: #a4502f; color: #fbf3ee; border-color: #a4502f; }
/* Hung up = do not call: Call + WhatsApp buttons go disabled (greyed, not clickable). */
section[data-panel="calls"].proto-scope .cc-actions .btn-act.is-disabled { opacity: .55; cursor: not-allowed; }
section[data-panel="calls"].proto-scope .cc-actions .btn-act.btn-call.is-disabled,
section[data-panel="calls"].proto-scope .cc-actions .btn-act.btn-call.is-disabled:hover,
section[data-panel="calls"].proto-scope .cc-actions .btn-act.btn-wa.is-disabled,
section[data-panel="calls"].proto-scope .cc-actions .btn-act.btn-wa.is-disabled:hover { background: #e6dfce; color: #8a8473; border-color: #e0d8c4; }

/* ===================== Editorial topbar (ported from the prototype) ===================== */
.topbar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 40px;
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 241, 231, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.topbar .greet { display: flex; flex-direction: column; gap: 2px; flex: none; }
.topbar .greet .h {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 25px; font-weight: 600; line-height: 1.05;
  color: #16352a; letter-spacing: -0.01em;
}
.topbar .tele { display: flex; align-items: stretch; gap: 10px; flex: none; }
.topbar .tchip {
  border: 1px solid #dcd3bd; border-radius: 10px; padding: 7px 13px; background: #fffdf9;
  display: flex; flex-direction: column; gap: 3px; min-width: 92px;
  box-shadow: 0 1px 2px rgba(33, 31, 26, 0.04);
}
.topbar .tchip .tk { font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #8a8473; }
.topbar .tchip .tv { font-family: 'Fraunces', serif; font-size: 16px; color: #16352a; font-variant-numeric: tabular-nums; line-height: 1; }
.topbar .tchip .tv.live { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.topbar .tchip .tv.live .ld { width: 7px; height: 7px; border-radius: 50%; background: #76c08e; position: relative; }
.topbar .tchip .tv.live .ld::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(118, 192, 142, 0.5); animation: stationRing 2.4s ease-out infinite; }
.topbar .search { margin-left: 2px; flex: 1; max-width: 360px; position: relative; display: flex; align-items: center; }
.topbar .search svg { position: absolute; left: 15px; width: 16px; height: 16px; color: #8a8473; stroke-width: 1.6; }
.topbar .search input {
  width: 100%; border: 1px solid #dcd3bd; background: #fffdf9; border-radius: 11px;
  padding: 11px 14px 11px 42px; font-size: 13px; font-family: inherit; color: #211f1a;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.topbar .search input::placeholder { color: #aaa392; }
.topbar .search input:focus { outline: none; border-color: #d8c089; box-shadow: 0 0 0 3px rgba(216, 192, 137, 0.22); }
.topbar .top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar .btn {
  display: inline-flex; align-items: center; gap: 9px; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 550; border-radius: 10px;
  padding: 11px 18px; transition: transform 0.12s, box-shadow 0.16s, background 0.16s;
}
.topbar .btn svg { width: 16px; height: 16px; stroke-width: 1.8; }
.topbar .btn-primary { background: #16352a; color: #fbf8f0; box-shadow: 0 1px 2px rgba(33, 31, 26, 0.04); }
.topbar .btn-primary:hover { background: #1f4a3a; transform: translateY(-1px); }
/* Notification bell — matches concept .icon-btn (42px, 11px radius, clay dot). */
.topbar .icon-btn {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; border: 1px solid #dcd3bd; border-radius: 11px;
  background: #fffdf9; color: #4f4b40; cursor: pointer; transition: border-color 0.16s, background 0.16s;
}
.topbar .icon-btn svg { width: 18px; height: 18px; stroke-width: 1.6; }
.topbar .icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: #a4502f; border: 1px solid #fffdf9; }
.topbar .icon-btn:hover { border-color: #c9bfa3; background: #fdfaf2; }

/* Content panels carry the editorial page padding (matches the prototype .content). */
/* Concept base .content is full-width (width:100%, no max-width). Only specific concept
   pages override it — the Dashboard caps at 1330px. Match per-screen, NOT globally. */
#appPanel > .panel { padding: 14px 40px 56px; }
#appPanel > .panel[data-panel="dashboard"] { max-width: 1330px; }

/* Port bridge classes (markup was added during the editorial port but their CSS
   was never written, so chips stacked and the replaced dropdowns stayed visible):
   - .chip-row lays the prototype filter chips out in a horizontal row.
   - .proto-hidden-control hides an old <select> that a chip row now drives
     (the select stays in the DOM so loadCodes() can still read its value). */
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.proto-hidden-control { display: none !important; }

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.toolbar-info {
  font-size: 12px;
  color: var(--muted);
}

/* Sortable table headers: clickable, with a subtle hover state to make it
   obvious. The ▲/▼ arrow is appended in JS for the currently-sorted column. */
th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover {
  color: var(--leaf-dark);
}

.pager {
  margin-top: 6px;
  justify-content: flex-end;
}

.pager span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.form-help {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.form-help.warning {
  color: var(--rust);
}

.form-links {
  margin: 12px 0 0;
  text-align: center;
}

.link-button {
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--leaf-dark);
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  transform: none;
  filter: none;
  color: var(--teal);
}

.forgot-form {
  display: grid;
  gap: 14px;
}

.recovery-display {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 16px 0;
  padding: 16px;
  border: 2px dashed var(--gold);
  border-radius: 8px;
  background: rgba(184, 121, 24, 0.06);
}

.recovery-display code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--ink);
  word-break: break-all;
}

.recovery-checklist {
  margin: 16px 0;
  padding-left: 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.recovery-checklist li {
  font-weight: 700;
}

.email-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}

.notice {
  position: relative;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--leaf-dark);
  border: 1px solid var(--leaf-edge-soft);
  background: var(--leaf-tint-soft);
}

.notice-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  padding: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font-size: 18px;
  line-height: 1;
  opacity: 0.7;
}

.notice-close:hover {
  opacity: 1;
  transform: none;
  background: rgba(0, 0, 0, 0.05);
}

.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 30;
  width: 46px;
  height: 46px;
  min-height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 0;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(15, 73, 58, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.notice.error {
  color: var(--danger);
  border-color: rgba(180, 54, 43, 0.32);
  background: rgba(180, 54, 43, 0.09);
}

.notice.warning {
  color: #76500f;
  border-color: rgba(184, 121, 24, 0.34);
  background: rgba(184, 121, 24, 0.11);
}

.panel {
  display: none;
}

.panel.active {
  display: grid;
  gap: 18px;
  /* Constrain the single column to minmax(0, 1fr) so a wide child (a many-
     column table) can't blow the panel past the viewport width and create a
     page-level horizontal scrollbar. The child's own overflow:auto then gives
     a contained, in-table scroll if it's genuinely too wide. */
  grid-template-columns: minmax(0, 1fr);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.section-head h3,
.workband h3 {
  margin: 0;
  font-size: 25px;
  line-height: 1.1;
}

.workband {
  display: flex;
  /* Right-align the button — the explanatory copy that used to live on the
     left was generic filler ("Generate, assign, verify, and audit every
     printed code.") so we dropped it and slimmed the band to just the
     CTA. */
  justify-content: flex-end;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 22px;
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
}

/* Dashboard layout with grouped sections. Each section has a small
   uppercase eyebrow heading + its own stats-grid below. Sections stack
   vertically; cards inside flow horizontally up to 4 across. */
.dashboard-stacks {
  display: grid;
  gap: 24px;
}

/* Stacked date+time in a narrow table column. Date goes on top in
   normal weight; time underneath in slightly muted small text. Cleaner
   than a single line that breaks at the comma. */
.datetime-stacked {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.25;
}

.datetime-stacked__date {
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
}

.datetime-stacked__time {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

/* Product cell in the Codes table: brand on top (small/muted),
   product name in the middle (bold), SKU underneath (small/muted).
   Reads top-to-bottom like a small product card. */
.product-stacked {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}

.product-stacked__brand {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-stacked__name {
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
}

.product-stacked__sku {
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-mono);
}

/* ---------- Bulk selection on Codes ---------- */
.bulk-checkbox {
  cursor: pointer;
  accent-color: var(--leaf-dark);
}

/* All checkboxes — header, cohort, per-row — use NATIVE rendering.
   Native :checked and :indeterminate ALWAYS update visually when the
   underlying JS sets cb.checked / cb.indeterminate. The custom
   appearance:none approach we tried had subtle bugs where the visual
   didn't refresh in real-world data conditions. Native is simpler and
   correct. The .bulk-checkbox base rule above sets size + accent. */

/* Checkbox focus ring — keyboard users need to see where focus is. */
.bulk-checkbox:focus-visible {
  outline: 2px solid var(--leaf-dark);
  outline-offset: 2px;
}

/* (Earlier ".bulk-checkbox--group { width: 8px; ... }" block deleted —
   its sizing is now owned by the appearance:none custom-checkbox rule
   above. Keeping two rules in sync was the source of "checkbox stayed
   native-sized" bugs.) */

/* Sticky toolbar that appears above the codes table when ≥1 code is
   selected. Mirrors the same gold-band aesthetic the group headers use
   so it feels like part of the table system. */
.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: var(--gold-tint-soft);
  border: 1px solid var(--gold-edge-strong);
  border-radius: var(--radius-lg);
  font-size: 13px;
  color: var(--ink);
}

.bulk-bar.hidden { display: none; }

.bulk-bar__count {
  font-weight: 800;
  letter-spacing: 0.04em;
}

.bulk-bar__count strong {
  font-size: 18px;
  color: var(--leaf-dark);
  margin-right: 4px;
}

.bulk-bar__actions {
  display: flex;
  gap: 8px;
}

.bulk-bar__actions button {
  min-height: 36px;
}

/* Floating toast — short-lived confirmation that pops at the bottom of
   the viewport. Used for quick "done" signals (e.g., "Copied K7MX-T4Y9").
   Always visible regardless of scroll position because position: fixed. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(16px);
  z-index: 1000;
  padding: 11px 20px;
  background: var(--ink-overlay-toast);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-toast);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) ease, transform var(--duration-base) ease;
  max-width: calc(100vw - 32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Code chip — the 8-character verification code rendered as a clickable
   monospace pill. Hyphen is muted so the actual characters pop. Click
   copies the raw code to clipboard. The chip styling overrides the
   global button styles so it doesn't look like a primary CTA. */
.code-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  min-height: 0;          /* override global button min-height */
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--ink);
  background: var(--gold-tint-medium);
  border: 1px solid var(--gold-edge-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: none;
  transition: background var(--duration-fast) ease, transform 0.08s ease, border-color var(--duration-fast) ease;
}

.code-chip:hover {
  background: var(--gold-tint-strong);
  border-color: var(--gold-edge-strong);
  transform: translateY(-1px);
}

.code-chip:active {
  transform: translateY(0);
}

/* (.code-chip__sep removed — the hyphen is now part of the chip's
   single text node so Find-in-Page works on the full "XXXX-XXXX" string.) */

/* Brief flash when a copy succeeds. */
.code-chip--copied,
.code-chip--copied:hover {
  background: var(--leaf-tint-medium);
  border-color: var(--leaf-edge-medium);
  color: var(--leaf-dark);
}

/* Table row that introduces a group of related rows (e.g., the Codes
   table grouping by generation date). Visually a thin gold-tinted band
   that says "everything below me up to the next header belongs to this
   group". Quiet enough not to compete with data, loud enough to scan. */
/* DUAL STICKY — final, predictable approach.
   `<table>` cells don't strictly honor `height` (they treat it as
   min-height), which is why every previous attempt had subtle drift.
   This version controls the height via PADDING + LINE-HEIGHT + NOWRAP
   — those ALWAYS apply, so the rendered height is exactly:
     padding-top + (font-size × line-height) + padding-bottom
   The math then matches the group-header's `top` offset exactly. */

/* ============================================================
   STICKY BAND SYSTEM (rebuilt 2026-05-27)
   Spec: total sticky zone 45px, each band 22px, 13px text,
   16×16 checkboxes everywhere, sticky on scroll, flush bands.
   One block, no inline overrides, no JS forcing.
   ============================================================ */

/* CHECKBOXES — uniform 16×16 native everywhere.
   The `min-height: 0` is required because the global input rule sets
   min-height: 44px (for touch-friendly forms); without 0, checkboxes
   render at 44px and balloon the bands. */
.bulk-checkbox {
  width: 16px;
  height: 16px;
  min-width: 0;
  min-height: 0;
  max-width: 16px;
  max-height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--leaf-dark);
  vertical-align: middle;
  cursor: pointer;
}

/* COLUMN HEADER BAND (thead) — 30px tall, sticky.
   IMPORTANT: must use a FULLY OPAQUE background. If you set anything
   translucent here, data rows scrolling past the band become visible
   THROUGH it. `--surface-band-head` is opaque and designed for sticky use.
   NO bottom border or shadow — the tonal step to the cohort band below
   provides separation, and any line here creates a visible "gap". */
.table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--surface-band-head);
  padding: 6px 14px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  vertical-align: middle;
  height: 30px;
  max-height: 30px;
  border-bottom: 0;
}

/* COHORT BAND — 30px tall, sticks FLUSH under the thead.
   Stays as a normal table-cell so its `colspan` is honored (spans full
   table width). Layout of its inner contents is handled by a flex
   wrapper div inside the cell (.cohort-row-inner). */
.table-group-header td {
  position: sticky;
  top: 30px;
  z-index: 5;
  background: var(--surface-band);
  color: var(--ink);
  padding: 6px 16px;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  height: 30px;
  max-height: 30px;
  border-bottom: 1px solid var(--gold-edge-soft);
  border-top: 0;
  box-shadow: none;
}

/* Inner flex wrapper — handles checkbox + label alignment without
   breaking the td's table-cell behavior or its colspan. */
.cohort-row-inner {
  display: flex;
  align-items: center;
  gap: 26px;
}

/* ============================================================
   CODES TABLE — modernized data row treatment.
   Targets the issues that made the previous design feel 2000s:
   stacked action buttons (because of global min-height: 42px),
   bloated cells, oversized chips.  Keeps checkbox 16x16 and
   sticky bands 60px combined (untouched per user request).
   ============================================================ */

/* Tighter body cells — was 13px vertical, now 8px.  Brings the data
   row to ~36-40px instead of ~80-100px. */
#codesList tbody td {
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.35;
  vertical-align: middle;
}

/* First column (the checkbox) — bumped left padding so the column-header
   and per-row checkboxes sit at the same comfortable inset from the
   table's left edge. Excludes the cohort row's td (uses colspan; it must
   span the full table width and starts with its own checkbox + label). */
#codesList thead th:first-child,
#codesList tbody tr:not(.table-group-header) td:first-child {
  padding-left: 16px;
  padding-right: 10px;
  width: 1%;
  white-space: nowrap;
}

/* The cohort row uses a colspan cell, so it's excluded from the rule
   above and was falling back to the 12px body padding (#codesList tbody
   td has an ID, so it even out-specifies .table-group-header td). That
   put the cohort checkbox 4px left of the data/header checkboxes. Pin it
   to 16px so every checkbox in the column lines up. Only padding-left
   changes — band height and the rest are untouched. */
#codesList tbody tr.table-group-header td {
  padding-left: 16px;
}

/* Cohort label — sits as a flex child of the cohort cell (which is
   now display: flex), so the cell handles all positioning. The label
   itself is also inline-flex so its inner pieces (text + green batch
   pill + dates) stay vertically centered as one line-box. */
#codesList .cohort-label {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Last column (Action) — breathing room on the right edge. */
/* Last column (Action) — extra right padding. Excludes cohort row
   (its single colspan cell is also `:last-child`; we don't want it
   right-padded since it spans full table width). */
#codesList thead th:last-child,
#codesList tbody tr:not(.table-group-header) td:last-child {
  padding-right: 16px;
}

/* Action cell — let the row of buttons WRAP onto 2-3 short lines instead of
   forcing one ultra-wide nowrap row. With up to 6 actions (Open, Reprint,
   Un-paste, Block, Reset, Delete) a single line blew the table past the
   viewport. Wrapping keeps the column narrow. The buttons themselves still
   keep their own `white-space: nowrap` so individual labels never break. */
#codesList tbody tr:not(.table-group-header) td:last-child {
  white-space: normal;
}
#codesList tbody td button + button,
#codesList tbody td .button-link + button,
#codesList tbody td button + .button-link,
#codesList tbody td .button-link + .button-link {
  margin-top: 4px;   /* vertical gap when buttons wrap to a new line */
}

/* Product cell (stacked brand + name) — add a touch more left padding
   so the eyebrow and product name don't crash into the lifecycle chip
   to their left. */
#codesList .product-stacked {
  padding-left: 2px;
}

/* Action column buttons — compact, horizontal, subtle.  Overrides the
   global `button { min-height: 42px }` rule that was forcing each
   action to be a chunky stand-alone block. */
#codesList tbody td button,
#codesList tbody td .button-link {
  min-height: 0;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 6px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  white-space: nowrap;
}
/* Spacing between adjacent action buttons in the same cell */
#codesList tbody td button + button,
#codesList tbody td .button-link + button,
#codesList tbody td button + .button-link,
#codesList tbody td .button-link + .button-link {
  margin-left: 6px;
}
/* Secondary action buttons — quieter, almost ghost-like.  The destructive
   "Delete" still reads red via its existing .danger class. */
#codesList tbody td button.secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: none;
}
#codesList tbody td button.secondary:hover {
  border-color: var(--ink);
  background: var(--panel-2);
}
#codesList tbody td button.secondary.danger {
  color: var(--danger);
  border-color: rgba(180, 54, 43, 0.30);
}
#codesList tbody td button.secondary.danger:hover {
  border-color: var(--danger);
  background: rgba(180, 54, 43, 0.06);
}

/* Stacked date/time — keep two lines (date over time) but tighter so
   the row doesn't grow because of it. */
#codesList .datetime-stacked {
  display: inline-block;
  line-height: 1.15;
}
#codesList .datetime-stacked__date { display: block; font-weight: 500; }
#codesList .datetime-stacked__time { display: block; color: var(--muted); font-size: 11px; }

/* Stacked product (BRAND over Product Name) — tighter, more refined. */
#codesList .product-stacked { display: inline-block; line-height: 1.2; }
#codesList .product-stacked__brand {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
#codesList .product-stacked__name {
  display: block;
  font-weight: 500;
  color: var(--ink);
}

/* Status + Lifecycle chips — slightly smaller so they read as inline
   labels, not big buttons. */
#codesList tbody td .chip,
#codesList tbody td .badge {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ----- TOOLBAR (filter row above the table) -----
   Compact horizontal row of selects + search + export.  The global
   `input, select { min-height: 44px }` rule (touch-friendly form fields)
   was making the toolbar items chunky and wrap-prone.  Inside .toolbar,
   override to a refined 32px height so all controls sit in one tight row. */
.toolbar select,
.toolbar input,
.toolbar .button-link,
.toolbar button {
  min-height: 32px;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 6px;
  width: auto;
  box-shadow: none;
}
.toolbar select,
.toolbar input {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.toolbar select:focus,
.toolbar input:focus {
  border-color: var(--leaf-dark);
  outline: 2px solid var(--leaf-tint-soft);
  outline-offset: 0;
}
/* Toolbar items distribute proportionally across the full toolbar
   width — no max-width caps that leave empty space on the right. Each
   item gets a `flex: <grow> 1 <basis>` so they all grow together
   when there's space, and shrink together when there isn't. */
.toolbar #codeBatchFilter      { flex: 2 1 180px; }
.toolbar #codeStatusFilter     { flex: 1 1 120px; }
.toolbar #codeLifecycleFilter  { flex: 1 1 160px; }
.toolbar input#codeSearch      { flex: 1 1 160px; min-width: 110px; }
.toolbar #exportCodes          { flex: 0 0 auto; }

/* Codes-tab toolbar — wrap so the controls flow onto a second line when the
   window is too narrow to hold all of them, instead of forcing a page-level
   horizontal scrollbar (the Export button used to get pushed off-screen). The
   flex-grow rules above still fill each line. */
section[data-panel="codes"] > .toolbar {
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

/* Export CSV button — secondary toolbar action, not a primary CTA.
   Was rendering as the big dark-green pill.  Now matches the rest of
   the toolbar in size and a leaf-tinted ghost style. */
.toolbar #exportCodes {
  background: var(--leaf-tint-soft);
  color: var(--leaf-dark);
  border: 1px solid var(--leaf-edge-soft);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.toolbar #exportCodes:hover {
  background: var(--leaf-tint-medium);
  border-color: var(--leaf-edge-medium);
  transform: none;
  filter: none;
}

/* ----- PAGER (Previous / Next + range text under the table) ----- */
.pager {
  margin-top: 10px;
  padding: 8px 4px;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}
.pager button {
  min-height: 30px;
  height: 30px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
}
.pager span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

/* ----- SELECTED ROW HIGHLIGHT — distinct from the "Active" chip ------
   Was using leaf-tint-soft which is the same color as the .badge.active
   chip — that made selected rows feel like they were "all-active".  Use
   a neutral cool tint instead so the selection has its own visual identity. */
.table-wrap tbody tr.is-selected td {
  background: rgba(15, 124, 128, 0.07);
}
.table-wrap tbody tr.is-selected:hover td {
  background: rgba(15, 124, 128, 0.12);
}

/* ----- HOVER STATE ON ALL ROWS -----
   Without this, rows feel inert.  Warm tint on hover so the user clearly
   knows which row they're about to act on.  Stronger than before — the
   previous 4% alpha was nearly invisible. */
.table-wrap tbody tr:not(.table-group-header):not(.is-selected):hover td {
  background: rgba(184, 121, 24, 0.10);
}

/* Block reason shown under the "Blocked" badge in the Status column.
   Small, muted, clipped if very long (full text on hover via title). */
#codesList .block-reason {
  margin-top: 3px;
  max-width: 140px;
  font-size: 11px;
  font-weight: 500;
  color: var(--danger);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----- ACTION CELL — keep buttons on a single line.
   Excludes the cohort row whose single colspan cell is also `:last-child`
   (we don't want "Grella · ..." pushed to the right edge). */
#codesList tbody tr:not(.table-group-header) td:last-child {
  white-space: nowrap;
  text-align: right;
}

/* External-link icon button inside the Action cell (replaces the old
   "Open" Verify URL column).  Quiet ghost style — same height as the
   real action buttons so they all sit on one neat baseline. */
#codesList .action-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0 4px 0 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  vertical-align: middle;
  min-height: 0;
  box-shadow: none;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
#codesList .action-icon-link:hover {
  color: var(--leaf-dark);
  border-color: var(--leaf-dark);
  background: var(--leaf-tint-soft);
}

/* PRODUCT column — header label kept (still useful when no cohort is
   rendered, e.g. mixed-batch search results), but body cells are blank
   inside cohorts since the cohort band already shows it. */

/* ----- BULK ACTION BAR (appears when ≥1 code selected) ------
   Was a chunky gold gradient panel with 36px-min-height buttons.
   Refined: cleaner ink panel, tighter buttons that match toolbar height. */
.bulk-bar {
  padding: 8px 14px;
  margin-bottom: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15, 30, 22, 0.04);
  font-size: 13px;
}
.bulk-bar__count {
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
.bulk-bar__count strong {
  color: var(--leaf-dark);
  font-size: 14px;
  font-weight: 700;
  margin-right: 6px;
}
.bulk-bar__actions {
  gap: 6px;
}
.bulk-bar__actions button {
  min-height: 30px;
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
}
.bulk-bar__actions button.secondary {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: none;
}
.bulk-bar__actions button.secondary:hover {
  border-color: var(--ink);
  background: var(--panel);
}
.bulk-bar__actions button.secondary.danger {
  color: var(--danger);
  border-color: rgba(180, 54, 43, 0.30);
}
.bulk-bar__actions button.secondary.danger:hover {
  border-color: var(--danger);
  background: rgba(180, 54, 43, 0.05);
}

/* Make the codes table a real scrollable container so position:sticky
   has a defined top edge to anchor to. Without max-height the wrap
   grows to fit content, the page is the actual scroll container, and
   sticky inside the wrap effectively does nothing (the wrap and its
   sticky child move together as the page scrolls). 70vh keeps the
   table visible without dominating the screen. */
#codesList.table-wrap {
  max-height: 70vh;
}

/* Custom scrollbar styling for the codes table (and any other
   .table-wrap that becomes scrollable). The default OS scrollbar looks
   chunky and dated against the cream/leaf design. Slim leaf-tinted bar
   that's nearly invisible at rest and brightens on hover. */
.table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.table-wrap::-webkit-scrollbar-thumb {
  background: var(--ink-overlay-soft);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--ink-overlay-medium);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.table-wrap::-webkit-scrollbar-corner {
  background: transparent;
}

.table-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-overlay-soft) transparent;
}

/* Batch identifier inside the cohort band — dark-green pill with white
   monospace text. Brand-aligned and immediately scannable. */
.group-batch {
  display: inline-block;
  padding: 1px 8px;
  margin: 0 2px;
  background: var(--leaf-dark);
  color: #fff;
  border: 1px solid var(--leaf-dark);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Security tab: 2-column grid so the half-dozen setting cards don't stack
   into a long scroll. Cards stay their natural height; equal-height grid
   alignment isn't worth the trade-off (some are tiny, some are large).
   Below 900px viewport, collapses to a single column. */
.security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.security-grid > .security-grid__wide {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .security-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dashboard-section { margin-bottom: 22px; }  /* PA-25 */
.dashboard-section__title {
  /* Match the existing eyebrow style used elsewhere in the admin so the
     section labels feel native rather than bolted on. */
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stat {
  min-height: 132px;
  display: grid;
  align-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  background: var(--panel);
  box-shadow: var(--soft-shadow);
  transition: transform var(--duration-base) var(--easing-standard),
              box-shadow var(--duration-base) var(--easing-standard);
}

.stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.stat span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stat strong {
  display: block;
  font-size: 36px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  background: rgba(255, 253, 250, 0.96);
  box-shadow: var(--soft-shadow);
}

.slim-form {
  background: #f9f5ec;
}

/* A single-column form layout for forms whose button text is too long to fit
   in a 1/3 column of the standard 3-column form-grid (e.g. "Generate New
   Recovery Code"). Input takes a full row, button sits below it on its own
   row, both at natural width. Background/padding inherit from `.slim-form`
   when both classes are used together. */
.stacked-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  box-shadow: var(--soft-shadow);
}

.stacked-form button[type="submit"] {
  justify-self: start;
}

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

/* Submit + cancel row at the bottom of a form-grid. Sits on its own row,
   right-aligned, so the primary action is predictable and doesn't share
   space with a tall input like the photo picker. */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

/* Photo + submit-buttons row: photo on the left grows to fill, buttons on
   the right stay their natural size. Generous gap between the two so the
   primary action doesn't feel crammed against the photo area. When the
   photo picker is hidden in edit mode, the form-actions stays
   right-aligned automatically. */
.photo-action-row {
  display: flex;
  align-items: flex-end;
  gap: 36px;
  justify-content: flex-end;
}

.photo-action-row .image-picker {
  flex: 1;
  min-width: 0;  /* lets the help text wrap inside the column */
}

/* Style the native file picker button so it matches the cream/green design
   instead of using the browser's default grey system control. Works in
   Chrome, Edge, Firefox, Safari (file-selector-button is the standard
   pseudo-element; the older WebKit one is below for safety). */
input[type="file"] {
  /* Tame the layout: native file inputs render as inline-block with
     awkward padding; force them to play nice with our form grid. */
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 1px solid rgba(15, 73, 58, 0.18);
  border-radius: 6px;
  background: var(--leaf);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(23, 107, 82, 0.18);
  transition: filter 0.12s ease;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  filter: brightness(1.06);
}

/* ---------- Drag-over highlight ----------
   The form image picker, the photo modal preview, and each row thumbnail
   are drop zones. While a file is being dragged over them, this class is
   added so we can flash a clear "this is the target" cue. */
.image-picker.is-dragover {
  background: var(--leaf-tint-soft);
  border: 2px dashed var(--leaf-dark);
  border-radius: var(--radius-lg);
  padding: 8px;
  transition: background var(--duration-fast) ease;
}

.photo-modal__preview.is-dragover {
  outline: 3px dashed var(--leaf-dark);
  outline-offset: 6px;
  border-radius: 16px;
  background: rgba(23, 107, 82, 0.05);
}

.product-thumb-btn.is-dragover .product-thumb {
  outline: 3px dashed var(--leaf-dark);
  outline-offset: 3px;
  background: rgba(23, 107, 82, 0.08);
}

.table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}

.empty {
  padding: 44px 22px;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
  font-size: 15px;
}

/* .badge is a grandfathered semantic alias for .chip.chip--leaf-soft.chip--pill.
   The CSS below intentionally mirrors what those modifiers would produce, so
   visual output is unchanged. Variants (.active default, .verified, .blocked,
   .inactive) just swap the colour pair. Future status labels — prefer the
   .chip.* approach over adding new .badge.* classes. */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
  color: var(--leaf-dark);
  background: var(--leaf-tint-medium);
}

.badge.verified {
  color: var(--gold);
  background: var(--gold-tint-strong);
}

.badge.blocked {
  color: var(--danger);
  background: rgba(180, 54, 43, 0.12);
}

.badge.inactive {
  /* Neutral grey — "blocked" red is reserved for codes flagged as fraudulent. */
  color: #5a5d6a;
  background: rgba(90, 93, 106, 0.14);
}

button.danger,
button.secondary.danger {
  /* Destructive action signal — used for product delete, etc. The button
     stays styled like a secondary by default but the hover/focus states
     pull toward the danger colour so the click feels intentional. */
  color: var(--danger);
  border-color: rgba(180, 54, 43, 0.35);
}

button.danger:hover,
button.secondary.danger:hover {
  background: rgba(180, 54, 43, 0.08);
  border-color: var(--danger);
}

.compact {
  max-width: 480px;
}

.setting-card {
  margin-top: 18px;
  gap: 18px;
}

/* The Telegram notifications form sits inside a setting-card but is a plain
   <form> (not .form-card), so without this its bot-token / chat-id / toggle /
   actions stacked with no spacing. Give it the same grid rhythm as the other
   account forms. */
#notificationsForm {
  display: grid;
  gap: 14px;
}

.setting-help {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}

/* ============================================================
   Product photos: admin upload UI + customer-facing display.
   ============================================================ */

/* Admin product form — the file picker block. */
.image-picker {
  display: grid;
  gap: 10px;
  align-items: start;
}

.image-picker-label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.image-picker-label small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}

.image-picker input[type="file"] {
  padding: 8px;
  cursor: pointer;
}

.image-preview-box {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdfa;
}

.image-preview-box img {
  width: 120px;
  height: 120px;
  object-fit: contain;   /* show the WHOLE image (letterboxed), never crop to square */
  border-radius: 8px;
  background: #f3f0e8;
}

/* Thumbnail in the products table. */
.product-thumb {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  object-fit: contain;   /* show the WHOLE image (letterboxed), never crop to square */
  background: #f3f0e8;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.product-thumb--empty {
  border: 1px dashed var(--line);
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
}

/* The thumbnail itself is a button — click to open the photo manager dialog.
   The dialog handles view / change / remove cleanly; the row stays uncluttered. */
.product-thumb-btn {
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  line-height: 0;
  transition: transform 0.12s ease;
}

.product-thumb-btn:hover .product-thumb {
  outline: 2px solid var(--leaf-dark);
  outline-offset: 2px;
}

.product-thumb-btn:hover {
  transform: translateY(-1px);
}

.product-thumb-btn--empty:hover .product-thumb--empty {
  border-style: solid;
  color: var(--leaf-dark);
  border-color: var(--leaf-dark);
}

/* ---------- Photo manager dialog ----------
   Native <dialog> styled to feel modern: blurred backdrop, rounded card,
   subtle scale-in animation. Replaces the cramped row-level × control. */
.photo-modal {
  border: none;
  padding: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 30, 22, 0.28);
  background: #fffdf9;
  max-width: 540px;
  width: calc(100% - 32px);
  overflow: hidden;
  color: var(--ink);
}

.photo-modal::backdrop {
  background: rgba(20, 30, 25, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.photo-modal[open] {
  animation: photoModalIn 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes photoModalIn {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.photo-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.photo-modal__head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.2px;
}

.photo-modal__close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.photo-modal__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink);
}

.photo-modal__body {
  padding: 22px 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.photo-modal__preview {
  width: 100%;
  display: flex;
  justify-content: center;
}

.photo-modal__preview img {
  max-width: 100%;
  max-height: 360px;
  border-radius: 14px;
  object-fit: contain;
  background: #f3f0e8;
  box-shadow: 0 6px 16px rgba(15, 30, 22, 0.12);
}

.photo-modal__empty {
  width: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  font-size: 14px;
  background: #fbf9f3;
}

.photo-modal__empty strong {
  font-size: 32px;
  color: var(--leaf-dark);
}

.photo-modal__caption {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  max-width: 380px;
  line-height: 1.5;
}

/* Post-upload readout: filename · dimensions · size. Tiny, grey, monospace
   feel — purely a "what got saved" confirmation. Hidden by default; shown
   only after a fresh upload via the modal. */
.photo-modal__readout {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.photo-modal__actions {
  display: flex;
  gap: 10px;
  padding: 14px 20px 20px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.015);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.photo-modal__actions button {
  min-width: 120px;
}

/* Customer-facing photo at the top of the verify result. */
.result-photo {
  margin: 0 0 14px;
  display: block;
}

.result-photo img {
  width: 100%;
  max-width: 320px;
  max-height: 320px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.public-page[data-brand="grella"] .result-photo img {
  background: rgba(2, 8, 23, 0.4);
  border-color: rgba(253, 185, 26, 0.4);
}

/* ============================================================
   VERIFY-RESULT POLISH — peak-trust moment styling
   ============================================================ */

/* Big hero-style title under the photo. */
.result-title {
  display: block;
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.result-headline {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.92;
}

/* Success eyebrow — the small "VERIFIED ✓" kicker that sits ABOVE the real
   headline. The thing the customer cares about is "<product> is genuine", so
   that's the big .result-title now; "Verified" is the supporting confirmation. */
.result-eyebrow {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1f9d55;
}

/* Batch-story line — small, factual, warm. */
.result-batch-story {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.88;
}

/* Founder thank-you — sits softly between the facts and the share row. */
.result-thanks {
  margin: 14px 0 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 14px;
  line-height: 1.55;
  font-style: italic;
}

.public-page[data-brand="grella"] .result-thanks {
  background: rgba(253, 185, 26, 0.08);
  border-color: rgba(253, 185, 26, 0.22);
  color: #f7f0dc;
}

/* Share row — the peak-trust moment ask. */
.result-share {
  margin: 18px 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.public-page[data-brand="grella"] .result-share {
  border-top-color: rgba(253, 185, 26, 0.20);
}

.result-share-prompt {
  margin: 0 0 10px;
  font-size: 13px;
  opacity: 0.78;
}

.result-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.result-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease, background 0.12s ease;
}

.result-share-btn--whatsapp {
  background: #25D366;          /* WhatsApp brand green — universally read */
  color: #fff;
  border-color: #1faa54;
}

.result-share-btn--whatsapp:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.result-share-btn--copy {
  background: rgba(255, 255, 255, 0.10);
  color: inherit;
  border-color: rgba(255, 255, 255, 0.18);
}

.result-share-btn--copy:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.result-share-btn.is-copied {
  background: #176b52;
  color: #fff;
  border-color: #0f493a;
}

.public-page[data-brand="grella"] .result-share-btn--copy {
  background: rgba(253, 185, 26, 0.10);
  color: #f7f0dc;
  border-color: rgba(253, 185, 26, 0.30);
}

.public-page[data-brand="grella"] .result-share-btn--copy:hover {
  background: rgba(253, 185, 26, 0.20);
}

/* PA-07: Diet Gear verify card is WHITE, so the translucent-white copy button
   was invisible. Give it a dark-on-light treatment. (This success card is what
   blocked/trashed scanners see too — must look complete.) */
.public-page[data-brand="dietgear"] .result-share-btn--copy {
  background: rgba(6, 34, 79, 0.06);
  color: #06224f;
  border-color: #cdd9ef;
}
.public-page[data-brand="dietgear"] .result-share-btn--copy:hover {
  background: rgba(6, 34, 79, 0.12);
}

/* ============================================================
   Calls tab — customer outreach
   ============================================================ */

.calls-summary {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--soft-shadow);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.calls-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  align-items: center;
}

.calls-summary-row strong {
  font-size: 16px;
  font-weight: 900;
}

.calls-summary-status {
  color: var(--muted);
  font-size: 13px;
}

.calls-summary-top {
  margin-left: auto;
  color: var(--gold);
  font-size: 12px;
}

.calls-list {
  display: grid;
  gap: 14px;
}

.customer-card {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}

.customer-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.customer-card-id h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}

.customer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.customer-badges .badge {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
}

/* Customer badges are .badge with semantic colour modifiers. Same chip
   logic as elsewhere — these compose .badge baseline + a colour swap.
   All colours pulled from tokens so the brand palette stays tight. */
.customer-badges .badge.top {
  background: var(--gold-tint-strong);
  color: var(--gold);
}

.customer-badges .badge.repeat,
.customer-badges .badge.re-engaged {
  background: rgba(15, 124, 128, 0.16);
  color: var(--teal);
}

.customer-badges .badge.lapsed {
  background: rgba(101, 115, 111, 0.16);
  color: var(--muted);
}

.customer-badges .badge.loyal,
.customer-badges .badge.cross {
  background: var(--leaf-tint-medium);
  color: var(--leaf-dark);
}

.customer-card-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.customer-products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.customer-product-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}

.customer-product-row:last-child {
  border-bottom: 0;
}

.customer-product-count {
  font-weight: 900;
  color: var(--leaf-dark);
}

.customer-product-latest {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.customer-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.customer-status-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.customer-status-label select {
  width: auto;
  min-width: 220px;
}

.customer-call-actions {
  display: flex;
  gap: 8px;
}

.customer-call-actions .button-link {
  min-height: 38px;
  padding: 0 12px;
}

.customer-notes {
  width: 100%;
  min-height: 60px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
}

.customer-notes:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(15, 124, 128, 0.12);
  outline: none;
}

.customer-last-call {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.customer-notes-meta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
  font-weight: 500;
}

[data-toggle-timeline] {
  justify-self: start;
  padding: 0;
  color: var(--leaf-dark);
  font-size: 13px;
  font-weight: 800;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.customer-timeline-list {
  margin: 0;
  padding: 8px 0 0 18px;
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--ink);
}

.customer-timeline-list li {
  display: grid;
  grid-template-columns: 150px 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}

.customer-timeline-list li:last-child {
  border-bottom: 0;
}

.customer-timeline-list .t-date {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.customer-timeline-list .t-product small {
  color: var(--muted);
  font-weight: 600;
}

.customer-timeline-list .t-code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}

.customer-timeline-list .t-flag {
  font-size: 10px;
  color: var(--gold);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .customer-product-row,
  .customer-timeline-list li {
    grid-template-columns: 1fr auto;
    grid-auto-flow: row;
  }
  .customer-status-label select {
    min-width: 0;
    width: 100%;
  }
  .customer-controls {
    align-items: stretch;
  }
}

/* Login-page helper links sit on the same row with a subtle dot between
   them. The separator is hidden if it wraps to its own line so it doesn't
   look stranded. */
.form-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.form-links-sep {
  color: var(--muted);
  font-weight: 700;
  opacity: 0.6;
}

/* "Email me a login link" is the primary one-click action on the trouble-
   logging-in screen. Slightly larger / heavier than a normal button so it's
   visually the obvious next step. */
.primary-action {
  width: 100%;
  min-height: 54px;
  font-size: 16px;
  font-weight: 800;
}

/* The "Have a recovery code? Use recovery code" line under the primary
   action — keeps the fallback path visible but de-emphasised. */
.forgot-alt {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.forgot-alt .link-button {
  margin-left: 4px;
}

/* Recovery email — compact display: just the address, an Active badge, and
   a one-line helper. No labels, no jargon. */
.email-display {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f9f5ec;
}

.email-display-row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.email-display strong {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink);
  word-break: break-all;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(23, 107, 82, 0.14);
  color: var(--leaf-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Recovery email — EDIT state (typing or changing the address). */
.email-edit-form {
  display: grid;
  gap: 12px;
}

.email-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.switch-row {
  display: flex;
  grid-template-columns: none;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  cursor: pointer;
}

.switch-row span {
  display: grid;
  gap: 5px;
}

.switch-row small {
  color: var(--muted);
  font-weight: 800;
}

.switch-row input {
  width: 58px;
  min-width: 58px;
  height: 32px;
  min-height: 32px;
  appearance: none;
  border: 1px solid rgba(15, 73, 58, 0.22);
  border-radius: 999px;
  padding: 3px;
  background: #d8d1c4;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.switch-row input::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(22, 25, 22, 0.20);
  transition: transform 160ms ease;
}

.switch-row input:checked {
  border-color: rgba(15, 73, 58, 0.24);
  background: var(--leaf);
}

.switch-row input:checked::before {
  transform: translateX(26px);
}

.risk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.risk-grid h4 {
  margin: 0 0 10px;
  font-size: 18px;
}

@media (max-width: 960px) {
  .grella-topbar {
    grid-template-columns: 1fr auto;
    padding-block: 16px;
  }

  .grella-nav {
    display: none;
  }

  .grella-help {
    justify-self: end;
  }

  .public-page[data-brand="grella"] .verify-shell {
    width: min(720px, calc(100% - 36px));
    gap: 22px;
    padding-top: 34px;
  }

  .public-page[data-brand="grella"] .brand-panel {
    min-height: auto;
  }

  .public-page[data-brand="grella"] .brand-panel::before,
  .public-page[data-brand="grella"] .brand-panel::after {
    display: none;
  }

  .public-page[data-brand="grella"] .verify-card {
    min-height: auto;
  }

  .grella-steps,
  .grella-trustbar {
    width: min(720px, calc(100% - 36px));
  }

  .grella-trustbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
    margin: 0 auto;
    border: 1px solid rgba(253, 185, 26, 0.22);
    border-radius: 14px 14px 0 0;
  }

  .grella-trustbar span:nth-child(2) {
    border-right: none;
  }

  .brand-panel h1 {
    font-size: 46px;
    line-height: 1.2;
  }

  .verify-shell,
  .admin-page {
    grid-template-columns: 1fr;
  }

  .brand-panel {
    min-height: auto;
  }

  /* Mobile: sidebar becomes an off-canvas drawer, hamburger toggles it. */
  .sidebar-toggle {
    display: flex;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: min(86vw, 320px);
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  }

  .admin-page.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar nav {
    grid-template-columns: 1fr;
  }

  .admin-main {
    padding-top: 68px;
  }

  .stats-grid,
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .public-page,
  .admin-main {
    padding: 16px;
  }

  .public-page[data-brand="grella"] {
    padding: 0;
  }

  .grella-topbar {
    min-height: 68px;
    padding: 14px 18px;
  }

  .grella-top-logo {
    width: 126px;
  }

  .grella-help {
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }

  .public-page[data-brand="grella"] .verify-shell {
    width: calc(100% - 32px);
    padding-top: 28px;
  }

  .public-page[data-brand="grella"] .brand-panel h1 {
    font-size: 43px;
    line-height: 1.08;
  }

  .public-page[data-brand="grella"] .brand-panel .eyebrow {
    gap: 10px;
    letter-spacing: 0.18em;
  }

  .grella-proof,
  .grella-steps > div,
  .grella-trustbar {
    grid-template-columns: 1fr;
  }

  .grella-proof span,
  .grella-proof span + span,
  .grella-trustbar span,
  .grella-trustbar span:first-child {
    border-right: none;
    padding: 0;
  }

  .grella-proof {
    gap: 14px;
  }

  .public-page[data-brand="grella"] .verify-card {
    padding: 26px;
  }

  .grella-steps,
  .grella-trustbar {
    width: calc(100% - 32px);
  }

  .brand-panel {
    min-height: auto;
    padding: 28px;
  }

  .brand-panel h1 {
    font-size: 36px;
    line-height: 1.2;
  }

  .public-logo {
    width: 154px;
    margin-bottom: 24px;
  }

  .lede {
    font-size: 16px;
  }

  .sidebar nav,
  .stats-grid,
  .form-grid,
  .risk-grid {
    grid-template-columns: 1fr;
  }

  .span-2 {
    grid-column: auto;
  }

  .topbar,
  .toolbar,
  .workband {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar h2 {
    font-size: 32px;
  }
}

/* Grella compact public verifier: matches the main website palette and avoids page scroll. */
.public-page[data-brand="grella"] {
  --public-accent: #FDB91A;
  --public-accent-ink: #191d38;
  --public-panel-border: rgba(253, 185, 26, 0.2);
  --public-code-border: #FDB91A;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(14px, 3vh, 26px);
  background: #191d38;
}

.public-page[data-brand="grella"]::before {
  display: none;
}

.public-page[data-brand="grella"] .grella-topbar,
.public-page[data-brand="grella"] .brand-panel,
.public-page[data-brand="grella"] .grella-steps,
.public-page[data-brand="grella"] .grella-trustbar {
  display: none;
}

.public-page[data-brand="grella"] .verify-shell {
  width: min(390px, calc(100vw - 32px));
  display: block;
  margin: 0;
  padding: 0;
}

.public-page[data-brand="grella"] .verify-card {
  width: 100%;
  min-height: 0;
  align-content: start;
  border: 1px solid rgba(253, 185, 26, 0.50);
  border-radius: 22px;
  padding: clamp(22px, 4vh, 34px);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  isolation: isolate;
}

.public-page[data-brand="grella"] .verify-card::before {
  display: none;
}

.public-page[data-brand="grella"] .verify-card-head {
  margin-bottom: clamp(17px, 2.6vh, 23px);
}

.public-page[data-brand="grella"] .verify-card-head h2 {
  max-width: 250px;
  font-family: "DM Sans", "Aptos", "Segoe UI", sans-serif;
  font-size: clamp(27px, 4.8vh, 35px);
  line-height: 1.04;
  letter-spacing: -0.055em;
  font-weight: 700;
}

.public-page[data-brand="grella"] .verify-card-head p {
  margin-top: 13px;
  color: rgba(255, 255, 255, 0.70);
  font-size: 11px;
  font-weight: 700;
}

.public-page[data-brand="grella"] .verify-card form {
  gap: clamp(10px, 1.75vh, 13px);
}

.public-page[data-brand="grella"] .verify-card label {
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
}

.public-page[data-brand="grella"] #code {
  width: 100%;
  height: clamp(42px, 6.4vh, 48px);
  border-color: rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  padding-left: 42px;
  color: #fff;
  background: rgba(4, 10, 25, 0.72);
  font-size: clamp(14px, 2.4vh, 17px);
  letter-spacing: 0.12em;
}

.public-page[data-brand="grella"] .code-input-wrap {
  position: relative;
  display: block;
}

.public-page[data-brand="grella"] .field-icon {
  position: absolute;
  z-index: 1;
  left: 15px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #FDB91A;
}

.public-page[data-brand="grella"] .input-help {
  margin: -6px 0 0;
  color: rgba(255, 255, 255, 0.54);
  font-size: 9px;
}

.public-page[data-brand="grella"] input {
  width: 100%;
  min-height: clamp(39px, 6.1vh, 44px);
  border-color: rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  background: rgba(5, 9, 25, 0.66);
  font-size: 13px;
}

.public-page[data-brand="grella"] #code:focus,
.public-page[data-brand="grella"] #phone:focus {
  border-color: #FDB91A;
}

.public-page[data-brand="grella"] .phone-input-wrap {
  position: relative;
  display: block;
}

.public-page[data-brand="grella"] .phone-prefix {
  position: absolute;
  z-index: 1;
  left: 58px;
  top: 50%;
  color: rgba(255, 255, 255, 0.92);
  font-size: 20px;
  font-weight: 500;
  transform: translateY(-50%);
  pointer-events: none;
}

.public-page[data-brand="grella"] .phone-input-wrap input {
  padding-left: 94px;
}

.public-page[data-brand="grella"] button {
  width: 100%;
  min-height: clamp(54px, 7.8vh, 62px);
  margin-top: clamp(8px, 1.8vh, 14px);
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  padding: 0 18px;
  color: #191d38;
  background: #FDB91A;
  font-size: clamp(16px, 2.7vh, 20px);
  font-weight: 900;
  letter-spacing: -0.035em;
  box-shadow: none;
}

.public-page[data-brand="grella"] button::after {
  content: none;
}

.public-page[data-brand="grella"] .verify-submit svg {
  width: 28px;
  height: 28px;
  color: #191d38;
}

.public-page[data-brand="grella"] .verify-submit .button-arrow {
  justify-self: end;
  width: 27px;
  height: 27px;
}

.public-page[data-brand="grella"] .verify-submit span {
  justify-self: start;
}

.public-page[data-brand="grella"] .result {
  max-height: 31vh;
  overflow: auto;
  margin-top: 14px;
  padding: 13px;
  border-radius: 12px;
  font-size: 13px;
}

.public-page[data-brand="grella"] .result strong {
  font-size: 18px;
}

.grella-secure-note {
  margin: clamp(16px, 2.8vh, 22px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding: clamp(12px, 2vh, 16px) 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  line-height: 1.45;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 13px;
  align-items: start;
  text-align: left;
}

.grella-secure-note svg {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.74);
}

.public-page[data-brand="grella"] .support-note {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  text-align: center;
}

.public-page[data-brand="grella"] .support-note a {
  color: #FDB91A;
}

@media (max-height: 680px) {
  .public-page[data-brand="grella"] .verify-card {
    padding: 20px;
  }

  .public-page[data-brand="grella"] .verify-card-head h2 {
    font-size: 25px;
  }

  .grella-secure-note {
    display: none;
  }
}

/* Grella reference verifier: full landing-page composition matching the approved visual. */
.public-page[data-brand="grella"] {
  --grella-navy: #020817;
  --grella-navy-2: #06142a;
  --grella-gold: #FDB91A;
  --grella-gold-soft: rgba(253, 185, 26, 0.58);
  --grella-text: rgba(255, 255, 255, 0.94);
  --grella-muted: rgba(255, 255, 255, 0.68);
  --grella-dim: rgba(255, 255, 255, 0.48);
  min-height: 100vh;
  height: 100vh;
  display: block;
  overflow: hidden;
  padding: 0;
  color: var(--grella-text);
  background: #020817;
}

.public-page[data-brand="grella"] .grella-topbar {
  position: relative;
  z-index: 10;
  min-height: 78px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid rgba(253, 185, 26, 0.36);
  padding: 0 clamp(34px, 4.5vw, 72px);
  background: rgba(2, 8, 23, 0.90);
}

.public-page[data-brand="grella"] .grella-top-logo {
  width: 140px;
  display: inline-flex;
  align-items: center;
}

.public-page[data-brand="grella"] .grella-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(42px, 5.4vw, 78px);
}

.public-page[data-brand="grella"] .grella-nav a,
.public-page[data-brand="grella"] .grella-help {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.public-page[data-brand="grella"] .grella-help {
  justify-self: end;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(253, 185, 26, 0.54);
  border-radius: 999px;
  padding: 0 22px;
  background: rgba(2, 8, 23, 0.30);
}

.public-page[data-brand="grella"] .grella-help::before {
  display: none;
}

.public-page[data-brand="grella"] .grella-help svg {
  width: 20px;
  height: 20px;
  color: var(--grella-gold);
}

.public-page[data-brand="grella"] .verify-shell {
  position: relative;
  z-index: 2;
  width: min(1530px, calc(100% - 8.4vw));
  height: calc(100vh - 178px);
  display: grid;
  grid-template-columns: minmax(0, 1.58fr) minmax(380px, 0.72fr);
  gap: clamp(38px, 5.8vw, 92px);
  align-items: center;
  margin: 0 auto;
  padding: 44px 0 28px;
}

.public-page[data-brand="grella"] .brand-panel {
  position: relative;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(535px, 1fr) minmax(345px, 0.72fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(18px, 2.5vw, 42px);
  align-items: center;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.public-page[data-brand="grella"] .brand-panel::before,
.public-page[data-brand="grella"] .brand-panel::after {
  display: none;
}

.public-page[data-brand="grella"] .brand-hero {
  position: relative;
  z-index: 2;
  max-width: 590px;
  align-self: center;
}

.public-page[data-brand="grella"] .brand-panel .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.33em;
  text-transform: uppercase;
}

.public-page[data-brand="grella"] .brand-panel .eyebrow::before {
  display: none;
}

.public-page[data-brand="grella"] .brand-panel .eyebrow svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--grella-gold);
}

.public-page[data-brand="grella"] .brand-panel h1 {
  max-width: 590px;
  margin: 0;
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(54px, 4vw, 67px);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.public-page[data-brand="grella"] .brand-panel h1 span {
  color: var(--grella-gold);
}

.public-page[data-brand="grella"] .lede {
  max-width: 520px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
}

.public-page[data-brand="grella"] .hero-short {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.55;
}

.public-page[data-brand="grella"] .hero-highlight {
  margin: 18px 0 0;
  color: var(--grella-gold);
  font-size: 16px;
  line-height: 1.5;
}

.public-page[data-brand="grella"] .grella-proof {
  max-width: 610px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 28px 0 0;
}

.public-page[data-brand="grella"] .grella-proof span {
  min-height: 52px;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.20);
  padding: 0 22px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.public-page[data-brand="grella"] .grella-proof span + span {
  padding-left: 20px;
}

.public-page[data-brand="grella"] .grella-proof span:last-child {
  border-right: 0;
}

.public-page[data-brand="grella"] .grella-proof span::before {
  display: none;
}

.public-page[data-brand="grella"] .grella-proof svg {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(253, 185, 26, 0.78);
  border-radius: 50%;
  padding: 13px;
  color: var(--grella-gold);
}

.public-page[data-brand="grella"] .grella-steps {
  position: relative;
  z-index: 3;
  display: block;
  grid-column: 1 / 3;
  align-self: end;
  width: min(790px, 78%);
  margin: 0;
  border: 1px solid rgba(253, 185, 26, 0.24);
  border-radius: 10px;
  padding: 16px 24px;
  background: rgba(4, 14, 34, 0.74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.public-page[data-brand="grella"] .grella-steps > .eyebrow {
  margin: 0 0 10px;
  color: var(--grella-gold);
  font-size: 12px;
  letter-spacing: 0.28em;
}

.public-page[data-brand="grella"] .grella-steps > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.public-page[data-brand="grella"] .grella-steps article {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 58px;
}

.public-page[data-brand="grella"] .grella-steps article:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 50%;
  width: 13px;
  height: 13px;
  border-top: 3px solid rgba(255, 255, 255, 0.48);
  border-right: 3px solid rgba(255, 255, 255, 0.48);
  transform: translateY(-50%) rotate(45deg);
}

.public-page[data-brand="grella"] .grella-steps strong {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--grella-gold);
  border-radius: 50%;
  color: var(--grella-gold);
  font-size: 18px;
}

.public-page[data-brand="grella"] .grella-steps span {
  display: grid;
  gap: 4px;
}

.public-page[data-brand="grella"] .grella-steps b {
  color: #fff;
  font-size: 14px;
}

.public-page[data-brand="grella"] .grella-steps small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.public-page[data-brand="grella"] .verify-card {
  position: relative;
  z-index: 4;
  width: min(410px, 100%);
  min-height: 652px;
  align-self: center;
  justify-self: center;
  display: grid;
  align-content: center;
  border: 1px solid rgba(253, 185, 26, 0.70);
  border-radius: 18px;
  padding: 40px;
  color: #fff;
  background: rgba(8, 24, 52, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38);
  overflow: visible;
}

.public-page[data-brand="grella"] .verify-card::before {
  display: none;
}

.public-page[data-brand="grella"] .verify-card::after {
  display: none;
}

.public-page[data-brand="grella"] .verify-card > * {
  position: relative;
  z-index: 1;
}

.public-page[data-brand="grella"] .verify-card-head {
  margin-bottom: 24px;
}

.public-page[data-brand="grella"] .verify-card-head h2 {
  max-width: 300px;
  margin: 0;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.public-page[data-brand="grella"] .verify-card-head p {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  font-weight: 500;
}

.public-page[data-brand="grella"] .verify-card form {
  display: grid;
  gap: 12px;
}

.public-page[data-brand="grella"] .field-label,
.public-page[data-brand="grella"] .verify-card label {
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  font-weight: 600;
}

.public-page[data-brand="grella"] #phoneOptional {
  display: inline;
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  font-weight: 500;
}

.public-page[data-brand="grella"] #phoneOptional.hidden {
  display: none;
}

.public-page[data-brand="grella"] .code-input-wrap,
.public-page[data-brand="grella"] .phone-input-wrap {
  position: relative;
  display: block;
}

.public-page[data-brand="grella"] .code-input-wrap .field-icon,
.public-page[data-brand="grella"] .phone-input-wrap .field-icon {
  position: absolute;
  z-index: 2;
  left: 16px;
  top: 50%;
  width: 23px;
  height: 23px;
  color: var(--grella-gold);
  transform: translateY(-50%);
  pointer-events: none;
}

.public-page[data-brand="grella"] #code,
.public-page[data-brand="grella"] #phone {
  width: 100%;
  height: 52px;
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 0 16px 0 58px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(2, 8, 23, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.public-page[data-brand="grella"] #code {
  border-color: rgba(253, 185, 26, 0.82);
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.15em;
}

.public-page[data-brand="grella"] #phone {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.public-page[data-brand="grella"] #code:focus,
.public-page[data-brand="grella"] #phone:focus {
  border-color: var(--grella-gold);
  box-shadow: 0 0 0 1px rgba(253, 185, 26, 0.22);
}

.public-page[data-brand="grella"] .input-help {
  margin: -6px 0 8px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 10px;
  font-weight: 600;
}

.public-page[data-brand="grella"] .verify-submit {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr 28px;
  align-items: center;
  gap: 13px;
  margin-top: 16px;
  border: 0;
  border-radius: 8px;
  padding: 0 22px;
  color: #061124;
  background: #FDB91A;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.public-page[data-brand="grella"] .verify-submit:hover {
  filter: brightness(1.02);
  transform: translateY(-1px);
}

.public-page[data-brand="grella"] .verify-submit svg {
  width: 27px;
  height: 27px;
  color: #061124;
}

.public-page .shield-tick {
  color: #28c76f;
}

.public-page[data-brand="grella"] .verify-submit span {
  justify-self: start;
}

.public-page[data-brand="grella"] .verify-submit .button-arrow {
  justify-self: end;
  width: 27px;
  height: 27px;
}

.public-page[data-brand="dietgear"] .verify-submit {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr 26px;
  align-items: center;
  gap: 13px;
  margin-top: 16px;
  border: 0;
  border-radius: 10px;
  padding: 0 24px;
  color: #063077;
  background: #ffd21a;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.public-page[data-brand="dietgear"] .verify-submit:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.public-page[data-brand="dietgear"] .verify-submit span {
  justify-self: start;
}

.public-page[data-brand="dietgear"] .verify-submit svg,
.public-page[data-brand="dietgear"] .verify-submit .button-arrow {
  justify-self: end;
  width: 26px;
  height: 26px;
  color: #063077;
}

.public-page[data-brand="grella"] .result {
  max-height: 230px;
  overflow: auto;
  margin-top: 18px;
  border-radius: 12px;
  padding: 14px;
  font-size: 13px;
}

.public-page[data-brand="grella"] .grella-secure-note {
  margin: 28px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px 0 0;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  color: rgba(255, 255, 255, 0.70);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}

.public-page[data-brand="grella"] .grella-secure-note svg {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.76);
}

.public-page[data-brand="grella"] .support-note {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.public-page[data-brand="grella"] .support-note a {
  color: var(--grella-gold);
  font-weight: 800;
}

.public-page[data-brand="grella"] .grella-trustbar {
  position: relative;
  z-index: 5;
  height: 100px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  width: 100%;
  margin: 0;
  border-top: 1px solid rgba(253, 185, 26, 0.22);
  padding: 0 clamp(60px, 9.4vw, 150px);
  background: rgba(2, 8, 23, 0.74);
}

.public-page[data-brand="grella"] .grella-trustbar span {
  min-height: 58px;
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 16px;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0 34px;
}

.public-page[data-brand="grella"] .grella-trustbar span:last-child {
  border-right: 0;
}

.public-page[data-brand="grella"] .grella-trustbar svg {
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  border: 1px solid var(--grella-gold);
  border-radius: 50%;
  padding: 10px;
  color: var(--grella-gold);
}

.public-page[data-brand="grella"] .grella-trustbar strong {
  align-self: end;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}

.public-page[data-brand="grella"] .grella-trustbar small {
  align-self: start;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-weight: 500;
}

@media (max-width: 1280px) {
  .public-page[data-brand="grella"] {
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }

  .public-page[data-brand="grella"] .verify-shell {
    height: auto;
    grid-template-columns: 1fr;
    padding: 34px 0;
  }

  .public-page[data-brand="grella"] .brand-panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .public-page[data-brand="grella"] .grella-steps {
    width: 100%;
  }

  .public-page[data-brand="grella"] .verify-card {
    justify-self: start;
  }

  .public-page[data-brand="grella"] .grella-trustbar {
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 24px 42px;
  }
}

@media (max-width: 720px) {
  .public-page[data-brand="grella"] .grella-topbar {
    grid-template-columns: 1fr auto;
    min-height: 68px;
    padding: 14px 18px;
  }

  .public-page[data-brand="grella"] .grella-nav {
    display: none;
  }

  .public-page[data-brand="grella"] .grella-top-logo {
    width: 122px;
  }

  .public-page[data-brand="grella"] .verify-shell {
    width: calc(100% - 32px);
    gap: 24px;
  }

  .public-page[data-brand="grella"] .brand-panel h1 {
    font-size: 44px;
  }

  .public-page[data-brand="grella"] .grella-proof,
  .public-page[data-brand="grella"] .grella-steps > div,
  .public-page[data-brand="grella"] .grella-trustbar {
    grid-template-columns: 1fr;
  }


  .public-page[data-brand="grella"] .grella-proof span,
  .public-page[data-brand="grella"] .grella-proof span + span {
    border-right: 0;
    padding: 0;
  }

  .public-page[data-brand="grella"] .grella-steps article:not(:last-child)::after {
    display: none;
  }

  .public-page[data-brand="grella"] .verify-card {
    width: 100%;
    min-height: auto;
    padding: 30px 22px;
  }

  .public-page[data-brand="grella"] .verify-card-head h2 {
    font-size: 34px;
  }

  .public-page[data-brand="grella"] .grella-trustbar span {
    border-right: 0;
    padding: 12px 0;
  }
}

.public-page[data-brand="grella"] .phone-input-wrap input#phone {
  padding-left: 94px;
}

.public-page[data-brand="dietgear"] .phone-input-wrap input#phone {
  padding-left: 84px;
}

@media (min-width: 1281px) {
  .public-page[data-brand="grella"] .verify-shell {
    width: min(1480px, calc(100% - clamp(88px, 7.2vw, 160px)));
    height: calc(100vh - 202px);
    grid-template-columns: minmax(600px, 760px) minmax(380px, 410px);
    justify-content: center;
    padding: 34px 0 18px;
    gap: clamp(76px, 7.6vw, 150px);
  }

  .public-page[data-brand="grella"] .brand-panel {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
  }

  .public-page[data-brand="grella"] .brand-hero {
    align-self: center;
    max-width: 620px;
  }

  .public-page[data-brand="grella"] .brand-panel .eyebrow {
    margin-bottom: 18px;
  }

  .public-page[data-brand="grella"] .brand-panel h1 {
    max-width: 620px;
    font-size: clamp(56px, 3.75vw, 68px);
  }

  .public-page[data-brand="grella"] .lede {
    margin-top: 18px;
  }

  .public-page[data-brand="grella"] .hero-short {
    margin-top: 14px;
  }

  .public-page[data-brand="grella"] .hero-highlight {
    margin-top: 16px;
  }

  .public-page[data-brand="grella"] .grella-proof {
    margin-top: 24px;
  }

  .public-page[data-brand="grella"] .grella-steps {
    grid-column: 1;
    width: 100%;
    max-width: 790px;
    padding: 14px 24px;
  }

  .public-page[data-brand="grella"] .verify-card {
    min-height: 620px;
    padding: 38px;
  }

  .public-page[data-brand="grella"] .verify-card-head {
    margin-bottom: 22px;
  }

  .public-page[data-brand="grella"] .verify-card-head p {
    margin-top: 16px;
  }

  .public-page[data-brand="grella"] .verify-submit {
    margin-top: 14px;
  }

  .public-page[data-brand="grella"] .grella-secure-note {
    margin-top: 22px;
    padding-top: 18px;
  }

  .public-page[data-brand="grella"] .grella-trustbar {
    height: 96px;
  }
}

@media (min-width: 1281px) and (max-height: 800px) {
  .public-page[data-brand="grella"] .grella-topbar {
    min-height: 68px;
  }

  .public-page[data-brand="grella"] .grella-top-logo {
    width: 126px;
  }

  .public-page[data-brand="grella"] .verify-shell {
    width: min(1380px, calc(100% - 7vw));
    height: calc(100vh - 156px);
    grid-template-columns: minmax(580px, 720px) minmax(380px, 390px);
    justify-content: center;
    padding: 24px 0 10px;
    gap: clamp(64px, 7vw, 112px);
  }

  .public-page[data-brand="grella"] .brand-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-page[data-brand="grella"] .brand-panel .eyebrow {
    margin-bottom: 14px;
    font-size: 12px;
  }

  .public-page[data-brand="grella"] .brand-panel .eyebrow svg {
    width: 19px;
    height: 19px;
  }

  .public-page[data-brand="grella"] .brand-panel h1 {
    max-width: 620px;
    font-size: clamp(48px, 3.35vw, 54px);
    line-height: 0.98;
  }

  .public-page[data-brand="grella"] .lede {
    max-width: 560px;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.45;
  }

  .public-page[data-brand="grella"] .hero-short {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.45;
  }

  .public-page[data-brand="grella"] .hero-highlight {
    margin-top: 12px;
    font-size: 14px;
  }

  .public-page[data-brand="grella"] .grella-proof {
    max-width: 610px;
    margin-top: 18px;
  }

  .public-page[data-brand="grella"] .grella-proof span {
    min-height: 44px;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    font-size: 12px;
  }

  .public-page[data-brand="grella"] .grella-proof svg {
    width: 44px;
    height: 44px;
    padding: 11px;
  }

  .public-page[data-brand="grella"] .grella-steps {
    grid-column: 1;
    width: 100%;
    max-width: 720px;
    padding: 10px 20px;
  }

  .public-page[data-brand="grella"] .grella-steps > .eyebrow {
    margin-bottom: 8px;
    font-size: 11px;
  }

  .public-page[data-brand="grella"] .grella-steps > div {
    gap: 18px;
  }

  .public-page[data-brand="grella"] .grella-steps article {
    min-height: 48px;
    grid-template-columns: 38px 1fr;
    gap: 12px;
  }

  .public-page[data-brand="grella"] .grella-steps strong {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .public-page[data-brand="grella"] .grella-steps b {
    font-size: 12px;
  }

  .public-page[data-brand="grella"] .grella-steps small {
    font-size: 10px;
    line-height: 1.3;
  }

  .public-page[data-brand="grella"] .verify-card {
    width: min(390px, 100%);
    min-height: 548px;
    padding: 30px;
  }

  .public-page[data-brand="grella"] .verify-card-head {
    margin-bottom: 18px;
  }

  .public-page[data-brand="grella"] .verify-card-head h2 {
    font-size: 34px;
  }

  .public-page[data-brand="grella"] .verify-card-head p {
    margin-top: 12px;
    font-size: 13px;
  }

  .public-page[data-brand="grella"] .verify-card form {
    gap: 9px;
  }

  .public-page[data-brand="grella"] .field-label,
  .public-page[data-brand="grella"] .verify-card label {
    font-size: 13px;
  }

  .public-page[data-brand="grella"] #code,
  .public-page[data-brand="grella"] #phone {
    height: 46px;
    min-height: 46px;
  }

  .public-page[data-brand="grella"] #code,
  .public-page[data-brand="grella"] #phone,
  .public-page[data-brand="grella"] .phone-prefix {
    font-size: 13px;
  }

  .public-page[data-brand="grella"] .input-help {
    margin: -4px 0 6px;
    font-size: 9px;
  }

  .public-page[data-brand="grella"] .verify-submit {
    min-height: 52px;
    margin-top: 12px;
    font-size: 15px;
  }

  .public-page[data-brand="grella"] .grella-secure-note {
    margin-top: 18px;
    padding-top: 14px;
    font-size: 11px;
  }

  .public-page[data-brand="grella"] .support-note {
    margin-top: 10px;
    font-size: 11px;
  }

  .public-page[data-brand="grella"] .grella-trustbar {
    height: 78px;
    padding: 0 clamp(48px, 7.5vw, 120px);
  }

  .public-page[data-brand="grella"] .grella-trustbar span {
    min-height: 46px;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
    padding: 0 24px;
  }

  .public-page[data-brand="grella"] .grella-trustbar svg {
    width: 36px;
    height: 36px;
    padding: 8px;
  }

  .public-page[data-brand="grella"] .grella-trustbar strong {
    font-size: 14px;
  }

  .public-page[data-brand="grella"] .grella-trustbar small {
    font-size: 11px;
  }
}

/* ============================================================
   Verify-page UI fixes (May 2026)
   ============================================================ */

/* --- Result panel: dark-themed to match the Grella navy aesthetic ---
   Previously the result panel used pastel light backgrounds, which clashed
   with the dark navy/gold page. Now success/warning/error all use a dark
   base tinted with the appropriate accent colour. Also removes the 230px
   max-height cap that trapped long messages inside a tiny scrollable box. */
.public-page[data-brand="grella"] .result {
  max-height: none;
  overflow: visible;
  margin-top: 18px;
  border-radius: 14px;
  padding: 18px;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(2, 8, 23, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
}

.public-page[data-brand="grella"] .result strong {
  color: #fff;
  font-size: 20px;
  margin-bottom: 8px;
}

.public-page[data-brand="grella"] .result p {
  margin: 8px 0;
  color: rgba(255, 255, 255, 0.88);
}

/* Flat tints — no gradients. The accent shows through via a thin border and
   a single solid translucent layer on top of the navy. */
.public-page[data-brand="grella"] .result.success {
  border-color: rgba(40, 199, 111, 0.70);
  background: rgba(40, 199, 111, 0.10);
}

.public-page[data-brand="grella"] .result.warning {
  border-color: rgba(253, 185, 26, 0.85);
  background: rgba(253, 185, 26, 0.14);
}

.public-page[data-brand="grella"] .result.error {
  border-color: rgba(224, 83, 47, 0.70);
  background: rgba(224, 83, 47, 0.12);
}

/* "Contact support" + "Verify another code" share a row at the bottom of
   the result panel; on small screens they stack. */
.result-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.public-page[data-brand="grella"] .result-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  padding: 0 14px;
  color: #061124;
  background: var(--grella-gold);
  font-weight: 800;
  text-decoration: none;
}

.public-page[data-brand="grella"] .result-reset {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(253, 185, 26, 0.55);
  border-radius: 10px;
  padding: 0 14px;
  color: var(--grella-gold);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.public-page[data-brand="grella"] .result-reset:hover {
  background: rgba(253, 185, 26, 0.08);
  transform: none;
}

/* Diet Gear variant: matches its blue palette. */
.public-page[data-brand="dietgear"] .result-reset {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #ffd21a;
  border-radius: 10px;
  padding: 0 14px;
  color: #ffd21a;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}



/* --- Loading state for the Verify button ---
   Disables clicks, dims slightly, and replaces the button-arrow icon
   with a spinning circle so the customer knows the request is in flight. */
/* "progress" cursor only when actually mid-request. A plain disabled state
   (without .is-loading) falls through to the base button:disabled rule
   which uses cursor: not-allowed. */
.verify-submit.is-loading {
  cursor: progress;
  opacity: 0.85;
}

.verify-submit.is-loading .button-arrow {
  visibility: hidden;
}

.verify-submit.is-loading::after {
  content: "";
  grid-column: -2;     /* last column, regardless of column count */
  justify-self: end;
  width: 22px;
  height: 22px;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: verify-spin 0.7s linear infinite;
}

@keyframes verify-spin {
  to { transform: rotate(360deg); }
}

/* --- Layout swap: verify card on LEFT (desktop) or TOP (mobile) ---
   On a verification page the customer's primary task is "type my code".
   Eye-tracking on LTR pages goes left first, so we put the form there.
   The brand/marketing panel stays the wider area but on the right.

   The `order` property keeps the form first whether the grid is 2-column
   (desktop) or 1-column (mobile/tablet). The column swap is wrapped in a
   desktop-only media query so that on mobile, the existing 1-column rule
   (defined in `@media (max-width: 1280px)`) wins and the panels stack
   cleanly instead of overlapping. */
.verify-shell .verify-card { order: 1; }
.verify-shell .brand-panel { order: 2; }

@media (min-width: 1281px) {
  .verify-shell {
    grid-template-columns: minmax(360px, 0.62fr) minmax(0, 1.18fr);
  }

  /* Diet Gear desktop columns come from its authoritative base rule
     (higher specificity), so no override is needed here. */

  .public-page[data-brand="grella"] .verify-shell {
    grid-template-columns: minmax(380px, 410px) minmax(600px, 760px);
  }
}

@media (min-width: 1281px) and (max-height: 800px) {
  .public-page[data-brand="grella"] .verify-shell {
    grid-template-columns: minmax(380px, 390px) minmax(580px, 720px);
  }
}

/* --- Typography unification: drop the Georgia serif used on hero + verify
   card headlines. The rest of the page is DM Sans, so the serif was
   looking like an out-of-place mistake. Keep a slightly bolder weight + a
   small letter-spacing tweak so the headline still feels like a headline. */
.public-page[data-brand="grella"] .brand-panel h1,
.public-page[data-brand="grella"] .verify-card-head h2 {
  font-family: "DM Sans", "Aptos", "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* --- Trust bar + proof icons: remove the doubled-circle look ---
   Previously each icon had: outer 1px gold border + 50% radius + 10-13px
   padding, PLUS the SVG itself uses gold strokes — so it read as two
   concentric outlines. We drop the outer ring and let the SVG be the icon. */
.public-page[data-brand="grella"] .grella-trustbar svg,
.public-page[data-brand="grella"] .grella-proof svg {
  border: 0;
  padding: 0;
}

/* The grella-proof column gap that previously hugged the ringed icon now
   needs a touch of breathing room around the bare SVG. */
.public-page[data-brand="grella"] .grella-proof svg {
  width: 36px;
  height: 36px;
}

.public-page[data-brand="grella"] .grella-trustbar svg {
  width: 36px;
  height: 36px;
}

/* ---------- Privacy / DPDP notice ----------
   Small grey note shown under the phone field on the verify page, plus the
   styles for the standalone /privacy page itself. */
.phone-privacy-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.phone-privacy-note a {
  color: inherit;
  text-decoration: underline;
}

.public-page[data-brand="grella"] .phone-privacy-note {
  color: rgba(255, 255, 255, 0.65);
}

.public-page[data-brand="grella"] .phone-privacy-note a {
  color: rgba(255, 255, 255, 0.92);
}

.privacy-page {
  max-width: 720px;
  margin: 40px auto;
  padding: 28px 32px 40px;
  background: #fffdf9;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--soft-shadow);
  color: var(--ink);
}

.privacy-page .privacy-head h1 {
  margin: 0 0 6px;
  font-size: 26px;
  color: var(--ink);
}

.privacy-page .privacy-head .lede {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
}

.privacy-section {
  margin: 22px 0;
}

.privacy-section h2 {
  font-size: 13px;
  margin: 0 0 6px;
  color: var(--ink);
}

.privacy-section p,
.privacy-section li {
  font-size: 14px;
  line-height: 1.6;
  color: #2a3531;
}

.privacy-section ul {
  margin: 6px 0 0 18px;
  padding: 0;
}

.privacy-back {
  margin: 28px 0 0;
  font-size: 13px;
}

.privacy-back a {
  color: var(--ink);
  text-decoration: underline;
}

/* Brand override: when Grella's dark theme is active on the public side, the
   /privacy page should still read on a light card so the legal copy is high
   contrast. We just neutralise the dark gradient body background. */
body.public-page[data-brand="grella"]:has(.privacy-page) {
  background: #f1ede2;
}

/* Inline unit suffix for number fields like "Shelf life" — the wrapper
   itself plays the role of "the input box" (border, padding, bg, focus
   ring), while the real <input> inside is a narrow, borderless inline
   field sized to the digits, with "months" sitting RIGHT next to it.
   That way the field reads as "12 months" tight together at the left,
   instead of the digits stranded on the left and the unit floating at
   the right edge. */
.input-with-suffix {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
}
.input-with-suffix:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(15, 124, 128, 0.12);
}
.input-with-suffix input[type="number"] {
  flex: 0 0 auto;
  /* `field-sizing: content` shrinks the input to fit the typed digits
     (modern browsers — Chrome 123+, Safari 17+, Firefox 124+). The
     fixed width values below are the fallback for older browsers; we
     keep min-width small so "months" sits right next to the value. */
  field-sizing: content;
  width: auto;
  min-width: 2ch;
  max-width: 4ch;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  font: inherit;
  /* Hide the native number spinner — it pushed the digits left and
     introduced its own bigger gap before the suffix. Users can still
     type any value 1-600; the field's `type=number` keeps validation. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.input-with-suffix input[type="number"]::-webkit-inner-spin-button,
.input-with-suffix input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-suffix {
  flex: 0 0 auto;
  color: #6b7a96;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  pointer-events: none;
  white-space: nowrap;
}

/* ============================================================
   DIET GEAR — public verify page, modern redesign.
   Self-contained and appended last so it cleanly supersedes the
   earlier brand-derived overrides.
   ============================================================ */

.public-page[data-brand="dietgear"] {
  padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 48px);
  font-family: "Plus Jakarta Sans", "DM Sans", "Segoe UI", sans-serif;
  background: #0a4fb8;
}

/* Authoritative, self-contained layout for the Diet Gear shell. Desktop
   columns (narrow form | wide hero) + width live HERE in the base rule so
   the layout does NOT depend on a separate min-width media query that a
   future edit could delete. The @media (max-width:1280) block below is the
   ONLY override (stacks to 1 column). The global order rule
   (.verify-shell .verify-card{order:1}) puts the form on the left at
   desktop; the stacked block flips the hero on top for mobile. */
.public-page[data-brand="dietgear"] .verify-shell {
  grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 56px);
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 0;
}

/* Hero: glass panel floating on the gradient — no heavy bordered box. */
.public-page[data-brand="dietgear"] .brand-panel {
  min-height: auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  padding: clamp(34px, 4vw, 54px);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 70px -34px rgba(0, 12, 46, 0.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.public-page[data-brand="dietgear"] .public-logo {
  width: min(244px, 66%);
  margin-bottom: 30px;
}

.public-page[data-brand="dietgear"] .brand-panel .eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  color: #ffd21a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.public-page[data-brand="dietgear"] .brand-panel h1 {
  max-width: 16ch;
  color: #ffffff;
  font-size: clamp(32px, 3.9vw, 50px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.public-page[data-brand="dietgear"] .brand-panel .lede {
  max-width: 44ch;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
}

/* Form: elevated white card. */
.public-page[data-brand="dietgear"] .verify-card {
  align-self: stretch;
  display: grid;
  align-content: center;
  border: none;
  border-radius: 26px;
  padding: clamp(30px, 3.4vw, 44px);
  color: #0b1f44;
  background: #ffffff;
  box-shadow:
    0 44px 90px -30px rgba(1, 16, 54, 0.55),
    0 14px 30px -18px rgba(1, 16, 54, 0.45);
}

.public-page[data-brand="dietgear"] .verify-card-head {
  margin-bottom: 24px;
}

.public-page[data-brand="dietgear"] .verify-card-head h2 {
  color: #0b1f44;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.public-page[data-brand="dietgear"] .verify-card-head p {
  margin-top: 8px;
  color: #5b6b8c;
  font-size: 15px;
}

.public-page[data-brand="dietgear"] .verify-card form {
  gap: 17px;
}

.public-page[data-brand="dietgear"] .verify-card label,
.public-page[data-brand="dietgear"] .verify-card .field-label {
  color: #45567a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.public-page[data-brand="dietgear"] .code-input-wrap {
  display: block;
  margin-top: 9px;
}

.public-page[data-brand="dietgear"] .phone-input-wrap {
  display: block;
  margin-top: 9px;
}

/* Inputs: clean, comfortable, clear focus ring. */
.public-page[data-brand="dietgear"] input,
.public-page[data-brand="dietgear"] .verify-card input[name="code"],
.public-page[data-brand="dietgear"] #code {
  height: 60px;
  min-height: 60px;
  border: 1.6px solid #e3eaf6;
  border-radius: 14px;
  color: #0b1f44;
  background: #f5f8fd;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

.public-page[data-brand="dietgear"] .verify-card input[name="code"],
.public-page[data-brand="dietgear"] #code {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.public-page[data-brand="dietgear"] input::placeholder {
  color: #9aabc8;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.public-page[data-brand="dietgear"] input:focus {
  border-color: #1f7ae0;
  box-shadow: 0 0 0 4px rgba(31, 122, 224, 0.16);
  outline: none;
}

.public-page[data-brand="dietgear"] .code-input-wrap .field-icon,
.public-page[data-brand="dietgear"] .phone-input-wrap .field-icon {
  color: #1f7ae0;
}

.public-page[data-brand="dietgear"] .phone-prefix {
  color: #0b1f44;
  font-size: 18px;
  font-weight: 700;
}

.public-page[data-brand="dietgear"] .phone-input-wrap input,
.public-page[data-brand="dietgear"] .phone-input-wrap input#phone {
  padding-left: 92px;
}

.public-page[data-brand="dietgear"] .input-help,
.public-page[data-brand="dietgear"] .verify-card .phone-privacy-note {
  color: #6b7a96;
  font-weight: 600;
}

.public-page[data-brand="dietgear"] .verify-card a {
  color: #1f7ae0;
  font-weight: 700;
}

.public-page[data-brand="dietgear"] .verify-card .phone-privacy-note a {
  white-space: nowrap;
}

/* CTA: confident gradient button with lift. */
.public-page[data-brand="dietgear"] .verify-submit {
  min-height: 60px;
  margin-top: 8px;
  border-radius: 14px;
  color: #0b1f44;
  background: #ffd21a;
  box-shadow: none;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.005em;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.public-page[data-brand="dietgear"] .verify-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.02);
}

.public-page[data-brand="dietgear"] .verify-submit svg,
.public-page[data-brand="dietgear"] .verify-submit .button-arrow {
  width: 24px;
  height: 24px;
  color: #0b1f44;
}

.public-page[data-brand="dietgear"] .support-note {
  margin-top: 18px;
  color: #51627e;
  text-align: center;
}

@media (max-width: 1280px) {
  .public-page[data-brand="dietgear"] .verify-shell {
    grid-template-columns: 1fr;
    gap: 20px;
    width: min(560px, 100%);
  }
  .public-page[data-brand="dietgear"] .brand-panel {
    order: 1;
    text-align: center;
  }
  .public-page[data-brand="dietgear"] .brand-panel .public-logo,
  .public-page[data-brand="dietgear"] .brand-panel h1,
  .public-page[data-brand="dietgear"] .brand-panel .lede {
    margin-inline: auto;
  }
  .public-page[data-brand="dietgear"] .verify-card {
    order: 2;
  }
}

@media (max-width: 720px) {
  .public-page[data-brand="dietgear"] {
    padding: 22px 14px;
  }
  .public-page[data-brand="dietgear"] .brand-panel {
    padding: 30px 24px;
  }
  .public-page[data-brand="dietgear"] .verify-card {
    padding: 28px 22px;
  }
  .public-page[data-brand="dietgear"] .brand-panel h1 {
    font-size: clamp(28px, 8vw, 40px);
  }
}

/* ---------- Generic app dialog (block-reason picker) ----------
   Native <dialog> styled to match the photo manager: rounded card, blurred
   backdrop. Built by promptBlockReason() in admin.js. The <select> inherits
   the global input styling; .secondary / .danger button classes are reused. */
.app-dialog {
  border: 1px solid #dcd3bd;
  padding: 0;
  border-radius: 18px;
  max-width: 420px;
  width: calc(100vw - 40px);
  box-shadow: 0 24px 60px rgba(22, 53, 42, 0.20);
  background: #fffdf9;
  color: #15201d;
  overflow: hidden;
}
.app-dialog::backdrop {
  background: rgba(8, 15, 13, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.app-dialog__form {
  display: grid;
  gap: 16px;
  padding: 24px;
}
.app-dialog__msg {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #16352a;
}
.app-dialog__field {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #5b6b66);
}
.app-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.app-dialog__actions button {
  min-height: 40px;
  padding: 0 18px;
}

/* ============================================================
   PASTE STATION (Station 1 / intake) — Brick 1 of scan-ops.
   Big, glanceable, worker-facing. The status card flashes a strong
   colour so the result is readable across a room. The scan input is
   kept on-screen but visually quiet (the worker scans, doesn't type).
   ============================================================ */
.paste-station {
  display: grid;
  /* Single-column stack: the editorial station screens (paste / returns /
     dispatch) lay their sections out full-width vertically — scan card, then
     the 4-up tally row, then recent scans — matching the prototype. The old
     two-column (scan + 300px photo) grid crammed the full-width tally row into
     a narrow 300px column and clipped its labels. */
  grid-template-columns: 1fr;
  align-items: start;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
/* Left column stacks its own pieces. */
.paste-left {
  display: grid;
  gap: 16px;
  min-width: 0;
}

/* Per-station "Batch lock" picker — scope a scanning run to one batch so
   wrong-batch scans get refused. Quiet bar above the status card. */
.station-batch-lock {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.station-batch-lock span { flex: 0 0 auto; text-transform: uppercase; letter-spacing: 0.04em; }
.station-batch-lock select { flex: 1 1 auto; min-height: 40px; }

/* Returns station "damaged" toggle — a big, obvious switch the worker flips
   ON before scanning a damaged return. Turns red-tinted when armed so it's
   unmistakable that the next scans will be marked Returned+Damaged. */
.return-damaged-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.return-damaged-toggle input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  cursor: pointer;
  accent-color: var(--danger);
}
.return-damaged-toggle:has(input:checked) {
  border-color: var(--danger);
  background: #fdecea;
  color: #8a1c12;
}
/* Stack to one column on narrow screens — photo below the action zone. */
@media (max-width: 860px) {
  .paste-station { grid-template-columns: 1fr; }
}

.paste-status {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 220px;
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  border: 2px solid var(--line);
  background: #fff;
  box-shadow: var(--soft-shadow);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.paste-status__big {
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.paste-status__sub {
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 600;
  opacity: 0.85;
}
.paste-status--idle   { border-color: var(--line);    background: #f6f8fb; color: var(--ink); }
.paste-status--good   { border-color: #1f9d55; background: #e9f9ef; color: #0f5132; }
.paste-status--soft   { border-color: #c79a16; background: #fff8e6; color: #6b5310; }
.paste-status--bad    { border-color: var(--danger); background: #fdecea; color: #8a1c12; }

/* "What you just scanned" panel — product photo on top + ALL details below.
   Daily-worker UX: they confirm the product by its picture (same image the
   customer sees), not by reading. Lives in the station's RIGHT column. The
   photo is a refined 7:10 portrait card with a soft tinted mat so a
   landscape product shot sits framed (not floating on raw white). */
.paste-product {
  display: flex;
  flex-direction: column;
  /* Match the status card's border + radius exactly so the two side-by-side
     cards read as a matched pair, not two different components. */
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}
.paste-product--empty {
  display: grid;
  place-items: center;
  min-height: 220px;
  text-align: center;
  background: #f6f8fb;
  color: var(--muted);
  box-shadow: none;
}
/* The photo: 7:10 portrait frame, full product shown (never cropped) on a
   soft mat. Fills the card width so its edges line up with the detail rows
   below — the alignment that makes the card read as polished. */
.paste-product__photo {
  width: 100%;
  aspect-ratio: 7 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f7fc;
  border: 1px solid var(--line);
}
.paste-product__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* show the FULL product, never cropped */
  display: block;
}
.paste-product__photo--none {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}
.paste-product--good { border-color: rgba(31,157,85,0.55);  background: #f3fbf6; }
.paste-product--soft { border-color: rgba(199,154,22,0.55); background: #fffbf0; }
.paste-product--bad  { border-color: rgba(211,58,44,0.55);  background: #fdf2f1; }
.paste-product--idle { border-color: var(--line); background: #fff; }  /* PA-26 */

/* Detail rows under the photo — label left, value right. ALL unit info. */
.paste-product__details {
  display: grid;
  gap: 2px;
  margin-top: 14px;
}
.paste-detail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.paste-detail:last-child { border-bottom: 0; }
.paste-detail__k {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.paste-detail__v {
  flex: 1 1 auto;
  text-align: right;
  font-size: 15px;
  font-weight: 800;
  color: #1f2b40;
  word-break: break-word;
}
.paste-product__meta { font-size: 14px; font-weight: 600; }
/* Not-found / no-product fallback inside the product card. */
.paste-product__code {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #1f2b40;
  margin-bottom: 6px;
}

/* Scan input — present and focusable (the wedge types into it) but quiet. */
#pasteForm { margin: 0; }
#pasteScanInput {
  width: 100%;
  min-height: 52px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  padding: 0 16px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  color: #556;
  background: #fff;
}
#pasteScanInput:focus {
  border-style: solid;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(15, 124, 128, 0.12);
  outline: none;
}

.paste-tally {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.paste-tally__item {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 12px;
  text-align: center;
  background: #fff;
}
.paste-tally__num {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}
.paste-tally__label {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.paste-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.paste-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.paste-feed__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  background: #fff;
}
.paste-feed__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.paste-feed__code {
  font-weight: 800;
  letter-spacing: 0.04em;
}
.paste-feed__ctx {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.paste-feed__outcome { font-weight: 700; font-size: 13px; flex: 0 0 auto; }
/* Per-row Undo button in the feed — small, quiet, sits at the far right.
   Gives every recent scan its own revert (not just the single last one). */
.paste-feed__item { gap: 10px; }
.paste-feed__undo {
  flex: 0 0 auto;
  min-height: 0;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #44506a;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.paste-feed__undo:hover { background: #f1f4f8; border-color: #c9d3e2; }
.paste-feed__undo:disabled { opacity: 0.5; cursor: default; }
.paste-feed__item--pasted        { border-color: rgba(31,157,85,0.4);  background: #f3fbf6; }
.paste-feed__item--pasted .paste-feed__outcome        { color: #1f9d55; }
.paste-feed__item--already_pasted { border-color: rgba(199,154,22,0.4); background: #fffbf0; }
.paste-feed__item--already_pasted .paste-feed__outcome { color: #a87f12; }
.paste-feed__item--unpasted       { border-color: rgba(120,120,130,0.4); background: #f4f5f7; }
.paste-feed__item--unpasted .paste-feed__outcome       { color: #5b6470; }
.paste-feed__item--damaged        { border-color: rgba(199,154,22,0.45); background: #fffaef; }
.paste-feed__item--damaged .paste-feed__outcome        { color: #a87f12; }
.paste-feed__item--already_damaged { border-color: rgba(199,154,22,0.4); background: #fffbf0; }
.paste-feed__item--already_damaged .paste-feed__outcome { color: #a87f12; }

/* Undo-last button — present but quiet; clearly disabled when nothing to undo. */
#pasteUndoLast {
  justify-self: center;
  min-width: 180px;
}
#pasteUndoLast:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.paste-feed__item--not_found,
.paste-feed__item--blocked,
.paste-feed__item--invalid,
.paste-feed__item--error          { border-color: rgba(211,58,44,0.4);  background: #fdf2f1; }
.paste-feed__item--not_found .paste-feed__outcome,
.paste-feed__item--blocked .paste-feed__outcome,
.paste-feed__item--invalid .paste-feed__outcome,
.paste-feed__item--error .paste-feed__outcome          { color: var(--danger); }

/* ============================================================
   STOCK view — live sellable-units snapshot.
   ============================================================ */
.stock-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.stock-stat {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  background: #fff;
}
/* Tabular figures so stacked/aligned counts line up digit-for-digit instead
   of jittering as values change. */
.stock-stat__num, .today-card__num, .expiry-chip__num, .paste-tally__num {
  font-variant-numeric: tabular-nums;
}
.stock-stat__num { font-size: 30px; font-weight: 900; line-height: 1; }
.stock-stat__label { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
/* Sellable is the hero — green and emphasised. */
.stock-stat--sellable { border-color: rgba(31,157,85,0.5); background: #f3fbf6; }
.stock-stat--sellable .stock-stat__num { color: #1f9d55; }
.stock-stat--shipped .stock-stat__num { color: #1f6fd6; }
.stock-stat--verified .stock-stat__num { color: #0f7c80; }
.stock-stat--returned .stock-stat__num { color: #a87f12; }
.stock-stat--muted .stock-stat__num { color: #6b7a96; }

.stock-asof { margin: 0 0 16px; font-size: 12px; font-weight: 600; color: var(--muted); }

/* Expiry (FEFO) — summary chips + aging-stock table inside the Stock view. */
.expiry-summary { margin: 8px 0 4px; }
.expiry-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.expiry-chip {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
}
.expiry-chip__num { font-size: 26px; font-weight: 900; line-height: 1; }
.expiry-chip__label { margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--muted); }
.expiry-chip--expired { border-color: rgba(211,58,44,0.5); background: #fdf2f1; }
.expiry-chip--expired .expiry-chip__num { color: var(--danger); }
.expiry-chip--d30 { border-color: rgba(224,120,30,0.5); background: #fff5ec; }
.expiry-chip--d30 .expiry-chip__num { color: #d9730a; }
.expiry-chip--d60 { border-color: rgba(199,154,22,0.45); background: #fffaef; }
.expiry-chip--d60 .expiry-chip__num { color: #a87f12; }
.expiry-chip--d90 { border-color: var(--line); background: #fff; }
.expiry-chip--d90 .expiry-chip__num { color: #5b6470; }
.expiry-table { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 14px; }
.expiry-table th { text-align: left; padding: 8px 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.expiry-table td { padding: 9px 10px; border-bottom: 1px solid rgba(0,0,0,0.05); vertical-align: top; }
.expiry-row--expired td:first-child { color: var(--danger); font-weight: 800; }
.expiry-row--d30 td:first-child { color: #d9730a; font-weight: 800; }
.expiry-empty { padding: 16px; color: var(--muted); font-weight: 600; margin-bottom: 18px; }

.trash-intro { margin: 0 0 14px; font-size: 13px; color: var(--muted); max-width: 70ch; line-height: 1.5; }

/* Lookup ("What is this?") view */
.lookup-form { display: flex; gap: 10px; margin-bottom: 18px; max-width: 560px; }
.lookup-form input { flex: 1 1 auto; min-height: 48px; font-size: 18px; letter-spacing: 0.04em; }
.lookup-form button { min-height: 48px; padding: 0 22px; }
.lookup-empty, .lookup-notfound { padding: 20px; color: var(--muted); }
.lookup-notfound__code { font-size: 22px; font-weight: 800; color: #1f2b40; margin-bottom: 6px; letter-spacing: 0.06em; }
.lookup-card { display: flex; gap: 20px; border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: #fff; box-shadow: var(--soft-shadow); }
.lookup-photo { width: 120px; height: 120px; flex: 0 0 auto; border-radius: 12px; object-fit: contain; border: 1px solid var(--line); background: #fff; }
.lookup-photo--none { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.lookup-body { flex: 1 1 auto; min-width: 0; }
.lookup-code { font-size: 26px; font-weight: 900; letter-spacing: 0.06em; }
.lookup-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.lookup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 18px; }
.lookup-detail { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 14px; }
.lookup-detail span { color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.lookup-detail strong { text-align: right; color: #1f2b40; }
.lookup-events-head { margin: 22px 0 8px; }
.lookup-events { width: 100%; border-collapse: collapse; font-size: 14px; }
.lookup-events th { text-align: left; padding: 8px 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.lookup-events td { padding: 8px 10px; border-bottom: 1px solid rgba(0,0,0,0.05); }

/* Dashboard "Today" pulse cards — bigger, more prominent than the stat rows
   below, since this is the at-a-glance daily activity. */
.today-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 4px 0 26px;
}
.today-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  background: #fff;
}
.today-card__num { font-size: 38px; font-weight: 900; line-height: 1; }
.today-card__label { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.today-card--pasted   { border-color: rgba(15,124,128,0.45); background: #eefcfb; }
.today-card--pasted .today-card__num   { color: #0f7c80; }
.today-card--shipped  { border-color: rgba(31,111,214,0.45); background: #eef4fe; }
.today-card--shipped .today-card__num  { color: #1f6fd6; }
.today-card--returned { border-color: rgba(199,154,22,0.5); background: #fffaef; }
.today-card--returned .today-card__num { color: #a87f12; }
.today-card--verified { border-color: rgba(31,157,85,0.5); background: #f3fbf6; }
.today-card--verified .today-card__num { color: #1f9d55; }
.today-card--muted { border-color: var(--line); background: #f6f8fb; }
.today-card--muted .today-card__num { color: #6b7a96; }

.stock-prod {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  margin-bottom: 14px;
}
.stock-prod__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.stock-prod__photo {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: contain;
  background: #f1f4f8;
  border: 1px solid var(--line);
}
.stock-prod__photo--none {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
}
.stock-prod__title { flex: 1 1 auto; min-width: 0; }
.stock-prod__brand { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.stock-prod__name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.stock-prod__sellable { flex: 0 0 auto; text-align: right; }
.stock-prod__sellable-num { font-size: 30px; font-weight: 900; line-height: 1; color: #1f9d55; }
.stock-prod__sellable-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

.stock-batches { width: 100%; border-collapse: collapse; font-size: 13px; }
.stock-batches th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}
.stock-batches td { padding: 8px 10px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.stock-batches tr:last-child td { border-bottom: 0; }
.stock-num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.stock-num--sellable { color: #1f9d55; font-weight: 900; }
.stock-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.stock-tag--bad { background: #fdecea; color: #b3261e; }
.stock-tag--warn { background: #fff4d6; color: #8a6100; }
.stock-empty { padding: 40px; text-align: center; color: var(--muted); font-weight: 600; }

/* ============================================================
   ORDERS INBOX + SKU MAP + PACK STATION (Idea 8 — Amazon)
   ============================================================ */
.orders-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.orders-head__left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.orders-sync-status { color: var(--muted); font-size: 13px; font-weight: 600; }
.orders-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.orders-chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; border: 1px solid var(--line); }
.orders-chip--pending { background: var(--gold-tint-medium); color: var(--gold); border-color: var(--gold-edge-soft); }
.orders-chip--packing { background: #e2eeff; color: #1c4f9c; border-color: rgba(28,79,156,0.25); }
.orders-chip--packed  { background: rgba(23,107,82,0.12); color: var(--leaf); border-color: rgba(23,107,82,0.25); }
.orders-alert { background: #fff4d6; border: 1px solid var(--gold-edge-medium); color: #8a6100; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-weight: 700; font-size: 14px; }
.orders-toolbar { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.orders-toolbar label { font-weight: 700; font-size: 13px; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
/* Direct-ship / Pack station header — title + "← Orders" back, one outbound place. */
.station-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.station-head__title { margin: 0; font-size: 18px; }
.station-head__sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); max-width: 60ch; }
.link-btn { background: none; border: 0; color: var(--teal); font-weight: 800; cursor: pointer; padding: 0; text-decoration: underline; font-size: inherit; }
.order-warn { color: var(--danger); font-weight: 700; }
#ordersList code, #skuUnmatchedList code, #skuMapList code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; font-size: 12.5px; }
.pack-badge { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: capitalize; }
.pack-badge--pending { background: var(--gold-tint-strong); color: var(--gold); }
.pack-badge--packing { background: #e2eeff; color: #1c4f9c; }
.pack-badge--packed  { background: rgba(23,107,82,0.14); color: var(--leaf); }

/* SKU map tables */
#skuUnmatchedList .sku-title { color: var(--muted); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#skuUnmatchedList .sku-prod { max-width: 240px; }
#skuUnmatchedList .sku-qty { width: 64px; }

/* Pack station */
.pack-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pack-head h3 { margin: 0; font-size: 18px; }
.pack-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.pack-tile { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 14px; padding: 14px; text-align: center; }
.pack-tile__photo { height: 150px; display: flex; align-items: center; justify-content: center; background: var(--panel-2); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.pack-tile__photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pack-tile__noimg { color: var(--muted); font-weight: 700; font-size: 13px; }
.pack-tile__name { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.pack-tile__count { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.pack-tile__count b { color: var(--ink); font-size: 20px; }
.pack-cells { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pack-cell { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--gold-edge-medium); background: var(--gold-tint-soft); }
.pack-cell--done { border-color: var(--leaf); background: var(--leaf); }
.pack-note { color: var(--muted); font-size: 13px; margin-top: 16px; font-style: italic; }

/* Pack station — scan-gate states */
.pack-tile { position: relative; transition: border-color .15s; }
.pack-tile--complete { border-color: var(--leaf); box-shadow: 0 0 0 2px rgba(23,107,82,0.18); }
.pack-tile--complete::after { content: "\2713"; position: absolute; top: 8px; right: 10px; color: #fff; background: var(--leaf); width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; }
.pack-tile__done { color: var(--leaf); font-weight: 900; }
#packScanForm { margin: 0 0 18px; }
#packScanInput { width: 100%; font-size: 17px; padding: 12px 14px; border: 2px solid var(--line-strong); border-radius: 10px; }
#packScanInput:focus { border-color: var(--leaf); outline: none; }
#packScanInput:disabled { background: var(--panel-2); color: var(--muted); cursor: default; }
/* "Pack next order" appears under Undo once an order is complete. */
.pack-next { width: 100%; margin-top: 10px; }


/* ============================================================
   EDITORIAL THEME PORT — appended overrides (safe / last-wins).
   Remove this whole block to revert to the exact prior look.
   ============================================================ */
:root{
  --paper:#f6f1e7;
  --panel:#fffdf9;
  --panel-2:#f3ede1;
  --line:#e6dfce;
  --line-strong:#dcd3bd;
  --leaf:#1f4a3a;
  --leaf-dark:#16352a;
  --gold:#a87b1f;
  --rust:#a4502f;
  --surface-band:#f3ead0;
  --surface-band-head:#f1ece0;
  --font-sans:"Inter","DM Sans","Aptos","Segoe UI",sans-serif;
  --font-display:"Fraunces",Georgia,serif;
  --font-serif:"Newsreader",Georgia,serif;
}
body{background:#f6f1e7;}
.sidebar{background:var(--leaf-dark);}
h1,h2,h3,
.dashboard-section__title,
.station-head__title,
.paste-status__big{
  font-family:var(--font-display);
  font-weight:430;
  letter-spacing:-.01em;
}

/* --- Dashboard: editorial component port (screen 1) --- */
.today-card{background:var(--panel);box-shadow:var(--shadow);position:relative;overflow:hidden;}
.today-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--leaf);}
.today-card--shipped::before{background:var(--gold);}
.today-card--returned::before{background:var(--rust);}
.today-card--muted::before{background:var(--line-strong);}
.today-card__num{font-family:var(--font-display)!important;font-weight:430;font-size:42px;line-height:1;color:var(--ink)!important;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.today-card__label{color:var(--muted);font-weight:600;font-size:12px;}
.stat strong{font-family:var(--font-display)!important;font-weight:430;font-size:30px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.stat span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;}

/* ============================================================
   R3 — public verify page. BESPOKE world-class redesign.
   All-dark premium aesthetic: glowing charcoal stage, coral accent,
   editorial serif headlines, dark glass verify card. Self-contained,
   appended last, scoped entirely to [data-brand="r3"] so Grella /
   Diet Gear are untouched.
   ============================================================ */
.public-page[data-brand="r3"] {
  --r3-bg: #0f1014;
  --r3-coral: #ff5a3c;
  --r3-coral-soft: #ff8064;
  --r3-coral-deep: #e8431f;
  --r3-text: #f4f1ee;
  --r3-muted: rgba(244, 241, 238, 0.6);
  --r3-muted-2: rgba(244, 241, 238, 0.4);
  --r3-line: rgba(255, 255, 255, 0.09);
  --r3-line-2: rgba(255, 255, 255, 0.15);
  --r3-surface: rgba(255, 255, 255, 0.045);
  --public-accent: #ff5a3c;
  --public-accent-ink: #ffffff;
  display: block;
  min-height: 100vh;
  padding: 0;
  color: var(--r3-text);
  font-family: "Plus Jakarta Sans", "DM Sans", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1100px 560px at 82% -12%, rgba(255, 90, 60, 0.18), transparent 60%),
    radial-gradient(820px 520px at -8% 112%, rgba(255, 90, 60, 0.07), transparent 55%),
    linear-gradient(180deg, #121319 0%, #0f1014 100%);
  background-attachment: fixed;
}

/* Only the Grella ad-copy lines stay hidden; the structural sections
   (nav, trust chips, how-it-works, trust badges) are brought back. */
.public-page[data-brand="r3"] .hero-short,
.public-page[data-brand="r3"] .hero-highlight { display: none !important; }

/* ---------- Top bar ---------- */
.public-page[data-brand="r3"] .grella-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 74px;
  gap: 24px;
  padding: 0 clamp(20px, 5vw, 64px);
  background: rgba(15, 16, 20, 0.72);
  border-bottom: 1px solid var(--r3-line);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}
.public-page[data-brand="r3"] .grella-top-logo { width: 92px; }
.public-page[data-brand="r3"] .grella-nav a {
  color: var(--r3-muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 0.16s;
}
.public-page[data-brand="r3"] .grella-nav a:hover { color: var(--r3-text); }
.public-page[data-brand="r3"] .grella-help {
  color: var(--r3-text);
  font-size: 13.5px;
  font-weight: 700;
  border: 1px solid var(--r3-line-2);
  border-radius: 999px;
  padding: 0 18px;
  min-height: 38px;
  transition: border-color 0.16s, background 0.16s;
}
.public-page[data-brand="r3"] .grella-help:hover { border-color: var(--r3-coral); background: rgba(255, 90, 60, 0.1); }
.public-page[data-brand="r3"] .grella-help::before { border-color: var(--r3-coral); color: var(--r3-coral); }

/* ---------- Shell layout ---------- */
.public-page[data-brand="r3"] .verify-shell {
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.72fr);
  gap: clamp(40px, 5.5vw, 88px);
  width: min(1240px, calc(100% - 8vw));
  margin: 0 auto;
  padding: clamp(44px, 6vw, 92px) 0 clamp(36px, 4vw, 60px);
  align-items: start;
}

/* ---------- Hero (left column) ---------- */
.public-page[data-brand="r3"] .brand-panel {
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  display: block;
}
.public-page[data-brand="r3"] .brand-hero { max-width: 640px; }
.public-page[data-brand="r3"] .public-logo { width: min(184px, 56vw); margin-bottom: 30px; }
.public-page[data-brand="r3"] .brand-panel .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 90, 60, 0.32);
  border-radius: 999px;
  background: rgba(255, 90, 60, 0.08);
  color: var(--r3-coral-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.public-page[data-brand="r3"] .brand-panel .eyebrow svg { width: 15px; height: 15px; }
.public-page[data-brand="r3"] .brand-panel h1 {
  margin: 0;
  max-width: 14ch;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(40px, 5.4vw, 66px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-transform: none;
}
.public-page[data-brand="r3"] .brand-panel h1 span { color: var(--r3-coral); }
.public-page[data-brand="r3"] .brand-panel .lede {
  max-width: 46ch;
  margin: 22px 0 0;
  color: var(--r3-muted);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.66;
}

/* Trust chips under the hero */
.public-page[data-brand="r3"] .grella-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.public-page[data-brand="r3"] .grella-proof span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid var(--r3-line);
  border-radius: 12px;
  background: var(--r3-surface);
  color: var(--r3-text);
  font-size: 13px;
  font-weight: 600;
}
.public-page[data-brand="r3"] .grella-proof span svg { width: 17px; height: 17px; color: var(--r3-coral); flex: none; }

/* ---------- How it works ---------- */
.public-page[data-brand="r3"] .grella-steps { margin-top: 48px; max-width: 640px; }
.public-page[data-brand="r3"] .grella-steps .eyebrow {
  display: block;
  margin-bottom: 18px;
  color: var(--r3-muted-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.public-page[data-brand="r3"] .grella-steps > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.public-page[data-brand="r3"] .grella-steps article {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;
  border: 1px solid var(--r3-line);
  border-radius: 16px;
  background: var(--r3-surface);
}
.public-page[data-brand="r3"] .grella-steps article strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 90, 60, 0.14);
  color: var(--r3-coral);
  font-size: 15px;
  font-weight: 800;
}
.public-page[data-brand="r3"] .grella-steps article span { display: flex; flex-direction: column; gap: 5px; }
.public-page[data-brand="r3"] .grella-steps article b { color: var(--r3-text); font-size: 15px; font-weight: 700; }
.public-page[data-brand="r3"] .grella-steps article small { color: var(--r3-muted); font-size: 13px; line-height: 1.5; }

/* ---------- Verify card (dark glass, sticky) ---------- */
.public-page[data-brand="r3"] .verify-card {
  position: sticky;
  top: 98px;
  align-self: start;
  display: grid;
  align-content: start;
  border: 1px solid var(--r3-line-2);
  border-radius: 26px;
  padding: clamp(28px, 3vw, 40px);
  color: var(--r3-text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.public-page[data-brand="r3"] .verify-card-head { margin-bottom: 22px; }
.public-page[data-brand="r3"] .verify-card-head h2 {
  color: #ffffff;
  font-size: clamp(22px, 2.4vw, 27px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.public-page[data-brand="r3"] .verify-card-head p { margin-top: 7px; color: var(--r3-muted); font-size: 14.5px; }
.public-page[data-brand="r3"] .verify-card form { gap: 16px; }
.public-page[data-brand="r3"] .verify-card label,
.public-page[data-brand="r3"] .verify-card .field-label {
  color: var(--r3-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.public-page[data-brand="r3"] .code-input-wrap,
.public-page[data-brand="r3"] .phone-input-wrap { position: relative; display: block; margin-top: 9px; }
.public-page[data-brand="r3"] input,
.public-page[data-brand="r3"] .verify-card input[name="code"],
.public-page[data-brand="r3"] #code {
  height: 58px;
  min-height: 58px;
  width: 100%;
  border: 1.5px solid var(--r3-line-2);
  border-radius: 14px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
  font-size: 17px;
  font-weight: 600;
}
.public-page[data-brand="r3"] .verify-card input[name="code"],
.public-page[data-brand="r3"] #code { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.public-page[data-brand="r3"] input::placeholder { color: var(--r3-muted-2); font-weight: 500; letter-spacing: 0; text-transform: none; }
.public-page[data-brand="r3"] input:focus {
  border-color: var(--r3-coral);
  background: rgba(255, 90, 60, 0.06);
  box-shadow: 0 0 0 4px rgba(255, 90, 60, 0.18);
  outline: none;
}
.public-page[data-brand="r3"] .code-input-wrap .field-icon,
.public-page[data-brand="r3"] .phone-input-wrap .field-icon {
  position: absolute; z-index: 2; left: 16px; top: 50%;
  width: 20px; height: 20px; color: var(--r3-coral);
  transform: translateY(-50%); pointer-events: none;
}
.public-page[data-brand="r3"] .code-input-wrap input,
.public-page[data-brand="r3"] .phone-input-wrap input { padding-left: 46px; }
.public-page[data-brand="r3"] .phone-prefix {
  position: absolute; z-index: 2; left: 46px; top: 50%;
  color: var(--r3-text); font-size: 14px; font-weight: 700;
  transform: translateY(-50%); pointer-events: none;
}
.public-page[data-brand="r3"] .phone-input-wrap input { padding-left: 82px; }
.public-page[data-brand="r3"] .input-help,
.public-page[data-brand="r3"] .verify-card .phone-privacy-note { color: var(--r3-muted-2); font-weight: 500; font-size: 12.5px; }
.public-page[data-brand="r3"] .verify-card a { color: var(--r3-coral-soft); font-weight: 600; }

/* CTA */
.public-page[data-brand="r3"] .verify-submit {
  min-height: 60px;
  margin-top: 6px;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(180deg, var(--r3-coral), var(--r3-coral-deep));
  box-shadow: 0 14px 34px -12px rgba(255, 90, 60, 0.6);
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: 0.005em;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.public-page[data-brand="r3"] .verify-submit:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -12px rgba(255, 90, 60, 0.7); filter: brightness(1.04); }
.public-page[data-brand="r3"] .verify-submit svg,
.public-page[data-brand="r3"] .verify-submit .button-arrow { width: 22px; height: 22px; color: #ffffff; }

.public-page[data-brand="r3"] .grella-secure-note {
  display: flex; align-items: center; gap: 9px;
  margin-top: 16px; color: var(--r3-muted-2); font-size: 12.5px; font-weight: 500;
}
.public-page[data-brand="r3"] .grella-secure-note svg { width: 16px; height: 16px; color: var(--r3-coral); flex: none; }
.public-page[data-brand="r3"] .support-note { margin-top: 14px; color: var(--r3-muted-2); font-size: 12.5px; text-align: left; }

/* ---------- Result states (on the dark card) ---------- */
.public-page[data-brand="r3"] .result { border-radius: 16px; }
.public-page[data-brand="r3"] .result.success { border-color: rgba(54, 199, 120, 0.45); background: rgba(54, 199, 120, 0.12); color: var(--r3-text); }
.public-page[data-brand="r3"] .result.warning { border-color: rgba(255, 160, 60, 0.5); background: rgba(255, 160, 60, 0.12); color: var(--r3-text); }
.public-page[data-brand="r3"] .result.error { border-color: rgba(255, 90, 60, 0.5); background: rgba(255, 90, 60, 0.12); color: var(--r3-text); }
.public-page[data-brand="r3"] .result-eyebrow { color: #45e08a; }
.public-page[data-brand="r3"] .result.error .result-eyebrow,
.public-page[data-brand="r3"] .result.warning .result-eyebrow { color: var(--r3-coral-soft); }
.public-page[data-brand="r3"] .result-title { color: #ffffff; }
.public-page[data-brand="r3"] .result-batch-story,
.public-page[data-brand="r3"] .result-thanks,
.public-page[data-brand="r3"] .result-share-prompt { color: var(--r3-muted); }
.public-page[data-brand="r3"] .result-batch-story strong { color: var(--r3-text); }
.public-page[data-brand="r3"] .result-share-btn--copy {
  background: rgba(255, 255, 255, 0.06); color: var(--r3-text); border-color: var(--r3-line-2);
}
.public-page[data-brand="r3"] .result-share-btn--copy:hover { background: rgba(255, 255, 255, 0.1); }
.public-page[data-brand="r3"] .result-reset {
  min-height: 38px; display: inline-flex; align-items: center;
  border: 1px solid var(--r3-line-2); border-radius: 10px; padding: 0 14px;
  color: var(--r3-text); background: transparent; font-weight: 700; cursor: pointer;
}
.public-page[data-brand="r3"] .result-reset:hover { border-color: var(--r3-coral); color: var(--r3-coral-soft); }
.public-page[data-brand="r3"] .result-link { color: var(--public-accent-ink); background: var(--r3-coral); }

/* ---------- Trust footer ---------- */
.public-page[data-brand="r3"] .grella-trustbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: min(1240px, calc(100% - 8vw));
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) 0 clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--r3-line);
}
.public-page[data-brand="r3"] .grella-trustbar span {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px;
  border: 1px solid var(--r3-line);
  border-radius: 16px;
  background: var(--r3-surface);
}
.public-page[data-brand="r3"] .grella-trustbar svg { width: 24px; height: 24px; color: var(--r3-coral); }
.public-page[data-brand="r3"] .grella-trustbar strong { color: var(--r3-text); font-size: 14.5px; font-weight: 700; margin-top: 4px; }
.public-page[data-brand="r3"] .grella-trustbar small { color: var(--r3-muted); font-size: 12.5px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .public-page[data-brand="r3"] .verify-shell { grid-template-columns: 1fr; gap: 36px; width: min(620px, calc(100% - 8vw)); }
  .public-page[data-brand="r3"] .verify-card { position: static; order: -1; }
  .public-page[data-brand="r3"] .grella-steps > div { grid-template-columns: 1fr; }
  .public-page[data-brand="r3"] .grella-trustbar { grid-template-columns: repeat(2, 1fr); width: min(620px, calc(100% - 8vw)); }
}
@media (max-width: 720px) {
  .public-page[data-brand="r3"] .grella-topbar { min-height: 62px; }
  .public-page[data-brand="r3"] .grella-nav { display: none; }
  .public-page[data-brand="r3"] .brand-panel h1 { font-size: clamp(34px, 9vw, 46px); }
  .public-page[data-brand="r3"] .grella-trustbar { grid-template-columns: 1fr; }
}

/* R3 — corrections after first live render (override leftover base styling) */
.public-page[data-brand="r3"] .grella-proof span::before { display: none; }
.public-page[data-brand="r3"] .grella-steps {
  border: 0; background: none; padding: 0; width: auto; max-width: none; margin: 44px 0 0;
}
.public-page[data-brand="r3"] .grella-steps > div { grid-template-columns: 1fr; gap: 12px; }
.public-page[data-brand="r3"] .grella-steps article { flex-direction: row; align-items: flex-start; gap: 14px; min-height: 0; }
.public-page[data-brand="r3"] .grella-trustbar { background: transparent; }
.public-page[data-brand="r3"] .grella-steps .eyebrow { background: none; border: 0; padding: 0; }