/* ============================================================================
   db-rust 工作台 — 暗黑高达 / 装甲机库主题 (theme-gundam)
   ----------------------------------------------------------------------------
   加载：public/index.html 的 <link> 指向本文件。
   回滚：改回 /assets/theme-mecha.css（机甲）或 /assets/theme-v2.css（精致浅色）。

   设计语言
     · 装甲板：大切角 + 面板缝 + 铆钉位
     · 警示条：黄黑斜纹，用于激活项、危险操作、面板铭牌
     · 机体三色：联邦蓝（能量）/ 警示黄（注意）/ 高达红（危险）
     · 座舱：视口四角 HUD 框架 + 推进器光柱 + 扫描线
     · 全站等宽技术字，数值对齐

   修复记录
     · 上一版给 .card 设了 overflow-x:auto，按规范这会连带把 overflow-y 变成
       auto，卡片成为滚动容器，导致 thead 的 position:sticky 只能吸在卡片顶部
       （卡片没有固定高度 → 等于完全失效）。本版在宽屏不给 .card 加 overflow，
       吸顶才对视口生效；窄屏才启用横向滚动并关掉吸顶。
     · 全部为视觉属性，未改动任何 class 名、DOM 结构或 JS。
   ========================================================================== */

/* ── 令牌 ──────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Microsoft YaHei",
               "PingFang SC", sans-serif;
  --font-mono: "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;

  /* 机体装甲 */
  --void:     #04070c;
  --steel:    #0a1017;
  --plate-hi: #131d29;
  --plate:    #0e1620;
  --plate-lo: #0a1017;
  --line:     #1a2532;
  --line-2:   #283a4f;
  --rivet:    #2f4459;

  --text:  #dbe6f2;
  --muted: #7e91a8;
  --faint: #53647a;

  /* 联邦蓝 —— 主能量色 */
  --blue:      #2b7fff;
  --blue-2:    #7ab0ff;
  --blue-deep: #0d2a52;
  --blue-glow: rgba(43, 127, 255, .45);
  --blue-soft: rgba(43, 127, 255, .10);

  /* 警示黄 —— 注意 / 激活标记 */
  --caution:      #ffc400;
  --caution-glow: rgba(255, 196, 0, .38);
  --caution-soft: rgba(255, 196, 0, .10);

  /* 高达红 —— 危险 */
  --red:      #ff3b30;
  --red-2:    #ff7a72;
  --red-glow: rgba(255, 59, 48, .42);
  --red-soft: rgba(255, 59, 48, .10);

  --green:      #22e39a;
  --green-glow: rgba(34, 227, 154, .38);
  --green-soft: rgba(34, 227, 154, .10);

  /* 黄黑警示斜纹 */
  --hazard: repeating-linear-gradient(-45deg,
              var(--caution) 0 6px, #070b11 6px 12px);
  --hazard-thin: repeating-linear-gradient(-45deg,
              var(--caution) 0 4px, #070b11 4px 8px);

  --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  --cut: 14px;                 /* 切角：比上一版更狠 */
  --sidebar-w: 244px;

  --chamfer: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut)
  );
  --chamfer-sm: polygon(7px 0, 100% 0, 100% calc(100% - 7px),
                        calc(100% - 7px) 100%, 0 100%, 0 7px);
}

/* ── 基础 ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--void);
  /* 机库：网格地板 + 顶部蓝光 + 底部红警示余光 */
  background-image:
    linear-gradient(rgba(43, 127, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 127, 255, .05) 1px, transparent 1px),
    radial-gradient(1100px 520px at 50% -8%, rgba(43, 127, 255, .16), transparent 68%),
    radial-gradient(900px 420px at 50% 108%, rgba(255, 59, 48, .08), transparent 70%);
  background-size: 36px 36px, 36px 36px, 100% 100%, 100% 100%;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* CRT 扫描线 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg, rgba(160, 210, 255, .022) 0 1px, transparent 1px 3px
  );
}

