:root{--bg: #f4f6ff;--bg2: #e9eeff;--card: #ffffff;--ink: #1d2340;--ink2: #56607f;--line: #dde2f2;--brand: #4f7cff;--brand-ink: #ffffff;--good: #1fb36b;--good-bg: #e3f8ee;--bad: #ef5a5a;--bad-bg: #fdecec;--warn: #f2a516;--warn-bg: #fff4dc;--shadow: 0 6px 0 rgba(29, 35, 64, .08), 0 10px 30px rgba(29, 35, 64, .08);--radius: 22px;--font-head: "Fredoka", "Nunito", system-ui, sans-serif;--font-body: "Nunito", system-ui, sans-serif;color-scheme:light}:root[data-font=lexend]{--font-body: "Lexend", system-ui, sans-serif}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #12152a;--bg2: #1a1f3b;--card: #1f2545;--ink: #eef1ff;--ink2: #a5adcf;--line: #313a66;--good-bg: #133a2a;--bad-bg: #44202a;--warn-bg: #3f321a;--shadow: 0 6px 0 rgba(0, 0, 0, .25), 0 10px 30px rgba(0, 0, 0, .25);color-scheme:dark}}:root[data-theme=dark]{--bg: #12152a;--bg2: #1a1f3b;--card: #1f2545;--ink: #eef1ff;--ink2: #a5adcf;--line: #313a66;--good-bg: #133a2a;--bad-bg: #44202a;--warn-bg: #3f321a;--shadow: 0 6px 0 rgba(0, 0, 0, .25), 0 10px 30px rgba(0, 0, 0, .25);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);background-image:radial-gradient(circle at 10% 0%,var(--bg2) 0,transparent 40%),radial-gradient(circle at 100% 30%,var(--bg2) 0,transparent 35%);background-attachment:fixed;color:var(--ink);font-family:var(--font-body);font-size:18px;line-height:1.5;-webkit-tap-highlight-color:transparent;min-height:100vh}h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;margin:0 0 .4em;font-weight:600}h1{font-size:clamp(1.7rem,5vw,2.4rem)}h2{font-size:clamp(1.35rem,4vw,1.8rem)}h3{font-size:1.2rem}p{margin:0 0 .8em}a{color:var(--brand)}button{font:inherit;color:inherit}.wrap{max-width:980px;margin:0 auto;padding:16px 16px 96px}.narrow{max-width:560px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}.muted{color:var(--ink2)}.small{font-size:.88rem}.center{text-align:center}.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.grid-3{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.stack>*+*{margin-top:14px}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;border:2px solid var(--line)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 22px;border-radius:16px;border:0;background:var(--brand);color:var(--brand-ink);font-family:var(--font-head);font-weight:600;font-size:1.1rem;box-shadow:0 5px color-mix(in srgb,var(--brand) 60%,black);cursor:pointer;transition:transform .08s,box-shadow .08s,filter .15s;text-decoration:none;-webkit-user-select:none;user-select:none}.btn:hover{filter:brightness(1.06)}.btn:active{transform:translateY(4px);box-shadow:0 1px color-mix(in srgb,var(--brand) 60%,black)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn.ghost{background:var(--card);color:var(--ink);border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}.btn.good{--brand: var(--good)}.btn.bad{--brand: var(--bad)}.btn.warn{--brand: var(--warn)}.btn.sm{min-height:40px;padding:6px 14px;font-size:.95rem;border-radius:12px}.btn.block{width:100%}.iconbtn{width:48px;height:48px;border-radius:14px;border:2px solid var(--line);background:var(--card);cursor:pointer;font-size:1.3rem;display:inline-grid;place-items:center}.topbar{position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:2px solid var(--line)}.topbar .inner{max-width:980px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:10px}.logo{font-family:var(--font-head);font-weight:700;font-size:1.35rem;display:flex;align-items:center;gap:4px;text-decoration:none;color:var(--ink);white-space:nowrap}@media(max-width:480px){.hide-sm{display:none}.topbar .inner{gap:6px}.topbar .iconbtn{width:42px;height:42px}body{font-size:17px}}.logo b{color:var(--brand)}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--bg2);font-weight:700;font-size:.9rem;white-space:nowrap}.chip.good{background:var(--good-bg);color:var(--good)}.chip.bad{background:var(--bad-bg);color:var(--bad)}.chip.warn{background:var(--warn-bg);color:#b47500}input[type=text],input[type=date],input[type=password],input:not([type]),textarea,select{width:100%;font:inherit;color:var(--ink);background:var(--card);border:2.5px solid var(--line);border-radius:14px;padding:12px 14px;min-height:52px;outline:none;transition:border-color .15s,box-shadow .15s}input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent)}textarea{resize:vertical;line-height:1.6}label.field{display:block;font-weight:700;margin-bottom:12px}label.field>span{display:block;margin-bottom:6px}.subject{position:relative;overflow:hidden;text-decoration:none;color:var(--ink);cursor:pointer;border-radius:var(--radius);padding:18px;background:var(--card);border:2px solid var(--line);box-shadow:0 6px color-mix(in srgb,var(--c) 45%,var(--line));transition:transform .15s;display:flex;flex-direction:column;gap:10px;min-height:170px}.subject:hover{transform:translateY(-3px) rotate(-.5deg)}.subject .emoji{font-size:2.2rem;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 18%,var(--card))}.subject h3{margin:0}.subject .bar{height:10px;border-radius:99px;background:var(--bg2);overflow:hidden;margin-top:auto}.subject .bar>i{display:block;height:100%;background:var(--c);border-radius:99px}.stars{letter-spacing:2px;font-size:1.1rem}.qcard{padding:22px}.qnum{display:inline-grid;place-items:center;min-width:46px;height:46px;padding:0 10px;border-radius:14px;background:var(--brand);color:#fff;font-family:var(--font-head);font-weight:700;font-size:1.1rem}.prompt{font-size:1.15rem;font-weight:600;white-space:pre-wrap}.passage{background:var(--bg2);border-radius:16px;padding:16px 18px;white-space:pre-wrap;line-height:1.7;max-height:46vh;overflow:auto;border:2px dashed var(--line);font-size:1.02rem}.svgbox{background:#fff;border-radius:16px;padding:10px;border:2px solid var(--line);text-align:center;color:#1d2340;overflow-x:auto}.svgbox svg{max-width:100%;height:auto}.opts{display:grid;gap:10px}.opt{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:12px 16px;min-height:58px;border-radius:16px;border:2.5px solid var(--line);background:var(--card);cursor:pointer;font-size:1.05rem;transition:border-color .12s,transform .08s,background .12s}.opt:hover{border-color:color-mix(in srgb,var(--brand) 60%,var(--line))}.opt:active{transform:scale(.99)}.opt .key{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--bg2);font-weight:800;font-family:var(--font-head)}.opt.sel{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--card))}.opt.sel .key{background:var(--brand);color:#fff}.opt.right{border-color:var(--good);background:var(--good-bg)}.opt.right .key{background:var(--good);color:#fff}.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}.opt.wrong .key{background:var(--bad);color:#fff}.opt:disabled{cursor:default}.blank-input{display:inline-block;width:auto;min-width:120px;max-width:220px;min-height:42px;padding:6px 10px;margin:2px 4px}.blank-input.ok{border-color:var(--good);background:var(--good-bg)}.blank-input.no{border-color:var(--bad);background:var(--bad-bg)}.feedback{border-radius:16px;padding:14px 16px;border:2px solid}.feedback.right{background:var(--good-bg);border-color:var(--good)}.feedback.partial{background:var(--warn-bg);border-color:var(--warn)}.feedback.wrong,.feedback.blank{background:var(--bad-bg);border-color:var(--bad)}.feedback.pending{background:var(--bg2);border-color:var(--line)}.feedback h4{margin:0 0 4px}.order-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:2.5px solid var(--line);background:var(--card);font-weight:600}.order-item .n{width:30px;height:30px;border-radius:9px;background:var(--bg2);display:grid;place-items:center;font-weight:800;flex:none}.order-item.ok{border-color:var(--good);background:var(--good-bg)}.order-item.no{border-color:var(--bad);background:var(--bad-bg)}.order-item .grow{flex:1}.palette{display:flex;flex-wrap:wrap;gap:8px}.pal{width:44px;height:44px;border-radius:12px;border:2px solid var(--line);background:var(--card);font-weight:800;cursor:pointer;position:relative;font-size:.85rem}.pal.done{background:color-mix(in srgb,var(--brand) 18%,var(--card));border-color:var(--brand)}.pal.cur{outline:3px solid var(--brand);outline-offset:2px}.pal.flag:after{content:"🚩";position:absolute;top:-10px;right:-8px;font-size:.85rem}.pal.right{background:var(--good-bg);border-color:var(--good)}.pal.wrong,.pal.blank{background:var(--bad-bg);border-color:var(--bad)}.pal.partial{background:var(--warn-bg);border-color:var(--warn)}.progress{height:12px;background:var(--bg2);border-radius:99px;overflow:hidden}.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#8ba7ff);border-radius:99px;transition:width .3s}.timer{font-family:var(--font-head);font-weight:700;font-variant-numeric:tabular-nums}.timer.low{color:var(--bad);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.5}}.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:320px;margin:0 auto}.pinpad button{height:70px;border-radius:20px;border:2px solid var(--line);background:var(--card);font-family:var(--font-head);font-size:1.8rem;font-weight:600;cursor:pointer;box-shadow:0 5px 0 var(--line);transition:transform .06s}.pinpad button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--line)}.dots{display:flex;gap:14px;justify-content:center;margin:18px 0}.dots i{width:20px;height:20px;border-radius:50%;border:3px solid var(--brand)}.dots i.on{background:var(--brand)}.shake{animation:shake .4s}@keyframes shake{20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}.avatar{width:96px;height:96px;border-radius:28px;display:grid;place-items:center;font-size:3rem;background:var(--bg2);border:3px solid var(--line);margin:0 auto 8px}.profile{cursor:pointer;text-align:center;padding:18px;border:0;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}.profile:hover .avatar{border-color:var(--brand);transform:scale(1.04)}.avatar-pick{display:flex;flex-wrap:wrap;gap:8px}.avatar-pick button{width:54px;height:54px;border-radius:16px;font-size:1.7rem;border:2.5px solid var(--line);background:var(--card);cursor:pointer}.avatar-pick button.sel{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 15%,var(--card))}.score-ring{width:180px;height:180px;margin:0 auto;position:relative}.score-ring .lbl{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--font-head)}.score-ring .lbl b{font-size:2.6rem;display:block;line-height:1}.topic-row{display:grid;grid-template-columns:1fr 120px 64px;gap:10px;align-items:center;padding:6px 0}.topic-row .progress{height:10px}@media(max-width:520px){.topic-row{grid-template-columns:1fr 80px 54px;font-size:.9rem}}.mascot{font-size:3rem;display:inline-block;animation:bob 2.4s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-6px) rotate(4deg)}}.pop{animation:pop .35s ease-out}@keyframes pop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}table.tbl{width:100%;border-collapse:collapse;font-size:.95rem}table.tbl th,table.tbl td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}table.tbl th{color:var(--ink2);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em}.scroll-x{overflow-x:auto}.tabs{display:flex;gap:8px;flex-wrap:wrap}.tabs button{border:2px solid var(--line);background:var(--card);border-radius:12px;padding:8px 14px;font-weight:700;cursor:pointer}.tabs button.on{background:var(--brand);color:#fff;border-color:var(--brand)}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);z-index:50;background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:14px;font-weight:700;box-shadow:var(--shadow);max-width:calc(100% - 32px)}.err{color:var(--bad);font-weight:700}.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:15;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:2px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}.bottombar .inner{max-width:980px;margin:0 auto;display:flex;gap:10px;justify-content:space-between;align-items:center}.modal-bg{position:fixed;inset:0;background:#0a0c1e8c;z-index:40;display:grid;place-items:center;padding:16px}.modal{max-width:460px;width:100%}@media print{.topbar,.bottombar,.noprint{display:none!important}body{background:#fff;color:#000;font-size:12pt}.card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}