/* ============================================================================
   LLMprobe 检测仪 —— 界面样式
   ----------------------------------------------------------------------------
   设计方向：精密信号分析仪
   把控制台当作一台实验室测量仪器来设计：示波器的刻度栅格、磷光读数窗、
   机加工面板与 LED 信号灯。刻意避开通用仪表盘的视觉套路（蓝紫渐变、
   玻璃拟态、圆润卡片），让界面气质与"精密测量"的产品本质一致。

   字体：Archivo（界面/标题）+ Chivo Mono（数据/读数），均自托管，
        中文由系统字体兜底，确保内网离线可用。
   ============================================================================ */

/* ── 自托管字体 ──────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Archivo Var";
  src: url("./vendor/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Chivo Mono Var";
  src: url("./vendor/fonts/chivo-mono-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

/* ── 设计令牌 ────────────────────────────────────────────────────────────── */
:root {
  /* 表面：近乎无彩的深蓝黑，靠明度层次而非色相区分 */
  --bg:          #06080a;
  --surface:     #0d1116;
  --surface-2:   #121820;
  --surface-3:   #18202a;
  --line:        #1d2731;
  --line-2:      #2a3743;
  --line-3:      #3a4a58;

  /* 墨色：略带暖调的非纯白，长时间阅读更舒适 */
  --ink:         #c9d6e0;
  --ink-dim:     #7b8c9a;
  --ink-faint:   #4e5d6a;

  /* 仪器主色：偏绿的青色，比通用 #00d4ff 更有"荧光屏"质感 */
  --sig:         #2ee6c5;
  --sig-dim:     #1a8f7c;
  --sig-glow:    rgba(46, 230, 197, 0.35);

  /* 信号灯语义色 */
  --pass:        #45e08c;
  --warn:        #f2a93b;
  --fail:        #ff5f56;
  --idle:        #5a6b78;

  --pass-bg:     rgba(69, 224, 140, 0.11);
  --warn-bg:     rgba(242, 169, 59, 0.11);
  --fail-bg:     rgba(255, 95, 86, 0.11);
  --sig-bg:      rgba(46, 230, 197, 0.09);

  /* 凹陷面（读数窗、表格、输入槽）与机架 */
  --well:        #080b0f;
  --well-deep:   #05070a;
  --well-input:  #070a0e;
  --rack-a:      #0b0f14;
  --rack-b:      #090c11;
  --backdrop:    rgba(3, 5, 7, .78);

  /* 立体感：压暗阴影与机加工高光 */
  --shadow-1:    rgba(0, 0, 0, .5);
  --shadow-2:    rgba(0, 0, 0, .6);
  --bevel:       rgba(255, 255, 255, .055);
  --bevel-strong: rgba(255, 255, 255, .35);

  /* 背景栅格线与信号色 RGB 分量（供 rgba() 组合出各级透明度） */
  --grid-1:      rgba(120, 160, 190, 0.030);
  --grid-2:      rgba(120, 160, 190, 0.055);
  --sig-rgb:     46, 230, 197;
  --pass-rgb:    69, 224, 140;
  --warn-rgb:    242, 169, 59;
  --fail-rgb:    255, 95, 86;

  /* 语义色上的文字色 */
  --sig-btn-a-h: #5cf5da;
  --sig-btn-b-h: #1cc2a7;
  --sig-btn-a:   #46f0d1;
  --sig-btn-b:   #16b39a;
  --mark-a:      #16202a;
  --mark-b:      #0a0e13;
  --on-sig:      #04211c;
  --fail-ink:    #ffb4ae;
  --pass-ink:    #56d364;

  --font-ui:   "Archivo Var", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-mono: "Chivo Mono Var", ui-monospace, SFMono-Regular,
               "Cascadia Code", Consolas, monospace;

  --ease: cubic-bezier(0.22, 0.8, 0.32, 1);
  --step: 2px;          /* 机加工圆角：硬朗、克制 */
  --step-lg: 3px;
}

/* ── 基础重置 ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* 整体放大 25%）
   设计基准是 1280px 视口，在大屏上元素偏小。zoom 会如实缩放全部尺寸
   （字体、间距、边框、阴影），无需逐个改写数值。 */
:root { zoom: 1.25; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  font-feature-settings: "tnum" 1, "cv05" 1;
  -webkit-font-smoothing: antialiased;
  min-height: 80vh;   /* 100vh ÷ 1.25，抵消 zoom */
}

/* ── 背景：示波器刻度栅格 ────────────────────────────────────────────────── */
.graticule {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 细/粗两级刻度线，模拟示波屏的分度栅格 */
  background-image:
    linear-gradient(var(--grid-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-1) 1px, transparent 1px),
    linear-gradient(var(--grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-2) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px, 110px 110px, 110px 110px;
  /* 四周压暗，中央留亮，形成屏幕的球面感 */
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 25%, transparent 78%);
}
/* 顶部一条极淡的水平扫掠光带，缓慢移动 */
.bg-sweep {
  position: fixed;
  left: 0; right: 0; top: -30%;
  height: 26%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(var(--sig-rgb), 0.022), transparent);
  animation: sweep 17s linear infinite;
}
@keyframes sweep { 0% { top: -30%; } 100% { top: 108%; } }

