:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--karaoke-tint:var(--sun-tint);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-xl:28px;--radius-pill:999px;--font-ui:"Nunito", system-ui, sans-serif;--font-hanzi:"Noto Sans SC", "PingFang SC", "Source Han Sans SC", sans-serif;--type-hanzi-reading:400 22px/32px var(--font-hanzi);--type-hanzi-headword:700 40px/48px var(--font-hanzi);--type-hanzi-char:400 28px/34px var(--font-hanzi);--type-pinyin:600 12px/16px var(--font-ui);--type-pinyin-lg:600 17px/24px var(--font-ui);--type-display:800 26px/34px var(--font-ui);--type-title:800 19px/26px var(--font-ui);--type-heading:800 16px/22px var(--font-ui);--type-body:600 15px/22px var(--font-ui);--type-translation:600 14px/21px var(--font-ui);--type-label:800 14px/20px var(--font-ui);--type-caption:700 12px/16px var(--font-ui);--bg:#f6f5ff;--card:#fff;--sunken:#eeecff;--ink:#1e1c3a;--ink-secondary:#55537a;--ink-muted:#6a6789;--line:#ecebf7;--line-strong:#8f8bc4;--accent:#6a61e8;--on-accent:#fff;--accent-text:#5a50d6;--accent-tint:#e9e7ff;--mint:#6ed6b6;--mint-tint:#def7ef;--mint-text:#157a5e;--sun:#ffcb52;--sun-tint:#fff3d1;--sun-text:#8a5a00;--coral:#ff9f87;--coral-tint:#ffe9e1;--coral-text:#a8285f;--success:#287329;--danger:#a8322a;--hsk-1:#287329;--hsk-2:#1d5fb8;--hsk-3:#a14a00;--hsk-4:#7438ad;--hsk-5:#a8285f;--hsk-6:#8a1f1f;--hsk-7-9:#4a3b2c;--hsk-1-tint:#d5e3d0;--hsk-2-tint:#d2ddeb;--hsk-3-tint:#ecd9c6;--hsk-4-tint:#e3d6e9;--hsk-5-tint:#eed2d9;--hsk-6-tint:#e8d1cd;--hsk-7-9-tint:#dbd6cf;--shadow-card:0 6px 20px #4c46aa14;--shadow-float:0 12px 32px #4c46aa2e;--shadow-glow:0 8px 18px #6a61e859}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#16152a;--card:#221f3d;--sunken:#2a2748;--ink:#eeedfa;--ink-secondary:#b9b7d6;--ink-muted:#9d9abf;--line:#2f2c4d;--line-strong:#6e6a99;--accent:#8c85ff;--on-accent:#16152a;--accent-text:#c3bfff;--accent-tint:#2e2a5c;--mint:#6ed6b6;--mint-tint:#1d3b35;--mint-text:#8ee6c9;--sun:#ffcb52;--sun-tint:#3d3420;--sun-text:#ffd27a;--coral:#ff9f87;--coral-tint:#43272a;--coral-text:#ffb3a3;--success:#7fcf83;--danger:#f07167;--hsk-1:#7fcf83;--hsk-2:#7fb3ff;--hsk-3:#f2a35b;--hsk-4:#c7a0f7;--hsk-5:#f28dbd;--hsk-6:#f07a6e;--hsk-7-9:#cdb497;--hsk-1-tint:#3d523c;--hsk-2-tint:#3d4b5e;--hsk-3-tint:#5e4631;--hsk-4-tint:#52455c;--hsk-5-tint:#5e404c;--hsk-6-tint:#5d3b36;--hsk-7-9-tint:#534b41;--shadow-card:0 6px 20px #00000059;--shadow-float:0 12px 32px #00000080;--shadow-glow:0 8px 18px #8c85ff4d}}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#16152a;--card:#221f3d;--sunken:#2a2748;--ink:#eeedfa;--ink-secondary:#b9b7d6;--ink-muted:#9d9abf;--line:#2f2c4d;--line-strong:#6e6a99;--accent:#8c85ff;--on-accent:#16152a;--accent-text:#c3bfff;--accent-tint:#2e2a5c;--mint:#6ed6b6;--mint-tint:#1d3b35;--mint-text:#8ee6c9;--sun:#ffcb52;--sun-tint:#3d3420;--sun-text:#ffd27a;--coral:#ff9f87;--coral-tint:#43272a;--coral-text:#ffb3a3;--success:#7fcf83;--danger:#f07167;--hsk-1:#7fcf83;--hsk-2:#7fb3ff;--hsk-3:#f2a35b;--hsk-4:#c7a0f7;--hsk-5:#f28dbd;--hsk-6:#f07a6e;--hsk-7-9:#cdb497;--hsk-1-tint:#3d523c;--hsk-2-tint:#3d4b5e;--hsk-3-tint:#5e4631;--hsk-4-tint:#52455c;--hsk-5-tint:#5e404c;--hsk-6-tint:#5d3b36;--hsk-7-9-tint:#534b41;--shadow-card:0 6px 20px #00000059;--shadow-float:0 12px 32px #00000080;--shadow-glow:0 8px 18px #8c85ff4d}*,:before,:after{box-sizing:border-box}body{background:var(--bg);color:var(--ink);font:var(--type-body);-webkit-font-smoothing:antialiased;margin:0}h1,h2,h3,p{margin:0}.display{font:var(--type-display);margin-bottom:var(--space-6)}.title{font:var(--type-title)}.heading{font:var(--type-heading)}.muted{color:var(--ink-secondary)}.hanzi{font-family:var(--font-hanzi)}.shell{grid-template-columns:248px 1fr;min-height:100vh;display:grid}.sidebar{gap:var(--space-6);height:100vh;padding:var(--space-6) var(--space-4);background:var(--card);box-shadow:var(--shadow-card);flex-direction:column;display:flex;position:sticky;top:0}.brand{align-items:center;gap:var(--space-3);font:var(--type-heading);padding:0 var(--space-2);display:flex}.brand-lg{font:var(--type-title)}.brand-mark{border-radius:var(--radius-md);background:var(--accent);width:36px;height:36px;color:var(--on-accent);font-family:var(--font-hanzi);box-shadow:var(--shadow-glow);place-items:center;font-weight:700;display:grid}.nav{gap:var(--space-1);flex-direction:column;display:flex}.nav-item{align-items:center;gap:var(--space-3);padding:10px var(--space-3);border-radius:var(--radius-pill);color:var(--ink-secondary);font:var(--type-label);text-decoration:none;display:flex}.nav-item:hover{background:var(--sunken);color:var(--ink)}.nav-item.active{background:var(--accent-tint);color:var(--accent-text)}.nav-icon{text-align:center;width:20px;font-family:var(--font-hanzi)}.sidebar-footer{padding:var(--space-3);border-top:1px solid var(--line);gap:var(--space-1);flex-direction:column;margin-top:auto;display:flex}.user-name{font:var(--type-caption);color:var(--ink-muted);text-overflow:ellipsis;overflow:hidden}.content{min-width:0;padding:32px 40px}.card{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-6)}.center-screen{min-height:100vh;padding:var(--space-5);place-items:center;display:grid}.auth-card{gap:var(--space-4);flex-direction:column;width:100%;max-width:400px;display:flex}.field{font:var(--type-label);flex-direction:column;gap:6px;display:flex}.field input{font:var(--type-body);color:var(--ink);background:var(--card);border:1.5px solid var(--line-strong);border-radius:var(--radius-md);padding:11px 14px}.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);outline:none}.btn{font:var(--type-label);border-radius:var(--radius-pill);cursor:pointer;border:none;padding:12px 22px}.btn:disabled{opacity:.6;cursor:default}.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-glow)}.btn-secondary{background:var(--accent-tint);color:var(--accent-text)}.link-button{font:var(--type-label);color:var(--accent-text);cursor:pointer;background:0 0;border:none;align-self:flex-start;padding:0}.alert{border-radius:var(--radius-md);font:var(--type-body);padding:10px 14px}.alert-danger{color:var(--danger);background:var(--coral-tint)}