/* ============================================================
   CodeZero — shared site styles.
   Visual direction: "war chronicle, printed on ink-black paper".
   High-contrast Cormorant Garamond display, Spectral body prose,
   JetBrains Mono for anything the system says (labels, stats,
   codes). Flat surfaces, hairline rules, near-square corners,
   one vermilion accent + brass. No glow, no gradients-as-decor.
   ============================================================ */

:root{
  color-scheme:dark; /* matches the default (dark) theme below */
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'Spectral',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --red:#b23a2f;--red2:#d7a13f;--dark:#0a0a0b;--dark2:#101012;
  --panel:#111112;--border:rgba(236,229,216,0.16);--border2:rgba(236,229,216,0.09);
  --text:#ece5d8;--muted:#8e887c;--gold:#d7a13f;--green:#6f9c6b;
  --accent:#b23a2f;--accent2:#d7a13f;--accent-glow:rgba(178,58,47,0.12);
  --bg-grad1:rgba(178,58,47,.05);--bg-grad2:rgba(215,161,63,.04);

  /* Path accents — the site's one signature device */
  --blade:#b23a2f;--blade-glow:rgba(178,58,47,.14);
  --shadow-c:#6b7789;--shadow-glow:rgba(107,119,137,.16);
  --arcanist:#4e7f70;--arcanist-glow:rgba(78,127,112,.16);

  /* Ink role. --gold/--red2 are brass: they paint chip backgrounds AND
     headlines, which are two opposite jobs on a cream page — a brass badge
     needs to sit there quietly, brass text has to be darker than the paper
     it's on. --brass-ink is the text role. In dark it IS --gold, so nothing
     about the dark theme changes; the light block below is what fixes the
     washed-out type. Same idea for the other accents that were hardcoded
     at dark-theme brightness. */
  --brass-ink:#d7a13f;
  --ok-ink:#10b981;--ok-ink2:#34d399;--ok-ink3:#39c774;
  --bad-ink:#ef4444;--err-ink:#f87171;--err-ink2:#ff6b6b;
  --rose-ink:#f0b3ad;--rose-ink2:#e8a39a;--rose-ink3:#e07a6e;--rose-ink4:#e0605a;--rose-ink5:#e0736a;
  --info-ink:#4e9af1;--info-ink2:#93c5fd;--info-ink3:#a5b4fc;
  --gem-ink:#9a4fd6;--gem-ink2:#c58ee8;--gem-ink3:#c4b5fd;
  --mint-ink:#6ee7b7;--cyan-ink:#67e8f9;--warn-ink:#f0b040;
  /* The other half of the brass split: chips, fills and progress bars that
     carry near-black text on top. Those want the bright bar brass in BOTH
     themes — #8a6a1f under #0f172a is 3.5:1, #d7a13f under it is 8:1. */
  --brass-chip:#d7a13f;

  /* Rarity inks. The hue IS the meaning (grey=common … gold=legendary), so
     the light theme keeps every hue and only drops the brightness — the same
     trick as the inks above. app.js reads these instead of holding its own
     hexes, so a rarity label is legible on both papers. */
  --rarity-common:#7a8291;--rarity-uncommon:#39c774;--rarity-rare:#3f7fd9;
  --rarity-epic:#9a4fd6;--rarity-legendary:#d98e2b;--rarity-ancient:#e0736a;
  --rarity-mythic:#f2c94c;
}
:root.light{
  color-scheme:light;
  /* Without this, Android Chrome / Samsung Internet's "Force Dark" /
     "Auto Dark Theme" setting doesn't know this page has its own real
     light mode — it just sees a page it thinks is dark-only and
     re-darkens it on top of whatever we render, blending its own
     algorithm with our actual colors. That's exactly the "lightens up
     a little but isn't real light mode" symptom: our CSS variables
     WERE flipping correctly, the browser was re-darkening the result
     anyway. Declaring color-scheme per-theme (here + the <meta> tag +
     setTheme() below) tells the browser this page already handles its
     own theming, so it backs off. Desktop Chrome doesn't have this
     auto-dark behavior, which is why it only ever showed up on mobile.
  */
  --red:#98301f;--red2:#8a6a1f;--dark:#f3efe4;--dark2:#e9e3d4;
  --panel:#fbf8f0;--border:rgba(20,18,15,0.16);--border2:rgba(20,18,15,0.09);
  --text:#16140f;--muted:#6b6558;--gold:#8a6a1f;--green:#4b6f48;
  --accent:#98301f;--accent2:#8a6a1f;--accent-glow:rgba(152,48,31,0.08);
  --bg-grad1:rgba(152,48,31,.05);--bg-grad2:rgba(138,106,31,.05);
  /* Path accents intentionally untouched — Blade/Shadow/Arcanist keep
     their own identity colors regardless of overall site theme. */

  /* The same inks, darkened for cream paper. Every one of these clears at
     least 4.5:1 against --panel (#fbf8f0), --dark (#f3efe4) and the pale
     accent tints, which is what the audit at assets/css/../ measures. They
     keep their hue — brass stays brass, mint stays mint — only the
     brightness flips, because the dark theme's accents were all picked to
     read on near-black and simply do not survive the move to cream. */
  --brass-ink:#6b4c10;
  --ok-ink:#0b6440;--ok-ink2:#0f6b4a;--ok-ink3:#166b3f;
  --bad-ink:#b3261e;--err-ink:#a52a1a;--err-ink2:#a52a1a;
  --rose-ink:#8c2f22;--rose-ink2:#8c2f22;--rose-ink3:#8f2a1d;--rose-ink4:#8f2417;--rose-ink5:#8f2a1d;
  --info-ink:#1a56b0;--info-ink2:#1d4ed8;--info-ink3:#3730a3;
  --gem-ink:#6d28d9;--gem-ink2:#6d28d9;--gem-ink3:#4c1d95;
  --mint-ink:#0f6b4f;--cyan-ink:#0e6478;--warn-ink:#7a4f00;
  --rarity-common:#4b5563;--rarity-uncommon:#166b3f;--rarity-rare:#1a56b0;
  --rarity-epic:#6d28d9;--rarity-legendary:#7c4a03;--rarity-ancient:#8f2a1d;
  --rarity-mythic:#7a5c00;
}


