/* =========================================================
 *  Probe Panel — PRTS 档案（PRTS · TERRARCHIVE）风格界面
 *  参考 B 站《PRTS · TERRARCHIVE》宣传片前 25 秒：罗德岛内部档案终端的身份验证与档案检索画面
 *  要点：
 *   · 单色 + 一点淡紫：近黑 #0f0e13 / 冷白 #eeeef0 与灰阶，唯一的颜色是淡紫 #9e8aec
 *     （ACCESS GRANTED 前的小方块、选中行左侧 3px 竖条、链接 / 激活态），图表与探针状态色保留功能彩色但降饱和
 *   · 细线框架：顶栏 / 页脚各一条通栏 1px 细线，两端是小号大写读数（PRTS / TERRARCHIVE、RHODES ISLAND :: INTERNAL ACCESS、
 *     AUTH.SEQUENCE / 0001、LOCAL TERMINAL → PRTS）；宽屏四角 L 形取景框
 *   · 「01 / LABEL」编号小字、Montserrat 大字（ID CONFIRMED. 粗体宽字距，站名像 B101 一样巨大中等字重 + 下方长细线）、巨型幽灵编号
 *   · 背景纯 CSS：「\」向 60° 斜向细线（间距 110px）+ 48px 方格网 + 中心暗角 + 右上斜切面；浅色是几块柔和的浅灰斜切多边形
 *   · 档案卡片：直角、顶边 3px 浅灰亮条、柔和投影，随鼠标轻微 3D 倾转（prts.js 写 --rx / --ry + .is-tilt）
 *   · 实色芯片块（WULING / REGIONAL ARCHIVE）、高亮行（浅灰底 + 左侧 3px 淡紫竖条）、深灰「QUERY」标题条
 *   · 开屏是源石协议启动序列（参考 dsh-theme-prts-originium，MIT）：示意线稿从中线展开、晶体落位 → PRTS 字标擦入 → 欢迎回来，博士。
 *   · 首页首屏是身份验证：ID CONFIRMED. → 巨大站名 + 细线 → ■ ACCESS GRANTED，右侧源石结构标本（线稿示意图 + WebGL 晶体）
 *  prts.js 产物：<html data-route>、.pr-bg > svg.pr-chip（等轴测芯片，--px / --py 视差）、.topbar[data-clock]、.footer[data-seq]、.pr-barcode 条码、
 *   首页 .pr-specimen 的按需加载与挂载 / 释放（originium.js 在宿主上写 data-state = pending | ready | fallback）；
 *  脚本没加载时背景、读数兜底文字、条码兜底条纹、标本的源石原图照样完整
 *  访问 /?ui=prts 启用，/?ui=default 恢复默认（终末地）界面；本主题默认深色，主题按钮切换浅色 html[data-theme="light"]
 * ========================================================= */
