:root,:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#0b0b10;
  --surface:#17161eeb;
  --surface2:#211e2bee;
  --surface3:#2d283bf2;
  --ink:#f8f5ff;
  --muted:#c9c2d9;
  --faint:#b2a8c5;
  --line:#e2d3ff2e;
  --warning-ink:#ffd0ad;
  --error-ink:#ffaaa3;
  --danger:var(--error-ink);
  --accent:#e8b4ff;
  --accent-ink:#291337;
  --shadow:0 18px 50px #00000026;
  --aura:#bd87ff1c;
  --sidebar:#100e18ed;
  --glow-violet:#8b5cf62b;
  --glow-pink:#ed5aa626;
  --button-start:#6938ba;
  --button-end:#a12b70;
  --button-ink:#ffffff;
  --hero-start:#b6baff;
  --hero-end:#ffc5e9;
}
:root[data-theme=light]{
  color-scheme:light;
  --bg:#f3f5fc;
  --surface:#ffffffed;
  --surface2:#eceffaef;
  --surface3:#e1e5f3f2;
  --ink:#24213d;
  --muted:#4b4e69;
  --faint:#565a74;
  --line:#75629632;
  --warning-ink:#874320;
  --error-ink:#a12640;
  --danger:var(--error-ink);
  --accent:#623395;
  --accent-ink:#ffffff;
  --shadow:0 16px 46px #53436b12;
  --aura:#9d82da14;
  --sidebar:#f9faffed;
  --glow-violet:#bba5f522;
  --glow-pink:#f2bfe31c;
  --button-start:#6938ba;
  --button-end:#a12b70;
  --button-ink:#ffffff;
  --hero-start:#593498;
  --hero-end:#8f2f69;
}
:root[data-theme=purple]{
  color-scheme:dark;
  --bg:#100824;
  --surface:#211337ed;
  --surface2:#2d1d45ef;
  --surface3:#3b2858f2;
  --ink:#fff4ff;
  --muted:#e3d1f0;
  --faint:#cebadf;
  --line:#e1b8ff35;
  --warning-ink:#ffd0ad;
  --error-ink:#ffb4b1;
  --danger:var(--error-ink);
  --accent:#f0b9ff;
  --accent-ink:#2c103a;
  --shadow:0 20px 58px #0800153d;
  --aura:#d694ff20;
  --sidebar:#190e2fdf;
  --glow-violet:#9254ef36;
  --glow-pink:#ee53b12d;
  --button-start:#7238bd;
  --button-end:#a02b76;
  --button-ink:#ffffff;
  --hero-start:#d0afff;
  --hero-end:#ffd0eb;
}
:root{
  --button-gradient:linear-gradient(120deg,var(--button-start),var(--button-end));
  --hero-gradient:linear-gradient(105deg,var(--hero-start),var(--hero-end));
}
body{
  background-color:var(--bg);
  background-image:radial-gradient(ellipse at 8% 0%,var(--glow-violet),transparent 50%),radial-gradient(ellipse at 94% 16%,var(--glow-pink),transparent 44%);
  background-attachment:fixed;
}
.account-card,.panel,.resource-card,.task-card,.lesson-card,.stage-demo,.side-note{
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  backdrop-filter:blur(18px) saturate(1.1);
}
.account-card{border-radius:26px}
.lesson-card,.resource-card{border-radius:16px}
.sidebar,.topbar,.appearance-switch{
  -webkit-backdrop-filter:blur(24px) saturate(1.12);
  backdrop-filter:blur(24px) saturate(1.12);
}
.sidebar nav a.active{
  background:linear-gradient(110deg,var(--aura),transparent),var(--surface2);
  border-color:var(--line);
}
/* 渐变两端保持足够深，悬停提亮后白字也能清晰阅读。 */
.primary,.save-button,.account-submit{
  background:var(--button-gradient);
  color:var(--button-ink);
  border-color:#ffffff26;
  box-shadow:0 5px 18px color-mix(in srgb,var(--button-start) 22%,transparent);
}
.primary:hover,.save-button:hover,.account-submit:hover{filter:brightness(1.05)}
.account-intro h1 span,.page-heading h1 span{color:var(--accent)}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .account-intro h1 span,.page-heading h1 span{
    background:var(--hero-gradient);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}
.appearance-switch{display:inline-flex;align-items:center;gap:3px;padding:4px;background:var(--surface2);border:1px solid var(--line);border-radius:12px;flex-shrink:0}
.appearance-switch button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);font-size:20px;line-height:1;white-space:nowrap}
.appearance-switch button[aria-pressed=true]{background:var(--button-gradient);color:var(--button-ink);box-shadow:0 2px 9px #0002}
.appearance-switch button:not([aria-pressed=true]):hover{color:var(--ink)}
.auth-appearance{position:absolute;top:22px;right:32px;z-index:2}
.view{scroll-margin-top:100px}
body:has(#study-shell:not([hidden])) .auth-appearance{display:none}
@media(max-width:1000px){.topbar{height:auto;min-height:76px;padding-top:12px;padding-bottom:12px;gap:12px;flex-wrap:wrap}.header-actions{min-width:0;max-width:100%;flex-wrap:wrap;justify-content:flex-end}}
@media(max-width:760px){.auth-appearance{top:15px;right:20px}.account-page{padding-top:80px}}
@media(max-width:620px){.view{scroll-margin-top:115px}.topbar{height:auto;min-height:58px;padding:8px 18px;gap:12px;flex-wrap:wrap}.header-actions{gap:10px;flex-wrap:wrap;justify-content:flex-end}.header-actions .local-badge{display:none}.appearance-switch{border-radius:10px;padding:3px}.appearance-switch button{font-size:19px;width:36px;height:36px;min-height:36px;padding:0}.auth-appearance .appearance-switch button{min-height:36px;font-size:19px}.account-name{max-width:85px}}