/* ── Theme toggle (🌑/☀️) ──────────────────────────────────────────
   THESE TWO BASE RULES WENT MISSING in a prior edit — only the
   .in-nav override survived, which does nothing without a base
   .theme-toggle rule to override in the first place. That's exactly
   why the buttons rendered as unstyled, unpositioned default buttons
   instead of a joined pill. Restored here. */
.theme-toggle{
  position:fixed;top:18px;right:18px;z-index:200;
  display:flex;border:1px solid var(--border2);border-radius:20px;
  overflow:hidden;background:var(--panel);
}
.theme-btn{
  border:none;background:transparent;cursor:pointer;font-size:1rem;
  padding:8px 12px;line-height:1;transition:background .2s;
}
.theme-btn:hover{background:var(--accent-glow);}
.theme-btn.active{background:var(--red);}
@media (max-width:480px){.theme-toggle{top:12px;right:12px;}.theme-btn{padding:6px 10px;font-size:.9rem;}}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--dark);color:var(--text);font-family:var(--font-body);
  font-size:16px;line-height:1.5;min-height:100vh;
  background-image:radial-gradient(ellipse at 12% 8%,var(--bg-grad1) 0%,transparent 50%),
                    radial-gradient(ellipse at 88% 92%,var(--bg-grad2) 0%,transparent 50%);
}
a{color:inherit;text-decoration:none;}
.eyebrow{font-size:.7rem;letter-spacing:4px;text-transform:uppercase;color:var(--muted);font-weight:600;}
.serif{font-family:var(--font-display);}

/* ── Nav ── */
.site-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 6vw;position:sticky;top:0;z-index:100;
  background:var(--dark);border-bottom:1px solid var(--border2);
}
.site-logo{font-family:var(--font-display);font-size:1.3rem;font-weight:900;letter-spacing:var(--cz-word-track,.22em);}
.site-logo span{color:var(--red);}
.nav-actions{display:flex;gap:10px;align-items:center;}
/* .nav-actions-wrap is gone: the landing nav used to stack the theme button
   under Log In / Sign Up. It now sits inline, first in .nav-actions. */
/* Overrides the standalone floating .theme-toggle (still used as-is on
   pages without a nav bar, like log-in/sign-up) so that when nested
   inside a nav, it just takes its normal place in the flex column
   instead of fixed-positioning on top of whatever else is there. */
