/* Eye Clinic Trainer. Layout: a single reading column under a slim sticky bar; textbook mode shows the contents, then one article at full width */
:root{
  --bg:#f2f6f6; --surface:#ffffff; --ink:#142222; --muted:#506363; --line:#d5e1e1;
  --accent:#0d6b6b; --accent-ink:#ffffff; --accent-soft:#dcefee;
  --flu:#dcf25e; --flu-ink:#151b2c; --warn:#c2410c; --tissue:#ead9cf;
  --ok:#15803d; --ok-soft:#e4f4e9; --warn-soft:#fcebe1;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --measure:40rem;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e1515; --surface:#152020; --ink:#e3eeee; --muted:#93a8a8; --line:#273838;
  --accent:#5fd0c6; --accent-ink:#0e1515; --accent-soft:#173332;
  --flu:#cfe74c; --flu-ink:#0b1020; --warn:#fb923c; --tissue:#5b4a43; --ok:#4ade80; --ok-soft:#10301d; --warn-soft:#3a2114; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0e1515; --surface:#152020; --ink:#e3eeee; --muted:#93a8a8; --line:#273838;
  --accent:#5fd0c6; --accent-ink:#0e1515; --accent-soft:#173332;
  --flu:#cfe74c; --flu-ink:#0b1020; --warn:#fb923c; --tissue:#5b4a43; --ok:#4ade80; --ok-soft:#10301d; --warn-soft:#3a2114; color-scheme:dark }

*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-text-size-adjust:100%}
button,input{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
mark{background:var(--flu); color:var(--flu-ink); border-radius:2px; padding:0 .1em}

/* top bar */
.bar{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.bar-in{max-width:68rem; margin:0 auto; padding:.6rem 16px; display:flex; align-items:center; gap:12px; justify-content:space-between}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.15rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap}
.specs{width:30px; height:14px; flex:0 0 auto; color:var(--accent)}
.seg{display:flex; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px}
.seg button{border:0; background:transparent; padding:.35rem .85rem; border-radius:999px; font-size:.85rem; font-weight:500; color:var(--muted); cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
@media (max-width:440px){ .bar-in{gap:8px} .brand{font-size:1rem; gap:8px} .seg button{padding:.35rem .6rem; font-size:.8rem} }
@media (max-width:360px){ .brand{font-size:0; gap:0} }

.wrap{max-width:68rem; margin:0 auto; padding-inline:16px}

/* article mode */
.article{max-width:var(--measure); margin:0 auto; padding-block:1.75rem 1rem}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:500}
.icd{font-family:var(--mono); text-transform:none; letter-spacing:0; font-size:.75rem; border:1px solid var(--line); border-radius:4px; padding:.05rem .4rem; color:var(--ink); background:var(--surface)}
.title{font-family:var(--serif); font-weight:500; font-size:clamp(2rem, 6vw, 2.9rem); line-height:1.05; letter-spacing:-.02em; margin:.6rem 0 .8rem; text-wrap:balance}
.dek{font-family:var(--serif); font-style:italic; font-size:1.2rem; line-height:1.45; color:var(--muted); margin:0 0 1.6rem; text-wrap:pretty}
.body{font-family:var(--serif); font-size:1.12rem; line-height:1.65}
.body h2{font-family:var(--sans); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; font-weight:600; color:var(--accent); margin:2.1rem 0 .55rem}
.body p{margin:0 0 .9rem}
.body ul,.body ol{margin:0 0 .9rem; padding-left:1.2rem}
.body li{margin:.3rem 0}
.body li::marker{color:var(--muted)}
.body b{font-weight:600}
.deeper{margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--line)}
.deeper-head{font-family:var(--serif); font-size:1.5rem; font-weight:500; margin:0}
.deeper-sub{font-size:.85rem; color:var(--muted); margin:.2rem 0 0}

.actions{position:sticky; bottom:0; z-index:10; background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-top:1px solid var(--line); padding:.7rem 16px calc(.7rem + env(safe-area-inset-bottom,0px))}
.actions-in{max-width:var(--measure); margin:0 auto; display:flex; gap:10px; align-items:center}
.btn{border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:10px; padding:.65rem 1rem; font-weight:500; cursor:pointer; font-size:.95rem; white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); margin-left:auto}
.btn.ghost{background:transparent; border-color:transparent; color:var(--muted); padding-inline:.5rem}
.btn:disabled{opacity:.4; cursor:default}
.round{font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums}
@media (max-width:560px){ .actions .round{display:none} .actions-in{gap:8px} .actions .btn{padding:.6rem .8rem; font-size:.9rem} .actions .btn.ghost{padding-inline:.3rem} .filter-row .round-m{display:inline} }
.round-m{display:none; white-space:nowrap; font-variant-numeric:tabular-nums}
.filter-row{max-width:var(--measure); margin:1.1rem auto 0; display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--muted)}
.filter-row select{flex:1; min-width:0; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:8px; padding:.45rem .6rem; font-size:16px}
.article{padding-top:1.1rem}
.note{max-width:var(--measure); margin:2.5rem auto 1rem; font-size:.8rem; color:var(--muted)}

