/* ============================================================
 * WebSurf-game — 界面样式（单文件）。
 *
 * 主题「莱茵精工」R1：暗色档案面板（参考 LBEILC/RhineLabUI 的语彙，
 * 不照搬、无动画）。R1 返工口径（§八）：
 *   · 菱角分明：全文件 border-radius 一律 0，仅螺丝（1 处）与服务孔
 *     （1 处）保留 50% 圆；准星圆点与状态 LED 改方形（菱角语彙延伸到
 *     HUD，游戏语义不变）；
 *   · 切角系统：**已撤销**（owner 2026-10-16 裁决：右上切角"莫名其妙"，
 *     全文件不再有任何 clip-path 切角）。此前它分结构级 10px（主按钮、
 *     激活标签条、面板窗口右上角、加载卡右上角）与嵌件级 4px（滑块游标）
 *     两级，连同 `#panel::before` 的斜边补线与加载卡的 `<i class="load-chamfer">`
 *     一并删除；窗口/按钮/加载卡一律为完整矩形，菱角语彙只靠「零圆角 +
 *     1px/2px 直线」表达，不再靠斜切。
 *   · 线宽系统：2px 结构线（窗口顶缘压槽沿、激活左条）/ 1px 分隔线
 *     （行组、节点、边框）/ 1px 点线（字段引导线，4px 节距）；
 *   · 基础件细节：滚动条自绘（方角 thumb=分隔色、1px 轨道沿、hover 琥珀
 *     为瞬时态）、::selection 琥珀弱底、禁用态统一 0.45、读数框 hover 显
 *     下边线、导航标题用与 h4 同规格的分组刻度尺——全部沿用既有令牌，
 *     不新增装饰层；
 *   · 档案元素成套：每 pane 档案编号（右上）+ 字段引导线（每行）+
 *     页脚署名（pane 名 + 版本短码）；硬件件计数：螺丝 1（窗口右上那颗
 *     **兼作关闭按钮** .win-close）+ 服务孔 1（导航左下，与右上螺丝对角）；
 *     加载卡装饰螺丝已按 owner 2026-09-30 裁决撤下（点缀收敛）；导航不再有
 *     页脚（关闭上移到螺丝钮，兜底 = 点击 #panel 遮罩空白处，见
 *     panel-controller 的 closePanel）；
 *   · 布局：窗口高度**固定 580px**（R1.1 从内容驱动回退——八 pane 之间
 *     高度差会让窗口在切换时跳动；稀疏 pane 的留白改由页脚署名收尾），
 *     行网格 168/1fr/88，滑块行读作「刻度 + 读数」（.val 去边框为读数区）；
 *   · 收敛：装饰分结构/嵌件/硬件三层，同屏每类 ≥2 次且位置可预期，
 *     琥珀全屏 5 类（主按钮底、激活导航左条、滑块游标、页头编号、
 *     顶缘嵌片；同类多实例计 1 处）。另有 hover / focus / 激活等交互态同用琥珀
 *     （`.win-close:hover`、滑块游标 hover、输入框 focus、checkbox hover 等），不另计入静态 5 类。
 * 准星圆点（#crosshair 的方点）保留方形——菱角语彙延伸到 HUD。
 *
 * 与 JS 的接线（本文件只负责外观；显隐与取值由类名或行内变量驱动）：
 *   · #crosshair 的 --ch-color / --ch-size / --ch-thickness / --ch-gap
 *     由 apps/game/src/panel/panel-controller.ts 的 applyCrosshair 写入；
 *     .load-fill 的 --load-pct 由 apps/game/src/app.ts 写入——
 *     这五个变量名是代码契约，勿改名；
 *   · 可见性钩子：#panel.hidden、#error.show、.key-rec-hint（默认隐，
 *     .show 显）、#crosshair.hidden、#crosshair.no-dot、
 *     #loadingOverlay.show 与 .error；
 *   · JS 生成的类名（savepoint-row / key-chip / key-row / kempty /
 *     health-log）在本文件都有对应规则。
 * ============================================================ */

