/* ============================================================
 * css/base.css —— 全站共享的令牌与基础组件
 * ============================================================
 * 【为什么会有这个文件】
 *   原来只有一个 index.html，所有样式都内联在里面，没问题。
 *   但一旦拆成 首页 / 工作台 / 玩家页 / 谱师页，四份重复的 :root 与
 *   按钮样式就是必然会漂移的债。所以令牌与通用组件收在这里，
 *   各页只写自己特有的部分。
 *
 * 深色单一主题（不做浅色切换：这个工具的使用场景是夜里看谱，而且
 * 分享卡片也是深色的，浅色页面会让导出图显得突兀）。
 * —— 这一点和 Kimi 官网一致：它的界面也只有单一深色，没有浅色变体。
 *
 * ══════════════════════════════════════════════════════════════
 * 视觉三原则（对着 DeepSeek / Kimi / z.ai 的设计体系抄回来的）
 * ──────────────────────────────────────────────────────────────
 * 1. **只有一个主色。** DeepSeek 的设计分析里写得很直白：
 *    "no-secondary-accent"。色相越多越像工具，越少越沉得住。
 *    本站主色 = 琥珀 --brand（见下），它只用于
 *    「关键动作 + 品牌标识」，其余一律中性色。
 *    ⚠ 新增 UI 时先问：这个颜色**必须**是主色吗？能用中性色就别上色。
 * 2. **层级靠亮度，不靠色相。** Kimi：「hierarchy through luminance
 *    contrast rather than hue」。所以 --bg / --card / --card2 / --card3
 *    是一条**亮度阶梯**，用哪一层取决于元素"浮"多高，而不是它是什么功能。
 * 3. **靠边框分面，少用阴影。** Kimi 用 0.5px 白边框做 "optical
 *    definition without visual weight"。本站边框统一走半透明
 *    rgba(255,255,255,.075) —— 半透明的好处是**自动适配任何底色层次**，
 *    不用为每种 surface 各配一个边框色。
 * ══════════════════════════════════════════════════════════════
 * ⚠ 旧变量名（--amber / --blue / --green / --red / --purple）全部保留，
 *   只是重新指向新语义色。页面里大量在用，改名前先别删。
 * ============================================================ */

/* 标题字体：思源宋体 SemiBold 的**子集**。
   font-display:swap —— 别让标题把首屏卡住；先出系统字体，字体到位再换。
   ⚠ 只声明了 600 一档：标题规则里必须写 font-weight:600，
     否则浏览器会去借 700 然后**合成加粗**（糊）。 */
