/* 中枢管理台 · 视觉沿用 2026-07-06 归档的旧采集控制台。
 *
 * 令牌不是「参考」是**继承**：下面 :root 里的每一个色值，都逐字节抄自
 *   archive/runwu-console-legacy-20260706/static/index.html 的 <style>（第 10-30 行）。
 * 组件尺寸（卡片圆角/字号/内边距/侧栏 200px）抄自同一份归档的构建产物
 *   static/assets/index--FQ-DQYD.js 里的内联样式对象。出处逐条记在 PROGRESS。
 *
 * 字体：旧版从 fonts.googleapis.com 外链 Inter。**这里不外链**，两条理由：
 *   ① 本台的 CSP 写死 `default-src 'self'; style-src 'self'`（app.py:20-27），
 *      外链字体表**根本加载不了** —— 抄过来只会得到一条控制台报错。
 *   ② 服务器在国内，外链首屏要赌一次跨境往返。
 * 所以 font-family 的**声明原样保留**（本机装了 Inter 就用 Inter），
 * 只是不再去网上取 —— 取不到就退系统字体栈，视觉差异只在字形，不在布局。
 */

:root {
  --bg: #0c0e12;
  --bg-card: #13161c;
  --bg-card-hover: #1a1e28;
  --bg-nav: #0f1117;
  --border: #1e2330;
  --border-light: #2a3040;
  --text: #e4e7ed;
  --text-secondary: #8b92a0;
  --text-muted: #5c6370;
  --accent: #00bcd4;
  --accent-dim: #0097a7;
  --green: #2ecc71;
  --yellow: #f1c40f;
  --red: #e74c3c;
  --radius: 8px;
  --radius-lg: 12px;

  /* 旧版把 accent 的半透明底色散在各处写死，这里收成两个别名，值不变。 */
  --accent-wash: rgba(0, 188, 212, 0.15);
  --accent-wash-soft: rgba(0, 188, 212, 0.08);
  --green-wash: rgba(46, 204, 113, 0.12);
  --muted-wash: rgba(92, 99, 112, 0.2);
  --red-wash: rgba(231, 76, 60, 0.12);
}

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

body {
  min-height: 100vh;
  display: flex;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ══ 侧栏（旧版 nav：200px · --bg-nav · sticky） ══ */

.side {
  width: 200px;
  flex-shrink: 0;
  background: var(--bg-nav);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
}

.side[hidden] { display: none; }

.side-brand { padding: 20px 16px 16px; border-bottom: 1px solid var(--border); }
.side-brand .name { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.side-brand .name b { color: var(--accent); font-weight: 700; }
.side-brand .role { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.chip {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--accent-wash);
  color: var(--accent);
}

.side-nav { flex: 1; padding: 8px; overflow-y: auto; }

.tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  background: transparent;
  color: var(--text-secondary);
  transition: all 0.12s;
  text-align: left;
}

.tab:hover { background: var(--bg-card); color: var(--text); }
.tab.on { background: var(--bg-card); color: var(--text); font-weight: 600; }
.tab .ico { font-size: 16px; opacity: 0.7; }

.side-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
}

.side-foot .who { display: block; color: var(--text-secondary); word-break: break-all; }
.side-foot .stat { display: block; margin-top: 6px; }
.side-foot .stat b { color: var(--text); }
.side-foot button { margin-top: 10px; }

/* ══ 主区 ══ */

.stage { flex: 1; min-width: 0; }

.page { padding: 32px 40px; max-width: 1200px; }
.page h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 4px; }
.page > .sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 28px; }
.page h2 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text-secondary); }
.page h3 { font-size: 13px; font-weight: 600; margin: 24px 0 10px; color: var(--text-secondary); }

.head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.head .sub { font-size: 13px; color: var(--text-secondary); }
.head .acts { flex-shrink: 0; }   /* 不许被左边那段长说明挤到换行 */

/* ══ 卡片与统计（旧版 Ut.card / cardLabel / cardValue / cardHint） ══ */

.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 28px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}

.card.tight { padding: 14px 20px; }
.card.flat { background: var(--bg); border-radius: var(--radius); padding: 12px 16px; }

.card-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.card-value { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.card-value.sm { font-size: 22px; }
.card-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.accent { color: var(--accent); }
.green { color: var(--green); }
.yellow { color: var(--yellow); }
.red { color: var(--red); }
.warn { color: var(--red); }
.hint { color: var(--text-muted); font-size: 12px; line-height: 1.7; }
.hint ul { margin: 6px 0 0 20px; }
.hint li { margin-bottom: 6px; }
.tag { color: var(--text-muted); font-size: 12px; }

.pill {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--muted-wash);
  color: var(--text-muted);
  white-space: nowrap;
}