/* textbook mode */
.book{padding-block:1.25rem 3rem}
.search{position:relative; margin-bottom:1.1rem}
.search input{width:100%; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:.8rem 2.6rem .8rem 1rem; font-size:1rem}
.search input::placeholder{color:var(--muted)}
.search .clear{position:absolute; right:.4rem; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--muted); font-size:1.3rem; line-height:1; padding:.3rem .5rem; cursor:pointer}
.book-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem}
.toc{min-width:0}
.toc h3{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:1.2rem 0 .4rem; display:flex; gap:.5rem; align-items:baseline}
.toc h3 .num{font-family:var(--mono); letter-spacing:0; color:var(--accent)}
.toc h3:first-child{margin-top:0}
.toc ol{list-style:none; margin:0; padding:0}
.toc a{display:block; padding:.38rem .6rem; margin-inline:-.6rem; border-radius:8px; color:var(--ink); text-decoration:none; font-size:.95rem}
.toc a:hover{background:var(--surface)}
.toc a[aria-current="true"]{background:var(--accent-soft); color:var(--ink); font-weight:500}
.toc a.calc-link{margin:0 0 1.2rem; padding:.7rem .9rem; border:1px solid var(--line); background:var(--surface); font-weight:600}
.toc a.calc-link span{display:block; font-weight:400; font-size:.82rem; color:var(--muted)}
.reader{min-width:0}
.reader .article{padding-top:0; max-width:var(--measure); margin:0}
.backlink{display:inline-flex; gap:.35rem; align-items:center; border:0; background:transparent; color:var(--accent); font-weight:500; padding:.2rem 0; margin-bottom:.8rem; cursor:pointer}
.book-grid.reading .toc{display:none} .book-grid:not(.reading) .reader{display:none}