@font-face {
  font-family: 'PHM Display';
  src: url('/fonts/display-serif.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 霞鹜文楷子集（14.9MB → 63KB）。只有 Regular 一个字重，见 ui-kit.css 里
   关于「禁止合成加粗」的说明。
   ⚠ 这里不写 font-weight:600 —— 声明成 600 会让浏览器认为"600 就是标准粗细"，
     再叠加 font-synthesis-weight:none 时就不加粗了；写 400 才是它的真实字重。 */
@font-face {
  font-family: 'PHM Kai';
  src: url('/fonts/display-kai.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── 中性色：一条亮度阶梯（不是功能分类）── */
  --bg:    #0e0d0b;      /* 画布：最底（暖调，与琥珀同温层，见 DESIGN.md §8.1）*/
  --card:  #161412;      /* 卡片：浮一层 */
  --card2: #1d1b18;      /* 次级面 / 行悬浮 */
  --card3: #262320;      /* 输入框 / 激活态：浮最高 */
  --fg:    #efebe4;      /* 主文字 */
  --fg2:   #b5aea3;      /* 次要文字 */
  --fg3:   #948d82;      /* 弱化文字 / 标签（抬亮：旧值 4.37:1 差一点到 AA）*/
  --fg4:   #7a746a;      /* 占位符 / 极弱（抬亮：旧值只有 2.51:1，严重不达标）*/

  /* 半透明边框 —— 见原则 3 */
  --line:  rgba(255,240,220,.08);
  --line2: rgba(255,240,220,.14);

  /* ── 主色：琥珀（全站唯一强调色，见原则 1）── */
  --brand:      #f0b03f;
  --brand-soft: rgba(240,176,63,.14);   /* 底色：选中/高亮行 */
  --brand-line: rgba(240,176,63,.38);   /* 描边：focus ring / 选中边框 */
  --brand-ink:  #201705;                /* 主色底上的文字（深色，保证对比） */
  --brand-hover:#f7bd5a;                /* 主色按钮的悬停态 */
  --brand-bright:#f7c469;               /* **只给大字号**（结果区那个 54px 数字）。
                                          大字号对比度门槛是 3.0，所以敢比主色更亮一点；
                                          正文一律用 --brand，别用它 —— 小字会过不了。 */
  --link:       #e0a63c;                /* 正文里的链接。比主色略沉，避免满屏都是"强调" */
  --link-soft:  rgba(224,166,60,.45);   /* 链接下划线的颜色 */
  --on-color:   #201705;                /* 压在任何**亮色块**上的文字（徽标、色条）；暖底上不要用冷黑 */

  /* ── 语义色：降饱和，别抢注意力 ── */
  --ok:   #3fb950;
  --warn: #d29922;
  --err:  #f85149;
  --info: #58a6ff;

  /* 旧名映射（兼容现有页面，语义不变）
     ⚠ `--blue` 现在已经**没有任何地方在用** —— 2026-10-11 把链接/按钮/复选框
     的蓝色全部并回琥珀。保留它只是为了不让漏改的地方突然变色（会变成透明/继承）。
     图表色 `--density` 仍然是蓝的：那是**信息编码**，不是强调色，见 DESIGN.md §3.4。 */
  --amber:  var(--brand);
  --blue:   var(--info);
  --green:  var(--ok);
  --red:    var(--err);
  --purple: #b083f0;

  /* 四组负荷配色（图表专用：要能互相区分，但整体降饱和） */
  --density: #58a6ff;
  --pattern: #b083f0;
  --coord:   #f0b03f;
  --stamina: #3fb950;

  /* ── 圆角：只用这四档 ── */
  --r-sm: 6px;
  --r:    10px;
  --r2:   14px;
  --r3:   18px;

  /* ── 间距：8px 网格（小值 4px 起）── */
  --sp1: 4px;  --sp2: 8px;  --sp3: 12px; --sp4: 16px;
  --sp5: 24px; --sp6: 32px; --sp7: 48px;

  /* ── 字阶：只用这几档，别临时写 13.7px ── */
  --t-xs:  11.5px; --t-sm:  12.5px; --t-base: 13.5px; --t-md: 15px;
  --t-lg:  18px;   --t-xl:  22px;   --t-2xl:  28px;   --t-3xl: 36px;

  /* ── 阴影：深色下极淡（原则 3：主要靠边框分面）── */
  --sh1: 0 1px 2px rgba(0,0,0,.35);
  --sh2: 0 6px 20px rgba(0,0,0,.45);
  --sh-card: 0 1px 2px rgba(0,0,0,.22);   /* 深色靠亮度阶梯分面，阴影只是补一点点 */

  /* ── 动效：统一时长与缓动 ── */
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* 滚动条滑块（深浅两套要分开，见下方 .scrollbar 规则） */
  --scroll-thumb: #262320;

  /* 导航毛玻璃的底色：半透明即可，模糊由 backdrop-filter 负责。
     ⚠ 别做成完全不透明 —— 那样就只是"一块盖子"，没有毛玻璃的通透感。 */
  /* 不透明度从 .72 提到 .88 —— 评审说滑动时下面
     透出灰色模糊色块像脏污。再加 1px 底线把顶栏和内容分开。 */
  --nav-veil: rgba(14,13,11,.88);

  /* 让浏览器原生控件（表单、滚动条、自动填充）跟着主题走 —— 少了这行，
     浅色主题里会出现深色的 select 下拉和白色滚动条 */
  color-scheme: dark;

  /* ── 字体三档 ──
     标题：思源宋体**子集**（自托管，83KB）。衬线标题压在暖纸底上才有"书卷气"，
           这是这一版视觉上最大的一步。子集只覆盖标题用到的字（tools 里两步生成），
           没覆盖到的字会**掉回正文黑体** —— 不会出豆腐块，最多那一行不一致。
     正文：**系统栈**，零下载。各平台都是各自最舒服的那套黑体。
     数字/代码：等宽。
     ⚠ 动态内容（曲名、用户名、谱师名）永远走正文字体 —— 它们不在子集里，
        交给衬线只会掉回黑体，白搭一次匹配。 */
  --font-display: 'PHM Display', "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  /* 楷体档位的字体栈：子集没覆盖到的字掉回系统楷体，再掉回宋体 */
  --font-kai: 'PHM Kai', "LXGW WenKai", "Kaiti SC", "KaiTi", "STKaiti",
              "Noto Serif SC", serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC",
               "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;

  /* 日文专用栈。曲库里大量日文标题（シアトリカル·ケース / 強風オールバック…）——
     页面语言是 zh-Hans，日文汉字（綺麗、夢）会拿中文字形，假名则走回退字体，
     两个字重和字面都对不上。给含假名的元素加 lang="ja" 就能分开处理。
     ⚠ 纯汉字标题无法靠正则判断（中日共用汉字），保持 zh 即可。 */
  --font-ja: "Hiragino Sans", "Yu Gothic UI", Meiryo, "Noto Sans JP", var(--font-body);

  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  /* ── 版心与容器 ──
     ⚠ 全站**只有一个容器**：顶栏、内容区、页脚都用它。
       曾经内容区有 880/1100 两种宽度、顶栏又单独撑成第三种 —— 结果切页面时
       logo 横向跳、顶栏左缘比内容左缘多出上百像素，看起来像没对齐。
       现在：容器统一（--container），**要窄的是文字，不是容器**（--measure）。
       版心 42em ≈ 中文 40–45 字一行，长段落读起来最舒服。 */
  --container: 1120px;
  --measure: 42em;
}

/* ══════════════════════════════════════════════════════════════
 * 浅色主题 —— 语义名与深色**完全一致**，只换值，页面代码一行不改
 * ══════════════════════════════════════════════════════════════
 * 【两条换算纪律】
 *   1. **主色必须压深。** 深色下的亮琥珀 #f0b03f 放到白底上对比度只有
 *      约 1.8:1，正文里根本读不清。浅色环境统一用 #b8791a ——
 *      它是"白底上的琥珀"，和 docs.css 的 --brand-deep 同一个值。
 *      同理 --ok/--warn/--err/--info 全部换成浅底版本（GitHub 浅色色板）。
 *   2. **层级仍是亮度阶梯，但方向反了。** 深色下"浮起来 = 更亮"；
 *      浅色下"浮起来 = 更白 + 更淡的影"。所以 --card 是纯白，
 *      而 --bg 必须**不是**纯白（#f7f8fa）—— 纯白底上放白卡片就分不出面，
 *      这是浅色界面最常见的翻车点。
 * ============================================================ */
:root[data-theme="light"] {
  --bg:    #f6f3ee;
  --card:  #fffdf9;
  --card2: #efebe4;
  --card3: #e5e0d7;
  --fg:    #1d1a16;
  --fg2:   #4a443c;
  --fg3:   #665f55;
  --fg4:   #7d766b;

  --line:  rgba(40,25,5,.13);   /* 从 .10 提上来：白卡与米底要靠它分面 */
  --line2: rgba(40,25,5,.20);

  --brand:      #9a6208;   /* 压深到过 AA：旧值 #b8791a 在新底上只有 3.4:1 */
  --brand-soft: rgba(154,98,8,.11);
  --brand-line: rgba(154,98,8,.34);
  --brand-ink:  #ffffff;
  --brand-hover:#85540a;
  --brand-bright:#b8791a;               /* 只给大字号（浅底上 3.28，≥24px 才合规）*/
  --link:       #7a4a00;                /* 深棕，6.76:1 */
  --link-soft:  rgba(122,74,0,.45);
  --on-color:   #ffffff;                /* 浅色主题里色块本身变深了 → 反白 */

  --ok:   #1a7f37;
  --warn: #8a5c00;   /* 实测：旧值在新暖底上只有 4.40:1，差一点到 AA */
  --err:  #cf222e;
  --info: #0969da;

  --purple: #8250df;

  --density: #0969da;
  --pattern: #8250df;
  --coord:   #9a6208;   /* 跟着品牌色一起压深，保持图表与主色同一色系 */
  --stamina: #1a7f37;

  --sh1: 0 1px 2px rgba(40,25,5,.05);
  --sh2: 0 8px 24px rgba(40,25,5,.10);
  /* 卡片的"浮起感"：白卡和米底本身太接近，光靠一条 0.10 的描边分不出层次。
     加一层**几乎看不见**的暖色阴影就够 —— 不要做成投影，那是另一套语言。 */
  --sh-card: 0 1px 2px rgba(40,25,5,.05), 0 0 0 1px rgba(40,25,5,.03);

  --scroll-thumb: rgba(40,25,5,.22);
  --nav-veil: rgba(246,243,238,.88);
  color-scheme: light;
}

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

body {
  background: var(--bg);
  color: var(--fg);
  /* 字体栈把 -apple-system 提到最前：Apple 设备用 SF，Windows 退回 Segoe UI。
     行高 1.65 是给 CJK 留的 —— DeepSeek 的设计体系里明确写了
     「1.6 body line-height，deliberate CJK accommodation」。 */
  /* 行高 1.75 是照中文正文重新定的（原来 1.65）。
     中文的行间需要比拉丁文更多留白，密排会让长段落读起来发闷。 */
  font: 14px/1.75 var(--font-body);
  padding: 20px 20px 56px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 焦点环：键盘用户必须看得见，鼠标点出来则不需要（:focus-visible）。
   深色界面缺了它，"没打磨过"的感觉立刻出来。 */
:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
  outline-offset: 2px;
}

/* 选中文字：用主色的柔和变体，别用系统默认的亮蓝 */
::selection { background: var(--brand-soft); color: var(--fg); }

/* 滚动条：深色界面里它非常显眼，系统默认的浅色凹槽会立刻拉低质感 */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb); border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--fg4); background-clip: content-box; }
/* 唯一容器。所有页面共用 —— 顶栏、内容、页脚都在它里面，
   所以 logo 左缘和内容左缘永远对齐（曾经不一致到差 200px）。 */
