/* Shared product language. MathJax and MathLive keep their own font stacks. */
:root {
  color-scheme: light;
  --bg: #F5F5F2;
  --panel: #FFFFFF;
  --ink: #202723;
  --muted: #5B655F;
  --line: #DDE2DC;
  --accent: #2859B0;
  --accent-hover: #20488E;
  --accent-soft: #EDF2FC;
  --good: #226751;
  --good-soft: #EDF6F1;
  --warn: #835711;
  --warn-soft: #FFF5E3;
  --bad: #B3342B;
  --bad-soft: #FDF0EE;
  --field-line: #9BA69D;
  --radius-control: 8px;
  --radius-surface: 12px;
  --shadow: none;
  --shadow-overlay: 0 16px 48px #20272324;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --content-width: 1280px;
  --reading-width: 760px;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* Compatibility aliases used by existing business components. */
  --auth-ink: var(--ink);
  --auth-green: var(--accent);
  --workspace-paper: var(--bg);
  --workspace-line: var(--line);
  --workspace-muted: var(--muted);
  --border: var(--line);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font-ui); }
button, input, textarea, select { font: inherit; }
[hidden] { display: none !important; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.btn, .auth-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; max-width: 100%;
  padding: 10px 16px; border: 1px solid var(--field-line); border-radius: var(--radius-control);
  background: var(--panel); color: var(--ink); font: inherit; font-size: 15px;
  font-weight: 600; line-height: 1.5; cursor: pointer; text-decoration: none;
  white-space: normal; overflow-wrap: anywhere;
}
.btn:hover:not(:disabled), .auth-button:hover:not(:disabled) { background: var(--bg); border-color: var(--muted); }
.btn.primary, .auth-button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled), .auth-button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { color: var(--bad); }
.btn.danger:hover:not(:disabled) { background: var(--bad-soft); border-color: var(--bad); }
button:disabled, .btn:disabled, .auth-button:disabled { opacity: .55; cursor: not-allowed; }
.muted { color: var(--muted); }
.bad-text, .auth-error { color: var(--bad); overflow-wrap: anywhere; }
.product-icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}