/* ── 机架头（仪器顶部面板） ──────────────────────────────────────────────── */
.rack {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(180deg, var(--rack-a) 0%, var(--rack-b) 100%);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 8px 24px rgba(0, 0, 0, 0.5);
}
.rack-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 22px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line-3);
  border-radius: var(--step);
  background: radial-gradient(circle at 50% 30%, var(--mark-a), var(--mark-b));
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 var(--bevel);
  position: relative;
  overflow: hidden;
}
.brand-mark img { width: 26px; height: 26px; display: block; filter: saturate(1.1); }
/* 通电指示：主色呼吸 */
.brand-mark::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 12px var(--sig-glow);
  animation: markPulse 4s ease-in-out infinite;
}
@keyframes markPulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: .85; }
}
.brand-text h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-text p {
  margin: 1px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: uppercase;
  font-family: var(--font-mono);
}

/* 遥测条：以仪器读数的方式呈现服务状态 */
.telemetry {
  margin-left: auto;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--step);
  background: var(--well);
  overflow: hidden;
}
.tele-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 5px 14px;
  min-width: 76px;
  border-right: 1px solid var(--line);
}
.tele-item:last-child { border-right: none; }
.tele-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.tele-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.tele-val.led-ok   { color: var(--pass); text-shadow: 0 0 10px rgba(var(--pass-rgb),.5); }
.tele-val.led-err  { color: var(--fail); text-shadow: 0 0 10px rgba(var(--fail-rgb),.5); }
.tele-val.led-idle { color: var(--ink-faint); }

/* ── 地球线框：全球节点的隐喻，兼作仪器氛围 ──────────────────────────────── */
/* 与卫星地面站的跟踪显示同构：只画经纬线框，不画实体球面，
   以保持仪器感并确保内容区不受干扰。 */
.globe {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  /* 巨型化：球体占据大部分背景，作为整体氛围的底图。
     面板为不透明层，地球由面板下方的留白与边缘显露，
     左侧地平弧线恰好落在左侧面板右缘之外，形成"行星地平线"的观感。 */
  right: -20.8vmin;
  bottom: -32vmin;
  width: 124vmin;
  height: 124vmin;
  max-width: 1600px;
  max-height: 1600px;
  opacity: .8;
  /* 边缘柔和溶入背景，避免生硬的圆形边界 */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 88%);
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 88%);
}
/* 浅色底上深色细线对比天然偏低，需比夜间更实才看得清 */
:root[data-theme="light"] .globe { opacity: .95; }
@media (max-width: 1350px) {
  /* 窄屏时退到页面底部居中，作为背景纹理 */
  .globe { right: 50%; bottom: -41.6vmin; transform: translateX(50%); width: 140vmin; height: 140vmin; opacity: .62; }
}

/* 主题切换键：方形图标键 */
.key-icon {
  padding: 8px 11px;
  font-size: 15px;
  line-height: 1;
  flex: none;
}
.theme-glyph {
  display: block;
  transition: transform .4s var(--ease);
}
.key-icon:hover .theme-glyph { transform: rotate(22deg); }

/* ── 机加工按键 ──────────────────────────────────────────────────────────── */
.key {
  appearance: none;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--line-2);
  border-radius: var(--step);
  padding: 8px 15px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--bevel), 0 1px 2px var(--shadow-1);
  transition: color .14s, border-color .14s, transform .06s, background .14s;
  white-space: nowrap;
}
.key:hover { color: var(--ink); border-color: var(--line-3); }
/* 按下：整体下沉并翻转为内凹阴影，模拟实体键程 */
.key:active { transform: translateY(1px); box-shadow: inset 0 2px 4px var(--shadow-2); }
.key:disabled, .key[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.key:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }

.key-primary {
  color: var(--on-sig);
  background: linear-gradient(180deg, var(--sig-btn-a), var(--sig-btn-b));
  border-color: #2ee6c5;
  font-weight: 700;
  box-shadow: inset 0 1px 0 var(--bevel-strong), 0 0 18px rgba(var(--sig-rgb),.22);
}
.key-primary:hover { background: linear-gradient(180deg, #5cf5da, #1cc2a7); }
.key:disabled { filter: saturate(.5); }

.key-ghost { background: transparent; box-shadow: none; }
.key-ghost:hover { background: var(--surface-2); }

.key-mini { padding: 5px 10px; font-size: 11px; }
.key-danger { color: #ff8b82; }
.key-danger:hover { color: var(--fail); border-color: rgba(var(--fail-rgb),.5); background: var(--fail-bg); }

/* ── 布局 ────────────────────────────────────────────────────────────────── */
.bench {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 22px 40px;
  display: grid;
  grid-template-columns: minmax(340px, 400px) 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1350px) { .bench { grid-template-columns: 1fr; } }

/* ── 仪器模块（面板） ────────────────────────────────────────────────────── */
.module {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--step-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 10px 30px rgba(0,0,0,.45);
  animation: powerUp .5s var(--ease) both;
}
.module + .module { margin-top: 0; }
@keyframes powerUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 面板四角的定位标记（类似 PCB 基准点） */
.module::before,
.module::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border-color: var(--line-3);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.module::before { top: 5px; left: 5px; border-top-width: 1px; border-left-width: 1px; }
.module::after  { bottom: 5px; right: 5px; border-bottom-width: 1px; border-right-width: 1px; }

.module-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent);
}
/* 面板铭牌：等宽小字 + 字距，像仪器上的印刷标签 */
.module-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.module-title::before {
  content: "";
  display: inline-block;
  width: 3px; height: 11px;
  margin-right: 8px;
  vertical-align: -1px;
  background: var(--sig);
  box-shadow: 0 0 8px var(--sig-glow);
}
.module-body { padding: 16px; }

/* ── 表单控件 ────────────────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field-row { display: flex; gap: 11px; }
.field-row .field { flex: 1; min-width: 0; }
.field-narrow { max-width: 150px; }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.req { color: var(--sig); }

input[type="text"], input[type="url"], input[type="password"],
input[type="number"], select, textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--well-input);
  border: 1px solid var(--line-2);
  border-radius: var(--step);
  padding: 9px 11px;
  outline: none;
  /* 内凹：凹陷的输入槽 */
  box-shadow: inset 0 2px 4px var(--shadow-1);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--ink-faint); }
