/* ==========================================================================
   STRYKER TRADING ACADEMY — Design System
   Palette: deep terminal navy + Stryker gold + institutional teal
   Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (data)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* surfaces — charcoal/slate (image 2) */
  --bg-0:#1b1f26;          /* deepest background */
  --bg-1:#222831;          /* page background */
  --bg-2:#2a303b;          /* card surface */
  --bg-3:#393e46;          /* raised surface / hover */
  --line:#3e4550;          /* hairline border */
  --line-soft:#2b313b;

  /* text — light gray (image 2) */
  --ink-0:#eeeeee;         /* headings */
  --ink-1:#c9cdd3;         /* type wireframe */
  --ink-2:#8b93a0;         /* muted */
  --ink-3:#5c6472;         /* faint */

  /* brand — mint green primary (image 1), cyan secondary (image 2) */
  --gold:#03c988;
  --gold-bright:#4fe3ac;
  --gold-dim:#027a54;
  --teal:#00adb5;
  --teal-dim:#067b81;

  /* decorative depth accents — indigo/royal blue (image 1), used sparingly
     in hero/parallax glows for a layered, non-flat background */
  --indigo:#13005a;
  --royal-blue:#00337c;

  /* market data — used only for actual price-action context. Bull ties to
     the new mint accent; bear stays a conventional red since neither
     source palette included one and the up/down convention matters for
     comprehension on trading charts. */
  --bull:#03c988;
  --bear:#e5484d;

  /* type scale */
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;

  --shadow-card: 0 8px 30px -12px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px rgba(3,201,136,0.15), 0 8px 40px -10px rgba(3,201,136,0.18);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg-1);
  color:var(--ink-1);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

::selection{ background:var(--gold-dim); color:var(--ink-0); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:640px){ .container{ padding:0 20px; } }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:16px; height:1px;
  background:var(--gold);
  display:inline-block;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink-0);
  margin:0;
  font-weight:600;
  letter-spacing:-0.01em;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 24px;
  border-radius:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14.5px;
  border:1px solid transparent;
  transition:all .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#1a1305;
  box-shadow:0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 24px -10px rgba(3,201,136,0.55);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 14px 28px -10px rgba(3,201,136,0.7); }
.btn-ghost{
  background:transparent;
  color:var(--ink-0);
  border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--gold-dim); background:rgba(3,201,136,0.06); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:13px; }

/* ---------------- NAV ---------------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(10,13,19,0.78);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px;
  max-width:1240px; margin:0 auto;
}
.brand{ display:flex; align-items:center; }
.brand-mark{
  height:44px; width:auto;
  object-fit:contain;
  flex-shrink:0;
}
@media (max-width:640px){ .brand-mark{ height:36px; } }
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink-0); letter-spacing:-0.01em; }
.brand-name span{ color:var(--gold); }

.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{
  font-size:14px; color:var(--ink-2); font-weight:500;
  transition:color .15s ease; position:relative;
}
.nav-links a:hover{ color:var(--ink-0); }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-toggle{ display:none; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; background:none; border:1px solid var(--line); color:var(--ink-0); padding:8px 10px; border-radius:6px; }
}

/* ---------------- HERO ---------------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:104px 0 80px;
  border-bottom:1px solid var(--line-soft);
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(3,201,136,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3,201,136,0.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, black, transparent);
  will-change:transform;
}
.hero-glow{
  position:absolute; top:-200px; right:-160px;
  width:640px; height:640px;
  background:radial-gradient(circle, rgba(3,201,136,0.16), rgba(0,51,124,0.12) 45%, transparent 70%);
  filter:blur(10px);
  will-change:transform;
}
.hero-glow-indigo{
  position:absolute; bottom:-160px; left:-140px;
  width:520px; height:520px;
  background:radial-gradient(circle, rgba(19,0,90,0.35), transparent 68%);
  filter:blur(14px);
  will-change:transform;
}
.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
@media (max-width:960px){ .hero-inner{ grid-template-columns:1fr; } }

.hero-copy h1{
  font-size:clamp(34px,4.6vw,56px);
  line-height:1.05;
  margin:18px 0 20px;
}
.hero-copy h1 em{
  font-style:normal; color:var(--gold);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-copy p{ font-size:17px; color:var(--ink-2); max-width:520px; margin-bottom:32px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }

.hero-stats{ display:flex; gap:36px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-mono); font-size:22px; color:var(--ink-0); }
.hero-stat span{ font-size:12.5px; color:var(--ink-3); }

/* --- Signature: annotated market-structure chart --- */
.chart-card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.chart-card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line-soft);
  font-family:var(--font-mono); font-size:12px; color:var(--ink-2);
}
.chart-card-head .pair{ color:var(--ink-0); font-weight:600; }
.chart-dots{ display:flex; gap:6px; }
.chart-dots span{ width:8px; height:8px; border-radius:50%; background:var(--line); }
.chart-svg-wrap{ padding:8px 6px 4px; }
.chart-legend{
  display:flex; gap:18px; flex-wrap:wrap;
  padding:12px 18px 16px; border-top:1px solid var(--line-soft);
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3);
}
.chart-legend i{ width:10px; height:10px; display:inline-block; border-radius:2px; margin-right:6px; vertical-align:-1px; }

