@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&display=swap";:root,[data-theme=dark]{--primary: #818CF8;--primary-dark: #6366F1;--primary-light: #A5B4FC;--primary-50: #1E1B4B;--primary-100: #312E81;--primary-200: #4338CA;--primary-300: #6366F1;--primary-400: #818CF8;--primary-glow: rgba(129, 140, 248, .4);--secondary: #22D3EE;--secondary-dark: #06B6D4;--secondary-light: #67E8F9;--cta: #FB923C;--cta-dark: #F97316;--cta-light: #FDBA74;--cta-glow: rgba(251, 146, 60, .4);--gold: #FBBF24;--gold-light: rgba(251, 191, 36, .2);--purple: #A78BFA;--purple-light: rgba(167, 139, 250, .2);--pink: #F472B6;--pink-light: rgba(244, 114, 182, .2);--blue: #60A5FA;--blue-light: rgba(96, 165, 250, .2);--success: #4ADE80;--success-light: rgba(74, 222, 128, .2);--success-glow: rgba(74, 222, 128, .4);--warning: #FBBF24;--warning-light: rgba(251, 191, 36, .2);--warning-glow: rgba(251, 191, 36, .4);--danger: #F87171;--danger-light: rgba(248, 113, 113, .2);--danger-glow: rgba(248, 113, 113, .4);--info: #38BDF8;--info-light: rgba(56, 189, 248, .2);--bg-gradient: linear-gradient(135deg, #0F172A 0%, #1E1B4B 50%, #0F172A 100%);--bg-base: #0F172A;--surface: #1E293B;--surface-elevated: #334155;--surface-hover: #334155;--surface-active: #475569;--text-primary: #F8FAFC;--text-secondary: #E2E8F0;--text-muted: #94A3B8;--text-inverse: #0F172A;--border: #334155;--border-light: #475569;--border-strong: #64748B;--clay-shadow: 6px 6px 12px rgba(0, 0, 0, .5), -4px -4px 12px rgba(129, 140, 248, .08), inset 1px 1px 2px rgba(255, 255, 255, .05);--clay-shadow-hover: 8px 8px 16px rgba(0, 0, 0, .6), -6px -6px 16px rgba(129, 140, 248, .12), inset 1px 1px 2px rgba(255, 255, 255, .08);--clay-shadow-pressed: inset 4px 4px 8px rgba(0, 0, 0, .4), inset -2px -2px 6px rgba(129, 140, 248, .05);--clay-border: 2px solid #334155;--glass-bg: rgba(30, 41, 59, .9);--glass-bg-light: rgba(30, 41, 59, .7);--glass-border: rgba(148, 163, 184, .15);--3d-depth: 4px;--3d-shadow: 0 var(--3d-depth) 0 #1E1B4B;--3d-shadow-success: 0 var(--3d-depth) 0 #166534;--3d-shadow-cta: 0 var(--3d-depth) 0 #C2410C;--nav-height: 72px;--bottom-nav-height: 72px;--container-max: 1200px;--content-max: 800px;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: 12px;--radius-md: 16px;--radius-lg: 24px;--radius-xl: 32px;--radius-2xl: 40px;--radius-full: 9999px;--font-heading: "Inter", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--font-chinese: "Noto Sans SC", "Microsoft YaHei", sans-serif;--transition-fast: .15s ease-out;--transition-normal: .2s ease-out;--transition-slow: .3s ease-out;--transition-bounce: .4s cubic-bezier(.34, 1.56, .64, 1);--z-dropdown: 50;--z-sticky: 100;--z-modal: 200;--z-toast: 300;--gray-50: #F8FAFC;--gray-100: #F1F5F9;--gray-200: #E2E8F0;--gray-300: #CBD5E1;--gray-400: #94A3B8;--gray-500: #64748B;--gray-600: #475569;--gray-700: #334155;--gray-800: #1E293B;--gray-900: #0F172A;--dark-surface: #1E293B;--dark-border: #334155}[data-theme=light]{--primary: #6366F1;--primary-dark: #4338CA;--primary-light: #818CF8;--primary-50: #EEF2FF;--primary-100: #E0E7FF;--primary-200: #C7D2FE;--primary-300: #A5B4FC;--primary-400: #818CF8;--primary-glow: rgba(99, 102, 241, .3);--secondary: #06B6D4;--secondary-dark: #0891B2;--secondary-light: #22D3EE;--cta: #F97316;--cta-dark: #EA580C;--cta-light: #FB923C;--cta-glow: rgba(249, 115, 22, .3);--gold: #F59E0B;--gold-light: rgba(245, 158, 11, .15);--purple: #8B5CF6;--purple-light: rgba(139, 92, 246, .15);--pink: #EC4899;--pink-light: rgba(236, 72, 153, .15);--blue: #3B82F6;--blue-light: rgba(59, 130, 246, .15);--success: #22C55E;--success-light: rgba(34, 197, 94, .15);--success-glow: rgba(34, 197, 94, .3);--warning: #F59E0B;--warning-light: rgba(245, 158, 11, .15);--warning-glow: rgba(245, 158, 11, .3);--danger: #EF4444;--danger-light: rgba(239, 68, 68, .15);--danger-glow: rgba(239, 68, 68, .3);--info: #0EA5E9;--info-light: rgba(14, 165, 233, .15);--bg-gradient: linear-gradient(135deg, #F8FAFC 0%, #E0E7FF 50%, #F8FAFC 100%);--bg-base: #F8FAFC;--surface: #FFFFFF;--surface-elevated: #F8FAFC;--surface-hover: #F1F5F9;--surface-active: #E2E8F0;--text-primary: #0F172A;--text-secondary: #334155;--text-muted: #64748B;--text-inverse: #F8FAFC;--border: #E2E8F0;--border-light: #CBD5E1;--border-strong: #94A3B8;--clay-shadow: 4px 4px 8px rgba(15, 23, 42, .1), -2px -2px 8px rgba(255, 255, 255, .8), inset 1px 1px 2px rgba(255, 255, 255, .5);--clay-shadow-hover: 6px 6px 12px rgba(15, 23, 42, .15), -3px -3px 12px rgba(255, 255, 255, .9), inset 1px 1px 2px rgba(255, 255, 255, .6);--clay-shadow-pressed: inset 3px 3px 6px rgba(15, 23, 42, .12), inset -2px -2px 6px rgba(255, 255, 255, .7);--clay-border: 2px solid #E2E8F0;--glass-bg: rgba(255, 255, 255, .8);--glass-bg-light: rgba(255, 255, 255, .6);--glass-border: rgba(148, 163, 184, .2);--3d-depth: 4px;--3d-shadow: 0 var(--3d-depth) 0 #C7D2FE;--3d-shadow-success: 0 var(--3d-depth) 0 #86EFAC;--3d-shadow-cta: 0 var(--3d-depth) 0 #FDBA74;--gray-50: #F8FAFC;--gray-100: #F1F5F9;--gray-200: #E2E8F0;--gray-300: #CBD5E1;--gray-400: #94A3B8;--gray-500: #64748B;--gray-600: #475569;--gray-700: #334155;--gray-800: #1E293B;--gray-900: #0F172A;--dark-surface: #FFFFFF;--dark-border: #E2E8F0}[data-theme=light] html{color-scheme:light}[data-theme=light] body:before{background:radial-gradient(circle,rgba(99,102,241,.15) 0%,transparent 70%)}[data-theme=light] body:after{background:radial-gradient(circle,rgba(6,182,212,.15) 0%,transparent 70%)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{color-scheme:dark;scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--bg-gradient);background-attachment:fixed;color:var(--text-primary);min-height:100vh;line-height:1.6;font-weight:500;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background var(--transition-slow),color var(--transition-normal)}body:before,body:after{content:"";position:fixed;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(80px);opacity:.5;animation:float 20s ease-in-out infinite}body:before{width:600px;height:600px;background:radial-gradient(circle,var(--primary-light) 0%,transparent 70%);top:-200px;right:-200px}body:after{width:500px;height:500px;background:radial-gradient(circle,var(--secondary) 0%,transparent 70%);bottom:-150px;left:-150px;animation-delay:-10s}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}#root,.app{min-height:100vh;display:flex;flex-direction:column;position:relative}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--text-primary);line-height:1.2;letter-spacing:-.01em;font-weight:700}h1{font-size:2.25rem;font-weight:800;margin-bottom:1rem}h2{font-size:1.75rem;font-weight:700;margin-bottom:.75rem}h3{font-size:1.375rem;font-weight:600;margin-bottom:.5rem}h4{font-size:1.125rem;font-weight:600;margin-bottom:.5rem}p{color:var(--text-secondary);font-size:1rem;margin-bottom:.75rem;font-weight:500}.hanzi{font-family:var(--font-chinese);font-size:4rem;font-weight:700;color:var(--text-primary);line-height:1;text-shadow:2px 2px 0 var(--primary-light),4px 4px 0 rgba(13,148,136,.2);transition:text-shadow var(--transition-normal)}.hanzi-large{font-size:5rem}.hanzi-small{font-size:2.5rem}.pinyin{font-family:var(--font-body);font-size:1.5rem;color:var(--primary);font-weight:700;letter-spacing:.02em}.text-gradient{background:linear-gradient(135deg,var(--primary) 0%,var(--cta) 50%,var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 200%;animation:gradientShift 3s ease infinite}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-danger{color:var(--danger)}.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:var(--space-lg)}.container-narrow{max-width:var(--content-max)}.page-header{text-align:center;margin-bottom:var(--space-2xl);padding:var(--space-xl) var(--space-lg);background:var(--surface);border:var(--clay-border);border-radius:var(--radius-xl);box-shadow:var(--clay-shadow)}.page-header h1{font-size:2rem;margin-bottom:.5rem}.page-header p{font-size:1.125rem;color:var(--text-secondary);margin:0}.nav{position:sticky;top:var(--space-md);z-index:var(--z-sticky);margin:var(--space-md);margin-bottom:0}.nav-content{max-width:var(--container-max);margin:0 auto;padding:var(--space-sm) var(--space-md);display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:var(--clay-border);border-radius:var(--radius-xl);box-shadow:var(--clay-shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.nav-logo{display:flex;align-items:center;gap:.75rem;font-family:var(--font-heading);font-weight:800;font-size:1.25rem;color:var(--text-primary);text-decoration:none;cursor:pointer;transition:transform var(--transition-bounce);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);outline:none;border:none;background:transparent}.nav-logo:hover{transform:scale(1.05)}.nav-logo:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.nav-logo-icon{font-size:1.75rem;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);border-radius:var(--radius-md);color:#fff;box-shadow:var(--3d-shadow)}.nav-links{display:flex;gap:.25rem;align-items:center}.nav-link{background:transparent;border:3px solid transparent;cursor:pointer;padding:.625rem 1rem;color:var(--text-muted);font-family:var(--font-body);font-weight:600;font-size:.9375rem;transition:all var(--transition-normal);display:flex;align-items:center;gap:8px;border-radius:var(--radius-lg);outline:none;position:relative}.nav-link:hover{color:var(--text-primary);background:var(--surface-hover);border-color:var(--border-light);transform:translateY(-2px)}.nav-link:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.nav-link.active{color:var(--primary);background:var(--primary-50);border-color:var(--primary-light);box-shadow:var(--clay-shadow);font-weight:700}@media(max-width:768px){.nav{position:fixed;bottom:var(--space-md);top:auto;left:var(--space-md);right:var(--space-md);margin:0}.nav-content{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-2xl)}.nav-logo{display:none}.nav-links{width:100%;justify-content:space-around;gap:0}.nav-link{flex-direction:column;justify-content:center;text-align:center;font-size:.6875rem;padding:.5rem .375rem;flex:1;gap:4px;border-radius:var(--radius-lg);min-width:0}.nav-link svg{width:24px;height:24px}.nav-link span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.nav-link:hover{transform:none;background:transparent}.nav-link.active{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-4px);box-shadow:0 8px 20px var(--primary-glow),var(--3d-shadow)}.nav-link.nav-secondary{display:none}.container{padding:var(--space-md);padding-top:var(--space-lg);padding-bottom:calc(var(--bottom-nav-height) + var(--space-2xl))}}.card{background:var(--surface);border:var(--clay-border);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--clay-shadow);transition:all var(--transition-normal);position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--secondary),var(--cta));opacity:0;transition:opacity var(--transition-normal)}.card-hover{cursor:pointer}.card-hover:hover{transform:translateY(-4px);box-shadow:var(--clay-shadow-hover)}.card-hover:hover:before{opacity:1}.card-hover:active{transform:translateY(0);box-shadow:var(--clay-shadow-pressed)}.card-hover:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.card-compact{padding:var(--space-md)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;font-family:var(--font-body);font-size:1rem;font-weight:700;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);border:3px solid transparent;outline:none;white-space:nowrap;position:relative}.btn:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;border-color:var(--primary-dark);box-shadow:var(--3d-shadow),0 4px 15px var(--primary-glow)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 var(--primary-dark),0 8px 25px var(--primary-glow)}.btn-primary:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 var(--primary-dark),0 2px 10px var(--primary-glow)}.btn-secondary{background:var(--surface);color:var(--text-secondary);border-color:var(--border);box-shadow:var(--clay-shadow)}.btn-secondary:hover:not(:disabled){border-color:var(--primary);color:var(--primary);transform:translateY(-2px);box-shadow:var(--clay-shadow-hover)}.btn-secondary:active:not(:disabled){transform:translateY(0);box-shadow:var(--clay-shadow-pressed)}.btn-ghost{background:transparent;color:var(--text-secondary);border-color:transparent}.btn-ghost:hover:not(:disabled){background:var(--surface-hover);color:var(--text-primary)}.btn-success{background:linear-gradient(135deg,var(--success) 0%,#16A34A 100%);color:#fff;border-color:#16a34a;box-shadow:var(--3d-shadow-success),0 4px 15px var(--success-glow)}.btn-success:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px #16a34a,0 8px 25px var(--success-glow)}.btn-cta{background:linear-gradient(135deg,var(--cta) 0%,var(--cta-dark) 100%);color:#fff;border-color:var(--cta-dark);box-shadow:var(--3d-shadow-cta),0 4px 15px var(--cta-glow);animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{box-shadow:var(--3d-shadow-cta),0 4px 15px var(--cta-glow)}50%{box-shadow:var(--3d-shadow-cta),0 4px 30px var(--cta-glow)}}.btn-cta:hover:not(:disabled){transform:translateY(-2px);animation:none;box-shadow:0 6px 0 var(--cta-dark),0 8px 30px var(--cta-glow)}.btn-sm{padding:.5rem 1rem;font-size:.875rem;border-radius:var(--radius-md)}.btn-lg{padding:1rem 2rem;font-size:1.125rem;border-radius:var(--radius-xl)}.btn-icon{width:48px;height:48px;min-width:48px;padding:0;border-radius:var(--radius-lg)}.btn-icon-sm{width:40px;height:40px;min-width:40px}.input,select{width:100%;padding:.875rem 1.25rem;font-family:var(--font-body);font-size:1rem;font-weight:500;background:var(--surface);border:3px solid var(--border);border-radius:var(--radius-lg);color:var(--text-primary);outline:none;transition:all var(--transition-normal);box-shadow:var(--clay-shadow-pressed)}.input:hover,select:hover{border-color:var(--primary-light)}.input:focus,select:focus{border-color:var(--primary);box-shadow:var(--clay-shadow-pressed),0 0 0 4px var(--primary-50)}.input::placeholder{color:var(--text-muted)}.search-container{position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:1.25rem;color:var(--text-muted);pointer-events:none}.search-input{padding-left:3.25rem!important}.toggle-container{display:flex;align-items:center;gap:.75rem}.toggle{position:relative;width:56px;height:32px;background:var(--border);border-radius:var(--radius-full);cursor:pointer;transition:background var(--transition-normal);border:3px solid var(--border-light);box-shadow:var(--clay-shadow-pressed)}.toggle.active{background:var(--primary);border-color:var(--primary-dark)}.toggle:after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;background:#fff;border-radius:50%;transition:transform var(--transition-bounce);box-shadow:0 2px 4px #0003}.toggle.active:after{transform:translate(24px)}.badge{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .875rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-full);white-space:nowrap;border:2px solid transparent}.badge-primary{background:var(--primary-50);color:var(--primary);border-color:var(--primary-light)}.badge-secondary{background:var(--surface-hover);color:var(--text-secondary);border-color:var(--border)}.badge-success{background:var(--success-light);color:var(--success);border-color:#86efac}.badge-warning{background:var(--warning-light);color:var(--warning);border-color:#fcd34d}.badge-danger{background:var(--danger-light);color:var(--danger);border-color:#fca5a5}.badge-info{background:var(--info-light);color:var(--info);border-color:#7dd3fc}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}@media(max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}}.stat-card{background:var(--surface);border:var(--clay-border);border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-md);display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:var(--clay-shadow);transition:all var(--transition-normal);position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:var(--radius-sm) var(--radius-sm) 0 0}.stat-card.clickable{cursor:pointer}.stat-card.clickable:hover{transform:translateY(-4px);box-shadow:var(--clay-shadow-hover)}.stat-value{font-family:var(--font-heading);font-size:2rem;font-weight:800;color:var(--text-primary);line-height:1.1;margin-bottom:.25rem}.stat-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:700}.progress-bar{width:100%;height:12px;background:var(--surface-hover);border-radius:var(--radius-full);overflow:hidden;border:2px solid var(--border);box-shadow:var(--clay-shadow-pressed)}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary),var(--cta));background-size:200% 100%;border-radius:var(--radius-full);transition:width .5s ease-out;animation:shimmer 2s ease-in-out infinite;box-shadow:inset 0 2px 4px #ffffff4d}@keyframes shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.progress-bar-success .progress-bar-fill{background:linear-gradient(90deg,var(--success),#4ADE80)}.flashcard-container{perspective:2000px;width:100%;max-width:400px;height:580px;margin:0 auto}.flashcard{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,.2,.2,1);cursor:pointer}.flashcard.flipped{transform:rotateY(180deg)}.flashcard-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;padding:var(--space-xl) var(--space-lg);background:var(--surface);border:4px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--clay-shadow),0 20px 40px #0d948826}.flashcard-front{border-bottom:6px solid var(--primary)}.flashcard-front:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--primary),var(--secondary),var(--cta));border-radius:var(--radius-xl) var(--radius-xl) 0 0}.flashcard-back{transform:rotateY(180deg);border-top:6px solid var(--secondary)}.radical-tag{display:flex;align-items:center;gap:1rem;background:var(--primary-50);padding:.875rem 1.25rem;border-radius:var(--radius-lg);border:3px solid var(--primary-light);color:var(--text-secondary);font-weight:600;box-shadow:var(--clay-shadow)}.radical-char{font-family:var(--font-chinese);font-size:2rem;color:var(--primary);text-shadow:2px 2px 0 var(--primary-light)}.mnemonic-card{background:linear-gradient(135deg,var(--gold-light) 0%,#FEF9C3 100%);border:3px solid #FCD34D;border-left:6px solid var(--gold);padding:var(--space-md);border-radius:var(--radius-lg);width:100%;box-shadow:var(--clay-shadow)}.hanviet-card{background:linear-gradient(135deg,var(--success-light) 0%,#BBF7D0 100%);border:3px solid #86EFAC;border-left:6px solid var(--success);padding:var(--space-md);border-radius:var(--radius-lg);color:#166534;width:100%;box-shadow:var(--clay-shadow)}.example-card{background:linear-gradient(135deg,var(--blue-light) 0%,#BFDBFE 100%);border:3px solid #93C5FD;border-left:6px solid var(--blue);padding:var(--space-md);border-radius:var(--radius-lg);color:#1e40af;width:100%;box-shadow:var(--clay-shadow)}[data-theme=dark] .mnemonic-card{background:#fbbf241f;border-color:#fbbf2466;color:var(--text-primary)}[data-theme=dark] .hanviet-card{background:#4ade801f;border-color:#4ade8066;color:var(--text-primary)}[data-theme=dark] .example-card{background:#60a5fa1f;border-color:#60a5fa66;color:var(--text-primary)}.difficulty-buttons{display:flex;gap:var(--space-sm);width:100%;margin-top:var(--space-lg)}.difficulty-btn{flex:1;padding:.875rem .5rem;background:var(--surface);border:3px solid var(--border);color:var(--text-secondary);font-family:var(--font-body);font-weight:700;font-size:.9375rem;cursor:pointer;transition:all var(--transition-normal);border-radius:var(--radius-lg);outline:none;box-shadow:var(--clay-shadow)}.difficulty-btn:hover{transform:translateY(-3px);box-shadow:var(--clay-shadow-hover);border-color:var(--primary);color:var(--primary)}.difficulty-btn:active{transform:translateY(1px);box-shadow:var(--clay-shadow-pressed)}.difficulty-btn:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.vocab-list{display:flex;flex-direction:column;gap:.75rem}.vocab-item{display:flex;align-items:center;background:var(--surface);border:3px solid var(--border);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);gap:var(--space-md);outline:none;box-shadow:var(--clay-shadow)}.vocab-item:hover{transform:translate(8px);border-color:var(--primary);box-shadow:var(--clay-shadow-hover)}.vocab-item:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.vocab-char{font-family:var(--font-chinese);font-size:2.25rem;font-weight:700;color:var(--text-primary);min-width:4rem;text-align:center;line-height:1;text-shadow:2px 2px 0 var(--primary-light)}.vocab-info{flex:1;min-width:0}.vocab-pinyin{font-size:1rem;color:var(--primary);font-weight:700;margin-bottom:.25rem}.vocab-meaning{font-size:1rem;color:var(--text-secondary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vocab-status{width:16px;height:16px;border-radius:50%;flex-shrink:0;border:3px solid transparent}.vocab-status.new{background:var(--border);border-color:var(--border-strong)}.vocab-status.learning{background:var(--warning);border-color:#fcd34d;box-shadow:0 0 8px var(--warning-glow)}.vocab-status.learned{background:var(--info);border-color:#7dd3fc;box-shadow:0 0 8px #0ea5e966}.vocab-status.mastered{background:var(--success);border-color:#86efac;box-shadow:0 0 8px var(--success-glow)}.quiz-option{width:100%;padding:1rem 1.25rem;background:var(--surface);border:3px solid var(--border);border-radius:var(--radius-lg);font-family:var(--font-body);font-weight:600;font-size:1rem;color:var(--text-primary);cursor:pointer;transition:all var(--transition-normal);text-align:left;outline:none;box-shadow:var(--clay-shadow)}.quiz-option:hover:not(:disabled){border-color:var(--primary);background:var(--primary-50);transform:translate(8px);box-shadow:var(--clay-shadow-hover)}.quiz-option:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.quiz-option.selected{border-color:var(--primary);background:var(--primary-50);box-shadow:var(--clay-shadow),0 0 0 4px var(--primary-glow)}.quiz-option.correct{border-color:var(--success);background:var(--success-light);box-shadow:var(--clay-shadow),0 0 0 4px var(--success-glow)}.quiz-option.incorrect{border-color:var(--danger);background:var(--danger-light);box-shadow:var(--clay-shadow),0 0 0 4px var(--danger-glow)}.quiz-option:disabled{cursor:not-allowed}.empty-state{text-align:center;padding:var(--space-3xl);background:var(--surface);border:4px dashed var(--border);border-radius:var(--radius-xl)}.empty-state-icon{font-size:4rem;margin-bottom:var(--space-lg);opacity:.6}.empty-state-title{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.empty-state-text{font-size:1rem;color:var(--text-secondary);margin-bottom:var(--space-lg)}.grid{display:grid;gap:var(--space-md)}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}@media(max-width:768px){.grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{transform:scale(0);opacity:0}50%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}.animate-fade-in{animation:fadeIn .6s ease-out forwards}.animate-pulse{animation:pulse .6s ease-in-out}.animate-shake{animation:shake .4s ease-in-out}.animate-slide-up{animation:slideUp .5s ease-out forwards}.animate-bounce-in{animation:bounceIn .6s ease-out forwards}.animate-wiggle{animation:wiggle .5s ease-in-out}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}body:before,body:after{animation:none}}.action-card{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-lg);background:var(--surface);border:3px solid var(--border);border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--clay-shadow);position:relative;overflow:hidden}.action-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(13,148,136,.05) 100%);opacity:0;transition:opacity var(--transition-normal)}.action-card:hover{transform:translateY(-6px);box-shadow:var(--clay-shadow-hover);border-color:var(--primary-light)}.action-card:hover:before{opacity:1}.action-card:active{transform:translateY(-2px);box-shadow:var(--clay-shadow)}.action-card-icon{width:56px;height:56px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:3px solid transparent;position:relative}.action-card-icon:after{content:"";position:absolute;inset:-3px;border-radius:var(--radius-lg);background:inherit;filter:blur(8px);opacity:.4;z-index:-1}.action-card-icon.primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-color:var(--primary-dark);box-shadow:var(--3d-shadow)}.action-card-icon.success{background:linear-gradient(135deg,var(--success),#16A34A);border-color:#16a34a;box-shadow:var(--3d-shadow-success)}.action-card-icon.warning{background:linear-gradient(135deg,var(--warning),#D97706);border-color:#d97706;box-shadow:0 4px #d97706}.action-card-icon.violet{background:linear-gradient(135deg,var(--purple),#7C3AED);border-color:#7c3aed;box-shadow:0 4px #6d28d9}.action-card-content h4{margin:0 0 .25rem;font-size:1.0625rem}.action-card-content p{margin:0;font-size:.875rem;color:var(--text-muted)}.theme-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--surface);border:3px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;color:var(--text-secondary);transition:all var(--transition-normal);box-shadow:var(--clay-shadow)}.theme-toggle:hover{background:var(--primary-50);color:var(--primary);border-color:var(--primary-light);transform:rotate(15deg)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--surface-hover);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-full);border:2px solid var(--surface-hover)}::-webkit-scrollbar-thumb:hover{background:var(--primary)}.grammar-view{display:flex;flex-direction:column;height:100%;padding:var(--space-md)}.grammar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md);padding:var(--space-md);background:var(--surface);border:var(--clay-border);border-radius:var(--radius-lg);box-shadow:var(--clay-shadow)}.grammar-stats-mini{display:flex;gap:var(--space-lg);font-size:.9375rem;color:var(--text-secondary)}.grammar-stats-mini span{display:flex;align-items:center;gap:.375rem;font-weight:600}.grammar-actions-header{display:flex;gap:.5rem}.grammar-content{flex:1;overflow:hidden}.grammar-browser{display:flex;flex-direction:column;height:100%}.grammar-browser-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.grammar-browser-header h2{display:flex;align-items:center;gap:.5rem;font-size:1.375rem;margin:0;border:none}.grammar-count{color:var(--text-secondary);font-size:.9375rem}.grammar-search{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;background:var(--surface);border-radius:var(--radius-lg);border:3px solid var(--border);margin-bottom:var(--space-md);box-shadow:var(--clay-shadow-pressed)}.grammar-search input{flex:1;background:transparent;border:none;color:var(--text-primary);font-size:1rem;font-weight:500;outline:none}.grammar-search input::placeholder{color:var(--text-muted)}.filter-toggle{padding:.625rem;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition-normal)}.filter-toggle:hover,.filter-toggle.active{background:var(--primary);color:#fff}.grammar-level-tabs{display:flex;gap:.5rem;margin-bottom:var(--space-md);overflow-x:auto;padding-bottom:.25rem}.level-tab{padding:.625rem 1.25rem;background:var(--surface);border:3px solid var(--border);border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:all var(--transition-normal);font-size:.9375rem;font-weight:700;box-shadow:var(--clay-shadow)}.level-tab:hover{border-color:var(--primary);transform:translateY(-2px)}.level-tab.active{background:var(--primary);color:#fff;border-color:var(--primary-dark);box-shadow:var(--3d-shadow)}.grammar-category-filter{margin-bottom:var(--space-md)}.category-chips{display:flex;flex-wrap:wrap;gap:.5rem}.category-chip{padding:.5rem 1rem;background:var(--surface);border:3px solid var(--border);border-radius:var(--radius-full);font-size:.875rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--clay-shadow)}.category-chip:hover,.category-chip.active{background:var(--primary-50);border-color:var(--primary);color:var(--primary)}.grammar-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem}.grammar-list-item{padding:var(--space-md);background:var(--surface);border:3px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--clay-shadow)}.grammar-list-item:hover{border-color:var(--primary);transform:translate(8px);box-shadow:var(--clay-shadow-hover)}.grammar-list-item.selected{border-color:var(--primary);background:var(--primary-50)}.grammar-item-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:.375rem}.grammar-pattern{font-size:1.125rem;font-weight:700;font-family:var(--font-chinese)}.grammar-item-sub{display:flex;justify-content:space-between;align-items:center}.grammar-title-vi{font-size:.9375rem;color:var(--text-secondary)}.grammar-level-badge{font-size:.75rem;padding:.25rem .625rem;background:var(--primary-50);color:var(--primary);border-radius:var(--radius-sm);font-weight:700;border:2px solid var(--primary-light)}.grammar-empty{text-align:center;padding:var(--space-xl);color:var(--text-secondary)}.grammar-card-container{perspective:1500px;width:100%;max-width:400px;margin:0 auto;cursor:pointer}.grammar-card{position:relative;width:100%;min-height:420px;transform-style:preserve-3d}.grammar-card-face{position:absolute;width:100%;min-height:420px;backface-visibility:hidden;padding:var(--space-lg);background:var(--surface);border:4px solid var(--border);border-radius:var(--radius-xl);display:flex;flex-direction:column;box-shadow:var(--clay-shadow)}.grammar-card-back{transform:rotateY(180deg)}.grammar-card-level{position:absolute;top:1rem;right:1rem;padding:.375rem .75rem;background:var(--primary);color:#fff;border-radius:var(--radius-md);font-size:.8125rem;font-weight:700;box-shadow:var(--3d-shadow)}.grammar-card-pattern{text-align:center;margin:var(--space-xl) 0}.pattern-chinese{font-size:2rem;font-weight:700;font-family:var(--font-chinese);margin-bottom:.5rem;text-shadow:2px 2px 0 var(--primary-light)}.pattern-pinyin{font-size:1.125rem;color:var(--text-secondary)}.pattern-hanviet{font-size:1rem;color:var(--primary);font-style:italic;margin-top:.25rem;font-weight:600}.grammar-card-title{text-align:center;font-size:1.25rem;margin-bottom:var(--space-md)}.grammar-card-category{text-align:center;font-size:.875rem;color:var(--text-secondary);text-transform:capitalize}.grammar-card-hint{margin-top:auto;text-align:center;font-size:.875rem;color:var(--text-muted)}.grammar-back-content{flex:1;overflow-y:auto}.grammar-structure{padding:.875rem;background:var(--primary-50);border-radius:var(--radius-md);margin-bottom:var(--space-md);font-family:monospace;font-size:1rem;border:2px solid var(--primary-light)}.grammar-explanation{margin-bottom:var(--space-md);line-height:1.7}.grammar-examples{margin-bottom:var(--space-md)}.grammar-example{padding:.875rem;background:var(--surface-hover);border-radius:var(--radius-md);margin-top:.625rem;border:2px solid var(--border)}.example-chinese{display:flex;justify-content:space-between;align-items:center;font-size:1.125rem;font-family:var(--font-chinese);margin-bottom:.375rem}.example-pinyin{font-size:.9375rem;color:var(--text-secondary)}.example-hanviet{font-size:.875rem;color:var(--primary);font-style:italic;font-weight:600}.example-vietnamese{font-size:.9375rem;color:var(--text-primary);margin-top:.375rem}.speak-btn{padding:.5rem;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;border-radius:50%;transition:all var(--transition-normal)}.speak-btn:hover{background:var(--primary);color:#fff}.speak-btn.playing{color:var(--primary);animation:pulse 1s infinite}.grammar-tips,.grammar-mistakes{display:flex;align-items:flex-start;gap:.625rem;padding:.875rem;border-radius:var(--radius-md);font-size:.9375rem;margin-bottom:.625rem;border:3px solid}.grammar-tips{background:var(--success-light);color:var(--success);border-color:#86efac}.grammar-mistakes{background:var(--danger-light);color:var(--danger);border-color:#fca5a5}.grammar-rating{display:flex;flex-direction:column;align-items:center;gap:.625rem;padding-top:var(--space-md);border-top:3px solid var(--border)}.rating-buttons{display:flex;gap:.625rem}.rating-btn{width:44px;height:44px;border-radius:var(--radius-lg);border:3px solid;cursor:pointer;font-weight:700;transition:all var(--transition-bounce);box-shadow:var(--clay-shadow)}.rating-btn:hover{transform:scale(1.15)}.rating-1{background:#ef4444;color:#fff;border-color:#dc2626}.rating-2{background:#f97316;color:#fff;border-color:#ea580c}.rating-3{background:#eab308;color:#fff;border-color:#ca8a04}.rating-4{background:#22c55e;color:#fff;border-color:#16a34a}.rating-5{background:#10b981;color:#fff;border-color:#059669}.grammar-detail{height:100%;overflow-y:auto;padding:var(--space-lg);background:var(--surface);border-radius:var(--radius-xl);border:var(--clay-border);box-shadow:var(--clay-shadow)}.grammar-detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg)}.close-btn{padding:.625rem;background:var(--surface-hover);border:3px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;color:var(--text-primary);transition:all var(--transition-normal)}.close-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.hanviet-toggle label{display:flex;align-items:center;gap:.625rem;cursor:pointer;font-size:.9375rem;font-weight:600}.grammar-detail-pattern{text-align:center;padding:var(--space-xl);background:var(--primary-50);border-radius:var(--radius-lg);margin-bottom:var(--space-lg);border:3px solid var(--primary-light)}.pattern-main{font-size:2rem;font-weight:700;font-family:var(--font-chinese);text-shadow:2px 2px 0 white}.pattern-level{margin-top:.5rem;color:var(--text-secondary);text-transform:capitalize;font-weight:600}.grammar-section{margin-bottom:var(--space-lg)}.grammar-section h3{display:flex;align-items:center;gap:.625rem;margin-bottom:.875rem;font-size:1.125rem}.structure-box{padding:var(--space-md);background:var(--primary-50);border-radius:var(--radius-md);font-family:monospace;font-size:1.0625rem;border:3px solid var(--primary-light)}.usage-list{padding-left:var(--space-lg)}.usage-list li{margin-bottom:.625rem}.grammar-detail .example-card{display:flex;gap:var(--space-md);padding:var(--space-md);background:var(--surface-hover);border:none;border-left:none;border-radius:var(--radius-lg);margin-bottom:.875rem;color:var(--text-primary);border:3px solid var(--border)}.example-number{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border-radius:50%;font-size:.8125rem;flex-shrink:0;font-weight:700}.example-content{flex:1}.tips-section{background:var(--success-light);padding:var(--space-md);border-radius:var(--radius-lg);border:3px solid #86EFAC}.mistakes-section{background:var(--danger-light);padding:var(--space-md);border-radius:var(--radius-lg);border:3px solid #FCA5A5}.related-tags{display:flex;flex-wrap:wrap;gap:.625rem}.related-tag{padding:.375rem 1rem;background:var(--surface-hover);border-radius:var(--radius-full);font-size:.875rem;font-weight:600;border:2px solid var(--border)}.grammar-actions{display:flex;gap:var(--space-md);margin-top:var(--space-xl)}.action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.625rem;padding:1rem;border-radius:var(--radius-lg);border:3px solid transparent;font-size:1rem;font-weight:700;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--clay-shadow)}.action-btn.primary,.learn-btn{background:var(--primary);color:#fff;border-color:var(--primary-dark);box-shadow:var(--3d-shadow)}.action-btn.secondary,.quiz-btn{background:var(--surface);border-color:var(--primary);color:var(--primary)}.action-btn:hover{transform:translateY(-3px);box-shadow:var(--clay-shadow-hover)}.quiz-engine{height:100%;display:flex;flex-direction:column;padding:var(--space-md)}.quiz-progress{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg)}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:var(--radius-full)}.progress-text{color:var(--text-secondary);font-size:.9375rem;font-weight:600}.quiz-content{flex:1}.quiz-question{margin-bottom:var(--space-lg)}.quiz-question p{font-size:1.0625rem;margin-bottom:.625rem}.quiz-sentence{padding:var(--space-lg);background:var(--surface);border-radius:var(--radius-lg);font-size:1.25rem;text-align:center;font-family:var(--font-chinese);border:var(--clay-border);box-shadow:var(--clay-shadow)}.mc-options{display:flex;flex-direction:column;gap:.875rem}.mc-option{display:flex;align-items:center;gap:.875rem;padding:var(--space-md);background:var(--surface);border:3px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);text-align:left;box-shadow:var(--clay-shadow)}.mc-option:hover:not(:disabled){border-color:var(--primary);transform:translate(8px)}.mc-option.selected{border-color:var(--primary);background:var(--primary-50)}.mc-option.correct{border-color:var(--success);background:var(--success-light)}.mc-option.incorrect{border-color:var(--danger);background:var(--danger-light)}.option-letter{font-weight:700;color:var(--text-secondary)}.option-text{flex:1}.result-icon{margin-left:auto}.result-icon.correct{color:var(--success)}.result-icon.incorrect{color:var(--danger)}.submit-btn,.next-btn{display:flex;align-items:center;justify-content:center;gap:.625rem;width:100%;padding:var(--space-md);margin-top:var(--space-lg);background:var(--primary);color:#fff;border:3px solid var(--primary-dark);border-radius:var(--radius-lg);font-size:1rem;font-weight:700;cursor:pointer;box-shadow:var(--3d-shadow);transition:all var(--transition-normal)}.submit-btn:hover:not(:disabled),.next-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--primary-dark),0 8px 20px var(--primary-glow)}.submit-btn:disabled{opacity:.5;cursor:not-allowed}.quiz-explanation{padding:var(--space-md);border-radius:var(--radius-lg);margin-top:var(--space-md);border:3px solid}.quiz-explanation.correct{background:var(--success-light);border-color:#86efac}.quiz-explanation.incorrect{background:var(--danger-light);border-color:#fca5a5}.explanation-header{display:flex;align-items:center;gap:.625rem;font-weight:700;margin-bottom:.625rem}.quiz-score-preview{display:flex;justify-content:center;gap:var(--space-lg);margin-top:var(--space-md);padding-top:var(--space-md);border-top:3px solid var(--border)}.correct-count{color:var(--success);font-weight:700}.incorrect-count{color:var(--danger);font-weight:700}.fill-blank-sentence{font-size:1.375rem;text-align:center;padding:var(--space-xl);background:var(--surface);border-radius:var(--radius-lg);margin-bottom:var(--space-lg);font-family:var(--font-chinese);border:var(--clay-border);box-shadow:var(--clay-shadow)}.blank-slot{display:inline-block;min-width:70px;padding:.375rem .625rem;margin:0 .375rem;border-bottom:4px solid var(--primary);text-align:center}.blank-slot.filled{color:var(--primary);font-weight:700}.blank-slot.correct{border-color:var(--success);color:var(--success)}.blank-slot.incorrect{border-color:var(--danger);color:var(--danger)}.fill-options{display:flex;flex-wrap:wrap;justify-content:center;gap:.875rem}.fill-option{padding:.75rem 1.25rem;background:var(--surface);border:3px solid var(--border);border-radius:var(--radius-full);cursor:pointer;font-size:1.125rem;font-family:var(--font-chinese);transition:all var(--transition-normal);box-shadow:var(--clay-shadow)}.fill-option:hover:not(:disabled){border-color:var(--primary);transform:translateY(-3px)}.fill-option.selected{background:var(--primary);color:#fff;border-color:var(--primary-dark);box-shadow:var(--3d-shadow)}.fill-option.correct{background:var(--success);color:#fff;border-color:#16a34a}.fill-option.incorrect{background:var(--danger);color:#fff;border-color:#dc2626}.word-ordering-quiz{text-align:center}.target-meaning{color:var(--text-secondary);margin-top:.625rem}.answer-area{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-lg);margin:var(--space-xl) 0;background:var(--surface);border:3px dashed var(--border);border-radius:var(--radius-xl);min-height:4.5rem}.answer-slots{flex:1;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;min-height:2.5rem}.answer-slots .placeholder{color:var(--text-muted);font-style:italic}.reset-btn{padding:.5rem;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.reset-btn:hover{border-color:var(--error);color:var(--error)}.word-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;padding:var(--space-md)}.word-chip{padding:.75rem 1.25rem;background:var(--surface);border:3px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;font-size:1.25rem;font-family:var(--font-chinese);-webkit-user-select:none;user-select:none;transition:all var(--transition-fast);box-shadow:var(--clay-shadow)}.word-chip.available:hover:not(:disabled){border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--clay-shadow-hover)}.word-chip.selected{background:var(--primary-light);border-color:var(--primary);color:var(--primary-dark)}.word-chip.selected:hover:not(:disabled){background:#ef444426;border-color:var(--error);color:var(--error)}.word-chip:disabled{cursor:default;opacity:.7}.quiz-complete{display:flex;flex-direction:column;align-items:center;padding:var(--space-2xl);text-align:center}.complete-header{margin-bottom:var(--space-xl)}.complete-header svg.gold{color:#fbbf24}.complete-header svg.silver{color:#9ca3af}.complete-header svg.bronze{color:#d97706}.score-display{margin-bottom:var(--space-xl)}.score-number{font-size:4rem;font-weight:800;color:var(--primary);text-shadow:3px 3px 0 var(--primary-light)}.score-fraction{font-size:1.375rem;color:var(--text-secondary)}.xp-earned{font-size:1.375rem;font-weight:700;color:var(--success);margin-bottom:var(--space-xl)}.complete-actions{display:flex;gap:var(--space-md)}.retry-btn,.exit-btn{display:flex;align-items:center;gap:.625rem;padding:.75rem 1.5rem;border-radius:var(--radius-lg);cursor:pointer;font-weight:700;transition:all var(--transition-normal)}.retry-btn{background:var(--primary);color:#fff;border:3px solid var(--primary-dark);box-shadow:var(--3d-shadow)}.retry-btn:hover{transform:translateY(-2px)}.exit-btn{background:transparent;border:3px solid var(--border);color:var(--text-primary);box-shadow:var(--clay-shadow)}.exit-btn:hover{border-color:var(--primary);color:var(--primary)}.grammar-learn-mode{display:flex;flex-direction:column;align-items:center;padding:var(--space-md)}.learn-progress{margin-bottom:var(--space-md);color:var(--text-secondary);font-weight:600}.back-btn{display:flex;align-items:center;gap:.625rem;padding:.625rem 1.25rem;background:var(--surface);border:3px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;font-weight:600;color:var(--text-primary);box-shadow:var(--clay-shadow);transition:all var(--transition-normal)}.back-btn:hover{border-color:var(--primary);color:var(--primary)}.grammar-completion{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:450px;padding:var(--space-3xl) var(--space-xl);background:var(--surface);border-radius:var(--radius-xl);border:var(--clay-border);text-align:center;box-shadow:var(--clay-shadow)}.completion-icon{margin-bottom:var(--space-xl);animation:bounceIn .7s ease-out}.completion-title{font-size:2rem;font-weight:700;color:var(--primary);margin-bottom:var(--space-xl)}.completion-stats{display:flex;gap:var(--space-xl);margin-bottom:var(--space-xl)}.completion-stats .stat-item{display:flex;flex-direction:column;align-items:center;gap:.625rem;padding:var(--space-lg);background:var(--surface-hover);border-radius:var(--radius-lg);border:3px solid var(--border)}.completion-actions{display:flex;flex-direction:column;gap:var(--space-md);width:100%;max-width:380px}.completion-actions .action-btn{width:100%}.session-progress{display:flex;align-items:center;gap:.625rem;padding:.5rem 1rem;background:var(--primary-50);border-radius:var(--radius-md);font-weight:700;font-size:.9375rem;color:var(--primary);border:2px solid var(--primary-light)}@media(max-width:600px){.grammar-header{flex-direction:column;gap:var(--space-md)}.grammar-stats-mini{flex-wrap:wrap;justify-content:center}.grammar-level-tabs{justify-content:flex-start}.grammar-card-container{max-width:100%}.pattern-chinese,.pattern-main{font-size:1.75rem}.completion-stats{flex-direction:column;gap:var(--space-md)}.completion-title{font-size:1.625rem}}.mobile-more-btn,.more-menu-overlay{display:none}@media(max-width:768px){.mobile-more-btn{display:flex;position:fixed;bottom:calc(var(--bottom-nav-height) + var(--space-lg));right:var(--space-md);width:56px;height:56px;background:linear-gradient(135deg,var(--cta),var(--cta-dark));color:#fff;border:3px solid var(--cta-dark);border-radius:var(--radius-xl);align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--3d-shadow-cta),0 8px 25px var(--cta-glow);z-index:var(--z-dropdown);transition:all var(--transition-bounce)}.mobile-more-btn:hover{transform:scale(1.1)}.mobile-more-btn:active{transform:scale(.95)}.more-menu-overlay{display:flex;position:fixed;inset:0;background:#0009;z-index:var(--z-modal);align-items:flex-end;justify-content:center;animation:fadeIn .25s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.more-menu{width:100%;max-width:450px;background:var(--surface);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;padding:var(--space-lg);padding-bottom:calc(var(--bottom-nav-height) + var(--space-xl));animation:slideUp .35s ease-out;border:var(--clay-border);border-bottom:none;box-shadow:0 -10px 40px #0003}.more-menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md);padding-bottom:var(--space-md);border-bottom:3px solid var(--border)}.more-menu-header h3{margin:0;font-size:1.25rem}.more-menu-items{display:flex;flex-direction:column;gap:var(--space-xs)}.more-menu-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:transparent;border:3px solid transparent;border-radius:var(--radius-lg);font-family:var(--font-body);font-size:1.0625rem;font-weight:600;color:var(--text-primary);cursor:pointer;transition:all var(--transition-normal);width:100%;text-align:left}.more-menu-item:hover{background:var(--surface-hover);border-color:var(--border)}.more-menu-item.active{background:var(--primary-50);color:var(--primary);font-weight:700;border-color:var(--primary-light)}.more-menu-item svg{color:var(--text-muted)}.more-menu-item.active svg{color:var(--primary)}.more-menu-divider{height:3px;background:var(--border);margin:var(--space-sm) 0;border-radius:var(--radius-full)}}.pronunciation-view{padding:var(--space-lg) var(--space-md);max-width:1200px;margin:0 auto}.pronunciation-header{text-align:center;margin-bottom:var(--space-xl)}.pronunciation-header h2{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);font-size:1.75rem;font-weight:800;color:var(--text-primary);margin-bottom:var(--space-xs)}.pronunciation-header h2 svg{color:var(--primary)}.pronunciation-header p{color:var(--text-muted);font-size:1rem}.pronunciation-tabs{display:flex;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-lg);flex-wrap:wrap}.tab-btn{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);background:var(--surface);border:3px solid var(--border);border-radius:var(--radius-xl);font-family:var(--font-body);font-size:1rem;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-normal)}.tab-btn:hover{background:var(--surface-hover);border-color:var(--primary-light);color:var(--text-primary)}.tab-btn.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:var(--shadow-clay-pressed)}.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 var(--space-xs);background:#fff3;border-radius:var(--radius-full);font-size:.75rem;font-weight:700}.tab-btn:not(.active) .tab-count{background:var(--surface-hover);color:var(--text-muted)}.pronunciation-content{display:grid;grid-template-columns:1fr;gap:var(--space-lg)}@media(min-width:900px){.pronunciation-content{grid-template-columns:1fr 350px}}.pronunciation-main{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-lg);box-shadow:var(--shadow-clay)}.pronunciation-chart{display:flex;flex-direction:column;gap:var(--space-lg)}.chart-section{margin-bottom:var(--space-md)}.chart-section-title{font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:var(--space-sm);padding-bottom:var(--space-xs);border-bottom:2px dashed var(--border)}.chart-items{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.chart-item{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:3.5rem;height:3.5rem;padding:var(--space-xs) var(--space-sm);background:var(--surface-hover);border:3px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal)}.chart-item:hover{background:var(--primary-50);border-color:var(--primary-light);transform:translateY(-2px)}.chart-item.selected{background:var(--primary);border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-clay-pressed)}.chart-item-pinyin{font-family:var(--font-chinese);font-size:1.25rem;font-weight:700;color:var(--text-primary)}.chart-item.selected .chart-item-pinyin{color:#fff}.chart-item-ipa{font-size:.7rem;color:var(--text-muted)}.chart-item.selected .chart-item-ipa{color:#fffc}.chart-item-wrapper{display:flex;flex-direction:column;align-items:center;gap:4px}.chart-item-audio{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;background:var(--primary);border:none;border-radius:var(--radius-sm);color:#fff;cursor:pointer;transition:all var(--transition-fast);opacity:.8}.chart-item-audio:hover{opacity:1;transform:scale(1.1)}.chart-item-audio.playing{animation:pulse-speak .4s ease-in-out infinite;background:var(--success)}.tones-chart{padding:var(--space-md)}.tones-visual{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-md)}.tone-card-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}.tone-audio{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;background:var(--primary);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;transition:all var(--transition-fast)}.tone-audio:hover{background:var(--primary-dark);transform:scale(1.1)}.tone-audio.playing{animation:pulse-speak .4s ease-in-out infinite;background:var(--success)}.tone-card{display:flex;flex-direction:column;align-items:center;padding:var(--space-lg);background:var(--surface-hover);border:3px solid var(--border);border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-normal)}.tone-card:hover{border-color:var(--primary-light);transform:translateY(-4px)}.tone-card.selected{background:var(--primary);border-color:var(--primary);box-shadow:var(--shadow-clay-pressed)}.tone-number{font-size:2rem;font-weight:800;color:var(--primary);line-height:1}.tone-card.selected .tone-number{color:#fff}.tone-symbol{font-family:var(--font-chinese);font-size:2.5rem;color:var(--text-primary);margin:var(--space-xs) 0}.tone-card.selected .tone-symbol{color:#fff}.tone-name{font-size:.875rem;font-weight:600;color:var(--text-secondary);text-align:center}.tone-card.selected .tone-name{color:#ffffffe6}.tone-pitch{font-size:.75rem;color:var(--text-muted);margin-top:var(--space-xs)}.tone-card.selected .tone-pitch{color:#ffffffb3}.pronunciation-sidebar{position:sticky;top:5rem;height:fit-content}.pronunciation-detail{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-lg);box-shadow:var(--shadow-clay)}.detail-header{text-align:center;padding-bottom:var(--space-md);margin-bottom:var(--space-md);border-bottom:2px dashed var(--border)}.detail-audio-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);margin-top:var(--space-md);padding:var(--space-sm) var(--space-lg);background:var(--primary);border:none;border-radius:var(--radius-lg);color:#fff;font-family:var(--font-body);font-size:1rem;font-weight:700;cursor:pointer;transition:all var(--transition-fast)}.detail-audio-btn:hover{background:var(--primary-dark);transform:scale(1.05)}.detail-audio-btn.playing{animation:pulse-speak .4s ease-in-out infinite;background:var(--success)}.detail-main{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}.detail-pinyin{font-family:var(--font-chinese);font-size:3rem;font-weight:800;color:var(--primary)}.detail-ipa{font-size:1.25rem;color:var(--text-muted)}.detail-symbol{font-family:var(--font-chinese);font-size:3.5rem;font-weight:800;color:var(--primary)}.detail-name{font-size:1rem;font-weight:600;color:var(--text-secondary)}.detail-approx{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:#4ade801a;border:2px solid rgba(74,222,128,.3);border-radius:var(--radius-lg);margin-bottom:var(--space-md);font-size:.9rem;color:var(--text-secondary)}.detail-approx svg{color:#4ade80;flex-shrink:0;margin-top:2px}.detail-approx strong{color:#4ade80}.detail-description{margin-bottom:var(--space-md)}.detail-description p{font-size:.95rem;line-height:1.6;color:var(--text-secondary)}.detail-tip{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:#60a5fa1a;border:2px solid rgba(96,165,250,.3);border-radius:var(--radius-lg);margin-bottom:var(--space-lg);font-size:.875rem;color:var(--text-secondary)}.detail-tip svg{color:#60a5fa;flex-shrink:0;margin-top:2px}.detail-examples h4{display:flex;align-items:center;gap:var(--space-xs);font-size:.875rem;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-sm)}.detail-examples h4 svg{color:var(--primary)}.examples-list{display:flex;flex-direction:column;gap:var(--space-sm)}.example-row{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);background:var(--surface-hover);border-radius:var(--radius-lg)}.example-speak{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background:var(--primary);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.example-speak:hover{background:var(--primary-dark);transform:scale(1.05)}.example-speak.playing{animation:pulse-speak .5s ease-in-out infinite}@keyframes pulse-speak{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.example-content{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-xs) var(--space-sm);flex:1}.example-char{font-family:var(--font-chinese);font-size:1.25rem;font-weight:700;color:var(--text-primary)}.example-pinyin{font-size:.9rem;color:#60a5fa;font-weight:600}.example-meaning{font-size:.875rem;color:var(--text-secondary)}.example-hanviet{font-size:.75rem;padding:.15rem .4rem;background:#a78bfa26;border-radius:var(--radius-sm);color:#a78bfa;font-weight:600}.pronunciation-hint{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin-top:var(--space-lg);padding:var(--space-md);background:var(--surface);border:2px dashed var(--border);border-radius:var(--radius-lg);color:var(--text-muted);font-size:.9rem}.pronunciation-hint svg{color:var(--primary);animation:bounce-right 1s ease-in-out infinite}@keyframes bounce-right{0%,to{transform:translate(0)}50%{transform:translate(5px)}}@media(max-width:768px){.pronunciation-view{padding:var(--space-md) var(--space-sm)}.pronunciation-header h2{font-size:1.5rem}.tab-btn{padding:var(--space-xs) var(--space-md);font-size:.9rem}.chart-item{min-width:3rem;height:3rem}.chart-item-pinyin{font-size:1rem}.tones-visual{grid-template-columns:repeat(3,1fr)}.tone-card{padding:var(--space-md)}.tone-number{font-size:1.5rem}.tone-symbol{font-size:2rem}.pronunciation-sidebar{position:static}.detail-pinyin,.detail-symbol{font-size:2.5rem}}.error-spotting .question-instruction{margin-bottom:var(--space-md)}.error-sentence{display:flex;flex-wrap:wrap;gap:var(--space-xs);padding:var(--space-md);background:var(--surface);border-radius:var(--radius-lg);margin-bottom:var(--space-md)}.error-word{position:relative;padding:var(--space-xs) var(--space-sm);background:var(--surface-hover);border:2px solid var(--border);border-radius:var(--radius-md);font-family:var(--font-chinese);font-size:1.1rem;cursor:pointer;transition:all var(--transition-fast)}.error-word:hover:not(:disabled){border-color:var(--primary);background:var(--primary-50)}.error-word.selected{border-color:var(--primary);background:var(--primary);color:#fff}.error-word.correct{border-color:var(--success);background:var(--success);color:#fff}.error-word.wrong{border-color:var(--danger);background:var(--danger);color:#fff}.error-word .icon-correct,.error-word .icon-wrong{position:absolute;top:-6px;right:-6px}.error-correction{padding:var(--space-md);background:#4ade801a;border:2px solid rgba(74,222,128,.3);border-radius:var(--radius-lg)}.error-correction .explanation{margin-top:var(--space-xs);font-size:.9rem;color:var(--text-muted)}