/* ============================================================
   Gopnik Academy — page styles (gn-academy.css)

   Extends gn-tokens.css.  Honors the existing dark cosmic glassmorphism
   visual language.  All class names prefixed with .gn-academy or .gn-* to
   compose cleanly with the existing system.
   ============================================================ */

/* ── eyebrow band (academy subnav) ────────────────────────────────── */
.gn-academy-eyebrow {
  background: linear-gradient(180deg, rgba(139,92,246,.08), transparent);
  border-bottom: 1px solid var(--gn-border);
  padding: 12px 0;
}
.gn-academy-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.gn-academy-brand-mark {
  width: 32px; height: 32px; border-radius: var(--gn-r-sm);
  background: var(--gn-grad);
  display: inline-grid; place-items: center;
  font-family: 'Black Ops One', monospace; font-size: 17px; color: #0d0d22;
  box-shadow: 0 6px 18px -8px rgba(139,92,246,.6);
}
.gn-academy-brand-text {
  font-family: 'Black Ops One', monospace; font-size: 14px; letter-spacing: 2px;
  background: var(--gn-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gn-academy-subnav { display: flex; gap: 8px; }
.gn-academy-subnav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--gn-r-pill);
  background: rgba(167,139,250,.16);
  border: 1px solid rgba(167,139,250,.40);
  color: #ece7fc; text-decoration: none;
  font-size: 13px; font-weight: 600;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.gn-academy-subnav-link:hover {
  background: rgba(167,139,250,.28);
  border-color: rgba(167,139,250,.65);
  color: #ffffff;
}
.gn-academy-subnav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34,211,238,.45);
}

.gn-academy--panel .gn-academy-eyebrow { display: none; }

/* ── wrap ──────────────────────────────────────────────────────────── */
.gn-academy-wrap { max-width: 1340px; margin: 0 auto; padding: 0 28px; }
.gn-academy-wrap--narrow { max-width: 820px; }

/* ── page hero ─────────────────────────────────────────────────────── */
.gn-page-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.gn-page-hero-actions { display: flex; gap: 12px; }
.gn-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gn-accent);
}
.gn-eyebrow::before { content: ""; width: 14px; height: 1px; background: currentColor; }
.gn-eyebrow--green { color: var(--gn-green); }
.gn-eyebrow--red   { color: var(--gn-red); }
.gn-page-title {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: clamp(28px, 3.5vw, 42px); line-height: 1.1; letter-spacing: -0.5px;
  margin: 10px 0 6px; color: var(--gn-text);
}
.gn-page-subtitle { color: var(--gn-text-dim); font-size: 16px; max-width: 720px; margin: 0; }
.gn-muted { color: var(--gn-muted); }
.gn-mono { font-family: 'JetBrains Mono', SFMono-Regular, monospace; }
.gn-gold { color: var(--gn-gold); }

/* ── stat cards ────────────────────────────────────────────────────── */
.gn-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 700px) { .gn-stat-row { grid-template-columns: repeat(2,1fr); } }
.gn-stat-card {
  background: rgba(255,255,255,.02); border: 1px solid var(--gn-border-soft);
  border-radius: var(--gn-r-md); padding: 16px;
}
.gn-stat-card .v { font-family: 'Poppins',sans-serif; font-weight: 800; font-size: 24px; color: var(--gn-text); }
.gn-stat-card .l { font-size: 11px; color: var(--gn-muted); letter-spacing: 0.5px; text-transform: uppercase; margin-top: 4px; }

/* ── branch / skill cards ──────────────────────────────────────────── */
.gn-branch-title { font-family: 'Poppins',sans-serif; font-weight: 700; font-size: 18px; margin: 12px 0 14px; color: var(--gn-text-dim); }
.gn-branch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 14px; }
.gn-skill-card {
  display: block; text-decoration: none;
  background: rgba(255,255,255,.02); border: 1px solid var(--gn-border-soft); border-radius: var(--gn-r-lg);
  padding: 18px; transition: var(--gn-t-slow, 280ms cubic-bezier(.22,.61,.36,1));
  position: relative;
}
.gn-skill-card:hover { border-color: var(--gn-border-strong); transform: translateY(-2px); box-shadow: var(--gn-shadow-lg); }
.gn-skill-tier { font-family: 'Black Ops One', sans-serif; font-size: 28px; color: var(--gn-accent); }
.gn-skill-name { font-weight: 700; color: var(--gn-text); font-size: 15px; margin: 4px 0; }
.gn-skill-state { font-size: 12px; color: var(--gn-muted); }

.gn-skill-card--active { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.04); }
.gn-skill-card--active .gn-skill-tier { color: var(--gn-green); }
.gn-skill-card--active .gn-skill-state { color: var(--gn-green); }
.gn-skill-card--expiring { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.05); }
.gn-skill-card--expiring .gn-skill-state { color: var(--gn-gold); }

/* ── chips & buttons ───────────────────────────────────────────────── */
.gn-chip { display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--gn-r-pill); font-size: 11px; font-weight: 600;
  background: rgba(139,92,246,.14); color: var(--gn-accent); border: 1px solid rgba(139,92,246,.32);
}
.gn-chip--green { background: rgba(52,211,153,.10); color: var(--gn-green); border-color: rgba(52,211,153,.36); }
.gn-chip--amber { background: rgba(251,191,36,.12); color: var(--gn-gold); border-color: rgba(251,191,36,.36); }
.gn-chip--cyan  { background: rgba(34,211,238,.12); color: var(--gn-accent-2); border-color: rgba(34,211,238,.36); }
.gn-chip--red   { background: rgba(248,113,113,.12); color: var(--gn-red); border-color: rgba(248,113,113,.36); }

/* ────────────────────────────────────────────────────────────────────
   Academy-scoped buttons —  (v3 scope-fix).

   IMPORTANT: gn-academy.css is loaded GLOBALLY from base.html, so any
   unscoped ``.gn-btn`` rule here would override the wallet's
   canonical gradient button on every page (including /auth/login).
   That's exactly what happened in v2 and is why the Sign in button
   went near-invisible.  Every selector in this block is now scoped
   to .gn-academy-wrap or .gn-ed-canvas so the wallet's global
   gn-tokens.css ``.gn-btn`` keeps owning every non-academy page.

   Three variants used inside the academy:
     • --primary : violet gradient, white text   (CTAs)
     • --ghost   : opaque-enough secondary       (Back, Cancel)
     • --sm      : compact size modifier
   ──────────────────────────────────────────────────────────────── */
.gn-academy-wrap .gn-btn,
.gn-ed-canvas    .gn-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: var(--gn-r-pill);
  font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: 13.5px;
  /* Default base = readable secondary, so any <button class="gn-btn">
     in academy context is legible instead of invisible. */
  background: rgba(167,139,250,.14);
  color: #f3eefe;
  border: 1px solid rgba(167,139,250,.45);
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease,
              color 160ms ease, box-shadow 200ms ease;
  white-space: nowrap;
}
.gn-academy-wrap .gn-btn:hover,
.gn-ed-canvas    .gn-btn:hover {
  background: rgba(167,139,250,.22);
  border-color: rgba(167,139,250,.65);
  color: #ffffff;
}
.gn-academy-wrap .gn-btn:focus-visible,
.gn-ed-canvas    .gn-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34,211,238,.45);
}

/* Primary — gradient violet with white text.
    readability pass — explicit !important on color/background
   because the "Review answers" button rendered as dark text inside the
   gn-mistake callout in production (a global Bootstrap rule was winning
   the cascade against the un-!important academy rule on devices where
   Bootstrap loads after gn-academy.css). */
.gn-academy-wrap .gn-btn--primary,
.gn-ed-canvas    .gn-btn--primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d4ad6 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(167,139,250,.85) !important;
  box-shadow: 0 10px 28px -12px rgba(139,92,246,.55),
              0 1px 0 0 rgba(255,255,255,.18) inset;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.gn-academy-wrap .gn-btn--primary:hover,
.gn-ed-canvas    .gn-btn--primary:hover {
  background: linear-gradient(135deg, #9b6dff 0%, #7c54e8 100%) !important;
  color: #ffffff !important;
  border-color: rgba(190,170,255,.95) !important;
  box-shadow: 0 14px 36px -10px rgba(139,92,246,.85),
              0 1px 0 0 rgba(255,255,255,.22) inset;
  transform: translateY(-1px);
}
.gn-academy-wrap .gn-btn--primary:focus-visible,
.gn-ed-canvas    .gn-btn--primary:focus-visible {
  box-shadow: 0 14px 36px -10px rgba(139,92,246,.85),
              0 0 0 3px rgba(34,211,238,.55);
}

/* Ghost / secondary — opaque enough to be visible against the dark
   academy page, but visually distinct from --primary.  Force !important
   on color so global Bootstrap utility classes can't darken the label. */
.gn-academy-wrap .gn-btn--ghost,
.gn-ed-canvas    .gn-btn--ghost {
  background: rgba(28,22,62,.92) !important;
  color: #f5f1ff !important;
  border: 1px solid rgba(167,139,250,.65) !important;
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.6);
}
.gn-academy-wrap .gn-btn--ghost:hover,
.gn-ed-canvas    .gn-btn--ghost:hover {
  background: rgba(45,36,92,.96) !important;
  border-color: rgba(190,170,255,.95) !important;
  color: #ffffff !important;
}
.gn-academy-wrap .gn-btn--ghost:focus-visible,
.gn-ed-canvas    .gn-btn--ghost:focus-visible {
  outline: none;
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.6),
              0 0 0 3px rgba(34,211,238,.55);
}

.gn-academy-wrap .gn-btn:disabled,
.gn-academy-wrap .gn-btn[disabled],
.gn-academy-wrap .gn-btn[aria-disabled="true"],
.gn-ed-canvas    .gn-btn:disabled,
.gn-ed-canvas    .gn-btn[disabled],
.gn-ed-canvas    .gn-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Icon inside an academy button — match text color. */
.gn-academy-wrap .gn-btn i, .gn-academy-wrap .gn-btn .bi,
.gn-ed-canvas    .gn-btn i, .gn-ed-canvas    .gn-btn .bi { color: currentColor; }

/* ── card / callouts ────────────────────────────────────────────────── */
.gn-card { background: rgba(255,255,255,.02); border: 1px solid var(--gn-border-soft); border-radius: var(--gn-r-lg); padding: 18px; }
.gn-callout { border-left: 3px solid var(--gn-accent); background: rgba(139,92,246,.08); padding: 14px 16px; border-radius: var(--gn-r-sm); margin: 16px 0; color: var(--gn-text-dim); }
.gn-callout--good { border-color: var(--gn-green); background: rgba(52,211,153,.06); }
.gn-callout--warn { border-color: var(--gn-gold); background: rgba(251,191,36,.06); }
.gn-callout--danger { border-color: var(--gn-red); background: rgba(248,113,113,.06); }