:root {
  color-scheme: dark;

  /* ── 「莱茵精工」令牌（暗色规格取自 RhineLabUI DESIGN.md；R1：圆角令牌删除）── */
  --bg: #0d1113;                          /* 比 #11181b 再暗一档：适配 3D 画面 */
  --panel: #11181b;                       /* RhineLabUI 暗色底 */
  --panel-trans: rgba(17, 24, 27, 0.92);
  --overlay: rgba(6, 9, 11, 0.62);
  --border: #2f3a3c;                      /* 1px 发丝线 */
  --border-strong: #536166;               /* RhineLabUI 分隔线色 */
  --text: #e0e3dc;                        /* RhineLabUI 正文 */
  --hud-text: #eceee6;                    /* HUD 读数：比正文更亮，亮色天空下仍可读 */
  --muted: #a6b0b1;                       /* RhineLabUI 辅助 */
  --accent: #c5a16b;                      /* RhineLabUI 琥珀强调 */
  --accent-hover: #d4b27e;
  --accent-weak: rgba(197, 161, 107, 0.26); /* ::selection 底：0.14 在暗底上几乎不可见 */
  --on-accent: #17130c;
  --ok: #8cc98f;
  --err: #e2857b;
  --warn: #d4b26a;

  /* 等宽栈（读数与坐标）；R1：圆角令牌已删除（菱角分明，半径显式 0） */
  --mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

/* ── 基底 ─────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: system-ui, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px; color: var(--text); background: var(--bg);
}
::selection { background: var(--accent-weak); color: var(--text); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
#app { position: fixed; inset: 0; z-index: 1; }
canvas { display: block; width: 100%; height: 100%; background: var(--bg); }

/* 隐藏的原生文件输入 #bspFile：点击由 #loadMapBtn 的监听器转发；按钮外观由 #panel .map-btn 承担 */
#bspFile { display: none; }

/* ── 帧率铭牌（左上角；左缘 2px 结构线；读数 12px 等宽）── */
#fps {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  font-family: var(--mono); font-size: 12px;
  padding: 5px 10px 5px 9px;
  background: var(--panel-trans); border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  color: var(--muted); font-variant-numeric: tabular-nums;
  pointer-events: none; user-select: none;
}

/* ── 状态行 / 错误行（右上角）：前置方形 LED 表三态，常亮不闪；读数 12px ── */
#status, #error {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  font-family: var(--mono); font-size: 12px;
  padding: 5px 10px 5px 24px;
  background: var(--panel-trans); border: 1px solid var(--border);
}
#status::before {
  content: ""; position: absolute; left: 10px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  background: var(--muted);
}
/* 长文案单行截断：避免换行后压住下方 #error（top:46px） */
#status { max-width: 46ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#status.success { color: var(--ok); }
#status.success::before { background: var(--ok); }
#status.error { color: var(--err); }
#status.error::before { background: var(--err); }
#error { display: none; top: 46px; color: var(--err); }

/* ── 速度读数 #hud>#stats（横向居中、距底 24%）：等宽读数 + .unit 单位；
   单层 1px 暗影只为在亮色天空下可读 ── */
#hud {
  position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%);
  z-index: 4; text-align: center; pointer-events: none;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
#stats {
  font-size: 20px; font-weight: 600; letter-spacing: 0.04em; color: var(--hud-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
#stats .vsep { color: var(--muted); margin: 0 7px; font-weight: 400; }
#stats .unit { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 3px; }

/* ── 左下角按键簇 #keys（P4：细线键帽 + 激活态琥珀内嵌）：3 列网格，
   Q/W/E 上排 · A/S/D 中排 · 蹲（1 格）+ 跳（2 格）；标签由 src/app.ts
   按当前键位写入；某动作键位被删光时显示 "—" 并加 .off ── */
#keys {
  position: absolute; left: 20px; bottom: 20px;
  z-index: 4; pointer-events: none; user-select: none;
  display: grid; grid-template-columns: repeat(3, 24px); grid-auto-rows: 24px; gap: 3px;
}
#keys .tm-key {
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; color: var(--muted);
  background: rgba(17, 24, 27, 0.55); border: 1px solid var(--border-strong);
}
#keys .tm-key.on {
  color: var(--on-accent); background: var(--accent); border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(23, 19, 12, 0.3);
}
#keys .tm-key.off { opacity: 0.45; }
#keys .tm-key-q { grid-area: 1 / 1; }
#keys .tm-key-w { grid-area: 1 / 2; }
#keys .tm-key-e { grid-area: 1 / 3; }
#keys .tm-key-a { grid-area: 2 / 1; }
#keys .tm-key-s { grid-area: 2 / 2; }
#keys .tm-key-d { grid-area: 2 / 3; }
#keys .tm-key-duck { grid-area: 3 / 1; }
#keys .tm-key-jump { grid-area: 3 / 2 / 4 / 4; }