/* candle drawing animation */
.candle{ transform-origin:center bottom; animation:rise .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise{ from{ transform:scaleY(0); opacity:0; } to{ transform:scaleY(1); opacity:1; } }
.draw-path{
  stroke-dasharray:900; stroke-dashoffset:900;
  animation:draw 2.1s ease forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.tag-pop{ opacity:0; animation:pop .5s ease forwards; }
@keyframes pop{ to{ opacity:1; } }

/* ---------------- SECTIONS ---------------- */
section{ padding:96px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(26px,3vw,38px); margin:16px 0 14px; line-height:1.15; }
.section-head p{ color:var(--ink-2); font-size:16px; }
.divider{ border-top:1px solid var(--line-soft); }

/* parallax band */
.parallax-band{
  position:relative;
  padding:120px 0;
  overflow:hidden;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:var(--bg-0);
}
.parallax-layer{
  position:absolute; inset:-10% -10%;
  background-repeat:repeat;
  will-change:transform;
}
.pl-1{ opacity:0.5; background-image:radial-gradient(1px 1px at 20px 30px, rgba(3,201,136,0.35) 1px, transparent 0); background-size:120px 120px; }
.pl-2{ opacity:0.35; background-image:radial-gradient(1px 1px at 60px 80px, rgba(0,173,181,0.3) 1px, transparent 0); background-size:180px 180px; }
.pl-3{ opacity:0.6; background:linear-gradient(180deg, transparent, rgba(0,0,0,0.4)); }

.band-content{ position:relative; z-index:2; text-align:center; }
.band-content .eyebrow{ justify-content:center; }
.band-content h2{ font-size:clamp(28px,4vw,44px); margin:16px auto 18px; max-width:760px; }
.band-content p{ color:var(--ink-2); max-width:600px; margin:0 auto; font-size:16.5px; }

/* feature grid */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .feature-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .feature-grid{ grid-template-columns:1fr; } }
.feature-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px 24px; transition:transform .2s ease, border-color .2s ease;
}
.feature-card:hover{ transform:translateY(-3px); border-color:var(--gold-dim); }
.feature-icon{
  width:42px; height:42px; border-radius:9px;
  background:rgba(3,201,136,0.12); border:1px solid rgba(3,201,136,0.25);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  color:var(--gold);
}
.feature-card h3{ font-size:17px; margin-bottom:8px; }
.feature-card p{ font-size:14.5px; color:var(--ink-2); }

/* concept cards (ICT / SMT glossary) */
.concept-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:960px){ .concept-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .concept-grid{ grid-template-columns:1fr; } }
.concept-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:20px; position:relative; overflow:hidden;
}
.concept-card .abbr{ font-family:var(--font-mono); color:var(--teal); font-size:12px; letter-spacing:0.08em; }
.concept-card h4{ font-size:15.5px; margin:8px 0 6px; color:var(--ink-0); }
.concept-card p{ font-size:13.5px; color:var(--ink-2); margin:0; }

/* curriculum / chapters */
.level-tabs{ display:flex; gap:10px; margin-bottom:32px; flex-wrap:wrap; }
.level-tab{
  padding:9px 18px; border-radius:20px; border:1px solid var(--line);
  font-size:13.5px; color:var(--ink-2); font-weight:600; background:transparent;
  transition:all .15s ease;
}
.level-tab.active, .level-tab:hover{ background:rgba(3,201,136,0.1); border-color:var(--gold-dim); color:var(--gold-bright); }

