:root{--red:#a50f2a;--red2:#d7263d;--accent:#a50f2a;--onred:#fff;--bg:#f7f3f4;--card:rgba(255,255,255,.9);--solid:#fff;--ink:#1d1d24;--mute:#6e6a72;--ok:#16834a;--bad:#c62828;--line:#ebe5e7;--line2:#ddd;--tint:#fbeef1;--tint2:#f3eef0;--tag:#f8e6ea;--amber:#9a6200;--amberbg:#fff2d9;--okbg:#e3f4ea;--okbg2:#e9f7ef;--badbg:#fdecec;--badbg2:#fde4e4;--purple:#7b3fe4;--warnbg:#fff1e0;--warnfg:#9a3d00;--warnline:#e8a25c;--seg:#f0eaec;--shadow:#a50f2a0f;--imgbg:#fff;--hdr1:#a50f2a;--hdr2:#d7263d;color-scheme:light}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);padding-bottom:80px;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
header{display:flex;gap:12px;align-items:center;padding:14px 18px;background:linear-gradient(135deg,var(--hdr1),var(--hdr2));color:#fff;position:sticky;top:0;z-index:5}
.logo{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1.5px #d9b46a88}
h1{margin:0;font-size:19px;letter-spacing:.2px}.sub{margin:1px 0 0;font-size:12px;opacity:.9}
main{padding:14px;max-width:640px;margin:auto}h2{margin:0;font-size:19px}h3{font-size:15px;margin:18px 4px 8px;color:var(--mute);text-transform:uppercase;letter-spacing:.6px}
.card{display:block;background:var(--card);border-radius:16px;padding:16px;box-shadow:0 1px 8px var(--shadow);margin-bottom:12px;border:1px solid var(--line)}
.small{font-size:13px;color:var(--mute)}.pad{margin:0 4px 12px}.row{display:flex;justify-content:space-between;align-items:center;gap:8px}.mt{margin-top:10px;font-size:14px}.grow{flex:1;min-width:0}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}.tag{font-size:11.5px;padding:3px 9px;border-radius:99px;background:var(--tag);color:var(--accent);font-weight:600}
.tag.basic{background:var(--okbg);color:var(--ok)}.tag.intermediate{background:var(--amberbg);color:var(--amber)}.tag.advanced{background:var(--badbg2);color:var(--bad)}
.stem{font-size:16.5px;line-height:1.45;font-weight:600;margin:6px 0 14px;white-space:pre-line}
.opt{display:flex;gap:10px;width:100%;text-align:left;padding:13px;border:1.5px solid var(--line2);border-radius:12px;background:var(--card);font-size:15px;margin-bottom:9px;cursor:pointer;color:var(--ink);line-height:1.35}
.opt b{color:var(--mute);min-width:14px}.opt.picked{border-color:var(--accent);background:var(--tint)}.opt.correct{border-color:var(--ok);background:var(--okbg2)}.opt.wrong{border-color:var(--bad);background:var(--badbg)}.opt:disabled{cursor:default}
.result{font-weight:700;margin:8px 0 6px}.result.ok{color:var(--ok)}.result.bad{color:var(--bad)}.expl{line-height:1.55;font-size:14.5px}.ref{font-size:12.5px;color:var(--mute);margin-top:8px}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--solid);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:5}
nav a{flex:1;padding:8px 0 10px;font-size:11px;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:2px;filter:grayscale(1);opacity:.75}
nav a span{font-size:19px}nav a.active{color:var(--accent);font-weight:700;filter:none;opacity:1}
.hero{display:flex;justify-content:space-between;align-items:center;background:var(--card);border-radius:16px;padding:16px;margin-bottom:12px;border:1px solid var(--line)}
.hi{font-weight:700;font-size:17px}.streak{text-align:center;background:var(--tint);border-radius:14px;padding:8px 12px;color:var(--accent);display:flex;flex-direction:column;align-items:center;font-size:18px}.streak b{font-size:20px}.streak span{font-size:11px}
.qotd{border-top:4px solid var(--red)}.cont{display:flex;justify-content:space-between;align-items:center}.cont>span{font-size:22px;color:var(--accent)}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.mini-stats div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 6px;text-align:center}
.mini-stats b{display:block;font-size:20px;color:var(--accent)}.mini-stats span{font-size:12px;color:var(--mute)}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quick a{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 4px;text-align:center;font-size:12.5px;font-weight:600;position:relative}
.quick a span{display:block;font-size:24px;margin-bottom:4px}.quick em{position:absolute;top:6px;right:8px;font-style:normal;background:var(--red);color:#fff;border-radius:99px;font-size:10px;padding:1px 6px}
.mod{display:flex;align-items:center;gap:12px}.mic{width:44px;height:44px;border-radius:12px;background:var(--tint);display:grid;place-items:center;font-size:22px;flex:none}
.bar{height:7px;background:var(--seg);border-radius:9px;overflow:hidden;margin:6px 0 2px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--red2));border-radius:9px}.bar i.warn{background:#e6a019}
.bar-top{display:flex;align-items:center;gap:10px;margin:2px 4px 12px}.back{font-size:28px;color:var(--accent);line-height:1;padding-right:4px}
.btn{display:inline-block;text-align:center;background:var(--red);color:#fff;border:0;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:600;cursor:pointer}
.btn.ghost{background:var(--card);color:var(--accent);border:1.5px solid var(--accent)}.btn.dis,.btn:disabled{opacity:.35;pointer-events:none}.full{display:block;width:100%;margin:6px 0 12px}
.nav2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}.link{background:none;border:0;color:var(--accent);font-size:14px;padding:10px;cursor:pointer;text-align:center}
.bmk{background:var(--tint2);border:0;border-radius:99px;padding:5px 11px;font-size:12.5px;color:var(--mute);cursor:pointer}.bmk.on{background:var(--tint);color:var(--accent);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 16px}.chip{border:1.5px solid var(--line2);background:var(--card);border-radius:99px;padding:6px 11px;font-size:13px;cursor:pointer;color:var(--mute)}.chip.on{border-color:var(--accent);background:var(--tint);color:var(--accent);font-weight:600}
.seg{display:flex;background:var(--tint2);border-radius:12px;padding:3px;margin:8px 0 16px}.seg button{flex:1;border:0;background:none;padding:9px 4px;border-radius:10px;font-size:13px;text-transform:capitalize;cursor:pointer;color:var(--mute)}.seg button.on{background:var(--card);color:var(--accent);font-weight:700;box-shadow:0 1px 4px #0001}
input[type=range]{width:100%;accent-color:var(--accent);margin:10px 0 16px}
body.testing header{display:none}.testbar{position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;background:var(--red);color:#fff;margin:-14px -14px 12px;padding:12px 16px;font-weight:600;font-size:14px}
.timer{background:var(--card)2;border-radius:99px;padding:4px 10px;font-variant-numeric:tabular-nums}.timer.low{background:#fff;color:#c62828}
.palette{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 8px}.palette button{flex:none;width:36px;height:36px;border-radius:10px;border:1.5px solid var(--line2);background:var(--card);font-weight:600;color:var(--mute);position:relative}
.palette .done{background:var(--ok);border-color:var(--ok);color:#fff}.palette .mark{border-color:var(--purple);box-shadow:inset 0 0 0 2px var(--purple)}.palette .mark.done{background:var(--purple);border-color:var(--purple);color:#fff}.palette .cur{outline:2.5px solid var(--red);outline-offset:1px}
.legend{display:flex;gap:14px;margin:0 2px 10px}.lg{display:inline-block;width:10px;height:10px;border-radius:3px;border:1.5px solid var(--line2);margin-right:4px;vertical-align:-1px}.lg.done{background:var(--ok);border-color:var(--ok)}.lg.mark{background:var(--purple);border-color:var(--purple)}
.res{display:flex;gap:16px;align-items:center}.ring{--p:0;width:92px;height:92px;flex:none;border-radius:50%;background:conic-gradient(var(--red) calc(var(--p)*1%),var(--seg) 0);display:grid;place-items:center}.ring span{width:72px;height:72px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-weight:800;font-size:20px;color:var(--accent)}
.sol summary{cursor:pointer;font-weight:600;font-size:14px;line-height:1.4;list-style:none}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--line2);margin-right:8px}.dot.ok{background:var(--ok)}.dot.bad{background:var(--bad)}
.score{font-weight:800;color:var(--accent);font-size:17px!important}.notes ul{margin:0;padding-left:20px}.notes li{margin:0 0 10px;line-height:1.5;font-size:14.5px}
.weak{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}.weak span{color:var(--bad);font-weight:700}.empty{text-align:center;padding:30px}

.rem input[type=time]{border:1px solid var(--line2);border-radius:10px;padding:7px 10px;font-size:15px;color:var(--ink);background:var(--card)}
.sw{position:relative;width:48px;height:28px;flex:none}.sw input{opacity:0;width:0;height:0}.sw i{position:absolute;inset:0;background:var(--line2);border-radius:99px;transition:.2s}
.sw i:before{content:'';position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px #0003}
.sw input:checked+i{background:var(--red)}.sw input:checked+i:before{transform:translateX(20px)}.sw input:disabled+i{opacity:.5}

.upc .upl{font-size:14px;margin-top:9px;line-height:1.4}.upd b{display:block;margin:8px 0 4px;font-size:15.5px;line-height:1.35}.upd p{margin:0 0 6px;font-size:14px;line-height:1.5}.upd a{color:var(--accent);font-weight:600}.warnc{color:var(--amber);margin-top:6px}
.soon{color:var(--amber);font-weight:600}.tree .tnode{margin:8px 0 10px}.chips.sub{margin:6px 0 0 14px;padding-left:10px;border-left:2px solid var(--tint)}.chip em{font-style:normal;opacity:.7;font-size:11px;margin-left:2px}.chip:disabled{opacity:.4}
.link.sm{padding:4px 8px;font-size:13px}.subrow{padding-left:12px;font-size:13px!important;color:var(--mute)}
.filters{display:flex;gap:8px;margin-bottom:12px}select{flex:1;min-width:0;padding:10px;border-radius:10px;border:1px solid var(--line2);font-size:14px;background:var(--card)}
.item .stem.sm{font-size:14.5px;margin:4px 0 0}.status{float:right;font-size:15px}
.qimg{margin:8px 0 12px}.qimg img{width:100%;border-radius:12px;border:1px solid var(--line);background:var(--imgbg)}.qimg figcaption{font-size:12.5px;color:var(--mute);margin-top:4px}
.eimg{margin:12px 0 4px}.eimg img{width:100%;max-height:340px;object-fit:contain;border-radius:12px;border:1px solid var(--line);background:var(--imgbg);cursor:zoom-in}
.eimg figcaption{font-size:12.5px;color:var(--mute);margin-top:5px}.zhint{color:var(--accent)}.efallback{display:none;padding:14px;text-align:center;background:var(--tint2);border-radius:10px}.eimg.broken img{display:none}.eimg.broken .efallback{display:block}
.credit{font-size:11.5px;color:var(--mute);margin-top:3px;word-break:break-word}.credit a{color:var(--accent)}.credit.big{font-size:13px;color:var(--ink)}.mt2{margin-top:14px}
.zoom{position:fixed;inset:0;background:#000e;z-index:50;display:flex;flex-direction:column}.zbar{display:flex;justify-content:flex-end;gap:8px;padding:10px}.zbar button{width:42px;height:42px;border-radius:50%;border:0;background:var(--card)2;color:#fff;font-size:20px}
.zwrap{flex:1;overflow:auto;touch-action:pan-x pan-y pinch-zoom;display:flex;align-items:flex-start;justify-content:flex-start}.zwrap img{width:100%;margin:auto;background:var(--imgbg);display:block}body.noscroll{overflow:hidden}
.cthumbs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 6px}.cthumbs img{width:88px;height:66px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#fff}
.bul{margin:6px 0 8px;padding-left:20px}.bul li{font-size:14px;line-height:1.5;margin-bottom:5px}
.srcrow{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
.srclink{background:var(--tint);color:var(--accent)!important;font-weight:700;font-size:13px;padding:6px 11px;border-radius:99px}
.seg a{flex:1;text-align:center;padding:9px 4px;border-radius:10px;font-size:13px;color:var(--mute)}.seg a.on{background:var(--card);color:var(--accent);font-weight:700;box-shadow:0 1px 4px #0001}
.search{width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--line2);font-size:15px;margin-bottom:12px;background:var(--card)}
.chb{display:inline-block;font-size:10.5px;font-weight:700;color:var(--accent);background:var(--tint);border-radius:6px;padding:1px 6px;margin-right:6px;vertical-align:1px;white-space:nowrap}
details.part{padding:0}details.part summary{list-style:none;display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer}details.part summary::-webkit-details-marker{display:none}
.chev{font-size:22px;color:var(--accent);transition:transform .2s}details.part[open] .chev{transform:rotate(90deg)}
.chlist{border-top:1px solid var(--line);padding:4px 10px 8px}.chrow{display:flex;align-items:center;gap:8px;padding:10px 6px;border-bottom:1px solid var(--tint2);font-size:14px;line-height:1.35}.chrow:last-child{border-bottom:0}
.cnt{font-size:12px;color:var(--mute);white-space:nowrap}.soon.sm{font-size:11.5px;white-space:nowrap}
.btree{border:1px solid var(--line);border-radius:12px;max-height:420px;overflow:auto;margin:8px 0}
.brow{display:flex;align-items:center;gap:4px;padding:7px 8px;border-bottom:1px solid var(--tint2);font-size:14px;line-height:1.3}
.brow label{display:flex;align-items:center;gap:6px}.brow .chb{flex:none;margin-right:0}.brow input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.bn[data-d="0"]>.brow{font-weight:700;background:var(--tint2)}.btog{width:24px;flex:none;border:0;background:none;color:var(--accent);font-size:18px;transition:transform .15s;padding:0}
.bn.open>.brow .btog{transform:rotate(90deg)}.bkids{display:none}.bn.open>.bkids{display:block}.bc{font-style:normal;font-size:12px;color:var(--mute);min-width:22px;text-align:right}

:root[data-theme=dark]{--red:#b3172f;--red2:#c8203a;--accent:#ff8597;--onred:#fff;--bg:#121014;--card:rgba(29,26,32,.9);--solid:#1d1a20;--ink:#ece8ec;--mute:#a9a2ab;--ok:#3ec27a;--bad:#ff6b6b;--line:#2f2a32;--line2:#443d47;--tint:#3a1f27;--tint2:#28232b;--tag:#3a1f27;--amber:#f2b84b;--amberbg:#3a2e14;--okbg:#173225;--okbg2:#173225;--badbg:#3b1a1c;--badbg2:#46191c;--purple:#a98bff;--warnbg:#3d2412;--warnfg:#ffb27a;--warnline:#b8652a;--seg:#2a252d;--shadow:#0000;--imgbg:#fff;--hdr1:#6e0a1d;--hdr2:#9b1430;color-scheme:dark}
:root[data-theme=dark] .eimg img,:root[data-theme=dark] .qimg img,:root[data-theme=dark] .cthumbs img{border-color:#fff3;padding:4px}
.thbtn{margin-left:auto;width:38px;height:38px;border-radius:50%;border:0;background:#fff2;color:#fff;font-size:18px;cursor:pointer}

.splash{position:fixed;inset:0;z-index:100;background:#101c33;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;color:#e8d3a2;pointer-events:none;transition:opacity .45s}
.splash.out{opacity:0}.splash img{width:min(68vw,320px);height:auto;border-radius:50%;animation:spin-in .7s ease-out}
.splash .gr{font-family:'Palatino Linotype',Palatino,'Noto Serif','Gentium Plus',Georgia,serif;font-size:19px;margin:22px 0 6px;letter-spacing:.3px}.splash .en{font-size:13.5px;margin:0;opacity:.85;font-style:italic}
@keyframes spin-in{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.wm{position:fixed;inset:0;z-index:0;pointer-events:none;background:url(icons/logo-wm.webp) center 55%/min(78vw,460px) no-repeat;opacity:.06}
:root[data-theme=dark] .wm{opacity:.07}
main{position:relative;z-index:1}
.aboutlogo{display:block;width:150px;height:150px;border-radius:50%;margin:4px auto 12px}.motto{text-align:center}.motto .gr{font-family:'Palatino Linotype',Palatino,'Noto Serif',Georgia,serif;font-size:17px;margin:4px 0}.motto .tr{font-style:italic;color:var(--mute);font-size:13px;margin:2px 0}.motto .en{margin:6px 0 0;font-size:14px}

.tag.cat-safety{background:var(--warnbg);color:var(--warnfg);border:1px solid var(--warnline)}
.tag.cat-other{background:var(--tint2);color:var(--mute)}

.expl.rich p{margin:0 0 8px}.expl.rich ul,.expl.rich ol{margin:4px 0 8px;padding-left:22px}.expl.rich li{margin:2px 0}.expl.rich h4,.expl.rich h5{margin:10px 0 4px}
.optexp{margin:8px 0}.optline{padding:6px 10px;border-radius:9px;margin:4px 0;font-size:14px;line-height:1.45}.optline.ok{background:var(--okbg);color:var(--ink)}.optline.bad{background:var(--badbg);color:var(--ink)}
.tblwrap{overflow-x:auto;margin:8px 0;-webkit-overflow-scrolling:touch}.expl table{border-collapse:collapse;font-size:13.5px;min-width:100%}.expl th,.expl td{border:1px solid var(--line2);padding:6px 8px;text-align:left;vertical-align:top}.expl th{background:var(--tint2);font-weight:700}
.expl code{background:var(--tint2);padding:0 4px;border-radius:4px}.expl mark{background:var(--amberbg);color:var(--ink)}

.copyr b{font-size:14px}.copyr p{margin:6px 0 0}.copyline{text-align:center;color:var(--mute)}

.seg.wrap{flex-wrap:wrap}.seg.wrap a{flex:1 1 30%}.seg a em{font-style:normal;font-size:11px;color:var(--mute)}.mt{margin-top:8px}

/* ---------- v1.21: desktop / laptop layout (phone layout unchanged below 1024px) ---------- */
nav .dt{display:none}
kbd{font:inherit;font-size:11px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:0 4px;background:var(--solid)}
@media (hover:hover) and (pointer:fine){
  a.card,.quick a,.chrow,details.part>summary,.btn,.opt,nav a,.seg a{transition:box-shadow .15s,border-color .15s,background-color .15s,transform .15s,filter .15s}
  a.card:hover,.quick a:hover{box-shadow:0 4px 18px var(--shadow),0 0 0 1.5px var(--tint);border-color:var(--accent);transform:translateY(-1px)}
  .chrow:hover{background:var(--tint)}
  details.part>summary:hover{background:var(--tint2)}
  .opt:not(:disabled):hover{border-color:var(--accent);background:var(--tint);cursor:pointer}
  .btn:not(.dis):not(:disabled):hover{filter:brightness(1.08);box-shadow:0 2px 10px var(--shadow)}
  .seg a:hover{color:var(--accent)}
  nav a:hover{opacity:1;filter:none;color:var(--accent)}
}
@media (min-width:1024px){
  body{padding-bottom:28px;padding-left:228px}
  header{margin-left:-228px;padding:14px 26px}
  nav{top:66px;bottom:0;right:auto;width:212px;flex-direction:column;border-top:0;border-right:1px solid var(--line);padding:14px 10px;gap:2px;overflow-y:auto}
  nav a{flex:none;flex-direction:row;gap:12px;padding:10px 14px;font-size:14.5px;border-radius:12px;filter:none;opacity:1;color:var(--ink)}
  nav a span{font-size:18px;width:24px;text-align:center}
  nav a.active,nav a.active2{background:var(--tint);color:var(--accent)}
  nav:has(a.active2) a.active{background:none;color:var(--ink);font-weight:400}
  nav .dt{display:flex}nav .dt[hidden]{display:none}
  nav .navsep{display:block;height:1px;background:var(--line);margin:10px 8px}
  nav p.kbd{display:block;margin:auto 8px 4px;color:var(--mute);line-height:1.7}
  main{max-width:880px;padding:22px 28px}
  body.testing{padding-left:0}body.testing nav{display:none}
  .bar-top h2{font-size:22px}
  /* home: question of the day on the left, everything else on the right */
  body[data-route=home] main{max-width:1180px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:22px;align-items:start}
  body[data-route=home] main>*{grid-column:2}
  body[data-route=home] main>.hero{grid-column:1/-1}
  body[data-route=home] main>.qotd{grid-column:1;grid-row:2/span 40}
  /* QBank sections: two-column card grid */
  body[data-route=qbank] main{max-width:1100px}
  body[data-route=qbank] #qmain{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;align-items:start}
  body[data-route=qbank] #qmain>:not(.card){grid-column:1/-1}
  /* question screens: comfortable reading width, images not oversized */
  .qimg img,.eimg img{max-height:460px;width:auto;max-width:100%;margin:auto;display:block}
}
@media (min-width:1600px){
  body[data-route=home] main{max-width:1320px}
  main{max-width:960px}
}