/*
  ZorX shared UI / design-system layer.
  ------------------------------------------------------------------
  WHAT: One canonical token set + refined treatments for the global
  chrome (buttons, cards, nav, drawer, footer, forms, modals, motion).
  HOW:  Loaded AFTER each page's own inline <style> so it normalizes
        the drifted per-page copies WITHOUT editing them. It reuses
        the class names already present in the markup (.btn, .nav,
        .tool-card, footer, .mobile-drawer, etc.), so most pages get
        restyled with zero markup changes.
  WHY:  Every page used to duplicate its own tokens + components, which
        drifted out of sync and read as a generic/template site. This
        gives one premium, consistent source of truth.

  RULES (see CLAUDE.md):
   - UTF-8, no BOM, LF.
   - Refine the existing neon-green (#aaff14) on dark identity. No new
     palette, no light theme.
   - Desktop styling lives here; mobile (<=1024px) refinements stay in
     zorx-responsive.css. Avoid adding desktop-only media queries here
     that fight that boundary.
*/

/* ============================================================
   1. TOKENS — canonical superset of the per-page :root copies
   ============================================================ */
:root {
  /* Backgrounds (unchanged brand values) */
  --bg: #0a0d0a;
  --bg-2: #0f1410;
  --bg-3: #141a14;

  /* Surface elevation (NEW — consistent card/panel layering) */
  --surface-1: #0e130f;
  --surface-2: #121a13;
  --surface-3: #18211a;

  /* Ink / text (unchanged) */
  --ink: #eaffee;
  --ink-dim: #9ab09b;
  --ink-muted: #5a6c5b;

  /* Accents (unchanged) */
  --neon: #aaff14;
  --neon-2: #00ffae;
  --acid: #c8ff3e;
  --magenta: #ff2b6e;
  --gold: #ffd24a;
  --silver: #c8d2cc;
  --bronze: #cd7f32;
  --emerald: #00d68a;

  /* Lines / borders (unchanged) */
  --line: rgba(170, 255, 20, 0.18);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(170, 255, 20, 0.42);

  /* Focus ring (NEW — a11y, derived from neon) */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--neon);

  /* Fonts (unchanged) */
  --display: 'Bebas Neue', sans-serif;
  --display-2: 'Syne', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --body: 'Inter', sans-serif;

  /* Spacing scale (NEW — 4px base; kills "random spacing") */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;

  /* Radii (NEW — consistent corner language; slightly softer than the
     old sharp 0 / 8px mix, kept subtle to stay "esports", not "bubbly") */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Type scale (NEW — fluid, tuned DOWN for compact premium hierarchy) */
  --fs-xs: clamp(11px, 0.7vw + 0.4rem, 12px);
  --fs-sm: clamp(12px, 0.8vw + 0.45rem, 13px);
  --fs-md: clamp(14px, 0.9vw + 0.5rem, 15px);
  --fs-lg: clamp(16px, 1.1vw + 0.5rem, 18px);
  --fs-xl: clamp(20px, 1.6vw + 0.5rem, 24px);
  --fs-2xl: clamp(26px, 2.4vw + 0.5rem, 36px);
  --fs-3xl: clamp(34px, 4.2vw + 0.5rem, 60px);

  /* Elevation / glow (NEW — consistent hover + card depth) */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.42);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.5);
  --glow-neon: 0 0 24px rgba(170, 255, 20, 0.35);
  --glow-neon-strong: 0 0 36px rgba(170, 255, 20, 0.5);

  /* Motion (NEW — standardized) */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.16s;
  --dur-med: 0.26s;

  /* PHASE 6 — systemized DEPTH LADDER.
     One ordered elevation scale so every surface tier reads as a
     deliberate layer (rest -> raised -> active -> overlay -> modal).
     Each combines a soft ambient shadow with a tighter contact shadow
     for a believable "material" feel — no flat single-blur boxes. */
  --elev-0: none;                                              /* page surface */
  --elev-1: 0 1px 2px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.30);   /* card at rest */
  --elev-2: 0 2px 4px rgba(0,0,0,.30), 0 10px 28px rgba(0,0,0,.40);  /* raised / hover */
  --elev-3: 0 4px 8px rgba(0,0,0,.34), 0 18px 44px rgba(0,0,0,.48);  /* active / focused panel */
  --elev-4: 0 8px 16px rgba(0,0,0,.40), 0 30px 70px rgba(0,0,0,.58); /* overlay / modal */
  /* Hairline top highlight that sells a "lit" surface edge. */
  --edge-hi: inset 0 1px 0 rgba(255,255,255,.05);

  /* PHASE 6 — motion additions (token-driven; no ad-hoc values). */
  --dur-slow: 0.4s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* decel — premium settle */
  --press-scale: 0.985;                         /* unified tactile press */

  /* PHASE 7 — ZorX VISUAL SIGNATURE tokens.
     A small, reusable identity kit so the brand reads the same way
     everywhere: a creator-"stage" glow, a cinematic edge light, a
     GPU-cheap grain, and the corner-bracket framing accent color. */
  --zx-stage: radial-gradient(60% 60% at 50% 0%,
                rgba(170,255,20,.10), rgba(0,255,174,.04) 42%, transparent 72%);
  --zx-edge-light: linear-gradient(180deg,
                rgba(170,255,20,.5), rgba(170,255,20,0) 60%);
  --zx-bracket: rgba(170,255,20,.55);          /* corner-frame accent */
  /* Fine grain as a data-URI (no network, GPU-friendly, ~tiny). */
  --zx-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}

/* ============================================================
   2. BUTTONS — same classes, premium + accessible treatment
   ============================================================ */
.btn {
  border-radius: var(--r-sm);
  transition: color var(--dur-med) var(--ease),
              background var(--dur-med) var(--ease),
              border-color var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary:hover {
  box-shadow: var(--glow-neon-strong);
}

/* Cap the oversized large button so it reads premium, not bulky */
.btn-lg {
  padding: 15px 28px;
  font-size: var(--fs-sm);
  border-radius: var(--r-md);
}

/* ============================================================
   3. CARDS / PANELS — unified surface, border, radius, lift
   ============================================================ */
.tool-card,
.creator-card,
.plan-card,
.game-card,
.team-card,
.store-card,
.home-team-card,
.pay-method,
.panel {
  border-radius: var(--r-md);
  transition: transform var(--dur-med) var(--ease),
              border-color var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease);
}

.tool-card:hover,
.creator-card:hover,
.plan-card:hover,
.game-card:hover,
.team-card:hover,
.store-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2), var(--glow-neon);
}

/* ============================================================
   4. NAVBAR — tighter, refined blur, consistent CTA
   ============================================================ */