.results{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.results li button{display:block; width:100%; text-align:left; border:0; background:transparent; padding:.75rem .7rem; border-radius:10px; cursor:pointer}
.results li button:hover{background:var(--surface)}
.r-title{font-family:var(--serif); font-size:1.08rem; font-weight:500}
.r-where{font-size:.75rem; color:var(--muted); margin:.1rem 0 .25rem; letter-spacing:.02em}
.r-snip{font-size:.9rem; color:var(--ink); opacity:.85; line-height:1.45}
.r-count{font-size:.85rem; color:var(--muted); margin:0 0 .5rem}


.empty{color:var(--muted); font-size:.95rem; padding:.6rem 0}
.fig{margin:1.4rem 0 1.6rem; padding:0}
.fig svg{display:block; width:100%; height:auto; max-width:100%; color:var(--ink); overflow:visible}
.fig figcaption{font-family:var(--sans); font-size:.85rem; line-height:1.5; color:var(--muted); margin-top:.6rem}
.fig-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.fig svg text{fill:currentColor; font-family:var(--sans); font-size:12px}
.fig svg .m{fill:var(--muted)}
.fig svg .acc{fill:var(--accent)}
.fig svg .on-acc{fill:var(--accent-ink)}
.fig svg .warnt{fill:var(--warn)}
.fig svg .s{fill:none; stroke:currentColor; stroke-width:1.5}
.fig svg .s2{fill:none; stroke:var(--muted); stroke-width:1; opacity:.7}
.fig svg .a{fill:none; stroke:var(--accent); stroke-width:2.2}
.fig svg .warn{fill:none; stroke:var(--warn); stroke-width:2.6; stroke-linecap:round}
.fig svg .warnf{fill:var(--warn)}
.fig svg .inkf{fill:currentColor; opacity:.82}
.fig svg .bgf{fill:var(--bg)}
.fig svg .soft{fill:var(--accent-soft); stroke:var(--accent); stroke-width:1}
.fig svg .softf{fill:var(--accent-soft)}
.fig svg .bx{fill:var(--surface); stroke:var(--line); stroke-width:1.2}
.fig svg .bxacc{fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.5}
.fig svg .af{fill:var(--accent)}
.fig svg .mk{fill:currentColor}
.fig svg .lid{fill:var(--tissue); stroke:currentColor; stroke-width:1.2}
.fig svg .chipon{fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.5}
.fig svg .chipoff{fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:3 3}
.fig svg .blood{fill:#b42318}
.fig svg .tissue{fill:var(--tissue); stroke:var(--line); stroke-width:1}
.fig svg .tis-sw{fill:#efe6d8} .fig svg .tis-tm{fill:#cdb597} .fig svg .tis-tmp{fill:#86664a} .fig svg .tis-spur{fill:#f6f1e8}
.fig svg .tis-cbb{fill:#564640} .fig svg .tis-iris{fill:#7a5a44} .fig svg .tis-epi{fill:#cfd8f3}
.fig svg .iris{fill:none; stroke:#7a5a44; stroke-width:6; stroke-linecap:round}
.fig svg .warnfill{fill:var(--warn); opacity:.55}
.fig svg .disc{fill:#f0ae86; stroke:#d78f68; stroke-width:1}
.fig svg .cup{fill:#fbe4cb}
.fig svg .vessel{fill:none; stroke:#b4483c; stroke-width:2; stroke-linecap:round}
.fig svg .blooddark{fill:#5c1410}
.fig svg .fundus{fill:#f2c7a8; stroke:currentColor; stroke-width:1.2}
.fig svg .z1{fill:var(--accent); opacity:.28}
.fig svg .rd{fill:#c9d1e4; stroke:#7d8bb0; stroke-width:1}
.fig svg .ret{fill:#f4e4dc}
.fig svg .rpe{fill:none; stroke:#5b3d30; stroke-width:5; stroke-linejoin:round}
.fig svg .rpebar{fill:#5b3d30}
.fig svg .nv{fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round}
.fig svg .fluid{fill:#bfe3f0; stroke:#5fa8c4; stroke-width:1}
.fig svg .veinl{fill:none; stroke:#9c2f2a; stroke-width:2.2}
.fig svg .veinb{fill:#9c2f2a}
.fig svg .irma{fill:none; stroke:#c0392b; stroke-width:1.6}
.fig svg .zA{fill:var(--accent); opacity:.25}
.fig svg .zI{fill:#0e7490; opacity:.16}
.fig svg .zP{fill:none; stroke:var(--warn); stroke-width:9; opacity:.5}
.fig svg .retina{fill:none; stroke:var(--warn); stroke-width:3}
.fig svg .lens{fill:var(--accent-soft); stroke:currentColor; stroke-width:1.2}
.fig svg .bone{fill:#e9e2d4; stroke:#b8ab92; stroke-width:1}
.fig svg .bonet{fill:none; stroke:#b8ab92; stroke-width:6; stroke-linejoin:round}
.fig svg .skin{stroke:#c58e72; stroke-width:3}
.fig svg .orb{fill:#d98b7e; opacity:.75}
.fig svg .fat{fill:#f2d77e; stroke:#d3b24e; stroke-width:1}
.fig svg .lev{fill:none; stroke:#b4544a; stroke-width:9; stroke-linecap:round}
.fig svg .apo{fill:none; stroke:#b4544a; stroke-width:2.5}
.fig svg .mul{fill:none; stroke:#e19a8f; stroke-width:4; stroke-linecap:round}
.fig svg .tarsus{fill:#e6cfaa; stroke:#b99a68; stroke-width:1}
.fig svg .conj{fill:none; stroke:#d46a6a; stroke-width:2}
.fig svg .canal{fill:none; stroke:var(--accent); stroke-width:3; stroke-linejoin:round}
.fig svg .sac{fill:var(--accent-soft); stroke:var(--accent); stroke-width:2}
.fig svg .duct{fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round}
.fig svg .air{fill:var(--surface); stroke:var(--line); stroke-width:1.2}
.fig svg .floor{fill:none; stroke:#b8ab92; stroke-width:6; stroke-linecap:round}
.fig svg .ir{fill:#c4675c; stroke:#9c3f36; stroke-width:1}
.fig svg .tendon{fill:none; stroke:#9a8a6c; stroke-width:4; stroke-linecap:round; stroke-linejoin:round}
.fig svg .paperf{fill:#ffffff}
.fig svg .lossf{fill:#232a3b}

.fig-open{display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; color:inherit; text-align:left}
.fig-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-inline:-4px; padding-inline:4px}
@media (max-width:620px){ .fig-wrap .fig-open svg{min-width:500px} .fig figcaption::after{content:" Tap to enlarge."} }
/* photo gallery */
.gallery{display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:-.4rem 0 1.4rem; padding-bottom:4px; scrollbar-width:thin}
.gallery:empty{display:none}
.thumb{position:relative; flex:0 0 auto; height:148px; border:1px solid var(--line); border-radius:10px; overflow:hidden; padding:0; background:var(--surface); cursor:zoom-in}
.thumb img{display:block; height:100%; width:auto; max-width:none}
.thumb .chip{position:absolute; left:6px; bottom:6px; font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; background:var(--accent); color:var(--accent-ink); border-radius:4px; padding:.1rem .35rem}
.thumb.add{width:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-style:dashed; color:var(--muted); font-size:.82rem; cursor:pointer; text-align:center; padding:0 8px}
.thumb.add b{font-size:1.5rem; font-weight:400; line-height:1; color:var(--accent)}
.addline{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:var(--muted); cursor:pointer; border:1px dashed var(--line); border-radius:8px; padding:.35rem .7rem}
.addline b{color:var(--accent); font-weight:500}
.vh{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
/* lightbox: a fixed dark viewing room in both themes */
.lb{position:fixed; inset:0; z-index:100; background:#070a12; display:flex; flex-direction:column; padding:calc(10px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px)); color:#e9ecf5}
.lb-top{display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:40px}
.lb-count{font-size:.85rem; color:#aab2c8; font-variant-numeric:tabular-nums}
.lb-x{border:0; background:rgba(255,255,255,.1); color:#fff; width:40px; height:40px; border-radius:999px; font-size:1.4rem; line-height:1; cursor:pointer}
.lb-stage{flex:1; min-height:0; display:flex; overflow:auto; -webkit-overflow-scrolling:touch}
.lb-stage > *{margin:auto}
.lb-stage img{max-width:100%; max-height:100%; object-fit:contain; border-radius:4px}
.lb-stage .fig{background:var(--surface); color:var(--ink); border-radius:10px; padding:14px; width:max(100%, 760px); max-width:1100px; flex:0 0 auto}
@media (min-width:800px){ .lb-stage .fig{width:min(100%, 1100px)} }
.lb-cap{max-width:46rem; margin:10px auto 0; font-size:.9rem; line-height:1.45; text-align:center}
.lb-cap a{color:#b9c6ff}
.lb-cap .lb-credit{display:block; color:#aab2c8; font-size:.8rem; margin-top:4px}
.lb-nav{display:flex; justify-content:center; gap:12px; margin-top:10px}
.lb-nav button,.lb-cap button{border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff; border-radius:8px; padding:.45rem .9rem; cursor:pointer; font-size:.9rem}
.lb-nav button:disabled{opacity:.3; cursor:default}
@media (prefers-reduced-motion: no-preference){ .article{animation:rise .35s ease both} @keyframes rise{from{opacity:.0001; transform:translateY(6px)}to{opacity:1; transform:none}} }

/* layers, book photos, related topics and sources */
.status{font-size:.82rem; color:var(--muted); margin-top:.5rem; min-height:1.2em}
.layer-time{font-variant-numeric:tabular-nums}
.photo{margin:1.2rem 0 1.5rem; padding:0}
.photo button{display:block; width:100%; padding:0; border:0; background:var(--surface); border-radius:10px; overflow:hidden; cursor:zoom-in}
.photo img{display:block; width:100%; height:auto}
.photo figcaption{font-family:var(--sans); font-size:.85rem; line-height:1.5; color:var(--muted); margin-top:.55rem}
.photo .from{display:block; font-size:.75rem; margin-top:.15rem; opacity:.85}
.photo-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; margin:1.2rem 0 1.5rem}
.photo-row figcaption{font-size:.78rem}
@media (min-width:620px){ .photo{max-width:34rem} .photo-row{max-width:none} }
.photo-row .photo{margin:0}
.related{margin-top:2.4rem; padding-top:1.2rem; border-top:1px solid var(--line)}
.related h3,.sources h3{font-family:var(--sans); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; font-weight:600; color:var(--muted); margin:0 0 .6rem}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips button{border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:.4rem .85rem; font-size:.88rem; cursor:pointer; text-align:left}
.chips button:hover{border-color:var(--accent)}
.sources{margin-top:1.6rem; font-size:.82rem; color:var(--muted)}
.sources ul{margin:0; padding-left:1.1rem}
.sources li{margin:.2rem 0}
.loading{color:var(--muted); padding:2rem 0; font-size:.95rem}
.body table{border-collapse:collapse; width:100%; font-family:var(--sans); font-size:.9rem; margin:0 0 1rem; display:block; overflow-x:auto}
.body th,.body td{border:1px solid var(--line); padding:.4rem .55rem; text-align:left; vertical-align:top}
.body th{background:var(--surface); font-weight:600}
.body h4{font-family:var(--sans); font-size:.95rem; font-weight:600; margin:1.3rem 0 .4rem}
.depth{display:inline-flex; gap:3px; vertical-align:middle}
.depth i{width:6px; height:6px; border-radius:2px; background:var(--line)}
.depth i.on{background:var(--accent)}

/* quiz */
.quiz{max-width:var(--measure); margin:0 auto; padding-block:1.4rem 3rem}
.q-title{font-family:var(--serif); font-weight:500; font-size:clamp(2rem, 6vw, 2.6rem); line-height:1.1; letter-spacing:-.02em; margin:.4rem 0 .6rem}
.q-sub{font-family:var(--serif); font-size:1.12rem; line-height:1.5; color:var(--muted); margin:0 0 1.2rem}
.q-filter{margin:0 0 1rem}
.q-stats{font-size:.9rem; color:var(--muted); margin:0 0 1.2rem; font-variant-numeric:tabular-nums}
.q-stats b{color:var(--ink); font-weight:600}
.q-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:1.2rem}
.q-actions .btn.primary{margin-left:0}
.q-next{justify-content:flex-end}
.q-note{margin:2rem 0 0}
.q-top{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500}
.q-top .linkbtn{font-size:.85rem; text-transform:none; letter-spacing:0}
.q-bar{height:4px; border-radius:2px; background:var(--line); margin:.5rem 0 1.2rem; overflow:hidden}
.q-bar i{display:block; height:100%; background:var(--accent); border-radius:2px; transition:width .25s ease}
.q-photo{margin:0 0 1rem}
.q-photo button{display:block; padding:0; border:0; background:var(--surface); border-radius:10px; overflow:hidden; cursor:zoom-in; max-width:100%}
.q-photo img{display:block; max-width:100%; height:auto; max-height:46vh; width:auto}
.q-photo figcaption{font-size:.75rem; color:var(--muted); margin-top:.35rem}
.q-stem{font-family:var(--serif); font-size:1.28rem; line-height:1.45; margin:0 0 1.1rem; text-wrap:pretty}
.q-opts{display:grid; gap:10px}
.q-opt{display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:.75rem .9rem; font-size:1rem; line-height:1.4; cursor:pointer}
.q-opt:hover:not(:disabled){border-color:var(--accent)}
.q-opt:disabled{cursor:default}
.q-key{flex:0 0 auto; width:1.6rem; height:1.6rem; margin-top:-.05rem; border-radius:999px; border:1px solid var(--line); display:grid; place-items:center; font-size:.78rem; font-weight:600; color:var(--muted)}
.q-txt{min-width:0}
.q-tag{display:block; font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-top:.25rem}
.q-opt.right{border-color:var(--ok); background:var(--ok-soft)}
.q-opt.right .q-key{background:var(--ok); border-color:var(--ok); color:var(--bg)}
.q-opt.right .q-tag{color:var(--ok)}
.q-opt.wrong{border-color:var(--warn); background:var(--warn-soft)}
.q-opt.wrong .q-key{background:var(--warn); border-color:var(--warn); color:var(--bg)}
.q-opt.wrong .q-tag{color:var(--warn)}
.q-opt.dim{opacity:.6}
.q-fb{margin-top:1.2rem; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); scroll-margin-bottom:5rem}
.q-verdict{font-weight:600; margin:0 0 .4rem}
.q-verdict.ok{color:var(--ok)}
.q-verdict.bad{color:var(--warn)}
.q-ex{font-family:var(--serif); font-size:1.08rem; line-height:1.55; margin:0 0 .7rem}
.linkbtn{border:0; background:none; color:var(--accent); font-weight:500; padding:0; cursor:pointer; text-align:left; font-size:.92rem}
.linkbtn:hover{text-decoration:underline}
.q-missed{list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:10px}
.q-missed li{border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:.8rem .95rem}
.q-mstem{font-family:var(--serif); font-size:1.02rem; line-height:1.45; margin:0 0 .35rem}
.q-mans{font-size:.9rem; margin:0 0 .4rem}