@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-accent: #1e1b4b;--glass-bg: rgba(255, 255, 255, .1);--glass-bg-hover: rgba(255, 255, 255, .15);--glass-bg-active: rgba(255, 255, 255, .2);--glass-border: rgba(255, 255, 255, .2);--glass-blur: blur(10px);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: .75rem;--spacing-xl: 2rem;--radius-sm: .5rem;--radius-md: 1rem;--radius-lg: 1.25rem;--radius-xl: 1.5rem;--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;background:linear-gradient(135deg,var(--color-secondary) 0%,var(--color-primary) 50%,var(--color-accent) 100%);background-attachment:fixed;font-family:var(--font-primary);color:#fff}.thai-text{font-family:var(--font-thai);font-feature-settings:"ccmp" 1,"liga" 1,"calt" 1;font-variant-ligatures:common-ligatures;line-height:1.8;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:1.8}.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:1.8}.thai-text-looped{font-family:"Noto Serif Thai Looped",serif;font-feature-settings:normal;line-height:1.8;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-ligatures:common-ligatures;font-feature-settings:"ccmp" 1,"liga" 1,"clig" 1}.haas-text{font-family:var(--font-primary);font-feature-settings:normal;line-height:1.6}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-xl);padding:var(--spacing-sm)}.glass-card:active{background:var(--glass-bg-active)}.btn-base{min-height:3.5rem;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);color:#fff;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.btn-base:active{background:var(--glass-bg-active);transform:scale(.98)}.btn-primary-glass{width:100%;min-height:3.5rem;padding:var(--spacing-md) var(--spacing-lg);background:linear-gradient(135deg,#7c3aed99,#a855f766);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid rgba(168,85,247,.4);border-radius:var(--radius-lg);color:#fff;font-size:1.125rem;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}.btn-primary-glass:active{background:linear-gradient(135deg,#7c3aedcc,#a855f799);transform:scale(.98)}.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 .2s}.selection-button:active{background:var(--glass-bg-active);transform:scale(.98)}.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 .2s}.navigation-card:active{background:var(--glass-bg-active);transform:scale(.98)}.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}.audio-button{width:2.5rem;height:2.5rem;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0}.audio-button:active{transform:scale(.95);background:linear-gradient(135deg,#2563eb,#1d4ed8)}.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:.875rem;color:#ffffffe6}.number-indicator{width:2rem;height:2rem;border-radius:50%;background:linear-gradient(135deg,#10b981,#059669);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem}.divider{width:100%;height:1px;background:var(--glass-border);margin:var(--spacing-sm) 0}.text-title{font-size:1rem;font-weight:700;color:#fff;margin-top:8px;margin-bottom:8px}.text-subtitle{font-size:1rem;font-weight:500;color:#fffc}.text-body{font-size:1rem;font-weight:400;color:#ffffffe6}.text-caption{font-size:.875rem;font-weight:400;color:#ffffffb3}.vocab-explanation-title{font-size:2.5rem;font-weight:700;color:#fff;text-align:center;line-height:1.2;margin:0}.exercise-question{font-size:2rem;font-weight:700;color:#fff;text-align:center;margin-bottom:1.5rem;height:45px;display:flex;align-items:center;justify-content:center}.container{max-width:428px;margin:0 auto;padding:var(--spacing-md)}.page-layout{min-height:100vh;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:.875rem;font-weight:400;color:#fffc;margin-top:-.125rem;margin-bottom:2px;line-height:1.2}.page-content{flex:1;padding:var(--spacing-md);overflow-y:auto}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease-out}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}*:focus-visible{outline:2px solid var(--color-primary-neon);outline-offset:2px}.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:.005rem .25rem;min-height:1rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s;color:#fff;box-sizing:border-box}.homepage-nav-title{font-size:1.125rem;font-weight:600;color:#fff;margin-bottom:.0625rem;line-height:1.1}.homepage-nav-subtitle{font-size:.8125rem;color:#fffc;line-height:1.2}.homepage-nav-card:active{background:var(--glass-bg-active);transform:scale(.98)}.homepage-icon-container{flex-shrink:0;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;background:#ffffff26;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:#ffffff26;border-radius:var(--radius-md);border:none;outline:none;margin-left:0}.header-left-buttons .homepage-icon-container{margin-left:0}button.homepage-icon-container,button.lesson-icon-container{border:none;outline:none;cursor:pointer}.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:#ffffff26;border-radius:var(--radius-md);border:none;outline:none;margin-left:0}button.header-icon-container{border:none;outline:none;cursor:pointer}.header-icon-container svg{width:1.5rem;height:1.5rem;color:#fff;fill:transparent!important;stroke:#fff!important;stroke-width:2!important}.header-icon-container svg *{fill:transparent!important;stroke:#fff!important;stroke-width:2!important}.header-icon-container svg path,.header-icon-container svg line,.header-icon-container svg polyline,.header-icon-container svg polygon,.header-icon-container svg rect,.header-icon-container svg circle{fill:transparent!important;stroke:#fff!important}.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)}.header-icon-container{flex-shrink:0;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md)}.homepage-icon-container svg,.lesson-icon-container svg,.settings-icon-container svg{width:1.5rem;height:1.5rem;color:#fff}.page-header .homepage-icon-container svg{fill:transparent!important;stroke:#fff!important;stroke-width:2!important}.page-header .homepage-icon-container svg *{fill:transparent!important;stroke:#fff!important;stroke-width:2!important}.page-header .homepage-icon-container svg path,.page-header .homepage-icon-container svg line,.page-header .homepage-icon-container svg polyline,.page-header .homepage-icon-container svg polygon,.page-header .homepage-icon-container svg rect,.page-header .homepage-icon-container svg circle{fill:transparent!important;stroke:#fff!important}.homepage-icon-container span,.lesson-icon-container span,.settings-icon-container span{line-height:1;font-size:2rem!important}.selection-icon-container span{line-height:1;font-size:2rem!important;color:#4ade80!important}.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:#22c55ecc!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:.875rem!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:#3b82f6cc!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;border:1px solid rgba(255,255,255,.2)!important;transition:all .2s ease!important;cursor:pointer!important;position:absolute!important;top:var(--spacing-sm)!important;right:var(--spacing-sm)!important}.vocab-audio-button:hover{transform:scale(1.05)!important}.vocab-audio-button span{color:#fff!important;font-size:1.125rem!important;line-height:1!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}.vocab-content-container h3,.vocab-content-container p{width:100%!important;text-align:center!important;margin-left:0!important;margin-right:0!important}.vocab-thai-word,.vocab-translation{text-align:center!important;width:100%!important;display:block!important}.vocab-syllable-breakdown{text-align:center!important;width:100%!important;display:block!important;padding-left:.5rem!important;padding-right:.5rem!important}.homepage-nav-separator{width:2px;height:3rem;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.7),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:.5rem;flex-shrink:0;white-space:nowrap}.homepage-nav-arrow{width:1.25rem;height:1.25rem;color:#ffffffb3;flex-shrink:0}.homepage-horizontal-divider{width:100%;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.3),transparent);margin:var(--spacing-md) 0;flex-shrink:0;transform:translateZ(0)}.settings-section-divider{width:100%;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.3),transparent);margin:var(--spacing-xl) 0}.homepage-container{width:100%;padding-left:.75rem;padding-right:.75rem;padding-bottom:1rem;box-sizing:border-box}.homepage-header{padding-top:1rem;padding-bottom:1rem;text-align:center;width:100%}.homepage-title{font-size:1.5rem;font-weight:700;color:#fff;margin:0;text-align:center;display:block;width:100%}.homepage-version-container{padding-bottom:2rem;text-align:center;width:100%}.homepage-version-text{font-size:.875rem;color:#fff9;margin:0;text-align:center;display:block;width:100%}@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))}}.chat-container{width:100%;min-height:400px;max-height:600px;overflow-y:auto;overflow-x:hidden;padding:1.5rem 1.25rem 1.25rem;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:#3b82f626;border-radius:1rem 1rem 1rem .25rem;margin-left:.5rem;margin-right:auto}.chat-bubble-right{align-self:flex-end;background:#22c55e26;border-radius:1.25rem 1.25rem .25rem;margin-left:auto;margin-right:.5rem}.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,#3b82f6,#2563eb)}.chat-badge-right{right:.75rem;background:linear-gradient(135deg,#10b981,#059669)}.chat-bubble-thai{font-size:1.125rem;font-weight:600;color:#fff;line-height:1.5}.chat-bubble-translation{font-size:.875rem;color:#fffc;line-height:1.4}.chat-audio-button{width:2rem;height:2rem;border-radius:50%;background:#fff3;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;position:absolute;top:.5rem;right:.5rem;font-size:.875rem}.chat-audio-button:active{background:#ffffff4d;transform:scale(.95)}@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 .3s ease-out}.fade-slide-in-right{animation:fadeSlideInRight .3s ease-out}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.pulse-animation{animation:pulse 2s ease-in-out infinite}