/* ── course / lesson layout ────────────────────────────────────────── */
.gn-course-layout { display: grid; grid-template-columns: 1fr 280px; gap: 24px; }
@media (max-width: 880px) { .gn-course-layout { grid-template-columns: 1fr; } }
.gn-lesson-list { list-style: none; padding: 0; margin: 0; }
.gn-lesson-row { margin-bottom: 8px; }
.gn-lesson-link {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: rgba(255,255,255,.02); border: 1px solid var(--gn-border-soft); border-radius: var(--gn-r-md);
  text-decoration: none; color: var(--gn-text); transition: var(--gn-t-base, 180ms ease);
}
.gn-lesson-link:hover { border-color: var(--gn-border-strong); background: rgba(139,92,246,.06); color: var(--gn-text); }
.gn-lesson-num { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.04); color: var(--gn-muted); display:grid; place-items:center; font-weight: 700; flex-shrink: 0; }
.gn-lesson-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gn-lesson-title { font-weight: 600; }
.gn-lesson-sub { font-size: 12px; color: var(--gn-muted); display: flex; gap: 12px; }

.gn-lesson-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--gn-border-soft); }
.gn-lesson-body h1 { font-family: 'Poppins',sans-serif; font-weight: 700; font-size: 28px; margin-top: 32px; color: var(--gn-text); letter-spacing: -.3px; }
.gn-lesson-body h2, .gn-lesson-body h3 { font-family: 'Poppins',sans-serif; margin-top: 28px; color: var(--gn-text); }
.gn-lesson-body h2 { font-weight: 700; font-size: 22px; }
.gn-lesson-body h3 { font-weight: 600; font-size: 18px; }
.gn-lesson-body p { font-size: 16px; line-height: 1.75; color: var(--gn-text-dim); }
.gn-lesson-body code { background: rgba(7,7,20,.6); padding: 2px 6px; border-radius: 4px; font-size: 0.92em; color: var(--gn-accent-2); font-family: 'JetBrains Mono', SFMono-Regular, monospace; }
.gn-lesson-body ul, .gn-lesson-body ol { color: var(--gn-text-dim); line-height: 1.85; padding-left: 22px; }
.gn-lesson-body ul li, .gn-lesson-body ol li { margin: 4px 0; }
.gn-lesson-body strong { color: var(--gn-text); font-weight: 700; }
.gn-lesson-body em { color: var(--gn-text); font-style: italic; }
.gn-lesson-body blockquote {
  margin: 22px 0; padding: 14px 20px;
  border-left: 3px solid var(--gn-accent);
  background: linear-gradient(90deg, rgba(34,211,238,.06), transparent);
  border-radius: 0 8px 8px 0;
  color: var(--gn-text);
}
.gn-lesson-body blockquote p { color: var(--gn-text); margin: 0; font-style: italic; font-size: 17px; }
.gn-lesson-body blockquote strong { color: var(--gn-accent-2); }
.gn-lesson-body a { color: var(--gn-accent); text-decoration: underline; text-decoration-color: rgba(34,211,238,.4); text-underline-offset: 2px; }
.gn-lesson-body a:hover { text-decoration-color: var(--gn-accent); }
.gn-lesson-body hr { border: 0; height: 1px; background: var(--gn-border); margin: 32px 0; }
.gn-lesson-footer { display: flex; gap: 10px; padding-top: 22px; border-top: 1px solid var(--gn-border-soft); }

/* ── slippage sim ──────────────────────────────────────────────────── */
.gn-sim { background: rgba(255,255,255,.02); border: 1px solid var(--gn-border-soft); border-radius: var(--gn-r-lg); padding: 22px; margin: 24px 0; }
.gn-sim-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.gn-sim-header h4 { font-family: 'Poppins',sans-serif; font-weight: 700; margin: 0; color: var(--gn-text); }
.gn-sim-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 16px; }
@media (max-width: 600px) { .gn-sim-controls { grid-template-columns: 1fr; } }
.gn-sim-label { font-size: 11px; color: var(--gn-muted); letter-spacing: 0.5px; text-transform: uppercase; display: block; margin-bottom: 6px; }
.gn-sim-slider { width: 100%; accent-color: var(--gn-accent); }
.gn-sim-value { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--gn-text); margin-top: 4px; display: block; }
.gn-sim-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gn-sim-out > div { padding: 12px; background: rgba(7,7,20,.5); border: 1px solid var(--gn-border-soft); border-radius: var(--gn-r-md); text-align: center; }
.gn-sim-out .v { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 600; color: var(--gn-text); }
.gn-sim-out .l { font-size: 11px; color: var(--gn-muted); margin-top: 4px; }
.gn-sim-out--over .v { color: var(--gn-red); }

/* ── exam runner ───────────────────────────────────────────────────── */
.gn-exam-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: rgba(7,7,20,.5);
  border: 1px solid var(--gn-border-soft); border-radius: var(--gn-r-lg); margin-bottom: 22px; }
.gn-progress { flex: 1; height: 6px; background: rgba(255,255,255,.06); border-radius: var(--gn-r-pill); overflow: hidden; }
.gn-progress-fill { height: 100%; background: var(--gn-grad); transition: width .35s; }
.gn-exam-timer { font-family: 'JetBrains Mono', monospace; color: var(--gn-accent-2); padding: 4px 10px;
  background: rgba(34,211,238,.10); border-radius: var(--gn-r-pill); border: 1px solid rgba(34,211,238,.3); font-size: 13px; }
.gn-question-meta { display: flex; gap: 14px; font-size: 12px; color: var(--gn-muted); margin-bottom: 10px; }
.gn-question-text { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 22px; line-height: 1.4; margin: 8px 0 22px; color: var(--gn-text); }
.gn-q-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; padding: 0; }
.gn-q-opt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 18px;
  /* Readability pass was rgba(255,255,255,.02) (2% white)
     which was almost invisible against the dark page.  Now uses a
     slate-violet that clearly reads as a tappable surface. */
  background: rgba(20,18,46,.78);
  border: 1px solid rgba(167,139,250,.32);
  border-radius: var(--gn-r-md); cursor: pointer; text-align: left;
  color: #f1ecff; font-size: 14px; font-weight: 500;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.gn-q-opt:hover {
  background: rgba(35,30,72,.85);
  border-color: rgba(167,139,250,.65);
  color: #ffffff;
}
.gn-q-opt:focus-visible {
  outline: none;
  border-color: var(--gn-accent);
  box-shadow: 0 0 0 3px rgba(34,211,238,.45);
}
.gn-q-opt:disabled { cursor: default; opacity: 0.7; }
.gn-q-opt--sel {
  background: linear-gradient(135deg, rgba(139,92,246,.30), rgba(34,211,238,.12));
  border-color: var(--gn-accent);
  color: #ffffff;
  box-shadow: 0 8px 26px -14px rgba(139,92,246,.7);
}
.gn-q-letter {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: rgba(167,139,250,.18);
  border: 1px solid rgba(167,139,250,.55);
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  color: #ece7fc;
}
.gn-q-opt--sel .gn-q-letter { background: var(--gn-accent); color: white; border-color: var(--gn-accent); }
.gn-mistake { background: linear-gradient(135deg, rgba(248,113,113,.08), rgba(139,92,246,.08));
  border: 1px solid rgba(248,113,113,.3); border-radius: var(--gn-r-lg); padding: 22px; margin-top: 18px; }
.gn-mistake--good { background: linear-gradient(135deg, rgba(52,211,153,.08), rgba(34,211,238,.08)); border-color: rgba(52,211,153,.32); }
.gn-mistake h4 { color: var(--gn-red); margin: 0 0 8px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.gn-mistake--good h4 { color: var(--gn-green); }
.gn-mistake-actions { display: flex; gap: 10px; margin-top: 14px; }

/* Last-question "Review answers" button readability.  This selector is
   extra-specific so a stray global Bootstrap `.btn` rule cannot win the
   cascade and dim the button — which is what the user was seeing as
   "very dark and unreadable" in production. */
.gn-academy-wrap .gn-mistake .gn-btn,
.gn-academy-wrap .gn-mistake-actions .gn-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d4ad6 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(167,139,250,.85) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  font-weight: 700 !important;
}
.gn-academy-wrap .gn-mistake .gn-btn:hover,
.gn-academy-wrap .gn-mistake-actions .gn-btn:hover {
  background: linear-gradient(135deg, #9b6dff 0%, #7c54e8 100%) !important;
  color: #ffffff !important;
  border-color: rgba(190,170,255,.95) !important;
}
.gn-exam-footer { display: flex; align-items: center; gap: 10px; margin-top: 16px; }

/* ── result + cert card ────────────────────────────────────────────── */
.gn-result-grid { display: grid; grid-template-columns: 320px 1fr; gap: 32px; align-items: center; }
@media (max-width: 880px) { .gn-result-grid { grid-template-columns: 1fr; } }
.gn-cert-card {
  aspect-ratio: 5/7; max-width: 320px; padding: 22px; border-radius: var(--gn-r-xl);
  background: linear-gradient(160deg, #1a1a3e, #0c0c20);
  border: 1px solid var(--gn-accent);
  box-shadow: var(--gn-shadow-lg);
  display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.gn-cert-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% -10%, rgba(139,92,246,.40), transparent 50%),
              radial-gradient(circle at -10% 110%, rgba(34,211,238,.25), transparent 50%);
  pointer-events: none;
}
.gn-cert-card > * { position: relative; z-index: 1; }
.gn-cert-issuer { font-size: 10px; color: var(--gn-accent-2); letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 8px; }
.gn-cert-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 22px; margin: 4px 0; color: var(--gn-text); }
.gn-cert-tier { font-family: 'Black Ops One', sans-serif; font-size: 48px; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.4); margin: 6px 0 14px; }
.gn-cert-meta { font-size: 11px; color: var(--gn-muted); border-top: 1px dashed rgba(255,255,255,.12); padding-top: 10px; margin-top: auto; line-height: 1.7; }
.gn-cert-meta .row { display: flex; justify-content: space-between; }
.gn-cert-meta .row b { color: var(--gn-text-dim); font-weight: 500; }
.gn-cert-seal { position: absolute; bottom: 20px; right: 20px; width: 62px; height: 62px; border-radius: 50%;
  background: var(--gn-grad); display: grid; place-items: center;
  color: #0d0d22; font-family: 'Black Ops One', sans-serif; font-size: 9px;
  z-index: 2; text-align: center; line-height: 1.1; }
