@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-400-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-500-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-600-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-700-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-800-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-800-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{--chau-hong: #DC2626;--chau-hong-2: #B91C1C;--chau-hong-3: #EF4444;--accent-text: #B91C1C;--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;--lam-thanh: #4F46E5;--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: #D6D3D1;--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: #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: #57606F;--text-muted: #57606F;--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: #047857;--success-bg: #ECFDF5;--warning: #F59E0B;--warning-bg: #FFFBEB;--danger: #B91C1C;--danger-bg: #FEF2F2;--info: #4F46E5;--info-bg: #EEF2FF;--status-new: #57606F;--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: #E01313;--tone-2: #9B6406;--tone-3: #0B7E58;--tone-4: #5659FC;--tone-0: #667082;--hsk-1: #047857;--hsk-2: #0E7490;--hsk-3: #0369A1;--hsk-4: #4F46E5;--hsk-5: #7C3AED;--hsk-6: #9333EA;--hsk-7: #B45309;--hsk-8: #C2410C;--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;--font-ui: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;--font-hanzi: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif;--font-display: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;--font-hanzi-display: "Noto Serif SC", "Noto Sans SC", "PingFang SC", 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-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: 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;--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;--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(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-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;--rs-w: 260px;--topbar-h: 64px}[data-theme=dark]{--tone-1: #EF4444;--tone-2: #F59E0B;--tone-3: #10B981;--tone-4: #6366F1;--tone-0: #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-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);--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-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}[data-theme=dark] .lc-lvl,[data-theme=dark] .pc-save-badge-purple{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}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}}

.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}.sidebar.collapsed~.main-content{margin-left:64px}.sidebar-logo-img{width:36px;height:36px;object-fit:contain;border-radius:10px;flex-shrink:0;background:var(--mac-hac-2, #111827);box-shadow:0 0 0 1.5px #ffffff0f}[data-theme=light] .sidebar-logo-img{box-shadow:0 1px 6px #00000040,0 0 0 1px #00000014}.mobile-logo-img{height:38px;width:auto;max-width:160px;object-fit:contain;object-position:left center;margin-right:auto;border-radius:10px;background:var(--mac-hac-2, #111827);padding:3px 8px}.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)}.nav-item.active{background:var(--primary);color:var(--on-accent)}.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: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: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;transition:max-height var(--d-slow) ease;display:flex;flex-direction:column;gap:4px}.nav-secondary.open{max-height:600px}.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}

.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}}#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}}.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}}.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}

.right-sidebar{position:fixed;top:0;right:0;width:var(--rs-w, 260px);height:100vh;background:var(--surface);border-left:1px solid var(--border);display:none;flex-direction:column;overflow-y:auto;z-index:100;transition:transform var(--d-med) ease}.right-sidebar.collapsed{transform:translate(calc(var(--rs-w, 260px) - 28px))}@media(min-width:1280px){.right-sidebar{display:flex}.main-content:not(.rs-hidden){margin-right:calc(var(--rs-w, 260px))}}.rs-collapse-btn{position:sticky;top:0;align-self:flex-start;background:var(--surface2);border:1px solid var(--border);border-radius:0 0 8px;padding:4px 8px;cursor:pointer;font-size:18px;color:var(--text2);z-index:1;transition:transform var(--d-med)}.right-sidebar.collapsed .rs-collapse-btn{transform:rotate(180deg)}.rs-mascot{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 14px 14px;border-bottom:1px solid var(--border)}.rs-mascot-img{width:72px;height:72px;object-fit:contain;border-radius:50%;background:var(--surface2)}.rs-mascot-msg{margin:0;font-size:12px;color:var(--text2);text-align:center;line-height:1.4}.right-sidebar.collapsed .rs-mascot{display:none}.rs-inner{padding:12px 14px 24px;display:flex;flex-direction:column;gap:16px}.right-sidebar.collapsed .rs-inner{opacity:0;pointer-events:none}.rs-section{display:flex;flex-direction:column;gap:8px}.rs-section-title{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text3);letter-spacing:.05em}.rs-stats{display:flex;justify-content:space-between}.rs-stat{display:flex;flex-direction:column;align-items:center;gap:2px}.rs-stat-num{font-size:22px;font-weight:700;color:var(--accent-text)}.rs-stat-label{font-size:11px;color:var(--text2)}.rs-stat-num.is-zero,#rsXpTotal.is-zero{color:var(--text-tertiary);font-weight:500}.rs-stats-invite{font-size:12px;color:var(--text2);line-height:1.6;text-align:center;width:100%}.rs-stats-invite a{color:var(--accent-text);font-weight:600;text-decoration:none}.rs-xp-header{display:flex;justify-content:space-between;align-items:center;font-size:13px}.rs-xp-level{font-size:11px;color:var(--text2)}.rs-xp-track{height:6px;background:var(--border);border-radius:4px;overflow:hidden;margin:4px 0}.rs-xp-fill{height:100%;background:var(--primary);border-radius:4px;transition:width var(--d-slower) ease}.rs-weekly-compare{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text2)}.rs-vs-last{font-weight:600}.rs-vs-last.up{color:var(--success)}.rs-vs-last.down{color:var(--danger)}.rs-vs-last.same{color:var(--text3)}.rs-streak-cal{display:flex;gap:4px;flex-wrap:wrap}.rs-sc-day{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;min-width:28px}.rs-sc-dot{font-size:14px;line-height:1}.rs-sc-label{font-size:9px;color:var(--text3)}.rs-quick-settings{display:flex;flex-direction:column;gap:8px}.rs-qs-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text);cursor:pointer}.rs-qs-select{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:2px 6px;font-size:12px;color:var(--text);cursor:pointer}.rs-heatmap{display:grid;grid-template-columns:repeat(12,1fr);gap:2px}.rs-heatmap-col{display:grid;grid-template-rows:repeat(7,1fr);gap:2px}.hm-cell{width:11px;height:11px;border-radius:2px;background:var(--surface2);position:relative;cursor:default}.hm-cell.hm-1{background:color-mix(in srgb,var(--success) 30%,var(--surface2))}.hm-cell.hm-2{background:color-mix(in srgb,var(--success) 55%,var(--surface2))}.hm-cell.hm-3{background:color-mix(in srgb,var(--success) 78%,var(--surface2))}.hm-cell.hm-4{background:var(--success)}.rs-heatmap-legend{display:flex;gap:4px;align-items:center;font-size:11px;margin-top:6px;color:var(--text3)}.hm-cell[title]:hover:after{content:attr(title);position:absolute;bottom:16px;left:50%;transform:translate(-50%);background:var(--surface);border:1px solid var(--border);padding:2px 6px;border-radius:4px;font-size:10px;white-space:nowrap;z-index:10;color:var(--text);pointer-events:none}.rs-related-list{display:flex;flex-direction:column;gap:6px}.rs-related-item{padding:8px;background:var(--surface2);border-radius:6px;cursor:pointer;transition:background var(--d-base)}.rs-related-item:hover{background:var(--primary-soft, rgba(192,57,43,.1))}.rs-related-h{font-family:var(--font-hanzi, "Noto Sans SC", sans-serif);font-size:18px;font-weight:500}.rs-related-p{color:var(--text2);font-size:12px;margin-left:6px}.rs-related-v{color:var(--text2);font-size:13px;margin-top:2px}.rs-ctx-deck-card{display:flex;gap:10px;align-items:center;background:var(--surface2);border-radius:8px;padding:10px}.rs-ctx-deck-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.rs-ctx-deck-info{flex:1;min-width:0}.rs-ctx-deck-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rs-ctx-bar-wrap{height:4px;background:var(--border);border-radius:2px;margin:4px 0;overflow:hidden}.rs-ctx-bar-fill{height:100%;background:var(--primary);border-radius:2px}.rs-ctx-meta{font-size:11px;color:var(--text2)}.rs-ctx-btn{background:var(--primary);color:var(--on-accent);border:none;border-radius:7px;padding:7px 10px;font-size:12px;font-weight:600;cursor:pointer;width:100%;transition:opacity var(--d-fast);font-family:inherit}.rs-ctx-btn:hover{opacity:.85}.rs-ctx-big-row{display:flex;align-items:baseline;gap:6px}.rs-ctx-big-num{font-size:32px;font-weight:800;color:var(--accent-text);line-height:1}.rs-ctx-big-label{font-size:12px;color:var(--text2)}.rs-ctx-done{font-size:13px;color:var(--success);font-weight:500}.rs-ctx-tip{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2)}.rs-ctx-kbd{font-family:monospace;background:var(--bg, #0F0F1A);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:11px;color:var(--text);white-space:nowrap;flex-shrink:0}.rs-ctx-streak{font-size:12px;color:var(--text2);background:var(--surface2);border-radius:7px;padding:8px 10px;line-height:1.4}.rs-ctx-streak strong{color:var(--accent-text);font-size:14px}.rs-ctx-empty{font-size:12px;color:var(--text3);line-height:1.45}.rs-ctx-word-chips{display:flex;flex-wrap:wrap;gap:6px}.rs-ctx-word-chip{font-family:var(--font-hanzi, "Noto Sans SC", sans-serif);font-size:15px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;color:var(--text);cursor:pointer;transition:border-color var(--d-fast),color var(--d-fast)}.rs-ctx-word-chip:hover{border-color:var(--primary);color:var(--accent-text)}.toggle-group{display:flex;gap:0;border-radius:8px;overflow:hidden;border:1px solid var(--border)}.toggle-opt{padding:6px 12px;font-size:13px;border:none;background:var(--surface2);color:var(--text2);cursor:pointer;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)}.toggle-opt.active{background:var(--primary);color:var(--on-accent);font-weight:600}.setting-hint{font-size:11px;color:var(--text3);margin-top:2px}.rs-lb-board{background:var(--surface2);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:4px}.rs-lb-tabs{display:flex;border-bottom:1px solid var(--border)}.rs-lb-tab{flex:1;padding:6px 2px;font-size:10px;font-weight:600;color:var(--text2);background:transparent;border:none;cursor:pointer;text-transform:uppercase;transition:color var(--d-base),background var(--d-base);border-bottom:2px solid transparent;white-space:nowrap}.rs-lb-tab.active{background:var(--surface);color:var(--accent-text);border-bottom-color:var(--primary)}.rs-lb-tab:hover:not(.active){color:var(--text1)}.rs-lb-content{padding:8px;min-height:140px;display:flex;flex-direction:column;gap:4px}.rs-lb-loading,.rs-lb-empty{font-size:11px;color:var(--text3);text-align:center;padding:24px 0}.rs-lb-row{display:flex;align-items:center;gap:6px;padding:4px;border-radius:4px}.rs-lb-row:hover{background:var(--surface)}.rs-lb-row--me{background:#f59e0b14;border:1px solid rgba(245,158,11,.3);padding:3px}.rs-lb-row--me:hover{background:#f59e0b1f}.rs-lb-rank{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:var(--surface);border-radius:50%;font-size:10px;font-weight:700;color:var(--text2);flex-shrink:0}.rs-lb-rank--1{background:#f59e0b33;color:var(--accent-ink)}.rs-lb-rank--2{background:#94a3b833;color:var(--text1)}.rs-lb-rank--3{background:#b4530933;color:var(--bronze)}.rs-lb-name{flex:1;font-size:11px;font-weight:600;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rs-lb-score{font-size:11px;font-weight:700;color:var(--accent-text);text-align:right}.rs-lb-score span{font-size:9px;color:var(--text3);font-weight:400;margin-left:2px}