/* ── 准星 #crosshair：--ch-* 四个行内变量由 panel-controller 的 applyCrosshair 写入，
   这里只给与 config 默认值一致的回落值。R1：方点（菱角语彙延伸到 HUD）── */
#crosshair {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  --ch-color: #4ade80;
  --ch-size: 6px;
  --ch-thickness: 2px;
  --ch-gap: 4px;
  pointer-events: none;
  z-index: 4;
}
#crosshair.hidden { display: none; }
#crosshair .ch-line {
  position: absolute;
  left: 50%; top: 50%;
  background: var(--ch-color);
}
/* .outline = 1px 硬描边（可读性，非发光） */
#crosshair .ch-line.outline { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85); }
/* 四条线均以容器中心为锚点 + translate 对称（容器 0×0，50% 即中心） */
#crosshair .ch-t {
  width: var(--ch-thickness); height: var(--ch-size);
  transform: translate(-50%, calc(-100% - var(--ch-gap)));
}
#crosshair .ch-b {
  width: var(--ch-thickness); height: var(--ch-size);
  transform: translate(-50%, var(--ch-gap));
}
#crosshair .ch-l {
  height: var(--ch-thickness); width: var(--ch-size);
  transform: translate(calc(-100% - var(--ch-gap)), -50%);
}
#crosshair .ch-r {
  height: var(--ch-thickness); width: var(--ch-size);
  transform: translate(var(--ch-gap), -50%);
}
#crosshair .ch-dot {
  width: calc(var(--ch-thickness) * 2.5); height: calc(var(--ch-thickness) * 2.5);
  transform: translate(-50%, -50%);
  position: absolute; left: 50%; top: 50%;
  background: var(--ch-color);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85);
}

/* ── ESC 设置面板：素色遮罩 + 磨砂窗口。窗口为完整矩形（右上切角已按
   owner 2026-10-16 裁决撤销，原 `#panel::before` 的斜边补线随之删除）。
   高度（owner 复核后定）：固定 580px——内容驱动的 auto 会随 pane
   变来变去；稀疏 pane 的留白由页脚署名收尾（8.4-6）。 ── */
#panel {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: var(--overlay);
}
#panel .win {
  position: relative;
  width: 760px; max-width: 100%; height: 580px; max-height: 92vh;
  display: flex;
  overflow: hidden;
  background: rgba(17, 24, 27, 0.85);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  border: 1px solid var(--border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 2px 0 rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
/* 顶缘压槽嵌片（琥珀，与盖板齐平）：1–5px 的细线与实色，非科幻描边 */
#panel .win::before {
  content: ""; position: absolute; top: 0; left: 18px;
  width: 32px; height: 2px; background: var(--accent);
}
/* 关闭控件 = 右上角那颗螺丝（全屏唯一硬件螺丝）：斜置 45°（十字槽转成正交的 ×，
   读作关闭），9px → 12px（略微放大以便点击），垫圈环 + 1px 边；hover/focus 转琥珀。
   加载卡的纯装饰螺丝已撤（owner 2026-09-30：点缀收敛），本颗承担全部关闭功能。 */
#panel .win .win-close {
  position: absolute; top: 9px; right: 9px; z-index: 3;
  width: 12px; height: 12px; padding: 0; border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 0 2px var(--panel);
  cursor: pointer;
}
/* 十字槽：两条 1px 线，整体 rotate(45deg) 后成为 × */
#panel .win .win-close::before,
#panel .win .win-close::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--muted);
}
#panel .win .win-close::before {
  width: 8px; height: 1px; margin: -0.5px 0 0 -4px;
  transform: rotate(45deg);
}
#panel .win .win-close::after {
  width: 8px; height: 1px; margin: -0.5px 0 0 -4px;
  transform: rotate(-45deg);
}
#panel .win .win-close:hover { border-color: var(--accent); }
#panel .win .win-close:hover::before,
#panel .win .win-close:hover::after { background: var(--accent); }
#panel .win .win-close:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* 左侧模块导航（8.4-7：168px 与行 label 列同宽；项高 36px；
   P3：去色块，hover = 分隔色左缘刻度、激活 = 琥珀左缘 2px 结构线） */
