/* === _fonts.css === */
/* Self-hosted fonts (GDPR — no CDN). WOFF2 + swap. */

@font-face {
  font-family: 'Satoshi';
  src: url('/static/fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/static/fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/static/fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* === design-system.css === */
/* Design system foundations — color tokens, type, components */

:root {
  color-scheme: light;

  /* primary — Last Z hazmat lime */
  --p-50:#F7FEE7; --p-100:#ECFCCB; --p-200:#D9F99D; --p-300:#BEF264;
  --p-400:#A3E635; --p-500:#84CC16; --p-600:#65A30D; --p-700:#4D7C0F;
  --p-800:#3F6212; --p-900:#365314; --p-950:#1A2E05;

  /* neutral surface scale — light theme */
  --sf-canvas:#F7F8FA;          /* page bg */
  --sf-surface:#FFFFFF;          /* cards */
  --sf-surface-2:#F1F3F6;        /* inset / table head */
  --sf-border:#E4E7EC;
  --sf-border-strong:#CDD2DA;
  --sf-text:#0F172A;             /* slate-900 */
  --sf-text-2:#475569;           /* slate-600 */
  --sf-text-3:#94A3B8;           /* slate-400 */
  --sf-text-on-primary:#FFFFFF;

  /* status */
  --st-success:#16A34A; --st-success-bg:#DCFCE7; --st-success-border:#86EFAC;
  --st-danger:#DC2626;  --st-danger-bg:#FEE2E2;  --st-danger-border:#FCA5A5;
  --st-warn:#D97706;    --st-warn-bg:#FEF3C7;    --st-warn-border:#FCD34D;
  --st-info:#2563EB;    --st-info-bg:#DBEAFE;    --st-info-border:#93C5FD;
  --st-pending:#7C3AED; --st-pending-bg:#EDE9FE; --st-pending-border:#C4B5FD;

  /* type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* scale */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --sh-sm: 0 1px 2px rgba(15,23,42,0.06);
  --sh-md: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
  --sh-lg: 0 10px 30px -10px rgba(15,23,42,0.18), 0 2px 6px rgba(15,23,42,0.06);
  --sh-focus: 0 0 0 3px rgba(34,197,94,0.30);
}

.dark {
  --sf-canvas:#0B1220;
  --sf-surface:#111827;
  --sf-surface-2:#1F2937;
  --sf-border:#1F2937;
  --sf-border-strong:#374151;
  --sf-text:#F1F5F9;
  --sf-text-2:#CBD5E1;
  --sf-text-3:#94A3B8;

  --st-success-bg:rgba(22,163,74,0.15);  --st-success-border:rgba(22,163,74,0.4);
  --st-danger-bg:rgba(220,38,38,0.15);   --st-danger-border:rgba(220,38,38,0.4);
  --st-warn-bg:rgba(217,119,6,0.15);     --st-warn-border:rgba(217,119,6,0.4);
  --st-info-bg:rgba(37,99,235,0.15);     --st-info-border:rgba(37,99,235,0.4);
  --st-pending-bg:rgba(124,58,237,0.15); --st-pending-border:rgba(124,58,237,0.4);

  /* lift ~2 shades — default 600-tier is muted on deep dark canvas */
  --st-success:#4ADE80;
  --st-danger:#F87171;
  --st-warn:#FBBF24;
  --st-info:#60A5FA;
}

/* dark canvas — gunmetal/concrete override */
.dark {
  color-scheme: dark;
  --sf-canvas:#0A0E0A;
  --sf-surface:#121712;
  --sf-surface-2:#1B221B;
  --sf-border:#1F2A1F;
  --sf-border-strong:#374237;
}
:root { --sh-focus: 0 0 0 3px rgba(132,204,22,0.30); }

/* UA paints <dialog> black-on-white in dark mode unless we override —
   per-dialog inline backgrounds still win via specificity. */
dialog {
  color: var(--sf-text);
  background: var(--sf-surface);
}

/* ─── Base ─── */
.ds-page {
  font-family: var(--font-sans);
  background: var(--sf-canvas);
  color: var(--sf-text);
  -webkit-font-smoothing: antialiased;
  /* flex col + min-height: 100vh for sticky footer (lz-site-footer uses margin-block-start: auto) */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* RTL */
[dir="rtl"] .ds-flip { transform: scaleX(-1); }

/* ─── Type ─── */
.t-display { font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; }
.t-h1      { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.t-h2      { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
.t-h3      { font-size: 17px; line-height: 1.35; font-weight: 600; }
.t-body    { font-size: 14px; line-height: 1.55; }
.t-sm      { font-size: 13px; line-height: 1.5; color: var(--sf-text-2); }
.t-xs      { font-size: 11.5px; line-height: 1.4; color: var(--sf-text-3); letter-spacing: 0.02em; }
.t-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-text-3); }
.t-mono    { font-family: var(--font-mono); }
.t-num     { font-variant-numeric: tabular-nums; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-md);
  font: 500 14px/1 var(--font-sans);
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
  white-space: nowrap;
  box-sizing: border-box; /* needed so min-height in lastz.css (WCAG 2.5.5) doesn't inflate height */
  text-decoration: none;  /* used on <a> too — suppress underline */
}
.btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.btn:active { transform: translateY(0.5px); }
/* p-700 on white = 4.99:1 (AA); p-600 was 3.08:1 — fails normal-text threshold */
.btn-primary   { background: var(--p-700); color: #fff; }
.btn-primary:hover { background: var(--p-800); }
.btn-secondary { background: var(--sf-surface); color: var(--sf-text); border-color: var(--sf-border-strong); }
.btn-secondary:hover { background: var(--sf-surface-2); }
.btn-ghost     { background: transparent; color: var(--sf-text-2); }
.btn-ghost:hover { background: var(--sf-surface-2); color: var(--sf-text); }
.btn-danger    { background: var(--st-danger); color: #fff; }
.btn-danger:hover { filter: brightness(0.95); }
.btn-sm  { padding: 6px 11px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn-lg  { padding: 12px 22px; font-size: 15px; }

/* ─── Inputs ─── */
.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--sf-text-2); margin-bottom: 6px; }
.field-input, .field-select, .field-textarea,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input:not([type]),
textarea,
select {
  box-sizing: border-box;
  padding: 8px 12px; border-radius: var(--r-md);
  background: var(--sf-surface); border: 1px solid var(--sf-border-strong);
  color: var(--sf-text); font: 400 14px/1.4 var(--font-sans);
  transition: border-color .15s, box-shadow .15s;
}
.field-input, .field-select, .field-textarea { width: 100%; }
.field-input:focus, .field-select:focus, .field-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
  outline: none; border-color: var(--p-500); box-shadow: var(--sh-focus);
}
input::placeholder, textarea::placeholder { color: var(--sf-text-3); opacity: 0.85; }
input:hover:not(:focus), textarea:hover:not(:focus), select:hover:not(:focus) {
  border-color: var(--sf-text-3);
}
.field-help { font-size: 12px; color: var(--sf-text-3); margin-top: 6px; }
.field-error { font-size: 12px; color: var(--st-danger); margin-top: 6px; }

/* ─── Cards ─── */
.card {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.card-pad { padding: 20px; }
.card-pad-lg { padding: 28px; }
.card-elev { box-shadow: var(--sh-md); }

/* ─── Status pills ─── */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: var(--r-pill);
  font: 600 11px/1.4 var(--font-sans);
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid transparent;
}
.pill::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.pill-success { background: var(--st-success-bg); color: var(--st-success); border-color: var(--st-success-border); }
.pill-danger  { background: var(--st-danger-bg);  color: var(--st-danger);  border-color: var(--st-danger-border); }
.pill-warn    { background: var(--st-warn-bg);    color: var(--st-warn);    border-color: var(--st-warn-border); }
.pill-info    { background: var(--st-info-bg);    color: var(--st-info);    border-color: var(--st-info-border); }
.pill-pending { background: var(--st-pending-bg); color: var(--st-pending); border-color: var(--st-pending-border); }
.pill-muted   { background: var(--sf-surface-2);  color: var(--sf-text-2);  border-color: var(--sf-border-strong); }
.pill-muted::before { background: var(--sf-text-3); }
.pill-unlinked { background: var(--st-warn-bg); color: var(--st-warn); border-color: var(--st-warn-border); }

/* ─── Table ─── */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl thead th {
  text-align: start; padding: 11px 14px;
  background: var(--sf-surface-2);
  font-weight: 600; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sf-text-2);
  border-bottom: 1px solid var(--sf-border);
}
.tbl tbody td { padding: 12px 14px; border-bottom: 1px solid var(--sf-border); color: var(--sf-text); }
.tbl tbody tr:hover td { background: var(--sf-surface-2); }
.tbl tbody tr:last-child td { border-bottom: 0; }

/* ─── Empty state ─── */
.empty {
  padding: 48px 24px; text-align: center;
  border: 1px dashed var(--sf-border-strong);
  border-radius: var(--r-lg);
  background: var(--sf-surface);
}
.empty-icon {
  width: 48px; height: 48px; margin: 0 auto 12px;
  border-radius: 12px;
  background: var(--sf-surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--sf-text-3); font-size: 22px;
}

/* ─── Nav (header) ─── */
.nav {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 24px;
  background: var(--sf-surface);
  border-bottom: 1px solid var(--sf-border);
}
.nav a { color: var(--sf-text-2); font-size: 14px; font-weight: 500; text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--sf-text); }
.nav a.active { color: var(--p-600); border-bottom-color: var(--p-600); }

/* ─── Toast / Alert ─── */
.alert {
  display: flex; gap: 12px; padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid;
  font-size: 13.5px;
}
.alert-success { background: var(--st-success-bg); border-color: var(--st-success-border); color: var(--st-success); }
.alert-danger  { background: var(--st-danger-bg);  border-color: var(--st-danger-border);  color: var(--st-danger); }
.alert-warn    { background: var(--st-warn-bg);    border-color: var(--st-warn-border);    color: var(--st-warn); }
.alert-info    { background: var(--st-info-bg);    border-color: var(--st-info-border);    color: var(--st-info); }

/* light mode: pale tint bg + 600-tier text = 2.86-4.24:1, fails AA body-text.
   Override to 900-tier. Dark mode untouched (already uses 400-tier). */
:root:not(.dark) .alert-success { color: #14532D; }
:root:not(.dark) .alert-danger  { color: #7F1D1D; }
:root:not(.dark) .alert-warn    { color: #78350F; }
:root:not(.dark) .alert-info    { color: #1E3A8A; }

/* ─── Swatches ─── */
.swatch-grid { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; }
.swatch { aspect-ratio: 1.4; border-radius: 8px; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px 8px; font: 600 10px/1 var(--font-mono); }

/* ─── Doc scaffolding ─── */
.ds-section { padding: 40px 48px; border-bottom: 1px solid var(--sf-border); }
.ds-section h2.ds-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
.ds-section p.ds-sub { color: var(--sf-text-2); font-size: 14px; margin: 0 0 28px; max-width: 60ch; }
.ds-grid { display: grid; gap: 20px; }
.ds-row  { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ds-stack { display: flex; flex-direction: column; gap: 14px; }
.ds-label { font-size: 11px; font-weight: 600; color: var(--sf-text-3); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }

/* ─── Doc topbar ─── */
.ds-topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--sf-surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--sf-border);
  display: flex; align-items: center; gap: 16px; padding: 12px 28px;
}
.ds-topbar .seg { display: inline-flex; background: var(--sf-surface-2); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.ds-topbar .seg button {
  border: 0; background: transparent; color: var(--sf-text-2);
  padding: 6px 12px; border-radius: var(--r-pill);
  font: 600 12px/1 var(--font-sans); cursor: pointer;
}
.ds-topbar .seg button.on { background: var(--sf-surface); color: var(--sf-text); box-shadow: var(--sh-sm); }

/* === _tokens.css === */
/* Fluid type/spacing/motion tokens + semantic aliases. Loaded after design-system.css. */

:root {
  /* Type scale (fluid clamp) */
  --fz-h1:    clamp(2rem, 1.4rem + 3vw, 4rem);          /* 32 → 64 */
  --fz-h2:    clamp(1.625rem, 1.2rem + 2vw, 2.5rem);    /* 26 → 40 */
  --fz-h3:    clamp(1.25rem, 1.05rem + 1vw, 1.5rem);    /* 20 → 24 */
  --fz-body:  clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);   /* 15 → 16 */
  --fz-small: 0.8125rem;                                /* 13 */
  --fz-xs:    0.75rem;                                  /* 12 */
  --fz-data:  clamp(1.75rem, 1.2rem + 2.5vw, 3rem);     /* 28 → 48 */

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.6;
  --lh-data:  1;

  /* Spacing scale (4px multiples) */
  --sp-1: 0.25rem;  /* 4 */
  --sp-2: 0.5rem;   /* 8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 3rem;     /* 48 */

  --sp-section:      clamp(2.5rem, 1.5rem + 4vw, 5rem);     /* 40 → 80 */
  --sp-shell-gutter: clamp(1rem, 4vw, 2rem);                /* 16 → 32 */
  --sp-card-pad:     clamp(1rem, 0.6rem + 1.5vw, 1.75rem);  /* 16 → 28 */
  --sp-hero-y:       clamp(2rem, 1rem + 4vw, 4.5rem);       /* 32 → 72 */

  /* Motion — always pair a duration with an easing */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-mid:  220ms;
  --dur-slow: 380ms;

  /* Semantic aliases — map design-system sf/p/st tokens to component names */
  --bg-page:        var(--sf-canvas);
  --bg-surface:     var(--sf-surface);
  --bg-surface-2:   var(--sf-surface-2);
  --bg-elevated:    var(--sf-surface);
  --fg-default:     var(--sf-text);
  --fg-secondary:   var(--sf-text-2);
  --fg-tertiary:    var(--sf-text-3);
  --border-default: var(--sf-border);
  --border-strong:  var(--sf-border-strong);

  --accent:       var(--p-600);  /* p-600 = AA on white; dark flips to p-400 */
  --accent-fg:    #ffffff;
  --accent-soft:  color-mix(in srgb, var(--p-600) 10%, transparent);
  --accent-glow:  color-mix(in srgb, var(--p-600) 18%, transparent);

  --success: var(--st-success);
  --warning: var(--st-warn);
  --danger:  var(--st-danger);
  --info:    var(--st-info);

  --sh-1:    var(--sh-sm);
  --sh-2:    var(--sh-md);
  --sh-3:    var(--sh-lg);
  --sh-glow: 0 6px 22px var(--accent-glow);
}

/* dark: brighter lime accent; bg/fg/border tokens flip via design-system.css .dark var() chains */
html.dark {
  --accent:      var(--p-400);
  --accent-fg:   #0c0d10;
  --accent-soft: color-mix(in srgb, var(--p-400) 10%, transparent);
  --accent-glow: color-mix(in srgb, var(--p-400) 22%, transparent);
}

/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-mid:  0ms;
    --dur-slow: 0ms;
  }
}

/* === lastz.css === */
/* Last Z Rewards — layered on top of design-system.css */

/* Doc shell (admin sidebar layout) */
body { margin: 0; }
.lz-doc { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.lz-side {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  background: var(--sf-surface);
  border-inline-end: 1px solid var(--sf-border);
  padding: 18px 14px 22px;
}
.lz-side .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 14px;
  border-bottom: 1px solid var(--sf-border);
  margin-bottom: 12px;
}
.lz-side .brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--p-300), var(--p-700));
  position: relative; overflow: hidden;
  display: grid; place-items: center;
}
.lz-side .brand-mark::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 4px, rgba(0,0,0,0.15) 4px 5px);
  mix-blend-mode: multiply;
}
.lz-side .brand-mark svg { position: relative; z-index: 1; }
.lz-side .brand-name { font: 800 14px/1 var(--font-sans); letter-spacing: -0.01em; color: var(--sf-text); }
.lz-side .brand-tag { font: 700 9px/1 var(--font-mono); letter-spacing: 0.18em; color: var(--p-700); text-transform: uppercase; margin-top: 3px; }
.dark .lz-side .brand-tag { color: var(--p-400); }

.lz-side .seg { display:flex; gap:4px; padding:3px; background:var(--sf-surface-2); border-radius:var(--r-pill); margin-bottom:6px; }
.lz-side .seg button { flex:1; border:0; background:transparent; color:var(--sf-text-2); padding:6px 0; border-radius:var(--r-pill); font:600 11px/1 var(--font-sans); cursor:pointer; }
.lz-side .seg button.on { background:var(--sf-surface); color:var(--sf-text); box-shadow:var(--sh-sm); }

.lz-side .grp { font: 700 10px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-text-3); margin: 16px 10px 6px; }
.lz-side a {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px;
  font-size: 13px; color: var(--sf-text-2); text-decoration: none;
}
.lz-side a:hover { background: var(--sf-surface-2); color: var(--sf-text); }
.lz-side a .badge { margin-inline-start: auto; font: 700 9px/1 var(--font-mono); padding: 2px 5px; border-radius: 99px; background: var(--p-100); color: var(--p-800); }
.dark .lz-side a .badge { background: color-mix(in srgb, var(--p-500) 18%, transparent); color: var(--p-300); }

.lz-main { background: var(--sf-canvas); }

/* Section / page frame */
.lz-section {
  padding: 24px 32px 40px;
  border-bottom: 1px solid var(--sf-border);
}
.lz-section.alt { background: color-mix(in srgb, var(--p-50) 30%, var(--sf-canvas)); }
.dark .lz-section.alt { background: color-mix(in srgb, color-mix(in srgb, var(--p-500) 6%, transparent) 50%, var(--sf-canvas)); }
.lz-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 10px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sf-text-3); margin-bottom: 14px;
}
.lz-tag::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--p-500); transform: rotate(45deg); }
.lz-tag .route { font-family: var(--font-mono); color: var(--p-700); letter-spacing: 0.05em; }
.dark .lz-tag .route { color: var(--p-400); }

.lz-frame {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--r-xl);
  /* overflow:clip clips corners like hidden but is NOT a scroll container,
     so wheel events bubble normally. Chrome 90+ / Firefox 81+ / Safari 16+. */
  overflow: clip;
  box-shadow: var(--sh-md);
}

/* Public top-nav: full-bleed band (.lz-nav) + centered rail (.lz-nav__inner).
   Aligns with .lz-shell and .lz-site-footer__inner on the same 1280px column. */
.lz-nav {
  background: var(--sf-surface);
  border-bottom: 1px solid var(--sf-border);
  position: relative;
}
.lz-nav__inner {
  display: flex; align-items: center; gap: 22px;
  padding: 14px 32px;
  max-width: 1280px;
  margin: 0 auto;
  /* border-box keeps the 32px padding inside the 1280px max-width */
  box-sizing: border-box;
}
.lz-nav::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: repeating-linear-gradient(90deg, var(--p-500) 0 12px, transparent 12px 24px);
  opacity: 0.15;
}
.lz-nav .brand { display:flex; align-items:center; gap:10px; font:800 14px/1 var(--font-sans); letter-spacing:-0.01em; }
.lz-nav a { color: var(--sf-text-2); font-size:13px; text-decoration:none; }

/* Inline nav links — excludes wordmark and sign-in button. Accent underline for WCAG 1.4.1. */
.lz-nav__inner > a:not(.brand):not(.btn) {
  position: relative;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  transition: color var(--dur-fast) var(--ease-snap),
              background var(--dur-fast) var(--ease-snap);
}
.lz-nav__inner > a:not(.brand):not(.btn):hover { color: var(--sf-text); background: var(--sf-surface-2); }
.lz-nav__inner > a.active { color: var(--accent); font-weight: 600; background: var(--accent-soft); }
.lz-nav__inner > a.active:hover { color: var(--accent); background: var(--accent-soft); }
.lz-nav__inner > a.active::before {
  content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px;
  background: var(--accent); border-radius:2px; opacity:.55;
}
.lz-nav .spacer { flex: 1; }

/* Desktop nav dropdowns (lz_navmenu.js) */
.lz-navmenu { position: relative; display: inline-flex; }
.lz-navmenu__btn {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font:500 13px/1 var(--font-sans); color: var(--sf-text-2);
  background: transparent; border: 0; padding: 7px 12px; border-radius: var(--r-pill);
  transition: color var(--dur-fast) var(--ease-snap),
              background var(--dur-fast) var(--ease-snap);
}
.lz-navmenu__btn:hover { color: var(--sf-text); background: var(--sf-surface-2); }
.lz-navmenu__caret { font-size: 9px; opacity:.6; transition: transform var(--dur-fast) var(--ease-out); }
.lz-navmenu.is-open > .lz-navmenu__btn .lz-navmenu__caret,
.lz-navmenu.is-open > .acct .lz-navmenu__caret { transform: rotate(180deg); }
.lz-navmenu__pop {
  position:absolute; top: calc(100% + 10px); inset-inline-start: 0; min-width: 208px;
  background: var(--sf-surface); border: 1px solid var(--sf-border);
  border-radius: var(--r-md); padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 0 0 1px var(--accent-glow);
  opacity: 0; transform: translateY(-6px) scale(.985); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  z-index: 50;
}
.lz-navmenu__pop--end { inset-inline-start: auto; inset-inline-end: 0; }
.lz-navmenu.is-open > .lz-navmenu__pop { opacity: 1; transform: none; pointer-events: auto; }
.lz-navmenu__pop a {
  display:flex; align-items:center; gap:10px; width:100%;
  padding: 9px 12px; border-radius: var(--r-sm); font:500 13px/1.1 var(--font-sans);
  color: var(--sf-text-2); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-snap),
              color var(--dur-fast) var(--ease-snap);
}
.lz-navmenu__pop a:hover { background: var(--sf-surface-2); color: var(--sf-text); }
.lz-navmenu__pop a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.lz-navmenu__pop a .glyph { width: 1.1em; text-align:center; opacity:.6; font-size: 14px; }
.lz-navmenu__sep { height:1px; background: var(--sf-border); margin: 6px 4px; }
.lz-navmenu__pop a.lz-navmenu__danger { color:#dc2626; }
.dark .lz-navmenu__pop a.lz-navmenu__danger { color:#f87171; }
.lz-navmenu__pop a.lz-navmenu__danger:hover { background: rgba(220,38,38,.08); }

/* Account chip */
.lz-nav .acct {
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px 4px 4px; border-radius: var(--r-pill);
  background: var(--sf-surface-2); border:1px solid transparent;
  font:500 12px/1 var(--font-sans); color: var(--sf-text); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-snap);
}
.lz-nav .acct:hover { border-color: var(--accent); }
.lz-nav .acct__name { max-width: 160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lz-nav .avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--p-400), var(--p-700)); display:grid; place-items:center; color:#fff; font:700 10px/1 var(--font-sans); flex-shrink:0; }

/* Public nav responsiveness: at ≤960 everything except the brand hides; burger opens the drawer. */

/* Admin sidebar */
.lz-asidenav { background: var(--sf-surface-2); border-inline-end: 1px solid var(--sf-border); display: flex; flex-direction: column; }
.lz-asidenav .head { padding: 16px 16px 12px; border-bottom: 1px solid var(--sf-border); display: flex; align-items: center; gap: 10px; }
.lz-asidenav .head .dot { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--p-400), var(--p-800)); display: grid; place-items:center; color:#fff; font: 800 11px/1 var(--font-sans); position:relative; overflow:hidden; }
.lz-asidenav .head .dot::after { content:""; position:absolute; inset:0; background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(0,0,0,0.2) 3px 4px); }
.lz-asidenav nav { padding: 10px 8px; flex: 1; display: flex; flex-direction: column; gap: 1px; }
/* 13.5px/11px for readability; mobile scroll-strip uses smaller sizes below */
.lz-asidenav nav a { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 8px; font-size: 13.5px; color: var(--sf-text-2); text-decoration: none; }
.lz-asidenav nav a:hover { background: var(--sf-surface); color: var(--sf-text); }
.lz-asidenav nav a.active { background: var(--p-50); color: var(--p-700); font-weight: 600; }
.dark .lz-asidenav nav a.active { background: color-mix(in srgb, var(--p-500) 15%, transparent); color: var(--p-300); }
.lz-asidenav .grp { font: 700 11px/1.1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-text-3); margin: 14px 12px 6px; }
.lz-asidenav .cnt { margin-inline-start: auto; font: 700 9px/1 var(--font-mono); padding: 2px 5px; border-radius: 99px; background: var(--sf-surface); color: var(--sf-text-2); }
.lz-asidenav a.active .cnt { background: var(--p-100); color: var(--p-700); }
.dark .lz-asidenav a.active .cnt { background: color-mix(in srgb, var(--p-500) 25%, transparent); color: var(--p-200); }
.lz-asidenav .foot { padding: 10px 12px; border-top: 1px solid var(--sf-border); display:flex; align-items:center; gap: 8px; font-size: 12px; }

.lz-admin { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 680px; }
.lz-admin-main { display: flex; flex-direction: column; min-width: 0; }
.lz-admin-head { display:flex; align-items:center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--sf-border); background: var(--sf-surface); flex-wrap: wrap; }

/* Admin layout ≤960px: sidebar becomes a horizontal scroll-strip at the top */
@media (max-width: 960px) {
  .lz-admin {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: auto;
  }
  .lz-asidenav {
    border-inline-end: none;
    border-bottom: 1px solid var(--sf-border);
    /* min-width:0 prevents the flex-row nav from expanding the grid track */
    min-width: 0;
    width: 100%;
  }
  .lz-asidenav nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 8px 10px;
    gap: 4px;
    /* thin scrollbar: visible affordance without wasting height */
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    max-width: 100%;
  }
  .lz-asidenav nav a {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 10px;
  }
  .lz-asidenav .grp {
    flex-shrink: 0;
    align-self: center;
    margin: 0 4px;
    font-size: 9px;
    /* group labels waste horizontal space in the strip */
    display: none;
  }
  .lz-asidenav .head,
  .lz-asidenav .foot {
    padding: 8px 12px;
    font-size: 12px;
  }
  .lz-admin-head {
    padding: 12px 14px;
    gap: 10px;
  }
  .lz-shell .lz-admin-head h1 {
    font-size: 16px;
  }
  .lz-admin-body {
    padding: 14px 14px !important;
  }
}

