:root{--background:#fafafa;--foreground:#0f172a;--muted:#f1f5f9;--muted-foreground:#64748b;--card:#fff;--border:#e2e8f0;--accent:#0052ff;--accent-secondary:#4d7cff;--accent-foreground:#fff;--accent-gradient:linear-gradient(135deg, #0052ff, #4d7cff);--accent-gradient-horizontal:linear-gradient(to right, #0052ff, #4d7cff);--accent-glow:#0052ff26;--accent-glow-strong:#0052ff40;--success:#10b981;--success-bg:#10b9811a;--success-border:#10b9814d;--warning:#f59e0b;--warning-bg:#f59e0b1a;--warning-border:#f59e0b4d;--danger:#ef4444;--danger-bg:#ef44441a;--danger-border:#ef44444d;--font-display:"Calistoga", Georgia, serif;--font-body:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.5rem;--text-5xl:3.25rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-28:7rem;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:20px;--radius-3xl:24px;--radius-full:9999px;--shadow-xs:0 1px 2px #0000000a;--shadow-sm:0 1px 3px #0000000f;--shadow-md:0 4px 6px #00000012;--shadow-lg:0 10px 15px #00000014;--shadow-xl:0 20px 25px #0000001a;--shadow-accent:0 4px 14px #0052ff40;--shadow-accent-lg:0 8px 24px #0052ff59;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--duration-fast:.15s;--duration-normal:.25s;--duration-slow:.4s;--sidebar-width:260px;--topbar-height:64px;--mobile-nav-height:68px;--content-max-width:1200px;--z-sidebar:40;--z-mobile-nav:40;--z-modal:100;--z-tooltip:110}[data-theme=dark]{--background:#0f172a;--foreground:#f8fafc;--muted:#1e293b99;--muted-foreground:#94a3b8;--card:#0f172ab3;--border:#ffffff14;--accent-glow:#0052ff33;--accent-glow-strong:#0052ff59}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}body{font-family:var(--font-body);font-size:var(--text-base);color:var(--foreground);background-color:var(--background);min-height:100vh;transition:background-color var(--duration-normal) var(--ease-in-out), color var(--duration-normal) var(--ease-in-out);line-height:1.6;overflow-x:hidden}img,svg{max-width:100%;display:block}button{font:inherit;cursor:pointer;background:0 0;border:none}input,textarea,select{font:inherit;color:inherit}a{color:inherit;text-decoration:none}ul,ol{list-style:none}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);letter-spacing:-.02em;color:var(--foreground);font-weight:400;line-height:1.15}h1{font-size:var(--text-5xl)}h2{font-size:var(--text-4xl)}h3{font-size:var(--text-3xl)}h4{font-size:var(--text-2xl)}p{line-height:1.65}.gradient-text{background:var(--accent-gradient-horizontal);color:#0000;-webkit-background-clip:text;background-clip:text}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--muted-foreground)}::selection{background:var(--accent);color:var(--accent-foreground)}.section-label{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);margin-bottom:var(--space-6);background:#0052ff0d;border:1px solid #0052ff4d;display:inline-flex}.section-label .dot{background:var(--accent);border-radius:50%;width:8px;height:8px}.section-label span{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.15em;color:var(--accent);font-weight:500}.gradient-underline{display:inline-block;position:relative}.gradient-underline:after{content:"";background:#0052ff26;border-radius:2px;width:100%;height:8px;position:absolute;bottom:-4px;left:0}.fade-in-up{animation:fadeInUp .7s var(--ease-out) forwards;opacity:0}.dot-texture{position:relative}.dot-texture:before{content:"";opacity:.03;pointer-events:none;background-image:radial-gradient(circle,currentColor 1px,#0000 1px);background-size:32px 32px;position:absolute;inset:0}.radial-glow{position:relative;overflow:hidden}.radial-glow:after{content:"";background:var(--accent);opacity:.04;filter:blur(150px);pointer-events:none;border-radius:50%;width:600px;height:600px;position:absolute;top:-200px;right:-200px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes pulse-ring{0%{box-shadow:0 0 #ef4444b3}70%{box-shadow:0 0 0 14px #ef444400}to{box-shadow:0 0 #ef444400}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes bounce-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-fade-in-up{animation:fadeInUp .7s var(--ease-out) forwards;opacity:0}.animate-fade-in{animation:fadeIn .5s var(--ease-out) forwards;opacity:0}.animate-spin{animation:1s linear infinite spin}.stagger-1{animation-delay:.1s}.stagger-2{animation-delay:.2s}.stagger-3{animation-delay:.3s}.stagger-4{animation-delay:.4s}.stagger-5{animation-delay:.5s}.stagger-6{animation-delay:.6s}.stagger-7{animation-delay:.7s}.stagger-8{animation-delay:.8s}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.app-container{flex-direction:column;min-height:100vh;display:flex}@media (width>=768px){.app-container{flex-direction:row}}.sidebar{background:var(--card);border-bottom:1px solid var(--border);padding:var(--space-4) var(--space-6);z-index:var(--z-sidebar);flex-direction:row;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}@media (width>=768px){.sidebar{width:var(--sidebar-width);border-bottom:none;border-right:1px solid var(--border);height:100vh;padding:var(--space-6) var(--space-6);flex-direction:column;justify-content:flex-start;align-items:stretch;position:fixed}}.brand{align-items:center;gap:var(--space-3);display:flex}.brand-logo{border-radius:var(--radius-lg);background:var(--accent-gradient);width:38px;height:38px;box-shadow:var(--shadow-accent);flex-shrink:0}.brand-name{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:-.02em;background:var(--accent-gradient-horizontal);color:#0000;-webkit-background-clip:text;background-clip:text;font-weight:400}.nav-links{display:none}@media (width>=768px){.nav-links{gap:var(--space-2);margin-top:var(--space-10);flex-direction:column;flex-grow:1;display:flex}}.nav-item{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);color:var(--muted-foreground);font-weight:500;font-size:var(--text-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-in-out);border:1px solid #0000;display:flex;position:relative}.nav-item:hover{color:var(--foreground);background:var(--muted)}.nav-item.active{color:var(--accent);background:var(--accent-glow);border-color:#0052ff33}.nav-item.active:before{content:"";background:var(--accent-gradient);border-radius:0 2px 2px 0;width:3px;height:60%;position:absolute;top:50%;left:0;transform:translateY(-50%)}.sidebar-footer{display:none}@media (width>=768px){.sidebar-footer{gap:var(--space-3);padding-top:var(--space-6);border-top:1px solid var(--border);flex-direction:column;display:flex}}.mobile-nav{height:var(--mobile-nav-height);background:var(--card);border-top:1px solid var(--border);z-index:var(--z-mobile-nav);padding-bottom:env(safe-area-inset-bottom,0);justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}@media (width>=768px){.mobile-nav{display:none}}.mobile-nav-item{color:var(--muted-foreground);cursor:pointer;height:100%;transition:color var(--duration-fast);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-size:.65rem;font-weight:500;display:flex;position:relative}.mobile-nav-item.active{color:var(--accent)}.mobile-nav-item.active:after{content:"";background:var(--accent);border-radius:50%;width:4px;height:4px;position:absolute;top:4px}.main-wrapper{min-height:calc(100vh - var(--mobile-nav-height));padding-bottom:var(--mobile-nav-height);flex-direction:column;flex-grow:1;display:flex}@media (width>=768px){.main-wrapper{margin-left:var(--sidebar-width);height:100vh;padding-bottom:0;overflow-y:auto}}.top-bar{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--border);background:var(--card);z-index:30;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}@media (width>=768px){.top-bar{padding:var(--space-4) var(--space-8)}}.stats-container{gap:var(--space-3);align-items:center;display:flex}.stat-badge{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);border:1px solid var(--border);background:var(--card);font-weight:600;display:flex}.stat-badge.streak{color:var(--warning);border-color:var(--warning-border);background:var(--warning-bg)}.stat-badge.words{color:var(--success);border-color:var(--success-border);background:var(--success-bg)}.level-badge{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-xs);text-transform:capitalize;color:var(--accent);background:var(--accent-glow);border:1px solid #0052ff33;font-weight:600;display:flex}.controls-container{align-items:center;gap:var(--space-3);display:flex}.icon-button{border-radius:var(--radius-md);width:36px;height:36px;color:var(--muted-foreground);background:var(--card);border:1px solid var(--border);transition:all var(--duration-fast) var(--ease-in-out);justify-content:center;align-items:center;display:flex}.icon-button:hover{color:var(--foreground);background:var(--muted);border-color:var(--muted-foreground)}.content-area{padding:var(--space-6);max-width:var(--content-max-width);flex-grow:1;width:100%;margin:0 auto}@media (width>=768px){.content-area{padding:var(--space-8)}}.page-header{margin-bottom:var(--space-8)}.page-title{font-size:var(--text-3xl);margin-bottom:var(--space-2)}@media (width>=768px){.page-title{font-size:var(--text-4xl)}}.page-subtitle{color:var(--muted-foreground);font-size:var(--text-sm);max-width:540px;line-height:1.6}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm);transition:all var(--duration-normal) var(--ease-out)}.card:hover{box-shadow:var(--shadow-md)}.card-elevated{box-shadow:var(--shadow-lg)}.card-elevated:hover{box-shadow:var(--shadow-xl)}.card-featured{background:var(--accent-gradient);border-radius:var(--radius-xl);padding:2px}.card-featured-inner{background:var(--card);border-radius:calc(var(--radius-xl) - 2px);padding:var(--space-6);height:100%}.btn-primary{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:var(--accent-gradient-horizontal);color:var(--accent-foreground);font-weight:600;font-size:var(--text-sm);border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--shadow-sm);transition:all var(--duration-fast) var(--ease-out);border:none;min-height:44px;display:inline-flex}.btn-primary:hover{box-shadow:var(--shadow-accent);filter:brightness(1.1)}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{background:var(--border);color:var(--muted-foreground);cursor:not-allowed;box-shadow:none;filter:none;transform:none}.btn-secondary{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);color:var(--foreground);font-weight:600;font-size:var(--text-sm);border-radius:var(--radius-lg);border:1px solid var(--border);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);background:0 0;min-height:44px;display:inline-flex}.btn-secondary:hover{background:var(--muted);border-color:#0052ff4d}.btn-ghost{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);color:var(--muted-foreground);font-weight:500;font-size:var(--text-sm);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);background:0 0;border:none;display:inline-flex}.btn-ghost:hover{color:var(--foreground);background:var(--muted)}.btn-circle{background:var(--card);border:1px solid var(--border);width:44px;height:44px;color:var(--foreground);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);border-radius:50%;justify-content:center;align-items:center;display:flex}.btn-circle:hover{background:var(--muted);border-color:var(--accent);color:var(--accent)}.btn-danger{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-border);font-weight:600;font-size:var(--text-sm);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);width:100%;display:inline-flex}.btn-danger:hover{background:#ef444433}.form-input,.form-select,.form-textarea{width:100%;padding:var(--space-3) var(--space-4);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--foreground);font-size:var(--text-sm);transition:all var(--duration-fast) var(--ease-in-out)}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);outline:none}.form-input::placeholder,.form-textarea::placeholder{color:var(--muted-foreground);opacity:.6}.form-label{font-size:var(--text-xs);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-2);font-weight:600;display:block}.form-group{margin-bottom:var(--space-5)}.chat-layout{gap:var(--space-6);grid-template-columns:1fr;height:calc(100vh - 180px);display:grid}@media (width>=1024px){.chat-layout{grid-template-columns:260px 1fr}}.scenarios-panel{gap:var(--space-3);padding-bottom:var(--space-2);scrollbar-width:none;flex-direction:row;display:flex;overflow-x:auto}.scenarios-panel::-webkit-scrollbar{display:none}@media (width>=1024px){.scenarios-panel{flex-direction:column;overflow:visible auto}}.scenario-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-4);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);min-width:200px;position:relative;overflow:hidden}@media (width>=1024px){.scenario-card{min-width:0}}.scenario-card:hover{box-shadow:var(--shadow-md);border-color:#0052ff33}.scenario-card.active{border-color:var(--accent);background:var(--accent-glow);box-shadow:var(--shadow-accent)}.scenario-card.active:before{content:"";background:var(--accent-gradient);width:3px;position:absolute;top:0;bottom:0;left:0}.scenario-icon{margin-bottom:var(--space-2);justify-content:center;align-items:center;display:flex}.scenario-title{font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);margin-bottom:var(--space-1);color:var(--foreground)}.scenario-desc{font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.4}.chat-main{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);flex-direction:column;display:flex;position:relative;overflow:hidden}.chat-header{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--border);background:var(--card);justify-content:space-between;align-items:center;display:flex}.chat-tutor-info{align-items:center;gap:var(--space-3);display:flex}.tutor-avatar{background:var(--accent-gradient);color:#fff;width:40px;height:40px;box-shadow:var(--shadow-accent);border-radius:50%;justify-content:center;align-items:center;display:flex}.tutor-name{font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);color:var(--foreground)}.tutor-role{font-size:var(--text-xs);color:var(--muted-foreground)}.chat-messages{padding:var(--space-6);gap:var(--space-5);flex-direction:column;flex-grow:1;display:flex;overflow-y:auto}.message{max-width:80%;animation:fadeInUp .3s var(--ease-out) forwards;flex-direction:column;display:flex}.message.tutor{align-self:flex-start}.message.user{align-self:flex-end}.bubble{padding:var(--space-3) var(--space-5);border-radius:var(--radius-xl);font-size:var(--text-sm);box-shadow:var(--shadow-xs);line-height:1.6;position:relative}.tutor .bubble{background:var(--muted);border:1px solid var(--border);border-bottom-left-radius:var(--radius-sm);color:var(--foreground)}.user .bubble{background:var(--accent-gradient-horizontal);color:var(--accent-foreground);border-bottom-right-radius:var(--radius-sm)}.translation-subtext{font-size:var(--text-xs);margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px dashed var(--border)}.tutor .translation-subtext{color:var(--muted-foreground)}.user .translation-subtext{color:#fffc;border-top-color:#fff3}.pronunciation-subtext{font-size:var(--text-xs);color:var(--warning);margin-top:var(--space-1);font-style:italic;font-family:var(--font-mono)}.message-audio-btn{color:var(--muted-foreground);cursor:pointer;padding:var(--space-1);border-radius:var(--radius-md);transition:color var(--duration-fast);opacity:0;background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;right:-36px;transform:translateY(-50%)}.message:hover .message-audio-btn{opacity:1}.message-audio-btn:hover{color:var(--accent)}.correction-box{margin-top:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-xs);background:var(--warning-bg);border:1px solid var(--warning-border);color:var(--warning);align-self:flex-end;width:100%}.correction-header{align-items:center;gap:var(--space-2);margin-bottom:var(--space-1);font-weight:600;display:flex}.chat-input-bar{padding:var(--space-4) var(--space-6);border-top:1px solid var(--border);align-items:center;gap:var(--space-3);background:var(--card);display:flex}.chat-text-input{background:var(--muted);border:1px solid var(--border);color:var(--foreground);padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);font-size:var(--text-sm);transition:border-color var(--duration-fast), box-shadow var(--duration-fast);outline:none;flex-grow:1}.chat-text-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.mic-button{background:var(--accent-gradient-horizontal);color:#fff;cursor:pointer;width:44px;height:44px;transition:all var(--duration-fast) var(--ease-out);box-shadow:var(--shadow-accent);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.mic-button:hover{box-shadow:var(--shadow-accent-lg)}.mic-button.recording{background:var(--danger);box-shadow:none;animation:1.5s infinite pulse-ring}.send-button{background:var(--accent-gradient-horizontal);color:#fff;cursor:pointer;width:44px;height:44px;transition:all var(--duration-fast) var(--ease-out);box-shadow:var(--shadow-accent);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.send-button:hover{box-shadow:var(--shadow-accent-lg)}.send-button:disabled{background:var(--border);color:var(--muted-foreground);cursor:not-allowed;box-shadow:none;transform:none}.alphabet-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(130px,1fr));display:grid}.letter-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-5);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.letter-card:hover{border-color:var(--accent);box-shadow:var(--shadow-accent)}.letter-card:active{transform:scale(.98)}.letter-char{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--accent);margin-bottom:var(--space-1)}.letter-sound{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--warning);margin-bottom:var(--space-2);font-weight:500}.letter-example{font-size:var(--text-sm);color:var(--foreground);font-weight:600}.letter-meaning{font-size:var(--text-xs);color:var(--muted-foreground);margin-top:var(--space-1)}.vocab-layout{gap:var(--space-8);flex-direction:column;display:flex}.deck-selector-section{gap:var(--space-5);flex-direction:column;display:flex}.preset-decks{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.deck-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-5);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);position:relative;overflow:hidden}.deck-card:hover{box-shadow:var(--shadow-md);border-color:#0052ff4d}.deck-card.active{border-color:var(--accent);background:var(--accent-glow);box-shadow:var(--shadow-accent)}.deck-card.active:before{content:"";background:var(--accent-gradient-horizontal);opacity:.03;position:absolute;inset:0}.deck-card-icon{margin-bottom:var(--space-3);color:var(--accent);justify-content:center;align-items:center;display:flex}.deck-title{font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);margin-bottom:var(--space-1);color:var(--foreground)}.deck-count{font-size:var(--text-xs);color:var(--muted-foreground)}.vocab-generator-form{gap:var(--space-3);display:flex}.vocab-gen-input{padding:var(--space-3) var(--space-4);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--foreground);font-size:var(--text-sm);transition:border-color var(--duration-fast), box-shadow var(--duration-fast);outline:none;flex-grow:1}.vocab-gen-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.vocab-gen-btn{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--accent-gradient-horizontal);color:#fff;font-weight:600;font-size:var(--text-sm);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);box-shadow:var(--shadow-accent);white-space:nowrap;border:none;display:inline-flex}.vocab-gen-btn:hover{box-shadow:var(--shadow-accent-lg)}.vocab-gen-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.flashcard-wrapper{align-items:center;gap:var(--space-6);perspective:1200px;z-index:1;flex-direction:column;width:100%;max-width:440px;display:flex;position:relative}.flashcard{width:100%;height:300px;transform-style:preserve-3d;cursor:pointer;transition:transform .6s cubic-bezier(.4,0,.2,1);position:relative}.flashcard.flipped{transform:rotateY(180deg)}.card-face{backface-visibility:hidden;border-radius:var(--radius-xl);border:1px solid var(--border);width:100%;height:100%;padding:var(--space-8);box-shadow:var(--shadow-lg);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute}.card-face.front{background:var(--card)}.card-face.back{background:var(--card);border-color:#0052ff33;transform:rotateY(180deg)}.card-face-label{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-4)}.card-face-label.french{color:var(--muted-foreground)}.card-face-label.english{color:var(--accent);font-weight:600}.card-word{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--foreground);margin-bottom:var(--space-2)}.card-pron{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--warning);margin-bottom:var(--space-6);font-style:italic}.card-translation{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--accent);margin-bottom:var(--space-4)}.card-example-section{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border);width:100%}.card-example{font-size:var(--text-sm);color:var(--foreground);margin-bottom:var(--space-1);font-style:italic}.card-example-translation{font-size:var(--text-xs);color:var(--muted-foreground)}.card-speaker{background:var(--muted);border:1px solid var(--border);color:var(--foreground);width:40px;height:40px;margin-top:var(--space-4);transition:all var(--duration-fast) var(--ease-out);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;display:flex}.card-speaker:hover{background:var(--accent-glow);color:var(--accent);border-color:#0052ff4d}.card-controls{align-items:center;gap:var(--space-6);justify-content:center;width:100%;display:flex}.btn-learned{justify-content:center;align-items:center;gap:var(--space-2);max-width:200px;padding:var(--space-3) var(--space-5);background:var(--accent-gradient-horizontal);color:#fff;font-weight:600;font-size:var(--text-sm);border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);box-shadow:var(--shadow-accent);border:none;flex-grow:1;display:flex}.btn-learned:hover{box-shadow:var(--shadow-accent-lg)}.btn-learned.is-learned{background:var(--success-bg);border:1px solid var(--success-border);color:var(--success);box-shadow:none}.btn-learned.is-learned:hover{background:#10b98133}.card-counter{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted-foreground)}.translate-container{gap:var(--space-6);flex-direction:column;display:flex}.translate-inputs{gap:var(--space-5);grid-template-columns:1fr;display:grid}@media (width>=768px){.translate-inputs{grid-template-columns:1fr 1fr}}.translate-panel{gap:var(--space-3);flex-direction:column;display:flex}.translate-label{font-size:var(--text-xs);color:var(--muted-foreground);justify-content:space-between;align-items:center;font-weight:600;display:flex}.translate-label-hint{font-size:var(--text-xs);font-weight:400}.translate-textarea{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);width:100%;min-height:160px;padding:var(--space-4);color:var(--foreground);font-family:var(--font-body);font-size:var(--text-sm);resize:none;transition:border-color var(--duration-fast), box-shadow var(--duration-fast);outline:none;line-height:1.6}.translate-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.translate-textarea[readonly]{background:var(--muted);cursor:default}.translate-btn-bar{margin-top:var(--space-2);justify-content:flex-end;align-items:center;display:flex}.listen-btn{align-items:center;gap:var(--space-1);color:var(--muted-foreground);cursor:pointer;font-size:var(--text-xs);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);transition:color var(--duration-fast);background:0 0;border:none;font-weight:500;display:inline-flex}.listen-btn:hover{color:var(--accent)}.translate-pronunciation{margin-top:var(--space-1);font-size:var(--text-xs);color:var(--accent);font-style:italic;font-family:var(--font-mono)}.grammar-section{margin-top:var(--space-4)}.grammar-title{font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);margin-bottom:var(--space-4);align-items:center;gap:var(--space-2);color:var(--foreground);display:flex}.breakdown-list{gap:var(--space-3);flex-direction:column;display:flex}.breakdown-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);gap:var(--space-2);transition:all var(--duration-fast) var(--ease-out);flex-direction:column;display:flex}.breakdown-item:hover{border-color:#0052ff33}@media (width>=640px){.breakdown-item{flex-direction:row;justify-content:space-between;align-items:center}}.breakdown-word-group{align-items:center;gap:var(--space-2);display:flex}.breakdown-fr{color:var(--accent);font-weight:700;font-size:var(--text-sm)}.breakdown-en{color:var(--foreground);font-weight:500;font-size:var(--text-sm)}.breakdown-note{font-size:var(--text-xs);color:var(--muted-foreground);max-width:60%;line-height:1.4}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:var(--z-modal);animation:fadeIn .2s var(--ease-out);background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);width:90%;max-width:480px;padding:var(--space-8);box-shadow:var(--shadow-xl);animation:fadeInUp .3s var(--ease-out);position:relative}.modal-close{top:var(--space-6);right:var(--space-6);color:var(--muted-foreground);padding:var(--space-2);border-radius:var(--radius-md);transition:all var(--duration-fast);justify-content:center;align-items:center;display:flex;position:absolute}.modal-close:hover{color:var(--foreground);background:var(--muted)}.modal-title{font-family:var(--font-body);font-size:var(--text-xl);margin-bottom:var(--space-6);align-items:center;gap:var(--space-3);color:var(--foreground);font-weight:700;display:flex}.level-select-grid{gap:var(--space-2);grid-template-columns:repeat(3,1fr);display:grid}.level-btn{background:var(--card);border:1px solid var(--border);color:var(--foreground);padding:var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);text-align:center;font-weight:600}.level-btn:hover{background:var(--muted)}.level-btn.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent)}.alert-banner{background:var(--accent-glow);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);color:var(--accent);font-size:var(--text-xs);border:1px solid #0052ff33;line-height:1.5}.alert-banner-warn{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning)}.settings-actions{gap:var(--space-3);margin-top:var(--space-6);flex-direction:column;display:flex}.loader{border:2px solid var(--border);border-top:2px solid var(--accent);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin;display:inline-block}.loader-sm{border-width:1.5px;width:14px;height:14px}.xp-celebration{z-index:1000;pointer-events:none;animation:xp-pop 1.5s var(--ease-out) forwards;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.xp-celebration-inner{align-items:center;gap:var(--space-2);background:var(--accent-gradient-horizontal);color:#fff;padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;display:flex;box-shadow:0 8px 32px #0052ff66}@keyframes xp-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.5)}20%{opacity:1;transform:translate(-50%,-50%)scale(1.1)}40%{transform:translate(-50%,-50%)scale(1)}80%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-70%)scale(.8)}}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-100vh)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}.confetti{z-index:999;pointer-events:none;border-radius:2px;width:10px;height:10px;animation:2s linear forwards confetti-fall;position:fixed;top:-10px}.confetti:first-child{background:var(--accent);animation-delay:0s;left:10%}.confetti:nth-child(2){background:var(--success);animation-delay:.1s;left:25%}.confetti:nth-child(3){background:var(--warning);animation-delay:.2s;left:40%}.confetti:nth-child(4){background:var(--accent);animation-delay:.15s;left:55%}.confetti:nth-child(5){background:var(--success);animation-delay:.25s;left:70%}.confetti:nth-child(6){background:var(--warning);animation-delay:50ms;left:85%}.hearts-bar{gap:var(--space-1);display:flex}.heart{transition:all .3s var(--ease-out)}.heart.lost{opacity:.3;transform:scale(.8)}@keyframes answer-correct{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes answer-wrong{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.answer-correct{animation:answer-correct .4s var(--ease-out)}.answer-wrong{animation:answer-wrong .4s var(--ease-out)}.corner-accent{background:var(--accent-gradient);border-radius:var(--radius-xl);width:80px;height:80px;box-shadow:var(--shadow-accent-lg);opacity:.9;position:absolute}.inverted-section{background:var(--foreground);color:var(--background);padding:var(--space-16) var(--space-6);position:relative;overflow:hidden}.inverted-section .section-label{background:#ffffff0d;border-color:#ffffff26}.inverted-section .section-label span{color:#ffffffe6}.inverted-section .section-label .dot{background:var(--accent-secondary)}.flashcard-hero{padding:var(--space-6) 0;justify-content:center;display:flex;position:relative}.dot-grid-bg{opacity:.025;pointer-events:none;background-image:radial-gradient(circle,currentColor 1px,#0000 1px);background-size:24px 24px;position:absolute;inset:0}.glow-accent-top-right{background:var(--accent);filter:blur(180px);opacity:.06;pointer-events:none;border-radius:50%;width:500px;height:500px;position:absolute;top:-150px;right:-150px}.glow-accent-bottom-left{background:var(--accent-secondary);filter:blur(150px);opacity:.05;pointer-events:none;border-radius:50%;width:400px;height:400px;position:absolute;bottom:-100px;left:-100px}.section-tabs{gap:var(--space-2);margin-bottom:var(--space-6);scrollbar-width:none;padding-bottom:var(--space-1);display:flex;overflow-x:auto}.section-tabs::-webkit-scrollbar{display:none}.section-tab{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--text-sm);border:1px solid var(--border);background:var(--card);color:var(--muted-foreground);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);white-space:nowrap;font-weight:600}.section-tab:hover{border-color:var(--accent);color:var(--accent)}.section-tab.active{background:var(--accent-gradient-horizontal);color:#fff;box-shadow:var(--shadow-accent);border-color:#0000}.letter-ipa{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--accent);margin-bottom:var(--space-1);font-weight:600}.letter-tip{color:var(--muted-foreground);margin-top:var(--space-1);opacity:.7;font-size:.65rem;line-height:1.3}.vowel-card .letter-char{color:var(--success)}.nasal-card .letter-char{color:var(--warning)}.combo-card .letter-char{color:#8b5cf6}.landing-page{background:var(--background);flex-direction:column;min-height:100vh;display:flex}.landing-hero{padding:var(--space-16) var(--space-6) var(--space-12);text-align:center;position:relative;overflow:hidden}.landing-hero:before{content:"";background:var(--accent);filter:blur(200px);opacity:.08;pointer-events:none;border-radius:50%;width:800px;height:800px;position:absolute;top:-200px;left:50%;transform:translate(-50%)}.landing-logo{border-radius:var(--radius-2xl);background:var(--accent-gradient);width:72px;height:72px;box-shadow:var(--shadow-accent-lg);margin:0 auto var(--space-6);justify-content:center;align-items:center;display:flex}.landing-title{font-family:var(--font-display);font-size:var(--text-4xl);margin-bottom:var(--space-4)}@media (width>=768px){.landing-title{font-size:var(--text-5xl)}}.landing-subtitle{color:var(--muted-foreground);font-size:var(--text-lg);max-width:480px;margin:0 auto var(--space-8);line-height:1.6}.level-selection{padding:var(--space-8) var(--space-6);width:100%;max-width:640px;margin:0 auto}.level-selection-title{font-family:var(--font-body);font-weight:700;font-size:var(--text-xl);text-align:center;margin-bottom:var(--space-2);color:var(--foreground)}.level-selection-subtitle{text-align:center;color:var(--muted-foreground);font-size:var(--text-sm);margin-bottom:var(--space-8)}.level-cards{gap:var(--space-4);grid-template-columns:1fr;display:grid}@media (width>=640px){.level-cards{grid-template-columns:1fr 1fr}}.level-card{background:var(--card);border:2px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-6);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);text-align:left;position:relative;overflow:hidden}.level-card:hover{border-color:var(--accent);box-shadow:var(--shadow-accent);transform:translateY(-2px)}.level-card.selected{border-color:var(--accent);background:var(--accent-glow);box-shadow:var(--shadow-accent)}.level-card.selected:after{content:"✓";top:var(--space-3);right:var(--space-3);background:var(--accent-gradient-horizontal);color:#fff;width:24px;height:24px;font-size:var(--text-xs);border-radius:50%;justify-content:center;align-items:center;font-weight:700;display:flex;position:absolute}.level-card-icon{border-radius:var(--radius-lg);width:48px;height:48px;margin-bottom:var(--space-4);justify-content:center;align-items:center;font-size:24px;display:flex}.level-card-icon.beginner{background:#10b9811a}.level-card-icon.intermediate{background:#f59e0b1a}.level-card-icon.advanced{background:#ef44441a}.level-card-icon.expert{background:#8b5cf61a}.level-card-title{font-weight:700;font-size:var(--text-lg);color:var(--foreground);margin-bottom:var(--space-1)}.level-card-cefr{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--accent);margin-bottom:var(--space-2);font-weight:600}.level-card-desc{font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.5}.landing-start-btn{width:100%;max-width:320px;margin:var(--space-8) auto 0;padding:var(--space-4) var(--space-8);background:var(--accent-gradient-horizontal);color:#fff;font-weight:700;font-size:var(--text-lg);border-radius:var(--radius-full);cursor:pointer;box-shadow:var(--shadow-accent-lg);transition:all var(--duration-fast) var(--ease-out);border:none;display:block}.landing-start-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.landing-start-btn:disabled{opacity:.5;cursor:not-allowed;filter:none;transform:none}.lesson-path-container{padding:var(--space-8) var(--space-6);width:100%;max-width:480px;margin:0 auto}.lesson-path-header{text-align:center;margin-bottom:var(--space-8)}.lesson-path-title{font-family:var(--font-display);font-size:var(--text-2xl);margin-bottom:var(--space-2)}.lesson-path-subtitle{color:var(--muted-foreground);font-size:var(--text-sm)}.lesson-path{align-items:center;gap:var(--space-3);padding:var(--space-4) 0;flex-direction:column;display:flex;position:relative}.lesson-path:before{content:"";background:var(--border);z-index:0;border-radius:2px;width:3px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.lesson-node{z-index:1;align-items:center;gap:var(--space-4);width:100%;max-width:360px;display:flex;position:relative}.lesson-node:nth-child(odd){flex-direction:row}.lesson-node:nth-child(2n){flex-direction:row-reverse}.lesson-node-circle{width:56px;height:56px;font-weight:700;font-size:var(--text-lg);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);border:3px solid var(--border);background:var(--card);color:var(--muted-foreground);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.lesson-node-circle.completed{background:var(--success);border-color:var(--success);color:#fff;box-shadow:0 4px 12px #10b9814d}.lesson-node-circle.current{background:var(--accent-gradient-horizontal);border-color:var(--accent);color:#fff;box-shadow:var(--shadow-accent-lg);animation:2s infinite pulse-ring}.lesson-node-circle.locked{opacity:.4;cursor:not-allowed}.lesson-node-info{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);flex:1}.lesson-node-info:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}.lesson-node-info.locked{opacity:.5;cursor:not-allowed}.lesson-node-title{font-weight:600;font-size:var(--text-sm);color:var(--foreground);margin-bottom:2px}.lesson-node-meta{font-size:var(--text-xs);color:var(--muted-foreground)}.lesson-node-xp{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--accent);font-weight:600}.lesson-player{max-width:540px;padding:var(--space-6);margin:0 auto}.lesson-progress-bar{background:var(--muted);border-radius:var(--radius-full);width:100%;height:8px;margin-bottom:var(--space-8);overflow:hidden}.lesson-progress-fill{background:var(--accent-gradient-horizontal);border-radius:var(--radius-full);height:100%;transition:width .4s var(--ease-out)}.lesson-question{text-align:center;margin-bottom:var(--space-8)}.lesson-question-prompt{font-size:var(--text-sm);color:var(--muted-foreground);margin-bottom:var(--space-3);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.lesson-question-text{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--foreground);margin-bottom:var(--space-2)}.lesson-question-hint{font-size:var(--text-sm);color:var(--muted-foreground);font-style:italic}.lesson-options{gap:var(--space-3);margin-bottom:var(--space-8);flex-direction:column;display:flex}.lesson-option{width:100%;padding:var(--space-4) var(--space-5);background:var(--card);border:2px solid var(--border);border-radius:var(--radius-lg);color:var(--foreground);font-size:var(--text-base);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);text-align:left;font-weight:500}.lesson-option:hover,.lesson-option.selected{border-color:var(--accent);background:var(--accent-glow)}.lesson-option.correct{border-color:var(--success);background:var(--success-bg);color:var(--success)}.lesson-option.incorrect{border-color:var(--danger);background:var(--danger-bg);color:var(--danger)}.lesson-option:disabled{cursor:default;opacity:.7}.lesson-option:disabled:hover{border-color:var(--border);background:var(--card)}.lesson-feedback{text-align:center;padding:var(--space-4);border-radius:var(--radius-lg);margin-bottom:var(--space-6);font-weight:600}.lesson-feedback.correct{background:var(--success-bg);border:1px solid var(--success-border);color:var(--success)}.lesson-feedback.incorrect{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger)}.lesson-continue-btn{width:100%;padding:var(--space-4);background:var(--accent-gradient-horizontal);color:#fff;font-weight:700;font-size:var(--text-base);border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--shadow-accent);transition:all var(--duration-fast) var(--ease-out);border:none;display:block}.lesson-continue-btn:hover{box-shadow:var(--shadow-accent-lg);filter:brightness(1.1)}.lesson-continue-btn:disabled{opacity:.5;cursor:not-allowed;filter:none;box-shadow:none;transform:none}.lesson-complete{text-align:center;padding:var(--space-12) var(--space-6)}.lesson-complete-icon{margin-bottom:var(--space-6);animation:xp-pop .6s var(--ease-out);font-size:64px}.lesson-complete-title{font-family:var(--font-display);font-size:var(--text-3xl);margin-bottom:var(--space-4)}.lesson-complete-stats{justify-content:center;gap:var(--space-8);margin-bottom:var(--space-8);display:flex}.lesson-stat{text-align:center}.lesson-stat-value{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--accent)}.lesson-stat-label{font-size:var(--text-xs);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.05em}.lesson-back-btn{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-full);color:var(--muted-foreground);font-size:var(--text-sm);cursor:pointer;transition:all var(--duration-fast);margin-bottom:var(--space-6);background:0 0;font-weight:500;display:inline-flex}.lesson-back-btn:hover{border-color:var(--accent);color:var(--accent)}