.wrap { max-width: var(--container); margin: 0 auto; }
/* ⚠ 链接**必须带下划线**，不能只靠颜色区分。
   全站只有一种强调色（琥珀），如果链接也只靠颜色，它就和其他琥珀元素
   分不出来了；而且色觉障碍用户需要非颜色的线索。下划线是最省事的那个。
   想更轻的可以自己再调 text-decoration-thickness —— 但别去掉。 */
/* ── 标题字体 ──
   ⚠ 只上这四个选择器。**别**把 `.num` 整体接过来 —— 数据表里
   `<td class="r num">` 是 12.5px 的小数字，用衬线会糊；结果区那个大数字
   走的是 `.ps .num`，单独列出来。 */
h1, h2, h3, .brand, .big, .ps .num {
  font-family: var(--font-display); font-weight: 600;
}
/* 孤字：标题和短提示用 balance（最后一行不会只有一两个字），
   正文用 pretty（避免孤字成行）。Chromium 系生效，其余无害降级。 */
h1, h2, h3, .callout__lead, .sub { text-wrap: balance; }
p, .fd, li, .note, .sdesc { text-wrap: pretty; }

/* 动效偏好：前庭用户会把所有过渡动效压到 0.01ms */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 中文标点在衬线下看起来更重，稍微收一点字距 */
h1, h2, h3 { letter-spacing: -.005em; }