/* override inline overflow:hidden on card wrappers so wide tables scroll rather than clip */
.lz-admin-body .card:has(> table.tbl) {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Responsive grid stacking — attribute selector catches inline grid-template-columns too */
@media (max-width: 960px) {
  /* tablet: 3+ col grids → 2-up */
  .grid3,
  .grid4,
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 720px) {
  .lz-frame {
    padding-inline: 12px !important;
  }
  /* !important overrides inline padding on cards/sections */
  .card.card-pad {
    padding: 14px !important;
  }
  .card.card-pad-lg {
    padding: 20px !important;
  }
  /* phone: single column. Add .no-stack to a parent to opt out. */
  .grid2,
  .grid3,
  .grid4,
  :not(.no-stack) > [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* flex rows wrap on phone */
  .row {
    flex-wrap: wrap;
  }
  /* collapse desktop-only horizontal padding on narrow viewports */
  div[style*="padding:0 48px"],
  div[style*="padding: 0 48px"] {
    padding-inline: 12px !important;
  }
}
/* .lz-shell scope (0,2,1) wins over the token h1 rule that would inflate to 64px */
.lz-shell .lz-admin-head h1 { margin:0; font: 600 17px/1 var(--font-sans); letter-spacing: -0.01em; }
.lz-admin-head .search { flex: 1; max-width: 380px; display:flex; align-items:center; gap: 8px; padding: 6px 12px; background: var(--sf-surface-2); border-radius: var(--r-md); color: var(--sf-text-3); font-size: 13px; }
.lz-admin-head .search input { flex: 1; background: transparent; border: 0; outline: none; color: var(--sf-text); font-size: 13px; }
.lz-admin-body { padding: 22px 26px; flex: 1; background: var(--sf-canvas); }

.crumb { font-size: 12px; color: var(--sf-text-3); display:flex; gap:6px; align-items:center; flex-wrap: wrap; }
.crumb a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.crumb a:hover {
  color: var(--p-700);
  border-bottom-color: var(--p-500);
}
.crumb a:focus-visible {
  outline: 2px solid var(--p-500);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Phase 39-02 — global crumb glyph swap. Un-migrated admin pages still
   ship `<span class="sep">/</span>` literal in their hand-rolled
   headers; migrated pages (via admin/_admin_crumb.html) ship an empty
   `<span class="sep"></span>`. Hiding the inner text with font-size:0
   plus rendering "›" via ::before produces the new glyph on BOTH shapes
   without coordinating a template-level migration. The Phase 39-02
   _admin_crumb.html macro is the only path forward; this rule is the
   transparent bridge while Wave 2-4 plans roll. */
.crumb .sep { font-size: 0; opacity: 0.5; }
.crumb .sep::before { content: "›"; font-size: 12px; margin: 0 4px; }

/* Hero (Last Z stencil + scanline atmosphere) */
.lz-hero {
  position: relative; overflow: hidden;
  padding: 52px 48px 56px;
  background:
    radial-gradient(700px 320px at 88% -10%, color-mix(in srgb, var(--p-500) 18%, transparent), transparent 70%),
    radial-gradient(640px 360px at 0% 110%, rgba(217,119,6,0.06), transparent 70%),
    linear-gradient(180deg, var(--sf-surface) 0%, var(--sf-canvas) 100%);
  border-bottom: 1px solid var(--sf-border);
}
.dark .lz-hero {
  background:
    radial-gradient(800px 380px at 88% -10%, color-mix(in srgb, var(--p-500) 22%, transparent), transparent 70%),
    radial-gradient(640px 360px at 0% 110%, rgba(217,119,6,0.08), transparent 70%),
    linear-gradient(180deg, #131A11 0%, #0A0E0A 100%);
}
.lz-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 100% 60% at 50% 20%, black 30%, transparent 80%);
}
.dark .lz-hero::before { background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); }

.lz-hero .hero-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; position: relative; }
.lz-hero h1 {
  font: 800 60px/1.02 var(--font-sans); letter-spacing: -0.03em; margin: 0;
  color: var(--sf-text);
}
/* skewed slab behind text reads as a brush stroke, not gradient fill */
.lz-hero h1 .accent {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: var(--sf-text);
  padding: 0 0.08em;
}
.lz-hero h1 .accent::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.06em;
  height: 0.22em;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--accent) 65%, transparent) 4%,
    color-mix(in srgb, var(--accent) 92%, transparent) 50%,
    color-mix(in srgb, var(--accent) 55%, transparent) 96%
  );
  transform: skew(-3deg);
  z-index: -1;
  border-radius: 4px 8px 6px 10px / 6px 4px 10px 6px;
}
.lz-hero .lede { font-size: 16px; line-height: 1.55; color: var(--sf-text-2); max-width: 52ch; margin: 18px 0 0; }

/* Redeem form */
.redeem {
  margin-top: 26px; padding: 14px; border-radius: var(--r-lg);
  background: var(--sf-surface);
  border: 1px solid var(--sf-border-strong);
  box-shadow: var(--sh-md);
}
.dark .redeem { background: color-mix(in srgb, var(--sf-surface) 85%, transparent); backdrop-filter: blur(20px); }
.redeem .row { display: flex; gap: 8px; align-items: stretch; }
.redeem .input-wrap {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 4px 14px;
  background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: var(--r-md);
}
.redeem .input-wrap:focus-within { border-color: var(--p-500); box-shadow: var(--sh-focus); }
.redeem .input-wrap .player-chip { display:inline-flex; align-items:center; gap:6px; padding: 4px 8px 4px 4px; border-radius: var(--r-pill); background: var(--sf-surface); border: 1px solid var(--sf-border); font: 600 12px/1 var(--font-sans); color: var(--sf-text); }
.redeem .input-wrap .player-chip .av { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--p-400), var(--p-700)); color:#fff; display:grid; place-items:center; font: 700 9px/1 var(--font-mono); }
.redeem .input-wrap .player-chip .x { color: var(--sf-text-3); cursor:pointer; }
.redeem .input-wrap input { flex: 1; background: transparent; border: 0; outline: none; font: 600 15px/1.3 var(--font-mono); color: var(--sf-text); padding: 10px 0; min-width: 0; }
.redeem .input-wrap input::placeholder { color: var(--sf-text-3); }
.redeem .helps { display:flex; gap: 14px; margin-top: 10px; font-size: 11.5px; color: var(--sf-text-3); }
.redeem .helps strong { color: var(--sf-text-2); font-weight: 600; }

/* Reward preview panel */
.reward-preview {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--p-50) 70%, var(--sf-surface));
  border: 1px dashed var(--p-300);
  display: flex; align-items:center; gap: 14px;
}
.dark .reward-preview { background: color-mix(in srgb, var(--p-500) 8%, transparent); border-color: color-mix(in srgb, var(--p-500) 30%, transparent); }
.reward-preview .icons { display:flex; gap:6px; }
.reward-preview .icons span {
  width: 28px; height: 28px; border-radius: 6px;
  display: grid; place-items: center; font-size: 14px;
  background: var(--sf-surface); border: 1px solid var(--sf-border);
  box-shadow: var(--sh-sm);
}
.reward-preview .icons .ammo  { background: linear-gradient(135deg, #FCD34D, #B45309); color: #fff; border-color: transparent; }
.reward-preview .icons .med   { background: linear-gradient(135deg, #FCA5A5, #B91C1C); color: #fff; border-color: transparent; }
.reward-preview .icons .food  { background: linear-gradient(135deg, var(--p-300), var(--p-700)); color: #fff; border-color: transparent; }
.reward-preview .icons .fuel  { background: linear-gradient(135deg, #93C5FD, #1D4ED8); color: #fff; border-color: transparent; }
.reward-preview .icons .parts { background: linear-gradient(135deg, #D6D3D1, #57534E); color: #fff; border-color: transparent; }
.reward-preview .label { font-size: 13px; color: var(--sf-text); }
.reward-preview .label strong { font-weight: 700; }

/* Live ticker */
.live-ticker {
  display:flex; align-items:center; gap: 10px;
  font: 500 12px/1 var(--font-sans);
  color: var(--sf-text-2); padding: 8px 14px;
  background: var(--sf-surface-2); border-radius: var(--r-pill);
  border: 1px solid var(--sf-border);
}
.live-ticker .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--st-success); box-shadow: 0 0 8px var(--st-success); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }
.live-ticker .ticker-track { overflow:hidden; max-width: 360px; }
.live-ticker .ticker-track .item { white-space: nowrap; display: inline-block; }

/* KPI cards */
.kpi { display: grid; gap: 14px; }
.kpi-card { background: var(--sf-surface); border:1px solid var(--sf-border); border-radius: var(--r-md); padding: 16px; }
.kpi-card .e { font: 700 10.5px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-text-3); }
.kpi-card .n { font: 800 28px/1 var(--font-sans); letter-spacing: -0.025em; margin-top: 8px; font-variant-numeric: tabular-nums; color: var(--sf-text); }
.kpi-card .d { font-size: 11.5px; margin-top: 4px; color: var(--sf-text-3); }
.kpi-card .d.up { color: var(--st-success); } .kpi-card .d.down { color: var(--st-danger); } .kpi-card .d.warn { color: var(--st-warn); }
.spark { width: 100%; height: 32px; margin-top: 8px; }

/* Code row: pill | content | action (1fr); Copy always right-aligns */
.code-row {
  display: grid; grid-template-columns: auto auto 1fr;
  align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--r-md);
}
.code-row > button { justify-self: end; }

/* auto-fill (not auto-fit) so a sparse 1-card state doesn't stretch to full width.
   min(280px, 100%) floor lets the track shrink on sub-300px viewports. */
.active-codes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 10px;
}
/* reset margin-top inside the grid to avoid gap conflict */
.active-codes-grid .code-row + .code-row { margin-top: 0; }
.code-row + .code-row { margin-top: 8px; }
.code-row .code { font: 700 14px/1.3 var(--font-mono); letter-spacing: -0.005em; color: var(--sf-text); }
.code-row .meta { font-size: 11.5px; color: var(--sf-text-3); margin-top: 2px; }
.code-row.expired { opacity: 0.55; }
.code-row.expired .code { text-decoration: line-through; text-decoration-color: var(--st-danger); }
.code-row .reward-icons { display: flex; gap: 4px; }
.code-row .reward-icons span {
  width: 22px; height: 22px; border-radius: 5px;
  display: grid; place-items: center; font-size: 11px;
}

/* Pricing tier card */
.tier {
  background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--r-lg);
  padding: 24px; position: relative; display: flex; flex-direction: column;
}
.tier.featured {
  border-color: var(--p-400);
  box-shadow: 0 0 0 1px var(--p-400), var(--sh-md);
}
.tier .price { font: 800 36px/1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tier .per { font-size: 13px; color: var(--sf-text-2); font-weight: 500; }
.tier ul { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tier li { font-size: 13.5px; color: var(--sf-text); display: flex; gap: 8px; align-items: start; }
.tier li::before { content: "✓"; color: var(--p-600); font-weight: 800; flex-shrink: 0; }
.tier li.no { color: var(--sf-text-3); }
.tier li.no::before { content: "—"; color: var(--sf-text-3); }
/* margin-top:auto pins CTA to card bottom across tiers with differing bullet counts */
.tier .tier-cta { margin-top: auto; padding-top: 20px; }

/* Player-IDs meter — track has a visible border so it reads as a container at 0/N */
.lz-uid-meter {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lz-uid-meter__count {
  font: 700 18px/1 var(--font-mono);
  color: var(--sf-text);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.lz-uid-meter__cap {
  color: var(--sf-text-3);
  font-size: 14px;
  font-weight: 500;
  margin-inline-start: 2px;
}
.lz-uid-meter__track {
  position: relative;
  flex: 1;
  height: 10px;
  background: var(--sf-surface-2);
  border: 1px solid var(--sf-border);
  border-radius: 5px;
  overflow: hidden;
}
.lz-uid-meter__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: linear-gradient(90deg, var(--p-500), var(--p-400));
  border-radius: inherit;
  transition: width 240ms ease;
}
.lz-uid-meter__hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sf-text-3);
  pointer-events: none;
}
.lz-uid-meter.is-empty .lz-uid-meter__track {
  border-style: dashed;
  border-color: var(--sf-border-strong);
  background: transparent;
  height: 22px;
  border-radius: 6px;
}
@media (max-width: 480px) {
  /* fit hint text on 320px viewport */
  .lz-uid-meter__hint { font-size: 9.5px; letter-spacing: 0.04em; }
}

/* pricing tier compaction on phones — saves ~80px per tier */
@media (max-width: 480px) {
  .tier { padding: 18px 16px; }
  .tier .price { font-size: 30px; }
  .tier ul { margin-top: 12px; gap: 6px; }
  .tier li { font-size: 13px; }
  .tier .tier-cta { margin-top: 14px; }
}

.savings {
  display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 14px; background: var(--p-50); border: 1px solid var(--p-200); border-radius: var(--r-md);
  margin-bottom: 14px;
}
.dark .savings { background: color-mix(in srgb, var(--p-500) 10%, transparent); border-color: color-mix(in srgb, var(--p-500) 25%, transparent); }
.savings .icon { width: 36px; height: 36px; border-radius: 8px; background: var(--p-100); display: grid; place-items: center; color: var(--p-700); font-weight: 800; font-size: 14px; }
.dark .savings .icon { background: color-mix(in srgb, var(--p-500) 18%, transparent); color: var(--p-300); }
.savings .body { font-size: 13px; color: var(--sf-text); }

/* Manual queue list */
.queue-list { display: flex; flex-direction: column; gap: 6px; max-height: 480px; overflow-y: auto; }
.queue-item {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--sf-border); border-radius: var(--r-md);
  background: var(--sf-surface); cursor: pointer;
}
.queue-item:hover { border-color: var(--sf-border-strong); }
.queue-item.selected { background: var(--p-50); border-color: var(--p-400); border-inline-start: 3px solid var(--p-500); }
.dark .queue-item.selected { background: color-mix(in srgb, var(--p-500) 12%, transparent); }
.queue-item .age { font: 700 11px/1 var(--font-mono); padding: 3px 7px; border-radius: 99px; background: var(--sf-surface-2); color: var(--sf-text-2); }
.queue-item .age.over { background: var(--st-warn-bg); color: var(--st-warn); }
.queue-item .age.critical { background: var(--st-danger-bg); color: var(--st-danger); }

/* Error pages */
.err-frame {
  min-height: 460px; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  overflow: hidden;
}
.err-art {
  background: var(--sf-surface-2);
  padding: 40px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  border-inline-end: 1px solid var(--sf-border);
}
.err-art .mono {
  font: 900 200px/0.9 var(--font-mono); letter-spacing: -0.05em;
  color: var(--sf-text-3); opacity: 0.5;
}
.err-art.danger { background: linear-gradient(135deg, var(--st-danger-bg), var(--sf-surface) 70%); }
.err-art.warn { background: linear-gradient(135deg, var(--st-warn-bg), var(--sf-surface) 70%); }
.err-art.info { background: linear-gradient(135deg, var(--st-info-bg), var(--sf-surface) 70%); }
.err-art .stencil {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(-45deg, transparent 0 12px, rgba(0,0,0,0.04) 12px 14px);
  mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
}
.err-body { padding: 40px 48px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.err-body h2 { font: 800 28px/1.15 var(--font-sans); letter-spacing: -0.025em; margin: 12px 0 8px; }
.err-body p { font-size: 14px; color: var(--sf-text-2); margin: 0 0 6px; line-height: 1.55; max-width: 44ch; }
.err-body .actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.err-body .ref { font: 600 11px/1 var(--font-mono); color: var(--sf-text-3); margin-top: 18px; }

/* stack error frame vertically on phones */
@media (max-width: 640px) {
  .err-frame {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .err-art {
    padding: 24px;
    border-inline-end: 0;
    border-block-end: 1px solid var(--sf-border);
  }
  .err-art .mono { font-size: 120px; }
  .err-body { padding: 24px 20px; }
  .err-body h2 { font-size: 22px; }
}

/* Mobile preview frame (design canvas only) */
.mobile-frame {
  width: 360px; height: 720px; border-radius: 36px;
  border: 10px solid #18181B; box-shadow: var(--sh-lg);
  overflow: hidden; background: var(--sf-canvas);
  position: relative;
}
.mobile-frame .notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 96px; height: 22px; background: #18181B; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; z-index: 2; }
.mobile-body { height: 100%; overflow-y: auto; padding: 36px 16px 80px; }
.mobile-tabbar {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  padding: 8px 0 18px; background: color-mix(in srgb, var(--sf-surface) 92%, transparent);
  backdrop-filter: blur(20px); border-top: 1px solid var(--sf-border);
}
.mobile-tabbar .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 10px/1 var(--font-sans); color: var(--sf-text-3); }
.mobile-tabbar .tab.on { color: var(--p-700); }
.dark .mobile-tabbar .tab.on { color: var(--p-400); }

/* Dashboard UID table — sticky-left first column, remaining cols scroll */
.lz-uid-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sf-border);
  border-radius: 10px;
  background: var(--sf-surface);
  /* Keep the horizontal scroll on this element; don't chain to the
     page when the user scrolls past either end. */
  overscroll-behavior-x: contain;
  /* Right-edge fade so it's visible that more content is to the right.
     Disappears once the user scrolls to the end (no JS — the
     background-attachment trick keeps the fade pinned to the visible
     viewport of the scroller). */
  background-image:
    linear-gradient(to right, var(--sf-surface) 30%, rgba(255,255,255,0) 70%),
    linear-gradient(to right, rgba(255,255,255,0) 30%, var(--sf-surface) 70%),
    linear-gradient(to right, rgba(0,0,0,0.18), rgba(0,0,0,0)),
    linear-gradient(to left,  rgba(0,0,0,0.18), rgba(0,0,0,0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-color: var(--sf-surface);
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
/* Always-visible thin scrollbar so the swipe affordance is obvious on
   mobile. Webkit covers iOS Safari + Chrome Android + Edge; Firefox
   uses scrollbar-color. */
.lz-uid-table-wrap::-webkit-scrollbar {
  height: 6px;
}
.lz-uid-table-wrap::-webkit-scrollbar-track {
  background: var(--sf-surface-2);
}
.lz-uid-table-wrap::-webkit-scrollbar-thumb {
  background: var(--sf-border);
  border-radius: 3px;
}
.lz-uid-table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--sf-text-3);
}
.lz-uid-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--sf-border) var(--sf-surface-2);
}
.lz-uid-table {
  width: 100%;
  min-width: max-content;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: var(--sf-text-2);
}
.lz-uid-table thead th {
  text-align: start;
  padding: 8px 10px;
  font: 700 10.5px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sf-text-3);
  background: var(--sf-surface-2);
  border-bottom: 1px solid var(--sf-border);
  white-space: nowrap;
}
.lz-uid-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--sf-border);
  vertical-align: middle;
  white-space: nowrap;
  background: var(--sf-surface);
}
.lz-uid-table tbody tr:last-child td { border-bottom: 0; }
.lz-uid-table tbody tr:hover td {
  background: var(--sf-surface-2);
}

/* Sticky-left first column — avatar + name only. Kept narrow so on
   mobile (393px viewport) the user has enough non-sticky width to
   grab a horizontal swipe. UID moves to its own scrollable column. */
.lz-uid-table .lz-uid-row__id {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  min-width: 160px;
  max-width: 200px;
  border-inline-end: 1px solid var(--sf-border);
}
.lz-uid-table thead th.lz-uid-row__id {
  z-index: 2; /* above body sticky cells when they scroll under */
}
.lz-uid-row__id-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Avatar with initials fallback — lz_avatar macro + lz_avatar_fallback.js.
   Sizing (width/height/border-radius/font-size) is supplied inline by the
   macro so the JS-built fallback span inherits it verbatim. */
.lz-avatar {
  flex-shrink: 0;
  object-fit: cover;
  background: var(--sf-surface-2);
}
.lz-avatar-fallback {
  display: grid;
  place-items: center;
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-sans);
  color: var(--sf-text-2);
  background: var(--sf-surface-3);
  overflow: hidden;
}
.lz-uid-row__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.lz-uid-row__nick {
  font-weight: 600;
  font-size: 14px;
  color: var(--sf-text);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.lz-uid-row__uid {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--sf-text-2);
}

/* Meta cells */
.lz-uid-row__hq,
.lz-uid-row__sv,
.lz-uid-row__country,
.lz-uid-row__vip {
  font-size: 12.5px;
  color: var(--sf-text-2);
}
.lz-uid-row__zpts .mono {
  font-weight: 600;
  color: var(--sf-text);
}
.lz-uid-row__updated {
  font-size: 11.5px;
  color: var(--sf-text-3);
}

/* Actions cell */
.lz-uid-row__actions {
  text-align: end;
}
.lz-uid-row__actions-th { text-align: end; }
.lz-uid-row__actions .lz-uid-card__actions {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}
.lz-uid-row__actions .btn {
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
}
.lz-uid-row__actions .js-toggle-uid-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--sf-text-2);
  white-space: nowrap;
  padding: 0 2px;
}

/* Bulk-mode: paint each cell so highlight covers the sticky column too */
.js-uid-card.is-selected td {
  background: color-mix(in srgb, var(--p-50) 60%, var(--sf-surface)) !important;
}

/* Tasks table wrap — same swipe-scroll pattern as .lz-uid-table-wrap */
.lz-tasks-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  background-image:
    linear-gradient(to right, var(--sf-surface) 30%, rgba(255,255,255,0) 70%),
    linear-gradient(to right, rgba(255,255,255,0) 30%, var(--sf-surface) 70%),
    linear-gradient(to right, rgba(0,0,0,0.18), rgba(0,0,0,0)),
    linear-gradient(to left,  rgba(0,0,0,0.18), rgba(0,0,0,0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-color: var(--sf-surface);
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.lz-tasks-table-wrap > .tbl {
  /* size to content so the wrap scrolls rather than cells wrapping */
  min-width: max-content;
}
.lz-tasks-table-wrap::-webkit-scrollbar { height: 6px; }
.lz-tasks-table-wrap::-webkit-scrollbar-track { background: var(--sf-surface-2); }
.lz-tasks-table-wrap::-webkit-scrollbar-thumb { background: var(--sf-border); border-radius: 3px; }
.lz-tasks-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--sf-text-3); }
.lz-tasks-table-wrap { scrollbar-width: thin; scrollbar-color: var(--sf-border) var(--sf-surface-2); }

@media (max-width: 640px) {
  .lz-tasks-table-wrap .tbl th,
  .lz-tasks-table-wrap .tbl td {
    padding: 8px 10px;
    font-size: 12.5px;
  }
}

/* Dashboard mobile — toolbar, bulk-actions, add-UID form */
@media (max-width: 640px) {
  .js-sub-group.card-pad-lg { padding: 16px; }

  /* spacers push buttons right on desktop; on mobile they create a gap when toolbar wraps */
  .lz-flex-spacer { display: none; }

  .js-group-toolbar { gap: 6px; }
  .js-group-toolbar .btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    justify-content: center;
  }

  .js-bulk-actions { gap: 6px; }
  .js-bulk-actions .btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    justify-content: center;
  }
  .js-bulk-actions .js-bulk-count-wrap {
    flex: 1 1 100%;
    text-align: center;
    order: -1;            /* "0 selected" reads above the buttons */
  }

  .js-add-uid-form .row {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .js-add-uid-form .js-add-uid-input,
  .js-add-uid-form .js-add-uid-submit {
    width: 100%;
  }
}

