:root{--text:#2b2a33;--text-dim:#6b6375;--text-h:#08060d;--bg:#faf9f6;--bg-elevated:#fff;--border:#e5e4e7;--accent:#d2361e;--accent-contrast:#fff;--danger:#c0392b;--success:#2e8b57;--shadow:#00000014 0 4px 12px -2px;--week1:#d2361e;--week2:#1e7ad2;--week3:#1e9c5a;--week4:#a53fc7;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font:16px/1.5 var(--sans);color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#e5e3e8;--text-dim:#a29db0;--text-h:#f8f7fa;--bg:#15131a;--bg-elevated:#201d27;--border:#35313f;--accent:#ff6b4a;--accent-contrast:#1a1a1a;--shadow:#0006 0 4px 12px -2px}}:root.theme-dark{--text:#e5e3e8;--text-dim:#a29db0;--text-h:#f8f7fa;--bg:#15131a;--bg-elevated:#201d27;--border:#35313f;--accent:#ff6b4a;--accent-contrast:#1a1a1a;--shadow:#0006 0 4px 12px -2px}:root.theme-light{--text:#2b2a33;--text-dim:#6b6375;--text-h:#08060d;--bg:#faf9f6;--bg-elevated:#fff;--border:#e5e4e7;--accent:#d2361e;--accent-contrast:#fff;--shadow:#00000014 0 4px 12px -2px}*{box-sizing:border-box}body{margin:0}h1{color:var(--text-h);margin:0 0 4px;font-size:22px}h2{color:var(--text-h);margin:0 0 6px;font-size:17px}p{color:var(--text-dim);margin:0 0 8px}.mono{font-family:var(--mono)}.app-shell{background:var(--bg);flex-direction:column;max-width:480px;min-height:100svh;margin:0 auto;display:flex}.app-main{flex:1;padding-bottom:90px;overflow-y:auto}.page{padding:16px;padding-top:max(16px, env(safe-area-inset-top))}.nav-bar{background:var(--bg-elevated);border-top:1px solid var(--border);width:100%;max-width:480px;padding-bottom:env(safe-area-inset-bottom);z-index:10;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.nav-tab{color:var(--text-dim);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;min-height:52px;padding:8px 2px 6px;font-size:10px;text-decoration:none;display:flex}.nav-icon{font-size:19px}.nav-tab-active{color:var(--accent)}.btn{border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);cursor:pointer;border-radius:12px;min-height:48px;padding:14px 18px;font-size:16px;font-weight:600}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-block{width:100%;margin-top:10px}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.btn-secondary{background:var(--bg-elevated)}.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-done{background:var(--success);border-color:var(--success);color:#fff}.progress-bar-wrap{margin-bottom:12px}.progress-bar-label{color:var(--text-dim);margin-bottom:4px;font-size:13px}.progress-bar-track{background:var(--border);border-radius:4px;height:8px;overflow:hidden}.progress-bar-fill{background:var(--accent);height:100%;transition:width .3s}.potd{margin-bottom:14px}.potd-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:4px;font-size:12px}.day-picker{flex-wrap:wrap;gap:6px;margin-bottom:16px;display:flex}.day-chip{border:2px solid var(--border);background:var(--bg-elevated);width:34px;height:34px;color:var(--text);cursor:pointer;border-radius:50%;font-size:12px;font-weight:600}.day-chip-active{border-color:var(--text-h)}.day-chip-locked{opacity:.4}.day-chip-done{background:var(--success);color:#fff;border-color:var(--success)}.week-1 .day-chip-done,.day-chip.week-1.day-chip-active{border-color:var(--week1)}.week-2 .day-chip-done,.day-chip.week-2.day-chip-active{border-color:var(--week2)}.week-3 .day-chip-done,.day-chip.week-3.day-chip-active{border-color:var(--week3)}.week-4 .day-chip-done,.day-chip.week-4.day-chip-active{border-color:var(--week4)}.lesson-header{justify-content:space-between;align-items:baseline;margin-bottom:8px;display:flex}.lesson-week{color:var(--text-dim);font-size:12px}.week-1 .lesson-week,.week-1 h1{color:var(--week1)}.week-2 .lesson-week,.week-2 h1{color:var(--week2)}.week-3 .lesson-week,.week-3 h1{color:var(--week3)}.week-4 .lesson-week,.week-4 h1{color:var(--week4)}.locked-banner{background:var(--bg-elevated);border:1px dashed var(--border);color:var(--text-dim);border-radius:10px;margin-bottom:12px;padding:12px;font-size:14px}.lesson-items{flex-direction:column;gap:10px;margin-bottom:16px;display:flex}.phrase-card{background:var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:14px;padding:14px}.phrase-card-compact{padding:10px 14px}.phrase-card-top{justify-content:space-between;align-items:center;display:flex}.phrase-thai{color:var(--text-h);font-size:19px;font-weight:700}.phrase-literal{color:var(--text-dim);margin-top:4px;font-size:13px}.phrase-meaning{margin-top:2px;font-size:15px}.phrase-tone-note{color:var(--accent);margin-top:6px;font-size:12px}.speaker-icon{cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:20px;line-height:1}.speaker-icon-lg{font-size:28px}.speaker-icon-hidden{width:1px;display:inline-block}.builder-pattern{font-family:var(--mono);background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13px;display:inline-block}.challenge-picker{flex-wrap:wrap;gap:6px;margin:12px 0;display:flex}.challenge-box{background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;padding:10px 12px}.challenge-prompt{font-weight:600}.challenge-feedback{margin-top:6px;font-size:14px}.challenge-correct{color:var(--success)}.challenge-wrong{color:var(--danger)}.live-output{background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;min-height:90px;margin-bottom:10px;padding:14px}.live-thai-row{align-items:center;gap:8px;display:flex}.live-thai{color:var(--text-h);font-size:20px;font-weight:700}.live-literal{color:var(--text-dim);margin-top:6px;font-size:13px}.live-natural{margin-top:4px;font-size:15px;font-style:italic}.warnings{margin-bottom:10px}.warning-banner{background:color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));border:1px solid var(--accent);color:var(--text);border-radius:10px;margin-bottom:6px;padding:10px 12px;font-size:13px}.negate-toggle{margin-bottom:10px;font-size:14px}.negate-toggle label{align-items:center;gap:8px;display:flex}.slot-columns{gap:10px;padding-bottom:8px;display:flex;overflow-x:auto}.slot-column{flex-direction:column;flex:none;gap:6px;width:130px;display:flex}.slot-column-title{letter-spacing:.06em;color:var(--text-dim);margin-bottom:2px;font-size:11px;font-weight:700}.slot-column-decoy{color:var(--danger);margin-top:8px}.pool-empty{color:var(--text-dim);font-size:12px;font-style:italic}.chip{border:1px solid var(--border);background:var(--bg-elevated);cursor:pointer;text-align:left;border-radius:10px;flex-direction:column;align-items:flex-start;gap:1px;min-height:44px;padding:8px 10px;display:flex}.chip-word{font-size:14px;font-weight:700}.chip-sub{color:var(--text-dim);font-size:11px}.chip-active{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 15%, var(--bg-elevated))}.chip-locked{opacity:.35;cursor:not-allowed}.builder-actions{gap:8px;margin-top:12px;display:flex}.builder-actions .btn{flex:1}.quiz-progress{color:var(--text-dim);margin-bottom:10px;font-size:13px}.quiz-question{background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;padding:16px}.quiz-prompt{color:var(--text-dim);margin-bottom:10px;font-size:14px}.quiz-sentence{color:var(--text-h);margin-bottom:14px;font-size:19px;font-weight:700}.mai-inserted{color:var(--accent)}.quiz-options{flex-direction:column;gap:8px;display:flex}.quiz-options-grid{grid-template-columns:1fr 1fr;display:grid}.opt-correct{border-color:var(--success)!important;background:color-mix(in srgb, var(--success) 20%, var(--bg-elevated))!important}.opt-wrong{border-color:var(--danger)!important;background:color-mix(in srgb, var(--danger) 20%, var(--bg-elevated))!important}.quiz-explain{color:var(--text-dim);margin-top:10px;font-size:13px}.quiz-built{min-height:30px}.quiz-word-pool{flex-wrap:wrap;gap:8px;display:flex}.quiz-best{color:var(--text-dim);font-size:14px}.quiz-final-score{text-align:center;color:var(--accent);margin:24px 0;font-size:42px;font-weight:800}.flashcard{background:var(--bg-elevated);border:1px solid var(--border);cursor:pointer;min-height:220px;box-shadow:var(--shadow);text-align:center;border-radius:18px;justify-content:center;align-items:center;padding:24px;display:flex}.flashcard-face{flex-direction:column;align-items:center;gap:10px;display:flex}.flashcard-thai{color:var(--text-h);font-size:26px;font-weight:800}.flashcard-hint{color:var(--text-dim);font-size:12px}.flashcard-literal{color:var(--text-dim);font-size:14px}.flashcard-meaning{font-size:18px;font-weight:600}.flashcard-bucket{color:var(--text-dim);text-transform:capitalize;font-size:12px}.flashcard-speaker{justify-content:center;margin-top:8px;display:flex}.srs-buttons{gap:8px;margin-top:14px;display:flex}.srs-buttons .btn{color:#fff;flex:1}.srs-again{background:var(--danger);border-color:var(--danger)}.srs-good{background:#d99a2b;border-color:#d99a2b}.srs-easy{background:var(--success);border-color:var(--success)}.srs-stats{justify-content:center;gap:16px;margin:16px 0;font-size:15px;display:flex}.roleplay-header{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;display:flex}.toggle-english{color:var(--text-dim);align-items:center;gap:6px;font-size:13px;display:flex}.npc-bubble{background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;margin:10px 0 14px;padding:14px}.npc-name{color:var(--text-dim);margin-bottom:6px;font-size:12px}.npc-line-row{align-items:center;gap:8px;display:flex}.npc-thai{color:var(--text-h);font-size:18px;font-weight:700}.npc-en{color:var(--text-dim);margin-top:4px;font-size:14px}.roleplay-options{flex-direction:column;gap:8px;display:flex}.roleplay-option{text-align:left;flex-direction:column;align-items:flex-start;gap:2px;display:flex}.option-thai{font-weight:700}.option-en{color:var(--text-dim);font-size:12px}.roleplay-correction{margin-top:10px}.roleplay-list{flex-direction:column;gap:10px;display:flex}.roleplay-card{background:var(--bg-elevated);border:1px solid var(--border);text-align:left;cursor:pointer;border-radius:14px;padding:14px}.roleplay-card-locked{opacity:.5;cursor:not-allowed}.roleplay-card-title{margin-bottom:4px;font-weight:700}.roleplay-card-intro{color:var(--text-dim);font-size:13px}.roleplay-card-lock{color:var(--accent);margin-top:6px;font-size:12px}.grammar-pattern-box{background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;margin-bottom:16px;padding:14px}.grammar-pattern-label{color:var(--text-dim);font-size:12px}.grammar-pattern{font-family:var(--mono);color:var(--text-h);margin:4px 0;font-size:15px;font-weight:700}.grammar-pattern-note{color:var(--text-dim);font-size:13px}.grammar-rules{flex-direction:column;gap:12px;display:flex}.grammar-rule-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;gap:10px;padding:14px;display:flex}.grammar-rule-num{color:var(--accent);min-width:24px;font-size:20px;font-weight:800}.grammar-example{background:var(--bg);border-radius:10px;margin-top:8px;padding:10px}.grammar-example-thai{font-weight:700}.grammar-example-literal,.grammar-example-meaning{color:var(--text-dim);font-size:13px}.grammar-example-wrong{color:var(--danger);margin-top:6px;font-size:12px}.settings-section{background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;margin-bottom:14px;padding:14px}.settings-row{justify-content:space-between;align-items:center;padding:8px 0;font-size:15px;display:flex}.settings-row select{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:8px;padding:6px 8px;font-size:15px}.settings-note{font-size:13px}