.chapter-list{ display:flex; flex-direction:column; gap:14px; }
.chapter{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:22px 24px; transition:border-color .2s ease, background .2s ease;
}
.chapter:hover{ border-color:var(--gold-dim); background:var(--bg-3); }
.chapter-num{
  font-family:var(--font-mono); font-size:13px; color:var(--gold);
  width:44px; height:44px; border:1px solid var(--line); border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.chapter-body h3{ font-size:16.5px; margin-bottom:6px; }
.chapter-body p{ font-size:13.5px; color:var(--ink-2); margin-bottom:10px; }
.chapter-meta{ display:flex; gap:14px; flex-wrap:wrap; }
.chapter-meta span{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); }
.chapter-tag{
  display:inline-block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.06em;
  padding:3px 8px; border-radius:4px; text-transform:uppercase;
}
.tag-foundation{ background:rgba(0,173,181,0.12); color:var(--teal); }
.tag-intermediate{ background:rgba(3,201,136,0.12); color:var(--gold); }
.tag-advanced{ background:rgba(229,72,77,0.12); color:#f08488; }
.chapter-status{ display:flex; align-items:center; gap:10px; }
.status-pill{
  font-family:var(--font-mono); font-size:11px; padding:5px 10px; border-radius:6px; border:1px solid var(--line);
  color:var(--ink-3);
}
.status-pill.unlocked{ color:var(--bull); border-color:rgba(47,191,143,0.3); }
.status-pill.locked{ color:var(--ink-3); }

/* progress bar */
.progress-track{ height:6px; background:var(--line); border-radius:6px; overflow:hidden; }
.progress-fill{ height:100%; background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright)); border-radius:6px; }

/* testimonials */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; }
.testi-card p{ font-size:14.5px; color:var(--ink-1); margin-bottom:20px; }
.testi-who{ display:flex; align-items:center; gap:12px; }
.testi-avatar{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-dim)); }
.testi-who b{ font-size:13.5px; color:var(--ink-0); display:block; }
.testi-who span{ font-size:12px; color:var(--ink-3); }

/* pricing */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } }
.price-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 28px; display:flex; flex-direction:column; }
.price-card.featured{ border-color:var(--gold-dim); box-shadow:var(--shadow-glow); position:relative; }
.price-card.featured::before{
  content:'MOST CHOSEN'; position:absolute; top:-11px; left:28px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em;
  background:var(--gold); color:#1a1305; padding:4px 10px; border-radius:20px; font-weight:700;
}
.price-card h3{ font-size:16px; color:var(--ink-2); font-weight:600; margin-bottom:6px; }
.price-amt{ font-family:var(--font-display); font-size:38px; color:var(--ink-0); margin-bottom:4px; }
.price-amt span{ font-size:14px; color:var(--ink-3); font-family:var(--font-body); }
.price-card ul{ margin:24px 0 28px; display:flex; flex-direction:column; gap:12px; }
.price-card li{ font-size:13.5px; color:var(--ink-1); display:flex; gap:10px; align-items:flex-start; }
.price-card li svg{ flex-shrink:0; margin-top:2px; color:var(--teal); }

/* footer */
footer{ border-top:1px solid var(--line-soft); padding:56px 0 32px; background:var(--bg-0); }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; margin-bottom:48px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h5{ font-size:12.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px; font-family:var(--font-mono); font-weight:600; }
.footer-grid a{ display:block; font-size:14px; color:var(--ink-2); margin-bottom:10px; transition:color .15s ease; }
.footer-grid a:hover{ color:var(--gold); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--line-soft); font-size:13px; color:var(--ink-3); flex-wrap:wrap; gap:12px; }
.risk-disclaimer{ font-size:12px; color:var(--ink-3); max-width:640px; line-height:1.7; margin-top:18px; }

/* ==========================================================================
   AUTH PAGES
   ========================================================================== */
.auth-shell{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .auth-shell{ grid-template-columns:1fr; } }
.auth-visual{
  position:relative; background:var(--bg-0);
  border-right:1px solid var(--line-soft);
  padding:48px; display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
}
@media (max-width:900px){ .auth-visual{ display:none; } }
.auth-visual-quote{ position:relative; z-index:2; max-width:420px; }
.auth-visual-quote p{ font-family:var(--font-display); font-size:22px; color:var(--ink-0); line-height:1.4; }
.auth-visual-quote span{ font-size:13px; color:var(--ink-3); margin-top:14px; display:block; font-family:var(--font-mono); }

.auth-side{ display:flex; align-items:center; justify-content:center; padding:40px; }
.auth-box{ width:100%; max-width:400px; }
.auth-box h1{ font-size:26px; margin:6px 0 8px; }
.auth-box > p{ color:var(--ink-2); font-size:14.5px; margin-bottom:28px; }