.theme-toggle.in-nav{position:static;top:auto;right:auto;}
.nav-btn{
  font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;padding:11px 22px;border-radius:3px;cursor:pointer;
  transition:all .2s;border:1px solid var(--border2);
}
.nav-btn.ghost{background:transparent;color:var(--text);}
.nav-btn.ghost:hover{border-color:var(--red);}
.nav-btn.solid{background:var(--red);color:#fff;border:none;}
.nav-btn.solid:hover{background:#7e22ce;}

/* ── Hero ── */
.hero{padding:7vh 6vw 8vh;max-width:1100px;margin:0 auto;text-align:center;}
.hero .eyebrow{margin-bottom:18px;}
.hero h1{
  font-family:var(--font-display);font-weight:900;font-size:clamp(2.1rem,5.5vw,3.6rem);
  letter-spacing:1px;line-height:1.15;margin-bottom:22px;
}
.hero h1 .accent{color:var(--brass-ink);}
.hero p.lead{
  max-width:620px;margin:0 auto 36px;color:var(--muted);font-size:1.15rem;font-weight:500;
}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.cta-btn{
  font-family:var(--font-display);font-size:.8rem;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;padding:16px 34px;border-radius:3px;cursor:pointer;
  transition:all .2s;display:inline-block;
}
.cta-btn.primary{background:var(--red);color:#fff;border:none;}
.cta-btn.primary:hover{background:#7e22ce;transform:translateY(-1px);}
.cta-btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border);}
.cta-btn.secondary:hover{border-color:var(--red2);}

/* ── Intro band ── */
.intro-band{max-width:780px;margin:0 auto;padding:2vh 6vw 9vh;text-align:center;}
.intro-band p{color:var(--muted);font-size:1.05rem;font-weight:500;margin-bottom:18px;}
.intro-band p strong{color:var(--text);font-weight:700;}

/* ── Map section ── */
.map-section{max-width:980px;margin:0 auto;padding:2vh 6vw 8vh;text-align:center;}
.map-section .eyebrow{margin-bottom:10px;}
.map-section h2{font-family:var(--font-display);font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:900;margin-bottom:30px;}
.map-img{
  width:100%;max-width:900px;border-radius:6px;border:1px solid var(--border);
  box-shadow:0 0 50px rgba(147,51,234,.12),0 10px 40px rgba(0,0,0,.5);margin-bottom:30px;
}
.map-caption{max-width:680px;margin:0 auto;text-align:left;}
.map-caption p{color:var(--muted);font-size:.98rem;font-weight:500;margin-bottom:16px;line-height:1.6;}
.map-caption em{color:var(--text);font-style:italic;}

/* ── Three Paths — the signature element ── */
.paths-section{padding:6vh 6vw 10vh;max-width:1180px;margin:0 auto;}
.paths-section .eyebrow{display:block;text-align:center;margin-bottom:10px;}
.paths-section h2{
  font-family:var(--font-display);text-align:center;font-size:clamp(1.6rem,3.5vw,2.3rem);
  font-weight:900;margin-bottom:48px;
}
.paths-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:860px){.paths-grid{grid-template-columns:1fr;}}
.path-card{
  background:rgba(255,255,255,.03);border:1px solid var(--border2);border-radius:6px;
  padding:34px 28px;position:relative;overflow:hidden;transition:transform .25s, border-color .25s;
}
.path-card:hover{transform:translateY(-4px);}
.path-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
}
.path-card.blade::before{background:var(--blade);}
.path-card.shadow::before{background:var(--shadow-c);}
.path-card.arcanist::before{background:var(--arcanist);}
.path-card.blade:hover{border-color:var(--blade-glow);}
.path-card.shadow:hover{border-color:var(--shadow-glow);}
.path-card.arcanist:hover{border-color:var(--arcanist-glow);}
.path-tag{font-size:.65rem;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:14px;}
.path-card.blade .path-tag{color:var(--blade);}
.path-card.shadow .path-tag{color:var(--shadow-c);}
.path-card.arcanist .path-tag{color:var(--arcanist);}
.path-card h3{font-family:var(--font-display);font-size:1.4rem;font-weight:900;margin-bottom:8px;}
.path-card .path-origin{color:var(--muted);font-size:.85rem;margin-bottom:18px;font-style:italic;}
.path-card p.desc{color:var(--text);font-size:.95rem;font-weight:500;opacity:.85;}

/* ── Bot cards (avatars must float above the top accent line,
   so this card type needs visible overflow unlike the base .path-card) ── */
.bot-card{overflow:visible;padding-top:28px;text-align:center;margin-top:170px;}
.bot-card .bot-avatar{
  position:absolute;top:-148px;left:50%;transform:translateX(-50%);
  width:128px;height:128px;border-radius:50%;object-fit:cover;
  border:3px solid currentColor;box-shadow:0 6px 16px rgba(0,0,0,.55);
  background:#0d0d14;z-index:3;
}
/* ── How it works ── */
.how-section{max-width:920px;margin:0 auto;padding:4vh 6vw 10vh;}
.how-section h2{
  font-family:var(--font-display);text-align:center;font-size:clamp(1.6rem,3.5vw,2.3rem);
  font-weight:900;margin-bottom:48px;
}
.how-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
@media (max-width:700px){.how-grid{grid-template-columns:1fr;}}
.how-item{padding:22px 0;border-top:1px solid var(--border2);}
.how-item h4{font-family:var(--font-display);font-size:1rem;letter-spacing:1px;margin-bottom:8px;}
.how-item p{color:var(--muted);font-size:.92rem;}

/* ── Final CTA band ── */
.final-cta{
  max-width:720px;margin:0 auto;padding:8vh 6vw 10vh;text-align:center;
}
.final-cta h2{font-family:var(--font-display);font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:900;margin-bottom:16px;}
.final-cta p{color:var(--muted);margin-bottom:30px;}

/* ── Footer ── */
.site-footer{
  border-top:1px solid var(--border2);padding:26px 6vw;text-align:center;
  color:var(--muted);font-size:.8rem;
}