/* Inline helpers */
.row { display: flex; gap: 12px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* !important beats inline style="grid-template-columns:…" on these helpers */
@media (max-width: 640px) {
  .grid2,
  .grid3,
  .grid4 {
    grid-template-columns: 1fr !important;
  }
}
/* collapse inline padding on legacy wrapper divs — attribute-selector targets only the exact values used in templates */
@media (max-width: 640px) {
  [style*="padding:36px 40px"],
  [style*="padding: 36px 40px"] {
    padding-inline: 16px !important;
  }
  [style*="padding:28px 36px"],
  [style*="padding: 28px 36px"] {
    padding-inline: 16px !important;
  }
  /* /autoredemption column gutter (0 56px) → 112px padding on 320px viewport */
  [style*="padding:0 56px"],
  [style*="padding: 0 56px"] {
    padding-inline: 0 !important;
  }
  [style*="padding:48px 56px"] {
    padding: 24px 0 16px !important;
  }
}
/* /autoredemption hero h1 inline-styled 44px — too tall at 320, pushes pricing below fold */
@media (max-width: 480px) {
  h1[style*="44px"] {
    font-size: 28px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }
}
.gap-2 { gap: 6px; }
.eq { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 640px) {
  .eq { flex-direction: column; align-items: stretch; }
}
/* inline-flex search forms with hard-coded input widths overflow 320px — force wrap + full-width */
@media (max-width: 640px) {
  form[style*="display:flex"] { flex-wrap: wrap !important; }
  form[style*="display:flex"] input[type="search"],
  form[style*="display:flex"] input[type="text"] {
    width: 100% !important;
    min-width: 0;
  }
}
.divider { height: 1px; background: var(--sf-border); margin: 14px 0; }
.muted { color: var(--sf-text-3); }
.dim  { color: var(--sf-text-2); }
.mono { font-family: var(--font-mono); }

/* Tags */
.tag-source {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-pill); font: 600 10.5px/1.4 var(--font-sans);
  background: var(--sf-surface-2); border: 1px solid var(--sf-border); color: var(--sf-text-2);
}
.tag-source.tg::before { content:"✈"; color: #229ED9; }
.tag-source.yt::before { content:"▶"; color: #DC2626; }
.tag-source.dc::before { content:"⌘"; color: #5865F2; }
.tag-source.off::before { content:"●"; color: var(--p-600); }

/* Subscription-expiry banner — non-dismissible; skipped on login/auth pages */
.lz-sub-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  font: 500 13.5px/1.5 var(--font-sans);
  border-bottom: 1px solid transparent;
}
.lz-sub-banner__msg { flex: 1 1 auto; }
.lz-sub-banner__cta {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.lz-sub-banner--warning {
  background: var(--st-warn-bg, #FEF3C7);
  color: var(--st-warn, #92400E);
  border-bottom-color: var(--st-warn-border, #FCD34D);
}
.lz-sub-banner--warning .lz-sub-banner__cta {
  background: var(--st-warn, #92400E);
  color: #FFFFFF;
}
.lz-sub-banner--danger {
  background: var(--st-danger-bg, #FEE2E2);
  color: var(--st-danger, #991B1B);
  border-bottom-color: var(--st-danger-border, #FCA5A5);
}
.lz-sub-banner--danger .lz-sub-banner__cta {
  background: var(--st-danger, #991B1B);
  color: #FFFFFF;
}
@media (max-width: 560px) {
  .lz-sub-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
  }
}

/* Page alerts — stacks below .lz-sub-banner */
.lz-page-alerts {
  display: flex;
  flex-direction: column;
}
.lz-page-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  font: 500 13.5px/1.5 var(--font-sans);
  border-bottom: 1px solid transparent;
  border-inline-start: 3px solid currentColor;
  box-sizing: border-box;
  min-height: 52px;
}
.lz-page-alert__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  opacity: 0.95;
}
.lz-page-alert__icon svg { display: block; }
.lz-page-alert__msg {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px;
}
.lz-page-alert__title {
  font-weight: 700;
  letter-spacing: 0.005em;
  color: currentColor;
}
.lz-page-alert__body {
  display: inline;
  opacity: 0.88;
  color: currentColor;
}
.lz-page-alert__body p { display: inline; margin: 0; }
.lz-page-alert__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lz-page-alert__dismiss {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  opacity: 0.75;
  transition: opacity 120ms ease, background-color 120ms ease;
}
.lz-page-alert__dismiss:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
  opacity: 1;
}

/* Severity tints. Routed through the design-system tokens
   (--st-info / --st-success / --st-warn / --st-danger and their
   -bg / -border companions in static/css/design-system.css), which
   already adapt to both light + dark themes — light mode gets a pale
   tint background with a saturated text color, dark mode gets a
   semi-transparent overlay with a lighter text color. Mirrors the
   sibling .lz-sub-banner--warning / --danger pattern just above. */
.lz-page-alert--info {
  background: var(--st-info-bg);
  color: var(--st-info);
  border-bottom-color: var(--st-info-border);
  border-inline-start-color: var(--st-info);
}
.lz-page-alert--success {
  background: var(--st-success-bg);
  color: var(--st-success);
  border-bottom-color: var(--st-success-border);
  border-inline-start-color: var(--st-success);
}
.lz-page-alert--warning {
  background: var(--st-warn-bg);
  color: var(--st-warn);
  border-bottom-color: var(--st-warn-border);
  border-inline-start-color: var(--st-warn);
}
.lz-page-alert--danger {
  background: var(--st-danger-bg);
  color: var(--st-danger);
  border-bottom-color: var(--st-danger-border);
  border-inline-start-color: var(--st-danger);
}

/* --st-XX tokens are tuned for chips (~4:1); full-width banners need 900-tier text for WCAG AA in light mode */
:root:not(.dark) .lz-page-alert--info    { color: #1E3A8A; }
:root:not(.dark) .lz-page-alert--success { color: #14532D; }
:root:not(.dark) .lz-page-alert--warning { color: #78350F; }
:root:not(.dark) .lz-page-alert--danger  { color: #7F1D1D; }

/* The verify-codes result banner is full-width, not a chip, so the --st-*
   pair behind .pill lands under AA in light mode. Same override as above. */
.lz-verify-banner { display:block; padding:8px; }
:root:not(.dark) .lz-verify-banner { color: #7F1D1D; }

/* Admin flashes are banners too. Same reason, same override — these now
   carry the creator-code verdicts, which an operator has to actually read. */
.lz-admin-flash { display:block; padding:8px 12px; margin-bottom:6px; }
:root:not(.dark) .lz-admin-flash.pill-success { color: #14532D; }
:root:not(.dark) .lz-admin-flash.pill-warn    { color: #78350F; }
:root:not(.dark) .lz-admin-flash.pill-danger  { color: #7F1D1D; }
@media (max-width: 560px) {
  .lz-page-alert {
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    min-height: 0;
  }
  .lz-page-alert__icon { padding-top: 2px; }
  .lz-page-alert__dismiss { align-self: flex-start; }
}

/* Sponsored banner variant — full-width creative instead of the icon+text row.
   Same .lz-page-alert shell so it stacks/dismisses identically. */
.lz-page-alert--sponsored {
  position: relative;
  padding: 0;
  border-inline-start: none;
  border-bottom-color: var(--sf-border);
}
.lz-page-alert__sponsor {
  display: block;
  line-height: 0;
  text-decoration: none;
}
.lz-page-alert__sponsor img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.lz-sponsored-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: 4px;
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}
.lz-page-alert--sponsored .lz-page-alert__dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.lz-page-alert--sponsored .lz-page-alert__dismiss:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* Below-nav sponsor slot — GAM-70 physical placement, distinct from the
   sponsored page-alert variant above (different data source, one row per
   slot per request). Same corner-tag/dismiss shape.
   Capped to a centered banner width rather than full-bleed — the creative
   is a wide 3:1 crop and was dominating the page at full width. The width
   cap sets the height (image is uncropped), so a smaller cap = a smaller banner. */
.lz-sponsor {
  position: relative;
  line-height: 0;
  border-bottom: 1px solid var(--sf-border);
  max-width: 1280px;
  margin-inline: auto;
}
.lz-sponsor__a {
  display: block;
  text-decoration: none;
}
.lz-sponsor__a img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.lz-sponsor__tag {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 6px;
  border-radius: 3px;
  font: 600 8px/1 var(--font-sans);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}
.lz-sponsor__x {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 7px;
  border-radius: 4px;
  transition: background-color 120ms ease;
}
.lz-sponsor__x:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* Page breadcrumb */
.lz-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--sf-text-3);
  text-decoration: none;
  transition: color 0.15s;
}
.lz-breadcrumb:hover {
  color: var(--p-700);
  text-decoration: underline;
}

/* Youtubers card grid */
.lz-yt-grid {
  display: grid;
  /* min(320px, 100%) prevents a phantom column at 340-639px (bare 320px floor would) */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 22px;
}
/* center lone orphan card in a 3-col row — scoped to ≥1024 where 3 columns exist */
@media (min-width: 1024px) {
  .lz-yt-grid > .lz-yt-card:last-child:nth-child(3n+1) {
    grid-column: 2 / 3;
  }
}
.lz-yt-card {
  position: relative;
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: 14px;
  overflow: hidden;
  padding: 0 0 18px;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lz-yt-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.28);
}
.lz-yt-card--promoted {
  border-color: var(--p-500);
  box-shadow: 0 0 0 1px var(--p-500) inset;
}
/* Top banner — decorative gradient, aria-hidden */
.lz-yt-card__banner {
  height: 70px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(135deg, #15803D 0%, #22C55E 60%, #4ADE80 100%);
}
.lz-yt-card__promoted-pill {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #FACC15;
  font: 700 11px/1.2 var(--font-sans);
  letter-spacing: 0.02em;
  backdrop-filter: blur(2px);
  z-index: 2;
}
.lz-yt-card__avatar-wrap {
  /* pull avatar up to overlap the banner/surface seam */
  margin: -34px auto 0;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
}
.lz-yt-card__avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--sf-surface);
  background: var(--sf-surface-2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.lz-yt-card__avatar--fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #EF4444, #B91C1C);
  color: #fff;
  font: 800 24px/1 var(--font-sans);
}
.lz-yt-card__head {
  margin-top: 10px;
  text-align: center;
  padding: 0 18px;
}
.lz-yt-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--sf-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  /* reserve full 2-line slot so all cards equalise in height */
  min-height: calc(1.25em * 2);
}
.lz-yt-card__handle {
  margin-top: 2px;
  font-size: 12px;
  color: var(--sf-text-3);
}
.lz-yt-card__stats {
  margin: 16px 18px 0;
  display: grid;
  /* minmax(0,1fr) not 1fr — plain 1fr = minmax(auto,1fr) and lets "SUBSCRIBERS" widen its column */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--sf-surface-2);
  border: 1px solid var(--sf-border);
  border-radius: 10px;
  overflow: hidden;
}
.lz-yt-stat {
  padding: 10px 4px;
  text-align: center;
  border-inline-end: 1px solid var(--sf-border);
}
.lz-yt-stat:last-child { border-inline-end: none; }
.lz-yt-stat__num {
  font-size: 18px;
  font-weight: 700;
  color: var(--sf-text);
  line-height: 1.15;
}
.lz-yt-stat__label {
  margin-top: 2px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sf-text-3);
}
.lz-yt-card__cta {
  margin: 16px 18px 0;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  background: var(--sf-surface-2);
  border: 1px solid var(--sf-border-strong, var(--sf-border));
  color: var(--sf-text);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  margin-top: auto;
}
.lz-yt-card__cta:hover {
  background: var(--sf-surface);
  border-color: var(--p-500);
  transform: translateY(-1px);
}
.lz-yt-card__cta svg { flex-shrink: 0; }
/* not .btn-sm so the mobile 44px tap-target rule doesn't apply — patch explicitly */
@media (max-width: 640px) {
  .lz-yt-card__cta { min-height: 44px; }
  /* shrink banner + avatar on phones — 10+ cards is ~3000px of scroll at full size */
  .lz-yt-card__banner { height: 50px; }
  .lz-yt-card__avatar-wrap {
    width: 60px;
    height: 60px;
    margin: -22px auto 0;
  }
  .lz-yt-card__avatar {
    width: 60px;
    height: 60px;
    border-width: 3px;
  }
  .lz-yt-card__avatar--fallback {
    font-size: 20px;
  }
  /* strip stats panel chrome on mobile — uppercase labels too noisy at 64px cell width */
  .lz-yt-card__stats {
    margin: 10px 16px 0;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  .lz-yt-stat {
    padding: 4px 0;
    border-inline-end: none;
  }
  .lz-yt-stat__num { font-size: 16px; }
  .lz-yt-stat__label {
    margin-top: 1px;
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
  }
}

/* Site footer */
.lz-site-footer {
  border-top: 1px solid var(--sf-border);
  background: var(--sf-surface-2);
  /* bottom 88px clears fixed Ko-fi + Tawk.to widgets so they don't overlay the legal nav */
  padding: 18px 32px 88px;
  /* sticky-footer: margin-block-start:auto consumes remaining flex space
     (first half is min-height:100vh + flex-column on body.ds-page in design-system.css) */
  margin-block-start: auto;
  font-size: 12px;
  color: var(--sf-text-3);
}
/* two-column desktop, single-column mobile */
.lz-site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
}
.lz-site-footer__left,
.lz-site-footer__right {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.lz-site-footer__brand {
  color: var(--sf-text-2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.lz-site-footer__brand:hover {
  color: var(--sf-text);
  border-bottom-style: solid;
  border-bottom-color: var(--sf-text-3);
}
.lz-site-footer__disclaimer { color: var(--sf-text-3); }
.lz-site-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--sf-text-3);
}
.lz-site-footer__flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  vertical-align: -2px;
  border-radius: 2px;
}
/* stack vertically on tablet/phone — two columns wrap awkwardly between 641-960px */
@media (max-width: 960px) {
  .lz-site-footer { padding: 16px 20px 88px; text-align: center; }
  .lz-site-footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  /* display:contents flattens the two wrappers so all 4 rows share the same uniform gap */
  .lz-site-footer__left,
  .lz-site-footer__right {
    display: contents;
  }
  /* min-height:44px on links inflates the nav box by ~28px; negative margin compensates so
     text aligns to the 14px rhythm of surrounding rows */
  .lz-site-footer__legal {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-block: -14px;
  }
  .lz-site-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
@media (max-width: 640px) {
  .lz-site-footer { padding: 14px 18px 88px; }
}

/* Footer legal nav */
.lz-site-footer__legal {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.lz-site-footer__legal a {
  color: var(--sf-text-2);
  text-decoration: none;
  font-size: 12px;
}
.lz-site-footer__legal a:hover {
  color: var(--p-700);
  text-decoration: underline;
}
.dark .lz-site-footer__legal a:hover {
  color: var(--p-400);
}

/* Phase 39: footer "Support us" link drops its ♥ prefix — the heart
   was paired with the corner Ko-fi pill's heart label, but the
   corner pill is now cup-only (lz_cookie_consent.js sets the
   floating-chat text to empty), so the footer heart was a lone
   orphan. Keep the brand-green colour as the subtle nudge cue. */
.lz-site-footer__support {
  color: var(--p-600) !important;
}
.dark .lz-site-footer__support {
  color: var(--p-400) !important;
}

/* cookieconsent v3 (orestbida) — brand-color token overrides only */
#cc-main {
  --cc-btn-primary-bg: var(--p-700);
  --cc-btn-primary-hover-bg: var(--p-800);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-secondary-bg: var(--sf-surface-2);
  --cc-btn-secondary-hover-bg: var(--sf-surface);
  --cc-btn-secondary-color: var(--sf-text);
  --cc-btn-secondary-hover-color: var(--sf-text);
  --cc-btn-secondary-border-color: var(--sf-border);
  /* toggles: built from theme-aware --sf-* + brand --p-700, so one set
     renders correctly in both themes (green ON track everywhere) */
  --cc-toggle-off-bg: var(--sf-surface-2);
  --cc-toggle-on-bg: var(--p-700);
  --cc-toggle-readonly-bg: var(--sf-surface-2);
  --cc-toggle-off-knob-bg: var(--sf-surface);
  --cc-toggle-on-knob-bg: var(--sf-surface);
  --cc-toggle-readonly-knob-bg: var(--sf-surface);
  --cc-toggle-readonly-knob-icon-color: var(--sf-text);
}
/* Legal pages */
.lz-legal-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px 60px;
}
.lz-legal-shell .lz-breadcrumb {
  padding: 18px 0 6px;
  font-size: 13px;
}
.lz-legal-shell .lz-breadcrumb a {
  color: var(--sf-text-2);
  text-decoration: none;
  padding: 4px 8px;
  margin-inline-start: -8px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.lz-legal-shell .lz-breadcrumb a:hover {
  background: var(--sf-surface-2);
  color: var(--sf-text);
}

/* ── Hero ───────────────────────────────────────────── */
.lz-legal-hero {
  padding: 14px 0 22px;
  border-bottom: 1px solid var(--sf-border);
  margin-bottom: 28px;
}
.lz-legal-hero__eyebrow {
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-500);
  margin-bottom: 10px;
}
.lz-legal-hero__title {
  font: 800 38px/1.15 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--sf-text);
  margin: 0 0 18px;
}
.lz-legal-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.lz-legal-meta-chip {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sf-surface-2);
  border: 1px solid var(--sf-border);
  font: 500 13px/1.2 var(--font-sans);
  color: var(--sf-text);
}
.lz-legal-meta-chip__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sf-text-2);
  font-weight: 600;
}
.lz-legal-meta-chip time {
  font-variant-numeric: tabular-nums;
}
.lz-legal-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lz-legal-badge--gdpr {
  background: rgba(34, 197, 94, 0.10);
  color: var(--st-success, #15803d);
  border: 1px solid rgba(34, 197, 94, 0.30);
}
html.dark .lz-legal-badge--gdpr {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.40);
}
.lz-legal-badge--draft {
  background: rgba(234, 179, 8, 0.10);
  color: #a16207;
  border: 1px solid rgba(234, 179, 8, 0.30);
}
html.dark .lz-legal-badge--draft {
  background: rgba(234, 179, 8, 0.15);
  color: #fcd34d;
  border-color: rgba(234, 179, 8, 0.40);
}

/* ── Layout grid ────────────────────────────────────── */
.lz-legal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
@media (min-width: 960px) {
  .lz-legal-layout {
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 40px;
  }
}

/* ── ToC sidebar ────────────────────────────────────── */
.lz-legal-toc {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: 12px;
  padding: 16px 14px;
  font-size: 13px;
}
/* desktop sidebar hidden below 960 — long labels force min-width past viewport on 320px */
@media (max-width: 959px) {
  .lz-legal-toc {
    display: none;
  }
}
@media (min-width: 960px) {
  .lz-legal-toc {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
}
.lz-legal-toc__title {
  font: 700 11px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--sf-text-2);
  padding: 4px 8px 10px;
  border-bottom: 1px solid var(--sf-border);
  margin-bottom: 8px;
}
.lz-legal-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: lz-toc;
}
.lz-legal-toc__list li {
  counter-increment: lz-toc;
}
.lz-legal-toc__link {
  display: block;
  padding-block: 8px;
  padding-inline: 30px 10px;
  color: var(--sf-text-2);
  text-decoration: none;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.35;
  position: relative;
  transition: background 0.12s, color 0.12s;
}
.lz-legal-toc__link::before {
  content: counter(lz-toc);
  position: absolute;
  inset-inline-start: 8px;
  top: 8px;
  width: 18px;
  font: 700 11px/1.35 var(--font-mono);
  color: var(--sf-text-3, var(--sf-text-2));
  opacity: 0.7;
  text-align: end;
}
.lz-legal-toc__link:hover {
  background: var(--sf-surface-2);
  color: var(--sf-text);
}
.lz-legal-toc__link:hover::before { opacity: 1; color: var(--p-500); }
/* scrollspy — JS adds .is-current to closest-to-top section */
.lz-legal-toc__link.is-current {
  background: color-mix(in srgb, var(--accent) 12%, var(--sf-surface-2));
  color: var(--sf-text);
  font-weight: 600;
}
.lz-legal-toc__link.is-current::before {
  opacity: 1;
  color: var(--accent);
}

/* inline "Manage cookie preferences" button — anchor not button so it works when consent JS is unloaded */
.lz-inline-cookie-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  background: var(--sf-surface-2);
  border: 1px solid var(--sf-border-strong);
  color: var(--sf-text) !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 600;
}
.lz-inline-cookie-btn:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--sf-surface-2));
  border-color: var(--accent);
  color: var(--accent) !important;
}
.lz-inline-cookie-btn::before {
  content: "⚙";
  display: inline-block;
}

/* Mobile mini-ToC — hidden on desktop where sidebar handles it */
.lz-legal-mini-toc { display: none; }
@media (max-width: 959px) {
  .lz-legal-mini-toc {
    display: block;
    margin: 0 0 18px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: 10px;
    padding: 0;
  }
}
.lz-legal-mini-toc__summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  font: 600 13px/1.4 var(--font-sans);
  color: var(--sf-text-2);
  display: flex; align-items: center; gap: 8px;
}
.lz-legal-mini-toc__summary::-webkit-details-marker { display: none; }
.lz-legal-mini-toc__chev {
  display: inline-block;
  transition: transform 180ms ease;
  color: var(--sf-text-3);
}
.lz-legal-mini-toc[open] .lz-legal-mini-toc__chev { transform: rotate(90deg); }
.lz-legal-mini-toc__count { color: var(--sf-text-3); font-weight: 400; }
.lz-legal-mini-toc__list {
  list-style: none;
  margin: 0;
  padding: 4px 8px 10px 8px;
  border-top: 1px solid var(--sf-border);
}
.lz-legal-mini-toc__list li { padding: 0; }
.lz-legal-mini-toc__list a {
  display: block;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--sf-text-2);
  text-decoration: none;
  border-radius: 6px;
}
.lz-legal-mini-toc__list a:hover {
  background: var(--sf-surface-2);
  color: var(--sf-text);
}
.lz-legal-toc__cta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sf-border);
}
.lz-legal-toc__cta-link {
  display: block;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--p-500);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.lz-legal-toc__cta-link:hover {
  background: var(--sf-surface-2);
  color: var(--p-400, var(--p-500));
}

/* ── Body prose ─────────────────────────────────────── */
.lz-legal-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--sf-text);
  max-width: 72ch;
  counter-reset: lz-sec;
  scroll-behavior: smooth;
  /* min-width:0 prevents wide markdown tables / long URLs from blowing the grid track */
  min-width: 0;
}
.lz-shell .lz-legal-body > h2:first-child { margin-top: 0; }
/* .lz-shell scope (0,2,1) beats the Phase 37 .lz-shell h2 rule (0,1,1) so legal h2 stays 22px */
.lz-shell .lz-legal-body h2 {
  font: 800 22px/1.25 var(--font-sans);
  letter-spacing: -0.01em;
  margin: 44px 0 14px;
  padding-top: 10px;
  color: var(--sf-text);
  counter-reset: lz-subsec;
  scroll-margin-top: 80px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.lz-legal-body h2::before {
  counter-increment: lz-sec;
  content: counter(lz-sec);
  font: 800 14px/1 var(--font-mono);
  color: var(--p-500);
  background: var(--sf-surface-2);
  border: 1px solid var(--sf-border);
  border-radius: 7px;
  padding: 8px 10px;
  flex: 0 0 auto;
  letter-spacing: 0;
}
.lz-legal-body h3 {
  font: 700 16px/1.4 var(--font-sans);
  margin: 26px 0 8px;
  color: var(--sf-text);
  scroll-margin-top: 80px;
}
.lz-legal-body h3::before {
  counter-increment: lz-subsec;
  content: counter(lz-sec) "." counter(lz-subsec) "  ";
  color: var(--sf-text-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lz-legal-body h4 {
  font: 700 13.5px/1.35 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 18px 0 6px;
  color: var(--sf-text-2);
}
.lz-legal-body p {
  margin: 0 0 14px;
}
.lz-legal-body ul,
.lz-legal-body ol {
  margin: 0 0 14px;
  padding-inline-start: 22px;
}
.lz-legal-body li {
  margin-bottom: 6px;
}
.lz-legal-body a {
  color: var(--p-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.dark .lz-legal-body a { color: var(--p-400); }
.lz-legal-body a:hover { text-decoration-thickness: 2px; }
.lz-legal-body code {
  background: var(--sf-surface-2);
  border: 1px solid var(--sf-border);
  border-radius: 4px;
  padding: 1px 5px;
  font: 500 12.5px/1 var(--font-mono);
}
.lz-legal-body pre {
  background: var(--sf-surface-2);
  border: 1px solid var(--sf-border);
  border-radius: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  font: 500 12.5px/1.5 var(--font-mono);
  margin: 0 0 14px;
}
.lz-legal-body blockquote {
  margin: 0 0 14px;
  padding: 10px 16px;
  border-inline-start: 3px solid var(--p-500);
  background: var(--sf-surface-2);
  color: var(--sf-text-2);
  border-radius: 0 6px 6px 0;
  font-style: italic;
}
.lz-legal-body hr {
  border: 0;
  border-top: 1px solid var(--sf-border);
  margin: 24px 0;
}
.lz-legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 16px;
  font-size: 13.5px;
  /* display:block removes intrinsic min-content so long cells don't drag the grid off-screen */
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
/* 3-col tables wrap mid-word at ~80px columns on phones — convert to stacked card-list below 560 */
@media (max-width: 560px) {
  .lz-legal-body table,
  .lz-legal-body tbody,
  .lz-legal-body tr,
  .lz-legal-body td {
    display: block;
    width: 100%;
  }
  .lz-legal-body table {
    overflow: visible;
    border: 0;
  }
  .lz-legal-body thead {
    display: none;
  }
  .lz-legal-body tr {
    border: 1px solid var(--sf-border);
    border-radius: 8px;
    background: var(--sf-surface-2);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .lz-legal-body td {
    padding: 4px 0;
    border-bottom: 0;
    line-height: 1.55;
  }
  .lz-legal-body td:first-child {
    font-weight: 700;
    color: var(--sf-text);
    font-size: 14px;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--sf-border);
  }
  .lz-legal-body td:not(:first-child) {
    color: var(--sf-text-2);
    font-size: 13px;
  }
}
.lz-legal-body th,
.lz-legal-body td {
  text-align: start;
  padding: 8px 10px;
  border-bottom: 1px solid var(--sf-border);
  vertical-align: top;
}
.lz-legal-body thead th {
  background: var(--sf-surface-2);
  font-weight: 700;
  color: var(--sf-text);
  border-bottom: 1px solid var(--sf-border);
}
/* auto-injected toc anchor spans — invisible but keyboard-focusable */
.lz-legal-body .toclink,
.lz-legal-body .headerlink { color: transparent; }
.lz-legal-body h2:hover .headerlink,
.lz-legal-body h3:hover .headerlink { color: var(--sf-text-2); }

/* Inline emphasis */
.lz-legal-body strong {
  font-weight: 700;
  color: var(--sf-text);
}

/* ── Foot block ─────────────────────────────────────── */
.lz-legal-foot {
  margin-top: 56px;
  padding: 22px 24px;
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--sf-text-2);
  line-height: 1.55;
}
.lz-legal-foot p { margin: 0 0 8px; }
.lz-legal-foot p:last-child { margin-bottom: 0; }
.lz-legal-foot a {
  color: var(--p-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
html.dark .lz-legal-foot a { color: var(--p-400); }
.lz-legal-foot__related {
  font-size: 12.5px;
  padding-top: 10px;
  border-top: 1px solid var(--sf-border);
  margin-top: 10px;
}
.lz-legal-foot__dot {
  margin: 0 8px;
  color: var(--sf-border);
}

html.dark #cc-main {
  --cc-bg: var(--sf-surface);
  --cc-primary-color: var(--sf-text);
  --cc-secondary-color: var(--sf-text-2);
  --cc-separator-border-color: var(--sf-border);
  --cc-section-category-border: var(--sf-border);
  --cc-cookie-category-block-bg: var(--sf-surface-2);
  --cc-cookie-category-block-border: var(--sf-border);
  /* keep the block fill on hover (dropping to --sf-surface merges it into
     the modal bg and the outline vanishes); brighten the border instead */
  --cc-cookie-category-block-hover-bg: var(--sf-surface-2);
  --cc-cookie-category-block-hover-border: var(--sf-border-strong);
  --cc-cookie-category-expanded-block-bg: var(--sf-surface-2);
  --cc-overlay-bg: rgba(0, 0, 0, 0.55);
  --cc-footer-bg: var(--sf-surface-2);
  --cc-footer-color: var(--sf-text-2);
  --cc-footer-border-color: var(--sf-border);
}

/* Page container */
.lz-shell {
  box-sizing: border-box;
  max-width: 1280px;
  width: 100%;
  min-width: 0;
  margin-inline: auto;
  padding-inline: var(--sp-shell-gutter);
  overflow-x: hidden;  /* last-resort guard against unbreakable content pushing past viewport */
}

/* hero needs its own inline padding to match the rest of the page's gutter */
.lz-shell .lz-hero {
  padding-block: var(--sp-hero-y);
  padding-inline: clamp(20px, 4vw, 48px);
}

/* grow lede with type rather than a fixed px cap */
.lz-shell .lz-hero .lede {
  max-width: 60ch;
  font-size: var(--fz-body);
  line-height: var(--lh-body);
}

/* Type-scale tokens */
.lz-shell .lz-hero h1 {
  font-size: var(--fz-h1);
  line-height: var(--lh-tight);
}

/* /contact email card — 3 flex children squeeze at 320; stack to column */
@media (max-width: 480px) {
  .lz-channel-card--email {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .lz-channel-card--email .lz-channel-card__body {
    flex: 1 1 calc(100% - 54px);  /* full row minus the 40px icon + 14px gap */
    min-width: 0;
  }
  .lz-channel-card--email .lz-channel-card__addr {
    /* break-all so masked address doesn't clip */
    overflow: visible;
    white-space: normal;
    word-break: break-all;
    font-size: 12px;
  }
  .lz-channel-card--email .lz-channel-card__copy {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 44px;
  }
}

/* type-scale floor — clamp lower bound calibrated for tablets; pull down for phones */
@media (max-width: 480px) {
  :root {
    --fz-h1: 26px;
    --fz-h2: 21px;
    --fz-h3: 17px;
  }
}
@media (min-width: 481px) and (max-width: 640px) {
  :root {
    --fz-h1: 30px;
    --fz-h2: 24px;
    --fz-h3: 18px;
  }
}

/* hero row collapse — 2-col class-based grid not caught by the generic inline-style rules */
.lz-shell .lz-hero .hero-row {
  gap: var(--sp-section);
}
@media (max-width: 720px) {
  .lz-shell .lz-hero .hero-row {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4);
  }
}

/* Section heading scale */
.lz-shell h1 { font-size: var(--fz-h1); line-height: var(--lh-tight); letter-spacing: -0.035em; }
.lz-shell h2 { font-size: var(--fz-h2); line-height: var(--lh-snug); letter-spacing: -0.025em; }
.lz-shell h3 { font-size: var(--fz-h3); line-height: var(--lh-snug); letter-spacing: -0.015em; }
.lz-shell .t-h1 { font-size: var(--fz-h1); line-height: var(--lh-tight); }
.lz-shell .t-h2 { font-size: var(--fz-h2); line-height: var(--lh-snug); }
.lz-shell .t-h3 { font-size: var(--fz-h3); line-height: var(--lh-snug); }
/* text-wrap:balance avoids short orphan fragments; silently ignored by older browsers */
.lz-shell h1, .lz-shell .t-h1 { text-wrap: balance; }

/* KPI tile numbers — use token so they scale with viewport */
.lz-shell .card .big,
.lz-shell .card .kpi-value,
.lz-shell .kpi-tile__value {
  font-family: var(--font-mono);
  font-size: var(--fz-data);
  line-height: var(--lh-data);
  font-feature-settings: 'tnum';
  letter-spacing: -0.02em;
}

/* Mobile drawer */
.lz-drawer-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: var(--sp-2);
  color: var(--sf-text);
  cursor: pointer;
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
}
.lz-drawer-toggle:hover { background: var(--bg-surface-2); }

/* admin top nav — hidden on desktop (sidebar takes its role), flex at <=960 */
.lz-nav.lz-nav--admin { display: none; }

.lz-drawer-toggle .lz-burger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 22px;
}
.lz-drawer-toggle .lz-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.lz-drawer-host {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(320px, 86vw);
  background: var(--bg-page);
  border-inline-end: 1px solid var(--border-default);
  box-shadow: 18px 0 40px rgba(0, 0, 0, 0.5);
  padding: var(--sp-5) var(--sp-3);
  overflow-y: auto;
  z-index: 1001;
  transform: translateX(-100%);
  transition: transform var(--dur-mid) var(--ease-out);
  visibility: hidden;
}
.lz-drawer-backdrop {
  /* display:none not visibility:hidden — opacity-only left a clickable invisible overlay in DevTools */
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-out);
}
body.lz-drawer-open .lz-drawer-host {
  transform: translateX(0);
  visibility: visible;
}
body.lz-drawer-open .lz-drawer-backdrop {
  display: block;
  opacity: 1;
  pointer-events: auto;
}
body.lz-drawer-open { overflow: hidden; }

.lz-drawer-host__brand {
  font-weight: 700;
  font-size: var(--fz-body);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
  color: var(--sf-text);
  text-decoration: none;
}
.lz-drawer-group { margin-bottom: var(--sp-4); }
.lz-drawer-group__label {
  font-size: var(--fz-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: var(--sp-2) var(--sp-3);
  opacity: 0.85;
  font-weight: 600;
}
.lz-drawer-host a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  font-size: var(--fz-body);
  color: var(--sf-text-2);
  text-decoration: none;
  border-radius: var(--r-md);
  min-height: 44px;
  transition: background var(--dur-fast) var(--ease-snap),
              color var(--dur-fast) var(--ease-snap);
}
.lz-drawer-host a.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.lz-drawer-host a:hover { background: var(--bg-surface-2); color: var(--sf-text); }
.lz-drawer-host a .glyph { font-size: var(--fz-body); width: 1.2em; text-align: center; opacity: 0.7; }

.lz-drawer-host__account {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.lz-drawer-host__account .acct {
  flex: 1;
  font-size: var(--fz-small);
  color: var(--sf-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* collapse desktop nav, show drawer toggle below 960 */
@media (max-width: 960px) {
  /* bumped from 720→960 (iPad Mini 744px overflowed the ~900px desktop layout)
     :not(.brand) keeps the logo visible — previous rule caught it as a plain anchor */
  .lz-nav__inner > a:not(.brand),
  .lz-nav__inner > .lz-navmenu,
  .lz-nav__inner > .acct,
  .lz-nav__inner > .spacer {
    display: none !important;
  }
  .lz-nav__inner {
    overflow: visible !important;
    flex-wrap: nowrap;
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-3);
    align-items: center;
  }
  /* brand left / theme toggle right / burger rightmost — margin-inline-end:auto on brand pushes cluster right */
  .lz-nav__inner .brand          { flex-shrink: 0; margin-inline-end: auto; order: 0; }
  .lz-nav__inner .theme-toggle   { order: 1; }
  .lz-nav__inner .lz-drawer-toggle { display: inline-flex; order: 2; }
  /* negative margin so theme+burger read as one cluster, not two spaced items */
  .lz-nav__inner .theme-toggle + .lz-drawer-toggle,
  .lz-nav__inner .lz-drawer-toggle + .theme-toggle {
    margin-inline-start: -4px;
  }
}
/* backward compat for admin pages not yet on _admin_shell.html — .lz-admin-hamburger gate below supersedes this */
@media (max-width: 960px) {
  .lz-asidenav nav,
  .lz-asidenav .head,
  .lz-asidenav .foot {
    display: none;
  }
  .lz-asidenav { display: none; }
  .lz-admin {
    grid-template-columns: 1fr !important;
  }
  .lz-nav.lz-nav--admin { display: flex; }
  .lz-nav--admin .brand          { flex-shrink: 0; margin-inline-end: auto; order: 0; }
  .lz-nav--admin .lz-drawer-toggle { display: inline-flex; order: 1; }
  .lz-admin-body { padding-inline-start: var(--sp-4); }
}

/* Admin sidebar drawer — gated by body:has(.lz-admin-hamburger) so only migrated pages activate */
.lz-admin-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--sf-border);
  border-radius: var(--r-md, 8px);
  background: var(--sf-surface);
  color: var(--sf-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast, 120ms) var(--ease-out, ease-out);
}
.lz-admin-hamburger:hover { background: var(--sf-surface-2); }
.lz-admin-hamburger:focus-visible {
  outline: 2px solid var(--p-500);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  body:has(.lz-admin-hamburger) .lz-admin-hamburger {
    display: inline-flex;
  }
  /* drop sidebar from grid so main column gets 100% */
  body:has(.lz-admin-hamburger) .lz-admin {
    display: block;
  }
  /* fixed off-canvas drawer — nav/head/foot stay visible inside (unlike legacy 960 block) */
  body:has(.lz-admin-hamburger) .lz-asidenav {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(280px, 84vw);
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform 200ms var(--ease-out, ease-out);
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
  }
  /* restore column orientation — legacy 960 block set row for scroll-strip; without this items render horizontal + clip */
  body:has(.lz-admin-hamburger) .lz-asidenav nav {
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    gap: 1px;
    padding: 10px 8px;
  }
  /* undo scroll-strip's flex-shrink:0 + nowrap so links stretch full drawer width */
  body:has(.lz-admin-hamburger) .lz-asidenav nav a {
    flex-shrink: 1;
    white-space: normal;
    font-size: 13.5px;
    padding: 7px 12px;
  }
  /* show .grp labels — legacy block hid them for the scroll-strip */
  body:has(.lz-admin-hamburger) .lz-asidenav .grp {
    display: block;
    margin: 14px 12px 6px;
    font-size: 11px;
  }
  body:has(.lz-admin-hamburger) .lz-asidenav .head,
  body:has(.lz-admin-hamburger) .lz-asidenav .foot {
    display: flex;
  }
  body:has(.lz-admin-hamburger) .lz-asidenav.is-open {
    transform: translateX(0);
  }
  /* dim overlay — z-index 1099 (below drawer 1100); closed: pointer-events:none */
  body:has(.lz-admin-hamburger) .lz-admin-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1099;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms var(--ease-out, ease-out);
  }
  body:has(.lz-admin-hamburger) .lz-admin-drawer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}
/* Desktop fallback: when the new shell is in use AND viewport is
   >=1024px, the overlay must stay out of the layer tree entirely. The
   block above is wrapped in the <=1023 media query, so without this
   default the overlay <div> has no styling at all on desktop and would
   inherit a `display:block` fallback that could collide with the layout.
   Explicit display:none here keeps it inert. */
.lz-admin-drawer-overlay { display: none; }

/* prefers-reduced-motion: snap the drawer + overlay open/close. Users
   who explicitly opt out of motion shouldn't get a 200ms slide. */
@media (prefers-reduced-motion: reduce) {
  body:has(.lz-admin-hamburger) .lz-asidenav,
  body:has(.lz-admin-hamburger) .lz-admin-drawer-overlay {
    transition: none;
  }
}

/* ─── Sticky first column on admin tables (mobile) ─────────────
   AUDIT.md category F: tables wider than viewport scroll horizontally
   (Phase 36-3 mechanic) but operator loses track of which row they're
   acting on when action buttons are at the right edge. Sticky first
   column pins the row identity (nickname / id / code) while the data
   columns scroll. */
@media (max-width: 960px) {
  .lz-admin-body table.tbl th:first-child,
  .lz-admin-body table.tbl td:first-child {
    position: sticky;
    inset-inline-start: 0;
    background: var(--sf-surface);
    z-index: 1;
    box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.35);
  }
  .lz-admin-body table.tbl th:first-child {
    background: var(--sf-surface-2);
    z-index: 2;
  }

  /* Visible scrollbar + right-edge fade hint so operators see that
     the table scrolls horizontally. Mobile auto-hides native
     scrollbars by default, leaving no affordance. */
  .lz-admin-body .card:has(> table.tbl) {
    /* Always-visible thin scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--sf-border-strong) transparent;
    /* Hint that there's more to the right */
    position: relative;
    background-image:
      linear-gradient(to left, var(--bg-page), transparent 24px);
    background-attachment: local, scroll;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 32px 100%;
  }
  /* WebKit scrollbar styling — show on iOS Safari too */
  .lz-admin-body .card:has(> table.tbl)::-webkit-scrollbar {
    height: 8px;
    -webkit-appearance: none;
  }
  .lz-admin-body .card:has(> table.tbl)::-webkit-scrollbar-thumb {
    background: var(--sf-border-strong);
    border-radius: 4px;
  }
  .lz-admin-body .card:has(> table.tbl)::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* Form controls — cap to parent width; textarea intrinsic min ~355px overflows mobile */
.lz-shell input,
.lz-shell select,
.lz-shell textarea,
.lz-shell pre,
.lz-shell code {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.lz-shell textarea {
  width: 100%;
}
.lz-shell pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
  .lz-shell input[type='text'],
  .lz-shell input[type='email'],
  .lz-shell input[type='tel'],
  .lz-shell input[type='password'],
  .lz-shell input[type='number'],
  .lz-shell input[type='search'],
  /* input without explicit type= doesn't match [type='text'] — match separately */
  .lz-shell input:not([type]),
  .lz-shell select,
  .lz-shell textarea {
    font-size: 16px;  /* prevent iOS auto-zoom on focus */
    min-height: 44px; /* tap-target floor */
  }
}

/* Button polish */
@media (max-width: 768px) {
  /* WCAG 2.5.5 — 44px tap-target floor for all button sizes */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; }
}
.btn-primary {
  /* glow tracks --p-700 (var(--p-700)); bumped from p-600 value when primary moved to p-700 for WCAG AA */
  box-shadow: 0 4px 14px color-mix(in srgb, var(--p-700) 18%, transparent);
}
.dark .btn-primary {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--p-400) 22%, transparent);
}
.btn-primary:active { transform: translateY(1px); }