.pill.ok { background: var(--green-wash); color: var(--green); }
.pill.bad { background: var(--red-wash); color: var(--red); }
.pill.hold { background: rgba(241, 196, 15, 0.15); color: var(--yellow); }

/* 卡片里的第一行字。**必须是 class，不能是 style="" 属性** ——
 * CSP 是 `style-src 'self'`，行内样式属性会被浏览器整条丢掉（2026-08-17 实测：
 * 第一版写成 style="font-size:14px" 时控制台一条 CSP 报错，字号根本没生效）。 */
.item-name { font-size: 14px; font-weight: 600; }
.item-line { font-size: 13px; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 8px; }

/* ══ 控件（旧版 vt.btn / btnPrimary / input / label） ══ */

button {
  font: inherit;
  font-size: 12px;
  padding: 6px 16px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  background: var(--accent-wash);
  color: var(--accent);
  transition: all 0.12s;
  white-space: nowrap;
}

button:hover { background: rgba(0, 188, 212, 0.25); }

button.primary {
  font-size: 12px;
  padding: 8px 20px;
  background: var(--accent);
  color: #0c0e12;
  font-weight: 600;
}

button.primary:hover { background: var(--accent-dim); }
button.ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
button.ghost:hover { background: var(--bg-card-hover); color: var(--text); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

input, select {
  font: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  min-width: 240px;
}

input:focus, select:focus { outline: none; border-color: var(--accent-dim); }
label { font-size: 12px; color: var(--text-secondary); }

/* ══ 表格 —— 旧版没有表格，按同一套令牌补齐 ══ */

table { border-collapse: collapse; width: 100%; font-size: 12.5px; }

th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* 数字列不许换行 —— 「1 活 / 0 停」被折成两行会读成两个数。
 * 只有证据/参数这类长文本列（.ev）放开换行。 */
td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; white-space: nowrap; }
td.ev { white-space: normal; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--bg-card-hover); }
td.ev { color: var(--text-muted); max-width: 460px; }

.table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin-bottom: 24px;
}

/* ══ 空态 / 载入（旧版 Gt.empty） ══ */

.empty { text-align: center; padding: 60px 0; color: var(--text-muted); font-size: 13px; }
.empty .glyph { font-size: 32px; margin-bottom: 8px; }
.empty p + p { font-size: 11px; margin-top: 4px; }

pre.result {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  overflow-x: auto;
  max-height: 420px;
  font-size: 12px;
  color: var(--text-secondary);
}

code {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

ul.links { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
ul.links li { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; }
ul.links a { color: var(--accent); text-decoration: none; font-size: 13px; }
ul.links a:hover { text-decoration: underline; }
ul.links .tag { display: block; margin-top: 2px; }

.panel[hidden] { display: none; }

/* ══ 登录页 —— 侧栏还没出现时的单页 ══ */

.gate { margin: 0 auto; padding: 72px 24px; max-width: 560px; width: 100%; }
.gate[hidden] { display: none; }
.gate .name { font-size: 24px; font-weight: 700; letter-spacing: -0.3px; }
.gate .name b { color: var(--accent); }
.gate h1 { font-size: 18px; font-weight: 600; margin: 28px 0 6px; }
.gate .card { margin-top: 16px; }
.gate .primary { margin-top: 14px; }

.gate details {
  margin-top: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
}

.gate details summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); }
.gate details summary:hover { color: var(--text); }
.gate details input { display: block; margin: 10px 0; width: 100%; }
.msg { min-height: 22px; margin-top: 14px; color: var(--red); font-size: 13px; }

.codes { margin: 72px auto; max-width: 560px; padding: 22px; background: var(--bg-card); border: 1px solid var(--red); border-radius: var(--radius-lg); }
.codes[hidden] { display: none; }
.codes h2 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.codes pre { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin: 14px 0; user-select: all; font-size: 13px; line-height: 1.9; }

@media (max-width: 900px) {
  body { display: block; }
  .side { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; }
  .side-nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .tab { width: auto; }
  .page { padding: 24px 18px; }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
}

/* ══ 规则页 ══════════════════════════════════════════════════════════
 * 一个新色值都没有：下面全部用上面 :root 里那 16 个继承来的令牌。
 * 布局是旧控制台没有的形态（左清单 + 右详情），但间距/圆角/字号沿用同一套。
 * 这一页要放的是 429 行 TOML 里 380 行注释，所以比别的页宽 300px。
 */
#tab-rules { max-width: 1500px; }