.nav {
  background: rgba(10, 13, 10, 0.72);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav-inner {
  padding: 14px 32px;
}

.nav-links a {
  transition: color var(--dur-med) var(--ease);
}

.nav-links a:focus-visible {
  outline: none;
  color: var(--neon);
}

.nav-links a:focus-visible::after {
  width: 100%;
}

/* Feature-page topbar aligned to the same language */
.topbar {
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ============================================================
   5. MOBILE DRAWER — smoother motion, larger taps, premium backdrop
   ============================================================ */
.mobile-drawer {
  transition: transform var(--dur-med) var(--ease),
              opacity var(--dur-med) var(--ease);
}

.mobile-drawer-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity var(--dur-med) var(--ease);
}

.mobile-drawer-links a {
  min-height: 48px;
  display: flex;
  align-items: center;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.mobile-drawer-cta .btn {
  min-height: 48px;
  justify-content: center;
}

/* ============================================================
   6. FOOTER — tightened rhythm, consistent link hover
   ============================================================ */
footer .footer-col ul a,
footer .footer-brand a {
  transition: color var(--dur-fast) var(--ease);
}

footer .footer-col ul a:hover,
footer .footer-col ul a:focus-visible {
  color: var(--neon);
  outline: none;
}

/* ============================================================
   7. FORMS & MODALS — consistent inputs, focus rings, surface
   ============================================================ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(170, 255, 20, 0.18);
}

.modal-card,
.auth-modal,
.edit-card {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
}

/* ============================================================
   8. SECTION RHYTHM HELPER — connects sections as one ecosystem
   ============================================================ */
.section,
.zx-section {
  padding-block: clamp(var(--sp-10), 7vw, var(--sp-12));
}

/* ============================================================
   9. MOTION — honor reduced-motion globally from one place
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   PHASE 2 — HERO + VISUAL IDENTITY (2026-06-02)
   ------------------------------------------------------------
   Cinematic atmosphere + premium identity polish layered on top
   of the EXISTING hero (same class names on home.html + index.html).
   We do NOT touch the heroCanvas JS, the .creator-carousel 3D
   flow animation, or any markup — only add depth, framing, and
   intentional motion via shared classes so both pages inherit it.

   Restraint: one accent hue family (neon green + a faint teal/
   magenta wash), soft blur/gradient depth — no RGB overload.
   ============================================================ */

/* --- Atmospheric depth behind the hero ---------------------- */
.hero {
  isolation: isolate;
}

/* Richer, softer multi-layer glow than the flat 3-radial default,
   plus a faint slow aurora drift. Layered UNDER content (z-index 0). */
.hero .hero-bg {
  background:
    radial-gradient(60% 50% at 18% 26%, rgba(170, 255, 20, 0.20) 0%, transparent 58%),
    radial-gradient(55% 50% at 82% 64%, rgba(0, 255, 174, 0.14) 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 108%, rgba(255, 43, 110, 0.07) 0%, transparent 60%),
    radial-gradient(120% 90% at 50% 0%, rgba(10, 16, 10, 0) 40%, var(--bg) 100%);
}

/* A second, slowly drifting light wash gives the scene life without
   the floating-particle clutter the brief warns against. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  z-index: 0;
  pointer-events: none;
  background:
    conic-gradient(from 210deg at 30% 20%,
      rgba(170, 255, 20, 0.10),
      transparent 30%,
      rgba(0, 255, 174, 0.08) 55%,
      transparent 80%);
  filter: blur(40px);
  opacity: 0.7;
  animation: zxHeroAurora 26s var(--ease) infinite alternate;
}

@keyframes zxHeroAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
  100% { transform: translate3d(2.5%, 1.5%, 0) scale(1.06); opacity: 0.8; }
}

/* Bottom seam: hero fades into the next section so the page reads
   as one continuous ecosystem rather than stacked blocks. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg));
}

/* Grid lines: a touch more presence, masked to the center. */
.hero .hero-grid-lines {
  opacity: 0.9;
}

/* --- Premium identity chip --------------------------------- */
.hero-copy .hero-tag {
  position: relative;
  background: linear-gradient(180deg, rgba(170, 255, 20, 0.10), rgba(170, 255, 20, 0.03));
  border: 1px solid rgba(170, 255, 20, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* --- Headline composition + accent word glow --------------- */
.hero-copy h1 {
  text-wrap: balance;
}

.hero h1 .glitch {
  background: linear-gradient(180deg, #d9ff6b 0%, var(--neon) 60%, #7fd400 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--neon);
  text-shadow: 0 0 46px rgba(170, 255, 20, 0.45);
}

.hero-copy p.lead {
  color: var(--ink-dim);
}

/* --- CTA hierarchy: primary shimmers + lifts, secondary calmer */
.hero-actions .btn-primary {
  position: relative;
  overflow: hidden;
}

.hero-actions .btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}

.hero-actions .btn-primary:hover {
  transform: translateY(-2px);
}

.hero-actions .btn-primary:hover::after {
  animation: zxBtnShine 0.9s var(--ease);
}

@keyframes zxBtnShine {
  0%   { left: -60%; opacity: 0; }
  18%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

.hero-trust-line {
  color: var(--ink-muted);
}

/* --- Carousel reads as a lit "stage" ----------------------- */
.hero-studio-visual {
  position: relative;
}

.hero-studio-visual::before {
  content: "";
  position: absolute;
  inset: 6% 2%;
  z-index: -1;
  background: radial-gradient(60% 55% at 55% 45%, rgba(170, 255, 20, 0.16), rgba(0, 255, 174, 0.06) 45%, transparent 72%);
  filter: blur(34px);
  pointer-events: none;
}

/* Hovering the showcase intensifies the active card without
   fighting the existing 35s flow keyframes. */
.creator-card:hover {
  filter: saturate(1.12) brightness(1.04);
}

/* --- Intentional hero entrance (once, on load) ------------- */
.hero-copy > * {
  animation: zxHeroRise 0.7s var(--ease) both;
}
.hero-copy > *:nth-child(1) { animation-delay: 0.02s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.10s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.18s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.26s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.34s; }
.hero-copy > *:nth-child(6) { animation-delay: 0.42s; }

@keyframes zxHeroRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced-motion: kill the hero atmosphere animation + entrance.
   (The global reduced-motion block above also neutralizes these,
   but we explicitly stop the aurora drift and entrance offset so
   nothing is left mid-transform.) */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none !important; }
  .hero-copy > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero-actions .btn-primary:hover::after { animation: none !important; }
}

/* --- Mobile: keep the identity, drop the heavy atmosphere ---- */
@media (max-width: 768px) {
  /* Aurora + stage glow are expensive blurs on phones; soften them
     so the first screen stays crisp and app-like. */
  .hero::before { filter: blur(28px); opacity: 0.5; }
  .hero-studio-visual::before { filter: blur(24px); inset: 10% 6%; }
  .hero::after { height: 96px; }
}

/* ============================================================
   PHASE 3 — SECTION FLOW + TOOL ECOSYSTEM (2026-06-02)
   ------------------------------------------------------------
   Turn "stacked sections" into one connected creator ecosystem.
   Two ideas, both via shared classes on home.html + index.html
   (+ tool grid on zorx-tools.html), no markup/JS/backend changes:
     1. Soften the hard 1px section seams into faded gradient
        transitions + add faint connective glow, so sections flow.
     2. Make the tool grid read as one living system: refined
        depth, hover feedback, and a staggered "system boots up"
        reveal — no visual noise.
   ============================================================ */

/* --- 1. SECTION CONTINUITY --------------------------------- */
/* The "stacked" feel came from abrupt var(--bg-2) swaps with hard
   1px neon borders. Replace the hard lines with edge-faded gradient
   seams so sections read as a continuous surface. (Sections are
   position-relative already; we add ::before/::after seams.)
   [2026-06-03] .games / .rp-section dropped here — those sections were
   removed in the creator-platform repositioning. See audit 2026-06-03-002. */
.roadmap {
  position: relative;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* Soften the flat bg-2 panels: let the section color ease in from
   the page bg at the top/bottom instead of switching abruptly. */
.roadmap {
  background:
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 14%, var(--bg-2) 86%, var(--bg) 100%) !important;
}

/* Faded seam line (replaces the hard border) — strongest in the
   middle, invisible at the edges, with a soft glow. */
.roadmap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
  box-shadow: 0 0 18px rgba(170, 255, 20, 0.10);
}

/* [2026-06-03] .games::after bottom-seam removed — .games section deleted in
   the creator-platform repositioning. See audit 2026-06-03-002. */

/* Section headers: a touch tighter + a connective accent dot before
   the kicker so every section visibly belongs to the same system. */
.section-tag {
  align-items: center;
  gap: 8px;
}
.section-tag::after {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--neon), transparent);
  display: inline-block;
}