.gn-mint-tx { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: rgba(7,7,20,.6);
  padding: 10px 14px; border-radius: var(--gn-r-md); border: 1px solid var(--gn-border-soft);
  display: flex; align-items: center; gap: 10px; word-break: break-all; margin-bottom: 8px; }
.gn-result-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── cert wallet grid ──────────────────────────────────────────────── */
.gn-cw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 16px; }
.gn-cw-cert {
  aspect-ratio: 5/7; padding: 14px; border-radius: var(--gn-r-lg);
  background: linear-gradient(160deg, #1a1a3e, #0c0c20); border: 1px solid var(--gn-border);
  display: flex; flex-direction: column; text-decoration: none; transition: var(--gn-t-slow, 280ms ease);
}
.gn-cw-cert:hover { transform: translateY(-4px) rotate(-1.5deg); box-shadow: var(--gn-shadow-lg); }
.gn-cw-cert-branch { font-family: 'Poppins',sans-serif; font-weight: 700; color: var(--gn-text); font-size: 14px; }
.gn-cw-cert-tier { font-family: 'Black Ops One',sans-serif; font-size: 36px; -webkit-text-stroke: 1px rgba(255,255,255,.35); color: transparent; margin-top: 8px; }
.gn-cw-cert-expiry { font-size: 10px; color: var(--gn-muted); font-family: 'JetBrains Mono',monospace; margin-top: auto; }
.gn-cw-cert--expiring { border-color: var(--gn-gold); }
.gn-cw-cert--expiring .gn-cw-cert-expiry { color: var(--gn-gold); }
.gn-cw-cert--expired { opacity: .55; border-color: var(--gn-red); }

/* ── gate modal ────────────────────────────────────────────────────── */
.gn-gate-modal { background: rgba(17,17,40,.95); border: 1px solid var(--gn-border-strong); border-radius: var(--gn-r-xl);
  padding: 28px; box-shadow: var(--gn-shadow-lg); position: relative; max-width: 480px; margin: 24px auto;
}
.gn-gate-badge { width: 52px; height: 52px; border-radius: var(--gn-r-md); background: rgba(251,191,36,.14);
  border: 1px solid var(--gn-gold); display: grid; place-items: center; color: var(--gn-gold); font-size: 22px; margin-bottom: 14px; }
.gn-gate-close { position: absolute; top: 14px; right: 14px; background: transparent; border: 0; color: var(--gn-muted); cursor: pointer; font-size: 16px; }
.gn-gate-close:hover { color: var(--gn-text); }
.gn-gate-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ── empty state ───────────────────────────────────────────────────── */
.gn-empty { background: rgba(255,255,255,.02); border: 1px dashed var(--gn-border-soft); border-radius: var(--gn-r-lg); padding: 36px; text-align: center; }
.gn-empty h3 { font-family: 'Poppins',sans-serif; color: var(--gn-text); }

/* ── navbar Academy tab + badges ─────────────────────────────────── */
.gn-academy-tab { position: relative; }
.gn-academy-tab i { color: var(--gn-accent-2); }
.gn-streak-badge {
  font-size: 0.62rem; padding: 1px 6px; border-radius: 8px; margin-left: 4px;
  background: rgba(251,191,36,.18); color: var(--gn-gold);
  border: 1px solid rgba(251,191,36,.4); font-weight: 700; letter-spacing: 0.2px;
}
.gn-expiring-badge {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; margin-left: 4px; border-radius: 50%;
  background: var(--gn-red); color: white;
  font-size: 0.6rem; font-weight: 800; line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════
   Radial skill-tree SVG — Iteration-4 polish.

   Goals of this rewrite:
     1. Award-worthy depth — multi-layer glow per state, ambient
        background motion, conic gradient on the wrap.
     2. Improved hover: lifted hex with state-aware glow halo, sibling
        hexes gently dim to focus attention, tier-dot reveal animation,
        tooltip card.
     3. Accessibility: clear focus ring, motion-reduce respected.
     4. Keep the radial mental model — users who learned the Iter-2
        layout never have to relearn anything.
   ══════════════════════════════════════════════════════════════════ */

.gn-tree-wrap {
  position: relative;
  overflow: hidden;          /* contain the ambient glow */
  /* replaced the rotating conic-gradient (which made
     a visible spinning rectangle in the corners) with a stack of
     static radial halos.  Same depth, no motion, no shape leak. */
  background:
    radial-gradient(circle at 50% 50%, rgba(167,139,250,.22), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(34,211,238,.10), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(244,114,182,.05), transparent 75%),
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(139,92,246,.04), transparent 80%);
  border: 1px solid var(--gn-border-soft);
  border-radius: var(--gn-r-xl);
  padding: 18px 14px 22px;
  isolation: isolate;
}
/* Static caustic — a single, very subtle off-center bloom that adds
   asymmetry without ever moving.  Round, so it can't show edges. */
.gn-tree-wrap::before {
  content: ""; position: absolute;
  top: -10%; left: -10%; width: 60%; height: 60%;
  z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(167,139,250,.08), transparent 65%);
  filter: blur(28px);
}
.gn-tree-wrap > * { position: relative; z-index: 1; }    /* anything inside sits above ::before */

.gn-tree-svg {
  width: 100%; height: auto; display: block;
  max-width: 1040px; margin: 0 auto;
  overflow: visible;        /* allow glow + tooltip to escape the viewBox */
}

/* ─── Spoke connectors ─────────────────────────────────────────────
   The line<x1,y1>→<branch> in the SVG; we style its parent <g> via
   .gn-spokes so the colour responds to the surrounding state. */
/* Spokes — subtle dashed lines from root to each branch hex.
   Dashed instead of solid so the eye reads them as a structural map
   rather than as edges that visually compete with the hex outlines. */
.gn-spokes line {
  stroke: rgba(167,139,250,0.28);
  stroke-width: 1.2;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
  transition: stroke 0.35s ease, stroke-width 0.35s ease, opacity 0.35s ease;
}
.gn-spokes line.is-active   { stroke: rgba(52,211,153,0.65);  stroke-width: 1.6; stroke-dasharray: 0; }
.gn-spokes line.is-expiring { stroke: rgba(251,191,36,0.65);  stroke-width: 1.6; stroke-dasharray: 0; }
.gn-spokes line.is-critical { stroke: rgba(248,113,113,0.70); stroke-width: 1.8; stroke-dasharray: 0; }

/* ─── Constellation (cross-branch related-domain connectors) ────────
   Faint curves between hexes that share domain knowledge.  They are
   visually quieter than the spokes (which are the structural map) so
   they read as "secondary relationships" rather than "navigation". */
.gn-constellation__line {
  stroke: rgba(34,211,238,.22);
  stroke-width: 0.8;
  stroke-dasharray: 1.5 5;
  stroke-linecap: round;
  pointer-events: none;
  transition: stroke 280ms ease, stroke-width 280ms ease, opacity 280ms ease;
}
.gn-constellation__line--strong {
  stroke: rgba(167,139,250,.32);
  stroke-width: 1.1;
}
/* When the user hovers a hex, dim the constellation slightly so the
   selected hex's spokes/tooltip take focus. */
.gn-tree-svg:has(.gn-hex:hover) .gn-constellation__line {
  opacity: 0.35;
}

/* ─── Hex base (every node gets these) ────────────────────────── */
.gn-hex {
  cursor: pointer;
  /* No transform on hover — only filter/brightness changes.  The lift
     was reverted on  because it felt heavy; the brightness
     pull of the sibling-dim plus the brighter glow do the same job. */
  transition: filter 220ms ease;
}
.gn-hex .gn-hex-poly {
  transition: filter   220ms ease,
              stroke   180ms ease,
              fill     220ms ease,
              stroke-width 180ms ease;
}
/* Tier dots — hollow by default, fill on focus/hover */
.gn-hex circle {
  transition: r 200ms ease, fill 200ms ease, stroke 200ms ease;
}

/* ─── State styling ───────────────────────────────────────────── */

/* Locked: muted, no interaction affordance */
.gn-hex--locked { cursor: not-allowed; }
.gn-hex--locked .gn-hex-poly { fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.10); stroke-width: 2; }
.gn-hex--locked text         { fill: var(--gn-muted-2) !important; }

/* Coming-soon: distinct from locked — visible but ungated.  Subtle
   cyan double-dash border so it reads as "in the works" rather than
   "off-limits".  No cursor:not-allowed — clicking is OK, just lands
   on a stub course page. */
.gn-hex--coming_soon          { cursor: help; }
.gn-hex--coming_soon .gn-hex-poly {
  fill: rgba(34,211,238,.04);
  stroke: rgba(34,211,238,.32);
  stroke-width: 1.8;
  stroke-dasharray: 4 3;
}
.gn-hex--coming_soon text     { fill: rgba(174,210,224,.78) !important; }

/* Available: violet outline, dimensional fill */
.gn-hex--available .gn-hex-poly {
  fill: rgba(139,92,246,.10);
  stroke: var(--gn-accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 0 transparent);
}

/* Active: green, double-glow halo */
.gn-hex--active .gn-hex-poly {
  fill: rgba(52,211,153,.18);
  stroke: var(--gn-green);
  stroke-width: 2.5;
  filter:
    drop-shadow(0 0 14px rgba(52,211,153,.40))
    drop-shadow(0 0 2px rgba(52,211,153,.60));
}

/* Expiring: amber, slow-pulse glow */
.gn-hex--expiring .gn-hex-poly {
  fill: rgba(251,191,36,.14);
  stroke: var(--gn-gold);
  stroke-width: 2.5;
  animation: gn-hex-amber-breath 3.2s ease-in-out infinite;
}
@keyframes gn-hex-amber-breath {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(251,191,36,.32)); }
  50%      { filter: drop-shadow(0 0 18px rgba(251,191,36,.55)); }
}

/* Critical: red, faster pulse — urgent without being alarming */
.gn-hex--critical .gn-hex-poly {
  fill: rgba(248,113,113,.14);
  stroke: var(--gn-red);
  stroke-width: 2.5;
  animation: gn-hex-red-pulse 1.8s ease-in-out infinite;
}
@keyframes gn-hex-red-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(248,113,113,.38)); }
  50%      { filter: drop-shadow(0 0 20px rgba(248,113,113,.65)); }
}