.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(--primary);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:.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}

.dl-share-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1.5px solid var(--border);border-radius:var(--r-3);background:var(--surface);color:var(--text2);font-family:var(--font-ui);font-size:13px;font-weight:500;line-height:1;cursor:pointer;transition:background var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out);white-space:nowrap}.dl-share-btn:hover,.dl-share-btn:focus-visible{background:var(--primary-soft);border-color:var(--primary);color:var(--accent-text)}.dl-share-btn:active{transform:scale(.96)}#csShareWrap{margin-top:8px;text-align:center}#csShareWrap .dl-share-btn{width:100%;justify-content:center;min-height:40px}#exShareWrap{margin-left:auto}#exShareWrap .dl-share-btn{padding:4px 10px;font-size:12px;min-height:28px;border-radius:var(--r-2)}#exRvShareWrap{margin-top:8px;text-align:center}#exRvShareWrap .dl-share-btn{width:100%;justify-content:center;min-height:40px}#rdShareWrap{margin-left:auto}#rdShareWrap .dl-share-btn{padding:4px 10px;font-size:12px;min-height:28px;border-radius:var(--r-2)}[data-theme=dark] .dl-share-btn{border-color:var(--border);background:var(--surface);color:var(--text2)}[data-theme=dark] .dl-share-btn:hover,[data-theme=dark] .dl-share-btn:focus-visible{background:var(--primary-soft);border-color:var(--primary-light);color:var(--primary-light)}@media(max-width:400px){.dl-share-btn{min-height:44px;padding:10px 16px;font-size:14px}#exShareWrap .dl-share-btn,#rdShareWrap .dl-share-btn{min-height:36px;padding:6px 12px;font-size:13px}#exShareWrap .dl-share-btn{width:36px;padding:6px;overflow:hidden;justify-content:flex-start;white-space:nowrap;text-indent:-999px}#exShareWrap .dl-share-btn:after{content:"🔗";display:block;width:22px;flex:0 0 22px;font-size:16px;line-height:1;text-align:center;text-indent:0}}

.card-hero,.card-std,.card-quiet{color:var(--text)}.card-hero{padding:var(--s-6) var(--s-8);border-radius:var(--r-5);background:linear-gradient(135deg,var(--chau-hong) 0%,var(--hoang-kim) 100%);border:2px solid var(--primary);box-shadow:var(--shadow-3);color:var(--me-bach)}.card-std{padding:var(--s-5);border-radius:var(--r-4);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-1);transition:transform var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out)}.card-std:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:var(--shadow-2)}.card-quiet{padding:var(--s-4);border-radius:var(--r-3);background:var(--surface2);border:none;box-shadow:none}.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);margin:var(--s-8) 0 var(--s-4)}.sec-title{font-size:var(--t-h3);font-weight:600;color:var(--text);line-height:var(--lh-snug)}.sec-eyebrow{font-size:var(--t-label);font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text3)}.sec-link{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--t-small);font-weight:600;color:var(--accent-text);text-decoration:none}.sec-link:hover{text-decoration:underline;text-underline-offset:3px}.home-shortcuts-header,.quest-widget-header,.hub-section-label{margin:var(--s-8) 0 var(--s-4)}.home-shortcuts-title,.lh-section-label,.tools-section-hd,.hub-section-label{font-size:var(--t-label);font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text3)}.badge-new,.badge-learning,.badge-due,.badge-mastered,.badge-pro,.badge-free,.badge-soon{display:inline-flex;align-items:center;justify-content:center;min-height:20px;padding:2px 8px;border-radius:var(--r-pill);font-size:var(--t-label);font-weight:600;line-height:1;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;white-space:nowrap}.badge-new{background:var(--status-new-bg);color:var(--status-new)}.badge-learning{background:var(--status-learning-bg);color:var(--status-learning)}.badge-due{background:var(--status-due-bg);color:var(--status-due)}.badge-mastered{background:var(--status-mastered-bg);color:var(--status-mastered)}.badge-pro{background:color-mix(in srgb,var(--pro-gem) 8%,var(--surface));color:var(--accent-ink)}.badge-free{background:var(--status-mastered-bg);color:var(--status-mastered)}.badge-soon{background:var(--surface2);color:var(--text3);border:1px solid var(--border)}.prog-track,.lh-cont-bar-wrap,.lh-rc-progbar,.dac-bar-track,.xp-bar-track,.hcc-bar{height:6px;background:var(--surface2);border-radius:var(--r-pill);overflow:hidden}.prog-fill,.lh-cont-bar,.lh-rc-progfill,.dac-bar-fill,.xp-bar-fill,.hcc-bar-fill{height:100%;background:var(--primary);border-radius:var(--r-pill);transition:width var(--d-slow) var(--ease-out)}.prog-fill[style*="100%"],.lh-cont-bar[style*="100%"],.lh-rc-progfill[style*="100%"],.dac-bar-fill[style*="100%"],.xp-bar-fill[style*="100%"],.hcc-bar-fill[style*="100%"]{background:var(--thuy-luc)}.lh-util-chip{min-height:36px;display:inline-flex;align-items:center;gap:var(--s-2);padding:0 var(--s-4);background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-pill);color:var(--text2);font-size:var(--t-small);font-weight:600;transition:background var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out)}.lh-util-chip:hover{background:var(--primary-soft);border-color:var(--primary);color:var(--accent-text)}.lh-util-chip svg{width:16px;height:16px}.tool-card{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-card);text-decoration:none;color:var(--text);transition:border-color var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out),transform var(--d-base) var(--ease-out);cursor:pointer;position:relative}.tool-card:hover{border-color:var(--chau-hong);box-shadow:var(--shadow-2);transform:translateY(-2px)}.tool-card--locked{opacity:.6;cursor:default}.tool-card--featured{border-color:var(--primary);box-shadow:var(--shadow-2)}.tool-card--featured:hover{border-color:var(--primary)}.tool-card-icon{width:52px;height:52px;border-radius:var(--r-3);display:flex;align-items:center;justify-content:center;flex-shrink:0}.tc-icon--red{background:var(--status-due-bg);color:var(--accent-text)}.tc-icon--green{background:var(--status-mastered-bg);color:var(--success)}.tc-icon--gold{background:var(--status-learning-bg);color:var(--accent-ink)}.tc-icon--indigo{background:var(--info-bg);color:var(--info)}.tc-icon--neutral,.tc-icon--locked{background:var(--surface2);color:var(--fg-4)}.tool-card-body{flex:1;min-width:0}.tool-card-name{font-size:var(--t-body-lg);font-weight:700;line-height:var(--lh-snug);color:var(--text);margin-bottom:3px}.tool-card-desc{font-size:var(--t-small);color:var(--text2);line-height:var(--lh-snug)}.tool-badge{flex-shrink:0;font-size:10px;font-weight:700;padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap}.tool-badge--available{background:var(--status-mastered-bg);color:var(--status-mastered)}.tool-badge--soon{background:var(--surface2);color:var(--text3);border:1px solid var(--border)}.tool-badge--pro{background:color-mix(in srgb,var(--pro-gem) 8%,var(--surface));color:var(--accent-ink)}.tool-badge--ai{background:var(--info-bg);color:var(--info)}.tool-badge--new{background:var(--status-new-bg);color:var(--status-new)}.tool-badge--due{background:var(--status-due-bg);color:var(--status-due)}.hz-ruby ruby{ruby-align:center;display:inline-flex;flex-direction:column-reverse;align-items:center;vertical-align:bottom;line-height:1.15;margin:0 .02em}.hz-ruby rt{font-size:.55em;color:var(--text-muted);font-weight:400;line-height:1.3;letter-spacing:0;user-select:none;transition:opacity var(--d-fast),max-height var(--d-fast)}.hz-ruby .hz-punct{white-space:pre-wrap}.hz-ruby--hidepy rt{opacity:0;max-height:0;overflow:hidden;font-size:0}.page-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--surface2),var(--surface));border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s-5) var(--s-6);margin-bottom:var(--s-5)}.page-hero[data-wm]:before{content:attr(data-wm);position:absolute;right:-.06em;top:50%;transform:translateY(-50%);font-family:var(--font-hanzi-display, var(--font-hanzi));font-size:148px;line-height:1;color:var(--text);opacity:.045;pointer-events:none;user-select:none}[data-theme=dark] .page-hero[data-wm]:before{opacity:.06}.page-hero__body{position:relative;z-index:1}.page-hero__title{font-size:var(--t-h2);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--tracking-display);color:var(--text);margin:0 0 var(--s-1)}.page-hero__sub{font-size:var(--t-small);color:var(--text2);margin:0}.page-hero__stats{display:flex;gap:var(--s-6);margin-top:var(--s-4);flex-wrap:wrap}.page-hero__stat{display:flex;flex-direction:column;gap:2px}.page-hero__stat-num{font-size:var(--t-h3);font-weight:700;color:var(--text);line-height:1}.page-hero__stat-lbl{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text3)}.page-hero__bar{position:relative;z-index:1;height:6px;border-radius:999px;background:var(--surface2);overflow:hidden;margin-top:var(--s-4)}.page-hero__bar-fill{height:100%;border-radius:999px;background:var(--primary);transition:width var(--d-slow) var(--ease-out)}@media(max-width:480px){.page-hero{padding:var(--s-4)}.page-hero[data-wm]:before{font-size:104px}.page-hero__stats{gap:var(--s-5)}}.cs-node-chips,.chip-ex-row{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:auto;padding-left:var(--s-3)}.chip-ex{font-size:10px;font-weight:700;line-height:1.6;padding:0 6px;border-radius:999px;white-space:nowrap;background:var(--surface2);color:var(--text3)}.chip-ex--fill{background:var(--info-bg);color:var(--info)}.chip-ex--listen{background:var(--success-bg);color:var(--success)}.chip-ex--dictation{background:var(--warning-bg);color:var(--accent-ink)}.chip-ex--order{background:var(--danger-bg);color:var(--accent-text)}.chip-ex--translate{background:color-mix(in srgb,var(--hsk-5) 12%,var(--surface));color:var(--hsk-5)}.chip-ex--more{background:var(--surface2);color:var(--text3)}@media(max-width:640px){.cs-node-chips{display:none}}