#panel .nav {
  position: relative;
  flex: 0 0 168px; display: flex; flex-direction: column;
  padding: 20px 10px 12px;
  border-right: 1px solid var(--border);
}
/* 服务孔（窗口左下，5px 圆，与右上螺丝对角；底部对齐页脚文字行） */
#panel .nav::after {
  content: ""; position: absolute; bottom: 13px; left: 12px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border-strong);
}
/* 导航标题：与 h4 同规格的分组刻度尺（下分隔刻线 + 右端 3px 短竖刻度） */
#panel .nav h2 {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; padding: 0 10px 16px;
  border-bottom: 1px solid var(--border);
}
#panel .nav h2::after {
  content: ""; position: absolute; right: 0; bottom: -3px;
  width: 1px; height: 3px; background: var(--border-strong);
}
/* 导航项：36px 高；hover = 左缘 1px 分隔色刻度；激活 = 左缘 2px 琥珀结构线
   （R1-6/8.5：去色块，状态用刻线表达） */
#panel .nav .mod {
  display: flex; align-items: center; gap: 9px;
  min-height: 36px; padding: 0 10px; margin: 1px 0;
  font-size: 14px; color: var(--muted);
  cursor: pointer; user-select: none;
}
#panel .nav .mod:hover { color: var(--text); box-shadow: inset 2px 0 0 var(--border-strong); }
#panel .nav .mod.active { color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
#panel .nav .mod .ic {
  width: 18px; display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
#panel .nav .mod .ic svg { width: 15px; height: 15px; display: block; }
/* 导航不再有页脚（owner 2026-09-29 决定删除）：关闭功能上移到窗口右上角的
   .win-close（螺丝按钮），兜底为点击 #panel 遮罩空白处。留白由 pane 页脚署名收尾。 */

/* 通用模块：全宽主操作按钮 #panel .map-btn（P2/D4：琥珀实底；高度 ≥40px。
   原右上 10px 切角已随全站切角一并撤销，现为完整矩形） */
#panel .map-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 40px; margin: 2px 0 8px; padding: 10px 12px;
  font-size: 14px; font-weight: 600; font-family: inherit; text-align: center;
  color: var(--on-accent);
  background: var(--accent);
  border: none; cursor: pointer;
}
#panel .map-btn:hover:not(:disabled) { background: var(--accent-hover); }
#panel .map-btn:disabled { opacity: 0.45; pointer-events: none; }
#panel .map-btn .ic { display: inline-flex; align-items: center; flex: none; }
#panel .map-btn .ic svg { width: 15px; height: 15px; display: block; }

/* 右侧设置体（P1：面板正文 14px） */
#panel .body {
  flex: 1; overflow-y: auto; padding: 24px 28px 24px;
  font-size: 14px;
  overscroll-behavior: contain;
  /* 注意勿设 scrollbar-width/color（标准属性）：Chromium 121+ 会因它们存在
     而忽略下面的 ::-webkit-scrollbar 自绘。自绘全交给 webkit 伪元素。 */
  scrollbar-gutter: stable; /* 窗口定高：滚动条出现与否不再让 pane 内容横跳 */
  display: flex; flex-direction: column;
}
/* 滚动条自绘（::-webkit-scrollbar，Edge/Chromium；勿与标准 scrollbar-width 并设，
   否则 Chromium 121+ 走标准属性、忽略这里的全部自绘）：
   方角 + thumb=分隔色 + 1px 轨道沿，hover 转琥珀（瞬时态）。与行组刻线同语彙 */
#panel .body::-webkit-scrollbar,
#panel .savepoint-list::-webkit-scrollbar,
.health-log::-webkit-scrollbar { width: 10px; height: 10px; }
#panel .body::-webkit-scrollbar-track,
#panel .savepoint-list::-webkit-scrollbar-track,
.health-log::-webkit-scrollbar-track {
  background: var(--bg); border-left: 1px solid var(--border);
}
#panel .body::-webkit-scrollbar-thumb,
#panel .savepoint-list::-webkit-scrollbar-thumb,
.health-log::-webkit-scrollbar-thumb { background: var(--border-strong); }
#panel .body::-webkit-scrollbar-thumb:hover,
#panel .savepoint-list::-webkit-scrollbar-thumb:hover,
.health-log::-webkit-scrollbar-thumb:hover { background: var(--accent); }
#panel .body::-webkit-scrollbar-button,
#panel .savepoint-list::-webkit-scrollbar-button,
.health-log::-webkit-scrollbar-button { display: none; }
#panel .body::-webkit-scrollbar-corner,
#panel .savepoint-list::-webkit-scrollbar-corner,
.health-log::-webkit-scrollbar-corner { background: var(--bg); }