.social-row{ display:flex; gap:10px; margin-bottom:22px; }
.social-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:11px; border-radius:8px; border:1px solid var(--line); background:var(--bg-2);
  font-size:13px; font-weight:600; color:var(--ink-1); transition:all .15s ease;
}
.social-btn:hover{ background:var(--bg-3); border-color:var(--ink-3); }

.or-divider{ display:flex; align-items:center; gap:14px; margin:22px 0; }
.or-divider::before,.or-divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.or-divider span{ font-size:11.5px; color:var(--ink-3); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.08em; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; color:var(--ink-1); margin-bottom:7px; font-weight:500; }
.field input{
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg-2); color:var(--ink-0); font-size:14px; transition:border-color .15s ease;
}
.field input:focus{ border-color:var(--gold-dim); outline:none; }
.field-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.field-row label{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); }
.field-row a{ font-size:13px; color:var(--gold); }

.auth-switch{ text-align:center; margin-top:24px; font-size:13.5px; color:var(--ink-2); }
.auth-switch a{ color:var(--gold); font-weight:600; }

.role-toggle{ display:flex; gap:8px; margin-bottom:24px; background:var(--bg-2); border:1px solid var(--line); border-radius:9px; padding:4px; }
.role-toggle button{ flex:1; padding:9px; border-radius:6px; border:none; background:transparent; color:var(--ink-2); font-size:13px; font-weight:600; }
.role-toggle button.active{ background:var(--gold); color:#1a1305; }

/* ==========================================================================
   DASHBOARD SHELL (shared by user + admin)
   ========================================================================== */
.dash-shell{ display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
@media (max-width:900px){ .dash-shell{ grid-template-columns:1fr; } }

.sidebar{
  background:var(--bg-0); border-right:1px solid var(--line-soft);
  padding:22px 18px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
@media (max-width:900px){
  .sidebar{
    display:flex;
    position:fixed; top:0; left:0; height:100vh; width:280px; max-width:82vw;
    z-index:200; transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:20px 0 40px -20px rgba(0,0,0,0.6);
  }
  .sidebar.mobile-open{ transform:translateX(0); }
}
.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:190;
}
.sidebar-backdrop.visible{ display:block; }
.mobile-signout-btn{ color:var(--ink-2); }
.mobile-signout-btn:hover{ color:var(--bear); border-color:var(--bear); }
.sidebar .brand{ padding:8px 8px 26px; }
.side-section{ margin-bottom:8px; }
.side-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); padding:14px 12px 8px; }
.side-link{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px;
  font-size:14px; color:var(--ink-2); font-weight:500; margin-bottom:2px; transition:all .15s ease;
}
.side-link:hover{ background:var(--bg-2); color:var(--ink-0); }
.side-link.active{ background:rgba(3,201,136,0.1); color:var(--gold-bright); }
.side-link svg{ flex-shrink:0; }
.sidebar-foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft); }
.user-chip{ display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:8px; }
.user-chip:hover{ background:var(--bg-2); }
.chip-avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--gold-bright),var(--gold-dim)); flex-shrink:0; }
.chip-name{ font-size:13px; color:var(--ink-0); font-weight:600; }
.chip-role{ font-size:11.5px; color:var(--ink-3); }

.dash-main{ padding:28px 34px 60px; max-width:1180px; }
@media (max-width:640px){ .dash-main{ padding:20px; } }
.dash-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; flex-wrap:wrap; gap:16px; }
.dash-topbar h1{ font-size:23px; }
.dash-topbar p{ color:var(--ink-2); font-size:13.5px; margin-top:4px; }

.mobile-topnav{ display:none; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line-soft); background:var(--bg-0); position:sticky; top:0; z-index:50; }
@media (max-width:900px){ .mobile-topnav{ display:flex; } }

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:34px; }
@media (max-width:960px){ .stat-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .stat-grid{ grid-template-columns:1fr; } }
.stat-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; }
.stat-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.stat-icon{ width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(3,201,136,0.1); color:var(--gold); }
.stat-delta{ font-family:var(--font-mono); font-size:11.5px; padding:3px 7px; border-radius:5px; }
.stat-delta.up{ color:var(--bull); background:rgba(47,191,143,0.1); }
.stat-delta.down{ color:var(--bear); background:rgba(229,72,77,0.1); }
.stat-val{ font-family:var(--font-mono); font-size:26px; color:var(--ink-0); margin-bottom:4px; }
.stat-label{ font-size:12.5px; color:var(--ink-3); }

.panel{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; margin-bottom:22px; }
.panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.panel-head h2{ font-size:16.5px; }
.panel-head a{ font-size:13px; color:var(--gold); font-weight:600; }