input:focus, select:focus {
  border-color: var(--sig-dim);
  box-shadow: inset 0 2px 4px var(--shadow-1), 0 0 0 3px rgba(var(--sig-rgb),.12);
}
select { cursor: pointer; font-family: var(--font-ui); }

.hint {
  margin: 5px 0 0;
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.5;
}
.hint-safe { color: var(--pass) !important; opacity: .85; }

.input-affix { position: relative; }
.input-affix input { padding-right: 40px; }
.input-affix .key {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  padding: 4px 7px;
  font-size: 12px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.checkbox {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--ink-dim);
  cursor: pointer;
  line-height: 1.6;
}
.checkbox input {
  margin-top: 3px;
  accent-color: var(--sig);
  width: 14px; height: 14px;
  flex: none;
}

/* 折叠区：仪表上的翻盖 */
.hatch {
  border: 1px solid var(--line);
  border-radius: var(--step);
  padding: 9px 12px 3px;
  margin: 4px 0 14px;
  background: rgba(255,255,255,.012);
}
.hatch[open] { border-color: var(--line-2); }
.hatch > summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
  user-select: none;
  list-style: none;
}
.hatch > summary::-webkit-details-marker { display: none; }
.hatch > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 7px;
  color: var(--sig);
  transition: transform .18s var(--ease);
}
.hatch[open] > summary::before { transform: rotate(90deg); }

/* ── 数据留存征询 ────────────────────────────────────────────────────────── */
.consent {
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--sig);
  border-radius: var(--step);
  background: var(--sig-bg);
  padding: 11px 13px;
  margin-bottom: 14px;
}
.consent .checkbox span { font-size: 12px; }
.consent strong { color: var(--ink); font-weight: 600; }
.consent em { font-style: normal; color: var(--sig); }
.consent-note {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
}
.consent-note.consent-on { color: var(--pass); }

/* ── 协议同意（当前隐藏） ────────────────────────────────────────────────── */
.agreement {
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--warn);
  border-radius: var(--step);
  background: var(--warn-bg);
  padding: 11px 13px;
  margin-bottom: 14px;
}
.agreement a { color: var(--warn); }
.agreement-hint { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-faint); }
.agreement.agreement-error {
  border-left-color: var(--fail);
  background: var(--fail-bg);
  animation: shake .4s var(--ease);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.agreement-warn { margin: 8px 0 0; font-size: 11.5px; color: var(--fail); font-weight: 600; }

/* ── 动作区 ──────────────────────────────────────────────────────────────── */
.actions { display: flex; gap: 9px; margin-top: 4px; }
.actions .key { flex: 1; padding: 11px; }
.actions-hint {
  margin: 9px 0 0;
  font-size: 10.5px;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.6;
  font-family: var(--font-mono);
}

/* ── LED 信号灯 ──────────────────────────────────────────────────────────── */
.led {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  position: relative;
}
.led-pass { background: var(--pass); box-shadow: 0 0 8px var(--pass), inset 0 0 2px rgba(255,255,255,.6); }
.led-warn { background: var(--warn); box-shadow: 0 0 8px var(--warn), inset 0 0 2px rgba(255,255,255,.6); }
.led-fail { background: var(--fail); box-shadow: 0 0 8px var(--fail), inset 0 0 2px rgba(255,255,255,.6); }
.led-idle { background: var(--idle); }
.led-live { animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ── 模式选择键（标签页） ────────────────────────────────────────────────── */
.modes {
  display: flex;
  gap: 3px;
  padding: 9px 12px 0;
  border-bottom: 1px solid var(--line);
}
.mode {
  appearance: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--step) var(--step) 0 0;
  padding: 9px 15px;
  cursor: pointer;
  position: relative;
  top: 1px;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color .15s, background .15s, border-color .15s;
}
.mode:hover { color: var(--ink-dim); background: rgba(255,255,255,.02); }
.mode.active {
  color: var(--sig);
  background: var(--surface);
  border-color: var(--line-2);
  border-bottom: 1px solid var(--surface);
}
/* 选中键上方的通电指示 */
.mode.active::before {
  content: "";
  position: absolute;
  top: 5px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 2px;
  background: var(--sig);
  box-shadow: 0 0 8px var(--sig-glow);
}
.mode-count {
  font-size: 9.5px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--ink-dim);
  letter-spacing: 0;
}
.mode.active .mode-count { background: var(--sig-bg); color: var(--sig); }