#panel .mod-pane { display: none; position: relative; }
#panel .mod-pane.active { display: flex; flex-direction: column; flex: 1; }

/* 页头层级：标题 + 说明 + 分隔线 + 档案编号（右上，琥珀） */
#panel .pane-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
#panel .pane-desc {
  font-size: 12.5px; color: var(--muted); line-height: 1.6;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
/* 档案编号（8.3）：等宽 12px，<分类码>-<两位序号>，每 pane 恰好 1 处 */
#panel .mod-pane::before {
  position: absolute; top: 0; right: 0;
  font-family: var(--mono); font-size: 12px; color: var(--accent);
  letter-spacing: 0.04em;
}
#panel .mod-pane[data-pane="general"]::before { content: "GN-01"; }
#panel .mod-pane[data-pane="physics"]::before { content: "PH-02"; }
#panel .mod-pane[data-pane="hull"]::before { content: "HL-03"; }
#panel .mod-pane[data-pane="keys"]::before { content: "KB-04"; }
#panel .mod-pane[data-pane="look"]::before { content: "OP-05"; }
#panel .mod-pane[data-pane="display"]::before { content: "DS-06"; }
#panel .mod-pane[data-pane="view"]::before { content: "VW-07"; }
#panel .mod-pane[data-pane="health"]::before { content: "MO-08"; }
/* 页脚署名位（8.3）：pane 名 + 版本短码，右下 11px muted；margin-top:auto
   在内容不足时收尾填补空白（8.4-6），上缘 1px 分隔刻线 */
#panel .mod-pane::after {
  display: block; margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--border);
  text-align: right; font-family: var(--mono); font-size: 11px;
  color: var(--muted); letter-spacing: 0.04em;
}
#panel .mod-pane[data-pane="general"]::after { content: "通用面板 · v0.1"; }
#panel .mod-pane[data-pane="physics"]::after { content: "物理参数 · v0.1"; }
#panel .mod-pane[data-pane="hull"]::after { content: "人物体型 · v0.1"; }
#panel .mod-pane[data-pane="keys"]::after { content: "自定义按键 · v0.1"; }
#panel .mod-pane[data-pane="look"]::after { content: "操作 · v0.1"; }
#panel .mod-pane[data-pane="display"]::after { content: "显示 · v0.1"; }
#panel .mod-pane[data-pane="view"]::after { content: "视角 · v0.1"; }
#panel .mod-pane[data-pane="health"]::after { content: "权威健康 · v0.1"; }

/* 小节标题 #panel h4（8.3 分组刻度尺：下分隔刻线 + 右端 3px 短竖刻度；
   P1：12px/600 + 0.06em 字距） */
#panel h4 {
  position: relative;
  margin: 18px 0 8px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  padding: 2px 0 5px; border-bottom: 1px solid var(--border-strong);
}
#panel h4::after {
  content: ""; position: absolute; right: 0; bottom: -3px;
  width: 1px; height: 3px; background: var(--border-strong);
}

/* 控件行（8.4-2：三列网格 168/1fr/88 = label / 控件 / 读数；
   8.3 字段引导线：label 与值之间 1px 点线（4px 节距）——checkbox/color
   行的控件在右缘读数位，中列由点线填充；滑块行的轨道即刻度线 */
#panel .row {
  position: relative;
  display: grid; grid-template-columns: 168px 1fr 88px;
  gap: 0 12px; align-items: center;
  padding: 7px 0; margin: 1px 0;
}
#panel .row > label { font-size: 14px; color: var(--muted); }
/* 字段引导线（checkbox / color 行：中列无全宽控件，点线填充） */
#panel .row:has(> input[type="checkbox"])::before,
#panel .row:has(> input[type="color"])::before {
  content: ""; position: absolute; left: 176px; right: 96px; top: 50%;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    var(--border-strong) 0 1px, transparent 1px 4px);
  opacity: 0.5; pointer-events: none;
}
/* 健康行：值 span 占中列、按钮独占读数列 ⇒ 三元素同行（通用规则 `#panel .row > button.small`
   的 `grid-column: 2 / -1` 跨列会把按钮挤到第二行，实测 label/值 y=126 而按钮 y=144） */
