/* ===========================================================
   设计令牌（唯一颜色来源，组件禁止硬编码色值）
   风格基调：俱乐部内部台账工具 —— 墨色侧栏 + 暖白纸面 + 深青主色 + 琥珀强调
   =========================================================== */
:root {
  /* 纸面与墨色 */
  --paper: #F7F7F3;
  --surface: #FFFFFF;
  --surface-sunken: #F2F2ED;
  --surface-hover: #FAFAF6;
  --ink: #131C18;
  --ink-2: #45514B;
  --ink-3: #77827C;
  --ink-4: #A3ACA6;
  --line: #E4E4DC;
  --line-strong: #CFD1C7;
  --line-dark: #24322C;

  /* 侧栏 */
  --nav-bg: #101917;
  --nav-ink: #E8EDE9;
  --nav-ink-dim: #93A09A;
  --nav-active: #16302A;
  --nav-hover: #182420;

  /* 品牌与语义 */
  --brand: #0E7A63;
  --brand-deep: #0A5C4B;
  --brand-tint: #E7F2EE;
  --brand-tint-2: #D3E8E1;
  --accent: #C9861F;
  --accent-tint: #FBF1DF;
  --danger: #B93B33;
  --danger-tint: #FBECE9;
  --success: #1B7A4E;
  --success-tint: #E6F2EA;
  --info: #2F6E8F;
  --info-tint: #E8F0F5;

  /* 尺寸 */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --nav-w: 236px;
  --gap: 16px;

  /* 阴影：分层柔和 */
  --shadow-1: 0 1px 2px rgba(19, 28, 24, 0.05), 0 2px 8px rgba(19, 28, 24, 0.04);
  --shadow-2: 0 4px 12px rgba(19, 28, 24, 0.08), 0 12px 32px rgba(19, 28, 24, 0.10);
  --shadow-3: 0 12px 28px rgba(19, 28, 24, 0.14), 0 32px 80px rgba(19, 28, 24, 0.18);
  --shadow-brand: 0 4px 14px rgba(14, 122, 99, 0.32);

  /* 渐变 */
  --grad-brand: linear-gradient(135deg, #0F8569 0%, #0A5C4B 100%);
  --grad-nav: linear-gradient(180deg, #0C1613 0%, #101917 45%, #0C1A15 100%);
  --grad-ink: linear-gradient(135deg, #1D2B25 0%, #131C18 100%);

  /* 字体 */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", Menlo, "Courier New", monospace;

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure { margin: 0; }
a { color: var(--brand); text-decoration: none; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }
::selection { background: var(--brand-tint-2); }

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.02em; }

.muted { color: var(--ink-3); }
.dim { color: var(--ink-4); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.grow { flex: 1; }
.hidden { display: none !important; }

/* 滚动条：细，低调 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }