/* =============================================
   OKSTEM Foundation — Shared Stylesheet
   ============================================= */

:root {
  --green: #00C853;
  --green-dark: #009624;
  --green-light: #69F0AE;
  --navy: #0A1628;
  --navy-mid: #112240;
  --white: #F8FAFC;
  --gray: #94A3B8;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 1000; opacity: .4;
}

/* ── NAV ── */
body > nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.25rem 3rem;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(10,22,40,.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,200,83,.12);
}
.nav-logo {
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.5rem;
  color: var(--white); text-decoration: none;
  display: flex; align-items: center; gap: .5rem;
}
.nav-logo span { color: var(--green); }
.nav-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; }
.nav-links a { color: var(--gray); text-decoration: none; font-size: .9rem; font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: var(--white); }
.nav-cta {
  background: var(--green) !important; color: var(--navy) !important;
  padding: .6rem 1.4rem; border-radius: 100px; font-weight: 600 !important; transition: all .2s !important;
}
.nav-cta:hover { background: var(--green-light) !important; transform: translateY(-1px); }

/* ── HERO (landing) ── */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  position: relative; padding: 8rem 3rem 5rem; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,200,83,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,200,83,.06) 1px,transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%,black 30%,transparent 100%);
}
.hero::after {
  content: ''; position: absolute; top: -20%; right: -10%;
  width: 700px; height: 700px;
  background: radial-gradient(circle,rgba(0,200,83,.15) 0%,transparent 70%);
  pointer-events: none;
}
.hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  align-items: center; position: relative; z-index: 1;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(0,200,83,.1); border: 1px solid rgba(0,200,83,.3);
  color: var(--green-light); padding: .4rem 1rem; border-radius: 100px;
  font-size: .8rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 1.5rem; animation: fadeUp .8s ease both;
}
.hero-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(3rem,5.5vw,5rem); font-weight: 800;
  line-height: 1.05; letter-spacing: -.03em; margin-bottom: 1.5rem;
  animation: fadeUp .8s ease .1s both;
}
.hero-title .highlight { color: var(--green); position: relative; display: inline-block; }
.hero-title .highlight::after {
  content: ''; position: absolute; bottom: 4px; left: 0; right: 0;
  height: 3px; background: var(--green); border-radius: 2px; opacity: .4;
}
.hero-desc {
  font-size: 1.15rem; line-height: 1.7; color: var(--gray);
  margin-bottom: 2.5rem; font-weight: 300; animation: fadeUp .8s ease .2s both;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; animation: fadeUp .8s ease .3s both; }