.continue-row{ display:flex; align-items:center; gap:16px; padding:14px; border-radius:10px; transition:background .15s ease; }
.continue-row:hover{ background:var(--bg-3); }
.continue-thumb{ width:56px; height:56px; border-radius:8px; flex-shrink:0; background:linear-gradient(135deg,var(--teal-dim),var(--bg-3)); display:flex; align-items:center; justify-content:center; color:var(--teal); font-family:var(--font-mono); font-size:12px; border:1px solid var(--line); }
.continue-body{ flex:1; }
.continue-body h4{ font-size:14.5px; color:var(--ink-0); margin-bottom:6px; font-weight:600; }
.continue-body .progress-track{ max-width:260px; }
.continue-meta{ font-size:12px; color:var(--ink-3); font-family:var(--font-mono); margin-top:6px; }

.two-col{ display:grid; grid-template-columns:1.6fr 1fr; gap:22px; }
@media (max-width:960px){ .two-col{ grid-template-columns:1fr; } }

/* Two-field form rows (date+instrument, direction+outcome, etc.) — always
   collapses to a single column on narrow screens, unlike raw inline
   grid-template-columns which can't respond to a media query. */
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width:560px){ .form-row-2{ grid-template-columns:1fr; gap:0; } }
@media (max-width:560px){ .form-row-2 .field{ margin-bottom:16px; } }
@media (max-width:560px){ .form-row-2 .field:last-child{ margin-bottom:0; } }

/* 3-column stat row (admin analytics) — same collapse pattern as .stat-grid */
.stat-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:34px; }
@media (max-width:760px){ .stat-grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .stat-grid-3{ grid-template-columns:1fr; } }

/* Chapter content editor */
.chapter-edit-card{ border-top:1px solid var(--line-soft); padding-top:20px; margin-top:20px; }
.chapter-edit-card:first-child{ border-top:none; margin-top:0; padding-top:0; }
.lesson-edit-row{
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start;
  background:var(--bg-3); border:1px solid var(--line); border-radius:8px;
  padding:12px; margin-bottom:10px;
}
.lesson-edit-row .field{ flex:1 1 220px; margin-bottom:0; }
.lesson-edit-row .icon-btn{ flex-shrink:0; margin-top:24px; }
.textarea-field{
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg-2); color:var(--ink-0); font-size:14px; font-family:inherit; resize:vertical;
}

/* Rich text editor toolbar (chapter-editor.html) */
.rte-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  padding:8px; border:1px solid var(--line); border-bottom:none;
  border-radius:8px 8px 0 0; background:var(--bg-2);
}
.rte-btn{
  min-width:32px; height:32px; padding:0 10px; border-radius:6px; border:1px solid transparent;
  background:transparent; color:var(--ink-1); font-size:13px; font-family:var(--font-body);
  display:flex; align-items:center; justify-content:center; transition:all .15s ease;
}
.rte-btn:hover{ background:var(--bg-3); border-color:var(--line); }
.rte-btn.active{ background:rgba(3,201,136,0.14); border-color:var(--gold-dim); color:var(--gold-bright); }
.rte-sep{ width:1px; height:20px; background:var(--line); margin:0 4px; }
.rte-editable{
  min-height:280px; padding:16px; border:1px solid var(--line); border-radius:0 0 8px 8px;
  background:var(--bg-2); color:var(--ink-1); font-size:14.5px; line-height:1.75;
}
.rte-editable:focus{ outline:none; border-color:var(--gold-dim); }
.rte-editable p{ margin:0 0 14px; }
.rte-editable h3{ font-family:var(--font-display); color:var(--ink-0); font-size:17px; margin:18px 0 10px; }
.rte-editable ul, .rte-editable ol{ margin:0 0 14px; padding-left:22px; }
.rte-editable li{ margin-bottom:6px; }
.rte-editable:empty:before{ content:attr(data-placeholder); color:var(--ink-3); }

/* ==========================================================================
   TRADING FLOOR — post feed, reactions, replies, tags
   ========================================================================== */
.floor-post{
  padding:18px 0; border-bottom:1px solid var(--line-soft);
}
.floor-post:last-child{ border-bottom:none; }
.floor-post-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.floor-post-head .chip-avatar{ width:34px; height:34px; flex-shrink:0; }
.floor-post-name{ font-size:13.5px; font-weight:600; color:var(--ink-0); }
.floor-post-time{ font-size:11.5px; color:var(--ink-3); font-family:var(--font-mono); }
.floor-post-body{ font-size:14px; color:var(--ink-1); line-height:1.65; margin-bottom:10px; }
.floor-post-body p{ margin:0 0 8px; }
.floor-post-body p:last-child{ margin-bottom:0; }
.floor-post-image{ max-width:340px; width:100%; border-radius:10px; border:1px solid var(--line); margin-bottom:10px; display:block; }
.floor-tag{ color:var(--teal); font-weight:600; cursor:pointer; }
.floor-tag:hover{ text-decoration:underline; }