.pane { display: none; padding: 16px; }
.pane.active { display: block; animation: fadeIn .25s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pane-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* ── 空状态 ──────────────────────────────────────────────────────────────── */
.idle-screen {
  padding: 56px 20px;
  text-align: center;
  color: var(--ink-faint);
}
/* 待机扫描线动画，暗示仪器已通电但未触发测量 */
.idle-scope {
  width: 76px; height: 76px;
  margin: 0 auto 18px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: radial-gradient(circle, rgba(var(--sig-rgb),.05), transparent 70%);
}
.idle-scope img { width: 44px; height: 44px; opacity: .5; }
.idle-scope::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--sig);
  opacity: 0;
  animation: ping 3s var(--ease) infinite;
}
@keyframes ping {
  0%   { transform: scale(.85); opacity: .5; }
  100% { transform: scale(1.5); opacity: 0; }
}
.idle-screen p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
/* 无信号基线：示波器未触发时的平直扫描线，缓慢游走 */
.flatline {
  width: min(320px, 70%);
  height: 26px;
  margin: 0 auto 16px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.flatline span {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--sig-dim) 20%, var(--sig) 50%, var(--sig-dim) 80%, transparent);
  opacity: .45;
  animation: flatlineDrift 5s ease-in-out infinite;
}
@keyframes flatlineDrift {
  0%, 100% { transform: translateY(0); opacity: .3; }
  50%      { transform: translateY(-1px); opacity: .65; }
}

/* ── 进度 ────────────────────────────────────────────────────────────────── */
.rig {
  padding: 4px 0;
}
.rig-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 9px;
}
.rig-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.rig-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--sig);
}
/* 分段式进度条：像 VU 表的离散格子，而非平滑渐变 */
.rig-track {
  display: flex;
  gap: 2px;
  height: 10px;
  padding: 2px;
  background: var(--well-input);
  border: 1px solid var(--line-2);
  border-radius: var(--step);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.55);
  overflow: hidden;
}
.rig-seg {
  flex: 1;
  background: var(--surface-3);
  border-radius: 1px;
  transition: background .3s, box-shadow .3s;
}
.rig-seg.on {
  background: var(--sig);
  box-shadow: 0 0 6px var(--sig-glow);
}
.rig-current {
  margin: 9px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  min-height: 17px;
}

/* ── 提示条 ──────────────────────────────────────────────────────────────── */
.notice {
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--fail);
  background: var(--fail-bg);
  border-radius: var(--step);
  padding: 11px 13px;
  font-size: 12.5px;
  color: var(--fail-ink);
  margin-bottom: 12px;
  word-break: break-word;
  animation: powerUp .3s var(--ease) both;
}
.notice-inline {
  margin: 0;
  padding: 11px 13px;
  border-left: 2px solid var(--fail);
  background: var(--fail-bg);
  border-radius: var(--step);
  font-size: 12.5px;
  color: var(--fail-ink);
  font-family: var(--font-mono);
}

/* ── 读数面板（评分） ────────────────────────────────────────────────────── */
.readout {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--step);
  background: var(--well);
  overflow: hidden;
  margin-bottom: 14px;
  animation: powerUp .45s var(--ease) both;
}
.readout-main {
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--line);
  min-width: 190px;
  background: radial-gradient(ellipse at 30% 0%, rgba(var(--sig-rgb),.05), transparent 70%);
}
.readout-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3px;
}
/* 磷光读数：大字、等宽、带辉光 */
.readout-value {
  font-family: var(--font-mono);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.readout-value.s-good { color: var(--pass); text-shadow: 0 0 26px rgba(var(--pass-rgb),.45); }
.readout-value.s-mid  { color: var(--warn); text-shadow: 0 0 26px rgba(var(--warn-rgb),.4); }
.readout-value.s-bad  { color: var(--fail); text-shadow: 0 0 26px rgba(var(--fail-rgb),.45); }

.readout-side { flex: 1; padding: 14px 18px; min-width: 0; }
/* 计数器阵列 */
.tallies { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.tally { display: flex; flex-direction: column; gap: 1px; }
.tally-n {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
}
.tally-t {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.c-pass { color: var(--pass); }
.c-warn { color: var(--warn); }
.c-fail { color: var(--fail); }
.c-skip { color: var(--ink-faint); }

.readout-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

/* ── 身份核验卡 ──────────────────────────────────────────────────────────── */
.verdict {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--line-3);
  border-radius: var(--step);
  background: var(--surface-2);
  padding: 13px 15px;
  margin-bottom: 14px;
  animation: powerUp .5s var(--ease) both;
}
.verdict.v-match  { border-left-color: var(--pass); background: linear-gradient(90deg, var(--pass-bg), var(--surface-2) 40%); }
.verdict.v-mismatch { border-left-color: var(--fail); background: linear-gradient(90deg, var(--fail-bg), var(--surface-2) 40%); }
.verdict.v-unknown  { border-left-color: var(--warn); background: linear-gradient(90deg, var(--warn-bg), var(--surface-2) 40%); }

.verdict-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.verdict-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
/* 判定牌：像仪器面板上的状态铭牌 */
.verdict-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: var(--step);
  border: 1px solid currentColor;
}
.verdict-tag .id-raw {
  display: block;
  font-size: 8.5px;
  font-style: normal;
  letter-spacing: 0.16em;
  opacity: .7;
  font-weight: 500;
}
.id-ok   { color: var(--pass); background: var(--pass-bg); }
.id-bad  { color: var(--fail); background: var(--fail-bg); }
.id-warn { color: var(--warn); background: var(--warn-bg); }

.verdict-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-dim);
}

