/* ==========================================================================
   Magnus Math Playground · World-class UI polish (advanced)
   ========================================================================== */

/* -------------------- THEME TOKENS -------------------- */
:root{
  --bg:#ffffff;
  --ink:#0e1320;
  --muted:#667085;
  --ink-dim:#1f2937;

  --brand:#111827;
  --brand-ink:#ffffff;
  --accent:#2b7cff;
  --accent-ink:#ffffff;

  --ok:#16a34a;
  --bad:#e11d48;
  --warn:#f59e0b;

  --r-xs:10px; --r-sm:12px; --r-md:14px; --r-lg:16px; --r-xl:20px; --r-2xl:24px;
  --sh-soft:0 8px 24px rgba(2, 8, 23, .06);
  --sh-float:0 20px 60px rgba(2, 8, 23, .10);

  --chip:#f6f9ff;
  --chip2:#f4f6ff;

  --line:#e6eaf2;
  --line-strong:#d7ddea;

  --grad:linear-gradient(180deg, #3b82f6 0%, #2b7cff 60%, #1f63d8 100%);

  --fast:120ms;
  --med:220ms;
  --slow:420ms;

  --content-w: 980px;
}
:root.theme-dark{
  --bg:#0b1220;
  --ink:#e6ecff;
  --muted:#9aa6bf;
  --ink-dim:#cdd6ee;

  --brand:#e6ecff;
  --brand-ink:#0b1220;
  --accent:#8ab4ff;
  --accent-ink:#0b1220;

  --chip:#0f172a;
  --chip2:#0e162a;

  --line:#172033;
  --line-strong:#1b2740;

  --sh-soft:0 8px 24px rgba(0,0,0,.35);
  --sh-float:0 20px 60px rgba(0,0,0,.45);
}

/* -------------------- GLOBAL BASE -------------------- */
*{ box-sizing:border-box }
html,body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.65 Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:2px; }

::selection{ background:#dbe7ff; color:#0b1220 }
:root.theme-dark ::selection{ background:#19325e; color:#e6ecff }

html{ scroll-behavior:smooth; }

/* Scrollbar (webkit) */
*::-webkit-scrollbar{ height:10px; width:10px }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#c5d6ff,#a8c0ff);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
:root.theme-dark *::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#31456d,#3e5b97);
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important }
}

/* Focus ring */
:focus-visible{
  outline:3px solid #94bfff;
  outline-offset:2px;
  border-radius:10px;
}

/* Utility: shimmer skeleton */
.skeleton{ position:relative; overflow:hidden; background:color-mix(in oklab, var(--ink) 6%, transparent); }
.skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, color-mix(in oklab, #fff 65%, transparent), transparent);
  animation:shimmer 1.25s infinite;
}
@keyframes shimmer{ 100%{ transform:translateX(100%); } }

/* -------------------- HEADER -------------------- */
.mp-header{
  position:sticky; top:0; z-index:60;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 14px;
  border-bottom:2px solid #ffd400;
  background:var(--bg);
  backdrop-filter:saturate(120%) blur(6px);
}
.mp-brand{ display:flex; align-items:center; gap:10px }
.mp-logo{
  width:24px; height:24px; border-radius:8px; position:relative; overflow:hidden;
  box-shadow:inset 0 0 0 2px var(--brand);
}
.mp-logo::after{
  content:""; position:absolute; inset:4px; border-radius:6px;
  background:conic-gradient(from 210deg, #ffd400 0 90deg, transparent 90deg 360deg);
  transition:transform var(--slow) ease;
}
.mp-brand:hover .mp-logo::after{ transform:rotate(12deg); }
.mp-title{ font-weight:800; letter-spacing:.2px }
.mp-actions{ display:flex; align-items:center; gap:8px }

.icon-btn{
  display:grid; place-items:center;
  inline-size:34px; block-size:34px;
  border-radius:999px;
  border:2px solid var(--brand);
  background:transparent;
  cursor:pointer; position:relative;
  transition:transform var(--fast) ease, background var(--fast) ease, border-color var(--fast) ease, box-shadow var(--fast) ease;
}
.icon-btn:hover{ transform:translateY(-1px); background:color-mix(in oklab, var(--brand) 6%, transparent); box-shadow:var(--sh-soft); }
.icon-btn:active{ transform:translateY(0) }
.icon-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; transform:scale(.6); opacity:0;
  background:radial-gradient(120px 120px at var(--x,50%) var(--y,50%), color-mix(in oklab, var(--accent) 35%, transparent), transparent 60%);
  transition:opacity var(--fast) ease, transform var(--fast) ease; pointer-events:none;
}
.icon-btn:active::after{ opacity:.85; transform:scale(1); }
.i{ display:block; inline-size:18px; block-size:18px; position:relative }
.i-arrow-back:before,.i-arrow-back:after{ content:""; position:absolute; background:var(--brand) }
.i-arrow-back:before{ width:12px; height:2px; left:3px; top:8px }
.i-arrow-back:after{ width:7px; height:7px; border-left:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(45deg); left:3px; top:5px; background:transparent }
.i-power:before{ content:""; position:absolute; inset:2px; border:2px solid var(--brand); border-top-color:transparent; border-radius:50% }
.i-power:after{ content:""; position:absolute; width:2px; height:7px; background:var(--brand); left:8px; top:0px }
.i-moon:before{ content:""; position:absolute; width:14px; height:14px; border-radius:50%; box-shadow:6px 0 0 0 var(--brand); left:1px; top:2px }

.avatar{
  display:block; inline-size:36px; block-size:36px; border-radius:50%; overflow:hidden;
  border:2px solid var(--brand); background:#fff; box-shadow:var(--sh-soft);
  transition:transform var(--fast) ease;
}
.avatar:hover{ transform:translateY(-1px); }
.avatar img{ width:100%; height:100%; object-fit:cover }