/* --- 2. REVEAL MOTION QUALITY ------------------------------ */
/* .reveal/.visible is JS-driven (IntersectionObserver, untouched).
   Upgrade only the easing/feel so sections arrive premium, not abrupt. */
.reveal {
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease) !important;
}

/* --- 3. TOOL ECOSYSTEM ------------------------------------- */
/* Cards already have gradient borders + glow corners. Add: a smoother
   lift, a brighter "connected" edge on hover, and a top sheen so the
   grid feels like one lit control surface rather than separate tiles. */
.tool-card {
  transition: transform var(--dur-med) var(--ease),
              border-color var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease) !important;
}

.tool-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(170, 255, 20, 0.16) inset,
    0 26px 54px -22px rgba(170, 255, 20, 0.26),
    var(--glow-neon);
}

/* A faint top-edge sheen that brightens on hover — reads as the card
   "powering on". Uses an ::after so it never blocks the existing
   ::before gradient-border or any clicks. */
.tools-grid .tool-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(170, 255, 20, 0.5), transparent);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease);
  pointer-events: none;
}
.tools-grid .tool-card:hover::after {
  opacity: 1;
}

/* "System boots up": stagger the cards into view once on load so the
   grid feels alive/connected instead of all-at-once flat. Bounded,
   one-shot, and disabled under reduced-motion below. */
.tools-grid .tool-card {
  animation: zxToolRise 0.55s var(--ease) both;
}
.tools-grid .tool-card:nth-child(1) { animation-delay: 0.04s; }
.tools-grid .tool-card:nth-child(2) { animation-delay: 0.09s; }
.tools-grid .tool-card:nth-child(3) { animation-delay: 0.14s; }
.tools-grid .tool-card:nth-child(4) { animation-delay: 0.19s; }
.tools-grid .tool-card:nth-child(5) { animation-delay: 0.24s; }
.tools-grid .tool-card:nth-child(6) { animation-delay: 0.29s; }
.tools-grid .tool-card:nth-child(7) { animation-delay: 0.34s; }
.tools-grid .tool-card:nth-child(n+8) { animation-delay: 0.38s; }

@keyframes zxToolRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Reduced motion: keep flow + depth, drop the movement ---- */
@media (prefers-reduced-motion: reduce) {
  .tools-grid .tool-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .tool-card:hover { transform: none; }
}

/* --- Mobile: keep ecosystem feel, tighten rhythm ------------- */
@media (max-width: 768px) {
  /* Seams a little softer/narrower so vertical flow stays smooth. */
  .roadmap::before {
    left: 6%;
    right: 6%;
  }
  /* Reduce the lift so touch scrolling doesn't feel jumpy. */
  .tool-card:hover { transform: translateY(-2px); }
}

/* ============================================================
   PHASE 4 — FEATURE / TOOL EDITOR CHROME POLISH (2026-06-02)
   ------------------------------------------------------------
   Make the tool pages feel like a premium creator workspace.
   VISUAL-ONLY, by design + safety rule: this block only sets
   presentational properties (radius, border-color, box-shadow,
   background tint, focus ring, transition) on editor CHROME
   classes. It deliberately does NOT touch:
     - layout drivers (display/position/order/grid-template/
       max-height/width/flex) that govern editor behavior,
     - canvas / .overlay-* render output,
     - file <input>, form field names/IDs, or any JS hook,
     - save/export/upload/submit logic.
   Editor vocabularies (built separately, all load this file):
     * poster editors (result-maker, mvp-poster): .controls,
       .preview-shell, .edit-card, .field, .file-upload-card,
       .tool-actions, .control-title
     * stream-overlay: .controls, .so-section, .so-upload-drop,
       .so-empty, .so-lib-card
     * team-builder: .card, .form-input, .player-slot, .step-dot
   ============================================================ */

/* --- Workspace panels: consistent radius + premium depth ---- */
/* Poster editor control rail + preview shell + stream-overlay rail.
   Only radius/border/shadow tweaks — no sizing/scroll/order changes. */
.controls,
.preview-shell {
  border-radius: var(--r-md);
}
.controls {
  border-color: var(--line-soft);
  box-shadow: var(--shadow-1);
}

/* Section group titles across editors share one premium treatment. */
.control-title,
.so-section > .control-title,
.edit-card-title {
  color: var(--neon);
}

/* --- Edit card / modal: softer corners + real elevation ----- */
.edit-card {
  border-radius: var(--r-lg);
  border-color: rgba(170, 255, 20, 0.22);
  box-shadow: var(--shadow-3);
}

/* --- Form fields: unified focus ring + corner language ------ */
/* Poster .field inputs/selects, team-builder .form-input.
   (Global input focus ring from Phase 1 already applies; here we
   just align radius + the team-builder card surfaces.) */
.field input,
.field select,
.field textarea,
.form-input {
  border-radius: var(--r-sm);
}
.form-input:focus,
.form-input:focus-visible {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(170, 255, 20, 0.16);
}

/* Team-builder content cards + player slots: consistent depth. */
.player-slot {
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.player-slot:focus-within {
  border-color: var(--line);
  box-shadow: var(--shadow-1);
}

/* --- Upload areas: clearer, more inviting drop targets ------ */
/* Poster file-upload card + stream-overlay drop zone. Visual only;
   the underlying <input type=file> and its JS handlers are untouched. */
.file-upload-card,
.so-upload-drop {
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.file-upload-card:hover,
.so-upload-drop:hover,
.so-upload-drop.is-dragover {
  box-shadow: inset 0 0 0 1px rgba(170, 255, 20, 0.18), var(--glow-neon);
}

/* --- Empty states: feel intentional, not unstyled ----------- */
.so-empty {
  border-radius: var(--r-md);
}

/* --- Action hierarchy: primary leads, secondary supports ---- */
/* Across editors the primary CTA is .btn-primary / .btn-neon; danger
   is .btn-danger; the rest are secondary. Give the primary a clear
   focus ring + subtle lift without touching its click behavior. */
.controls .btn-primary,
.tool-actions .btn-primary,
.btn-neon {
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-med) var(--ease),
              background var(--dur-med) var(--ease),
              color var(--dur-med) var(--ease);
}
.controls .btn-primary:hover,
.tool-actions .btn-primary:hover,
.btn-neon:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow-neon);
}
.btn-neon:focus-visible,
.btn-danger:focus-visible,
.btn-outline:focus-visible,
.btn-outline-neon:focus-visible,
.btn-ghost:focus-visible,
.so-lib-card:focus-visible,
.so-upload-drop:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Library cards (overlay shapes/presets) read as a tidy palette. */
.so-lib-card {
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.so-lib-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}

