:root{--bg:#0f1115;--surface:#171a21;--surface-hi:#1f2430;--line:#2a303c;--text:#e8eaf0;--text-dim:#9aa3b5;--accent:#7aa2f7;--ok:#7bc47f;--warn:#e0af68;--danger:#e06c75;--radius:14px;--gap:16px;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;--font-ja:"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Meiryo", var(--font)}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--bg:#f6f7f9;--surface:#fff;--surface-hi:#eef0f4;--line:#dfe3ea;--text:#171a21;--text-dim:#5d6679;--accent:#3b62c4}}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;margin:0;font-size:16px;line-height:1.5}button,input,textarea{font:inherit;color:inherit}.app{flex-direction:column;max-width:640px;min-height:100%;margin:0 auto;display:flex}.app--splash{justify-content:center;align-items:center}.app__body{padding:calc(env(safe-area-inset-top) + 12px) 16px 16px;flex:1;overflow-y:auto}.brand{font-family:var(--font-ja);letter-spacing:.1em;color:var(--text-dim);margin:0 0 8px;font-size:44px}.nav{background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);grid-template-columns:repeat(4,1fr);display:grid;position:sticky;bottom:0}.nav__item{color:var(--text-dim);cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;display:flex;position:relative}.nav__item.is-active{color:var(--accent)}.nav__icon{font-size:20px;line-height:1}.nav__label{font-size:11px}.badge{background:var(--accent);color:#0f1115;border-radius:9px;min-width:18px;padding:0 5px;font-size:11px;font-weight:600;line-height:18px;position:absolute;top:4px;right:50%;transform:translate(22px)}.dot{border-radius:50%;width:7px;height:7px;position:absolute;top:8px;right:50%;transform:translate(16px)}.dot--pending{background:var(--warn)}.dot--busy{background:var(--accent);animation:1.2s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.3}}@media (prefers-reduced-motion:reduce){.dot--busy{animation:none}}.view{gap:var(--gap);flex-direction:column;display:flex}.view--center{text-align:center;justify-content:center;align-items:center;min-height:60vh}.view--review{min-height:calc(100vh - 140px)}.h2{text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin:12px 0 -4px;font-size:13px}.hint{color:var(--text-dim);margin:0;font-size:14px}.hint--left{text-align:left}.done{color:var(--ok);margin:0;font-size:56px}.review__head{justify-content:space-between;align-items:center;display:flex}.tag{color:var(--text-dim);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px}.tag--muted{background:0 0;border-color:#0000}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:18px;min-height:42vh;padding:32px 20px;display:flex}.card__rule{border:0;border-top:1px solid var(--line);width:60%;margin:0}.prompt{margin:0}.prompt--de{font-size:30px;font-weight:500}.prompt--ja,.answer{flex-direction:column;gap:8px;margin:0;display:flex}.kanji{font-family:var(--font-ja);margin:0;font-size:56px;line-height:1.2}.kana{font-family:var(--font-ja);margin:0;font-size:40px;line-height:1.3}.kana--small{color:var(--text-dim);font-size:24px}.grades{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.btn{background:var(--surface-hi);border:1px solid var(--line);cursor:pointer;text-align:center;border-radius:10px;padding:12px 16px}.btn:disabled{opacity:.45;cursor:default}.btn--primary{background:var(--accent);border-color:var(--accent);color:#0f1115;font-weight:600}.btn--big{width:100%;padding:16px;font-size:17px}.btn--small{padding:6px 10px;font-size:13px}.btn--quiet{color:var(--text-dim);background:0 0;border:0;text-decoration:underline}.btn--danger{background:var(--danger);border-color:var(--danger);color:#0f1115;font-weight:600}.btn--icon{color:var(--text-dim);background:0 0;border:0;padding:0 8px;font-size:22px;line-height:1}.btn--grade{flex-direction:column;gap:2px;padding:12px 4px;display:flex}.btn__label{font-size:14px;font-weight:500}.btn__sub{color:var(--text-dim);font-size:11px}.btn--primary .btn__sub{color:#0f1115;opacity:.65}.btn--primary.btn--big{flex-direction:column;gap:2px;display:flex}.btn--grade-0{border-color:var(--danger)}.btn--grade-1{border-color:var(--warn)}.btn--grade-2{border-color:var(--ok)}.btn--grade-3{border-color:var(--accent)}.btn-row{flex-wrap:wrap;gap:8px;display:flex}.form{gap:var(--gap);flex-direction:column;display:flex}.form--narrow{width:100%;max-width:320px}.field{flex-direction:column;gap:6px;display:flex}.field__label{color:var(--text-dim);align-items:center;gap:8px;font-size:13px;display:flex}.field__badge{color:var(--text-dim);background:var(--surface-hi);border-radius:999px;padding:2px 8px;font-size:11px;font-style:normal}.field__hint{color:var(--text-dim);font-size:12px}.input{background:var(--surface);border:1px solid var(--line);border-radius:10px;width:100%;padding:12px 14px;font-size:16px}.input:focus{outline:2px solid var(--accent);outline-offset:-1px}.input--ja{font-family:var(--font-ja);font-size:20px}.input--area{resize:vertical;line-height:1.7}.input--search{font-size:16px}.check{align-items:center;gap:10px;padding:6px 0;display:flex}.segmented{background:var(--surface);border:1px solid var(--line);border-radius:10px;grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.segmented button{color:var(--text-dim);cursor:pointer;background:0 0;border:0;padding:10px}.segmented button.is-active{background:var(--surface-hi);color:var(--text)}.note{color:var(--text-dim);background:var(--surface);border-left:3px solid var(--line);border-radius:6px;margin:0;padding:10px 12px;font-size:14px}.note--warn{border-left-color:var(--warn)}.note--ok{border-left-color:var(--ok)}.stats{gap:24px;margin-bottom:8px;display:flex}.stat{flex-direction:column;display:flex}.stat__num{font-size:32px;font-weight:600}.stat__label{color:var(--text-dim);font-size:12px}.stat--muted .stat__num{color:var(--text-dim);font-weight:400}.rows{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.row{background:var(--surface);border:1px solid var(--line);border-radius:10px;align-items:center;gap:12px;padding:10px 12px;display:flex}.row--editing{flex-direction:column;align-items:stretch;gap:8px}.row__main{cursor:pointer;flex:1;min-width:0}.row__ja{font-family:var(--font-ja);flex-wrap:wrap;align-items:baseline;gap:10px;margin:0;display:flex}.row__kanji{font-size:22px}.row__kana{color:var(--text-dim);font-size:16px}.row__de{margin:2px 0 0;font-size:14px}.row__actions{gap:6px;display:flex}.pill{background:var(--surface-hi);color:var(--text-dim);white-space:nowrap;border-radius:999px;padding:2px 8px;font-size:11px}.strength{flex-direction:column;align-items:flex-end;gap:4px;min-width:68px;display:flex;position:relative}.strength__bar{background:var(--ok);border-radius:2px;min-width:2px;height:3px;display:block}.strength__text{color:var(--text-dim);white-space:nowrap;font-size:11px}.input--select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);background-position:calc(100% - 18px) calc(50% + 2px),calc(100% - 13px) calc(50% + 2px);background-repeat:no-repeat;background-size:5px 5px;padding-right:36px}.group-filter{width:100%;max-width:280px}.group-filter .field__label{justify-content:center}.row__group{color:var(--text-dim);background:var(--surface-hi);white-space:nowrap;border-radius:999px;margin-left:8px;padding:2px 8px;font-size:11px}.pill--active{background:var(--accent);color:#0f1115;font-weight:600}.row--quiet{border-style:dashed}.btn--secondary{border-color:var(--line);color:var(--text-dim);background:0 0;flex-direction:column;gap:2px;display:flex}.grades--practice{grid-template-columns:1fr 1fr}.tag--practice{border-color:var(--warn);color:var(--warn)}.answer__note{color:var(--text-dim);white-space:pre-wrap;max-width:34ch;margin:4px 0 0;font-size:15px;line-height:1.5}.row__note{color:var(--text-dim);white-space:pre-wrap;margin:4px 0 0;font-size:13px}