/* ===== Solve mode (study/solve toggle + quiz view) ===== */

/* toggle inside the problem detail nav bar */
.solve-toggle{display:inline-flex;background:var(--bg-secondary,#eef1f6);border:1px solid var(--border-color);border-radius:12px;padding:4px;gap:2px}
.solve-toggle button{font:700 13.5px/1 inherit;color:var(--text-secondary);background:none;border:0;border-radius:9px;padding:9px 20px;cursor:pointer;transition:.12s}
.solve-toggle button.on{color:#fff;background:linear-gradient(135deg,#4f46e5,#2563eb);box-shadow:0 2px 8px rgba(37,99,235,.28)}

/* quiz single-column */
.quiz{max-width:760px;margin:0 auto;padding:10px 8px 70px}
.quiz__title{font-size:clamp(25px,3.2vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.16;margin:6px 0 18px;color:var(--text-bright)}
.quiz__meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.qpill{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:10px;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-secondary)}
.qpill svg{width:15px;height:15px}
.qpill--diff{border:0;color:#fff;text-transform:capitalize}
.qpill--btn{cursor:pointer;transition:.12s}.qpill--btn:hover{border-color:var(--accent);color:var(--accent)}
.qpill--hint{color:#7c3aed;border-color:rgba(124,58,237,.3);background:rgba(124,58,237,.07)}
.qpill--hint:hover{background:rgba(124,58,237,.13);color:#7c3aed}
.quiz__hints{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.qhint{font-size:14.5px;line-height:1.6;background:rgba(245,183,49,.09);border:1px solid rgba(245,183,49,.32);border-radius:12px;padding:14px 16px;color:var(--text-primary)}
.qhint b{color:#a16207}
.quiz__prompt{font-size:18px;line-height:1.72;color:var(--text-primary);margin-bottom:30px}
.quiz__prompt p{margin:0 0 14px}.quiz__prompt ul{margin:0 0 14px;padding-left:22px}
.quiz__selectlabel{font-size:14px;font-weight:600;color:var(--text-muted);margin-bottom:16px}
.qopts{display:flex;flex-direction:column;gap:14px}
.qopt{display:flex;gap:18px;align-items:center;border:1.5px solid var(--border-color);border-radius:14px;padding:20px 22px;background:var(--bg-card);cursor:pointer;font:inherit;font-size:16px;line-height:1.55;color:var(--text-primary);text-align:left;width:100%;transition:border-color .12s,background .12s,box-shadow .12s}
.qopt:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(76,139,245,.1)}
.qopt__k{flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border-color);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--text-secondary)}
.qopt__t{flex:1}
.qopt.sel{border-color:var(--accent)}.qopt.sel .qopt__k{border-color:var(--accent);color:var(--accent);background:var(--accent-light,rgba(76,139,245,.1))}
.qopt.correct{border-color:#16a34a;background:rgba(34,197,94,.07)}.qopt.correct .qopt__k{background:#16a34a;border-color:#16a34a;color:#fff}
.qopt.wrong{border-color:#dc2626;background:rgba(239,68,68,.06)}.qopt.wrong .qopt__k{background:#dc2626;border-color:#dc2626;color:#fff}
.qopt[disabled]{cursor:default}
.qinput{width:100%;font:700 19px inherit;color:var(--text-primary);background:#fff;border:1.5px solid var(--border-color);border-radius:14px;padding:18px 20px;outline:none}
html[data-theme=dark] .qinput{background:var(--bg-card)}
.qinput:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(76,139,245,.12)}
.qinstr{font-size:13.5px;color:var(--text-muted);margin-top:10px}
.qinstr__hint{color:var(--text-muted);opacity:.8}
.qinstr__ex{font:600 12px ui-monospace,Menlo,monospace;background:var(--bg-card);border:1px solid var(--border-color);border-radius:6px;padding:1px 6px;color:var(--text-secondary)}
/* F3: Test-mode toggle pill (hides difficulty/topic/tags when on) */
.qpill--test{cursor:pointer}
.qpill--test.on{border-color:var(--accent);background:rgba(76,139,245,.12);color:var(--accent)}
/* Bare eye toggle (Test mode) - no box, no label. Open eye = cues shown (gray);
   slashed eye = cues hidden (accent). V2, chosen by a 3-agent design vote. */
.qv-eye{background:none;border:0;padding:4px;margin:0 0 0 2px;cursor:pointer;display:inline-flex;align-items:center;line-height:0;color:var(--text-secondary);border-radius:8px;transition:color .14s}
.qv-eye svg{width:18px;height:18px;display:block}
.qv-eye:hover{color:var(--text-primary)}
.qv-eye.on,.qv-eye.on:hover{color:var(--accent)}
/* Bare study-mode timer: same engine as Solve, no box. Idle = single clock SVG
   (the "Timer" text label hidden); running = accent ring + mm:ss (V1, 3-agent pick). */
.qtimer-wrap--bare .qtimer{border:0;background:none;padding:4px}
.qtimer-wrap--bare .qtimer:not(.running){color:var(--text-secondary)}
.qtimer-wrap--bare .qtimer:not(.running):hover{color:var(--text-primary)}
.qtimer-wrap--bare .qtimer svg{width:18px;height:18px}
.qtimer-wrap--bare .qtimer__lbl:not(#solve-timer-label){display:none}
/* F2 timer — progress-ring control (bake-off winner). OFF: clock + "Timer".
   RUNNING: depleting ring + remaining time. low (<1:00) amber, up (0:00) red+pulse. */
.qtimer{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;padding:8px 13px;border-radius:10px;
  border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;
  font-variant-numeric:tabular-nums;transition:border-color .15s,color .15s}
.qtimer:hover{border-color:var(--accent);color:var(--text-primary)}
.qtimer svg{width:15px;height:15px}
.qtimer__lbl{line-height:1}
.qtimer.running{border-color:var(--accent);color:var(--accent)}
.qtimer__ring{transform:rotate(-90deg)}
.qtimer__ring circle{fill:none;stroke-width:2.6}
.qtimer__bg{stroke:var(--border-color)}
.qtimer__fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .3s}
.qtimer.low{border-color:#f59e0b;color:#f59e0b}
.qtimer.low .qtimer__fg{stroke:#f59e0b}
.qtimer.up{border-color:#ef4444;color:#ef4444;animation:qtimer-pulse .9s ease infinite}
.qtimer.up .qtimer__fg{stroke:#ef4444}
@keyframes qtimer-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.35)}50%{box-shadow:0 0 0 5px rgba(239,68,68,0)}}
/* duration dropdown */
.qtimer-wrap{position:relative;display:inline-flex}
.qtimer-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:132px;padding:5px;
  background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:2px}
.qtimer-menu[hidden]{display:none}
.qtimer-menu__h{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-secondary);opacity:.7;padding:5px 9px 3px}
.qtimer-opt{display:block;width:100%;font-size:13.5px;font-weight:600;padding:8px 11px;border-radius:8px;
  border:0;background:transparent;color:var(--text-secondary);cursor:pointer;text-align:left;transition:.12s;
  font-variant-numeric:tabular-nums}
.qtimer-opt:hover{background:rgba(127,127,127,.12);color:var(--text-primary)}
.qtimer-opt.sel{color:var(--accent);background:rgba(76,139,245,.12)}
/* time's-up prompt modal */
.tup-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(8,12,20,.55);backdrop-filter:blur(3px);animation:tup-fade .16s ease}
@keyframes tup-fade{from{opacity:0}to{opacity:1}}
.tup{width:min(420px,100%);background:var(--bg-card);border:1px solid var(--border-color);border-radius:18px;
  padding:26px 24px 22px;text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.4);animation:tup-pop .2s cubic-bezier(.2,.9,.3,1.2)}
@keyframes tup-pop{from{transform:translateY(10px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.tup__art{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  color:#ef4444;background:rgba(239,68,68,.12)}
.tup__art svg{width:34px;height:34px}
.tup__title{font-size:21px;font-weight:800;color:var(--text-bright);letter-spacing:-.01em}
.tup__sub{margin:8px auto 0;max-width:330px;font-size:13.5px;line-height:1.5;color:var(--text-secondary)}
.tup__acts{margin-top:20px;display:flex;flex-direction:column;gap:9px}
.tup__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;
  border-radius:11px;font-size:14px;font-weight:700;cursor:pointer;border:1px solid var(--border-color);
  background:var(--bg-card);color:var(--text-primary);transition:.13s}
.tup__btn svg{width:17px;height:17px}
.tup__btn:hover{border-color:var(--accent)}
.tup__btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.tup__btn--primary:hover{filter:brightness(1.05)}
.tup__btn--ghost{color:var(--text-secondary)}
.tup__btn--ghost:hover{color:var(--text-primary)}
/* verdict + solution reveal */
.qverdict{margin-top:24px;border-radius:14px;padding:18px 20px;display:none;animation:qpop .18s ease}
@keyframes qpop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.qverdict.show{display:block}
.qverdict.ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.4)}
.qverdict.bad{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.38)}
.qverdict.note{background:var(--bg-secondary,#f1f4f9);border:1px solid var(--border-color)}
.qverdict.note .qverdict__head{color:var(--text-secondary);font-weight:600;font-size:14.5px}
.qverdict__head{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px}
.qverdict.ok .qverdict__head{color:#15803d}.qverdict.bad .qverdict__head{color:#b91c1c}
.qverdict__ic{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.qverdict.ok .qverdict__ic{background:#16a34a}.qverdict.bad .qverdict__ic{background:#dc2626}
.qverdict__sub{margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--text-secondary)}
.qverdict__sub b{color:var(--text-primary)}
.qverdict__cta{margin-top:15px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;cursor:pointer;border:0;background:none;padding:0;color:var(--accent)}
.qverdict__cta:hover{text-decoration:underline}.qverdict__cta svg{width:16px;height:16px}
.quiz__solpanel{display:none;margin-top:22px;border:1px solid var(--border-color);border-radius:16px;overflow:hidden}
.quiz__solpanel.show{display:block;animation:qpop .2s ease}
.qsolhead{display:flex;align-items:center;gap:10px;padding:15px 20px;background:var(--accent-light,rgba(76,139,245,.07));border-bottom:1px solid var(--border-color);font-weight:800;font-size:13px;letter-spacing:.04em;color:var(--text-bright)}
.qsolhead svg{width:18px;height:18px;color:var(--accent)}
.qsolbody{padding:20px 22px}
.quiz__bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:30px}
.qbtn{font:700 15px inherit;border-radius:12px;padding:14px 28px;cursor:pointer;border:1.5px solid transparent}
.qbtn--submit{color:#fff;background:linear-gradient(135deg,#4f46e5,#2563eb);box-shadow:0 6px 18px rgba(37,99,235,.28)}
.qbtn--ghost{color:var(--text-secondary);background:none;border-color:var(--border-color);text-decoration:none;display:inline-block}
.qbtn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.qbtn:disabled{opacity:.55;cursor:default;box-shadow:none}
.qnext{margin-top:34px;padding-top:24px;border-top:1px solid var(--border-color);display:flex;flex-direction:column;gap:10px}
.qnext__h{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.qnav{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--border-color);border-radius:12px;padding:14px 16px;background:var(--bg-card);text-decoration:none;color:var(--text-primary);font-weight:600;font-size:14px}
.qnav:hover{border-color:var(--accent)}.qnav .tag{font-size:12px;color:var(--text-muted);font-weight:700}
@media (max-width:640px){.quiz{padding:8px 4px 60px}.qopt{padding:16px 16px}}

/* ============ Duolingo-style Solve v2 ============ */
.quiz{padding-bottom:130px}
/* single animated study/solve switch (top-right, like day/night) */
.solve-switch{position:relative;width:80px;height:38px;border-radius:20px;border:1px solid var(--border-color);background:var(--bg-secondary,#eef1f6);cursor:pointer;padding:0;display:inline-flex;align-items:center;margin-left:auto}
.solve-switch__knob{position:absolute;top:2px;left:2px;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#4f46e5,#2563eb);box-shadow:0 2px 7px rgba(37,99,235,.45);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.solve-switch.is-solve .solve-switch__knob{transform:translateX(42px)}
.solve-switch__ic{position:relative;z-index:1;width:50%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:color .25s}
.solve-switch__ic svg{width:17px;height:17px}
.solve-switch:not(.is-solve) .solve-switch__ic--study{color:#fff}
.solve-switch.is-solve .solve-switch__ic--solve{color:#fff}
/* better hint reveal */
.qhint{display:flex;gap:12px;align-items:flex-start;animation:qslide .25s ease}
.qhint__n{flex:none;width:26px;height:26px;border-radius:50%;background:#f5b731;color:#5c4205;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
@keyframes qslide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.qopt.shake{animation:qshake .45s}
@keyframes qshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.qopt.correct{animation:qpopborder .35s}
@keyframes qpopborder{0%{transform:scale(1)}50%{transform:scale(1.015)}100%{transform:scale(1)}}
/* post-answer reveal */
.solve-after{display:none;margin-top:26px}
.solve-after.show{display:block;animation:qslide .3s ease}
.qsolpanel,.qintu,.qsimilar{border:1px solid var(--border-color);border-radius:16px;overflow:hidden;margin-bottom:16px}
.qintu__head{display:flex;align-items:center;gap:9px;padding:14px 18px;background:rgba(245,183,49,.1);border-bottom:1px solid var(--border-color);font-weight:800;font-size:13px;letter-spacing:.04em;color:var(--text-bright)}
.qintu__head svg{width:17px;height:17px;color:#d4920a}
.qintu__body{padding:18px 20px}
.qsimilar{padding:18px 20px}
.qsimilar__head{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
/* fixed Duolingo footer */
.solvefoot{position:fixed;left:0;right:0;bottom:0;z-index:50;border-top:2px solid var(--border-color);background:var(--bg-base,#fff);transition:background .25s,border-color .25s}
html[data-theme=dark] .solvefoot{background:#0b0f16}
.solvefoot__in{max-width:760px;margin:0 auto;padding:16px 22px;display:flex;align-items:center;gap:16px}
.solvefoot--ok{background:#eafaf0;border-color:#86efac}
.solvefoot--bad{background:#fdeef0;border-color:#fca5a5}
html[data-theme=dark] .solvefoot--ok{background:#0e2c1a;border-color:#1f6f3e}
html[data-theme=dark] .solvefoot--bad{background:#2c1316;border-color:#7f2a2a}
.solvefoot__msg{display:flex;align-items:center;gap:13px;font-weight:800;font-size:17px;flex:1}
.solvefoot--ok .solvefoot__msg{color:#15803d}.solvefoot--bad .solvefoot__msg{color:#b91c1c}
html[data-theme=dark] .solvefoot--ok .solvefoot__msg{color:#86efac}
html[data-theme=dark] .solvefoot--bad .solvefoot__msg{color:#fca5a5}
.solvefoot__ic{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;animation:qbump .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes qbump{0%{transform:scale(0)}100%{transform:scale(1)}}
.solvefoot--ok .solvefoot__ic{background:#16a34a}.solvefoot--bad .solvefoot__ic{background:#dc2626}
.foot-prev,.foot-skip{font-weight:700;font-size:14px;color:var(--text-secondary);text-decoration:none;padding:11px 8px;white-space:nowrap}
.foot-prev:hover,.foot-skip:hover{color:var(--accent)}
.foot-prev[aria-disabled=true]{opacity:.35;pointer-events:none}
.foot-grow{flex:1}
.foot-btn{font:800 15px inherit;border-radius:13px;padding:14px 30px;cursor:pointer;border:0;white-space:nowrap}
.foot-btn--check{color:#fff;background:linear-gradient(135deg,#4f46e5,#2563eb);box-shadow:0 6px 18px rgba(37,99,235,.3)}
.foot-btn--check:disabled{opacity:.45;box-shadow:none;cursor:default}
.foot-btn--continue{color:#fff;background:#16a34a;box-shadow:0 6px 18px rgba(22,163,74,.38)}
.foot-btn--retry{color:#b91c1c;background:transparent;border:1.5px solid #fca5a5}
/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.confetti i{position:fixed;top:46%;left:50%;width:9px;height:14px;border-radius:2px;will-change:transform,opacity;animation:cburst var(--d,1s) cubic-bezier(.12,.66,.36,1) forwards}
@keyframes cburst{0%{transform:translate(-50%,-50%) rotate(0) scale(.3);opacity:1}12%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(1);opacity:0}}
/* Solve mode KEEPS the top Prev/Next + position (same place as Study + the coding
   IDE) so the toggle and arrows are anchored identically across all three modes.
   (The bottom bar carries only the answer action -- Check -- never nav.) */
.problem-detail__nav-bar.is-solve{align-items:center}
.qhint__t{flex:1;font-size:14.5px;line-height:1.6;color:var(--text-primary)}
.qinput.shake,.shake{animation:qshake .45s}
.qpill--hint svg{margin-right:0}
/* tags + company rows in solve mode */
.quiz__meta{margin-bottom:16px}
.quiz__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.quiz__co{margin:0 0 26px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.foot-note{font-size:13px;color:var(--text-muted);font-weight:600}
.solvefoot--bad .foot-btn--continue{margin-left:10px}
/* "Go to next" split button + dropdown (next in list / next unsolved / recommended) */
.gtn{position:relative;display:inline-flex;flex:none}
.gtn__split{display:inline-flex;border-radius:13px;overflow:hidden}
.gtn__main{color:#fff;border:0;font:800 15px inherit;padding:14px 24px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.gtn__mic{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;flex:none}
.gtn__mic svg{width:17px;height:17px}
/* heading to the recommended pick -> tint the button purple to match the star */
.gtn--blue .gtn__main--torec{background:linear-gradient(135deg,#7c3aed,#4f46e5)}
.gtn--blue .gtn__main--torec+.gtn__car{background:#5b34c2}
.gtn--skip .gtn__main--torec{color:#7c3aed}
.gtn__car{color:#fff;border:0;border-left:1px solid rgba(255,255,255,.3);padding:0 14px;cursor:pointer;font-size:13px;display:flex;align-items:center}
/* green variant (solve mode) */
.gtn--go .gtn__split{box-shadow:0 6px 18px rgba(22,163,74,.38)}
.gtn--go .gtn__main{background:#16a34a}.gtn--go .gtn__car{background:#128a3e}
.gtn--go .gtn__main:hover{background:#15803d}.gtn--go .gtn__car:hover{background:#0f7536}
/* indigo variant (study/display mode — matches the page's Next button) */
.gtn--blue .gtn__split{box-shadow:0 6px 18px rgba(37,99,235,.32)}
.gtn--blue .gtn__main{background:linear-gradient(135deg,#4f46e5,#2563eb)}
.gtn--blue .gtn__car{background:#3538b8}
.gtn--blue .gtn__main:hover,.gtn--blue .gtn__car:hover{opacity:.94}
/* ghost variant (pre-answer "Skip" — quiet, doesn't compete with the Check CTA) */
.gtn--skip .gtn__split{box-shadow:none;border:1px solid var(--border-color);border-radius:11px}
.gtn--skip .gtn__main{background:transparent;color:var(--text-secondary);font:700 14.5px inherit;padding:11px 16px}
.gtn--skip .gtn__car{background:transparent;color:var(--text-muted);border-left:1px solid var(--border-color)}
/* end-of-list state (reached the end / finished the whole list) */
.gtn--end{align-items:center;gap:12px}
.gtn__endmsg{font-weight:800;font-size:14px;color:var(--text-secondary);white-space:nowrap}
.gtn--end .gtn__main{border-radius:13px}
.gtn__main--rec{background:linear-gradient(135deg,#7c3aed,#4f46e5)!important;color:#fff!important;box-shadow:0 6px 18px rgba(124,58,237,.32)}
.gtn__main--rec:hover{opacity:.94}
.gtn__endback{background:transparent!important;color:var(--text-secondary)!important;border:1px solid var(--border-color)!important;text-decoration:none;display:inline-flex;align-items:center}
.gtn__endback:hover{color:var(--accent)!important}
/* coding / open-ended "mark as done" */
.foot-btn--done{color:#fff;background:#16a34a;box-shadow:0 6px 18px rgba(22,163,74,.32)}
.foot-btn--done:hover{background:#15803d}
.solvefoot__msg--done{color:#15803d!important;font-weight:800}
html[data-theme=dark] .solvefoot__msg--done{color:#86efac!important}
/* ===== end-of-list screen (YouTube-style "what's next") ===== */
/* z-index above the fixed nav (z 1000) so the nav never covers the modal's top (X + hero);
   generous top padding keeps the card clear of the very top edge / notch. */
.endscreen-overlay{position:fixed;inset:0;z-index:1100;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:clamp(72px,9vh,120px) 16px 48px;background:color-mix(in srgb,var(--bg-main) 76%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .2s ease}
.endscreen-overlay.show{opacity:1}
.endscreen{position:relative;width:100%;max-width:760px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:22px;padding:38px 34px 30px;box-shadow:0 30px 80px -28px rgba(15,23,42,.5);transform:translateY(12px) scale(.985);transition:transform .24s cubic-bezier(.34,1.4,.5,1)}
.endscreen-overlay.show .endscreen{transform:none}
.endscreen__close{position:absolute;top:16px;right:18px;width:34px;height:34px;border-radius:50%;border:1px solid var(--border-color);background:var(--bg-main);color:var(--text-secondary);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.endscreen__close:hover{color:var(--text-bright);border-color:var(--text-muted)}
.endscreen__hero{text-align:center;margin-bottom:26px}
.endscreen__badge{font-size:50px;line-height:1;margin-bottom:8px;display:inline-block;animation:esPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes esPop{0%{transform:scale(0) rotate(-12deg)}100%{transform:scale(1) rotate(0)}}
.endscreen__title{font-size:25px;font-weight:800;color:var(--text-bright);margin:0 0 6px}
.endscreen__sub{font-size:15px;color:var(--text-secondary);margin:0;line-height:1.55}
.endscreen__sub b{color:var(--text-bright)}
.endscreen__h{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:0 0 12px}
.endscreen__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.es-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--border-color);border-radius:14px;background:var(--bg-main);text-decoration:none;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.es-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--border-color));box-shadow:0 12px 28px -18px rgba(15,23,42,.45)}
.es-card__diff{align-self:flex-start;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px}
.es-card__diff--easy{background:#dcfce7;color:#15803d}.es-card__diff--medium{background:#fef3c7;color:#a16207}.es-card__diff--hard{background:#fee2e2;color:#b91c1c}
.es-card__title{font-size:14.5px;font-weight:700;color:var(--text-bright);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.es-card__cat{font-size:12px;color:var(--text-muted)}
.es-card__go{font-size:13px;font-weight:700;color:var(--accent);margin-top:2px}
.es-empty{text-align:center;color:var(--text-muted);padding:18px 8px}
/* "keep going" rails: handpicked session + more-in-topic */
.endscreen__rails{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.es-rail{display:flex;align-items:center;gap:13px;width:100%;padding:13px 15px;border:1px solid var(--border-color);border-radius:14px;
  background:var(--bg-main);text-decoration:none;cursor:pointer;text-align:left;transition:transform .14s,border-color .14s,box-shadow .14s}
.es-rail:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--border-color));box-shadow:0 12px 28px -18px rgba(15,23,42,.45)}
.es-rail__ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent)}
.es-rail__ic svg{width:21px;height:21px}
.es-rail__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.es-rail__tx b{font-size:14.5px;font-weight:800;color:var(--text-bright)}
.es-rail__tx span{font-size:12.5px;color:var(--text-secondary);line-height:1.35}
.es-rail__go{flex:none;width:22px;height:22px;display:grid;place-items:center;color:var(--text-muted);transition:color .14s,transform .14s}
.es-rail__go svg{width:18px;height:18px}
.es-rail:hover .es-rail__go{color:var(--accent);transform:translateX(3px)}
.endscreen__actions{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.es-btn{padding:12px 22px;border-radius:12px;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.es-btn--ghost{background:transparent;border-color:var(--border-color);color:var(--text-secondary)}
.es-btn--ghost:hover{color:var(--text-bright);border-color:var(--text-muted)}
.es-btn--primary{background:linear-gradient(135deg,#4f46e5,#2563eb);color:#fff;box-shadow:0 8px 22px -10px rgba(37,99,235,.6)}
.es-btn--primary:hover{opacity:.95}
html[data-theme=dark] .es-card__diff--easy{background:rgba(34,197,94,.18);color:#86efac}
html[data-theme=dark] .es-card__diff--medium{background:rgba(245,158,11,.18);color:#fcd34d}
html[data-theme=dark] .es-card__diff--hard{background:rgba(239,68,68,.18);color:#fca5a5}
@media(max-width:560px){.endscreen__grid{grid-template-columns:1fr}.endscreen{padding:30px 20px 24px}.endscreen__title{font-size:22px}}
.gtn--skip .gtn__main:hover,.gtn--skip .gtn__car:hover{color:var(--accent);background:var(--bg-secondary,#f4f7ff)}
.gtn__menu{position:absolute;right:0;bottom:60px;width:300px;background:var(--bg-base,#fff);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 16px 44px rgba(16,24,40,.2);overflow:hidden;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .16s,transform .16s;z-index:60}
.gtn__menu.show{opacity:1;transform:translateY(0);pointer-events:auto}
html[data-theme=dark] .gtn__menu{background:#0f141c}
.gtn__head{padding:10px 16px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.gtn__row{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:12px 16px;border:0;border-top:1px solid var(--border-color);background:none;cursor:pointer;color:var(--text-primary)}
.gtn__row:hover{background:var(--bg-secondary,#f4f7ff)}
.gtn__row--rec{background:rgba(124,58,237,.06)}
html[data-theme=dark] .gtn__row--rec{background:rgba(124,58,237,.14)}
.gtn__ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.gtn__ic svg{width:17px;height:17px}
.gtn__ic--list{background:#eef2ff;color:#4f46e5}
.gtn__ic--ok{background:#e9f9ef;color:#16a34a}
.gtn__ic--rec{background:#f3e8ff;color:#7c3aed}
.gtn__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gtn__t b{font-size:13.5px;font-weight:800}
.gtn__t span{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtn__rec{color:#7c3aed}
html[data-theme=dark] .gtn__rec{color:#c4b5fd}
.gtn__def{font-size:10px;color:var(--text-muted);font-weight:700;align-self:center;flex:none}
/* winning toggle (F): labeled segmented control with icons */
.solve-seg{display:inline-flex;background:var(--bg-secondary,#eef1f6);border:1px solid var(--border-color);border-radius:12px;padding:4px;gap:3px;margin-left:auto}
.solve-seg__btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:9px;font:700 13.5px/1 inherit;color:var(--text-secondary);background:none;border:0;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.solve-seg__btn svg{width:15px;height:15px}
.solve-seg__btn.on{color:#fff;background:linear-gradient(135deg,#4f46e5,#2563eb);box-shadow:0 2px 8px rgba(37,99,235,.28)}
.solve-seg__btn:not(.on):hover{color:var(--accent)}
/* standalone centered mode toggle row (above the problem) -- legacy, no longer emitted */
.solve-modebar{display:flex;justify-content:center;max-width:1180px;margin:2px auto 22px;padding:0 28px}
.solve-modebar .solve-seg{margin-left:0}
/* Top-bar right cluster: Prev/Next arrows (study mode) + the Solve|Study toggle,
   right-aligned so the toggle anchors top-right -- matching the coding IDE strip.
   The center stays clean for the title. (Solve mode hides the arrows, leaving just
   the toggle on the right.) */
.problem-detail__nav-right{display:flex;align-items:center;gap:14px}
.problem-detail__nav-right .solve-seg{margin-left:0}
/* Soft fade-in on each solve render so Prev/Next (incl. crossing into the coding
   IDE) eases in instead of snapping. */
/* Opacity ONLY -- never transform .quiz-wrap. It contains the position:fixed
   .solvefoot, and a transformed ancestor becomes the containing block for fixed
   children, which made the bottom bar slide during the animation then snap back
   ("the bottom bar moves around on load"). */
@keyframes solveFadeIn{from{opacity:0}to{opacity:1}}
.quiz-wrap{animation:solveFadeIn .16s ease}

/* tabbed review (Solution / Intuition / Hints) */
.qtabcard{border:1px solid var(--border-color);border-radius:16px;overflow:hidden;margin-bottom:16px;background:var(--bg-card)}
.qtabs{display:flex;gap:4px;padding:6px;background:var(--bg-secondary,#f1f4f9);border-bottom:1px solid var(--border-color)}
.qtab{flex:1;padding:11px 14px;border:0;background:none;border-radius:9px;font:700 13.5px/1 inherit;color:var(--text-secondary);cursor:pointer;transition:.15s}
.qtab.on{background:var(--bg-card);color:var(--accent);box-shadow:0 1px 4px rgba(16,24,40,.08)}
.qtab:not(.on):hover{color:var(--text-primary)}
.qtabbody{padding:20px 22px}
.qtabpanel--hidden{display:none}
.qhints-review{display:flex;flex-direction:column;gap:10px}
/* study-mode bottom nav (reachable after scrolling) */
.pnav-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:1180px;margin:8px auto 40px;padding:18px 28px;border-top:1px solid var(--border-color)}
.pnav-btn{font-weight:700;font-size:14.5px;color:var(--text-primary);text-decoration:none;border:1px solid var(--border-color);border-radius:11px;padding:11px 20px;background:var(--bg-card)}
.pnav-btn:hover{border-color:var(--accent);color:var(--accent)}
.pnav-btn--next{color:#fff;background:linear-gradient(135deg,#4f46e5,#2563eb);border-color:transparent}
.pnav-btn--next:hover{color:#fff;opacity:.94}
.pnav-btn--off{opacity:.4;pointer-events:none}
.pnav-pos{font-size:13px;font-weight:600;color:var(--text-muted)}
/* tab icons (Solution / Intuition / Hints) */
.qtab{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.qtab svg{width:16px;height:16px;flex:none}
/* color-coded recommended-next cards */
.qnav--rec{align-items:center}
.qnav__main{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qnav__id{color:var(--accent);font-weight:800;flex:none}
.qnav__tags{display:flex;align-items:center;gap:8px;flex:none}
.qnav__tags .badge--sm{font-size:11px;padding:2px 8px;text-transform:capitalize}
.qnav__tags .cat-pill--sm{font-size:11px;padding:3px 9px;border-radius:7px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.qnav--more{justify-content:center;color:var(--accent);font-weight:700}
@media (max-width:560px){.qnav__tags .cat-pill--sm{display:none}}
/* coding / open-ended: scratch-notes area in the Solve layout */
.qnotes{width:100%;min-height:130px;font:500 15px/1.6 inherit;color:var(--text-primary);background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:14px;padding:14px 16px;outline:none;resize:vertical}
.qnotes:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(76,139,245,.12)}

/* ============ Duolingo-style delight v3 ============ */
/* result footer pop + drawn checkmark */
.solvefoot--ok,.solvefoot--bad{animation:footPop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes footPop{0%{transform:translateY(10px)}60%{transform:translateY(-3px)}100%{transform:translateY(0)}}
.solvefoot__ic svg polyline,.solvefoot__ic svg line{stroke-dasharray:32;stroke-dashoffset:32;animation:drawIc .45s .06s forwards ease-out}
@keyframes drawIc{to{stroke-dashoffset:0}}
/* tactile option press */
.qopt{transition:border-color .12s,background .12s,box-shadow .12s,transform .08s}
.qopt:active{transform:scale(.99)}
/* top progress bar (only rendered for a curated set/playlist) */
.quiz__progress{height:9px;border-radius:99px;background:var(--bg-secondary,#eef1f6);overflow:hidden;margin:0 auto 26px;max-width:760px}
.quiz__progress>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#4f46e5,#2563eb);box-shadow:0 0 8px rgba(79,70,229,.4);transition:width .55s cubic-bezier(.4,1,.6,1)}
html[data-theme=dark] .quiz__progress{background:#1a2030}
/* floating reward on correct */
.qreward{position:fixed;left:50%;top:38%;transform:translateX(-50%);font-weight:800;font-size:24px;color:#16a34a;pointer-events:none;z-index:80;text-shadow:0 2px 10px rgba(22,163,74,.3);animation:rewardFloat 1.15s ease forwards}
@keyframes rewardFloat{0%{opacity:0;transform:translate(-50%,12px) scale(.7)}22%{opacity:1;transform:translate(-50%,-6px) scale(1.12)}100%{opacity:0;transform:translate(-50%,-70px) scale(1)}}
/* Locked Pro problem in Solve mode: blurred peek of the statement above the unlock card */
.quiz__prompt--peek{
  filter: blur(5px) saturate(1.05);
  user-select: none; pointer-events: none;
  max-height: 168px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  margin-bottom: 18px;
}

/* ============================================================
   MOBILE (true phone width ~360-414px; desktop uses :root zoom 1.2,
   phones force zoom:1 so this renders at real px). Every rule below
   is scoped to a max-width media query -- desktop is untouched.
   Goal: zero horizontal overflow / no clipped content at 360px.
   ============================================================ */
@media (max-width:768px){
  /* --- Top nav bar: let the Back row and the Prev/Next + Solve|Study
     toggle cluster WRAP instead of clipping the toggle past the edge. --- */
  .problem-detail__nav-bar,
  .problem-detail__nav-bar.is-solve{
    flex-wrap:wrap;
    align-items:center;
    gap:8px 10px;
  }
  /* Back link takes the first line; the right cluster drops to a full
     second row and right-aligns so the toggle anchors top-right. */
  .problem-detail__nav-right{
    margin-left:auto;          /* push to the right when it shares Back's row */
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px 10px;
    min-width:0;
  }
  /* Compact the Prev/Next arrows so they + the toggle fit one row. */
  .problem-detail__nav-arrows{gap:6px;flex-wrap:wrap}
  /* Compact the Solve|Study segmented toggle (smaller padding/font/icon). */
  .solve-seg{padding:3px;gap:2px}
  .solve-seg__btn{padding:7px 11px;font-size:12.5px;gap:5px}
  .solve-seg__btn svg{width:14px;height:14px}

  /* --- Quiz body: trim side padding so nothing touches the edges. --- */
  .quiz{padding-left:6px;padding-right:6px}
  .qopt{gap:12px;padding:15px 14px}
  .qopt__k{width:32px;height:32px;font-size:14px}
  .qinput{padding:15px 16px;font-size:17px}
  .qsolbody,.qtabbody,.qintu__body,.qsimilar{padding-left:16px;padding-right:16px}

  /* --- Fixed bottom action bar (Prev / Check / Skip, or
     Prev / verdict / Try-again+Continue). Shrink padding, gaps and the
     button/split sizes so the three zones fit a 360px row. --- */
  .solvefoot__in{padding:12px 12px;gap:8px}
  .foot-prev,.foot-skip{padding:10px 4px;font-size:13px}
  .foot-btn{padding:12px 16px;font-size:14px}
  .foot-note{font-size:12px}
  .solvefoot__msg{font-size:15px;gap:9px}
  .solvefoot__ic{width:30px;height:30px}
  /* "Go to next" split button (Skip / Continue): tighten so it + Prev +
     the middle action don't overflow. */
  .gtn__main{padding:12px 14px;font-size:14px}
  .gtn--skip .gtn__main{padding:10px 11px;font-size:13.5px}
  .gtn__car{padding:0 10px}

  /* --- Recommended-next cards + bottom study nav: keep within width. --- */
  .qnav{padding:12px 13px;font-size:13.5px}
  .pnav-bottom{padding:16px 8px}
  .pnav-btn{padding:10px 14px;font-size:13.5px}

  /* INTUITIVE bottom bar (was: a small centred Check marooned between two
     equal-weight links). The PRIMARY action now DOMINATES the row; Prev is
     dropped (redundant with the top-bar Prev/Next) and the elastic spacers
     collapse, so Check/Continue fills the width with Skip a quiet control
     on the right. Comfortable tap size restored. */
  .solvefoot__in .foot-prev{display:none}
  .solvefoot__in .foot-grow{display:none}
  .solvefoot__in{gap:10px}
  .foot-btn--check,.foot-btn--continue{flex:1 1 auto;padding:15px 18px;font-size:15.5px}
  .gtn--skip{flex:0 0 auto}
}

/* Narrowest phones: the foot bar's three zones are tightest here.
   Drop the elastic spacers' contribution and trim further. */
@media (max-width:480px){
  .solvefoot__in{padding:11px 12px;gap:8px}
  .foot-prev,.foot-skip{padding:9px 2px;font-size:12.5px}
  /* Keep the dominant primary action a comfortable size (don't shrink it like
     the secondary controls). */
  .foot-btn--check,.foot-btn--continue{flex:1 1 auto;padding:14px 16px;font-size:15px}
  .gtn__main{padding:11px 12px;font-size:13.5px}
  .gtn--skip .gtn__main{padding:9px 9px}
  .gtn__car{padding:0 8px}
  /* In the result state the message can be long; let it shrink/ellipsize
     rather than push the CTA off-screen. */
  .solvefoot__msg{font-size:14px;min-width:0;overflow:hidden}
  /* Top toggle: trim a touch more so Back + arrows + toggle never clip. */
  .solve-seg__btn{padding:7px 9px;font-size:12px}
}

/* ===== Mobile audit fixes (2026-06-08 sweep) ===== */
@media (max-width: 390px) {
  .gtn__menu { width: calc(100vw - 24px); max-width: 300px; right: 12px; }
  .endscreen { padding: 20px 16px 16px; }
  .qnav__tags { flex-wrap: wrap; gap: 4px; }
}

/* ===== MULTI solve-format: shared setup + stacked part cards ===== */
.qmulti{margin-top:4px}
/* Collapsible shared setup (expanded by default) */
.qmulti-setup-wrap{margin-bottom:16px;border:1.5px solid var(--border-color);border-radius:14px;background:var(--bg-card);overflow:hidden}
.qmulti-setup-toggle{cursor:pointer;padding:11px 18px;font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);list-style:none;user-select:none;display:flex;align-items:center}
.qmulti-setup-toggle::-webkit-details-marker{display:none}
.qmulti-setup-toggle::before{content:'\25B8';display:inline-block;margin-right:9px;transition:transform .15s;color:var(--text-muted)}
.qmulti-setup-wrap[open]>.qmulti-setup-toggle::before{transform:rotate(90deg)}
.qmulti-setup-wrap[open]>.qmulti-setup-toggle{border-bottom:1px solid var(--border-color)}
.qmulti-setup{font-size:15px;line-height:1.65;color:var(--text-primary);padding:14px 18px 16px}
.qmulti-setup p{margin:0 0 11px}.qmulti-setup p:last-child{margin-bottom:0}
/* Pager header: left = position + counter, right = prev/next */
.qmulti-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.qmulti-pager__left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qmulti-pager__pos{font-weight:800;font-size:14px;color:var(--text-primary)}
.qmulti-pager__nav{display:flex;gap:8px;flex:none}
.qmulti-pgbtn{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .12s,background .12s,opacity .12s}
.qmulti-pgbtn:hover:not([disabled]){border-color:var(--accent);color:var(--accent)}
.qmulti-pgbtn[disabled]{opacity:.35;cursor:default}
/* Per-part pips: jump between parts + show pass/fail at a glance after grading. */
/* Tournament winner (3 rounds x 10 raters): compact numbered pills, filled-state.
   Idle = faint neutral pill, active = accent fill, graded = solid green/red. */
.qmulti-dots{display:flex;align-items:center;gap:4px;flex:0 0 auto;justify-content:flex-start}
.qmulti-pager__left{display:flex;align-items:center;gap:10px}
.qmulti-pager__nav{display:flex;align-items:center;gap:8px}
.qmulti-dot{width:28px;height:20px;border-radius:9px;border:0;background:#eef0f3;color:var(--text-secondary,#64748b);font-size:11px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s,box-shadow .12s}
html[data-theme=dark] .qmulti-dot{background:rgba(148,163,184,.18)}
.qmulti-dot:hover{background:var(--border-color,#e5e7eb);color:var(--text-primary)}
.qmulti-dot--active{background:var(--accent,#6366f1);color:#fff}
.qmulti-dot--correct{background:#16a34a;color:#fff}
.qmulti-dot--wrong{background:#dc2626;color:#fff}
.qmulti-dot--active.qmulti-dot--correct,.qmulti-dot--active.qmulti-dot--wrong{box-shadow:0 0 0 2px rgba(99,102,241,.30)}
@media (max-width:640px){.qmulti-dot{width:26px;height:19px;font-size:10px}}
.qmulti-counter{font-size:13px;font-weight:700;color:var(--text-muted);padding:5px 11px;border:1.5px solid var(--border-color);border-radius:9px;background:var(--bg-card);display:inline-block}
.qmulti-counter--review{color:var(--text-secondary);font-weight:600}
.qmulti-counter #solve-multi-answered{color:var(--accent)}
.qmulti-banner-slot[hidden]{display:none}
.qmulti-banner-slot{margin:0 0 14px}
/* One part at a time */
.qmulti-parts{display:block}
.qmulti-card{display:none;border:1.5px solid var(--border-color);border-radius:14px;padding:16px 18px;background:var(--bg-card);transition:border-color .15s,box-shadow .15s}
.qmulti-card--active{display:block}
.qmulti-card__head{display:flex;align-items:flex-start;gap:12px;margin-bottom:11px}
.qmulti-card__n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.qmulti-card__label{font-weight:700;font-size:14.5px;color:var(--text-primary);line-height:1.4;padding-top:3px}
.qmulti-card__step{display:block;font-weight:600;font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.qmulti-card__prompt{font-size:15px;line-height:1.6;color:var(--text-primary);margin-bottom:14px}
.qmulti-card__prompt p{margin:0 0 8px}.qmulti-card__prompt p:last-child{margin-bottom:0}
.qmulti-opts{display:flex;flex-direction:column;gap:10px}
.qopt--multi{padding:13px 16px;font-size:14.5px}
.qopt--multi .qopt__k{width:28px;height:28px;font-size:13px}
.qinput--multi{font-size:16px;padding:13px 16px}
/* Symbol keypad (Desmos-style): clickable chips that insert tokens at the cursor. */
.qkeys{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 9px}
.qkeys__sep{width:1px;align-self:stretch;background:var(--border-color);margin:2px 4px}
.qkey{min-width:34px;height:34px;padding:0 9px;border-radius:9px;border:1.5px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);font-size:15px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s,background .12s,color .12s}
.qkey:hover{border-color:var(--accent);color:var(--accent)}
.qkey:active{transform:translateY(1px)}
.qkey--var{background:rgba(99,102,241,.07);border-color:rgba(99,102,241,.35)}
.qkey--op{color:var(--text-secondary);font-weight:600}
.qkey .katex{font-size:1em}
/* Live preview of the typed expression, rendered with KaTeX. */
.qmulti-prev{display:flex;align-items:center;gap:10px;min-height:20px;margin:8px 2px 0;color:var(--text-primary);flex-wrap:wrap}
.qmulti-prev:empty{display:none}
.qmulti-prev__lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);font-weight:700}
.qmulti-prev__raw{color:var(--text-secondary);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;opacity:.7}
/* V6 expression input: one box, type-left + live-render-trailing-right */
.qexpr-box{display:flex;align-items:center;gap:10px;border:1.5px solid var(--border-color);border-radius:11px;background:var(--bg-card);transition:border-color .12s,box-shadow .12s}
.qexpr-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.qexpr-input{flex:1 1 55%;min-width:0;border:none;outline:none;background:transparent;font-size:16px;font-family:'JetBrains Mono',ui-monospace,monospace;padding:12px 0 12px 14px;color:var(--text-primary)}
.qexpr-render{flex:0 1 auto;max-width:45%;overflow-x:auto;white-space:nowrap;color:var(--text-primary);padding-right:12px;font-size:17px;-webkit-overflow-scrolling:touch}
.qexpr-render:empty{display:none}
.qexpr-arrow{color:var(--text-secondary);margin-right:8px;font-weight:600}
.qexpr-render__raw{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--text-secondary);opacity:.6}
.qinstr--mini{font-size:11.5px;margin-top:6px;opacity:.7}
@media (max-width:600px){.qexpr-box{flex-wrap:wrap}.qexpr-input{flex:1 1 100%}.qexpr-render{max-width:100%;padding:0 0 9px 14px}}
/* "symbolic answer" indicator (V4 + icon): small dotted-underline term, hover/focus pops an explanation */
.qexpr-sym{display:inline-flex;align-items:center;gap:5px;position:relative;margin:0 0 8px;font-size:12px;color:var(--text-secondary);cursor:help}
.qexpr-sym svg{flex:none;color:var(--accent);opacity:.85}
.qexpr-sym__lbl{border-bottom:1.5px dotted var(--text-secondary);transition:border-color .12s,color .12s}
.qexpr-sym:hover,.qexpr-sym:focus{color:var(--accent);outline:none}
.qexpr-sym:hover .qexpr-sym__lbl,.qexpr-sym:focus .qexpr-sym__lbl{border-bottom-color:var(--accent)}
.qexpr-sym__tip{position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:250px;background:#0f172a;color:#fff;font-size:12px;font-weight:400;line-height:1.45;border-radius:9px;padding:9px 12px;box-shadow:0 6px 20px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .12s,transform .12s;pointer-events:none}
.qexpr-sym__tip::before{content:"";position:absolute;top:-5px;left:16px;width:10px;height:10px;background:#0f172a;transform:rotate(45deg)}
.qexpr-sym:hover .qexpr-sym__tip,.qexpr-sym:focus .qexpr-sym__tip{opacity:1;visibility:visible;transform:translateY(0)}
/* P6: indicator as a muted, non-clickable glyph at the right edge of the input box */
.qexpr-sym--inbox{flex:none;margin:0;padding:0 12px 0 6px;align-self:center}
.qexpr-sym--inbox svg{color:var(--text-secondary);opacity:.6;transition:color .12s,opacity .12s}
.qexpr-sym--inbox:hover svg,.qexpr-sym--inbox:focus svg{color:var(--accent);opacity:1}
.qexpr-sym__tip--right{left:auto;right:0}
.qexpr-sym__tip--right::before{left:auto;right:14px}
/* incorrect-reveal: "You entered" vs "Answer" rows, rendered as math */
.qmulti-fb__you,.qmulti-fb__ans{display:flex;align-items:baseline;gap:9px;margin-top:7px;flex-wrap:wrap}
.qmulti-fb__k{flex:none;font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:800;color:var(--text-secondary);background:var(--bg-page,#eef1f5);border-radius:5px;padding:2px 7px}
.qmulti-fb__k--ok{color:#16a34a;background:rgba(34,197,94,.12)}
.qmulti-fb__expr{font-size:16px;color:var(--text-primary)}
.qmulti-fb__you .qmulti-fb__expr{color:var(--text-secondary)}
.qinput--ok{border-color:#16a34a}
.qinput--bad{border-color:#dc2626}
/* Per-part Check button */
.qmulti-card__act{margin-top:13px}
.qmulti-checkbtn{font:700 14px inherit;color:#fff;background:var(--accent);border:none;border-radius:10px;padding:9px 20px;cursor:pointer;transition:opacity .12s,background .12s}
.qmulti-checkbtn:hover:not([disabled]){opacity:.9}
.qmulti-checkbtn[disabled]{opacity:.4;cursor:default}
.qmulti-checkbtn--done{background:var(--bg-secondary,#eef1f6);color:var(--text-muted);border:1.5px solid var(--border-color)}
/* Reveal-on-wrong */
.qmulti-reveal-link{display:inline-block;margin-left:4px;font-weight:700;color:var(--accent);cursor:pointer;text-decoration:underline}
.qmulti-reveal-ans{display:none;margin-top:8px}
.qmulti-reveal-ans--show{display:block}
.qmulti-card--ungraded{border-style:dashed}
.qmulti-card--correct{border-color:#16a34a;box-shadow:0 0 0 1px rgba(34,197,94,.25)}
.qmulti-card--incorrect{border-color:#dc2626;box-shadow:0 0 0 1px rgba(239,68,68,.22)}
.qmulti-card__fb{margin-top:0}
.qmulti-fb{margin-top:14px;border-radius:11px;padding:13px 16px;font-size:14.5px;line-height:1.6}
.qmulti-fb.ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.4);color:var(--text-primary)}
.qmulti-fb.bad{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.38);color:var(--text-primary)}
.qmulti-fb strong{color:var(--text-primary)}
.qmulti-fb.ok strong{color:#15803d}.qmulti-fb.bad strong{color:#b91c1c}
html[data-theme=dark] .qmulti-fb.ok strong{color:#86efac}
html[data-theme=dark] .qmulti-fb.bad strong{color:#fca5a5}
.qmulti-fb__ans{margin-top:6px;font-weight:700}
.qmulti-fb__note{margin-top:6px;color:var(--text-secondary);font-size:13.5px}
.qmulti-reveal{border:1.5px solid var(--border-color);border-radius:12px;background:var(--bg-secondary,#f1f4f9);overflow:hidden}
.qmulti-reveal>summary{cursor:pointer;padding:13px 16px;font-weight:700;font-size:14.5px;color:var(--text-secondary);list-style:none;user-select:none}
.qmulti-reveal>summary::-webkit-details-marker{display:none}
.qmulti-reveal>summary::before{content:'\25B8';display:inline-block;margin-right:9px;transition:transform .15s;color:var(--text-muted)}
.qmulti-reveal[open]>summary::before{transform:rotate(90deg)}
.qmulti-reveal__body{padding:4px 16px 16px;font-size:15px;line-height:1.65;color:var(--text-primary)}
.qmulti-banner{display:block;border:1.5px solid var(--border-color);border-radius:11px;padding:11px 16px;font-size:14px;font-weight:600}
.qmulti-banner--ok{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.4);color:#15803d}
.qmulti-banner--partial{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.38);color:#b91c1c}
.qmulti-banner strong{font-weight:800}
html[data-theme=dark] .qmulti-banner--ok{color:#86efac}
html[data-theme=dark] .qmulti-banner--partial{color:#fca5a5}
@media (max-width:640px){.qmulti-card{padding:14px 14px}.qmulti-setup{padding:13px 14px}.qopt--multi{padding:12px 13px}.qmulti-pager{flex-wrap:wrap}}

/* ============================================================================
   UI TOURNAMENT — shared + per-variant styling (behind ?ui=a|b|c).
   Default/current path uses the rules above and is untouched.
   ============================================================================ */

/* SHARED WIN: compact, slim, collapsed-by-default setup bar. */
.qmulti-setup-wrap--slim{margin-bottom:14px;border:1px solid var(--border-color);border-radius:11px;background:var(--bg-secondary,#f7f9fc)}
.qmulti-setup-toggle--slim{padding:8px 13px;font-weight:600;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--text-secondary);gap:8px}
.qmulti-setup-toggle--slim::before{content:'\25B8';order:3;margin-left:auto;margin-right:0;font-size:11px;opacity:.7}
.qmulti-setup-wrap--slim[open]>.qmulti-setup-toggle--slim::before{transform:rotate(90deg)}
.qmulti-setup-wrap--slim[open]>.qmulti-setup-toggle--slim{border-bottom:1px solid var(--border-color)}
.qmulti-setup-toggle__ico{color:var(--accent);font-size:14px;font-style:normal;flex:none}
.qmulti-setup-toggle__lbl{font-weight:600}
.qmulti-setup-toggle__hint{font-size:11px;color:var(--text-muted);font-weight:500;opacity:.8}
.qmulti-setup-wrap--slim[open] .qmulti-setup-toggle__hint{display:none}
.qmulti-setup-wrap--slim .qmulti-setup{font-size:14px;line-height:1.55;padding:11px 13px 12px}

/* SHARED WIN: progress cue (variant a/c) — slim filling bar in lieu of a Check button. */
.qmulti-prog{margin:0 0 14px;display:flex;align-items:center;gap:11px}
.qmulti-prog__bar{flex:1;height:6px;border-radius:99px;background:var(--border-color);overflow:hidden}
.qmulti-prog__fill{height:100%;border-radius:99px;background:var(--accent);width:0;transition:width .35s cubic-bezier(.4,0,.2,1)}
.qmulti-prog__lbl{flex:none;font-size:12px;font-weight:600;color:var(--text-muted);white-space:nowrap}
.qmulti-prog__lbl #solve-multi-prog-num{color:var(--accent);font-weight:800}
.qmulti-prog--full .qmulti-prog__fill{background:#16a34a}
.qmulti-prog--full .qmulti-prog__lbl{color:#15803d}
html[data-theme=dark] .qmulti-prog--full .qmulti-prog__lbl{color:#86efac}

/* SHARED WIN: GENTLER reveal — soften the per-card incorrect state + feedback so it
   reads as helpful, not a red wall. Applies to all three variants. */
.qmulti--ui-a .qmulti-card--incorrect,.qmulti--ui-b .qmulti-card--incorrect,.qmulti--ui-c .qmulti-card--incorrect{
  border-color:var(--border-color);box-shadow:none;background:var(--bg-card)}
.qmulti--ui-a .qmulti-card--correct,.qmulti--ui-b .qmulti-card--correct,.qmulti--ui-c .qmulti-card--correct{
  border-color:rgba(34,197,94,.5);box-shadow:none}
.qmulti--ui-a .qmulti-fb.bad,.qmulti--ui-b .qmulti-fb.bad,.qmulti--ui-c .qmulti-fb.bad{
  background:var(--bg-secondary,#f4f6fa);border:1px solid var(--border-color);color:var(--text-secondary)}
.qmulti--ui-a .qmulti-fb.bad strong,.qmulti--ui-b .qmulti-fb.bad strong,.qmulti--ui-c .qmulti-fb.bad strong{color:var(--text-primary)}
.qmulti--ui-a .qmulti-fb.ok,.qmulti--ui-b .qmulti-fb.ok,.qmulti--ui-c .qmulti-fb.ok{
  background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.32)}
/* softer mcq option marks within variants */
.qmulti--ui-a .qopt--multi.wrong,.qmulti--ui-b .qopt--multi.wrong,.qmulti--ui-c .qopt--multi.wrong{opacity:.62}
.qmulti--ui-a .qmulti-banner--partial,.qmulti--ui-b .qmulti-banner--partial,.qmulti--ui-c .qmulti-banner--partial{
  background:var(--bg-secondary,#f4f6fa);border-color:var(--border-color);color:var(--text-secondary)}

/* CHK WIN: subtle per-part affordances (NOT a primary button). */
.qmulti-card__act--subtle{margin-top:11px;display:flex;align-items:center}
/* variant b: faint secondary text-link */
.qmulti-verify-link{font-size:12.5px;font-weight:600;color:var(--text-muted);text-decoration:none;border-bottom:1px dotted var(--text-muted);cursor:pointer;transition:color .12s,border-color .12s;opacity:.85}
.qmulti-verify-link:hover{color:var(--accent);border-bottom-color:var(--accent)}
.qmulti-verify-link--off{opacity:.4;pointer-events:none;cursor:default}
/* variant c: tiny optional verify icon */
.qmulti-verify-ico{width:30px;height:30px;border-radius:8px;border:1px solid var(--border-color);background:transparent;color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.7;transition:opacity .12s,color .12s,border-color .12s}
.qmulti-verify-ico svg{width:16px;height:16px}
.qmulti-verify-ico:hover:not([disabled]){opacity:1;color:var(--accent);border-color:var(--accent)}
.qmulti-verify-ico[disabled]{opacity:.3;cursor:default}
.qmulti-verify--spent{opacity:.45;pointer-events:none}

/* variant c: SOFT confirm — a subtle accent tick on a confirmed card, no harsh color */
.qmulti-card--soft{border-color:rgba(99,102,241,.0)}
.qmulti-card--soft .qmulti-card__n{position:relative}
.qmulti-card--soft .qmulti-card__n::after{content:'\2713';position:absolute;right:-6px;bottom:-5px;width:15px;height:15px;border-radius:50%;background:#16a34a;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-card)}
/* selected-but-ungraded mcq option in c reads as softly confirmed, not graded */
.qmulti--ui-c .qopt--multi.sel:not(.correct):not(.wrong){border-color:var(--accent);background:rgba(99,102,241,.06)}

/* variant b: foot CTA hidden until all parts answered, then fades in */
.qmulti-foot-cta{display:none}
.qmulti-foot-cta--show{display:inline-block;animation:qmultiCtaIn .25s ease}
@keyframes qmultiCtaIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* FIN cue: auto-grade foot note reads as ambient, not an action */
.foot-note--auto{font-size:12.5px;color:var(--text-muted);font-style:italic}

/* ---- Per-problem NOTEPAD: right-edge hover-peek handle + slide-out panel ---- */
/* Container is a 0-size anchor — NO transform (a CSS transform would make the
   position:fixed children resolve against IT instead of the viewport). z 49 keeps
   it UNDER the .solvefoot (z 50); the panel's `bottom`/`max-height` also clear the
   foot so it never covers the Check-answers bar. */
.qv-notepad{position:fixed;top:0;right:0;z-index:49;pointer-events:none}
.qv-notepad>*{pointer-events:auto}
/* V6 (tournament winner) — lesson-Contents pill: a tiny dot+chevron at rest,
   expands to a NOTES tab on hover, opens the attached panel on click. */
.qv-notepad{--np-top:150px;--np-handle-w:22px;--np-w:300px}
.qv-notepad__handle{position:fixed;right:0;top:var(--np-top);box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:var(--np-handle-w);min-height:54px;padding:8px 0;
  border:1px solid color-mix(in srgb,var(--border-color) 55%,transparent);border-right:none;
  border-radius:13px 0 0 13px;background:color-mix(in srgb,var(--bg-card) 78%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-secondary);
  cursor:pointer;box-shadow:-2px 0 10px rgba(16,24,40,.06);z-index:51;overflow:hidden;
  transition:width .32s cubic-bezier(.34,1.56,.64,1),background .25s ease,box-shadow .25s ease,border-color .2s ease,color .2s ease}
/* resting content: dot + nudging chevron */
.qv-notepad__rest{display:flex;flex-direction:column;align-items:center;gap:5px}
.qv-notepad__dot{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--text-muted) 65%,transparent)}
.qv-notepad__chev{font-size:12px;font-weight:700;color:var(--accent);opacity:.55;animation:np-nudge 2.6s ease-in-out infinite}
@keyframes np-nudge{0%,100%{transform:translateX(0);opacity:.4}50%{transform:translateX(-2px);opacity:.8}}
/* peek content (hover): pencil + NOTES, hidden until hover */
.qv-notepad__peek{display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;width:0;overflow:hidden;transition:opacity .2s ease}
.qv-notepad__peek-label{writing-mode:vertical-rl;text-orientation:mixed;font-size:10px;font-weight:700;letter-spacing:.05em}
/* hover -> widen + swap to the peek */
.qv-notepad__handle:hover,.qv-notepad__handle:focus-visible{width:34px;background:var(--bg-card);color:var(--accent);border-color:var(--accent);box-shadow:-4px 2px 16px rgba(16,24,40,.14);outline:none}
.qv-notepad__handle:hover .qv-notepad__rest,.qv-notepad__handle:focus-visible .qv-notepad__rest{display:none}
.qv-notepad__handle:hover .qv-notepad__peek,.qv-notepad__handle:focus-visible .qv-notepad__peek{opacity:1;width:auto}
.qv-notepad__handle:hover .qv-notepad__chev{animation:none}
/* open state: keep the tab expanded + accented while the panel is out */
.qv-notepad--open .qv-notepad__handle{width:34px;background:var(--bg-card);color:var(--accent);border-color:var(--accent)}
.qv-notepad--open .qv-notepad__rest{display:none}
.qv-notepad--open .qv-notepad__peek{opacity:1;width:auto}
/* Panel: same top as the handle, right edge flush to the handle's left edge.
   Slides in from the right; stays attached to the (fixed) handle. */
.qv-notepad__panel{position:fixed;right:34px;top:var(--np-top);
  width:var(--np-w);max-width:84vw;max-height:calc(100vh - var(--np-top) - 120px);
  display:flex;flex-direction:column;
  background:var(--bg-card,#fff);border:1.5px solid var(--border-color);
  border-radius:14px 0 0 14px;box-shadow:-10px 6px 36px rgba(16,24,40,.18);
  transform:translateX(calc(100% + 34px));opacity:0;visibility:hidden;
  transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .18s ease,visibility .24s}
.qv-notepad--open .qv-notepad__panel{transform:translateX(0);opacity:1;visibility:visible}
.qv-notepad__head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 14px 9px;font-size:13px;font-weight:700;
  color:var(--text-bright);border-bottom:1.5px solid var(--border-color)}
.qv-notepad__acts{display:flex;align-items:center;gap:4px}
/* Unified premium header icon-buttons (expand / hide / close). */
.qv-notepad__acts{display:flex;align-items:center;gap:2px}
.qv-np-btn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--text-muted);border-radius:8px;cursor:pointer;
  transition:background .14s ease,color .14s ease,transform .12s ease}
.qv-np-btn:hover{background:color-mix(in srgb,var(--border-color) 45%,transparent);color:var(--text-primary)}
.qv-np-btn:active{transform:scale(.92)}
.qv-notepad__expand:hover{color:var(--accent)}
.qv-notepad__expand .np-ico-shrink{display:none}
.qv-notepad--expanded .qv-notepad__expand{color:var(--accent)}
.qv-notepad--expanded .qv-notepad__expand .np-ico-grow{display:none}
.qv-notepad--expanded .qv-notepad__expand .np-ico-shrink{display:inline}
/* Expanded (large) panel — explicit HEIGHT so it fills, wider, still attached. */
.qv-notepad--expanded .qv-notepad__panel{width:min(560px,76vw);
  height:calc(100vh - var(--np-top) - 36px);max-height:none}
@media (max-width:600px){.qv-notepad--expanded .qv-notepad__panel{height:auto;max-height:84vh}}
.qv-notepad__ta{flex:1;min-height:150px;width:100%;box-sizing:border-box;resize:none;
  border:none;outline:none;background:transparent;color:var(--text-primary);
  font:14px/1.55 inherit;padding:12px 16px 16px}
.qv-notepad__ta::placeholder{color:var(--text-muted)}
/* Mobile: open as a bottom sheet; the handle stays a right-edge tab. */
@media (max-width:600px){
  .qv-notepad__panel{right:0;left:0;top:auto;bottom:84px;width:auto;max-width:none;max-height:50vh;
    border-radius:14px 14px 0 0;transform:translateY(calc(100% + 96px))}
  .qv-notepad--open .qv-notepad__panel{transform:translateY(0)}
}