/* --- Reduced motion: drop the editor micro-lifts ------------ */
@media (prefers-reduced-motion: reduce) {
  .controls .btn-primary:hover,
  .tool-actions .btn-primary:hover,
  .btn-neon:hover,
  .so-lib-card:hover {
    transform: none;
  }
}

/* --- Mobile: thumb-friendly without oversizing -------------- */
@media (max-width: 768px) {
  /* Primary editor actions get a comfortable min tap height
     (Phase 1 already enforces 44px on .btn globally; this keeps the
     tool primary CTAs from feeling cramped in dense control rails). */
  .controls .btn-primary,
  .tool-actions .btn-primary,
  .btn-neon {
    min-height: 46px;
  }
  /* Upload drop zones a touch taller for easier tapping. */
  .so-upload-drop { padding-block: 16px; }
}

/* ============================================================
   PHASE 5 — NAVIGATION + FOOTER + GLOBAL APP SHELL (2026-06-02)
   ------------------------------------------------------------
   Make the global shell feel like a premium creator-app frame.
   CSS-only, shared classes on the public pages (admin/index.php
   does NOT load this file, so its sidebar `.nav` is unaffected —
   the Phase-1 exclusion still holds). No route hrefs, link sets,
   JS hooks (.menu-btn, #mobileDrawer, closeMobileMenu), or auth
   behavior are changed.
   Builds on the Phase-1 nav/drawer/footer base rules.
   ============================================================ */

/* --- NAVBAR: compact, app-like, no scroll jump -------------- */
/* Nav is position:fixed already; keep it, just refine the surface
   so it reads as a premium app bar. (Phase 1 set blur+padding.) */
.nav {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10, 13, 10, 0.82), rgba(10, 13, 10, 0.62));
}

.nav-links {
  align-items: center;
}

/* Active-press + keyboard focus for nav links (no markup needed). */
.nav-links a:active {
  color: var(--neon);
}

/* In-page anchor links light up when their section is the target —
   a pure-CSS "current section" cue with zero JS/markup change. */
.nav-links a:focus-visible {
  outline: none;
}

/* Primary header CTA: clear lead with a refined hover. */
.nav-cta .btn-primary {
  border-radius: var(--r-sm);
}
.nav-cta .btn-primary:hover {
  box-shadow: var(--glow-neon);
}

/* The hamburger reads as a real app control (it's a <button class="menu-btn">). */
.menu-btn {
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.menu-btn:hover {
  color: var(--neon);
  background: rgba(170, 255, 20, 0.08);
}
.menu-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Feature-page sticky topbar shares the same app-bar language. */
.topbar {
  background: linear-gradient(180deg, rgba(8, 10, 8, 0.86), rgba(8, 10, 8, 0.66));
}

/* --- MOBILE DRAWER: modern app menu ------------------------- */
.mobile-drawer {
  background: linear-gradient(180deg, var(--surface-2), var(--bg-2) 40%);
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
}

.mobile-drawer-top {
  border-bottom: 1px solid var(--line);
}

.mobile-drawer-close {
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.mobile-drawer-close:hover {
  color: var(--neon);
  border-color: var(--neon);
  background: rgba(170, 255, 20, 0.08);
}

/* Link rows: app-menu rhythm + a left accent bar that grows on
   hover/active so the menu feels responsive (no huge text/gaps). */
.mobile-drawer-links a {
  position: relative;
  min-height: 48px;
  border-radius: var(--r-sm);
  margin: 2px 10px;
  padding-inline: 16px;
}
.mobile-drawer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background: var(--neon);
  border-radius: 2px;
  transition: height var(--dur-fast) var(--ease);
}
.mobile-drawer-links a:hover::after,
.mobile-drawer-links a:active::after {
  height: 56%;
}

.mobile-drawer-cta {
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
}
.mobile-drawer-cta .btn {
  min-height: 48px;
}

/* --- FOOTER: premium + connected to the ecosystem ----------- */
/* A faded top accent (echoes the Phase-3 section seams) so the
   footer reads as the closing band of one continuous platform. */
footer {
  position: relative;
}
footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 25%, var(--line-strong) 75%, transparent);
  pointer-events: none;
}