/* Montserrat（SIL OFL）：500–800 四个字重，英文大字 / 标签；中文走系统字体。JetBrains Mono 由 index.html 的 __mono 声明 */
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url(/fonts/montserrat-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url(/fonts/montserrat-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url(/fonts/montserrat-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Montserrat"; font-weight: 800; font-display: swap; src: url(/fonts/montserrat-800.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
/* Bender（明日方舟官网字体，来源与授权说明见 fonts/Bender-NOTICE.txt）：开屏字标 / 读数、源石标本的标注小字；只有拉丁字符，中文落到后面的系统字体 */
@font-face { font-family: "Bender"; font-weight: 400; font-display: swap; src: url(/fonts/bender-400.woff2) format("woff2"); }
@font-face { font-family: "Bender"; font-weight: 700; font-display: swap; src: url(/fonts/bender-700.woff2) format("woff2"); }

/* ---------- 色板（视频取样） ----------
 * --hl 淡紫：只用于小方块、3px 竖条、激活态和链接；--hl-block 是色块 / 竖条用的淡紫（浅色下比文字用的 --hl 浅一档）。
 * --ink / --on-ink 是主按钮「冷白块 + 近黑字」（浅色反过来）；--card-top 卡片顶边亮条；--row-hl 高亮行底色；--qbar 深灰 QUERY 标题条。
 * 图表直接读取 --accent / --blue / --violet / --warn（以及 --muted / --border / --card-solid），必须是 6 位十六进制。 */
:root {
  --hl: #9e8aec;
  --hl-2: #b3a3f2;
  --hl-dim: #8881cb;
  --hl-block: #9e8aec;
  --hl-ink: #b3a3f2;
  --on-hl: #0f0e13;
  --ink: #f2f1f4;
  --on-ink: #0f0e13;
  --rail: 0px;
  --strip: 24px;
  --top: 76px;
  --edge: max(28px, calc((100% - 1240px) / 2 + 28px));

  --bg: #0f0e13;
  --bg-2: #15141a;
  --vig: #0b0a0e;
  --bevel-1: #1a1721;
  --bevel-2: #211e28;
  --card: #232228;
  --card-solid: #252429;
  --card-2: #1c1b20;
  --card-top: #a9a7ae;
  --row-hl: #2d2b33;
  --qbar: #4a4950;
  --line: #2b2a2f;
  --line-2: #3a3940;
  --line-3: #57555e;
  --border: #2b2a2f;
  --border-strong: #3a3940;
  --border-accent: #8881cb;
  --text: #f2f1f4;
  --text-2: #b6b3b9;
  --muted: #9d9aa5;
  --label: #85828d;
  --mark: #9e8aec;
  --accent: #9e8aec;
  --accent-2: #b3a3f2;
  --accent-soft: rgba(158, 138, 236, .16);
  --accent-glow: rgba(158, 138, 236, .32);
  --sel-bg: #4a4950;
  --sel-fg: #f2f1f4;
  --chip-bg: #34333a;
  --chip-fg: #d9d7dd;
  --rail-bg: rgba(15, 14, 19, .84);
  --rail-fg: #f2f1f4;
  --rail-muted: #9d9aa5;
  --ok: #6fbf9a;
  --ok-soft: rgba(111, 191, 154, .13);
  --blue: #7fa6d6;
  --violet: #b3a3f2;
  --warn: #d6a75c;
  --danger: #e0707a;
  --bar-bg: #2b2a30;
  --bar-fill: #b6b3b9;
  --ghost: #1a1820;
  --diag: rgba(255, 255, 255, .045);
  --grid: rgba(255, 255, 255, .03);
  --hatch: repeating-linear-gradient(60deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 7px);
  /* 四角取景框：8 段 1px 细线（每个角一横一竖，22px 长） */
  --vf: var(--line-3);
  --corners:
    linear-gradient(var(--vf), var(--vf)) 0 0 / 22px 1px no-repeat, linear-gradient(var(--vf), var(--vf)) 0 0 / 1px 22px no-repeat,
    linear-gradient(var(--vf), var(--vf)) 100% 0 / 22px 1px no-repeat, linear-gradient(var(--vf), var(--vf)) 100% 0 / 1px 22px no-repeat,
    linear-gradient(var(--vf), var(--vf)) 0 100% / 22px 1px no-repeat, linear-gradient(var(--vf), var(--vf)) 0 100% / 1px 22px no-repeat,
    linear-gradient(var(--vf), var(--vf)) 100% 100% / 22px 1px no-repeat, linear-gradient(var(--vf), var(--vf)) 100% 100% / 1px 22px no-repeat;
  /* 空状态占位：对角交叉细线 */
  --xbox:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--line-2) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--line-2) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
  --shadow: 0 26px 48px -28px rgba(0, 0, 0, .85);
  --shadow-pop: 0 40px 90px -30px rgba(0, 0, 0, .9);
  /* 等轴测芯片（prts.js 的 svg.pr-chip 读取）：与视频深色场景一致 —— 冷白两层基板 + 深灰芯片，靠整体透明度压暗 */
  --chip-face: #e9e8ec;
  --chip-side: #a9a7ae;
  --chip-core: #2b2a30;
  --chip-line: #8a8792;
  --chip-shadow: rgba(0, 0, 0, .45);
  --radius: 0px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: "Montserrat", "HarmonyOS Sans SC", "PingFang SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", ui-monospace, "SF Mono", Menlo, Consolas, "HarmonyOS Sans SC", "PingFang SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", monospace;
  --disp: "Bender", "JetBrains Mono", ui-monospace, Consolas, "HarmonyOS Sans SC", "PingFang SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", monospace;
  color-scheme: dark;
}
/* 浅色：近白档案页，白卡 + 中灰顶条，淡紫文字加深一档保证对比（文字用 #6650c4 ≥ 4.5:1，色块 / 竖条仍用 #a18ad2） */
:root[data-theme="light"] {
  --hl: #6650c4;
  --hl-2: #8f7be0;
  --hl-dim: #a18ad2;
  --hl-block: #a18ad2;
  --hl-ink: #6650c4;
  --on-hl: #ffffff;
  --ink: #18171c;
  --on-ink: #ffffff;
  --bg: #eeeef0;
  --bg-2: #f7f6f8;
  --vig: rgba(205, 203, 211, .45);
  --bevel-1: #e1e0e3;
  --bevel-2: #e8e8e8;
  --card: #ffffff;
  --card-solid: #ffffff;
  --card-2: #f4f3f6;
  --card-top: #8f8d95;
  --row-hl: #e9e6ec;
  --qbar: #4a4950;
  --line: #d6d5da;
  --line-2: #c6c4cb;
  --line-3: #9a98a1;
  --border: #d6d5da;
  --border-strong: #c6c4cb;
  --border-accent: #a18ad2;
  --text: #18171c;
  --text-2: #4a4950;
  --muted: #66646e;
  --label: #6f6d77;
  --mark: #6650c4;
  --accent: #6650c4;
  --accent-2: #4a4950;
  --accent-soft: rgba(161, 138, 210, .22);
  --accent-glow: rgba(122, 100, 212, .25);
  --sel-bg: #4a4950;
  --sel-fg: #ffffff;
  --chip-bg: #e6e4ea;
  --chip-fg: #3a3940;
  --rail-bg: rgba(238, 238, 240, .86);
  --rail-fg: #18171c;
  --rail-muted: #66646e;
  --ok: #237553;
  --ok-soft: rgba(35, 117, 83, .12);
  --blue: #3f6ea6;
  --violet: #6a55c8;
  --warn: #9b5f12;
  --danger: #b8434e;
  --bar-bg: #e3e2e6;
  --bar-fill: #4a4950;
  --ghost: #e2e1e4;
  --diag: rgba(24, 23, 28, .045);
  --grid: rgba(24, 23, 28, .03);
  --hatch: repeating-linear-gradient(60deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 7px);
  --shadow: 0 22px 40px -26px rgba(40, 35, 60, .28);
  --shadow-pop: 0 36px 80px -30px rgba(40, 35, 60, .35);
  --chip-face: #fbfafc;
  --chip-side: #d6d4db;
  --chip-core: #3a3940;
  --chip-line: #8f8d95;
  --chip-shadow: rgba(40, 35, 60, .18);
  color-scheme: light;
}
/* ---------- 手机 QQ / QQ 浏览器（X5 内核）夜间模式 ----------
 * 该内核夜间模式会把深色文字提亮成灰色，「冷白块 + 近黑字」会变成白块灰字（原理见 arknights/style.css）。
 * 对策：这些元素在 html.x5 下改用反相色绘制，再整体 filter: invert(1) 翻回来，最终颜色与其他浏览器一致。
 * 新增「浅色块 + 深色字」的元素时，把选择器加进下面的列表。 */
html.x5:not([data-theme="light"]) :is(
  .btn.primary, .btn.outline:hover, .prose a:hover, .modal-close:hover, .gb-head:hover .gb-chev
) {
  --ink: #0d0e0b; --on-ink: #f0f1ec; --hl: #617513; --hl-block: #617513; --text-2: #494c46; --on-hl: #f0f1ec; --bg: #f0f1ec;
  border-color: transparent; filter: invert(1);
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 500 15px/1.65 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
/* 背景（不依赖 prts.js）：右侧陡斜切面（顶边约 58% 处斜向右下）+ 中心暗角 + 「\」向斜细线（60°，间距 110px） */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(64deg, transparent 0 66%, var(--bevel-1) calc(66% + 1px), var(--bevel-2)),
    radial-gradient(ellipse 80% 75% at 42% 48%, transparent 35%, var(--vig) 100%),
    repeating-linear-gradient(60deg, transparent 0 109px, var(--diag) 109px 110px);
}
/* 极淡的 48px 方格网，四周淡出 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 45% 45%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 65% at 45% 45%, #000 30%, transparent 85%);
}
/* 浅色：几块柔和的浅灰斜切多边形（纸片折面），交界处一道极淡的阴影线；斜向色标都留 1px 左右过渡，避免锯齿 */
:root[data-theme="light"] body::before {
  background:
    linear-gradient(to bottom left, var(--bevel-1) 0 26%, rgba(40, 35, 60, .06) calc(26% + .5px), transparent calc(26% + 2px)),
    linear-gradient(to top right, var(--bevel-2) 0 18%, rgba(40, 35, 60, .05) calc(18% + .5px), transparent calc(18% + 2px)),
    linear-gradient(118deg, transparent 0 56%, rgba(255, 255, 255, .6) calc(56% + 1px) 63%, rgba(40, 35, 60, .035) calc(63% + .5px), transparent calc(63% + 2px)),
    linear-gradient(-62deg, transparent 0 70%, rgba(225, 224, 228, .55) calc(70% + 1px) 78%, transparent calc(78% + 1px)),
    radial-gradient(ellipse 85% 80% at 45% 45%, transparent 45%, var(--vig) 100%),
    repeating-linear-gradient(60deg, transparent 0 109px, var(--diag) 109px 110px);
}
/* 宽屏：视口四角的 L 形取景框（压在正文下面；首页首屏自带 .pr-frame，不重复画） */
@media (min-width: 1180px) {
  html::after { content: ""; position: fixed; inset: calc(var(--top) + 14px) 14px 14px; z-index: -1; pointer-events: none; background: var(--corners); }
  html[data-route="home"]::after { display: none; }
}
/* 本主题不用 .hud 页码 */
.hud { display: none; }

/* ---------- 开屏动画：源石协议启动序列（index.html #splash 里的 .sp-po；每个会话一次，可点击/按键/滚轮跳过） ----------
   参考开源插件 dsh-theme-prts-originium（Nefelibater，MIT）的启动动画，按本主题色板重写，能量线用唯一的淡紫 --hl-block
   时间线：0–1.2s 示意场从中线向两侧展开 → .15–1.65s 构造线画出 → 0–1.6s 轨道转正 → .25–1.65s 晶体落位 → .5s 注记 / .8s 标签
   → .65s 身份块从左擦入 → .7s 晶体能量线 → 1.7s「欢迎回来，博士。」→ 0–2.8s 进度轨 → 2.9s 整层淡出（sp-out .6s），主页同步落位
   流畅：位移 / 缩放 / 透明度都放在独立的盒子或单独的 <svg> 上（合成器播放，主线程忙着跑 app.js、渲染首页也不掉帧）；
   示意场的展开用两块同色幕布平移、身份块的擦入用「外层平移 + 内层反向平移」代替 clip-path 动画；只有两处描线（stroke-dashoffset）需要重绘
   退场契约（index.html 的开屏脚本）：只认 #splash 自身名字以 sp-out 开头的动画，其他动画一律不要用这个前缀 */
.splash:not([hidden]) {
  position: fixed; inset: 0; z-index: 300; display: block; overflow: hidden;
  background: var(--bg); color: var(--text); cursor: pointer; user-select: none;
  animation: sp-out .6s 2.9s cubic-bezier(.4, 0, .2, 1) forwards;
  will-change: opacity, transform;
}
.splash.skip { animation: sp-out2 .45s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes sp-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes sp-out2 { to { opacity: 0; transform: translateY(-8px); } }
/* 六套主题共用的开屏结构本主题都不用，只显示 .sp-po */
.sp-scan, .sp-core, .sp-text, .sp-skip { display: none; }
.sp-po { display: block; position: absolute; inset: 0; --po-dim: var(--muted); }
/* 内框：1px 细框 + 竖向中线 + 左上 / 右下两个粗角标 */
.sp-po-frame {
  position: absolute; inset: clamp(18px, 4vw, 68px); border: 1px solid var(--line-2);
  background: linear-gradient(90deg, transparent calc(50% - .5px), var(--line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
}
.sp-po-frame::before, .sp-po-frame::after { content: ""; position: absolute; width: 26px; height: 26px; border: 2px solid var(--text); }
.sp-po-frame::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.sp-po-frame::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
/* 上下读数 */
.sp-po-top, .sp-po-bottom {
  position: absolute; z-index: 1; left: clamp(34px, 6vw, 100px); right: clamp(34px, 6vw, 100px); display: flex; justify-content: space-between; gap: 20px;
  font: 400 12px/1.5 var(--disp); letter-spacing: .18em; color: var(--label); white-space: nowrap;
}
.sp-po-top { top: clamp(36px, 6vw, 95px); }
.sp-po-bottom { bottom: clamp(36px, 6vw, 95px); }
.sp-po-bottom strong { color: var(--text); font-weight: 500; }
/* 示意场：五层 <svg> 共用 viewBox 叠放；晶体中心在 (584, 270)，即宽 58.4%、高 50% */
.sp-po-field {
  position: absolute; left: 50%; top: 50%; width: min(1400px, 86vw, 165vh); aspect-ratio: 1000 / 540;
  transform: translate(-50%, -50%); color: var(--po-dim); opacity: .8; overflow: hidden;
  animation: sp-po-fade 1.2s cubic-bezier(.2, .7, .1, 1) backwards;
}
.sp-po-field svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* 展开：左右两块与底色相同的幕布从中线向两侧移走（等同 clip-path: inset(0 50%) → inset(0)） */
.sp-po-field::before, .sp-po-field::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 50.5%; background: var(--bg); }
.sp-po-field::before { left: 0; animation: sp-po-cur-l 1.2s cubic-bezier(.2, .7, .1, 1) forwards; }
.sp-po-field::after { right: 0; animation: sp-po-cur-r 1.2s cubic-bezier(.2, .7, .1, 1) forwards; }
.sp-po-cons { stroke-dasharray: 1700; stroke-dashoffset: 1700; animation: sp-po-draw 1.5s ease-out .15s forwards; }
.sp-po-orb { transform-origin: 58.4% 50%; animation: sp-po-orbit 1.6s cubic-bezier(.2, .8, .2, 1) backwards; }
.sp-po-crys { transform-origin: 58.4% 50%; animation: sp-po-crystal 1.4s cubic-bezier(.2, .8, .2, 1) .25s backwards; }
.sp-po-face { fill: var(--bg); }
.sp-po-face2 { fill: var(--bevel-2); fill: color-mix(in srgb, var(--po-dim) 18%, var(--bg)); }
.sp-po-energy { stroke: var(--hl-block); stroke-dasharray: 180; animation: sp-po-core .6s ease .7s both; }
.sp-po-notes { animation: sp-po-fade .6s ease .5s backwards; }
.sp-po-labels { font-family: var(--disp); font-size: 11px; letter-spacing: 2px; animation: sp-po-fade .4s ease .8s backwards; }
/* 身份块：外层带着裁切窗口从左滑入、内层反向等量平移抵消，内容不动而可见范围从左向右展开（等同 clip-path 擦入，但全在合成器上） */
.sp-po-id { position: absolute; left: calc(18% - 10px); top: 50%; overflow: hidden; transform: translateY(-50%); animation: sp-po-id .9s cubic-bezier(.16, 1, .3, 1) .65s backwards; }
.sp-po-id-in { padding: 34px 36px 30px 10px; background: linear-gradient(90deg, var(--bg) 70%, transparent); animation: sp-po-id-in .9s cubic-bezier(.16, 1, .3, 1) .65s backwards; }
.sp-po-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; font: 700 12px/1.4 var(--disp); letter-spacing: .22em; color: var(--text); white-space: nowrap; }
.sp-po-kicker::before { content: ""; width: 8px; height: 8px; flex: none; transform: rotate(45deg); background: var(--hl-block); }
.sp-po-word { font: 700 clamp(76px, 11vw, 172px)/.9 var(--disp); letter-spacing: -.055em; color: var(--text); white-space: nowrap; }
.sp-po-word span { color: var(--muted); }
.sp-po-sub { margin-top: 24px; font: 400 12px/1.8 var(--disp); letter-spacing: .23em; color: var(--label); white-space: nowrap; }
.sp-po-ready { display: flex; align-items: center; gap: 12px; margin-top: 25px; font: 500 13px/1.5 var(--font); letter-spacing: .25em; color: var(--text); animation: sp-po-fade .4s ease 1.7s backwards; }
.sp-po-ready::before { content: ""; width: 42px; height: 1px; flex: none; background: currentColor; }
/* 进度轨：2.8s 走满（scaleX） */
.sp-po-track { position: absolute; left: 6%; right: 6%; bottom: clamp(70px, 10vw, 140px); height: 2px; background: var(--line); }
.sp-po-track::after { content: ""; display: block; height: 100%; background: var(--text-2); transform-origin: left; animation: sp-po-track 2.8s cubic-bezier(.2, .6, .4, 1) backwards; }
/* 右上「跳过」框（整层都可点击 / 按键 / 滚轮跳过，见 index.html 的开屏脚本） */
.sp-po-skip {
  position: absolute; right: clamp(32px, 6vw, 100px); top: clamp(65px, 8vw, 122px); padding: 9px 13px; border: 1px solid var(--line-3);
  background: var(--bg); color: var(--text); font: 400 12px/1.3 var(--disp); letter-spacing: .08em; white-space: nowrap;
  transition: background-color .2s, color .2s; animation: sp-po-fade .5s .3s backwards;
}
.sp-po-skip:hover { background: var(--text); color: var(--bg); }
@keyframes sp-po-fade { from { opacity: 0; } }
@keyframes sp-po-cur-l { to { transform: translateX(-100%); } }
@keyframes sp-po-cur-r { to { transform: translateX(100%); } }
@keyframes sp-po-draw { to { stroke-dashoffset: 0; } }
@keyframes sp-po-orbit { from { opacity: 0; transform: rotate(-12deg) scale(.92); } }
@keyframes sp-po-crystal { from { opacity: 0; transform: translateY(24px) scale(.86); } }
@keyframes sp-po-core { from { opacity: 0; stroke-dashoffset: 180; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes sp-po-id { from { opacity: 0; transform: translate(calc(-100% - 16px), -50%); } }
@keyframes sp-po-id-in { from { transform: translateX(100%); } }
@keyframes sp-po-track { from { transform: scaleX(0); } }
/* 手机：身份块左移、字标缩小，示意场放大偏右并压淡（整层 overflow: hidden，不会出现横向滚动）；读数只留左半 */
@media (max-width: 650px) {
  .sp-po-id { left: calc(12% - 10px); top: 48%; }
  .sp-po-id-in { padding-right: 16px; }
  .sp-po-word { font-size: clamp(60px, 22vw, 96px); }
  .sp-po-field { width: 900px; left: 60%; opacity: .45; }
  .sp-po-top span:last-child, .sp-po-bottom span:last-child { display: none; }
  .sp-po-skip { top: 72px; }
}
/* 矮屏（横屏手机等）：内框上下收窄、读数贴边，身份块压扁、字标按高度缩，进度轨落在身份块与底部读数之间，三者不再互相压住 */
@media (max-height: 500px) {
  .sp-po-frame { inset: 14px clamp(18px, 4vw, 68px); }
  .sp-po-top { top: 26px; }
  .sp-po-bottom { bottom: 26px; }
  .sp-po-skip { top: 52px; }
  .sp-po-id-in { padding-top: 12px; padding-bottom: 10px; }
  .sp-po-kicker { margin-bottom: 8px; }
  .sp-po-word { font-size: clamp(48px, 15vh, 96px); }
  .sp-po-sub, .sp-po-ready { margin-top: 10px; }
  .sp-po-track { bottom: 54px; }
}
/* 开屏淡出时主页落位：透明度只由开屏层负责，顶栏从上方落下、正文轻微上浮（背景层都固定在 body 伪元素上，不随正文位移）；延迟 = 退场开始 2.9s */
html.intro .topbar { animation: sp-rail-top 1s 2.9s cubic-bezier(.22, 1, .36, 1) backwards; will-change: transform; }
html.intro main#app { animation: sp-app 1s 2.9s cubic-bezier(.22, 1, .36, 1) backwards; will-change: transform; }
@keyframes sp-rail-top { from { transform: translateY(-12px); } }
@keyframes sp-app { from { transform: translateY(18px); } }

/* ---------- prts.js 背景层：等轴测芯片 + 幽灵大字，随指针轻微视差；位置按 html[data-route] ---------- */
/* color 只给芯片小字（prts.js 的 .pr-chip-t 内联 fill:currentColor）；轮廓线走 SVG 里显式的 var(--chip-line) */
.pr-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; color: var(--label); --px: 0; --py: 0; }
.pr-bg::before {
  content: "TERRA TALOS-II"; position: absolute; left: -1vw; bottom: 3vh; white-space: nowrap;
  font: 800 clamp(90px, 15vw, 240px)/.9 var(--font); letter-spacing: -.02em; color: var(--ghost);
  transform: translate3d(calc(var(--px) * -18px), calc(var(--py) * -10px), 0);
}
.pr-chip {
  position: absolute; right: -60px; bottom: -40px; width: min(520px, 44vw); height: auto; opacity: .32;
  transform: translate3d(calc(var(--px) * -16px), calc(var(--py) * -12px), 0);
  transition: opacity .6s var(--ease), visibility .6s, right .6s var(--ease), top .6s var(--ease), bottom .6s var(--ease), width .6s var(--ease);
}
.pr-chip .pr-chip-up { animation: pr-float 6s ease-in-out infinite alternate; }
@keyframes pr-float { to { transform: translateY(-7px); } }
html[data-route="home"] .pr-chip { right: -70px; bottom: -70px; opacity: .28; }
/* 文章 / 后台不显示芯片：淡出后 visibility 隐藏并暂停浮动，免得看不见的 SVG（含模糊滤镜）每帧重绘 */
html[data-route="post"] .pr-chip, html[data-route="console"] .pr-chip { opacity: 0; visibility: hidden; }
html[data-route="post"] .pr-chip .pr-chip-up, html[data-route="console"] .pr-chip .pr-chip-up { animation-play-state: paused; }
html[data-route="post"] .pr-bg::before, html[data-route="console"] .pr-bg::before { opacity: .5; }
html[data-route="probe"] .pr-chip { right: -110px; bottom: auto; top: 34vh; width: min(460px, 38vw); opacity: .14; }
html[data-route="login"] .pr-chip { right: max(-40px, calc(50% - 720px)); bottom: auto; top: calc(50% - 200px); width: min(500px, 40vw); opacity: .6; }
:root[data-theme="light"] .pr-chip { opacity: .7; }
:root[data-theme="light"][data-route="probe"] .pr-chip { opacity: .3; }
:root[data-theme="light"][data-route="login"] .pr-chip { opacity: 1; }
:root[data-theme="light"][data-route="post"] .pr-chip, :root[data-theme="light"][data-route="console"] .pr-chip { opacity: 0; }

::selection { background: var(--hl-block); color: var(--on-hl); }
a { color: var(--text); text-decoration: none; transition: color .2s, background-color .2s; }
a:hover { color: var(--hl-ink); }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
main.wrap { flex: 1; padding-top: 44px; padding-bottom: 80px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.hidden { display: none !important; }
.hl { color: var(--text); }
svg.i { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; vertical-align: -.125em; }
:focus-visible { outline: 1px solid var(--hl); outline-offset: 3px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-2); }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 顶部进度条：灰线推进，前端一截淡紫 ---------- */
#progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 100; opacity: 0; background: linear-gradient(90deg, transparent, var(--text-2) 40%, var(--text-2) calc(100% - 28px), var(--hl) calc(100% - 28px)); transition: width .4s var(--ease), opacity .3s; }
#progress.run { opacity: 1; width: 70%; transition: width 2.5s cubic-bezier(.1, .7, .2, 1), opacity .1s; }
#progress.done { opacity: 0; width: 100%; transition: width .2s, opacity .4s .15s; }

/* ---------- 顶栏：上方一条读数带（左 PRTS / TERRARCHIVE，右 RHODES ISLAND :: INTERNAL ACCESS + prts.js 时钟），通栏细线，下面是导航 ---------- */
.topbar {
  position: sticky; z-index: 30; top: 0; height: var(--top); padding-top: var(--strip);
  background: linear-gradient(var(--line), var(--line)) 0 calc(var(--strip) - 1px) / 100% 1px no-repeat, var(--rail-bg);
  color: var(--rail-fg); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background-color .4s var(--ease);
}
/* 首页：页面一滚动，WebGL 源石标本就会从顶栏下面经过，背景模糊得跟着画布每帧重算 → 首页去掉模糊，底色补到近乎不透明，观感不变 */
html[data-route="home"] .topbar { --rail-bg: rgba(15, 14, 19, .96); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-theme="light"][data-route="home"] .topbar { --rail-bg: rgba(238, 238, 240, .96); }
.topbar::before, .topbar::after {
  position: absolute; top: 0; height: var(--strip); font: 500 9.5px/var(--strip) var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--label); white-space: nowrap; pointer-events: none;
}
.topbar::before { content: "PRTS / TERRARCHIVE"; left: var(--edge); }
.topbar::after { content: "RHODES ISLAND :: INTERNAL ACCESS"; right: var(--edge); }
.topbar[data-clock]::after { content: "RHODES ISLAND :: INTERNAL ACCESS\00a0\00a0/\00a0\00a0" attr(data-clock); }
.topbar-wrap { max-width: 1240px; height: 100%; margin: 0 auto; padding: 0 28px; }
.topbar-in { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 13px; color: var(--rail-fg); min-width: 0; }
.brand:hover { color: var(--rail-fg); }
/* 站点标志：纯 CSS —— 细线方框 + 中心实心方块 + 右上一粒淡紫 */
.logo {
  width: 30px; height: 30px; flex: none; position: relative; display: block;
  background: linear-gradient(var(--text), var(--text)) center / 10px 10px no-repeat;
  box-shadow: inset 0 0 0 1px var(--line-3);
}
.logo::after { content: ""; position: absolute; right: -3px; top: -3px; width: 5px; height: 5px; background: var(--hl-block); }
#site-title { font: 700 13px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rail-fg); }
.nav-right { margin-left: auto; display: flex; align-items: center; height: 100%; }
/* 导航：编号 + 英文大写（中文原文字号置 0，读屏仍可读到） */
nav#nav { display: flex; align-items: stretch; gap: 2px; height: 100%; position: relative; counter-reset: nav; }
nav#nav a {
  position: relative; display: flex; align-items: center; gap: 0; padding: 0 16px;
  font-size: 0; color: var(--rail-muted); white-space: nowrap; counter-increment: nav;
  background: linear-gradient(var(--hl), var(--hl)) 16px 100% / 0 2px no-repeat;
  transition: color .2s, background-size .35s var(--ease);
}
nav#nav a svg { display: none; }
/* 间距写在编号上而不是 gap：字号为 0 的中文文本仍是一个匿名弹性项，用 gap 会两边各吃一份 */
nav#nav a::before { content: "0" counter(nav); margin-right: 8px; font: 500 9.5px/1 var(--mono); letter-spacing: .1em; color: var(--label); }
nav#nav a::after { font: 700 11.5px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; }
nav#nav a[data-nav="blog"]::after { content: "INDEX"; }
nav#nav a[data-nav="probe"]::after { content: "MONITOR"; }
nav#nav a[href="/admin"]::after { content: "CONSOLE"; }
nav#nav a[href="/login"]::after { content: "ACCESS"; }
nav#nav a[href="/me"]::after { content: "ACCOUNT"; }
nav#nav a:hover { color: var(--rail-fg); }
nav#nav a.active { color: var(--rail-fg); background-size: 22px 2px; }
nav#nav a.active::before { color: var(--hl); }
.nav-ind { display: none; }
.nav-sep { width: 1px; height: 18px; margin: 0 10px 0 12px; background: var(--line-2); }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; background: none; color: var(--muted);
  font-size: 17px; cursor: pointer; border-radius: 0; transition: color .2s, background .2s, transform .2s var(--ease);
}
.icon-btn:hover { color: var(--text); background: var(--card-2); }
.icon-btn:active { transform: scale(.92); }
.topbar .icon-btn { color: var(--rail-fg); box-shadow: inset 0 0 0 1px var(--line); }
.topbar .icon-btn:hover { background: none; color: var(--hl-ink); box-shadow: inset 0 0 0 1px var(--line-3); }
#theme-btn svg { transition: transform .6s var(--ease); }
#theme-btn:hover svg { transform: rotate(90deg); }