/* Recommended-next: gradient stroke + breathing violet halo */
@keyframes gn-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px  rgba(167,139,250,.30)); }
  50%      { filter: drop-shadow(0 0 22px rgba(167,139,250,.80)); }
}
.gn-hex--pulse .gn-hex-poly {
  animation: gn-pulse 2.4s ease-in-out infinite;
}

/* Root hex */
.gn-hex--root .gn-hex-poly {
  fill: #0d0d22;
  stroke-width: 3;
  filter: drop-shadow(0 0 16px rgba(167,139,250,.45));
}

/* ─── Hover & focus interaction ───────────────────────────────────
   On hover/focus a hex we ONLY highlight — no scale, no lift.  The
    design feedback was that the motion felt heavy; the
   sibling-dim brightness pull plus a stronger glow read just as well.

   What we change on hover:
     1. Stroke widens from 2 → 3.4 px so the outline reads sharper
     2. A double drop-shadow blooms the violet halo (no movement)
     3. Tier-dots: filled ones grow by radius only (no transform);
        hollow ones gain a faint violet outline
   Sibling hexes dim — done via a parent SVG class set in JS
   (gn-tree-svg--focus); see dashboard.html.
   ─────────────────────────────────────────────────────────────── */
.gn-hex:not(.gn-hex--locked):hover,
.gn-hex:not(.gn-hex--locked):focus-visible {
  outline: none;
}
.gn-hex:not(.gn-hex--locked):hover .gn-hex-poly,
.gn-hex:not(.gn-hex--locked):focus-visible .gn-hex-poly {
  stroke-width: 3.4;
  filter:
    drop-shadow(0 0 26px rgba(167,139,250,.78))
    drop-shadow(0 0 8px  rgba(255,255,255,.28));
}
/* Tier-dot expand on hover/focus */
.gn-hex:hover circle[fill="#34d399"],
.gn-hex:focus-visible circle[fill="#34d399"] {
  r: 6.5;
  filter: drop-shadow(0 0 6px rgba(52,211,153,.7));
}
.gn-hex:hover circle[fill="none"],
.gn-hex:focus-visible circle[fill="none"] {
  stroke: rgba(167,139,250,0.6);
  stroke-width: 2;
}

/* When the SVG is in focus mode, dim every hex except the focused one */
.gn-tree-svg--focus .gn-hex { filter: brightness(0.55) saturate(0.7); }
.gn-tree-svg--focus .gn-hex--focus,
.gn-tree-svg--focus .gn-hex:hover,
.gn-tree-svg--focus .gn-hex:focus-visible { filter: brightness(1) saturate(1); }
/* Keyboard focus ring (outside the hex bounds) */
.gn-hex:focus-visible .gn-hex-poly {
  outline: 2px solid rgba(167,139,250,0.65);
  outline-offset: 4px;
}

/* ─── Tooltip card (foreignObject) ────────────────────────────────
   The dashboard renders a per-hex <foreignObject class="gn-hex-tip">
   which is hidden by default and revealed on hover.  Card design is
   intentionally restrained — small, readable, no shadow blow-out.  */
.gn-hex-tip {
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
  transform: translateY(4px);
}
.gn-hex:hover  + .gn-hex-tip,
.gn-hex:focus-visible + .gn-hex-tip,
.gn-hex-tip:hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.gn-hex-tip__card {
  background: rgba(13,13,34,0.95);
  border: 1px solid rgba(167,139,250,0.45);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.45;
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.6),
              0 0 0 1px rgba(167,139,250,0.18);
  backdrop-filter: blur(8px);
  min-width: 160px;
  max-width: 220px;
}
.gn-hex-tip__title {
  font-weight: 800; font-size: 12px; color: #fff;
  margin-bottom: 2px;
}
.gn-hex-tip__sub {
  color: #a78bfa; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.10em;
  font-weight: 700;
  margin-bottom: 6px;
}
.gn-hex-tip__row {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 2px; color: #c4b5fd; font-size: 10.5px;
}
.gn-hex-tip__row b { color: #fff; font-weight: 700; }
.gn-hex-tip__cta {
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed rgba(167,139,250,0.30);
  color: #22d3ee; font-weight: 700; font-size: 10.5px;
}

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .gn-tree-wrap::before     { animation: none; }
  .gn-hex--pulse .gn-hex-poly,
  .gn-hex--expiring .gn-hex-poly,
  .gn-hex--critical .gn-hex-poly { animation: none; }
  .gn-hex { transition: none; }
}

/* Legend */
.gn-tree-legend {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--gn-border-soft);
  font-size: 11px; color: var(--gn-text-dim); letter-spacing: 0.4px;
}
.gn-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.gn-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.gn-legend-dot--active    { background: var(--gn-green); }
.gn-legend-dot--available { background: var(--gn-accent); }
.gn-legend-dot--expiring  { background: var(--gn-gold); }
.gn-legend-dot--critical  { background: var(--gn-red); }
.gn-legend-dot--locked    { background: rgba(255,255,255,.18); }

/* Recommended-next card */
.gn-recommend-card {
  display: flex; align-items: center; gap: 16px;
  margin-top: 18px; padding: 18px 22px;
  background: linear-gradient(135deg, rgba(139,92,246,.10), rgba(34,211,238,.05));
  border: 1px solid var(--gn-border-strong); border-radius: var(--gn-r-lg);
  text-decoration: none; color: var(--gn-text); transition: transform 200ms ease, box-shadow 200ms ease;
}
.gn-recommend-card:hover { transform: translateY(-2px); box-shadow: var(--gn-shadow-lg); color: var(--gn-text); }
.gn-recommend-badge {
  width: 48px; height: 48px; border-radius: var(--gn-r-md);
  background: var(--gn-grad); display: grid; place-items: center; color: #0d0d22;
  flex-shrink: 0; font-size: 22px;
}
.gn-recommend-body { flex: 1; min-width: 0; }
.gn-recommend-kind { font-size: 11px; color: var(--gn-accent); letter-spacing: 1px; text-transform: uppercase; font-weight: 700; }
.gn-recommend-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; margin: 2px 0; }
.gn-recommend-cta { font-size: 12px; color: var(--gn-accent-2); }

/* Text-readable "All branches" panel */
.gn-tree-details summary {
  cursor: pointer; padding: 12px 16px; background: rgba(255,255,255,.02);
  border: 1px solid var(--gn-border-soft); border-radius: var(--gn-r-md);
  font-size: 13px; color: var(--gn-text-dim); list-style: none;
}
.gn-tree-details summary::-webkit-details-marker { display: none; }
.gn-tree-details summary::before { content: "▸ "; color: var(--gn-accent); margin-right: 4px; }
.gn-tree-details[open] summary::before { content: "▾ "; }
.gn-branch-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--gn-border-soft); font-size: 13.5px;
}
.gn-branch-row-title { font-weight: 600; color: var(--gn-text); }
.gn-branch-row-title i { color: var(--gn-accent); margin-right: 6px; }
.gn-branch-row-state { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.gn-branch-row-state--active    { color: var(--gn-green); }
.gn-branch-row-state--expiring  { color: var(--gn-gold); }
.gn-branch-row-state--critical  { color: var(--gn-red); }
.gn-branch-row-state--available { color: var(--gn-accent); }
.gn-branch-row-state--locked    { color: var(--gn-muted-2); }

/* ── Recert banners (Iter-I2 T-I2-010) ───────────────────────────── */
.gn-recert-banners { display: flex; flex-direction: column; gap: 10px; }
.gn-recert-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--gn-r-md);
  border-left: 4px solid var(--gn-accent); background: rgba(139,92,246,.08);
}
.gn-recert-banner-text { flex: 1; min-width: 0; color: var(--gn-text); font-size: 14px; }
.gn-recert-banner-text .gn-muted { font-size: 12px; }
.gn-recert-banner--info     { border-left-color: var(--gn-accent-2); background: rgba(34,211,238,.07); }
.gn-recert-banner--warning  { border-left-color: var(--gn-gold);    background: rgba(251,191,36,.08); }
.gn-recert-banner--warning .gn-recert-banner-text strong { color: var(--gn-gold); }
.gn-recert-banner--danger   { border-left-color: var(--gn-red);     background: rgba(248,113,113,.08); }
.gn-recert-banner--danger .gn-recert-banner-text strong { color: var(--gn-red); }
.gn-recert-banner--expired  { border-left-color: var(--gn-muted-2); background: rgba(255,255,255,.03); }

/* Micro-module list (Iter-I2 T-I2-009) */
.gn-micro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gn-micro-card {
  display: block; padding: 18px; background: rgba(255,255,255,.02);
  border: 1px solid var(--gn-border-soft); border-radius: var(--gn-r-lg);
  text-decoration: none; color: var(--gn-text); transition: var(--gn-t-slow, 280ms ease);
}
.gn-micro-card:hover { transform: translateY(-2px); box-shadow: var(--gn-shadow-lg); border-color: var(--gn-border-strong); color: var(--gn-text); }
.gn-micro-card--urgent { border-color: rgba(251,191,36,.4); }
.gn-micro-card-head { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 10px; }
.gn-micro-card-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.3; margin: 0 0 8px; }
.gn-micro-card-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--gn-muted); }
.gn-micro-urgent { color: var(--gn-gold); font-weight: 600; }
.gn-q-opt-radio { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer;
  background: rgba(255,255,255,.02); border: 1px solid var(--gn-border-soft); border-radius: var(--gn-r-md);
  margin-bottom: 6px; font-size: 14px; }
.gn-q-opt-radio:has(input:checked) { background: rgba(139,92,246,.12); border-color: var(--gn-accent); }
.gn-q-opt-radio input { display: none; }
.gn-card--quiz { background: rgba(255,255,255,.02); }
.gn-card--success { background: rgba(52,211,153,.06); border-color: rgba(52,211,153,.36); }
.gn-card--warn { background: rgba(251,191,36,.06); border-color: rgba(251,191,36,.36); }
.gn-academy-wrap .gn-btn--sm,
.gn-ed-canvas    .gn-btn--sm { padding: 6px 12px; font-size: 12.5px; }

