/* ═══════════════════════════════════════════════════════════════════
   Hermes Hub 设计系统 — 全站唯一 token/组件来源
   设计论点: 安静的板子, 响亮的异常。
   正常态是背景噪音 (暗淡文本 + 小点), 只有异常 (掉登/停止/失联)
   允许用填充色块说话。改样式先改这里, 页面内禁止再定义同名 token。
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* 表面: 页面 → 卡片 → 控件 → hover, 暖中性石墨四级 */
  --bg:#101214; --surface:#16191d; --raised:#1c2025; --hover:#21262c; --inset:#0c0e10;
  --border:#2a3038; --divider:rgba(255,255,255,.06);
  /* 文本三级 (faint 别再压暗 — 时间戳/描述要过对比度, 最暗层只给空值) */
  --text:#e7eaee; --dim:#9aa3af; --faint:#7b8594;
  /* 语义: ok 只给小点和对勾用, 不做底色 — 正常要安静 */
  --ok:#4cc38a;
  --warn:#e5b567; --warn-bg:#2c2416; --warn-bd:#57451f;
  --bad:#f16a6a;  --bad-bg:#2d1a1a;  --bad-bd:#5c2a2a;
  /* 唯一交互色 */
  --accent:#6ca0f5; --accent-btn:#2e63d8; --accent-btn-hi:#3a72e4;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --sans:-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --radius:8px; --radius-sm:6px;
}

* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
body {
  background:var(--bg); color:var(--text);
  font:13px/1.55 var(--sans);
  font-variant-numeric:tabular-nums;
}
a { color:var(--accent); }

/* ── 页头 ──────────────────────────────────────────────────────── */
.hub-header { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.hub-header h1 { font-size:15px; font-weight:650; letter-spacing:.01em; }
.hub-header h1 a { color:var(--text); text-decoration:none; }
.hub-stats { color:var(--dim); font-size:12.5px; }
.hub-stats b { color:var(--text); font-weight:600; }
.hub-stats .bad, .hub-stats .bad b { color:var(--bad); }
.hub-actions { margin-left:auto; display:flex; gap:6px; align-items:center; }
.hub-actions .who { color:var(--faint); font-size:12px; margin:0 4px; white-space:nowrap; }
.hub-msg { color:var(--warn); font-size:12px; margin:0 0 8px; min-height:1em; }

/* ── 异常条: 有问题才存在, 全健康时整条不渲染 ─────────────────────── */
.alerts {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--bad-bg); border:1px solid var(--bad-bd); border-radius:var(--radius);
  padding:7px 12px; margin-bottom:10px; font-size:12.5px; color:var(--bad);
}
.alerts .chip {
  display:inline-block; background:rgba(0,0,0,.25); border:1px solid var(--bad-bd);
  border-radius:var(--radius-sm); padding:1px 9px; line-height:20px;
  color:var(--text); text-decoration:none; font-family:var(--mono); font-size:12px;
}
.alerts .chip:hover { border-color:var(--bad); }
.alerts .chip .why { color:var(--bad); font-family:var(--sans); margin-left:5px; }

