/* ============================================================
   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;
  transition:grid-template-columns .22s ease; }
.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:2px 4px; 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; }

/* v7.30: real logo image (Bright Sparks) — sits in the mark slot, shown in
   every theme. Contained so the full logo is visible, not cropped. */
.brand-logo-img{ width:42px; height:42px; object-fit:contain; display:block; border-radius:10px; background:#fff; padding:3px; }
.brand-lg .brand-logo-img{ width:56px; height:56px; }
.sidebar .brand-logo-img{ box-shadow:0 2px 6px rgba(0,0,0,.12); }

.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{  }
.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-size:.8rem;
  display:flex; align-items:center; gap:11px; padding:10px 12px; margin:2px 4px;
}
.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.
   v7.18.1: the GRID column collapses too, so the page content slides left and
   actually uses the reclaimed space (previously only the sidebar element
   shrank inside a fixed 250px track, leaving a dead gutter). */
@media (min-width:941px){ .app-shell.side-collapsed{ grid-template-columns:74px 1fr; } }
.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 */
/* v7.8: long course titles wrap (max 3 lines) instead of truncating with "…" —
   the sidebar stays the same width; the row simply grows a little taller. */
.side-nav a{ align-items:flex-start; }
.side-nav a .ico{ margin-top:1px; flex:0 0 auto; }
.side-nav a .lbl{ white-space:normal; overflow-wrap:anywhere; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* the collapsed (icon-only) sidebar keeps hiding labels exactly as before */
.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; } }

/* ============================================================
   v7 — sectioned exam pages (one page per timed section)
   ============================================================ */
.sec-page-banner{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px;
  position:sticky; top:0; z-index:5; box-shadow:0 4px 12px rgba(28,34,64,.06); }
.qblock{ background:var(--card); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:14px; scroll-margin-top:64px; transition:box-shadow .2s, border-color .2s; }
.qblock.is-flagged{ border-color:var(--spark); box-shadow:0 0 0 1px var(--spark); }
.qblock.q-pulse{ border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft); }
.qblock-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.qblock-num{ font-family:var(--font-display); font-weight:800; color:var(--violet);
  background:var(--violet-soft); border-radius:8px; padding:2px 10px; }
.qflag{ margin-left:auto; border:1.5px solid var(--line); background:var(--card); border-radius:8px;
  width:32px; height:32px; cursor:pointer; font-size:1rem; color:var(--muted); }