.footer-col h5 {
  color: var(--neon);
}
.footer-col ul a {
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.footer-col ul a:hover,
.footer-col ul a:focus-visible {
  color: var(--neon);
  outline: none;
}

/* Social chips: rounded, premium, neon hover lift. */
.socials a {
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.socials a:hover,
.socials a:focus-visible {
  border-color: var(--neon);
  color: var(--neon);
  transform: translateY(-2px);
  box-shadow: var(--glow-neon);
  outline: none;
}

/* --- Reduced motion: drop shell micro-motions --------------- */
@media (prefers-reduced-motion: reduce) {
  .socials a:hover { transform: none; }
  .mobile-drawer-links a::after { transition: none; }
  .menu-btn { transition: none; }
}

/* --- Mobile shell: tidy rhythm, no overflow ----------------- */
@media (max-width: 768px) {
  /* Keep the drawer link text app-sized (not huge). */
  .mobile-drawer-links a { font-size: 14px; }
  /* Footer columns breathe without giant gaps on phones. */
  footer { padding-top: 56px; }
  .footer-bottom { gap: 12px; }
}

/* ============================================================
   PHASE 6 — PREMIUM MICRO-INTERACTIONS + DEPTH SYSTEM (2026-06-02)
   ------------------------------------------------------------
   A refinement layer (NOT a redesign): systemize depth tiers,
   standardize the motion language, and add subtle tactile feedback
   so the whole app feels high-end. Token-driven only — every value
   comes from the --elev-*/--dur-*/--ease* scale above, no ad-hoc
   transitions. Structure + JS hooks preserved; reduced-motion and
   mobile are explicitly guarded.
   ============================================================ */

/* --- 1. DEPTH HIERARCHY ------------------------------------- */
/* Rest tier: cards/panels across the site sit on elev-1 with a lit
   top edge, so they read as raised material over the page surface. */
.tool-card,
.creator-card,
.plan-card,
.game-card,
.team-card,
.store-card,
.home-team-card,
.card,
.panel,
.so-lib-card,
.player-slot,
.edit-card {
  box-shadow: var(--elev-1), var(--edge-hi);
}

/* Raised tier: hover lifts to elev-2 + the lit edge. (Specific hover
   glows defined in earlier phases still layer on where present.) */
.tool-card:hover,
.creator-card:hover,
.plan-card:hover,
.game-card:hover,
.team-card:hover,
.store-card:hover,
.so-lib-card:hover {
  box-shadow: var(--elev-2), var(--edge-hi), var(--glow-neon);
}

/* Active/focused panel tier: editor rails + cards being interacted
   with read clearly "in focus". */
.controls,
.preview-shell {
  box-shadow: var(--elev-2), var(--edge-hi);
}
.card:focus-within,
.player-slot:focus-within,
.panel:focus-within {
  box-shadow: var(--elev-3), var(--edge-hi);
}

/* Overlay / modal tier: the highest layer floats on elev-4. */
.modal-card,
.auth-modal,
.edit-card,
.mobile-drawer {
  box-shadow: var(--elev-4), var(--edge-hi);
}
/* Backdrops sit just under the floating layer with a clean dim. */
.modal,
.auth-overlay,
.mobile-drawer-backdrop {
  background-color: rgba(4, 6, 4, 0.62);
}

/* --- 2. STANDARDIZED MOTION LANGUAGE ------------------------ */
/* One transition recipe for interactive surfaces so lift/glow/color
   feel consistent everywhere (decel ease = premium settle). */
.btn,
.tool-card, .creator-card, .plan-card, .game-card,
.team-card, .store-card, .so-lib-card,
.nav-links a, .topbar-link, .socials a, .menu-btn,
.footer-col ul a, .mobile-drawer-links a {
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    background var(--dur-med) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* --- 3. TACTILE PRESS (subtle, unified) --------------------- */
/* Every primary interactive element dips slightly when pressed —
   the single biggest "native app" tell, kept very subtle. */
.btn:active,
.btn-primary:active,
.btn-neon:active,
.tool-launch:active,
.tool-card:active,
.creator-card:active,
.so-lib-card:active,
.socials a:active,
.menu-btn:active,
.nav-cta .btn:active {
  transform: scale(var(--press-scale));
}
/* Cards that also lift on hover should press from the lifted state. */
.tool-card:hover:active,
.creator-card:hover:active {
  transform: translateY(-2px) scale(var(--press-scale));
}

/* --- 4. INPUT FOCUS ATMOSPHERE ------------------------------ */
/* Inputs feel app-like: a soft neon focus glow + a calm resting
   border, without hurting readability/contrast. Applies to the
   global inputs + editor/team-builder fields. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea,
select,
.form-input,
.field input,
.field select,
.field textarea {
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
textarea:focus,
select:focus,
.form-input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(170, 255, 20, 0.16), 0 0 18px rgba(170, 255, 20, 0.10);
}

/* --- 5. CTA CONFIDENCE -------------------------------------- */
/* Primary CTAs settle on a soft resting shadow so they sit "above"
   the page even before hover — reads intentional and clickable. */
.btn-primary,
.btn-neon {
  box-shadow: var(--elev-1);
}
.btn-primary:hover,
.btn-neon:hover {
  box-shadow: var(--elev-2), var(--glow-neon);
}

/* --- Reduced motion: no transforms, keep depth ------------- */
@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .btn-primary:active,
  .btn-neon:active,
  .tool-launch:active,
  .tool-card:active,
  .creator-card:active,
  .so-lib-card:active,
  .socials a:active,
  .menu-btn:active,
  .nav-cta .btn:active,
  .tool-card:hover:active,
  .creator-card:hover:active {
    transform: none;
  }
}

/* --- Mobile: keep it light + responsive --------------------- */
@media (max-width: 768px) {
  /* Trim the heaviest ambient shadows so scrolling stays smooth;
     keep the rest tier readable. */
  .tool-card,
  .creator-card,
  .card,
  .panel,
  .player-slot,
  .so-lib-card {
    box-shadow: var(--elev-1);
  }
  /* Press feedback is the right tactile cue on touch; hover lifts are
     reduced (Phase 3/5 already trim them). Inputs keep the focus ring. */
}

/* ============================================================
   PHASE 7 — ZorX VISUAL SIGNATURE + BRAND ATMOSPHERE (2026-06-02)
   ------------------------------------------------------------
   A small, REUSABLE identity kit (not a redesign): the same few
   signature behaviors applied consistently so ZorX reads as one
   recognizable creator platform, not "another dark site".
   Signature elements:
     1. Section "energy cue" — a recurring neon header accent on the
        shared .section-head, so every section is stamped the same way.
     2. .zx-stage   — creator-stage ambient glow behind a block.
     3. .zx-framed  — cinematic corner brackets (esports framing).
     4. .zx-grain   — fine premium grain texture overlay.
     5. Top-edge cinematic light on premium surfaces.
   All token-driven, GPU-friendly (gradients/opacity, no heavy
   per-frame filters), reduced-motion safe, and lightened on mobile.
   ============================================================ */

/* --- 1. SECTION ENERGY CUE (recurring brand stamp) ---------- */
/* Every shared section header gets the same signature accent: a short
   vertical neon edge-light bar to the left of the kicker/title block.
   This is the single most repeated on-page element, so stamping it
   makes the brand instantly consistent across sections + pages. */
.section-head {
  position: relative;
}
.section-head::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 2px;
  width: 3px;
  height: 42px;
  border-radius: 3px;
  background: var(--zx-edge-light);
  box-shadow: 0 0 14px rgba(170, 255, 20, 0.35);
  pointer-events: none;
}

/* --- 2. .zx-stage : creator-stage ambient glow -------------- */
/* Opt-in: place behind any block to give it a "lit stage" presence.
   (The hero already has its own; this generalizes the language so it
   can be reused on future feature/landing blocks without new CSS.) */
.zx-stage {
  position: relative;
  isolation: isolate;
}
.zx-stage::before {
  content: "";
  position: absolute;
  inset: -6% -2% auto;
  height: 70%;
  z-index: -1;
  background: var(--zx-stage);
  pointer-events: none;
}

/* --- 3. .zx-framed : cinematic corner brackets -------------- */
/* Opt-in esports "framing" motif — two neon brackets on opposite
   corners. Purely decorative, pointer-events:none. */
.zx-framed { position: relative; }
.zx-framed::before,
.zx-framed::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--zx-bracket);
  pointer-events: none;
  opacity: 0.8;
}
.zx-framed::before {
  top: 10px; left: 10px;
  border-right: 0; border-bottom: 0;
  border-top-left-radius: 4px;
}
.zx-framed::after {
  bottom: 10px; right: 10px;
  border-left: 0; border-top: 0;
  border-bottom-right-radius: 4px;
}

/* --- 4. .zx-grain : premium material texture --------------- */
/* Opt-in fine grain overlay for a tactile, cinematic surface. */
.zx-grain { position: relative; }
.zx-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--zx-grain);
  background-size: 140px 140px;
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --- 5. CINEMATIC EDGE LIGHT on premium surfaces ------------ */
/* The hero showcase + modals get a faint top edge-light line — a
   subtle "screen lit from above" cue that ties the brand together. */
.creator-carousel::after,
.edit-card::after,
.auth-modal::after,
.modal-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(170, 255, 20, 0.45), transparent);
  pointer-events: none;
  z-index: 2;
}
/* These containers are already position-relative/overflow-managed in
   their own CSS; the line is decorative and cannot block interaction. */

