/* 哨兵台 — 紧凑表格式监控面板 */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ok: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;
  --ink: #1f2937;
  --muted: #9ca3af;
  --line: #e5e7eb;
  --card: #ffffff;
  --headbg: #f9fafb;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  background: #fafafa;
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

/* 顶栏 */
.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 22px 28px 16px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.topbar h1 { font-size: 22px; font-weight: 700; letter-spacing: 2px; }
.topbar h1 .sub {
  font-size: 11px; font-weight: 400; color: var(--muted);
  letter-spacing: 3px; margin-left: 10px;
}
.update-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 表格 */
main { flex: 1; max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 28px 20px; }

.table {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.row {
  display: grid;
  grid-template-columns: 150px 90px 60px 50px 1.2fr 1.2fr 150px;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
}
.row:first-child { border-top: none; }
.row.head {
  background: var(--headbg);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1px;
}
.row:not(.head):hover { background: #fbfbfb; }

.c-host { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot.ok { background: var(--ok); animation: pulse 2s infinite; }
.dot.warn { background: var(--warn); animation: pulse 2s infinite; }
.dot.bad { background: var(--bad); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.c-up, .c-load, .c-cpu { font-variant-numeric: tabular-nums; }
.c-load, .c-cpu { color: var(--muted); }

/* 内存/磁盘：数值 + 迷你进度条 */
.c-mem, .c-disk { min-width: 110px; }
.meter { display: flex; align-items: center; gap: 8px; }
.meter .num { font-size: 12px; color: var(--muted); white-space: nowrap; width: 62px; }
.meter .bar { flex: 1; height: 5px; background: #f0f0f0; border-radius: 3px; overflow: hidden; }
.meter .bar span { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
.meter .bar span.warn { background: var(--warn); }
.meter .bar span.bad { background: var(--bad); }

.c-bk { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.c-bk.ok { color: var(--ok); }
.c-bk.warn { color: var(--warn); }
.c-bk.bad { color: var(--bad); }
.c-bk .tag { font-size: 11px; margin-left: 6px; }

footer.foot {
  text-align: center; padding: 14px;
  font-size: 12px; color: var(--muted);
}

/* 窄屏：降级为紧凑卡片 */
@media (max-width: 720px) {
  .row { grid-template-columns: 1fr; gap: 4px; padding: 10px 14px; }
  .row.head { display: none; }
  .meter .num { width: 70px; }
  .c-bk { text-align: left; }
}