.modal-overlay{display:none;position:fixed;inset:0;background:#0009;backdrop-filter:blur(4px);z-index:1000;align-items:center;justify-content:center;padding:20px}.modal-overlay.open{display:flex}.modal{background:var(--surface);border-radius:20px;padding:32px;max-width:400px;width:100%;position:relative;animation:modal-slide-up var(--d-slow) ease}@keyframes modal-slide-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.modal-close{position:absolute;top:16px;right:16px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--text2)}.modal-hanzi{font-family:var(--font-hanzi);font-size:64px;text-align:center;margin-bottom:8px}.modal-pinyin{text-align:center;color:var(--accent-ink);font-size:20px;font-weight:500;margin-bottom:8px}.modal-level{text-align:center;margin-bottom:20px}.modal-level span{background:var(--primary);color:var(--on-accent);font-size:12px;padding:3px 10px;border-radius:8px}.modal-meanings{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;background:var(--surface2);border-radius:12px;padding:16px}.meaning-row{display:flex;align-items:center;gap:12px;font-size:16px}.lang-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px}.lang-badge.vi{background:var(--warning-bg);color:var(--status-learning)}.lang-badge.en{background:var(--info-bg);color:var(--info)}.modal-example{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:16px}.ex-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}.ex-zh{font-family:var(--font-hanzi);font-size:16px;color:var(--text);margin-bottom:4px;line-height:1.5}.ex-py{font-size:12px;color:var(--accent-ink);margin-bottom:6px}.ex-vi{font-size:13px;color:var(--text2);margin-bottom:2px}.ex-vi:before{content:"🇻🇳 "}.ex-en{font-size:13px;color:var(--text3)}.ex-en:before{content:"🇬🇧 "}.coming-soon-banner{text-align:center;padding:40px 20px;background:var(--surface);border:1px dashed var(--border);border-radius:16px;color:var(--text2)}.coming-soon-banner .cs-icon{font-size:48px;margin-bottom:12px}.coming-soon-banner h3{font-size:18px;margin-bottom:8px;color:var(--text)}.coming-soon-banner p{font-size:14px}.comeback-overlay{background:var(--overlay)}.comeback-modal{max-width:430px;text-align:center;border:1px solid var(--border);box-shadow:var(--shadow-4)}.comeback-icon{font-size:44px;line-height:1;margin-bottom:14px}.comeback-modal h2{color:var(--text);font-size:var(--t-h2);margin-bottom:10px}.comeback-intro{color:var(--text2);font-size:var(--t-body);line-height:1.6;margin-bottom:20px}.comeback-achievements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:22px}.comeback-achievement{display:flex;flex-direction:column;gap:4px;padding:14px 10px;border:1px solid var(--border);border-radius:var(--r-3);background:var(--info-bg);color:var(--text2)}.comeback-achievement strong{color:var(--info);font-size:var(--t-h2)}.comeback-achievement span{font-size:var(--t-small)}.comeback-actions{display:flex;flex-direction:column;gap:10px}.comeback-cta,.comeback-reset{min-height:46px;width:100%;border-radius:var(--r-3);font-family:var(--font-ui);font-size:var(--t-body);font-weight:700;cursor:pointer;transition:transform var(--d-fast) var(--ease-out),opacity var(--d-fast) var(--ease-out)}.comeback-cta{border:1px solid var(--info);background:var(--info);color:var(--on-accent)}.comeback-reset{border:1px solid var(--border);background:var(--surface2);color:var(--text)}.comeback-cta:hover,.comeback-reset:hover{transform:translateY(-1px)}.comeback-cta:focus-visible,.comeback-reset:focus-visible{outline:2px solid var(--info);outline-offset:2px}.comeback-reset-note{color:var(--text3);font-size:var(--t-small);line-height:1.45}@media(max-width:420px){.comeback-overlay{padding:14px}.comeback-modal{padding:26px 18px}}.settings-overlay{position:fixed;inset:0;background:#0009;z-index:1200;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px);animation:modal-fade-in var(--d-base) ease}.settings-modal{background:var(--bg);border:1px solid var(--border);border-radius:20px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;padding:0;box-shadow:0 20px 60px #00000080;animation:modal-slide-up var(--d-med) ease}.sm-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:1;border-radius:20px 20px 0 0}.sm-header h2{margin:0;font-size:17px;font-weight:700}.sm-header-actions{display:flex;align-items:center;gap:10px}.sm-reset-link{background:none;border:none;color:var(--text2);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:4px}.sm-reset-link:hover{color:var(--accent-text)}.sm-close{background:var(--surface);border:1px solid var(--border);border-radius:50%;width:32px;height:32px;font-size:14px;cursor:pointer;color:var(--text2);transition:var(--d-base)}.sm-close:hover{background:var(--chau-hong);color:var(--on-accent);border-color:transparent}.sm-section{padding:16px 24px;border-bottom:1px solid var(--border)}.sm-section:last-of-type{border-bottom:none}.sm-section-title{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}.sm-lang-row{display:flex;gap:10px}.sm-lang-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border:2px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:14px;font-weight:600;cursor:pointer;transition:border-color var(--d-fast),background var(--d-fast)}.sm-lang-btn.active{border-color:var(--primary);background:var(--primary);color:var(--on-accent)}.sm-lang-btn:not(.active):hover{border-color:var(--primary)}.sm-lang-flag{font-size:18px}.sm-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--border)}.sm-row:last-child{border-bottom:none}.sm-row>label{font-size:14px;color:var(--text);flex:1;cursor:default}.sm-row-info{display:flex;flex-direction:column;gap:2px;flex:1}.sm-row-label{font-size:14px;font-weight:500;color:var(--text)}.sm-row-desc{font-size:12px;color:var(--text2)}.sm-control{flex-shrink:0}.sm-color-row{display:flex;gap:12px;flex-wrap:wrap}.sm-color-dot{width:34px;height:34px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:transform var(--d-fast),border-color var(--d-fast)}.sm-color-dot:hover{transform:scale(1.15)}.sm-color-dot.active{border-color:var(--text);transform:scale(1.1)}.sm-collapse-btn{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;color:var(--text2);font-size:14px;font-weight:600;cursor:pointer;padding:0;text-align:left}.sm-collapse-btn:hover{color:var(--accent-text)}.sm-collapse-icon{font-size:18px;transition:transform var(--d-base)}.sm-collapse-icon.open{transform:rotate(90deg)}.sm-advanced{margin-top:14px;display:flex;flex-direction:column;gap:0}.sm-adv-save{padding-top:12px;display:flex;justify-content:flex-end}.sm-control input[type=number],.sm-control select{background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;padding:6px 10px;width:100px;text-align:center;font-family:var(--font-ui)}.sm-control select{width:180px;text-align:left;cursor:pointer}.sm-control input:focus,.sm-control select:focus{outline:none;border-color:var(--primary)}.sm-toggle{position:relative;display:inline-block;width:46px;height:26px;cursor:pointer}.sm-toggle input{opacity:0;width:0;height:0}.sm-slider{position:absolute;inset:0;background:var(--surface2);border-radius:26px;border:1px solid var(--border);transition:var(--d-slow)}.sm-slider:before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:var(--surface);bottom:2px;left:2px;transition:var(--d-slow);box-shadow:0 1px 4px #0000004d}.sm-toggle input:checked+.sm-slider{background:var(--primary);border-color:var(--primary)}.sm-toggle input:checked+.sm-slider:before{transform:translate(20px)}.sm-actions{display:flex;gap:12px;padding:16px 24px 20px;position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--border)}.sm-btn-reset{flex:1;padding:11px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--text2);font-size:14px;font-weight:600;cursor:pointer;transition:var(--d-base);font-family:var(--font-ui)}.sm-btn-reset:hover{border-color:var(--primary);color:var(--accent-text)}.sm-btn-save{flex:2;padding:11px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--accent));border:none;color:var(--on-accent);font-size:14px;font-weight:700;cursor:pointer;transition:var(--d-base);font-family:var(--font-ui);box-shadow:0 4px 12px #6366f14d}.sm-btn-save:hover{transform:translateY(-1px);box-shadow:0 6px 18px #6366f166}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes pmSpin{to{transform:rotate(360deg)}}.streak-card{position:relative;overflow:hidden}.streak-card .stat-num{color:var(--accent-ink)}.streak-fire{font-size:24px;vertical-align:middle;margin-left:2px}.sm-footer{text-align:center;padding:14px 24px;font-size:12px;color:var(--text3);border-top:1px solid var(--border);margin-top:8px}.sm-footer a{color:var(--text3);text-decoration:none}.sm-footer a:hover{color:var(--accent-text)}.sf-dot{margin:0 6px}.auth-legal{font-size:10px;color:var(--text3);text-align:center;margin-top:8px;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.auth-legal a{color:var(--text3);text-decoration:underline}.auth-legal a:hover{opacity:1;color:var(--accent-text)}.pro-gate-overlay{position:fixed;inset:0;background:#0009;z-index:9000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}.pro-gate-card{background:var(--surface);border-radius:20px;padding:32px 28px;max-width:320px;width:90%;text-align:center;border:1.5px solid var(--border)}.pro-gate-icon{font-size:40px;margin-bottom:12px}.pro-gate-card h2{font-size:18px;font-weight:700;margin-bottom:8px}.pro-gate-card p{font-size:14px;color:var(--text2);margin-bottom:20px}.pro-gate-cta{display:block;width:100%;padding:12px;border-radius:10px;background:var(--primary);color:var(--on-accent);border:none;font-size:15px;font-weight:700;cursor:pointer;margin-bottom:10px;transition:opacity var(--d-fast)}.pro-gate-cta:hover{opacity:.88}.pro-gate-close{display:block;width:100%;padding:10px;border-radius:10px;border:1.5px solid var(--border);background:none;color:var(--text2);font-size:14px;cursor:pointer;transition:border-color var(--d-fast)}.pro-gate-close:hover{border-color:var(--primary)}

.modal-overlay{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:3000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity var(--d-med)}.modal-overlay.open{opacity:1;pointer-events:all}body.wd-modal-open{overflow:hidden}.wd-modal{background:var(--surface);border-radius:20px;max-width:520px;width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-4);animation:wdSlideUp var(--d-med) var(--ease-out) both}.wd-modal--dragging{animation:none;transition:none}.wd-drag-handle{display:none}@keyframes wdSlideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.wd-header{height:60px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);flex-shrink:0}.wd-header-left{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden}.wd-level-wrap{display:flex;align-items:center;flex-shrink:0}.wd-level-wrap span{font-size:12px;font-weight:700;letter-spacing:.05em;padding:5px 12px;border-radius:999px;background:var(--primary);color:var(--me-bach);white-space:nowrap;line-height:1}.wd-crumb{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wd-close{width:44px;height:44px;border-radius:12px;border:none;background:transparent;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--d-fast),color var(--d-fast);flex-shrink:0}.wd-close:hover{background:var(--surface2);color:var(--text)}.wd-body{flex:1;overflow-y:auto;padding:20px 22px 24px;scrollbar-width:thin;min-height:360px;overscroll-behavior:contain}.wd-body::-webkit-scrollbar{width:6px}.wd-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}.wd-hero{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:flex-start;padding:8px 0 4px;min-height:120px}.wd-hero-text{min-width:0}.wd-hanzi{font-family:var(--font-hanzi);font-size:72px;font-weight:700;line-height:1;color:var(--text);letter-spacing:-.01em}.wd-hero-pinyin-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}.wd-pinyin{font-size:24px;font-weight:400;color:var(--accent-ink);letter-spacing:.01em}.wd-pos-chip{font-size:11px;font-weight:600;letter-spacing:.4px;color:var(--text3);background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:2px 9px;white-space:nowrap}.wd-waveform{display:none;align-items:flex-end;gap:3px;height:22px;margin-top:10px}.wd-modal--playing .wd-waveform{display:flex}.wd-waveform span{width:3px;border-radius:999px;background:var(--primary);animation:wdWave .8s var(--ease-in-out) infinite;height:30%}.wd-waveform span:nth-child(1){animation-delay:0s;height:35%}.wd-waveform span:nth-child(2){animation-delay:.07s;height:85%}.wd-waveform span:nth-child(3){animation-delay:.14s;height:55%}.wd-waveform span:nth-child(4){animation-delay:.21s;height:100%}.wd-waveform span:nth-child(5){animation-delay:.28s;height:45%}.wd-waveform span:nth-child(6){animation-delay:.35s;height:75%}.wd-waveform span:nth-child(7){animation-delay:.42s;height:30%}.wd-waveform span:nth-child(8){animation-delay:.49s;height:65%}@keyframes wdWave{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}.wd-hero-actions{display:grid;grid-template-columns:repeat(3,40px);grid-auto-rows:40px;gap:8px;padding-top:4px}.wd-icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color var(--d-fast),border-color var(--d-fast),color var(--d-fast),box-shadow var(--d-fast),transform var(--d-fast),opacity var(--d-fast),filter var(--d-fast)}.wd-icon-btn svg{width:16px;height:16px}.wd-icon-btn:hover{background:var(--surface2);color:var(--text)}.wd-icon-btn--accent{color:var(--accent-text);border-color:#dc26264d}.wd-icon-btn--accent:hover{background:var(--primary);color:var(--me-bach);border-color:var(--primary)}.wd-modal--playing .wd-icon-btn--accent{background:var(--primary);color:var(--me-bach);border-color:var(--primary);box-shadow:0 4px 14px #dc262659}.wd-stroke-container{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:16px;margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:10px}.wd-stroke-btns{display:flex;gap:8px}.wd-stroke-btn{background:var(--primary);color:var(--me-bach);border:none;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity var(--d-fast),transform var(--d-fast);font-family:var(--font-ui)}.wd-stroke-btn:hover{opacity:.85;transform:translateY(-1px)}.wd-stroke-btn--outline{background:transparent;border:1.5px solid var(--primary);color:var(--accent-text)}.wd-stroke-btn--outline:hover{background:var(--primary);color:var(--me-bach)}.wd-section{margin-top:22px}.wd-section-title{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin-bottom:10px}.wd-meanings{display:flex;flex-direction:column;gap:8px}.wd-meaning-row{display:flex;align-items:baseline;gap:10px;padding:3px 0}.wd-lang-badge{font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:6px;color:var(--me-bach);flex-shrink:0;line-height:1.5}.wd-lang-badge--vi{background:var(--hoang-kim)}.wd-lang-badge--en{background:var(--info)}.wd-meaning-text{font-size:17px;font-weight:500;color:var(--text);line-height:1.4}.wd-meaning-text--en{font-size:15px;font-weight:400;color:var(--text2)}.wd-example-section{margin-top:22px}.wd-example-card{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}.wd-ex-zh{font-family:var(--font-hanzi);font-size:18px;color:var(--text);line-height:1.5;margin-bottom:2px}.wd-ex-py{font-size:13px;color:var(--accent-ink)}.wd-ex-vi{font-size:13px;color:var(--text2)}.wd-ex-en{font-size:12px;color:var(--text3);font-style:italic}.wd-example-card--empty{align-items:center;text-align:center;background:var(--surface);border-style:dashed;padding:22px 16px}.wd-example-card--empty .wd-ex-zh{font-family:inherit;font-size:14px;color:var(--text3);margin-bottom:0}.wd-example-card--empty .wd-ex-py,.wd-example-card--empty .wd-ex-vi,.wd-example-card--empty .wd-ex-en{display:none}.wd-footer{height:68px;padding:0 18px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);flex-shrink:0}.wd-footer-right{display:flex;gap:8px}.wd-btn{font-family:var(--font-ui);font-size:14px;font-weight:600;padding:9px 16px;border-radius:10px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background-color var(--d-fast),border-color var(--d-fast),color var(--d-fast),box-shadow var(--d-fast),transform var(--d-fast),opacity var(--d-fast),filter var(--d-fast);letter-spacing:.005em;white-space:nowrap;min-height:44px}.wd-btn svg{width:14px;height:14px;flex-shrink:0}.wd-btn--ghost{color:var(--text2);background:transparent;border-color:transparent}.wd-btn--ghost:hover{background:var(--surface2);color:var(--text)}.wd-btn--outline{color:var(--accent-text);border-color:#dc262666;background:transparent}.wd-btn--outline:hover{background:#dc262612;border-color:var(--primary)}.wd-btn--primary{color:var(--me-bach);background:var(--primary);box-shadow:0 4px 0 var(--chau-hong-2)}.wd-btn--primary:hover{transform:translateY(-1px);box-shadow:0 7px 20px #dc262666}[data-theme=dark] .wd-level-wrap span{box-shadow:0 0 0 1px #ef44444d,0 4px 12px #dc26264d}[data-theme=dark] .wd-hanzi{text-shadow:0 0 24px rgba(245,158,11,.12)}[data-theme=dark] .wd-btn--outline{border-color:color-mix(in srgb,var(--primary) 45%,transparent);color:color-mix(in srgb,var(--primary) 65%,var(--me-bach))}[data-theme=dark] .wd-btn--outline:hover{background:var(--primary-soft);color:color-mix(in srgb,var(--primary) 80%,var(--me-bach))}@media(max-width:767px){.modal-overlay{align-items:flex-end;padding:0;overscroll-behavior:none}.wd-modal{border-radius:20px 20px 0 0;max-height:calc(94dvh - env(safe-area-inset-top));touch-action:pan-y}.wd-drag-handle{height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;touch-action:none}.wd-drag-handle span{width:42px;height:4px;border-radius:var(--r-pill);background:var(--border-strong)}.wd-header{height:52px;padding-left:18px;touch-action:none}.wd-hanzi{font-size:58px}.wd-pinyin{font-size:20px}.wd-body{min-height:0;padding:16px 18px 20px}.wd-footer{height:auto;padding:12px 18px calc(12px + env(safe-area-inset-bottom));flex-wrap:wrap}.wd-footer-right{flex:1}.wd-btn--primary{flex:1;justify-content:center}}.w-full{width:100%}.sr-xp{font-size:22px;font-weight:700;color:var(--accent-ink);text-align:center;margin:8px 0}.deck-list-view{display:flex;flex-direction:column;gap:2px}.hsk-list-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 16px;transition:var(--d-base);margin-bottom:2px}.hsk-list-row:hover{border-color:var(--primary);background:var(--surface2)}.hsk-expand-btn{background:var(--surface2);border:1px solid var(--border);border-radius:8px;width:28px;height:28px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out),transform var(--d-base) var(--ease-out);flex-shrink:0;color:var(--text2)}.hsk-expand-btn:hover{background:var(--primary);color:var(--me-bach);border-color:transparent}.hsk-expand-btn.expanded{transform:rotate(90deg)}.hsk-row-icon{font-size:22px;flex-shrink:0}.hsk-row-dot{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--me-bach)}.hsk-row-info{flex:1}.hsk-row-title{font-size:15px;font-weight:700;color:var(--text)}.hsk-row-sub{font-size:12px;color:var(--text2);margin-top:2px}.hsk-row-badges{display:flex;gap:4px;flex-wrap:wrap}.btn-learn-deck{background:var(--primary);color:var(--me-bach);border:none;border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:opacity var(--d-base) var(--ease-out),transform var(--d-fast) var(--ease-out);white-space:nowrap;flex-shrink:0;font-family:var(--font-ui)}.btn-learn-deck:hover{opacity:.85;transform:translateY(-1px)}.hsk-sub-row{align-items:center;gap:10px;padding:9px 16px 9px 40px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;margin-bottom:2px;transition:var(--d-base)}.hsk-sub-row:hover{border-color:var(--accent)}.hsk-sub-indent{color:var(--text3);font-size:14px;flex-shrink:0}.hsk-sub-icon{font-size:16px;flex-shrink:0}.hsk-sub-name{font-size:14px;font-weight:600;color:var(--text);flex:1}.hsk-sub-count{font-size:12px;color:var(--text2);white-space:nowrap}.hsk-sub-badges{display:flex;gap:4px}.btn-learn-sub{background:var(--surface);border:1px solid var(--primary);color:var(--accent-text);border-radius:8px;padding:5px 12px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:4px;cursor:pointer;transition:background var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out);white-space:nowrap;font-family:var(--font-ui)}.btn-learn-sub:hover{background:var(--primary);color:var(--me-bach)}.srs-badge{font-size:11px;font-weight:600;border-radius:6px;padding:2px 7px;white-space:nowrap}.srs-new{background:var(--info-bg);color:var(--info)}.srs-due{background:var(--status-learning-bg);color:var(--status-learning)}.srs-relearn{background:var(--danger-bg);color:var(--danger)}.srs-done{background:var(--status-mastered-bg);color:var(--status-mastered)}.deck-srs-badges{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0 2px}.deck-srs-stats{gap:8px;flex-wrap:wrap;padding:10px 0;margin-bottom:4px}.srs-stat{font-size:13px;font-weight:600;padding:5px 12px;border-radius:8px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}.srs-stat-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}.srs-stat.srs-new{background:var(--info-bg);color:var(--info)}.srs-stat.srs-due{background:var(--status-learning-bg);color:var(--status-learning)}.srs-stat.srs-relearn{background:var(--danger-bg);color:var(--danger)}.xp-bar-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin-bottom:16px}.xp-bar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.xp-label{font-size:14px;font-weight:700;color:var(--accent-ink)}.xp-level-label{font-size:12px;color:var(--text2)}.xp-bar-track{height:8px;background:var(--surface2);border-radius:99px;overflow:hidden}.xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:99px;transition:width .6s ease}.xp-bar-footer{font-size:12px;color:var(--text2);margin-top:6px}.streak-calendar{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin-bottom:20px}.sc-title{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:10px}.sc-days{display:flex;gap:6px;justify-content:space-between}.sc-day{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;padding:8px 4px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);transition:var(--d-base)}.sc-day.active{background:color-mix(in srgb,var(--hsk-8) 12%,transparent);border-color:var(--hsk-8)}.sc-day.today{border-color:var(--primary);box-shadow:0 0 0 2px rgba(var(--primary-rgb),.2)}.sc-dot{font-size:18px;line-height:1}.sc-label{font-size:10px;color:var(--text2);font-weight:600}.sc-day.active .sc-label{color:var(--hsk-8)}.wd-confusion-section{margin-top:18px}.wd-confusion-card{background:color-mix(in srgb,var(--accent) 7%,var(--surface2));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-left:3px solid var(--accent);border-radius:12px;padding:13px 15px;display:flex;flex-direction:column;gap:8px}.wd-conf-note{font-size:13px;color:var(--text);line-height:1.55;margin:0}.wd-conf-ex{display:flex;flex-direction:column;gap:2px;padding-top:8px;border-top:1px dashed var(--border)}.wd-conf-ex-zh{font-family:var(--font-hanzi);font-size:15px;color:var(--text)}.wd-conf-ex-py{font-size:12px;color:var(--accent-ink)}.wd-conf-ex-vi{font-size:12px;color:var(--text2)}.wd-conf-title,.dd-conf-title{display:flex;align-items:center;flex-wrap:wrap;gap:5px}.dd-conf-link{border:0;border-bottom:1px solid currentColor;padding:0 1px;background:transparent;color:var(--accent-text);font:inherit;font-family:var(--font-hanzi);font-size:14px;font-weight:800;line-height:1.4;cursor:pointer}.dd-conf-link:hover{color:var(--accent-text)}.dd-conf-link:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--r-1)}.dd-conf-sep{color:var(--text3)}.wd-icon-btn--save{color:var(--accent-ink);border-color:color-mix(in srgb,var(--hoang-kim) 30%,var(--border))}.wd-icon-btn--save:hover{background:#f59e0b1f;border-color:var(--hoang-kim);color:var(--accent-ink)}.wd-icon-btn--save.is-saved{background:#f59e0b2e;border-color:var(--hoang-kim);color:var(--accent-ink)}[data-theme=dark] .wd-icon-btn--save{color:var(--hoang-kim-3);border-color:color-mix(in srgb,var(--hoang-kim-3) 30%,var(--border))}[data-theme=dark] .wd-icon-btn--save:hover,[data-theme=dark] .wd-icon-btn--save.is-saved{background:#f59e0b26;border-color:var(--hoang-kim-3);color:var(--hoang-kim-3)}.dd-srs-row,.wd-srs-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;font-size:13px}.dd-srs-dot,.wd-srs-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.dd-srs-dot--new,.wd-srs-dot--new{background:var(--info)}.dd-srs-dot--learned,.wd-srs-dot--learned{background:var(--thuy-luc)}.dd-srs-label,.wd-srs-label{color:var(--text);font-weight:500}.dd-srs-due,.wd-srs-due{color:var(--text3);font-size:12px;margin-left:auto}.dd-srs-due{flex:0 0 calc(100% - 16px);margin-left:16px}.dd-srs-lapses,.wd-srs-lapses{flex:0 0 100%;padding-left:16px;color:var(--text2);font-size:12px}.dd-srs--due,.wd-srs--due{border-color:var(--status-learning);background:var(--status-learning-bg)}.dd-srs--new,.wd-srs--new{border-color:var(--info);background:var(--info-bg)}.dd-srs-cta,.wd-srs-cta{margin-top:6px;padding:8px 16px;border-radius:var(--r-pill);border:1.5px solid var(--primary);background:var(--primary-soft);color:var(--accent-text);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-ui);display:inline-flex;align-items:center;gap:6px;transition:background var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out)}.dd-srs-cta:hover,.wd-srs-cta:hover{background:var(--primary);color:var(--me-bach)}.wd-hanzi{font-size:52px;color:var(--accent-text)}

.deck-tabs{display:flex;gap:var(--s-5);margin-bottom:20px;border-bottom:1px solid var(--border)}.dtab{padding:10px 2px;border:none;background:none;color:var(--text2);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font-ui);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out)}.dtab:hover{color:var(--text)}.dtab.active{color:var(--accent-text);border-bottom-color:var(--primary)}.deck-view-toggle{display:flex;gap:6px}.dvt-btn{width:34px;height:34px;border-radius:var(--r-2);border:1px solid var(--border);background:var(--surface);color:var(--text2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out)}.dvt-btn:hover{color:var(--text);border-color:var(--primary)}.dvt-btn.active{background:var(--primary);color:var(--me-bach);border-color:transparent}.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.deck-grid.list-view{grid-template-columns:1fr;gap:10px}.deck-avatar{--deck-avatar-color: var(--primary);width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--deck-avatar-color) 42%,var(--border));background:color-mix(in srgb,var(--deck-avatar-color) 14%,var(--surface));color:var(--deck-avatar-color);font-size:21px;line-height:1}.deck-avatar--system{font-family:var(--font-ui);font-size:17px;font-weight:800}.deck-avatar--compact{width:34px;height:34px;font-size:17px}.deck-avatar--compact.deck-avatar--system{font-size:14px}.deck-avatar--large{width:44px;height:44px;font-size:22px}.deck-avatar--large.deck-avatar--system{font-size:18px}.deck-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;cursor:pointer;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:var(--shadow);position:relative}.deck-card:hover{transform:translateY(-3px);border-color:var(--primary);box-shadow:var(--shadow-2)}.deck-card-icon{margin-bottom:8px}.deck-card-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:4px}.deck-card-count{font-size:12px;color:var(--text2);margin-bottom:10px}.deck-progress-bar{height:6px;margin-bottom:6px}.deck-progress-fill{height:100%;border-radius:var(--r-pill);background:var(--primary);transition:width var(--d-slow) var(--ease-out)}.deck-progress-pct{font-size:11px;color:var(--text3);margin-bottom:10px}.deck-card-actions{display:flex;gap:8px;margin-top:12px}.deck-card-actions .btn-primary{flex:1;padding:8px;font-size:13px}.deck-card-menu{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--text3);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:6px;transition:var(--d-base)}.deck-card-menu:hover{background:var(--surface2);color:var(--text)}.deck-card-due{font-size:11px;color:var(--accent-ink);font-weight:600}.deck-grid.list-view .deck-card{display:flex;align-items:center;gap:16px;padding:14px 20px}.deck-grid.list-view .deck-card-icon{margin-bottom:0;flex-shrink:0}.deck-grid.list-view .deck-card-body{flex:1}.deck-grid.list-view .deck-card-title{font-size:15px;margin-bottom:2px}.deck-grid.list-view .deck-card-count{margin-bottom:4px}.deck-grid.list-view .deck-progress-bar{margin-bottom:0}.deck-grid.list-view .deck-card-actions{margin-top:0;flex-shrink:0}.deck-card-create{border:2px dashed var(--border);background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text3);min-height:140px;font-size:14px;font-weight:500}.deck-card-create:hover{border-color:var(--primary);color:var(--accent-text);transform:translateY(-3px)}.deck-card-create .plus{font-size:32px}.my-decks-toolbar{display:flex;gap:10px;margin-bottom:16px}.btn-outline{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;transition:var(--d-base)}.btn-outline:hover{border-color:var(--primary);color:var(--accent-text)}.btn-back{font-family:var(--font-ui)}.deck-detail-meta{display:flex;gap:16px;margin-bottom:20px}.deck-detail-meta span{font-size:14px;font-weight:600;color:var(--text2);background:var(--surface2);padding:4px 12px;border-radius:20px}.mode-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:8px}.mode-btn{background:var(--surface);border:2px solid var(--border);border-radius:14px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:22px;cursor:pointer;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);color:var(--text)}.mode-btn span{font-size:12px;font-weight:600;color:var(--text2);text-align:center;line-height:1.3}.mode-btn small{font-size:10px;color:var(--text3)}.mode-btn:hover:not(.disabled){border-color:var(--primary);transform:translateY(-2px)}.mode-btn.active{border-color:var(--primary);background:#c0392b14}.mode-btn.active span{color:var(--accent-text)}.mode-btn.disabled{opacity:.5;cursor:default}.deck-word-preview{margin-top:20px}.deck-word-preview-label{font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;margin-bottom:10px}.preview-word-grid{display:flex;flex-wrap:wrap;gap:8px}.preview-word-chip{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-family:var(--font-hanzi);font-size:16px;color:var(--text)}.preview-word-chip small{font-size:11px;color:var(--text2);margin-left:4px;font-family:var(--font-ui)}.vault-deck-list{display:flex;flex-direction:column;gap:12px}.vault-deck-item{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:14px}.vdi-icon{display:flex;flex-shrink:0}.vdi-info{flex:1}.vdi-title{font-size:15px;font-weight:700;color:var(--text)}.vdi-meta{font-size:12px;color:var(--text2);margin-top:2px}.vdi-actions{display:flex;gap:8px}.vdi-btn{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;transition:var(--d-base);white-space:nowrap}.vdi-btn:hover{background:var(--primary);color:var(--me-bach);border-color:transparent}.vdi-btn.danger:hover{background:var(--chau-hong);color:var(--me-bach)}.edit-deck-name-row{display:flex;gap:10px;margin-bottom:16px}.deck-name-input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:15px;color:var(--text);outline:none;font-family:var(--font-ui);transition:var(--d-base)}.deck-name-input:focus{border-color:var(--primary)}.edit-deck-search{margin-bottom:16px}.edit-deck-search input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 16px;font-size:14px;color:var(--text);outline:none;font-family:var(--font-ui);transition:var(--d-base)}.edit-deck-search input:focus{border-color:var(--primary)}.edit-search-results{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:200px;overflow-y:auto}.edit-search-item{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:10px}.esi-hanzi{font-family:var(--font-hanzi);font-size:22px;flex-shrink:0}.esi-info{flex:1}.esi-pinyin{font-size:12px;color:var(--accent-ink)}.esi-meaning{font-size:13px;color:var(--text2)}.esi-add{background:var(--primary);color:var(--me-bach);border:none;border-radius:8px;width:28px;height:28px;font-size:16px;cursor:pointer;transition:transform var(--d-fast) var(--ease-out);flex-shrink:0}.esi-add:hover{transform:scale(1.1)}.esi-add.added{background:var(--success)}.edit-words-label{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:10px}.edit-words-list{display:flex;flex-wrap:wrap;gap:8px}.edit-word-chip{display:flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:6px 10px}.ewc-hanzi{font-family:var(--font-hanzi);font-size:18px}.ewc-meaning{font-size:12px;color:var(--text2)}.ewc-del{background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;padding:0 2px;transition:var(--d-base)}.ewc-del:hover{color:var(--danger)}.popup-overlay{position:fixed;inset:0;background:#00000080;backdrop-filter:blur(4px);z-index:4000;display:flex;align-items:center;justify-content:center;padding:20px}.add-deck-popup{background:var(--surface);border-radius:16px;padding:20px;min-width:260px;max-width:320px;width:100%;box-shadow:0 20px 60px #0000004d;position:relative;animation:modal-slide-up var(--d-med) ease}.adp-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:14px}.adp-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;max-height:240px;overflow-y:auto}.adp-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:var(--d-base);font-size:14px;font-weight:500}.adp-item:hover{border-color:var(--primary)}.adp-item.in-deck{border-color:var(--success);color:var(--success)}.adp-item .adp-check{font-size:16px}.adp-deck-label{display:flex;align-items:center;gap:10px;min-width:0}.adp-new{width:100%;padding:10px;background:var(--surface2);border:1px dashed var(--border);border-radius:10px;color:var(--text2);font-size:14px;font-weight:600;cursor:pointer;transition:var(--d-base);margin-bottom:6px;font-family:var(--font-ui)}.adp-new:hover{border-color:var(--primary);color:var(--accent-text)}.adp-close{position:absolute;top:12px;right:12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:4px 8px;cursor:pointer;color:var(--text2);font-size:14px;transition:var(--d-base)}.adp-close:hover{background:var(--primary);color:var(--me-bach)}@media(max-width:768px){.mode-picker{grid-template-columns:repeat(2,1fr)}.deck-grid{grid-template-columns:repeat(2,1fr);gap:10px}.deck-grid.list-view{grid-template-columns:1fr}.deck-card{padding:14px}.vdi-actions{flex-direction:column;gap:4px}}.dhp-popup{position:fixed;z-index:8000;width:280px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 36px #0006;padding:14px;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity var(--d-fast) ease,transform var(--d-fast) ease}.dhp-popup.dhp-visible{opacity:1;transform:translateY(0)}.dhp-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.dhp-icon{display:flex}.dhp-title{font-size:14px;font-weight:700;flex:1}.dhp-pct{font-size:12px;color:var(--accent-text);font-weight:600}.dhp-bar-wrap{height:4px;background:var(--border);border-radius:2px;margin-bottom:10px;overflow:hidden}.dhp-bar-fill{height:100%;background:var(--primary);border-radius:2px}.dhp-words{display:flex;flex-wrap:wrap;gap:6px}.dhp-word-chip{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:12px;font-family:var(--font-hanzi, "Noto Sans SC", sans-serif)}.dhp-word-chip small{color:var(--text2);font-size:10px;margin-left:3px;font-family:var(--font-ui, sans-serif)}.dhp-footer{margin-top:10px;font-size:11px;color:var(--text3);text-align:right}.deck-empty-state{padding:var(--s-8) var(--s-4);text-align:center;color:var(--text2);border:1px dashed var(--border);border-radius:var(--r-4);background:var(--surface)}.deck-empty-state img{width:112px;height:112px;object-fit:contain;display:block;margin:0 auto var(--s-3)}.deck-empty-state h3{margin:0 0 var(--s-1);color:var(--text);font-size:var(--t-h3)}.deck-empty-state p{margin:0 auto var(--s-4);max-width:34ch}@media(max-width:1024px){.dhp-popup{display:none!important}}⚠️ THỨ TỰ 3 RULE DƯỚI ĐÂY LÀ CÓ CHỦ Ý — tái lập đúng vị trí cũ trong index.html: learn.css(dòng 69) < quiz.css(72) < reader.css(78). Đảo lại là .btn-sm sẽ đè .btn-back (nút quay lại đổi cỡ chữ + padding). */ .btn-exit{display:inline-flex;align-items:center;justify-content:center;background:var(--surface2);border:none;width:36px;height:36px;border-radius:50%;color:var(--text2);cursor:pointer;flex-shrink:0;transition:background var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out)}.btn-exit:hover{background:var(--danger-bg);color:var(--danger)}.btn-sm{padding:8px 14px;font-size:13px;white-space:nowrap}.btn-back{background:none;border:none;color:var(--accent-ink);cursor:pointer;font-size:.9rem;padding:4px 0}

.streak-calendar{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin-bottom:20px}.sc-title{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:10px}.sc-days{display:flex;gap:6px;justify-content:space-between}.sc-day{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;padding:8px 4px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);transition:var(--d-base)}.sc-day.active{background:color-mix(in srgb,var(--hsk-8) 12%,transparent);border-color:var(--hsk-8)}.sc-day.today{border-color:var(--primary);box-shadow:0 0 0 2px rgba(var(--primary-rgb),.2)}.sc-label{font-size:10px;color:var(--text2);font-weight:600}.sc-day.active .sc-label{color:var(--hsk-8)}.streak-card{position:relative;overflow:hidden}.streak-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(234,88,12,.08),transparent);pointer-events:none}.streak-fire{font-size:18px;margin-left:2px}.streak-calendar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:28px;box-shadow:var(--shadow)}.sc-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:12px}.sc-days{display:flex;justify-content:space-between;gap:8px}.sc-day{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;padding:10px 6px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);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)}.sc-day.today{border-color:var(--primary);box-shadow:0 0 0 2px #c0392b26}.sc-day.active{background:linear-gradient(135deg,#c0392b1a,#f39c121a);border-color:var(--accent)}[data-theme=dark] .sc-day.active{background:linear-gradient(135deg,#c0392b33,#f39c1226)}.sc-dot{font-size:18px;line-height:1}.sc-label{font-size:11px;font-weight:600;color:var(--text3)}.sc-day.today .sc-label{color:var(--accent-text);font-weight:700}.sc-day.active .sc-label{color:var(--accent-ink)}.modal-hanzi-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}.modal-tts-btn{background:var(--surface2);border:1px solid var(--border);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;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);flex-shrink:0}.modal-tts-btn:hover{background:var(--primary);color:var(--on-accent);border-color:transparent;transform:scale(1.1)}.modal-stroke-container{text-align:center;margin-bottom:16px;padding:16px;background:var(--surface2);border:1px solid var(--border);border-radius:12px}.stroke-btns{display:flex;gap:10px;justify-content:center;margin-top:12px}.stroke-btn{padding:6px 16px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:var(--d-base)}.stroke-btn:hover{background:var(--primary);color:var(--on-accent);border-color:transparent}.stroke-btn.outline{background:transparent}.stroke-btn.outline:hover{background:var(--surface2);color:var(--accent-text);border-color:var(--primary)}.xp-bar-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:16px;box-shadow:var(--shadow)}.xp-bar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.xp-label{font-size:14px;font-weight:700;color:var(--accent-ink)}.xp-level-label{font-size:12px;color:var(--text2);font-weight:600}.xp-bar-track{height:8px;background:var(--border);border-radius:4px;overflow:hidden}.xp-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .6s ease}.xp-bar-footer{margin-top:6px;font-size:11px;color:var(--text3)}

.ui-state{width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:var(--s-10) var(--s-6);font-family:var(--font-ui);color:var(--fg);position:relative}.ui-state__inner{width:100%;max-width:520px;text-align:center;display:flex;flex-direction:column;align-items:center}.ui-state__title{font-family:var(--font-ui);font-size:var(--t-h1);font-weight:700;letter-spacing:var(--tracking-tight);color:var(--fg);margin:var(--s-6) 0 var(--s-2);line-height:var(--lh-tight)}.ui-state__desc{font-size:var(--t-body-lg);color:var(--fg-2);line-height:var(--lh-normal);margin:0 0 var(--s-6);max-width:420px}.ui-state__actions{display:flex;flex-direction:column;gap:var(--s-3);align-items:center;width:100%}.ui-state__cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);padding:12px 22px;background:linear-gradient(135deg,var(--chau-hong-3),var(--chau-hong));color:var(--on-accent);border:none;border-radius:var(--r-3);font-family:var(--font-ui);font-weight:600;font-size:var(--t-body);cursor:pointer;box-shadow:var(--shadow-red);transition:transform var(--d-fast) var(--ease-out),box-shadow var(--d-base) var(--ease-out),filter var(--d-fast) var(--ease-out);text-decoration:none}.ui-state__cta:hover{transform:translateY(-1px);filter:brightness(1.04)}.ui-state__cta:active{transform:translateY(0)}.ui-state__cta--full{width:100%}.ui-state__cta .ui-state__icon{width:16px;height:16px;flex-shrink:0}.ui-state__link{background:transparent;border:none;font-family:var(--font-ui);font-size:var(--t-small);color:var(--fg-3);cursor:pointer;padding:4px 8px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-2);transition:color var(--d-fast) var(--ease-out)}.ui-state__link:hover{color:var(--fg)}.ui-state__link-row{display:inline-flex;align-items:center;gap:var(--s-3);font-size:var(--t-small)}.ui-state__link-sep{color:var(--border-2)}.ui-state__tip{margin-top:var(--s-8);display:inline-flex;align-items:center;gap:var(--s-2);padding:8px 14px;background:var(--warning-bg);border:1px solid var(--hoang-kim-3);border-radius:var(--r-pill);font-size:12px;color:var(--mac-hac-3);line-height:1.4}.ui-state__tip-label{font-weight:700;font-size:11px;color:var(--accent-ink);letter-spacing:.06em}.ui-state__tip strong{color:var(--mac-hac)}.ui-state__stats{display:inline-flex;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-4);padding:6px 4px;box-shadow:var(--shadow-2);margin-bottom:var(--s-6)}.ui-state__stat{flex:1;padding:10px 18px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:100px}.ui-state__stat-hanzi{font-family:var(--font-hanzi);font-size:18px;font-weight:500;opacity:.35;margin-bottom:2px}.ui-state__stat-value{font-size:24px;font-weight:700;color:var(--fg);letter-spacing:-.02em;display:inline-flex;align-items:center;gap:4px;line-height:1}.ui-state__stat-label{font-size:10px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.ui-state__stat-divider{width:1px;background:var(--border);margin:4px 0;flex-shrink:0}.ui-state__stats--compact .ui-state__stat{flex-direction:row;gap:10px;padding:6px 18px}.ui-state__stats--compact .ui-state__stat-icon{width:32px;height:32px;border-radius:var(--r-2);background:var(--bg2);display:flex;align-items:center;justify-content:center;color:var(--fg-2);flex-shrink:0}.ui-state__stats--compact .ui-state__stat-text{text-align:left}.ui-state__stats--compact .ui-state__stat-label{display:block}.ui-state__stats--compact .ui-state__stat-value{font-size:15px}.ui-state--celebrate{position:relative;overflow:hidden}.ui-state--celebrate:before{content:"";position:absolute;top:-240px;left:50%;transform:translate(-50%);width:900px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(252,211,77,.3),transparent 60%);pointer-events:none;z-index:0}.ui-state--celebrate .ui-state__inner{position:relative;z-index:1}.ui-state__footer-note{margin-top:var(--s-8);font-size:var(--t-small);color:var(--fg-3);display:inline-flex;align-items:center;gap:6px}.ui-mascot{--mascot-size: 200px;position:relative;width:var(--mascot-size);height:var(--mascot-size);display:inline-block;flex-shrink:0}.ui-mascot>img{position:relative;width:100%;height:100%;object-fit:contain;z-index:2;transition:transform var(--d-base) var(--ease-out),filter var(--d-base) var(--ease-out)}.empty-state-img{display:block;width:160px;height:160px;object-fit:contain;margin:0 auto var(--s-4)}.ui-mascot>.empty-state-img{width:100%;height:100%;margin:0}.ui-mascot--has-pose:not(.is-fallback) .ui-mascot__zzz,.ui-mascot--has-pose:not(.is-fallback) .ui-mascot__wifi-off,.ui-mascot--has-pose:not(.is-fallback) .ui-mascot__q,.ui-mascot--has-pose:not(.is-fallback) .ui-mascot__warning,.ui-mascot--has-pose:not(.is-fallback) .ui-mascot__streak{display:none}.ui-mascot--sleep>img{transform:rotate(-8deg);filter:saturate(.9)}.ui-mascot--sad>img{transform:rotate(-3deg);filter:saturate(.85)}.ui-mascot--lost>img{transform:rotate(4deg)}.ui-mascot--concerned>img{transform:rotate(-2deg);filter:saturate(.95)}.ui-mascot--celebrate>img{transform:rotate(0);filter:saturate(1.1)}.ui-mascot__halo{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.ui-mascot__zzz{position:absolute;top:calc(var(--mascot-size) * -.06);right:calc(var(--mascot-size) * -.04);z-index:3;pointer-events:none;font-family:var(--font-ui);font-weight:800;color:var(--accent-ink);text-shadow:0 2px 0 var(--surface),0 0 8px rgba(245,158,11,.3);line-height:1;text-align:left}.ui-mascot__zzz span{display:block}.ui-mascot__zzz span:nth-child(1){font-size:calc(var(--mascot-size) * .16);opacity:.65}.ui-mascot__zzz span:nth-child(2){font-size:calc(var(--mascot-size) * .22);opacity:.85;margin-left:calc(var(--mascot-size) * .04)}.ui-mascot__zzz span:nth-child(3){font-size:calc(var(--mascot-size) * .32);margin-left:calc(var(--mascot-size) * .1)}.ui-mascot__wifi-off{position:absolute;right:calc(var(--mascot-size) * -.04);bottom:calc(var(--mascot-size) * .02);width:calc(var(--mascot-size) * .36);height:calc(var(--mascot-size) * .36);border-radius:50%;background:var(--surface);box-shadow:0 6px 18px #1f29372e,inset 0 0 0 3px var(--danger-bg);display:flex;align-items:center;justify-content:center;z-index:3}.ui-mascot__wifi-off svg{width:62%;height:62%}.ui-mascot__q{position:absolute;top:calc(var(--mascot-size) * -.04);left:calc(var(--mascot-size) * -.06);font-family:var(--font-ui);font-weight:800;font-size:calc(var(--mascot-size) * .36);color:var(--accent-text);line-height:1;transform:rotate(-12deg);text-shadow:0 2px 0 var(--surface),0 6px 12px rgba(220,38,38,.25);z-index:3;pointer-events:none}.ui-mascot__warning{position:absolute;right:calc(var(--mascot-size) * -.04);top:calc(var(--mascot-size) * .02);width:calc(var(--mascot-size) * .34);height:calc(var(--mascot-size) * .34);border-radius:50%;background:var(--warning-bg);box-shadow:0 6px 18px #f59e0b47;display:flex;align-items:center;justify-content:center;z-index:3}.ui-mascot__warning svg{width:60%;height:60%}.ui-mascot__streak{position:absolute;right:calc(var(--mascot-size) * -.18);top:calc(var(--mascot-size) * .42);transform:rotate(8deg);background:var(--thuy-luc);color:var(--on-accent);padding:6px 12px;border-radius:var(--r-pill);font-family:var(--font-ui);font-weight:700;font-size:calc(var(--mascot-size) * .075);box-shadow:0 6px 16px #10b9815c;display:flex;align-items:center;gap:4px;z-index:4;white-space:nowrap}.ui-mascot__streak:before{content:"🔥";font-size:calc(var(--mascot-size) * .08)}@media(max-width:640px){.ui-state{padding:var(--s-8) var(--s-4)}.ui-state__title{font-size:22px}.ui-state__desc{font-size:var(--t-body)}.ui-mascot{--mascot-size: 160px}.ui-state__stats{flex-wrap:wrap}.ui-state__stat{min-width:80px;padding:10px 12px}}[data-theme=dark] .ui-state__tip{background:#f59e0b1f;border-color:#f59e0b59;color:var(--fg-2)}[data-theme=dark] .ui-state__tip strong{color:var(--fg)}[data-theme=dark] .ui-state__cta{box-shadow:0 8px 24px #dc262673}[data-theme=dark] .ui-mascot__wifi-off{background:var(--surface);box-shadow:0 6px 18px #0006,inset 0 0 0 3px #dc262640}[data-theme=dark] .ui-mascot__warning{background:#f59e0b2e}[data-theme=dark] .ui-mascot__q{text-shadow:0 2px 0 var(--surface),0 6px 12px rgba(220,38,38,.35)}.skel{position:relative;overflow:hidden;background:var(--surface2);border-radius:var(--r-2)}.skel:after{content:"";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:skel-shimmer 1.2s infinite}.skel-line{height:12px;width:100%}.skel-line+.skel-line{margin-top:var(--s-2)}.skel-card{min-height:84px;border-radius:var(--r-4)}@keyframes skel-shimmer{to{transform:translate(100%)}}[data-theme=dark] .skel:after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}

.ui-error-banner{display:flex;align-items:center;gap:14px;height:56px;padding:0 var(--s-8);background:linear-gradient(90deg,var(--warning-bg),color-mix(in srgb,var(--warning) 30%,var(--surface)));border-bottom:1px solid var(--hoang-kim-3);font-family:var(--font-ui);flex-shrink:0}.ui-error-banner__icon{width:32px;height:32px;border-radius:var(--r-2);background:#fff9;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent-ink)}.ui-error-banner__icon svg{width:18px;height:18px}.ui-error-banner__text{flex:1;font-size:var(--t-small);color:var(--mac-hac)}.ui-error-banner__text strong{font-weight:700}.ui-error-banner__text .sep{color:var(--mac-hac-3);margin:0 8px}.ui-error-banner__action{background:var(--surface);color:var(--mac-hac);border:1.5px solid var(--hoang-kim-2);border-radius:var(--r-2);padding:6px 14px;font-size:12px;font-weight:600;font-family:var(--font-ui);display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:background var(--d-fast) var(--ease-out)}.ui-error-banner__action:hover{background:var(--warning-bg)}.ui-error-banner__action svg{width:13px;height:13px}[data-theme=dark] .ui-error-banner{background:linear-gradient(90deg,#f59e0b24,#f59e0b40);border-bottom-color:#f59e0b73}[data-theme=dark] .ui-error-banner__text{color:var(--fg)}[data-theme=dark] .ui-error-banner__action{background:var(--surface);color:var(--fg)}.ui-error-page{position:relative;width:100%;min-height:calc(100vh - var(--topbar-h, 64px));background:var(--bg);font-family:var(--font-ui);color:var(--fg);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:var(--s-10) var(--s-6)}.ui-error-page:before{content:"";position:absolute;top:-200px;right:-200px;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(252,211,77,.25),transparent 65%);pointer-events:none}[data-theme=dark] .ui-error-page:before{background:radial-gradient(circle,rgba(252,211,77,.18),transparent 65%)}.ui-error-page__layout{position:relative;display:flex;align-items:center;gap:56px;max-width:1000px}.ui-error-page__copy{max-width:460px}.ui-error-page__code{font-family:var(--font-ui);font-size:96px;font-weight:700;line-height:1;letter-spacing:-.04em;margin-bottom:12px;background:linear-gradient(135deg,var(--chau-hong),var(--hoang-kim));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:var(--accent-text)}.ui-error-page__title{font-size:30px;font-weight:700;letter-spacing:var(--tracking-tight);margin:0 0 10px;color:var(--fg)}.ui-error-page__desc{font-size:var(--t-body-lg);color:var(--fg-2);line-height:var(--lh-normal);margin:0 0 var(--s-6);max-width:420px}.ui-error-page__actions{display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}.ui-error-page__footnote{font-size:12px;color:var(--fg-3)}.ui-error-page__footnote a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;font-weight:500;cursor:pointer}.ui-error-page__watermark{position:absolute;bottom:32px;left:50%;transform:translate(-50%);font-family:var(--font-hanzi);font-size:13px;color:var(--fg-4);letter-spacing:.4em;white-space:nowrap}@media(max-width:768px){.ui-error-page__layout{flex-direction:column;gap:24px;text-align:center}.ui-error-page__copy{max-width:100%}.ui-error-page__code{font-size:72px}.ui-error-page__title{font-size:24px}.ui-error-page__actions{justify-content:center}}.ui-modal-overlay{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1100;display:flex;align-items:center;justify-content:center;padding:24px;animation:ui-fade-in var(--d-base) var(--ease-out)}.ui-modal-overlay[hidden]{display:none}@keyframes ui-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ui-modal-up{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.ui-modal{background:var(--surface);border-radius:var(--r-5);box-shadow:0 24px 60px #1f293759,0 8px 24px #1f29372e;overflow:hidden;position:relative;animation:ui-modal-up var(--d-slow) var(--ease-spring);font-family:var(--font-ui);color:var(--fg)}.ui-modal--md{width:100%;max-width:560px}.ui-modal--sm{width:100%;max-width:480px}[data-theme=dark] .ui-modal{box-shadow:0 24px 60px #0009,0 8px 24px #0006}.ui-modal__close{position:absolute;top:14px;right:14px;background:transparent;border:none;cursor:pointer;color:var(--fg-3);padding:6px;line-height:0;border-radius:var(--r-2);transition:background var(--d-fast) var(--ease-out),color var(--d-fast) var(--ease-out)}.ui-modal__close:hover{background:var(--bg2);color:var(--fg)}.ui-modal__close svg{width:20px;height:20px}.ui-modal__header{padding:24px 28px 0;display:flex;align-items:flex-start;gap:16px}.ui-modal__header-icon{width:44px;height:44px;border-radius:var(--r-3);display:flex;align-items:center;justify-content:center;flex-shrink:0}.ui-modal__header-icon--warning{background:var(--warning-bg);color:var(--accent-ink)}.ui-modal__header-icon--danger{background:var(--danger-bg);color:var(--accent-text)}.ui-modal__header-icon svg{width:22px;height:22px}.ui-modal__header-text{flex:1;min-width:0}.ui-modal__title{font-size:18px;font-weight:700;letter-spacing:var(--tracking-tight);margin:2px 0 6px;color:var(--fg)}.ui-modal__subtitle{font-size:14px;color:var(--fg-2);margin:0;line-height:var(--lh-normal)}.ui-modal__footer{padding:20px 28px 24px;display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}.ui-modal__btn-secondary{background:var(--surface);color:var(--fg);border:1.5px solid var(--border-2);border-radius:var(--r-3);padding:11px 22px;font-family:var(--font-ui);font-weight:600;font-size:var(--t-body);cursor:pointer;transition:background var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out)}.ui-modal__btn-secondary:hover{background:var(--bg2);border-color:var(--fg-3)}.ui-modal__note{margin:8px 28px 0;padding:10px 14px;background:var(--bg2);border-radius:var(--r-3);font-size:12px;color:var(--fg-3);line-height:1.5}.ui-modal__note strong{color:var(--fg-2)}.ui-modal__note--warning{background:var(--warning-bg);border:1px solid var(--hoang-kim-3);color:var(--mac-hac-3)}.ui-modal__note--warning strong{color:var(--mac-hac)}[data-theme=dark] .ui-modal__note--warning{background:#f59e0b1f;border-color:#f59e0b59;color:var(--fg-2)}[data-theme=dark] .ui-modal__note--warning strong{color:var(--fg)}.ui-conflict-grid{padding:20px 28px 8px;display:flex;gap:14px}.ui-conflict-card{flex:1;background:var(--surface);border:2px solid var(--border);border-radius:var(--r-4);padding:16px 18px;position:relative;min-height:180px;cursor:pointer;transition:border-color var(--d-fast) var(--ease-out),background var(--d-fast) var(--ease-out),transform var(--d-fast) var(--ease-out)}.ui-conflict-card:hover{transform:translateY(-1px);border-color:var(--border-2)}.ui-conflict-card.is-selected{background:var(--danger-bg);border-color:var(--chau-hong)}[data-theme=dark] .ui-conflict-card.is-selected{background:#dc262626}.ui-conflict-card__check{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--chau-hong);display:none;align-items:center;justify-content:center;color:var(--on-accent)}.ui-conflict-card.is-selected .ui-conflict-card__check{display:flex}.ui-conflict-card__check svg{width:14px;height:14px}.ui-conflict-card__head{display:flex;align-items:center;gap:8px;margin-bottom:12px}.ui-conflict-card__head-icon{color:var(--fg-2);flex-shrink:0}.ui-conflict-card__head-icon svg{width:16px;height:16px;display:block}.ui-conflict-card__label{font-size:var(--t-small);font-weight:700;color:var(--fg)}.ui-conflict-card.is-selected .ui-conflict-card__head-icon,.ui-conflict-card.is-selected .ui-conflict-card__label{color:var(--accent-text)}.ui-conflict-card__cloud-tag{margin-left:auto;font-size:10px;font-weight:600;padding:2px 6px;border-radius:var(--r-1);background:var(--bg2);color:var(--fg-3);letter-spacing:.04em;text-transform:uppercase}.ui-conflict-card__stats{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}.ui-conflict-card__row{display:flex;align-items:baseline;gap:8px}.ui-conflict-card__value{font-size:16px;font-weight:700;color:var(--fg);min-width:70px}.ui-conflict-card__caption{font-size:12px;color:var(--fg-3)}.ui-conflict-card__foot{padding-top:10px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--fg-3)}.ui-conflict-card__fresh{display:inline-flex;align-items:center;gap:4px;color:var(--success);font-weight:600}.ui-conflict-card__fresh:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--thuy-luc);display:inline-block}@media(max-width:560px){.ui-conflict-grid{flex-direction:column;padding:16px 20px 4px}.ui-modal__header{padding:20px 20px 0}.ui-modal__footer{padding:16px 20px 20px}.ui-modal__note{margin:8px 20px 0}}.ui-payment-modal{text-align:center;padding:28px 28px 24px}.ui-payment-modal__mascot-wrap{display:flex;justify-content:center;margin-bottom:6px}.ui-payment-modal__title{font-size:22px;font-weight:700;letter-spacing:var(--tracking-tight);color:var(--accent-text);margin:8px 0;display:inline-flex;align-items:center;gap:8px;justify-content:center}.ui-payment-modal__title-x{width:22px;height:22px;border-radius:50%;background:var(--chau-hong);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}.ui-payment-modal__desc{font-size:14px;color:var(--fg-2);line-height:var(--lh-normal);margin:0 16px 22px}.ui-payment-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-3);padding:14px 16px;text-align:left;margin-bottom:20px}.ui-payment-card__row{display:flex;align-items:center;gap:10px;margin-bottom:8px}.ui-payment-card__icon{width:32px;height:32px;border-radius:var(--r-2);background:var(--pro-bg);display:flex;align-items:center;justify-content:center;color:var(--on-accent);font-size:14px;flex-shrink:0}.ui-payment-card__info{flex:1;min-width:0}.ui-payment-card__name{font-size:14px;font-weight:700;color:var(--fg)}.ui-payment-card__txid{font-size:12px;color:var(--fg-3);font-family:var(--font-mono)}.ui-payment-card__amount{font-size:16px;font-weight:700;color:var(--fg);white-space:nowrap}.ui-payment-card__amount sup{font-size:11px;color:var(--fg-3);margin-left:3px;font-weight:600;vertical-align:baseline}.ui-payment-card__status{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--accent-text);padding-top:8px;border-top:1px dashed var(--border);font-weight:600}.ui-payment-card__status:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--chau-hong);animation:ui-pulse 1.6s var(--ease-in-out) infinite}@keyframes ui-pulse{0%,to{opacity:1}50%{opacity:.35}}

.fab-sheet-backdrop{display:none;position:fixed;inset:0;background:var(--overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:900;opacity:0;transition:opacity var(--d-base) var(--ease-out)}.fab-sheet-backdrop.open{display:block;opacity:1}.fab-sheet{position:fixed;left:0;right:0;bottom:0;z-index:901;background:var(--surface);border-radius:var(--r-6) var(--r-6) 0 0;padding:0 0 env(safe-area-inset-bottom,0);transform:translateY(100%);transition:transform var(--d-slow) var(--ease-out);box-shadow:var(--shadow-4);max-height:85vh;overflow-y:auto}.fab-sheet.open{transform:translateY(0)}.fab-sheet-handle{width:36px;height:4px;background:var(--border);border-radius:var(--r-pill);margin:10px auto 0}.fab-sheet-header{display:flex;align-items:center;justify-content:space-between;padding:14px var(--s-5) 10px}.fab-sheet-title{font-size:var(--t-h3);font-weight:700;color:var(--text);letter-spacing:-.01em}.fab-sheet-close{width:36px;height:36px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);color:var(--text2);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}.fab-sheet-section-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;padding:8px var(--s-5) 4px}.fab-sheet-hubs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);padding:var(--s-1) var(--s-3) var(--s-2)}.fab-sheet-hub{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--r-3);background:var(--surface2);border:1px solid var(--border);color:var(--text);text-decoration:none;transition:background var(--d-fast),border-color var(--d-fast)}.fab-sheet-hub:hover,.fab-sheet-hub:active{background:var(--primary-soft);border-color:var(--chau-hong)}.fab-sheet-hub-icon{width:36px;height:36px;border-radius:var(--r-2);background:var(--primary);color:var(--on-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}.fab-sheet-hub-text{display:flex;flex-direction:column;min-width:0}.fab-sheet-hub-text b{font-size:14px;font-weight:700;color:var(--text)}.fab-sheet-hub-text small{font-size:10.5px;color:var(--text3);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fab-sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-1);padding:var(--s-2) var(--s-3) var(--s-5)}.fab-sheet-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--s-3) var(--s-2);border-radius:var(--r-3);cursor:pointer;background:none;border:none;color:var(--text);font-family:var(--font-ui);transition:background var(--d-fast);text-decoration:none}.fab-sheet-item:active,.fab-sheet-item:hover{background:var(--surface2)}.fab-sheet-icon{width:44px;height:44px;border-radius:var(--r-3);background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2)}.fab-sheet-item:hover .fab-sheet-icon,.fab-sheet-item:active .fab-sheet-icon{background:var(--primary-soft);border-color:var(--chau-hong);color:var(--accent-text)}.fab-sheet-label{font-size:11px;font-weight:500;color:var(--text2);text-align:center;line-height:1.3}