.floor-actions{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.floor-action-btn{
  display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:7px;
  border:1px solid transparent; background:transparent; color:var(--ink-3); font-size:12.5px;
  font-family:var(--font-mono); transition:all .15s ease;
}
.floor-action-btn:hover{ background:var(--bg-3); color:var(--ink-1); }
.floor-action-btn.active{ color:var(--gold-bright); background:rgba(3,201,136,0.1); border-color:rgba(3,201,136,0.25); }
.floor-action-btn.active.downvote-active{ color:#f08488; background:rgba(229,72,77,0.1); border-color:rgba(229,72,77,0.25); }
.floor-action-btn.active.bookmark-active{ color:var(--teal); background:rgba(0,173,181,0.1); border-color:rgba(0,173,181,0.25); }

.floor-replies{ margin-top:14px; padding-left:16px; border-left:2px solid var(--line-soft); display:none; }
.floor-replies.open{ display:block; }
.floor-reply{ padding:10px 0; border-bottom:1px solid var(--line-soft); }
.floor-reply:last-child{ border-bottom:none; }
.floor-reply-head{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.floor-reply-head .chip-avatar{ width:24px; height:24px; }
.floor-reply-name{ font-size:12.5px; font-weight:600; color:var(--ink-0); }
.floor-reply-time{ font-size:10.5px; color:var(--ink-3); font-family:var(--font-mono); }
.floor-reply-text{ font-size:13px; color:var(--ink-1); line-height:1.5; }
.floor-reply-input-row{ display:flex; gap:8px; margin-top:10px; }
.floor-reply-input-row input{
  flex:1; padding:8px 12px; border-radius:7px; border:1px solid var(--line);
  background:var(--bg-2); color:var(--ink-0); font-size:13px;
}

.tag-active-banner{
  display:flex; align-items:center; gap:10px; background:rgba(0,173,181,0.08);
  border:1px solid rgba(0,173,181,0.25); border-radius:8px; padding:10px 14px; margin-bottom:16px;
  font-size:13px; color:var(--ink-1);
}
.tag-active-banner button{ margin-left:auto; font-size:12px; color:var(--teal); background:none; border:none; }

.event-item{ display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.event-item:last-child{ border-bottom:none; }
.event-date{ font-family:var(--font-mono); font-size:11px; color:var(--gold); text-align:center; width:44px; flex-shrink:0; }
.event-date b{ display:block; font-size:17px; color:var(--ink-0); }
.event-body h4{ font-size:13.5px; color:var(--ink-0); font-weight:600; margin-bottom:3px; }
.event-body span{ font-size:12px; color:var(--ink-3); }

.badge-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:640px){ .badge-grid{ grid-template-columns:repeat(2,1fr); } }
.badge-item{ text-align:center; padding:16px 8px; border-radius:10px; border:1px solid var(--line); background:var(--bg-3); }
.badge-item.locked{ opacity:0.35; }
.badge-ic{ width:40px; height:40px; margin:0 auto 10px; border-radius:50%; background:rgba(3,201,136,0.12); border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; color:var(--gold); }
.badge-item span{ font-size:11px; color:var(--ink-2); }

/* table (admin) */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; min-width:640px; }
thead th{ text-align:left; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-3); padding:0 14px 12px; border-bottom:1px solid var(--line); font-weight:600; }
tbody td{ padding:14px; border-bottom:1px solid var(--line-soft); font-size:13.5px; color:var(--ink-1); }
tbody tr:hover{ background:var(--bg-3); }
.cell-user{ display:flex; align-items:center; gap:10px; }

/* Responsive student/record cards — used instead of a wide table so nothing
   requires horizontal scrolling on a phone screen. */
.record-card{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  padding:16px; border-bottom:1px solid var(--line-soft);
}
.record-card:last-child{ border-bottom:none; }
.record-card .cell-user{ flex:1 1 200px; min-width:180px; }
.record-stats{ display:flex; flex-wrap:wrap; gap:20px; flex:2 1 320px; }
.record-stat{ min-width:80px; }
.record-stat .rs-label{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-3); display:block; margin-bottom:3px; }
.record-stat .rs-val{ font-size:13.5px; color:var(--ink-0); font-weight:600; }
.cell-avatar{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-dim)); flex-shrink:0; }
.cell-name{ color:var(--ink-0); font-weight:600; display:block; }
.cell-sub{ color:var(--ink-3); font-size:12px; }
.status-tag{ font-family:var(--font-mono); font-size:11px; padding:4px 9px; border-radius:5px; }
.status-tag.active{ color:var(--bull); background:rgba(47,191,143,0.1); }
.status-tag.trial{ color:var(--gold); background:rgba(3,201,136,0.1); }
.status-tag.expired{ color:var(--bear); background:rgba(229,72,77,0.1); }
.row-actions{ display:flex; gap:8px; }
.icon-btn{ width:30px; height:30px; border-radius:6px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-2); background:transparent; }
.icon-btn:hover{ border-color:var(--gold-dim); color:var(--gold); }