:lang(ja) { font-family: var(--font-ja); }

a { color: var(--link); text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 2.5px;
    text-decoration-color: var(--link-soft); }
a:hover { text-decoration-thickness: 2px; }
.mono { font-family: var(--mono); font-size: .93em; }
.num { font-variant-numeric: tabular-nums; }
.dim { color: var(--fg2); }
.dim2 { color: var(--fg3); }
.nowrap { white-space: nowrap; }

/* ── 顶部导航（所有页面共用）─────────────────────────────
   sticky + 毛玻璃：滚动时导航浮在内容上，用半透明底 + 模糊把后面的
   内容"化开"，而不是拿一块不透明色盖住。⚠ 只在**滚动后**才启用
   （加 .stuck 类）—— 一开始就带底会让首屏多出一条无色差的分割感。 */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 10px 0 14px; margin-bottom: 22px;
  border-bottom: 1px solid transparent;
  transition: background .22s var(--ease), border-color .22s var(--ease);
}
.nav.stuck {
  background: var(--nav-veil);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border-bottom-color: var(--line);
}
/* 不支持 backdrop-filter 时（老浏览器）退回不透明底，别让文字糊在内容上 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.stuck { background: var(--bg); }
}
.nav .brand {
  font-size: 19px; letter-spacing: .3px; font-weight: 500; color: var(--fg);
  margin-right: 12px; text-decoration: none;
}
.nav .brand b { color: var(--brand); }
.nav .brand:hover { text-decoration: none; }
.nav .links { display: flex; gap: 3px; flex-wrap: wrap; align-items: baseline; }
.nav .links a {
  color: var(--fg2); padding: 5px 11px; border-radius: var(--r-sm); font-size: 13.5px;
  text-decoration: none; border: 1px solid transparent;
  transition: color .14s var(--ease), background .14s var(--ease);
}
.nav .links a:hover { color: var(--fg); background: var(--card2); text-decoration: none; }
/* 当前页：主色的柔和底 + 柔和描边。
   （用主色是对的 —— 它表示"你在哪"，属于关键状态，不是装饰。） */