.cand-list { margin-top: 11px; }
.cand-cap {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cand-row {
  display: grid;
  grid-template-columns: minmax(90px, 170px) 1fr 44px;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 11.5px;
}
.cand-name { font-family: var(--font-mono); color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand-bar-wrap { height: 5px; background: var(--well-input); border-radius: 1px; overflow: hidden; box-shadow: inset 0 1px 2px var(--shadow-2); }
.cand-bar { height: 100%; background: var(--sig); box-shadow: 0 0 7px var(--sig-glow); transform-origin: left; animation: growX .7s var(--ease) both; }
@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cand-pct { font-family: var(--font-mono); color: var(--ink-dim); text-align: right; }

.id-notes { margin: 10px 0 0; padding-left: 18px; font-size: 11.5px; color: var(--warn); line-height: 1.7; }

/* ── 探针分组表 ──────────────────────────────────────────────────────────── */
.group-block { margin-bottom: 16px; animation: powerUp .5s var(--ease) both; }
.group-title {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 9px;
}
.group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.probe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--step);
  overflow: hidden;
}
.probe-table thead th {
  text-align: left;
  padding: 8px 11px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.probe-table tbody td {
  padding: 8px 11px;
  border-top: 1px solid rgba(29,39,49,.65);
  vertical-align: top;
}
.probe-table tbody tr { animation: rowIn .3s var(--ease) both; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.probe-table tbody tr:hover { background: rgba(var(--sig-rgb),.035); }

.st-cell { font-family: var(--font-mono); font-weight: 700; text-align: center; width: 42px; }
.st-pass { color: var(--pass); }
.st-warn { color: var(--warn); }
.st-fail { color: var(--fail); }
.st-skip { color: var(--ink-faint); }
.st-neutral { color: var(--ink-faint); }

.p-label { color: var(--ink); }
.p-id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
td.num, .num {
  font-family: var(--font-mono);
  text-align: right;
  color: var(--ink-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.reason { color: var(--ink-dim); font-size: 11.5px; word-break: break-word; max-width: 340px; }

.resp-det { margin-top: 5px; }
.resp-det summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--sig-dim);
  list-style: none;
  user-select: none;
}
.resp-det summary::-webkit-details-marker { display: none; }
.resp-det summary::before { content: "▸ "; }
.resp-det[open] summary::before { content: "▾ "; }
.resp-det summary:hover { color: var(--sig); }
.resp-pre {
  margin: 6px 0 0;
  padding: 9px 11px;
  background: var(--well-deep);
  border: 1px solid var(--line);
  border-radius: var(--step);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow: auto;
}

/* ── 快速体检判定 ────────────────────────────────────────────────────────── */
.canary-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--step);
  background: var(--well);
  padding: 16px 20px;
  margin-bottom: 14px;
  animation: powerUp .45s var(--ease) both;
}
.canary-verdict {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 10px 16px;
  border-radius: var(--step);
  border: 1px solid currentColor;
  text-align: center;
  flex: none;
}
.canary-verdict .v-raw {
  display: block;
  font-size: 8.5px;
  font-style: normal;
  letter-spacing: 0.16em;
  opacity: .7;
  font-weight: 500;
  margin-top: 2px;
}
.v-ok   { color: var(--pass); background: var(--pass-bg); box-shadow: 0 0 24px rgba(var(--pass-rgb),.14); }
.v-warn { color: var(--warn); background: var(--warn-bg); box-shadow: 0 0 24px rgba(var(--warn-rgb),.14); }
.v-bad  { color: var(--fail); background: var(--fail-bg); box-shadow: 0 0 24px rgba(var(--fail-rgb),.14); }
.canary-info h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.canary-sub {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-dim);
}

/* ── 统计读数卡 ──────────────────────────────────────────────────────────── */
.gauges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 900px) { .gauges { grid-template-columns: repeat(2, 1fr); } }
.gauge {
  border: 1px solid var(--line);
  border-radius: var(--step);
  background: var(--well);
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.gauge::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-3), transparent);
}
.gauge-val {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.gauge-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2px;
}
.dash-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  margin: 0 0 12px;
}

/* ── 排名 ────────────────────────────────────────────────────────────────── */
.rank-block {
  border: 1px solid var(--line);
  border-radius: var(--step);
  background: var(--well);
  margin-bottom: 14px;
  overflow: hidden;
}
.rank-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.rank-cap h4 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.rank-sub { font-size: 10.5px; color: var(--ink-faint); }

.rank-row {
  display: grid;
  grid-template-columns: 48px minmax(140px, 1.7fr) minmax(130px, 1.1fr) 54px 58px 84px;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 12px;
  animation: rowIn .32s var(--ease) both;
  border-top: 1px solid rgba(29,39,49,.6);
}
.rank-row:hover { background: rgba(var(--sig-rgb),.035); }
.rank-header {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-top: none;
  background: var(--surface-2);
  animation: none;
}
.rank-header:hover { background: var(--surface-2); }
/* 表头单元格沿用数据行的类名以便同步隐藏，这里让表头样式统一覆盖它们 */
.rank-header > * { color: inherit; font-size: inherit; font-family: inherit; text-align: inherit; }
.rank-header .rank-avg, .rank-header .rank-runs, .rank-header .rank-time { text-align: right; }
@media (max-width: 1025px) {
  /* 隐藏均分/次数/最近三列后只剩 3 个单元格，网格列数需同步为 3 */
  .rank-row { grid-template-columns: 44px 1fr 96px; }
  .rank-runs, .rank-time, .rank-avg { display: none; }
}

.rank-no {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 3px;
}
.medal { font-style: normal; font-size: 13px; }
/* 前三名：左侧一条主色标尺 */
.rank-top { background: rgba(var(--sig-rgb),.028); }
.rank-top .rank-no b { color: var(--sig); }
.rank-no b { font-weight: 700; }

