/* Shared visual tokens for the classroom, account, storefront and management UI. */
:root:root, :root .vault-scope, :root body.vault-tokens {
  --sx-paper:#f7f5ef; --sx-surface:#fffefa; --sx-ink:#173e39; --sx-green:#2f806f;
  --sx-green-soft:#e7efea; --sx-orange:#f2ae57; --sx-border:#dce4dc; --sx-muted:#657b73;
  --ui-bg-page:var(--sx-paper); --ui-bg-elevated:var(--sx-surface); --ui-bg-soft:#edf2ec;
  --ui-bg-muted:#e5ebe4; --ui-bg-overlay:rgba(255,254,250,.88); --ui-bg-overlay-strong:rgba(255,254,250,.96);
  --ui-text-primary:var(--sx-ink); --ui-text-secondary:#49645b; --ui-text-muted:var(--sx-muted);
  --ui-accent:var(--sx-green); --ui-accent-hover:#226c5c; --ui-accent-soft:#e7efea;
  --ui-border:var(--sx-border); --ui-border-strong:#b9ccc2; --ui-focus-ring:#2f806f33;
  --ui-accent-warm:#b16a19; --ui-accent-warm-hover:#8b5111; --ui-accent-warm-soft:#fff0d7;
  --ui-info:#2f806f; --ui-info-soft:#e7efea; --ui-price-primary:var(--sx-ink);
  --ui-radius-sm:.65rem; --ui-radius-md:.85rem; --ui-radius-lg:1.15rem; --ui-radius-xl:1.6rem;
  --ui-shadow-soft:0 8px 24px -18px #173e3926; --ui-shadow-card:0 14px 36px -24px #173e3933;
  --background:45 33% 95%; --foreground:172 46% 17%; --card:48 100% 99%; --card-foreground:172 46% 17%;
  --popover:48 100% 99%; --popover-foreground:172 46% 17%; --primary:167 46% 34%; --primary-foreground:0 0% 100%;
  --secondary:120 16% 93%; --secondary-foreground:172 46% 17%; --muted:120 16% 93%; --muted-foreground:158 10% 44%;
  --accent:143 20% 92%; --accent-foreground:172 46% 17%; --border:120 13% 88%; --input:120 13% 84%; --ring:167 46% 34%; --radius:.85rem;
  --bg:var(--sx-paper); --bg-warm:#f1eee3; --surface:var(--sx-surface); --surface-2:#edf2ec;
  --ink:var(--sx-ink); --ink-2:#49645b; --ink-3:var(--sx-muted); --red:var(--sx-green); --red-strong:#226c5c; --red-soft:#e7efea;
  --gold:var(--sx-orange); --gold-soft:#fff0d7; --teal:var(--sx-green); --teal-soft:#e7efea;
  font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
}
:root.dark.dark, :root.dark .vault-scope, :root.dark body.vault-tokens {
  --sx-paper:#14231f; --sx-surface:#1d302a; --sx-ink:#e9f2e8; --sx-green:#76c3a8; --sx-green-soft:#29493d; --sx-border:#365246; --sx-muted:#a1b6aa;
  --ui-bg-soft:#294238; --ui-bg-muted:#243c32; --ui-bg-overlay:#1d302ae8; --ui-bg-overlay-strong:#1d302af5;
  --ui-text-secondary:#bed0c3; --ui-accent-hover:#9bd5bf; --ui-accent-soft:#29493d; --ui-text-on-accent:#14231f;
  --ui-accent-warm:#f2ae57; --ui-accent-warm-soft:#4b3b24; --ui-border-strong:#50715f;
  --background:156 27% 11%; --foreground:113 26% 93%; --card:153 25% 15%; --card-foreground:113 26% 93%;
  --popover:153 25% 15%; --popover-foreground:113 26% 93%; --primary:159 39% 61%; --primary-foreground:156 27% 11%;
  --secondary:152 23% 21%; --secondary-foreground:113 26% 93%; --muted:152 23% 21%; --muted-foreground:145 13% 67%;
  --accent:152 23% 21%; --accent-foreground:113 26% 93%; --border:149 21% 27%; --input:149 21% 32%; --ring:159 39% 61%;
  --bg-warm:#1a2c25; --surface-2:#294238; --ink-2:#bed0c3; --red-soft:#29493d; --red-strong:#9bd5bf;
}
.sx-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--sx-ink);font-size:22px;font-weight:800;letter-spacing:.02em}
.sx-brand small{display:block;font-size:11px;letter-spacing:.04em;color:var(--sx-muted);font-weight:400;margin-top:4px}
.sx-brand-mark{width:42px;height:46px;display:grid;place-items:center;border-radius:14px 14px 14px 4px;background:var(--sx-green);color:#fffefa;box-shadow:5px -4px 0 #f2ae5750;flex-shrink:0;font-size:23px}
.sx-brand-mark svg{width:25px;height:25px}
.sx-rail{position:fixed;inset:0 auto 0 0;width:232px;background:var(--sx-surface);border-right:1px solid var(--sx-border);padding:34px 20px 24px;z-index:55;display:flex;flex-direction:column;gap:32px;box-sizing:border-box}
.sx-rail nav{display:flex;flex-direction:column;gap:10px}
.sx-rail nav a{display:flex;gap:13px;align-items:center;padding:14px 16px;border-radius:13px;color:var(--sx-ink);font-size:15px;text-decoration:none;transition:background .18s}
.sx-rail nav a:hover,.sx-rail nav a[aria-current=page]{background:var(--sx-green-soft);color:var(--sx-green)}
.sx-rail nav svg{width:20px;height:20px;flex-shrink:0}
.sx-rail-foot{margin-top:auto;padding:18px 14px 0;border-top:1px solid var(--sx-border);font-size:12px;color:var(--sx-muted);line-height:1.8}
.sx-store-app{margin-left:232px}
.sx-store-app>nav.fixed{left:232px}
.sx-store-app .theme-wordmark-text{font-size:18px}
.sx-store-app>.sx-mobile-return{display:none}
.sx-lab-return{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--sx-border);border-radius:10px;color:var(--sx-green);background:var(--sx-surface);text-decoration:none;font-size:13px;white-space:nowrap}
.sx-admin-shell aside{background:var(--sx-surface)}
.sx-admin-shell aside nav a.router-link-exact-active{background:var(--sx-green-soft);color:var(--sx-green)}
.sx-admin-shell main{background:var(--sx-paper)}
.sx-admin-login{background:radial-gradient(ellipse at 18% 20%,#e4ede1 0,transparent 50%),var(--sx-paper)}
.sx-admin-login .sx-brand{justify-content:center;margin-bottom:30px}
.sx-admin-login .sx-lab-return{margin-top:22px}
.sx-admin-shell table thead{background:var(--sx-green-soft)}
.sx-admin-shell h1{letter-spacing:-.025em}
@media(max-width:1100px){.sx-rail{width:204px;padding-inline:14px}.sx-store-app{margin-left:204px}.sx-store-app>nav.fixed{left:204px}.sx-brand{font-size:19px}}
@media(max-width:900px){.sx-rail{display:none}.sx-store-app{margin-left:0}.sx-store-app>nav.fixed{left:0}.sx-store-app>.sx-mobile-return{display:inline-flex;position:fixed;bottom:76px;left:16px;z-index:45;box-shadow:0 5px 20px #173e3920}.sx-admin-shell header{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.sx-rail nav a{transition:none}}

.sx-avatar{background:#e7efea;border-radius:50%;overflow:hidden;box-shadow:none}.sx-avatar img{height:100%;width:100%;object-fit:cover}:root .vault-scope,:root body.vault-tokens{--border:var(--sx-border)}