.nav .links a.on {
  color: var(--brand); background: var(--brand-soft); border-color: var(--brand-line);
}
.nav .spacer { flex: 1; }
.nav .ver { font-size: var(--t-xs); color: var(--fg3); }
/* 顶栏的 GitHub 图标（2026-10-17 评审：仓库入口原来散在几个页面的中段/页脚） */
.nav .ghlink {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-left: 4px; border-radius: 7px;
  color: var(--fg3); text-decoration: none;
  transition: color .14s, background .14s;
}
.nav .ghlink:hover { color: var(--fg); background: var(--card2); }

/* ── 卡片 / 面板 ──────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 20px 22px; margin-bottom: 14px;
  /* 极轻的浮起感 —— 深色下几乎不可见，浅色下把白卡从米底上"抬"起来 */
  box-shadow: var(--sh-card);
}
.card h2 { font-size: var(--t-lg); font-weight: 600; margin-bottom: 5px; word-break: break-word; }
.card h3 { font-size: 14.5px; font-weight: 600; color: var(--fg2); margin: 18px 0 8px; }
.card .sub { font-size: var(--t-sm); color: var(--fg3); margin-bottom: 12px; }
/* ── 长段落限宽 ──
   中文一行超过 ~45 个字就难扫读了（评审实测现在有 60–75 字）。
   限宽只加在**成段的说明文字**上，表格、卡片栅格不受影响。 */
/* 长段落按版心限宽。表格、卡片栅格、数据区不受影响 ——
   要窄的是「文字」，不是「容器」。 */
.fd, .card > .sub, .tip, .sdesc, .note, .sub { max-width: var(--measure); }

