:root{--ease:cubic-bezier(.22, .61, .36, 1);--radius:14px;--radius-sm:9px;--radius-lg:22px;--font-ui:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;--font-ar:"SF Arabic", "Geeza Pro", "Noto Naskh Arabic", "Amiri", "Traditional Arabic", var(--font-ui);--font-mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--tap:44px;--tabbar-h:58px}:root,[data-theme=dark]{--bg:#0e1116;--bg-raised:#161b22;--bg-inset:#0a0d12;--surface:#1c232c;--surface-hover:#232b36;--border:#2a323d;--border-strong:#3a4553;--text:#e6edf3;--text-dim:#9aa7b4;--text-faint:#6b7885;--accent:#c98a4b;--accent-hi:#d99b5c;--accent-lo:#a76f38;--on-accent:#14181d;--accent-soft:#c98a4b24;--accent-text:#e8b075;--good:#4ea36f;--good-soft:#4ea36f26;--bad:#d1595f;--bad-soft:#d1595f26;--warn:#d9a441;--warn-soft:#d9a44124;--info:#5b8ec4;--info-soft:#5b8ec424;--shadow:0 2px 8px #0006, 0 8px 24px #0000003d;--shadow-sm:0 1px 3px #0000005c;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}[data-theme=light]{--bg:#f6f7f9;--bg-raised:#fff;--bg-inset:#eceef1;--surface:#fff;--surface-hover:#f1f3f6;--border:#dde1e7;--border-strong:#c3cad4;--text:#16202b;--text-dim:#5a6773;--text-faint:#8b97a3;--accent:#9c6b3f;--accent-hi:#ad7b4d;--accent-lo:#7d5430;--on-accent:#fff;--accent-soft:#9c6b3f1a;--accent-text:#7d5430;--good:#2f7d4f;--good-soft:#2f7d4f1a;--bad:#b3373d;--bad-soft:#b3373d17;--warn:#9a6f14;--warn-soft:#9a6f141a;--info:#2f6398;--info-soft:#2f63981a;--shadow:0 1px 3px #10202b14, 0 6px 20px #10202b12;--shadow-sm:0 1px 2px #10202b14;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;overscroll-behavior-y:none;margin:0;font-size:16px;line-height:1.5}#root{padding-top:env(safe-area-inset-top)}h1,h2,h3,h4{letter-spacing:-.014em;margin:0;font-weight:650;line-height:1.24}h1{font-size:26px}h2{font-size:20px}h3{font-size:16px}p{margin:0 0 var(--sp-3)}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}a{color:var(--accent-text);border-bottom:1px solid var(--accent-soft);text-decoration:none}a:hover{border-bottom-color:var(--accent)}.ar{font-family:var(--font-ar);letter-spacing:0;direction:rtl;unicode-bidi:isolate;font-size:1.34em;line-height:1.9}.shell{max-width:780px;padding:0 var(--sp-4);padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-6));margin:0 auto}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-4);box-shadow:var(--shadow-sm)}.stack{flex-direction:column;display:flex}.row{align-items:center;display:flex}.gap-1{gap:var(--sp-1)}.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}.gap-5{gap:var(--sp-5)}.grow{flex:1}.between{justify-content:space-between}.center{justify-content:center}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.dim{color:var(--text-dim)}.faint{color:var(--text-faint)}.small{font-size:13px}.tiny{font-size:11.5px}.mono{font-family:var(--font-mono)}.center-text{text-align:center}.btn{justify-content:center;align-items:center;gap:var(--sp-2);min-height:var(--tap);padding:0 var(--sp-4);border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border);color:var(--text);letter-spacing:-.006em;box-shadow:var(--shadow-sm);transition:background .16s var(--ease), border-color .16s var(--ease), transform .11s var(--ease), box-shadow .16s var(--ease), opacity .16s var(--ease);font-size:15px;font-weight:550;display:inline-flex;position:relative}.btn:hover{background:var(--surface-hover);border-color:var(--border-strong)}.btn:active{box-shadow:none;transform:translateY(1px)scale(.988)}.btn:focus-visible{box-shadow:0 0 0 3px var(--accent-soft), var(--shadow-sm);border-color:var(--accent);outline:none}.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.btn svg{flex-shrink:0}.btn-primary{background:var(--accent);background-image:linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 100%);border-color:var(--accent-lo);color:var(--on-accent);box-shadow:0 1px 2px #00000047, 0 4px 14px var(--accent-soft);font-weight:660}.btn-primary:hover{filter:brightness(1.05);border-color:var(--accent)}.btn-primary:active{filter:brightness(.97)}.btn-lg{border-radius:var(--radius);min-height:54px;font-size:16.5px}.btn-choice{min-height:58px;padding-right:var(--sp-4);text-align:right;justify-content:flex-end}.btn-muted{opacity:.42}.btn-good{background:var(--good-soft);border-color:var(--good);color:var(--good)}.btn-bad{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}.btn-ghost{background:0 0;border-color:#0000}.btn-ghost:hover{background:var(--surface-hover)}.btn-sm{min-height:var(--tap);padding:0 var(--sp-3);font-size:13.5px}.btn-block{width:100%}.pill{letter-spacing:.02em;background:var(--bg-inset);border:1px solid var(--border);color:var(--text-dim);border-radius:999px;align-items:center;gap:5px;padding:3px 9px;font-size:11.5px;font-weight:600;display:inline-flex}.pill-accent{background:var(--accent-soft);color:var(--accent-text);border-color:#0000}.pill-good{background:var(--good-soft);color:var(--good);border-color:#0000}.pill-bad{background:var(--bad-soft);color:var(--bad);border-color:#0000}.pill-warn{background:var(--warn-soft);color:var(--warn);border-color:#0000}.pill-info{background:var(--info-soft);color:var(--info);border-color:#0000}.topbar{z-index:50;background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:saturate(180%)blur(14px);border-bottom:1px solid var(--border);padding:var(--sp-3) var(--sp-4);padding-top:calc(var(--sp-3) + env(safe-area-inset-top));position:sticky;top:0}.tabbar{height:var(--tabbar-h);z-index:50;background:color-mix(in srgb, var(--bg-raised) 94%, transparent);-webkit-backdrop-filter:saturate(180%)blur(16px);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom);grid-template-columns:repeat(5,1fr);display:grid;position:fixed;bottom:0;left:0;right:0}.tab{color:var(--text-faint);transition:color .15s var(--ease);flex-direction:column;align-items:center;gap:3px;padding:9px 2px 7px;font-size:10.5px;font-weight:600;display:flex}.tab svg{width:21px;height:21px}.tab.active{color:var(--accent-text)}.bar{background:var(--bg-inset);border-radius:999px;height:6px;overflow:hidden}.bar>i{background:var(--accent);height:100%;transition:width .4s var(--ease);border-radius:999px;display:block}.seg{background:var(--bg-inset);border-radius:999px;height:8px;display:flex;overflow:hidden}.seg>i{height:100%;transition:width .4s var(--ease);display:block}.input,.textarea,.select{width:100%;min-height:var(--tap);padding:var(--sp-2) var(--sp-3);background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font:inherit;font-size:16px}.input:focus,.textarea:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.textarea{resize:vertical;min-height:96px;line-height:1.6}.divider{background:var(--border);height:1px;margin:var(--sp-4) 0;border:0}.callout{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:var(--sp-3) var(--sp-4);font-size:14px;line-height:1.55}.callout-warn{border-left-color:var(--warn);background:var(--warn-soft)}.callout-bad{border-left-color:var(--bad);background:var(--bad-soft)}.callout-info{border-left-color:var(--info);background:var(--info-soft)}@keyframes fade{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.pulse{animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.chips{gap:var(--sp-2);scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--sp-4));padding-bottom:2px;padding-left:var(--sp-4);padding-right:var(--sp-4);display:flex;overflow-x:auto}.chips::-webkit-scrollbar{display:none}.chips>.btn{white-space:nowrap;flex:none}.chips-wrap{position:relative}.chips-wrap:after{content:"";top:0;right:calc(-1 * var(--sp-4));pointer-events:none;background:linear-gradient(to right, transparent, var(--bg));width:34px;height:100%;position:absolute}.grade-grid{gap:var(--sp-2);grid-template-columns:1fr 1fr;display:grid}@media (width>=520px){.grade-grid{grid-template-columns:repeat(4,1fr)}}.listening-box{background:var(--bg-inset);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:var(--sp-3);min-height:82px;box-shadow:inset 0 0 0 1px var(--accent-soft), 0 0 18px var(--accent-soft)}.tab{position:relative}.tab.active:before{content:"";background:var(--accent);border-radius:0 0 3px 3px;width:22px;height:2.5px;position:absolute;top:0;left:50%;transform:translate(-50%)}.tab:active{transform:scale(.94)}button.card{transition:transform .12s var(--ease), border-color .16s var(--ease), background .16s var(--ease);width:100%}button.card:active{transform:scale(.988)}button.card:hover{border-color:var(--border-strong);background:var(--surface-hover)}.checkbox{min-width:var(--tap);min-height:var(--tap);border:1.5px solid var(--border-strong);color:#fff;width:24px;height:24px;transition:background .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease);background:0 0;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;margin-top:1px;display:inline-flex}.checkbox:active{transform:scale(.9)}.checkbox.on{background:var(--good);border-color:var(--good)}.drill-icon{background:var(--accent-soft);width:38px;height:38px;color:var(--accent-text);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.verdict{border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);border-left:3px solid var(--border-strong);background:var(--bg-inset)}.verdict-easy,.verdict-good{border-left-color:var(--good);background:var(--good-soft)}.verdict-hard{border-left-color:var(--warn);background:var(--warn-soft)}.verdict-again{border-left-color:var(--bad);background:var(--bad-soft)}.doc-scroll{-webkit-overflow-scrolling:touch;background:var(--bg-inset);border:1px solid var(--border);max-height:46vh;overflow-y:auto}.doc-text{font-family:var(--font-serif,Georgia, "Times New Roman", serif);white-space:pre-wrap;color:var(--fg);font-size:16.5px;line-height:1.75}.textarea{background:var(--bg-inset);border:1px solid var(--border-strong);border-radius:var(--radius-sm);width:100%;color:var(--fg);padding:var(--sp-3);resize:vertical;font-family:inherit;font-size:16px;line-height:1.6}.textarea:focus{outline:2px solid var(--accent);outline-offset:1px}.textarea[dir=rtl]{font-family:var(--font-ar);font-size:19px;line-height:1.9}.ar-inline{font-family:var(--font-ar);direction:rtl;unicode-bidi:isolate;font-size:1.12em}.wrap{flex-wrap:wrap}.fade-in{animation:.22s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}