:root{--chau-hong: #DC2626;--chau-hong-2: #B91C1C;--chau-hong-3: #EF4444;--hoang-kim: #F59E0B;--hoang-kim-2: #D97706;--hoang-kim-3: #FCD34D;--thuy-luc: #10B981;--thuy-luc-2: #059669;--mac-hac: #1F2937;--mac-hac-2: #111827;--mac-hac-3: #374151;--me-bach: #FAFAF9;--surface-2: #FAFAF9;--surface-3: #F5F5F4;--overlay: rgba(31, 41, 55, .55);--fg: #1F2937;--fg-2: #4B5563;--fg-3: #6B7280;--fg-4: #9CA3AF;--fg-inv: #FFFFFF;--border-2: #D6D3D1;--border-strong: #1F2937;--primary: #DC2626;--primary-light: #EF4444;--primary-soft: rgba(220, 38, 38, .1);--primary-rgb: 220, 38, 38;--accent: #F59E0B;--bg: #FAFAF9;--bg2: #F5F5F4;--surface: #FFFFFF;--surface1: #FFFFFF;--surface2: #F5F5F4;--card: #FFFFFF;--card-bg: #FFFFFF;--hover: #F5F5F4;--border: #E7E5E4;--text: #1F2937;--text1: #1F2937;--text2: #4B5563;--text3: #6B7280;--text-muted: #6B7280;--text-primary: var(--text);--text-secondary: var(--text2);--text-tertiary: var(--text3);--bg-secondary: var(--bg2);--color-chau-hong: var(--chau-hong);--color-on-surface: var(--text);--color-on-surface-variant: var(--text2);--color-border-light: var(--border);--color-surface-container: var(--surface);--color-surface-container-high: var(--surface2);--color-surface-container-low: var(--bg2);--color-indigo: var(--info);--color-gold: var(--hoang-kim);--color-red: var(--danger);--fg-1: var(--text);--bg-2: var(--bg2);--bg-3: var(--surface2);--r-lg: var(--r-4);--red: var(--chau-hong);--red-dark: var(--chau-hong-2);--green: var(--thuy-luc);--green-light: var(--success-bg);--chau-hong-soft: var(--danger-bg);--hoang-kim-soft: var(--warning-bg);--thuy-luc-soft: var(--success-bg);--success: #10B981;--success-bg: #ECFDF5;--warning: #F59E0B;--warning-bg: #FFFBEB;--danger: #DC2626;--danger-bg: #FEF2F2;--info: #6366F1;--info-bg: #EEF2FF;--status-new: #6B7280;--status-learning: var(--hoang-kim);--status-due: var(--chau-hong);--status-mastered: var(--thuy-luc);--status-new-bg: rgba(107,114,128,.1);--status-learning-bg: rgba(245,158,11,.12);--status-due-bg: rgba(220,38,38,.1);--status-mastered-bg: rgba(16,185,129,.12);--tone-1: #EF4444;--tone-2: #F59E0B;--tone-3: #10B981;--tone-4: #6366F1;--tone-0: #9CA3AF;--hsk-1: #10B981;--hsk-2: #06B6D4;--hsk-3: #0EA5E9;--hsk-4: #6366F1;--hsk-5: #8B5CF6;--hsk-6: #A855F7;--hsk-7: #F59E0B;--hsk-8: #EA580C;--hsk-9: #DC2626;--band-so: #10B981;--band-trung: #6366F1;--band-cao: #DC2626;--pro-gem: #F59E0B;--pro-bg: linear-gradient(135deg, #FCD34D 0%, #F59E0B 50%, #D97706 100%);--on-accent: #FFFFFF;--on-gold: #1F2937;--medal-gold: #F59E0B;--medal-silver: #9CA3AF;--medal-bronze: #CD7F32;--bronze: #B45309;--font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-hanzi: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif;--font-mono: ui-monospace, "SF Mono", Menlo, monospace;--t-hero-hanzi: 96px;--t-hanzi-lg: 72px;--t-hanzi-md: 48px;--t-hanzi-sm: 32px;--t-display: 44px;--t-h1: 26px;--t-h2: 22px;--t-h3: 18px;--t-body-lg: 16px;--t-body: 14px;--t-small: 13px;--t-pinyin: 22px;--t-pinyin-lg: 28px;--t-label: 11px;--lh-tight: 1.15;--lh-snug: 1.3;--lh-normal: 1.55;--lh-loose: 1.7;--tracking-eyebrow: .08em;--tracking-tight: -.01em;--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 20px;--s-6: 24px;--s-8: 32px;--s-10: 40px;--s-12: 48px;--s-16: 64px;--s-20: 80px;--r-1: 4px;--r-2: 8px;--r-3: 12px;--r-4: 16px;--r-5: 20px;--r-6: 24px;--r-pill: 999px;--radius: 14px;--shadow-1: 0 1px 2px rgba(31,41,55,.06), 0 1px 1px rgba(31,41,55,.04);--shadow-2: 0 4px 12px rgba(31,41,55,.06), 0 2px 4px rgba(31,41,55,.04);--shadow-3: 0 8px 28px rgba(31,41,55,.08), 0 4px 10px rgba(31,41,55,.04);--shadow-4: 0 18px 48px rgba(31,41,55,.14), 0 6px 14px rgba(31,41,55,.06);--shadow-red: 0 8px 24px rgba(220,38,38,.28);--shadow-gold: 0 8px 24px rgba(245,158,11,.32);--inset-hairline: inset 0 0 0 1px rgba(31,41,55,.06);--shadow: 0 4px 12px rgba(31,41,55,.06), 0 2px 4px rgba(31,41,55,.04);--shadow-sm: 0 1px 2px rgba(31,41,55,.06), 0 1px 1px rgba(31,41,55,.04);--ease-out: cubic-bezier(.22,.61,.36,1);--ease-in: cubic-bezier(.55,.06,.68,.19);--ease-spring: cubic-bezier(.34,1.56,.64,1);--d-fast: .12s;--d-base: .2s;--d-slow: .32s;--maxw-content: 1200px;--maxw-narrow: 720px;--sidebar-w: 220px;--rs-w: 260px;--topbar-h: 64px}[data-theme=dark]{--bg: #111827;--bg2: #1F2937;--surface: #1F2937;--surface1: #1F2937;--surface2: #374151;--surface-2: #1F2937;--surface-3: #374151;--card: #1F2937;--card-bg: #1F2937;--hover: #374151;--overlay: rgba(17, 24, 39, .75);--border: #2D3748;--border-2: #374151;--border-strong: #F1F5F9;--text: #F1F5F9;--text1: #F1F5F9;--text2: #94A3B8;--text3: #6B7280;--text-muted: #94A3B8;--fg: #F1F5F9;--fg-2: #CBD5E1;--fg-3: #94A3B8;--fg-4: #64748B;--fg-inv: #1F2937;--success-bg: rgba(16,185,129,.12);--warning-bg: rgba(245,158,11,.12);--danger-bg: rgba(220,38,38,.12);--info-bg: rgba(99,102,241,.12);--primary-soft: rgba(220, 38, 38, .18);--shadow: 0 4px 24px rgba(0,0,0,.4);--shadow-sm: 0 1px 2px rgba(0,0,0,.3);--shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);--shadow-2: 0 4px 12px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25);--shadow-3: 0 8px 28px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.25);--shadow-4: 0 18px 48px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.35);--inset-hairline: inset 0 0 0 1px rgba(255,255,255,.06)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}button,a{touch-action:manipulation}body{font-family:var(--font-ui);font-size:var(--t-body);line-height:var(--lh-normal);background:var(--bg);color:var(--text);min-height:100vh;display:flex;transition:background .3s,color .3s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}