/* Ko-fi widget pinned bottom-left, opposite Tawk.to's bottom-right.
   !important overrides Ko-fi's overlay-widget.js inline styles.
   Ko-fi injects two wrappers (desktop 180×65, mobile 180×50) and toggles between them — both need the override.
   scale(0.78) shrinks the desktop pill to 140×51 at rest; hover restores to full 180×65. */
.floatingchat-container-wrap,
.floatingchat-container-wrap-mobi {
  right: auto !important;
  left: 24px !important;
  bottom: 16px !important;
}
.floatingchat-container-wrap {
  transform: scale(0.78);
  transform-origin: bottom left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.floatingchat-container-wrap:hover,
.floatingchat-container-wrap:focus-within {
  transform: scale(1);
}
main.lz-shell {
  padding-bottom: 96px;
}

/* pricing grid — 5 tiers × 280px floor = 1400px > lz-frame 1216px; drop to 220 + pin 5-col at ≥1280 */
.lz-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 18px;
}
@media (min-width: 1280px) {
  .lz-pricing-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Spacing utilities */
.lz-pad-md   { padding: clamp(14px, 2.5vw, 18px); }
.lz-pad-lg   { padding: clamp(22px, 3vw, 28px) clamp(20px, 4vw, 40px); }
.lz-pad-page { padding: clamp(20px, 3vw, 32px) clamp(16px, 4vw, 40px); }
.lz-mt-md    { margin-top: 14px; }
.lz-mt-lg    { margin-top: 22px; }
.lz-mb-md    { margin-bottom: 14px; }
.lz-mb-lg    { margin-bottom: 22px; }
.lz-max-prose { max-width: 62ch; }
.lz-max-card  { max-width: 540px; }
.lz-stack-tight { display: flex; flex-direction: column; gap: 8px; }
.lz-stack       { display: flex; flex-direction: column; gap: 14px; }

/* Skeleton loader */
.lz-skel {
  display: inline-block;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--sf-surface-2) 80%, transparent),
    color-mix(in srgb, var(--sf-text-3) 20%, var(--sf-surface-2)),
    color-mix(in srgb, var(--sf-surface-2) 80%, transparent)
  );
  background-size: 200% 100%;
  animation: lz-skel-shimmer 1.4s linear infinite;
  border-radius: 4px;
  height: 14px;
  width: 100%;
}
.lz-skel--text { height: 14px; }
.lz-skel--h    { height: 22px; border-radius: 6px; }
.lz-skel--pill { height: 18px; border-radius: 999px; max-width: 84px; }
.lz-skel--circle {
  width: 34px; height: 34px; border-radius: 50%;
}
@keyframes lz-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lz-skel { animation: none; }
}

/* Visually hidden / sr-only */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* P2-10: keyboard skip-to-content link. Off-screen by default, slides
   in on :focus as the first interactive element after page load. The
   z-index sits above every other surface (drawer backdrop is 1000, page
   alerts are ~999); cookie banner ~9999, hence 10000. */
.lz-skip-link {
  position: absolute;
  top: -48px;
  inset-inline-start: 8px;
  z-index: 10000;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--p-500);
  color: #fff;
  font: 600 14px/1 var(--font-sans);
  text-decoration: none;
  transition: top 0.18s ease;
}
.lz-skip-link:focus {
  top: 8px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Suppress the focus ring on main when reached via skip-link — the
   tabindex="-1" only exists to receive programmatic focus. */
#main-content:focus { outline: none; }

/* ─── Phase 38 — visible field labels ────────────────────────
   Review item #19 — placeholder-as-label fails WCAG 3.3.2.
   .field-label sits above the input as a consistent caption.
   Pair with placeholder text formatted as "e.g. <example>". */
.field-label {
  display: block;
  font: 600 12px/1.2 var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--sf-text);
  margin: 0 0 6px 2px;
}
.field-label .req { color: var(--accent); margin-inline-start: 2px; }
.field-hint {
  display: block;
  font: 500 11px/1.4 var(--font-sans);
  color: var(--sf-text-3);
  margin: 4px 0 0 2px;
}

/* card section heading — scoped (0,2,0) to beat the .lz-shell h2 token rule that inflates to 40px */
.lz-shell .lz-card-h {
  margin: 0 0 8px;
  font: 700 14px/1.2 var(--font-sans);
  color: var(--sf-text);
  letter-spacing: -0.005em;
}

/* Section heading + meta */
.lz-section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.lz-section-head__h { margin: 0; }
.lz-section-head__meta {
  font-size: 13px;
  color: var(--sf-text-2);
  position: relative;
  padding-inline-start: 12px;
}
.lz-section-head__meta::before {
  content: "›";
  position: absolute;
  inset-inline-start: 0;
  color: var(--sf-text-3);
}

/* KPI delta chip */
.lz-kpi-row { margin-top: 28px; }
/* on mobile CTA rows, pin buttons to full width so they don't shrink to content-width mismatch */
@media (max-width: 640px) {
  .row > .btn-lg,
  .actions > .btn,
  .lz-empty-hero__cta-row > .btn-lg,
  .lz-home-cta > .btn {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  /* wrappers must also fill parent — without this, 100%-basis children still shrink-wrap */
  .row,
  .actions,
  .lz-empty-hero__cta-row,
  .lz-home-cta {
    width: 100%;
    box-sizing: border-box;
  }
  /* longer translated labels (nb, de, ru...) push this past its 480px card at narrow widths — wrap instead */
  .login-fb-submit {
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}
/* GAM-13: give the widest CTA labels a little more room to breathe once they wrap to 2 lines */
@media (max-width: 400px) {
  .login-fb-submit,
  .lz-home-cta > .btn {
    font-size: 13px;
    line-height: 1.35;
  }
  /* grid items default to a content-based min-width floor — without this, a long nowrap
     label upstream can still force the whole hero column past the viewport */
  .is-public-page .lz-home-hero__grid > * {
    min-width: 0;
  }
}
.lz-kpi-row .kpi-card .d { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.lz-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 11px/1.4 var(--font-mono);
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.lz-delta--up {
  color: var(--st-success);
  background: var(--st-success-bg);
  border: 1px solid var(--st-success-border);
}
.lz-delta--down {
  color: var(--st-danger);
  background: var(--st-danger-bg);
  border: 1px solid var(--st-danger-border);
}

/* "How it works" live-proof cards */
.lz-how-it-works {
  padding: 0 clamp(20px, 4vw, 48px) 32px;
}
.lz-how-it-works > h2 { margin: 0 0 18px; }
.lz-how-grid { gap: 14px; }
.lz-how-card { display: flex; flex-direction: column; gap: 10px; }
.lz-how-card__h { margin: 6px 0 0; font-size: 16px; }
.lz-how-card__lede {
  color: var(--sf-text-2);
  margin: 0 0 4px;
}
.lz-proof {
  margin-top: auto;
  padding: 12px 14px;
  background: var(--sf-surface-2);
  border: 1px solid var(--sf-border);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--sf-text-2);
}

.lz-proof-pid {
  display: flex; align-items: center; gap: 12px;
}
.lz-proof-pid__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--p-400), var(--p-700));
  flex-shrink: 0;
  position: relative;
}
.lz-proof-pid__avatar::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--sf-surface) 60%, transparent);
}
.lz-proof-pid__col { flex: 1; min-width: 0; }
.lz-proof-pid__nick { font-weight: 700; font-size: 13px; color: var(--sf-text); }
.lz-proof-pid__id {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--sf-text-3);
  margin-top: 2px;
  word-break: break-all;
}
.lz-proof-pid__pill {
  font-size: 10.5px; padding: 2px 8px;
}

.lz-proof-feed { display: flex; flex-direction: column; gap: 6px; }
.lz-proof-feed__row {
  display: flex; align-items: center; gap: 8px;
}
.lz-proof-feed__row--dim { opacity: 0.7; }
.lz-proof-feed__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--st-success);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-success) 20%, transparent);
  animation: lz-feed-pulse 2.4s ease-in-out infinite;
}
@keyframes lz-feed-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-success) 20%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--st-success) 0%,  transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .lz-proof-feed__dot { animation: none; }
}
.lz-proof-feed__code {
  font-weight: 700; color: var(--sf-text); font-size: 12.5px;
  letter-spacing: 0.03em;
}
/* bumped from sf-text-3 → sf-text-2 and 11.5 → 12px to clear WCAG AA on dark panel */
.lz-proof-feed__age { font-size: 12px; color: var(--sf-text-2); }
.lz-proof-feed__hint { font-size: 12px; color: var(--sf-text-2); }
.lz-proof-feed__more {
  margin-top: 4px;
  font-size: 12px;
  color: var(--sf-text-2);
}
.lz-proof-feed__more a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lz-proof-mail { display: flex; flex-direction: column; gap: 6px; }
.lz-proof-mail__row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--sf-text);
}
.lz-proof-mail__icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 18%, var(--sf-surface));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  font-size: 12px;
  flex-shrink: 0;
}
.lz-proof-mail__more {
  margin-top: 4px;
  font-size: 11.5px;
}
.lz-proof-mail__more a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── Phase 38 — admin table scanning aids (item #18) ────────
   Adds sticky thead, alternating row backgrounds, tabular-nums
   on numeric columns, and a brand-accent tinted hover so the
   eye lands on the active row immediately. Scoped to .lz-admin
   tables — public tables (gift-codes, etc.) keep the canvas
   defaults. */
.lz-admin .tbl thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--sf-surface-2);
  /* drop-shadow on the bottom edge keeps the thead visually pinned
     when the body scrolls under it (instead of a hard cut). */
  box-shadow: 0 1px 0 var(--sf-border), 0 2px 6px rgba(0,0,0,0.04);
}
.dark .lz-admin .tbl thead th {
  box-shadow: 0 1px 0 var(--sf-border), 0 2px 8px rgba(0,0,0,0.18);
}
.lz-admin .tbl tbody tr:nth-child(odd) td {
  background: color-mix(in srgb, var(--sf-surface-2) 25%, var(--sf-surface));
}
.lz-admin .tbl tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 8%, var(--sf-surface-2)) !important;
}
.lz-admin .tbl tbody td.mono,
.lz-admin .tbl tbody td.num,
.lz-admin .tbl tbody td[align="right"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.lz-admin .tbl tbody td.num,
.lz-admin .tbl tbody td[align="right"] {
  text-align: right;
}
/* forward-compatible aria-sort indicator — markup doesn't emit aria-sort yet */
.lz-admin .tbl thead th[aria-sort] {
  cursor: pointer;
  user-select: none;
}
.lz-admin .tbl thead th[aria-sort="ascending"]::after  { content: " ↑"; opacity: 0.7; }
.lz-admin .tbl thead th[aria-sort="descending"]::after { content: " ↓"; opacity: 0.7; }
.lz-admin .tbl thead th[aria-sort="none"]::after       { content: " ↕"; opacity: 0.4; }

/* /quick-claim page */
.qc-page {
  padding: clamp(24px, 4vw, 36px) clamp(16px, 4vw, 40px) 48px;
  max-width: 760px;
  margin: 0 auto;
}
.lz-breadcrumb {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1 var(--font-sans);
  color: var(--sf-text-3);
  text-decoration: none;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lz-breadcrumb:hover {
  color: var(--accent);
  text-decoration: underline;
}
.qc-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sf-text-2);
  max-width: 60ch;
  margin: 8px 0 22px;
}
.qc-lede strong { color: var(--sf-text); }
.qc-form { padding: clamp(18px, 3vw, 26px); }
.qc-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--sf-border);
  border-radius: var(--r-md);
  background: var(--sf-surface);
  color: var(--sf-text);
  resize: vertical;
  min-height: 104px;
}
.qc-pass { margin-top: 14px; }
.qc-pass summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--sf-text-2);
}
.qc-pass__input {
  flex: 1; max-width: 240px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  border: 1px solid var(--sf-border);
  border-radius: var(--r-md);
  background: var(--sf-surface);
  color: var(--sf-text);
}

/* Pass-code input with show/hide toggle — behaviour in lz_pass_toggle.js */
.lz-pass-input {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  position: relative;
  max-width: 240px;
}
.lz-pass-input > [data-pass-field] {
  flex: 1;
  padding-inline-end: 40px;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-inline-end: 0;
  letter-spacing: 0.04em;
}
.lz-pass-input__toggle {
  flex: 0 0 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-start-start-radius: 0;
  border-start-end-radius: var(--r-md);
  border-end-end-radius: var(--r-md);
  border-end-start-radius: 0;
  color: var(--sf-text-2);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.lz-pass-input__toggle:hover {
  background: var(--sf-surface-2);
  color: var(--sf-text);
}
.lz-pass-input__toggle:focus-visible {
  outline: 2px solid var(--p-500);
  outline-offset: 1px;
  z-index: 1;
}
.lz-pass-input__toggle[aria-pressed="true"] {
  color: var(--p-700);
}
.lz-pass-input__eye-on,
.lz-pass-input__eye-off {
  pointer-events: none;
}
.lz-pass-input__eye-off { display: none; }
.lz-pass-input__toggle[aria-pressed="true"] .lz-pass-input__eye-on  { display: none; }
.lz-pass-input__toggle[aria-pressed="true"] .lz-pass-input__eye-off { display: inline; }
/* 44px tap target on touch */
@media (hover: none) and (pointer: coarse) {
  .lz-pass-input__toggle { min-width: 44px; min-height: 44px; }
}

.qc-cta-row {
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.qc-disclaimer {
  font-size: 12px;
  color: var(--sf-text-3);
  margin: 10px 0 0;
}
.qc-uphint {
  margin-top: 14px;
  text-align: center;
}
.qc-uphint a {
  font-size: 13px;
  color: var(--sf-text-2);
  text-decoration: underline;
}

/* Home hero aux block — anon visitor only */
.hero-aux { /* row utility already supplies layout */ }
.hero-fineprint {
  margin-top: 12px;
  font-size: 13px;
  color: var(--sf-text-3);
  max-width: 60ch;
}

/* /giftcodes */
.gc-page { padding: clamp(20px, 4vw, 28px) clamp(16px, 4vw, 40px) 40px; }
.gc-head { gap: 20px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 26px; }
.gc-head__lede {
  max-width: 62ch;
  margin: 6px 0 0;
}
.gc-kpis { gap: 10px; }
.gc-kpi { padding: 10px 14px; }
.gc-kpi .n { font-size: 22px; }
.gc-kpi__live { color: var(--st-success); }
.gc-empty { text-align: center; }
.gc-empty__icon { font-size: 48px; margin-bottom: 8px; color: var(--sf-text-3); }
.gc-section { margin-bottom: 28px; }
.gc-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.gc-section__title { margin: 0; font-size: 18px; }
.gc-section__count { color: var(--st-success); }
.gc-section__hint { color: var(--sf-text-3); }

.gc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.gc-card {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 16px 18px 14px;
  background: var(--sf-surface);
  border: 1px solid color-mix(in srgb, var(--st-success) 28%, var(--sf-border));
  border-radius: var(--r-md);
  cursor: pointer;
  user-select: text;
  text-align: start;
  position: relative;
  transition: border-color 160ms ease, transform 60ms ease, box-shadow 160ms ease;
}
.gc-card:hover {
  border-color: color-mix(in srgb, var(--st-success) 60%, var(--sf-border));
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.dark .gc-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.30); }
.gc-card:active { transform: translateY(0.5px); }
.gc-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.gc-card__head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.gc-card__pill {
  display: inline-block;
  padding: 2px 9px; border-radius: 999px;
  background: var(--st-success-bg);
  color: var(--st-success);
  border: 1px solid var(--st-success-border);
  font: 600 11px/1.5 var(--font-sans);
}
.gc-card__fresh {
  display: inline-block;
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  font: 700 10.5px/1.5 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gc-card__code {
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 22px);
  letter-spacing: 0.04em;
  color: var(--sf-text);
  word-break: break-all;
  line-height: 1.15;
}
.gc-card__meta {
  display: flex; flex-wrap: wrap; gap: 5px;
  font-size: 11.5px; color: var(--sf-text-3);
}
.gc-card__dot { color: var(--sf-text-3); }

/* live-card compaction on phones — per-card pill redundant when section says "Live · 9" */
@media (max-width: 480px) {
  .gc-card {
    gap: 6px;
    padding: 12px 14px 11px;
  }
  .gc-card__pill {
    display: none;
  }
  .gc-card__code {
    font-size: 17px;
    letter-spacing: 0.03em;
  }
  .gc-card__meta {
    font-size: 11px;
    gap: 4px;
  }
}

/* .is-copied set by lz-copy-feedback delegate */
.gc-card.is-copied {
  border-color: var(--st-success);
  background: color-mix(in srgb, var(--st-success) 10%, var(--sf-surface));
}

.gc-noop { text-align: center; color: var(--sf-text-3); font-size: 13px; }

/* Expired collapse */
.gc-expired {
  border: 1px solid var(--sf-border);
  border-radius: var(--r-md);
  background: var(--sf-surface);
}
.gc-expired__summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600; font-size: 14px;
  color: var(--sf-text-2);
  display: flex; align-items: center; gap: 8px;
}
.gc-expired__summary::-webkit-details-marker { display: none; }
.gc-expired__chevron {
  display: inline-block;
  transition: transform 180ms ease;
  color: var(--sf-text-3);
}
.gc-expired[open] .gc-expired__chevron { transform: rotate(90deg); }
.gc-expired__hint { color: var(--sf-text-3); font-weight: 400; }
/* expired-code grid — compact tiles with strikethrough + hover-to-reveal */
.gc-expired__body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  padding: 4px 12px 12px;
}
.gc-expired__body .gc-row.is-expired {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  padding: 9px 11px;
  background: var(--sf-surface-2);
  border: 1px solid var(--sf-border);
  border-radius: var(--r-md);
  opacity: 0.65;
  transition: opacity 0.15s, border-color 0.15s;
}
.gc-expired__body .gc-row.is-expired:hover,
.gc-expired__body .gc-row.is-expired:focus-within {
  opacity: 1;
  border-color: var(--sf-border-strong);
}
/* light mode: 0.65 opacity blends toward white → code contrast 3.0:1, meta 1.66:1 (fail AA); bump to 0.85 + darker text */
:root:not(.dark) .gc-expired__body .gc-row.is-expired { opacity: 0.85; }
:root:not(.dark) .gc-expired__body .gc-row.is-expired .gc-code { color: #334155; }
:root:not(.dark) .gc-expired__body .gc-row.is-expired .gc-meta { color: #475569; }
/* parent disclosure already says "expired" — drop per-tile pill */
.gc-expired__body .gc-row.is-expired .gc-pill {
  display: none;
}
.gc-expired__body .gc-row.is-expired .gc-code {
  font: 700 13px/1.25 var(--font-mono);
  letter-spacing: -0.005em;
  color: var(--sf-text-2);
  text-decoration: line-through;
  text-decoration-color: var(--st-danger);
  text-decoration-thickness: 1.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.gc-expired__body .gc-row.is-expired .gc-meta {
  font: 500 10.5px/1.3 var(--font-sans);
  color: var(--sf-text-3);
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gc-expired__body .gc-row.is-expired .btn {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  min-height: 32px;
  padding: 4px 9px;
  font-size: 11px;
}
@media (max-width: 768px) {
  .gc-expired__body .gc-row.is-expired .btn { min-height: 44px; }
}

/* ─── Phase 38 — first-run empty hero (dashboard, etc.) ──────
   Review item #2 — dashboard with 0 linked Player IDs showed
   pure black space below the action bar. Empty hero supplies
   illustration + headline + lede + CTA pair so the next step is
   obvious. Layout flips column-direction at <=720 so the
   illustration sits below copy on mobile. */
.lz-empty-hero {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: clamp(20px, 4vw, 36px);
  align-items: center;
  margin-bottom: 22px;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--accent) 6%, var(--sf-surface)),
    var(--sf-surface) 70%);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--sf-border));
}
.lz-empty-hero__art {
  display: grid;
  place-items: center;
  color: var(--accent);
}
.lz-empty-hero__art img {
  width: 100%;
  max-width: 240px;
  height: auto;
}
.lz-empty-hero__h {
  margin: 6px 0 8px;
}
.lz-empty-hero__lede {
  color: var(--sf-text-2);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 0 18px;
}
.lz-empty-hero__lede strong { color: var(--sf-text); }
.lz-empty-hero__help {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lz-empty-hero__cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .lz-empty-hero {
    grid-template-columns: 1fr;
    text-align: start;
  }
  .lz-empty-hero__art { order: 2; }
  .lz-empty-hero__art img { max-width: 200px; }
}
/* illustration not load-bearing at 320 — hides to save ~120px vertical space */
@media (max-width: 480px) {
  .lz-empty-hero__art { display: none; }
  .lz-empty-hero { padding: 18px; margin-bottom: 16px; }
}

