:root{--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-jp:"Noto Sans JP", sans-serif;--font-jp-serif:"Shippori Mincho", "Noto Sans JP", serif;--ease-spring:cubic-bezier(.175, .885, .32, 1.275);--ease-smooth:cubic-bezier(.4, 0, .2, 1);--transition-fast:.15s var(--ease-smooth);--transition-normal:.25s var(--ease-smooth)}[data-theme=dark]{--bg-app:#0c0f14;--bg-surface:#141822;--bg-surface-elevated:#1c2230;--bg-surface-glass:#141822bf;--border-subtle:#ffffff14;--border-active:#ffffff2e;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--text-glyph:#f1f5f9;--accent-primary:#ff5d73;--accent-hover:#ff758f;--accent-glow:#ff5d7340;--color-success:#10b981;--color-success-bg:#10b9811f;--color-success-border:#10b98159;--color-error:#f43f5e;--color-error-bg:#f43f5e1f;--color-error-border:#f43f5e59;--color-warning:#f59e0b;--color-warning-bg:#f59e0b1f;--color-indigo:#6366f1;--shadow-card:0 12px 32px -4px #00000080, 0 4px 12px #0000004d;--shadow-glow:0 0 30px #ff5d7326}[data-theme=light]{--bg-app:#f7f6f2;--bg-surface:#fff;--bg-surface-elevated:#f0eee8;--bg-surface-glass:#ffffffd9;--border-subtle:#00000014;--border-active:#00000029;--text-primary:#1e293b;--text-secondary:#64748b;--text-muted:#94a3b8;--text-glyph:#0f172a;--accent-primary:#d90429;--accent-hover:#ef233c;--accent-glow:#d9042926;--color-success:#059669;--color-success-bg:#0596691a;--color-success-border:#0596694d;--color-error:#e11d48;--color-error-bg:#e11d481a;--color-error-border:#e11d484d;--color-warning:#d97706;--color-warning-bg:#d977061a;--color-indigo:#4f46e5;--shadow-card:0 10px 28px -4px #00000014, 0 2px 8px #0000000a;--shadow-glow:0 0 25px #d904291a}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-primary);min-height:100vh;transition:background-color var(--transition-normal), color var(--transition-normal);-webkit-font-smoothing:antialiased}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input{border:none;outline:none;font-family:inherit}.app-container{flex-direction:column;min-height:100vh;display:flex;position:relative}.navbar-container{z-index:50;-webkit-backdrop-filter:blur(16px);background-color:var(--bg-surface-glass);border-bottom:1px solid var(--border-subtle);padding:.75rem 1.5rem;position:sticky;top:0}.navbar-content{justify-content:space-between;align-items:center;gap:1rem;max-width:1200px;margin:0 auto;display:flex}.brand-group{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.75rem;display:flex}.brand-badge{background:linear-gradient(135deg, var(--accent-primary), #b5179e);width:38px;height:38px;font-family:var(--font-jp-serif);color:#fff;box-shadow:0 4px 12px var(--accent-glow);border-radius:10px;justify-content:center;align-items:center;font-size:1.25rem;font-weight:800;display:flex}.brand-text{flex-direction:column;display:flex}.brand-title{letter-spacing:.05em;color:var(--text-primary);font-size:1.15rem;font-weight:800;line-height:1.1}.brand-sub{font-family:var(--font-jp-serif);color:var(--accent-primary);font-size:.95rem;font-weight:600}.brand-tagline{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;font-weight:500}.nav-tabs{background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:12px;align-items:center;gap:.35rem;padding:.3rem;display:flex}.nav-tab-btn{color:var(--text-secondary);transition:all var(--transition-fast);border-radius:8px;align-items:center;gap:.45rem;padding:.45rem .85rem;font-size:.85rem;font-weight:600;display:flex;position:relative}.nav-tab-btn:hover{color:var(--text-primary);background-color:#ffffff0a}.nav-tab-btn.active{color:var(--text-primary);background-color:var(--bg-surface);box-shadow:0 2px 8px #00000026}.nav-tab-kanji{font-family:var(--font-jp-serif);font-size:1rem;font-weight:700}.version-pill{background-color:var(--color-indigo);color:#fff;border-radius:6px;padding:.1rem .4rem;font-size:.65rem;font-weight:700}.count-pill{color:var(--text-muted);background-color:#ffffff14;border-radius:6px;padding:.1rem .4rem;font-size:.65rem}.badge-pill{border-radius:6px;padding:.1rem .4rem;font-size:.65rem;font-weight:700}.badge-pill.error{background-color:var(--color-error);color:#fff}.badge-pill.success{background-color:var(--color-success);color:#fff}.nav-actions{align-items:center;gap:.5rem;display:flex}.streak-badge{color:#f59e0b;background:linear-gradient(135deg,#f59e0b26,#ef444426);border:1px solid #f59e0b4d;border-radius:10px;align-items:center;gap:.35rem;padding:.35rem .75rem;font-size:.8rem;font-weight:700;display:flex}.streak-icon{color:#f59e0b;animation:2s ease-in-out infinite pulse-flame}@keyframes pulse-flame{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.icon-btn{width:36px;height:36px;color:var(--text-secondary);background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle);transition:all var(--transition-fast);border-radius:10px;justify-content:center;align-items:center;display:flex}.icon-btn:hover{color:var(--text-primary);border-color:var(--border-active);transform:translateY(-1px)}.reset-btn:hover{color:var(--color-error)}.main-content{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:2rem 1.5rem 4rem}.katakana-subpage-wrapper{flex-direction:column;gap:1.5rem;display:flex}.subpage-banner{background:linear-gradient(135deg,#6366f126,#14182280);border:1px solid #6366f14d;border-radius:16px;justify-content:space-between;align-items:center;padding:1.25rem 1.75rem;display:flex}.subpage-tag{text-transform:uppercase;letter-spacing:.08em;color:var(--color-indigo);background-color:#6366f126;border-radius:6px;margin-bottom:.35rem;padding:.2rem .5rem;font-size:.7rem;font-weight:700;display:inline-block}.subpage-info h2{margin-bottom:.25rem;font-size:1.35rem;font-weight:800}.subpage-info p{color:var(--text-secondary);font-size:.85rem}.filters-container{background-color:var(--bg-surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);border-radius:16px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.75rem;padding:.85rem 1.25rem;display:flex}.list-filter-group,.category-filter-group{align-items:center;gap:.65rem;display:flex}.filter-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:.75rem;font-weight:700}.segmented-control{background-color:var(--bg-surface-elevated);border-radius:10px;align-items:center;gap:.25rem;padding:.25rem;display:flex}.segment-btn{color:var(--text-secondary);transition:all var(--transition-fast);border-radius:7px;align-items:center;gap:.45rem;padding:.4rem .75rem;font-size:.8rem;font-weight:600;display:flex}.segment-btn:hover{color:var(--text-primary)}.segment-btn.active{background-color:var(--bg-surface);color:var(--text-primary);box-shadow:0 2px 6px #0000001f}.segment-btn.alert-active{color:var(--color-error)}.segment-btn.success-active{color:var(--color-success)}.count-badge{background-color:#ffffff14;border-radius:6px;padding:.1rem .4rem;font-size:.7rem;font-weight:700}.badge-alert{background-color:var(--color-error);color:#fff}.badge-success{background-color:var(--color-success);color:#fff}.sub-filter-buttons{align-items:center;gap:.35rem;display:flex}.sub-filter-btn{color:var(--text-muted);border:1px solid var(--border-subtle);transition:all var(--transition-fast);border-radius:8px;padding:.35rem .65rem;font-size:.75rem;font-weight:600}.sub-filter-btn:hover{color:var(--text-primary);border-color:var(--border-active)}.sub-filter-btn.active{background-color:var(--bg-surface-elevated);color:var(--accent-primary);border-color:var(--accent-primary);font-weight:700}.card-arena{justify-content:center;margin-bottom:2rem;display:flex}.flashcard-container{background-color:var(--bg-surface);border:1px solid var(--border-subtle);width:100%;max-width:520px;box-shadow:var(--shadow-card);border-radius:24px;flex-direction:column;align-items:center;padding:2.25rem;transition:border-color .2s,box-shadow .2s;display:flex;position:relative}.flashcard-container.correct{border-color:var(--color-success);box-shadow:0 0 35px var(--color-success-bg)}.flashcard-container.incorrect{border-color:var(--color-error);box-shadow:0 0 35px var(--color-error-bg)}.flashcard-top{justify-content:space-between;align-items:center;width:100%;margin-bottom:1.5rem;display:flex}.meta-tags{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.tag-pill{text-transform:capitalize;border-radius:8px;padding:.25rem .6rem;font-size:.7rem;font-weight:700}.tag-pill.category{background-color:var(--bg-surface-elevated);color:var(--text-secondary)}.tag-pill.group{color:var(--text-muted);background-color:#ffffff0d}.tag-pill.mastered{background-color:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success-border)}.tag-pill.in-mistakes{background-color:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error-border)}.audio-bubble-btn{background-color:var(--bg-surface-elevated);width:40px;height:40px;color:var(--text-secondary);border:1px solid var(--border-subtle);transition:all var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.audio-bubble-btn:hover{color:var(--accent-primary);border-color:var(--accent-primary);transform:scale(1.08)}.character-display{background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle);cursor:pointer;width:auto;min-width:220px;max-width:380px;height:180px;transition:transform var(--transition-fast), border-color var(--transition-fast);-webkit-user-select:none;user-select:none;border-radius:24px;justify-content:center;align-items:center;margin-bottom:1.5rem;padding:0 2rem;display:flex;overflow:hidden}.character-display:hover{border-color:var(--border-active);transform:scale(1.03)}.character-display.combo-display{min-width:270px;padding:0 2.5rem}.japanese-glyph{font-family:var(--font-jp-serif);color:var(--text-glyph);white-space:nowrap;letter-spacing:.02em;justify-content:center;align-items:center;font-size:5.8rem;font-weight:700;line-height:1;display:inline-flex}.japanese-glyph.combo-glyph{letter-spacing:-.03em;gap:.15rem;font-size:4.4rem}.hint-banner{background-color:var(--color-warning-bg);color:#fbbf24;border:1px solid #f59e0b4d;border-radius:12px;align-items:center;gap:.5rem;width:100%;margin-bottom:1.25rem;padding:.75rem 1rem;font-size:.85rem;display:flex}.hint-bulb{flex-shrink:0}.feedback-banner{border-radius:14px;align-items:center;gap:.75rem;width:100%;margin-bottom:1.25rem;padding:.85rem 1.25rem;display:flex}.feedback-banner.correct{background-color:var(--color-success-bg);border:1px solid var(--color-success-border);color:var(--color-success)}.feedback-sub{color:var(--text-secondary);margin-left:.25rem;font-weight:500}.feedback-banner.incorrect{background-color:var(--color-error-bg);border:1px solid var(--color-error-border);color:var(--color-error)}.feedback-text-wrap{flex-direction:column;gap:.15rem;display:flex}.feedback-title{font-size:.95rem}.highlight-answer{background-color:var(--color-error);color:#fff;border-radius:6px;padding:.1rem .4rem;font-size:1rem;font-weight:800}.feedback-details{color:var(--text-secondary);font-size:.78rem}.wrong-typed{color:var(--color-error);font-style:italic}.input-form{width:100%;margin-bottom:1.5rem}.input-wrapper{align-items:center;display:flex;position:relative}.romaji-input{background-color:var(--bg-surface-elevated);border:2px solid var(--border-subtle);width:100%;color:var(--text-primary);transition:all var(--transition-fast);border-radius:14px;padding:1rem 5.5rem 1rem 1.25rem;font-size:1.15rem;font-weight:700}.romaji-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 4px var(--accent-glow)}.romaji-input.correct{border-color:var(--color-success)}.romaji-input.incorrect{border-color:var(--color-error)}.submit-btn{background:linear-gradient(135deg, var(--accent-primary), #b5179e);color:#fff;transition:all var(--transition-fast);border-radius:10px;align-items:center;gap:.35rem;padding:.55rem 1rem;font-size:.85rem;font-weight:700;display:flex;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.submit-btn:hover{opacity:.95;transform:translateY(-50%)scale(1.02)}.submit-btn.next-mode{background:var(--color-indigo)}.flashcard-footer{border-top:1px solid var(--border-subtle);justify-content:space-between;align-items:center;width:100%;padding-top:1rem;display:flex}.hint-toggle-btn,.skip-btn{color:var(--text-muted);transition:all var(--transition-fast);border-radius:8px;align-items:center;gap:.35rem;padding:.35rem .6rem;font-size:.8rem;font-weight:600;display:flex}.hint-toggle-btn:hover,.skip-btn:hover{color:var(--text-primary);background-color:var(--bg-surface-elevated)}.deck-progress-indicator{color:var(--text-muted);font-size:.75rem;font-weight:600}.session-stats-strip{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:16px;justify-content:center;align-items:center;gap:2rem;max-width:650px;margin:0 auto;padding:1rem 2rem;display:flex}.stat-item{flex-direction:column;align-items:center;gap:.15rem;display:flex}.stat-num{font-size:1.35rem;font-weight:800;line-height:1}.stat-num.text-correct{color:var(--color-success)}.stat-num.text-incorrect{color:var(--color-error)}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;font-weight:600}.stat-divider{background-color:var(--border-subtle);width:1px;height:28px}.empty-deck-state{text-align:center;flex-direction:column;align-items:center;max-width:480px;padding:3.5rem 2rem;display:flex}.empty-icon-wrap{margin-bottom:1.25rem}.sparkle-gold{color:#f59e0b}.sparkle-green{color:var(--color-success)}.empty-title{margin-bottom:.5rem;font-size:1.35rem;font-weight:800}.empty-desc{color:var(--text-secondary);margin-bottom:1.75rem;font-size:.9rem;line-height:1.5}.empty-actions{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.btn-primary{background:linear-gradient(135deg, var(--accent-primary), #b5179e);color:#fff;box-shadow:0 4px 12px var(--accent-glow);transition:all var(--transition-fast);border-radius:12px;align-items:center;gap:.45rem;padding:.65rem 1.25rem;font-size:.9rem;font-weight:700;display:inline-flex}.btn-primary:hover{box-shadow:0 6px 18px var(--accent-glow);transform:translateY(-2px)}.btn-secondary{background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-primary);transition:all var(--transition-fast);border-radius:12px;align-items:center;gap:.45rem;padding:.65rem 1.25rem;font-size:.9rem;font-weight:600;display:inline-flex}.btn-secondary:hover{border-color:var(--border-active);background-color:#ffffff0f}.translator-layout{flex-direction:column;gap:1.75rem;display:flex}.level-bar-container{background-color:var(--bg-surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);border-radius:16px;padding:.75rem}.level-tabs{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.5rem;display:grid}.level-tab-btn{background-color:var(--bg-surface-elevated);text-align:left;transition:all var(--transition-fast);border:1px solid #0000;border-radius:12px;flex-direction:column;gap:.4rem;padding:.75rem 1rem;display:flex}.level-tab-btn:hover{border-color:var(--border-active)}.level-tab-btn.active{background-color:var(--bg-surface);border-color:var(--accent-primary);box-shadow:0 4px 14px var(--accent-glow)}.level-tab-header{align-items:center;gap:.4rem;display:flex}.level-num{background:linear-gradient(135deg, var(--accent-primary), #b5179e);color:#fff;border-radius:5px;padding:.1rem .35rem;font-size:.75rem;font-weight:800}.level-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;font-weight:700;overflow:hidden}.level-progress-track{background-color:#ffffff14;border-radius:999px;width:100%;height:5px;overflow:hidden}.level-progress-fill{background:linear-gradient(90deg, var(--accent-primary), var(--color-indigo));border-radius:999px;height:100%;transition:width .3s}.level-completion-text{color:var(--text-muted);font-size:.7rem;font-weight:600}.translator-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);border-radius:24px;flex-direction:column;gap:1.75rem;padding:2.25rem;display:flex}.translator-card-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.sentence-badge-group{align-items:center;gap:.4rem;display:flex}.badge-tag{border-radius:8px;padding:.25rem .6rem;font-size:.72rem;font-weight:700}.level-pill{background-color:var(--color-indigo);color:#fff}.cat-pill{background-color:var(--bg-surface-elevated);color:var(--text-secondary)}.mastered-pill{background-color:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success-border);align-items:center;gap:.25rem;display:flex}.sentence-nav-controls{align-items:center;gap:.4rem;display:flex}.nav-counter{color:var(--text-muted);margin-right:.35rem;font-size:.8rem;font-weight:700}.icon-btn-sm{background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle);width:32px;height:32px;color:var(--text-secondary);transition:all var(--transition-fast);border-radius:8px;justify-content:center;align-items:center;display:flex}.icon-btn-sm:hover{color:var(--text-primary);border-color:var(--border-active)}.sentence-display-area{text-align:center;background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:18px;flex-direction:column;align-items:center;padding:2rem 1.5rem;display:flex;position:relative}.japanese-sentence-box{justify-content:center;align-items:center;gap:1rem;margin-bottom:.85rem;display:flex}.japanese-text{font-family:var(--font-jp-serif);color:var(--text-glyph);font-size:2.2rem;font-weight:700;line-height:1.4}.audio-speech-btn{background:linear-gradient(135deg, var(--accent-primary), #b5179e);color:#fff;width:44px;height:44px;box-shadow:0 4px 12px var(--accent-glow);transition:all var(--transition-fast);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.audio-speech-btn:hover{transform:scale(1.08)}.romaji-hint-row{margin-top:.25rem}.romaji-text-container{align-items:center;gap:.75rem;display:flex}.romaji-reading{color:var(--accent-primary);letter-spacing:.02em;font-size:1.05rem;font-weight:600}.toggle-text-btn{color:var(--text-muted);transition:all var(--transition-fast);background-color:#ffffff0a;border-radius:6px;align-items:center;gap:.35rem;padding:.25rem .5rem;font-size:.75rem;font-weight:600;display:inline-flex}.toggle-text-btn:hover{color:var(--text-primary)}.translation-form{flex-direction:column;gap:.5rem;display:flex}.input-label{color:var(--text-primary);justify-content:space-between;align-items:center;font-size:.85rem;font-weight:700;display:flex}.label-sub{color:var(--text-muted);font-size:.75rem;font-weight:500}.translation-input-group{gap:.5rem;display:flex}.translation-input{background-color:var(--bg-surface-elevated);border:2px solid var(--border-subtle);color:var(--text-primary);transition:all var(--transition-fast);border-radius:14px;flex:1;padding:.95rem 1.25rem;font-size:1.05rem;font-weight:500}.translation-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 4px var(--accent-glow)}.translation-input.input-correct{border-color:var(--color-success)}.translation-input.input-incorrect{border-color:var(--color-error)}.translate-submit-btn{background:linear-gradient(135deg, var(--accent-primary), #b5179e);color:#fff;box-shadow:0 4px 12px var(--accent-glow);transition:all var(--transition-fast);border-radius:14px;padding:0 1.5rem;font-size:.9rem;font-weight:700}.translate-submit-btn:hover{opacity:.95;transform:translateY(-1px)}.evaluation-result-card{border-radius:18px;flex-direction:column;gap:1.25rem;padding:1.5rem;display:flex}.evaluation-result-card.perfect,.evaluation-result-card.good{background-color:var(--color-success-bg);border:1px solid var(--color-success-border)}.evaluation-result-card.partial{background-color:var(--color-warning-bg);border:1px solid #f59e0b59}.evaluation-result-card.incorrect{background-color:var(--color-error-bg);border:1px solid var(--color-error-border)}.eval-header{align-items:center;gap:.75rem;display:flex}.icon-perfect,.icon-good{color:var(--color-success)}.icon-partial{color:var(--color-warning)}.icon-incorrect{color:var(--color-error)}.eval-score-row{align-items:center;gap:.65rem;display:flex}.score-pill{color:var(--text-primary);background-color:#ffffff26;border-radius:6px;padding:.2rem .55rem;font-size:.8rem;font-weight:800}.eval-feedback-text{color:var(--text-primary);font-size:.95rem;font-weight:700}.translation-comparison{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;flex-direction:column;gap:.5rem;padding:1rem 1.25rem;display:flex}.comp-item{flex-direction:column;gap:.2rem;display:flex}.comp-label{text-transform:uppercase;color:var(--text-muted);font-size:.72rem;font-weight:700}.comp-value.correct-english{color:var(--color-success);font-size:1.1rem;font-weight:700}.alternate-chips{flex-wrap:wrap;gap:.35rem;display:flex}.alt-chip{background-color:var(--bg-surface-elevated);color:var(--text-secondary);border-radius:6px;padding:.15rem .5rem;font-size:.8rem}.keywords-section{flex-direction:column;gap:.5rem;display:flex}.section-title-sm{text-transform:uppercase;color:var(--text-muted);font-size:.75rem;font-weight:700}.keywords-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.5rem;display:grid}.keyword-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);cursor:pointer;transition:all var(--transition-fast);border-radius:10px;padding:.65rem .85rem}.keyword-card:hover{border-color:var(--accent-primary);transform:translateY(-2px)}.kw-japanese{font-family:var(--font-jp-serif);color:var(--text-primary);font-size:1.05rem;font-weight:700}.kw-romaji{color:var(--accent-primary);font-size:.72rem;font-weight:600}.kw-english{color:var(--text-secondary);margin-top:.15rem;font-size:.8rem}.grammar-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;flex-direction:column;gap:.4rem;padding:1rem 1.25rem;display:flex}.grammar-header{color:var(--color-indigo);align-items:center;gap:.45rem;font-size:.8rem;font-weight:700;display:flex}.grammar-desc{color:var(--text-secondary);font-size:.85rem;line-height:1.5}.eval-footer-actions{justify-content:flex-end;display:flex}.next-sentence-btn{padding:.75rem 1.5rem}.grammar-hint-toggle{flex-direction:column;gap:.5rem;display:flex}.grammar-toggle-btn{color:var(--text-muted);align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;display:inline-flex}.grammar-toggle-btn:hover{color:var(--text-primary)}.grammar-drawer{background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:12px;padding:.85rem 1.25rem;font-size:.85rem;line-height:1.5}.notebook-layout{flex-direction:column;gap:1.5rem;display:flex}.notebook-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.notebook-title-wrap{align-items:center;gap:.75rem;display:flex}.section-heading{font-size:1.4rem;font-weight:800;line-height:1.2}.section-sub{color:var(--text-secondary);font-size:.85rem}.notebook-tab-pill-group{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;gap:.5rem;padding:.35rem;display:flex}.notebook-tab-btn{color:var(--text-secondary);transition:all var(--transition-fast);border-radius:8px;align-items:center;gap:.45rem;padding:.5rem .95rem;font-size:.85rem;font-weight:600;display:flex}.notebook-tab-btn:hover{color:var(--text-primary)}.notebook-tab-btn.active.alert{background-color:var(--color-error-bg);color:var(--color-error);font-weight:700}.notebook-tab-btn.active.success{background-color:var(--color-success-bg);color:var(--color-success);font-weight:700}.badge-count-pill{background-color:#ffffff1a;border-radius:6px;padding:.1rem .45rem;font-size:.7rem}.notebook-control-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.notebook-type-filters{gap:.35rem;display:flex}.type-filter-chip{background-color:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-secondary);transition:all var(--transition-fast);border-radius:8px;align-items:center;gap:.35rem;padding:.4rem .85rem;font-size:.8rem;font-weight:600;display:flex}.type-filter-chip:hover{color:var(--text-primary);border-color:var(--border-active)}.type-filter-chip.active{background-color:var(--bg-surface-elevated);border-color:var(--accent-primary);color:var(--accent-primary)}.notebook-search-wrap{min-width:260px;position:relative}.search-icon{color:var(--text-muted);position:absolute;top:50%;left:12px;transform:translateY(-50%)}.search-input{background-color:var(--bg-surface);border:1px solid var(--border-subtle);width:100%;color:var(--text-primary);border-radius:10px;padding:.5rem 1rem .5rem 2.25rem;font-size:.85rem}.search-input:focus{border-color:var(--accent-primary)}.practice-cta-banner{background:linear-gradient(135deg,#ff5d731f,#6366f11f);border:1px solid #ff5d7340;border-radius:16px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem;display:flex}.cta-sub{color:var(--text-secondary);margin-top:.15rem;font-size:.8rem;display:block}.character-notebook-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.85rem;display:grid}.notebook-char-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);text-align:center;cursor:pointer;transition:all var(--transition-fast);border-radius:16px;flex-direction:column;align-items:center;padding:1.15rem 1rem;display:flex}.notebook-char-card:hover{border-color:var(--border-active);box-shadow:var(--shadow-card);transform:translateY(-3px)}.notebook-char-card.incorrect{border-left:3px solid var(--color-error)}.notebook-char-card.correct{border-left:3px solid var(--color-success)}.card-top-row{justify-content:space-between;align-items:center;width:100%;margin-bottom:.4rem;display:flex}.char-badge-type{text-transform:uppercase;color:var(--text-muted);font-size:.65rem;font-weight:700}.audio-mini-btn{color:var(--text-muted);transition:color var(--transition-fast)}.audio-mini-btn:hover{color:var(--accent-primary)}.card-glyph{font-family:var(--font-jp-serif);color:var(--text-glyph);white-space:nowrap;margin-bottom:.2rem;font-size:2.5rem;font-weight:700;line-height:1.1}.card-romaji{color:var(--accent-primary);font-size:1rem;font-weight:700}.card-mnemonic-snippet{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;max-width:100%;margin-top:.35rem;font-size:.68rem;overflow:hidden}.card-accuracy-bar{width:100%;margin-top:.65rem}.accuracy-label{color:var(--text-muted);justify-content:space-between;margin-bottom:.2rem;font-size:.65rem;font-weight:600;display:flex}.accuracy-track{background-color:var(--bg-surface-elevated);border-radius:999px;width:100%;height:4px;overflow:hidden}.accuracy-fill{border-radius:999px;height:100%}.fill-alert{background-color:var(--color-error)}.fill-success{background-color:var(--color-success)}.notebook-empty-state{text-align:center;color:var(--text-muted);padding:3rem}.stats-layout{flex-direction:column;gap:1.75rem;display:flex}.stats-header{align-items:center;gap:.75rem;display:flex}.hero-stats-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;display:grid}.stat-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);border-radius:18px;align-items:center;gap:1.25rem;padding:1.5rem;display:flex}.stat-card-icon-wrap{border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;display:flex}.streak-wrap{color:#f59e0b;background:#f59e0b26}.accuracy-wrap{color:#10b981;background:#10b98126}.kana-wrap{color:var(--accent-primary);background:#ff5d7326}.sentence-wrap{color:var(--color-indigo);background:#6366f126}.stat-card-body{flex-direction:column;display:flex}.stat-value{font-size:1.65rem;font-weight:800;line-height:1.1}.stat-unit{color:var(--text-muted);font-size:.9rem;font-weight:600}.stat-title{color:var(--text-muted);text-transform:uppercase;margin-top:.2rem;font-size:.75rem;font-weight:600}.progress-section-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);border-radius:20px;flex-direction:column;gap:1.25rem;padding:1.75rem;display:flex}.section-title{font-size:1.15rem;font-weight:800}.progress-row{flex-direction:column;gap:.4rem;display:flex}.progress-info{justify-content:space-between;font-size:.85rem;font-weight:600;display:flex}.progress-name{color:var(--text-primary)}.progress-percent{color:var(--text-muted)}.progress-bar-track{background-color:var(--bg-surface-elevated);border-radius:999px;width:100%;height:8px;overflow:hidden}.progress-bar-fill{border-radius:999px;height:100%;transition:width .4s}.fill-hiragana{background:linear-gradient(90deg,#ff5d73,#ff758f)}.fill-katakana{background:linear-gradient(90deg,#6366f1,#818cf8)}.fill-sentences{background:linear-gradient(90deg,#10b981,#34d399)}.efficiency-guide-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);border-radius:20px;flex-direction:column;gap:1.25rem;padding:1.75rem;display:flex}.guide-header{align-items:center;gap:.5rem;display:flex}.guide-header h4{font-size:1.05rem;font-weight:800}.guide-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;display:grid}.guide-col h5{color:var(--text-primary);margin-bottom:.4rem;font-size:.9rem;font-weight:700}.guide-col p{color:var(--text-secondary);font-size:.82rem;line-height:1.5}.modal-backdrop{-webkit-backdrop-filter:blur(8px);z-index:100;background-color:#000000b3;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.modal-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);border-radius:20px;flex-direction:column;gap:1.25rem;width:100%;max-width:480px;padding:1.75rem;display:flex}.modal-header{justify-content:space-between;align-items:center;display:flex}.modal-title-group{align-items:center;gap:.5rem;display:flex}.modal-title-group h3{font-size:1.15rem;font-weight:800}.icon-btn-close{color:var(--text-muted);transition:color var(--transition-fast)}.icon-btn-close:hover{color:var(--text-primary)}.modal-desc{color:var(--text-secondary);font-size:.85rem;line-height:1.5}.modal-options-list{flex-direction:column;gap:.75rem;display:flex}.modal-action-btn{background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-primary);text-align:left;transition:all var(--transition-fast);border-radius:12px;justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex}.modal-action-btn:hover{border-color:var(--border-active);transform:translateY(-2px)}.modal-action-btn.danger:hover{border-color:var(--color-error);background-color:var(--color-error-bg);color:var(--color-error)}.btn-text{flex-direction:column;gap:.15rem;display:flex}.btn-text strong{font-size:.9rem}.btn-text span{color:var(--text-muted);font-size:.75rem}.modal-footer{justify-content:flex-end;padding-top:.5rem;display:flex}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.animate-shake{animation:.35s ease-in-out shake}@keyframes bounceIn{0%{opacity:0;transform:scale(.92)}60%{opacity:1;transform:scale(1.04)}to{transform:scale(1)}}.animate-bounce-in{animation:bounceIn .3s var(--ease-spring)}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.25s ease-out fadeIn}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-scale-in{animation:.2s ease-out scaleIn}@media (width<=768px){.navbar-content{flex-direction:column;align-items:stretch}.nav-tabs{width:100%;overflow-x:auto}.flashcard-container{padding:1.5rem 1.25rem}.character-display{min-width:180px;height:150px}.character-display.combo-display{min-width:220px}.japanese-glyph{font-size:4.5rem}.japanese-glyph.combo-glyph{font-size:3.5rem}.session-stats-strip{gap:1rem;padding:.85rem 1rem}.japanese-text{font-size:1.6rem}}.auth-cta-btn{background:linear-gradient(135deg, var(--accent-primary), #b5179e);color:#fff;box-shadow:0 2px 10px var(--accent-glow);transition:all var(--transition-fast);border-radius:10px;align-items:center;gap:.4rem;padding:.45rem .95rem;font-size:.85rem;font-weight:700;display:inline-flex}.auth-cta-btn:hover{box-shadow:0 4px 14px var(--accent-glow);transform:translateY(-1px)}.user-profile-menu-wrap{position:relative}.user-profile-btn{background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-primary);transition:all var(--transition-fast);border-radius:999px;align-items:center;gap:.5rem;padding:.3rem .65rem .3rem .35rem;display:flex}.user-profile-btn:hover{border-color:var(--border-active)}.user-avatar-circle{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:.72rem;font-weight:800;display:flex}.user-nav-name{white-space:nowrap;text-overflow:ellipsis;max-width:90px;font-size:.85rem;font-weight:700;overflow:hidden}.user-chevron{color:var(--text-muted)}.user-dropdown-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);width:250px;box-shadow:var(--shadow-card);z-index:60;border-radius:16px;flex-direction:column;gap:.75rem;padding:1rem;display:flex;position:absolute;top:calc(100% + 8px);right:0}.dropdown-user-header{align-items:center;gap:.75rem;display:flex}.user-avatar-large{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:.95rem;font-weight:800;display:flex}.dropdown-user-info{flex-direction:column;display:flex;overflow:hidden}.user-full-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;overflow:hidden}.user-email-text{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.72rem;overflow:hidden}.dropdown-sync-status{background-color:var(--color-success-bg);border:1px solid var(--color-success-border);color:var(--color-success);border-radius:8px;align-items:center;gap:.4rem;padding:.35rem .65rem;font-size:.72rem;font-weight:700;display:flex}.dropdown-divider{background-color:var(--border-subtle);width:100%;height:1px}.dropdown-item-btn{color:var(--text-secondary);transition:all var(--transition-fast);text-align:left;border-radius:8px;align-items:center;gap:.6rem;width:100%;padding:.5rem .65rem;font-size:.82rem;font-weight:600;display:flex}.dropdown-item-btn:hover{background-color:var(--bg-surface-elevated);color:var(--text-primary)}.dropdown-item-btn.text-danger{color:var(--color-error)}.dropdown-item-btn.text-danger:hover{background-color:var(--color-error-bg)}.auth-modal-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);border-radius:24px;flex-direction:column;gap:1.25rem;width:100%;max-width:440px;padding:2.25rem;display:flex;position:relative}.modal-close-corner{position:absolute;top:1.25rem;right:1.25rem}.auth-modal-header{text-align:center;flex-direction:column;align-items:center;display:flex}.auth-badge{margin-bottom:.75rem}.auth-title{margin-bottom:.35rem;font-size:1.35rem;font-weight:800}.auth-subtitle{color:var(--text-secondary);font-size:.85rem;line-height:1.4}.auth-tab-switch{background-color:var(--bg-surface-elevated);border-radius:12px;gap:.25rem;padding:.25rem;display:flex}.auth-tab-btn{color:var(--text-secondary);transition:all var(--transition-fast);border-radius:9px;flex:1;justify-content:center;align-items:center;gap:.4rem;padding:.55rem;font-size:.85rem;font-weight:600;display:flex}.auth-tab-btn.active{background-color:var(--bg-surface);color:var(--text-primary);font-weight:700;box-shadow:0 2px 8px #0000001f}.auth-error-banner{background-color:var(--color-error-bg);border:1px solid var(--color-error-border);color:var(--color-error);border-radius:10px;padding:.75rem 1rem;font-size:.82rem;font-weight:600}.auth-form{flex-direction:column;gap:1rem;display:flex}.auth-field-group{flex-direction:column;gap:.35rem;display:flex}.auth-field-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.75rem;font-weight:700}.auth-input-wrapper{align-items:center;display:flex;position:relative}.auth-field-icon{color:var(--text-muted);position:absolute;left:12px}.auth-input{background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle);width:100%;color:var(--text-primary);transition:all var(--transition-fast);border-radius:12px;padding:.85rem 1rem .85rem 2.4rem;font-size:.95rem}.auth-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow)}.auth-input.has-toggle{padding-right:2.75rem}.password-toggle-btn{color:var(--text-muted);transition:color var(--transition-fast);position:absolute;right:12px}.password-toggle-btn:hover{color:var(--text-primary)}.auth-submit-btn{justify-content:center;width:100%;margin-top:.25rem;padding:.85rem;font-size:.95rem}.auth-modal-footer{border-top:1px solid var(--border-subtle);flex-direction:column;align-items:center;gap:.75rem;padding-top:.5rem;display:flex}.auth-trust-note{color:var(--text-muted);align-items:center;gap:.35rem;font-size:.75rem;display:flex}.guest-continue-btn{color:var(--text-secondary);transition:color var(--transition-fast);font-size:.8rem;font-weight:600;text-decoration:underline}.guest-continue-btn:hover{color:var(--text-primary)}.learning-layout{flex-direction:column;gap:1.75rem;display:flex}.learning-header-banner{background-color:var(--bg-surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);border-radius:20px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.25rem;padding:1.5rem 1.75rem;display:flex}.learning-title-wrap{align-items:center;gap:.85rem;display:flex}.learning-type-toggle{background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:14px;gap:.35rem;padding:.35rem;display:flex}.learn-type-btn{color:var(--text-secondary);transition:all var(--transition-fast);border-radius:10px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.85rem;font-weight:600;display:flex}.learn-type-btn:hover{color:var(--text-primary)}.learn-type-btn.active{background-color:var(--bg-surface);color:var(--text-primary);font-weight:700;box-shadow:0 2px 8px #00000026}.type-char-glyph{font-family:var(--font-jp-serif);color:var(--accent-primary);font-size:1.1rem;font-weight:800}.learning-control-bar{background-color:var(--bg-surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);border-radius:16px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.25rem;display:flex}.learning-filter-group{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.learning-action-buttons{align-items:center;gap:.5rem;display:flex}.play-all-btn{padding:.45rem .95rem;font-size:.82rem}.play-all-btn.playing{background-color:var(--color-error-bg);border-color:var(--color-error);color:var(--color-error)}.learning-progress-strip{background:linear-gradient(135deg,#10b98114,#6366f114);border:1px solid #10b98133;border-radius:16px;flex-direction:column;gap:.6rem;padding:1.25rem 1.5rem;display:flex}.learning-metric-info{justify-content:space-between;align-items:center;display:flex}.metric-left{align-items:center;gap:.5rem;display:flex}.metric-title{color:var(--text-primary);font-size:.9rem}.metric-percent{color:var(--color-success);font-size:.85rem;font-weight:800}.learning-progress-track{background-color:var(--bg-surface-elevated);border-radius:999px;width:100%;height:7px;overflow:hidden}.learning-progress-fill{background:linear-gradient(90deg, var(--color-success), #06b6d4);border-radius:999px;height:100%;transition:width .35s}.learning-groups-container{flex-direction:column;gap:2rem;display:flex}.learning-group-block{flex-direction:column;gap:.85rem;display:flex}.group-header{align-items:center;gap:.6rem;display:flex}.group-title-tag{text-transform:uppercase;letter-spacing:.05em;color:var(--accent-primary);background-color:#ff5d731f;border-radius:8px;padding:.25rem .65rem;font-size:.8rem;font-weight:800}.group-count-text{color:var(--text-muted);font-size:.75rem;font-weight:600}.learning-cards-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.85rem;display:grid}.learning-char-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);text-align:center;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-card);border-radius:18px;flex-direction:column;align-items:center;padding:1rem .85rem;display:flex;position:relative}.learning-char-card:hover{border-color:var(--border-active);transform:translateY(-3px)}.learning-char-card.is-mastered{border-color:var(--color-success);background:linear-gradient(180deg, var(--bg-surface) 0%, #10b9810f 100%);box-shadow:0 4px 16px #10b9811f}.learning-char-card.is-playing{border-color:var(--accent-primary);box-shadow:0 0 20px var(--accent-glow);transform:scale(1.04)}.card-controls-top{justify-content:space-between;align-items:center;width:100%;margin-bottom:.35rem;display:flex}.audio-trigger-btn{color:var(--text-muted);transition:all var(--transition-fast)}.audio-trigger-btn:hover{color:var(--accent-primary);transform:scale(1.15)}.mastery-toggle-btn{color:var(--text-muted);transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.mastery-toggle-btn:hover{transform:scale(1.15)}.mastered-check{color:var(--color-success)}.unmastered-circle{color:var(--text-muted);opacity:.5}.unmastered-circle:hover{opacity:.9}.learning-glyph{font-family:var(--font-jp-serif);color:var(--text-glyph);white-space:nowrap;margin-bottom:.2rem;font-size:3rem;font-weight:700;line-height:1.1}.learning-glyph.combo-glyph-sm{letter-spacing:-.04em;font-size:2.2rem}.learning-romaji{color:var(--accent-primary);letter-spacing:.02em;font-size:1.05rem;font-weight:700}.learning-mnemonic{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;max-width:100%;margin-top:.35rem;font-size:.68rem;overflow:hidden}.mastered-pill-badge{color:var(--color-success);background-color:var(--color-success-bg);border:1px solid var(--color-success-border);border-radius:999px;margin-top:.45rem;padding:.15rem .5rem;font-size:.65rem;font-weight:800}