.mini-bar-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.mini-bar-row .label{ width:110px; font-size:12.5px; color:var(--ink-2); flex-shrink:0; }
.mini-bar-track{ flex:1; height:8px; background:var(--line); border-radius:6px; overflow:hidden; }
.mini-bar-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,var(--teal-dim),var(--teal)); }
.mini-bar-val{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3); width:38px; text-align:right; }

/* Variant for longer labels (full chapter titles rather than short names) —
   wraps to two lines on desktop instead of overflowing, and stacks the
   label above the bar entirely once the screen is too narrow for both. */
.mini-bar-row.wide-label{ align-items:flex-start; }
.mini-bar-row.wide-label .label{ width:200px; line-height:1.4; padding-top:2px; }
.mini-bar-row.wide-label .mini-bar-track{ margin-top:6px; }
.mini-bar-row.wide-label .mini-bar-val{ padding-top:2px; }
@media (max-width:640px){
  .mini-bar-row.wide-label{ flex-wrap:wrap; }
  .mini-bar-row.wide-label .label{ width:100%; margin-bottom:6px; }
  .mini-bar-row.wide-label .mini-bar-track{ margin-top:0; flex:1 1 auto; }
}

.toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:14px; flex-wrap:wrap; }
.search-box{ display:flex; align-items:center; gap:10px; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:9px 14px; min-width:240px; }
.search-box input{ background:none; border:none; color:var(--ink-0); font-size:13.5px; width:100%; }
.search-box input:focus{ outline:none; }
.search-box svg{ color:var(--ink-3); flex-shrink:0; }

.tabs-underline{ display:flex; gap:26px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.tabs-underline button{ background:none; border:none; padding:10px 2px; font-size:14px; color:var(--ink-2); font-weight:500; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs-underline button.active{ color:var(--ink-0); border-color:var(--gold); }

.notice{ display:flex; gap:12px; align-items:flex-start; background:rgba(3,201,136,0.07); border:1px solid var(--gold-dim); border-radius:10px; padding:14px 16px; margin-bottom:24px; }
.notice svg{ color:var(--gold); flex-shrink:0; margin-top:2px; }
.notice p{ font-size:13.5px; color:var(--ink-1); margin:0; }
.notice b{ color:var(--ink-0); }

.upload-drop{ border:1.5px dashed var(--line); border-radius:12px; padding:34px; text-align:center; }
.upload-drop svg{ color:var(--ink-3); margin-bottom:12px; }
.upload-drop p{ font-size:13.5px; color:var(--ink-2); margin-bottom:14px; }

/* fade-in-on-scroll utility */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }


/* ==========================================================================
   SINGLE-PAGE APP — view switching & chapter detail panels
   ========================================================================== */
.chapter[data-expand]{ cursor:pointer; }
.chapter-detail{
  grid-column:1 / -1;
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease, opacity .3s ease, margin .35s ease;
  opacity:0;
}
.chapter.expanded .chapter-detail{
  max-height:600px;
  opacity:1;
  margin-top:18px;
}
.chapter-detail-inner{
  border-top:1px solid var(--line-soft);
  padding-top:16px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:24px;
}
@media (max-width:700px){ .chapter-detail-inner{ grid-template-columns:1fr; } }
.chapter-detail h5{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px;
}
.chapter-detail p{ font-size:13.5px; color:var(--ink-1); line-height:1.7; margin:0; }
.lesson-item{
  display:flex; align-items:center; gap:10px; padding:8px 0;
  font-size:13.5px; color:var(--ink-1); border-bottom:1px solid var(--line-soft);
}
.lesson-item:last-child{ border-bottom:none; }
.lesson-item .lnum{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  width:20px; flex-shrink:0;
}
.chapter-chevron{ transition:transform .3s ease; color:var(--ink-3); }
.chapter.expanded .chapter-chevron{ transform:rotate(180deg); color:var(--gold); }

.part-heading{
  font-size:18px; color:var(--ink-0); margin:36px 0 16px; display:flex; align-items:center; gap:12px;
}
.part-heading .part-count{
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3);
  border:1px solid var(--line); border-radius:20px; padding:3px 10px;
}

