/* Server Status — modern reskin (light / dark / system) */
/* 字体照搬 monitor.seaya.link: 不加载任何 web 字体, 全用系统字体栈
   (UI/正文用 system sans, 数值/代码用 system mono) */

:root {
  /* light palette — 照搬 tz.huilang.me 的 body.light: 统一暖米白底, 终端等宽, 低对比护眼 */
  --bg-1: #f5f5f0;
  --bg-2: #f5f5f0;
  --surface: rgba(232, 232, 224, .6);   /* item 底 = huilang --bg-secondary(半透, 透出扫描线) */
  --surface-alt: rgba(250, 250, 245, .6); /* 表头/胶囊 = huilang --bg-card */
  --border: #d4d4c8;
  --border-strong: #b8b8a8;
  --text: #2c2c2c;
  --text-dim: #5c5c5c;
  --text-faint: #8c8c80;
  --accent: #2563eb;
  --ok: #1a7f5a;
  --warn: #d97706;
  --bad: #dc2626;
  --down: #5c5c5c;          /* 数字统一灰, 不双色 */
  --up: #5c5c5c;
  --ram: #7c3aed;
  --disk: #0d9488;
  --track: #e2e2d6;
  --row-hover: rgba(240, 240, 232, .6);   /* hover = huilang --bg-hover */
  --shadow: none;
  --radius: 4px;

  --scanline: rgba(0, 0, 0, .015);
  /* 照搬 seaya: system sans(UI) + system mono(数值/代码), 无 web 字体 */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Open Sans", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html[data-theme="dark"] {
  /* 照搬 huilang 的 :root(dark) */
  --bg-1: #0a0e14;
  --bg-2: #0a0e14;
  --surface: rgba(18, 23, 31, .6);    /* huilang --bg-secondary */
  --surface-alt: rgba(21, 27, 38, .6);  /* huilang --bg-card */
  --border: #1e2a3a;
  --border-strong: #2a3a4f;
  --text: #d3dae3;
  --text-dim: #8999af;
  --text-faint: #6b7689;
  --accent: #4da6ff;
  --ok: #00d4aa;
  --warn: #ffb870;
  --bad: #f85149;
  --down: #8999af;
  --up: #8999af;
  --ram: #b392f0;
  --disk: #39d2c0;
  --track: #1e2a3a;
  --row-hover: rgba(26, 34, 48, .6);   /* huilang --bg-hover */
  --scanline: rgba(0, 0, 0, .03);
  --shadow: none;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  background: var(--bg-1);   /* 统一暖米白底铺满整页 */
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* 整页 CRT 扫描线条纹(照搬 huilang 的 body::before): 覆盖整个视口, 不挡点击 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--scanline) 2px, var(--scanline) 4px);
  pointer-events: none;
  z-index: 9999;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 26px;
  max-width: 1500px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 { font-size: 17px; font-weight: 650; letter-spacing: .3px; margin: 0; }
.brand-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.topbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.summary { color: var(--text-dim); font-size: 12.5px; }
.summary b { color: var(--text); font-weight: 600; }
.updated { color: var(--text-faint); font-size: 12px; font-family: var(--mono); }

.theme-switch {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.theme-switch button {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  width: 30px; height: 26px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background .15s, color .15s;
}
.theme-switch button:hover { color: var(--text); }
.theme-switch button.active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

/* ---------- table ---------- */
.wrap { max-width: 1500px; margin: 0 auto; padding: 0 26px 40px; }
.table-scroll {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; white-space: nowrap; }

/* 自动列宽: 各列按内容自适应; 唯独 NETWORK(实时速率)数值频繁变化, 固定其宽度防止整表抖动 */
.c-net { width: 72px; min-width: 72px; }
/* 关键: table-layout:auto 下列宽取自最宽「单元格内容」, 表头 width 只是建议值;
   故把网络单元格内容裹进固定宽度盒子, 让其固有宽度恒定, 速率怎么变都不撑动整表 */
.netbox { display: inline-block; width: 70px; overflow: hidden; }
/* MONTHLY / TRAFFIC: 累计流量数值也会随位数增减改变宽度, 同样钉死 */
.numbox { display: inline-block; width: 58px; overflow: hidden; }
/* UPTIME / LOAD: 时长与负载位数也会变, 钉死防抖 */
.upbox   { display: inline-block; width: 62px; overflow: hidden; }
.loadbox { display: inline-block; width: 44px; overflow: hidden; }

thead th {
  position: sticky; top: 0;
  background: var(--surface-alt);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border-strong);
  z-index: 2;
}
tbody td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  line-height: 1.2;
}
tbody tr:last-child td { border-bottom: 0; }
/* huilang 风格: 不做隔行变色; 条纹是整页 CRT 扫描线(见 body::before) */
tbody tr.row:hover { background: var(--row-hover); }
tbody tr.offline { opacity: .5; }
tr.empty td { text-align: center; color: var(--text-dim); padding: 40px; }

.name { font-weight: 500; color: var(--text); }
.c-gauge, .c-ping { text-align: left; }