/* ---------- 页脚：通栏细线，下方左 AUTH.SEQUENCE（prts.js 每次换页 +1），右 LOCAL TERMINAL → PRTS ---------- */
.footer { position: relative; margin-top: 30px; border-top: 1px solid var(--line-2); color: var(--muted); background: linear-gradient(transparent, color-mix(in srgb, var(--bg-2) 70%, transparent)); }
.footer::before, .footer::after {
  position: absolute; top: 0; height: 28px; font: 500 9.5px/28px var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--label); white-space: nowrap; pointer-events: none;
}
.footer::before { content: "AUTH.SEQUENCE / 0001"; left: var(--edge); }
.footer[data-seq]::before { content: attr(data-seq); }
.footer::after { content: "LOCAL TERMINAL → PRTS"; right: var(--edge); }
.footer-in { display: flex; align-items: baseline; gap: 10px 20px; flex-wrap: wrap; padding: 50px 28px 36px; font: 500 12px/1.6 var(--mono); letter-spacing: .04em; }
.footer-brand { margin-right: auto; font: 800 14px/1 var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--text); }
.footer-brand::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 12px; vertical-align: .08em; background: var(--hl-block); }

/* ---------- 页面切换 ---------- */
.page { animation: page-in .5s var(--ease) backwards; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
.stagger > * { animation: rise .55s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* ---------- 卡片：档案卡 —— 直角、顶边 3px 浅灰亮条、柔和投影 ---------- */
.card { position: relative; border: 1px solid var(--line); border-top: 3px solid var(--card-top); border-radius: 0; background: var(--card); box-shadow: var(--shadow); }
.card.warm { border-top-color: var(--hl-block); }
.card.lift { transition: border-color .25s, box-shadow .3s var(--ease), transform .4s var(--ease); }
/* 悬停 = 选中：顶条保持灰，左侧 3px 淡紫竖条（视频里选中卡片的样子） */
.card.lift:hover { box-shadow: inset 3px 0 0 var(--hl-block), var(--shadow); }
.pad { padding: 24px; }

/* ---------- 按钮：直角；主按钮为冷白块 + 近黑字（浅色反相），悬停换灰一档 + 左侧淡紫竖条 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line-2); background: var(--card-2); color: var(--text);
  padding: 8px 18px; border-radius: 0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  letter-spacing: .08em;
  transition: transform .15s var(--ease), background .2s, border-color .2s, box-shadow .2s, color .2s;
}
.btn:hover { border-color: var(--line-3); color: var(--text); box-shadow: inset 3px 0 0 var(--hl-block); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn.primary:hover { background: var(--text-2); border-color: var(--text-2); color: var(--on-ink); box-shadow: inset 3px 0 0 var(--hl-block); }
.btn.outline { background: transparent; border-color: var(--line-3); color: var(--text); }
.btn.outline:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); box-shadow: none; }
.btn.lg { padding: 13px 22px 13px 24px; font-size: 13.5px; min-width: 176px; justify-content: flex-start; text-transform: uppercase; letter-spacing: .14em; }
.btn.lg::after { content: "→"; margin-left: auto; padding-left: 20px; font-weight: 500; transition: transform .3s var(--ease); }
.btn.lg:hover::after { transform: translateX(3px); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); box-shadow: inset 3px 0 0 var(--danger); }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--card-2); color: var(--text); box-shadow: none; }
.btn.sm { padding: 5px 12px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; background-image: var(--hatch); }

/* ---------- 表单：内凹深灰输入框，聚焦时底边一道淡紫 ---------- */
input[type=text], input[type=password], input[type=number], input[type=search], textarea, select {
  width: 100%; background: var(--card-2); color: var(--text); border: 1px solid var(--line-2);
  border-radius: 0; padding: 10px 13px; font: inherit; font-size: 14px; outline: none;
  transition: border-color .2s, box-shadow .2s var(--ease), background .2s;
}
input::placeholder, textarea::placeholder { color: var(--label); }
select option { background: var(--card-solid); color: var(--text); }
input:focus, textarea:focus, select:focus { border-color: var(--line-3); box-shadow: inset 0 -2px 0 var(--hl); }
input:disabled { opacity: .5; }
textarea { font-family: var(--mono); font-size: 13px; resize: vertical; line-height: 1.6; }
label.field { display: block; margin-bottom: 16px; }
.port-cell { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.port-cell .port-in { width: 92px; padding: 6px 9px; font-size: 13px; }
.port-cell .btn.sm { padding: 3px 8px; }
/* 字段标签：「01 / LABEL」式小号大写灰字 */
label.field > span, .field-label {
  display: block; margin-bottom: 7px; font: 600 11px/1.4 var(--font); color: var(--muted);
  text-transform: uppercase; letter-spacing: .14em;
}

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 14px; margin-right: 20px; }
.switch input { appearance: none; -webkit-appearance: none; margin: 0; width: 38px; height: 18px; border-radius: 0; background: var(--card-2); border: 1px solid var(--line-3); position: relative; cursor: pointer; transition: background .25s var(--ease), border-color .25s; flex: none; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; background: var(--muted); transition: transform .3s var(--ease), background .25s; }
.switch input:checked { border-color: var(--hl); background: var(--accent-soft); }
.switch input:checked::after { transform: translateX(20px); background: var(--hl); }
.switch input:disabled { opacity: .45; cursor: not-allowed; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt { position: relative; }
.chip-opt input { position: absolute; opacity: 0; pointer-events: none; }
/* 可选芯片：实色块；选中 = 高亮行（浅一档底 + 左侧 3px 淡紫竖条） */
.chip-opt span {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 0; font-size: 12px; font-weight: 700; cursor: pointer;
  text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid transparent; color: var(--muted); background: var(--chip-bg); transition: all .2s var(--ease);
}
.chip-opt span::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--line-3); transition: background .2s, border-color .2s; }
.chip-opt span:hover { color: var(--text); }
.chip-opt input:checked + span { color: var(--text); background: var(--row-hl); border-color: var(--line-2); box-shadow: inset 3px 0 0 var(--hl-block); }
.chip-opt input:checked + span::before { background: var(--hl-block); border-color: var(--hl-block); }
.chip-opt input:focus-visible + span { outline: 1px solid var(--hl); outline-offset: 2px; }
.chip-opt input:disabled + span { opacity: .45; cursor: not-allowed; background-image: var(--hatch); }
/* 节点选择器 */
.node-pick { max-height: 300px; overflow-y: auto; padding: 4px 14px 10px; border: 1px solid var(--line); background: var(--card-2); }
.np-group { padding: 10px 0; border-bottom: 1px dashed var(--line-2); }
.np-group:last-child { border-bottom: 0; }
.np-title { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.np-group .chip-opt span { font-size: 12px; padding: 5px 12px; text-transform: none; }

/* 后台「界面主题」选择卡片（色块示意 + 名称 + 说明 + 预览链接） */
.theme-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.theme-opt { display: block; }
.theme-opt span { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 10px; height: 100%; padding: 14px 14px 12px; text-transform: none; letter-spacing: 0; font-weight: 500; white-space: normal; background: var(--card-2); border-color: var(--line); }
.theme-opt span::before { display: none; }
.theme-opt input:checked + span { background: var(--row-hl); border-color: var(--line-3); }
.theme-sw { grid-column: 1 / -1; display: flex; height: 36px; border: 1px solid var(--line-2); overflow: hidden; font-style: normal; }
.theme-sw b { flex: 1; }
.theme-sw b:first-child { flex: 3; }
.theme-opt strong { grid-row: 2; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.theme-opt strong .tag { font-style: normal; }
.theme-opt small { grid-column: 1 / -1; font-size: 12px; line-height: 1.55; color: var(--muted); }
.theme-prev { grid-row: 2; grid-column: 2; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.theme-prev:hover { color: var(--hl-ink); }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

/* ---------- 标签：实色芯片块（WULING / REGIONAL ARCHIVE），彩色变体为左侧 3px 竖条 ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; padding: 0 8px; border-radius: 0;
  background: var(--chip-bg); color: var(--chip-fg); font-weight: 700; line-height: 20px; text-transform: uppercase; letter-spacing: .1em;
}
.tag.gray, .tag.red, .tag.blue, .tag.violet, .tag.warn, .tag.ok { --tc: var(--muted); background: color-mix(in srgb, var(--tc) 10%, transparent); color: var(--tc); box-shadow: inset 3px 0 0 var(--tc); padding-left: 10px; }
.tag.red { --tc: var(--danger); }
.tag.blue { --tc: var(--blue); }
.tag.violet { --tc: var(--violet); }
.tag.warn { --tc: var(--warn); }
.tag.ok { --tc: var(--ok); }

/* ---------- 标题 ---------- */
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.section-title h2 { margin: 0; font-size: 20px; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 12px; }
.section-title h2 svg { color: var(--text); background: var(--chip-bg); padding: 6px; width: 30px; height: 30px; }
/* 空状态：细线方框 + 对角交叉细线，中心垫一块底色椭圆 */
.empty { --xb: var(--bg); text-align: center; color: var(--muted); padding: 52px 16px; background: radial-gradient(closest-side, var(--xb) 55%, transparent) center / 300px 120px no-repeat, var(--xbox); }
.card .empty, .card.empty { --xb: var(--card); }
.card.empty { background: radial-gradient(closest-side, var(--xb) 55%, transparent) center / 300px 120px no-repeat, var(--xbox), var(--card); }
.empty .i { font-size: 30px; opacity: .6; display: block; margin: 0 auto 12px; }
.code {
  position: relative; font-family: var(--mono); font-size: 13px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 0; padding: 13px 15px; word-break: break-all; white-space: pre-wrap; user-select: all; color: var(--text-2);
}
.code.term { box-shadow: inset 3px 0 0 var(--hl-block); }
.code.term::before { content: "$ "; color: var(--hl); user-select: none; font-weight: 700; }
.code.flash { animation: flash .6s var(--ease); }
@keyframes flash { 30% { border-color: var(--hl); box-shadow: 0 0 0 3px var(--accent-soft); } }
kbd { font-family: var(--mono); font-size: 12px; padding: 1px 6px; border: 1px solid var(--line-2); background: var(--card-2); }

.sk { position: relative; overflow: hidden; background: var(--bar-bg); border-radius: 0 !important; color: transparent !important; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 7%, transparent), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* 国家徽章 */
.cc { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 0; font-size: 20px; line-height: 1; background: var(--card-2); border: 1px solid var(--line); }
.cc.txt { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--text); border: 0; background: var(--chip-bg); }
.cc.sm { width: 28px; height: 28px; font-size: 15px; }
.cc.flag { width: 40px; height: 30px; overflow: hidden; padding: 0; background: var(--card-2); border: 1px solid var(--line-2); }
.cc.flag img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.75); }
.cc.sm.flag { width: 28px; height: 21px; }
.cc.sm.txt { font-size: 10px; }

/* 状态：方形小点 */
.dot { width: 7px; height: 7px; background: var(--muted); flex: none; position: relative; display: inline-block; }
.dot.on { background: var(--ok); }
.dot.on::after { content: ""; position: absolute; inset: -4px; border: 1px solid var(--ok); opacity: 0; animation: ping 2.2s var(--ease) infinite; }
.dot.off { background: var(--danger); }
@keyframes ping { 0% { transform: scale(.4); opacity: .8; } 80%, 100% { transform: scale(1.3); opacity: 0; } }
.status { display: inline-flex; align-items: center; gap: 7px; font: 600 10px/1 var(--mono); padding: 5px 9px; background: var(--ok-soft); color: var(--ok); white-space: nowrap; text-transform: uppercase; letter-spacing: .14em; }
.status.off { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

/* 小标签：灰色短竖条 + 小号大写字（悬停所在卡片时竖条变淡紫） */
.pill-label {
  display: inline-flex; align-items: center; gap: 9px; background: none; color: var(--text-2); font-weight: 700; font-size: 11.5px; line-height: 1;
  padding: 2px 0; text-transform: uppercase; letter-spacing: .16em; white-space: nowrap;
}
.pill-label::before { content: ""; width: 3px; height: 12px; background: var(--line-3); flex: none; transition: background .25s; }

/* ---------- 首页：身份验证首屏 + 档案卡 + 编号分章（结构见 app.js 的 HOME.prts） ---------- */
/* 「01 / LABEL」编号小字（首屏与各章共用） */
.home-prts .pr-idx { display: inline-flex; align-items: baseline; font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--label); }
.home-prts .pr-idx b { font-weight: 700; color: var(--text); }
.home-prts .pr-idx i { font-style: normal; margin: 0 .7em; color: var(--line-3); }
/* 首屏：左边身份验证文字，右边源石标本 + 人员凭证；四角取景框 */
.home-prts .pr-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: center;
  min-height: min(620px, calc(100vh - var(--top) - 120px)); padding: 60px 56px 64px;
}
.home-prts .pr-frame { position: absolute; inset: 0; pointer-events: none; background: var(--corners); }
.home-prts .pr-id { min-width: 0; container-type: inline-size; }
.home-prts .pr-kicker { margin: 34px 0 0; font: 800 clamp(20px, 2.4vw, 30px)/1.1 var(--font); letter-spacing: .16em; text-transform: uppercase; }
/* 站名：巨大的中等字重（B101），强调段冷白、其余段灰；下方一条长细线。字号按文字栏宽（cqi）缩放，长英文单词不至于被拆字母；vw 一行给不支持容器查询的浏览器兜底 */
.home-prts .pr-hero h1 { margin: 14px 0 0; font-size: clamp(54px, 9.6vw, 148px); font-size: clamp(44px, 15cqi, 148px); font-weight: 500; line-height: .98; letter-spacing: -.015em; text-transform: uppercase; }
.home-prts .pr-hero h1 span { display: block; width: max-content; max-width: 100%; overflow-wrap: break-word; }
.home-prts .pr-hero h1 span:not(.hl) { color: var(--muted); }
.home-prts .pr-hero h1::after { content: ""; display: block; width: min(100%, 640px); height: 1px; margin-top: 26px; background: linear-gradient(90deg, var(--text-2), var(--line-2) 70%, transparent); }
.home-prts .pr-grant { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; font: 500 13px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.home-prts .pr-grant::before { content: ""; width: 6px; height: 6px; background: var(--hl-block); }
.home-prts .pr-hero .lead { margin: 22px 0 0; max-width: 540px; color: var(--text-2); font-size: 15px; }
.home-prts .pr-hero .row { gap: 12px; margin-top: 34px; }
/* 右栏：源石结构标本 → PERSONNEL CREDENTIAL → 条码 → EST. · VERIFIED */
.home-prts .pr-cred { display: grid; justify-items: center; gap: 14px; text-align: center; }
/* 源石结构标本（竖向 3:4）：底层线稿示意图（倾斜轨道椭圆、点线圆、大菱形、刻度、小字），上面叠透明底的 WebGL 画布（themes/prts/originium.js，prts.js 按需加载）。
   data-state：pending 画布还没出第一帧 → 显示源石原图（originium.webp，来源见 fonts/Bender-NOTICE.txt）；ready 画布淡入、原图淡出；fallback 没有 WebGL → 一直显示原图。
   原图的位置、大小对齐画布里晶体的默认姿态，交叉淡入时不跳；画布上和上方不放任何 filter / 模糊 / 混合，contain 把标本里的布局与重绘关在盒子里 */
.home-prts .pr-specimen { position: relative; width: 100%; max-width: 340px; aspect-ratio: 3 / 4; contain: layout paint; }
.home-prts .pr-specimen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(/themes/prts/originium.webp) 50% 51% / auto 82% no-repeat;
  transition: opacity .8s var(--ease);
}
.home-prts .pr-schem { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--line-3); pointer-events: none; }
.home-prts .pr-schem-t { font: 400 8.5px var(--disp); letter-spacing: .14em; fill: var(--label); }
/* 画布：只能拖动旋转（不可聚焦）；touch-action: pan-y 让手机上竖向滚动照常 */
.home-prts .pr-orig {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: opacity .9s var(--ease);
}
.home-prts .pr-orig:active { cursor: grabbing; }
.home-prts .pr-specimen[data-state="ready"] .pr-orig { opacity: 1; }
.home-prts .pr-specimen[data-state="ready"]::before { opacity: 0; }
.home-prts .pr-specimen[data-state="fallback"] .pr-orig { display: none; }
.home-prts .pr-spec-cap { position: absolute; left: 11%; bottom: 1.6%; font: 400 11px/1 var(--disp); letter-spacing: .18em; color: var(--label); white-space: nowrap; pointer-events: none; }
.home-prts .pr-spec-cap i { font-style: normal; margin: 0 .5em; color: var(--hl); }
.home-prts .pr-cred-k { font: 400 11px/1 var(--disp); letter-spacing: .2em; color: var(--label); }
.home-prts .pr-barcode { display: block; width: 180px; height: 34px; color: var(--text-2); }
.home-prts .pr-barcode svg { display: block; width: 100%; height: 100%; }
.home-prts .pr-barcode:empty { background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 5px, transparent 5px 8px, currentColor 8px 11px, transparent 11px 12px, currentColor 12px 13px, transparent 13px 16px); }
.home-prts .pr-cred-id { font: 700 11px/1 var(--font); letter-spacing: .2em; color: var(--text-2); text-transform: uppercase; white-space: nowrap; }
.home-prts .pr-cred-id i { font-style: normal; margin: 0 .7em; color: var(--hl); }
/* 档案卡：路径标签 → 大数字 → 中文名 → 三行灰色列表线 → 分隔线 → 底行 */
.home-prts .pr-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.home-prts .pr-card { display: flex; flex-direction: column; min-height: 196px; padding: 18px 20px 14px; animation: rise .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
.home-prts .pr-card:hover { box-shadow: inset 3px 0 0 var(--hl-block), var(--shadow); }
.home-prts .pr-path { font: 500 10px/1 var(--mono); letter-spacing: .16em; color: var(--label); }
.home-prts .pr-card .v { margin-top: 22px; font: 500 44px/1 var(--font); letter-spacing: -.01em; white-space: nowrap; }
.home-prts .pr-card .v small { margin-left: 6px; font: 600 13px var(--font); color: var(--muted); letter-spacing: .04em; }
.home-prts .pr-card .k { margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--text-2); letter-spacing: .06em; }
.home-prts .pr-card .k::after {
  content: ""; display: block; height: 21px; margin-top: 14px; opacity: .8;
  background:
    linear-gradient(var(--line-2), var(--line-2)) 0 0 / 86% 3px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) 0 9px / 62% 3px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) 0 18px / 74% 3px no-repeat;
}
.home-prts .pr-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font: 500 10px/1.3 var(--mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.home-prts .pr-foot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-prts .pr-foot i { font-style: normal; color: var(--label); white-space: nowrap; }
/* 分章：左边粘住的标题栏，右边内容；背后一行巨型幽灵编号 */
.home-prts .pr-sec { position: relative; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 44px; padding-top: 84px; border-top: 1px solid var(--line); }
.home-prts .pr-sec::before {
  content: attr(data-ghost); position: absolute; right: -8px; top: 0; z-index: -1; pointer-events: none;
  font: 800 clamp(120px, 16vw, 230px)/.86 var(--font); letter-spacing: -.04em; color: var(--ghost);
}
html.no-gb .home-prts .pr-msg { display: none; }
.home-prts .pr-head { position: sticky; top: calc(var(--top) + 30px); min-width: 0; }
.home-prts .pr-head h2 { margin: 18px 0 0; font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: .04em; scroll-margin-top: calc(var(--top) + 110px); }
.home-prts .pr-head h2 em { font-style: normal; font-weight: 500; color: var(--muted); margin-left: .08em; }
.home-prts .pr-head h2::after { content: ""; display: block; height: 1px; margin-top: 18px; background: linear-gradient(90deg, var(--text-2) 0 44px, var(--line) 44px); }
.home-prts .pr-head p { margin: 16px 0 0; color: var(--muted); font-size: 13px; }
/* 文章：档案卡两列，首篇通栏 */
.home-prts .pr-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.home-prts .pr-post { display: flex; flex-direction: column; min-height: 210px; padding: 18px 22px 14px; color: inherit; }
.home-prts .pr-post.feat { grid-column: 1 / -1; min-height: 240px; padding: 22px 28px 16px; }
.home-prts .pr-post > header { display: flex; justify-content: space-between; gap: 12px; font: 500 10px/1 var(--mono); letter-spacing: .16em; color: var(--label); }
.home-prts .pr-post > header span:first-child { color: var(--text-2); }
.home-prts .pr-post h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 22px 0 0; font-size: 19px; line-height: 1.35; letter-spacing: .02em; overflow-wrap: anywhere; transition: color .25s; }
.home-prts .pr-post.feat h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; }
.home-prts .pr-post p { margin: 10px 0 0; color: var(--text-2); font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.home-prts .pr-post.feat p { max-width: 720px; font-size: 14.5px; -webkit-line-clamp: 3; }
.home-prts .pr-post .chips { gap: 6px; margin-top: 16px; }
.home-prts .pr-post .chips i { font: 700 10.5px/22px var(--font); font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: 0 9px; background: var(--chip-bg); color: var(--chip-fg); }
.home-prts .pr-post > :nth-last-child(2) { margin-bottom: 22px; }
.home-prts .pr-post > footer { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--label); }
.home-prts .pr-post > footer time { color: var(--text-2); letter-spacing: .08em; }
/* 悬停：左侧淡紫竖条（.card.lift:hover）、整卡略抬起、编号亮起 */
.home-prts .pr-post:hover { color: inherit; --ly: -4px; }
.home-prts .pr-post:hover > header span:first-child { color: var(--hl-ink); }
.home-prts .pr-post.is-sk { display: grid; align-content: start; gap: 14px; min-height: 180px; }
.home-prts .pr-post.is-sk .sk { display: block; }
.home-prts .pr-posts .empty { grid-column: 1 / -1; }