/* ── Auth pages (sign-up / log-in) ── */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:6vh 16px;}
.auth-box{
  width:100%;max-width:460px;background:rgba(13,11,28,.97);
  border:1px solid var(--border);border-radius:5px;padding:40px 36px 34px;position:relative;
  box-shadow:0 0 60px rgba(147,51,234,.1),0 2px 40px rgba(0,0,0,.7);
}
:root.light .auth-box{background:rgba(255,255,255,.98);box-shadow:0 0 60px rgba(6,182,212,.08),0 2px 40px rgba(0,0,0,.12);}
.auth-box::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--red),transparent);}
.auth-back{display:block;text-align:center;margin-bottom:18px;}
.auth-back a{font-size:.78rem;color:var(--muted);letter-spacing:1px;}
.auth-back a:hover{color:var(--brass-ink);}
.auth-logo{text-align:center;margin-bottom:30px;}
.auth-logo h1{font-family:var(--font-display);font-size:1.7rem;font-weight:900;letter-spacing:4px;}
.auth-logo h1 span{color:var(--red);}
.auth-logo p{font-size:.66rem;letter-spacing:3px;color:var(--muted);margin-top:4px;text-transform:uppercase;}
.auth-title{font-family:var(--font-display);font-size:.88rem;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border2);}
.step-dots{display:flex;gap:8px;justify-content:center;margin-bottom:24px;}
.step-dot{width:30px;height:3px;border-radius:2px;background:rgba(255,255,255,.08);transition:background .3s;}
.step-dot.on{background:var(--red);}
.step-dot.done{background:var(--green);}
.field{margin-bottom:14px;}
.field label{display:block;font-size:.66rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600;}
.field input{
  width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:3px;padding:13px 15px;color:var(--text);font-family:var(--font-body);
  font-size:1rem;font-weight:500;outline:none;transition:border-color .2s;appearance:none;
}
.field input:focus{border-color:var(--red);background:rgba(147,51,234,.04);}
.field input::placeholder{color:#56506e;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.code-input{text-align:center;font-size:1.8rem;font-weight:700;letter-spacing:12px;padding:14px;}
.btn{
  width:100%;padding:14px;border:none;border-radius:3px;font-family:var(--font-display);
  font-size:.74rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  cursor:pointer;transition:all .2s;margin-top:8px;
}
.btn-red{background:var(--red);color:#fff;}
.btn-red:hover{background:#7e22ce;}
.btn-red:disabled{background:#2a2a2a;color:var(--muted);cursor:not-allowed;}
.auth-foot{text-align:center;margin-top:20px;font-size:.85rem;color:var(--muted);}
.auth-foot a{color:var(--brass-ink);cursor:pointer;font-weight:600;}
.msg{padding:11px 14px;border-radius:3px;font-size:.82rem;margin-top:12px;font-weight:500;display:none;}
.msg.err{background:rgba(204,0,0,.12);border:1px solid rgba(204,0,0,.3);color:var(--err-ink2);display:block;}
.msg.ok{background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.3);color:var(--ok-ink2);display:block;}
.msg.info{background:rgba(99,102,241,.10);border:1px solid rgba(99,102,241,.3);color:var(--info-ink3);display:block;}
.resend{text-align:center;font-size:.78rem;color:var(--muted);margin-top:12px;}
.resend button{background:none;border:none;color:var(--brass-ink);cursor:pointer;font-size:.78rem;font-family:var(--font-body);}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:6px;}
@keyframes spin{to{transform:rotate(360deg);}}
.hint{font-size:.74rem;color:var(--muted);margin-top:-8px;margin-bottom:14px;}

/* ── Dashboard shell ── */
.dash-page{min-height:100vh;}
.dash-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 6vw;border-bottom:1px solid var(--border2);
}
.dash-logo{font-family:var(--font-display);font-size:1.1rem;font-weight:900;letter-spacing:3px;}
.dash-logo span{color:var(--red);}
.dash-user{display:flex;align-items:center;gap:14px;}
.dash-user span{font-size:.85rem;color:var(--muted);}
.logout-btn{background:none;border:1px solid var(--border2);color:var(--muted);padding:8px 16px;border-radius:3px;font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;font-family:var(--font-display);}
.logout-btn:hover{border-color:var(--red);color:var(--text);}

.dash-tabs{display:flex;gap:4px;padding:0 6vw;border-bottom:1px solid var(--border2);overflow-x:auto;}
.dash-tab{
  padding:16px 20px;font-family:var(--font-display);font-size:.74rem;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;
  white-space:nowrap;transition:all .2s;
}
.dash-tab.active{color:var(--text);border-bottom-color:var(--red);}
.dash-tab:hover{color:var(--text);}
.dash-tab.disabled{opacity:.4;cursor:not-allowed;}

.dash-body{max-width:980px;margin:0 auto;padding:5vh 6vw 8vh;}
.dash-loading{text-align:center;padding:10vh 0;color:var(--muted);}

/* ── Path selection ── */
.pathselect{text-align:center;}
.pathselect h2{font-family:var(--font-display);font-size:1.8rem;font-weight:900;margin-bottom:10px;}
.pathselect p.sub{color:var(--muted);margin-bottom:36px;}
.ps-field{max-width:380px;margin:0 auto 32px;text-align:left;}
.ps-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:30px;}
@media (max-width:780px){.ps-cards{grid-template-columns:1fr;}}
.ps-card{
  background:rgba(255,255,255,.03);border:2px solid var(--border2);border-radius:6px;
  padding:26px 20px;cursor:pointer;transition:all .2s;text-align:left;
}
.ps-card:hover{border-color:var(--border);}
.ps-card.selected.blade{border-color:var(--blade);background:var(--blade-glow);}
.ps-card.selected.shadow{border-color:var(--shadow-c);background:var(--shadow-glow);}
.ps-card.selected.arcanist{border-color:var(--arcanist);background:var(--arcanist-glow);}
.ps-card h3{font-family:var(--font-display);font-size:1.2rem;margin-bottom:4px;}
.ps-card .ps-origin{font-size:.78rem;color:var(--muted);font-style:italic;margin-bottom:10px;}
.ps-card p{font-size:.85rem;color:var(--text);opacity:.8;}
.gender-toggle{display:flex;gap:10px;max-width:380px;margin:0 auto 28px;}
.gender-btn{flex:1;padding:12px;border:1px solid var(--border2);border-radius:3px;background:transparent;color:var(--muted);font-family:var(--font-display);font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;}
.gender-btn.selected{border-color:var(--red);color:var(--text);background:rgba(147,51,234,.08);}

