:root{--primary: #E89A4E;--primary-dark: #D4762C;--primary-light: #FFC78A;--primary-soft: #FFF0E0;--accent: #4ECDC4;--accent-light: #88E0D8;--accent-soft: #E0F8F6;--c-word: #5B9BD5;--c-word-light: #8FC4E8;--c-word-soft: #E8F2FB;--c-grammar: #6BCB77;--c-grammar-light: #9BDDA3;--c-grammar-soft: #EAF8EC;--c-speaking: #FF9F43;--c-speaking-light: #FFC078;--c-speaking-soft: #FFF2E0;--c-reading: #FF6B9D;--c-reading-light: #FF9BBA;--c-reading-soft: #FFEDF3;--success: #52C41A;--success-soft: #F0FFE6;--warning: #FAAD14;--warning-soft: #FFF7E0;--danger: #FF4D4F;--danger-soft: #FFF0F0;--info: #1890FF;--bg-page: #FFF8F0;--bg-card: #FFFFFF;--bg-soft: #FFF2E5;--border: #FFD9B8;--border-light: #FFE8D0;--text-1: #2D2D2D;--text-2: #525252;--text-3: #737373;--text-4: #A3A3A3;--text-white: #FFFFFF;--fs-xs: 12px;--fs-sm: 13px;--fs-base: 14px;--fs-md: 15px;--fs-lg: 17px;--fs-xl: 20px;--fs-2xl: 24px;--fs-3xl: 30px;--r-sm: 10px;--r-md: 14px;--r-lg: 18px;--r-xl: 24px;--r-2xl: 28px;--r-full: 999px;--sh-xs: 0 1px 3px rgba(232,154,78,.08);--sh-sm: 0 2px 10px rgba(232,154,78,.12);--sh-md: 0 6px 20px rgba(232,154,78,.16);--sh-lg: 0 12px 30px rgba(232,154,78,.22);--sh-xl: 0 20px 45px rgba(232,154,78,.28);--sh-primary: 0 6px 18px rgba(232,154,78,.3);--sh-glow: 0 0 0 3px rgba(255,199,138,.35);--grad-primary: linear-gradient(135deg, #FFC78A 0%, #E89A4E 100%);--grad-warm: linear-gradient(135deg, #FFF0E0 0%, #FFC78A 100%);--grad-accent: linear-gradient(135deg, #88E0D8 0%, #4ECDC4 100%);--grad-sunset: linear-gradient(135deg, #FFC78A 0%, #FF6B6B 100%);--grad-night: linear-gradient(135deg, #E89A4E 0%, #D4762C 100%);--grad-rainbow: linear-gradient(135deg, #FF6B9D 0%, #FF9F43 35%, #FFD23F 70%, #4ECDC4 100%)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{height:100%}body{font-family:Montserrat,-apple-system,PingFang SC,Source Han Sans CN,Microsoft YaHei,sans-serif;background:var(--bg-page);color:var(--text-1);line-height:1.75;font-size:var(--fs-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.2px}.en{font-family:Montserrat,sans-serif}button{font-family:inherit;cursor:pointer;border:none;outline:none;background:none}a{color:inherit;text-decoration:none}ul,ol{list-style:none}img{display:block;max-width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:var(--r-full);font-size:var(--fs-md);font-weight:500;transition:all .3s cubic-bezier(.25,.8,.25,1);white-space:nowrap;border:1px solid transparent}.btn-primary{background:var(--grad-primary);color:#fff;box-shadow:var(--sh-primary)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px #e89a4e61}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}.btn-secondary{background:var(--primary-soft);color:var(--primary-dark)}.btn-secondary:hover{background:var(--primary-light)}.btn-outline{background:transparent;color:var(--primary-dark);border-color:var(--border)}.btn-outline:hover{border-color:var(--primary-light);background:var(--primary-soft)}.btn-ghost{background:transparent;color:var(--text-3)}.btn-ghost:hover{background:var(--bg-soft);color:var(--text-2)}.btn-danger{background:var(--danger);color:#fff}.btn-sm{padding:7px 14px;font-size:var(--fs-sm)}.btn-lg{padding:14px 32px;font-size:var(--fs-lg)}.card{background:var(--bg-card);border-radius:var(--r-lg);box-shadow:var(--sh-sm);border:1px solid var(--border-light);padding:20px}.card-hover{transition:all .35s cubic-bezier(.25,.8,.25,1);cursor:pointer}.card-hover:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--primary-light)}.h1{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.3px}.h2{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.2px}.h3{font-size:var(--fs-lg);font-weight:600}.muted{color:var(--text-3)}.faint{color:var(--text-4)}.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:500}.tag-primary{background:var(--primary-soft);color:var(--primary-dark)}.tag-success{background:var(--success-soft);color:var(--success)}.tag-warning{background:var(--warning-soft);color:#d48806}.tag-danger{background:var(--danger-soft);color:var(--danger)}.page-head{margin-bottom:22px}.page-head h1{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.3px}.page-head p{color:var(--text-3);margin-top:4px;font-size:var(--fs-base)}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes popIn{0%{opacity:0;transform:scale(.9)}60%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes floatSlow{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(1deg)}}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.03);opacity:.9}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes spin{to{transform:rotate(360deg)}}.fade-in{animation:fadeIn .6s cubic-bezier(.25,.8,.25,1) backwards}.scale-in{animation:scaleIn .5s cubic-bezier(.25,.8,.25,1) backwards}.pop-in{animation:popIn .5s cubic-bezier(.25,.8,.25,1) backwards}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.gap-sm{gap:8px}.gap-md{gap:14px}.gap-lg{gap:20px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--primary-light);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}.skeleton{background:linear-gradient(90deg,var(--bg-soft) 25%,var(--primary-soft) 37%,var(--bg-soft) 63%);background-size:200% 100%;animation:shimmer 1.6s infinite;border-radius:var(--r-sm)}.text-gradient{background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.glass{background:#ffffffb8;backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.4)}.pattern-dots{background-image:radial-gradient(circle,rgba(232,154,78,.1) 1px,transparent 1px);background-size:20px 20px}@keyframes correctPulse{0%{transform:scale(1)}40%{transform:scale(1.08);box-shadow:0 0 0 4px #52c41a4d}to{transform:scale(1)}}.anim-correct{animation:correctPulse .5s ease}@keyframes wrongShake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.anim-wrong{animation:wrongShake .4s ease}@keyframes popScale{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.anim-pop{animation:popScale .4s cubic-bezier(.34,1.56,.64,1)}@keyframes floatUp{0%{transform:translateY(0) scale(.8);opacity:0}20%{transform:translateY(-10px) scale(1.2);opacity:1}to{transform:translateY(-60px) scale(1);opacity:0}}.anim-float-up{animation:floatUp 1s ease forwards}@keyframes comboFlash{0%{background-color:transparent}50%{background-color:#ffd23f4d}to{background-color:transparent}}.anim-combo{animation:comboFlash .6s ease}