/* 视口四角 HUD 框架 —— 一眼就是"驾驶舱显示器" */
body::before {
  content: "";
  position: fixed;
  inset: 8px;
  z-index: 9001;
  pointer-events: none;
  --c: rgba(43, 127, 255, .55);
  background:
    linear-gradient(var(--c), var(--c)) left 0 top 0 / 26px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) left 0 top 0 / 2px 26px no-repeat,
    linear-gradient(var(--c), var(--c)) right 0 top 0 / 26px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) right 0 top 0 / 2px 26px no-repeat,
    linear-gradient(var(--c), var(--c)) left 0 bottom 0 / 26px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) left 0 bottom 0 / 2px 26px no-repeat,
    linear-gradient(var(--c), var(--c)) right 0 bottom 0 / 26px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) right 0 bottom 0 / 2px 26px no-repeat;
  filter: drop-shadow(0 0 6px var(--blue-glow));
}

table, .mono, .run-badge, .cred, th, .cred-label, .badge {
  font-variant-numeric: tabular-nums;
}

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--blue); background-clip: content-box; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--blue-soft), 0 0 18px var(--blue-glow);
}
:focus:not(:focus-visible) { outline: none; }

/* ── 骨架 ──────────────────────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

/* 侧栏 = 机体躯干 */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--muted);
  background:
    linear-gradient(180deg, #101a26, var(--steel) 55%, #06090e),
    var(--steel);
  border-right: 1px solid var(--line);
  box-shadow:
    inset -1px 0 0 rgba(43, 127, 255, .22),
    inset -14px 0 26px -18px var(--blue-glow),
    6px 0 30px rgba(0, 0, 0, .65);
}
/* 躯干右侧的推进器光柱 */
.sidebar::after {
  content: "";
  position: absolute;
  top: 12%; right: 0;
  width: 2px; height: 34%;
  background: linear-gradient(180deg, transparent, var(--blue), transparent);
  box-shadow: 0 0 14px var(--blue-glow);
  animation: thruster 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes thruster {
  0%, 100% { opacity: .45; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(6%); }
}

/* 机体编号牌 */
.sidebar-brand {
  position: relative;
  padding: var(--s5) var(--s5) var(--s4);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 14px var(--blue-glow), 0 0 30px var(--blue-glow);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(43, 127, 255, .10), transparent);
}
/* 铭牌下方的警示条 */
.sidebar-brand::before {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--hazard-thin);
  opacity: .8;
}
/* 扫描光束 */
.sidebar-brand::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(122, 176, 255, .22), transparent);
  animation: sweep 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sweep {
  0%, 100% { transform: translateX(-120%); }
  50%      { transform: translateX(260%); }
}

.sidebar-nav {
  flex: 1;
  padding: var(--s3) var(--s2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

/* 导航项 = 装甲按钮 */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 11px var(--s3);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent);
  clip-path: var(--chamfer-sm);
  transition: color .14s, background .14s, border-color .14s, box-shadow .14s;
}
.nav-item:hover {
  color: var(--blue-2);
  background: linear-gradient(180deg, var(--blue-soft), transparent);
  border-color: rgba(43, 127, 255, .35);
  box-shadow: inset 0 0 16px var(--blue-soft);
}

/* 激活 = 全功率 */
.nav-item.active {
  color: #fff;
  border-color: var(--blue);
  background: linear-gradient(100deg, var(--blue) 0%, #1d5fd0 55%, #123f95 100%);
  box-shadow:
    0 0 22px var(--blue-glow),
    inset 0 0 16px rgba(255, 255, 255, .28);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
/* 激活项左缘的警示斜纹 */
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--hazard-thin);
}

.sidebar-footer {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  color: var(--faint);
}
.sidebar-footer .user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer .btn-ghost { color: var(--muted); }
.sidebar-footer .btn-ghost:hover {
  color: var(--red);
  background: var(--red-soft);
  text-shadow: 0 0 12px var(--red-glow);
}

.main-content {
  flex: 1;
  min-width: 0;
  padding: var(--s6) var(--s6) var(--s10);
}
.main-content > * { max-width: 1600px; }