/* ── Profile / stats view ── */
.profile-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;flex-wrap:wrap;gap:16px;}
.profile-name{font-family:var(--font-display);font-size:1.7rem;font-weight:900;}
.profile-tag{font-size:.78rem;color:var(--muted);margin-top:4px;}
.profile-tag .path-pill{padding:3px 10px;border-radius:20px;font-size:.68rem;letter-spacing:1px;text-transform:uppercase;font-weight:700;margin-right:8px;}
.path-pill.BLADE{background:var(--blade-glow);color:var(--err-ink);}
.path-pill.SHADOW{background:var(--shadow-glow);color:var(--gem-ink3);}
.path-pill.ARCANIST{background:var(--arcanist-glow);color:var(--cyan-ink);}
.profile-gold{font-family:var(--font-display);font-size:1.1rem;color:var(--brass-ink);}

.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px;}
@media (max-width:700px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.stat-box{background:rgba(255,255,255,.03);border:1px solid var(--border2);border-radius:4px;padding:16px;text-align:center;}
.stat-box .stat-val{font-family:var(--font-display);font-size:1.5rem;font-weight:900;}
.stat-box .stat-label{font-size:.68rem;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-top:4px;}

.level-bar-wrap{margin-bottom:30px;}
.level-bar-top{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-bottom:6px;}
.level-bar{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;}
.level-bar-fill{height:100%;background:var(--red);border-radius:4px;}

.region-line{color:var(--muted);font-size:.92rem;margin-bottom:8px;}
.region-line strong{color:var(--text);}

.coming-soon{text-align:center;padding:8vh 0;color:var(--muted);}
.coming-soon h3{font-family:var(--font-display);color:var(--text);margin-bottom:10px;font-size:1.2rem;}
/* ============================================================
   REDESIGN LAYER — 2026 visual overhaul.
   Overrides only presentation. No markup or behaviour depends on
   anything below; every selector already existed above.
   ============================================================ */

body{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  background-image:none;
  background-color:var(--dark);
  position:relative;
}
/* Paper grain — the whole reason the surfaces don't read as plastic */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:2;}

::selection{background:var(--red);color:#fff;}

.eyebrow{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--brass-ink);font-weight:500;
}
.serif{font-family:var(--font-display);}