/* submit button keeps content width (~199px) and overhangs on narrow cards — force full width */
@media (max-width: 640px) {
  .js-add-uid-form .row > .btn,
  .js-add-uid-form .row > input {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Kebab "···" menu — destructive actions separated from routine ones */
.lz-kebab { position: relative; display: inline-block; }
.lz-kebab__btn {
  padding: 6px 10px !important;
  font-size: 18px;
  line-height: 1;
}
.lz-kebab__list {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  min-width: 200px;
  background: var(--sf-surface);
  border: 1px solid var(--sf-border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  padding: 6px 0;
  z-index: 80;
}
.lz-kebab__list a,
.lz-kebab__list button {
  display: block; width: 100%;
  padding: 8px 14px; text-align: start;
  background: transparent; border: 0;
  color: var(--sf-text);
  font-size: 13.5px; font-family: inherit;
  text-decoration: none; cursor: pointer;
}
.lz-kebab__list a:hover,
.lz-kebab__list button:hover,
.lz-kebab__list a:focus-visible,
.lz-kebab__list button:focus-visible {
  background: var(--sf-surface-2);
  outline: none;
}
.lz-kebab__list hr {
  margin: 4px 0;
  border: 0;
  border-top: 1px solid var(--sf-border);
}
.lz-kebab__danger { color: var(--st-danger) !important; }
.lz-kebab__danger:hover { background: var(--st-danger-bg) !important; }

/* Danger ghost button — neutral until hover, used for row-level Delete/Revoke alongside routine actions */
.btn-danger-ghost {
  color: var(--st-danger);
  background: transparent;
  border: 1px solid transparent;
}
.btn-danger-ghost:hover {
  background: var(--st-danger-bg);
  border-color: var(--st-danger-border);
}
.btn-danger-ghost:focus-visible {
  outline: 2px solid var(--st-danger);
  outline-offset: 2px;
}
.btn-danger-ghost[disabled] {
  color: var(--sf-text-3);
  background: transparent;
  cursor: not-allowed;
}

/* disabled button — explicit color token rather than opacity:0.5 which fails WCAG AA */
.btn-disabled,
.btn.is-disabled {
  color: var(--sf-text-3);
  background: transparent;
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

/* Admin sub-section empty state — lighter than .lz-empty-hero, no illustration/CTA */
.lz-admin-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 16px;
  color: var(--sf-text-2);
  font-size: 13.5px;
  line-height: 1.55;
  gap: 6px;
}
.lz-admin-empty__glyph {
  font-size: 32px;
  line-height: 1;
  color: var(--sf-text-3);
  margin-bottom: 4px;
}
.lz-admin-empty__h {
  margin: 0;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--sf-text);
}
.lz-admin-empty__lede {
  max-width: 56ch;
  margin: 0;
  color: var(--sf-text-2);
}
.lz-admin-empty__cta {
  margin-top: 10px;
}

/* Copy-button feedback — .is-copied + .lz-pulse driven by lz_copy_feedback.js */
.btn.is-copied,
button.is-copied {
  background: var(--p-600) !important;
  color: #fff !important;
  border-color: var(--p-600) !important;
}
.dark .btn.is-copied,
.dark button.is-copied {
  background: var(--p-500) !important;
  color: #0B1220 !important;
  border-color: var(--p-500) !important;
}
@keyframes lz-pulse-once {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 50%, transparent); }
  60%  { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%,  transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 0%,  transparent); }
}
.lz-pulse {
  animation: lz-pulse-once 1.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lz-pulse { animation: none; }
}

/* ─── Phase 38 — step-number contrast token ─────────────────
   Review item #7 — "01 / 02 / 03" labels on the home "How it
   works" cards used --p-700 (var(--p-700) olive). On dark surface
   #121712 that's 3.42:1 — fails WCAG AA 4.5:1 for normal text.

   .lz-step-num pins to --p-700 in light theme (passes 4.88:1 on
   #FFFFFF) and --p-400 (var(--p-400) lime) in dark theme (passes
   10.96:1 on #121712). Same shape used wherever a "small numeral
   accent" is wanted — KPI deltas, sequence counters, etc.

   The .mono / .t-sm dim issue: rewriting prose labels under
   "How it works" to .t-sm (slate-600 / slate-300 dark) lifts
   them from --sf-text-3 (3.5:1) to --sf-text-2 (~9:1 dark). */
.lz-step-num {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--p-700);
}
.dark .lz-step-num { color: var(--p-400); }

/* .dim inside .card: --sf-text-3 (~slate-400) fails AA at ≤13px in dark mode; bump to sf-text-2 */
.card .dim,
.card .muted { color: var(--sf-text-2); }

/* Theme-toggle transition — heavy-paint hosts only, not * (would trip prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  body,
  .card,
  .lz-frame,
  .lz-shell,
  .lz-nav,
  .lz-side,
  .lz-admin-head,
  .lz-admin-main,
  .lz-admin-body,
  .lz-site-footer,
  .tbl thead th,
  .tbl tbody td,
  .pill,
  .btn,
  input, textarea, select {
    transition: background-color 220ms ease,
                border-color     220ms ease,
                color            220ms ease;
  }
}

/* Admin chrome */

/* Compact table — line-height:1 required: Chromium adds font ascent+descent on top of
   CSS line-height for table cells; anything >1 overshoots the target 34px row height */
.tbl.tbl-compact { font-size: 12.5px; }
.tbl.tbl-compact thead th {
  padding: 6px 12px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sf-text-3);
}
.tbl.tbl-compact tbody td {
  padding: 4px 12px;
  line-height: 1;
  vertical-align: middle;
}
.tbl.tbl-compact tbody tr:hover {
  background: var(--sf-surface-2);
}
.tbl.tbl-compact tbody tr td:first-child,
.tbl.tbl-compact thead th:first-child {
  padding-inline-start: 16px;
}
.tbl.tbl-compact tbody tr td:last-child,
.tbl.tbl-compact thead th:last-child {
  padding-inline-end: 16px;
}
/* Sortable header arrows — used by JS that sets aria-sort on th. */
.tbl.tbl-compact thead th[aria-sort] { cursor: pointer; user-select: none; }
.tbl.tbl-compact thead th[aria-sort="ascending"]::after { content: " ↑"; opacity: 0.6; }
.tbl.tbl-compact thead th[aria-sort="descending"]::after { content: " ↓"; opacity: 0.6; }

/* Sticky bulk-action bar — JS flips display:none → display:flex when selection count > 0 */
.lz-admin-actionbar {
  position: sticky;
  bottom: 14px;
  margin-top: 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--sf-surface-2);
  border: 1px solid var(--p-300);
  border-radius: var(--r-md);
  padding: 10px 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  z-index: 50;
}
.dark .lz-admin-actionbar {
  border-color: color-mix(in srgb, var(--p-500) 40%, transparent);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
/* Inline variant — no sticky positioning; placed directly under search row */
.lz-admin-actionbar--inline {
  position: static;
  bottom: auto;
  margin-top: 0;
  margin-bottom: 12px;
}

/* Filter bar — column shape set inline per page, rest here */
.lz-admin-filterbar {
  display: grid;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}
.lz-admin-filterbar label {
  display: block;
}
.lz-admin-filterbar label > span.dim {
  font-size: 11px;
  display: block;
  margin-bottom: 4px;
}
.lz-admin-filterbar input,
.lz-admin-filterbar select {
  width: 100%;
  height: 38px;
  box-sizing: border-box;
}
/* match btn height to inputs; also normalises date-picker chrome (~2px taller than text/select) */
.lz-admin-filterbar .btn {
  min-height: 38px;
  box-sizing: border-box;
}

/* Compact KPI — tighter padding for dense admin dashboards */
.kpi-card.kpi-compact { padding: 14px 16px; }
.kpi-card.kpi-compact .n { font-size: 22px; margin-top: 6px; }
.kpi-card.kpi-compact .e { font-size: 10.5px; }
.kpi-card.kpi-compact .d { margin-top: 6px; }

/* Deeplink KPI tile — whole tile is clickable; resets anchor defaults */
.kpi-card.kpi-deeplink {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--sf-text);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}
.kpi-card.kpi-deeplink:hover,
.kpi-card.kpi-deeplink:focus-visible {
  border-color: var(--p-400);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--p-500) 12%, transparent);
  outline: none;
}
.kpi-card.kpi-deeplink:active { transform: translateY(1px); }
.kpi-card.kpi-deeplink .n {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--p-700);
}
.dark .kpi-card.kpi-deeplink .n { color: var(--p-300); }
.kpi-card.kpi-deeplink__arrow,
.kpi-card.kpi-deeplink .kpi-deeplink__arrow {
  display: inline-block;
  margin-inline-start: 6px;
  transition: transform 120ms ease;
}
.kpi-card.kpi-deeplink:hover .kpi-deeplink__arrow {
  transform: translate(2px, -2px);
}

/* ─── Phase 39-03 — operations dashboard (/admin/) ─────────────────────
   The home dashboard rebuild adds a small set of section-level chrome
   on top of the Wave-1 shell + chrome partials:

     .lz-section            — section wrapper (margin-collapse-safe).
     .lz-section-h          — uppercase eyebrow heading above each block
                              (KPIs / audit feed / quick actions /
                              recent redemptions). Distinct from
                              .lz-card-h (per-card heading) — pre-Phase-
                              39 admin pages use .lz-card-h heavily and
                              swapping them out is a separate sweep.
     .lz-mt-lg              — top spacer for vertical rhythm between
                              sections (24px).
     .lz-admin-quickactions — 4-up grid that wraps to 2x2 on tablet and
                              stack on narrow widths.
     .lz-quickaction-tile   — tile body: details / anchor / form share
                              the same chrome via modifier classes.

   Threshold-coloring tokens (st-info / st-warn / st-danger /
   st-success / dim) already exist site-wide; the new tiles just
   consume them. */

.lz-section { display: block; }
/* h2.lz-section-h selector bumps specificity (0,1,1) so .lz-shell h2
   at line 2499 stops winning the cascade and forcing eyebrow headings
   to render at the design-token h2 size (40px). Eyebrow treatment:
   small caps with letter-spacing for a "section label" feel that
   doesn't compete with the tile values below it. */
h2.lz-section-h,
.lz-section-h {
  font: 700 11px/1.2 var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-text-3);
  margin: 0 0 12px;
}
.lz-mt-lg { margin-top: 24px; }

/* Quick-action tiles — 4-up grid that wraps to 2x2 on tablet and to
   1-up on the tightest widths. Phones aren't a target (CONTEXT.md);
   the 1-up stack just keeps the page legible if a viewer dragged the
   window narrow. */
.lz-admin-quickactions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1023px) {
  .lz-admin-quickactions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .lz-admin-quickactions { grid-template-columns: minmax(0, 1fr); }
}

.lz-quickaction-tile {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--r-md, 10px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--sf-text);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
  min-width: 0;
}
.lz-quickaction-tile:hover,
.lz-quickaction-tile:focus-within {
  border-color: var(--p-400);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--p-500) 14%, transparent);
}
.lz-quickaction-tile:active { transform: translateY(1px); }
.lz-quickaction-tile summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  list-style: none;
}
.lz-quickaction-tile summary::-webkit-details-marker { display: none; }
.lz-quickaction-tile[open] summary { margin-bottom: 6px; }
.lz-quickaction-tile[open] > form {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.lz-qa-icon {
  width: 28px; height: 28px;
  display: inline-grid;
  place-items: center;
  background: var(--p-50, color-mix(in srgb, var(--p-500) 12%, transparent));
  color: var(--p-700);
  border-radius: 8px;
  font: 700 14px/1 var(--font-sans, sans-serif);
  flex: 0 0 auto;
}
.dark .lz-qa-icon {
  background: color-mix(in srgb, var(--p-500) 18%, transparent);
  color: var(--p-200);
}
.lz-qa-label { font-weight: 700; font-size: 13.5px; }
.lz-qa-hint  { font-size: 11.5px; color: var(--sf-text-3); }

/* Form-as-tile — inner button uses all:unset so form tile chrome shows through */
.lz-qa-form { padding: 0; }
.lz-qa-form > .lz-qa-button {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 14px 16px;
  box-sizing: border-box;
}
.lz-qa-form > .lz-qa-button:focus-visible {
  outline: 2px solid var(--p-400);
  outline-offset: -2px;
  border-radius: var(--r-md, 10px);
}

/* danger modifier — used when maintenance is ON ("Exit" = destructive direction) */
.lz-qa-danger { border-color: var(--st-danger-border, rgba(239, 68, 68, 0.4)); }
.lz-qa-danger .lz-qa-icon {
  background: var(--st-danger-bg, rgba(239, 68, 68, 0.12));
  color: var(--st-danger, #ef4444);
}
.lz-qa-danger:hover,
.lz-qa-danger:focus-within {
  border-color: var(--st-danger, #ef4444);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.18);
}

/* gift-code status pills via data-status attribute */
.pill[data-status="live"]    { background: var(--st-success-bg); color: var(--st-success); border: 1px solid var(--st-success-border); }
.pill[data-status="hidden"]  { background: var(--sf-surface-2);  color: var(--sf-text-2);  border: 1px solid var(--sf-border-strong); }
.pill[data-status="expired"] { background: var(--st-warn-bg);    color: var(--st-warn);    border: 1px solid var(--st-warn-border); }
.pill[data-status="retired"] { background: var(--st-danger-bg);  color: var(--st-danger);  border: 1px solid var(--st-danger-border); }

/* Admin Cmd/Ctrl+K command palette — controller: lz_admin_cmdk.js, partial: _admin_cmdk.html */
.lz-cmdk {
  position: fixed;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, 92vw);
  padding: 0;
  border: 1px solid var(--sf-border);
  border-radius: 12px;
  background: var(--sf-surface);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
  margin: 0;
  color: var(--sf-text);
}
.lz-cmdk::backdrop { background: rgba(0, 0, 0, 0.5); }

.lz-cmdk-form { display: flex; flex-direction: column; }

.lz-cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sf-border);
}
.lz-cmdk-icon { font-size: 16px; color: var(--sf-text-3); }
.lz-cmdk-input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font: 400 14.5px/1.4 var(--font-sans);
  color: var(--sf-text);
  min-width: 0;
}
.lz-cmdk-hint,
.lz-cmdk kbd {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--sf-border);
  border-radius: 4px;
  background: var(--sf-surface-2);
  font: 600 10px/1 var(--font-mono);
  color: var(--sf-text-3);
}

.lz-cmdk-results {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: min(420px, 60vh);
  overflow-y: auto;
}
.lz-cmdk-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  color: var(--sf-text);
}
.lz-cmdk-item.is-active {
  background: var(--p-50);
  color: var(--p-700);
}
.dark .lz-cmdk-item.is-active {
  background: color-mix(in srgb, var(--p-500) 18%, transparent);
  color: var(--p-200);
}
.lz-cmdk-item-icon { color: var(--sf-text-3); font-weight: 700; }
.lz-cmdk-item.is-active .lz-cmdk-item-icon { color: inherit; }
.lz-cmdk-item-label { font-weight: 600; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lz-cmdk-item-hint  { font-size: 11.5px; color: var(--sf-text-3); justify-self: end; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lz-cmdk-item.is-active .lz-cmdk-item-hint { color: inherit; opacity: 0.85; }
.lz-cmdk-item--empty { cursor: default; }
.lz-cmdk-item--empty .lz-cmdk-item-label { color: var(--sf-text-2); }

.lz-cmdk-foot {
  display: flex;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--sf-border);
  background: var(--sf-surface-2);
  font-size: 11px;
  color: var(--sf-text-3);
}

/* Topbar kbd-chip — the always-on affordance that surfaces the
   Cmd/Ctrl+K shortcut. Emitted by _admin_shell.html. The label "⌘K"
   ships server-side; the controller overwrites it with "Ctrl K" on
   non-Mac platforms after JS hydration. */
.lz-cmdk-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  margin-inline-start: 8px;
  border: 1px solid var(--sf-border);
  border-radius: 6px;
  background: var(--sf-surface-2);
  color: var(--sf-text-3);
  font: 600 11px/1 var(--font-mono);
  user-select: none;
  -webkit-user-select: none;
}
.lz-cmdk-trigger:hover { color: var(--sf-text); border-color: var(--p-400); }

/* Expandable audit/history details cell — compact summary, formatted pre on open */
.lz-audit-details {
  font-size: 12px;
}
.lz-audit-details > summary {
  cursor: pointer;
  font-family: var(--font-mono);
  color: var(--sf-text-2);
  list-style: revert;            /* keep the native disclosure marker */
  padding: 1px 0;
}
.lz-audit-details > summary:hover {
  color: var(--sf-text);
}
.lz-audit-details[open] > summary {
  color: var(--sf-text);
  margin-bottom: 4px;
}
.lz-audit-details > pre {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  background: var(--sf-surface-2);
  color: var(--sf-text);
  padding: 8px 10px;
  border-radius: 6px;
  margin: 0;
  max-width: 560px;
  max-height: 280px;
  overflow: auto;
  white-space: pre;
}
.lz-cmdk-trigger:focus-visible { outline: 2px solid var(--p-500); outline-offset: 2px; }

/* Admin inline form — collapsible Add/edit panels; column shape set inline per page */
.lz-admin-form {
  display: grid;
  gap: 14px;
}
.lz-admin-form__row {
  display: grid;
  gap: 12px;
  align-items: end;
}
.lz-admin-form label {
  display: block;
  min-width: 0;
  font-size: 12px;
}
.lz-admin-form label > span {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--sf-text-2);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.lz-admin-form input[type="text"],
.lz-admin-form input[type="url"],
.lz-admin-form input[type="number"],
.lz-admin-form input[type="email"],
.lz-admin-form select {
  width: 100%;
  height: 38px;
  padding: 8px 10px;
  box-sizing: border-box;
}
.lz-admin-form textarea {
  width: 100%;
  padding: 8px 10px;
  box-sizing: border-box;
  min-height: 72px;
  resize: vertical;
  font: 13px/1.5 var(--font-sans);
}
.lz-admin-form .btn {
  min-height: 38px;
  box-sizing: border-box;
}
.lz-admin-form__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sf-text);
  cursor: pointer;
  white-space: nowrap;
}
.lz-admin-form__check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}
.lz-admin-form__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Admin live markdown editor — textarea + live preview; preview uses server-side render pipeline */
.lz-md-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.lz-md-editor textarea {
  min-height: 160px;
  resize: vertical;
}
.lz-md-editor__preview {
  border: 1px solid var(--sf-border);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--sf-surface);
  min-height: 160px;
  font: 13.5px/1.5 var(--font-sans);
  overflow: hidden;
}
.lz-md-editor__preview-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  opacity: 0.7;
}
/* bleed alert to pane edges with negative margin so it matches the public full-bleed look */
.lz-md-editor__preview-body .lz-page-alert {
  margin: 0 -12px;
}
@media (max-width: 720px) {
  .lz-md-editor { grid-template-columns: 1fr; }
}

/* Admin row-action icons — SVG with text-glyph fallback; lz-icon--glyph modifier flips to glyph */
.lz-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.lz-icon svg {
  display: block;
}
.lz-icon-glyph {
  display: none;
}
.lz-icon--glyph svg {
  display: none;
}
.lz-icon--glyph .lz-icon-glyph {
  display: inline;
  line-height: 1;
  font-size: 13px;
}

/* ─── Phase 40 — Task status — expandable rows ─────────────── */

.lz-th-chev,
.lz-td-chev {
  width: 32px;
  min-width: 32px;
  text-align: center;
  padding-inline-start: 8px;
  padding-inline-end: 0;
}

.lz-task-chevron {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  padding: 4px 6px;
  line-height: 1;
  color: var(--sf-text-3);
  border-radius: var(--r-sm);
  transition: transform 0.15s ease, color 0.15s ease;
}
.lz-task-chevron:hover {
  color: var(--sf-text);
}
.lz-task-chevron[aria-expanded="true"] {
  transform: rotate(90deg);
  color: var(--sf-text);
}

.lz-task-row-expandable {
  cursor: pointer;
  transition: background 0.1s ease;
}
.lz-task-row-expandable:hover {
  background: var(--sf-surface-2);
}

.lz-td-chips {
  padding-top: 6px;
  padding-bottom: 6px;
}

.lz-game-id-chip {
  display: inline-flex;
  font: 500 12px/1 var(--font-mono);
  padding: 4px 8px;
  border-radius: var(--r-pill);
  cursor: pointer;
  border: none;
  margin: 1px 2px;
}
.lz-game-id-chip:hover {
  filter: brightness(1.1);
}

.lz-task-details > td {
  padding: 0 !important;
}

.lz-task-detail-pad {
  background: var(--sf-surface-2);
  border-top: 1px solid var(--sf-border);
  border-bottom: 1px solid var(--sf-border);
  padding: 10px 16px;
}

.lz-task-detail-tbl {
  font-size: 12.5px;
  width: 100%;
  border: none;
}
.lz-task-detail-tbl th,
.lz-task-detail-tbl td {
  padding: 5px 10px;
}
.lz-task-detail-tbl tbody tr:hover {
  background: transparent;
}

.lz-task-detail-msg {
  white-space: normal;
  word-break: break-word;
  max-width: 600px;
}

.lz-task-detail-foot {
  text-align: end;
  font-size: 12px;
  padding-top: 8px;
}
.lz-task-detail-foot a {
  color: var(--sf-text-3);
  text-decoration: underline;
}

/* ── Phase 47 — unlinked-account banner (taskstatus detail) ── */
.lz-unlinked-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--st-warn-bg);
  border: 1px solid var(--st-warn-border);
  color: var(--st-warn);
  font: 500 13px/1.4 var(--font-sans);
}
.lz-unlinked-banner a {
  margin-inline-start: auto;
  white-space: nowrap;
  font-weight: 700;
  color: var(--st-warn);
  text-decoration: underline;
}

/* per-category 3px left border on expandable rows — padding compensates for no layout shift */
.lz-task-detail-row > td:first-child {
  border-inline-start: 3px solid transparent;
  padding-inline-start: 8px;
}
.lz-task-detail-row--gift    > td:first-child { border-inline-start-color: var(--st-success); }
.lz-task-detail-row--checkin > td:first-child { border-inline-start-color: var(--st-info); }
.lz-task-detail-row--task    > td:first-child { border-inline-start-color: var(--st-warn); }
.lz-task-detail-row--vip     > td:first-child { border-inline-start-color: var(--p-500); }

/* Sticky-right "Actions" column — pinned so row controls stay reachable on horizontal scroll */
.lz-th-actions-sticky,
.lz-td-actions-sticky {
  position: sticky;
  inset-inline-end: 0;
  z-index: 3;
  border-inline-start: 1px solid var(--sf-border);
  box-shadow: -8px 0 14px -8px rgba(0, 0, 0, 0.75);
}
/* must match zebra + hover backgrounds verbatim; !important on hover mirrors the rule it overrides */
.lz-admin .tbl tbody tr td.lz-td-actions-sticky {
  background: var(--sf-surface);
}
.lz-admin .tbl tbody tr:nth-child(odd) td.lz-td-actions-sticky {
  background: color-mix(in srgb, var(--sf-surface-2) 25%, var(--sf-surface));
}
.lz-admin .tbl tbody tr:hover td.lz-td-actions-sticky {
  background: color-mix(in srgb, var(--accent) 8%, var(--sf-surface-2)) !important;
}
.lz-admin .tbl thead th.lz-th-actions-sticky {
  background: var(--sf-surface-2);
  z-index: 4;
}

/* Row-action icon buttons — 28×28 ghost squares; --danger tints red for destructive */
.lz-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.lz-row-actions .lz-row-action,
.tbl .lz-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  flex: 0 0 auto;
}
.lz-row-action--danger { color: var(--st-danger); }
.lz-row-action--danger:hover { color: var(--st-danger); }

/* stacked sub-lines in tbl-compact — line-height:1 means divs butt together; 3px margin opens them */
.tbl.tbl-compact tbody td div + div {
  margin-top: 3px;
}
.tbl.tbl-compact tbody td .row > * {
  margin-top: 0;
}
.tbl.tbl-compact tbody td .dim {
  line-height: 1.35;
}

