/* ============================================================
   Sparks Academy — Learning Portal stylesheet
   Colour, type and layout tokens (UK English throughout)
   ============================================================ */

:root{
  /* Colour palette */
  --ink:        #1C2240;  /* deep exam-paper navy */
  --ink-soft:   #3A4166;
  --paper:      #F5F6FB;  /* cool paper */
  --card:       #FFFFFF;
  --line:       #E3E6F2;
  --spark:      #FFB300;  /* signature amber spark */
  --spark-deep: #E68A00;
  --violet:     #4F46B8;  /* primary action */
  --violet-soft:#EEEDFB;
  --green:      #178A5E;
  --green-soft: #E4F5EE;
  --red:        #C93A3A;
  --red-soft:   #FBEAEA;
  --muted:      #6A7090;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(28,34,64,.06), 0 8px 24px rgba(28,34,64,.07);
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
}
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size:1.7rem; font-weight:800; }
h2{ font-size:1.3rem; font-weight:700; }
h3{ font-size:1.05rem; font-weight:700; }
p{ margin:0 0 .8em; }
a{ color:var(--violet); }
code{ font-family:var(--font-mono); font-size:.85em; background:var(--violet-soft); padding:.1em .35em; border-radius:5px; }
.muted{ color:var(--muted); }
.small{ font-size:.85rem; }
.mono{ font-family:var(--font-mono); }
[hidden]{ display:none !important; }

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

