:root{--bg-color: #1e1e2e;--surface-color: #313244;--surface-hover: #45475a;--text-color: #cdd6f4;--subtext: #a6adc8;--primary-color: #89b4fa;--success-color: #a6e3a1;--warning-color: #f9e2af;--error-color: #f38ba8;--border-color: rgba(255, 255, 255, .08);--shadow-color: rgba(0, 0, 0, .4);--badge-bg: rgba(255, 255, 255, .08);--table-row-hover: rgba(255, 255, 255, .05);--hira-color: #f5c2e7;--kata-color: #89b4fa;--hira-highlight: rgba(245, 194, 231, .12);--kata-highlight: rgba(137, 180, 250, .12);--primary-btn-text: #11111b;--btn-single-rk-bg: #cba6f7;--btn-single-rk-text: #11111b;--btn-phrase-kr-bg: #a6e3a1;--btn-phrase-kr-text: #11111b;--btn-phrase-rk-bg: #f9e2af;--btn-phrase-rk-text: #11111b}html[data-theme=light]{--bg-color: #eff1f5;--surface-color: #ffffff;--surface-hover: #e6e9ef;--text-color: #4c4f69;--subtext: #6c6f85;--primary-color: #1e66f5;--success-color: #40a02b;--warning-color: #df8e1d;--error-color: #d20f39;--border-color: rgba(0, 0, 0, .08);--shadow-color: rgba(0, 0, 0, .08);--badge-bg: rgba(0, 0, 0, .05);--table-row-hover: rgba(0, 0, 0, .03);--hira-color: #c2185b;--kata-color: #1e66f5;--hira-highlight: rgba(194, 24, 91, .08);--kata-highlight: rgba(30, 102, 245, .08);--primary-btn-text: #ffffff;--btn-single-rk-bg: #8839ef;--btn-single-rk-text: #ffffff;--btn-phrase-kr-bg: #40a02b;--btn-phrase-kr-text: #ffffff;--btn-phrase-rk-bg: #df8e1d;--btn-phrase-rk-text: #ffffff}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--bg-color);color:var(--text-color);display:flex;flex-direction:column;align-items:center;padding:20px;margin:0;min-height:100vh}h1{color:var(--primary-color)}.container{position:relative;background-color:var(--surface-color);padding:30px;border-radius:12px;box-shadow:0 4px 15px var(--shadow-color);max-width:1000px;width:100%;box-sizing:border-box;transition:max-width .3s ease}.config-section{display:flex;flex-direction:column;gap:15px}.quiz-mode-selector{display:flex;background-color:var(--surface-hover);border-radius:8px;padding:4px;margin-bottom:10px;align-self:center}.mode-btn{background:none;border:none;color:var(--subtext);padding:8px 16px;font-size:1rem;font-weight:700;border-radius:6px;cursor:pointer;transition:all .2s}.mode-btn:hover{color:var(--text-color)}.mode-btn.active{background-color:var(--primary-color);color:var(--primary-btn-text)}.options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;max-width:400px;margin:0 auto 20px}.option-btn{position:relative;background-color:var(--surface-hover);color:var(--text-color);border:2px solid transparent;padding:22px 15px 15px;font-size:2rem;font-weight:400;border-radius:10px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;min-height:85px;box-sizing:border-box}.option-badge{position:absolute;top:6px;left:8px;font-size:.75rem;color:var(--subtext);background-color:var(--badge-bg);padding:1px 5px;border-radius:4px;font-weight:700;pointer-events:none;line-height:1.2}.option-btn:hover{background-color:#585b70;border-color:var(--primary-color)}.option-btn.correct{background-color:#a6e3a133!important;border-color:var(--success-color)!important;color:var(--success-color)!important}.option-btn.wrong{background-color:#f38ba833!important;border-color:var(--error-color)!important;color:var(--error-color)!important}.tables-container{display:flex;gap:20px;margin-bottom:12px;width:100%}.table-wrapper{flex:1;min-width:0;background-color:var(--surface-hover);border-radius:8px;padding:15px}.table-wrapper h4{margin-top:0;margin-bottom:15px;text-align:center;font-size:1.2rem}.table-wrapper h4.hira-title{color:var(--hira-color)}.table-wrapper h4.kata-title{color:var(--kata-color)}table.kana-table{width:100%;border-collapse:collapse}table.kana-table th,table.kana-table td{padding:8px 4px;text-align:center;border-bottom:1px solid var(--border-color)}table.kana-table th{color:var(--subtext);font-weight:700;font-size:.9rem}table.kana-table tr{cursor:pointer;transition:background-color .15s}table.kana-table tr:hover{background-color:var(--table-row-hover)}table.kana-table tr.selected-row{background-color:var(--kata-highlight)}table.kana-table.hira-table tr.selected-row{background-color:var(--hira-highlight)}table.kana-table td.group-label{color:var(--text-color);font-weight:700;text-align:left;padding-left:8px;font-size:.95rem}table.kana-table.hira-table td:not(.group-label){color:var(--hira-color);font-size:1.15rem;font-weight:400}table.kana-table.kata-table td:not(.group-label){color:var(--kata-color);font-size:1.15rem;font-weight:400}table.kana-table td .romaji-text{display:block;font-size:.75rem;color:var(--subtext);opacity:.8;margin-top:2px;font-weight:400}@media (max-width: 768px){.tables-container{flex-direction:column}}.quiz-section{text-align:center;display:none}.top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.btn-small{background-color:var(--surface-hover);color:var(--text-color);border:none;padding:5px 12px;border-radius:6px;cursor:pointer;font-size:.9rem}.btn-small:hover{opacity:.8}.hint-text{color:var(--warning-color);font-weight:700;min-height:24px;margin-bottom:10px}.kana-display{font-size:8rem;margin:-10px 0 32px;font-weight:400;line-height:1}.controls{display:flex;justify-content:center;gap:10px;margin-bottom:15px}input[type=text]{font-size:1.5rem;padding:10px;border-radius:8px;border:2px solid var(--surface-hover);background-color:var(--bg-color);color:var(--text-color);text-align:center;width:150px;outline:none}input[type=text]:focus{border-color:var(--primary-color)}button.primary{background-color:var(--primary-color);color:var(--primary-btn-text);border:none;padding:10px 20px;font-size:1.1rem;border-radius:8px;cursor:pointer;font-weight:700}button.secondary{background-color:var(--surface-hover);color:var(--text-color);border:none;padding:10px 15px;font-size:1rem;border-radius:8px;cursor:pointer}button:hover{opacity:.8}.feedback{margin-top:15px;font-size:1.2rem;height:24px;font-weight:700}.stats{margin-top:20px;font-size:1rem;color:var(--subtext);border-top:1px solid var(--surface-hover);padding-top:15px}.header-controls{position:fixed;top:20px;right:20px;display:flex;align-items:center;gap:12px;z-index:100}.theme-toggle-btn,.dropdown-trigger,.reset-btn{background:none;border:none;box-shadow:none;color:var(--subtext);width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none}.theme-toggle-btn:hover,.dropdown-trigger:hover,.reset-btn:hover{background-color:var(--surface-hover);color:var(--text-color);transform:scale(1.08)}.custom-dropdown{position:relative}.dropdown-menu{position:absolute;top:44px;right:0;background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:140px;box-shadow:0 4px 15px var(--shadow-color);animation:fadeInScale .15s ease-out}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95) translateY(-5px)}to{opacity:1;transform:scale(1) translateY(0)}}.dropdown-item{background:none;border:none;color:var(--text-color);padding:8px 12px;font-size:.9rem;font-weight:500;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;transition:background-color .15s,color .15s;text-align:left}.dropdown-item:hover{background-color:var(--surface-hover)}.dropdown-item.active{background-color:#89b4fa26;color:var(--primary-color)}.dropdown-item .flag{font-size:1.1rem;display:inline-block;line-height:1}.start-modes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:4px}.mode-card{background-color:var(--surface-hover);border:1px solid var(--border-color);border-radius:10px;padding:16px 20px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;outline:none;box-sizing:border-box}.mode-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow-color);border-color:var(--mode-accent)!important}.mode-card .mode-badge{font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;color:var(--subtext);transition:color .2s}.mode-card:hover .mode-badge{color:var(--mode-accent)}.mode-card .mode-title{font-size:1.05rem;font-weight:600;color:var(--text-color)}.mode-card.single-kr{--mode-accent: var(--primary-color)}.mode-card.single-rk{--mode-accent: var(--btn-single-rk-bg)}.mode-card.phrase-kr{--mode-accent: var(--btn-phrase-kr-bg)}.mode-card.phrase-rk{--mode-accent: var(--btn-phrase-rk-bg)}