@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;700&display=swap";:root{--bg-primary:#0a0e1a;--bg-secondary:#111827;--bg-card:#161d2e;--bg-card-hover:#1e2a42;--bg-glass:#161d2ed9;--border:#ffffff12;--border-accent:#63b3ed40;--accent-blue:#63b3ed;--accent-purple:#a78bfa;--accent-pink:#f9a8d4;--accent-green:#6ee7b7;--accent-orange:#fbbf24;--accent-red:#f87171;--text-primary:#f0f4ff;--text-secondary:#94a3b8;--text-muted:#4b5563;--grad-blue:linear-gradient(135deg, #1a56db, #5eead4);--grad-purple:linear-gradient(135deg, #7c3aed, #db2777);--grad-green:linear-gradient(135deg, #059669, #0284c7);--grad-orange:linear-gradient(135deg, #d97706, #dc2626);--grad-header:linear-gradient(180deg, #0d1324 0%, transparent 100%);--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--shadow-sm:0 2px 8px #0006;--shadow-md:0 4px 24px #00000080;--shadow-lg:0 8px 40px #0009;--shadow-glow-blue:0 0 20px #63b3ed33;--shadow-glow-purple:0 0 20px #a78bfa33;--transition:.2s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,Noto Sans JP,sans-serif;line-height:1.6}#root{flex-direction:column;min-height:100vh;display:flex}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-accent);border-radius:3px}.app-layout{flex-direction:column;min-height:100vh;display:flex}.navbar{z-index:100;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);background:#0a0e1ae6;align-items:center;height:64px;padding:0 2rem;display:flex;position:sticky;top:0}.voice-select{align-items:center;gap:.35rem;margin-left:auto;margin-right:.75rem;display:flex}.voice-select-label{font-size:.9rem}.voice-select-input{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);max-width:12rem;color:var(--text-secondary);cursor:pointer;padding:5px 8px;font-size:.72rem}.pagination{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem .75rem;margin:1.25rem 0;padding:.75rem 0;display:flex}.pagination-btn,.pagination-page{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);padding:6px 12px;font-size:.85rem}.pagination-btn:hover:not(:disabled),.pagination-page:hover{border-color:var(--accent-blue);color:var(--text-primary)}.pagination-btn:disabled{opacity:.4;cursor:not-allowed}.pagination-page.active{border-color:var(--accent-blue);color:var(--accent-blue);background:#63b3ed26;font-weight:600}.pagination-pages{flex-wrap:wrap;justify-content:center;gap:.35rem;display:flex}.pagination-ellipsis{color:var(--text-muted);padding:6px 4px}.pagination-meta{text-align:center;width:100%;color:var(--text-muted);font-size:.8rem}.nav-logo{color:var(--text-primary);cursor:pointer;align-items:center;gap:10px;font-size:1.25rem;font-weight:700;text-decoration:none;display:flex}.nav-logo .jp-char{background:var(--grad-purple);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem}.nav-links{align-items:center;gap:4px;margin:0 auto;display:flex}.nav-link{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);background:0 0;border:none;align-items:center;gap:6px;padding:6px 14px;font-size:.875rem;font-weight:500;display:flex}.nav-link:hover{color:var(--text-primary);background:#ffffff0f}.nav-link.active{color:var(--accent-blue);background:#63b3ed1a}.page-content{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem}.dashboard-hero{text-align:center;padding:3rem 0 2rem}.dashboard-hero h1{background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.5rem;font-size:2.8rem;font-weight:800}.dashboard-hero p{color:var(--text-secondary);font-size:1.1rem}.stats-row{grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0;display:grid}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);text-align:center;padding:1.25rem}.stat-card .stat-value{color:var(--accent-blue);font-size:2rem;font-weight:700}.stat-card .stat-label{color:var(--text-secondary);margin-top:2px;font-size:.8rem}.menu-section{margin:2rem 0}.menu-section h2{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem;font-size:1.1rem;font-weight:600}.menu-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;display:grid}.menu-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition);padding:1.75rem;position:relative;overflow:hidden}.menu-card:before{content:"";opacity:0;transition:opacity var(--transition);border-radius:inherit;position:absolute;inset:0}.menu-card:hover{border-color:var(--border-accent);box-shadow:var(--shadow-glow-blue), var(--shadow-md);transform:translateY(-4px)}.menu-card:hover:before{opacity:.03;background:#fff}.menu-card .card-icon{margin-bottom:.75rem;font-size:2.5rem;display:block}.menu-card h3{color:var(--text-primary);margin-bottom:.25rem;font-size:1.1rem;font-weight:700}.menu-card p{color:var(--text-secondary);font-size:.85rem}.menu-card .card-badge{border-radius:99px;padding:2px 8px;font-size:.7rem;font-weight:600;position:absolute;top:1rem;right:1rem}.badge-beginner{color:var(--accent-blue);background:#63b3ed26}.badge-intermediate{color:var(--accent-purple);background:#a78bfa26}.history-section{margin:2rem 0}.history-section h2{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem;font-size:1.1rem;font-weight:600}.history-list{flex-wrap:wrap;gap:.5rem;display:flex}.history-chip{background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);border-radius:99px;padding:6px 14px;font-size:.8rem}.history-chip:hover{border-color:var(--accent-blue);color:var(--accent-blue)}.quiz-page{max-width:800px;margin:0 auto}.quiz-header{align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.back-btn{border-radius:var(--radius-sm);background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);align-items:center;gap:6px;padding:8px 14px;font-size:.875rem;display:flex}.back-btn:hover{color:var(--text-primary);border-color:var(--border-accent)}.quiz-title{flex:1}.quiz-title h1{color:var(--text-primary);font-size:1.5rem;font-weight:700}.quiz-title p{color:var(--text-secondary);font-size:.85rem}.progress-bar-wrap{background:var(--bg-card);border-radius:3px;height:6px;margin-bottom:2rem;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--accent-blue), var(--accent-purple));border-radius:3px;height:100%;transition:width .5s}.quiz-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);text-align:center;margin-bottom:1.5rem;padding:2rem;position:relative}.question-jp{color:var(--text-primary);cursor:pointer;transition:color var(--transition);margin-bottom:.5rem;font-family:Noto Sans JP,sans-serif;font-size:3.5rem;font-weight:700}.question-jp:hover{color:var(--accent-blue)}.question-reading{color:var(--text-secondary);margin-bottom:.5rem;font-family:Noto Sans JP,sans-serif;font-size:1.1rem}.speak-btn{color:var(--accent-blue);cursor:pointer;transition:all var(--transition);background:#63b3ed1a;border:1px solid #63b3ed33;border-radius:99px;align-items:center;gap:6px;margin-top:.5rem;padding:6px 16px;font-size:.8rem;display:inline-flex}.speak-btn:hover{background:#63b3ed33}.quiz-counter{color:var(--text-muted);margin-top:1rem;font-size:.8rem}.options-grid{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.option-btn{border-radius:var(--radius-md);background:var(--bg-card);border:1.5px solid var(--border);color:var(--text-primary);cursor:pointer;transition:all var(--transition);text-align:center;padding:1rem;font-family:Noto Sans JP,sans-serif;font-size:.95rem}.option-btn:hover:not(:disabled){border-color:var(--accent-blue);background:#63b3ed12;transform:translateY(-2px)}.option-btn.correct{border-color:var(--accent-green);color:var(--accent-green);background:#6ee7b71a}.option-btn.wrong{border-color:var(--accent-red);color:var(--accent-red);background:#f871711a}.option-btn:disabled{cursor:default}.result-banner{border-radius:var(--radius-md);align-items:center;gap:.75rem;margin-bottom:1rem;padding:1rem 1.5rem;font-size:1rem;font-weight:600;display:flex}.result-banner.correct-banner{color:var(--accent-green);background:#6ee7b71a;border:1px solid #6ee7b74d}.result-banner.wrong-banner{color:var(--accent-red);background:#f871711a;border:1px solid #f871714d}.next-btn{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple));color:#fff;cursor:pointer;width:100%;transition:all var(--transition);border:none;padding:1rem;font-size:1rem;font-weight:600}.next-btn:hover{opacity:.9;transform:translateY(-1px)}.save-btn{cursor:pointer;transition:all var(--transition);border:1px solid;border-radius:99px;align-items:center;gap:5px;padding:5px 12px;font-size:.78rem;display:inline-flex}.save-btn.saved{color:var(--accent-orange);background:#fbbf241f;border-color:#fbbf244d}.save-btn.unsaved{border-color:var(--border);color:var(--text-muted);background:0 0}.save-btn:hover{transform:scale(1.05)}.kana-chart{flex-direction:column;gap:1rem;margin-bottom:2rem;display:flex}.kana-group{border:1px solid var(--border);border-radius:var(--radius-md);padding:.875rem 1rem}.kana-group-head{flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;margin-bottom:.65rem;display:flex}.kana-group-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:600}.kana-group-roma{color:var(--accent-blue);letter-spacing:.02em;font-size:.8rem;font-weight:500}.kana-group-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;max-width:440px;display:grid}.kana-type-tabs{flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem;display:flex}.kana-legend{flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem;display:flex}.kana-legend-item{color:var(--text-muted);align-items:center;gap:5px;font-size:.75rem;display:flex}.kana-legend-swatch{border-radius:2px;width:10px;height:10px;display:inline-block}.kana-quiz-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem 1.5rem}.kana-quiz-panel-title{margin-bottom:.35rem;font-size:1rem;font-weight:600}.kana-quiz-panel-desc{color:var(--text-muted);margin-bottom:1rem;font-size:.85rem}.kana-quiz-panel-actions{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.kana-quiz-select{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;padding:8px 12px;font-size:.85rem}.hiragana-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.4rem;margin-bottom:2rem;display:grid}.hiragana-cell{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-sm);text-align:center;cursor:pointer;transition:all var(--transition);min-width:0;padding:.6rem .25rem}.hiragana-cell:hover{border-color:var(--accent-purple);background:var(--bg-card-hover);transform:translateY(-2px)}.hiragana-cell .hira-char{color:var(--text-primary);font-family:Noto Sans JP,sans-serif;font-size:1.35rem;line-height:1.3;display:block}.hiragana-cell .hira-roma{color:var(--text-muted);margin-top:2px;font-size:.62rem;display:block}.hiragana-cell.selected{border-color:var(--accent-blue);background:#63b3ed1a}.hiragana-cell.correct-cell{border-color:var(--accent-green);background:#6ee7b71f}.hiragana-cell.wrong-cell{border-color:var(--accent-red);background:#f871711f}.sentence-area{background:var(--bg-secondary);border:1.5px dashed var(--border-accent);border-radius:var(--radius-md);flex-wrap:wrap;align-items:center;gap:.5rem;min-height:80px;margin-bottom:1rem;padding:1rem;display:flex}.token-word{cursor:pointer;transition:all var(--transition);-webkit-user-select:none;user-select:none;border:1.5px solid;border-radius:99px;padding:6px 14px;font-family:Noto Sans JP,sans-serif;font-size:1rem}.token-word.in-bank{background:var(--bg-card);border-color:var(--border);color:var(--text-primary)}.token-word.in-bank:hover{border-color:var(--accent-blue);background:#63b3ed14}.token-word.in-answer{color:var(--accent-blue);background:#63b3ed1a;border-color:#63b3ed66}.token-word.in-answer:hover{border-color:var(--accent-red);color:var(--accent-red);background:#f871711a}.token-word.correct-token{border-color:var(--accent-green);color:var(--accent-green);background:#6ee7b71f}.token-word.wrong-token{border-color:var(--accent-red);color:var(--accent-red);background:#f871711a}.token-bank{background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border);flex-wrap:wrap;gap:.5rem;min-height:60px;padding:1rem;display:flex}.vocab-page{max-width:900px;margin:0 auto}.level-tabs{gap:.5rem;margin-bottom:1.5rem;display:flex}.level-tab{cursor:pointer;transition:all var(--transition);border:1.5px solid var(--border);color:var(--text-secondary);background:0 0;border-radius:99px;padding:8px 20px;font-size:.875rem;font-weight:500}.level-tab.active-tab{background:var(--accent-blue);border-color:var(--accent-blue);color:#0a0e1a}.search-bar{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);align-items:center;gap:.75rem;margin-bottom:1.5rem;padding:.75rem 1rem;display:flex}.search-bar input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-size:.95rem}.search-bar input::placeholder{color:var(--text-muted)}.category-pills{flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;display:flex}.cat-pill{cursor:pointer;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);transition:all var(--transition);border-radius:99px;padding:4px 12px;font-size:.78rem;font-weight:500}.cat-pill.active-cat{border-color:var(--accent-purple);color:var(--accent-purple);background:#a78bfa26}.vocab-list{gap:.75rem;display:grid}.vocab-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition);align-items:center;gap:1rem;padding:1rem 1.25rem;display:flex}.vocab-item:hover{border-color:var(--border-accent);transform:translate(4px)}.vocab-item .jp-word{color:var(--text-primary);cursor:pointer;min-width:80px;font-family:Noto Sans JP,sans-serif;font-size:1.4rem;font-weight:600}.vocab-item .jp-word:hover{color:var(--accent-blue)}.vocab-item .word-info{flex:1}.vocab-item .word-reading{color:var(--text-muted);font-family:Noto Sans JP,sans-serif;font-size:.78rem}.vocab-item .word-meaning{color:var(--text-secondary);font-size:.95rem}.vocab-item .word-cat{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-muted);border-radius:99px;padding:2px 8px;font-size:.7rem}.saved-list{gap:.75rem;display:grid}.saved-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);align-items:flex-start;gap:1rem;padding:1rem 1.25rem;display:flex}.saved-item .type-badge{border-radius:99px;flex-shrink:0;padding:3px 8px;font-size:.7rem;font-weight:600}.type-word{color:var(--accent-blue);background:#63b3ed1f}.type-sentence{color:var(--accent-purple);background:#a78bfa1f}.saved-item .saved-jp{cursor:pointer;font-family:Noto Sans JP,sans-serif;font-size:1.2rem;font-weight:600}.saved-item .saved-reading{color:var(--text-muted);font-size:.78rem}.saved-item .saved-meaning{color:var(--text-secondary);font-size:.88rem}.remove-btn{color:var(--text-muted);cursor:pointer;transition:color var(--transition);background:0 0;border:none;flex-shrink:0;margin-left:auto;padding:4px;font-size:1.1rem}.remove-btn:hover{color:var(--accent-red)}.score-screen{text-align:center;padding:3rem 1rem}.score-big{background:linear-gradient(135deg, var(--accent-green), var(--accent-blue));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:5rem;font-weight:800}.score-label{color:var(--text-secondary);margin-bottom:2rem;font-size:1.3rem}.score-actions{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.btn-primary{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple));color:#fff;cursor:pointer;transition:all var(--transition);border:none;padding:.75rem 2rem;font-size:.95rem;font-weight:600}.btn-primary:hover{opacity:.9;transform:translateY(-2px)}.btn-secondary{border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);padding:.75rem 2rem;font-size:.95rem;font-weight:600}.btn-secondary:hover{border-color:var(--border-accent);color:var(--text-primary)}.empty-state{text-align:center;color:var(--text-muted);padding:4rem 2rem}.empty-state .empty-icon{margin-bottom:1rem;font-size:3rem}.empty-state p{font-size:1rem}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.fade-up{animation:.4s both fadeUp}.pop-in{animation:.3s cubic-bezier(.34,1.56,.64,1) both pop}.shake{animation:.4s shake}@media (width<=768px){.page-content{padding:1rem}.stats-row{grid-template-columns:1fr 1fr}.menu-grid,.options-grid{grid-template-columns:1fr}.navbar{padding:0 1rem}.nav-links{display:none}.dashboard-hero h1{font-size:2rem}.question-jp{font-size:2.5rem}}