/* 开机自检 */
.boot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 100vh;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--blue-2);
  text-shadow: 0 0 18px var(--blue-glow);
}
.boot::before {
  content: "";
  width: 20px; height: 20px;
  border: 2px solid var(--line-2);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .68s linear infinite;
  box-shadow: 0 0 16px var(--blue-glow);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 装甲面板 ──────────────────────────────────────────────────────────── */
/* 宽屏不加 overflow：否则 thead 的 sticky 会失效（见文件头说明） */
.card {
  position: relative;
  padding: var(--s5);
  margin-bottom: var(--s4);
  border: 1px solid var(--line);
  border-radius: 0;
  background:
    linear-gradient(180deg, var(--plate-hi) 0%, var(--plate) 42%, var(--plate-lo) 100%);
  box-shadow:
    0 10px 34px rgba(0, 0, 0, .62),
    inset 0 1px 0 rgba(255, 255, 255, .05),
    inset 0 0 0 1px rgba(0, 0, 0, .5);
  animation: plate-in .34s cubic-bezier(.2, .85, .3, 1) backwards;
}
@keyframes plate-in {
  from { opacity: 0; transform: translateY(12px) scale(.995); }
  to   { opacity: 1; transform: none; }
}
/* 逐块入场，有"装甲依次锁定"的感觉 */
.card:nth-child(1) { animation-delay: .03s; }
.card:nth-child(2) { animation-delay: .08s; }
.card:nth-child(3) { animation-delay: .13s; }
.card:nth-child(4) { animation-delay: .18s; }
.card:nth-child(5) { animation-delay: .23s; }

/* 面板缝高光 + 四角卡扣 */
.card::before,
.card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 3;
}
.card::before {
  top: -1px; left: -1px;
  width: 18px; height: 18px;
  border-top: 2px solid var(--blue);
  border-left: 2px solid var(--blue);
  filter: drop-shadow(0 0 6px var(--blue-glow));
}
.card::after {
  bottom: -1px; right: -1px;
  width: 18px; height: 18px;
  border-bottom: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
  filter: drop-shadow(0 0 6px var(--blue-glow));
}

/* 铭牌：大写 + 左侧警示块 */
.card > h2,
.card > h3 {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s4);
  padding: 0 0 var(--s3);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 12px rgba(43, 127, 255, .3);
}
.card > h2::before,
.card > h3::before {
  content: "";
  width: 4px; height: 16px;
  flex-shrink: 0;
  background: var(--hazard-thin);
  box-shadow: 0 0 10px var(--caution-glow);
}
.card > h3 { font-size: 11.5px; }
.card > h3::before { background: var(--blue); box-shadow: 0 0 10px var(--blue-glow); }

.card > h2:last-child,
.card > h3:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.card p { margin: 0 0 var(--s3); }
.card p:last-child { margin-bottom: 0; }
.card .btn + .btn { margin-left: var(--s2); }

/* 模块占位 */
.module-card {
  padding: var(--s10) var(--s6);
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line-2);
  background: repeating-linear-gradient(
    -45deg, rgba(43, 127, 255, .03) 0 12px, transparent 12px 24px
  ), linear-gradient(180deg, var(--plate), var(--plate-lo));
}
.module-card h2 {
  margin: 0 0 var(--s2);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 16px var(--blue-glow);
}
.module-card p { margin: var(--s1) 0; font-family: var(--font-mono); font-size: 11.5px; }

/* ── 战术读数板 ────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }

thead th {
  position: sticky;             /* 宽屏生效：.card 上没有 overflow */
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #16222f, #0f1926);
  color: var(--blue-2);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--blue);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55), inset 0 -1px 0 var(--blue-glow);
}

th, td {
  text-align: left;
  padding: 11px var(--s4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .018); }
tbody tr { transition: background .12s ease; }
tbody tr:hover td { background: var(--blue-soft); }
tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--blue), inset 3px 0 12px -2px var(--blue-glow); }
tbody tr:last-child td { border-bottom: 0; }

table tr > *:first-child { padding-left: var(--s5); }
table tr > *:last-child { padding-right: var(--s5); }