/* Telegram join modal */
.lz-tg-modal {
  border: none;
  border-radius: var(--r-lg);
  padding: 0;
  max-width: 420px;
  width: 92%;
  background: transparent;
  color: inherit;
}
.lz-tg-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.lz-tg-modal__card {
  padding: 22px 24px;
}
.lz-tg-modal__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.lz-tg-modal__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
}
.lz-tg-modal__copy {
  min-width: 0;
}
.lz-tg-modal__title {
  margin: 2px 0 0;
  font-size: 18px;
  line-height: 1.3;
}
.lz-tg-modal__body {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
}
.lz-tg-modal__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 18px;
  white-space: normal;
  text-align: center;
}
.lz-tg-modal__foot {
  margin-top: 12px;
  justify-content: flex-end;
}
@media (max-width: 440px) {
  .lz-tg-modal__head { gap: 12px; }
  .lz-tg-modal__icon { width: 40px; height: 40px; }
}

/* ── Game tools (buildings / heroes reference) ───────────────────────── */
.lz-tools { max-width: 1100px; }
.lz-tools-head h1 { margin-bottom: .25rem; }
.lz-tools-sub { color: var(--fg-tertiary, #94A3B8); margin-top: 0; }
.lz-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 16px 0 28px; }
.lz-tool-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--border-default, #1F2937); border-radius: 12px; text-decoration: none; color: inherit; background: var(--bg-surface, #111827); transition: border-color .15s, transform .15s; }
.lz-tool-card:hover { border-color: var(--accent, #7CFC8A); transform: translateY(-2px); }
.lz-tool-card--soon { opacity: .55; pointer-events: none; }
.lz-pill { font-size: .7rem; padding: 1px 7px; border-radius: 999px; background: var(--accent, #7CFC8A); color: #06210b; vertical-align: middle; }
.lz-tools-search { width: 100%; max-width: 360px; padding: 9px 12px; margin: 6px 0 12px; border-radius: 10px; border: 1px solid var(--border-default, #1F2937); background: var(--bg-surface, #111827); color: inherit; }
.lz-tools-group { margin-top: 8px; }
.lz-building-card { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
.lz-building-icon { width: 40px; height: 40px; object-fit: contain; flex: none; }
.lz-building-name { font-weight: 600; }
.lz-crumb { font-size: .85rem; color: var(--fg-tertiary, #94A3B8); margin-bottom: 10px; }
.lz-crumb a { color: inherit; }
.lz-building-header { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.lz-building-hero-icon { width: 64px; height: 64px; object-fit: contain; flex: none; }
.lz-building-meta { color: var(--fg-tertiary, #94A3B8); margin: 2px 0; }
.lz-level-controls { margin: 12px 0; }
.lz-level-controls select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border-default, #1F2937); background: var(--bg-surface, #111827); color: inherit; }
.lz-table-wrap { overflow-x: auto; border: 1px solid var(--border-default, #1F2937); border-radius: 12px; }
.lz-stat-table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.lz-stat-table th, .lz-stat-table td { padding: 8px 12px; text-align: start; white-space: nowrap; border-bottom: 1px solid var(--border-default, #1F2937); }
.lz-stat-table thead th { position: sticky; top: 0; background: var(--bg-surface, #111827); }
.lz-tools-foot { color: var(--fg-tertiary, #94A3B8); font-size: .8rem; margin-top: 14px; }
.lz-tool-tabs { display: flex; gap: 6px; margin: 14px 0 4px; }
.lz-tab { padding: 7px 14px; border-radius: 9px; border: 1px solid var(--border-default, #1F2937); background: transparent; color: inherit; cursor: pointer; font: inherit; }
.lz-tab.is-active { background: var(--accent, #7CFC8A); color: #06210b; border-color: var(--accent, #7CFC8A); }
.lz-tool-panel[hidden] { display: none; }

/* /link-game tactical scanner */
.lz-lg {
  max-width: 600px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 52px) 0 64px;
}

/* Linking help page — reuses .lz-lg head / panel / protocol, but spans the full
   shell width like /giftcodes rather than the narrow scanner column */
.lz-lg.lz-help { max-width: none; }
.lz-lg__lede-link { font-size: 13px; margin: 10px 0 0; }

/* GAM-50 tap-to-authorize CTA — hidden until JS confirms a mobile UA */
.lz-lg__app-cta {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 18px;
}
.lz-lg__app-cta.is-visible { display: flex; }
.lz-lg__app-cta .btn {
  width: 100%; max-width: 360px; justify-content: center;
  padding: 16px 24px; font-size: 16px; font-weight: 600; min-height: 54px;
}
.lz-lg__app-cta-text { font-size: 13.5px; color: var(--sf-text-2); margin: 0; max-width: 360px; }
/* Lead-in that frames the QR as the "other device" alternative to the tap CTA */
.lz-lg__scan-lead {
  text-align: center;
  font-size: 14px;
  color: var(--sf-text-2);
  margin: 6px auto 16px;
  max-width: 420px;
}

/* "You'll need two screens" hero — line-art schematic + numbered breakdown */
.lz-help__hero {
  display: grid; grid-template-columns: clamp(200px, 26vw, 280px) 1fr;
  align-items: center; gap: clamp(16px, 4vw, 36px);
  padding: clamp(20px, 4vw, 32px); margin-bottom: 22px;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--sf-border));
}
.lz-help__scene-wrap { display: flex; justify-content: center; }
.lz-help__scene { width: 100%; max-width: 300px; height: auto; }
.lz-scene__bezel { fill: var(--sf-surface-2); stroke: var(--sf-border-strong); stroke-width: 2; }
.lz-scene__screen { fill: var(--sf-canvas); }
.lz-scene__line { stroke: var(--sf-text-3); stroke-width: 2; fill: none; stroke-linecap: round; }
.lz-scene__dot { fill: var(--sf-text-3); }
.lz-scene__qr path, .lz-scene__qr rect { fill: var(--accent); }
.lz-scene__reticle { stroke: var(--accent); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.lz-scene__beam {
  stroke: var(--accent); stroke-width: 2.5; fill: none; stroke-linecap: round;
  stroke-dasharray: 5 6; animation: lz-scene-beam 1s linear infinite;
}
.lz-scene__beam-head { stroke: var(--accent); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@keyframes lz-scene-beam { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) { .lz-scene__beam { animation: none; } }
.lz-help__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.lz-help__kicker-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.lz-help__hero-title { font-size: clamp(20px, 3vw, 25px); line-height: 1.2; font-weight: 700; color: var(--sf-text); margin: 0 0 8px; }
.lz-help__hero-text { font-size: 14px; line-height: 1.55; color: var(--sf-text-2); margin: 0 0 16px; max-width: 46ch; }
.lz-help__screens { display: flex; flex-direction: column; gap: 10px; }
.lz-help__screen { display: flex; align-items: flex-start; gap: 12px; }
.lz-help__screen-n {
  flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
.lz-help__screen-txt { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; color: var(--sf-text-3); }
.lz-help__screen-txt strong { font-size: 13.5px; font-weight: 600; color: var(--sf-text); }
@media (max-width: 620px) {
  .lz-help__hero { grid-template-columns: 1fr; }
  .lz-help__scene { max-width: 240px; }
}

.lz-help__grid { display: grid; gap: 18px; }
.lz-help__col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.lz-help__col .lz-help__card { margin-bottom: 0; }
@media (min-width: 900px) {
  .lz-help__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.lz-help__card { padding: clamp(20px, 4vw, 30px) clamp(18px, 4vw, 28px); margin-bottom: 18px; }
.lz-help__h2 { font-size: 18px; font-weight: 700; color: var(--sf-text); margin: 0 0 12px; }
/* Method sub-heading inside a help card (Tap / Or scan) */
.lz-help__h3 { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--sf-text-2); text-transform: uppercase; margin: 18px 0 10px; }
.lz-help__h3:first-of-type { margin-top: 4px; }
.lz-help__card p { font-size: 14px; line-height: var(--lh-body); color: var(--sf-text-2); margin: 0 0 12px; }
.lz-help__card p:last-child { margin-bottom: 0; }
.lz-help__aside { font-size: 13px; color: var(--sf-text-3); margin: 16px 0 0; }
.lz-help__share {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px;
}
.lz-help__url {
  flex: 1 1 240px; min-width: 0;
  padding: 9px 12px; border: 1px solid var(--sf-border); border-radius: var(--r-md);
  background: var(--sf-surface-2); color: var(--sf-text);
  font-size: 13px; overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .lz-help__share { flex-direction: column; align-items: stretch; }
  .lz-help__share .lz-help__url { flex-basis: auto; width: 100%; }
  .lz-help__share .btn { width: 100%; }
}
/* "Safe to share" trust panel — shield-check + lock chips */
.lz-help__trust {
  display: flex; gap: 13px; align-items: flex-start;
  margin-top: 16px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--sf-border));
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-md); background: var(--accent-soft);
}
.lz-help__trust-shield { flex-shrink: 0; color: var(--accent); line-height: 0; margin-top: 1px; }
.lz-help__trust-lead { font-size: 13px; line-height: 1.5; color: var(--sf-text-2); margin: 0 0 10px; }
.lz-help__trust-lead strong { color: var(--sf-text); }
.lz-help__trust-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.lz-help__chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--sf-border); background: var(--sf-surface);
  font-size: 11.5px; color: var(--sf-text-2);
}
.lz-help__chip svg { color: var(--sf-text-3); flex-shrink: 0; }

/* "Playing on PC?" caveat — icon-left note inside its own card */
.lz-help__pc { display: flex; gap: 13px; align-items: flex-start; }
.lz-help__pc-icon { flex-shrink: 0; color: var(--accent); line-height: 0; margin-top: 1px; }
.lz-help__pc-body p { font-size: 13.5px; line-height: 1.5; color: var(--sf-text-2); margin: 0 0 8px; }
.lz-help__pc-steps {
  margin: 0 0 8px; padding-inline-start: 18px;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; line-height: 1.45; color: var(--sf-text-2);
}
.lz-help__pc-steps strong { color: var(--sf-text); font-weight: 600; }
.lz-help__pc-sorry { font-size: 12.5px; font-style: italic; color: var(--sf-text-3); margin: 0; }
.lz-help__faq { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 9px; }
.lz-help__faq li { font-size: 13.5px; line-height: 1.5; color: var(--sf-text-2); }
.lz-help__faq strong { color: var(--sf-text); }
.lz-help__cta { text-align: center; margin-top: 24px; }

/* Heading */
.lz-lg__head { margin-bottom: clamp(22px, 4vw, 32px); }
.lz-lg__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.lz-lg__eyebrow-mark {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 10px var(--accent-glow);
  animation: lz-lg-breathe 2.4s ease-in-out infinite;
}
.lz-lg__title {
  font-size: var(--fz-h2); line-height: var(--lh-snug);
  font-weight: 700; letter-spacing: -0.01em;
  color: var(--sf-text); margin: 0 0 10px;
}
.lz-lg__accent { position: relative; white-space: nowrap; color: var(--sf-text); }
.lz-lg__accent::after {
  content: ""; position: absolute;
  left: -0.04em; right: -0.04em; bottom: 0.04em; height: 0.30em;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--accent) 55%, transparent) 4%,
    color-mix(in srgb, var(--accent) 90%, transparent) 50%,
    color-mix(in srgb, var(--accent) 50%, transparent) 96%);
  transform: skew(-4deg); z-index: -1;
  border-radius: 4px 9px 5px 10px / 7px 4px 10px 5px;
}
.lz-lg__lede {
  font-size: var(--fz-body); line-height: var(--lh-body);
  color: var(--sf-text-2); margin: 0; max-width: 52ch;
}

/* Shared panel chrome */
.lz-lg__panel {
  position: relative; overflow: hidden;
  border: 1px solid var(--sf-border);
  border-radius: var(--r-xl);
  background:
    radial-gradient(620px 280px at 50% -25%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, var(--sf-surface) 0%, var(--sf-canvas) 130%);
  box-shadow: var(--sh-lg);
}
.lz-lg__panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(color-mix(in srgb, var(--sf-text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--sf-text) 5%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 80%);
}

/* Scanner (waiting) */
.lz-lg__scanner {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 20px 16px;
  border-color: color-mix(in srgb, var(--accent) 16%, var(--sf-border));
}
.lz-lg__viewfinder { position: relative; padding: 12px; margin-bottom: 16px; }
.lz-lg__corner {
  position: absolute; width: 18px; height: 18px;
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 3px;
}
.lz-lg__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.lz-lg__corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.lz-lg__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.lz-lg__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.lz-lg__qr {
  position: relative; overflow: hidden;
  padding: 14px; background: #fff; border-radius: var(--r-md);
  box-shadow: 0 2px 14px rgba(0,0,0,.28);
  line-height: 0;
}
.lz-lg__qr img { display: block; width: 150px; height: 150px; }
.lz-lg__scanline {
  position: absolute; left: 8px; right: 8px; top: 0; height: 28px;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--p-500) 16%, transparent) 60%,
    color-mix(in srgb, var(--p-500) 30%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--p-500) 45%, transparent);
  mix-blend-mode: multiply;
  animation: lz-lg-scan 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Status line */
.lz-lg__status {
  display: flex; align-items: center; gap: 10px; width: 100%;
  max-width: 280px;
  font-size: var(--fz-small); color: var(--sf-text-2);
}
.lz-lg__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: lz-lg-breathe 1.5s ease-in-out infinite;
}
.lz-lg__status-text { font-weight: 500; }
.lz-lg__status-text::after {
  content: "…"; display: inline-block;
  animation: lz-lg-ellipsis 1.6s steps(4, end) infinite;
  width: 1em; text-align: start; overflow: hidden; vertical-align: bottom;
}
.lz-lg__timer {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--sf-surface-2); border: 1px solid var(--sf-border);
  font-size: 12px; color: var(--sf-text);
}
.lz-lg__timer-label {
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sf-text-3);
}

/* Protocol steps */
.lz-lg__protocol {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.lz-lg__step {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--sf-border);
}
.lz-lg__step:last-child { border-bottom: 0; }
.lz-lg__step-num {
  font-size: 12px; font-weight: 500; color: var(--accent);
  flex-shrink: 0; width: 24px; position: relative;
}
.lz-lg__step-num::before {
  content: ""; position: absolute; inset-inline-start: -4px; top: 50%;
  width: 2px; height: 14px; transform: translateY(-50%);
  background: var(--accent); border-radius: 1px; opacity: 0.55;
}
.lz-lg__step-label { font-size: 14px; color: var(--sf-text); }

/* Result states */
.lz-lg__result {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px;
  padding: clamp(30px, 5vw, 40px) 28px;
}
.lz-lg__result .btn { margin-top: 16px; }
.lz-lg__result-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 16px;
}
.lz-lg__result-actions .btn { margin-top: 0; }
.lz-lg__result-badge {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  margin-bottom: 8px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.lz-lg__result--ok .lz-lg__result-badge {
  color: var(--st-success);
  background: var(--st-success-bg);
  border-color: var(--st-success-border);
  animation: lz-lg-pop 520ms var(--ease-out) 1;
}
.lz-lg__result-badge--warn {
  color: var(--st-warn); background: var(--st-warn-bg);
  border-color: var(--st-warn-border);
  font: 700 24px/1 var(--font-sans);
}
.lz-lg__result-badge--dim {
  color: var(--sf-text-3); background: var(--sf-surface-2);
  border-color: var(--sf-border-strong);
}
.lz-lg__result--ok { border-color: color-mix(in srgb, var(--st-success) 30%, var(--sf-border)); }
.lz-lg__result--warn { border-color: color-mix(in srgb, var(--st-warn) 28%, var(--sf-border)); }
.lz-lg__result-title {
  font-size: var(--fz-h3); font-weight: 700; color: var(--sf-text); margin: 0;
}
.lz-lg__result-text {
  font-size: 14px; line-height: var(--lh-body); color: var(--sf-text-2);
  margin: 0; max-width: 42ch;
}
.lz-lg__result-text code {
  color: var(--sf-text); font-size: 13px;
  background: var(--sf-surface-2); padding: 1px 6px; border-radius: 5px;
}

/* Inline message panel */
.lz-lg__panel--msg {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px; padding: 32px 28px;
}
.lz-lg__msg-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  font: 700 22px/1 var(--font-sans);
}
.lz-lg__msg-icon--warn {
  color: var(--st-warn); background: var(--st-warn-bg);
  border: 1px solid var(--st-warn-border);
}
.lz-lg__msg-text { font-size: 14px; color: var(--sf-text-2); margin: 0; }

/* Motion */
@keyframes lz-lg-scan {
  0%   { transform: translateY(-36px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(214px); opacity: 0; }
}
@keyframes lz-lg-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.92); }
}
@keyframes lz-lg-ellipsis {
  0%   { width: 0; }
  100% { width: 1em; }
}
@keyframes lz-lg-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lz-lg__eyebrow-mark,
  .lz-lg__dot,
  .lz-lg__status-text::after,
  .lz-lg__result--ok .lz-lg__result-badge { animation: none; }
  .lz-lg__scanline { display: none; }
  .lz-lg__status-text::after { content: ""; }
}
@media (max-width: 480px) {
  .lz-lg__qr img { width: 168px; height: 168px; }
  .lz-lg__timer-label { display: none; }
}

/* Tactical public layer — scoped to .is-public-page so admin is untouched */

/* Tactical tokens */
.is-public-page {
  --tac-r-sm: 3px;
  --tac-r-md: 5px;
  --tac-r-lg: 8px;
  --tac-surface-3: color-mix(in srgb, var(--sf-surface-2) 82%, var(--sf-text) 6%);
  --tac-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --tac-glow: color-mix(in srgb, var(--accent) 45%, transparent);
  /* contrast-fixed muted label: light 4.9:1 on #F7F8FA; dark 6:1 on #0A0E0A */
  --tac-text-mut: #5E6E58;
  --tac-shadow: 0 1px 0 color-mix(in srgb, #fff 4%, transparent) inset,
                0 22px 48px -28px rgba(0,0,0,0.9);
  /* invite-event: Bond-Token amber + Gold-Bars gold, both AA on their surfaces */
  --ie-bond: #B6820A;
  --ie-bond-soft: color-mix(in srgb, var(--ie-bond) 14%, transparent);
  --ie-gold: #A9820F;
  --ie-gold-soft: color-mix(in srgb, var(--ie-gold) 14%, transparent);
}
html.dark .is-public-page,
.dark .is-public-page {
  --tac-text-mut: #879A81;
  --ie-bond: #FBBF24;
  --ie-gold: #ECC94B;
}

/* Atmospheric background */
body.is-public-page::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% -8%, var(--tac-soft), transparent 64%),
    radial-gradient(700px 480px at 92% 4%, color-mix(in srgb, var(--p-600) 9%, transparent), transparent 60%);
}
body.is-public-page::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(color-mix(in srgb, var(--sf-text) 3.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--sf-text) 3.5%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 30%, transparent 78%);
}

/* Typography helpers */
.is-public-page .eyebrow {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 9px;
}
.is-public-page .eyebrow--dim { color: var(--tac-text-mut); }
.is-public-page .mono { font-family: var(--font-mono); }
.is-public-page .mut  { color: var(--tac-text-mut); }
.is-public-page .hot {
  color: var(--accent);
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* HUD primitives */
.is-public-page .hud-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none;
  box-shadow: 0 0 0 3px var(--tac-soft), 0 0 10px var(--tac-glow);
  animation: tac-breathe 1.8s var(--ease-out) infinite;
}
.is-public-page .hud-dot--warn {
  background: var(--st-warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-warn) 18%, transparent);
}
@keyframes tac-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.84); }
}

.is-public-page .chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 11px; border: 1px solid var(--sf-border-strong);
  border-radius: var(--tac-r-sm);
  background: color-mix(in srgb, var(--sf-surface) 70%, transparent);
  color: var(--sf-text-2);
}
.is-public-page .chip--live  { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--sf-border-strong)); }
.is-public-page .chip--ghost { background: transparent; }

/* bracketed frame — reusable corner-bracket wrapper (decoupled from QR) */
.is-public-page .frame { position: relative; }
.is-public-page .frame > .c {
  position: absolute; width: 16px; height: 16px; z-index: 2;
  border: 2px solid var(--accent);
  filter: drop-shadow(0 0 5px var(--tac-glow));
}
.is-public-page .frame > .tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.is-public-page .frame > .tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.is-public-page .frame > .bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.is-public-page .frame > .br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* grid-textured panel: top glow + crossed grid + vignette */
.is-public-page .panel {
  position: relative; overflow: clip;
  border: 1px solid var(--sf-border); border-radius: var(--tac-r-lg);
  background:
    radial-gradient(620px 260px at 50% -30%, var(--tac-soft), transparent 70%),
    linear-gradient(180deg, var(--sf-surface) 0%, color-mix(in srgb, var(--sf-surface) 60%, var(--sf-canvas)) 120%);
  box-shadow: var(--tac-shadow);
}
.is-public-page .panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--sf-text) 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--sf-text) 4.5%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 92% 74% at 50% 0%, #000 22%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 92% 74% at 50% 0%, #000 22%, transparent 80%);
}
.is-public-page .panel > * { position: relative; }
.is-public-page .panel__pad { padding: clamp(18px, 2.6vw, 30px); }
.is-public-page .panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px clamp(16px, 2.4vw, 24px);
  border-bottom: 1px solid var(--sf-border);
  background: color-mix(in srgb, var(--sf-surface-2) 60%, transparent);
}
.is-public-page .panel__tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--tac-text-mut);
  display: inline-flex; align-items: center; gap: 9px;
}

/* scanline overlay — drop into any position:relative + overflow:hidden box.
   Travel distance parameterised via --scan-travel so it works in any
   container (the link-game version was QR-image-specific). */
.is-public-page .scan { position: relative; overflow: hidden; }
.is-public-page .scan__line {
  position: absolute; left: 0; right: 0; top: 0;
  height: var(--scan-h, 40px);
  background: linear-gradient(180deg, transparent,
    color-mix(in srgb, var(--accent) 26%, transparent) 60%,
    color-mix(in srgb, var(--accent) 52%, transparent));
  border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 80%, transparent);
  box-shadow: 0 0 18px 2px var(--tac-glow);
  pointer-events: none;
  animation: tac-scan var(--scan-dur, 4.4s) cubic-bezier(0.45,0,0.55,1) infinite;
}
@keyframes tac-scan {
  0%   { transform: translateY(calc(-1 * var(--scan-h, 40px))); opacity: 0; }
  10%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { transform: translateY(var(--scan-travel, 420px)); opacity: 0; }
}

/* Buttons — structural override only; lime bg always pairs with fixed dark #07120A regardless of theme */
.is-public-page .btn {
  font-family: var(--font-mono); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--tac-r-sm);
}
.is-public-page .btn-primary {
  background: linear-gradient(180deg, var(--p-400), var(--p-500));
  color: #07120A; border-color: transparent;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent),
              0 14px 30px -14px var(--tac-glow);
}
.is-public-page .btn-primary:hover {
  box-shadow: 0 0 0 1px var(--accent), 0 0 26px -2px var(--tac-glow),
              0 16px 34px -14px var(--tac-glow);
}
.is-public-page .btn-ghost {
  background: color-mix(in srgb, var(--sf-surface) 60%, transparent);
  border: 1px solid var(--sf-border-strong); color: var(--sf-text);
}
.is-public-page .btn-ghost:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--sf-border-strong));
  color: var(--accent);
}

/* KPI HUD row */
.is-public-page .kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.is-public-page .kpi {
  position: relative; overflow: clip; padding: 18px 18px 16px;
  border: 1px solid var(--sf-border); border-radius: var(--tac-r-md);
  background: linear-gradient(180deg, var(--sf-surface) 0%, color-mix(in srgb, var(--sf-surface) 55%, var(--sf-canvas)) 130%);
  transition: border-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.is-public-page .kpi:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--sf-border)); transform: translateY(-2px); }
.is-public-page .kpi::after {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
}
.is-public-page .kpi__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tac-text-mut); display: flex; align-items: center; gap: 8px; }
.is-public-page .kpi__num { font-weight: 900; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; letter-spacing: -0.03em; margin-top: 12px; font-variant-numeric: tabular-nums; }
.is-public-page .kpi__bar { margin-top: 12px; height: 4px; border-radius: var(--r-pill); background: var(--tac-surface-3); overflow: hidden; }
.is-public-page .kpi__bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--p-500), var(--p-400)); border-radius: inherit; }
.is-public-page .kpi__sub { margin-top: 9px; font-size: 12px; color: var(--sf-text-2); }

/* Signal feed (active codes list) */
.is-public-page .feed { display: flex; flex-direction: column; }
.is-public-page .feed__row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px;
  padding: 15px clamp(16px, 2.4vw, 24px);
  border-top: 1px solid var(--sf-border);
  transition: background var(--dur-fast) var(--ease-out);
}
.is-public-page .feed__row:first-child { border-top: 0; }
.is-public-page .feed__row:hover { background: color-mix(in srgb, var(--sf-surface-2) 50%, transparent); }
.is-public-page .feed .code { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--sf-text); overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.is-public-page .code-meta { font-family: var(--font-mono); font-size: 11px; color: var(--tac-text-mut); letter-spacing: 0.08em; }
.is-public-page .badge-new {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #07120A; background: var(--accent); padding: 3px 7px; border-radius: var(--tac-r-sm);
  box-shadow: 0 0 16px -2px var(--tac-glow);
}
.is-public-page .copy-btn {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 13px; border-radius: var(--tac-r-sm); cursor: pointer;
  border: 1px solid var(--sf-border-strong); background: transparent; color: var(--sf-text-2);
  transition: all var(--dur-fast) var(--ease-out);
}
.is-public-page .copy-btn:hover  { border-color: var(--accent); color: var(--accent); }
.is-public-page .copy-btn.copied { background: var(--accent); color: #07120A; border-color: var(--accent); }

/* Code cards (gift-code registry) */
.is-public-page .code-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(266px, 1fr)); grid-auto-rows: auto; gap: 14px; }
.is-public-page .code-card {
  position: relative; overflow: clip; padding: 18px 18px 16px;
  /* height:auto not 100%: % height on an auto grid-row track is circular → cards spill ~21px into next row */
  display: flex; flex-direction: column; height: auto;
  border: 1px solid var(--sf-border); border-radius: var(--tac-r-md);
  background: linear-gradient(180deg, var(--sf-surface) 0%, color-mix(in srgb, var(--sf-surface) 55%, var(--sf-canvas)) 130%);
  transition: border-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.is-public-page .code-card::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--accent), transparent); }
.is-public-page .code-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--sf-border)); transform: translateY(-3px); box-shadow: 0 20px 44px -28px var(--tac-glow); }
.is-public-page .code-card--new { border-color: color-mix(in srgb, var(--accent) 55%, var(--sf-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 22px 50px -30px var(--tac-glow); }
.is-public-page .code-card--new::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(320px 150px at 50% -30%, var(--tac-soft), transparent 70%); }
.is-public-page .code-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; }
.is-public-page .code-card__code { font-family: var(--font-mono); font-weight: 700; font-size: 1.45rem; letter-spacing: 0.05em; margin: 14px 0 4px; color: var(--sf-text); position: relative; overflow-wrap: anywhere; word-break: break-word; }
.is-public-page .code-card__reward { color: var(--sf-text-2); font-size: 0.9rem; position: relative; min-height: 1.3em; }
.is-public-page .code-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; position: relative; }
/* clickable copy cards */
.is-public-page .code-card.js-gc-card { cursor: pointer; }
.is-public-page .code-card.is-copied { border-color: color-mix(in srgb, var(--accent) 60%, var(--sf-border)); }