/* 统计磁贴（探针页的汇总条）：档案卡 + 右上编号 */
.tile {
  counter-increment: tile; position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 136px; padding: 16px 20px 18px; border: 1px solid var(--line); border-top: 3px solid var(--card-top);
  background: var(--card); box-shadow: var(--shadow);
}
.tile::after { content: "PRTS / 0" counter(tile); position: absolute; top: 18px; right: 18px; font: 500 9.5px/1 var(--mono); color: var(--label); letter-spacing: .14em; }
.tile:hover { box-shadow: inset 3px 0 0 var(--hl-block), var(--shadow); }
.tile:hover .pill-label::before { background: var(--hl-block); }
.tile .pill-label { position: absolute; top: 16px; left: 18px; }
.tile .tv { font: 500 36px/1.05 var(--font); white-space: nowrap; letter-spacing: -.01em; margin-top: 34px; position: relative; z-index: 1; }
.tile .tv small { font: 600 13px var(--font); color: var(--muted); margin-left: 5px; letter-spacing: .04em; }
.tile .tsub { font: 500 11px/1.4 var(--mono); color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); position: relative; z-index: 1; letter-spacing: .04em; }
.tile .ticon { position: absolute; right: 16px; bottom: 40px; font-size: 46px; color: var(--text); opacity: .07; transition: opacity .3s, transform .4s var(--ease); }
.tile:hover .ticon { opacity: .16; transform: translateX(-4px); }
.tile .ticon svg { stroke-width: 1.2; }