/* ── Nav ─────────────────────────────────────────────── */
.site-nav{
  padding:20px 6vw;background:color-mix(in oklab,var(--dark) 88%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border2);
}
.site-logo{
  font-family:var(--font-display);font-size:1.5rem;font-weight:700;
  letter-spacing:var(--cz-word-track,.22em);text-transform:uppercase;
}
.site-logo span{color:var(--red);}
.nav-btn{
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.18em;
  padding:10px 20px;border-radius:2px;border:1px solid var(--border);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.nav-btn.ghost{color:var(--muted);}
.nav-btn.ghost:hover{color:var(--text);border-color:var(--text);background:transparent;}
.nav-btn.solid{background:var(--red);color:#fdf7ee;border:1px solid var(--red);}
.nav-btn.solid:hover{background:transparent;color:var(--red);}

.theme-toggle{border-radius:2px;border:1px solid var(--border2);background:var(--panel);}
.theme-btn{font-size:.85rem;padding:8px 11px;filter:grayscale(1);opacity:.6;}
.theme-btn:hover{background:transparent;opacity:1;}
.theme-btn.active{background:transparent;filter:none;opacity:1;}

/* ── Hero ────────────────────────────────────────────── */
.hero{
  padding:16vh 6vw 12vh;max-width:1180px;text-align:left;
  border-bottom:1px solid var(--border2);
}
.hero .eyebrow{margin-bottom:26px;display:block;}
.hero h1{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.6rem,7.5vw,5.6rem);
  letter-spacing:-.015em;line-height:1.02;margin-bottom:30px;max-width:16ch;
}
.hero h1 .accent{
  color:var(--text);font-style:italic;
  box-shadow:inset 0 -.09em 0 var(--red);
}
.hero p.lead{
  max-width:56ch;margin:0 0 44px;color:var(--muted);
  font-size:1.08rem;font-weight:300;line-height:1.75;
}
.hero-ctas{justify-content:flex-start;gap:0;}
.cta-btn{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.2em;
  padding:17px 32px;border-radius:2px;
  transition:background .18s ease,color .18s ease;
}
.cta-btn.primary{background:var(--red);color:#fdf7ee;border:1px solid var(--red);}
.cta-btn.primary:hover{background:transparent;color:var(--red);transform:none;}
.cta-btn.secondary{border:1px solid var(--border);border-left:none;color:var(--muted);}
.cta-btn.secondary:hover{color:var(--text);border-color:var(--text);}
@media(max-width:520px){.cta-btn.secondary{border-left:1px solid var(--border);}}

/* ── Intro band ──────────────────────────────────────── */
.intro-band{
  max-width:1180px;padding:9vh 6vw;text-align:left;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  border-bottom:1px solid var(--border2);
}
@media(max-width:820px){.intro-band{grid-template-columns:1fr;gap:20px;}}
.intro-band p{color:var(--muted);font-size:1.02rem;margin:0;}
.intro-band p:first-child{
  font-family:var(--font-display);font-size:clamp(1.4rem,2.6vw,1.9rem);
  line-height:1.35;color:var(--text);
}
.intro-band p strong{color:var(--text);font-weight:600;}

/* ── Section headings ────────────────────────────────── */
.paths-section h2,.how-section h2,.map-section h2,.final-cta h2{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(2rem,4.4vw,3.1rem);margin-bottom:44px;
}
.paths-section,.how-section,.map-section{border-bottom:1px solid var(--border2);}
.paths-section h2,.paths-section .eyebrow{text-align:left;}

/* ── Cards ───────────────────────────────────────────── */
.path-card{
  background:var(--dark2);border:1px solid var(--border2);border-radius:2px;
  padding:32px 28px;transition:border-color .2s ease,background .2s ease;
}
.path-card:hover{transform:none;border-color:var(--border);background:var(--panel);}
.path-card::before{height:2px;}
.path-tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.22em;}
.path-card h3{font-family:var(--font-display);font-weight:600;font-size:1.75rem;letter-spacing:0;}
.path-card .path-origin{font-family:var(--font-mono);font-size:.7rem;font-style:normal;letter-spacing:.1em;color:var(--muted);}
.path-card p.desc{font-weight:300;color:var(--muted);opacity:1;font-size:.95rem;}
.bot-card:hover .bot-avatar{filter:none;}

/* ── How it works ────────────────────────────────────── */
.how-grid{gap:0;}
.how-item{
  padding:28px 0;border-top:1px solid var(--border2);
}
.how-grid>.how-item:nth-child(odd){padding-right:36px;}
.how-item h4{
  font-family:var(--font-display);font-size:1.35rem;font-weight:600;
  letter-spacing:0;margin-bottom:8px;
}
.how-item p{color:var(--muted);font-size:.95rem;font-weight:300;}

/* ── Paths arena (landing) ───────────────────────────── */
.paths-arena{
  border-radius:2px;border:1px solid var(--border2);background:var(--dark2);
  box-shadow:none;padding:0;grid-template-columns:300px 1fr;gap:0;
}
@media(max-width:860px){.paths-arena{grid-template-columns:1fr;}}
.arena-menu{gap:0;border-right:1px solid var(--border2);}
@media(max-width:860px){.arena-menu{border-right:none;border-bottom:1px solid var(--border2);}}
.arena-btn{
  border:none;border-bottom:1px solid var(--border2);border-radius:0;
  background:transparent;font-family:var(--font-display);padding:24px 26px;
}
.arena-btn:hover{transform:none;background:var(--panel);border-color:var(--border2);}
.arena-btn h4{font-size:1.5rem;font-weight:600;color:var(--text);}
.arena-btn span{font-family:var(--font-mono);font-size:.68rem;font-style:normal;letter-spacing:.14em;}
.arena-btn.active{background:var(--panel);}
.arena-display{
  background:transparent;border:none;border-radius:0;padding:44px 46px;
}
.arena-display::before{content:'';}
.display-title{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,4vw,2.8rem);}
.display-meta{font-family:var(--font-mono);font-size:.68rem;font-style:normal;letter-spacing:.2em;color:var(--brass-ink);}
.display-desc{font-weight:300;color:var(--muted);opacity:1;font-size:1.05rem;}
.focus-badge{
  background:transparent;border:1px solid var(--border2);border-radius:2px;
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;color:var(--muted);letter-spacing:.12em;
}

/* ── Final CTA + footer ──────────────────────────────── */
.final-cta{max-width:1180px;padding:14vh 6vw;text-align:center;}
.final-cta h2{margin-bottom:14px;max-width:18ch;margin-left:auto;margin-right:auto;}
.final-cta p{color:var(--muted);max-width:52ch;margin-left:auto;margin-right:auto;}
.site-footer{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;
  text-align:center;padding:30px 6vw;border-top:1px solid var(--border2);
}