.rank-target { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rank-model {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-host {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: var(--step);
  margin-top: 3px;
  border: 1px solid currentColor;
}
.tag-ok   { color: var(--pass); background: var(--pass-bg); }
.tag-bad  { color: var(--fail); background: var(--fail-bg); }
.tag-warn { color: var(--warn); background: var(--warn-bg); }

.rank-score { display: flex; flex-direction: column; gap: 4px; }
.rank-score-val { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.rank-score-val.s-good { color: var(--pass); }
.rank-score-val.s-mid  { color: var(--warn); }
.rank-score-val.s-bad  { color: var(--fail); }
.rank-bar-wrap { height: 3px; background: var(--surface-3); border-radius: 1px; overflow: hidden; }
.rank-bar { display: block; height: 100%; transform-origin: left; animation: growX .7s var(--ease) both; }
.rank-bar.s-good { background: var(--pass); }
.rank-bar.s-mid  { background: var(--warn); }
.rank-bar.s-bad  { background: var(--fail); }

.rank-avg, .rank-runs, .rank-time {
  font-family: var(--font-mono);
  color: var(--ink-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rank-time { font-size: 10.5px; color: var(--ink-faint); }

/* ── 图表 ────────────────────────────────────────────────────────────────── */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chart-wide { grid-column: 1 / -1; }
@media (max-width: 1025px) { .chart-grid { grid-template-columns: 1fr; } }

.chart-cell {
  border: 1px solid var(--line);
  border-radius: var(--step);
  background: var(--well);
  overflow: hidden;
}
.chart-cap {
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--surface-2);
}
.chart-body { height: 232px; width: 100%; }
.chart-body.tall { height: 288px; }
.chart-empty {
  padding: 30px 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
}

/* ── 历史记录 ────────────────────────────────────────────────────────────── */
.filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.filters select {
  width: auto;
  min-width: 130px;
  font-size: 11.5px;
  padding: 7px 10px;
}
.filters .spacer { flex: 1; }
.page-info {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  min-width: 66px;
  text-align: center;
}
.scroll-y { max-height: 560px; overflow: auto; }

.h-type {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: var(--step);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.h-type-probe  { color: var(--sig); background: var(--sig-bg); }
.h-type-canary { color: #8fb4ff; background: rgba(143,180,255,.1); }

.h-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.h-model { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); }
.h-sub { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); word-break: break-all; }
.h-score { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.h-status { font-family: var(--font-mono); font-size: 10.5px; }
.st-done { color: var(--pass); }
.st-error { color: var(--fail); }
.st-running { color: var(--warn); }
.st-queued { color: var(--ink-faint); }

.link-btn {
  appearance: none;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--step);
  color: var(--sig-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 8px;
  transition: color .14s, border-color .14s, background .14s;
}
.link-btn:hover { color: var(--sig); border-color: var(--line-2); background: var(--sig-bg); }

/* ── 弹窗 ────────────────────────────────────────────────────────────────── */
.modal {
  border: 1px solid var(--line-3);
  border-radius: var(--step-lg);
  background: var(--surface);
  color: var(--ink);
  padding: 0;
  width: min(560px, 73.6vw);  /* 92vw ÷ 1.25 */
  box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 var(--bevel);
}
.modal::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); }
.modal[open] { animation: powerUp .22s var(--ease) both; }
.modal-body { padding: 20px; }
.modal-body h3 {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.modal-body h4 {
  margin: 16px 0 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sig);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.modal-body p { margin: 6px 0; font-size: 12.5px; color: var(--ink-dim); line-height: 1.75; }
.modal-body p strong { color: var(--ink); }
.modal-foot {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.modal-foot .spacer { flex: 1; }
.modal-scroll { max-height: 65.6vh; overflow-y: auto; }  /* 82vh ÷ 1.25 */
.terms-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); margin: 0 0 10px; }
.terms-meta a { color: var(--sig-dim); }
.legal-list { margin: 6px 0 0; padding-left: 18px; }
.legal-list li { font-size: 12.5px; color: var(--ink-dim); line-height: 1.75; margin-bottom: 4px; }
.legal-list strong { color: var(--ink); }

/* ── 隐私横幅 ────────────────────────────────────────────────────────────── */
.banner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 14px auto 0;
  padding: 10px 14px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--pass);
  border-radius: var(--step);
  /* 底色用 --bg 垫底（不透明），再叠绿色调渐变：
     地球线框会从横幅下方经过，纯透明底会让线条穿过文字影响阅读。 */
  background:
    linear-gradient(90deg, var(--pass-bg), transparent 60%),
    var(--bg);
  animation: powerUp .5s var(--ease) both;
}
.banner p { margin: 0; font-size: 12px; color: var(--ink-dim); line-height: 1.65; }
.banner strong { color: var(--ink); }
.banner-icon { color: var(--pass); flex: none; font-family: var(--font-mono); font-size: 13px; }
.banner-x {
  appearance: none;
  background: none;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 14px;
  padding: 0 3px;
  flex: none;
  border-radius: var(--step);
}
.banner-x:hover { color: var(--ink); background: var(--bevel); }
@media (max-width: 1350px) { .banner { margin: 12px 16px 0; } }

/* ── 页脚 ────────────────────────────────────────────────────────────────── */
.colophon {
  position: relative;
  z-index: 1;
  /* 同横幅：垫不透明底色，保证文字不被地球线条干扰 */
  background: var(--bg);
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 22px 34px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.9;
}
.colophon p { margin: 2px 0; }
.colophon a { color: var(--sig-dim); text-decoration: none; }
.colophon a:hover { color: var(--sig); text-decoration: underline; }

/* ── 通用工具 ────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── 尊重系统"减少动态"偏好 ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================================
   日间主题（Daylight Instrument）
   ----------------------------------------------------------------------------
   不是把深色简单反相，而是重新设计同一台仪器在明亮环境下的形态：
   背景为冷调浅灰"仪器外壳"，面板为纯白"表盘"，凹陷区用极淡的蓝灰着色，
   阴影改为柔和的环境光投影而非黑洞。主色加深以保证白底可读性。
   ============================================================================ */
:root[data-theme="light"] {
  color-scheme: light;

  /* 表面：冷调浅灰外壳 + 纯白表盘 */
  --bg:          #e9eef1;
  --surface:     #ffffff;
  --surface-2:   #f3f7f9;
  --surface-3:   #e6ecf0;
  --line:        #dae3e9;
  --line-2:      #c2d0d9;
  --line-3:      #9dafbc;

  /* 墨色：深石板色，保持与深色主题同等的对比层次 */
  --ink:         #16232c;
  --ink-dim:     #4d6070;
  --ink-faint:   #7f939f;

  /* 主色加深：浅底上 #2ee6c5 对比不足，改用可读的深青 */
  --sig:         #0a8f78;
  --sig-dim:     #0b7563;
  --sig-glow:    rgba(10, 143, 120, 0.22);
  --sig-rgb:     10, 143, 120;

  /* 信号色：统一加深，保证在白底上的对比度 */
  --pass:        #12874f;
  --warn:        #a86c06;
  --fail:        #c93a30;
  --idle:        #7f939f;
  --pass-rgb:    18, 135, 79;
  --warn-rgb:    168, 108, 6;
  --fail-rgb:    201, 58, 48;
  --fail-ink:    #a52d24;
  --pass-ink:    #0f6b3f;

  --pass-bg:     rgba(18, 135, 79, 0.10);
  --warn-bg:     rgba(168, 108, 6, 0.10);
  --fail-bg:     rgba(201, 58, 48, 0.09);
  --sig-bg:      rgba(10, 143, 120, 0.09);

  /* 凹陷区：白底上以极淡蓝灰着色表现"凹槽" */
  --well:        #f6f9fb;
  --well-deep:   #eef3f6;
  --well-input:  #ffffff;
  --rack-a:      #ffffff;
  --rack-b:      #f2f6f9;
  --backdrop:    rgba(28, 42, 52, .40);

  /* 立体感：阴影改为柔和环境光；高光仍为白色以便形成机加工边缘 */
  --shadow-1:    rgba(30, 48, 62, .10);
  --shadow-2:    rgba(30, 48, 62, .17);
  --bevel:       rgba(255, 255, 255, .95);
  --bevel-strong: rgba(255, 255, 255, 1);

  /* 栅格线：浅色下需略深才可见 */
  --grid-1:      rgba(60, 100, 130, 0.055);
  --grid-2:      rgba(60, 100, 130, 0.095);

  --mark-a:      #ffffff;
  --mark-b:      #eef3f6;
  --on-sig:      #ffffff;
  --sig-btn-a:   #12a68b;
  --sig-btn-b:   #0a8f78;
  --sig-btn-a-h: #17b89a;
  --sig-btn-b-h: #0d9d84;
}

/* 浅色下压暗发光效果：辉光在白底上会糊成一团 */
:root[data-theme="light"] .readout-value.s-good,
:root[data-theme="light"] .readout-value.s-mid,
:root[data-theme="light"] .readout-value.s-bad {
  text-shadow: none;
}
:root[data-theme="light"] .tele-val.led-ok,
:root[data-theme="light"] .tele-val.led-err { text-shadow: none; }
:root[data-theme="light"] .led-pass,
:root[data-theme="light"] .led-warn,
:root[data-theme="light"] .led-fail { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
:root[data-theme="light"] .cand-bar,
:root[data-theme="light"] .rank-bar,
:root[data-theme="light"] .rig-seg.on,
:root[data-theme="light"] .mode.active::before { box-shadow: none; }

/* 浅色下扫描光带与呼吸辉光需减弱，否则显得脏 */
:root[data-theme="light"] .bg-sweep { opacity: .5; }
:root[data-theme="light"] .brand-mark::after { animation: none; opacity: .25; }

/* 模块投影改为柔和环境光 */
:root[data-theme="light"] .module {
  box-shadow: 0 1px 2px var(--shadow-1), 0 8px 24px var(--shadow-1);
}
:root[data-theme="light"] .rack {
  box-shadow: 0 1px 0 var(--bevel) inset, 0 4px 16px var(--shadow-1);
}
:root[data-theme="light"] .modal {
  box-shadow: 0 24px 60px var(--shadow-2);
}

/* 主题切换过程中的平滑过渡（仅颜色相关属性，避免影响布局） */
:root.theme-anim,
:root.theme-anim *,
:root.theme-anim *::before,
:root.theme-anim *::after {
  transition: background-color .28s ease, border-color .28s ease,
              color .28s ease, box-shadow .28s ease, fill .28s ease !important;
}

/* ============================================================================
   移动端适配
   ----------------------------------------------------------------------------
   设计基准是桌面宽屏 + 125% 缩放。手机上若继续套用缩放会把内容挤到无法使用，
   因此窄屏下改用 1:1 缩放，并针对触控与小屏重排：
     - 触控目标不小于 44px（Apple HIG / Material 的最小可点区域）
     - 输入框字号提到 16px，避免 iOS 聚焦时自动放大页面
     - 表格改为横向滚动而非压缩挤压
     - 顶栏遥测只保留链路状态，其余读数在窄屏无参考价值
   ============================================================================ */
@media (max-width: 900px) {
  /* 窄屏取消整体缩放，换取内容可用宽度 */
  :root { zoom: 1; }

  /* 页边距收紧 */
  .bench { padding: 14px 14px 28px; }
  .banner { margin: 12px 14px 0; }
  .colophon { padding: 14px 14px 26px; }

  /* 顶栏：缩小留白，遥测仅保留链路状态 */
  .rack-inner { padding: 0 14px; gap: 12px; height: 56px; }
  .tele-item { min-width: 0; padding: 4px 12px; }
  .tele-item:nth-child(n + 2) { display: none; }
  .brand-text h1 { font-size: 14px; }

  /* 触控目标放大到可舒适点击的尺寸 */
  .key { min-height: 44px; padding: 11px 16px; font-size: 13px; }
  .key-mini { min-height: 38px; padding: 8px 12px; }
  .banner-x { padding: 8px 10px; font-size: 16px; }

  /* 字号提到 16px：iOS 对小于 16px 的输入框会在聚焦时自动放大页面 */
  input[type="text"], input[type="url"], input[type="password"],
  input[type="number"], select, textarea { font-size: 16px; padding: 11px 12px; }

  /* 并排字段在窄屏改为纵向堆叠，避免输入框被压到无法使用 */
  .field-row { flex-direction: column; gap: 0; }
  .field-narrow { max-width: none; }

  /* 动作按钮纵向排列，点击区域更大 */
  .actions { flex-direction: column; }
  .actions .key { width: 100%; }

  /* 探针明细表列数多，改为横向滚动而非压扁 */
  .group-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .probe-table { min-width: 540px; }
  .reason { max-width: none; }

  /* 读数窗由左右布局改为上下 */
  .readout { flex-direction: column; }
  .readout-main {
    border-right: none;
    border-bottom: 1px solid var(--line);
    min-width: 0;
    padding: 14px 18px;
  }
  .readout-value { font-size: 42px; }
  .readout-side { padding: 12px 18px; }

  /* 统计读数卡由四列改为两列 */
  .gauges { grid-template-columns: repeat(2, 1fr); }

  /* 模式键在窄屏收紧内边距，保证三个键同屏可见 */
  .mode { padding: 10px 12px; font-size: 11px; }
  .modes { padding: 8px 10px 0; }

  /* 弹窗占用更多视口宽度，避免正文过窄 */
  .modal { width: 94vw; max-width: 94vw; }

  /* 地球降权：小屏上更应让位于内容，同时降低渲染开销 */
  .globe { opacity: .45; }
}

/* 超窄屏（多数竖屏手机）：进一步压缩 */
@media (max-width: 430px) {
  .bench { padding: 12px 10px 24px; }
  .banner { margin: 10px 10px 0; }
  .module-body { padding: 13px; }
  .pane { padding: 13px; }

  /* 品牌副标题在超窄屏隐藏，把宽度让给遥测与主题键 */
  .brand-text p { display: none; }

  .mode { padding: 9px 9px; font-size: 10.5px; gap: 5px; }
  .mode-count { padding: 0 4px; font-size: 9px; }

  .readout-value { font-size: 36px; }
  .tallies { gap: 12px; }
  .tally-n { font-size: 17px; }

  .rank-row { grid-template-columns: 34px 1fr 78px; gap: 8px; padding: 8px 10px; }
  .rank-avg, .rank-runs, .rank-time { display: none; }

  .filters select { min-width: 110px; }
  .page-info { min-width: 56px; font-size: 10px; }
}

/* ============================================================================
   滚动条与下拉框：替换系统原生外观
   ----------------------------------------------------------------------------
   系统默认滚动条（尤其 Windows Chrome）是带箭头的粗灰条，
   与自定义界面格格不入；原生 <select> 的箭头同样平台各异。
   统一改为细滑块 + 自绘箭头，两种主题各配一套色。

   注意：CSS 规范规定，元素一旦设置了标准属性 scrollbar-width / scrollbar-color，
   浏览器就会忽略 ::-webkit-scrollbar 伪元素（Chrome 121+ 已如此）。
   因此下面两条路径各管一批浏览器，并非冗余：
     · scrollbar-width / scrollbar-color → 现代 Chrome / Edge / Firefox / Safari
     · ::-webkit-scrollbar               → 旧版 Chrome / Safari
   两者观感已对齐为「细滑块 + 透明轨道」。
   ============================================================================ */
.scroll-y,
.resp-pre,
.modal-scroll {
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: var(--line-3) transparent;
}
.scroll-y::-webkit-scrollbar,
.resp-pre::-webkit-scrollbar,
.modal-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scroll-y::-webkit-scrollbar-track,
.resp-pre::-webkit-scrollbar-track,
.modal-scroll::-webkit-scrollbar-track { background: transparent; }
/* 用与面板同色的描边把滑块"收窄"，形成内缩的胶囊而非贴边粗条 */
.scroll-y::-webkit-scrollbar-thumb,
.resp-pre::-webkit-scrollbar-thumb,
.modal-scroll::-webkit-scrollbar-thumb {
  background: var(--line-3);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
.scroll-y::-webkit-scrollbar-thumb:hover,
.resp-pre::-webkit-scrollbar-thumb:hover,
.modal-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--sig-dim);
  background-clip: padding-box;
}
.scroll-y::-webkit-scrollbar-corner,
.resp-pre::-webkit-scrollbar-corner,
.modal-scroll::-webkit-scrollbar-corner { background: transparent; }

/* 下拉框：去掉原生箭头，改用自绘 chevron */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234e5d6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
}
:root[data-theme="light"] select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237f939f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select:hover { border-color: var(--line-3); }