/* --- 6. GLOBAL AMBIENT GRAIN (very subtle, brand texture) --- */
/* NOTE: the public pages already render a grid (body::after) and a
   grain wash (body::before) inline — we deliberately do NOT override
   those (overriding body::after would wipe the grid lines). Instead,
   pages/blocks that want extra brand texture opt in via .zx-grain.
   Feature pages without the inline grain can add a whisper of it on
   their root containers without touching body pseudo-elements. */
.zx-stage.zx-grain::after { opacity: 0.05; }

/* --- Reduced motion: signature is static (no motion added) --- */
/* Nothing here animates, so reduced-motion needs no extra handling;
   left as a marker that this layer is motion-free by design. */

/* --- Mobile: keep the signature, drop the cost --------------- */
@media (max-width: 768px) {
  /* Lighter section stamp + no grain repaint cost on scroll. */
  .section-head::before { height: 32px; left: -12px; }
  .zx-grain::after { opacity: 0.03; }
  /* Corner brackets a touch smaller so they don't crowd compact cards. */
  .zx-framed::before,
  .zx-framed::after { width: 14px; height: 14px; }
}

/* ============================================================
   PHASE 8 — CONTENT LAYOUT + INFORMATION HIERARCHY (2026-06-02)
   ------------------------------------------------------------
   A readability/hierarchy refinement (NOT a redesign, NOT new
   effects): tune the type relationships, section rhythm, and CTA
   dominance so the page is easy to scan and intentionally composed.
   Token-driven overrides on shared classes (loaded after inline CSS
   so they win); no markup/JS/structure changes.
   ============================================================ */

/* --- 1. SECTION TITLE: strong but not oversized ------------- */
/* Was clamp(48px, 6vw, 88px) on home + index — an 88px title competes
   with the hero and reads "oversized". Cap it to a premium ceiling so
   it leads its section without shouting. line-height kept tight. */
.section-title {
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 0.94;
  letter-spacing: -0.01em;
}

/* --- 2. SUPPORTING TEXT: clearly subordinate, readable ------ */
/* Kicker (label) -> title -> description must read as 3 distinct
   tiers. Calm the description (smaller, relaxed leading) so it sits
   under the title instead of competing with it. */
.section-desc {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink-dim);
}
.section-tag {
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-3);
}

/* --- 3. SECTION RHYTHM: consistent, intentional pacing ------ */
/* Standardize the header->content gap and the internal tag/title/desc
   rhythm so every section breathes the same way. */
.section-head {
  margin-bottom: var(--sp-9);   /* 48px — tighter, consistent */
  gap: var(--sp-6);
}
.section-head .section-title {
  margin-top: 0;
}

/* --- 4. CARD TEXT HIERARCHY: title leads, body/meta recede -- */
/* Make card titles clearly dominant and supporting copy/metadata
   calmer, so cards scan fast. (Shared card text classes.) */
.tool-card p,
.creator-tags span,
.card .section-sub {
  line-height: 1.55;
}
.creator-card-foot,
.tool-kicker,
.creator-card-kicker {
  letter-spacing: 0.04em;
}
/* Metadata/labels sit at the quietest tier. */
.tool-kicker,
.creator-card-foot {
  color: var(--ink-dim);
}

/* --- 5. CTA DOMINANCE: one clear primary per cluster -------- */
/* Primary stays solid neon (Phase 1/6). Calm the SECONDARY hero/action
   buttons so they support rather than compete — lighter weight + muted
   resting color, brightening only on hover. Primary keeps its lead. */
.hero-actions .btn:not(.btn-primary),
.cta-actions .btn:not(.btn-primary) {
  color: var(--ink-dim);
  font-weight: 600;
  box-shadow: none;
}
.hero-actions .btn:not(.btn-primary):hover,
.cta-actions .btn:not(.btn-primary):hover {
  color: var(--neon);
  border-color: var(--neon);
}

/* --- 6. MEASURE: keep body copy readable -------------------- */
/* Cap long body/lead line length for comfortable scanning (premium
   sites rarely run body text edge-to-edge). Scoped to copy blocks. */
.hero p.lead { max-width: 52ch; }
.section-desc { max-width: 42ch; }

/* --- Mobile: fast scan, compact, no giant stacks ------------ */
@media (max-width: 768px) {
  /* A touch smaller title ceiling + tighter header gap so the first
     glance shows title + start of content, not just a huge headline. */
  .section-title { font-size: clamp(28px, 8vw, 40px); line-height: 0.96; }
  .section-head { margin-bottom: var(--sp-7); }   /* 32px */
  .section-desc { font-size: var(--fs-sm); max-width: 100%; }
  .hero p.lead { max-width: 100%; }
}

/* ============================================================
   PHASE 9 — EMPTY / LOADING / LOCKED / FEEDBACK STATES (2026-06-02)
   ------------------------------------------------------------
   Make every product state feel intentional + premium (a polish
   phase, NOT a redesign). VISUAL-ONLY on shared state classes:
   only border/radius/shadow/background-tint/padding/color — we do
   NOT touch `display`, `.show`/`.open`/`.is-locked` toggle classes,
   positioning, JS, or backend-generated message text (the show/hide
   logic and copy stay exactly as-is).
   State vocabularies (built per-tool, all load this file):
     empty:   .empty, .so-empty
     locked:  .lock/.lock__card, .login-cta, .cap-btn.is-locked, .lock-tag
     notice:  .notice, .pro-note
     toast:   .toast (+ .toast--ok/--err and .toast.ok/.err)
     badge:   .badge (+ status modifiers)
     helper:  .hint
   ============================================================ */

/* --- EMPTY STATES: intentional, framed, premium ------------- */
/* Calmer dashed frame + consistent radius + centered breathing room,
   so "nothing here yet" reads designed, not like an error. */
.empty,
.so-empty {
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(170,255,20,.05), transparent 60%),
    rgba(255,255,255,.012);
}
.empty {
  border: 1px dashed var(--line);
}
.empty h3 {
  letter-spacing: .01em;
}

/* --- LOCKED / AUTH STATES: premium + clear, not abrupt ------ */
/* The full-screen lock card and inline login CTAs read as a tidy
   "members area" prompt with real elevation + a soft neon focus. */
.lock__card,
.login-cta,
.enter-card {
  border-radius: var(--r-lg);
  box-shadow: var(--elev-3), var(--edge-hi);
}
.lock__card {
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(170,255,20,.07), transparent 65%),
    var(--surface-2);
}
/* Locked control buttons: a calm "gold lock" treatment (matches the
   existing amber lock language) with a clear focus ring. */
.cap-btn.is-locked:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 209, 92, 0.25);
}
.lock-tag {
  border-radius: var(--r-pill);
}

/* --- NOTICES / HELPER TEXT: calm, cohesive ------------------ */
/* Standardize corner + a soft inset edge so notices feel like part
   of the surface, not pasted on. (Color/role tint kept per-tool.) */
.notice,
.pro-note {
  border-radius: var(--r-md);
  box-shadow: var(--edge-hi);
}
.hint {
  line-height: 1.5;
}

/* --- TOASTS / SYSTEM FEEDBACK: premium floating chip -------- */
/* Both modifier conventions (--ok/--err and .ok/.err) get a unified
   floating elevation + corner. We DO NOT touch display/opacity/
   transform here (that's the JS-driven show/hide). */