.qflag:hover{ border-color:var(--spark); color:var(--spark-deep); }
.qblock.is-flagged .qflag{ background:var(--spark); border-color:var(--spark); color:#fff; }
.sec-foot{ margin-top:18px; padding-top:14px; border-top:1.5px dashed var(--line);
  display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.sec-foot p{ margin:0; }
.sec-track{ height:8px; background:var(--line); border-radius:99px; overflow:hidden; }
.sec-track i{ display:block; height:100%; background:linear-gradient(90deg,var(--violet),#8F93E8); border-radius:99px; transition:width .3s; }
.exam-side-inner{ position:sticky; top:16px; }
#exam-palette button.locked{ opacity:.45; cursor:not-allowed; }
@media (max-width:760px){
  .exam-layout{ grid-template-columns:1fr !important; }
  .exam-side{ order:-1; }
  .exam-side-inner{ position:static; }
}

/* v7.1: reCAPTCHA slot */
.captcha-slot{ margin:6px 0 10px; min-height:0; }
.taster-form .captcha-slot{ width:100%; display:flex; justify-content:center; }

/* v7.2 — paused accounts */
.paused-banner{ background:#FFF6DE; border:2px solid #F0C948; border-radius:var(--radius);
  padding:14px 18px; margin-bottom:16px; }
.paused-banner p{ margin:6px 0 0; color:#7A5C00; }
tr.row-paused td{ background:#FFFBEE; }
.check.small{ font-size:.85rem; }

/* v7.7 — bank transfer checkout */
.bank-details{ width:100%; border-collapse:collapse; margin-top:8px; }
.bank-details td{ padding:7px 10px; border-bottom:1px solid var(--line); }
.bank-details td:first-child{ width:130px; }
.bank-details tr:last-child td{ border-bottom:none; background:#FFF9E8; border-radius:8px; }

/* ============================================================
   v7.8 — mobile-friendly app
   ============================================================ */
html,body{overflow-x:hidden}
#view img{max-width:100%;height:auto}
@media (max-width:760px){
  input,select,textarea{font-size:16px}
  table.data,table.table,.topic-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  table.data th,table.data td,table.table th,table.table td{white-space:nowrap}
  /* toasts live bottom-right, so the exam clock pins bottom-left */
  .exam-timer{position:fixed;bottom:14px;left:12px;z-index:120;box-shadow:0 6px 18px rgba(20,24,48,.25)}
  .exam-side .palette{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  #exam-palette button{min-width:36px;min-height:36px;flex:0 0 auto}
  .q-option{padding:12px 12px;min-height:44px}
}
@media (max-width:560px){
  .modal-scrim{padding:10px}
  .modal{padding:18px 14px;max-height:94dvh;border-radius:14px}
  .modal-actions{flex-wrap:wrap}
  .modal-actions .btn{flex:1 1 auto}
  .view{padding:14px 12px 70px}
  .card{padding:14px}
  .filter-bar select,.filter-bar input{flex:1 1 100%;width:100%}
  .topbar h1,#topbar-title{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .auth-hero{padding:24px 18px}
  .auth-strap{font-size:1.35rem}
  .auth-card{padding:20px 16px}
}
@media (max-width:940px){
  .sidebar{height:100dvh}
}
@media (max-width:900px){
  .course-tree{position:static;max-height:280px}
}

/* v7.9 — one-question-per-page mock exams */
.qnav-row{ display:flex; justify-content:space-between; gap:10px; margin:16px 0 4px; }
.qnav-row .btn{ min-width:120px; }

/* v7.9 — traceability watermark (content protection on, students only) */
#cp-watermark{ position:fixed; inset:0; z-index:95; pointer-events:none; background-repeat:repeat; }
@media print{ #cp-watermark{ position:absolute; } } /* belt & braces — printing is already blocked */

/* ============================================================
   v7.11 — Concept Builder
   ============================================================ */
.cb-card{ max-width:980px; margin:0 auto; }
.cb-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cb-title{ margin:0; flex:1; }
.cb-sp{ background:var(--violet-soft); border:2px solid var(--violet); border-radius:999px; padding:4px 12px; font-weight:800; color:var(--violet); }
.cb-example{ background:#EDF2FF; border:2px solid #C9D6F5; border-radius:14px; padding:12px 14px; margin:12px 0 4px; }
.cb-badge{ display:inline-block; background:var(--violet); color:#fff; font-size:.7rem; font-weight:900;
  letter-spacing:.06em; border-radius:999px; padding:3px 10px; margin-bottom:6px; }
.cb-badge.sensei{ background:#4F46B8; color:#fff; }
.cb-badge.hint{ background:#FFD6E7; }
.cb-instr{ margin:10px 0 4px; }
.cb-label{ letter-spacing:.08em; font-weight:800; margin:8px 0 6px; }
.cb-slots{ display:flex; flex-direction:column; gap:8px; }
.cb-slot{ display:flex; align-items:center; gap:10px; border:2px dashed var(--line); border-radius:14px;
  padding:8px 10px; min-height:52px; background:#fff; }
.cb-slot.filled{ border-style:solid; }
.cb-slot.cb-right{ border-color:#2E9E5B; background:#F0FAF3; }
.cb-slot.cb-wrong{ border-color:#D64562; background:#FDF1F4; animation:cbshake .3s; }
@keyframes cbshake{ 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.cb-num{ flex:0 0 26px; height:26px; border-radius:50%; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; }
.cb-ghost{ color:#9AA4BC; font-size:.92rem; }
.cb-pool{ display:flex; flex-wrap:wrap; gap:10px; }
.cb-step{ font:inherit; text-align:left; background:#E7EEFF; border:2px solid var(--ink); border-radius:12px;
  padding:12px 14px; cursor:grab; box-shadow:2px 3px 0 rgba(20,24,48,.35); max-width:100%; min-height:44px;
  touch-action:none; user-select:none; -webkit-user-select:none; }
.cb-step:hover{ transform:translateY(-1px); }
.cb-step.placed{ background:#fff; box-shadow:none; flex:1; }
.cb-actions{ margin-top:16px; display:flex; flex-direction:column; gap:8px; align-items:center; }
.cb-actions .btn{ max-width:420px; }
.cb-actions .linky{ background:none; border:0; cursor:pointer; color:var(--muted); font:inherit; }
.cb-pop-scrim{ position:fixed; inset:0; background:rgba(43,46,90,.45); z-index:140; }
.cb-pop{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:145; background:#fff;
  border-radius:18px; padding:22px; width:min(460px,94vw); max-height:90dvh; overflow:auto; text-align:center;
  box-shadow:0 18px 50px rgba(20,24,48,.35); animation:cbpop .25s; }
@keyframes cbpop{ from{ transform:translate(-50%,-46%); opacity:0 } }
.cb-pop-ico{ font-size:2.6rem; }
.cb-pop.good h3{ color:#2E9E5B; margin:6px 0; }
.cb-pop.tryagain h3{ color:#D64562; margin:6px 0; }
.cb-sp-flash{ font-weight:900; color:#B8860B; font-size:1.15rem; margin:4px 0 10px; }
.cb-sensei{ text-align:left; background:#F4F3FF; border:2px solid #DDD9F5; border-radius:14px; padding:12px 14px; margin:10px 0 14px; }
.cb-sensei.hint{ background:#FFF5F9; border-color:#F6D5E3; }
.cb-finish{ text-align:center; padding:26px 10px; }
.cb-finish-ico{ font-size:3.2rem; }
.ci-cb{ font-size:.72rem; font-weight:800; background:#EEF1F8; border-radius:999px; padding:2px 7px; color:var(--muted); }
.ci-cb.part{ background:var(--violet-soft); color:var(--violet); }
@media (max-width:560px){ .cb-step{ width:100%; } }


/* v7.12 — drag & drop for Concept Builder */
.cb-step.cb-dragging{ opacity:.35; }
.cb-drag-ghost{ position:fixed; z-index:220; pointer-events:none; transform:rotate(3deg); opacity:.95;
  box-shadow:0 10px 24px rgba(20,24,48,.35); }
.cb-slot.cb-over{ border-color:var(--violet); border-style:solid; background:var(--violet-soft); }
.cb-pool.cb-over{ outline:3px dashed var(--violet); outline-offset:4px; border-radius:12px; }

/* ============================================================
   v7.13 — Weekly Classroom
   ============================================================ */
.ci-section.ci-locked summary{ opacity:.65; cursor:pointer; }
.ci-due{ font-size:.7rem; font-weight:800; background:var(--violet-soft); color:var(--violet);
  border-radius:999px; padding:2px 8px; margin-left:auto; white-space:nowrap; }
.ci-due.late{ background:var(--red-soft); color:var(--red); }
.ci-item .ci-due{ margin-left:6px; }
.tw-card{ margin-bottom:16px; }
.tw-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.tw-head h3{ margin:0; }
.tw-items{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.tw-item{ display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line);
  border-radius:12px; text-decoration:none; color:inherit; }
.tw-item:hover{ border-color:var(--violet); background:var(--violet-soft); }
.tw-item.done{ opacity:.7; }
.tw-late{ color:var(--red); font-weight:700; }
.ws-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:6px 0; border-bottom:1px dashed var(--line); }
.ws-row input{ font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:8px; }
.cf-hw{ display:inline-flex; gap:4px; align-items:center; white-space:nowrap; }

/* v7.15 — activity audit */
.act-list{ max-height:420px; overflow:auto; border:1px solid var(--line); border-radius:12px; padding:6px 12px; }
.act-day{ font-weight:800; font-size:.8rem; color:var(--muted); letter-spacing:.04em; margin:10px 0 4px; border-bottom:1px dashed var(--line); padding-bottom:2px; }
.act-row{ display:flex; gap:10px; padding:4px 0; align-items:baseline; }
.act-time{ flex:0 0 44px; font-family:var(--font-mono); }
.act-row code{ background:var(--paper); padding:1px 6px; border-radius:6px; font-size:.82rem; }

/* ---------- v7.16: course order modal + dashboard "My courses" ---------- */
#co-list{ max-height:min(58vh,520px); overflow:auto; border:1px solid var(--line); border-radius:12px; padding:8px; }
.co-section{ border:1px solid var(--line); border-radius:12px; margin:0 0 10px; overflow:hidden; background:#fff; }
.co-section:last-child{ margin-bottom:0; }
.co-sec-head{ display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--paper); border-bottom:1px solid var(--line); }
.co-sec-items{ padding:6px; display:flex; flex-direction:column; gap:4px; min-height:20px; }
.co-item{ display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.co-grip{ color:var(--muted); cursor:default; font-size:.9rem; }
.co-title{ flex:1; min-width:0; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.co-btns{ display:flex; gap:2px; margin-left:auto; }
.co-btns .btn{ padding:2px 8px; line-height:1.2; }
.co-moved{ outline:2px solid var(--violet); outline-offset:1px; transition:outline-color .3s; }

.mc-row{ display:flex; flex-direction:column; gap:10px; }
.mc-card{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.mc-card .course-thumb.sm{ width:56px; height:56px; border-radius:12px; background:#EAF1FF; display:flex; align-items:center; justify-content:center; font-size:1.6rem; flex:none; overflow:hidden; }
.mc-card .course-thumb.sm img{ width:100%; height:100%; object-fit:cover; }
.mc-body{ flex:1; min-width:220px; }
.mc-body h3{ margin:0 0 4px; }
.mc-body .progress{ max-width:420px; }
@media (max-width:640px){ .mc-card{ align-items:flex-start; } .mc-card .btn{ width:100%; text-align:center; } }

/* ============ v7.17: celebrations + futuristic polish ============ */

/* confetti */
#confetti-layer{ position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden; }
.confetti-piece{ position:absolute; top:-18px; border-radius:2px; opacity:.95;
  animation:confetti-fall linear forwards; will-change:transform,opacity; }
.confetti-piece.round{ border-radius:50%; }
@keyframes confetti-fall{
  0%{ transform:translate3d(0,-20px,0) rotate(0deg); opacity:1; }
  100%{ transform:translate3d(var(--drift,40px),105vh,0) rotate(var(--spin,540deg)); opacity:.85; } }

/* personal-best ribbon */
.pb-ribbon{ display:inline-block; margin:0 auto 12px; padding:8px 22px; border-radius:999px;
  font-weight:800; letter-spacing:.06em; color:#5C3A00;
  background:linear-gradient(110deg,#FFD34D,#FFB300 40%,#FFE9A8 50%,#FFB300 60%,#FFD34D);
  background-size:220% 100%; animation:pb-shimmer 2.4s linear infinite;
  box-shadow:0 4px 18px rgba(255,179,0,.45), inset 0 1px 0 rgba(255,255,255,.6); }
@keyframes pb-shimmer{ to{ background-position:-220% 0; } }
.celebrate-card{ position:relative; overflow:hidden; }
.celebrate-card::before{ content:""; position:absolute; inset:-40% -10% auto; height:70%;
  background:radial-gradient(ellipse at 50% 0%, rgba(79,70,184,.10), transparent 65%); pointer-events:none; }

/* streak freeze banner */
.announce-freeze{ background:linear-gradient(100deg,#E8F4FF,#F2FBFF); border-left:4px solid #4DA3FF; }

/* futuristic polish — glassy cards, gradient accents, gentle motion */
.stat-card{ position:relative; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; }
.stat-card::after{ content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,var(--violet),#7C74E0 45%,var(--spark)); opacity:.85; }
.stat-card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(28,34,64,.10); }
.stat-spark::after{ background:linear-gradient(90deg,var(--spark),#FFD34D); }
.card{ transition:box-shadow .18s ease; }
.btn-primary, .btn-spark{ position:relative; transition:transform .12s ease, box-shadow .18s ease; }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(79,70,184,.35); }
.btn-spark:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(255,179,0,.40); }
.progress i{ position:relative; overflow:hidden; }
.progress i::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  background-size:220% 100%; animation:bar-shine 2.6s ease-in-out infinite; }
@keyframes bar-shine{ 0%{ background-position:180% 0; } 100%{ background-position:-80% 0; } }
.score-ring{ box-shadow:0 0 0 6px rgba(79,70,184,.08), 0 8px 30px rgba(79,70,184,.18); }
.mc-card{ transition:transform .18s ease, box-shadow .18s ease; }
.mc-card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(28,34,64,.10); }
@media (prefers-reduced-motion: reduce){
  .confetti-piece, .pb-ribbon, .progress i::after{ animation:none !important; }
  .stat-card, .btn-primary, .btn-spark, .mc-card{ transition:none !important; } }

/* v7.17: dashboard progress snapshot */
.snap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:820px){ .snap-grid{ grid-template-columns:1fr; } }
.rag-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.mock-hist{ display:flex; flex-direction:column; gap:6px; }
.mock-hist-row{ display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--line);
  border-radius:10px; text-decoration:none; color:inherit; transition:border-color .15s, background .15s; }
.mock-hist-row:hover{ border-color:var(--violet); background:var(--violet-soft); }
.mock-hist-row .mh-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }

/* v7.18: question title label above the content */
.q-title{ font-weight:700; color:var(--ink-soft); margin-bottom:4px; }

/* ============ v7.18.1: focus mode (full screen) + button ============ */
.btn-fullscreen{ width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
  background:#fff; color:var(--ink-soft); font-size:1.05rem; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  transition:transform .12s ease, box-shadow .15s ease, border-color .15s; }
.btn-fullscreen:hover{ border-color:var(--violet); color:var(--violet);
  transform:translateY(-1px); box-shadow:0 4px 14px rgba(79,70,184,.22); }
body.focus-mode .sidebar, body.focus-mode .topbar{ display:none !important; }
body.focus-mode .app-shell{ grid-template-columns:1fr !important; }
body.focus-mode #view{ padding-top:14px; }
body.focus-mode .btn-fullscreen{ border-color:var(--violet); color:var(--violet); background:var(--violet-soft); }

/* ============ v7.22: PowerPoint slide decks in lessons ============ */
.slide-deck{ padding-bottom:8px; }
.slide-stage{ position:relative; border:1px solid var(--line); border-radius:14px; background:#fff;
  padding:clamp(16px,3vw,32px); min-height:260px; overflow:hidden;
  background-image:radial-gradient(ellipse at 50% 0%, rgba(79,70,184,.045), transparent 70%); }
.slide-title{ margin:0 0 14px; font-size:clamp(1.2rem,2.4vw,1.75rem); color:var(--violet);
  border-bottom:2px solid var(--violet-soft); padding-bottom:8px; }
.slide-body{ font-size:clamp(1rem,1.5vw,1.12rem); line-height:1.65; }
.slide-body p{ margin:0 0 10px; }
.slide-body img{ max-width:100%; height:auto; border-radius:10px; margin:8px 0; display:block; }
.slide-body video{ width:100%; max-height:58vh; border-radius:10px; background:#000; margin:8px 0; display:block; }
.slide-body iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:10px; margin:8px 0; display:block; }
.slide-body table{ width:100%; border-collapse:collapse; margin:8px 0; }
.slide-body td, .slide-body th{ border:1px solid var(--line); padding:6px 10px; }
/* v7.24 — "Original design" slides: the rendered picture is the slide; video
   players are absolutely positioned over it in percent coordinates, so they
   stay glued to their spot at any width. */
.slide-deck-visual .slide-stage{ padding:0; border:0; background:#0b0d17; }
.slide-visual{ position:relative; width:100%; }
.slide-visual .slide-shot{ display:block; width:100%; height:100%; object-fit:contain; }
.slide-overlay{ position:absolute; border-radius:6px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.35); }
.slide-overlay video, .slide-overlay iframe{ width:100%; height:100%; display:block; border:0; background:#000; }
.slide-below-video{ padding:10px clamp(10px,2vw,16px) 4px; }
.slide-below-video video, .slide-below-video iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:10px; background:#000; display:block; }
.slide-nav{ display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }
.slide-dots{ display:flex; gap:6px; flex:1; justify-content:center; flex-wrap:wrap; }
.slide-dot{ width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--line); transition:transform .15s, background .15s; }
.slide-dot:hover{ transform:scale(1.35); background:#B9B4E8; }
.slide-dot.on{ background:var(--violet); transform:scale(1.25); }
.slide-count{ min-width:52px; text-align:right; }
.slide-deck [data-slide-prev]:disabled, .slide-deck [data-slide-next]:disabled{ opacity:.4; cursor:default; }
@media (max-width:640px){
  .slide-nav .btn{ flex:1; }
  .slide-dots{ order:3; width:100%; flex-basis:100%; margin-top:6px; }
  .slide-count{ order:2; }
}
@media (prefers-reduced-motion: reduce){ .slide-dot{ transition:none; } }

/* ============================================================
   v7.25 — Bright Sparks Education palette (BRAND=bright).
   The branding middleware adds .brand-bright to <body>; these
   variable overrides recolour the whole app: blue = primary
   action (BRIGHT), red = accent/highlight (SPARKS). Layout,
   spacing and components are untouched.
   ============================================================ */
body.brand-bright{
  /* v7.31: Kitsu-inspired look — white paper, emerald-green primary,
     sky-blue secondary, sunny accents, soft serif display type,
     rounded Quicksand body */
  --violet:      #0FA97E;  /* primary action — emerald green */
  --violet-soft: #E7F9F1;
  --spark:       #FFCC33;  /* sunny yellow accent */
  --spark-deep:  #E68A00;
  --paper:       #FAFDFC;  /* near-white with a whisper of mint */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  font-family:"Quicksand","Nunito","Trebuchet MS",system-ui,sans-serif;
}
body.brand-bright .btn-primary{ position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 46%), var(--violet);
  box-shadow:0 2px 0 #0B8A66, 0 8px 18px rgba(15,169,126,.28); border-radius:999px; transition:transform .14s, box-shadow .14s; }
body.brand-bright .btn-primary:hover{ background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 46%), #0C9873;
  transform:translateY(-1px); box-shadow:0 2px 0 #0B8A66, 0 12px 24px rgba(15,169,126,.36); }
body.brand-bright .btn-primary::after{ content:""; position:absolute; top:-40%; bottom:-40%; left:-70%; width:38%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-22deg);
  transition:left .5s ease; pointer-events:none; }
body.brand-bright .btn-primary:hover::after{ left:135%; }
body.brand-bright .btn{ border-radius:999px; }
body.brand-bright .brand-logo{ height:40px; width:auto; display:block; }

/* sidebar: fresh active pill */
body.brand-bright .side-nav a.active{
  background:linear-gradient(90deg,#0FA97E,#22D3EE); color:#fff;
  box-shadow:0 6px 16px rgba(15,169,126,.32); border-radius:12px; }
body.brand-bright .side-nav a{ transition:background .15s, transform .12s; border-radius:12px; }
body.brand-bright .side-nav a:hover{ transform:translateX(3px); }
body.brand-bright .brand-name{ font-family:var(--font-display); }
body.brand-bright .brand-name em{ color:var(--violet); font-style:italic; }

/* login page: drifting green→sky lagoon panel with twinkles */
body.brand-bright .auth-hero{
  background:
    linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 58%),
    linear-gradient(118deg, rgba(16,185,129,.9) 0%, rgba(16,185,129,0) 55%),
    linear-gradient(296deg, rgba(79,141,249,.9) 0%, rgba(79,141,249,0) 55%),
    linear-gradient(150deg,#10B981,#22D3EE 40%,#38BDF8 68%,#4F8DF9);
  background-size:320% 100%, 240% 240%, 240% 240%, 220% 220%;
  background-position:-120% 0, 0% 0%, 100% 100%, 0% 0%;
  animation:bsAuthWave 20s ease-in-out infinite alternate;
  position:relative; overflow:hidden; }
body.brand-bright .auth-hero::before, body.brand-bright .auth-hero::after{
  content:"✦"; position:absolute; color:#EAFFF6; opacity:.85; font-size:22px;
  animation:bsAuthTwinkle 3.6s ease-in-out infinite; }
body.brand-bright .auth-hero::before{ top:14%; left:12%; }
body.brand-bright .auth-hero::after{ bottom:16%; right:14%; font-size:30px; animation-delay:-1.6s; }
body.brand-bright .auth-strap{ font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; }
body.brand-bright .auth-strap .spark-word{ font-style:italic; font-weight:800;
  background:linear-gradient(92deg,#EAFFF6,#FFF6C9); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.brand-bright .auth-panel{ background:#fff; }
body.brand-bright .auth-card{ border:1px solid #E3EDEA; border-radius:20px;
  box-shadow:0 20px 50px rgba(21,80,90,.10); }
body.brand-bright .auth-card h2{ font-family:var(--font-display); }
body.brand-bright .auth-card input, body.brand-bright .auth-card select{ border-radius:12px; }
body.brand-bright .auth-card input:focus, body.brand-bright .auth-card select:focus{
  border-color:var(--violet); box-shadow:0 0 0 3px rgba(15,169,126,.18); }
@keyframes bsAuthWave{
  0%  { background-position:-120% 0,   0% 0%,  100% 100%,   0% 0%; }
  33% { background-position:  50% 0,  45% 30%,  55% 55%,   40% 35%; }
  66% { background-position: 150% 0,  70% 60%,  30% 30%,   75% 70%; }
  100%{ background-position: 230% 0,  90% 45%,  10% 80%,  100% 100%; }
}
@keyframes bsAuthTwinkle{ 0%,100%{ opacity:.35; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.2); } }
@media (prefers-reduced-motion:reduce){ body.brand-bright .auth-hero,
  body.brand-bright .auth-hero::before, body.brand-bright .auth-hero::after{ animation:none; } }