/* ── Auth pages ──────────────────────────────────────── */
.auth-box{
  background:var(--dark2);border:1px solid var(--border2);border-radius:2px;
  box-shadow:none;padding:44px 40px 36px;max-width:440px;
}
:root.light .auth-box{background:var(--panel);box-shadow:none;}
.auth-box::before{left:0;right:0;background:var(--red);height:2px;}
.auth-back a{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;}
.auth-logo h1{font-family:var(--font-display);font-weight:700;letter-spacing:.2em;font-size:1.6rem;}
.auth-logo p{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.24em;}
.auth-title{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.22em;
  color:var(--muted);border-bottom:1px solid var(--border2);
}
.step-dot{border-radius:0;height:2px;width:34px;background:var(--border2);}
.field label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;}
.field input{
  background:transparent;border:1px solid var(--border2);border-radius:2px;
  font-family:var(--font-body);font-weight:400;padding:13px 14px;
}
.field input:focus{border-color:var(--red);background:transparent;}
.code-input{font-family:var(--font-mono);letter-spacing:.5em;font-size:1.5rem;}
.btn{
  border-radius:2px;font-family:var(--font-mono);font-size:.7rem;
  font-weight:500;letter-spacing:.2em;padding:15px;
}
.btn-red{background:var(--red);color:#fdf7ee;border:1px solid var(--red);}
.btn-red:hover{background:transparent;color:var(--red);}
.btn-red:disabled{background:transparent;border-color:var(--border2);color:var(--muted);}
.auth-foot,.resend{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;}
.auth-foot a,.resend button{color:var(--brass-ink);font-family:var(--font-mono);}
.msg{border-radius:2px;font-weight:400;font-size:.85rem;}
.hint{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em;line-height:1.6;}

/* ── Rhythm corrections ──────────────────────────────── */
.how-section{max-width:1180px;padding:11vh 6vw;}
.how-section h2{text-align:left;}
.paths-section,.map-section{max-width:1180px;padding:11vh 6vw;}
.arena-menu{justify-content:flex-start;}
.arena-menu .arena-btn:last-child{border-bottom:none;}
.bots-grid{gap:1px;background:var(--border2);border:1px solid var(--border2);border-radius:2px;}
.bots-grid .path-card{border-left:none;border-right:none;border-bottom:none;background:var(--dark);}
.bots-grid .path-card:hover{background:var(--dark2);}

.field input::placeholder{color:var(--muted);opacity:.55;}
.visual-feat-icon{filter:grayscale(1);opacity:.7;font-size:1rem;}
.visual-feat h5{font-family:var(--font-display);font-size:1.15rem;font-weight:600;}
.visual-feat p{font-weight:300;font-size:.92rem;}


/* ══════════════════════════════════════════════════════════════
   Single theme button + animated light/dark swap
   ══════════════════════════════════════════════════════════════
   In site.css, not app.css: the landing page and the log-in /
   sign-up screens only load site.css, and all three use the same
   control. */

.theme-btn-single{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;flex:none;cursor:pointer;overflow:hidden;
  border-radius:13px;background:var(--panel);border:1px solid var(--border2);
  color:var(--text);-webkit-tap-highlight-color:transparent;
  transition:background-color .28s ease,border-color .28s ease,transform .18s cubic-bezier(.4,0,.2,1),box-shadow .28s ease;
}
.theme-btn-single:hover{border-color:var(--border);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.28);}
.theme-btn-single:active{transform:scale(.92);}
.theme-btn-single:focus-visible{outline:2px solid var(--red2);outline-offset:2px;}
/* Pages without a nav bar (log-in, sign-up) have nowhere to put the button in
   flow, so it floats in the top-right corner the way the old two-button pill
   did. Without this the button becomes a stray block above the split layout. */
.theme-btn-single.is-floating{position:fixed;top:18px;right:18px;z-index:200;}
.theme-btn-single.is-floating{backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,.22);}
@media (max-width:480px){.theme-btn-single.is-floating{top:12px;right:12px;}}
.theme-ico{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:1rem;line-height:1;pointer-events:none;
  transition:opacity .3s ease,transform .5s cubic-bezier(.34,1.4,.5,1),filter .3s ease;
  will-change:opacity,transform;
}
.theme-ico-sun{opacity:1;transform:rotate(0deg) scale(1);filter:none;}
.theme-ico-moon{opacity:0;transform:rotate(-120deg) scale(.35);filter:blur(3px);}
.theme-btn-single.is-light .theme-ico-sun{opacity:0;transform:rotate(120deg) scale(.35);filter:blur(3px);}
.theme-btn-single.is-light .theme-ico-moon{opacity:1;transform:rotate(0deg) scale(1);filter:none;}
@media (max-width:600px){
  .theme-btn-single{width:36px;height:36px;border-radius:11px;}
  .theme-ico{font-size:.9rem;}
}