/* ── User-menu academy badges (Iter-I2 T-I2-005) ─────────────────── */
.gn-me-badges-placeholder { color: var(--gn-muted); font-size: 12px; }
.gn-me-badges {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  padding: 6px 0;
}
.gn-me-badge {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 8px 10px; background: rgba(255,255,255,.02);
  border: 1px solid var(--gn-border-soft); border-radius: var(--gn-r-sm);
  transition: var(--gn-t-base, 180ms ease);
}
.gn-me-badge-v {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--gn-text); line-height: 1;
}
.gn-me-badge-of { font-size: 11px; color: var(--gn-muted); font-weight: 500; margin-left: 2px; }
.gn-me-badge-l { font-size: 10px; color: var(--gn-muted); margin-top: 4px; letter-spacing: 0.3px; }
.gn-me-badge--gold { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.05); }
.gn-me-badge--gold .gn-me-badge-v { color: var(--gn-gold); }
.gn-me-badge--gold .gn-me-badge-l { color: var(--gn-gold); }
.gn-me-badge--streak { border-color: rgba(251,146,60,.35); background: rgba(251,146,60,.05); }
.gn-me-badge--alert { border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.05); }
.gn-me-badge--alert .gn-me-badge-v { color: var(--gn-red); }

/* Subtle pulse on badge refresh */
.gn-me-badges[data-fresh="1"] .gn-me-badge { animation: gn-me-pulse 700ms ease-out; }
@keyframes gn-me-pulse {
  0%   { transform: scale(0.96); opacity: 0.5; }
  60%  { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); }
}

/* Recommended-next nudge in user menu */
.gn-me-recommend {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin-top: 4px;
  background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(34,211,238,.06));
  border: 1px solid rgba(139,92,246,.32); border-radius: var(--gn-r-sm);
  color: var(--gn-text); text-decoration: none; font-size: 12.5px;
  font-weight: 600; transition: var(--gn-t-base, 180ms ease);
}
.gn-me-recommend:hover { background: rgba(139,92,246,.20); color: var(--gn-text); }
.gn-me-recommend i { color: var(--gn-accent); }
.gn-me-recommend-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Inline Learn chip — drops into any gn-page-subtitle */
.gn-learn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px; padding: 3px 10px; border-radius: var(--gn-r-pill);
  background: rgba(34,211,238,.10); border: 1px solid rgba(34,211,238,.32);
  color: var(--gn-accent-2); font-size: 12px; font-weight: 600; text-decoration: none;
  transition: var(--gn-t-base, 180ms ease);
}
.gn-learn-chip:hover { background: rgba(34,211,238,.18); color: var(--gn-accent-2); transform: translateY(-1px); }
.gn-learn-chip i { font-size: 13px; }