/* ── 控件: 常规 30px / 行内 24px, 圆角 6px ─────────────────────── */
.btn {
  background:var(--raised); border:1px solid var(--border); color:var(--dim);
  border-radius:var(--radius-sm); padding:0 12px; height:30px; line-height:28px;
  cursor:pointer; font-size:12.5px; font-family:var(--sans);
  text-decoration:none; display:inline-block; white-space:nowrap;
}
.btn:hover { border-color:#3b4350; color:var(--text); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.btn.primary { background:var(--accent-btn); border-color:var(--accent-btn); color:#fff; font-weight:600; }
.btn.primary:hover { background:var(--accent-btn-hi); }
.btn.ghost { background:transparent; }
.btn.sm { height:24px; line-height:22px; padding:0 10px; font-size:12px; }
.btn.danger { color:var(--bad); border-color:var(--bad-bd); }
.btn.danger:hover { background:var(--bad-bg); }

/* ── 状态语言: 安静正常态 / 响亮异常态 ────────────────────────────
   .st       正常态: 暗淡文本, 可带 .st-dot 小点
   .chip-bad / .chip-warn  异常态: 填充色块  */
.st { color:var(--dim); font-size:12.5px; white-space:nowrap; }
.st.ok::before, .st-dot.ok { color:var(--ok); }
.st-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:1px; }
.st-dot.ok { background:var(--ok); }
.st-dot.bad { background:var(--bad); }
.st .tick { color:var(--ok); }
.st.quiet { color:var(--faint); }
.chip-bad, .chip-warn {
  display:inline-block; padding:0 8px; border-radius:var(--radius-sm);
  font-size:12px; line-height:21px; height:23px; border:1px solid; white-space:nowrap;
  margin:1px 4px 1px 0;
}
.chip-bad  { color:var(--bad);  background:var(--bad-bg);  border-color:var(--bad-bd); }
.chip-warn { color:var(--warn); background:var(--warn-bg); border-color:var(--warn-bd); }
.plat {
  display:inline-block; padding:0 6px; border-radius:4px; font-size:11px; line-height:18px;
  color:var(--dim); background:var(--raised); border:1px solid var(--border); white-space:nowrap;
}

/* ── 卡片 / 分区 ───────────────────────────────────────────────── */
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.section-title { color:var(--faint); font-size:11.5px; letter-spacing:.06em; margin:14px 0 6px; }

/* ── 数据表 ────────────────────────────────────────────────────── */
.hub-table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.hub-table th {
  text-align:left; padding:7px 12px; background:var(--inset); border-bottom:1px solid var(--border);
  color:var(--faint); font-weight:500; font-size:11.5px; letter-spacing:.05em;
}
.hub-table td { text-align:left; padding:7px 12px; border-top:1px solid var(--divider); vertical-align:middle; }
.hub-table tbody tr:hover td { background:var(--hover); }
.hub-table .id { font-family:var(--mono); font-weight:600; font-size:13px; }
.hub-table .sub { color:var(--faint); font-size:12.5px; }
.hub-table .time { color:var(--faint); font-size:12.5px; }
.hub-table .empty { text-align:center; color:var(--faint); padding:28px 12px !important; }

/* 组头行: 业务分组 */
.hub-table tr.grp td { padding:6px 12px; background:var(--inset); border-top:1px solid var(--border); font-size:12px; }
.hub-table tr.grp:hover td { background:var(--inset); }
.grp-name { color:var(--text); font-weight:650; margin-right:10px; }
.grp-stat { color:var(--faint); }
.grp-stat .bad { color:var(--bad); }

/* 状态轨: 行首 2px 色条, 左缘从上到下扫一眼 = 舰队健康度 */
.hub-table tr.r-bad  > td:first-child { box-shadow:inset 2px 0 0 var(--bad); }
.hub-table tr.r-warn > td:first-child { box-shadow:inset 2px 0 0 var(--warn); }
.hub-table tr.r-ok   > td:first-child { box-shadow:inset 2px 0 0 rgba(76,195,138,.35); }

/* ── 表单 / 弹窗 ───────────────────────────────────────────────── */
input, select, textarea {
  background:var(--inset); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:7px 10px; font-size:13px; font-family:var(--sans);
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); }
input::placeholder { color:var(--faint); }
dialog {
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; width:min(92vw,400px);
  margin:auto;  /* 复位: 全局 *{margin:0} 会顶掉 UA 的 margin:auto 使弹窗贴左上 */
  box-shadow:0 16px 48px -8px rgba(0,0,0,.6);
}
dialog::backdrop { background:rgba(0,0,0,.6); }
dialog h3 { font-size:15px; font-weight:650; }
dialog label { display:block; color:var(--dim); font-size:12px; margin:10px 0 3px; }
dialog input, dialog select { width:100%; }
.dlg-actions { margin-top:18px; display:flex; gap:8px; justify-content:flex-end; }

@media (prefers-reduced-motion:no-preference) {
  .btn, input, select { transition:border-color .12s, background-color .12s, color .12s; }
}

