:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#12151c;--surface:#1b202b;--surface-2:#232a38;--border:#2f3752;--text:#e8ecf4;--muted:#9aa4b8;--accent:#4f8cff;--accent-2:#7cb3ff;--danger:#ff5d5d;--good:#39d98a;--easy:#4f8cff;--radius:12px}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f5f7fb;--surface:#fff;--surface-2:#eef1f7;--border:#d9dfea;--text:#1c2433;--muted:#64728c;--accent:#2f6bff;--accent-2:#4f8cff;--danger:#d9342f;--good:#12a05c;--easy:#2f6bff}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Hiragino Sans,Noto Sans JP,sans-serif;line-height:1.5}#root{min-height:100vh}.app{flex-direction:column;min-height:100vh;display:flex}.app-header{z-index:10;background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);align-items:center;gap:24px;padding:12px 24px;display:flex;position:sticky;top:0}.brand{color:var(--text);align-items:baseline;gap:8px;font-size:20px;font-weight:700;text-decoration:none;display:flex}.brand-sub{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:12px;font-weight:600}.nav{gap:4px;margin-left:auto;display:flex}.nav a{color:var(--muted);border-radius:8px;padding:8px 14px;font-weight:500;text-decoration:none}.nav a:hover,.nav a.active{color:var(--text);background:var(--surface-2)}.icon-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:10px;width:40px;height:40px;font-size:18px}.icon-btn:hover{border-color:var(--accent)}.menu{position:relative}.menu-backdrop{z-index:19;position:fixed;inset:0}.menu-dropdown{z-index:20;background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:2px;min-width:200px;padding:6px;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 12px 32px #00000059}.menu-item{width:100%;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:10px;padding:10px 12px;font-size:14px;font-weight:600;display:flex}.menu-item:hover{background:var(--surface-2)}.menu-item-danger{color:var(--danger)}.menu-icon{text-align:center;width:18px}.app-main{flex-direction:column;flex:1;width:100%;max-width:980px;margin:0 auto;padding:32px 24px 64px;display:flex}.app-footer{text-align:center;color:var(--muted);border-top:1px solid var(--border);padding:20px;font-size:13px}.page h1{margin:0 0 4px;font-size:26px}.muted{color:var(--muted)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-top:20px;padding:24px}.btn{cursor:pointer;color:var(--text);background:var(--surface-2);border:none;border:1px solid var(--border);border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:15px;font-weight:600;text-decoration:none;display:inline-flex}.btn:hover{filter:brightness(1.08)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff;border-color:#0000}.btn-ghost{background:0 0}.btn-block{width:100%}.btn-danger-ghost{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 40%, transparent);background:0 0}.btn-danger{background:var(--danger);color:#fff;border-color:#0000}.btn-small{padding:9px 14px;font-size:13px}.btn-again{background:color-mix(in srgb, var(--danger) 16%, var(--surface));color:var(--danger);border-color:color-mix(in srgb, var(--danger) 40%, transparent);flex:1;padding:14px}.btn-good{background:color-mix(in srgb, var(--good) 16%, var(--surface));color:var(--good);border-color:color-mix(in srgb, var(--good) 40%, transparent);flex:1;padding:14px}.btn-easy{background:color-mix(in srgb, var(--easy) 16%, var(--surface));color:var(--easy);border-color:color-mix(in srgb, var(--easy) 40%, transparent);flex:1;padding:14px}.badge{letter-spacing:.04em;background:var(--surface-2);color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:2px 8px;font-size:12px;font-weight:700;display:inline-block}.badge-level5{color:#4f8cff;background:#2f6bff22;border-color:#2f6bff55}.badge-level4{color:#12a05c;background:#12a05c22;border-color:#12a05c55}.badge-level3{color:#d99000;background:#d9900022;border-color:#d9900055}.badge-level2{color:#b026ff;background:#b026ff22;border-color:#b026ff55}.badge-level1{color:#e0515b;background:#e0515b22;border-color:#e0515b55}:root[data-theme=light] .badge-level5{color:#1a5cff}:root[data-theme=light] .badge-level4{color:#0b8a4d}:root[data-theme=light] .badge-level3{color:#b57a00}:root[data-theme=light] .badge-level2{color:#8f1fd6}:root[data-theme=light] .badge-level1{color:#c93a45}.chip{border-radius:999px;padding:3px 12px;font-size:12px;font-weight:700;display:inline-block}.chip-new{background:var(--surface-2);color:var(--muted)}.chip-learning{color:#d99000;background:#d9900022}.chip-mature{color:var(--good);background:#12a05c22}.hero{padding:24px 0 8px}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:20px;display:flex}.stat-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:24px;display:grid}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:6px;padding:18px;display:flex}.stat-value{font-size:30px;font-weight:800}.stat-due{color:var(--danger)}.stat-new{color:var(--accent-2)}.stat-label{color:var(--muted);font-size:13px}.bar{background:var(--surface-2);border-radius:999px;height:6px;overflow:hidden}.bar-fill{background:linear-gradient(90deg, var(--accent), var(--accent-2));border-radius:999px;height:100%;transition:width .3s}.card h2{margin:0 0 16px;font-size:18px}.level-list{flex-direction:column;gap:14px;display:flex}.level-row{align-items:center;gap:12px;display:flex}.level-row .badge{text-align:center;width:46px}.level-bar{background:var(--surface-2);border-radius:999px;flex:1;height:10px;overflow:hidden}.level-bar-stacked{display:flex}.bar-seg{height:100%;transition:width .3s}.bar-seg-learning{background:#d99000}.bar-seg-mature{background:var(--good)}.legend{color:var(--muted);flex-wrap:wrap;gap:16px;margin:0 0 16px;font-size:13px;display:flex}.legend span{align-items:center;gap:6px;display:inline-flex}.swatch{border-radius:3px;width:12px;height:12px;font-style:normal}.swatch-new{background:var(--surface-2);border:1px solid var(--border)}.swatch-learning{background:#d99000}.swatch-mature{background:var(--good)}.level-count{text-align:right;width:64px;color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px}.setup-card{flex-direction:column;gap:10px;display:flex}.setup-row{justify-content:space-between;align-items:center;gap:16px;padding-top:10px;display:flex}.setup-label{font-size:17px;font-weight:700;display:block}.setup-hint{color:var(--muted);font-size:13px}.setup-row input[type=number]{border:1px solid var(--border);background:var(--surface-2);width:90px;color:var(--text);border-radius:10px;padding:10px 12px;font-size:16px}input[type=range]{width:100%;accent-color:var(--accent)}.setup-summary{text-align:center;color:var(--muted);padding:8px 0}.setup-empty{text-align:center;margin:0}.study-page{flex-direction:column;flex:1;min-height:calc(100vh - 160px);display:flex}.study-top{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.study-meta{gap:16px;font-weight:600;display:flex}.progress-track{background:var(--surface-2);border-radius:999px;height:6px;margin-bottom:20px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent), var(--good));height:100%;transition:width .25s}.intro-banner{color:var(--muted);align-items:center;gap:10px;margin-bottom:16px;font-size:14px;display:flex}.intro-wrap{flex-direction:column;flex:1;gap:20px;display:flex}.intro-card{flex-direction:column;flex:1;margin-top:0;display:flex}.flashcard-wrap{flex-direction:column;flex:1;gap:20px;display:flex}.flashcard{perspective:1200px;cursor:pointer;flex:1;display:flex}.flashcard-inner{min-height:380px;transform-style:preserve-3d;flex:1;transition:transform .5s;position:relative}.flashcard.is-flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard-face{backface-visibility:hidden;background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;display:flex;position:absolute;inset:0;overflow-y:auto}.flashcard-front{cursor:pointer}.flashcard-back{cursor:default;justify-content:flex-start;transform:rotateY(180deg)}.kanji-giant{font-size:96px;font-weight:700;line-height:1}.flash-hint{color:var(--muted);font-size:13px}.grade-row{gap:12px;display:flex}.kanji-details{flex-direction:column;gap:16px;width:100%;display:flex}.kanji-head{justify-content:center;align-items:center;gap:14px;display:flex}.kanji-big{font-size:56px;font-weight:700;line-height:1}.details-block h4{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 4px;font-size:12px}.details-block p{margin:0;font-size:16px}.readings{gap:24px;display:flex}.readings>div{flex:1}.examples{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.examples li{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;flex-direction:column;padding:10px 12px;display:flex}.examples .ja{font-size:17px}.examples .en{color:var(--muted);font-size:13px}.card-info p{font-size:14px}.toolbar{flex-wrap:wrap;align-items:center;gap:14px;margin:20px 0 8px;display:flex}.tabs{background:var(--surface);border:1px solid var(--border);border-radius:10px;gap:6px;padding:4px;display:flex}.tab{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:7px;padding:8px 16px;font-weight:700}.tab-active{background:var(--accent);color:#fff}.search{border:1px solid var(--border);background:var(--surface);min-width:200px;color:var(--text);border-radius:10px;flex:1;padding:10px 14px;font-size:14px}.select-actions{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:10px;padding:10px 12px;font-size:14px}.select-actions:disabled{opacity:.45;cursor:not-allowed}.action-menu{display:inline-flex}.menu-trigger{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;border-radius:10px;align-items:center;gap:8px;padding:9px 14px;font-size:13px;font-weight:600;display:inline-flex}.menu-trigger:hover:not(:disabled){border-color:var(--accent)}.menu-trigger:disabled{opacity:.45;cursor:not-allowed}.chevron{color:var(--muted);font-size:11px;transition:transform .15s}.chevron-open{transform:rotate(180deg)}.selection-info{color:var(--accent-2);white-space:nowrap;font-weight:700}.selection-hint{margin:0 0 8px}.kanji-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;margin-top:8px;display:grid}.kanji-cell{aspect-ratio:1;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;font-size:24px;font-weight:600;display:flex}.kanji-cell:hover{border-color:var(--accent)}.cell-new{opacity:.75}.cell-learning{border-color:#d99000aa}.cell-mature{border-color:var(--good);background:color-mix(in srgb, var(--good) 10%, var(--surface))}.cell-selected{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 22%, var(--surface));box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent)}.modal-backdrop{z-index:50;background:#0000008c;display:flex;position:fixed;inset:0}.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:480px;max-height:85vh;margin:auto;padding:28px;position:relative;overflow-y:auto}.modal-close{color:var(--muted);cursor:pointer;background:0 0;border:none;font-size:18px;position:absolute;top:12px;right:12px}.modal-confirm h3{margin:0 0 8px}.modal-actions{justify-content:flex-end;gap:12px;margin-top:20px;display:flex}.stat-inline{flex-wrap:wrap;gap:18px;padding:8px 0 18px;display:flex}.stat-inline span{color:var(--muted)}.stat-inline strong{color:var(--text)}@media (width<=560px){.app-header{flex-wrap:wrap;gap:10px}.nav{order:3;width:100%;margin-left:0}.app-main{padding:16px 14px 20px}.study-page{min-height:calc(100vh - 130px)}.flashcard-inner{min-height:320px}.readings{flex-direction:column;gap:12px}}