.subnav { display: flex; gap: 6px; margin: 24px 0 16px; border-bottom: 1px solid var(--border); }
.subtab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-secondary); font-size: 13px; padding: 8px 14px; cursor: pointer;
}
.subtab:hover { color: var(--text); }
.subtab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.split { display: flex; gap: 20px; align-items: flex-start; }
.split-side { width: 280px; flex-shrink: 0; position: sticky; top: 20px; }
.split-main { flex: 1; min-width: 0; }

.side-group {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); margin: 14px 0 6px; padding-left: 4px;
}
.side-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: 6px; color: var(--text);
}
.side-item:hover { background: var(--bg-card-hover); }
.side-item.on { border-color: var(--accent); background: var(--accent-wash-soft); }
.side-item .item-name { display: block; margin-bottom: 2px; }
.side-item .card-hint { display: block; word-break: break-all; margin-top: 0; }
.row-tail { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }

.file-head { margin-bottom: 8px; }
.file-head h2 { font-size: 16px; color: var(--text); word-break: break-all; }
.tagline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.tag.ok { color: var(--green); }
.tag.warn { color: var(--yellow); }

/* 共同失效面 —— 红/黄/绿只改左边那条竖杠，不改卡片底色（旧版的克制）。 */
.group-card { border-left: 3px solid var(--border-light); }
.group-card.red { border-left-color: var(--red); }
.group-card.yellow { border-left-color: var(--yellow); }
.group-card.green { border-left-color: var(--green); }
.verdict { font-size: 13px; color: var(--text-secondary); margin: 8px 0; line-height: 1.6; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 16px; }
.kv .k { display: block; font-size: 11px; color: var(--text-muted); }
.kv .v { display: block; font-size: 13px; color: var(--text); }
.members { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.member {
  font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--bg); border-radius: var(--radius); padding: 6px 10px;
}

.rule-card { border-left: 3px solid var(--border-light); }
.fieldrow { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0; font-size: 12px;
            color: var(--text-secondary); }
.field b { color: var(--text); font-weight: 600; }
.ev-head { font-size: 12px; color: var(--text-muted); margin: 12px 0 6px; }

.flags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.flag {
  font-size: 12px; padding: 4px 10px; border-radius: 20px;
  background: var(--muted-wash); color: var(--text-secondary);
  display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.flag.red { background: var(--red-wash); color: var(--red); }
.flag.yellow { background: rgba(241, 196, 15, 0.15); color: var(--yellow); }

/* 溯源芯片：页面上**每一段规则文字**旁边都有一个，点开就是文件那几行原文。 */
.src {
  background: none; border: 1px solid var(--border-light); border-radius: 4px;
  color: var(--text-muted); font-family: inherit; font-size: 11px;
  padding: 1px 6px; cursor: pointer;
}
.src:hover { border-color: var(--accent); color: var(--accent); }
.src-view {
  display: block; margin: 8px 0; padding: 12px; background: var(--bg);
  border: 1px solid var(--accent); border-radius: var(--radius);
  font-size: 12px; line-height: 1.6; white-space: pre; overflow-x: auto;
  color: var(--text-secondary);
}

/* 注释原文。**不设 max-height，不加省略号** —— 领导明确要求不要截断。 */
.doc { margin-top: 12px; }
.doc summary, .risk-box summary {
  cursor: pointer; font-size: 12px; color: var(--text-muted); padding: 4px 0;
}
.doc summary:hover, .risk-box summary:hover { color: var(--accent); }
.doc-block { margin: 8px 0; }
.doc-text {
  margin-top: 6px; padding: 12px 14px; background: var(--bg);
  border-left: 2px solid var(--border-light); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 12px; line-height: 1.75; color: var(--text-secondary);
  white-space: pre-wrap; word-break: break-word;
}
.risk-box { margin-top: 12px; }
.risks { display: flex; flex-direction: column; gap: 4px; }
.risk { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.risk-text { font-size: 12px; color: var(--yellow); white-space: pre-wrap; }

.timeline { border-left: 1px solid var(--border); margin-left: 6px; padding-left: 18px; }
.tl { position: relative; padding-bottom: 18px; }
.tl-dot {
  position: absolute; left: -24px; top: 4px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--bg);
}
.tl-sub { font-size: 13px; color: var(--text-secondary); margin: 4px 0; }
.slot { border-left: 3px solid var(--yellow); }
.slot h4 { font-size: 12px; color: var(--text-secondary); margin: 16px 0 8px; }

@media (max-width: 1100px) {
  .split { flex-direction: column; }
  .split-side { width: 100%; position: static; }
}