.toast {
  border-radius: var(--r-sm);
  box-shadow: var(--elev-4), var(--edge-hi);
}
.toast--ok,
.toast.ok { border-color: rgba(170, 255, 20, .55); }
.toast--err,
.toast.err { border-color: rgba(255, 61, 103, .55); }

/* --- BADGES / STATUS PILLS: crisp, legible ------------------ */
/* Consistent pill radius + a hairline so status reads at a glance. */
.badge {
  border-radius: var(--r-pill);
  letter-spacing: .08em;
}

/* --- LOADING: lightweight shared skeleton (opt-in) ---------- */
/* A reusable, GPU-cheap shimmer for any "loading" placeholder. Opt-in
   via class only — no existing markup is changed. Falls back to a
   static tint under reduced-motion. */
.zx-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  border-radius: var(--r-sm);
}
.zx-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent, rgba(170, 255, 20, .08), transparent);
  animation: zxShimmer 1.4s var(--ease) infinite;
}
@keyframes zxShimmer {
  100% { transform: translateX(100%); }
}

/* --- Reduced motion: calm the toast/skeleton motion --------- */
@media (prefers-reduced-motion: reduce) {
  .zx-skeleton::after { animation: none; }
}

/* --- Mobile: states stay compact + thumb-friendly ----------- */
@media (max-width: 768px) {
  .empty,
  .so-empty { padding: 36px 16px; }       /* not oversized on phones */
  .lock__card { padding: 24px 20px; }
  /* NOTE: toast positioning (left:50% + translateX(-50%)) is left
     untouched — overriding left/right would fight its centering JS. */
}

/* ============================================================
   PHASE 10 — FINAL CONSISTENCY + VISUAL QA (2026-06-02)
   ------------------------------------------------------------
   No new visual systems. This block (a) brings the remaining
   public pages (forgot-password, legal/*, policies/*, support/)
   into the product family by safely scoping shared treatments,
   and (b) resolves the few genuine cross-page inconsistencies the
   QA audit found. Build on the existing tokens only.
   ============================================================ */

/* --- QA FIX 1: scope the homepage-hero ATMOSPHERE -----------
   Phase 2 styled `.hero` (aurora ::before + bottom-seam ::after).
   The legal/policy/support pages reuse `.hero` as a plain page
   HEADER (no .hero-bg child), so once they load this file the
   homepage atmosphere would wrongly bleed onto them. Neutralize
   the atmosphere for any `.hero` that is NOT the homepage hero
   (the homepage hero is the only one containing a `.hero-bg`).
   `:has()` is baseline in current browsers; if unsupported the
   rule simply no-ops (harmless faint glow), never a layout break. */
.hero:not(:has(.hero-bg))::before,
.hero:not(:has(.hero-bg))::after {
  content: none;
}
.hero:not(:has(.hero-bg)) {
  isolation: auto;
}

/* --- QA FIX 2: unify the legacy ".footer" block ------------
   Policy/legal/support pages use <footer class="footer"> with their
   own `.footer-inner`/`.footer-links` (distinct from the main
   `.footer-grid` footer). Phase 5's `footer::before` top-accent
   already applies (good — consistent seam). Just align the link
   hover so it matches the rest of the product. */
.footer-links a {
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--neon);
  outline: none;
}

/* --- QA FIX 3: consistent focus ring on legacy controls ----
   Any button/link/input on the newly-wired pages that lacks a
   modern focus cue inherits the shared neon ring for a11y parity. */
.pill:focus-visible,
.eyebrow:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --- QA FIX 4: card radius parity --------------------------
   A couple of legacy cards used a 14px radius vs the token --r-lg
   (16) / --r-md (12). Nudge the most visible shared ones onto the
   token scale so corners read identical across the product. (Only
   touches generic shared names; per-tool bespoke cards keep theirs.) */
.notice,
.empty,
.so-empty,
.login-cta,
.pro-note {
  border-radius: var(--r-md);
}

/* --- QA FIX 5: kill stray horizontal overflow --------------
   Final guard so no page (esp. mobile, esp. wide preformatted text
   or long share links) can introduce a horizontal scrollbar. */
.wrap,
.container,
.layout,
.content {
  max-width: 100%;
}
.share-pill,
.turl,
.tinfo .turl {
  overflow-wrap: anywhere;
}

/* --- Mobile QA: consistent compact rhythm ------------------- */
@media (max-width: 768px) {
  /* Belt-and-braces: prevent accidental horizontal scroll on any
     newly-wired page. */
  html, body { overflow-x: clip; }
}

/* ============================================================
   PHASE 0 — CREATOR STUDIO REDESIGN FOUNDATION (2026-06-03)
   ------------------------------------------------------------
   WHAT: Additive design-system layer for the upcoming Creator
         Studio homepage redesign. Tokens are namespaced --zxd-*
         and component classes are namespaced .zxd-* so they CANNOT
         collide with any existing class (verified: zero `zxd-`
         usage anywhere in the codebase before this commit).

   ZERO-VISUAL-CHANGE CONTRACT:
     - No existing selector, token, or rule is modified or removed.
     - Every new --zxd-* token is consumed ONLY by .zxd-* classes
       below — nothing in the current markup uses them.
     - Every .zxd-* component class is DORMANT: no current element
       carries these classes, so they render nothing until a later
       redesign phase opts an element in. Adding an unused class
       definition to a stylesheet paints no pixels.
     - Existing tokens (--sp-*, --r-*, --fs-*, --elev-*, --shadow-*,
       --glow-*, --dur-*, --ease, --ease-out, --neon, --neon-2) are
       REUSED by reference, never redefined.

   See audit entry 2026-06-03-003. This block is safe to delete
   wholesale to fully roll back Phase 0.
   ============================================================ */
:root {
  /* --- Accent: promote mint to canonical shared tokens --------
     (Previously only declared in an inline home.html block. Defining
     them here too is harmless — same values — and lets future .zxd-*
     classes use one source. Does not touch --neon / --neon-2.) */
  --zxd-mint: #00ff99;
  --zxd-mint-2: #00ffae;
  --zxd-mint-soft: rgba(0, 255, 153, 0.12);
  --zxd-mint-line: rgba(0, 255, 153, 0.32);

  /* --- Focus ring (mint variant) — opt-in, not applied globally - */
  --zxd-focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--zxd-mint);

  /* --- Section rhythm — capped pad to replace ad-hoc 140px ----- */
  --zxd-section-pad: clamp(56px, 8vw, 96px);
  --zxd-gap: var(--sp-6, 24px);
  --zxd-container: 1180px;

  /* --- Z-index scale (none existed as tokens) ------------------ */
  --zxd-z-base: 1;
  --zxd-z-raised: 10;
  --zxd-z-sticky: 100;     /* app-bar */
  --zxd-z-drawer: 500;     /* mobile drawer (matches existing usage) */
  --zxd-z-overlay: 900;    /* big overlays */
  --zxd-z-modal: 1000;     /* auth / confirm modals */
  --zxd-z-toast: 9999;     /* toasts (matches existing usage) */

  /* --- Motion aliases (reuse existing dur/ease, named for redesign) */
  --zxd-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  --zxd-dur-1: var(--dur-fast, 0.16s);
  --zxd-dur-2: var(--dur-med, 0.26s);
  --zxd-dur-3: var(--dur-slow, 0.4s);

  /* --- Type roles for the redesign (map onto existing --fs-*) -- */
  --zxd-fs-display: var(--fs-3xl, clamp(34px, 4.2vw, 60px));
  --zxd-fs-h2: var(--fs-2xl, clamp(26px, 2.4vw, 36px));
  --zxd-fs-h3: var(--fs-xl, clamp(20px, 1.6vw, 24px));
  --zxd-fs-lead: var(--fs-lg, clamp(16px, 1.1vw, 18px));
  --zxd-fs-body: var(--fs-md, 15px);
  --zxd-fs-kicker: var(--fs-xs, 11px);
}