/* 设备详情键值表（原版完全没样式） */
.kv { width: 100%; }
.kv th {
  position: static;
  width: 195px;
  background: transparent;
  box-shadow: none;
  color: var(--faint);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.kv td { border-bottom: 1px solid var(--line); }
.kv tr:last-child th, .kv tr:last-child td { border-bottom: 0; }
.kv tr:hover td { background: transparent; box-shadow: none; }

/* ── 面板开关（按钮） ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 35px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(180deg, var(--plate-hi), var(--plate-lo));
  border: 1px solid var(--line-2);
  border-radius: 0;
  clip-path: var(--chamfer);
  transition: color .14s, background .14s, border-color .14s, box-shadow .14s, transform .06s;
}
.btn:hover {
  color: #fff;
  border-color: var(--blue);
  background: linear-gradient(180deg, var(--blue-soft), var(--plate-lo));
  box-shadow: 0 0 20px var(--blue-glow), inset 0 0 14px var(--blue-soft);
}
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled, .btn[disabled] { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #4a92ff, #1c5ed6 60%, #14479f);
  border-color: var(--blue-2);
  box-shadow: 0 0 22px var(--blue-glow), inset 0 1px 0 rgba(255, 255, 255, .5);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.btn-primary:hover {
  color: #fff;
  background: linear-gradient(180deg, #7ab0ff, #2b7fff 60%, #1c5ed6);
  box-shadow: 0 0 34px var(--blue-glow), inset 0 1px 0 rgba(255, 255, 255, .65);
}

.btn-danger {
  color: var(--red-2);
  border-color: rgba(255, 59, 48, .45);
  background: linear-gradient(180deg, var(--red-soft), var(--plate-lo));
}
.btn-danger:hover {
  color: #fff;
  background: linear-gradient(180deg, #ff5b52, #c22a22);
  border-color: var(--red);
  box-shadow: 0 0 22px var(--red-glow), inset 0 1px 0 rgba(255, 255, 255, .4);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
.btn-ghost:hover {
  color: var(--blue-2);
  background: var(--blue-soft);
  border-color: transparent;
  box-shadow: none;
}

.btn-block { width: 100%; }

.copy-btn {
  margin-left: 6px;
  min-height: 24px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 0;
  clip-path: var(--chamfer-sm);
  cursor: pointer;
  transition: all .13s ease;
}
.copy-btn:hover {
  color: #04121a;
  background: var(--caution);
  border-color: var(--caution);
  box-shadow: 0 0 16px var(--caution-glow);
}

/* ── 控制台输入 ────────────────────────────────────────────────────────── */
input, select, textarea {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  background: #05090e;
  border: 1px solid var(--line-2);
  border-radius: 0;
  padding: 9px 11px;
  caret-color: var(--blue);
  transition: border-color .14s, box-shadow .14s, background .14s;
}
input::placeholder, textarea::placeholder { color: var(--faint); letter-spacing: .08em; }
input:focus, select:focus, textarea:focus {
  outline: none;
  background: #070c13;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft), 0 0 22px var(--blue-glow);
}

.search { display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s4); }
.search input { flex: 1; min-width: 0; }
.tweet-input { width: 160px; }

/* ── 指示灯与铭牌 ──────────────────────────────────────────────────────── */
.muted { color: var(--muted); }

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--blue-2);
  word-break: break-all;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--caution);
  background: var(--caution-soft);
  border: 1px solid rgba(255, 196, 0, .38);
  border-radius: 0;
  clip-path: var(--chamfer-sm);
}

/* 运行状态 = LED 指示灯 */
.run-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 0;
  clip-path: var(--chamfer-sm);
}
.run-badge::before {
  content: "";
  width: 7px; height: 7px;
  flex-shrink: 0;
  background: currentColor;
  box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
  animation: led 2.2s ease-in-out infinite;
}
@keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.run-ok      { color: var(--green);   background: var(--green-soft);   border: 1px solid rgba(34, 227, 154, .35); }
.run-partial { color: var(--caution); background: var(--caution-soft); border: 1px solid rgba(255, 196, 0, .35); }
.run-failed  { color: var(--red);     background: var(--red-soft);     border: 1px solid rgba(255, 59, 48, .38); }
.run-unknown { color: var(--muted);   background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2); }