/* 档案卡倾转：prts.js 写 --rx / --ry（≤4deg）并加 .is-tilt；跟手时过渡很短，离开时慢慢回弹。
   闲置时只用 2D 位移，倾转时才带 perspective，免得每张卡常驻一个合成层 */
.home-prts .pr-card, .home-prts .pr-post, .tile {
  transform: translateY(var(--ly, 0px));
  transition: transform .7s var(--ease), border-color .25s, box-shadow .3s var(--ease);
}
.home-prts .pr-card.is-tilt, .home-prts .pr-post.is-tilt, .tile.is-tilt {
  transform: perspective(1000px) translateY(var(--ly, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .12s linear, border-color .25s, box-shadow .3s var(--ease);
  box-shadow: inset 3px 0 0 var(--hl-block), 0 34px 60px -30px rgba(0, 0, 0, .9);
}
:root[data-theme="light"] .home-prts .is-tilt, :root[data-theme="light"] .tile.is-tilt { box-shadow: inset 3px 0 0 var(--hl-block), 0 30px 54px -28px rgba(40, 35, 60, .35); }

/* 首页：游客留言板 —— 档案卡 + 深灰「QUERY」标题条，留言是一行行档案行，悬停为高亮行 */
.gb { position: relative; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.gb-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 18px; border: 0; background: var(--qbar); color: #f2f1f4; font: inherit; text-align: left; cursor: pointer; }
.gb-head .pill-label { color: #f2f1f4; }
.gb-head .pill-label::before { background: var(--hl-block); }
.gb-count { font: 700 12px/1 var(--mono); color: #f2f1f4; letter-spacing: .08em; }
.gb-count::after { content: " MSG"; font-size: 9.5px; font-weight: 500; color: #b6b3b9; letter-spacing: .16em; }
.gb-sig { margin-left: auto; font: 500 9.5px/1 var(--mono); color: #b6b3b9; letter-spacing: .18em; white-space: nowrap; }
.gb.off .gb-sig::before { content: "已关闭 · 仅管理员可见  "; color: #f0a0a6; letter-spacing: .04em; }
.gb-chev { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border: 1px solid rgba(255, 255, 255, .28); font-size: 13px; transition: transform .4s var(--ease), background .2s, color .2s, border-color .2s; }
.gb-head:hover .gb-chev { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
:root[data-theme="light"] .gb-head:hover .gb-chev { background: #f2f1f4; color: #0f0e13; border-color: #f2f1f4; }
.gb.folded .gb-chev { transform: rotate(-90deg); }
.gb-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ease); }
.gb.folded .gb-body { grid-template-rows: 0fr; }
.gb-inner { min-height: 0; overflow: hidden; }
.gb-view { position: relative; height: 232px; margin: 0 18px; overflow-y: auto; scrollbar-width: thin; }
.gb-view.roll {
  overflow: hidden; cursor: grab; touch-action: none; user-select: none;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.gb-view.roll:active { cursor: grabbing; }
.gb-track { will-change: transform; }
.gb-list { display: block; }
.gb-msg { position: relative; padding: 12px 12px 12px 15px; border-bottom: 1px solid var(--line); transition: background .2s, box-shadow .2s; }
.gb-msg:hover { background: var(--row-hl); box-shadow: inset 3px 0 0 var(--hl-block); }
.gb-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.gb-meta::before { content: attr(data-no); font: 500 9.5px/1 var(--mono); letter-spacing: .1em; color: var(--label); }
.gb-meta b { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-meta .tag { line-height: 17px; font-size: 9.5px; }
.gb-meta time { margin-left: auto; font: 500 10px/1 var(--mono); color: var(--muted); white-space: nowrap; letter-spacing: .04em; }
.gb-del { display: grid; place-items: center; padding: 2px; border: 0; background: none; color: var(--muted); font-size: 13px; cursor: pointer; }
.gb-del:hover { color: var(--danger); }
.gb-msg p { margin: 5px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
/* 左右各收进 1px：外层 .gb-view 是滚动容器，裁剪边会取整到整像素，边框贴边时会被切掉 */
.gb-empty { display: grid; place-items: center; height: 212px; margin: 10px 1px 1px; color: var(--muted); font-size: 13px; border: 1px solid var(--line-2); background: radial-gradient(closest-side, var(--card) 62%, transparent) center / 300px 56px no-repeat, var(--xbox), var(--card); }
.gb-form { display: flex; gap: 8px; padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.gb-form input[type=text] { padding: 9px 12px; font-size: 13.5px; }
.gb-form #gb-name { flex: 0 0 150px; }
.gb-form #gb-text { flex: 1; min-width: 0; }
.gb-form .btn { flex: none; padding: 0 20px; }
.gb-hp { position: absolute !important; left: -9999px; width: 1px !important; height: 1px; opacity: 0; }

/* 首页：标签筛选（标题栏里竖排的一列，当前项为高亮行）、文章页也用的日期 / 标签一行 */
.tag-filter { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 24px 0 0; }
.tag-filter:empty { display: none; }
.tag-filter button { position: relative; border: 0; background: none; color: var(--muted); font: 700 12px/1.3 var(--font); padding: 8px 12px; border-radius: 0; cursor: pointer; text-transform: uppercase; letter-spacing: .1em; text-align: left; transition: color .2s, background .2s, box-shadow .2s; }
.tag-filter button:hover { color: var(--text); background: color-mix(in srgb, var(--row-hl) 60%, transparent); }
.tag-filter button.on { color: var(--text); background: var(--row-hl); box-shadow: inset 3px 0 0 var(--hl-block); }
.meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); font-weight: 600; }
.meta > span { display: inline-flex; align-items: center; gap: 5px; }
.meta > span:first-child { font-family: var(--mono); letter-spacing: .06em; }

/* ---------- 文章页：编号小标题、长细线、高亮行引用 ---------- */
#read-progress { position: fixed; top: var(--top); left: 0; right: 0; width: auto; height: 2px; z-index: 40; background: var(--hl-block); transform-origin: 0 50%; transform: scaleX(0); }
.article { max-width: 800px; margin: 0 auto; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; padding: 6px 10px 6px 6px; border: 1px solid var(--line-2); }
.back:hover { color: var(--text); border-color: var(--line-3); background: var(--row-hl); box-shadow: inset 3px 0 0 var(--hl-block); }
.back svg { transition: transform .25s var(--ease); }
.back:hover svg { transform: translateX(-3px); }
.article h1.title { font-size: clamp(30px, 4.6vw, 48px); font-weight: 700; line-height: 1.15; margin: 30px 0 16px; letter-spacing: .01em; }
.article h1.title::before { content: "01 / RECORD"; display: block; margin-bottom: 16px; font: 500 11px/1 var(--mono); letter-spacing: .18em; color: var(--label); }
.article h1.title::after { content: ""; display: block; width: min(100%, 560px); height: 1px; margin-top: 22px; background: linear-gradient(90deg, var(--text-2), var(--line-2) 70%, transparent); }
.prose { font-size: 16.5px; line-height: 1.9; overflow-wrap: break-word; color: var(--text-2); counter-reset: h2; }
.prose h1, .prose h2, .prose h3, .prose h4 { line-height: 1.3; margin: 2em 0 .7em; color: var(--text); }
.prose h2 { font-size: 23px; display: flex; align-items: baseline; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.prose h2::before { counter-increment: h2; content: counter(h2, decimal-leading-zero) " /"; font: 500 12px/1 var(--mono); letter-spacing: .12em; color: var(--label); flex: none; }
.prose h3 { font-size: 18.5px; }
.prose h3::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; vertical-align: .2em; background: var(--line-3); }
.prose p { margin: 0 0 1.1em; }
.prose strong { color: var(--text); }
.prose a { color: var(--hl-ink); border-bottom: 1px solid color-mix(in srgb, var(--hl) 50%, transparent); }
.prose a:hover { background: var(--hl); color: var(--on-hl); border-bottom-color: var(--hl); }
.prose img { max-width: 100%; border: 1px solid var(--line); }
.prose code { font-family: var(--mono); font-size: .86em; background: var(--chip-bg); padding: 1px 6px; color: var(--text); }
.prose pre { background: var(--card-2); border: 1px solid var(--line); border-top: 3px solid var(--card-top); padding: 16px 18px; overflow-x: auto; position: relative; }
.prose pre code { background: none; padding: 0; font-size: 13px; line-height: 1.7; }
.prose pre .copy-code { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .2s; }
.prose pre:hover .copy-code { opacity: 1; }
.prose blockquote { margin: 0 0 1.1em; padding: 10px 20px; background: var(--row-hl); box-shadow: inset 3px 0 0 var(--hl-block); color: var(--text-2); }
.prose blockquote p { margin: .5em 0; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.prose li { margin: .25em 0; }
.prose ul > li { list-style: square; }
.prose li::marker { color: var(--muted); }
.prose hr { border: 0; height: 1px; margin: 2.6em 0; background: linear-gradient(90deg, var(--line-3), var(--line) 60%, transparent); }
/* 表格本身是横向滚动容器；合并边框有一半落在单元格外，留 1px 内边距避免最外圈边框被裁掉 */
.prose table { border-collapse: collapse; width: 100%; margin: 0 0 1.1em; font-size: 14px; display: block; overflow-x: auto; padding: 1px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.prose th { background: var(--qbar); color: #f2f1f4; border-color: var(--qbar); text-transform: uppercase; font-size: 11.5px; letter-spacing: .1em; }

/* ---------- 探针：工具条带深灰 QUERY 标题条，服务器是档案卡 ---------- */
.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 6px 0 26px; counter-reset: tile; }
.summary .tile { min-height: 124px; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; padding: 10px; border: 1px solid var(--line); background: var(--card); }
.toolbar::before { content: "QUERY"; align-self: stretch; display: grid; place-items: center; margin: -10px 4px -10px -10px; padding: 0 16px; background: var(--qbar); color: #f2f1f4; font: 600 10.5px/1 var(--mono); letter-spacing: .22em; }
.search { position: relative; flex: 1; min-width: 180px; max-width: 340px; }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search input { padding-left: 38px; }
.seg { display: inline-flex; background: var(--card-2); border: 1px solid var(--line-2); padding: 2px; gap: 2px; position: relative; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.panel > *, .sub-box > * { min-width: 0; }
.seg button { position: relative; z-index: 1; border: 0; background: none; color: var(--muted); padding: 6px 14px; border-radius: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .1em; transition: color .2s, background .2s, box-shadow .2s; white-space: nowrap; text-transform: uppercase; }
.seg button:hover { color: var(--text); background: var(--card); }
.seg button.on { color: var(--sel-fg); background: var(--sel-bg); box-shadow: inset 0 -2px 0 var(--hl); }

.servers { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 16px; }
.srv { padding: 18px 20px 14px; cursor: pointer; position: relative; overflow: hidden; transition: border-color .25s, box-shadow .3s var(--ease), transform .4s var(--ease); }
.srv:hover { box-shadow: inset 3px 0 0 var(--hl-block), var(--shadow); transform: translateY(-2px); }
/* 离线：去色、内容压暗，叠一层斜线 */
.srv.offline { filter: grayscale(1); border-top-color: var(--line-3); }
.srv.offline > * { opacity: .55; }
.srv.offline::after { content: ""; position: absolute; inset: 0; background: var(--hatch); pointer-events: none; }
.srv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.srv-name { font: 700 16.5px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .06em; }
.srv-sub { font: 500 11px/1.4 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; letter-spacing: .04em; }
.metric { margin: 11px 0; }
.metric-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; margin-bottom: 6px; }
.metric-top .lbl { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; }
.metric-top .val { font-weight: 700; font-size: 13px; font-family: var(--font); }
.metric-top .val small { font-weight: 600; color: var(--muted); margin-left: 6px; font-size: 11px; }
/* 细进度条：灰阶填充，告警 / 危险保留彩色 */
.bar { height: 3px; background: var(--bar-bg); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--bar-fill); transition: width .9s var(--ease), background .4s; }
.bar > i.warn { background: var(--warn); }
.bar > i.crit { background: var(--danger); }
.spark-wrap { position: relative; margin: 14px -20px 0; height: 48px; }
.spark-wrap canvas { width: 100%; height: 100%; display: block; }
.spark-legend { position: absolute; top: 2px; left: 20px; right: 20px; display: flex; justify-content: space-between; font: 600 11.5px/1.4 var(--mono); pointer-events: none; }
.spark-legend span { display: inline-flex; align-items: center; gap: 4px; }
.srv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.srv-stats div { min-width: 0; padding-left: 8px; border-left: 1px solid var(--line-2); }
.srv-stats span { display: block; font: 500 9.5px/1.5 var(--mono); color: var(--label); text-transform: uppercase; letter-spacing: .12em; }
.srv-stats b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up { color: var(--blue); }
.down { color: var(--accent); }

.servers.list-view { grid-template-columns: 1fr; gap: 8px; }
.servers.list-view .srv { display: grid; grid-template-columns: minmax(200px, 1.4fr) repeat(3, minmax(90px, 1fr)) minmax(160px, 1.2fr); align-items: center; gap: 20px; padding: 14px 20px; }
.servers.list-view .srv:hover { transform: none; }
.servers.list-view .srv-head { margin: 0; padding: 0; border: 0; }
.servers.list-view .metric { margin: 0; }
.servers.list-view .spark-wrap { margin: 0; height: 40px; }
.servers.list-view .spark-legend { left: 0; right: 0; top: -2px; }
.servers.list-view .srv-stats { display: none; }

/* ---------- 弹窗：档案详情卡 ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--vig) 78%, transparent); backdrop-filter: blur(6px) grayscale(.5); -webkit-backdrop-filter: blur(6px) grayscale(.5); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; animation: fade-in .25s var(--ease); }
.modal[hidden] { display: none; }
.modal.closing { animation: fade-out .2s var(--ease) forwards; }
.modal.closing .modal-box { animation: pop-out .2s var(--ease) forwards; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.modal-box { width: 100%; max-width: 920px; padding: 48px 28px 28px; position: relative; animation: pop .35s var(--ease); background: var(--card-solid); border-color: var(--line-2); border-top-color: var(--card-top); box-shadow: var(--shadow-pop); }
.modal-box::before { content: "PRTS / RECORD"; position: absolute; left: 28px; top: 20px; font: 500 10px/1 var(--mono); letter-spacing: .18em; color: var(--label); }
.modal-box.sm { max-width: 520px; }
@keyframes pop { from { transform: translateY(14px); opacity: 0; } }
@keyframes pop-out { to { transform: translateY(8px); opacity: 0; } }
.modal-close { position: absolute; top: 12px; right: 12px; }
.modal-close:hover { background: var(--ink) !important; color: var(--on-ink) !important; }
.modal-box h2, .modal-box h3 { letter-spacing: .03em; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin: 22px 0; }
/* 「标签 | 值」成对字段：左侧芯片块 */
.info-grid div { display: flex; align-items: stretch; background: var(--card-2); font-size: 13px; min-width: 0; border: 0; }
.info-grid div span { flex: none; display: grid; place-items: center; min-width: 76px; padding: 6px 8px; background: var(--chip-bg); color: var(--chip-fg); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; text-align: center; line-height: 1.25; }
.info-grid div b { font-weight: 600; display: block; padding: 6px 10px; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chart { background: var(--card-2); border: 1px solid var(--line); padding: 12px 14px 8px; position: relative; }
.chart::before { content: ""; position: absolute; left: -1px; top: -1px; width: 24px; height: 2px; background: var(--card-top); }
.chart h4 { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; display: flex; justify-content: space-between; gap: 8px; text-transform: uppercase; letter-spacing: .14em; }
.chart h4 small { color: var(--muted); font: 500 11px var(--mono); letter-spacing: 0; }
.chart canvas { width: 100%; height: 160px; display: block; cursor: crosshair; }
.tip { position: absolute; pointer-events: none; z-index: 2; padding: 7px 11px; font-size: 12px; white-space: nowrap; background: var(--card-solid); border: 1px solid var(--line-3); box-shadow: inset 3px 0 0 var(--hl-block), 0 10px 28px -10px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .15s; }
.tip.show { opacity: 1; }
.tip i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; }

/* ---------- 管理 ---------- */
.admin { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: start; }
.side { padding: 8px 0; position: sticky; top: calc(var(--top) + 20px); counter-reset: side; }
.side::before { content: "00 / CONSOLE"; display: block; padding: 10px 16px 14px; font: 500 10.5px/1 var(--mono); letter-spacing: .18em; color: var(--label); }
.side::-webkit-scrollbar { display: none; }
.side a { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 16px; color: var(--muted); font-weight: 700; font-size: 13.5px; transition: background .2s, color .2s, box-shadow .2s; letter-spacing: .05em; counter-increment: side; }
.side a::after { content: "0" counter(side); margin-left: auto; font: 500 9.5px var(--mono); color: var(--label); }
.side a:hover { background: color-mix(in srgb, var(--row-hl) 60%, transparent); color: var(--text); }
.side a.active { background: var(--row-hl); color: var(--text); box-shadow: inset 3px 0 0 var(--hl-block); }
.side a svg { font-size: 16px; }
.side hr { border: 0; border-top: 1px solid var(--line); margin: 8px 12px; }
.panel { display: grid; gap: 18px; min-width: 0; }
.panel h3 { margin: 0 0 4px; font-size: 15.5px; display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .06em; }
.panel h3 svg { color: var(--text); background: var(--chip-bg); padding: 5px; width: 26px; height: 26px; }
.panel .desc { margin: 0 0 18px; font-size: 13px; color: var(--muted); padding-left: 36px; }
.table-wrap { overflow-x: auto; margin: 0 -6px; }
table.list { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
table.list th { text-align: left; font-weight: 500; color: var(--label); font-size: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; text-transform: uppercase; letter-spacing: .14em; font-family: var(--mono); }
table.list td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list tbody tr { transition: background .2s, box-shadow .2s; }
table.list tbody tr:hover { background: var(--row-hl); box-shadow: inset 3px 0 0 var(--hl-block); }
table.list tr:last-child td { border-bottom: 0; }
.cell-name { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.sub-box { display: grid; grid-template-columns: 1fr 184px; gap: 24px; align-items: start; }
/* 二维码：白底 + 四角取景框 */
.qr { --vf: #18171c; background: var(--corners), #fff; padding: 14px; width: 184px; height: 184px; transition: opacity .25s; }
.qr svg { width: 100%; height: 100%; display: block; }
.editor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.editor textarea { min-height: 480px; height: 100%; }
.editor .preview { min-height: 480px; max-height: 72vh; overflow-y: auto; padding: 18px 22px; background: var(--card-2); border: 1px solid var(--line); }
/* 登录：身份验证 */
.login { max-width: 420px; margin: 7vh auto; text-align: left; position: relative; }
.login .logo { width: 52px; height: 52px; margin: 0 0 26px; background-size: 16px 16px; }
.login .logo::after { width: 7px; height: 7px; right: -4px; top: -4px; }
.login h2 { font-size: 30px; font-weight: 800; letter-spacing: .04em; }
.login h2::before { content: "01 / IDENTITY VERIFICATION"; display: block; margin-bottom: 14px; font: 500 10.5px/1 var(--mono); letter-spacing: .2em; color: var(--label); }
.login h2::after { content: ""; display: block; width: 100%; height: 1px; margin-top: 18px; background: linear-gradient(90deg, var(--text-2), var(--line-2) 70%, transparent); }
.login form { text-align: left; }

/* ---------- Toast：深色档案条 + 左侧淡紫竖条 ---------- */
.toasts { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 70; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { display: inline-flex; align-items: center; gap: 10px; background: #1c1b20; color: #f2f1f4; border: 1px solid #3a3940; box-shadow: inset 3px 0 0 #9e8aec, 0 16px 36px -14px rgba(0, 0, 0, .7); padding: 11px 18px 11px 16px; font-size: 13.5px; font-weight: 600; animation: toast-in .4s var(--ease); }
.toast svg { color: #b3a3f2; font-size: 17px; }
.toast.err { box-shadow: inset 3px 0 0 #e0707a, 0 16px 36px -14px rgba(0, 0, 0, .7); }
.toast.err svg { color: #e0707a; }
.toast.out { animation: toast-out .3s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ---------- 响应式 ---------- */
@media (max-width: 1020px) {
  /* 标本 + 凭证挪到站名下面横排（标本在左，凭证三行在右、竖向居中）；档案卡两列；各章标题栏挪到内容上面，标签筛选改横排 */
  .home-prts .pr-hero { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding: 48px 36px 52px; }
  .home-prts .pr-cred { grid-template-columns: 200px auto; grid-template-rows: 1fr auto auto auto 1fr; justify-content: start; justify-items: start; align-items: center; gap: 10px 28px; text-align: left; }
  /* 单栏时标本压到 200×267，首屏少长一截，平板上标本尽量留在首屏里 */
  .home-prts .pr-specimen { grid-area: 1 / 1 / 6 / 2; width: 200px; }
  .home-prts .pr-cred-k { grid-area: 2 / 2; }
  .home-prts .pr-barcode { grid-area: 3 / 2; }
  .home-prts .pr-cred-id { grid-area: 4 / 2; }
  .home-prts .pr-schem-t { display: none; } /* 示意图缩小后小字只有 6px，只剩噪点 */
  .home-prts .pr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-prts .pr-sec { grid-template-columns: 1fr; gap: 30px; padding-top: 60px; }
  .home-prts .pr-head { position: static; }
  .tag-filter { flex-direction: row; flex-wrap: wrap; }
  .servers.list-view .srv { grid-template-columns: minmax(170px, 1fr) repeat(3, minmax(70px, 1fr)); }
  .servers.list-view .spark-wrap { display: none; }
  #site-title { max-width: 150px; }
  nav#nav a { padding: 0 11px; background-position-x: 11px; }
}
@media (max-width: 860px) {
  .summary { grid-template-columns: 1fr 1fr; }
  .admin { grid-template-columns: 1fr; }
  .side { position: static; display: flex; overflow-x: auto; gap: 2px; padding: 4px; }
  .side::before, .side a::after { display: none; }
  .side a { white-space: nowrap; }
  .side hr { display: none; }
  .charts, .editor, .grid-2 { grid-template-columns: 1fr; }
  .editor .preview { display: none; }
  .sub-box { grid-template-columns: 1fr; }
  .home-prts .pr-posts { grid-template-columns: 1fr; }
  .modal-box > .row > .grow { flex-basis: 100%; }
  .pr-chip { display: none; }
}
/* 手机：读数带 20px + 导航 44px，只留标志、编号英文导航和主题按钮 */
@media (max-width: 680px) {
  :root { --strip: 20px; --top: 64px; --edge: 16px; }
  .topbar::before, .topbar::after { font-size: 8.5px; letter-spacing: .12em; }
  .topbar::after, .topbar[data-clock]::after { content: "RI :: INTERNAL"; }
  .topbar[data-clock]::after { content: attr(data-clock); }
  .topbar-wrap { padding: 0 6px 0 16px; }
  .topbar-in { gap: 8px; }
  .logo { width: 26px; height: 26px; background-size: 8px 8px; }
  #site-title { display: none; }
  nav#nav { gap: 0; }
  nav#nav a { padding: 0 9px; background-position-x: 9px; }
  nav#nav a::before { display: none; }
  nav#nav a::after { font-size: 10.5px; letter-spacing: .14em; }
  nav#nav a.active { background-size: 18px 2px; }
  .nav-sep { margin: 0 6px; }
  .topbar .icon-btn { width: 34px; height: 34px; }
  .footer::after { display: none; }
  .wrap { padding: 0 16px; }
  /* 页脚也带 .wrap：保留上下留白，避免站名与顶部 AUTH.SEQUENCE 读数重叠。 */
  .wrap.footer-in { padding: 44px 16px 26px; }
  .footer-brand, #footer-text { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .footer-brand { line-height: 1.4; }
  #footer-text { flex-basis: 100%; }
  main.wrap { padding-top: 26px; }
  .home-prts .pr-hero { padding: 36px 20px 40px; gap: 32px; }
  .home-prts .pr-kicker { margin-top: 26px; }
  .home-prts .pr-hero h1 { font-size: clamp(42px, 14vw, 72px); }
  .home-prts .pr-hero h1::after { margin-top: 20px; }
  .home-prts .pr-hero .btn.lg { min-width: 0; flex: 1 1 auto; }
  /* 手机：标本 + 凭证改回竖排居中，标本缩小（宽度跟视口走，不会横向溢出） */
  .home-prts .pr-cred { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; justify-items: center; gap: 12px; text-align: center; }
  .home-prts .pr-specimen, .home-prts .pr-cred-k, .home-prts .pr-barcode, .home-prts .pr-cred-id { grid-area: auto; }
  .home-prts .pr-specimen { width: min(220px, 68vw); }
  .home-prts .pr-spec-cap { font-size: 9px; letter-spacing: .14em; }
  .home-prts .pr-barcode { width: 150px; height: 28px; }
  .home-prts .pr-cards { gap: 10px; margin-top: 20px; }
  .home-prts .pr-card { min-height: 0; padding: 14px 14px 12px; }
  .home-prts .pr-card .v { margin-top: 16px; font-size: 30px; }
  .home-prts .pr-card .k::after { display: none; }
  .home-prts .pr-foot > span { display: none; }
  .home-prts .pr-sec { margin-top: 28px; padding-top: 48px; gap: 22px; }
  .home-prts .pr-post, .home-prts .pr-post.feat { min-height: 0; padding: 16px 16px 12px; }
  .home-prts .pr-post h3 { margin-top: 16px; font-size: 17px; }
  .servers { grid-template-columns: 1fr; }
  .tile { padding: 14px; min-height: 116px; }
  .tile::after { content: "0" counter(tile); top: 16px; right: 14px; }
  .tile .pill-label { left: 14px; }
  .tile .tv { font-size: 26px; margin-top: 32px; }
  .tile .ticon { font-size: 34px; right: 10px; bottom: 36px; }
  .gb-head { padding: 12px 14px; }
  .gb-view { height: 208px; margin: 0 14px; }
  .gb-empty { height: 188px; }
  .gb-form { padding: 12px 14px 14px; flex-wrap: wrap; }
  .gb-form #gb-name { flex: 1 1 100%; }
  .gb-sig { display: none; }
  .gb-head .gb-chev { margin-left: auto; }
  .pill-label { font-size: 10.5px; }
  .panel .desc { padding-left: 0; }
  .article h1.title { margin-top: 24px; }
  .hide-sm { display: none; }
  .toolbar .search { flex: 1 1 100%; max-width: none; }
  .servers.list-view .srv { grid-template-columns: 1fr 1fr; }
  .servers.list-view .srv-head { grid-column: 1 / -1; }
  .modal-box { padding: 44px 18px 20px; }
  .modal-box::before { left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .home-prts .pr-card, .home-prts .pr-post, .tile, .pr-chip, .pr-bg::before { transform: none !important; }
}