#panel .mod-pane[data-pane="health"] .row > button.small { grid-column: 3; }
/* 空 label 的行（恢复默认等）：label 隐藏，按钮归位到读数列右对齐（8.4-4） */
#panel .row > label:empty { display: none; }
#panel .row > button.small { grid-column: 2 / -1; justify-self: end; }
/* checkbox / color 是「值」：落到右缘读数位 */
#panel .row > input[type="checkbox"] { grid-column: 3; justify-self: center; }
#panel .row > input[type="color"] { grid-column: 3; justify-self: stretch; }

/* 滑块（P2 自绘 + R1-3 重绘：2px 实线轨道（去点状虚线）+ 琥珀方角嵌件
   游标（矩形，原 4px 切角已随全站切角撤销）；webkit/moz 双轨；
   accent-color 保留作无障碍回落） */
#panel input[type="range"] {
  flex: 1; min-width: 0; width: 100%; height: 18px;
  -webkit-appearance: none; appearance: none;
  background: transparent; cursor: pointer;
  accent-color: var(--accent);
}
#panel input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: var(--border-strong);
}
#panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 14px; margin-top: -6px;
  background: var(--accent); border: 1px solid var(--bg);
}
#panel input[type="range"]::-moz-range-track {
  height: 2px; background: var(--border-strong);
}
#panel input[type="range"]::-moz-range-thumb {
  width: 10px; height: 14px; background: var(--accent);
  border: 1px solid var(--bg);
}

/* 读数区 #panel .val（8.4-3：去边框为「读数」——等宽右对齐文本 + 单位，
   聚焦时显示可编辑（下边线琥珀）；值列固定 88px） */
#panel .val {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
#panel .val input {
  width: 100%; min-width: 0; text-align: right; font-size: 13px; color: var(--text);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  background: transparent; border: none; outline: none;
  caret-color: var(--accent);
  -moz-appearance: textfield; appearance: textfield;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
}
#panel .val input::-webkit-outer-spin-button,
#panel .val input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#panel .val input:hover:not(:focus) { border-bottom-color: var(--border-strong); }
#panel .val input:focus { border-bottom: 1px solid var(--accent); }
#panel .val .unit { font-size: 11px; color: var(--muted); flex: none; }

/* 开关（P2 自绘 + R1：checked = 琥珀 1px 内嵌刻线表达，不用色块填充） */
#panel input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex: none;
  background: var(--bg); border: 1px solid var(--border-strong);
  cursor: pointer;
}
#panel input[type="checkbox"]:checked {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
#panel input[type="checkbox"]:hover { border-color: var(--accent); }

/* 禁用态统一（与 .map-btn / select / button.small 的 0.45 同值同语彙） */
#panel input[type="range"]:disabled,
#panel input[type="checkbox"]:disabled,
#panel input[type="color"]:disabled { opacity: 0.45; cursor: default; }

/* 颜色选择（P2 自绘：细线小方框 + 内嵌 swatch，去原生内边距） */
#panel input[type="color"] {
  height: 26px; padding: 0;
  background: var(--bg); border: 1px solid var(--border);
  cursor: pointer;
}
#panel input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
#panel input[type="color"]::-webkit-color-swatch {
  border: 1px solid var(--border-strong);
}

/* 下拉框（P2：保留原生下拉面板，外观自绘——细线框 + 右侧刻度箭头 +
   聚焦态琥珀边；箭头为 data-URI 三角，muted 色） */
#panel select {
  flex: 1; min-width: 0; font-size: 13px; font-family: inherit; color: var(--text);
  background-color: var(--panel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23a6b0b1'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  border: 1px solid var(--border); padding: 5px 22px 5px 8px;
  cursor: pointer; outline: none; appearance: none; -webkit-appearance: none;
}
#panel select:focus { border-color: var(--accent); }
#panel select:disabled { opacity: 0.45; cursor: default; }

/* 状态标签条（8.3：12px 高、无圆角、1px 边；激活态 = 琥珀边 + 琥珀字，
   原右上切角已撤销）——button.small 与 .key-chip 统一此形态 */
#panel button.small {
  font-family: inherit;
  font-size: 12px; color: var(--text); padding: 2px 10px;
  background: transparent; border: 1px solid var(--border-strong);
  cursor: pointer;
}
#panel button.small:hover { color: var(--accent); border-color: var(--accent); }
#panel button.small.active {
  color: var(--accent); border-color: var(--accent);
}
#panel button.small:disabled { opacity: 0.45; pointer-events: none; }