/* -------------------- SETS -------------------- */
.mp-sets{
  padding:8px 14px; border-bottom:1px dashed var(--line);
  background:linear-gradient(180deg, color-mix(in oklab, var(--bg) 80%, #f7f9ff), var(--bg));
}
.sets-scroll{
  display:flex; gap:8px; overflow:auto; padding:8px;
  border:1px dashed color-mix(in oklab, var(--accent) 25%, transparent);
  border-radius:var(--r-md);
  background:color-mix(in oklab, var(--chip) 70%, transparent);
}
.set-btn{
  min-width:36px; height:36px; padding:0 10px;
  border-radius:12px;
  border:2px solid var(--brand);
  background:transparent; cursor:pointer; font-weight:800; color:var(--ink);
  position:relative;
  transition:transform var(--fast) ease, background var(--fast) ease, border-color var(--fast) ease, box-shadow var(--fast) ease;
}
/* current set: filled + double ring */
.set-btn.on{
  position: relative;
  background: color-mix(in oklab, var(--accent) 18%, var(--chip));
  border-color: var(--accent);
  box-shadow: 0 0 0 2.5px var(--bg) inset, 0 0 0 4.5px var(--accent) inset, var(--sh-soft);
}

.set-btn:hover{ transform:translateY(-1px) }
.set-btn:active{ transform:translateY(0) }
.set-btn.on{
  transform:translateY(-1.5px);
  background:color-mix(in oklab, var(--accent) 10%, var(--chip));
  border-color:var(--accent);
  box-shadow:var(--sh-soft);
}
.set-btn::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(140px 60px at 50% 100%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%);
  transition:opacity var(--med) ease;
}
.set-btn.on::after{ opacity:1; }

/* -------------------- BUBBLE NAV -------------------- */
.qnav-sticky{
  position:sticky; top:64px; z-index:55;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px;
  background:var(--bg);
  border-top:1px dashed var(--line); border-bottom:1px dashed var(--line);
  padding:8px 10px;
}
.nav-circles{ display:flex; gap:6px; overflow:auto; padding:2px 0 }
.nbtn{
  min-width:28px; height:28px;
  border-radius:999px; border:2px solid var(--brand); background:transparent;
  font-weight:800; color:var(--ink); cursor:pointer;
  transition:transform var(--fast) ease, background var(--fast) ease, border-color var(--fast) ease, box-shadow var(--fast) ease;
}
.nbtn:hover{ transform:translateY(-1px) }
.nbtn.on{ transform:translateY(-1px); background:color-mix(in oklab, var(--ok) 10%, transparent); border-color:var(--ok) }
.nbtn.ok{ background:color-mix(in oklab, var(--ok) 12%, transparent); border-color:var(--ok) }
.nbtn.bad{ background:color-mix(in oklab, var(--bad) 12%, transparent); border-color:var(--bad) }
.nav-arrow{
  width:32px; height:32px; border-radius:50%;
  border:2px solid var(--brand); background:transparent; display:grid; place-items:center; cursor:pointer;
  transition:transform var(--fast) ease, background var(--fast) ease;
}
/* current question bubble — strong “I’m here” state */
.nbtn.on{
  position: relative;
  background: color-mix(in oklab, var(--ok) 20%, transparent);
  border-color: var(--ok);
  box-shadow: 0 0 0 2px var(--bg) inset, 0 0 0 4px var(--ok) inset;
}

.nav-arrow:hover{ transform:translateY(-1px) }
.i-caret-left:before,.i-caret-right:before{ content:""; display:block; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent }
.i-caret-left:before{ border-right:9px solid var(--brand) }
.i-caret-right:before{ border-left:9px solid var(--brand) }

/* -------------------- MAIN LAYOUT -------------------- */
.mp-main{ max-width:var(--content-w); margin:16px auto; padding:0 14px }
.mp-stack{ display:flex; flex-direction:column; gap:14px }
.topbar-row{ display:flex; align-items:center; justify-content:space-between; gap:10px }

/* Stopwatch & bookmark */
.stopwatch{ display:flex; align-items:center; gap:8px }
.sw-face{
  position:relative; width:38px; height:38px; border-radius:50%;
  border:2px solid var(--brand); display:grid; place-items:center; background:radial-gradient(circle at 60% 30%, #ffd40022 0 55%, transparent 56%);
}
.sw-hand{ position:absolute; width:2px; height:12px; background:var(--brand); top:6px; left:50%; transform-origin:bottom center; transform:translateX(-50%) rotate(25deg) }
.sw-knob{ position:absolute; width:7px; height:6px; background:var(--brand); top:-5px; left:50%; transform:translateX(-50%); border-radius:2px }
.sw-time{ font-weight:900; font-size:16px; letter-spacing:.3px }
.topic-tag{ font-weight:700; opacity:.85; color:var(--ink-dim) }

.bookmark-btn{
  display:flex; align-items:center; gap:8px;
  background:transparent; border:2px solid var(--brand); border-radius:999px; padding:8px 12px; cursor:pointer;
  transition:transform var(--fast) ease, background var(--fast) ease, box-shadow var(--fast) ease;
}
.bookmark-btn:hover{ transform:translateY(-1px); box-shadow:var(--sh-soft); }
.i-bookmark{ position:relative; width:16px; height:16px }
.i-bookmark:before{ content:""; position:absolute; left:3px; right:3px; top:1px; bottom:1px; border:2px solid var(--brand); border-radius:6px }
.bookmark-btn.saved .i-bookmark:after{ content:""; position:absolute; left:6px; right:6px; bottom:3px; height:7px; background:var(--brand); clip-path:polygon(0 0,100% 0,50% 100%) }

/* -------------------- QUESTION CARD -------------------- */
.q-card{
  border:1px solid var(--line); border-radius:var(--r-xl); padding:14px;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--bg) 92%, #ffffff), var(--bg)) padding-box,
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 18%, transparent), transparent) border-box;
  box-shadow:var(--sh-soft);
  animation:fadeUp var(--med) ease both;
  container-type:inline-size;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:translateY(0) } }