/* ═══ 应用壳: 左侧导航 + 内容列 (hub-shell.js 注入 sidebar) ═══════ */
body.with-shell { display:flex; min-height:100vh; align-items:stretch; }
.sidebar {
  width:200px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.sb-brand { padding:18px 18px 14px; }
.sb-brand .sb-name { font-size:14.5px; font-weight:700; letter-spacing:.02em; color:var(--text); text-decoration:none; }
.sb-brand .sb-sub { color:var(--faint); font-size:11px; margin-top:2px; }
.sb-nav { padding:6px 10px; flex:1; overflow-y:auto; }
.sb-group {
  color:var(--faint); font-size:11px; letter-spacing:.08em;
  padding:12px 12px 4px; user-select:none;
}
.sb-group:first-child { padding-top:4px; }
.sb-item {
  display:block; padding:7px 12px; border-radius:var(--radius-sm); margin-bottom:2px;
  color:var(--dim); text-decoration:none; font-size:13px;
}
.sb-item:hover { background:var(--hover); color:var(--text); }
.sb-item.active { background:var(--raised); color:var(--text); font-weight:600; box-shadow:inset 2px 0 0 var(--accent); }
.sb-user {
  border-top:1px solid var(--divider); padding:12px 16px; font-size:12px; color:var(--dim);
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.sb-user .u { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-user a { color:var(--faint); text-decoration:none; flex-shrink:0; }
.sb-user a:hover { color:var(--text); }
.main-col { flex:1; min-width:0; padding:18px 24px 32px; }
.main-col > .inner { max-width:1200px; }

/* 手机: 顶栏 + 抽屉式导航 */
.mtop { display:none; }
@media (max-width:900px) {
  .sidebar {
    position:fixed; left:0; top:0; bottom:0; z-index:50; height:100dvh;
    transform:translateX(-100%); transition:transform .18s ease;
    box-shadow:16px 0 40px rgba(0,0,0,.5);
  }
  body.sb-open .sidebar { transform:none; }
  .sb-mask { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40; }
  body.sb-open .sb-mask { display:block; }
  .mtop {
    display:flex; align-items:center; gap:10px; padding:10px 14px;
    background:var(--surface); border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:30;
  }
  .mtop .burger { background:none; border:1px solid var(--border); color:var(--dim); border-radius:6px; width:34px; height:34px; font-size:16px; cursor:pointer; }
  .mtop .t { font-weight:650; font-size:14px; }
  body.with-shell { display:block; }
  .main-col { padding:12px 14px 28px; }
  @media (prefers-reduced-motion:reduce) { .sidebar { transition:none; } }
}

/* ═══ 页面头 / 统计卡 / 内容面板 / 筛选 / 下拉菜单 ═══════════════ */
.page-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.page-head h2 { font-size:17px; font-weight:650; }
.page-head .sub { color:var(--faint); font-size:12.5px; }
.page-head .actions { margin-left:auto; display:flex; gap:8px; align-items:center; }

.statgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:12px; }
.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:11px 14px; }
.stat .k { color:var(--faint); font-size:12px; }
.stat .v { font-size:21px; font-weight:650; margin-top:1px; line-height:1.3; }
.stat .v .of { color:var(--faint); font-size:13px; font-weight:400; }
.stat.bad .v { color:var(--bad); }
.stat.ok .v { color:var(--ok); }

.panel-head {
  display:flex; gap:8px; align-items:center; padding:9px 12px;
  border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.panel-head .ttl { font-weight:650; font-size:13px; margin-right:auto; }
.panel-head input, .panel-head select { height:30px; }
.panel > .hub-table { border:0; border-radius:0; }

details.menu { position:relative; display:inline-block; }
details.menu > summary { list-style:none; }
details.menu > summary::-webkit-details-marker { display:none; }
.menu-list {
  position:absolute; right:0; top:calc(100% + 4px); z-index:30;
  background:var(--raised); border:1px solid var(--border); border-radius:var(--radius-sm);
  min-width:112px; padding:4px; box-shadow:0 10px 28px rgba(0,0,0,.55);
}
.menu-list button {
  display:block; width:100%; text-align:left; background:none; border:0;
  color:var(--dim); padding:6px 10px; border-radius:4px; font-size:12.5px; cursor:pointer; font-family:var(--sans);
}
.menu-list button:hover { background:var(--hover); color:var(--text); }