/* ------------------------------------------------------------------
   DORMANT COMPONENT CLASSES (used by later redesign phases only).
   Namespaced .zxd-* — no current markup carries them.
   ------------------------------------------------------------------ */

/* 1. Section container + header -------------------------------- */
.zxd-section {
  position: relative;
  padding-block: var(--zxd-section-pad);
  z-index: var(--zxd-z-base);
}
.zxd-container {
  width: min(100% - 40px, var(--zxd-container));
  margin-inline: auto;
}
.zxd-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
  margin-bottom: var(--sp-9, 48px);
}
.zxd-kicker {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: var(--zxd-fs-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zxd-mint-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.zxd-title {
  font-family: var(--display, 'Bebas Neue', sans-serif);
  font-size: var(--zxd-fs-h2);
  line-height: 1.02;
  color: var(--ink, #eaffee);
}
.zxd-sub {
  font-size: var(--zxd-fs-lead);
  color: var(--ink-dim, #9ab09b);
  max-width: 60ch;
}

/* 2. App card -------------------------------------------------- */
.zxd-card {
  position: relative;
  background: var(--surface-2, #121a13);
  border: 1px solid var(--line-soft, rgba(255, 255, 255, 0.06));
  border-radius: var(--r-lg, 16px);
  padding: var(--sp-6, 24px);
  box-shadow: var(--elev-1);
  transition: transform var(--zxd-dur-2) var(--zxd-ease),
              border-color var(--zxd-dur-2) var(--zxd-ease),
              box-shadow var(--zxd-dur-2) var(--zxd-ease);
}
.zxd-card:hover {
  transform: translateY(-3px);
  border-color: var(--zxd-mint-line);
  box-shadow: var(--elev-2), var(--glow-neon);
}
.zxd-card__title {
  font-family: var(--display, 'Bebas Neue', sans-serif);
  font-size: var(--zxd-fs-h3);
  color: var(--ink, #eaffee);
}
.zxd-card__desc {
  font-size: var(--zxd-fs-body);
  color: var(--ink-dim, #9ab09b);
  line-height: 1.55;
}

/* 3. Buttons (3 tiers + size) ---------------------------------- */
.zxd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: var(--zxd-fs-body);
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--r-md, 12px);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--zxd-dur-1) var(--zxd-ease),
              background-color var(--zxd-dur-2) var(--zxd-ease),
              border-color var(--zxd-dur-2) var(--zxd-ease),
              box-shadow var(--zxd-dur-2) var(--zxd-ease);
}
.zxd-btn:active { transform: translateY(1px); }
.zxd-btn:focus-visible { outline: none; box-shadow: var(--zxd-focus-ring); }
.zxd-btn--primary {
  background: var(--zxd-mint);
  color: #04130c;
  border-color: var(--zxd-mint);
}
.zxd-btn--primary:hover {
  box-shadow: 0 0 24px rgba(0, 255, 153, 0.3);
}
.zxd-btn--secondary {
  background: transparent;
  color: var(--ink, #eaffee);
  border-color: var(--line-strong, rgba(170, 255, 20, 0.42));
}
.zxd-btn--secondary:hover {
  border-color: var(--zxd-mint-2);
  color: var(--zxd-mint-2);
}
.zxd-btn--ghost {
  background: transparent;
  color: var(--ink-dim, #9ab09b);
  border-color: transparent;
}
.zxd-btn--ghost:hover { color: var(--ink, #eaffee); }
.zxd-btn--lg { padding: 15px 26px; font-size: var(--zxd-fs-lead); }

/* 4. Pills / chips / badges ------------------------------------ */
.zxd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill, 999px);
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: var(--zxd-fs-kicker);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim, #9ab09b);
  border: 1px solid var(--line-soft, rgba(255, 255, 255, 0.06));
  background: var(--surface-1, #0e130f);
}
.zxd-pill--mint {
  color: var(--zxd-mint-2);
  border-color: var(--zxd-mint-line);
  background: var(--zxd-mint-soft);
}
.zxd-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--zxd-mint);
  box-shadow: 0 0 8px var(--zxd-mint);
}

/* 5. UI mock frame (CSS-built tool previews — swappable later) -- */
.zxd-mock {
  position: relative;
  border-radius: var(--r-lg, 16px);
  border: 1px solid var(--line-soft, rgba(255, 255, 255, 0.06));
  background: var(--surface-1, #0e130f);
  overflow: hidden;
  box-shadow: var(--elev-2);
}
.zxd-mock__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft, rgba(255, 255, 255, 0.06));
  background: var(--surface-2, #121a13);
}
.zxd-mock__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-muted, #5a6c5b);
}
/* .zxd-mock__media is the single swap point: CSS mock now,
   real screenshot <img> can replace its contents later. */
.zxd-mock__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, var(--surface-2, #121a13), var(--bg-2, #0f1410));
}

/* 6. Pricing card placeholder ---------------------------------- */
.zxd-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5, 20px);
  padding: var(--sp-7, 32px);
  border-radius: var(--r-lg, 16px);
  border: 1px solid var(--line-soft, rgba(255, 255, 255, 0.06));
  background: var(--surface-2, #121a13);
}
.zxd-price-card--featured {
  border-color: var(--zxd-mint-line);
  box-shadow: var(--elev-2), 0 0 36px rgba(0, 255, 153, 0.12);
}
.zxd-price-card__amount {
  font-family: var(--display, 'Bebas Neue', sans-serif);
  font-size: var(--zxd-fs-display);
  line-height: 1;
  color: var(--ink, #eaffee);
}
.zxd-price-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
}
.zxd-price-card__list li {
  font-size: var(--zxd-fs-body);
  color: var(--ink-dim, #9ab09b);
  display: flex;
  gap: 8px;
}

/* 7. Layout helpers (dormant) ---------------------------------- */
.zxd-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--zxd-gap);
}
.zxd-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}

/* Motion safety: dormant classes still respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .zxd-card,
  .zxd-btn { transition: none; }
  .zxd-card:hover,
  .zxd-btn:active { transform: none; }
}

/* Mobile foundation for the dormant layout helpers (used later). */
@media (max-width: 768px) {
  .zxd-bento { grid-template-columns: 1fr; }
  .zxd-two-col { grid-template-columns: 1fr; }
}
/* ===== END PHASE 0 FOUNDATION ===== */