/* ============ Ratio Compass · Design Tokens ============ */
:root {
  /* 墨青罗盘面 */
  --teal-950: #0d2b33;
  --teal-900: #123842;
  --teal-800: #1a4652;
  --teal-700: #235561;
  /* 黄铜金 */
  --brass-800: #6f5726;
  --brass-700: #8a6d2f;
  --brass-500: #b08d3e;
  --brass-400: #c6a556;
  --brass-300: #d8bc74;
  --brass-200: #e8d9a8;
  /* 米白报告纸 */
  --paper-50: #f5f1e6;
  --paper-100: #efe9da;
  --paper-200: #e7dfcc;
  --paper-line: #d9d0bb;
  --paper-line-2: #cfc5ac;
  /* 纸面墨色 */
  --ink-900: #2b2a23;
  --ink-700: #4a4638;
  --ink-600: #6b675a;
  --ink-400: #9b9584;
  /* 哑光赭红（偏离，非警告红） */
  --ochre-600: #94472f;
  --ochre-500: #b0563a;
  --ochre-400: #c47a5c;
  --ochre-dim: rgba(176, 86, 58, 0.14);
  /* 暗青绿（达标/正向） */
  --verdi-500: #3e7d6c;
  --verdi-400: #5d9a88;
  --verdi-dim: rgba(62, 125, 108, 0.14);
  /* 参照星图 */
  --star-teal: #2e6d78;
  --star-gold: #b08d3e;
  --star-slate: #8d9499;
  /* 指针宝石 */
  --gem-400: #63c7c2;
  /* 暗面（罗盘面板上）文字 */
  --dial-text-hi: #e9e2cf;
  --dial-text-mid: #b3b39a;
  --dial-line: rgba(216, 188, 116, 0.22);

  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-serif: "Songti SC", "STSong", "SimSun", serif;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-panel: 0 1px 3px rgba(43, 42, 35, 0.12), 0 4px 14px rgba(43, 42, 35, 0.08);
  --shadow-dial: inset 0 0 60px rgba(0, 0, 0, 0.4);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-900);
  background: var(--paper-50);
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}
input { font-family: inherit; border: none; outline: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
svg { display: block; }

/* ---- 工具类 ---- */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.2px; }
.pos { color: var(--verdi-500); }
.neg { color: var(--ochre-500); }
.muted { color: var(--ink-400); }

/* 纸面纹理（细噪点 + 淡横纹） */
.paper-texture {
  background-color: var(--paper-50);
  background-image:
    repeating-linear-gradient(0deg, rgba(43, 42, 35, 0.015) 0 1px, transparent 1px 28px),
    radial-gradient(ellipse at 18% 8%, rgba(255, 255, 255, 0.5), transparent 55%);
}

/* 纸面标题（衬线题字风格） */
.paper-heading {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 1px;
}

/* 编号徽章 ①-⑥ */
.idx-badge {
  width: 20px; height: 20px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--ink-700);
  color: var(--ink-700);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}

/* 分隔细线（纸面双线） */
.rule-double {
  height: 3px;
  border-top: 1px solid var(--ink-700);
  border-bottom: 1px solid var(--paper-line-2);
}

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--paper-line-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }
::-webkit-scrollbar-track { background: transparent; }