/* ── design tokens layered on top of gn-tokens ───────────────── */
.gn-ed-canvas {
  --ed-ink:        #efeaf6;        /* warm ivory body text */
  --ed-ink-dim:    #b8b1d2;        /* secondary text */
  --ed-ink-faint:  #6f6a85;        /* tertiary text */
  --ed-paper:      #07071a;        /* base background */
  --ed-paper-2:    #0b0b22;        /* card surface */
  --ed-rule:       rgba(168,156,210,.18);
  --ed-rule-hi:    rgba(168,156,210,.36);
  --ed-violet:     #8b5cf6;
  --ed-cyan:       #22d3ee;
  --ed-rose:       #f472b6;
  --ed-gold:       #f5c875;
  --ed-amber:      #fbbf24;
  --ed-red:        #ef4444;
  --ed-green:      #34d399;
  --ed-grad:       linear-gradient(120deg, #8b5cf6 0%, #22d3ee 50%, #f472b6 100%);
  --ed-grad-soft:  linear-gradient(120deg, rgba(139,92,246,.18), rgba(34,211,238,.10), rgba(244,114,182,.16));
  --ed-shadow-card: 0 24px 60px -28px rgba(0,0,0,.7), 0 2px 0 rgba(255,255,255,.02) inset;
  --ed-radius:     22px;
  --ed-radius-sm:  14px;
  --ed-ease:       cubic-bezier(.2,.7,.2,1);
  --ed-ease-out:   cubic-bezier(.16,1,.3,1);
  position: relative;
  isolation: isolate;
  color: var(--ed-ink);
  /* defensive solid background so Edge / mobile Safari
     don't paint a white canvas behind the academy when scrolled below
     the body's viewport-fixed gradient.  The aurora blobs paint above
     this on z-index 0; content paints above on z-index 1. */
  background-color: var(--ed-paper);
  min-height: 100vh;
}

/* Typography: reuse the wallet's already-loaded fonts.  Poppins
   for display moments, Inter for body, Black Ops One for accents.
   NO render-blocking @import — Fraunces was dropped  to
   match the rest of the wallet and to remove the second roundtrip
   from CSS parse. */

.gn-ed-wrap { max-width: 1440px; margin: 0 auto; padding: 14px 32px 80px; position: relative; z-index: 1; }
@media (max-width: 800px) { .gn-ed-wrap { padding: 10px 18px 40px; } }

/* ── ambient aurora canvas ─────────────────────────────────────
   Performance pass cut from 3 large blurred blobs +
   grid mask down to 2 smaller, less-blurred blobs.  The grid mask
   was the most expensive thing on the page (full-viewport
   mask-image composite every frame) — gone.  Blob blur reduced
   120px → 70px and opacity .55 → .28, which on its own buys back
   most of the dropped frames without losing the ambient feel. */
.gn-ed-aurora {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.gn-ed-aurora__blob {
  position: absolute; width: 460px; height: 460px;
  border-radius: 50%; filter: blur(70px); opacity: .28;
  will-change: transform;
}
.gn-ed-aurora__blob--violet { background: radial-gradient(closest-side, #8b5cf6, transparent); top: -80px; left: -120px; animation: gn-ed-float-a 40s ease-in-out infinite; }
.gn-ed-aurora__blob--cyan   { background: radial-gradient(closest-side, #22d3ee, transparent); top: 35%; right: -160px; animation: gn-ed-float-b 48s ease-in-out infinite; opacity: .22; }
.gn-ed-aurora__blob--rose   { display: none; }   /* dropped — kept selector for back-compat */
.gn-ed-aurora__grid         { display: none; }   /* dropped — mask-image was expensive */
@keyframes gn-ed-float-a { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(40px,30px,0); } }
@keyframes gn-ed-float-b { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-30px,-20px,0); } }

/* ── editorial hero ─────────────────────────────────────────────
   Typography retuned  to match the wallet's Poppins +
   Inter + Black Ops One stack.  Entrance animations dropped — they
   contributed to perceived slowness on first paint. */
.gn-ed-hero { margin-top: 6px; }

.gn-ed-masthead {
  display: flex; align-items: center; gap: 16px;
  text-transform: uppercase; letter-spacing: 3px; font-size: 10.5px; font-weight: 700;
  color: var(--ed-ink-faint);
  padding-bottom: 10px;
}
.gn-ed-mast-issue { color: var(--ed-cyan); }
.gn-ed-mast-rule  { flex: 1; height: 1px; background: var(--ed-rule); display: block; }
.gn-ed-mast-tag   { color: var(--ed-ink-dim); }

.gn-ed-hero__grid {
  display: grid; grid-template-columns: 1.7fr 1fr; gap: 56px; align-items: end;
  padding: 18px 0 28px;
  border-bottom: 1px solid var(--ed-rule);
}
@media (max-width: 1000px) { .gn-ed-hero__grid { grid-template-columns: 1fr; gap: 24px; } }

.gn-ed-display {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -2px;
  margin: 0;
  color: var(--ed-ink);
}
.gn-ed-display__em {
  font-style: normal; font-weight: 800;
  background: var(--ed-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -2px;
}
.gn-ed-dek {
  font-family: 'Inter', sans-serif;
  font-weight: 400; font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55; color: var(--ed-ink-dim);
  max-width: 62ch; margin: 16px 0 0;
}

.gn-ed-byline {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 22px;
  background: rgba(13,13,34,0.55);
  border: 1px solid var(--ed-rule);
  border-radius: var(--ed-radius-sm);
}
.gn-ed-byline__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 6px 0;
  border-bottom: 1px dashed var(--ed-rule);
}
.gn-ed-byline__row:last-child { border-bottom: 0; }
.gn-ed-byline__label {
  font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ed-ink-faint); font-weight: 700;
  font-family: 'Inter', sans-serif;
}
.gn-ed-byline__value {
  font-family: 'Poppins', 'Inter', sans-serif; font-weight: 700;
  font-size: 19px; color: var(--ed-ink);
  display: inline-flex; align-items: baseline; gap: 4px;
}
.gn-ed-byline__unit { font-size: 12px; color: var(--ed-ink-faint); font-weight: 400; letter-spacing: 1px; text-transform: uppercase; font-family: 'JetBrains Mono', SFMono-Regular, monospace; }
.gn-ed-flame { font-size: 18px; filter: drop-shadow(0 0 8px rgba(251,191,36,.6)); }
.gn-ed-rank-maestro {
  background: var(--ed-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-family: 'Black Ops One', monospace; letter-spacing: 3px; font-size: 18px;
}

/* ── recert banner editorial chrome ─────────────────────────── */
.gn-ed-banners { display: flex; flex-direction: column; gap: 10px; }
.gn-ed-banner {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 16px; align-items: center;
  padding: 14px 20px; border-radius: var(--ed-radius-sm);
  background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--ed-rule);
  backdrop-filter: blur(8px);
}
.gn-ed-banner--warning { border-color: rgba(251,191,36,.32); background: linear-gradient(135deg, rgba(251,191,36,.10), rgba(251,191,36,.02)); }
.gn-ed-banner--critical { border-color: rgba(239,68,68,.45); background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(239,68,68,.02)); animation: gn-ed-pulse-soft 2.6s ease-in-out infinite; }
.gn-ed-banner__mark { font-size: 22px; }
.gn-ed-banner--warning .gn-ed-banner__mark { color: var(--ed-amber); }
.gn-ed-banner--critical .gn-ed-banner__mark { color: var(--ed-red); }
.gn-ed-banner__text strong { color: var(--ed-ink); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; }
@keyframes gn-ed-pulse-soft { 50% { box-shadow: 0 0 0 6px rgba(239,68,68,.05); } }

/* ── editorial credentials strip ─────────────────────────────── */
.gn-ed-strip {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center; gap: 14px;
  padding: 22px 28px; margin-top: 24px;
  background: rgba(13,13,34,0.55);
  border: 1px solid var(--ed-rule);
  border-radius: var(--ed-radius);
  /* backdrop-filter removed too expensive across multiple panels */
}
@media (max-width: 800px) {
  .gn-ed-strip { grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; }
  .gn-ed-strip__rule { display: none; }
}
.gn-ed-strip__stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.gn-ed-strip__num {
  font-family: 'Poppins', 'Inter', sans-serif; font-weight: 700; font-size: 34px;
  line-height: 1; color: var(--ed-ink); letter-spacing: -1px;
}
.gn-ed-strip__num--amber { color: var(--ed-amber); }
.gn-ed-strip__num--sm    { font-size: 22px; }
.gn-ed-strip__num small  { font-size: 16px; color: var(--ed-ink-faint); margin-left: 2px; font-weight: 600; }
.gn-ed-strip__num-faint  { color: var(--ed-ink-faint); font-weight: 500; }
.gn-ed-strip__lbl {
  font-size: 10.5px; letter-spacing: 2.2px; text-transform: uppercase;
  font-weight: 700; color: var(--ed-ink-faint);
  font-family: 'Inter', sans-serif;
}
.gn-ed-strip__rule { width: 1px; height: 50px; background: var(--ed-rule); justify-self: center; }
.gn-ed-strip__stat--ring { position: relative; }
.gn-ed-strip__stat--ring { display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: center; }
.gn-ed-strip__ring-text { display: flex; flex-direction: column; gap: 4px; }
.gn-ed-ring { width: 60px; height: 60px; transform: rotate(-90deg); }
.gn-ed-ring__bg  { fill: none; stroke: rgba(168,156,210,.16); stroke-width: 3; }
.gn-ed-ring__bar {
  fill: none; stroke: url(#gn-tree-grad); stroke: var(--ed-cyan); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 0 106.88;
  transition: stroke-dasharray 1.2s var(--ed-ease-out);
  filter: drop-shadow(0 0 6px rgba(34,211,238,.5));
}

/* ── stage: tree frame + editorial sidecard ─────────────────── */
.gn-ed-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px; align-items: start;
}
@media (max-width: 1100px) { .gn-ed-stage { grid-template-columns: 1fr; } }

.gn-ed-frame {
  background: rgba(13,13,34,0.55);
  border: 1px solid var(--ed-rule);
  border-radius: var(--ed-radius);
  padding: 22px;
  /* backdrop-filter & entrance animation removed for perf */
}
.gn-ed-frame--tree { padding: 16px 12px 8px; }

.gn-ed-frame__eyebrow {
  display: flex; align-items: baseline; gap: 14px;
  padding: 0 14px 14px; border-bottom: 1px solid var(--ed-rule); margin-bottom: 12px;
}
.gn-ed-frame__eyebrow--side { padding: 0 0 14px; }
.gn-ed-frame__num {
  font-family: 'Black Ops One', 'Poppins', sans-serif;
  font-size: 18px; color: var(--ed-cyan); line-height: 1; font-weight: 400;
  letter-spacing: 1px;
}
.gn-ed-frame__title {
  font-family: 'Poppins', 'Inter', sans-serif; font-size: 16px; font-weight: 700;
  letter-spacing: -.2px; color: var(--ed-ink);
}
.gn-ed-frame__hint {
  margin-left: auto;
  font-size: 11px; color: var(--ed-ink-faint);
  letter-spacing: 1.2px; text-transform: uppercase; font-family: 'JetBrains Mono', SFMono-Regular, monospace;
}
@media (max-width: 700px) { .gn-ed-frame__hint { display: none; } }

/* ── tier rings overlay (decorative) ─────────────────────────── */
.gn-ed-tree-wrap { position: relative; }
.gn-ed-tier-rings {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
/* Three decorative rings, placed to FLANK the hex placement radius
   (~230 in the live tree.py layout) instead of crossing through it.
     • 110 — inside the root, solid violet, defines the "core" zone.
     • 230 — exactly on hex centres, pearl-dotted, like a track.
     • 305 — just past the hex tops, dashed gold, aspirational outer.
   No labels on the rings — labels live in .gn-ed-tier-key above
   the tree where they can't collide with anything. */
.gn-ed-tier-ring {
  fill: none;
  stroke-width: 1.2;
}
.gn-ed-tier-ring--101 { stroke: rgba(167,139,250,.48); stroke-width: 1.4; }
.gn-ed-tier-ring--201 { stroke: rgba(99,165,255,.36);  stroke-dasharray: 1 4; stroke-linecap: round; stroke-width: 1.4; }
.gn-ed-tier-ring--301 { stroke: rgba(245,200,117,.32); stroke-dasharray: 10 7; }

/* Subtle starfield behind the tree.  Pure SVG circles in the
   markup; CSS only adds a soft pulse so they breathe. */
.gn-ed-stars circle {
  animation: gn-ed-star-twinkle 4s ease-in-out infinite;
}
.gn-ed-stars circle:nth-child(3n)   { animation-delay: -1.5s; animation-duration: 6s; }
.gn-ed-stars circle:nth-child(3n+1) { animation-delay: -0.7s; animation-duration: 5s; }
@keyframes gn-ed-star-twinkle {
  0%, 100% { opacity: var(--star-opacity, 0.35); }
  50%      { opacity: 0.05; }
}

/* Precision tick marks every 30 degrees on the 301 ring. */
.gn-ed-tick {
  stroke: rgba(167,139,250,.32);
  stroke-width: 1;
}
.gn-ed-tick--major {
  stroke: rgba(245,200,117,.50);
  stroke-width: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .gn-ed-stars circle { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   Exam review screen —  user request.
   Sits between answering the last question and submitting the
   attempt for final evaluation + cert mint.  Lists every question
   with the user's pick + the canonical correct option + the rich
   "why" explanation, plus a sticky bottom CTA bar.
   ════════════════════════════════════════════════════════════════ */
.gn-review-hero {
  padding: 24px 26px 22px;
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-r-lg);
  background: linear-gradient(180deg, rgba(13,13,34,.72), rgba(13,13,34,.55));
}
.gn-review-hero__eyebrow { margin-bottom: 8px; }
.gn-review-stats {
  display: flex; align-items: center; gap: 18px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px dashed var(--gn-border);
}
.gn-review-stat { display: flex; flex-direction: column; gap: 2px; }
.gn-review-stat__num {
  font-family: 'Poppins', 'Inter', sans-serif; font-weight: 700;
  font-size: 28px; color: var(--gn-text); letter-spacing: -.8px;
}
.gn-review-stat__num small { font-size: 14px; color: var(--gn-muted); font-weight: 500; }
.gn-review-stat__num--green { color: var(--gn-green); }
.gn-review-stat__num--amber { color: var(--gn-gold); }
.gn-review-stat__lbl {
  font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gn-muted); font-weight: 700; font-family: 'Inter', sans-serif;
}
.gn-review-stat__div { width: 1px; height: 36px; background: var(--gn-border); }

.gn-review-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.gn-review-warn {
  margin: 14px 0 0; padding: 10px 14px;
  background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.30);
  border-radius: var(--gn-r-sm); color: var(--gn-text-dim); font-size: 13px;
}
.gn-review-warn .bi { color: var(--gn-gold); margin-right: 6px; }

/* Per-question review cards */
.gn-review-list { display: flex; flex-direction: column; gap: 14px; }
.gn-review-card {
  padding: 18px 20px;
  border: 1px solid var(--gn-border);
  border-left-width: 4px;
  border-radius: var(--gn-r-md);
  background: rgba(13,13,34,.55);
}
.gn-review-card--ok  { border-left-color: var(--gn-green); }
.gn-review-card--bad { border-left-color: #f87171; }
.gn-review-card__head {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--gn-border);
}
.gn-review-card__n {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(167,139,250,.18); border: 1px solid rgba(167,139,250,.45);
  font-family: 'JetBrains Mono', SFMono-Regular, monospace;
  font-weight: 700; font-size: 12px; color: var(--gn-text);
}
.gn-review-card__verdict {
  font-weight: 700; letter-spacing: .5px; text-transform: uppercase; font-size: 11px;
}
.gn-review-card--ok  .gn-review-card__verdict { color: var(--gn-green); }
.gn-review-card--bad .gn-review-card__verdict { color: #f87171; }
.gn-review-card__meta { margin-left: auto; font-size: 11px; }
.gn-review-card__meta .bi { margin: 0 4px 0 8px; }

.gn-review-card__q {
  font-family: 'Poppins', 'Inter', sans-serif; font-weight: 700;
  font-size: 17px; margin: 14px 0 12px; color: var(--gn-text);
  line-height: 1.4;
}
.gn-review-card__options { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gn-review-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(167,139,250,.20);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
  color: var(--gn-text-dim);
  font-size: 14px;
}
.gn-review-opt__mark { width: 18px; text-align: center; }
.gn-review-opt__text { flex: 1; }
.gn-review-opt__tag {
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(167,139,250,.18); color: var(--gn-accent);
  border: 1px solid rgba(167,139,250,.40);
  font-weight: 700;
}
.gn-review-opt__tag--green { background: rgba(52,211,153,.14); color: var(--gn-green); border-color: rgba(52,211,153,.45); }

.gn-review-opt--canonical {
  background: linear-gradient(90deg, rgba(52,211,153,.10), rgba(52,211,153,.02));
  border-color: rgba(52,211,153,.45);
  color: var(--gn-text);
}
.gn-review-opt--canonical .gn-review-opt__mark { color: var(--gn-green); }
.gn-review-opt--user-right {
  background: linear-gradient(90deg, rgba(52,211,153,.16), rgba(34,211,238,.06));
  border-color: rgba(52,211,153,.65);
  color: #ffffff;
  box-shadow: 0 8px 22px -16px rgba(52,211,153,.6);
}
.gn-review-opt--user-wrong {
  background: linear-gradient(90deg, rgba(248,113,113,.14), rgba(248,113,113,.02));
  border-color: rgba(248,113,113,.55);
  color: var(--gn-text);
}
.gn-review-opt--user-wrong .gn-review-opt__mark { color: #f87171; }

.gn-review-card__why {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(34,211,238,.06);
  border-left: 2px solid var(--gn-accent-2);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  color: var(--gn-text-dim);
}
.gn-review-card__why strong { color: var(--gn-text); display: block; margin-bottom: 4px; font-size: 12.5px; letter-spacing: .5px; text-transform: uppercase; }
.gn-review-card__why p { margin: 0; line-height: 1.6; }

/* Sticky bottom CTA bar */
.gn-review-cta-bar {
  position: sticky; bottom: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 32px 0 8px;
  padding: 12px 18px;
  background: rgba(13,13,34,.92);
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-r-md);
  box-shadow: 0 14px 32px -18px rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
}
.gn-review-cta-bar__summary { font-size: 13px; color: var(--gn-text-dim); }
.gn-review-cta-bar__summary b { color: var(--gn-text); }
.gn-review-cta-bar__actions { display: flex; gap: 10px; }
.gn-text-green { color: var(--gn-green); }
.gn-text-amber { color: var(--gn-gold); }

/* Spinning icon used on Submit click while POST /complete is in flight */
.gn-spin-anim {
  display: inline-block;
  animation: gn-spin 0.9s linear infinite;
}
@keyframes gn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gn-spin-anim { animation: none; } }

/* ── tier-key strip (legend hoisted out of the SVG) ──────────── */
.gn-ed-tier-key {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin: 4px 14px 14px;
  padding: 10px 14px;
  background: rgba(13,13,34,0.55);
  border: 1px solid var(--ed-rule);
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
}
.gn-ed-tier-key__intro {
  font-style: italic; font-size: 12.5px;
  color: var(--ed-ink-faint);
  margin-right: 4px;
}
.gn-ed-tier-key__item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px;
  letter-spacing: .3px;
  color: var(--ed-ink-dim);
}
.gn-ed-tier-key__item b {
  font-family: 'JetBrains Mono', SFMono-Regular, monospace;
  font-weight: 700; color: var(--ed-ink);
  font-size: 12.5px; letter-spacing: .6px;
}
.gn-ed-tier-key__item em {
  font-style: normal; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.6px;
  font-size: 10.5px; color: var(--ed-ink-faint);
}
.gn-ed-tier-key__dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset;
}
.gn-ed-tier-key__dot--101 { background: #a78bfa; box-shadow: 0 0 8px rgba(167,139,250,.55); }
.gn-ed-tier-key__dot--201 { background: #63a5ff; box-shadow: 0 0 8px rgba(99,165,255,.45); }
.gn-ed-tier-key__dot--301 { background: #22d3ee; box-shadow: 0 0 8px rgba(34,211,238,.45); }
.gn-ed-tier-key__dot--401 { background: #f5c875; box-shadow: 0 0 8px rgba(245,200,117,.45); }

/* The actual tree SVG sits above the ring overlay. */
.gn-tree-svg { position: relative; z-index: 1; }

/* ── editorial legend caption ────────────────────────────────── */
.gn-ed-legend {
  margin: 14px 14px 0; padding: 14px 16px; gap: 18px;
  border-top: 1px solid var(--ed-rule);
  display: flex; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--ed-ink-dim);
  background: transparent;
}
.gn-ed-legend__title {
  font-family: 'Inter', sans-serif; font-style: italic;
  color: var(--ed-ink-faint); font-size: 12.5px; margin-right: 8px;
}
.gn-ed-legend__item {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', SFMono-Regular, monospace; font-size: 11.5px;
  letter-spacing: .4px; color: var(--ed-ink-dim);
}

/* ── sidecard ────────────────────────────────────────────────── */
.gn-ed-sidecard {
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px 22px 18px;
  background: rgba(13,13,34,0.55);
  border: 1px solid var(--ed-rule);
  border-radius: var(--ed-radius);
  position: sticky; top: 88px;
}
@media (max-width: 1100px) { .gn-ed-sidecard { position: static; } }

.gn-ed-upnext {
  display: block; text-decoration: none; color: inherit;
  padding: 18px;
  background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(34,211,238,.06));
  border: 1px solid rgba(139,92,246,.30);
  border-radius: var(--ed-radius-sm);
  position: relative; overflow: hidden;
  transition: transform 280ms var(--ed-ease-out), box-shadow 280ms var(--ed-ease-out), border-color 280ms;
}
.gn-ed-upnext::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 60% at 100% 0%, rgba(34,211,238,.12), transparent 60%);
}
.gn-ed-upnext:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -20px rgba(139,92,246,.65);
  border-color: rgba(139,92,246,.55);
  color: inherit;
}
.gn-ed-upnext__kicker {
  font-size: 10.5px; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--ed-cyan); font-weight: 700; margin-bottom: 8px;
}
.gn-ed-upnext__title {
  font-family: 'Poppins', 'Inter', sans-serif; font-weight: 700;
  font-size: 21px; line-height: 1.2; letter-spacing: -.3px;
  color: var(--ed-ink); margin: 0 0 10px;
}
.gn-ed-upnext__caption {
  font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px;
  line-height: 1.55; color: var(--ed-ink-dim); margin: 0 0 14px;
}
.gn-ed-upnext__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ed-ink);
  letter-spacing: 1.5px; text-transform: uppercase;
  border-top: 1px dashed var(--ed-rule); padding-top: 12px;
}
.gn-ed-upnext__cta .bi-arrow-right { transition: transform 280ms var(--ed-ease-out); }
.gn-ed-upnext:hover .gn-ed-upnext__cta .bi-arrow-right { transform: translateX(4px); }
.gn-ed-upnext--empty { background: rgba(255,255,255,.02); border-color: var(--ed-rule); }

.gn-ed-drill {
  display: block; text-decoration: none; color: inherit;
  padding: 14px 16px; border-radius: var(--ed-radius-sm);
  background: linear-gradient(180deg, rgba(245,200,117,.10), rgba(245,200,117,.02));
  border: 1px solid rgba(245,200,117,.28);
  transition: transform 240ms var(--ed-ease-out), border-color 240ms;
}
.gn-ed-drill:hover { transform: translateY(-1px); border-color: rgba(245,200,117,.55); color: inherit; }
.gn-ed-drill__kicker {
  font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--ed-gold); font-weight: 700; margin-bottom: 6px;
}
.gn-ed-drill__title {
  font-family: 'Poppins', 'Inter', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--ed-ink); line-height: 1.3;
}
.gn-ed-drill__meta { font-size: 11.5px; color: var(--ed-ink-faint); margin-top: 4px; font-family: 'JetBrains Mono', SFMono-Regular, monospace; letter-spacing: .4px; }
.gn-ed-drill--ghost { background: rgba(255,255,255,.02); border-color: var(--ed-rule); }
.gn-ed-drill--ghost .gn-ed-drill__kicker { color: var(--ed-ink-faint); }

.gn-ed-cohort {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 0; font-size: 12.5px; color: var(--ed-ink-faint);
  font-family: 'Inter', sans-serif; font-style: italic;
  border-top: 1px solid var(--ed-rule); padding-top: 14px;
}
.gn-ed-cohort .bi { color: var(--ed-cyan); }

/* ── branch index ────────────────────────────────────────────── */
.gn-ed-index { /* no entrance animation — perf */ }

.gn-ed-index__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.gn-ed-index__card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--ed-rule);
  border-radius: var(--ed-radius-sm);
  position: relative; overflow: hidden;
  transition: transform 280ms var(--ed-ease-out),
              border-color 280ms,
              box-shadow 280ms;
}
.gn-ed-index__card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--ed-grad); opacity: 0; transition: opacity 280ms;
}
.gn-ed-index__card:hover {
  transform: translateY(-3px); color: inherit;
  border-color: var(--ed-rule-hi);
  box-shadow: 0 22px 40px -28px rgba(0,0,0,.7);
}
.gn-ed-index__card:hover::before { opacity: 1; }

.gn-ed-index__card--active        { border-color: rgba(52,211,153,.36); }
.gn-ed-index__card--active::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--ed-green); opacity: .55; }
.gn-ed-index__card--expiring      { border-color: rgba(251,191,36,.42); }
.gn-ed-index__card--critical      { border-color: rgba(239,68,68,.48); background: linear-gradient(135deg, rgba(239,68,68,.07), rgba(255,255,255,.01)); }
.gn-ed-index__card--available     { border-color: rgba(167,139,250,.36); }
.gn-ed-index__card--locked        { opacity: .55; }
.gn-ed-index__card--locked:hover  { transform: none; box-shadow: none; }
.gn-ed-index__card--coming_soon          { border-color: rgba(34,211,238,.30); background: linear-gradient(135deg, rgba(34,211,238,.04), rgba(167,139,250,.03)); }
.gn-ed-index__card--coming_soon::after   { content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
                                            background: linear-gradient(90deg, rgba(34,211,238,.0), rgba(34,211,238,.55), rgba(34,211,238,.0)); opacity: .9; }
.gn-ed-index__statelabel--soon           { color: var(--ed-cyan) !important; }

.gn-ed-index__head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.gn-ed-index__icon {
  width: 38px; height: 38px; border-radius: 12px;
  display: inline-grid; place-items: center;
  background: rgba(139,92,246,.14); color: var(--ed-violet);
  font-size: 18px; border: 1px solid rgba(139,92,246,.28);
}
.gn-ed-index__card--active   .gn-ed-index__icon { background: rgba(52,211,153,.14);  color: var(--ed-green);  border-color: rgba(52,211,153,.35); }
.gn-ed-index__card--expiring .gn-ed-index__icon { background: rgba(251,191,36,.14); color: var(--ed-amber);  border-color: rgba(251,191,36,.35); }
.gn-ed-index__card--critical .gn-ed-index__icon { background: rgba(239,68,68,.14);  color: var(--ed-red);    border-color: rgba(239,68,68,.45); }
.gn-ed-index__card--locked   .gn-ed-index__icon { background: rgba(255,255,255,.04); color: var(--ed-ink-faint); border-color: var(--ed-rule); }

.gn-ed-index__title {
  font-family: 'Poppins', 'Inter', sans-serif; font-weight: 700; font-size: 16px;
  letter-spacing: -.1px; color: var(--ed-ink);
}
.gn-ed-index__sub { font-size: 11.5px; color: var(--ed-ink-faint); letter-spacing: .4px; margin-top: 2px; }
.gn-ed-index__state { font-size: 18px; color: var(--ed-ink-dim); }
.gn-ed-index__card--active   .gn-ed-index__state { color: var(--ed-green); }
.gn-ed-index__card--expiring .gn-ed-index__state { color: var(--ed-amber); }
.gn-ed-index__card--critical .gn-ed-index__state { color: var(--ed-red); animation: gn-ed-pulse-soft 1.8s ease-in-out infinite; }
.gn-ed-index__card--available .gn-ed-index__state { color: var(--ed-cyan); }

.gn-ed-index__ladder {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; padding-top: 4px;
}
.gn-ed-index__rung {
  text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  padding: 5px 0; border-radius: 6px;
  background: rgba(255,255,255,.025); border: 1px solid var(--ed-rule);
  color: var(--ed-ink-faint); letter-spacing: .5px;
}
.gn-ed-index__rung.is-held {
  background: linear-gradient(135deg, rgba(52,211,153,.22), rgba(52,211,153,.06));
  border-color: rgba(52,211,153,.55);
  color: var(--ed-green);
  box-shadow: 0 0 12px -4px rgba(52,211,153,.45);
}