.btn-primary {
  background: var(--green); color: var(--navy);
  padding: .9rem 2rem; border-radius: 100px; font-weight: 600; font-size: 1rem;
  text-decoration: none; transition: all .25s;
  display: inline-flex; align-items: center; gap: .5rem; font-family: 'DM Sans', sans-serif;
}
.btn-primary:hover { background: var(--green-light); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,200,83,.35); }
.btn-secondary {
  background: transparent; color: var(--white);
  padding: .9rem 2rem; border-radius: 100px; font-weight: 500; font-size: 1rem;
  text-decoration: none; border: 1px solid rgba(255,255,255,.2); transition: all .25s;
  display: inline-flex; align-items: center; gap: .5rem; font-family: 'DM Sans', sans-serif;
}
.btn-secondary:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.05); }
.hero-visual { animation: fadeUp .8s ease .2s both; }
.code-window {
  background: var(--navy-mid); border: 1px solid rgba(0,200,83,.2);
  border-radius: 16px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.5);
}
.code-header {
  background: rgba(255,255,255,.04); padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-red{background:#FF5F57} .dot-yellow{background:#FFBD2E} .dot-green{background:#28C840}
.code-title { margin-left: auto; font-size: .75rem; color: var(--gray); }
.code-body { padding: 1.5rem; font-family: 'Courier New', monospace; font-size: .85rem; line-height: 1.8; }
.code-line { display: flex; gap: 1rem; }
.line-num { color: rgba(148,163,184,.3); min-width: 20px; text-align: right; user-select: none; }
.kw{color:#C792EA} .fn{color:#82AAFF} .str{color:#C3E88D}
.cmt{color:rgba(148,163,184,.5);font-style:italic} .var{color:#F78C6C} .num{color:var(--green-light)}
.typed-cursor { display:inline-block;width:2px;height:1em;background:var(--green);vertical-align:text-bottom;animation:blink 1s step-end infinite; }
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── STATS STRIP ── */
.stats-strip {
  border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02); padding: 2.5rem 3rem;
}
.stats-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; text-align: center; }
.stat-num { font-family: 'Syne',sans-serif; font-size: 2.5rem; font-weight: 800; color: var(--green); line-height: 1; margin-bottom: .4rem; }
.stat-label { font-size: .85rem; color: var(--gray); }

/* ── SECTIONS ── */
section { padding: 6rem 3rem; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-tag { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: 1rem; }
.section-title { font-family: 'Syne',sans-serif; font-size: clamp(2rem,3.5vw,3rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 1.25rem; }
.section-desc { font-size: 1.05rem; color: var(--gray); line-height: 1.7; max-width: 560px; font-weight: 300; }

/* ── COURSE CARDS (landing) ── */
.courses-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 3.5rem; }
.course-card {
  background: var(--navy-mid); border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px; padding: 2rem; transition: all .3s;
  position: relative; overflow: hidden; text-decoration: none; display: block; color: var(--white);
}
.course-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.course-card:hover { border-color: rgba(0,200,83,.25); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.course-card:hover::before { transform: scaleX(1); }
.course-icon { font-size: 2rem; margin-bottom: 1.25rem; display: block; }
.course-level { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green-light); background: rgba(0,200,83,.1); padding: .25rem .75rem; border-radius: 100px; margin-bottom: 1rem; }
.course-title { font-family: 'Syne',sans-serif; font-size: 1.2rem; font-weight: 700; margin-bottom: .75rem; line-height: 1.3; }
.course-desc { font-size: .9rem; color: var(--gray); line-height: 1.6; margin-bottom: 1.5rem; }
.course-meta { display: flex; gap: 1rem; font-size: .8rem; color: var(--gray); }
.free-badge { margin-left: auto; background: var(--green); color: var(--navy); padding: .2rem .6rem; border-radius: 100px; font-size: .75rem; font-weight: 700; }

/* ── HOW SECTION ── */
.how-section { background: var(--navy-mid); }
.steps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; margin-top: 3.5rem; position: relative; }
.steps-grid::before { content:''; position:absolute; top:28px; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,rgba(0,200,83,.4),transparent); }
.step { text-align: center; }
.step-num { width:56px;height:56px;background:var(--navy);border:2px solid var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:1.1rem;color:var(--green);margin:0 auto 1.5rem;position:relative;z-index:1; }
.step-title { font-family:'Syne',sans-serif; font-weight:700; font-size:1rem; margin-bottom:.75rem; }
.step-desc { font-size:.875rem; color:var(--gray); line-height:1.6; }

/* ── MISSION ── */
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.mission-card { background: var(--navy-mid); border: 1px solid rgba(0,200,83,.2); border-radius: 16px; padding: 2rem; }
.mission-stat-row { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; }
.mission-stat { flex: 1; background: rgba(0,200,83,.08); border-radius: 12px; padding: 1.25rem; text-align: center; }
.mission-stat-num { font-family:'Syne',sans-serif; font-size:1.75rem; font-weight:800; color:var(--green); }
.mission-stat-label { font-size:.75rem; color:var(--gray); margin-top:.25rem; }
.mission-bar-label { display:flex; justify-content:space-between; font-size:.8rem; margin-bottom:.4rem; color:var(--gray); }
.mission-bar-label span:last-child { color:var(--green-light); }
.bar-track { height:6px; background:rgba(255,255,255,.06); border-radius:100px; overflow:hidden; margin-bottom:.75rem; }
.bar-fill { height:100%; background:linear-gradient(90deg,var(--green-dark),var(--green-light)); border-radius:100px; }
.mission-points { list-style:none; margin-top:2rem; display:flex; flex-direction:column; gap:1rem; }
.mission-points li { display:flex; align-items:flex-start; gap:.75rem; font-size:.95rem; color:var(--gray); line-height:1.5; }
.check { width:20px;height:20px;background:rgba(0,200,83,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;font-size:.7rem;color:var(--green); }

/* ── ENROLL ── */
.enroll-section { background:var(--navy-mid); position:relative; overflow:hidden; text-align:center; }
.enroll-section::before { content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:400px;background:radial-gradient(ellipse,rgba(0,200,83,.12) 0%,transparent 70%);pointer-events:none; }
.enroll-inner { position:relative;z-index:1;max-width:680px;margin:0 auto; }
.enroll-title { font-family:'Syne',sans-serif;font-size:clamp(2.2rem,4vw,3.5rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;margin-bottom:1.25rem; }
.enroll-title em { font-style:normal; color:var(--green); }
.enroll-desc { font-size:1.05rem;color:var(--gray);line-height:1.7;margin-bottom:2.5rem;font-weight:300; }
.enroll-form { display:flex;gap:.75rem;max-width:480px;margin:0 auto; }
.enroll-input { flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:.875rem 1.5rem;color:var(--white);font-size:.95rem;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .2s; }
.enroll-input::placeholder { color:var(--gray); }
.enroll-input:focus { border-color:rgba(0,200,83,.5); }
.enroll-btn { background:var(--green);color:var(--navy);border:none;padding:.875rem 1.75rem;border-radius:100px;font-weight:700;font-size:.95rem;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .25s;white-space:nowrap; }
.enroll-btn:hover { background:var(--green-light);transform:translateY(-1px); }
.enroll-note { font-size:.8rem;color:var(--gray);margin-top:1rem; }

/* ── COMPLIANCE + FOOTER ── */
.compliance-banner { background:rgba(0,200,83,.05);border-top:1px solid rgba(0,200,83,.15);border-bottom:1px solid rgba(0,200,83,.15);padding:1.25rem 3rem; }
.compliance-banner-inner { max-width:1200px;margin:0 auto;font-size:.78rem;color:var(--gray);line-height:1.8;text-align:center; }
.compliance-banner-inner a { color:var(--green-light);text-decoration:none; }
.compliance-banner-inner a:hover { text-decoration:underline; }
footer { border-top:1px solid rgba(255,255,255,.06);padding:3rem; }
.footer-inner { max-width:1200px;margin:0 auto; }
.footer-top { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem; }
.footer-brand p { font-size:.9rem;color:var(--gray);line-height:1.7;margin-top:1rem;max-width:280px; }
.footer-logo { font-family:'Syne',sans-serif;font-weight:800;font-size:1.25rem;color:var(--white);text-decoration:none; }
.footer-logo span { color:var(--green); }
.footer-col h4 { font-family:'Syne',sans-serif;font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--white);margin-bottom:1.25rem; }
.footer-col ul { list-style:none;display:flex;flex-direction:column;gap:.75rem; }
.footer-col ul a { color:var(--gray);text-decoration:none;font-size:.875rem;transition:color .2s; }
.footer-col ul a:hover { color:var(--white); }
.footer-bottom { padding-top:2rem;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap; }
.footer-legal { font-size:.75rem;color:var(--gray);line-height:1.8;max-width:700px; }
.footer-legal a { color:var(--green-light);text-decoration:none; }
.footer-right { font-size:.75rem;color:var(--gray);text-align:right;line-height:1.9; }
.footer-right a { color:var(--green-light);text-decoration:none; }
.ein-badge { display:inline-flex;align-items:center;gap:.4rem;background:rgba(0,200,83,.08);border:1px solid rgba(0,200,83,.2);padding:.3rem .8rem;border-radius:100px;font-size:.7rem;color:var(--green-light);margin-top:.75rem; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  padding: 9rem 3rem 5rem;
  background: var(--navy-mid);
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content:''; position:absolute; top:-50%; right:-10%;
  width:600px; height:600px;
  background:radial-gradient(circle,rgba(0,200,83,.1) 0%,transparent 70%);
  pointer-events:none;
}
.page-hero-inner { max-width:1200px; margin:0 auto; position:relative; z-index:1; }
.breadcrumb { display:flex; gap:.5rem; align-items:center; font-size:.8rem; color:var(--gray); margin-bottom:1.5rem; flex-wrap:wrap; }
.breadcrumb a { color:var(--gray); text-decoration:none; transition:color .2s; }
.breadcrumb a:hover { color:var(--green-light); }
.breadcrumb span { color:rgba(148,163,184,.4); }
.page-hero h1 { font-family:'Syne',sans-serif; font-size:clamp(2rem,4vw,3.5rem); font-weight:800; line-height:1.1; letter-spacing:-.03em; margin-bottom:1rem; }
.page-hero p { font-size:1.1rem; color:var(--gray); line-height:1.7; max-width:640px; font-weight:300; }
.page-hero-meta { display:flex; gap:1.5rem; margin-top:1.5rem; flex-wrap:wrap; }
.meta-chip { display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); padding:.4rem .9rem; border-radius:100px; font-size:.8rem; color:var(--gray); }

/* ── TRACKS GRID (courses/index.html) ── */
.tracks-section { padding: 5rem 3rem; }
.tracks-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; margin-top:3rem; }
.track-card {
  background:var(--navy-mid); border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:2.5rem; text-decoration:none; color:var(--white);
  transition:all .3s; position:relative; overflow:hidden;
}
.track-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; border-radius:20px 20px 0 0; transition:opacity .3s; }
.track-card.k2::before  { background:linear-gradient(90deg,#FFD600,#FF6D00); }
.track-card.g35::before { background:linear-gradient(90deg,#00BCD4,#2979FF); }
.track-card.g68::before { background:linear-gradient(90deg,#00C853,#69F0AE); }
.track-card.g912::before{ background:linear-gradient(90deg,#AA00FF,#E040FB); }
.track-card:hover { border-color:rgba(0,200,83,.3); transform:translateY(-4px); box-shadow:0 24px 60px rgba(0,0,0,.4); }
.track-emoji { font-size:3rem; margin-bottom:1.25rem; display:block; }
.track-grade { font-family:'Syne',sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.5rem; }
.track-card.k2  .track-grade { color:#FFD600; }
.track-card.g35 .track-grade { color:#00BCD4; }
.track-card.g68 .track-grade { color:var(--green-light); }
.track-card.g912.track-grade{ color:#E040FB; }
.track-card.g912 .track-grade { color:#E040FB; }
.track-name { font-family:'Syne',sans-serif; font-size:1.5rem; font-weight:800; margin-bottom:.75rem; }
.track-desc { font-size:.95rem; color:var(--gray); line-height:1.6; margin-bottom:1.5rem; }
.track-courses { display:flex; flex-direction:column; gap:.5rem; }
.track-course-item { display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--gray); }
.track-course-item::before { content:'→'; color:var(--green); font-size:.8rem; }
.track-footer { display:flex; align-items:center; justify-content:space-between; margin-top:2rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.06); }
.track-count { font-size:.8rem; color:var(--gray); }
.track-arrow { color:var(--green); font-size:1.2rem; }

/* ── COURSE OVERVIEW PAGE ── */
.course-overview { padding: 4rem 3rem; }
.course-overview-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 340px; gap:4rem; align-items:start; }
.lessons-list { display:flex; flex-direction:column; gap:.75rem; margin-top:2rem; }
.lesson-item {
  display:flex; align-items:center; gap:1rem;
  background:var(--navy-mid); border:1px solid rgba(255,255,255,.07);
  border-radius:12px; padding:1.25rem 1.5rem;
  text-decoration:none; color:var(--white); transition:all .25s;
}
.lesson-item:hover { border-color:rgba(0,200,83,.3); transform:translateX(4px); }
.lesson-item-num { font-family:'Syne',sans-serif; font-size:.75rem; font-weight:700; color:var(--green); background:rgba(0,200,83,.1); width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lesson-item-info { flex:1; }
.lesson-item-title { font-weight:600; font-size:.95rem; margin-bottom:.2rem; }
.lesson-item-meta { font-size:.8rem; color:var(--gray); }
.lesson-item-arrow { color:var(--gray); font-size:.9rem; transition:color .2s; }
.lesson-item:hover .lesson-item-arrow { color:var(--green); }
.course-sidebar-card { background:var(--navy-mid); border:1px solid rgba(0,200,83,.15); border-radius:16px; padding:2rem; position:sticky; top:6rem; }
.course-sidebar-card h3 { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:700; margin-bottom:1.25rem; }
.sidebar-stat { display:flex; justify-content:space-between; padding:.75rem 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.9rem; }
.sidebar-stat:last-of-type { border-bottom:none; }
.sidebar-stat span:last-child { color:var(--green-light); font-weight:500; }
.enroll-btn-big { display:block; background:var(--green); color:var(--navy); text-align:center; padding:1rem; border-radius:100px; font-weight:700; text-decoration:none; margin-top:1.5rem; transition:all .25s; font-family:'DM Sans',sans-serif; }
.enroll-btn-big:hover { background:var(--green-light); transform:translateY(-2px); }

/* ── LESSON PAGE ── */
.lesson-page { display:block; margin-top:72px; min-height:calc(100vh - 72px); }
.lesson-sidebar {
  background:var(--navy-mid); border-right:1px solid rgba(255,255,255,.06);
  padding:2rem 1.5rem; position:fixed; top:72px; left:0;
  width:280px; height:calc(100vh - 72px); overflow-y:auto;
  z-index:50;
}
.sidebar-back { display:flex; align-items:center; gap:.5rem; color:var(--gray); text-decoration:none; font-size:.85rem; margin-bottom:1.5rem; transition:color .2s; }
.sidebar-back:hover { color:var(--green-light); }
.sidebar-course-name { font-family:'Syne',sans-serif; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green); margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.06); }
.sidebar-lessons { display:flex; flex-direction:column; gap:.25rem; }
.sidebar-lesson {
  display:flex; align-items:center; gap:.75rem;
  padding:.65rem .75rem; border-radius:8px;
  text-decoration:none; color:var(--gray); font-size:.85rem;
  transition:all .2s;
}
.sidebar-lesson:hover { background:rgba(255,255,255,.04); color:var(--white); }
.sidebar-lesson.active { background:rgba(0,200,83,.1); color:var(--white); font-weight:600; }
.sidebar-lesson-num { font-family:'Syne',sans-serif; font-size:.7rem; font-weight:700; color:var(--green); width:22px; flex-shrink:0; }
.sidebar-lesson.active .sidebar-lesson-num { color:var(--green-light); }
.sidebar-lesson-done { color:var(--green); font-size:.75rem; margin-left:auto; }

/* ── LESSON CONTENT ── */
.lesson-content,
.lesson-main { padding:3rem 4rem 5rem; max-width:860px; margin-left:280px; }
.lesson-num-tag { font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green); margin-bottom:.75rem; }
.lesson-title { font-family:'Syne',sans-serif; font-size:clamp(1.8rem,3vw,2.5rem); font-weight:800; line-height:1.1; letter-spacing:-.02em; margin-bottom:1rem; }
.lesson-meta { display:flex; gap:1.25rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.lesson-meta-chip { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; color:var(--gray); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:.35rem .85rem; border-radius:100px; }
.objectives {
  background:rgba(0,200,83,.06); border:1px solid rgba(0,200,83,.2);
  border-radius:12px; padding:1.5rem 2rem; margin-bottom:3rem;
}
.objectives h3 { font-family:'Syne',sans-serif; font-size:.85rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:1rem; }
.objectives ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.objectives li { display:flex; gap:.65rem; font-size:.95rem; color:var(--gray); line-height:1.5; }
.objectives li::before { content:'✦'; color:var(--green); font-size:.6rem; margin-top:.35rem; flex-shrink:0; }
.content-section { margin-bottom:3rem; }
.content-section h2 { font-family:'Syne',sans-serif; font-size:1.4rem; font-weight:700; margin-bottom:1rem; color:var(--white); }
.content-section h3 { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:600; margin-bottom:.75rem; color:var(--white); }
.content-section p { font-size:1rem; color:var(--gray); line-height:1.75; margin-bottom:1rem; }
.content-section ul, .content-section ol { padding-left:1.5rem; color:var(--gray); font-size:1rem; line-height:1.8; margin-bottom:1rem; }
.content-section li { margin-bottom:.35rem; }
.content-section strong { color:var(--white); }

/* Image placeholder */
.img-placeholder {
  background:rgba(0,200,83,.04); border:2px dashed rgba(0,200,83,.25);
  border-radius:12px; padding:2.5rem 2rem; text-align:center;
  margin:1.75rem 0; color:var(--gray);
}
.img-placeholder .img-icon { font-size:2.5rem; display:block; margin-bottom:.75rem; }
.img-placeholder .img-label { font-size:.95rem; color:var(--white); margin-bottom:.5rem; }
.img-placeholder .img-prompt { font-size:.8rem; color:var(--green-light); font-style:italic; line-height:1.5; }
.img-placeholder .img-save { font-size:.75rem; color:var(--gray); margin-top:.5rem; }

/* Code block */
.code-block {
  background:#0D1B2A; border:1px solid rgba(0,200,83,.2);
  border-radius:12px; overflow:hidden; margin:1.5rem 0;
}
.code-block-header { background:rgba(255,255,255,.04); padding:.6rem 1.25rem; display:flex; align-items:center; gap:.5rem; border-bottom:1px solid rgba(255,255,255,.06); }
.code-block-lang { font-size:.75rem; color:var(--green-light); font-weight:600; margin-left:auto; }
.code-block pre { padding:1.5rem; font-family:'Courier New',monospace; font-size:.875rem; line-height:1.8; overflow-x:auto; color:#e2e8f0; }
.code-block pre .kw{color:#C792EA} .code-block pre .fn{color:#82AAFF}
.code-block pre .str{color:#C3E88D} .code-block pre .cmt{color:#637777;font-style:italic}
.code-block pre .num{color:#F78C6C}

/* Callout boxes */
.callout { border-radius:12px; padding:1.25rem 1.5rem; margin:1.5rem 0; display:flex; gap:1rem; align-items:flex-start; }
.callout-tip  { background:rgba(0,200,83,.08);  border-left:3px solid var(--green); }
.callout-info { background:rgba(41,121,255,.1);  border-left:3px solid #2979FF; }
.callout-fun  { background:rgba(255,193,7,.08);  border-left:3px solid #FFC107; }
.callout-icon { font-size:1.25rem; flex-shrink:0; }
.callout-body { flex:1; }
.callout-title { font-family:'Syne',sans-serif; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.35rem; }
.callout-tip  .callout-title { color:var(--green); }
.callout-info .callout-title { color:#82AAFF; }
.callout-fun  .callout-title { color:#FFC107; }
.callout-body p { font-size:.9rem; color:var(--gray); line-height:1.6; margin:0; }

/* Activity box */
.activity-box {
  background:var(--navy-mid); border:1px solid rgba(0,200,83,.2);
  border-radius:16px; padding:2rem; margin:2rem 0;
}
.activity-header { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; }
.activity-icon { font-size:1.5rem; }
.activity-title { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; color:var(--green-light); }
.activity-box p { font-size:.95rem; color:var(--gray); line-height:1.7; margin-bottom:.75rem; }
.activity-box ol { padding-left:1.5rem; color:var(--gray); font-size:.95rem; line-height:1.8; }
.activity-box li { margin-bottom:.4rem; }

/* Quiz */
.quiz-section { background:var(--navy-mid); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:2rem; margin-top:3rem; }
.quiz-title { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; margin-bottom:1.75rem; display:flex; align-items:center; gap:.5rem; }
.quiz-title::before { content:'✎'; color:var(--green); }
.quiz-q { margin-bottom:1.75rem; }
.quiz-q p { font-size:.95rem; color:var(--white); font-weight:500; margin-bottom:.75rem; }
.quiz-options { display:flex; flex-direction:column; gap:.5rem; }
.quiz-option {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:8px; padding:.75rem 1rem; cursor:pointer;
  font-size:.9rem; color:var(--gray); transition:all .2s;
  display:flex; align-items:center; gap:.75rem;
}
.quiz-option:hover { border-color:rgba(0,200,83,.4); color:var(--white); background:rgba(0,200,83,.06); }
.quiz-option.selected { border-color:var(--accent); background:rgba(99,102,241,.15); color:var(--white); box-shadow:0 0 0 2px rgba(99,102,241,.4); }
.quiz-option.selected .quiz-option-letter { background:var(--accent); color:#fff; }
.quiz-option.correct { border-color:var(--green); background:rgba(0,200,83,.12); color:var(--white); box-shadow:none; }
.quiz-option.wrong   { border-color:#ef4444; background:rgba(239,68,68,.08); color:var(--white); box-shadow:none; }
.quiz-option-letter { width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex-shrink:0; transition:background .15s; }
.quiz-check-btn { background:var(--green); color:var(--navy); border:none; padding:.75rem 2rem; border-radius:100px; font-weight:700; font-size:.9rem; cursor:pointer; font-family:'DM Sans',sans-serif; margin-top:1.25rem; transition:all .2s; }
.quiz-check-btn:hover { background:var(--green-light); }
.quiz-result { margin-top:1rem; padding:.75rem 1rem; border-radius:8px; font-size:.9rem; display:none; }
.quiz-result.show { display:block; }
.quiz-result.pass { background:rgba(0,200,83,.1); color:var(--green-light); border:1px solid rgba(0,200,83,.25); }
.quiz-result.fail { background:rgba(239,68,68,.08); color:#fca5a5; border:1px solid rgba(239,68,68,.2); }

/* Lesson nav bar */
.lesson-nav-bar { display:flex; justify-content:space-between; align-items:center; margin-top:4rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.06); gap:1rem; }
.lesson-nav-btn { display:flex; align-items:center; gap:.6rem; padding:.75rem 1.5rem; border-radius:100px; text-decoration:none; font-size:.9rem; font-weight:600; transition:all .25s; }
.lesson-nav-prev { background:rgba(255,255,255,.05); color:var(--gray); border:1px solid rgba(255,255,255,.1); }
.lesson-nav-prev:hover { color:var(--white); border-color:rgba(255,255,255,.25); }
.lesson-nav-next { background:var(--green); color:var(--navy); }
.lesson-nav-next:hover { background:var(--green-light); transform:translateX(2px); }
.lesson-nav-btn.disabled { opacity:.35; pointer-events:none; }

/* ── LESSON LAYOUT (sidebar + main column) ── */
.lesson-layout { display:grid; grid-template-columns:280px 1fr; min-height:calc(100vh - 72px); margin-top:72px; }
.course-sidebar { background:var(--navy-mid); border-right:1px solid rgba(255,255,255,.06); position:sticky; top:72px; height:calc(100vh - 72px); overflow-y:auto; }
.course-sidebar-inner { padding:2rem 1.5rem; }
.sidebar-course-title { font-family:'Syne',sans-serif; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green); margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.06); }
.lesson-layout .lesson-main { padding:3rem 4rem 5rem; max-width:860px; }
.lesson-header { margin-bottom:2rem; }
.lesson-header h1 { font-family:'Syne',sans-serif; font-size:clamp(1.6rem,3vw,2.3rem); font-weight:800; line-height:1.15; margin-bottom:.75rem; color:var(--white); }
.lesson-meta-row { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.75rem; }
.lesson-intro { font-size:1rem; color:var(--gray); line-height:1.8; margin-bottom:2.5rem; }
.concepts-section { margin-bottom:3rem; }
.concepts-section h2 { font-family:'Syne',sans-serif; font-size:1.25rem; font-weight:700; margin-bottom:1.25rem; color:var(--white); }
.concept-title { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; color:var(--white); margin-bottom:.5rem; }
.lab-section { margin-bottom:3rem; }
.lab-section h2 { font-family:'Syne',sans-serif; font-size:1.25rem; font-weight:700; margin-bottom:1.25rem; color:var(--white); }
.quiz-q-text { font-size:.97rem; color:var(--white); font-weight:500; margin-bottom:.75rem; }
.quiz-feedback.correct { color:var(--green); }
.quiz-feedback.wrong { color:#fca5a5; }

/* ── NEW LESSON TEMPLATE CLASSES (gen-based lessons) ── */
/* Sidebar nav links */
.sidebar-course-label { font-family:'Syne',sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.06); }
.lesson-sidebar ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.2rem; }
.sidebar-link { display:flex; align-items:center; gap:.65rem; padding:.6rem .75rem; border-radius:8px; text-decoration:none; color:var(--gray); font-size:.84rem; transition:all .18s; }
.sidebar-link:hover { background:rgba(255,255,255,.04); color:var(--white); }
.sidebar-link.active { background:rgba(0,200,83,.1); color:var(--white); font-weight:600; }
.sidebar-num { font-family:'Syne',sans-serif; font-size:.7rem; font-weight:700; color:var(--green); width:20px; flex-shrink:0; }

/* Lesson topbar */
.lesson-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.06); }
.back-link { color:var(--gray); text-decoration:none; font-size:.87rem; transition:color .2s; }
.back-link:hover { color:var(--green-light); }
.lesson-progress { font-size:.8rem; color:var(--gray); background:rgba(255,255,255,.04); padding:.3rem .85rem; border-radius:100px; border:1px solid rgba(255,255,255,.08); }

/* Lesson hero */
.lesson-hero { margin-bottom:3rem; }
.lesson-hero .lesson-tag,
.lesson-tag { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green); display:inline-block; margin-bottom:.75rem; }
.lesson-hero h1 { font-family:'Syne',sans-serif; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; line-height:1.1; letter-spacing:-.02em; margin-bottom:1rem; color:var(--white); }
.lesson-hero p { font-size:1.05rem; color:var(--gray); line-height:1.75; max-width:700px; }

/* Lesson sections */
.lesson-section { margin-bottom:3.5rem; }
.lesson-section h2 { font-family:'Syne',sans-serif; font-size:1.35rem; font-weight:700; margin-bottom:1.5rem; color:var(--white); }

/* Concepts grid */
.concepts-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.concept-card { background:var(--navy-mid); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:1.5rem; }
.concept-card h3 { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; color:var(--white); margin-bottom:.6rem; }
.concept-card p { font-size:.9rem; color:var(--gray); line-height:1.7; margin:0; }

/* Interactive lab */
.lab-box { background:var(--navy-mid); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:1.75rem; overflow:hidden; }
.lab-canvas { display:block; max-width:100%; border-radius:10px; background:#0D1B2A; margin-bottom:1rem; }
.lab-controls { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; margin-bottom:.75rem; }
.lab-label { display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--gray); }
.lab-label input[type=range] { accent-color:var(--green); }
.lab-label input[type=number] { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:6px; color:var(--white); padding:.3rem .5rem; font-family:'DM Sans',sans-serif; }
.lab-label select { background:var(--navy-mid); border:1px solid rgba(255,255,255,.12); border-radius:6px; color:var(--white); padding:.3rem .6rem; font-family:'DM Sans',sans-serif; }
.lab-output { font-size:.85rem; color:var(--gray); min-height:1.5em; }
.lab-btn { background:var(--green); color:var(--navy); border:none; padding:.55rem 1.25rem; border-radius:8px; font-weight:700; font-size:.875rem; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .2s; }
.lab-btn:hover { background:var(--green-light); }

/* Quiz (new template) */
.quiz-container { display:flex; flex-direction:column; gap:1.5rem; }
.quiz-block { background:var(--navy-mid); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:1.5rem; }
.quiz-q { font-size:.97rem; color:var(--white); font-weight:500; margin-bottom:1rem; }
.quiz-opts { display:flex; flex-direction:column; gap:.5rem; }
.quiz-opt { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:.7rem 1rem; cursor:pointer; font-size:.9rem; color:var(--gray); text-align:left; transition:all .18s; font-family:'DM Sans',sans-serif; }
.quiz-opt:hover { border-color:rgba(0,200,83,.35); color:var(--white); background:rgba(0,200,83,.05); }
.quiz-opt.correct { border-color:var(--green); background:rgba(0,200,83,.12); color:var(--white); }
.quiz-opt.wrong   { border-color:#ef4444; background:rgba(239,68,68,.08); color:#fca5a5; }
.quiz-feedback { font-size:.85rem; margin-top:.65rem; min-height:1.2em; color:var(--gray); }

/* Bottom lesson navigation */
.lesson-nav { display:flex; justify-content:space-between; align-items:center; margin-top:4rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.06); gap:1rem; flex-wrap:wrap; }
.lesson-nav-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.5rem; border-radius:100px; text-decoration:none; font-size:.9rem; font-weight:600; transition:all .25s; background:rgba(255,255,255,.05); color:var(--gray); border:1px solid rgba(255,255,255,.1); }
.lesson-nav-btn:hover { color:var(--white); border-color:rgba(255,255,255,.25); }
.lesson-nav-btn.primary { background:var(--green); color:var(--navy); border-color:transparent; }
.lesson-nav-btn.primary:hover { background:var(--green-light); }

/* ── SIMPLE INNER PAGE (about/donate/etc) ── */
.inner-page { padding:4rem 3rem 6rem; }
.inner-page-inner { max-width:860px; margin:0 auto; }
.inner-page h2 { font-family:'Syne',sans-serif; font-size:1.6rem; font-weight:800; margin:2.5rem 0 1rem; color:var(--white); }
.inner-page h3 { font-family:'Syne',sans-serif; font-size:1.15rem; font-weight:700; margin:1.75rem 0 .75rem; color:var(--white); }
.inner-page p  { font-size:1rem; color:var(--gray); line-height:1.8; margin-bottom:1rem; }
.inner-page ul { padding-left:1.5rem; color:var(--gray); font-size:1rem; line-height:1.8; margin-bottom:1rem; }
.inner-page a  { color:var(--green-light); }
.donate-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin:2rem 0; }
.donate-tier { background:var(--navy-mid); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:2rem; text-align:center; }
.donate-amount { font-family:'Syne',sans-serif; font-size:2rem; font-weight:800; color:var(--green); margin-bottom:.5rem; }
.donate-label { font-size:.85rem; color:var(--gray); margin-bottom:1.25rem; }
.donate-btn { display:inline-block; background:var(--green); color:var(--navy); padding:.7rem 1.75rem; border-radius:100px; font-weight:700; text-decoration:none; font-size:.9rem; transition:all .25s; }
.donate-btn:hover { background:var(--green-light); }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .lesson-sidebar { width:240px; }
  .lesson-layout { grid-template-columns:240px 1fr; }
  .lesson-content, .lesson-main { padding:2.5rem; margin-left:240px; }
  .course-overview-inner { grid-template-columns:1fr; }
  .course-sidebar-card { position:static; }
}
@media(max-width:900px) {
  nav { padding:1rem 1.5rem; }
  .nav-links { display:none; }
  .hero { padding:7rem 1.5rem 4rem; }
  .hero-inner { grid-template-columns:1fr; gap:3rem; }
  .stats-inner { grid-template-columns:repeat(2,1fr); }
  .stats-strip { padding:2rem 1.5rem; }
  section { padding:4rem 1.5rem; }
  .courses-grid { grid-template-columns:1fr; }
  .steps-grid { grid-template-columns:repeat(2,1fr); }
  .steps-grid::before { display:none; }
  .mission-grid { grid-template-columns:1fr; gap:3rem; }
  .enroll-form { flex-direction:column; }
  .footer-top { grid-template-columns:1fr 1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; }
  .compliance-banner { padding:1rem 1.5rem; }
  footer { padding:2rem 1.5rem; }
  .tracks-grid { grid-template-columns:1fr; }
  .lesson-sidebar, .course-sidebar { display:none; }
  .lesson-layout { grid-template-columns:1fr; }
  .lesson-content, .lesson-main { padding:2rem 1.5rem; margin-left:0; }
  .lesson-layout .lesson-main { padding:2rem 1.5rem; }
  .concepts-grid { grid-template-columns:1fr; }
  .page-hero { padding:7rem 1.5rem 3rem; }
  .inner-page { padding:3rem 1.5rem; }
  .donate-tiers { grid-template-columns:1fr; }
}

/* ── BLOCK CODING WIDGET ── */
.bc-widget { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden; margin:2rem 0; }
.bc-challenge { background:rgba(0,200,83,.08); border-bottom:1px solid rgba(0,200,83,.2); padding:1rem 1.5rem; font-size:.9rem; color:var(--gray); display:flex; gap:.6rem; align-items:flex-start; }
.bc-challenge strong { color:var(--white); }
.bc-main { display:grid; grid-template-columns:180px 1fr 340px; min-height:320px; }

/* Palette */
.bc-palette { background:rgba(0,0,0,.2); border-right:1px solid rgba(255,255,255,.06); padding:1.25rem 1rem; display:flex; flex-direction:column; gap:.5rem; }
.bc-panel-title { font-family:'Syne',sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:.25rem; }
.bc-block-btn { display:flex; align-items:center; gap:.5rem; padding:.55rem .75rem; border-radius:8px; border:2px solid var(--bc,#fff); background:rgba(255,255,255,.03); color:var(--bc,#fff); font-size:.8rem; font-weight:600; cursor:pointer; text-align:left; transition:background .15s,transform .1s; white-space:nowrap; }
.bc-block-btn:hover { background:rgba(255,255,255,.08); transform:translateX(2px); }
.bc-icon { font-size:1rem; flex-shrink:0; }
.bc-repeat-wrap { margin-top:auto; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.06); }
.bc-repeat-label { font-size:.8rem; color:var(--gray); display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.bc-num { width:52px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:6px; color:var(--white); padding:.25rem .4rem; font-size:.85rem; text-align:center; }

/* Sequence panel */
.bc-seq-panel { padding:1.25rem 1rem; display:flex; flex-direction:column; gap:.75rem; border-right:1px solid rgba(255,255,255,.06); }
.bc-seq-list { flex:1; display:flex; flex-direction:column; gap:.35rem; overflow-y:auto; min-height:160px; max-height:220px; }
.bc-seq-empty { color:var(--gray); font-size:.82rem; padding:.5rem; opacity:.7; }
.bc-seq-item { display:flex; align-items:center; justify-content:space-between; padding:.45rem .65rem; border-radius:8px; border:2px solid var(--bc,#fff); background:rgba(255,255,255,.04); }
.bc-seq-label { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--white); font-weight:500; }
.bc-seq-val { width:44px; margin-left:.35rem; }
.bc-del { background:none; border:none; color:rgba(255,255,255,.3); cursor:pointer; font-size:.75rem; padding:.1rem .3rem; border-radius:4px; transition:color .15s; }
.bc-del:hover { color:#ef4444; }
.bc-btn-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.bc-btn { padding:.55rem 1rem; border-radius:8px; border:none; font-size:.82rem; font-weight:700; cursor:pointer; transition:opacity .15s,transform .1s; }
.bc-btn:hover { opacity:.85; transform:translateY(-1px); }
.bc-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }
.bc-run   { background:var(--green); color:#000; }
.bc-clear { background:rgba(255,255,255,.08); color:var(--white); }
.bc-reset { background:rgba(255,255,255,.05); color:var(--gray); }

/* Canvas */
.bc-canvas-wrap { display:flex; align-items:center; justify-content:center; background:#0d1f35; padding:1rem; }
.bc-canvas { border-radius:10px; display:block; max-width:100%; }

@media(max-width:900px) {
  .bc-main { grid-template-columns:1fr; }
  .bc-canvas-wrap { order:-1; }
  .bc-seq-list { max-height:140px; }
}

/* ── MATH GAMES WIDGETS ── */
:root { --mg-accent:#00c853; --mg-accent2:#3b82f6; --mg-warn:#f59e0b; --mg-wrong:#ef4444; }

.math-widget { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:1.5rem; margin:2rem 0; }
.mg-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; margin-bottom:1.25rem; }
.mg-title { font-family:'Syne',sans-serif; font-weight:700; font-size:1rem; color:var(--white); }
.mg-label { font-size:.85rem; color:var(--gray); display:flex; flex-direction:column; gap:.4rem; }
.mg-row { display:flex; align-items:flex-start; margin-bottom:1.25rem; }
.mg-muted { color:var(--gray); font-size:.85rem; }
.mg-input { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:8px; color:var(--white); padding:.45rem .75rem; font-size:1rem; width:120px; }
.mg-input.mg-big { font-size:1.4rem; width:110px; text-align:center; font-weight:700; }
.mg-btn { padding:.5rem 1rem; border-radius:8px; border:none; font-size:.82rem; font-weight:700; cursor:pointer; transition:opacity .15s,transform .1s; }
.mg-btn:hover { opacity:.85; transform:translateY(-1px); }
.mg-primary { background:var(--mg-accent); color:#000; }
.mg-secondary { background:rgba(255,255,255,.08); color:var(--white); }
.mg-answer-row { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin:1rem 0 .5rem; }
.mg-feedback { min-height:1.6rem; font-size:.95rem; font-weight:600; margin:.5rem 0; }
.mg-right { color:var(--mg-accent); }
.mg-wrong { color:var(--mg-wrong); }
.mg-score-row { font-size:.85rem; color:var(--gray); margin-top:.5rem; }

/* Problem display */
.mg-problem { font-size:1.6rem; font-weight:700; margin:1rem 0; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.mg-num { color:var(--white); }
.mg-num-lg { color:var(--white); font-size:1.8rem; }
.mg-op { color:var(--mg-accent); font-family:'Courier New',Courier,monospace; font-size:1.25em; line-height:1; }
.mg-op-label { font-size:.65rem; font-weight:700; letter-spacing:.12em; background:var(--mg-accent); color:#000; padding:.15rem .5rem; border-radius:4px; vertical-align:middle; margin-right:.5rem; }
.mg-blank { color:var(--mg-warn); background:rgba(245,158,11,.1); padding:.1rem .6rem; border-radius:6px; }
.mg-ans { color:var(--mg-accent); font-size:1.6rem; font-weight:800; }

/* Spinner controls */
.mg-spinner-row { display:flex; align-items:center; gap:.5rem; margin-top:.35rem; }
.mg-spin { width:30px; height:30px; border-radius:6px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:var(--white); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.mg-spin:hover { background:rgba(255,255,255,.12); }
.mg-spin-val { font-size:1.2rem; font-weight:700; color:var(--white); min-width:28px; text-align:center; }

/* Work shown */
.mg-work { background:rgba(255,255,255,.04); border-radius:10px; padding:1rem 1.5rem; display:inline-flex; flex-direction:column; align-items:flex-end; gap:.2rem; margin-top:.5rem; }
.mg-work-row { display:flex; align-items:center; gap:.5rem; }
.mg-work-num { font-size:1.4rem; font-weight:700; color:var(--white); min-width:60px; text-align:right; }
.mg-work-op { font-size:1.2rem; color:var(--mg-accent); }
.mg-work-line { width:100%; height:2px; background:rgba(255,255,255,.2); margin:.15rem 0; }
.mg-ans-num { color:var(--mg-accent); }

/* Place Value blocks */
.pv-blocks { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-start; min-height:60px; margin:1rem 0; padding:1rem; background:rgba(0,0,0,.15); border-radius:10px; }
.pv-hundred { width:64px; height:64px; background:rgba(0,200,83,.18); border:2px solid var(--mg-accent); border-radius:6px; display:grid; grid-template-columns:repeat(10,1fr); gap:1px; padding:2px; cursor:default; position:relative; }
.pv-hundred span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:700; color:var(--mg-accent); }
.pv-ten { width:16px; height:64px; background:rgba(59,130,246,.15); border:2px solid var(--mg-accent2); border-radius:4px; display:grid; grid-template-rows:repeat(10,1fr); gap:1px; padding:1px; }
.pv-cell { background:rgba(59,130,246,.4); border-radius:1px; }
.pv-one { width:16px; height:16px; border-radius:50%; background:rgba(245,158,11,.5); border:2px solid var(--mg-warn); }
.pv-equation { font-size:1rem; color:var(--gray); margin-top:.5rem; }
.pv-h { color:var(--mg-accent); font-weight:600; }
.pv-t { color:var(--mg-accent2); font-weight:600; }
.pv-o { color:var(--mg-warn); font-weight:600; }

/* Multiplication Array */
.ma-grid { display:grid; gap:5px; margin:1rem 0; }
.ma-dot { width:22px; height:22px; border-radius:50%; background:var(--mg-accent); opacity:.85; animation:ma-pop .2s ease both; }
@keyframes ma-pop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:.85} }
.ma-equation { font-size:1.1rem; color:var(--gray); margin-top:.75rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

/* Times Table */
.tt-tab-row { display:flex; gap:.5rem; }
.tt-selector { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.tt-num { padding:.35rem .7rem !important; font-size:.8rem !important; }
.tt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:.5rem; }
.tt-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:.75rem; text-align:center; animation:ma-pop .25s ease both; }
.tt-eq { display:block; font-size:.8rem; color:var(--gray); margin-bottom:.25rem; }
.tt-ans { display:block; font-size:1.4rem; font-weight:800; color:var(--mg-accent); }

/* Division */
.div-groups { display:flex; flex-wrap:wrap; gap:.75rem; margin:1rem 0; }
.div-group { background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.15); border-radius:10px; padding:.75rem; display:flex; flex-direction:column; align-items:center; gap:.35rem; min-width:70px; }
.div-group-label { font-size:.7rem; color:var(--gray); margin-bottom:.25rem; }
.div-dot { width:18px; height:18px; border-radius:50%; background:var(--mg-accent2); }

/* Fractions */
.frac-display { display:flex; align-items:center; gap:2rem; flex-wrap:wrap; margin:1.25rem 0; }
.frac-bar { display:flex; height:50px; border-radius:8px; overflow:hidden; border:2px solid rgba(255,255,255,.15); flex:0 0 auto; width:280px; max-width:100%; }
.frac-seg { flex:1; border-right:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); transition:background .2s; }
.frac-seg:last-child { border-right:none; }
.frac-filled { background:var(--mg-accent); opacity:.85; }
.frac-notation { display:flex; align-items:center; gap:1rem; font-size:1rem; color:var(--gray); }
.frac-number { display:inline-flex; flex-direction:column; align-items:center; gap:.15rem; }
.frac-top { font-size:1.6rem; font-weight:800; color:var(--mg-accent); line-height:1; }
.frac-line { width:2rem; height:3px; background:var(--white); border-radius:2px; }
.frac-bot { font-size:1.6rem; font-weight:800; color:var(--white); line-height:1; }

/* Area & Perimeter */
.area-grid-wrap { display:grid; gap:3px; margin:1rem 0; max-width:360px; }
.area-cell { width:100%; padding-bottom:100%; border-radius:3px; background:rgba(0,200,83,.2); border:1px solid rgba(0,200,83,.35); }
.area-results { display:flex; flex-wrap:wrap; gap:1rem; margin-top:.75rem; }
.area-stat { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:.85rem 1.25rem; }
.area-label { display:block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mg-accent); margin-bottom:.25rem; }
.area-val { font-size:.95rem; color:var(--gray); }
.area-val strong { color:var(--white); font-size:1.2rem; }

/* ── WORD PROBLEM WIDGET ── */
.wp-story { display:flex; align-items:flex-start; gap:1rem; background:rgba(255,255,255,.04); border-radius:12px; padding:1.25rem; margin:.75rem 0; }
.wp-char { font-size:2.8rem; line-height:1; flex-shrink:0; }
.wp-text { font-size:1.05rem; line-height:1.7; color:var(--white); }
.wp-hint { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25); border-radius:8px; padding:.75rem 1rem; color:#f59e0b; font-size:.95rem; margin-top:.5rem; }
.wp-streak { margin-left:auto; font-weight:700; color:#f97316; }

/* ── CLOCK WIDGET ── */
.clk-wrap { display:flex; align-items:center; gap:2rem; flex-wrap:wrap; margin:1rem 0; }
.clk-face { filter:drop-shadow(0 4px 20px rgba(0,0,0,.4)); flex-shrink:0; }
.clk-question { font-size:1.1rem; font-weight:600; color:var(--white); }
.clk-input-row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:.5rem 0; }
.clk-label { font-size:.85rem; color:var(--fg-muted); }

/* ── MONEY WIDGET ── */
.money-challenge { font-size:1rem; padding:.75rem 1rem; background:rgba(255,255,255,.04); border-radius:10px; margin:.75rem 0; }
.money-target { color:var(--white); line-height:1.6; }
.money-target strong { color:var(--green); font-size:1.1em; }
.money-coins { display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0; align-items:center; }
.money-coin { display:flex; flex-direction:column; align-items:center; gap:.2rem; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:.5rem .75rem; cursor:pointer; transition:background .15s,transform .1s; color:var(--white); }
.money-coin:hover { background:rgba(255,255,255,.14); transform:translateY(-2px); }
.money-coin-emoji { font-size:1.5rem; }
.money-coin-label { font-size:.7rem; font-weight:700; letter-spacing:.04em; }
.money-tray { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; background:rgba(0,0,0,.2); border-radius:10px; margin:.5rem 0; }
.money-tray-label { color:var(--fg-muted); font-size:.9rem; }
.money-total { font-size:1.8rem; font-weight:800; color:var(--green); }

/* ── MEASUREMENT WIDGET ── */
.meas-question { font-size:1rem; color:var(--white); margin:.75rem 0; line-height:1.6; }
.meas-ruler-wrap { margin:1rem 0; overflow-x:auto; }

/* ── DATA GRAPH WIDGET ── */
.graph-title { font-size:1.1rem; font-weight:700; color:var(--white); margin:.5rem 0 1rem; }
.graph-wrap { margin:.5rem 0 1rem; overflow-x:auto; }
.graph-bars { display:flex; align-items:flex-end; gap:.75rem; height:180px; padding:0 .5rem; }
.graph-bar-col { display:flex; flex-direction:column; align-items:center; gap:.3rem; flex:1; min-width:50px; }
.graph-bar-val { font-size:.8rem; font-weight:700; color:var(--white); }
.graph-bar { width:100%; background:var(--accent); border-radius:6px 6px 0 0; min-height:4px; animation:barRise .5s ease-out both; }
@keyframes barRise { from { transform:scaleY(0); transform-origin:bottom; } to { transform:scaleY(1); } }
.graph-bar-label { font-size:.7rem; color:var(--fg-muted); text-align:center; word-break:break-word; }
.graph-question { background:rgba(255,255,255,.04); border-radius:10px; padding:.75rem 1rem; margin:.5rem 0; font-size:.95rem; color:var(--white); }

/* ── ASSESSMENT ENGINE ── */
.asmnt-wrap { max-width:680px; margin:0 auto; padding:2rem 0; }

/* Intro */
.asmnt-intro { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:2.5rem; text-align:center; }
.asmnt-badge { display:inline-block; background:rgba(0,200,83,.1); color:var(--green); border:1px solid rgba(0,200,83,.25); border-radius:100px; padding:.35rem 1rem; font-size:.8rem; font-weight:700; letter-spacing:.06em; margin-bottom:1.25rem; }
.asmnt-h { font-family:'Syne',sans-serif; font-size:1.6rem; font-weight:800; margin-bottom:.5rem; }
.asmnt-sub { color:var(--gray); font-size:.9rem; margin-bottom:1.25rem; }
.asmnt-notice { background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.25); border-radius:10px; padding:.85rem 1rem; font-size:.85rem; color:var(--gray); margin-bottom:1.25rem; }
.asmnt-rules { text-align:left; list-style:none; display:flex; flex-direction:column; gap:.5rem; margin:0 0 2rem; padding:1rem 1.5rem; background:rgba(255,255,255,.03); border-radius:12px; }
.asmnt-rules li { font-size:.9rem; color:var(--gray); padding-left:1.25rem; position:relative; }
.asmnt-rules li::before { content:'→'; position:absolute; left:0; color:var(--green); }
.asmnt-start-btn { background:var(--green); color:#000; border:none; padding:.85rem 2.5rem; border-radius:12px; font-size:1rem; font-weight:800; cursor:pointer; transition:opacity .15s,transform .1s; }
.asmnt-start-btn:hover { opacity:.88; transform:translateY(-2px); }

/* Question */
.asmnt-progress-wrap { height:6px; background:rgba(255,255,255,.06); border-radius:3px; margin-bottom:1.5rem; overflow:hidden; }
.asmnt-progress-bar { height:100%; background:var(--green); border-radius:3px; transition:width .4s ease; }
.asmnt-q-counter { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:1rem; }
.asmnt-question { font-size:1.2rem; font-weight:600; color:var(--white); line-height:1.5; margin-bottom:1.5rem; }
.asmnt-opts { display:flex; flex-direction:column; gap:.65rem; }
.asmnt-opt { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:12px; cursor:pointer; text-align:left; color:var(--gray); font-size:.95rem; transition:all .15s; }
.asmnt-opt:hover:not(:disabled) { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:var(--white); }
.asmnt-opt:disabled { cursor:default; }
.asmnt-opt-letter { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; flex-shrink:0; }
.asmnt-correct { background:rgba(0,200,83,.12) !important; border-color:var(--green) !important; color:var(--white) !important; }
.asmnt-correct .asmnt-opt-letter { background:var(--green); color:#000; }
.asmnt-wrong { background:rgba(239,68,68,.1) !important; border-color:#ef4444 !important; }
.asmnt-wrong .asmnt-opt-letter { background:#ef4444; color:#fff; }
.asmnt-feedback { margin-top:1rem; min-height:1.5rem; font-size:.9rem; display:flex; flex-direction:column; gap:.75rem; }
.asmnt-fb-right { color:var(--green); font-weight:600; }
.asmnt-fb-wrong { color:#ef4444; font-weight:600; }
.asmnt-explain { color:var(--gray); font-size:.85rem; }
.asmnt-next-btn { align-self:flex-start; background:var(--green); color:#000; border:none; padding:.6rem 1.5rem; border-radius:8px; font-size:.85rem; font-weight:700; cursor:pointer; margin-top:.25rem; transition:opacity .15s,transform .1s; }
.asmnt-next-btn:hover { opacity:.88; transform:translateY(-1px); }

/* Results */
.asmnt-results { display:flex; flex-direction:column; align-items:center; gap:1.25rem; padding:1.5rem 0; }
.asmnt-score-circle { width:140px; height:140px; border-radius:50%; border:4px solid var(--score-color, var(--green)); display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(255,255,255,.03); }
.asmnt-score-pct { font-family:'Syne',sans-serif; font-size:2.2rem; font-weight:800; color:var(--score-color, var(--green)); line-height:1; }
.asmnt-score-raw { font-size:.8rem; color:var(--gray); margin-top:.2rem; }
.asmnt-grade { font-size:1.1rem; font-weight:700; color:var(--white); }
.asmnt-type-label { font-size:.8rem; color:var(--gray); }
.asmnt-topic-breakdown { width:100%; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:1.25rem 1.5rem; }
.asmnt-breakdown-title { font-family:'Syne',sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:1rem; }
.asmnt-topic-row { display:grid; grid-template-columns:160px 1fr 40px; align-items:center; gap:.75rem; margin-bottom:.65rem; }
.asmnt-topic-name { font-size:.85rem; color:var(--gray); text-transform:capitalize; }
.asmnt-topic-bar { height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
.asmnt-topic-fill { height:100%; background:var(--green); border-radius:4px; transition:width .6s ease; }
.asmnt-topic-pct { font-size:.8rem; color:var(--white); font-weight:600; text-align:right; }
.asmnt-result-actions { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; }
.asmnt-cta-btn { background:var(--green); color:#000; border:none; padding:.75rem 1.75rem; border-radius:10px; font-size:.9rem; font-weight:800; cursor:pointer; text-decoration:none; transition:opacity .15s,transform .1s; display:inline-block; }
.asmnt-cta-btn:hover { opacity:.88; transform:translateY(-1px); }
.asmnt-retake-btn { background:rgba(255,255,255,.07); color:var(--white); border:1px solid rgba(255,255,255,.12); padding:.75rem 1.5rem; border-radius:10px; font-size:.9rem; font-weight:600; cursor:pointer; transition:background .15s; }
.asmnt-retake-btn:hover { background:rgba(255,255,255,.12); }

/* Progress Dashboard */
.prog-empty { text-align:center; padding:3rem; color:var(--gray); }
.prog-empty h3 { color:var(--white); margin-bottom:.5rem; }
.prog-improvement { font-size:1.4rem; font-weight:800; text-align:center; padding:.75rem 1.5rem; background:rgba(0,200,83,.07); border-radius:12px; border:1px solid rgba(0,200,83,.2); }
.prog-cards { display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center; width:100%; }
.prog-arrow { font-size:1.5rem; color:var(--green); text-align:center; }
.prog-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:1.5rem; text-align:center; }
.prog-card-empty { opacity:.6; }
.prog-card-label { font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); margin-bottom:.75rem; }
.prog-card-pct { font-family:'Syne',sans-serif; font-size:2.4rem; font-weight:800; margin-bottom:.25rem; }
.prog-card-raw { font-size:.85rem; color:var(--gray); }
.prog-card-date { font-size:.75rem; color:var(--gray); margin-top:.35rem; }
.prog-card-empty-msg { font-size:.9rem; color:var(--gray); margin:1rem 0; }
.prog-retake { display:inline-block; font-size:.75rem; color:var(--green); text-decoration:none; margin-top:.5rem; }
.prog-bar-section { width:100%; }
.prog-section-title { font-family:'Syne',sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:.75rem; }
.prog-bar-label { display:flex; justify-content:space-between; font-size:.8rem; color:var(--gray); margin-bottom:.35rem; }
.prog-bar-track { height:20px; background:rgba(255,255,255,.05); border-radius:10px; overflow:hidden; position:relative; }
.prog-bar-pre  { position:absolute; top:3px; left:0; height:14px; background:rgba(255,255,255,.2); border-radius:7px; transition:width .8s ease; }
.prog-bar-post { position:absolute; top:3px; left:0; height:14px; background:var(--green); border-radius:7px; transition:width 1s ease .3s; }
.prog-table-wrap { width:100%; }
.prog-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.prog-table thead th { text-align:left; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--green); padding:.5rem .75rem; border-bottom:1px solid rgba(255,255,255,.08); }
.prog-table tbody td { padding:.65rem .75rem; color:var(--gray); border-bottom:1px solid rgba(255,255,255,.04); text-transform:capitalize; }
.prog-table tbody tr:last-child td { border-bottom:none; }
.prog-dashboard { display:flex; flex-direction:column; gap:1.5rem; }
.prog-actions { text-align:center; }
.prog-clear-btn { background:none; border:1px solid rgba(255,255,255,.1); color:var(--gray); padding:.5rem 1rem; border-radius:8px; font-size:.8rem; cursor:pointer; }
.prog-clear-btn:hover { border-color:#ef4444; color:#ef4444; }
@media(max-width:600px) {
  .prog-cards { grid-template-columns:1fr; }
  .prog-arrow { display:none; }
  .asmnt-topic-row { grid-template-columns:120px 1fr 36px; }
}

/* ── Placement Tests ─────────────────────────────────────────────────────── */
.pt-hero { background:linear-gradient(135deg,var(--navy-mid) 0%,var(--navy-dark) 100%); padding:5rem 1.5rem 4rem; margin-top:72px; }
.pt-hero-inner { max-width:700px; margin:0 auto; text-align:center; }
.pt-track-badge { display:inline-block; padding:.35rem 1rem; border-radius:100px; font-size:.85rem; font-weight:700; margin-bottom:1.25rem; }
.pt-hero h1 { font-family:'Syne',sans-serif; font-size:clamp(2rem,5vw,3rem); font-weight:800; color:var(--white); margin:0 0 .75rem; }
.pt-hero-sub { color:var(--gray); font-size:1.05rem; max-width:540px; margin:0 auto 1.25rem; }
.pt-hero-meta { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

.pt-body { max-width:760px; margin:0 auto; padding:2.5rem 1.5rem 4rem; }

.pt-progress-wrap { display:flex; align-items:center; gap:1rem; margin-bottom:2.5rem; }
.pt-progress-bar-outer { flex:1; height:8px; background:rgba(255,255,255,.08); border-radius:100px; overflow:hidden; }
.pt-progress-bar-inner { height:100%; background:var(--green); border-radius:100px; transition:width .4s ease; }
.pt-progress-label { font-size:.8rem; color:var(--gray); white-space:nowrap; }

.pt-questions-wrap { display:flex; flex-direction:column; gap:2rem; transition:opacity .4s; }

.pt-question { background:var(--navy-mid); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:1.75rem 2rem; }
.pt-q-num { font-size:.75rem; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.75rem; }
.pt-q-text { font-size:1.05rem; color:var(--white); margin-bottom:1.25rem; line-height:1.6; }
.pt-q-text br + code, .pt-q-text code { display:block; margin-top:.5rem; padding:.75rem 1rem; background:rgba(0,0,0,.35); border-radius:8px; font-family:'Courier New',monospace; font-size:.85rem; white-space:pre; }

.pt-opts { display:flex; flex-direction:column; gap:.6rem; }
.pt-opt { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:var(--white); padding:.85rem 1.1rem; border-radius:10px; text-align:left; font-family:'DM Sans',sans-serif; font-size:.95rem; cursor:pointer; transition:all .18s; }
.pt-opt:hover:not(:disabled) { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); }
.pt-opt.correct { background:rgba(22,163,74,.18); border-color:#16a34a; color:#4ade80; }
.pt-opt.wrong { background:rgba(239,68,68,.14); border-color:#ef4444; color:#fca5a5; }
.pt-opt:disabled { cursor:default; }
.pt-feedback { margin-top:.85rem; font-size:.9rem; font-weight:600; }
.pt-feedback.correct { color:#4ade80; }
.pt-feedback.wrong { color:#fca5a5; }

.pt-submit-wrap { display:flex; justify-content:center; margin-top:2.5rem; }

.pt-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 2rem; border-radius:100px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:.95rem; cursor:pointer; border:none; text-decoration:none; transition:all .2s; }
.pt-btn.primary { background:var(--green); color:var(--navy); }
.pt-btn.primary:hover { background:var(--green-light); transform:translateY(-1px); }
.pt-btn.secondary { background:rgba(255,255,255,.07); color:var(--gray); border:1px solid rgba(255,255,255,.12); }
.pt-btn.secondary:hover { background:rgba(255,255,255,.12); color:var(--white); }
.pt-btn.large { font-size:1.05rem; padding:1rem 2.5rem; }

.pt-result { margin-top:2.5rem; }
.pt-result-inner { background:var(--navy-mid); border:1px solid rgba(255,255,255,.07); border-radius:20px; padding:2.5rem 2rem; text-align:center; }
.pt-result-score-wrap { margin-bottom:1.25rem; }
.pt-result-score { font-family:'Syne',sans-serif; font-size:3.5rem; font-weight:800; color:var(--green); line-height:1; }
.pt-result-label { font-size:.8rem; color:var(--gray); text-transform:uppercase; letter-spacing:.08em; }
.pt-result-inner h2 { font-family:'Syne',sans-serif; font-size:1.5rem; color:var(--white); margin:.5rem 0 .75rem; }
.pt-result-inner p { color:var(--gray); max-width:480px; margin:0 auto 1.75rem; line-height:1.6; }
.pt-result-inner p a { color:var(--green); }
.pt-result-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:2rem; }
.pt-all-tracks { border-top:1px solid rgba(255,255,255,.06); padding-top:1.5rem; }
.pt-all-tracks p { font-size:.85rem; color:var(--gray); margin-bottom:.75rem; }
.pt-track-links { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.pt-track-links a { font-size:.8rem; color:var(--gray); text-decoration:none; padding:.35rem .85rem; border:1px solid rgba(255,255,255,.1); border-radius:100px; transition:all .18s; }
.pt-track-links a:hover { color:var(--white); border-color:rgba(255,255,255,.3); }

@media(max-width:600px) {
  .pt-question { padding:1.25rem; }
  .pt-hero { padding:4rem 1.25rem 3rem; }
}

/* ── Placement CTA (home page) ───────────────────────────────────────────── */
.placement-cta-section { background:var(--navy-mid); padding:5rem 1.5rem; text-align:center; }
.placement-cta-inner { max-width:760px; margin:0 auto; }
.placement-cta-tracks { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:.5rem; }
.placement-cta-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:1.25rem 1rem; text-decoration:none; color:var(--white); transition:all .2s; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.placement-cta-card:hover { background:rgba(255,255,255,.08); border-color:var(--green); transform:translateY(-2px); }
.placement-cta-card span { font-size:1.75rem; }
.placement-cta-card div { font-weight:700; font-size:.9rem; }
.placement-cta-card small { color:var(--gray); font-size:.75rem; }
@media(max-width:640px) { .placement-cta-tracks { grid-template-columns:repeat(2,1fr); } }

/* ── PYTHON RUNNER WIDGET ── */
.py-widget-host { margin:2rem 0; }
.py-widget { background:#0a1628; border:1px solid rgba(255,255,255,.1); border-radius:16px; overflow:hidden; font-family:'Courier New',Courier,monospace; }
.py-toolbar { display:flex; align-items:center; gap:.75rem; padding:.6rem 1rem; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08); }
.py-title { font-family:'Syne',sans-serif; font-size:.8rem; font-weight:700; color:var(--green); letter-spacing:.06em; flex:1; }
.py-btn { padding:.35rem .9rem; border-radius:8px; border:none; font-size:.8rem; font-weight:700; cursor:pointer; transition:opacity .15s; }
.py-run  { background:var(--green); color:#000; }
.py-rst  { background:rgba(255,255,255,.08); color:var(--white); }
.py-btn:hover { opacity:.82; }
.py-body { display:flex; min-height:160px; }
.py-gutter { width:36px; min-width:36px; background:rgba(255,255,255,.03); color:rgba(255,255,255,.25); font-size:.78rem; line-height:1.6; padding:.75rem 0; text-align:right; padding-right:8px; overflow:hidden; user-select:none; }
.py-gutter div { height:1.6em; }
.py-code { flex:1; resize:none; border:none; outline:none; background:transparent; color:#e2e8f0; font-family:'Courier New',Courier,monospace; font-size:.85rem; line-height:1.6; padding:.75rem .9rem; white-space:pre; overflow-wrap:normal; overflow-x:auto; caret-color:var(--green); }
.py-output-wrap { border-top:1px solid rgba(255,255,255,.08); }
.py-output-label { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); padding:.5rem 1rem .2rem; }
.py-output { padding:.4rem 1rem .75rem; font-size:.85rem; line-height:1.6; white-space:pre-wrap; color:#a3e6b8; min-height:1.5rem; }
.py-error  { color:#fc8181; }
.py-empty  { color:rgba(255,255,255,.2); font-style:italic; }
.py-line   { display:block; }

/* ── WEB EDITOR WIDGET ── */
.we-widget-host { margin:2rem 0; }
.we-widget { background:#0a1628; border:1px solid rgba(255,255,255,.1); border-radius:16px; overflow:hidden; }
.we-toolbar { display:flex; align-items:center; gap:.75rem; padding:.6rem 1rem; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08); flex-wrap:wrap; }
.we-title { font-family:'Syne',sans-serif; font-size:.8rem; font-weight:700; color:#60a5fa; letter-spacing:.06em; }
.we-tabs  { display:flex; gap:.35rem; flex:1; }
.we-tab   { padding:.3rem .75rem; border-radius:6px; border:1px solid rgba(255,255,255,.1); background:transparent; color:var(--gray); font-size:.78rem; font-weight:600; cursor:pointer; transition:all .15s; }
.we-tab.active { background:#1e3a5f; border-color:#3b82f6; color:#93c5fd; }
.we-actions { display:flex; gap:.5rem; }
.we-btn   { padding:.35rem .9rem; border-radius:8px; border:none; font-size:.8rem; font-weight:700; cursor:pointer; transition:opacity .15s; }
.we-run   { background:#3b82f6; color:#fff; }
.we-rst   { background:rgba(255,255,255,.08); color:var(--white); }
.we-btn:hover { opacity:.82; }
.we-body  { display:flex; min-height:200px; }
.we-code-side { flex:1; display:flex; min-width:0; border-right:1px solid rgba(255,255,255,.08); }
.we-panel { display:none; flex:1; }
.we-panel.active { display:flex; }
.we-gutter { width:36px; min-width:36px; background:rgba(255,255,255,.03); color:rgba(255,255,255,.25); font-size:.78rem; line-height:1.6; padding:.75rem 0; text-align:right; padding-right:8px; overflow:hidden; user-select:none; }
.we-gutter div { height:1.6em; }
.we-code  { flex:1; resize:none; border:none; outline:none; background:transparent; color:#e2e8f0; font-family:'Courier New',Courier,monospace; font-size:.82rem; line-height:1.6; padding:.75rem .9rem; white-space:pre; overflow-wrap:normal; overflow-x:auto; caret-color:#60a5fa; }
.we-preview-side { flex:1; display:flex; flex-direction:column; min-width:0; }
.we-preview-label { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); padding:.5rem 1rem; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); }
.we-preview { flex:1; border:none; background:#fff; min-height:180px; }
@media(max-width:700px) {
  .we-body { flex-direction:column; }
  .we-code-side { border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
  .we-preview-side { min-height:180px; }
}

/* ── BLOCK CODING WIDGET ── */
.bc-widget { margin:2rem 0; }
.bc-challenge { background:rgba(0,200,83,.07); border:1px solid rgba(0,200,83,.2); border-radius:12px; padding:.75rem 1.1rem; margin-bottom:1.25rem; font-size:.9rem; color:var(--white); }
.bc-main { display:flex; gap:1rem; flex-wrap:wrap; }
.bc-palette { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:1rem; min-width:160px; flex:0 0 auto; }
.bc-panel-title { font-family:'Syne',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gray); margin-bottom:.75rem; }
.bc-block-btn { display:flex; align-items:center; gap:.55rem; width:100%; padding:.5rem .75rem; margin-bottom:.4rem; border-radius:8px; border:none; background:color-mix(in srgb, var(--bc) 15%, transparent); color:var(--white); font-size:.82rem; font-weight:600; cursor:pointer; transition:background .15s; }
.bc-block-btn:hover { background:color-mix(in srgb, var(--bc) 30%, transparent); }
.bc-icon { font-size:1rem; }
.bc-repeat-wrap { margin-top:.75rem; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.07); }
.bc-repeat-label { font-size:.8rem; color:var(--gray); display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.bc-num { width:52px; padding:.25rem .4rem; border-radius:6px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:var(--white); font-size:.82rem; text-align:center; }
.bc-seq-panel { flex:1; min-width:200px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:1rem; display:flex; flex-direction:column; gap:.75rem; }
.bc-seq-list { flex:1; display:flex; flex-direction:column; gap:.35rem; min-height:80px; }
.bc-seq-empty { color:rgba(255,255,255,.25); font-size:.82rem; font-style:italic; padding:.5rem 0; }
.bc-seq-item { display:flex; align-items:center; gap:.5rem; padding:.45rem .65rem; border-radius:8px; background:color-mix(in srgb, var(--bc) 18%, transparent); border-left:3px solid var(--bc); }
.bc-seq-label { display:flex; align-items:center; gap:.4rem; flex:1; font-size:.82rem; color:var(--white); }
.bc-seq-val { width:52px; }
.bc-del { background:rgba(255,255,255,.08); border:none; border-radius:5px; color:var(--gray); font-size:.72rem; padding:.15rem .35rem; cursor:pointer; flex-shrink:0; }
.bc-del:hover { background:rgba(239,68,68,.25); color:#ef4444; }
.bc-btn-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.bc-btn { padding:.45rem .9rem; border-radius:8px; border:none; font-size:.8rem; font-weight:700; cursor:pointer; transition:opacity .15s; }
.bc-run   { background:var(--green); color:#000; }
.bc-clear { background:rgba(255,255,255,.08); color:var(--white); }
.bc-reset { background:rgba(255,255,255,.06); color:var(--gray); }
.bc-btn:disabled { opacity:.5; cursor:not-allowed; }
.bc-canvas-wrap { display:flex; align-items:flex-start; }
.bc-canvas { border-radius:12px; border:1px solid rgba(255,255,255,.08); display:block; }
.bc-if-triggered { animation:bcIfFlash .6s ease; }
@keyframes bcIfFlash { 0%,100% { opacity:1; } 50% { opacity:.3; background:rgba(6,182,212,.4); } }

/* ── STUDENT NAV PILL ── */
.nav-student-pill {
  display:flex; align-items:center; gap:.5rem; padding:.4rem .9rem .4rem .5rem;
  background:rgba(0,200,83,.12); border:1px solid rgba(0,200,83,.25);
  border-radius:100px; text-decoration:none; transition:all .2s;
}
.nav-student-pill:hover { background:rgba(0,200,83,.2); border-color:var(--green); }
.nav-avatar {
  width:26px; height:26px; border-radius:50%; background:var(--green);
  color:var(--navy); font-family:'Syne',sans-serif; font-weight:800;
  font-size:.78rem; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.nav-student-name { font-size:.85rem; font-weight:600; color:var(--white); }
.nav-grade-badge {
  font-family:'Syne',sans-serif; font-size:.72rem; font-weight:800;
  color:var(--green); background:rgba(0,200,83,.15);
  padding:.1rem .45rem; border-radius:100px;
}

/* ── SIDEBAR COMPLETED ── */
.lesson-item.lesson-done .lesson-item-arrow { display:none; }
.done-check { margin-left:auto; color:var(--green); font-size:.85rem; font-weight:700; flex-shrink:0; }

/* ── LOGIN MODAL ── */
#okstem-login-modal {
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
}
.slm-backdrop {
  position:absolute; inset:0;
  background:rgba(5,12,25,.85); backdrop-filter:blur(8px);
}
.slm-box {
  position:relative; z-index:1;
  background:var(--navy-mid); border:1px solid rgba(0,200,83,.2);
  border-radius:20px; padding:2.5rem 2.25rem 2rem;
  width:min(500px,96vw); max-height:90vh; overflow-y:auto;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.slm-header { text-align:center; margin-bottom:1.75rem; }
.slm-logo { font-family:'Syne',sans-serif; font-weight:800; font-size:1.75rem; color:var(--white); letter-spacing:-.02em; }
.slm-logo span { color:var(--green); }
.slm-sub { color:var(--gray); font-size:.9rem; margin-top:.3rem; }
.slm-tabs { display:flex; gap:.5rem; margin-bottom:1.5rem; background:rgba(255,255,255,.04); border-radius:10px; padding:.3rem; }
.slm-tab { flex:1; background:none; border:none; padding:.55rem 1rem; border-radius:7px; font-family:'DM Sans',sans-serif; font-size:.88rem; font-weight:600; color:var(--gray); cursor:pointer; transition:all .2s; }
.slm-tab.active { background:rgba(0,200,83,.15); color:var(--white); }
.slm-label { display:flex; flex-direction:column; gap:.5rem; font-size:.85rem; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:.06em; margin-bottom:1.1rem; }
.slm-input { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:.75rem 1rem; color:var(--white); font-family:'DM Sans',sans-serif; font-size:1rem; transition:border-color .2s; width:100%; }
.slm-input:focus { outline:none; border-color:var(--green); }
.slm-input option { background:var(--navy-mid); }
.slm-note { font-size:.8rem; color:var(--gray); margin-bottom:1.25rem; line-height:1.5; }
.slm-btn { width:100%; background:var(--green); color:var(--navy); border:none; border-radius:100px; padding:.85rem 1.5rem; font-family:'Syne',sans-serif; font-weight:800; font-size:1rem; cursor:pointer; transition:all .2s; margin-bottom:.75rem; }
.slm-btn:hover { background:var(--green-light); transform:translateY(-1px); }
.slm-skip { width:100%; background:none; border:none; color:var(--gray); font-size:.8rem; cursor:pointer; padding:.4rem; transition:color .2s; }
.slm-skip:hover { color:var(--white); }
.slm-err { color:#f87171; font-size:.82rem; margin-top:.5rem; }
.slm-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.slm-req { color:#f87171; font-size:.75rem; }
.slm-opt { color:var(--gray); font-size:.75rem; font-weight:400; }
.slm-hint { display:block; font-size:.72rem; color:var(--gray); margin-top:.25rem; font-weight:400; }
.slm-age-check { display:flex; align-items:flex-start; gap:.6rem; color:var(--gray); font-size:.85rem; line-height:1.5; cursor:pointer; margin:.5rem 0 .25rem; }
.slm-age-check input[type="checkbox"] { margin-top:.15rem; accent-color:var(--green); width:15px; height:15px; flex-shrink:0; cursor:pointer; }
@media(max-width:480px) { .slm-row { grid-template-columns:1fr; } }

/* ── DASHBOARD PAGE ── */
.db-hero { padding:6rem 3rem 3rem; border-bottom:1px solid rgba(255,255,255,.06); }
.db-hero-inner { max-width:900px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
#db-greeting { display:flex; align-items:center; gap:1.25rem; }
.db-avatar { width:64px; height:64px; border-radius:50%; background:var(--green); color:var(--navy); font-family:'Syne',sans-serif; font-weight:800; font-size:1.75rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.db-hero h1 { font-family:'Syne',sans-serif; font-size:1.8rem; font-weight:800; color:var(--white); }
.db-meta-line { color:var(--gray); font-size:.9rem; margin-top:.35rem; }
.db-grade-bubble { text-align:center; }
.db-grade-letter { font-family:'Syne',sans-serif; font-size:4rem; font-weight:800; line-height:1; }
.db-grade-label { font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gray); margin-top:.25rem; }
.db-body { max-width:900px; margin:0 auto; padding:3rem 3rem 6rem; }
.db-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:3rem; }
.db-stat-card { background:var(--navy-mid); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:1.5rem 1rem; text-align:center; }
.db-stat-num { font-family:'Syne',sans-serif; font-size:2rem; font-weight:800; color:var(--green); }
.db-stat-label { font-size:.78rem; color:var(--gray); margin-top:.35rem; text-transform:uppercase; letter-spacing:.07em; }
.db-section { margin-bottom:3rem; }
.db-section-title { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:700; color:var(--white); margin-bottom:1.25rem; padding-bottom:.75rem; border-bottom:1px solid rgba(255,255,255,.06); }
.db-courses-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.db-course-card { display:flex; align-items:flex-start; gap:1rem; background:var(--navy-mid); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:1.25rem; text-decoration:none; transition:all .2s; }
.db-course-card:hover { border-color:rgba(0,200,83,.3); transform:translateY(-2px); }
.db-course-icon { font-size:1.75rem; flex-shrink:0; }
.db-course-name { font-family:'Syne',sans-serif; font-size:.95rem; font-weight:700; color:var(--white); margin-bottom:.2rem; }
.db-course-track { font-size:.75rem; color:var(--green); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.65rem; }
.db-progress-bar-wrap { background:rgba(255,255,255,.08); border-radius:100px; height:6px; margin-bottom:.5rem; }
.db-progress-bar { background:var(--green); height:6px; border-radius:100px; transition:width .4s ease; min-width:3px; }
.db-course-stats { font-size:.78rem; color:var(--gray); }
.db-empty { color:var(--gray); font-size:.9rem; font-style:italic; }
.db-activity-list { display:flex; flex-direction:column; gap:.6rem; }
.db-activity-item { display:flex; align-items:center; gap:1rem; background:var(--navy-mid); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:1rem 1.25rem; text-decoration:none; transition:all .2s; }
.db-activity-item:hover { border-color:rgba(0,200,83,.2); }
.db-act-icon { font-size:1.1rem; flex-shrink:0; }
.db-act-info { flex:1; }
.db-act-title { font-size:.9rem; font-weight:600; color:var(--white); }
.db-act-meta { font-size:.78rem; color:var(--gray); margin-top:.2rem; }
.db-act-done { font-size:.75rem; font-weight:700; color:var(--green); background:rgba(0,200,83,.1); padding:.25rem .65rem; border-radius:100px; flex-shrink:0; }
.db-act-progress { font-size:.75rem; font-weight:700; color:#f59e0b; background:rgba(245,158,11,.1); padding:.25rem .65rem; border-radius:100px; flex-shrink:0; }
.db-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.06); }
.db-action-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.75rem; border-radius:100px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:.9rem; cursor:pointer; border:none; text-decoration:none; transition:all .2s; }
.db-action-btn.primary { background:var(--green); color:var(--navy); }
.db-action-btn.primary:hover { background:var(--green-light); }
.db-action-btn.danger { background:rgba(239,68,68,.12); color:#f87171; border:1px solid rgba(239,68,68,.2); }
.db-action-btn.danger:hover { background:rgba(239,68,68,.2); }
@media(max-width:900px){
  .db-stats-row { grid-template-columns:repeat(2,1fr); }
  .db-courses-grid { grid-template-columns:1fr; }
  .db-body { padding:2rem 1.5rem 4rem; }
}