.question-center{text-align:center;margin-bottom:32px}.listen-section{margin-bottom:20px}.listen-button{font-size:36px;background:#8b5cf633;border:2px solid #8b5cf6;border-radius:50%;width:80px;height:80px;color:#8b5cf6;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;transition:all .2s}.listen-button:hover{background:#8b5cf64d;transform:scale(1.05)}.listen-text{font-size:14px;color:#fff9;font-family:JetBrains Mono,Fira Code,Consolas,Monaco,monospace}.item-display{margin-bottom:20px}.question-text{font-size:14px;color:#fff6;margin-top:8px}.answer-options{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.answer-button{transition:opacity .3s}.answer-button.faded,.answer-button.disabled{opacity:.3}.feedback-section{text-align:center;margin-top:20px}.incorrect-feedback{font-size:18px;font-weight:700;margin-bottom:16px;padding:10px 20px;border-radius:8px;background:#ef444433;border:2px solid #ef4444;color:#ef4444;text-align:center;display:inline-block}.correct-feedback{font-size:18px;font-weight:700;margin-bottom:16px;padding:10px 20px;border-radius:8px;background:#22c55e33;border:2px solid #22c55e;color:#22c55e;text-align:center;display:inline-block}.next-button-section{text-align:center;margin-top:12px}.quiz-results{text-align:center;padding-top:40px}.quiz-results__emoji{font-size:48px;margin-bottom:10px}.quiz-results__score{font-size:28px;font-weight:700;margin-bottom:8px}.quiz-results__streak{color:#ffffff80;margin-bottom:8px}.quiz-results__message{color:#fff6;margin-bottom:28px}.quiz-results__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.quiz-header-box{display:flex;flex-direction:column;margin-bottom:16px;padding:10px 14px;border-radius:12px;background:linear-gradient(145deg,#111118f2,#191922d9);border:1px solid rgba(255,255,255,.12);box-shadow:0 4px 16px #00000038}.quiz-header-box--compact{margin-bottom:10px;padding:8px 10px}.quiz-header-row{display:flex;justify-content:space-between;align-items:center;width:100%}.quiz-header-info{display:flex;gap:16px;font-size:13px;color:#ffffff80;font-family:JetBrains Mono,Fira Code,Consolas,Monaco,monospace;font-weight:500;flex:1;justify-content:center}.quiz-header-info--compact{font-size:12px}.quiz-header-controls{display:flex;gap:6px}.quiz-header-nav{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:16px}.quiz-header-nav--compact{flex-direction:column;align-items:stretch;margin-bottom:8px;gap:8px}.quiz-header-stats{display:flex;gap:16px;font-size:14px;color:#ffffff80;font-family:JetBrains Mono,Fira Code,Consolas,Monaco,monospace;flex:1;justify-content:center}.quiz-header-stats--compact{flex:unset}.quiz-progress{height:4px;background:#ffffff1a;border-radius:2px;margin-bottom:24px;overflow:hidden}.quiz-progress__fill{height:100%;width:var(--progress, 0%);background:linear-gradient(90deg,#eab308,#f59e0b);transition:width .3s}.tone-actions{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}.tone-section{margin-bottom:24px}.tone-card-grid{display:flex;gap:12px;flex-wrap:wrap}.tone-card{flex:var(--tone-flex, 1 1 18%);cursor:pointer;padding:var(--tone-padding, 24px 16px)}.tone-card__symbol{font-size:clamp(36px,5vw,44px);font-weight:800}.tone-card__title{font-size:clamp(16px,2.2vw,18px);font-weight:700}.tone-card__thai{font-size:clamp(12px,1.8vw,14px);color:#ffffff80}.tone-card__description{font-size:clamp(12px,1.8vw,14px);color:#fff6;margin-top:4px}.tone-card__example{font-size:clamp(20px,2.6vw,24px);margin-top:8px;opacity:.7}.tone-mark-card__symbol{font-size:clamp(44px,6vw,56px);font-weight:700;color:#eab308}.tone-mark-card__title{font-size:clamp(16px,2.2vw,18px);font-weight:700;color:#fffc}.tone-mark-card__example{font-size:clamp(20px,2.6vw,24px);color:#eab308;margin-top:8px;opacity:.7}.tone-grid-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.tone-grid-table{border-collapse:collapse;width:100%;min-width:600px}.tone-grid-table__head{padding:8px;text-align:center;font-size:10px;color:#ffffff80;border-bottom:1px solid rgba(255,255,255,.15);white-space:pre-line;line-height:1.3}.tone-grid-table__head--left{text-align:left;font-size:11px}.tone-grid-table__class-cell{padding:8px;font-weight:700;font-size:13px;border-bottom:1px solid rgba(255,255,255,.08)}.tone-grid-table__class-thai{font-size:11px;opacity:.7}.tone-grid-table__cell{padding:8px;text-align:center;border-bottom:1px solid rgba(255,255,255,.08)}.tone-grid-table__tone-symbol{font-size:16px;font-weight:700}.tone-grid-table__tone-label{font-size:10px;font-weight:600}.tone-grid-table__empty-cell{font-size:14px;color:#fff3}.tone-example-card__thai{font-size:clamp(36px,5vw,44px);font-weight:400;color:var(--tone-color, #eab308);min-width:60px;text-align:center}.tone-example-card__content{flex:1}.tone-example-card__formula{font-size:clamp(13px,2vw,14px);color:#ffffffb3}.tone-example-card__class{font-weight:700}.tone-example-card__result{font-size:clamp(16px,2.2vw,18px);font-weight:700;color:var(--tone-color, #eab308);margin-top:4px}.tone-quiz-option__symbol{font-size:clamp(32px,5vw,40px);font-weight:800}.tone-quiz-option__label{font-size:clamp(14px,2.2vw,16px);font-weight:700}.tone-quiz-item__thai{font-size:80px;font-weight:400;cursor:pointer;line-height:1;margin-bottom:8px;color:var(--tone-color, #eab308);transition:color .15s}.tone-quiz-item__romanization{font-size:clamp(18px,2.8vw,20px);color:#ffffff8c;font-family:var(--font-mono);margin-bottom:6px}.tone-quiz-item__translation{font-size:14px;color:#fff6}.tone-quiz-item__hint-box{margin-top:12px;padding:8px 16px;border-radius:8px;background:#ffffff0f;display:inline-block}.tone-quiz-item__hint-text{font-size:13px;color:#fff9}.tone-quiz-item__hint-class,.tone-quiz-item__hint-tone{font-weight:700}.tone-tree-question-block{text-align:center;margin-bottom:24px}.tone-tree-question-block__thai{font-size:72px;font-weight:400;color:#eab308;cursor:pointer;line-height:1;margin-bottom:8px}.tone-tree-question-block__translation{font-size:14px;color:#fff6}.tone-tree-summary{display:flex;gap:8px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}.tone-tree-summary__chip{padding:4px 10px;border-radius:12px;font-size:12px;font-weight:700;background:var(--chip-bg, rgba(255, 255, 255, .12));border:var(--chip-border, 1px solid rgba(255, 255, 255, .3));color:var(--chip-color, #fff)}.tone-tree-step-title-wrap{text-align:center;margin-bottom:20px}.tone-tree-step-title{font-size:15px;color:#ffffffb3;font-weight:600}.tone-tree-options{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.tone-tree-option__title{font-size:18px;font-weight:700}.tone-tree-option__subtitle{font-size:11px;color:#ffffff80}.tone-tree-option__subtitle--dim{color:#fff6}.tone-tree-option__title--nomark{color:#94a3b8;font-size:16px}.tone-tree-option__title--live{color:#22c55e}.tone-tree-option__title--dead{color:#ef4444}.tone-tree-option__title--short{color:#f59e0b}.tone-tree-option__title--long{color:#3b82f6}.tone-tree-option__mark-char{font-size:28px;font-weight:700;color:#eab308}.tone-tree-option__tone-symbol{font-size:22px;font-weight:800}.tone-tree-option__tone-label{font-size:12px;font-weight:700}.tone-tree-result-wrap{text-align:center;width:100%}.tone-tree-result-card{padding:20px;border-radius:12px;margin-bottom:16px;background:var(--result-bg, rgba(255, 255, 255, .08));border:var(--result-border, 2px solid rgba(255, 255, 255, .2))}.tone-tree-result-card__icon{font-size:36px;margin-bottom:8px}.tone-tree-result-card__title{font-size:16px;color:#ffffffb3;margin-bottom:8px}.tone-tree-result-card__tone{font-weight:800}.tone-tree-result-card__formula{font-size:13px;color:#ffffff80}.trainer-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:10px 14px;border-radius:14px;background:#fff0b40d;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);box-shadow:0 2px 12px #00000059}.trainer-topbar__back{padding:8px 16px;min-height:40px;border-radius:10px;font-size:13px;cursor:pointer;font-family:var(--font-mono);font-weight:700;background:color-mix(in srgb,var(--trainer-accent, #eab308) 18%,transparent);border:2px solid var(--trainer-accent, #eab308);color:#fff;transition:background .18s ease,transform .12s ease;white-space:nowrap;-webkit-tap-highlight-color:transparent}.trainer-topbar__back:hover{background:color-mix(in srgb,var(--trainer-accent, #eab308) 30%,transparent)}.trainer-topbar__back:active{transform:scale(.95)}.trainer-topbar__controls{display:flex;align-items:center;gap:8px}.trainer-menu-header{text-align:center;margin-bottom:36px}.trainer-menu-header--mobile{margin-bottom:28px}.trainer-menu-header__kicker{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--trainer-accent, #eab308);margin-bottom:10px;font-family:var(--font-mono);font-weight:700}.trainer-menu-header__title{font-size:52px;font-weight:800;margin:0;background:linear-gradient(135deg,var(--trainer-accent, #eab308),var(--trainer-accent-dark, #d97706));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}.trainer-menu-header__title--mobile{font-size:40px}.trainer-menu-header__subtitle{color:#ffffff94;font-size:14px;margin-top:10px;margin-bottom:0;font-family:var(--font-mono);font-weight:500;line-height:1.5}.trainer-section-label{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#ffffff61;margin-bottom:12px;font-family:var(--font-mono);font-weight:600}.trainer-module-list{display:flex;flex-direction:column;gap:10px;margin-bottom:32px}.trainer-module-btn{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:14px;cursor:pointer;text-align:left;width:100%;min-height:72px;background:#ffffff0d;border:1.5px solid color-mix(in srgb,var(--module-color) 22%,transparent);transition:background .18s ease,border-color .18s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}.trainer-module-btn:hover{background:color-mix(in srgb,var(--module-color) 8%,transparent);border-color:color-mix(in srgb,var(--module-color) 42%,transparent)}.trainer-module-btn:active{transform:scale(.98)}.trainer-module-btn--mobile{gap:14px;padding:16px 18px}.trainer-module-btn__icon{width:48px;height:48px;border-radius:12px;flex-shrink:0;background:color-mix(in srgb,var(--module-color) 12%,transparent);border:1.5px solid color-mix(in srgb,var(--module-color) 28%,transparent);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--module-color);font-family:var(--font-thai)}.trainer-module-btn__content{flex:1;min-width:0}.trainer-module-btn__meta{display:flex;align-items:center;gap:8px;margin-bottom:3px}.trainer-module-btn__number{font-size:11px;color:#ffffff61;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:.08em}.trainer-module-btn__title{font-size:17px;font-weight:700;color:#fff;line-height:1.3}.trainer-module-btn__title--mobile{font-size:16px}.trainer-module-btn__thai{color:var(--module-color);font-size:15px;font-family:var(--font-thai)}.trainer-module-btn__thai--mobile{font-size:14px}.trainer-module-btn__desc{font-size:12px;color:#ffffff7a;margin-top:3px;font-family:var(--font-mono);line-height:1.4}.trainer-module-btn__arrow{color:var(--module-color);font-size:18px;font-weight:700;opacity:.55;flex-shrink:0}@media(max-width:640px){.trainer-topbar{margin-bottom:16px;padding:8px 12px}.trainer-topbar__back{padding:6px 12px;font-size:12px;min-height:36px}.trainer-menu-header{margin-bottom:24px}.trainer-module-btn{padding:14px 16px;gap:12px}.trainer-module-btn__icon{width:44px;height:44px;font-size:18px}}.thai-tonal-trainer{--trainer-accent: #a855f7;--trainer-accent-dark: #6d28d9;background:#0e0d0b;color:#fff;font-family:var(--font-thai);outline:none;-webkit-tap-highlight-color:transparent;min-height:100vh;overflow:auto}.thai-tonal-trainer__content{max-width:800px;margin:0 auto;padding:36px 24px}.thai-tonal-trainer__content--mobile{max-width:100%;padding:20px 16px}.thai-tonal-trainer__pill{padding:8px 14px;border-radius:8px;font-size:13px;cursor:pointer;font-family:var(--font-mono);white-space:nowrap;font-weight:700;background:#ffffff1f;border:2px solid rgba(255,255,255,.3);color:#fffc;transition:all .15s}.thai-tonal-trainer__pill--active{background:#eab3084d;border:2px solid #eab308;color:#fff}.thai-tonal-trainer__module-header-wrapper{margin-bottom:20px}.thai-tonal-trainer__module-header-wrapper--mobile{margin-bottom:12px}.thai-tonal-trainer__module-header{padding:10px 14px;border-radius:14px;background:linear-gradient(135deg,#a855f712,#ffffff08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(168,85,247,.2);box-shadow:0 2px 16px #0006,inset 0 1px #a855f714}.thai-tonal-trainer__module-header--mobile{padding:8px 10px}.thai-tonal-trainer__module-header-main{display:flex;align-items:center;gap:8px}.thai-tonal-trainer__header-back{padding:6px 12px;border-radius:10px;border:1px solid rgba(234,179,8,.55);background:#eab30824;color:#fef3c7;font-family:var(--font-mono);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .18s ease;flex-shrink:0}.thai-tonal-trainer__header-back:hover{background:#eab30840;border-color:#fbbf24}.thai-tonal-trainer__module-heading{margin:8px 0 0;display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px;font-size:15px;line-height:1.4;font-weight:700;color:#fffc;padding:0 2px}.thai-tonal-trainer__module-heading--mobile{font-size:13px;gap:6px;margin-top:6px}.thai-tonal-trainer__module-tag{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:999px;border:1px solid rgba(168,85,247,.5);background:#a855f726;color:#ddd6fe;font-size:10px;letter-spacing:.08em;font-family:var(--font-mono);text-transform:uppercase;font-weight:700}.thai-classifier-trainer .thai-tonal-trainer__module-tag{border-color:#10b98180;background:#10b98126;color:#a7f3d0}.thai-classifier-trainer .thai-tonal-trainer__module-header{border-color:#10b98133;background:linear-gradient(135deg,#10b98112,#ffffff08);box-shadow:0 2px 16px #0006,inset 0 1px #10b98112}.thai-tonal-trainer__module-heading-thai{color:#facc15;text-shadow:0 0 20px rgba(234,179,8,.25)}.thai-tonal-trainer__header-controls{display:inline-flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-left:auto}.thai-tonal-trainer__header-toggle{min-width:42px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:#ffffff1a;color:#ffffffdb;font-size:13px;font-weight:700;font-family:var(--font-mono);cursor:pointer;transition:all .18s ease}.thai-tonal-trainer__header-toggle:hover{border-color:#ffffff6b;background:#ffffff29}.thai-tonal-trainer__header-toggle--active{background:#eab30842;border-color:#eab308f2;color:#fff}.thai-tonal-trainer__tts-label{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#eab308;margin-bottom:12px;font-family:var(--font-mono);font-weight:600}.thai-tonal-trainer__tts-box{margin-top:32px;padding:20px;border-radius:12px;background:#eab3080d;border:2px solid rgba(234,179,8,.2)}.thai-tonal-trainer__tts-label{color:#eab308;margin-bottom:16px}.thai-tonal-trainer__tts-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.thai-tonal-trainer__tts-input{flex:1;min-width:300px;padding:12px;border-radius:8px;background:#ffffff14;border:2px solid rgba(255,255,255,.15);color:#fff;font-size:16px;font-family:var(--font-input);outline:none}.thai-tonal-trainer__tts-input--mobile{min-width:100%}.thai-tonal-trainer__tts-play{padding:12px 24px;border-radius:8px;background:#eab30833;border:2px solid #eab308;color:#eab308;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;font-family:var(--font-mono)}.thai-tonal-trainer__tts-play:hover{background:#eab3084d}.module-actions{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}.module-section{margin-bottom:24px}.card-roman{color:#fff9;font-family:JetBrains Mono,Fira Code,Consolas,Monaco,monospace;margin-bottom:4px}.card-roman--sm{font-size:14px}.card-roman--md{font-size:16px}.card-detail{color:#fff6;margin-top:2px}.card-detail--sm{font-size:12px}.card-detail--md{font-size:14px}@media(max-width:640px){.thai-tonal-trainer__module-header-main{grid-template-columns:1fr;justify-items:stretch}.thai-tonal-trainer__header-back{justify-self:flex-start;padding:7px 11px;font-size:12px}.thai-tonal-trainer__header-controls{justify-content:flex-start}.thai-tonal-trainer__header-toggle{min-width:38px;padding:7px 9px;font-size:12px}.thai-tonal-trainer{padding-bottom:env(safe-area-inset-bottom)}}.classifier-filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.classifier-card-expanded{margin-top:16px;text-align:left}.classifier-card-tip{font-size:13px;color:#ffffffa6;font-family:var(--font-mono);background:#ffffff0d;border-radius:8px;padding:10px 14px;margin-bottom:14px;line-height:1.6}.classifier-card-tip-label{color:#10b981;font-weight:700}.classifier-card-sentence{padding:14px 16px;border-radius:10px;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);margin-bottom:14px;text-align:center;cursor:pointer;transition:background .15s}.classifier-card-sentence:hover{background:#ffffff12}.classifier-card-examples{margin-top:6px}.classifier-examples-list{display:flex;flex-wrap:wrap;gap:8px}.classifier-example-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;border-radius:8px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:background .15s;min-width:80px}.classifier-example-item:hover{background:#ffffff17}.classifier-quiz-progress{margin-bottom:20px}.classifier-quiz-progress-bar{height:4px;border-radius:2px;background:#ffffff1a;overflow:hidden;margin-bottom:8px}.classifier-quiz-progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#10b981,#34d399);transition:width .3s ease}.classifier-quiz-meta{display:flex;gap:16px;align-items:center}.classifier-quiz-question-area{text-align:center;margin-bottom:24px;padding:24px 16px;border-radius:14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.1)}.classifier-quiz-q-label{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#fff6;font-family:var(--font-mono);font-weight:600;margin-bottom:16px}.classifier-quiz-noun{display:inline-block;cursor:pointer}.classifier-quiz-options{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:20px}.classifier-quiz-feedback{padding:16px 20px;border-radius:12px;margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.classifier-quiz-feedback--correct{background:#22c55e1a;border:1px solid rgba(34,197,94,.3)}.classifier-quiz-feedback--wrong{background:#ef444414;border:1px solid rgba(239,68,68,.25)}.classifier-quiz-feedback-text{font-size:15px;font-weight:600;color:#ffffffd9;font-family:var(--font-mono)}.classifier-quiz-tip{font-size:13px;color:#ffffff8c;font-family:var(--font-mono);max-width:480px;line-height:1.5}.classifier-quiz-sentence-display{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;cursor:pointer;margin-bottom:8px}.classifier-quiz-sentence-noun{font-size:48px;font-weight:700;color:#fbbf24}.classifier-quiz-sentence-num{font-size:40px;font-weight:600;color:#60a5fa}.classifier-quiz-sentence-blank{font-size:48px;font-weight:700;border-bottom:3px solid rgba(255,255,255,.2);min-width:80px;text-align:center;transition:color .15s}.classifier-quiz-sentence-hint{font-size:13px;color:#fff6;font-family:var(--font-mono);margin-top:8px}@media(max-width:640px){.classifier-quiz-sentence-noun,.classifier-quiz-sentence-blank{font-size:36px}.classifier-quiz-sentence-num{font-size:30px}.classifier-quiz-sentence-display{gap:10px}}.thai-classifier-trainer{--trainer-accent: #10b981;--trainer-accent-dark: #047857;background:#0e0d0b;color:#fff;font-family:var(--font-thai);outline:none;-webkit-tap-highlight-color:transparent;min-height:100vh;overflow:auto}.thai-classifier-trainer__content{max-width:800px;margin:0 auto;padding:36px 24px}.thai-classifier-trainer__content--mobile{max-width:100%;padding:20px 16px}.thai-classifier-trainer__pattern-box{margin-bottom:24px;padding:18px 20px;border-radius:14px;background:#10b9810f;border:1px solid rgba(16,185,129,.22);text-align:center}.thai-classifier-trainer__pattern-label{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#10b981;font-family:var(--font-mono);font-weight:700;margin-bottom:12px}.thai-classifier-trainer__pattern-demo{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.thai-classifier-trainer__pattern-part{padding:8px 16px;border-radius:10px;font-size:26px;font-weight:700;font-family:var(--font-thai)}.thai-classifier-trainer__pattern-part--noun{background:#f59e0b26;border:2px solid rgba(245,158,11,.4);color:#fbbf24}.thai-classifier-trainer__pattern-part--num{background:#3b82f626;border:2px solid rgba(59,130,246,.4);color:#60a5fa}.thai-classifier-trainer__pattern-part--clf{background:#10b98126;border:2px solid rgba(16,185,129,.5);color:#34d399}.thai-classifier-trainer__pattern-sep{font-size:18px;color:#ffffff4d;font-family:var(--font-mono)}.thai-classifier-trainer__pattern-hint{margin-top:10px;font-size:12px;color:#fff6;font-family:var(--font-mono)}.thai-classifier-trainer__tts-box{margin-top:8px;padding:18px 20px;border-radius:12px;background:#10b9810d;border:1.5px solid rgba(16,185,129,.18)}.thai-classifier-trainer__tts-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#10b981;margin-bottom:10px;font-family:var(--font-mono);font-weight:700}.thai-classifier-trainer__tts-hint{font-size:13px;color:#ffffffa6;margin:0;font-family:var(--font-mono);line-height:1.6}@media(max-width:640px){.thai-classifier-trainer__pattern-part{font-size:20px;padding:6px 12px}.thai-classifier-trainer{padding-bottom:env(safe-area-inset-bottom)}}.app-base{background:#131f2e;background-image:radial-gradient(ellipse 90% 50% at 50% -5%,rgba(28,176,246,.07) 0%,transparent 55%),radial-gradient(ellipse 60% 40% at 90% 85%,rgba(206,130,255,.06) 0%,transparent 50%),radial-gradient(ellipse 50% 30% at 10% 70%,rgba(88,204,2,.04) 0%,transparent 45%);color:#fff;font-family:var(--font-thai);outline:none;-webkit-tap-highlight-color:transparent}.app-base--full-height{min-height:100vh;overflow:auto}.app-base--fixed{position:fixed;top:0;left:0;right:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box}.google-fonts{font-family:var(--font-mono)}.container{max-width:800px;margin:0 auto;padding:36px 24px;box-sizing:border-box}.container--mobile{max-width:100%;padding:20px 16px}.container--narrow{max-width:500px}.container--explore{padding:36px 10px}.container--drill-words{flex:1;display:flex;flex-direction:column;width:auto;overflow:hidden}.visual-keyboard{-webkit-user-select:none;user-select:none;width:100%;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0;box-sizing:border-box}.visual-keyboard__row-wrapper{display:inline-block;min-width:750px}.visual-keyboard__row-wrapper--compact{display:block;min-width:0;width:100%}.visual-keyboard__row{display:flex;gap:4px;margin-bottom:4px;width:auto;overflow:hidden}.visual-keyboard__row--compact{gap:2px;margin-bottom:2px;padding-left:0;width:100%}.visual-keyboard__row--offset{padding-left:0}.vk-key{height:54px;border-radius:8px;background:#fffffff2;border:2px solid rgba(150,150,150,.6);flex-shrink:0;min-width:0;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .1s;cursor:pointer;box-shadow:0 2px 4px #0000001a}.vk-key--compact{height:38px;border-radius:5px;flex-shrink:1;flex:1}.vk-key--disabled{background:#e6e6e6e6;border:2px solid rgba(180,180,180,.6);color:#64646499}.vk-key--target{background:#ffffc8f2;border:2px solid #ffcc00}.vk-key--pressed{background:#c8c8c8f2;border:2px solid rgba(120,120,120,.8)}.vk-key--pressed-correct{background:#c8ffc8f2;border:2px solid #2d9b10}.vk-key__char-main{font-size:18px;line-height:1;color:#000000e6;font-weight:600}.vk-key__char-main--compact{font-size:14px}.vk-key__char-main--target{color:#000;font-weight:800}.vk-key__char-shift{font-size:10px;color:#000000b3;line-height:1;font-weight:500;margin-top:1}.vk-key__char-shift--compact{font-size:8px}.vk-key__char-shift--target{color:#000c}.vk-key__physical{font-size:8px;color:#00000080;line-height:1;font-weight:700;margin-top:1;font-family:var(--font-mono)}.vk-key--shift,.vk-key--backspace,.vk-key--tab,.vk-key--caps,.vk-key--enter{background:#f0f0f0e6;border:2px solid rgba(150,150,150,.6);color:#000c;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}.vk-key--shift-active{background:#90ee90cc;border:2px solid #2d9b10;color:#2d9b10;box-shadow:0 0 10px #90ee9080}.vk-key--shift{width:118px}.vk-key--tab,.vk-key--backspace{width:84px}.vk-key--enter{width:111px}.vk-key--regular{width:48px}.alphabet-carousel__header{margin-bottom:22px;padding:16px;border-radius:14px;background:linear-gradient(145deg,#111118f2,#191922d9);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 24px #00000047}.alphabet-carousel__header--grid{margin-top:8px}.alphabet-page-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:14px;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(150deg,#1d1d26eb,#101018e6);box-shadow:0 10px 28px #00000047;gap:12px}.alphabet-page-header--compact{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:8px}.alphabet-page-header__top-row{display:flex;justify-content:space-between;align-items:center;width:100%;gap:12px}.alphabet-page-header__controls{display:flex;gap:6px}.alphabet-page-header__title{font-size:12px;color:#ffffff9e;font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40%;font-weight:600;text-align:center;letter-spacing:.03em}.alphabet-page-options{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}.alphabet-view-toggle{display:inline-flex;background:#ffffff0f;border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:3px;gap:4px}.alphabet-view-toggle__btn{padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:700;font-family:var(--font-mono);background:transparent;border:1px solid transparent;color:#ffffffb8;transition:all .15s}.alphabet-view-toggle__btn:hover{background:#ffffff1a}.alphabet-view-toggle__btn--active{background:#eab3084d;border-color:#eab308b8;color:#fff}.alphabet-carousel__header--compact{margin-bottom:14px;padding:12px}.alphabet-carousel__tabs{display:flex;gap:8px;justify-content:center;width:100%}.alphabet-carousel__tabs .alphabet-btn{padding:10px 18px;border-radius:10px;background:#ffffff1a;border:1px solid rgba(255,255,255,.25);color:#ffffffb3;cursor:pointer;font-size:13px;font-weight:600;font-family:var(--font-mono);transition:all .18s ease}.alphabet-carousel__tabs .alphabet-btn:hover{border-color:#ffffff6b;background:#ffffff29}.alphabet-carousel__tabs .alphabet-btn--active{background:#eab30842;border-color:#eab308f2;color:#fff}.alphabet-carousel__content{display:flex;flex-direction:column;align-items:center;min-height:500px;justify-content:center;margin-top:40px}.alphabet-carousel__content--compact{min-height:400px;margin-top:20px}.alphabet-carousel__card{position:relative;width:80%;max-width:500px;padding:60px 40px;border-radius:20px;background:#ffffff26;border:2px solid rgba(255,255,255,.3);text-align:center;box-shadow:0 8px 32px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;cursor:pointer}.alphabet-carousel__card--compact{width:90%;padding:40px 20px}.alphabet-carousel__image{margin-bottom:16px}.alphabet-carousel__image img{max-width:100%;max-height:200px;object-fit:contain;border-radius:12px}.alphabet-carousel__image-img--compact{max-height:150px}.alphabet-carousel__char{font-size:120px;font-weight:700;color:#eab308;margin-bottom:30px;line-height:1;text-shadow:0 4px 8px rgba(0,0,0,.3)}.alphabet-carousel__char--compact{font-size:80px}.alphabet-carousel__roman{font-size:24px;color:#ffffffe6;font-family:var(--font-mono);font-weight:600;margin-bottom:8px}.alphabet-carousel__roman--compact{font-size:18px}.alphabet-carousel__translation{font-size:15px;color:#ffffff73;font-family:var(--font-mono);font-style:italic;margin-bottom:4px}.alphabet-carousel__translation--compact{font-size:12px}.alphabet-carousel__controls{display:flex;gap:12px;margin-top:16px}.alphabet-carousel__progress{margin-top:24px;font-size:14px;color:#ffffff80;font-family:var(--font-mono)}.alphabet-carousel__progress--compact{font-size:12px}@media(max-width:640px){.alphabet-carousel__header{padding:12px;margin-bottom:14px}.alphabet-carousel__tabs{gap:6px}.alphabet-carousel__tabs .alphabet-btn{padding:8px 12px;font-size:12px}.alphabet-page-header{padding:10px;border-radius:12px}.alphabet-page-header__top-row{gap:8px}.alphabet-page-header__controls{gap:4px}.alphabet-page-header__title{max-width:100%}.alphabet-view-toggle__btn{padding:6px 10px}}.alphabet-btn{padding:10px 18px;border-radius:10px;background:#ffffff1a;border:1px solid rgba(255,255,255,.25);color:#ffffffb3;cursor:pointer;font-size:13px;font-weight:600;font-family:var(--font-mono);transition:all .18s ease}.alphabet-btn:hover{border-color:#ffffff6b;background:#ffffff29}.alphabet-btn--compact{padding:8px 12px;font-size:12px}.alphabet-btn--active{background:#eab30842;border-color:#eab308f2;color:#fff}.nav-btn{padding:8px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;background:#ffffff1f;border:2px solid rgba(255,255,255,.3);color:#fffc;transition:all .15s;font-family:var(--font-mono)}.nav-btn--compact{padding:6px 14px;font-size:12px}.nav-btn--disabled{cursor:not-allowed;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);color:#ffffff4d}.alphabet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.alphabet-grid--compact{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.alphabet-card{padding:24px 16px;border-radius:12px;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);text-align:center;cursor:pointer;transition:all .2s;box-shadow:0 2px 4px #0000001a}.alphabet-card--compact{padding:16px 12px}.alphabet-card:hover{transform:translateY(-4px);background:#ffffff26;box-shadow:0 4px 8px #0003}.alphabet-card__char{font-size:64px;font-weight:700;color:#eab308;margin-bottom:8px;line-height:1}.alphabet-card__char--compact{font-size:48px}.alphabet-card__roman{font-size:14px;color:#ffffffb3;font-family:var(--font-mono);font-weight:600;margin-bottom:4px}.alphabet-card__roman--compact{font-size:12px}.alphabet-card__translation{font-size:10px;color:#fff6;font-family:var(--font-mono);font-style:italic;margin-top:2px}.alphabet-card__translation--compact{font-size:9px}.explore-container{margin-bottom:20px;overflow-x:hidden}.explore-result{padding:18px 24px;border-radius:10px;background:#fffffff2;border:2px solid rgba(150,150,150,.6);display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;box-shadow:0 2px 4px #0000001a}.explore-result--compact{padding:14px;gap:16px}.explore-char{text-align:center}.explore-char__label{font-size:11px;color:#0009;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px;font-weight:700}.explore-char__value{font-size:48px;color:#000;font-weight:700}.explore-char__value--compact{font-size:36px}.explore-divider{width:2px;height:44px;background:#0003}.explore-speak-btn{padding:10px 16px;border-radius:8px;background:#f0f0f0e6;border:2px solid rgba(150,150,150,.6);color:#000c;cursor:pointer;font-size:18px;font-weight:600;transition:all .15s;box-shadow:0 2px 4px #0000001a}.pill-btn{padding:8px 14px;border-radius:8px;font-size:13px;cursor:pointer;font-family:var(--font-mono);white-space:nowrap;font-weight:700;background:#ffffff1f;border:2px solid rgba(255,255,255,.3);color:#fffc;transition:all .15s}.pill-btn--compact{padding:4px 8px;font-size:11px}.pill-btn--active{background:#eab3084d;border:2px solid #eab308;color:#fff}.mobile-input{position:fixed;top:-100;left:0;width:1px;height:1px;opacity:0;font-size:16px;border:none;outline:none;z-index:-1;pointer-events:auto}.view-header-wrapper{margin-bottom:14px;flex-shrink:0}.view-header-wrapper--compact{margin-bottom:8px}.view-header{display:flex;flex-direction:column;flex-shrink:0;padding:10px 14px;border-radius:14px;background:#141e30d1;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 20px #00000059,inset 0 1px #ffffff0f}.view-header__row{display:flex;align-items:center;gap:8px}.view-header--compact{padding:7px 10px}.view-header--has-footer .view-header__row{margin-bottom:8px}.view-header__footer{display:flex;justify-content:flex-end;gap:6px;padding-top:8px;border-top:1px solid rgba(255,255,255,.07)}.view-header__back{flex-shrink:0;white-space:nowrap}.view-header__title{font-size:15px;font-weight:700;color:#ffffffbf;font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;padding:8px 2px 2px;letter-spacing:.5px}.view-header__title--compact{font-size:13px;padding:6px 2px 2px}.view-header__controls{display:flex;gap:5px;flex-shrink:0;margin-left:auto}.view-header__back-section{display:flex;justify-content:flex-end;gap:10px;margin-bottom:20px}.tab-switcher{display:flex;justify-content:center;gap:6px;margin-bottom:22px;background:#ffffff0a;border-radius:16px;padding:5px;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 2px 8px #00000040}.tab-switcher__btn{flex:1;padding:11px 10px;min-height:44px;border-radius:12px;cursor:pointer;font-size:12px;font-weight:800;font-family:var(--font-mono);letter-spacing:.3px;transition:all .18s ease;background:transparent;border:1.5px solid transparent;color:#fff6;-webkit-tap-highlight-color:transparent;text-transform:uppercase}.tab-switcher__btn:hover{color:#ffffffb3;background:#ffffff0f}.tab-switcher__btn:active{transform:scale(.96)}.tab-switcher__btn--active-keyboard{background:linear-gradient(135deg,#ffc80038,#ffc8001a);border:1.5px solid rgba(255,200,0,.5);color:#ffc800;box-shadow:0 2px 12px #ffc8002e,inset 0 1px #ffffff14}.tab-switcher__btn--active-tonal{background:linear-gradient(135deg,#ce82ff38,#ce82ff1a);border:1.5px solid rgba(206,130,255,.5);color:#ce82ff;box-shadow:0 2px 12px #ce82ff2e,inset 0 1px #ffffff14}.tab-switcher__btn--active-classifiers{background:linear-gradient(135deg,#58cc0238,#58cc021a);border:1.5px solid rgba(88,204,2,.5);color:#58cc02;box-shadow:0 2px 12px #58cc022e,inset 0 1px #ffffff14}.menu-header{text-align:center;margin-bottom:20px;padding:28px 20px 22px;border-radius:24px;background:linear-gradient(160deg,#1cb0f617,#141e3099,#ce82ff0f);border:1px solid rgba(28,176,246,.2);box-shadow:0 8px 32px #00000059,inset 0 1px #ffffff12;position:relative;overflow:hidden}.menu-header:before{content:"";position:absolute;top:-40px;left:50%;transform:translate(-50%);width:200px;height:120px;background:radial-gradient(ellipse,rgba(255,200,0,.12) 0%,transparent 70%);pointer-events:none}.menu-header--mobile{margin-bottom:16px;padding:20px 16px 18px}.menu-header__subtitle{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:#1cb0f6cc;margin-bottom:10px;font-family:var(--font-mono);font-weight:800}.menu-header__title{font-size:64px;font-weight:900;margin:0;background:linear-gradient(135deg,#fff,#e0f0ff,#b3d9ff 60%,#ffc800);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.15;filter:drop-shadow(0 4px 16px rgba(28,176,246,.3));letter-spacing:-1px}.menu-header__title--mobile{font-size:48px}.menu-header__word-count{color:#ffffff73;font-size:12px;margin-top:10px;font-family:var(--font-mono);font-weight:600;letter-spacing:1.5px}.menu-quick-btns{display:flex;gap:10px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}.menu-action-card{width:100%;padding:16px 20px;border-radius:18px;cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;transition:all .18s;border:2px solid transparent;box-shadow:0 3px 12px #00000040}.menu-action-card--gold{background:#ffc80014;border-color:#ffc8004d}.menu-action-card--gold:hover{background:#ffc80024;border-color:#ffc8008c;transform:translateY(-2px);box-shadow:0 6px 20px #ffc80026}.menu-action-card--purple{background:#ce82ff12;border-color:#ce82ff40}.menu-action-card--purple:hover{background:#ce82ff21;border-color:#ce82ff80;transform:translateY(-2px);box-shadow:0 6px 20px #ce82ff26}.menu-action-card__title{font-size:16px;font-weight:700;color:#fff;letter-spacing:.2px}.menu-action-card--gold .menu-action-card__title{color:#ffc800}.menu-action-card--purple .menu-action-card__title{color:#ce82ff}.menu-action-card__desc{font-size:12px;color:#ffffff73;margin-top:3px;font-family:var(--font-mono);font-weight:600}.menu-action-card__badge{flex-shrink:0;border-radius:999px;padding:4px 14px;font-size:14px;font-weight:900;font-family:var(--font-mono)}.menu-action-card__badge--gold{background:#ffc80033;color:#ffc800;border:1.5px solid rgba(255,200,0,.4)}.menu-action-card__badge--purple{background:#ce82ff33;color:#ce82ff;border:1.5px solid rgba(206,130,255,.4)}.lesson-btn{display:flex;align-items:center;gap:16px;padding:16px 20px;min-height:72px;border-radius:16px;background:#ffffff0d;border:2px solid rgba(255,255,255,.09);cursor:pointer;text-align:left;width:100%;transition:all .18s ease;-webkit-tap-highlight-color:transparent;box-shadow:0 3px 12px #00000040;position:relative;overflow:hidden}.lesson-btn:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,200,0,.06) 0%,transparent 60%);opacity:0;transition:opacity .18s}.lesson-btn:hover{background:#ffffff14;border-color:#ffc80059;box-shadow:0 6px 20px #0000004d,0 0 0 1px #ffc8001a;transform:translateY(-2px)}.lesson-btn:hover:after{opacity:1}.lesson-btn:active{transform:scale(.98) translateY(0)}.lesson-btn--mobile{padding:14px 16px;gap:12px;min-height:64px}.lesson-btn--done{background:#58cc0214;border:2px solid rgba(88,204,2,.25)}.lesson-btn--done:hover{border-color:#58cc0280}.lesson-btn__number{width:40px;height:40px;border-radius:12px;flex-shrink:0;background:linear-gradient(135deg,#ffc80033,#ffc80014);border:2px solid rgba(255,200,0,.3);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:#ffc800;font-family:var(--font-mono);transition:all .18s}.lesson-btn__number--done{background:linear-gradient(135deg,#58cc024d,#58cc021f);border:2px solid rgba(88,204,2,.5);color:#58cc02;font-size:18px;box-shadow:0 0 12px #58cc024d}.lesson-btn__content{flex:1;min-width:0}.lesson-btn__title{font-size:17px;font-weight:700;color:#fff;letter-spacing:.2px}.lesson-btn__title--mobile{font-size:15px}.lesson-btn__subtitle{font-size:13px;color:#ffc800bf;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-family:var(--font-mono);letter-spacing:.3px}.lesson-btn__subtitle--mobile{font-size:12px}.lesson-btn__arrow{color:#ffffff4d;font-size:16px;font-weight:700;transition:all .18s}.lesson-btn:hover .lesson-btn__arrow{color:#ffc800b3;transform:translate(3px)}.lesson-list{display:flex;flex-direction:column;gap:8px}.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}.category-grid--mobile{grid-template-columns:1fr 1fr;gap:8px}.category-btn{padding:16px 18px;border-radius:16px;cursor:pointer;text-align:left;background:#ffffff0d;border:2px solid rgba(255,255,255,.09);transition:all .18s ease;display:flex;justify-content:space-between;align-items:center;box-shadow:0 3px 12px #0003;min-height:60px}.category-btn:hover{background:#1cb0f61a;border-color:#1cb0f666;transform:translateY(-2px);box-shadow:0 6px 20px #0000004d,0 0 0 1px #1cb0f61a}.category-btn:active{transform:scale(.97)}.category-btn--mobile{padding:13px 14px;min-height:54px}.category-btn__name{font-size:16px;color:#fff;font-weight:700;letter-spacing:.2px}.category-btn__name--mobile{font-size:14px}.category-btn__count{font-size:12px;color:#1cb0f6cc;font-family:var(--font-mono);font-weight:800;background:#1cb0f61f;padding:2px 8px;border-radius:999px;border:1px solid rgba(28,176,246,.25)}.category-btn--fc{border-color:#ce82ff40;background:#ce82ff12}.category-btn--fc:hover{background:#ce82ff24;border-color:#ce82ff80}.difficulty-btns{display:flex;gap:10px;flex-wrap:wrap}.difficulty-btn{padding:14px 24px;border-radius:16px;cursor:pointer;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);transition:all .18s ease;flex:1;min-width:80px;box-shadow:0 3px 12px #0003}.difficulty-btn:nth-child(1){border-color:#58cc0240;background:#58cc0212}.difficulty-btn:nth-child(1):hover{border-color:#58cc0280;background:#58cc0221;box-shadow:0 6px 20px #58cc0226}.difficulty-btn:nth-child(2){border-color:#ffc80040;background:#ffc80012}.difficulty-btn:nth-child(2):hover{border-color:#ffc80080;background:#ffc80021;box-shadow:0 6px 20px #ffc80026}.difficulty-btn:nth-child(3){border-color:#ff4b4b40;background:#ff4b4b12}.difficulty-btn:nth-child(3):hover{border-color:#ff4b4b80;background:#ff4b4b21;box-shadow:0 6px 20px #ff4b4b26}.difficulty-btn:hover{transform:translateY(-2px)}.difficulty-btn:active{transform:scale(.97)}.difficulty-btn--mobile{flex:1}.difficulty-btn__label{font-size:16px;color:#fff;font-weight:700;text-align:center}.difficulty-btn__label--mobile{font-size:14px}.section{margin-bottom:28px}.section__title{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#fff6;margin-bottom:14px;font-family:var(--font-mono);font-weight:800;display:flex;align-items:center;gap:10px}.section__title:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.12),transparent);border-radius:1px}.quick-btn{padding:11px 20px;min-height:44px;border-radius:999px;background:#ffffff12;border:2px solid rgba(255,255,255,.12);color:#ffffffd9;cursor:pointer;font-size:13px;font-weight:700;font-family:var(--font-mono);letter-spacing:.3px;transition:all .15s ease;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 8px #0003}.quick-btn:hover{background:#ffc8001f;border-color:#ffc80073;color:#ffc800;box-shadow:0 4px 16px #ffc8001f;transform:translateY(-2px)}.quick-btn:active{transform:scale(.96) translateY(0)}.alphabet-card-btn{padding:18px 24px;min-height:70px;border-radius:18px;cursor:pointer;background:#ffc80012;border:2px solid rgba(255,200,0,.25);transition:all .18s ease;flex:0 1 auto;-webkit-tap-highlight-color:transparent;box-shadow:0 3px 12px #0003}.alphabet-card-btn:hover{background:#ffc80021;border-color:#ffc80080;box-shadow:0 6px 20px #ffc8001f;transform:translateY(-2px)}.alphabet-card-btn:active{transform:scale(.97) translateY(0)}.alphabet-card-btn--mobile{flex:1 1 100%}.alphabet-card-btn__title{font-size:17px;color:#fff;font-weight:700;letter-spacing:.3px}.alphabet-card-btn__title--mobile{font-size:15px}.alphabet-card-btn__desc{font-size:12px;color:#ffffff80;margin-top:4px}.view-toggle-btn{padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;font-family:var(--font-mono);background:#ffffff1a;border:2px solid rgba(255,255,255,.2);color:#ffffffb3;transition:all .15s}.view-toggle-btn--active{background:#eab3084d;border:2px solid #eab308;color:#fff}.progress-bar{height:8px;background:#ffffff14;border-radius:999px;margin-bottom:12px;overflow:hidden;flex-shrink:0}.progress-bar--compact{height:6px;margin-bottom:8px}.progress-bar__fill{height:100%;width:0%;background:linear-gradient(90deg,#46a302,#58cc02,#89e219);transition:width .4s cubic-bezier(.34,1.56,.64,1);border-radius:999px;box-shadow:0 0 8px #58cc0266}.stats-bar{display:flex;justify-content:space-around;align-items:center;padding:10px 16px;background:#ffffff0a;border-radius:16px;margin-bottom:12px;border:1px solid rgba(255,255,255,.07);gap:4px}.stats-bar--compact{padding:8px 12px;margin-bottom:8px}.stats-bar__item{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1}.stats-bar__value{font-size:20px;font-weight:900;font-family:var(--font-mono);color:#fff}.stats-bar__value--compact{font-size:17px}.stats-bar__label{font-size:9px;font-weight:800;font-family:var(--font-mono);color:#fff6;text-transform:uppercase;letter-spacing:1.5px}.stats-bar__label--compact{font-size:8px}.target-char{font-size:120px;font-weight:700;line-height:1;transition:color .15s,text-shadow .15s;color:#ffc800;text-shadow:0 0 40px rgba(255,200,0,.25)}.target-char--compact{font-size:88px}.target-char--compact-kb-open{font-size:72px}.target-char--correct{color:#58cc02;text-shadow:0 0 40px rgba(88,204,2,.5);animation:correctPop .35s ease}.target-char--error{color:#ff4b4b;text-shadow:0 0 40px rgba(255,75,75,.5);animation:wrongShake .4s ease}.target-roman{font-size:18px;color:#fff9;margin-top:4px;font-family:var(--font-mono);font-weight:500}.target-roman--compact{font-size:14px}.target-hint{font-size:13px;color:#fff6;margin-top:8px;font-family:var(--font-mono);font-weight:500}.tap-zone{padding:12px;border-radius:10px;background:#eab3081a;border:2px dashed rgba(234,179,8,.4);text-align:center;cursor:pointer;margin-top:8px;margin-bottom:8px;flex-shrink:0}.tap-zone__title{font-size:15px;color:#eab308;font-weight:600}.tap-zone__hint{font-size:11px;color:#fff6;margin-top:4px;font-weight:500}.word-meaning{font-size:24px;color:#ffffff80;margin-bottom:8px;font-family:var(--font-mono);text-align:center;font-weight:500}.word-meaning--compact{font-size:14px;margin-bottom:0}.word-display{display:flex;align-items:center;gap:10px}.word-chars{font-size:102px;line-height:1.3}.word-chars--compact{font-size:60px}.word-chars--compact-kb-open{font-size:52px}.word-char{color:#ffffff4d;font-weight:500;transition:color .15s}.word-char--correct{color:#22c55e}.word-char--current{color:#eab308;font-weight:700;text-decoration:underline;text-decoration-color:#eab30880;text-underline-offset:8px}.word-char--current-correct{color:#22c55e}.word-char--current-error{color:#ef4444}.word-speak-btn{background:none;border:none;font-size:22px;cursor:pointer;opacity:.6;padding:4px;transition:opacity .15s}.word-speak-btn:hover{opacity:1}.flashcard-meaning{font-size:24px;color:#ffffff80;margin-bottom:8px;font-family:var(--font-mono);text-align:center;font-weight:500}.flashcard-meaning--compact{font-size:14px;margin-bottom:0}.flashcard-input{font-size:32px;padding:10px;border-radius:8px;border:2px solid rgba(255,255,255,.3);background:#ffffff1a;color:#fff;text-align:center;min-height:50px;width:80%;max-width:400px;word-break:break-all}.flashcard-input--placeholder{color:#ffffff4d}.flashcard-correct{font-size:32px;margin-bottom:20px;color:#eab308}.flashcard-user-input{font-size:32px;margin-bottom:10px}.flashcard-user-char{font-weight:600}.flashcard-user-char--correct{color:#22c55e}.flashcard-user-char--error{color:#ef4444}.flashcard-label{margin-bottom:10px;font-size:18px;color:#ffffffb3}.action-btn{padding:11px 22px;border-radius:999px;cursor:pointer;font-size:13px;font-weight:800;font-family:var(--font-mono);letter-spacing:.5px;text-transform:uppercase;transition:all .15s}.action-btn:hover{transform:translateY(-2px)}.action-btn:active{transform:scale(.96)}.action-btn--primary{background:#ffc80038;border:2px solid rgba(255,200,0,.6);color:#ffc800;box-shadow:0 0 16px #ffc80033}.action-btn--primary:hover{background:#ffc80052;box-shadow:0 4px 20px #ffc8004d}.action-btn--success{background:#58cc0238;border:2px solid rgba(88,204,2,.6);color:#58cc02;box-shadow:0 0 16px #58cc0233}.action-btn--success:hover{background:#58cc0252;box-shadow:0 4px 20px #58cc024d}.action-btn--secondary{background:#ffffff12;border:2px solid rgba(255,255,255,.15);color:#ffffffa6}.action-btn--danger{background:#ff4b4b1a;border:2px solid rgba(255,75,75,.3);color:#ff4b4bcc}.action-btn--large{padding:14px 32px;border-radius:999px;font-size:15px;font-weight:700}.results-emoji{font-size:48px;margin-bottom:10px}.results-title{font-size:30px;font-weight:900;margin-bottom:8px;background:linear-gradient(135deg,#58cc02,#89e219);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.results-title--mobile{font-size:24px}.results-subtitle{color:#ffffff73;font-size:13px;margin-bottom:24px;font-family:var(--font-mono);font-weight:600;letter-spacing:.5px}.results-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px}.results-stat{padding:18px 16px;border-radius:18px;background:#ffffff0d;border:2px solid rgba(255,255,255,.09);transition:all .18s;animation:fadeInUp .35s ease}.results-stat:hover{transform:translateY(-2px);background:#ffffff14}.results-stat--mobile{padding:14px 12px}.results-stat__value{font-size:30px;font-weight:900;color:#ffc800;font-family:var(--font-mono)}.results-stat__value--mobile{font-size:24px}.results-stat__label{font-size:10px;color:#fff6;text-transform:uppercase;letter-spacing:2px;margin-top:5px;font-weight:800;font-family:var(--font-mono)}.results-words{margin-bottom:24px;text-align:left}.results-section-title{font-size:11px;color:#fff6;text-transform:uppercase;letter-spacing:2px;margin-bottom:8px;font-family:var(--font-mono);font-weight:600}.results-word-list{display:flex;gap:8px;flex-wrap:wrap}.results-word-item{padding:8px 14px;border-radius:8px;background:#eab3081a;border:2px solid rgba(234,179,8,.2);font-size:16px;cursor:pointer;font-weight:500}.results-word-item span{font-size:11px;color:#fff6;font-weight:500}.results-missed{margin-bottom:24px;text-align:left}.results-missed-item{padding:8px 14px;border-radius:8px;background:#ef44441f;border:2px solid rgba(239,68,68,.25);font-size:18px;font-weight:600}.results-missed-item span{font-size:12px;color:#fff6;font-weight:500}.results-btns{display:flex;gap:12px;justify-content:center}.warning-text{text-align:center;margin-top:28px;color:#ffffff80;font-size:12px;font-family:var(--font-mono);font-weight:600}.page-actions{display:flex;justify-content:flex-end;gap:10px;margin-bottom:20px}.page-title{font-size:30px;font-weight:700;margin-bottom:6px}.page-title--mobile{font-size:24px}.page-subtitle{color:#ffffff80;font-size:13px;margin-bottom:24px;font-family:var(--font-mono);font-weight:500}.badge-progress-bar{padding:18px 20px;background:linear-gradient(135deg,#58cc020f,#141e3080);border-radius:20px;margin-bottom:20px;border:1.5px solid rgba(88,204,2,.2);box-shadow:0 4px 20px #00000040;position:relative;overflow:hidden}.badge-progress-bar:before{content:"";position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:radial-gradient(circle,rgba(88,204,2,.12) 0%,transparent 70%);pointer-events:none}.badge-progress-bar--mobile{padding:14px 16px}.badge-progress-bar__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.badge-progress-bar__badges{display:flex;align-items:center;gap:8px}.badge-progress-bar__icon{font-size:22px}.badge-progress-bar__count{font-size:14px;font-weight:800;color:#58cc02;font-family:var(--font-mono)}.badge-progress-bar__streak{display:flex;align-items:center;gap:6px;font-size:12px;font-family:var(--font-mono);background:#ff96001f;border:1px solid rgba(255,150,0,.25);border-radius:999px;padding:4px 10px}.badge-progress-bar__streak-current{color:#ff9600;font-weight:800;font-size:14px}.badge-progress-bar__streak-days{color:#ffffff80}.badge-progress-bar__streak-sep{color:#fff3}.badge-progress-bar__streak-best{color:#fff6}.badge-progress-bar__track{height:8px;background:#ffffff14;border-radius:999px;margin-bottom:14px;overflow:hidden}.badge-progress-bar__fill{height:100%;background:linear-gradient(90deg,#46a302,#58cc02,#89e219);border-radius:999px;transition:width .6s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 10px #58cc0266}.badge-progress-bar__recent{display:flex;gap:8px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}.badge-progress-bar__recent-badge{padding:5px 12px;border-radius:999px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px;animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}.badge-progress-bar__recent-badge span{font-size:15px}.badge-progress-bar__actions{display:flex;gap:8px;justify-content:center}.badge-progress-bar__btn{padding:9px 20px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:800;font-family:var(--font-mono);letter-spacing:.5px;text-transform:uppercase;transition:all .15s}.badge-progress-bar__btn--badges{background:#58cc0226;border:2px solid rgba(88,204,2,.4);color:#58cc02}.badge-progress-bar__btn--badges:hover{background:#58cc0240;border-color:#58cc02b3;transform:translateY(-1px)}.badge-progress-bar__btn--progress{background:#1cb0f61f;border:2px solid rgba(28,176,246,.35);color:#1cb0f6}.badge-progress-bar__btn--progress:hover{background:#1cb0f638;border-color:#1cb0f699;transform:translateY(-1px)}.badge-gallery{padding:40px;max-width:800px;margin:0 auto}.badge-gallery--mobile{padding:20px 16px}.badge-gallery__header{text-align:center;margin-bottom:32px}.badge-gallery__emoji{font-size:48px;margin-bottom:10px;display:block;animation:bounceIn .5s cubic-bezier(.34,1.56,.64,1)}.badge-gallery__title{font-size:30px;font-weight:900;margin-bottom:6px;background:linear-gradient(135deg,#ffc800,#ff9600);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.badge-gallery__title--mobile{font-size:24px}.badge-gallery__subtitle{color:#ffffff73;font-size:13px;font-family:var(--font-mono);font-weight:600}.badge-gallery__category{margin-bottom:28px}.badge-gallery__category-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.08)}.badge-gallery__category-icon{font-size:22px}.badge-gallery__category-name{font-size:14px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}.badge-gallery__category-count{font-size:11px;color:#ffffff59;font-family:var(--font-mono);font-weight:700;margin-left:auto}.badge-gallery__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.badge-gallery__grid--mobile{grid-template-columns:repeat(2,1fr);gap:8px}.badge-gallery__item{padding:16px 14px;border-radius:16px;text-align:center;background:#ffffff08;border:2px solid rgba(255,255,255,.07);transition:all .2s}.badge-gallery__item--unlocked{background:var(--badge-bg, rgba(255, 200, 0, .08));border:2px solid var(--badge-border, rgba(255, 200, 0, .3));box-shadow:0 4px 16px #0003,0 0 0 1px var(--badge-border, rgba(255,200,0,.1))}.badge-gallery__item--unlocked:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d,0 0 12px var(--badge-border, rgba(255,200,0,.2))}.badge-gallery__item-icon{font-size:36px;margin-bottom:8px;display:block}.badge-gallery__item-icon--locked{filter:grayscale(1) opacity(.4)}.badge-gallery__item-name{font-size:12px;font-weight:800;margin-bottom:3px;letter-spacing:.3px}.badge-gallery__item-name--unlocked{color:var(--badge-border, #ffc800)}.badge-gallery__item-name--locked{color:#ffffff59}.badge-gallery__item-desc{font-size:10px;color:#ffffff59;line-height:1.4}.badge-gallery__item-date{font-size:9px;color:#ffffff40;margin-top:5px;font-family:var(--font-mono)}.progress-view{padding:40px;max-width:800px;margin:0 auto}.progress-view--mobile{padding:20px 16px}.progress-view__header{text-align:center;margin-bottom:32px}.progress-view__emoji{font-size:48px;margin-bottom:10px;display:block}.progress-view__title{font-size:30px;font-weight:900;margin-bottom:4px;background:linear-gradient(135deg,#1cb0f6,#ce82ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.progress-view__title--mobile{font-size:24px}.progress-view__stats-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;justify-content:center}.progress-view__stat-card{padding:18px 16px;border-radius:16px;background:#ffffff0a;border:2px solid rgba(255,255,255,.07);text-align:center;flex:1;min-width:80px;transition:all .18s}.progress-view__stat-card:hover{background:#ffffff12;transform:translateY(-2px)}.progress-view__stat-card--mobile{padding:14px 12px;min-width:40%}.progress-view__stat-icon{font-size:26px;margin-bottom:8px;display:block}.progress-view__stat-label{font-size:10px;color:#fff6;margin-bottom:5px;text-transform:uppercase;letter-spacing:1.5px;font-family:var(--font-mono);font-weight:700}.progress-view__stat-value{font-size:24px;font-weight:900;font-family:var(--font-mono)}.progress-view__stat-subvalue{font-size:11px;color:#ffffff4d;margin-top:2px}.progress-view__sessions{margin-top:24px}.progress-view__sessions-title{font-size:14px;font-weight:700;margin-bottom:12px;color:#fff9}.progress-view__sessions-list{display:flex;flex-direction:column;gap:6px}.progress-view__session-item{padding:10px 14px;border-radius:8px;background:#ffffff0a;display:flex;justify-content:space-between;align-items:center;font-size:12px}.progress-view__session-date{color:#ffffff80}.progress-view__session-mode{font-weight:600;color:#3b82f6}.progress-view__session-score{color:#ffffffb3}.progress-view__session-accuracy{font-weight:700}.progress-view__session-accuracy--high{color:#22c55e}.progress-view__session-accuracy--medium{color:#f59e0b}.progress-view__session-accuracy--low{color:#ef4444}.new-badge-notification{position:fixed;top:0;left:50%;transform:translate(-50%);z-index:9990;width:min(480px,95vw);margin:12px 0;padding:20px 24px;border-radius:20px;background:linear-gradient(135deg,#141e32f7,#0a1220fc);border:2px solid rgba(255,200,0,.4);box-shadow:0 20px 60px #0009,0 0 30px #ffc80033;animation:fadeInDown .4s cubic-bezier(.34,1.56,.64,1);text-align:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.new-badge-notification__title{font-size:11px;color:#ffc800;text-transform:uppercase;letter-spacing:4px;margin-bottom:16px;font-family:var(--font-mono);font-weight:800}.new-badge-notification__badges{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.new-badge-notification__badge{padding:16px 20px;border-radius:16px;text-align:center;animation:bounceIn .6s cubic-bezier(.34,1.56,.64,1);min-width:120px}.new-badge-notification__badge-icon{font-size:40px;margin-bottom:6px;display:block;animation:starSpin .8s ease}.new-badge-notification__badge-name{font-size:14px;font-weight:800;letter-spacing:.5px}.new-badge-notification__badge-desc{font-size:11px;color:#ffffff8c;margin-top:4px}.new-badge-notification__actions{display:flex;gap:10px;justify-content:center;margin-top:18px}.new-badge-notification__btn{padding:10px 24px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:800;font-family:var(--font-mono);letter-spacing:.5px;text-transform:uppercase;transition:all .15s}.new-badge-notification__btn--view{background:#ffc80033;color:#ffc800;border:2px solid rgba(255,200,0,.5)}.new-badge-notification__btn--view:hover{background:#ffc8004d;transform:translateY(-1px)}.new-badge-notification__btn--dismiss{background:#ffffff14;color:#fff9;border:2px solid rgba(255,255,255,.15)}@keyframes badgePulse{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@media(max-width:640px){.container{padding:16px 14px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));padding-bottom:max(20px,calc(16px + env(safe-area-inset-bottom)))}.view-header-wrapper,.progress-bar{margin-bottom:8px}.pill-btn{padding:4px 8px;font-size:11px}.mobile-back-button{padding:6px 10px!important;font-size:12px!important}.mobile-header-title{display:block;width:100%;text-align:center;margin-top:8px;margin-bottom:4px}.app-base{padding-bottom:env(safe-area-inset-bottom)}}.cookie-consent-banner{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(135deg,#1e1e28fa,#14141efa);border-top:1px solid rgba(234,179,8,.3);padding:16px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:1000;box-shadow:0 -4px 20px #0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.cookie-consent-banner__message{color:#ffffffe6;font-size:14px;text-align:center;font-family:var(--font-mono);font-weight:500;line-height:1.4}.cookie-consent-banner__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.cookie-consent-banner__button{padding:10px 24px;border-radius:8px;font-size:14px;font-weight:600;font-family:var(--font-mono);cursor:pointer;transition:all .2s ease;border:2px solid transparent}.cookie-consent-banner__button--accept{background:linear-gradient(135deg,#eab308,#f59e0b);color:#000;border-color:#eab308}.cookie-consent-banner__button--accept:hover{background:linear-gradient(135deg,#fbbf24,#eab308);transform:translateY(-2px);box-shadow:0 4px 12px #eab30866}.cookie-consent-banner__button--decline{background:#ffffff1a;color:#ffffffb3;border-color:#fff3}.cookie-consent-banner__button--decline:hover{background:#ffffff26;color:#ffffffe6;border-color:#ffffff4d}@media(min-width:640px){.cookie-consent-banner{flex-direction:row;justify-content:center;padding:14px 32px;gap:24px}.cookie-consent-banner__message{font-size:15px}.cookie-consent-banner__actions{flex-wrap:nowrap}}.fc-card{position:relative;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1);height:260px}.fc-card--flipped{transform:rotateY(180deg)}.fc-card__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px;padding:28px 24px;box-sizing:border-box;border:1.5px solid rgba(255,255,255,.12);box-shadow:0 12px 40px #00000080,inset 0 1px #ffffff14}.fc-card__front{background:linear-gradient(145deg,#581cdc40,#1e0a3cf2 60%,#0f0828fa);border-color:#8b5cf659;box-shadow:0 12px 40px #00000080,0 0 40px #8b5cf614,inset 0 1px #8b5cf61f}.fc-card__back{background:linear-gradient(145deg,#064e3b59,#0a231cf2 60%,#05140ffa);border-color:#34d3994d;box-shadow:0 12px 40px #00000080,0 0 40px #10b9810f,inset 0 1px #34d3991a;transform:rotateY(180deg)}@media(max-width:600px){.fc-card{height:200px}}.bug-report-fab{position:fixed;right:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:1500;width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.26);background:#0c0c12b3;color:#ffffffd9;font-size:16px;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.bug-report-fab:active{cursor:grabbing}.bug-report-overlay{position:fixed;inset:0;z-index:1600;background:#0000008c;display:flex;align-items:flex-end;justify-content:center;padding:12px}.bug-report-modal{width:min(100%,520px);background:#101018f7;border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:14px}.bug-report-note,.bug-report-error{margin:6px 0 10px;font-size:12px;color:#ffffffb3}.bug-report-error{color:#f87171}.bug-report-textarea{width:100%;min-height:90px;resize:vertical;border-radius:8px;padding:10px;background:#ffffff14;border:1px solid rgba(255,255,255,.2);color:#fff}.bug-report-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.bug-report-btn{border-radius:8px;padding:8px 12px;cursor:pointer;border:1px solid rgba(255,255,255,.28)}.bug-report-btn--primary{background:#eab3083d;color:#eab308}.bug-report-btn--secondary{background:#ffffff1a;color:#ffffffe0}.install-prompt{position:fixed;bottom:80px;left:50%;transform:translate(-50%);width:90%;max-width:400px;background:#1e1e28f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:16px;z-index:9998;box-shadow:0 4px 20px #0000004d;display:flex;align-items:center;gap:12px}.install-prompt__copy{flex:1}.install-prompt__title{font-weight:700;color:#fff;margin-bottom:4px}.install-prompt__description{font-size:12px;color:#ffffffb3}.install-prompt__install-btn{padding:8px 16px;border-radius:8px;background:#eab308;border:none;color:#000;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}.install-prompt__dismiss-btn{background:none;border:none;color:#ffffff80;cursor:pointer;padding:4px;font-size:18px;display:flex;align-items:center;justify-content:center}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#0f172a;padding:1rem}.login-card{background:#1e293b;border:1px solid #334155;border-radius:12px;padding:2rem;width:100%;max-width:360px}.login-title{text-align:center;font-size:1.25rem;font-weight:700;color:#f1f5f9;margin:0 0 1.5rem}.login-tabs{display:flex;gap:0;margin-bottom:1.5rem;border-radius:8px;overflow:hidden;border:1px solid #334155}.login-tab{flex:1;padding:.5rem;background:transparent;border:none;color:#94a3b8;font-size:.875rem;cursor:pointer;transition:background .15s,color .15s}.login-tab.active{background:#3b82f6;color:#fff}.login-tab:not(.active):hover{background:#273449}.login-form{display:flex;flex-direction:column;gap:1rem}.login-label{display:flex;flex-direction:column;gap:.375rem;font-size:.8125rem;color:#94a3b8}.login-input{background:#0f172a;border:1px solid #334155;border-radius:6px;padding:.5rem .75rem;color:#f1f5f9;font-size:1rem;outline:none;transition:border-color .15s}.login-input:focus{border-color:#3b82f6}.login-error{color:#f87171;font-size:.8125rem;margin:0;text-align:center}.login-submit{margin-top:.25rem;padding:.625rem;background:#3b82f6;border:none;border-radius:8px;color:#fff;font-size:.9375rem;font-weight:600;cursor:pointer;transition:background .15s}.login-submit:hover:not(:disabled){background:#2563eb}.login-submit:disabled{opacity:.6;cursor:default}:root{--font-thai: "TH Sarabun New", "Sarabun", "Prompt", "Noto Sans Thai", "Kanit", "Tahoma", "Arial Unicode MS", "Thonburi", "Ayuthaya", system-ui, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Consolas", "Monaco", monospace;--font-input: var(--font-thai);--font-ui: "Inter", "Segoe UI", system-ui, sans-serif;font-family:var(--font-thai);line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-green: #58cc02;--color-green-dark: #46a302;--color-green-light: #89e219;--color-green-glow: rgba(88, 204, 2, .35);--color-gold: #ffc800;--color-gold-dark: #e6a800;--color-gold-glow: rgba(255, 200, 0, .4);--color-blue: #1cb0f6;--color-blue-dark: #0e90d0;--color-blue-glow: rgba(28, 176, 246, .35);--color-purple: #ce82ff;--color-purple-dark: #9d5fd4;--color-purple-glow: rgba(206, 130, 255, .35);--color-red: #ff4b4b;--color-red-dark: #d93b3b;--color-red-glow: rgba(255, 75, 75, .4);--color-orange: #ff9600;--color-orange-dark: #e07000;--color-orange-glow: rgba(255, 150, 0, .4);--bg-base: #131f2e;--bg-card: rgba(255, 255, 255, .06);--bg-card-hover: rgba(255, 255, 255, .1);--bg-elevated: rgba(255, 255, 255, .08);--bg-glass: rgba(20, 30, 48, .85);--bg-input: rgba(255, 255, 255, .08);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .65);--text-muted: rgba(255, 255, 255, .35);--border-subtle: rgba(255, 255, 255, .08);--border-card: rgba(255, 255, 255, .12);--border-active: rgba(255, 255, 255, .25);--shadow-card: 0 4px 20px rgba(0, 0, 0, .35);--shadow-glow-green: 0 0 20px rgba(88, 204, 2, .4);--shadow-glow-gold: 0 0 20px rgba(255, 200, 0, .4);--shadow-glow-blue: 0 0 20px rgba(28, 176, 246, .4);--shadow-glow-purple: 0 0 20px rgba(206, 130, 255, .4);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-pill: 999px;--transition-fast: .12s ease;--transition-normal: .2s ease;--transition-slow: .35s ease;--color-xp: var(--color-gold);--color-hearts: var(--color-red);--color-streak: var(--color-orange);--color-level: var(--color-purple)}*,*:before,*:after{box-sizing:border-box}a{color:inherit;text-decoration:inherit}html{overflow-x:hidden}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;max-width:100vw;background:var(--bg-base)}#root{width:100%;min-height:100vh}@keyframes badgePulse{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.08)}to{transform:scale(1);opacity:1}}@keyframes xpFloat{0%{opacity:1;transform:translate(-50%) translateY(0) scale(1)}70%{opacity:1;transform:translate(-50%) translateY(-40px) scale(1.1)}to{opacity:0;transform:translate(-50%) translateY(-60px) scale(.9)}}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(110vh) rotate(var(--rotate, 360deg));opacity:0}}@keyframes burst{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--bx, 30px),var(--by, 30px)) scale(0);opacity:0}}@keyframes correctPop{0%{transform:scale(1)}30%{transform:scale(1.06)}60%{transform:scale(.97)}to{transform:scale(1)}}@keyframes wrongShake{0%{transform:translate(0)}15%{transform:translate(-8px)}30%{transform:translate(8px)}45%{transform:translate(-6px)}60%{transform:translate(6px)}75%{transform:translate(-3px)}to{transform:translate(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes levelUpBurst{0%{transform:scale(.5);opacity:0}40%{transform:scale(1.15);opacity:1}70%{transform:scale(.95)}to{transform:scale(1);opacity:1}}@keyframes heartLost{0%{transform:scale(1)}30%{transform:scale(1.3) rotate(-10deg)}60%{transform:scale(.8)}to{transform:scale(1)}}@keyframes streakFlame{0%{transform:scaleY(1)}50%{transform:scaleY(1.12) scaleX(.96)}to{transform:scaleY(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulseGlow{0%,to{box-shadow:0 0 12px var(--glow-color, rgba(88,204,2,.4))}50%{box-shadow:0 0 24px var(--glow-color, rgba(88,204,2,.7))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.1)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes popIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15);opacity:1}to{transform:scale(1)}}@keyframes starSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.2)}to{transform:rotate(360deg) scale(1)}}.animate-fadeInUp{animation:fadeInUp .3s ease forwards}.animate-fadeInDown{animation:fadeInDown .3s ease forwards}.animate-scaleIn{animation:scaleIn .25s ease forwards}.animate-bounceIn{animation:bounceIn .5s cubic-bezier(.34,1.56,.64,1) forwards}.animate-correct{animation:correctPop .35s ease forwards}.animate-wrong{animation:wrongShake .4s ease forwards}.practice-hud{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--bg-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);position:sticky;top:0;z-index:100}.practice-hud--compact{padding:8px 12px;gap:8px}.practice-hud__level{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.practice-hud__level-badge{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--color-purple-dark),var(--color-purple));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 12px var(--color-purple-glow)}.practice-hud__level-num{font-weight:900;font-size:14px;color:#fff;font-family:var(--font-mono)}.practice-hud__xp-wrap{flex:1;min-width:0}.practice-hud__xp-bar{height:6px;background:#ffffff1a;border-radius:999px;overflow:hidden;margin-bottom:2px}.practice-hud__xp-fill{height:100%;background:linear-gradient(90deg,var(--color-gold-dark),var(--color-gold));border-radius:999px;transition:width .5s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 8px var(--color-gold-glow)}.practice-hud__xp-label{font-size:10px;color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.5px}.practice-hud__streak{display:flex;align-items:center;gap:3px;background:#ff960026;border:1px solid rgba(255,150,0,.3);border-radius:var(--radius-pill);padding:4px 10px}.practice-hud__streak-num{font-weight:900;font-size:14px;color:var(--color-orange);font-family:var(--font-mono)}.practice-hud__hearts{display:flex;align-items:center;gap:3px}.hero-stats-card{background:linear-gradient(135deg,#1e2d46e6,#141e32f2);border:1px solid rgba(255,200,0,.25);border-radius:var(--radius-xl);padding:18px 20px;margin-bottom:20px;transition:all var(--transition-normal);position:relative;overflow:hidden}.hero-stats-card:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,200,0,.06) 0%,transparent 70%);pointer-events:none}.hero-stats-card:hover{border-color:#ffc80073;transform:translateY(-2px);box-shadow:0 8px 32px #0000004d,0 0 0 1px #ffc80026}.hero-stats-card__top{display:flex;align-items:center;gap:16px}.hero-stats-card__level-circle{position:relative;width:64px;height:64px;flex-shrink:0}.hero-stats-card__level-svg{width:64px;height:64px;transform:rotate(-90deg)}.hero-stats-card__level-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;color:var(--color-gold);font-family:var(--font-mono)}.hero-stats-card__info{flex:1;min-width:0}.hero-stats-card__title{font-weight:800;font-size:17px;color:var(--text-primary);letter-spacing:.5px;font-family:var(--font-mono);text-transform:uppercase}.hero-stats-card__xp{font-size:12px;color:var(--color-gold);font-family:var(--font-mono);margin:3px 0 6px}.hero-stats-card__xp-bar{height:8px;background:#ffffff1a;border-radius:999px;overflow:hidden}.hero-stats-card__xp-fill{height:100%;background:linear-gradient(90deg,var(--color-gold-dark),var(--color-gold),#ffe066);border-radius:999px;transition:width .8s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 10px var(--color-gold-glow);background-size:200% 100%;animation:shimmer 2s linear infinite}.hero-stats-card__right{display:flex;flex-direction:column;gap:6px;align-items:flex-end}.hero-stats-card__stat{display:flex;align-items:center;gap:5px}.hero-stats-card__stat-icon{font-size:18px}.hero-stats-card__stat-val{font-weight:700;font-size:15px;color:var(--text-primary);font-family:var(--font-mono)}.levelup-overlay{position:fixed;inset:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeInUp .3s ease}.levelup-overlay__card{background:linear-gradient(145deg,#1a2a3a,#0d1a28);border:2px solid var(--color-gold);border-radius:var(--radius-xl);padding:48px 40px;text-align:center;box-shadow:0 0 60px var(--color-gold-glow),var(--shadow-card);animation:levelUpBurst .5s cubic-bezier(.34,1.56,.64,1) forwards}.levelup-overlay__burst{font-size:52px;animation:starSpin 1s ease-in-out;display:block;margin-bottom:12px}.levelup-overlay__label{font-size:13px;letter-spacing:4px;color:var(--color-gold);font-family:var(--font-mono);font-weight:700;margin-bottom:6px;text-transform:uppercase}.levelup-overlay__level{font-size:72px;font-weight:900;color:var(--color-gold);font-family:var(--font-mono);line-height:1;text-shadow:0 0 30px var(--color-gold-glow)}.levelup-overlay__title{font-size:22px;font-weight:700;color:var(--text-primary);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:2px;margin-top:8px}.levelup-overlay__sub{font-size:14px;color:var(--text-secondary);margin-top:8px}.combo-indicator{display:inline-flex;align-items:center;gap:6px;background:#ff960026;border:1px solid var(--combo-color, #ff9600);border-radius:var(--radius-pill);padding:5px 14px;animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}.combo-indicator__fire{font-size:16px;animation:streakFlame .8s ease-in-out infinite;display:inline-block}.combo-indicator__count{font-weight:900;font-size:13px;color:var(--combo-color, #ff9600);font-family:var(--font-mono);letter-spacing:1px}.combo-indicator__mult{font-size:11px;color:var(--text-secondary);font-family:var(--font-mono);background:#ffffff1a;padding:1px 6px;border-radius:var(--radius-pill)}