/* 按键模块（P3：去 hover 色块） */
#panel .key-row {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0; margin: 1px 0;
}
#panel .key-row .kname { flex: 0 0 128px; font-size: 14px; color: var(--muted); }
#panel .key-row .kkeys { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* 状态标签条（8.3）：键位 chip 统一形态 */
#panel .key-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text); padding: 2px 9px;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  background: transparent; border: 1px solid var(--border-strong);
  cursor: pointer;
}
#panel .key-chip:hover { border-color: var(--accent); color: var(--accent); }
/* 录制态 .key-chip.recording：warn 语义边 + 字（静态，无脉冲、无色块填充） */
#panel .key-chip.recording {
  border-color: var(--warn); color: var(--warn);
}
#panel .key-chip .x { color: var(--err); font-size: 11px; padding: 0 1px; }
#panel .key-chip .x:hover { color: var(--text); }
#panel .key-add {
  font-size: 12px; color: var(--muted); padding: 2px 9px;
  background: transparent; border: 1px dashed var(--border-strong);
  cursor: pointer;
}
#panel .key-add:hover { border-color: var(--accent); color: var(--accent); }
/* 键位被删光（动作已禁用）的占位提示 */
#panel .kempty { font-size: 12px; color: var(--muted); padding: 2px 4px; }
#panel .key-rec-hint {
  font-size: 12px; color: var(--warn); padding: 6px 10px;
  border: 1px solid var(--warn);
  margin-bottom: 6px;
}

/* 说明信息卡 #panel .hint（左缘 1px 刻线） */
#panel .hint {
  margin-top: 14px; font-size: 11.5px; color: var(--muted); line-height: 1.7;
  padding: 8px 10px;
  border-left: 1px solid var(--border-strong);
}

/* 存点列表：行 = 序号 + 坐标/速度摘要 + 读 + 删除（无确认） */
#panel .savepoint-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 240px; overflow-y: auto; margin-top: 8px;
}
#panel .savepoint-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; font-size: 12px; color: var(--text);
  border: 1px solid var(--border);
}
#panel .savepoint-row:hover { border-color: var(--border-strong); }
#panel .savepoint-row .sp-idx {
  min-width: 20px; color: var(--muted); font-variant-numeric: tabular-nums;
}
#panel .savepoint-row .sp-pos {
  flex: 1; font-family: var(--mono); font-size: 11px;
  color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#panel .savepoint-row button.small {
  padding: 2px 8px; font-size: 11px;
}
/* 删除按钮（err 交互态） */
#panel .savepoint-row button.danger {
  color: var(--err); border-color: var(--err);
}
#panel .savepoint-row button.danger:hover {
  color: var(--text); background: rgba(226, 133, 123, 0.12);
}

.mt-12 { margin-top: 12px; }

/* ── 启动引导 #loadingOverlay：与 .win 同一套壳体语彙（P3：磨砂 + 压槽 +
   左下螺丝 + 顶缘嵌片 + 进度轨道刻线）── */
#loadingOverlay {
  display: none; position: fixed; inset: 0; z-index: 8000;
  background: var(--bg);
  align-items: flex-start; justify-content: center;
  padding: 22vh 24px 0;
  color: var(--text);
}
#loadingOverlay.show { display: flex; }
#loadingOverlay .load-card {
  position: relative;
  width: min(440px, 92vw); padding: 20px 24px;
  background: rgba(17, 24, 27, 0.85);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  border: 1px solid var(--border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 2px 0 rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
#loadingOverlay .load-card::before {
  content: ""; position: absolute; top: 0; left: 18px;
  width: 32px; height: 2px; background: var(--accent);
}
/* 档案编号（与 pane 页头编号同类：mono 12px 琥珀，右上） */
#loadingOverlay .load-code {
  position: absolute; top: 10px; right: 14px;
  font-family: var(--mono); font-size: 12px; color: var(--accent);
  letter-spacing: 0.04em;
}
#loadingOverlay .load-title {
  font-size: 14px; font-weight: 600; margin-bottom: 4px;
}
#loadingOverlay .load-sub {
  font-size: 12px; color: var(--muted); margin-bottom: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 进度轨道刻线（P3）：轨道内 12px 节距的 1px 刻线 */
