/* ============================================================
 * base.css —— 设计变量 / 重置 / 排版 / 大字版
 * 主色调：清新蓝  |  圆角：16-28px  |  卡片式布局
 * ============================================================ */
:root {
  /* 主色（蓝） */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;

  /* 辅助色 */
  --green-100: #dcfce7; --green-500: #22c55e; --green-600: #16a34a; --green-700:#15803d;
  --amber-100: #fef3c7; --amber-500: #f59e0b; --amber-600: #d97706;
  --red-100: #fee2e2;   --red-500: #ef4444;   --red-600: #dc2626;
  --pink-100: #fce7f3;  --pink-500: #ec4899;
  --purple-100:#f3e8ff; --purple-500:#a855f7;
  --teal-500: #14b8a6;

  /* 中性色 */
  --ink:      #0f172a;
  --ink-2:    #1e293b;
  --ink-3:    #475569;
  --muted:    #64748b;
  --muted-2:  #94a3b8;
  --line:     #e2e8f0;
  --line-2:   #eef2f7;
  --bg:       #f4f8fd;
  --bg-2:     #eaf2fb;
  --card:     #ffffff;
  --card-2:   #fbfdff;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, .05);
  --shadow:    0 8px 24px rgba(15, 23, 42, .07);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, .12);

  /* 圆角 */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 28px;
  --r-full: 999px;

  --font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-num: "SFMono-Regular", ui-monospace, Consolas, monospace;
  --fs: 15.5px;
  --lh: 1.72;
  --container: 1200px;
  --header-h: 68px;
}

html.big-font, body.big-font { --fs: 18.5px; --lh: 1.9; }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
  color: var(--ink-2);
  background:
    radial-gradient(1200px 520px at 8% -10%, rgba(59,130,246,.13), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgba(34,211,238,.11), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { margin: 0 0 .5em; color: var(--ink); font-weight: 800; line-height: 1.32; letter-spacing: -.01em; }
h1 { font-size: 1.72em; }
h2 { font-size: 1.36em; }
h3 { font-size: 1.12em; }
h4 { font-size: 1em; }
p  { margin: 0 0 .85em; }
a  { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-700); }
ul, ol { margin: 0 0 .85em; padding-left: 1.3em; }
img { max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
hr.sep { border: 0; border-top: 1px dashed var(--line); margin: 18px 0; }

::selection { background: var(--blue-200); color: var(--ink); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd8e6; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #a9bdd2; background-clip: content-box; }

/* 工具类 */
.muted { color: var(--muted); }
.small { font-size: .86em; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.hidden { display: none !important; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flex-center { display: flex; align-items: center; justify-content: center; gap: 10px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.gap-1 { gap: 8px; } .gap-2 { gap: 14px; } .gap-3 { gap: 22px; }

/* KaTeX 微调 */
.katex { font-size: 1.06em; }
.katex-display { margin: .55em 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.math-error { color: var(--red-600); background: var(--red-100); border-radius: 6px; padding: 0 4px; }

/* 动效 */
@keyframes mx-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mx-spin { to { transform: rotate(360deg); } }
@keyframes mx-pop { 0% { transform: scale(.94); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}