/* The swap itself.
   A permanent global transition would slow down every hover and press on
   the site, so app.js puts .theme-animating on <html> for only the ~620ms
   the change takes and removes it straight after. Inside that window the
   surfaces that carry theme colour cross-fade instead of snapping, which is
   what made the old toggle feel abrupt. */
html.theme-animating,
html.theme-animating body,
html.theme-animating .dash-nav,
html.theme-animating .dash-shell,
html.theme-animating .dash-tabs,
html.theme-animating .dash-tab,
html.theme-animating .dash-body,
html.theme-animating .auth-card,
html.theme-animating .auth-wrap,
html.theme-animating header,
html.theme-animating footer,
html.theme-animating section,
html.theme-animating [class*="card"],
html.theme-animating [class*="panel"],
html.theme-animating [class*="box"],
html.theme-animating input,
html.theme-animating textarea,
html.theme-animating select,
html.theme-animating button,
html.theme-animating a,
html.theme-animating p,
html.theme-animating h1, html.theme-animating h2,
html.theme-animating h3, html.theme-animating h4{
  transition:background-color .45s ease,color .45s ease,border-color .45s ease,
             box-shadow .45s ease,fill .45s ease,stroke .45s ease !important;
  transition-delay:0s !important;
}

/* A soft veil lifts over the swap and dissolves, so the change reads as one
   motion instead of a cut. pointer-events:none — it can never eat a click. */
html.theme-animating body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:var(--bg-grad1, #0b0b0e);
  animation:cz-theme-veil .62s ease forwards;
}
@keyframes cz-theme-veil{
  0%{opacity:0;}
  35%{opacity:.34;}
  100%{opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  html.theme-animating body::after{animation:none;opacity:0;}
  .theme-ico{transition:opacity .12s linear;}
}

/* ── The sigil in the wordmark ─────────────────────────────────
   assets/favicon.png (the red CodeZero mark) now sits to the left of
   CODEZERO in the top-left of every page — the landing nav (.site-logo)
   and the 13 dashboard headers (.dash-logo) both carry it as the anchor's
   first child.

   Sized in em so it tracks each header's own font-size, and exposed as three
   custom properties so the lockup can be nudged in one place:
     --cz-mark-h      height of the sigil (it's 600x378, so width follows)
     --cz-mark-gap    space between sigil and word
     --cz-word-track  letter-spacing of the wordmark itself

   `gap` is deliberately zero and the sigil distance comes from a margin
   instead. Flex `gap` lands between *every* item, and the wordmark is two of
   them — the bare text "CODE" becomes an anonymous flex item, then the
   <span>ZERO</span> is another. So a 13px gap sat between E and Z on top of
   the trailing letter-space, making E→Z roughly three times wider than any
   other letter pair. That is what made it read "CODE ZERO". Items now touch,
   and the only spacing between them is the normal tracking.
   The `a.` prefix is deliberate: app.css re-declares .dash-logo twice later
   in the cascade, and this has to outrank that without depending on order. */
a.site-logo,a.dash-logo{
  --cz-mark-h:1.15em;--cz-mark-gap:9px;--cz-word-track:.22em;
  display:inline-flex;align-items:center;gap:0;
  letter-spacing:var(--cz-word-track);
}
a.site-logo .cz-mark,a.dash-logo .cz-mark{
  height:var(--cz-mark-h);width:auto;display:block;flex:none;
  margin-right:var(--cz-mark-gap);
  user-select:none;-webkit-user-drag:none;
}
/* The mark is a flat #aa3333, which is only ~3:1 against the near-black
   header. Rather than recolour it, dark mode gives it the halo the wordmark
   already shimmers with, so it reads as an emblem rather than a dim shape.
   Light mode keeps it untouched — a glow on cream turns to mud. */
html:not(.light) a.site-logo .cz-mark,html:not(.light) a.dash-logo .cz-mark{
  filter:drop-shadow(0 0 7px rgba(219,74,58,.55));
}
@media (max-width:520px){
  a.site-logo,a.dash-logo{--cz-mark-h:.95em;--cz-mark-gap:7px;}
}
/* ── Landing nav on phones ────────────────────────────────────────────
   The nav is a single row — sigil + wordmark, then ☀ / LOG IN / SIGN UP —
   and at full size that row wants ~470px of content. Below 560px every part
   of it steps down together so the row survives: the wordmark loses its wide
   tracking, the buttons go compact, and `white-space:nowrap` stops "LOG IN"
   from breaking mid-word (which was what actually made the nav tall).
   flex-wrap is the safety net: on a 320px screen the actions drop to a second
   row rather than pushing SIGN UP off the edge. Scoped to .site-logo on
   purpose — the dashboard header has its own sizing in app.css. */
@media (max-width:560px){
  .site-nav{padding:14px 4vw;gap:8px;flex-wrap:wrap;row-gap:11px;}
  a.site-logo{--cz-mark-h:.85em;--cz-mark-gap:6px;--cz-word-track:.1em;font-size:1.06rem;}
  .nav-actions{gap:7px;}
  .nav-btn{padding:8px 11px;font-size:.58rem;letter-spacing:.1em;white-space:nowrap;}
}