:root{--color-background: #F6F7F9;--color-surface: #FFFFFF;--color-text: #18222D;--color-muted: #53616F;--color-accent: #2A6EC7;--color-accent-text: #FFFFFF;--color-again: #B42318;--color-hard: #8A4B00;--color-good: #1D4ED8;--color-easy: #166534;--safe-top: 0px;--safe-right: 0px;--safe-bottom: 0px;--safe-left: 0px}@media(prefers-color-scheme:dark){:root{--color-background: #17212B;--color-surface: #202B36;--color-text: #F3F6FA;--color-muted: #ADB9C5;--color-accent: #6AB2F2;--color-accent-text: #17212B;--color-again: #FF9C95;--color-hard: #F4C275;--color-good: #9DC5FF;--color-easy: #8FE1B2}}*{box-sizing:border-box}html{background:var(--color-background);color:var(--color-text);font-family:system-ui,sans-serif;font-size:16px;line-height:1.5}body{margin:0}button,input,textarea,select{font:inherit}button,input,textarea,select{border-radius:12px}button{min-height:44px;padding:8px 12px;border:1px solid var(--color-accent);background:var(--color-surface);color:var(--color-text);font-weight:600}button+button{margin-inline-start:8px}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[role=button]:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}.app-shell{width:min(100%,560px);min-height:100dvh;margin:0 auto;padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(88px + var(--safe-bottom)) calc(16px + var(--safe-left))}h1{font-size:24px;font-weight:600}.muted{color:var(--color-muted);font-size:14px;line-height:1.4}.button{min-height:48px;padding:10px 16px;border:0;background:var(--color-accent);color:var(--color-accent-text);font-weight:600}.button:disabled,.rating:disabled{opacity:.55}.notice{padding:12px;border-radius:12px;background:var(--color-surface)}.notice--error{border:1px solid var(--color-again)}.tabs{position:fixed;z-index:2;bottom:0;left:50%;translate:-50% 0;width:min(100%,560px);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 16px calc(8px + var(--safe-bottom));background:var(--color-surface)}.tabs button{min-height:48px;border:0;background:transparent;color:var(--color-text)}.tabs button,.ratings button{margin-inline-start:0}.tabs button[aria-current=page]{color:var(--color-accent);font-weight:700}.flash-card{min-height:min(56dvh,480px);max-height:65dvh;overflow:auto;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:32px 24px;border-radius:16px;background:var(--color-surface);overflow-wrap:anywhere;cursor:pointer}.flash-card__side{display:block;font-size:28px;font-weight:600;line-height:1.35;text-align:center}.flash-card__answer{padding-top:24px;border-top:1px solid var(--color-muted)}.review-page{width:min(100%,560px);min-height:100dvh;margin:0 auto;padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));display:flex;flex-direction:column;gap:16px}.review-controls{display:grid;gap:12px}.ratings{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rating{min-height:56px;border:2px solid currentColor;background:var(--color-surface);font-weight:600}.rating--again{color:var(--color-again)}.rating--hard{color:var(--color-hard)}.rating--good{color:var(--color-good)}.rating--easy{color:var(--color-easy)}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.summary-grid p{display:flex;flex-direction:column;padding:16px;border-radius:12px;background:var(--color-surface)}.summary-grid strong{font-size:28px}.summary-grid span{color:var(--color-muted)}input:not([type=checkbox]):not([type=radio]),textarea,select{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--color-muted);background:var(--color-surface);color:var(--color-text)}input[type=checkbox],input[type=radio]{width:24px;height:24px;flex:0 0 24px;accent-color:var(--color-accent)}label{display:grid;gap:4px;margin-block:12px}label:has(>input[type=checkbox]),label:has(>input[type=radio]){display:flex;align-items:center;gap:10px}fieldset{margin-block:16px;padding:16px;border:1px solid var(--color-muted);border-radius:12px;background:var(--color-surface)}fieldset p{color:var(--color-again)}@media(prefers-reduced-motion:no-preference){.flash-card__answer{animation:reveal .15s ease-out}@keyframes reveal{0%{opacity:0}}}