.run-detail {
  margin: 6px 0 2px;
  padding-left: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.run-detail li { margin: 2px 0; word-break: break-all; }

details summary {
  cursor: pointer;
  color: var(--blue-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  user-select: none;
}
details summary:hover { color: #fff; text-shadow: 0 0 12px var(--blue-glow); }

.result { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.result-ok { color: var(--green); text-shadow: 0 0 12px var(--green-glow); }
.result-fail { color: var(--red); text-shadow: 0 0 12px var(--red-glow); }

/* ── 凭证 ──────────────────────────────────────────────────────────────── */
.cred { margin: 3px 0; word-break: break-all; }
.cred-label {
  display: inline-block;
  min-width: 92px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}

.account-link { color: var(--blue-2); text-decoration: none; font-weight: 600; }
.account-link:hover { color: #fff; text-shadow: 0 0 14px var(--blue-glow); }
.account-link .muted { color: var(--muted); font-weight: 400; }

/* ── 告警 / 空态 ───────────────────────────────────────────────────────── */
.alert {
  position: relative;
  padding: 11px var(--s4) 11px 30px;
  margin-bottom: var(--s4);
  font-size: 13px;
  color: var(--red-2);
  background: linear-gradient(90deg, var(--red-soft), transparent);
  border: 1px solid rgba(255, 59, 48, .3);
  border-left: 4px solid var(--red);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.alert::before {
  content: "!";
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #0a0f16;
  background: var(--red);
  box-shadow: 0 0 12px var(--red-glow);
}
.alert-error { border-left-color: var(--red); }

.empty {
  text-align: center;
  padding: var(--s10) var(--s4);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
}
.empty::before { content: "[ "; color: var(--line-2); }
.empty::after  { content: " ]"; color: var(--line-2); }

/* ── 登录 = 机体启动 ───────────────────────────────────────────────────── */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--s4);
  background:
    radial-gradient(820px 460px at 50% 2%, rgba(43, 127, 255, .20), transparent 66%),
    radial-gradient(600px 320px at 50% 104%, rgba(255, 59, 48, .10), transparent 70%),
    linear-gradient(rgba(43, 127, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 127, 255, .05) 1px, transparent 1px),
    var(--void);
  background-size: 100% 100%, 100% 100%, 34px 34px, 34px 34px, 100% 100%;
}
.login-card {
  position: relative;
  width: 100%;
  max-width: 410px;
  padding: var(--s8) var(--s8) var(--s6);
  background: linear-gradient(180deg, var(--plate-hi), var(--plate) 45%, var(--plate-lo));
  border: 1px solid var(--line-2);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, .78),
    0 0 60px rgba(43, 127, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: plate-in .4s cubic-bezier(.2, .85, .3, 1) backwards;
}
/* 顶部整条警示带 */
.login-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--hazard);
}
/* 右下切角标记 */
.login-card::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 22px; height: 22px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  filter: drop-shadow(0 0 8px var(--blue-glow));
}

.login-card h1 {
  margin: 0 0 var(--s2);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 18px var(--blue-glow), 0 0 44px var(--blue-glow);
}
.login-card .subtitle {
  margin: 0 0 var(--s6);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.login-card form { display: flex; flex-direction: column; gap: var(--s2); }
.login-card label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.login-card input { padding: 11px 12px; font-size: 13px; }
.login-card .btn { margin-top: var(--s4); min-height: 40px; letter-spacing: .24em; }

/* ── 响应式 ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .main-content { padding: var(--s5) var(--s4) var(--s8); }
  .card { padding: var(--s4); }
  body::before { inset: 6px; }
}

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }

  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    overflow-x: auto;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .6);
  }
  .sidebar::after { display: none; }
  .sidebar-brand { padding: 0 var(--s3) 0 0; border-bottom: 0; white-space: nowrap; }
  .sidebar-brand::before, .sidebar-brand::after { display: none; }
  .sidebar-nav { flex-direction: row; padding: 0; gap: 3px; overflow-x: auto; }
  .nav-item { white-space: nowrap; }
  .nav-item.active::before { display: none; }
  .sidebar-footer { border-top: 0; padding: 0 0 0 var(--s2); }
  .main-content { padding: var(--s4) var(--s3) var(--s8); }

  /* 窄屏：放弃吸顶，换表格可横向滚动 */
  thead th { position: static; }
  .card { overflow-x: auto; }
  .kv th { width: auto; }
  body::before { display: none; }
}

@media (max-width: 560px) {
  th, td { padding: 9px 10px; }
  table tr > *:first-child { padding-left: var(--s3); }
  table tr > *:last-child { padding-right: var(--s3); }
  .card::before, .card::after { width: 12px; height: 12px; }
  .login-card { padding: var(--s6) var(--s5) var(--s5); }
}

/* 尊重系统的减少动效 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}