/* ---------- App shell ---------- */
.app-shell{ display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.main-col{ display:flex; flex-direction:column; min-width:0; }
.view{ padding:26px 30px 60px;  width:100%; margin:0 auto; }

/* Sidebar */
.sidebar{
  background:var(--ink); color:#fff;
  display:flex; flex-direction:column;
  padding:22px 16px; position:sticky; top:0; height:100vh;
}
.brand{ display:flex; gap:10px; align-items:center; margin-bottom:26px; }
.brand-mark{
  font-size:1.5rem; background:var(--spark); color:var(--ink);
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:12px; box-shadow:0 3px 0 var(--spark-deep);
}
.brand-name{ font-family:var(--font-display); font-weight:800; font-size:1.05rem; line-height:1.05; }
.brand-name em{ font-style:normal; color:var(--spark); }
.brand-lg .brand-mark{ width:54px; height:54px; font-size:1.9rem; }
.brand-lg .brand-name{ font-size:1.3rem; }

.side-nav{ display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.side-nav .nav-group{ font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:#9aa1c9; margin:16px 10px 4px; }
.side-nav a{
  display:flex; align-items:center; gap:10px;
  color:#d9dcf0; text-decoration:none; padding:9px 12px;
  border-radius:10px; font-weight:500; font-size:.92rem;
}
.side-nav a .ico{ width:22px; text-align:center; }
.side-nav a:hover{ background:rgba(255,255,255,.08); }
.side-nav a.active{ background:var(--spark); color:var(--ink); font-weight:700; box-shadow:0 2px 0 var(--spark-deep); }

.sidebar-foot{ margin-top:14px; border-top:1px solid rgba(255,255,255,.12); padding-top:14px; }
.me-chip{ font-size:.85rem; margin-bottom:10px; color:#d9dcf0; }
.me-chip b{ display:block; color:#fff; }

/* Topbar */
.topbar{
  display:flex; align-items:center; gap:14px;
  background:var(--card); border-bottom:1px solid var(--line);
  padding:12px 30px; position:sticky; top:0; z-index:20;
}
.topbar-title{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; flex:1; }
.topbar-right{ display:flex; gap:10px; align-items:center; }
.hamburger{ display:none; background:none; border:1px solid var(--line); border-radius:8px; font-size:1.1rem; padding:4px 10px; cursor:pointer; }

/* Spark meter in topbar */
.spark-meter{
  display:flex; align-items:center; gap:8px;
  background:var(--ink); color:#fff; border-radius:999px;
  padding:5px 14px 5px 8px; font-size:.85rem;
}
.spark-meter .flame{ font-size:1rem; }
.spark-meter b{ color:var(--spark); font-family:var(--font-mono); }

/* ---------- Cards, grids ---------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; }
.card + .card{ margin-top:18px; }
.card-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.stat-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); }
.stat-card .stat-label{ font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.stat-card .stat-value{ font-family:var(--font-display); font-weight:800; font-size:1.7rem; margin-top:2px; }
.stat-card .stat-sub{ font-size:.8rem; color:var(--muted); }
.stat-spark .stat-value{ color:var(--spark-deep); }

/* ---------- Buttons, chips, badges ---------- */
.btn{
  font:inherit; font-weight:600; cursor:pointer;
  border-radius:10px; padding:9px 16px; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  transition:transform .06s ease, box-shadow .06s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--violet); color:#fff; box-shadow:0 2px 0 #38317f; }
.btn-primary:hover{ background:#453cab; }
.btn-spark{ background:var(--spark); color:var(--ink); box-shadow:0 2px 0 var(--spark-deep); }
.btn-ghost{ background:transparent; color:inherit; border-color:var(--line); }
.sidebar .btn-ghost{ color:#d9dcf0; border-color:rgba(255,255,255,.25); }
.btn-danger{ background:var(--red); color:#fff; }
.btn-sm{ padding:5px 11px; font-size:.83rem; border-radius:8px; }
.btn-block{ width:100%; justify-content:center; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

.chip{
  font:inherit; font-size:.8rem; font-weight:600; cursor:pointer;
  background:var(--violet-soft); color:var(--violet);
  border:1px solid transparent; border-radius:999px; padding:4px 12px;
}
.chip:hover{ border-color:var(--violet); }

.tag{ display:inline-block; font-size:.72rem; font-weight:700; border-radius:999px; padding:2px 10px; }
.tag-subject{ background:var(--violet-soft); color:var(--violet); }
.tag-green{ background:var(--green-soft); color:var(--green); }
.tag-amber{ background:#FFF3D6; color:var(--spark-deep); }
.tag-red{ background:var(--red-soft); color:var(--red); }
.tag-grey{ background:#EEF0F7; color:var(--muted); }

/* ---------- Forms ---------- */
.field{ display:block; margin-bottom:14px; }
.field > span{ display:block; font-size:.82rem; font-weight:600; margin-bottom:5px; }
.field input, .field select, .field textarea{
  width:100%; font:inherit; padding:9px 12px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; color:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--violet); outline:2px solid var(--violet-soft); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-error{ background:var(--red-soft); color:var(--red); border-radius:var(--radius-sm); padding:9px 12px; font-size:.85rem; margin-bottom:12px; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; font-size:.9rem; }
table.data th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:8px 10px; border-bottom:2px solid var(--line); }
table.data td{ padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.data tr:hover td{ background:#FAFBFE; }

/* ---------- Progress ---------- */
.progress{ background:#EBEDF6; border-radius:999px; height:10px; overflow:hidden; }
.progress > i{ display:block; height:100%; background:linear-gradient(90deg,var(--spark),var(--spark-deep)); border-radius:999px; transition:width .4s ease; }
.progress.violet > i{ background:var(--violet); }

/* ---------- Lesson cards ---------- */
.lesson-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.lesson-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  cursor:pointer; transition:transform .08s ease;
}
.lesson-card:hover{ transform:translateY(-2px); }
.lesson-thumb{
  aspect-ratio:16/9; display:grid; place-items:center; font-size:2rem;
  background:linear-gradient(135deg,var(--ink),var(--ink-soft)); color:var(--spark); position:relative;
}
.lesson-thumb .dur{ position:absolute; right:8px; bottom:8px; font-size:.7rem; font-family:var(--font-mono); background:rgba(0,0,0,.55); color:#fff; padding:2px 7px; border-radius:6px; }
.lesson-body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.lesson-body h3{ margin:0; font-size:.95rem; }
.lesson-meta{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; font-size:.78rem; color:var(--muted); }
.done-tick{ color:var(--green); font-weight:700; }

.video-frame{ width:100%; aspect-ratio:16/9; border:0; border-radius:var(--radius); background:#000; }

/* ---------- Quiz / exam player ---------- */
.q-option{
  display:flex; gap:12px; align-items:flex-start;
  border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; margin-bottom:10px; cursor:pointer; background:#fff;
}
.q-option:hover{ border-color:var(--violet); }
.q-option.selected{ border-color:var(--violet); background:var(--violet-soft); }
.q-option.correct{ border-color:var(--green); background:var(--green-soft); }
.q-option.wrong{ border-color:var(--red); background:var(--red-soft); }
.q-option .key{
  font-family:var(--font-mono); font-weight:700; flex:0 0 26px; height:26px;
  display:grid; place-items:center; border-radius:7px; background:var(--paper); font-size:.8rem;
}
.q-progress-label{ font-size:.8rem; color:var(--muted); font-family:var(--font-mono); }

.exam-timer{
  font-family:var(--font-mono); font-weight:700; font-size:1rem;
  background:var(--ink); color:var(--spark); border-radius:10px; padding:6px 14px;
}
.exam-timer.low{ background:var(--red); color:#fff; animation:pulse 1s infinite; }
@keyframes pulse{ 50%{ opacity:.65; } }
.palette{ display:flex; flex-wrap:wrap; gap:6px; }
.palette button{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--line);
  background:#fff; font-family:var(--font-mono); font-size:.78rem; cursor:pointer;
}
.palette button.answered{ background:var(--violet); color:#fff; border-color:var(--violet); }
.palette button.flagged{ outline:2px solid var(--spark); }
.palette button.current{ box-shadow:0 0 0 3px var(--spark); }

.score-ring{ font-family:var(--font-display); font-weight:800; font-size:2.4rem; }

/* ---------- Badges ---------- */
.badge-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; }
.badge-card{ text-align:center; border:1px solid var(--line); border-radius:var(--radius); padding:14px 8px; background:var(--card); }
.badge-card .badge-ico{ font-size:1.9rem; }
.badge-card.locked{ opacity:.38; filter:grayscale(1); }
.badge-card b{ display:block; font-size:.8rem; margin-top:4px; }
.badge-card span{ font-size:.7rem; color:var(--muted); }

/* Leaderboard */
.lb-row{ display:flex; align-items:center; gap:12px; padding:10px 6px; border-bottom:1px solid var(--line); }
.lb-rank{ font-family:var(--font-mono); font-weight:700; width:34px; text-align:center; }
.lb-row.top1 .lb-rank{ color:var(--spark-deep); font-size:1.15rem; }
.lb-row.me{ background:var(--violet-soft); border-radius:10px; }
.lb-name{ flex:1; font-weight:600; }
.lb-sp{ font-family:var(--font-mono); font-weight:700; color:var(--spark-deep); }

/* ---------- Auth screen ---------- */
.auth-shell{ display:grid; grid-template-columns:1.1fr 1fr; min-height:100vh; }
.auth-hero{ background:var(--ink); color:#fff; display:flex; align-items:center; padding:50px; position:relative; overflow:hidden; }
.auth-hero::after{
  content:"⚡"; position:absolute; font-size:26rem; right:-70px; bottom:-100px;
  opacity:.07; transform:rotate(-14deg); pointer-events:none;
}
.auth-hero-inner{ max-width:520px; position:relative; z-index:1; }
.auth-strap{ font-size:2.4rem; font-weight:800; margin:34px 0 14px; }
.spark-word{ color:var(--spark); }
.auth-sub{ color:#c9cde8; font-size:1.02rem; }
.auth-points{ list-style:none; padding:0; margin:22px 0 0; }
.auth-points li{ padding:7px 0 7px 30px; position:relative; color:#e3e5f5; }
.auth-points li::before{ content:"⚡"; position:absolute; left:0; color:var(--spark); }
.auth-panel{ display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.auth-card{ width:100%; max-width:400px; }
.demo-accounts{ margin-top:18px; border-top:1px dashed var(--line); padding-top:12px; }
.demo-grid{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Toasts / modal ---------- */
.toast-stack{ position:fixed; bottom:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:10px; }
.toast{
  background:var(--ink); color:#fff; border-radius:12px; padding:12px 18px;
  box-shadow:var(--shadow); font-size:.9rem; display:flex; gap:10px; align-items:center;
  animation:toast-in .25s ease;
}
.toast .flame{ color:var(--spark); }
@keyframes toast-in{ from{ transform:translateY(12px); opacity:0; } }

.modal-scrim{ position:fixed; inset:0; background:rgba(20,24,48,.55); z-index:150; display:grid; place-items:center; padding:20px; }
.modal{ background:var(--card); border-radius:var(--radius); max-width:640px; width:100%; max-height:88vh; overflow:auto; padding:24px; box-shadow:var(--shadow); }
.modal h3{ margin-top:0; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* Filters bar */
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.filter-bar select, .filter-bar input{ font:inherit; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; }

/* Announcement */
.announce{ border-left:4px solid var(--spark); background:#FFFBEF; border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:18px; }
.announce b{ display:block; }

/* Streak flame widget */
.streak-flame{ display:flex; align-items:center; gap:12px; }
.streak-flame .big{ font-size:2.2rem; }
.streak-days{ display:flex; gap:5px; margin-top:5px; }
.streak-days i{ width:20px; height:20px; border-radius:6px; background:#EBEDF6; display:grid; place-items:center; font-style:normal; font-size:.65rem; color:var(--muted); }
.streak-days i.lit{ background:var(--spark); color:var(--ink); font-weight:700; }

/* Empty state */
.empty{ text-align:center; padding:40px 20px; color:var(--muted); }
.empty .ico{ font-size:2.4rem; display:block; margin-bottom:8px; }

/* ---------- Responsive ---------- */
@media (max-width: 940px){
  .app-shell{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; z-index:100; width:260px; height:100vh; transform:translateX(-100%); transition:transform .2s ease; }
  .sidebar.open{ transform:none; box-shadow:0 0 0 100vmax rgba(0,0,0,.35); }
  .hamburger{ display:block; }
  .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); }
  .auth-shell{ grid-template-columns:1fr; }
  .auth-hero{ padding:34px 24px; }
  .auth-strap{ font-size:1.7rem; }
  .view{ padding:18px 16px 60px; }
  .form-row{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ============================================================
   Phase 2 — exam engine v2 & topic analytics
   ============================================================ */
.section-banner{background:var(--violet-soft);color:var(--violet);font-weight:700;font-size:.85rem;
  padding:7px 12px;border-radius:8px;margin-bottom:10px;letter-spacing:.02em}
.stimulus{background:#FFFDF4;border:1px solid #F0E6C8;border-radius:10px;padding:12px 14px;margin-bottom:12px;line-height:1.55}
.stimulus p{margin:0 0 8px}.stimulus p:last-child{margin:0}
.q-option img,.stimulus img,#q-body img,#exam-body img{max-width:100%;max-height:220px;display:block;margin-top:6px;border-radius:8px}
.q-option.multi .key{border-radius:6px}
.fib-body{line-height:2.1;font-size:1.02rem}
.fib-input{font:inherit;padding:4px 8px;margin:0 3px;border:2px solid var(--violet);border-radius:8px;
  min-width:110px;background:var(--violet-soft)}
.fib-input:focus{outline:2px solid var(--spark)}
.fib-review{display:inline-block;padding:2px 8px;border-radius:6px;font-weight:700;margin:0 2px}
.fib-review.ok{background:var(--green-soft);color:var(--green)}
.fib-review.bad{background:var(--red-soft);color:var(--red);text-decoration:line-through}
.fib-expected{color:var(--green);font-weight:700}

.donut{width:120px;height:120px}
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:16px}
.stat-strip>div{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 14px;text-align:center}
.stat-strip span{display:block;letter-spacing:.08em}
.stat-strip b{font-size:1.25rem}

.topic-table .progress{height:8px;margin:0}
.progress.rag-green i{background:var(--green)}
.progress.rag-amber i{background:var(--spark)}
.progress.rag-red i{background:var(--red)}
.tag.rag-green{background:var(--green-soft);color:var(--green)}
.tag.rag-amber{background:#FFF4DB;color:#9A6B00}
.tag.rag-red{background:var(--red-soft);color:var(--red)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.dot.rag-green{background:var(--green)}.dot.rag-amber{background:var(--spark)}.dot.rag-red{background:var(--red)}
.radar{width:100%;max-width:320px;display:block;margin:0 auto}

.next-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.next-step{border:1px solid var(--line);border-left:4px solid var(--red);border-radius:10px;padding:12px}
.next-step .step-no{display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--red-soft);
  color:var(--red);font-weight:800;align-items:center;justify-content:center;margin-bottom:6px}
.next-step b{display:block;margin-bottom:4px}

.trend{display:flex;gap:14px;align-items:flex-end;height:120px;padding:6px 2px}
.trend-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;width:44px}
.trend-bar i{display:block;width:26px;border-radius:6px 6px 0 0;min-height:4px}
.trend-bar.current i{outline:3px solid var(--spark)}
.trend-bar span{margin-top:4px}

/* ============================================================
   Phase 3 — shop & commerce
   ============================================================ */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.shop-card h3{margin:6px 0 2px}
.price{font-size:1.5rem;font-weight:800;color:var(--ink)}
.price .small{font-weight:600}
#paypal-zone{min-height:44px}

/* v5.2 — dashboard greeting banner */
.hello-banner{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:14px 18px;margin-bottom:16px}
.hello-ava{width:52px;height:52px;border-radius:50%;background:var(--violet-soft);color:var(--violet);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:1.4rem;flex:none}
.hello-level{font-size:.95rem;background:#FFF4DB;color:#9A6B00;border-radius:999px;padding:3px 10px;vertical-align:middle}

/* v5.2 — lesson content blocks */
.lesson-text{line-height:1.7}
.lesson-text ul,.lesson-text ol{padding-left:22px}
.lesson-text img{max-width:100%;border-radius:10px}
.lesson-block h3{margin:0 0 10px}
.code-frame,.embed-frame{width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;display:block}
.lb-row{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px;background:var(--paper)}
.lb-head{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.lb-head .lb-type{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:8px}
.lb-editor textarea,.lb-editor input[type=text],.lb-editor input:not([type]){width:100%;font:inherit;border:1px solid var(--line);
  border-radius:8px;padding:8px;margin-bottom:6px;box-sizing:border-box}
.lbe-code{font-family:var(--font-mono,monospace);font-size:.85rem}

/* ============================================================
   v6 — Seneca-style app shell: light collapsible sidebar,
   Nunito, blue actives, split question layouts, richer reviews.
   ============================================================ */
body{ font-family:'Nunito','Segoe UI',system-ui,sans-serif; }
.app-shell{ background:#F4F7FC; }
.view h1,.view h2,.view h3{ font-family:'Nunito',sans-serif; font-weight:800; letter-spacing:-.01em; }

/* ---- sidebar: Seneca light ---- */
.sidebar{
  background:#fff; color:#3D4B66; border-right:1px solid #E8EDF5;
  width:236px; transition:width .18s ease; position:relative;
}
.sidebar .brand{ color:#26304e; text-decoration:none; display:flex; align-items:center; gap:10px; }
.sidebar .brand:hover .brand-name{ color:#4076F6; }
.sidebar .brand-name em{ color:#4076F6; }
.sidebar .brand-mark{ box-shadow:0 3px 8px rgba(255,179,0,.35); }
.side-nav a{
  color:#5A6B8C; border-radius:12px; font-weight:700; font-size:.95rem;
  display:flex; align-items:center; gap:11px; padding:10px 12px; margin:2px 8px;
}
.side-nav a:hover{ background:#F2F6FF; color:#26304e; }
.side-nav a.active{ background:#EAF1FF; color:#2F63E0; }
.side-nav a .ico{ font-size:1.12rem; width:22px; text-align:center; }
.side-nav .nav-group{ color:#9AA6BF; font-size:.66rem; margin:18px 20px 4px; }
.sidebar-foot{ border-top:1px solid #E8EDF5; }
.me-chip{ color:#26304e; }
.me-chip .small{ color:#8A96AF; }
.sidebar .btn-ghost{ color:#5A6B8C; border-color:#DCE3EF; }
.sidebar .btn-ghost:hover{ border-color:#4076F6; color:#2F63E0; }
.collapse-btn{
  position:absolute; top:18px; right:-13px; z-index:5; width:26px; height:26px; border-radius:50%;
  border:1px solid #E8EDF5; background:#fff; color:#5A6B8C; font-weight:900; cursor:pointer;
  box-shadow:0 2px 8px rgba(61,75,102,.14); line-height:1;
}
.collapse-btn:hover{ color:#2F63E0; border-color:#4076F6; }

/* collapsed state: icon rail, labels hidden */
.side-collapsed .sidebar{ width:74px; }
.side-collapsed .side-nav a{ justify-content:center; padding:11px 0; margin:2px 10px; }
.side-collapsed .side-nav a .ico{ width:auto; }
.side-collapsed .side-nav a span + *,
.side-collapsed .side-nav a{ font-size:0; }
.side-collapsed .side-nav a .ico{ font-size:1.3rem; }
.side-collapsed .brand-name, .side-collapsed .nav-group,
.side-collapsed .me-chip, .side-collapsed #btn-logout{ display:none; }
.side-collapsed .brand{ justify-content:center; }
.side-collapsed .sidebar-foot{ border-top:0; }
@media (max-width:900px){ .collapse-btn{ display:none; } .side-collapsed .sidebar{ width:260px; } }

/* ---- topbar: light ---- */
.topbar{ background:#fff; border-bottom:1px solid #E8EDF5; color:#26304e; }
.topbar-title{ font-family:'Nunito',sans-serif; font-weight:800; }

/* ---- cards ---- */
.card{ border:1px solid #E8EDF5; border-radius:16px; box-shadow:0 4px 14px rgba(61,75,102,.05); }
.btn-primary{ background:#4076F6; border-radius:12px; }
.btn-primary:hover{ background:#2F63E0; }

/* ---- v6 split question layout ---- */
.q-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:start; }
.q-side-q .stimulus{ margin-top:0; }
.q-side-q img, .q-side-a img{ max-width:100%; border-radius:10px; }
@media (max-width:860px){ .q-split{ grid-template-columns:1fr; gap:10px; } }

/* ---- v6 review cards ---- */
.review-q{ border:1px solid #E8EDF5; border-radius:14px; padding:16px 18px; margin-bottom:22px; background:#fff; }
.review-explain{
  margin-top:14px; background:#F6F8FF; border-left:4px solid #4F46B8;
  padding:12px 16px; border-radius:0 10px 10px 0; font-size:.95rem; line-height:1.6;
}
.explain-video{ display:block; width:100%; max-width:560px; aspect-ratio:16/9; border:0; border-radius:10px; margin-top:10px; }
.sample-answer{
  margin-top:10px; background:#FFFDF4; border:1px dashed #FFB300; border-radius:10px; padding:12px 16px;
}
.sample-answer b{ display:block; margin-bottom:6px; }
.creative-note{
  background:#FFF7E6; border:1px solid #FFE1A6; border-radius:12px; padding:14px 16px;
}
.creative-note p{ margin:6px 0 0; }
#exam-palette button.na{ background:#F2F6FF; color:#4076F6; border-color:#C9D9FB; }

/* dashboard greeting inherits the lighter look */
.hello-banner{ border:1px solid #E8EDF5; box-shadow:0 4px 14px rgba(61,75,102,.05); }

/* v6.1 — card payments */
.pay-divider{ display:flex; align-items:center; gap:10px; margin:14px 0 10px; color:#8A96AF; font-size:.8rem; font-weight:700; }
.pay-divider::before,.pay-divider::after{ content:""; flex:1; height:1px; background:#E8EDF5; }
#stripe-pay.btn-block{ width:100%; }

/* v6.2 — course home: tree, status, hero */
.course-hero{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.course-hero .course-thumb.lg{ width:92px; height:92px; border-radius:16px; background:#EAF1FF;
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none; }
.course-hero .course-thumb.lg img{ width:100%; height:100%; object-fit:cover; }
.course-hero .course-emoji{ font-size:2.6rem; }
.course-layout{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:18px; margin-top:16px; align-items:start; }
@media (max-width:900px){ .course-layout{ grid-template-columns:1fr; } }
.course-tree{ padding:10px; position:sticky; top:74px; max-height:calc(100vh - 100px); overflow:auto; }
.ci-section{ border-bottom:1px solid #EEF2F8; padding:4px 0; }
.ci-section:last-child{ border-bottom:0; }
.ci-section summary{ display:flex; gap:10px; align-items:center; cursor:pointer; list-style:none; padding:9px 8px; border-radius:10px; }
.ci-section summary:hover{ background:#F5F8FE; }
.ci-section summary::-webkit-details-marker{ display:none; }
.ci-ring{ width:20px; height:20px; border-radius:50%; flex:none;
  background:conic-gradient(#4076F6 calc(var(--p) * 1%), #E3E9F4 0); position:relative; }
.ci-ring::after{ content:""; position:absolute; inset:4px; background:#fff; border-radius:50%; }
.ci-ring.full{ background:#2FBF8F; }
.ci-ring.full::after{ content:"✓"; inset:0; background:none; color:#fff; font-size:.7rem; font-weight:900;
  display:flex; align-items:center; justify-content:center; }
.ci-sub{ font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#9AA6BF; margin:8px 8px 2px; }
.ci-item{ display:flex; gap:8px; align-items:center; padding:8px; border-radius:10px; text-decoration:none;
  color:#3D4B66; font-weight:600; font-size:.92rem; }
.ci-item:hover{ background:#EAF1FF; }
.ci-item.is-done{ color:#8A96AF; }
.ci-ico{ flex:none; }
.ci-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ci-meta{ flex:none; }
.ci-dot{ width:14px; height:14px; border-radius:50%; border:2px solid #C9D4E5; flex:none; display:inline-flex;
  align-items:center; justify-content:center; font-size:.62rem; color:#fff; }
.ci-dot.done{ background:#2FBF8F; border-color:#2FBF8F; }
.ci-best{ flex:none; font-size:.7rem; font-weight:900; border-radius:999px; padding:2px 8px; }
.ci-best.ok{ background:#E2F7EF; color:#1D8F69; }
.ci-best.warn{ background:#FDF1DA; color:#A06B00; }
.cf-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:3px 0; border-bottom:1px dashed #EEF2F8; }
.cf-structure{ display:flex; gap:6px; }
.cf-structure input{ font:inherit; font-size:.82rem; padding:5px 8px; border:1px solid var(--line); border-radius:8px; width:190px; }

/* v6.3 — course-first navigation */
.side-nav a .lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ci-course-head{ display:block; padding:10px 8px; border-bottom:1px solid #EEF2F8; margin-bottom:4px;
  text-decoration:none; color:#26304e; font-size:.95rem; }
.ci-course-head:hover{ color:#2F63E0; }
.ci-item.active{ background:#EAF1FF; color:#2F63E0; font-weight:800; }
.course-navbar{ display:flex; justify-content:space-between; gap:10px; margin-top:18px; flex-wrap:wrap; }
.course-navbar .btn{ max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lesson-in-course .course-tree{ top:74px; }
@media (max-width:900px){ .course-navbar .btn{ max-width:100%; flex:1 1 100%; } }

/* v6.5 — GL/FSCE sectioned mocks */
.sec-count{ font-weight:700; opacity:.8; font-size:.82em; }
#exam-palette button.locked{ opacity:.45; cursor:not-allowed; background:#F2F4F9; }
.exam-break{ text-align:center; padding:34px 16px; }
.eb-ico{ font-size:2.6rem; display:block; margin-bottom:6px; }
.exam-break h2{ margin:.2em 0; }
.eb-next{ font-size:1.05rem; }
.eb-count{ width:76px; height:76px; border-radius:50%; margin:14px auto; background:#EAF1FF; color:#2F63E0;
  display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:900;
  border:3px solid #C9D9FB; animation:ebpulse 1s ease-in-out infinite; }
@keyframes ebpulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
.st-box{ border:1px dashed var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; }
.st-row{ display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.st-row .st-name{ flex:1; font:inherit; padding:7px 10px; border:1px solid var(--line); border-radius:8px; }
.st-row .st-mins{ width:64px; font:inherit; padding:6px; border:1px solid var(--line); border-radius:8px; }

/* v6.6 — content protection (students only, admin-toggleable) */
body.cp-on{ -webkit-user-select:none; user-select:none; }
body.cp-on input, body.cp-on textarea, body.cp-on select, body.cp-on [contenteditable]{ -webkit-user-select:text; user-select:text; }
body.cp-on img{ -webkit-user-drag:none; user-drag:none; }
@media print{ body.cp-on #app{ display:none !important; } }