/* Expired archive */
.is-public-page .archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.is-public-page .dead-card { display: flex; flex-direction: column; border: 1px dashed var(--sf-border-strong); border-radius: var(--tac-r-sm); padding: 12px 14px; background: color-mix(in srgb, var(--sf-surface) 40%, transparent); }
.is-public-page .dead-card .code-card__code,
.is-public-page .dead-card .code { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; color: var(--tac-text-mut); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--st-danger) 55%, transparent); overflow-wrap: anywhere; word-break: break-word; }
.is-public-page .dead-card .meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--tac-text-mut); margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* recently-expired (died within 7d) — highlighted so users spot codes that just stopped working */
.is-public-page .dead-card--recent { border-style: solid; border-color: color-mix(in srgb, var(--st-warn) 45%, var(--sf-border-strong)); background: color-mix(in srgb, var(--st-warn) 8%, transparent); }
.is-public-page .dead-card__tag { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-warn); border: 1px solid color-mix(in srgb, var(--st-warn) 40%, transparent); border-radius: var(--tac-r-sm); padding: 1px 5px; }

/* ── Protocol steps (how-it-works) ──────────────────────────────────────── */
.is-public-page .protocol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.is-public-page .step { position: relative; overflow: clip; padding: 24px 20px; border: 1px solid var(--sf-border); border-radius: var(--tac-r-md); background: var(--sf-surface); }
.is-public-page .step__no { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--accent); }
.is-public-page .step__no b { display: block; font-size: 2.4rem; font-weight: 900; color: color-mix(in srgb, var(--accent) 20%, var(--sf-text)); line-height: 1; margin-top: 4px; letter-spacing: -0.04em; }
.is-public-page .step h3 { margin: 16px 0 8px; }
.is-public-page .step p { margin: 0; color: var(--sf-text-2); font-size: 0.95rem; }

/* ── Content cards (hub grids) ──────────────────────────────────────────── */
.is-public-page .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.is-public-page .tcard {
  position: relative; overflow: clip; padding: 22px;
  border: 1px solid var(--sf-border); border-radius: var(--tac-r-md); background: var(--sf-surface);
  transition: border-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.is-public-page .tcard:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--sf-border)); transform: translateY(-3px); }
.is-public-page .tcard__ico { width: 42px; height: 42px; border-radius: var(--tac-r-sm); display: grid; place-items: center; border: 1px solid var(--sf-border-strong); color: var(--accent); margin-bottom: 16px; }
.is-public-page a.tcard { color: var(--sf-text); text-decoration: none; }

/* ── Creator / bot cards (youtubers + bots) ─────────────────────────────── */
.is-public-page .creator { display: flex; align-items: center; gap: 14px; }
.is-public-page .creator__av { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--sf-border-strong); background: linear-gradient(135deg, var(--tac-surface-3), var(--sf-surface)); display: grid; place-items: center; color: var(--accent); font-family: var(--font-mono); font-weight: 700; flex: none; object-fit: cover; overflow: hidden; }
.is-public-page .creator__av--sq { border-radius: var(--tac-r-md); }
.is-public-page .creator__meta { min-width: 0; }
.is-public-page .creator__meta b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-public-page .creator__meta span { font-family: var(--font-mono); font-size: 11px; color: var(--tac-text-mut); letter-spacing: 0.06em; }
.is-public-page .tcard__foot { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* promoted = outer ring + top-edge tab, mirroring the /autoredemption
   current-plan card. overflow:visible lets the tab straddle the top border
   (.tcard is overflow:clip by default). */
.is-public-page .tcard--promoted { border-color: color-mix(in srgb, var(--accent) 45%, var(--sf-border)); box-shadow: 0 0 0 2px var(--accent); overflow: visible; }
.is-public-page .tcard__promoted { position: absolute; top: -11px; inset-inline-start: 20px; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #07120A; background: var(--accent); border: 0; border-radius: var(--r-pill); padding: 4px 10px; box-shadow: 0 0 14px -2px var(--tac-glow); }
/* A creator code gets its own frame, in the Gold-Bars gold the invite event
   already uses — binding a code is what pays Gold Bars, and the token is
   contrast-tuned for both themes. Promoted keeps the accent ring: a card that
   is both wears the accent frame and both badges, so the stronger signal wins
   the border and nothing is hidden. The two badges sit on opposite corners. */
.is-public-page .tcard--hascode { border-color: color-mix(in srgb, var(--ie-gold) 45%, var(--sf-border)); box-shadow: 0 0 0 2px var(--ie-gold); overflow: visible; }
.is-public-page .tcard__hascode { position: absolute; top: -11px; inset-inline-end: 20px; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #1A1206; background: var(--ie-gold); border: 0; border-radius: var(--r-pill); padding: 4px 10px; box-shadow: 0 0 14px -2px color-mix(in srgb, var(--ie-gold) 45%, transparent); }
/* the promoted badge owns the left corner, so a card carrying both never overlaps */
.is-public-page .tcard--promoted { overflow: visible; }
.is-public-page .lz-yt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sf-border); }
.is-public-page .lz-yt-stat__num { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; color: var(--sf-text); }
.is-public-page .lz-yt-stat__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tac-text-mut); margin-top: 3px; }
/* equal-height cards: grid-auto-rows must be auto not 1fr (1fr collapses track → ~32px row overlap);
   .tcard needs box-sizing:border-box (content-box makes width:100% ~45px wider than track → overlap) */
.is-public-page .lz-creator-grid { grid-auto-rows: auto; }
.is-public-page .lz-creator-grid > li { display: flex; flex-direction: column; }
.is-public-page .lz-creator-grid > li > .tcard { box-sizing: border-box; width: 100%; min-width: 0; flex: 1; display: flex; flex-direction: column; }
.is-public-page .lz-creator-grid .tcard__foot { margin-top: auto; }
/* coupon+CTA as one bottom group: coupon eats the free space, foot sits a fixed gap below */
.is-public-page .lz-creator-grid .lz-coupon { margin-top: auto; }
.is-public-page .lz-creator-grid .lz-coupon + .tcard__foot { margin-top: 16px; }

/* Contact channel cards */
/* align-items:stretch lets the body fill the card height so the CTA can pin to bottom */
.is-public-page .contact-card { display: flex; gap: 16px; align-items: stretch; }
.is-public-page .contact-card .tcard__ico { margin: 0; flex: none; }
.is-public-page .contact-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.is-public-page .contact-card__body p { margin: 6px 0 14px; color: var(--sf-text-2); font-size: 0.92rem; line-height: 1.5; }
.is-public-page .contact-card__addr { font-size: 11.5px; letter-spacing: 0.08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 4px 0 0; }
.is-public-page .contact-card__body .btn { margin-top: auto; align-self: flex-start; }
.is-public-page .lz-botcard__desc { color: var(--sf-text-2); font-size: 0.9rem; line-height: 1.55; margin: 14px 0 14px; }
/* Coupon row */
.is-public-page .lz-coupon { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sf-border); }
.is-public-page .lz-coupon__row { display: flex; align-items: stretch; gap: 8px; }
.is-public-page .lz-coupon__code { flex: 1; min-width: 0; font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--accent); background: var(--tac-soft); border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--sf-border-strong)); border-radius: var(--tac-r-sm); padding: 8px 12px; display: flex; align-items: center; overflow-wrap: anywhere; }
.is-public-page .lz-coupon__note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tac-text-mut); margin: 8px 0 0; }

/* Alerts */
.is-public-page .alert { border: 1px solid var(--sf-border-strong); border-inline-start-width: 3px; border-radius: var(--tac-r-sm); padding: 14px 16px; font-size: 0.92rem; color: var(--sf-text-2); }
.is-public-page .alert b, .is-public-page .alert a { color: var(--sf-text); }
.is-public-page .alert a { text-decoration: underline; text-underline-offset: 2px; }
.is-public-page .alert-success { border-inline-start-color: var(--accent); background: var(--tac-soft); }
.is-public-page .alert-success a { color: var(--accent); }
.is-public-page .alert-info { border-inline-start-color: var(--st-info); background: var(--st-info-bg); }
.is-public-page .alert-warn { border-inline-start-color: var(--st-warn); background: var(--st-warn-bg); }
.is-public-page .alert-danger { border-inline-start-color: var(--st-danger); background: var(--st-danger-bg); }

/* Breadcrumb */
.is-public-page .lz-breadcrumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tac-text-mut); transition: color var(--dur-fast) var(--ease-out); }
.is-public-page .lz-breadcrumb:hover { color: var(--accent); }

/* Access-pass expander */
.is-public-page .qc-pass { margin-top: 16px; border: 1px solid var(--sf-border); border-radius: var(--tac-r-sm); background: color-mix(in srgb, var(--sf-surface) 50%, transparent); padding: 0 16px; }
.is-public-page .qc-pass summary { cursor: pointer; padding: 14px 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--accent); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.is-public-page .qc-pass summary::-webkit-details-marker { display: none; }
.is-public-page .qc-pass summary::after { content: "+"; color: var(--accent); }
.is-public-page .qc-pass[open] summary::after { content: "\2212"; }
.is-public-page .qc-pass__body { padding: 0 0 16px; }
.is-public-page .pass-row { display: flex; gap: 8px; }
.is-public-page .pass-row .pass-input { flex: 1; position: relative; }
.is-public-page .pass-state { font-family: var(--font-mono); font-size: 11px; margin-top: 10px; display: block; }
.is-public-page .pass-state.ok  { color: var(--accent); }
.is-public-page .pass-state.bad { color: var(--st-danger); }

/* Quick-claim form */
.is-public-page .qc-form-wrap { max-width: 640px; margin-inline: auto; }
.is-public-page .field-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tac-text-mut); display: block; margin-bottom: 8px; font-weight: 500; }
.is-public-page .field-label .dim { text-transform: none; letter-spacing: 0; }
.is-public-page .qc-textarea { background: var(--sf-canvas); border: 1px solid var(--sf-border-strong); border-radius: var(--tac-r-sm); min-height: 120px; line-height: 1.7; }
.is-public-page .qc-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.is-public-page .qc-pass__input { background: var(--sf-canvas); border-color: var(--sf-border-strong); border-radius: var(--tac-r-sm); }
.is-public-page .qc-pass__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.is-public-page .qc-lede { color: var(--sf-text-2); font-size: 0.95rem; line-height: 1.6; }
.is-public-page .qc-lede strong { color: var(--sf-text); }
.is-public-page .qc-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.is-public-page .qc-disclaimer { font-size: 11.5px; color: var(--tac-text-mut); margin-top: 18px; line-height: 1.6; }
.is-public-page .qc-disclaimer a { color: var(--accent); }
.is-public-page .qc-uphint { margin-top: 16px; }
.is-public-page .qc-uphint a { font-size: 0.88rem; color: var(--tac-text-mut); border-bottom: 1px dashed var(--sf-border-strong); }
.is-public-page .qc-uphint a:hover { color: var(--accent); border-color: var(--accent); }

/* Add-gift-code form inputs */
.is-public-page .field-input, .is-public-page .field-textarea { background: var(--sf-canvas); border: 1px solid var(--sf-border-strong); border-radius: var(--tac-r-sm); }
.is-public-page .field-input:focus, .is-public-page .field-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.is-public-page .lz-addcode-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; }
.is-public-page .lz-addcode-steps { margin: 0; padding-inline-start: 20px; color: var(--sf-text); font-size: 13.5px; line-height: 1.75; }
.is-public-page .lz-addcode-steps strong { color: var(--accent); }
@media (max-width: 860px) { .is-public-page .lz-addcode-grid { grid-template-columns: 1fr; } }

/* Dashboard / authed app shell */
.is-public-page .t-eyebrow { font-family: var(--font-mono); font-weight: 700; color: var(--accent); }
.is-public-page .lz-uid-table thead th { font-family: var(--font-mono); letter-spacing: 0.12em; color: var(--tac-text-mut); background: color-mix(in srgb, var(--sf-surface-2) 75%, transparent); }
/* unlinked rows (no game_uuid): warn tint on all cells; :not(.is-selected) so bulk-select highlight wins */
.is-public-page .lz-uid-row--unlinked:not(.is-selected) > td { background: color-mix(in srgb, var(--st-warn) 8%, var(--sf-surface)); }
.is-public-page .lz-uid-row--unlinked:not(.is-selected):hover > td { background: color-mix(in srgb, var(--st-warn) 14%, var(--sf-surface)); }
.is-public-page .lz-uid-row__link { align-self: flex-start; margin-top: 4px; font-size: 10px; padding: 2px 8px; }
/* KPI tile */
.is-public-page .kpi-card { border-radius: var(--tac-r-md); }
.is-public-page .kpi-card .e { font-family: var(--font-mono); color: var(--tac-text-mut); }

/* HUD data table */
.is-public-page .tac-table { width: 100%; border-collapse: collapse; }
.is-public-page .tac-table th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tac-text-mut); text-align: start; padding: 0 16px 12px; font-weight: 500; white-space: nowrap; }
.is-public-page .tac-table td { padding: 14px 16px; border-top: 1px solid var(--sf-border); vertical-align: middle; white-space: nowrap; }
.is-public-page .tac-table tr:hover td { background: color-mix(in srgb, var(--sf-surface-2) 50%, transparent); }
.is-public-page .tac-table .num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.is-public-page .tac-table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.is-public-page .tac-table-wrap .tac-table { min-width: 760px; }
.is-public-page .tac-table-wrap::after {
  content: ""; position: absolute; top: 0; inset-inline-end: 0; bottom: 0; width: 34px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sf-surface) 92%, transparent));
}

/* Toolbar, kebab, toggle */
.is-public-page .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.is-public-page .toolbar__spacer { flex: 1; }
.is-public-page .kebab { width: 38px; height: 38px; border-radius: var(--tac-r-sm); border: 1px solid var(--sf-border-strong); background: var(--sf-surface); color: var(--sf-text-2); cursor: pointer; font-size: 18px; line-height: 1; transition: all var(--dur-fast) var(--ease-out); }
.is-public-page .kebab:hover { border-color: var(--accent); color: var(--accent); }
.is-public-page .tgl { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent); }
.is-public-page .tgl i { width: 30px; height: 16px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 30%, var(--tac-surface-3)); position: relative; }
.is-public-page .tgl i::after { content: ""; position: absolute; top: 2px; inset-inline-end: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--tac-glow); }

/* Scroll-reveal (lz_public_motion.js) */
.is-public-page [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.is-public-page [data-reveal].in { opacity: 1; transform: none; }

/* Mobile */
@media (max-width: 860px) {
  .is-public-page .kpi-row,
  .is-public-page .protocol { grid-template-columns: 1fr; }
  /* re-place feed row explicitly: chip top-left, code full-width (hero), meta beneath, copy button spans rows */
  .is-public-page .feed__row {
    grid-template-columns: 1fr auto;
    column-gap: 14px;
    row-gap: 3px;
    align-items: center;
    padding: 14px clamp(14px, 4vw, 20px);
  }
  .is-public-page .feed__row .chip      { grid-column: 1; grid-row: 1; justify-self: start; }
  .is-public-page .feed__row .code      { grid-column: 1; grid-row: 2; font-size: 1.15rem; }
  .is-public-page .feed__row .code-meta { grid-column: 1; grid-row: 3; }
  .is-public-page .feed__row .copy-btn  { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  /* small screens only: borderless micro-label so giftcode is the focus; bigger screens keep bordered pill */
  .is-public-page .feed__row .chip {
    border: 0; background: transparent; padding: 0;
    font-size: 9.5px; letter-spacing: 0.14em; gap: 6px;
    color: var(--tac-text-mut);
  }
  .is-public-page .feed__row .chip--live { color: var(--accent); }
  .is-public-page .feed__row .hud-dot { width: 6px; height: 6px; box-shadow: 0 0 0 2px var(--tac-soft), 0 0 8px var(--tac-glow); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .is-public-page .hud-dot,
  .is-public-page .scan__line { animation: none; }
  .is-public-page .scan__line { display: none; }
  .is-public-page [data-reveal] { opacity: 1; transform: none; }
}

/* Section rhythm + display typography */
.is-public-page .section        { padding-block: clamp(48px, 8vw, 104px); }
.is-public-page .section--tight { padding-block: clamp(36px, 5vw, 64px); }
.is-public-page .display { font-weight: 900; font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 0.96; letter-spacing: -0.035em; margin: 0; }
.is-public-page .h2 { font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0; }
.is-public-page .h3 { font-weight: 700; font-size: 1.18rem; letter-spacing: -0.015em; margin: 0; }
.is-public-page .lead { color: var(--sf-text-2); font-size: clamp(1rem, 1.5vw, 1.18rem); max-width: 52ch; }

/* Home flagship */
.is-public-page .lz-home-hero { padding-block: clamp(32px, 6vw, 78px); }
.is-public-page .lz-home-hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.is-public-page .lz-home-headline { position: relative; padding: 26px 4px; margin: 14px 0 18px; }
.is-public-page .lz-home-headline .display { font-size: clamp(2.3rem, 5.4vw, 4.4rem); }
.is-public-page .lz-home-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.is-public-page .lz-home-assure { margin-top: 22px; display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tac-text-mut); }
.is-public-page .lz-home-assure span { display: inline-flex; align-items: center; gap: 7px; }
.is-public-page .lz-home-assure .tick { color: var(--accent); font-style: normal; }
.is-public-page .lz-console__body { padding: 4px clamp(16px, 2.4vw, 22px) clamp(16px, 2.4vw, 22px); }
.is-public-page .lz-readout { font-family: var(--font-mono); font-size: 12.5px; line-height: 2.1; color: var(--sf-text-2); word-break: break-word; }
.is-public-page .lz-readout .k { color: var(--tac-text-mut); }
.is-public-page .lz-readout .v { color: var(--accent); }
/* latest code that is no longer redeemable — struck + danger-tinted */
.is-public-page .lz-readout .v-dead { color: var(--tac-text-mut); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--st-danger) 60%, transparent); }
.is-public-page .lz-readout__tag { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-danger); border: 1px solid color-mix(in srgb, var(--st-danger) 45%, transparent); border-radius: var(--tac-r-sm); padding: 1px 5px; margin-inline-start: 4px; }
.is-public-page .lz-home-sechead { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
@media (max-width: 980px) { .is-public-page .lz-home-hero__grid { grid-template-columns: 1fr; } }

/* ── Inner page head + stat strip + section head (data/list pages) ──────── */
.is-public-page .lz-page-head { padding-block: clamp(30px, 5vw, 56px); }
.is-public-page .lz-page-head .display { font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 14px 0; }
.is-public-page .lz-sechead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.is-public-page .stat-strip { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.is-public-page .stat-pill { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--sf-border); border-radius: var(--tac-r-sm); background: var(--sf-surface); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--sf-text-2); }
.is-public-page .stat-pill b { color: var(--accent); font-size: 1.05rem; font-weight: 700; }
.is-public-page .stat-pill.mut { color: var(--tac-text-mut); }
/* expired-codes <details> summary — tactical mono treatment */
.is-public-page .gc-expired__summary { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tac-text-mut); }
.is-public-page .gc-expired__summary:hover { color: var(--accent); }

/* ── Tactical pills (status chips, filter chips, UID chips) ─────────────── */
.is-public-page .pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  padding: 6px 11px; border-radius: var(--tac-r-sm);
  border: 1px solid var(--sf-border-strong); background: transparent;
  color: var(--sf-text-2);
}
.is-public-page a.pill, .is-public-page button.pill {
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.is-public-page .pill-info     { color: var(--st-info);    border-color: color-mix(in srgb, var(--st-info) 45%, var(--sf-border-strong));    background: color-mix(in srgb, var(--st-info) 12%, transparent); }
.is-public-page .pill-success  { color: var(--accent);     border-color: color-mix(in srgb, var(--accent) 45%, var(--sf-border-strong));     background: var(--tac-soft); }
.is-public-page .pill-pending  { color: var(--st-warn);    border-color: color-mix(in srgb, var(--st-warn) 45%, var(--sf-border-strong));    background: color-mix(in srgb, var(--st-warn) 12%, transparent); }
.is-public-page .pill-warn     { color: var(--st-warn);    border-color: color-mix(in srgb, var(--st-warn) 45%, var(--sf-border-strong));    background: color-mix(in srgb, var(--st-warn) 12%, transparent); }
.is-public-page .pill-danger   { color: var(--st-danger);  border-color: color-mix(in srgb, var(--st-danger) 45%, var(--sf-border-strong));  background: color-mix(in srgb, var(--st-danger) 12%, transparent); }
.is-public-page .pill-unlinked { color: var(--st-warn);    border-color: color-mix(in srgb, var(--st-warn) 50%, var(--sf-border-strong));    background: color-mix(in srgb, var(--st-warn) 12%, transparent); }
.is-public-page .pill-muted    { color: var(--tac-text-mut); }
/* inactive filter chips brighten toward accent on hover */
.is-public-page a.pill-muted:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--sf-border-strong)); color: var(--accent); }

/* Pricing tiers */
.is-public-page .tier { border-radius: var(--tac-r-md); }
/* featured tier: accent ring + top glow */
.is-public-page .tier.featured { border-color: color-mix(in srgb, var(--accent) 55%, var(--sf-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 24px 60px -34px var(--tac-glow); }
.is-public-page .tier.featured::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(420px 200px at 50% -20%, var(--tac-soft), transparent 70%); }
.is-public-page .tier > * { position: relative; }
.is-public-page .tier li::before { color: var(--accent); }
/* long labels clip under white-space:nowrap in narrow 5-across cards; allow wrap */
.is-public-page .lz-pricing-grid .tier-cta .btn { white-space: normal; text-align: center; line-height: 1.3; padding-inline: 12px; }

/* FAQ accordion */
.is-public-page .lz-faq { display: grid; gap: 10px; }
.is-public-page .lz-faq details { border: 1px solid var(--sf-border); border-radius: var(--tac-r-sm); background: var(--sf-surface); padding: 0 18px; }
.is-public-page .lz-faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.is-public-page .lz-faq summary::-webkit-details-marker { display: none; }
.is-public-page .lz-faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent); flex: none; }
.is-public-page .lz-faq details[open] summary::after { content: "\2212"; }
.is-public-page .lz-faq p { margin: 0 0 16px; color: var(--sf-text-2); font-size: 0.92rem; line-height: 1.55; }
.is-public-page .lz-faq a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Task status page */
.is-public-page .ts-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.is-public-page .ts-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.is-public-page .ts-filters__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tac-text-mut); margin-inline-end: 2px; }
.is-public-page .ts-search { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.is-public-page .ts-search input[type="search"] { background: var(--sf-surface); border: 1px solid var(--sf-border-strong); border-radius: var(--tac-r-sm); color: var(--sf-text); font-family: var(--font-mono); padding: 9px 12px; font-size: 0.82rem; min-width: 180px; }
.is-public-page .ts-search input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.is-public-page .lz-task-row-expandable { cursor: pointer; }
.is-public-page .lz-task-chevron { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--sf-border-strong); border-radius: var(--tac-r-sm); background: transparent; color: var(--sf-text-2); cursor: pointer; font-size: 13px; line-height: 1; transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.is-public-page .lz-task-chevron[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); transform: rotate(90deg); }

.is-public-page .lz-game-id-chip { font-family: var(--font-mono); margin-block: 2px; margin-inline: 0 4px; }
.is-public-page .lz-game-id-chip:hover { border-color: var(--accent); color: var(--accent); }
.is-public-page .lz-game-id-chip.copied, .is-public-page .lz-game-id-chip.is-copied { background: var(--accent); color: #07120A; border-color: var(--accent); }

/* expandable detail row */
.is-public-page .lz-task-details > td, .is-public-page .ts-detail > td { padding: 0; background: color-mix(in srgb, var(--sf-surface-2) 55%, transparent); border-top: 1px solid var(--sf-border); }
.is-public-page .lz-task-detail-tbl { width: 100%; border-collapse: collapse; }
.is-public-page .lz-task-detail-tbl th { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tac-text-mut); text-align: start; padding: 10px 16px 8px; font-weight: 500; white-space: nowrap; }
.is-public-page .lz-task-detail-tbl td { padding: 9px 16px; border-top: 1px solid var(--sf-border); font-size: 0.86rem; color: var(--sf-text-2); vertical-align: middle; }
.is-public-page .lz-task-detail-msg { overflow-wrap: anywhere; }
.is-public-page .lz-unlinked-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 10px 16px; font-family: var(--font-mono); font-size: 11px; color: var(--st-warn); border-bottom: 1px solid var(--sf-border); background: color-mix(in srgb, var(--st-warn) 8%, transparent); }
.is-public-page .lz-unlinked-banner a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.is-public-page .lz-task-detail-foot { padding: 10px 16px; }
.is-public-page .lz-task-detail-foot a { font-family: var(--font-mono); font-size: 11px; color: var(--sf-text-2); text-decoration: underline; text-underline-offset: 2px; }
.is-public-page .lz-task-detail-foot a:hover { color: var(--accent); }

/* pager */
.is-public-page .ts-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.is-public-page .ts-pager { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.is-public-page .ts-pager a, .is-public-page .ts-pager .ts-page-btn { font-family: var(--font-mono); font-size: 11px; padding: 8px 12px; border: 1px solid var(--sf-border-strong); border-radius: var(--tac-r-sm); color: var(--sf-text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.is-public-page .ts-pager a:hover { border-color: var(--accent); color: var(--accent); }
.is-public-page .ts-pager .is-disabled { opacity: 0.4; pointer-events: none; }

/* Game tools */
.is-public-page .lz-crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tac-text-mut); margin: 0 0 4px; display: flex; gap: 7px; flex-wrap: wrap; }
.is-public-page .lz-crumb a { color: var(--sf-text-2); text-decoration: none; }
.is-public-page .lz-crumb a:hover { color: var(--accent); }

.is-public-page .lz-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: auto; gap: 14px; margin: 0 0 28px; align-items: stretch; }
.is-public-page .lz-tool-card { display: flex; flex-direction: column; gap: 8px; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--tac-r-md); padding: 18px; box-sizing: border-box; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.is-public-page a.lz-tool-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--sf-border)); transform: translateY(-2px); box-shadow: 0 18px 40px -28px var(--tac-glow); }
.is-public-page .lz-tool-card h2 { font-size: 1.12rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.is-public-page .lz-tool-card p { color: var(--sf-text-2); font-size: 0.9rem; margin: 0; line-height: 1.5; }
.is-public-page .lz-tool-card__kind { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tac-text-mut); }
.is-public-page .lz-tool-card__go { margin-top: auto; padding-top: 6px; font-size: 11px; letter-spacing: 0.12em; color: var(--accent); text-transform: uppercase; }
.is-public-page .lz-tool-card--soon { opacity: 0.62; }

/* building chips (icon + name) */
.is-public-page .lz-building-card { flex-direction: row; align-items: center; gap: 10px; padding: 11px 13px; }
.is-public-page .lz-building-card:hover { transform: translateY(-2px); }
.is-public-page .lz-building-icon { width: 40px; height: 40px; object-fit: contain; flex: none; }
.is-public-page .lz-building-name { font-weight: 600; font-size: 0.95rem; }

/* filter search + group labels */
.is-public-page .lz-tools-search { max-width: 360px; margin: 4px 0 20px; font-family: var(--font-mono); }
.is-public-page .lz-tools-group { margin: 18px 0 12px; }

