:root{--chau-hong: #DC2626;--chau-hong-2: #B91C1C;--chau-hong-3: #EF4444;--accent-text: #B91C1C;--accent-text-strong: #991B1B;--gold-text: #92400E;--hoang-kim: #F59E0B;--hoang-kim-2: #D97706;--hoang-kim-3: #FCD34D;--hero-grad-end: #B45309;--hero-grad-start-deep: #92400E;--thuy-luc: #10B981;--thuy-luc-2: #059669;--mac-hac: #1F2937;--mac-hac-2: #111827;--mac-hac-3: #374151;--me-bach: #FAFAF9;--lam-thanh: #4F46E5;--success-solid: #047857;--info-solid: #4F46E5;--danger-solid: #B91C1C;--hsk-5-solid: #7C3AED;--progress-fill: #047857;--surface-2: #FAFAF9;--surface-3: #F5F5F4;--overlay: rgba(31, 41, 55, .55);--fg: #1F2937;--fg-2: #4B5563;--fg-3: #57606F;--fg-4: #686F7D;--fg-inv: #FFFFFF;--border-2: #E2DCD3;--border-mid: #D2CBC0;--border-control: #867D70;--border-strong: #1F2937;--primary: #DC2626;--primary-light: #EF4444;--primary-soft: rgba(220, 38, 38, .1);--primary-rgb: 220, 38, 38;--accent: #F59E0B;--accent-ink: #92400E;--bg: #F1EDE8;--bg2: #E7E2DA;--surface: #FFFFFF;--surface1: #FFFFFF;--surface2: #E7E2DA;--card: #FFFFFF;--card-bg: #FFFFFF;--hover: #F5F5F4;--border: #E7E5E4;--text: #1F2937;--text1: #1F2937;--text2: #4B5563;--text3: #57606F;--text-muted: #57606F;--surface-raised: var(--surface2);--surface3: var(--surface-3);--bg-card: var(--card-bg);--background: var(--bg);--font-body: var(--font-ui);--bg-hover: var(--hover);--lh-base: var(--lh-normal);--lh-relaxed: var(--lh-loose);--t-body-sm: var(--t-small);--s-7: var(--s-6);--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: #046B4E;--success-bg: #ECFDF5;--warning: #F59E0B;--warning-bg: #FFFBEB;--danger: #B91C1C;--danger-bg: #FEF2F2;--info: #4F46E5;--info-bg: #EEF2FF;--status-new: #4B5563;--status-learning: #B45309;--status-due: #B91C1C;--status-mastered: #065F46;--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: #C81010;--tone-2: #8A5905;--tone-3: #0A6F4E;--tone-4: #4A4DE0;--tone-0: #667082;--tone-1-text: #C81010;--tone-2-text: #8A5905;--tone-3-text: #0A6F4E;--tone-4-text: #4A4DE0;--tone-0-text: #5C6575;--hsk-1: #047857;--hsk-2: #0E7490;--hsk-3: #0369A1;--hsk-4: #4F46E5;--hsk-5: #7C3AED;--hsk-6: #9333EA;--hsk-7: #9C4607;--hsk-8: #A8380A;--hsk-9: #B91C1C;--band-so: #047857;--band-trung: #4F46E5;--band-cao: #B91C1C;--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;--spk-f: #9D174D;--spk-m: #1E40AF;--bronze: #B45309;--focus-ring: var(--primary);--font-ui: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;--font-zh-kai: "HG Kai", "Noto Serif SC", serif;--font-zh-song: "Noto Serif SC", "Noto Sans SC", "PingFang SC", serif;--font-zh-hei: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif;--font-hanzi: var(--font-zh-hei);--font-display: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;--font-hanzi-display: var(--font-zh-kai);--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-home-title: 32px;--t-home-body: 16px;--t-h1: 26px;--t-h2: 22px;--t-h3: 18px;--t-body-lg: 16px;--t-body: 14px;--t-small: 13px;--t-pinyin-min: 14px;--t-pinyin: 22px;--t-pinyin-lg: 28px;--t-label: 12px;--lh-tight: 1.15;--lh-snug: 1.3;--lh-normal: 1.55;--lh-loose: 1.7;--tracking-eyebrow: .08em;--tracking-tight: -.01em;--tracking-display: -.02em;--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;--w-read: 760px;--w-lesson: 1200px;--w-hub: 1440px;--r-1: 4px;--r-2: 8px;--r-3: 12px;--r-4: 16px;--r-5: 20px;--r-6: 24px;--r-card: 20px;--r-pill: 999px;--radius: 14px;--shadow-1: 0 1px 2px rgba(61,48,32,.05);--shadow-2: 0 1px 2px rgba(61,48,32,.05), 0 6px 16px -6px rgba(61,48,32,.14);--shadow-3: 0 2px 4px rgba(61,48,32,.06), 0 16px 34px -14px rgba(61,48,32,.26);--shadow-4: 0 2px 4px rgba(61,48,32,.06), 0 22px 44px -16px rgba(61,48,32,.3);--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-in-out: cubic-bezier(.45,.05,.55,.95);--ease-spring: cubic-bezier(.34,1.56,.64,1);--d-xfast: .1s;--d-fast: .15s;--d-base: .2s;--d-med: .25s;--d-slow: .3s;--d-slower: .4s;--maxw-content: 1200px;--maxw-narrow: 720px;--sidebar-w: 220px;--topbar-h: 64px;--pv-scrim-1: rgba(17, 24, 39, .84);--pv-scrim-2: rgba(17, 24, 39, .74);--pv-scrim-3: rgba(17, 24, 39, .22);--pv-scrim-m: rgba(17, 24, 39, .8);--pv-glass: rgba(17, 24, 39, .5);--pv-glass-line: rgba(250, 250, 249, .32);--pv-clock-bg: rgba(17, 24, 39, .84);--pv-clock-line: rgba(252, 211, 77, .45);--pv-lacquer-shadow: #7F1D1D;--pv-me-row: rgba(245, 158, 11, .12);--pv-paper: #F7F1E6;--pv-paper-ink: #1F2937;--go-sheet: rgba(252, 249, 244, .94);--go-sheet-2: #F4EFE7;--go-chip: rgba(244, 239, 231, .92);--go-line: #DCD3C6;--go-grid: #E3BBB0;--go-grid-2: #F0DAD3;--go-ghost: #756C61;--go-cinnabar: #DC2626;--hoc-control-line: var(--border-control);--hoc-sel: var(--warning-bg);--hoc-sel-line: var(--hoang-kim-2);--hoc-d-enter: .48s;--hoc-spine-mai: var(--hoang-kim-2);--hoc-spine-hsk0: var(--thuy-luc);--hoc-spine-gt: var(--lam-thanh);--hoc-spine-reader: var(--hsk-3);--fc-cat-vocab: #047857;--fc-cat-listen: #4F46E5;--fc-cat-mai: #B45309;--fc-cat-write: #9333EA;--fc-cat-free: #0369A1;--fc-sc-dark-text: #F1F5F9;--fc-sc-dark-text2: #E2E8F0;--fc-sc-dark-scrim-a: rgba(17, 24, 39, .8);--fc-sc-dark-scrim-b: rgba(17, 24, 39, .5);--fc-sc-dark-ctl-bg: rgba(17, 24, 39, .7);--fc-sc-dark-ctl-line: rgba(241, 245, 249, .5);--fc-sc-dark-track: rgba(241, 245, 249, .24);--fc-sc-dark-rest: #FCD34D;--fc-sc-light-text: #1F2937;--fc-sc-light-text2: #374151;--fc-sc-light-scrim-a: rgba(241, 237, 232, .86);--fc-sc-light-scrim-b: rgba(241, 237, 232, .52);--fc-sc-light-ctl-bg: rgba(255, 255, 255, .84);--fc-sc-light-ctl-line: rgba(31, 41, 55, .45);--fc-sc-light-track: rgba(31, 41, 55, .18);--fc-sc-light-rest: #92400E;--hw-sheet: #FCF9F4;--hw-grid: #E45B5A;--hw-ghost: #808690;--hw-hint: #B45309;--hw-seal: #DC2626}[data-theme=dark]{--bronze: #E08A3A;--focus-ring: var(--accent-text);--tone-1: #EF4444;--tone-2: #F59E0B;--tone-3: #10B981;--tone-4: #6366F1;--tone-0: #9CA3AF;--tone-1-text: #FCA5A5;--tone-2-text: #F59E0B;--tone-3-text: #10B981;--tone-4-text: #A5B4FC;--tone-0-text: #9CA3AF;--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-mid: #4B5563;--border-control: #6B7280;--border-strong: #F1F5F9;--text: #F1F5F9;--text1: #F1F5F9;--text2: #CBD5E1;--text3: #B6C2D1;--text-muted: #CBD5E1;--fg: #F1F5F9;--fg-2: #CBD5E1;--fg-3: #CBD5E1;--fg-4: #B6C2D1;--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);--progress-fill: #10B981;--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);--accent-text: #FCA5A5;--accent-text-strong: #FCA5A5;--gold-text: #FCD34D;--accent-ink: #F59E0B;--success: #6EE7B7;--danger: #FCA5A5;--info: #A5B4FC;--status-new: #CBD5E1;--status-learning: #FCD34D;--status-due: #FCA5A5;--status-mastered: #6EE7B7;--hsk-1: #6EE7B7;--hsk-2: #67E8F9;--hsk-3: #7DD3FC;--hsk-4: #A5B4FC;--hsk-5: #C4B5FD;--hsk-6: #D8B4FE;--hsk-7: #FDE68A;--hsk-8: #FDBA74;--hsk-9: #FCA5A5;--band-so: #6EE7B7;--band-trung: #A5B4FC;--band-cao: #FCA5A5;--spk-f: #F9A8D4;--spk-m: #93C5FD;--pv-scrim-1: rgba(17, 24, 39, .84);--pv-scrim-2: rgba(17, 24, 39, .74);--pv-scrim-3: rgba(17, 24, 39, .22);--pv-scrim-m: rgba(17, 24, 39, .8);--pv-glass: rgba(17, 24, 39, .5);--pv-glass-line: rgba(250, 250, 249, .32);--pv-clock-bg: rgba(17, 24, 39, .84);--pv-clock-line: rgba(252, 211, 77, .45);--pv-lacquer-shadow: #7F1D1D;--pv-me-row: rgba(245, 158, 11, .16);--pv-paper: #F7F1E6;--pv-paper-ink: #1F2937;--go-sheet: rgba(24, 32, 51, .93);--go-sheet-2: #1F283D;--go-chip: rgba(28, 36, 56, .9);--go-line: #34405C;--go-grid: #3E4A6B;--go-grid-2: #2A3450;--go-ghost: #8A96AE;--go-cinnabar: #EF4444;--fc-cat-vocab: #059669;--fc-cat-listen: #6366F1;--fc-cat-mai: #D97706;--fc-cat-write: #A855F7;--fc-cat-free: #0284C7;--hw-sheet: #151C2C;--hw-grid: #C33C3F;--hw-ghost: #6B7280;--hw-hint: #F59E0B;--hw-seal: #EF4444}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--fc-cat-vocab: #059669;--fc-cat-listen: #6366F1;--fc-cat-mai: #D97706;--fc-cat-write: #A855F7;--fc-cat-free: #0284C7;--hw-sheet: #151C2C;--hw-grid: #C33C3F;--hw-ghost: #6B7280;--hw-hint: #F59E0B;--hw-seal: #EF4444}}[data-theme=dark] .lc-lvl,[data-theme=dark] .pc-save-badge-purple,[data-theme=dark] .uav{color:#111827}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}button,a{touch-action:manipulation}:where(button,a,[tabindex],select,input,textarea):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}a:not([class]){color:var(--accent-text)}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}}html[data-reduce-motion] *,html[data-reduce-motion] *:before,html[data-reduce-motion] *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}

.sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;padding:24px 0 16px;overflow:visible;transition:background var(--d-slow),width var(--d-med)}.sidebar-logo{display:flex;align-items:center;gap:10px;padding:0 20px 28px;border-bottom:1px solid var(--border);margin-bottom:16px}.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--on-accent);font-family:var(--font-hanzi);font-size:20px;font-weight:700;flex-shrink:0}.logo-text{font-weight:700;font-size:15px;color:var(--text)}.sidebar-collapse-btn{position:absolute;top:50%;right:-12px;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);color:var(--text2);font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:200;transition:background-color var(--d-base),border-color var(--d-base),color var(--d-base),box-shadow var(--d-base),transform var(--d-base),opacity var(--d-base),filter var(--d-base);box-shadow:0 2px 6px #0000002e}.sidebar-collapse-btn:hover{border-color:var(--primary);color:var(--accent-text)}.sidebar.collapsed .sidebar-collapse-btn{right:-12px;transform:translateY(-50%) rotate(180deg)}.sidebar.collapsed{width:64px}.sidebar.collapsed .logo-text,.sidebar.collapsed .nav-item span,.sidebar.collapsed .sidebar-footer,.sidebar.collapsed .auth-info{display:none}.sidebar.collapsed .sidebar-logo{padding:16px 0;justify-content:center}.sidebar.collapsed .sidebar-nav{padding:0 8px}.sidebar.collapsed .nav-item{justify-content:center;padding:11px 0}.sidebar.collapsed .sidebar-auth{padding:10px 0;display:flex;justify-content:center}.sidebar.collapsed .auth-login-btn{width:36px;height:36px;padding:0;justify-content:center}.sidebar.collapsed .auth-login-btn svg{margin:0}.sidebar.collapsed .auth-avatar{font-size:20px}@media(min-width:769px){.sidebar.collapsed~.main-content{margin-left:64px}}.sidebar-logo-img{width:36px;height:36px;object-fit:contain;border-radius:22%;flex-shrink:0}[data-theme=light] .sidebar-logo-img{box-shadow:0 1px 4px #0000001f}.mobile-logo-img{height:38px;width:auto;max-width:160px;object-fit:contain;object-position:left center;margin-right:auto;border-radius:22%}.sidebar-nav{flex:1;display:flex;flex-direction:column;gap:4px;padding:0 12px;overflow-y:auto;min-height:0;scrollbar-width:none}.sidebar-nav::-webkit-scrollbar{display:none}.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--text2);background:transparent;border:none;font-family:inherit;cursor:pointer;font-size:14px;font-weight:500;transition:background-color var(--d-base),border-color var(--d-base),color var(--d-base),box-shadow var(--d-base),transform var(--d-base),opacity var(--d-base),filter var(--d-base)}.nav-item svg{width:18px;height:18px;flex-shrink:0}.nav-item:hover{background:var(--surface2);color:var(--text)}.sidebar-nav .nav-item:focus-visible{outline-offset:-2px}.nav-item.active{background:var(--primary);color:var(--on-accent)}.nav-item.has-dot{position:relative}.nav-item.has-dot:after{content:"";position:absolute;top:10px;left:26px;width:7px;height:7px;border-radius:50%;background:var(--info);box-shadow:0 0 0 2px var(--surface)}.sidebar.collapsed .nav-item.has-dot:after{left:auto;right:14px}.sidebar-footer{padding:16px 20px 0;border-top:1px solid var(--border);display:flex;align-items:center;gap:12px}.btn-icon{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;cursor:pointer;font-size:16px;color:var(--text2);transition:background-color var(--d-base),border-color var(--d-base),color var(--d-base),transform var(--d-base);display:inline-flex;align-items:center;justify-content:center}.btn-icon svg{width:16px;height:16px;flex-shrink:0}.btn-icon:hover{transform:scale(1.1)}.btn-lang{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:7px 12px;cursor:pointer;font-size:12px;font-weight:600;color:var(--text2);transition:background-color var(--d-base),border-color var(--d-base),color var(--d-base)}.btn-lang:hover{background:var(--primary);color:var(--on-accent);border-color:var(--primary)}.nav-primary{display:flex;flex-direction:column;gap:4px}.nav-divider{height:1px;background:var(--border);margin:8px 12px}.nav-more-btn{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:none;border:none;cursor:pointer;width:100%;color:var(--text3);font-size:13px;font-weight:500;transition:background var(--d-base),color var(--d-base);text-align:left}.nav-more-btn:hover{background:var(--surface2);color:var(--text2)}.nav-more-btn svg{flex-shrink:0}.nav-more-icon{font-size:13px;margin-left:auto;transition:transform var(--d-base)}.nav-secondary{overflow:hidden;max-height:0;visibility:hidden;transition:max-height var(--d-slow) ease,visibility 0s linear var(--d-slow);display:flex;flex-direction:column;gap:4px}.nav-secondary.open{max-height:600px;visibility:visible;transition:max-height var(--d-slow) ease,visibility 0s}.sidebar.collapsed .nav-more-btn{justify-content:center;padding:11px 0}.sidebar.collapsed .nav-more-btn span,.sidebar.collapsed .nav-secondary{display:none}.sidebar.collapsed .nav-divider{margin:8px 4px}.nav-group-head{position:relative}.nav-group-head>.nav-item{padding-right:40px}.nav-twist{position:absolute;top:50%;right:4px;transform:translateY(-50%);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;color:var(--text3);cursor:pointer;transition:background-color var(--d-base),color var(--d-base)}.nav-twist svg{transition:transform var(--d-base)}.nav-twist:hover{background:var(--surface2);color:var(--text)}.sidebar-nav .nav-twist:focus-visible{outline-offset:-2px}.nav-group.open .nav-twist svg{transform:rotate(90deg)}.nav-group-head>.nav-item.active+.nav-twist{color:var(--on-accent)}.nav-group-head>.nav-item.active+.nav-twist:hover{background:color-mix(in srgb,var(--on-accent) 18%,transparent)}.nav-sub{list-style:none;margin:2px 0 6px 21px;padding:0 0 0 9px;border-left:1px solid var(--border);display:none;flex-direction:column;gap:2px}.nav-group.open .nav-sub{display:flex}.nav-sub-item{display:block;padding:7px 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text2);text-decoration:none;transition:background-color var(--d-base),color var(--d-base)}.nav-sub-item:hover{background:var(--surface2);color:var(--text)}.sidebar-nav .nav-sub-item:focus-visible{outline-offset:-2px}.nav-sub-item.current{background:var(--primary-soft);color:var(--accent-text);font-weight:600}.sidebar.collapsed .nav-twist,.sidebar.collapsed .nav-sub{display:none}.sidebar.collapsed .nav-group-head>.nav-item{padding-right:0}