/* ── 按钮 ─────────────────────────────────────────────── */
/* ⚠ 这里曾经被写成两行 `.btn {`（`min-height:40px;` 后面又开了一个同名块），
   于是**第 368 行往下的整份样式表都被当成嵌套规则吞掉了** ——
   控件高度、focus ring、字体/字号档位、窄卡、芯片……一条都没生效，
   而浏览器不会报错，只看页面还以为是"样式没写对"。
   教训：CSS 花括号不平衡是**静默全局故障**，加检查（见 lint-slop 的 CSS 括号规则）。 */
.btn {
  min-height: 40px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line2); background: var(--card2); color: var(--fg);
  font-size: 13.5px; font-family: inherit; line-height: 1.4;
  transition: border-color .14s var(--ease), background .14s var(--ease),
              color .14s var(--ease);
}
.btn:hover:not(:disabled) { border-color: var(--brand-line); background: var(--card3); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary {
  background: var(--brand); color: var(--brand-ink);
  border-color: var(--brand); font-weight: 600;
}
.btn.primary:hover:not(:disabled) { background: #f7bd5a; border-color: #f7bd5a; }
.btn.sm { padding: 4px 10px; font-size: var(--t-sm); border-radius: var(--r-sm); }
.btn.ghost { background: transparent; }

/* ── 输入 ─────────────────────────────────────────────── */
.inp {
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line2);
  background: var(--bg); color: var(--fg); font: inherit; min-width: 0;
}
.inp:focus { outline: none; border-color: var(--amber); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.tight { gap: 6px; }

/* ── 表格 ─────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-weight: 500; color: var(--fg3); font-size: 11.5px;
  letter-spacing: .04em; padding: 6px 8px; border-bottom: 1px solid var(--line);
}
td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--card2); }
td.r, th.r { text-align: right; }

/* ── 徽标 / 药丸 ──────────────────────────────────────── */
.pill {
  display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 11.5px;
  border: 1px solid var(--line2); color: var(--fg2); background: var(--card2);
}
.pill.amber { color: var(--amber); border-color: rgba(232,163,61,.4); }
.pill.green { color: var(--green); border-color: rgba(76,195,138,.4); }
.pill.red { color: var(--red); border-color: rgba(229,83,75,.4); }
.pill.purple { color: var(--purple); border-color: rgba(201,140,232,.4); }

/* ── 状态条 ───────────────────────────────────────────────
   以前是 `border-left: 3px solid <彩色>` —— 那种彩色左边框是
   "模板感/AI 感"最重的一种做法（用户专门截图点出来过）。
   改成**中性卡片 + 一个小状态圆点**：信息量一样，安静得多。
   ⚠ 圆点必须用 `position:absolute`，**不能用 flex 布局**：
   消息内容是含 <br>/<b> 的 HTML，在 flex 容器里每个内联元素都会变成
   独立 flex item —— 文字会被拆成一块块、在窄容器里逐字竖排。
   这个坑真踩过：谱师页的提示整段变成竖排乱码。
   ⚠ 新增状态样式时别再往左边框上想。 */
.status {
  position: relative;
  padding: 10px 13px 10px 31px;
  border-radius: var(--r); margin: 10px 0;
  background: var(--card2); border: 1px solid var(--line);
  font-size: 12.8px; line-height: 1.68; color: var(--fg2);
}
.status::before {
  content: ""; position: absolute; left: 14px; top: 15px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg3);
}
.status.ok::before   { background: var(--ok); }
.status.warn::before { background: var(--warn); }
.status.err::before  { background: var(--err); }
.status:empty { display: none; }

/* 「说清楚限制」的提示块 —— 这个项目里出现频率很高，所以做成组件。
   同样不用彩色左边框。需要提醒注意的用**主色柔光**而不是红色：
   红色是"出错了"，而这里多数情况只是"要知道这件事"。 */
.note {
  padding: 12px 14px; border-radius: var(--r); background: var(--card2);
  border: 1px solid var(--line);
  font-size: 12.8px; color: var(--fg2); margin: 12px 0; line-height: 1.72;
}
.note b { color: var(--fg); }
.note.info { background: var(--card2); }
.note.warn { background: var(--brand-soft); border-color: var(--brand-line); }
/* ⚠ 空的提示条什么都不说，却长得像"加载到一半"的一条灰带
   （用户原话：看着像没加载完）。没内容就不占位。 */
.note:empty { display: none; }

/* 页脚版本号可点 → 直达版本历史。
   默认**不显眼**（继承父级颜色、无下划线），悬停才出现下划线与品牌色 ——
   页脚不该抢注意力，但要让人知道它能点。 */
a.verfoot { color: inherit; text-decoration: none; border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s; cursor: pointer; }
a.verfoot:hover { color: var(--brand); border-bottom-color: var(--brand-line); }

.empty { padding: 26px 10px; text-align: center; color: var(--fg3); font-size: 13px; }

/* ── 页脚 ─────────────────────────────────────────────── */
footer {
  margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--fg3); line-height: 1.75;
}
footer .fd { margin-top: 6px; }
details summary { cursor: pointer; color: var(--fg2); font-size: 12.5px; }
details summary:hover { color: var(--fg); }