.gn-ed-index__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  border-top: 1px dashed var(--ed-rule); padding-top: 12px;
  font-size: 12.5px; color: var(--ed-ink-dim);
}
.gn-ed-index__statelabel { color: var(--ed-ink); font-family: 'Poppins', 'Inter', sans-serif; font-weight: 600; font-size: 12.5px; }
.gn-ed-index__statelabel--amber { color: var(--ed-amber); }
.gn-ed-index__statelabel--red   { color: var(--ed-red); }
.gn-ed-index__statelabel--ready { color: var(--ed-cyan); }
.gn-ed-index__next {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ed-violet); font-weight: 600;
}

/* ── footer pull-quote ──────────────────────────────────────── */
.gn-ed-footer {
  margin-top: 64px; padding: 36px 0 18px;
  text-align: center; position: relative;
}
.gn-ed-footer__rule {
  display: block; width: 60px; height: 1px; background: var(--ed-grad);
  margin: 0 auto 24px; opacity: .8;
}
.gn-ed-footer__quote {
  font-family: 'Inter', sans-serif; font-style: italic; font-weight: 400;
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55;
  max-width: 64ch; margin: 0 auto; color: var(--ed-ink-dim);
}
.gn-ed-footer__attrib {
  font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ed-ink-faint); font-weight: 600; margin: 14px 0 0;
}

/* ── premium motion: keyframes + path-lit hover ─────────────── */
@keyframes gn-ed-fade-up {
  from { opacity: 0; transform: translate3d(0,14px,0); }
  to   { opacity: 1; transform: translate3d(0,0,0); }
}

/* Path-lit hover — when any hex is focused, the spoke from root
   to that hex glows.  Hooks into the existing class .is-active on
   spokes when a sibling is in focus.  Pure CSS via :hover-within
   doesn't exist yet, so we fall back to existing JS-set classes. */
.gn-tree-svg.gn-tree-svg--focus .gn-spokes line { opacity: .12; transition: opacity 240ms; }
.gn-tree-svg.gn-tree-svg--focus .gn-spokes line.is-active { opacity: .65; }

/* Soften the entire tree backdrop in focus so the focused branch
   reads as the only thing on the page. */
.gn-tree-svg.gn-tree-svg--focus .gn-ed-tier-ring { opacity: .25; transition: opacity 240ms; }

/* Hex hover styling is owned by the base block above (the
   stronger drop-shadow + 3.4 px stroke).  We intentionally do
   NOT add transform/scale here —  feedback said the
   lift felt heavy.  Pure visual highlight wins. */

/* ── reduced-motion respect ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gn-ed-aurora__blob,
  .gn-ed-hero,
  .gn-ed-strip,
  .gn-ed-frame,
  .gn-ed-sidecard,
  .gn-ed-index,
  .gn-ed-banner--critical,
  .gn-ed-index__card--critical .gn-ed-index__state,
  .gn-tree-wrap::before { animation: none !important; }
  .gn-ed-upnext { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   mobile / tablet responsive rules for the skill tree.
   The radial SVG is drawn at 1040×640 with absolute hex coordinates
   from compute_tree.  On viewports < ~900px it scales down so far
   the hex labels become illegible and the foreignObject tooltips
   overflow horizontally.

   Strategy:
     • ≥ 900px : show the full radial SVG (desktop / large tablet)
     • 600-899px : compact the SVG (smaller text, hide tooltips,
                   hide tier-key strip, shrink decorative ticks)
     • < 600px : HIDE the SVG entirely; the Branch Index card grid
                 below is already mobile-friendly and serves as the
                 actual navigation surface.  We surface a small
                 "compact" tree-state legend in its place so the
                 user still sees the radial map's overall colour at
                 a glance.
   ══════════════════════════════════════════════════════════════ */

/* Tablets — compact the SVG so it still fits, but kill on-hover
   tooltips (mobile/tablet has no hover-with-pointer) and the
   spinning tier rings which dominate small screens. */
@media (max-width: 900px) {
  .gn-tree-wrap, .gn-ed-tree-wrap {
    padding: 10px 6px 14px;
    border-radius: var(--gn-r-md);
  }
  /* Smaller hex / root labels — the SVG's intrinsic text sizes
     don't scale with viewBox shrink because the SVG renders the
     text in user units, so we override via CSS-attribute on the
     <text> elements (works in modern browsers — Safari/Chrome/FF). */
  .gn-tree-svg text { font-size: 9px; }
  .gn-tree-svg .gn-hex--root text[y="-18"] { font-size: 8px; letter-spacing: 1.5px; }
  /* Hide the radial tier rings + ticks + starfield; the cards
     below carry the same information without the visual noise. */
  .gn-ed-tier-rings .gn-ed-ticks,
  .gn-ed-tier-rings .gn-ed-stars { display: none; }
  /* Hide the on-hover tooltips on touch — there's no hover, and
     when shown they overlap the next hex unpleasantly. */
  .gn-hex-tip { display: none !important; }
  /* The tier-key strip above the SVG eats horizontal room on
     small viewports — collapse it into a horizontal pill row. */
  .gn-ed-tier-key {
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 10.5px;
  }
}

/* Phones — hide the radial entirely.  The Branch Index card grid
   IS the mobile UI.  We replace the SVG with a small "tap below to
   navigate" hint so the user knows where to scroll. */
@media (max-width: 600px) {
  .gn-tree-wrap, .gn-ed-tree-wrap { display: none; }
  .gn-ed-frame__eyebrow .gn-ed-frame__hint { display: none; }
  /* When the tree is hidden, the editorial stage's right-side
     sidecard (Up Next + drill + cohort whisper) should fill the
     row instead of being squeezed at the bottom. */
  .gn-ed-stage { grid-template-columns: 1fr !important; gap: 18px; }
  .gn-ed-sidecard { position: static; }
  /* Show a tiny inline pointer to the cards below. */
  .gn-ed-stage::after {
    content: "↓ Tap a branch below to begin.";
    grid-column: 1 / -1;
    display: block;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: var(--gn-muted);
    padding: 8px 12px;
    border: 1px dashed rgba(167,139,250,.35);
    border-radius: var(--gn-r-md);
    background: rgba(15,12,40,.4);
  }
  /* Branch Index grid — single column on phones for thumb-reach. */
  .gn-ed-index__grid { grid-template-columns: 1fr !important; }
  .gn-ed-index__card { padding: 14px 12px; }
  /* Editorial masthead — let "Vol. / Issue" wrap rather than push
     the page title off-screen on a 320px phone. */
  .gn-ed-masthead { flex-wrap: wrap; gap: 6px; }
  .gn-ed-mast-rule { display: none; }
  /* Hero display — pull the size down so it doesn't break the
     two-word "Your map. Your moat." line awkwardly. */
  .gn-ed-display { font-size: 34px !important; line-height: 1.05 !important; }
  /* Credentials strip — stack into a 2-column tight grid instead
     of the desktop's 4-across with hairline dividers. */
  .gn-ed-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .gn-ed-strip__div { display: none; }
  .gn-ed-strip__stat { padding: 10px 8px; }
}

/* Extra-narrow phones (≤ 380px) — tighten everything a touch more
   so iPhone SE-class devices don't break the page. */
@media (max-width: 380px) {
  .gn-ed-display { font-size: 28px !important; }
  .gn-ed-strip__num { font-size: 22px !important; }
  .gn-ed-index__card { padding: 12px 10px; }
}


/* ════════════════════════════════════════════════════════════════════
 * v6 skill-tree (2026-05-20) — stratified two-ring + thematic sectors
 * ════════════════════════════════════════════════════════════════════
 *
 * Previous radial design overlapped at >12 branches.  v6:
 *   - 8 inner branches at radius 245
 *   - 7 outer branches at radius 345
 *   - 4 thematic sector labels at the cardinal points (N/E/S/W)
 *
 * These rules ride on top of the existing gn-hex / gn-tree-svg
 * machinery; we only add what's NEW.
 */

/* Sector labels — small, monospaced, rim-anchored.  Faint by default;
   the hovered hex's own sector subtly lifts (handled by JS adding
   .is-active to the matching .gn-ed-sector). */
.gn-ed-sector__label {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 3.2px;
  fill: rgba(167, 139, 250, 0.55);
  font-weight: 600;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: rgba(13, 13, 34, 0.7);
  stroke-width: 3px;
  transition: fill 200ms ease, letter-spacing 200ms ease;
}
.gn-ed-sector.is-active .gn-ed-sector__label {
  fill: #22d3ee;
  letter-spacing: 4px;
}

/* Outer-ring hexes get a slightly thicker stroke + a subtle bloom
   so the visual hierarchy (frontier domains visually heavier) reads. */
.gn-hex--ring-outer .gn-hex-poly {
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.10));
}
.gn-hex--ring-inner .gn-hex-poly {
  stroke-width: 2;
}

/* Sub-text inside hexes — let it wrap to 2 lines if the title is
   long ("Banking & Off-Ramp", "NFTs & Collectibles") so the right
   half of the hex doesn't run into the rim. */
.gn-hex text {
  pointer-events: none;
}

/* When the user hovers ANY hex on the inner ring, dim the outer ring
   slightly so the focus story reads — and vice-versa.  Subtle. */
.gn-tree-svg--focus .gn-hex-group:not(:hover):not(:focus-within) .gn-hex {
  opacity: 0.55;
}
.gn-tree-svg--focus .gn-hex-group:hover .gn-hex,
.gn-tree-svg--focus .gn-hex-group:focus-within .gn-hex {
  opacity: 1;
}

/* The hex polygon stroke gets a state-specific colour even on the
   outer ring (legacy CSS may have been targeting only inner).  Make
   sure the gradient inherits cleanly. */
.gn-hex--ring-outer.gn-hex--active .gn-hex-poly {
  stroke: url(#gn-tree-grad);
}
.gn-hex--ring-outer.gn-hex--available .gn-hex-poly {
  stroke: rgba(167, 139, 250, 0.45);
}

/* v6 outer-ring tier dots — bump them 4px so they don't get clipped
   by the slightly thicker outer-ring polygon stroke. */
.gn-hex--ring-outer .gn-hex-tiers {
  transform: translate(0, 30px);
}

/* On very narrow viewports, give the canvas a min-height so the new
   1200×760 viewBox doesn't squash into a postage-stamp tree. */
@media (max-width: 1100px) {
  .gn-tree-svg, .gn-ed-tier-rings {
    min-height: 520px;
  }
}
@media (max-width: 760px) {
  .gn-tree-svg, .gn-ed-tier-rings {
    min-height: 420px;
  }
  /* Sector labels would collide with rim hexes on phones — hide them. */
  .gn-ed-sector__label { display: none; }
}