/* protocol pill + status dot */
.proto { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.on  { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.dot.off { background: var(--text-faint); }
.pill {
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.pill.dual { color: var(--text-dim); }
.pill.off  { color: var(--text-faint); }

/* region */
.region { display: inline-flex; align-items: center; gap: 7px; }
.flag { font-size: 15px; line-height: 1; }
.region-code { text-transform: uppercase; color: var(--text-dim); font-size: 12px; }

.type-tag { color: var(--text-dim); text-transform: lowercase; }

/* duo numbers (down | up) */
.duo { font-family: var(--mono); font-size: 12px; display: inline-flex; gap: 6px; align-items: baseline; }
.duo .in  { color: var(--down); }
.duo .sep { color: var(--text-faint); }
.duo .out { color: var(--up); }

/* MONTHLY/NETWORK/TRAFFIC: 上下两行 ↑上传 / ↓下载 (与 CU/CT/CM 同款堆叠) */
.duo2 { font-family: var(--mono); font-size: 12px; display: inline-flex; flex-direction: column; line-height: 1.15; }
.duo2 .up   { color: var(--up); display: inline-flex; align-items: center; }
.duo2 .down { color: var(--down); display: inline-flex; align-items: center; }
/* 矢量箭头: 跟随当前文字色(currentColor), 比 Unicode ↑↓ 锐利清晰 */
.duo2 .ar   { width: 11px; height: 11px; margin-right: 3px; flex: none; }
.mono { font-family: var(--mono); font-size: 12px; }
.dim { color: var(--text-dim); }

/* circular gauges (CPU/RAM/DISK): 环形进度条, 中间显示百分比 */
.gauge { position: relative; display: inline-block; width: 28px; height: 28px; vertical-align: middle; }
.gauge .ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--track); stroke-width: 3.5; }
.ring-fill {
  fill: none; stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 100;
  transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1), stroke .3s;
}
.gauge[data-kind="cpu"]  .ring-fill { stroke: var(--accent); }
.gauge[data-kind="ram"]  .ring-fill { stroke: var(--ram); }
.gauge[data-kind="disk"] .ring-fill { stroke: var(--disk); }
.gauge.warn .ring-fill { stroke: var(--warn) !important; }
.gauge.bad  .ring-fill { stroke: var(--bad)  !important; }
.ring-val {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--text);
}

/* ping cells: 丢包率(主, 配色) + 延迟(次, 暗) 双行, 不点详情即可见丢包 */
/* CU/CT/CM: 延迟 ms 位数会变(12ms↔123ms), 固定宽度防止整表回流 */
.ping { font-family: var(--mono); font-size: 12px; display: inline-flex; flex-direction: column; line-height: 1.1; width: 52px; overflow: hidden; }
.ping .p-loss { font-weight: 600; color: var(--text-dim); }
.ping .p-ms { color: var(--text-faint); font-size: 10.5px; }
.ping.good .p-loss { color: var(--text-dim); }   /* 0 丢包: 统一灰, 不抢眼 */
.ping.mid  .p-loss { color: var(--warn); }
.ping.bad  .p-loss { color: var(--bad); }

.foot { text-align: center; color: var(--text-faint); font-size: 12px; padding: 18px 0 0; }
.foot a { color: var(--text-dim); text-decoration: none; }
.foot a:hover { color: var(--accent); }

/* ---------- expandable detail row (老站手风琴式: 点击行就地展开) ---------- */
tbody tr.row { cursor: pointer; }
tbody tr.row.open td { border-bottom-color: transparent; background: var(--surface-alt); }
tr.exrow[hidden] { display: none; }
tr.exrow > td {
  padding: 0;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-strong);
}
.exwrap {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 30px;
  padding: 12px 18px;
  font-family: var(--mono); font-size: 12px;
  color: var(--text-dim);
  white-space: normal;
  text-align: center;
}
.exseg b { color: var(--text-faint); font-weight: 700; margin-right: 8px; }

/* ---------- responsive: 移动端只保留主要信息并缩小(参考 mobile.png) ---------- */
/* 中屏: 隐藏 MONTHLY(3) TRAFFIC(9) CU/CT/CM(13-15) */
@media (max-width: 920px) {
  #grid { min-width: 0; }   /* 列减少后铺满即可, 不再强制横向滚动 */
  #grid th:nth-child(3),  #grid td:nth-child(3),
  #grid th:nth-child(9),  #grid td:nth-child(9),
  #grid th:nth-child(13), #grid td:nth-child(13),
  #grid th:nth-child(14), #grid td:nth-child(14),
  #grid th:nth-child(15), #grid td:nth-child(15) { display: none; }
  .topbar, .wrap { padding-left: 14px; padding-right: 14px; }
}
/* 窄屏(手机): 再隐藏 PROTO(2) TYPE(4) REGION(5) UPTIME(6), 保留 节点/负载/网络/CPU/内存/硬盘 */
@media (max-width: 640px) {
  #grid th:nth-child(2), #grid td:nth-child(2),
  #grid th:nth-child(4), #grid td:nth-child(4),
  #grid th:nth-child(5), #grid td:nth-child(5),
  #grid th:nth-child(6), #grid td:nth-child(6) { display: none; }
  body { font-size: 11px; }
  .topbar { padding: 12px 10px; gap: 10px; }
  .brand h1 { font-size: 15px; }
  .summary { display: none; }
  .wrap { padding: 0 10px 28px; }
  thead th { padding: 10px 7px; font-size: 9.5px; letter-spacing: .3px; }
  tbody td { padding: 9px 7px; }
  .pill { padding: 1px 6px; font-size: 10px; }
  .duo, .mono, .ping { font-size: 11px; }
  .gauge { width: 28px; height: 28px; }
  .ring-val { font-size: 9px; }
}
/* 小尺寸手机: 给实时网络双行数值留出空间 */
@media (max-width: 360px) {
  #grid th, #grid tr.row > td { padding-left: 3px; padding-right: 3px; }
}