/* building-detail header */
.is-public-page .lz-building-header { display: flex; gap: 16px; align-items: center; }
.is-public-page .lz-building-header .display { margin: 6px 0; }
.is-public-page .lz-building-desc { margin: 6px 0 0; }
.is-public-page .lz-building-hero-icon { width: 64px; height: 64px; object-fit: contain; flex: none; }

/* stats / upgrade view tabs */
.is-public-page .lz-tool-tabs { display: flex; gap: 8px; margin: 0 0 16px; }
.is-public-page .lz-tab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 16px; border: 1px solid var(--sf-border-strong); border-radius: var(--tac-r-sm); background: transparent; color: var(--sf-text-2); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.is-public-page .lz-tab:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--sf-border-strong)); color: var(--accent); }
.is-public-page .lz-tab.is-active { background: linear-gradient(180deg, var(--p-400), var(--p-500)); color: #07120A; border-color: transparent; }

/* level-range controls */
.is-public-page .lz-level-controls { margin: 0 0 14px; }
.is-public-page .lz-level-controls .field-label { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; text-transform: none; letter-spacing: 0.04em; }
.is-public-page .lz-level-controls select { background: var(--sf-canvas); border: 1px solid var(--sf-border-strong); border-radius: var(--tac-r-sm); color: var(--sf-text); font-family: var(--font-mono); padding: 6px 9px; }
.is-public-page .lz-level-controls select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* stat / upgrade tables — HUD treatment */
.is-public-page .lz-table-wrap { border: 1px solid var(--sf-border); border-radius: var(--tac-r-md); background: var(--sf-surface); overflow-x: auto; }
.is-public-page .lz-stat-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.is-public-page .lz-stat-table thead th { position: sticky; top: 0; z-index: 1; background: color-mix(in srgb, var(--sf-surface-2) 78%, var(--sf-surface)); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tac-text-mut); font-weight: 500; text-align: start; padding: 11px 14px; white-space: nowrap; border-bottom: 1px solid var(--sf-border); }
.is-public-page .lz-stat-table th, .is-public-page .lz-stat-table td { padding: 9px 14px; text-align: start; white-space: nowrap; border-bottom: 1px solid var(--sf-border); }
.is-public-page .lz-stat-table tbody th[scope="row"] { font-family: var(--font-mono); color: var(--accent); font-weight: 600; }
.is-public-page .lz-stat-table tbody tr:last-child th, .is-public-page .lz-stat-table tbody tr:last-child td { border-bottom: 0; }
.is-public-page .lz-stat-table tbody tr:hover td, .is-public-page .lz-stat-table tbody tr:hover th[scope="row"] { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.is-public-page .lz-stat-table a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* foot note */
.is-public-page .lz-tools-foot { color: var(--tac-text-mut); font-size: 11px; letter-spacing: 0.04em; margin-top: 16px; }

/* Legal pages — mono/accent on micro-labels only; body + headings untouched */
.is-public-page .lz-legal-hero__eyebrow { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.26em; color: var(--accent); }
.is-public-page .lz-legal-meta-chip__label { font-family: var(--font-mono); letter-spacing: 0.14em; color: var(--tac-text-mut); }
.is-public-page .lz-legal-toc__title { font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tac-text-mut); }
.is-public-page .lz-legal-mini-toc__count { font-family: var(--font-mono); color: var(--accent); }

/* Error / state pages (404 · 429 · 500 · 502 · 503 · banned) */
.is-public-page .err-frame {
  border: 1px solid var(--sf-border); border-radius: var(--tac-r-lg);
  background: linear-gradient(180deg, var(--sf-surface) 0%, color-mix(in srgb, var(--sf-surface) 60%, var(--sf-canvas)) 120%);
  box-shadow: var(--tac-shadow);
}
.is-public-page .err-body h2 { letter-spacing: -0.02em; }
.is-public-page .err-note {
  margin-top: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.55;
  background: color-mix(in srgb, var(--sf-surface-2) 60%, transparent);
  border: 1px solid var(--sf-border);
  border-inline-start: 2px solid var(--accent);
  border-radius: var(--tac-r-sm); color: var(--sf-text-2);
}
.is-public-page .err-note strong {
  display: block; margin-bottom: 3px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
.is-public-page .err-note .dim { color: var(--sf-text-2); }
/* banned/* screens: chrome stripped, nav sits open */
.is-public-page .err-frame + *, .is-public-page .lz-nav + .err-frame { margin-top: 0; }

/* Shared chrome: nav + footer + acct chip. Scoped to .is-public-page — admin stays untouched. */

/* Top bar */
.is-public-page .lz-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--sf-canvas) 80%, transparent);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}
.is-public-page .lz-nav .brand { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.04em; }
/* nav links → mono uppercase */
.is-public-page .lz-nav__inner > a:not(.brand):not(.btn):not(.active),
.is-public-page .lz-navmenu__btn {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tac-text-mut);
}
.is-public-page .lz-nav__inner > a:not(.brand):not(.btn):not(.active):hover,
.is-public-page .lz-navmenu__btn:hover { color: var(--sf-text); background: var(--sf-surface-2); }
/* active link: own rule, not caught by the :not() chain above */
.is-public-page .lz-nav__inner > a.active {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}
/* active: accent text, no filled pill */
.is-public-page .lz-nav__inner > a.active,
.is-public-page .lz-nav__inner > a.active:hover { color: var(--accent); background: transparent; font-weight: 500; }
/* dropdown popovers → crisp radius + mono items. box-sizing:border-box folds
   the panel's + items' padding into their declared widths (they default to
   content-box with explicit width:208px / width:100%, so the items rendered
   ~24px wider than the panel and spilled past its right edge). */
.is-public-page .lz-navmenu__pop,
.is-public-page .lz-navmenu__pop a { box-sizing: border-box; }
.is-public-page .lz-navmenu__pop { border-radius: var(--tac-r-md); }
.is-public-page .lz-navmenu__pop a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; }
/* account chip + avatar */
.is-public-page .lz-nav .acct {
  background: var(--sf-surface); border: 1px solid var(--sf-border-strong); border-radius: var(--r-pill);
}
.is-public-page .lz-nav .acct:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--sf-border-strong)); }
.is-public-page .lz-nav .acct__name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }
.is-public-page .lz-nav .avatar { font-family: var(--font-mono); color: #07120A; background: linear-gradient(135deg, var(--p-400), var(--p-600)); }

/* mobile drawer → mono labels (consistency with the bar it replaces ≤960px) */
.is-public-page .lz-drawer-host__brand { font-family: var(--font-mono); letter-spacing: 0.04em; }
.is-public-page .lz-drawer-group__label { font-family: var(--font-mono); }
.is-public-page .lz-drawer-host a { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.03em; }
.is-public-page .lz-drawer-host a.active { background: transparent; color: var(--accent); }

/* Footer */
.is-public-page .lz-site-footer { position: relative; overflow: clip; }
.is-public-page .lz-site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image:
    linear-gradient(color-mix(in srgb, var(--sf-text) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--sf-text) 3%, transparent) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 100% 120% at 50% 100%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 100% 120% at 50% 100%, #000 30%, transparent 80%);
}
.is-public-page .lz-site-footer__inner { position: relative; z-index: 1; }
.is-public-page .lz-site-footer__copy,
.is-public-page .lz-site-footer__disclaimer,
.is-public-page .lz-site-footer__credit { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; }
.is-public-page .lz-site-footer__brand { font-family: var(--font-mono); }
.is-public-page .lz-site-footer__legal a { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; }
.is-public-page .lz-site-footer__support {
  color: var(--accent) !important;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--tac-r-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--sf-border-strong));
  box-sizing: border-box;
  /* opt out of the 44px tap-target floor: that's for invisible-hit text links; on this visible bordered chip it makes a 44px tower */
  min-height: 0;
}
.is-public-page .lz-site-footer__support:hover { background: var(--tac-soft); text-decoration: none; }

/* Link-game nudge: sitewide strip + dashboard interstitial */

/* Sitewide strip */
.lz-link-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  font: 500 13.5px/1.5 var(--font-sans);
  background: var(--st-warn-bg);
  color: var(--st-warn);
  border-bottom: 1px solid var(--st-warn-border);
  border-inline-start: 3px solid var(--st-warn);
  box-sizing: border-box;
  min-height: 46px;
}
:root:not(.dark) .lz-link-strip {
  color: #78350F; /* WCAG AA on pale warn tint */
}
.lz-link-strip__msg {
  flex: 1 1 auto;
  min-width: 0;
}
.lz-link-strip__cta {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.lz-link-strip__cta:hover { opacity: 0.85; }
.lz-link-strip__dismiss {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  opacity: 0.75;
  transition: opacity 120ms ease, background-color 120ms ease;
}
.lz-link-strip__dismiss:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
  opacity: 1;
}
@media (max-width: 480px) {
  .lz-link-strip {
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 6px;
  }
  .lz-link-strip__cta { white-space: normal; }
}

/* Post-login interstitial */
.lz-link-interstitial {
  border: none;
  border-radius: var(--r-lg);
  padding: 0;
  max-width: 440px;
  width: 92%;
  background: transparent;
  color: inherit;
}
.lz-link-interstitial::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.lz-link-interstitial__card {
  padding: 24px 26px;
}
.lz-link-interstitial__head {
  margin-bottom: 20px;
}
.lz-link-interstitial__title {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.3;
}
.lz-link-interstitial__body {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.55;
}
.lz-link-interstitial__hint {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--st-warn);
}
:root:not(.dark) .lz-link-interstitial__hint { color: #78350F; }
.lz-link-interstitial__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lz-link-interstitial__cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lz-link-interstitial__snooze {
  align-self: center;
}
@media (max-width: 380px) {
  .lz-link-interstitial__card { padding: 18px 18px; }
  .lz-link-interstitial__title { font-size: 17px; }
}

/* ── Store-rewards showcase (home) ── */
.lz-srw{display:flex;flex-direction:column;gap:16px}
.lz-srw-lbl{display:flex;align-items:center;gap:10px;font-size:.8rem;font-weight:700;color:var(--sf-text);margin-bottom:10px}
.lz-srw-tag{font-size:.68rem;font-weight:600;letter-spacing:.04em;color:var(--sf-text-2)}
.lz-srw-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:8px}
.lz-srw-tile{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;font:inherit;padding:9px 7px 8px;border:1px solid var(--sf-border);border-radius:12px;background:var(--sf-surface-2);color:var(--sf-text);cursor:pointer;transition:border-color .15s,transform .15s}
.lz-srw-tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.lz-srw-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lz-srw-thumb{width:100%;aspect-ratio:1;border-radius:9px;background:radial-gradient(circle at 50% 35%,var(--tac-soft),transparent 70%),var(--sf-canvas);border:1px solid var(--sf-border);display:flex;align-items:center;justify-content:center;margin-bottom:7px;overflow:hidden}
.lz-srw-thumb img{width:74%;height:74%;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.lz-srw-thumb-fb{font-size:18px;color:var(--accent)}
.lz-srw-tname{font-size:.74rem;font-weight:700;color:var(--sf-text);line-height:1.2}
.lz-srw-tmeta{font-size:.62rem;color:var(--sf-text-2);margin-top:1px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lz-srw-badge{position:absolute;top:6px;inset-inline-end:6px;font-size:.58rem;font-weight:800;line-height:1;color:var(--accent-fg);background:var(--accent);padding:2px 5px;border-radius:99px}
.lz-srw-ribbon{position:absolute;top:6px;inset-inline-start:6px;font-size:.54rem;font-weight:800;letter-spacing:.03em;line-height:1;color:var(--accent);background:var(--tac-soft);border:1px solid var(--accent);padding:2px 5px;border-radius:99px}

.lz-srw-dialog{border:none;padding:0;background:transparent;color:var(--sf-text);max-width:none;max-height:none}
.lz-srw-dialog::backdrop{background:rgba(4,8,6,.62);backdrop-filter:blur(3px)}
.lz-srw-card{box-sizing:border-box;width:min(440px,92vw);max-height:85vh;display:flex;flex-direction:column;background:var(--sf-surface);border:1px solid var(--sf-border);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.lz-srw-top{flex:0 0 auto;padding:18px 20px;border-bottom:1px solid var(--sf-border);background:var(--tac-soft)}
.lz-srw-cat{margin:0 0 3px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.lz-srw-dtitle{margin:0;font-size:1.15rem;color:var(--sf-text)}
.lz-srw-dmeta{margin:8px 0 0;font-size:.78rem;color:var(--sf-text-2)}
.lz-srw-dbody{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 20px 18px}
.lz-srw-glabel{margin:0 0 10px;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sf-text-2)}
.lz-srw-good{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px dashed var(--sf-border)}
.lz-srw-good:last-child{border-bottom:0}
.lz-srw-ico{width:34px;height:34px;border-radius:8px;background:var(--sf-surface-2);border:1px solid var(--sf-border);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--accent);flex:0 0 auto;overflow:hidden}
.lz-srw-ico img{width:100%;height:100%;object-fit:contain}
.lz-srw-nm{flex:1;font-size:.84rem;color:var(--sf-text)}
.lz-srw-ct{font-weight:700;color:var(--accent)}
.lz-srw-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px;border-top:1px solid var(--sf-border)}
.lz-srw-note{font-size:.72rem;color:var(--sf-text-2)}
.lz-srw-x{font:inherit;font-size:.8rem;cursor:pointer;background:var(--sf-surface-2);border:1px solid var(--sf-border);color:var(--sf-text);border-radius:8px;padding:7px 14px}
.lz-srw-x:hover{border-color:var(--accent)}

@media (max-width:540px){
  .lz-srw-dialog{margin:0;position:fixed;inset:auto 0 0 0}
  .lz-srw-card{width:100vw;max-height:calc(100dvh - 24px);border-radius:16px 16px 0 0;border-bottom:0}
  .lz-srw-foot{padding-bottom:calc(13px + env(safe-area-inset-bottom,0px))}
}

/* Deactivated subscription — locked read-only card + overlay (dashboard) */
.js-sub-group.is-deactivated { position: relative; }
.lz-sub-locked {
  opacity: .5;
  filter: grayscale(.4);
  pointer-events: none;   /* fallback for browsers without [inert] */
  user-select: none;
}
.lz-sub-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--sf-surface) 55%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.lz-sub-overlay__box {
  max-width: 400px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  background: var(--sf-surface);
  border: 1px solid var(--st-danger-border, var(--sf-border-strong));
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
}
.lz-sub-overlay__eyebrow { color: var(--st-danger); }
.lz-sub-overlay__msg {
  margin: 0;
  color: var(--sf-text);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Language switcher (i18n, GAM-11) ── */
.lz-lang { position: relative; }
.lz-lang > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  color: var(--sf-text-2); font-size: 13px; font-weight: 500;
  border: 1px solid transparent;
}
.lz-lang > summary::-webkit-details-marker { display: none; }
.lz-lang > summary:hover { background: var(--sf-surface-2); color: var(--sf-text); }
.lz-lang__globe { font-size: 15px; line-height: 1; }
.lz-lang__pop {
  position: absolute; inset-inline-end: 0; margin-top: 6px; z-index: 1200;
  min-width: 168px; max-height: 320px; overflow-y: auto;
  padding: 6px; border-radius: 10px;
  background: var(--sf-surface); border: 1px solid var(--sf-border);
  box-shadow: 0 8px 28px rgba(0,0,0,0.16);
  display: flex; flex-direction: column; gap: 2px;
}
.lz-lang__pop a {
  padding: 7px 10px; border-radius: 6px;
  color: var(--sf-text-2); font-size: 13px; text-decoration: none;
}
.lz-lang__pop a:hover { background: var(--sf-surface-2); color: var(--sf-text); }
.lz-lang__pop a.active { color: var(--sf-text); font-weight: 600; }

/* ── RTL (Arabic) — cases logical properties can't cover ──
   Layout flips come from `dir="rtl"` + logical props above; these handle
   transforms, one-sided shadows/gradients, and directional glyphs that
   don't mirror on their own. Inert under LTR. */

/* Mobile nav drawer is anchored inset-inline-start; slide it off the
   inline-start edge (right in RTL) and cast its shadow the other way. */
[dir="rtl"] .lz-drawer-host { transform: translateX(100%); box-shadow: -18px 0 40px rgba(0, 0, 0, 0.5); }
[dir="rtl"] body.lz-drawer-open .lz-drawer-host { transform: translateX(0); }

/* Section-meta "›" separator points into the reading direction. */
[dir="rtl"] .lz-section-head__meta::before { content: "‹"; }

/* Row-expander chevron (collapsed) points into the reading direction;
   the expanded state keeps its rotate() to point down. */
[dir="rtl"] .is-public-page .lz-task-chevron:not([aria-expanded="true"]) { transform: scaleX(-1); }

/* Sticky actions column casts its edge shadow toward the scrolling content. */
[dir="rtl"] .lz-th-actions-sticky,
[dir="rtl"] .lz-td-actions-sticky { box-shadow: 8px 0 14px -8px rgba(0, 0, 0, 0.75); }

/* HUD table scroll-fade sits at the inline-end edge; flip its gradient too. */
[dir="rtl"] .is-public-page .tac-table-wrap::after { background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--sf-surface) 92%, transparent)); }

/* ── Invite-event rewards & milestones (/invite-event) ── */
.lz-ie-caption{font-size:.78rem;color:var(--sf-text-2);margin:0 0 12px}
.lz-ie-rewards{display:flex;flex-wrap:wrap;gap:8px}
.lz-ie-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border:1px solid var(--sf-border);border-radius:99px;background:var(--sf-surface);font-size:.74rem;color:var(--sf-text)}
.lz-ie-chip__ico{width:30px;height:30px;border-radius:7px;background:var(--sf-canvas);border:1px solid var(--sf-border);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.lz-ie-chip__ico img{width:100%;height:100%;object-fit:contain}
.lz-ie-chip__qty{font-weight:700;color:var(--accent)}
.lz-ie-chip__name{opacity:.8;font-weight:500}
.lz-ie-chip--bond{border-color:var(--accent);background:var(--tac-soft);color:var(--accent);font-weight:700;padding-left:10px}
.lz-ie-chip--bond .lz-ie-chip__name{opacity:1;color:var(--accent)}
.lz-ie-coupon{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 4px;border:1px solid var(--accent);border-radius:99px;background:var(--tac-soft);font-size:.74rem;font-weight:700;color:var(--accent)}
.lz-ie-coupon img{width:30px;height:30px;border-radius:7px;object-fit:contain;background:var(--sf-canvas)}
.is-public-page .lz-ie-toggle{border:1px solid var(--sf-border);border-radius:var(--tac-r-sm);background:color-mix(in srgb, var(--sf-surface) 50%, transparent);padding:0 16px}
.is-public-page .lz-ie-toggle summary{cursor:pointer;padding:14px 0;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--accent);list-style:none;display:flex;justify-content:space-between;align-items:center}
.is-public-page .lz-ie-toggle summary::-webkit-details-marker{display:none}
.is-public-page .lz-ie-toggle summary::after{content:"+";color:var(--accent)}
.is-public-page .lz-ie-toggle[open] summary::after{content:"\2212"}
.is-public-page .lz-ie-toggle__body{padding:0 0 16px}
@media (max-width: 380px) {
  .lz-ie-chip, .lz-ie-coupon { font-size: .7rem; }
}

/* Invite Tasks — card grid */
.lz-ie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.lz-ie-card{border:1px solid var(--sf-border);border-radius:var(--tac-r-md);background:var(--sf-surface-2);padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.lz-ie-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.lz-ie-card__lbl{font-size:.8rem;line-height:1.35;font-weight:500;color:var(--sf-text)}
.lz-ie-bondtab{font-family:var(--font-mono);font-weight:700;font-size:.72rem;color:var(--ie-bond);border:1px solid var(--ie-bond);background:var(--ie-bond-soft);border-radius:6px;padding:2px 7px;white-space:nowrap;flex:0 0 auto}
.lz-ie-bondtab__unit{font-weight:500}
.lz-ie-bondtab.is-zero{color:var(--sf-text-3);border-color:var(--sf-border);background:transparent}

/* Bond-Token Milestones — horizontal ladder */
.lz-ie-ladderwrap{overflow-x:auto}
.lz-ie-ladder{display:grid;grid-template-columns:repeat(5,minmax(88px,1fr));gap:0;border:1px solid var(--sf-border);border-radius:var(--tac-r-md);overflow:hidden;background:var(--sf-surface-2)}
.lz-ie-rung{padding:13px 8px;text-align:center;border-right:1px solid var(--sf-border)}
.lz-ie-rung:last-child{border-right:0}
.lz-ie-rung__pts{font-family:var(--font-mono);font-size:.68rem;color:var(--ie-bond);font-weight:700}
.lz-ie-rung__bar{height:3px;background:var(--sf-border);margin:9px 0;position:relative}
.lz-ie-rung__bar::after{content:"";position:absolute;inset:0 40% 0 0;background:var(--ie-gold)}
.lz-ie-rung__bar.is-last::after{right:0}
.lz-ie-rung__gold{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:5px}
.lz-ie-rung__gold img{width:26px;height:26px;object-fit:contain;flex:0 0 auto}
.lz-ie-rung__gold b{font-family:var(--font-mono);font-weight:700;color:var(--ie-gold);font-size:.85rem}
.lz-ie-laddercap{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px;font-size:.74rem;color:var(--sf-text-2)}
.lz-ie-laddercap b{color:var(--ie-gold);font-family:var(--font-mono)}

/* Recharge Tasks now reuse the invite-task .lz-ie-grid / .lz-ie-card above (still inside the <details> toggle). */

/* Invite-code list — code + Copy on one line, progress note on its own sub-row */
.lz-ie-coderows{border:1px solid var(--sf-border);border-radius:var(--tac-r-md);overflow:hidden}
.lz-ie-coderow{padding:11px 14px;border-bottom:1px solid var(--sf-border)}
.lz-ie-coderow:last-child{border-bottom:0}
.lz-ie-coderow__line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lz-ie-coderow__code{font-weight:700;font-size:.92rem;letter-spacing:.04em}
.lz-ie-coderow__sub{margin-top:6px;font-size:.72rem;color:var(--sf-text-3)}
.lz-ie-coderow__sub b{color:var(--ie-bond);font-family:var(--font-mono)}
.lz-ie-rotationnote{margin:12px 0 0;font-size:.72rem}

/* Redeem-a-code — numbered step sequence + external store link/CTA */
.lz-ie-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.lz-ie-step{display:flex;align-items:flex-start;gap:12px}
.lz-ie-step__num{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--tac-soft);border:1px solid var(--accent);color:var(--accent);font-family:var(--font-mono);font-weight:700;font-size:.72rem;line-height:1;display:flex;align-items:center;justify-content:center}
.lz-ie-step__txt{font-size:13.5px;line-height:1.6;color:var(--sf-text);padding-top:2px}
.lz-ie-step__txt a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.lz-ie-extlink{font-size:.85em}
.lz-ie-storecta{margin-top:20px;width:100%;justify-content:center;padding:12px 18px}

/* "Have your own code?" — spacious CTA card, replaces the cramped .alert-success */
.lz-ie-cta{margin-top:18px}
.lz-ie-cta .panel__pad{padding:26px 24px}
.lz-ie-cta__eyebrow{margin-bottom:12px}
.lz-ie-cta__h{margin:0 0 10px;font-size:1.15rem;font-weight:700;color:var(--sf-text);letter-spacing:-0.01em}
.lz-ie-cta__p{margin:0 0 20px;font-size:13.5px;line-height:1.65;color:var(--sf-text-2)}
.lz-ie-cta__p strong{color:var(--ie-gold);font-weight:700}
.lz-ie-cta__btn{width:100%;justify-content:center;padding:12px 18px}
.lz-ie-cta__link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;color:var(--accent);text-decoration:none}
.lz-ie-cta__link:hover{text-decoration:underline;text-underline-offset:3px}

@media (max-width: 380px) {
  .lz-ie-ladder{grid-template-columns:repeat(5,minmax(78px,1fr))}
}

/* Bare directional arrows in CTA/link text (outside translated strings) mirror under RTL. */
[dir="rtl"] .lz-arrow { display: inline-block; transform: scaleX(-1); }

/* ── Creator codes (youtubers page) ── */
.lz-ccode { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px;
  min-width: 0; }
.lz-ccode__code {
  font: 600 13px/1 var(--font-mono);
  letter-spacing: .04em;
  color: var(--sf-text);
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
  max-width: 100%;
}
.lz-ccode__code:hover { background: var(--accent-glow); }
.lz-ccode__cta { flex: 1 1 auto; min-width: max-content; text-align: center; }
.lz-ccode__alt {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--sf-text);
  opacity: .65;
}
.lz-ccode__alt:hover { opacity: 1; }
.tcard.is-supporting { border-color: var(--accent); }
.tcard.is-supporting .lz-ccode__code { border-style: solid; }
/* Closing pitch to creators. Deliberately not a .tcard — it is an invitation,
   not another item in the list above it. */
.lz-pitch {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 26px 24px;
  border: 1px solid var(--sf-border-strong);
  border-radius: 12px;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--accent-soft) 0%, transparent 58%),
    var(--sf-surface);
}
@media (min-width: 760px) {
  .lz-pitch { grid-template-columns: 1fr auto; align-items: center; gap: 36px; }
}
.lz-pitch__h { margin: 10px 0 6px; font-size: clamp(20px, 3vw, 26px); letter-spacing: -.015em; }
.lz-pitch__lede { margin: 0; color: var(--sf-text-2); font-size: 14px; max-width: 46ch; }
.lz-pitch__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.lz-pitch__list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--sf-text);
}
.lz-pitch__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.lz-pitch__act {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
@media (min-width: 760px) {
  .lz-pitch__act { align-items: flex-end; text-align: right; }
}
.lz-pitch__act .btn { white-space: nowrap; }
.lz-pitch__free { font-size: 11.5px; color: var(--sf-text-2); }
.lz-pitch__faq { font-size: 12px; color: var(--sf-text-2); text-decoration: underline; }
.lz-pitch__faq:hover { color: var(--accent); }
.lz-ccount { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 1px;
  background: var(--sf-border); border: 1px solid var(--sf-border); border-radius: 7px;
  overflow: hidden; margin-top: 10px; }
.lz-ccount > div { background: var(--sf-surface-2); padding: 9px 6px; text-align: center; }
.lz-ccount b { display: block; font: 700 16px/1.1 var(--font-sans); font-variant-numeric: tabular-nums; }
.lz-ccount span { display: block; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--sf-text-2); margin-top: 3px; }
.lz-ccount--mine b { color: var(--accent); }
.lz-uid-row__creator-on { font-weight: 600; color: var(--accent); }
/* "nobody" is an ANSWER — we read the account and it backs no one — so it reads
   as normal body text, not as missing data. "—" means we could never read it,
   so it stays muted and advertises its tooltip. Styling both with .dim made the
   two indistinguishable, which threw away the whole point of tracking them
   apart. */
.lz-uid-row__creator-none { color: var(--sf-text); opacity: .75; }
.lz-uid-row__creator-unknown {
  color: var(--sf-text-2);
  opacity: .6;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
.lz-cc-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.lz-cc-steps li {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  padding: 14px 16px;
}
.lz-cc-steps__n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 11px/1 var(--font-mono);
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent);
}
.lz-cc-steps p { margin: 4px 0 0; font-size: 13px; opacity: .8; }
.lz-ccode__msg {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--sf-text);
  opacity: .8;
}