#loadingOverlay .load-track {
  position: relative;
  height: 6px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border);
}
#loadingOverlay .load-track::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(224, 227, 220, 0.08) 0 1px, transparent 1px 12px);
}
#loadingOverlay .load-fill {
  height: 100%; width: var(--load-pct, 0%);
  background: var(--accent);
}
#loadingOverlay .load-meta {
  display: flex; justify-content: space-between; margin-top: 14px;
  padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted); font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
/* 加载失败态：填充与文字转 err，副文本超长换行以便查看原因 */
#loadingOverlay.error .load-fill { background: var(--err); }
#loadingOverlay.error .load-title { color: var(--err); }
#loadingOverlay.error .load-sub {
  white-space: normal; word-break: break-all; color: var(--err);
}

/* ── 可见性钩子：由 JS 切类名（进度值则写 --load-pct）驱动显隐 ── */
#panel.hidden { display: none; }
#error.show { display: block; }
.key-rec-hint { display: none; }
.key-rec-hint.show { display: block; }
#crosshair.no-dot .ch-dot { display: none; }

@media (max-width: 640px) {
  #panel { padding: 10px; }
  #panel .nav { flex: 0 0 132px; padding: 14px 6px 10px; }
  #panel .nav h2 { font-size: 13px; padding: 0 8px 12px; }
  #panel .nav .mod { padding: 0 8px; font-size: 13px; gap: 6px; }
  #panel .body { padding: 16px 14px; }
  #panel .pane-title { font-size: 15px; }
  #panel .row { grid-template-columns: 120px 1fr 72px; }
  /* 引导线端点跟随 120/72 栅格（= 列宽 + gap 12 再各收 4px，与定宽口径一致） */
  #panel .row:has(> input[type="checkbox"])::before,
  #panel .row:has(> input[type="color"])::before { left: 128px; right: 80px; }
  #panel .row label, #panel .key-row .kname { font-size: 13px; }
  #stats { font-size: 17px; }
}

/* 权威健康 pane 内的日志控制台 .health-log（等宽 + 预换行 + 可滚动） */
.health-log {
  font: 11px/1.5 var(--mono);
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 8px 10px;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
}

/* ── 更多画面项（rp-*）：结构与本页 #panel .row 同构 —— 每行一个 .row（168 / 1fr / 88，
      styles.css:415），标注格 + 复位按钮占第 1 列（定宽、长标注列内换行，不挤压滑块列），
      读数是 .val > input（+ .val .unit），提示条在行内跨整行，小节标题沿用本页 h4。── */
#panel .row > .rp-label { display: flex; align-items: center; gap: 6px; min-width: 0; }
#panel .row > .rp-label > label {
  flex: 1; min-width: 0; font-size: 14px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere;
}
#panel .rp-reset {
  flex: none; width: auto; padding: 0 4px; line-height: 16px; white-space: nowrap;
  font-size: 11px; background: transparent; color: var(--muted);
  border: 1px solid var(--border); cursor: pointer; opacity: .7;
}
#panel .rp-reset:hover { color: var(--accent); border-color: var(--accent); opacity: 1; }
#panel .rp-mapstate { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 2px 0 8px; }
#panel .row > .rp-note { grid-column: 1 / -1; font-size: 11px; color: var(--muted); line-height: 1.4; margin-top: -3px; }
#panel .rp-unit { font-size: 11px; color: var(--muted); flex: none; }
/* 输入中的非法值（越界/非数字）：只标下边线，不改值、不夹取 */
#panel .val input.rp-invalid { border-bottom-color: var(--err); }
#panel .row > input.rp-text {
  min-width: 0; width: 100%; font-family: inherit; font-size: 13px; color: var(--text);
  background: transparent; border: none; border-bottom: 1px solid var(--border-strong); padding: 2px 0;
}

/* 标签式输入（P2-③）：多名字的材质项用它，值仍是逗号分隔串 */
.rp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.rp-tags .rp-tag { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 6px;
  border: 1px solid var(--border); border-radius: 3px; font-size: 11px; color: var(--text); background: var(--panel); }
.rp-tags .rp-tag-x { padding: 0 2px; font: inherit; line-height: 1; cursor: pointer;
  color: var(--muted); background: none; border: 0; }
.rp-tags .rp-tag-x:hover { color: var(--accent); }
.rp-tags input { flex: 1 1 90px; min-width: 60px; }