/* Desktop grid with smart image column */
@container (min-width: 820px){
  .q-card{
    display:grid;
    grid-template-columns:minmax(260px, 0.36fr) 1fr;
    gap:18px; align-items:start;
  }
  .q-images{ grid-column:1; align-self:start }
  .q-body, .q-options{ grid-column:2 }
}

/* Question images */
.q-images{ display:block; margin:6px 0 }
.q-images img{
  display:block;
  width:80%;
  max-width:80%;
  height:auto;
  margin:0 0 12px 0;
  border:1px solid var(--line-strong);
  border-radius:14px;
  box-shadow:var(--sh-soft);
  transition:transform var(--med) ease, box-shadow var(--med) ease, filter var(--med) ease;
  cursor:zoom-in;
  object-fit:contain;
}
.q-images img:hover{ transform:translateY(-2px) scale(1.01); box-shadow:var(--sh-float); filter:saturate(1.05) }

/* 300×300 fallback box until the image loads / has dimensions */
.q-images img[data-fallback]{
  inline-size:100px;
  block-size:100px;
  max-width:80%;
  max-height:min(85vh, 300px);
  object-fit:contain;
}

/* Mobile image behavior */
@media (max-width:640px){
  .q-images img{ width:100%; margin:8px auto }
}

/* Text */
.q-body{ font-size:17.5px; line-height:1.6; white-space:pre-wrap }
.q-body p{ margin:0 0 10px 0 }
.q-body .highlight{
  background:linear-gradient(180deg, #fff7cc 0, #ffef99 100%);
  border-radius:8px; padding:0 6px;
}

/* Options */
.q-options{ display:grid; gap:10px; margin-top:12px }
.opt{
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:11px 12px;
  background:color-mix(in oklab, var(--chip) 40%, transparent);
  cursor:pointer; position:relative;
  transition:transform var(--fast) ease, background var(--fast) ease, border-color var(--fast) ease, box-shadow var(--fast) ease;
}
.opt:hover{ transform:translateY(-1px); box-shadow:var(--sh-soft) }
.opt:active{ transform:translateY(0); }
.opt.disabled{ opacity:.78; cursor:default }
.key{
  display:inline-grid; place-items:center;
  min-width:28px; height:28px;
  border-radius:999px; border:2px solid var(--brand); background:var(--chip2);
  font-weight:900;
}
.opt .txt{ font-size:16.5px; white-space:pre-wrap }
.opt.correct{ border-color:color-mix(in oklab, var(--ok) 60%, var(--line)); background:linear-gradient(0deg, color-mix(in oklab, var(--ok) 18%, transparent), transparent) }
.opt.wrong{ border-color:color-mix(in oklab, var(--bad) 60%, var(--line)); background:linear-gradient(0deg, color-mix(in oklab, var(--bad) 14%, transparent), transparent) }

/* -------------------- SOLUTIONS -------------------- */
.solutions-panel{
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:12px;
  background:linear-gradient(180deg, color-mix(in oklab, var(--bg) 96%, #ffffff), var(--bg));
  box-shadow:var(--sh-soft);
  animation:fadeUp var(--med) ease both;
}
.solutions-title{ margin:0 0 6px 0; font-weight:800 }

.solutions-list details{
  border:1px dashed var(--line);
  border-radius:var(--r-lg);
  padding:10px 12px;
  background:transparent;
  margin:10px 0;
  transition:background var(--fast) ease, border-color var(--fast) ease, box-shadow var(--fast) ease;
}
.solutions-list details[open]{
  background:color-mix(in oklab, var(--chip) 30%, transparent);
  border-color:color-mix(in oklab, var(--accent) 45%, var(--line));
  box-shadow:var(--sh-soft);
}
.solutions-list details>summary{
  cursor:pointer; font-weight:700; list-style:none; position:relative; padding-right:28px;
}
.solutions-list details>summary::-webkit-details-marker{ display:none }
.solutions-list details>summary::after{
  content:""; position:absolute; right:4px; top:8px; width:10px; height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg);
  transition:transform var(--fast) ease, border-color var(--fast) ease;
}
.solutions-list details[open]>summary::after{ transform:rotate(-135deg); border-color:var(--accent) }
.solutions-list .solc{ font-size:16px; white-space:pre-wrap }
.solutions-list .imgbox{ margin-top:8px; display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px }
.solutions-list .imgbox img{
  width:100%; height:auto; border-radius:12px; border:1px solid var(--line);
  box-shadow:var(--sh-soft);
  transition:transform var(--fast) ease, box-shadow var(--fast) ease;
}
.solutions-list .imgbox img:hover{ transform:translateY(-2px); box-shadow:var(--sh-float) }


/* ================== SKIN VARIABLES (shared) ================== */
:root{
  /* Fallbacks used if a skin doesn't override them */
  --card-bg: linear-gradient(180deg, color-mix(in oklab, var(--bg) 96%, #ffffff), var(--bg));
  --card-border-gradient: linear-gradient(180deg, var(--line-strong), var(--line-strong));
  --card-radius: var(--r-xl);
  --card-shadow: var(--sh-soft);

  /* Panels & accents inside the card/solutions */
  --panel-bg: color-mix(in oklab, var(--chip) 30%, transparent);
  --panel-border: color-mix(in oklab, var(--accent) 30%, var(--line));
  --panel-border-open: color-mix(in oklab, var(--accent) 55%, var(--line));
  --panel-sep: var(--line);
}

/* Night mode keeps text readable even if skins are fancy */
:root.theme-dark{
  /* You can slightly deepen panels in dark mode */
  --panel-bg: color-mix(in oklab, var(--chip) 20%, transparent);
  --panel-border: color-mix(in oklab, var(--accent) 25%, var(--line));
  --panel-border-open: color-mix(in oklab, var(--accent) 45%, var(--line));
}

/* ================== Card & Solutions use skin vars ================== */
.q-card,
.solutions-panel{
  position: relative;
  border-radius: var(--card-radius);
  /* Gradient borders via layered backgrounds */
  border: 1.5px solid transparent;
  background:
    var(--card-bg) padding-box,
    var(--card-border-gradient) border-box;
  box-shadow: var(--card-shadow);
  color: var(--ink); /* ensure ink follows theme */
}

/* Make solution details reflect skin too */
.solutions-list details{
  border: 1px dashed var(--panel-border);
  background: transparent;
}
.solutions-list details[open]{
  background: var(--panel-bg);
  border-color: var(--panel-border-open);
}
.solutions-list details>summary::after{
  /* caret adopts current ink tone */
  border-right:2px solid color-mix(in oklab, var(--ink) 70%, transparent);
  border-bottom:2px solid color-mix(in oklab, var(--ink) 70%, transparent);
}
:root.theme-dark .solutions-list details>summary::after{
  border-right:2px solid color-mix(in oklab, var(--ink) 85%, transparent);
  border-bottom:2px solid color-mix(in oklab, var(--ink) 85%, transparent);
}

/* Ensure MathJax adopts ink in both modes (already present, keep it) */
.MathJax, .MathJax * { color: inherit !important; }
.MathJax_SVG, .MathJax_SVG * { fill: currentColor !important; stroke: currentColor !important; }

/* ================== ADVANCED SKINS ================== */
/* NOTE: We only set variables; the base applies them to cards/solutions. */

/* 1) Paper Pro – warm off-white with subtle fiber and warm border */
:root[data-skin="paper-pro"]{
  --card-bg:
    repeating-linear-gradient(0deg, #fffdf6, #fffdf6 26px, #fff8e9 27px) padding-box;
  --card-border-gradient: linear-gradient(180deg, #d8c9a9, #eedfbe);
}
:root.theme-dark[data-skin="paper-pro"]{
  --card-bg:
    repeating-linear-gradient(0deg, #221f19, #221f19 26px, #262117 27px) padding-box;
  --card-border-gradient: linear-gradient(180deg, #6f5d39, #8c7240);
}

/* 2) Linen – textured linen feel with soft bevel border */
:root[data-skin="linen"]{
  --card-bg:
    radial-gradient(120px 20px at 50% -10px, rgba(0,0,0,.06), transparent),
    linear-gradient(180deg, #fffefb, #f7f2e9) padding-box;
  --card-border-gradient: linear-gradient(180deg, #c9c2b3, #d9d1c0);
}
:root.theme-dark[data-skin="linen"]{
  --card-bg:
    radial-gradient(120px 20px at 50% -10px, rgba(255,255,255,.08), transparent),
    linear-gradient(180deg, #1a1a18, #1f1f1c) padding-box;
  --card-border-gradient: linear-gradient(180deg, #5a564b, #6a6558);
}

/* 3) Exam Sheet – gentle blue ruled background + crisp border */
:root[data-skin="exam"]{
  --card-bg:
    repeating-linear-gradient(0deg, #ffffff, #ffffff 22px, #eef3ff 23px) padding-box;
  --card-border-gradient: linear-gradient(180deg, #a9b8ff, #7d96ff);
}
:root.theme-dark[data-skin="exam"]{
  --card-bg:
    repeating-linear-gradient(0deg, #0f1420, #0f1420 22px, #111b2c 23px) padding-box;
  --card-border-gradient: linear-gradient(180deg, #5e77ff, #91a3ff);
}

/* 4) Gradient Sunset – vivid modern gradient card */
:root[data-skin="grad-sunset"]{
  --card-bg: linear-gradient(180deg, #ffe6d9 0%, #ffd3e6 60%, #e7d7ff 100%) padding-box;
  --card-border-gradient: linear-gradient(180deg, #ff8a5c, #ff5da2);
}
:root.theme-dark[data-skin="grad-sunset"]{
  --card-bg: linear-gradient(180deg, #2a1c1a 0%, #2b1b25 60%, #221e2f 100%) padding-box;
  --card-border-gradient: linear-gradient(180deg, #ff7a66, #ff6fb1);
}

/* 5) Gradient Ocean – cool gradient with teal border */
:root[data-skin="grad-ocean"]{
  --card-bg: linear-gradient(180deg, #e8f6ff 0%, #e7faff 60%, #eff7ff 100%) padding-box;
  --card-border-gradient: linear-gradient(180deg, #68c8ff, #2b7cff);
}
:root.theme-dark[data-skin="grad-ocean"]{
  --card-bg: linear-gradient(180deg, #0e1a26 0%, #0e1f2a 60%, #0b1b27 100%) padding-box;
  --card-border-gradient: linear-gradient(180deg, #4db6ff, #8ab4ff);
}

/* 6) Book Classic – creamy page, brown border */
:root[data-skin="book"]{
  --card-bg: linear-gradient(180deg, #fffaf0, #f3ead8) padding-box;
  --card-border-gradient: linear-gradient(180deg, #9e7c4a, #c39b65);
}
:root.theme-dark[data-skin="book"]{
  --card-bg: linear-gradient(180deg, #1e1a14, #221c15) padding-box;
  --card-border-gradient: linear-gradient(180deg, #c39b65, #e8bb7a);
}

/* 7) E-Book – flat neutral with subtle glow border */
:root[data-skin="ebook"]{
  --card-bg: linear-gradient(180deg, #fafafa, #f4f6f8) padding-box;
  --card-border-gradient: linear-gradient(180deg, #cfd6df, #aeb8c4);
}
:root.theme-dark[data-skin="ebook"]{
  --card-bg: linear-gradient(180deg, #121417, #161a1e) padding-box;
  --card-border-gradient: linear-gradient(180deg, #5a6774, #7a8aa0);
}

/* 8) Newspaper – grey pulp with slate border */
:root[data-skin="newspaper"]{
  --card-bg: linear-gradient(180deg, #f3f3f1, #e8e8e4) padding-box;
  --card-border-gradient: linear-gradient(180deg, #b7bab2, #9ba098);
}
:root.theme-dark[data-skin="newspaper"]{
  --card-bg: linear-gradient(180deg, #171717, #1b1b1b) padding-box;
  --card-border-gradient: linear-gradient(180deg, #6d706a, #8a8e85);
}

/* 9) Notebook Grid – dot grid + accent border */
:root[data-skin="notebook"]{
  --card-bg:
    radial-gradient(2px 2px at 8px 8px, rgba(0,0,0,.08) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff, #fdfcff) padding-box;
  --card-border-gradient: linear-gradient(180deg, #9cc2ff, #6aa4ff);
}
:root.theme-dark[data-skin="notebook"]{
  --card-bg:
    radial-gradient(2px 2px at 8px 8px, rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(180deg, #0f1117, #11131a) padding-box;
  --card-border-gradient: linear-gradient(180deg, #5fa8ff, #88baff);
}

/* 10) Neon Card – dark glass with neon rim (fun online style) */
:root[data-skin="neon"]{
  --card-bg: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98)) padding-box;
  --card-border-gradient: linear-gradient(180deg, #8a2be2, #2b7cff);
  --card-shadow: 0 18px 40px rgba(43, 124, 255, .15);
}
:root.theme-dark[data-skin="neon"]{
  --card-bg: linear-gradient(180deg, rgba(20,22,34,.72), rgba(20,22,34,.86)) padding-box;
  --card-border-gradient: linear-gradient(180deg, #a56dff, #66a3ff);
  --card-shadow: 0 18px 40px rgba(102, 163, 255, .25);
}


/* ================== NIGHT-ONLY SKINS (applied only in dark mode) ================== */
/* These override the same --card-bg / --card-border-gradient vars the base uses.   */
/* Names prefixed with d- to distinguish in the JS cycler.                          */

/* 1) d-paper-deep — warm dark paper */
:root.theme-dark[data-skin="d-paper-deep"]{
  --card-bg:
    repeating-linear-gradient(0deg, #1c1914, #1c1914 26px, #201c15 27px) padding-box;
  --card-border-gradient: linear-gradient(180deg, #6e5834, #8a6b3f);
}

/* 2) d-linen-ink — linen texture vibe */
:root.theme-dark[data-skin="d-linen-ink"]{
  --card-bg:
    radial-gradient(120px 20px at 50% -10px, rgba(255,255,255,.07), transparent),
    linear-gradient(180deg, #171717, #1c1c1a) padding-box;
  --card-border-gradient: linear-gradient(180deg, #605a4f, #756e5f);
}

/* 3) d-exam-night — ruled exam sheet but dark */
:root.theme-dark[data-skin="d-exam-night"]{
  --card-bg:
    repeating-linear-gradient(0deg, #0f1420, #0f1420 22px, #111b2c 23px) padding-box;
  --card-border-gradient: linear-gradient(180deg, #4f6fff, #86a0ff);
}

/* 4) d-grad-sunset — moody purple/orange */
:root.theme-dark[data-skin="d-grad-sunset"]{
  --card-bg: linear-gradient(180deg, #24191a 0%, #241827 60%, #1f1a2b 100%) padding-box;
  --card-border-gradient: linear-gradient(180deg, #ff6c9c, #ff8a66);
}

/* 5) d-grad-ocean — deep teal */
:root.theme-dark[data-skin="d-grad-ocean"]{
  --card-bg: linear-gradient(180deg, #0b1723 0%, #0b1c27 60%, #0a1a26 100%) padding-box;
  --card-border-gradient: linear-gradient(180deg, #46aaff, #8bb8ff);
}

/* 6) d-book-classic — dark book page */
:root.theme-dark[data-skin="d-book-classic"]{
  --card-bg: linear-gradient(180deg, #1c1812, #201a13) padding-box;
  --card-border-gradient: linear-gradient(180deg, #c39b65, #e2b676);
}

/* 7) d-ebook — flat dark e-reader */
:root.theme-dark[data-skin="d-ebook"]{
  --card-bg: linear-gradient(180deg, #121417, #161a1e) padding-box;
  --card-border-gradient: linear-gradient(180deg, #596676, #7a8aa0);
}

/* 8) d-newspaper — charcoal pulp */
:root.theme-dark[data-skin="d-newspaper"]{
  --card-bg: linear-gradient(180deg, #151515, #1a1a1a) padding-box;
  --card-border-gradient: linear-gradient(180deg, #6f736c, #8a8e85);
}

/* 9) d-notebook — dark dot grid */
:root.theme-dark[data-skin="d-notebook"]{
  --card-bg:
    radial-gradient(2px 2px at 8px 8px, rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(180deg, #0f1117, #11131a) padding-box;
  --card-border-gradient: linear-gradient(180deg, #5aa6ff, #8dbdff);
}

/* 10) d-neon — glassy with neon rim */
:root.theme-dark[data-skin="d-neon"]{
  --card-bg: linear-gradient(180deg, rgba(20,22,34,.72), rgba(20,22,34,.86)) padding-box;
  --card-border-gradient: linear-gradient(180deg, #a56dff, #66a3ff);
  --card-shadow: 0 18px 40px rgba(102, 163, 255, .25);
}

/* Make sure solutions echo the same skin look (already wired by base). */


/* Optional: “Marked” highlighting style (compatible with any) */
:root[data-skin="marked"]{
  --card-bg:
    linear-gradient(transparent 96%, rgba(255,212,0,.35) 96%) padding-box,
    linear-gradient(180deg,#ffffff,#f7fbff) padding-box;
  --card-border-gradient: linear-gradient(180deg, #ffda59, #ffc94d);
}
:root.theme-dark[data-skin="marked"]{
  --card-bg:
    linear-gradient(transparent 96%, rgba(255,212,0,.18) 96%) padding-box,
    linear-gradient(180deg,#0e1420,#0b1220) padding-box;
  --card-border-gradient: linear-gradient(180deg, #ffd86a, #ffd24d);
}


/* -------------------- FOOTER & MISC -------------------- */
.mp-footer{ margin:22px auto 14px; max-width:var(--content-w); padding:0 14px }
.copyright{
  text-align:center; color:var(--muted);
  border-top:4px solid #ffd400; padding-top:10px; font-size:13.5px;
}

/* Toast */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:16px; background:var(--grad); color:var(--accent-ink);
  border:0; padding:10px 14px; border-radius:12px;
  opacity:0; pointer-events:none; transition:opacity var(--fast) ease, transform var(--fast) ease; z-index:90;
  box-shadow:var(--sh-soft);
  font-weight:800; letter-spacing:.2px;
}
.toast.show{ opacity:1; transform:translate(-50%, -2px); }

/* Error */
.error{
  margin-top:8px; background:#fff0f3; border:2px solid #fecdd3; color:#7f1d1d;
  padding:10px; border-radius:12px;
}
:root.theme-dark .error{
  background:#2a0e14; border-color:#7a2d38; color:#ffd8dd;
}

/* Overlays (welcome / lightbox / solution big reader) */
.welcome-overlay{
  position:fixed; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55));
  display:grid; place-items:center; z-index:200;
}
.wo-card{
  width:min(520px,92vw); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-2xl); box-shadow:var(--sh-float);
  padding:22px; text-align:center; animation:pop .18s ease-out;
}
.wo-logo{
  width:56px; height:56px; border-radius:14px; border:3px solid var(--brand);
  box-shadow:inset 0 0 0 12px #ffd400; margin:0 auto 12px;
}
.wo-title{ margin:6px 0 4px; font-weight:900 }
.wo-lead{ margin:0 0 14px 0; color:var(--muted) }
.wo-btn{
  background:var(--grad); color:var(--accent-ink); border:none; border-radius:12px;
  padding:10px 16px; font-weight:800; cursor:pointer; box-shadow:var(--sh-soft);
  transition:transform var(--fast) ease, box-shadow var(--fast) ease;
}
.wo-btn:hover{ transform:translateY(-1px); box-shadow:var(--sh-float) }
@keyframes pop{ from{ transform:scale(.98); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:grid; place-items:center; z-index:150 }
.lightbox img{
  max-width:92vw; max-height:88vh; border-radius:14px; border:2px solid #fff; box-shadow:0 12px 30px rgba(0,0,0,.3)
}
.lb-close{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:none; background:#fff;
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--sh-soft)
}
.i-x:before,.i-x:after{ content:""; position:absolute; width:16px; height:2px; background:#111 }
.i-x:before{ transform:rotate(45deg) }
.i-x:after{ transform:rotate(-45deg) }
:root.theme-dark .lb-close{ background:#111 }
:root.theme-dark .i-x:before,:root.theme-dark .i-x:after{ background:#e5ecff }

/* Solution big reader */
.solbox{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:160 }
.solbox-inner{
  width:min(900px,75vw); max-height:85vh; background:var(--bg);
  border-radius:14px; border:1px solid var(--line); display:flex; flex-direction:column; box-shadow:var(--sh-float);
  animation:fadeUp var(--med) ease both;
}
.solbox-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line) }
.solbox-body{ padding:14px; overflow:auto; white-space:pre-wrap }

/* -------------------- MATHJAX DARK SAFE -------------------- */
.MathJax, .MathJax * { color: inherit !important; }
.MathJax_SVG, .MathJax_SVG * { fill: currentColor !important; stroke: currentColor !important; }
:root.theme-dark mjx-container,
:root.theme-dark mjx-container *{
  color:var(--ink)!important; fill:var(--ink)!important; stroke:var(--ink)!important;
}

/* -------------------- ENHANCEMENTS -------------------- */
a{
  background:linear-gradient(to right, currentColor 0 0) 0 100% / 0 2px no-repeat;
  transition: background-size var(--fast) ease;
}
a:hover{ background-size: 100% 2px; }

.icon-btn, .set-btn{ --x:50%; --y:50%; }

.opt:active::after{
  content:""; position:absolute; inset:-16px; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(180px 120px at 50% 50%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%);
  animation:opt-ripple var(--med) ease;
}
@keyframes opt-ripple{
  0%{ opacity:.4; transform:scale(.96) }
  100%{ opacity:0; transform:scale(1.02) }
}

.mp-header.is-scrolled{ box-shadow:var(--sh-soft); }

@container (min-width: 1100px){
  .q-card{ grid-template-columns:minmax(300px, 0.38fr) 1fr; }
}

/* Helpful utilities */
.hide{ display:none!important }
.muted{ color:var(--muted) }

/* Mobile stack + image centering */
.q-card .q-images{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:10px; margin:8px 0 12px;
}
@media (max-width: 768px){
  .q-card{ display:block; }
  .q-card .q-images{ order:-1; margin-top:6px; }
  .q-card .q-images img{
    width: clamp(160px, 50%, 360px);
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    box-shadow: var(--sh-soft);
  }
}
@media (min-width: 1024px){
  .q-card .q-images img{
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* Keep MathJax SVGs inside */
.mjx-container{ max-width: 100%; overflow-x: auto; }

/* Safety: images never overflow */
.q-card img{ max-width: 100%; height: auto; }



/* ===== Reader scale variables ===== */
:root{
  --q-scale: 1;      /* text scale: 0.8–1.6 */
  --img-scale: 1;    /* image scale: 0.6–2.0 */
}

/* Scale target fonts via variables */
.q-body{ font-size: calc(17.5px * var(--q-scale,1)); }
.opt .txt{ font-size: calc(16.5px * var(--q-scale,1)); }
.solutions-list .solc{ font-size: calc(16px * var(--q-scale,1)); }

/* Image zoom: allow overflow scroll if enlarged */
.q-images{ overflow: auto; }
.q-images img{
  transform: scale(var(--img-scale,1));
  transform-origin: center top;
}
.q-images img:hover{
  /* keep the hover effect in proportion to current zoom */
  transform: scale(calc(var(--img-scale,1) * 1.01));
}

/* ===== Reader controls bar ===== */
.reader-controls{
  position: sticky;
  bottom: 8px;
  z-index: 40;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 8px 10px;
  margin: 8px auto 0;
  max-width: var(--content-w);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in oklab, var(--chip) 60%, var(--bg));
  box-shadow: var(--sh-soft);
}

.reader-controls .rc-group{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--chip2) 55%, transparent);
  border: 1px dashed color-mix(in oklab, var(--accent) 25%, transparent);
}

.reader-controls .rc-label{
  font-weight: 800; color: var(--ink-dim); margin-right: 2px;
}

.reader-controls .rc-btn{
  appearance: none;
  border: 2px solid var(--brand);
  background: #fff0;
  color: var(--ink);
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform var(--fast) ease, background var(--fast) ease, box-shadow var(--fast) ease;
}
.reader-controls .rc-btn:hover{ transform: translateY(-1px); box-shadow: var(--sh-soft); }
.reader-controls .rc-btn:active{ transform: translateY(0); }

:root.theme-dark .reader-controls{ background: color-mix(in oklab, var(--chip) 25%, var(--bg)); }


/* Collapse the left image column when images are small/absent */
@container (min-width: 820px){
  .q-card.compact-images{
    /* keep grid but turn it into single column when compact */
    grid-template-columns: 1fr !important;
  }
  .q-card.compact-images .q-images,
  .q-card.compact-images .q-body,
  .q-card.compact-images .q-options{
    grid-column: 1 !important;
  }
  .q-card.compact-images .q-images{
    /* put images above the text in compact mode */
    order: -1;
    margin-bottom: 10px;
  }
}

/* ===== Reader variables ===== */
:root{
  --q-scale: 1;        /* 0.8–1.6 */
  --img-scale: 1;      /* 0.6–2.0 */
  --reader-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* reader skin selector lives on <html data-skin="..."> */
}

/* Apply font + size to all question text areas */
.q-body{ font-size: calc(17.5px * var(--q-scale)); font-family: var(--reader-font); }
.opt .txt{ font-size: calc(16.5px * var(--q-scale)); font-family: var(--reader-font); }
.solutions-list .solc{ font-size: calc(16px * var(--q-scale)); font-family: var(--reader-font); }

/* Image zoom with overflow safety */
.q-images{ overflow: auto; }
.q-images img{ transform: scale(var(--img-scale)); transform-origin: center top; }
.q-images img:hover{ transform: scale(calc(var(--img-scale) * 1.01)); }

/* 150×150 fallback while loading (you can keep this from earlier) */
.q-images img[data-fallback]{ inline-size:150px; block-size:150px; object-fit:contain; }

/* ===== Compact Reader Dock ===== */
.reader-dock{
  position: sticky; bottom: 8px; z-index: 45;
  display: inline-flex; gap: 6px; align-items: center; justify-content: center;
  padding: 6px 8px; margin: 6px auto 0; max-width: var(--content-w);
  border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in oklab, var(--chip) 60%, var(--bg));
  box-shadow: var(--sh-soft);
}
.reader-dock .rc-ic{
  appearance:none; border:2px solid var(--brand); background:transparent; color:var(--ink);
  width:36px; height:32px; line-height:28px; text-align:center; font-weight:900; font-size:14px;
  border-radius:10px; cursor:pointer; user-select:none;
  transition:transform var(--fast) ease, background var(--fast) ease, box-shadow var(--fast) ease;
}
.reader-dock .rc-ic:hover{ transform:translateY(-1px); box-shadow:var(--sh-soft); }
.reader-dock .rc-ic:active{ transform:translateY(0); }
.reader-dock .rc-sep{
  display:inline-block; width:1px; height:20px; background:var(--line-strong); margin:0 2px;
}
:root.theme-dark .reader-dock{ background: color-mix(in oklab, var(--chip) 25%, var(--bg)); }

/* ===== 10 Reader Skins (backgrounds) ===== */
/* By default you already have gradients; these override the q-card look & feel. */

:root[data-skin="paper"] .q-card{
  background:
    repeating-linear-gradient(0deg, #fffdf7, #fffdf7 24px, #fffaf0 25px) padding-box,
    linear-gradient(180deg,#e6dfc9,#fff) border-box;
}
:root[data-skin="book"] .q-card{
  background:
    radial-gradient(120px 20px at 50% -10px, rgba(0,0,0,0.06), transparent),
    linear-gradient(180deg,#fffef9,#faf5e7) padding-box;
}
:root[data-skin="marked"] .q-card{
  background:
    linear-gradient(transparent 96%, rgba(255,212,0,.35) 96%) padding-box,
    linear-gradient(180deg,#ffffff,#f7fbff) border-box;
}
:root[data-skin="exam"] .q-card{
  background:
    repeating-linear-gradient(0deg, #ffffff, #ffffff 22px, #f3f6ff 23px) padding-box,
    linear-gradient(180deg,#e7ecff,#fff) border-box;
}
:root[data-skin="ebook"] .q-card{
  background: #fafafa; /* neutral e-reader page */
}
:root[data-skin="mobile"] .q-card{
  background:
    linear-gradient(180deg, #ffffff, #f8f9fb) padding-box;
}
:root[data-skin="sepia"] .q-card{
  background: #f4ecd8;
}
:root[data-skin="cream"] .q-card{
  background: #fffaf0;
}
:root[data-skin="newspaper"] .q-card{
  background:
    linear-gradient(180deg, #f7f7f5, #ecece8) padding-box;
}
:root[data-skin="notebook"] .q-card{
  background:
    repeating-linear-gradient(180deg, rgba(0,120,255,.09) 0 2px, transparent 2px 28px),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(220,0,0,.10) 40px 42px) padding-box,
    #fffdfb;
}

/* Keep borders legible over skins */
:root[data-skin] .q-card{ border:1px solid var(--line-strong); }



/* Ensure reader areas always use theme ink (prevents black-on-dark) */
.q-card, .q-card *:not(.opt):not(.key),
.solutions-panel, .solutions-panel *{
  color: var(--ink);
}

/* Keep option letter key readable with theme ink */
.key{ color: var(--ink); border-color: var(--brand); }

/* Links inherit ink too */
.q-card a, .solutions-panel a{ color: var(--accent); }






/* ===== Copy-guard shields ===== */
.shielded{ position:relative; }
.nocopy-shield{
  position:absolute; inset:0; z-index:5;
  background: transparent;              /* 100% invisible */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;          /* iOS long-press copy menu */
}

/* Make underlying content non-selectable when shielded */
.shielded, .shielded *{
  -webkit-user-select: none; user-select: none;
}

/* Keep option buttons focusable/pressable via proxy (we forward events in JS) */
.q-options .opt{ position:relative; }

/* Don’t block the <summary> row — only the expanded content gets a shield */
.solutions-list details > summary{ position:relative; z-index:6; }


/* ===== Side branding inside the OPTIONS area only ===== */
.q-options{
  position: relative;
  /* narrow gutters so text won’t overlap option content */
  --opt-ribbon-w: 18px;              /* width of the vertical ribbons */
  --opt-ribbon-gap: 6px;             /* small gap from the border */
  padding-left: calc(var(--opt-ribbon-w) + var(--opt-ribbon-gap) + 12px);
  padding-right: calc(var(--opt-ribbon-w) + var(--opt-ribbon-gap) + 12px);
}

/* Left & right vertical ribbons (non-interactive, theme-aware) */
.q-options::before,
.q-options::after{
  content: "";
  position: absolute;
  top: 6px;                          /* inset a bit so it sits “inside” the box */
  bottom: 6px;                       /* match top for a neat frame */
  width: var(--opt-ribbon-w);
  display: grid;
  place-items: center;
  pointer-events: none;              /* never block option clicks */
  z-index: 2;                        /* under your shields (z=5), above background */
  color: color-mix(in oklab, var(--ink) 75%, transparent);
  opacity: .6;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  /* vertical text without awkward rotation overflow */
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Left text: MagnusIBA.Com (reads top→bottom, tilt-left effect) */
.q-options::before{
  left: var(--opt-ribbon-gap);
  content: "MagnusIBA.Com";
  /* optional faint divider line next to the ribbon */
  background:
    linear-gradient(to right, color-mix(in oklab, var(--ink) 16%, transparent), transparent);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: right center;
}

/* Right text: Magnus Math Playground */
.q-options::after{
  right: var(--opt-ribbon-gap);
  content: "® Magnus Sam";
  background:
    linear-gradient(to left, color-mix(in oklab, var(--ink) 16%, transparent), transparent);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: left center;
}

/* Dark mode: slightly stronger for readability on dark skins */
:root.theme-dark .q-options::before,
:root.theme-dark .q-options::after{
  opacity: .75;
  color: color-mix(in oklab, var(--ink) 85%, transparent);
}

/* Keep option cards comfortable with the new gutters */
.q-options .opt{ position: relative; }

/* Responsive tweaks */
@media (max-width: 640px){
  .q-options{
    --opt-ribbon-w: 14px;
    --opt-ribbon-gap: 4px;
    padding-left: calc(var(--opt-ribbon-w) + var(--opt-ribbon-gap) + 10px);
    padding-right: calc(var(--opt-ribbon-w) + var(--opt-ribbon-gap) + 10px);
  }
  .q-options::before,
  .q-options::after{ font-size: 9.5px; opacity: .5; }
}

/* Ultra-tight phones: hide ribbons to conserve width */
@media (max-width: 360px){
  .q-options::before,
  .q-options::after{ display: none; }
  .q-options{ padding-left: 12px; padding-right: 12px; }
}




.attempt-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1.5px solid var(--line); background:color-mix(in oklab, var(--chip) 55%, var(--bg));
  font-weight:800; font-size:13px; color:var(--ink-dim);
}
.attempt-pill.ok{ border-color: color-mix(in oklab, var(--ok) 50%, var(--line)); color: var(--ok); }
.attempt-pill.bad{ border-color: color-mix(in oklab, var(--bad) 50%, var(--line)); color: var(--bad); }
.attempt-pill.seen{ color: var(--muted); }