.dash-back{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2);
  padding:8px 12px; border-radius:8px; margin-bottom:6px;
}
.dash-back:hover{ background:var(--bg-2); color:var(--ink-0); }


/* ==========================================================================
   CHAPTER READER VIEW
   ========================================================================== */
.reader-shell{ display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
@media (max-width:960px){ .reader-shell{ grid-template-columns:1fr; } }

.reader-toc{
  background:var(--bg-0); border-right:1px solid var(--line-soft);
  padding:20px 16px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
@media (max-width:960px){ .reader-toc{ display:none; } }
.reader-toc-head{ padding:6px 8px 18px; }
.reader-toc-head a{ font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; gap:6px; }
.reader-toc-head a:hover{ color:var(--gold); }
.toc-part{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); padding:14px 8px 6px; }
.toc-item{
  display:flex; align-items:center; gap:10px; padding:8px 8px; border-radius:7px;
  font-size:13px; color:var(--ink-2); cursor:pointer; margin-bottom:1px;
}
.toc-item:hover{ background:var(--bg-2); color:var(--ink-0); }
.toc-item.current{ background:rgba(3,201,136,0.1); color:var(--gold-bright); }
.toc-num{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); width:20px; flex-shrink:0; }
.toc-item.current .toc-num{ color:var(--gold); }
.toc-check{ margin-left:auto; color:var(--bull); flex-shrink:0; opacity:0; }
.toc-item.done .toc-check{ opacity:1; }

.reader-main{ padding:32px 40px 80px; max-width:900px; }
@media (max-width:640px){ .reader-main{ padding:20px; } }

.reader-crumb{ font-size:12.5px; color:var(--ink-3); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.reader-crumb a{ color:var(--ink-2); }
.reader-crumb a:hover{ color:var(--gold); }

.reader-head{ margin-bottom:24px; }
.reader-head .chapter-meta{ margin-bottom:14px; }
.reader-head h1{ font-size:clamp(24px,3.4vw,32px); margin-bottom:10px; line-height:1.15; }

.video-frame{
  position:relative; width:100%; border-radius:var(--radius-md); overflow:hidden;
  background:#000; border:1px solid var(--line); margin-bottom:8px;
  aspect-ratio:16/9;
}
.video-frame video{ width:100%; height:100%; display:block; object-fit:cover; }
.video-note{
  display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-3);
  margin-bottom:28px; font-family:var(--font-mono);
}
.video-note svg{ flex-shrink:0; color:var(--gold-dim); }

.reader-body p{ font-size:15.5px; color:var(--ink-1); line-height:1.85; margin-bottom:18px; }

.lesson-block{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:20px 22px; margin-bottom:12px; display:flex; gap:16px; align-items:flex-start;
}
.lesson-check{
  width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:transparent; margin-top:2px;
  transition:all .15s ease; cursor:pointer;
}
.lesson-check:hover{ border-color:var(--gold-dim); }
.lesson-check.done{ background:var(--bull); border-color:var(--bull); color:#08160f; }
.lesson-block h4{ font-size:14.5px; color:var(--ink-0); margin-bottom:6px; font-weight:600; }
.lesson-block p{ font-size:13.5px; color:var(--ink-2); margin:0; line-height:1.6; }

.reader-nav{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin-top:40px; padding-top:28px; border-top:1px solid var(--line-soft);
}
.reader-nav-btn{
  display:flex; flex-direction:column; gap:4px; max-width:280px; padding:14px 18px;
  border:1px solid var(--line); border-radius:10px; transition:all .15s ease;
}
.reader-nav-btn:hover{ border-color:var(--gold-dim); background:var(--bg-2); }
.reader-nav-btn.next{ text-align:right; margin-left:auto; }
.reader-nav-btn span{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.06em; }
.reader-nav-btn b{ font-size:13.5px; color:var(--ink-0); font-weight:600; }

.reader-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.reader-toc-toggle{ display:none; }
@media (max-width:960px){ .reader-toc-toggle{ display:inline-flex; } }

.mark-complete-row{ display:flex; align-items:center; gap:12px; margin:28px 0; }