.main-content{margin-left:var(--sidebar-w);flex:1;min-height:100vh;padding:32px;min-width:0;transition:margin-left var(--d-med)}.mobile-header{display:none}.skip-link{position:fixed;top:-100px;left:12px;z-index:10000;padding:10px 16px;background:var(--primary);color:var(--on-accent);border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;box-shadow:0 4px 20px #0000004d;transition:top .18s}.skip-link:focus{top:12px;outline:2px solid var(--surface);outline-offset:2px}.route-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px 0;color:var(--text2);font-size:14px}.route-loading-spin{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:routeLoadSpin .7s linear infinite}@keyframes routeLoadSpin{to{transform:rotate(360deg)}}.route-loading--skel{display:block;padding:var(--s-4) 0 0}.rsk{max-width:880px;margin:0 auto;padding:0 var(--s-4)}.rsk-title{height:26px;max-width:42%;margin-bottom:var(--s-3)}.rsk-sub{height:14px;max-width:62%;margin-bottom:var(--s-5)}.rsk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s-4)}.rsk-card{min-height:132px;border-radius:var(--r-card)}.rsk-hero{height:96px;border-radius:var(--r-card);margin-bottom:var(--s-4)}.rsk-chips{display:flex;gap:var(--s-3);margin-bottom:var(--s-5)}.rsk-chip{height:40px;flex:1 1 0;border-radius:999px}.rsk-lvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s-3)}.rsk-lv{height:72px;border-radius:var(--r-4)}.rsk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.route-loading--skel .skel:after{animation:none}}html[data-reduce-motion] .route-loading--skel .skel:after{animation:none}#content{view-transition-name:main-content}#content:focus,#content:focus-visible{outline:none}@keyframes route-vt-out{to{opacity:0;transform:translateY(8px)}}@keyframes route-vt-in{0%{opacity:0;transform:translateY(8px)}}::view-transition-old(main-content){animation:route-vt-out var(--d-base) var(--ease-out) forwards}::view-transition-new(main-content){animation:route-vt-in var(--d-base) var(--ease-out) forwards}@media(prefers-reduced-motion:reduce){::view-transition-group(main-content),::view-transition-old(main-content),::view-transition-new(main-content){animation:none!important}}html[data-reduce-motion]::view-transition-group(main-content),html[data-reduce-motion]::view-transition-old(main-content),html[data-reduce-motion]::view-transition-new(main-content){animation:none!important}.page{display:none}.page.active{display:block}@supports not (view-transition-name: none){.page{animation:page-fade-in var(--d-slow) ease}}@keyframes page-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.page{animation:none}}html[data-reduce-motion] .page{animation:none}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.page-header h1{font-size:26px;font-weight:700}.page-header p{color:var(--text2);margin-top:4px;font-size:14px}.bottom-nav{display:none}.modal-overlay{position:fixed;inset:0}.ai-disclaimer{margin:6px 0 0;font-size:.75rem;line-height:1.4;color:var(--text-muted)}

.btn-primary,.btn-secondary,.btn-ghost,.btn-quiet{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 24px;border-radius:var(--r-3);font-family:var(--font-ui);font-size:var(--t-body);font-weight:600;line-height:1;text-decoration:none;cursor:pointer;transition:transform var(--d-fast) var(--ease-out),box-shadow var(--d-fast) var(--ease-out),background var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out)}.btn-primary{background:var(--primary);color:var(--me-bach);border:none;box-shadow:0 4px 0 var(--chau-hong-2)}.btn-primary:hover{transform:translateY(-1px)}.btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--chau-hong-2)}.btn-secondary{background:transparent;color:var(--accent-text);border:1.5px solid var(--primary)}.btn-secondary:hover{background:var(--primary-soft)}.btn-secondary:active{transform:translateY(1px)}.btn-ghost{background:transparent;color:var(--accent-text);border:1px solid transparent;padding-inline:8px}.btn-ghost:hover{text-decoration:underline;text-underline-offset:3px}.btn-ghost:active{transform:translateY(1px)}.btn-quiet{background:var(--surface2);color:var(--text2);border:1px solid transparent}.btn-quiet:hover{color:var(--text);background:var(--hover)}.btn-quiet:active{transform:translateY(1px)}.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-ghost:focus-visible,.btn-quiet:focus-visible,.quick-add:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.btn-primary:disabled,.btn-secondary:disabled,.btn-ghost:disabled,.btn-quiet:disabled,.btn-primary[disabled],.btn-secondary[disabled],.btn-ghost[disabled],.btn-quiet[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}.btn-lg{min-height:48px;padding:12px 28px;font-size:var(--t-body-lg)}.btn-sm{min-height:32px;padding:7px 16px;font-size:var(--t-small)}.w-full{width:100%;margin-top:16px}.quick-add{width:32px;height:32px;border-radius:var(--r-2);border:1px solid var(--border);background:var(--surface2);color:var(--accent-text);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out),transform var(--d-fast) var(--ease-out);line-height:1}.quick-add:hover{background:var(--primary);color:var(--me-bach);border-color:transparent;transform:scale(1.1)}.quick-add.added{background:var(--status-mastered-bg);color:var(--status-mastered);border-color:var(--status-mastered);font-size:14px}.sr-actions .btn-secondary,.sq-btns .btn-secondary,.topic-actions .btn-secondary{background:var(--surface);color:var(--text2);border:1.5px solid var(--border)}.sr-actions .btn-secondary:hover,.sq-btns .btn-secondary:hover,.topic-actions .btn-secondary:hover{background:var(--surface2);border-color:var(--text2);color:var(--text)}kbd,.kbd{font-family:var(--font-mono, monospace);font-size:max(12px,.72em);line-height:1.6;background:var(--surface2);border:1px solid var(--border);border-bottom-width:2px;border-radius:var(--r-1, 4px);padding:0 5px;margin:0 1px;color:var(--text2);white-space:nowrap}.kbd-hint{font-size:var(--t-small);color:var(--text3);text-align:center}@media(max-width:1023px){.kbd-hint{display:none}}[data-icon]{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.14em}[data-icon]>svg{display:block}.btn-danger{background:var(--danger-bg);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 45%,transparent);box-shadow:none}.btn-danger:hover{background:color-mix(in srgb,var(--danger) 16%,var(--surface));border-color:var(--danger)}.btn-danger:active{transform:none}