@tailwind base;@tailwind components;@tailwind utilities;:root{--color-primary: #7c3aed;--color-primary-dark: #6d28d9;--color-primary-light: #a855f7;--color-primary-neon: #c084fc;--color-secondary: #3730a3;--color-secondary-light: #4f46e5;--color-accent: #1e1b4b;--color-surface: #0f0a1a;--color-surface-elevated: #1a1425;--color-text-primary: #f8fafc;--color-text-secondary: #cbd5e1;--color-text-muted: rgba(248, 250, 252, .55);--color-success: #10B981;--color-error: #EF4444;--color-warning: #F59E0B;--color-info: #3B82F6;--glass-bg: rgba(255, 255, 255, .06);--glass-bg-hover: rgba(255, 255, 255, .1);--glass-bg-active: rgba(255, 255, 255, .14);--glass-border: rgba(255, 255, 255, .12);--glass-blur: blur(12px);--glass-gold: rgba(124, 58, 237, .15);--glass-gold-border: rgba(124, 58, 237, .3);--glass-gold-glow: rgba(124, 58, 237, .15);--font-size-display: clamp(2rem, 5vw + 1rem, 2.5rem);--font-size-h1: clamp(1.5rem, 4vw + .5rem, 1.875rem);--font-size-h2: clamp(1.25rem, 3vw + .5rem, 1.5rem);--font-size-h3: clamp(1.125rem, 2.5vw + .5rem, 1.25rem);--font-size-body-lg: clamp(1.0625rem, 2vw + .5rem, 1.125rem);--font-size-body: clamp(.9375rem, 1.5vw + .5rem, 1rem);--font-size-body-sm: clamp(.875rem, 1.2vw + .5rem, .9375rem);--font-size-caption: clamp(.75rem, 1vw + .5rem, .875rem);--font-size-thai-display: clamp(2.5rem, 6vw + 1rem, 3rem);--font-size-thai-heading: clamp(1.75rem, 4vw + .75rem, 2rem);--font-size-thai-body: clamp(1.125rem, 2vw + .75rem, 1.25rem);--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--line-height-thai: 1.8;--spacing-2xs: 4px;--spacing-xs: 8px;--spacing-sm: 12px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-fluid-sm: clamp(8px, 2vw, 12px);--spacing-fluid-md: clamp(12px, 3vw, 16px);--spacing-fluid-lg: clamp(16px, 4vw, 24px);--spacing-card-padding: clamp(12px, 3vw, 20px);--spacing-page-margin: clamp(12px, 3vw, 16px);--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-2xl: 24px;--radius-3xl: 32px;--radius-full: 9999px;--radius-fluid-card: clamp(16px, 4vw, 24px);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--ease-out-expo: cubic-bezier(.19, 1, .22, 1);--duration-instant: .1s;--duration-fast: .15s;--duration-normal: .2s;--duration-slow: .3s;--duration-slower: .5s;--font-primary: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-thai-classic: "Taviraj", "Trirong", "Pridi", "Thonburi", serif;--font-thai-modern: "Noto Sans Thai", sans-serif;--font-thai: var(--font-thai-classic);--consonant-middle-color: #22ff88;--consonant-high-color: #ff3333;--consonant-low-color: #3399ff}body{margin:0;padding:0;min-height:100vh;min-height:100dvh;background:linear-gradient(-45deg,#1e1b4b,#3730a3,#4c1d95,#6d28d9);font-family:var(--font-primary);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@keyframes goldShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.gold-shimmer{position:relative;overflow:hidden}.gold-shimmer:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(251,191,36,.2) 25%,rgba(251,191,36,.4) 50%,rgba(251,191,36,.2) 75%,transparent 100%);background-size:200% 100%;animation:goldShimmer 2s ease-in-out infinite;pointer-events:none}@keyframes springIn{0%{opacity:0;transform:scale(.9) translateY(10px)}50%{transform:scale(1.02) translateY(-2px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes staggerFadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pageEnter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.spring-in{animation:springIn var(--duration-slow) var(--ease-spring)}.page-enter{animation:pageEnter var(--duration-slow) var(--ease-out-expo)}.stagger-item{opacity:0;animation:staggerFadeIn var(--duration-normal) var(--ease-spring) forwards}.stagger-item:nth-child(1){animation-delay:50ms}.stagger-item:nth-child(2){animation-delay:.1s}.stagger-item:nth-child(3){animation-delay:.15s}.stagger-item:nth-child(4){animation-delay:.2s}.stagger-item:nth-child(5){animation-delay:.25s}.stagger-item:nth-child(6){animation-delay:.3s}.stagger-item:nth-child(7){animation-delay:.35s}.stagger-item:nth-child(8){animation-delay:.4s}.thai-text{font-family:var(--font-thai);font-feature-settings:"ccmp" 1,"liga" 1,"calt" 1;font-variant-ligatures:common-ligatures;line-height:var(--line-height-thai);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;unicode-bidi:isolate;writing-mode:horizontal-tb}.thai-text-classic{font-family:var(--font-thai-classic);font-feature-settings:"ccmp" 1,"liga" 1,"calt" 1;font-variant-ligatures:common-ligatures;line-height:var(--line-height-thai)}.thai-text-modern{font-family:var(--font-thai-modern);font-feature-settings:"ccmp" 1,"liga" 1,"calt" 1;font-variant-ligatures:common-ligatures;line-height:var(--line-height-thai)}.haas-text{font-family:var(--font-primary);font-feature-settings:normal;line-height:var(--line-height-relaxed)}body.color-consonants-by-class .thai-consonant-middle{color:var(--consonant-middle-color)!important}body.color-consonants-by-class .thai-consonant-high{color:var(--consonant-high-color)!important}body.color-consonants-by-class .thai-consonant-low{color:var(--consonant-low-color)!important}.glass-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-fluid-card);padding:var(--spacing-card-padding);box-shadow:inset 0 1px #ffffff0d,0 4px 24px #0000001a;transition:all var(--duration-normal) var(--ease-smooth)}.glass-card:active{background:var(--glass-bg-active);transform:scale(.98)}.glass-card--gold{background:var(--glass-gold);border-color:var(--glass-gold-border);box-shadow:inset 0 1px #fbbf2433,0 4px 24px var(--glass-gold-glow)}.glass-card--elevated{background:var(--glass-bg-hover);box-shadow:inset 0 1px #ffffff14,0 8px 32px #0003,0 2px 8px var(--glass-gold-glow)}.bento-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-fluid-md);padding:var(--spacing-page-margin);width:100%;max-width:440px;margin:0 auto}.bento-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-fluid-card);padding:var(--spacing-card-padding);position:relative;overflow:hidden;cursor:pointer;transition:all var(--duration-normal) var(--ease-spring);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:120px}.bento-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(251,191,36,.08) 50%,transparent 60%);opacity:0;transition:opacity var(--duration-normal);pointer-events:none}.bento-card:active{transform:scale(.97) translateY(2px);box-shadow:0 4px 20px var(--glass-gold-glow)}.bento-card:active:before{opacity:1}.bento-card--full{grid-column:span 2;min-height:80px}.bento-card--hero{grid-column:span 2;min-height:100px;background:linear-gradient(135deg,#fbbf2426,#f59e0b1a);border-color:var(--glass-gold-border)}.bento-card--featured{min-height:140px}.bento-icon{width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);font-size:1.5rem}.bento-icon svg{width:1.5rem;height:1.5rem;stroke:var(--color-text-primary);stroke-width:2;fill:none}.bento-title{font-size:var(--font-size-body-lg);font-weight:600;color:var(--color-text-primary);margin:0 0 var(--spacing-2xs) 0}.bento-subtitle{font-size:var(--font-size-caption);color:var(--color-text-secondary);margin:0;opacity:.8}.btn-base{min-height:3.5rem;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-lg);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);color:var(--color-text-primary);font-size:var(--font-size-body);font-weight:500;cursor:pointer;transition:all var(--duration-fast) var(--ease-spring);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.btn-base:active{background:var(--glass-bg-active);transform:scale(.96)}.btn-primary{width:100%;min-height:3.5rem;padding:var(--spacing-md) var(--spacing-lg);background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid rgba(251,191,36,.3);border-radius:var(--radius-lg);color:#fff;font-size:var(--font-size-body-lg);font-weight:600;cursor:pointer;transition:all var(--duration-fast) var(--ease-spring);text-align:center;box-shadow:0 4px 16px #e67e224d}.btn-primary:active{background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary));transform:scale(.96);box-shadow:0 2px 8px #e67e2266}.btn-primary-glass{width:100%;min-height:3.5rem;padding:var(--spacing-md) var(--spacing-lg);background:linear-gradient(135deg,#e67e22b3,#f39c1280);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid rgba(243,156,18,.4);border-radius:var(--radius-lg);color:#fff;font-size:1.125rem;font-weight:600;cursor:pointer;transition:all var(--duration-fast) var(--ease-spring);text-align:center}.btn-primary-glass:active{background:linear-gradient(135deg,#e67e22e6,#f39c12b3);transform:scale(.96)}.selection-button{width:100%;min-height:4rem;padding:var(--spacing-sm);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all var(--duration-fast) var(--ease-spring)}.selection-button:active{background:var(--glass-bg-active);transform:scale(.97)}.selection-button.selected{border-color:var(--color-primary-neon);background:var(--glass-gold)}.word-chip{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-md);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-md);font-size:var(--font-size-body);color:var(--color-text-primary);cursor:pointer;transition:all var(--duration-fast) var(--ease-spring);user-select:none;-webkit-user-select:none}.word-chip:active{transform:scale(.95);background:var(--glass-gold);border-color:var(--glass-gold-border)}.word-chip--selected{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));border-color:var(--color-primary-neon);box-shadow:0 2px 12px #e67e224d}.word-chip--disabled{opacity:.4;cursor:not-allowed}.word-bank{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:center;padding:var(--spacing-md)}.sentence-area{min-height:4rem;padding:var(--spacing-md);background:var(--glass-bg);border:2px dashed var(--glass-border);border-radius:var(--radius-lg);display:flex;flex-wrap:wrap;gap:var(--spacing-sm);align-items:center;justify-content:center;margin-bottom:var(--spacing-lg)}.sentence-area--correct{border-color:var(--color-success);background:#10b9811a}.sentence-area--incorrect{border-color:var(--color-error);background:#ef44441a}.navigation-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:var(--spacing-lg);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-spring)}.navigation-card:active{background:var(--glass-bg-active);transform:scale(.97)}.page-layout{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.page-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xs) var(--spacing-md);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border)}.page-header-title{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center}.page-header-subtitle{font-size:var(--font-size-caption);font-weight:400;color:var(--color-text-secondary);margin-top:-.125rem;margin-bottom:2px;line-height:var(--line-height-tight)}.page-content{flex:1;padding:var(--spacing-page-margin);overflow-y:auto;max-width:440px;margin:0 auto;width:100%}.container{max-width:440px;margin:0 auto;padding:var(--spacing-page-margin)}.header-left-buttons,.header-right-buttons{display:flex;flex-direction:row;align-items:center;gap:8px;flex-shrink:0;min-width:88px}.header-icon-container{flex-shrink:0;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border-radius:var(--radius-md);border:none;outline:none;cursor:pointer;transition:all var(--duration-fast) var(--ease-spring)}.header-icon-container:active{transform:scale(.92);background:#fff3}.header-icon-container svg{width:1.5rem;height:1.5rem;color:var(--color-text-primary);fill:transparent!important;stroke:var(--color-text-primary)!important;stroke-width:2!important}.homepage-icon-container{flex-shrink:0;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;background:#ffffff1f;border-radius:var(--radius-md);border:none;outline:none;margin-left:8px}.lesson-icon-container,.settings-icon-container{flex-shrink:0;width:3.5rem;height:3.5rem;display:flex;align-items:center;justify-content:center;background:#ffffff1f;border-radius:var(--radius-md);border:none;outline:none}.homepage-icon-container svg,.lesson-icon-container svg,.settings-icon-container svg{width:1.5rem;height:1.5rem;color:var(--color-text-primary);stroke:var(--color-text-primary);stroke-width:2;fill:none}.selection-icon-container{flex-shrink:0;width:3.5rem;height:3.5rem;display:flex;align-items:center;justify-content:center;margin-right:var(--spacing-sm)}.selection-icon-container span{font-size:2rem!important;color:var(--color-primary-neon)!important}.audio-button{width:2.5rem;height:2.5rem;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--duration-fast) var(--ease-spring);flex-shrink:0;box-shadow:0 2px 8px #e67e224d}.audio-button:active{transform:scale(.92);background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary))}.number-indicator{width:2rem;height:2rem;border-radius:50%;background:linear-gradient(135deg,var(--color-success),#059669);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--font-size-caption);color:#fff}.category-badge{padding:var(--spacing-xs) var(--spacing-sm);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-sm);font-size:var(--font-size-caption);color:var(--color-text-secondary)}.icon-box{width:3rem;height:3rem;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.5rem}.text-display{font-size:var(--font-size-display);font-weight:700;line-height:var(--line-height-tight);color:var(--color-text-primary)}.text-title{font-size:var(--font-size-body-lg);font-weight:700;color:var(--color-text-primary);margin-top:8px;margin-bottom:8px}.text-subtitle{font-size:var(--font-size-body);font-weight:500;color:var(--color-text-secondary)}.text-body{font-size:var(--font-size-body);font-weight:400;color:var(--color-text-primary);opacity:.9}.text-caption{font-size:var(--font-size-caption);font-weight:400;color:var(--color-text-muted)}.vocab-explanation-title{font-size:var(--font-size-thai-display);font-weight:700;color:var(--color-text-primary);text-align:center;line-height:var(--line-height-tight);margin:0}.exercise-question{font-size:var(--font-size-thai-heading);font-weight:700;color:var(--color-text-primary);text-align:center;margin-bottom:var(--spacing-lg);min-height:45px;display:flex;align-items:center;justify-content:center}.divider{width:100%;height:1px;background:var(--glass-border);margin:var(--spacing-sm) 0}.homepage-horizontal-divider{width:100%;height:1px;background:linear-gradient(to right,transparent,rgba(255,251,235,.3),transparent);margin:var(--spacing-md) 0;flex-shrink:0}.settings-section-divider{width:100%;height:1px;background:linear-gradient(to right,transparent,rgba(255,251,235,.3),transparent);margin:var(--spacing-xl) 0}.homepage-container{width:100%;max-width:440px;margin:0 auto;padding-left:var(--spacing-page-margin);padding-right:var(--spacing-page-margin);padding-bottom:var(--spacing-md);box-sizing:border-box}.homepage-header{padding-top:var(--spacing-lg);padding-bottom:var(--spacing-md);text-align:center;width:100%}.homepage-title{font-size:var(--font-size-h1);font-weight:700;color:var(--color-text-primary);margin:0;text-align:center;display:block;width:100%}.homepage-version-container{padding-bottom:var(--spacing-xl);text-align:center;width:100%}.homepage-version-text{font-size:var(--font-size-caption);color:var(--color-text-muted);margin:0;text-align:center;display:block;width:100%}.homepage-nav-card{width:100%;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:.25rem;min-height:1rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all var(--duration-fast) var(--ease-spring);color:var(--color-text-primary);box-sizing:border-box}.homepage-nav-card:active{background:var(--glass-bg-active);transform:scale(.97)}.homepage-nav-title{font-size:var(--font-size-body-lg);font-weight:600;color:var(--color-text-primary);margin-bottom:.0625rem;line-height:var(--line-height-tight)}.homepage-nav-subtitle{font-size:var(--font-size-body-sm);color:var(--color-text-secondary);line-height:var(--line-height-tight)}.homepage-nav-separator{width:2px;height:3rem;background:linear-gradient(to bottom,transparent,rgba(255,251,235,.5),transparent);border-radius:1px;flex-shrink:0}.homepage-nav-arrow-container{display:flex;flex-direction:row;align-items:center;justify-content:space-around;width:3rem;margin-right:var(--spacing-sm);flex-shrink:0}.homepage-nav-arrow{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);flex-shrink:0}.vocab-number-badge{width:2.5rem!important;height:2.5rem!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important;background:linear-gradient(135deg,var(--color-success),#059669)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;border:1px solid rgba(255,255,255,.2)!important}.vocab-number-badge span{color:#fff!important;font-size:var(--font-size-caption)!important;font-weight:700!important;line-height:1!important}.vocab-audio-button{width:2.5rem!important;height:2.5rem!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light))!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;border:1px solid rgba(255,255,255,.2)!important;transition:all var(--duration-fast) var(--ease-spring)!important;cursor:pointer!important;position:absolute!important;top:var(--spacing-sm)!important;right:var(--spacing-sm)!important}.vocab-audio-button:active{transform:scale(.92)!important}.vocab-content-container{width:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important}.chat-container{width:100%;min-height:400px;max-height:600px;overflow-y:auto;overflow-x:hidden;padding:var(--spacing-lg);padding-top:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-md);scroll-behavior:smooth;box-sizing:border-box}.chat-bubble{max-width:80%;padding:var(--spacing-md);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);display:flex;flex-direction:column;gap:var(--spacing-sm);position:relative;margin-top:.1rem}.chat-bubble-left{align-self:flex-start;background:#e67e2226;border-radius:1rem 1rem 1rem .25rem;margin-left:var(--spacing-sm);margin-right:auto}.chat-bubble-right{align-self:flex-end;background:#fbbf2426;border-radius:1.25rem 1.25rem .25rem;margin-left:auto;margin-right:var(--spacing-sm)}.chat-badge{width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff;position:absolute;top:-.5rem}.chat-badge-left{left:.75rem;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark))}.chat-badge-right{right:.75rem;background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary-neon))}.chat-bubble-thai{font-size:var(--font-size-body-lg);font-weight:600;color:var(--color-text-primary);line-height:var(--line-height-normal)}.chat-bubble-translation{font-size:var(--font-size-body-sm);color:var(--color-text-secondary);line-height:1.4}.progress-bar{width:100%;height:8px;background:var(--glass-bg);border-radius:var(--radius-full);overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-neon));border-radius:var(--radius-full);transition:width var(--duration-slow) var(--ease-out-expo)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn var(--duration-slow) var(--ease-smooth)}@keyframes fadeSlideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes fadeSlideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.fade-slide-in-left{animation:fadeSlideInLeft var(--duration-slow) var(--ease-smooth)}.fade-slide-in-right{animation:fadeSlideInRight var(--duration-slow) var(--ease-smooth)}.pulse-animation{animation:pulse 2s ease-in-out infinite}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#fffbeb0d;border-radius:3px}::-webkit-scrollbar-thumb{background:#fffbeb33;border-radius:3px}*:focus-visible{outline:2px solid var(--color-primary-neon);outline-offset:2px}@supports (padding: max(0px)){.page-layout{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.page-header{padding-top:max(var(--spacing-sm),env(safe-area-inset-top));padding-bottom:var(--spacing-sm)}.page-content{padding-bottom:max(var(--spacing-md),env(safe-area-inset-bottom))}}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.w-full{width:100%}.h-full{height:100%}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}.lesson-page{min-height:100vh;display:flex;flex-direction:column}.lesson-step{min-height:100vh;display:flex;flex-direction:column;padding:var(--spacing-page-margin);padding-bottom:calc(var(--spacing-page-margin) + env(safe-area-inset-bottom,0))}.lesson-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) 0;margin-bottom:var(--spacing-md)}.lesson-title{font-size:var(--font-size-h2);font-weight:600;color:var(--color-text-primary);margin:0;flex:1;text-align:center}.header-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--color-text-primary);cursor:pointer;transition:all var(--duration-fast) var(--ease-spring)}.header-btn:active{background:var(--glass-bg-active);transform:scale(.95)}.header-spacer{width:44px}.lesson-content{flex:1;display:flex;flex-direction:column;gap:var(--spacing-md);overflow-y:auto}.lesson-footer{padding:var(--spacing-md) 0;margin-top:auto}.welcome-card{text-align:center;padding:var(--spacing-xl) var(--spacing-lg)!important}.welcome-icon{font-size:3rem;margin-bottom:var(--spacing-md)}.welcome-title{font-size:var(--font-size-h1);font-weight:700;color:var(--color-text-primary);margin:0 0 var(--spacing-sm) 0}.welcome-description{font-size:var(--font-size-body);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin:0}.goals-card{padding:var(--spacing-lg)!important}.card-title{font-size:var(--font-size-body-lg);font-weight:600;color:var(--color-text-primary);margin:0 0 var(--spacing-md) 0}.goals-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-sm)}.goal-item{display:flex;align-items:flex-start;gap:var(--spacing-sm)}.goal-check{color:var(--color-success);font-weight:700;flex-shrink:0}.goal-text{color:var(--color-text-secondary);line-height:var(--line-height-normal)}.preview-card{text-align:center;padding:var(--spacing-lg)!important}.preview-count{color:var(--color-text-secondary);margin:0 0 var(--spacing-md) 0}.preview-words{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-xs)}.preview-word{padding:var(--spacing-xs) var(--spacing-sm);background:var(--glass-gold);border:1px solid var(--glass-gold-border);border-radius:var(--radius-full);font-size:var(--font-size-body-sm);color:var(--color-primary-neon)}.preview-more{padding:var(--spacing-xs) var(--spacing-sm);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-full);font-size:var(--font-size-body-sm);color:var(--color-text-muted)}.vocab-progress{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.progress-text{font-size:var(--font-size-caption);color:var(--color-text-secondary);white-space:nowrap}.progress-bar{flex:1;height:4px;background:var(--glass-bg);border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-neon));border-radius:var(--radius-full);transition:width var(--duration-normal) var(--ease-smooth)}.vocab-content{gap:var(--spacing-md)}.vocab-main-card{text-align:center;padding:var(--spacing-xl) var(--spacing-lg)!important}.vocab-thai{font-size:var(--font-size-thai-display);font-weight:600;color:var(--color-primary-neon);margin-bottom:var(--spacing-xs);line-height:var(--line-height-thai)}.vocab-haas-subtitle{font-size:var(--font-size-body-lg);color:var(--color-text-secondary);margin-bottom:var(--spacing-md)}.vocab-translation{font-size:var(--font-size-h2);color:var(--color-text-primary);font-weight:500}.vocab-category{display:inline-block;margin-top:var(--spacing-md);padding:var(--spacing-xs) var(--spacing-sm);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-full);font-size:var(--font-size-caption);color:var(--color-text-muted)}.explanations-container{display:flex;flex-direction:column;gap:var(--spacing-sm)}.explanation-card{padding:var(--spacing-md)!important}.explanation-header{margin-bottom:var(--spacing-sm)}.explanation-type{font-size:var(--font-size-caption);font-weight:600;color:var(--color-primary);text-transform:uppercase;letter-spacing:.5px}.explanation-text{font-size:var(--font-size-body);color:var(--color-text-secondary);line-height:var(--line-height-relaxed)}.explanation-text.examples-list{white-space:pre-wrap}.vocab-dots{display:flex;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-md) 0}.vocab-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--glass-border);border:none;cursor:pointer;transition:all var(--duration-fast) var(--ease-spring)}.vocab-dot.active{width:24px;background:var(--color-primary)}.vocab-footer{display:flex;gap:var(--spacing-sm)}.overview-content{padding-bottom:var(--spacing-md)}.overview-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-md)}.vocab-card{position:relative;padding:var(--spacing-lg)!important;min-height:140px}.vocab-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-sm)}.vocab-number{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--color-success);color:#fff;border-radius:var(--radius-full);font-size:var(--font-size-caption);font-weight:600}.audio-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast) var(--ease-spring)}.audio-btn:active{background:var(--glass-bg-active);transform:scale(.95)}.vocab-card-content{text-align:center}.vocab-thai-text{font-size:var(--font-size-thai-heading);color:var(--color-primary-neon);margin-bottom:var(--spacing-2xs);line-height:var(--line-height-thai)}.vocab-haas-text{font-size:var(--font-size-body);color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}.vocab-translation-text{font-size:var(--font-size-body-lg);color:var(--color-text-primary)}.vocab-card-footer{position:absolute;bottom:var(--spacing-sm);left:50%;transform:translate(-50%)}.vocab-tag{font-size:var(--font-size-caption);color:var(--color-text-muted);padding:var(--spacing-2xs) var(--spacing-sm);background:var(--glass-bg);border-radius:var(--radius-full)}.gender-toggle{display:flex;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:4px;margin-bottom:var(--spacing-md)}.toggle-btn{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--font-size-body-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-spring)}.toggle-btn.active{background:var(--color-primary);color:#fff;font-weight:600}.sentences-content{gap:var(--spacing-md)}.sentence-card{position:relative;padding:var(--spacing-lg)!important;min-height:120px}.sentence-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-sm)}.sentence-number{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--color-success);color:#fff;border-radius:var(--radius-full);font-size:var(--font-size-caption);font-weight:600}.sentence-content{text-align:center;margin-bottom:var(--spacing-md)}.sentence-thai{font-size:var(--font-size-thai-body);color:var(--color-primary-neon);margin-bottom:var(--spacing-xs);line-height:var(--line-height-thai)}.sentence-haas{font-size:var(--font-size-body);color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}.sentence-translation{font-size:var(--font-size-body);color:var(--color-text-primary)}.sentence-vocab{margin-top:var(--spacing-md)}.vocab-divider{height:1px;background:var(--glass-border);margin-bottom:var(--spacing-sm)}.vocab-used{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-xs)}.vocab-chip{padding:var(--spacing-2xs) var(--spacing-sm);background:var(--glass-gold);border:1px solid var(--glass-gold-border);border-radius:var(--radius-full);font-size:var(--font-size-caption);color:var(--color-primary-neon)}.exercise-runner{background:transparent}.exercise-loading{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-md)}.loading-spinner{width:40px;height:40px;border:3px solid var(--glass-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}.exercise-progress{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.exercise-content{flex:1}.exercise-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md)}.exercise-card.correct{border-color:var(--color-success);box-shadow:0 0 20px #10b98133}.exercise-card.incorrect{border-color:var(--color-error);box-shadow:0 0 20px #ef444433}.exercise-card.error{border-color:var(--color-warning, #f59e0b);box-shadow:0 0 20px #f59e0b33}.exercise-error{text-align:center;padding:var(--spacing-xl)}.exercise-error .error-icon{font-size:3rem;display:block;margin-bottom:var(--spacing-md)}.exercise-error .error-text{color:var(--color-text-secondary);margin-bottom:var(--spacing-lg)}.exercise-prompt{text-align:center}.exercise-type-badge{display:inline-block;padding:var(--spacing-xs) var(--spacing-sm);background:var(--glass-gold);border:1px solid var(--glass-gold-border);border-radius:var(--radius-full);font-size:var(--font-size-caption);font-weight:500;color:var(--color-primary-neon);margin-bottom:var(--spacing-sm)}.prompt-text{font-size:var(--font-size-body-lg);color:var(--color-text-primary);margin:0}.gender-indicator{display:block;margin-top:var(--spacing-xs);font-size:1.5rem}.sentence-area{min-height:80px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-md)!important}.placeholder-text{color:var(--color-text-muted);font-size:var(--font-size-body-sm);text-align:center;margin:0}.built-sentence,.word-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-xs)}.word-chip{padding:var(--spacing-sm) var(--spacing-md);background:var(--glass-bg);border:2px solid var(--glass-border);border-radius:var(--radius-lg);font-size:var(--font-size-body);color:var(--color-text-primary);cursor:pointer;transition:all var(--duration-fast) var(--ease-spring)}.word-chip:active{transform:scale(.95)}.word-chip.selected{background:var(--glass-gold);border-color:var(--color-primary);color:var(--color-primary-neon)}.word-chip.available:hover{background:var(--glass-bg-hover)}.sentence-with-blank{font-size:var(--font-size-thai-body);color:var(--color-text-primary);text-align:center;line-height:var(--line-height-thai)}.sentence-part{color:var(--color-text-primary)}.blank-slot{display:inline-block;min-width:80px;padding:var(--spacing-xs) var(--spacing-sm);background:var(--glass-bg);border:2px dashed var(--glass-border);border-radius:var(--radius-md);color:var(--color-text-muted);margin:0 var(--spacing-xs)}.blank-slot.filled{border-style:solid;border-color:var(--color-primary);color:var(--color-primary-neon)}.blank-slot.correct{border-color:var(--color-success);color:var(--color-success)}.blank-slot.incorrect{border-color:var(--color-error);color:var(--color-error)}.options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}.option-btn{padding:var(--spacing-md);background:var(--glass-bg);border:2px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--color-text-primary);font-size:var(--font-size-body);cursor:pointer;transition:all var(--duration-fast) var(--ease-spring);text-align:center}.option-btn:active{transform:scale(.98)}.option-btn.selected{border-color:var(--color-primary);background:var(--glass-gold)}.option-btn.correct{border-color:var(--color-success);background:#10b98133;color:var(--color-success)}.option-btn.incorrect{border-color:var(--color-error);background:#ef444433;color:var(--color-error)}.question-area{text-align:center;padding:var(--spacing-lg)!important}.question-text{font-size:var(--font-size-thai-heading);color:var(--color-primary-neon);line-height:var(--line-height-thai)}.options-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.options-list .option-btn{display:flex;align-items:center;gap:var(--spacing-md);text-align:left}.option-letter{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--glass-bg);border-radius:var(--radius-full);font-weight:600;flex-shrink:0}.option-text{flex:1}.audio-area{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-lg)!important}.play-btn{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md) var(--spacing-lg);background:var(--glass-bg);border:2px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--color-text-primary);cursor:pointer;transition:all var(--duration-fast) var(--ease-spring)}.play-btn:active{transform:scale(.95)}.play-btn.main{background:var(--glass-gold);border-color:var(--color-primary)}.play-btn.playing{animation:pulse 1s infinite}.play-icon{font-size:1.5rem}.play-label{font-size:var(--font-size-caption)}.play-count{font-size:var(--font-size-caption);color:var(--color-text-muted)}.input-area{width:100%}.text-input{width:100%;padding:var(--spacing-md);background:var(--glass-bg);border:2px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--color-text-primary);font-size:var(--font-size-body-lg);text-align:center}.text-input:focus{outline:none;border-color:var(--color-primary)}.text-input.correct{border-color:var(--color-success)}.text-input.incorrect{border-color:var(--color-error)}.feedback-area{padding:var(--spacing-md);border-radius:var(--radius-lg);text-align:center;animation:slideIn var(--duration-normal) var(--ease-spring)}.feedback-area.correct{background:#10b98133;border:1px solid var(--color-success)}.feedback-area.incorrect{background:#ef444433;border:1px solid var(--color-error)}.feedback-correct,.feedback-incorrect{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.feedback-icon{font-size:1.5rem}.feedback-correct .feedback-icon{color:var(--color-success)}.feedback-incorrect .feedback-icon{color:var(--color-error)}.feedback-content{display:flex;flex-direction:column;gap:var(--spacing-xs)}.correct-answer{font-size:var(--font-size-body-sm);color:var(--color-text-secondary)}.exercise-actions{display:flex;gap:var(--spacing-sm)}.results-content{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--spacing-lg)}.results-card{text-align:center;padding:var(--spacing-xl) var(--spacing-lg)!important}.results-icon{font-size:4rem;margin-bottom:var(--spacing-md)}.results-title{font-size:var(--font-size-h1);font-weight:700;color:var(--color-text-primary);margin:0 0 var(--spacing-lg) 0}.results-score{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg)}.score-percentage{font-size:3rem;font-weight:700;color:var(--color-primary-neon)}.score-details{font-size:var(--font-size-body);color:var(--color-text-secondary)}.results-breakdown{display:flex;justify-content:center;gap:var(--spacing-lg)}.result-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--glass-bg);border-radius:var(--radius-lg)}.result-item.correct .result-icon{color:var(--color-success)}.result-item.incorrect .result-icon{color:var(--color-error)}.result-value{font-weight:600;color:var(--color-text-primary)}.complete-content{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--spacing-lg)}.complete-celebration{text-align:center;position:relative}.celebration-icon{font-size:5rem;animation:bounce 1s infinite}.confetti-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.confetti{position:absolute;width:10px;height:10px;background:var(--color-primary-neon);top:-10px;left:var(--x);animation:confetti-fall 3s ease-out forwards;animation-delay:var(--delay);transform:rotate(var(--rotation))}.confetti:nth-child(odd){background:var(--color-success)}.complete-card{text-align:center;padding:var(--spacing-xl) var(--spacing-lg)!important}.complete-badge{position:relative;width:80px;height:80px;margin:0 auto var(--spacing-lg);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-neon));border-radius:var(--radius-full)}.badge-number{font-size:2rem;font-weight:700;color:#fff}.badge-check{position:absolute;bottom:-5px;right:-5px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--color-success);border-radius:var(--radius-full);color:#fff;font-weight:700}.complete-lesson-title{font-size:var(--font-size-h2);font-weight:600;color:var(--color-text-primary);margin:0 0 var(--spacing-md) 0}.complete-message{font-size:var(--font-size-body);color:var(--color-text-secondary);margin:0 0 var(--spacing-lg) 0}.complete-stats{display:flex;justify-content:center;gap:var(--spacing-lg)}.stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.stat-icon{font-size:1.5rem}.stat-value{font-size:var(--font-size-h2);font-weight:700;color:var(--color-text-primary)}.stat-label{font-size:var(--font-size-caption);color:var(--color-text-secondary)}.next-card{padding:var(--spacing-lg)!important}.next-title{font-size:var(--font-size-body-lg);font-weight:600;color:var(--color-text-primary);margin:0 0 var(--spacing-sm) 0}.next-text{font-size:var(--font-size-body);color:var(--color-text-secondary);margin:0}.complete-footer{display:flex;gap:var(--spacing-sm)}.conversation-content{gap:var(--spacing-md)}.conversation-header-card{text-align:center;padding:var(--spacing-lg)!important}.conversation-title{font-size:var(--font-size-h2);font-weight:600;color:var(--color-text-primary);margin:0 0 var(--spacing-sm) 0}.conversation-situation{font-size:var(--font-size-body);color:var(--color-text-secondary);margin:0}.conversation-lines{display:flex;flex-direction:column;gap:var(--spacing-sm)}.conversation-line{padding:var(--spacing-md)!important}.conversation-line.partner-line{margin-right:var(--spacing-lg)}.conversation-line.user-line{margin-left:var(--spacing-lg);background:var(--glass-gold)}.line-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.speaker-name{font-size:var(--font-size-caption);font-weight:600;color:var(--color-primary)}.line-content{text-align:left}.line-thai{font-size:var(--font-size-thai-body);color:var(--color-primary-neon);margin-bottom:var(--spacing-xs);line-height:var(--line-height-thai)}.line-haas{font-size:var(--font-size-body-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}.line-translation{font-size:var(--font-size-body);color:var(--color-text-primary)}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0) rotate(var(--rotation))}to{opacity:0;transform:translateY(300px) rotate(calc(var(--rotation) + 360deg))}}