/* ── 分页器 ───────────────────────────────────────────────
   数据管理页 / 谱师页 / 玩家页三处都用同一个组件（js/ui.js 的 pagerHTML），
   所以样式也必须只有一份 —— 否则会出现"数据页的翻页键长得不一样"。 */
.pager{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.pginfo{font-size:12.5px;color:var(--fg2);flex:1;min-width:150px}
.pginfo b{color:var(--fg);font-variant-numeric:tabular-nums}
.pgbtns{display:flex;gap:3px;flex-wrap:wrap;align-items:center}
.pg{background:var(--card2);border:1px solid var(--line2);color:var(--fg2);
  border-radius:6px;min-width:30px;padding:4px 7px;font-size:12.5px;cursor:pointer;
  font-family:inherit;font-variant-numeric:tabular-nums}
.pg:hover:not(:disabled){border-color:var(--amber);color:var(--fg)}
.pg:disabled{opacity:.35;cursor:not-allowed}
.pg.on{background:var(--amber);color:#201705;border-color:var(--amber);font-weight:600}
.pgecl{color:var(--fg3);padding:0 2px}
.pgsel{background:var(--card2);border:1px solid var(--line2);color:var(--fg2);
  border-radius:6px;padding:4px 6px;font-size:12px;font-family:inherit}

/* ── 术语表 ─────────────────────────────────────────────
   反馈最集中的一条：「官谱标度 / B19 / RKS / p99 这些黑话像天书」。
   做法不是删术语（内行要用），而是点开就能看。 */
.gloss{margin:12px 0 0;font-size:12.8px}
.gloss dl{margin:10px 0 0;padding-left:2px}
.gloss dt{color:var(--amber);font-weight:600;margin-top:10px;font-size:13px}
.gloss dd{color:var(--fg2);margin:3px 0 0;line-height:1.72}
.gloss summary{font-size:13px}

/* ── 档位徽标（能识别就上色，识别不了显示「未标注」而不是 ?）── */
.tier{display:inline-block;min-width:24px;text-align:center;padding:1px 5px;border-radius:5px;
  font-size:10.5px;font-weight:600;color:#0d1117}

/* ── 骨架屏 ───────────────────────────────────────────── */
.skel { background: linear-gradient(90deg, var(--card2) 25%, var(--card3) 50%, var(--card2) 75%);
  background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: 6px; height: 13px; }
@keyframes sk { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

@media (max-width: 560px) {
  body { padding: 14px 12px 44px; }
  .card { padding: 15px 15px; }
  .nav .brand { font-size: 17px; }
}

/* 控件与组件样式已拆到 /css/ui-kit.css（2026-10-17）——
   那个文件必须在 base.css **之后**引用。 */