/* ============================================================
   设计系统：精密仪器风（Precision Instrument）
   单一强调色：电光绿；状态色只用于表达语义（在线/离线）。
   字号体系：Space Grotesk（展示）+ JetBrains Mono（数据）。
   圆角规则：容器 16px / 小方块 10px / 交互按钮全圆角。
   深色模式跟随系统 prefers-color-scheme 自动切换。
   ============================================================ */

:root {
  /* ---- 浅色主题令牌 ---- */
  --bg: #f3f4f1;              /* 纸面底色：冷灰白，看着很安静 */
  --surface: #ffffff;         /* 卡片面 */
  --surface-2: #f7f8f5;       /* 内嵌块（monogram 方块底） */
  --ink: #191b1f;             /* 正文：近黑，不用纯黑保持深度 */
  --ink-2: #555d68;           /* 次级文字 */
  --ink-3: #8b93a1;           /* 弱化文字（标签、说明） */
  --line: #e4e7e1;            /* 发丝线：比边框更精致的存在 */
  --line-2: #d3d8d0;          /* 悬停加深的边框 */

  --accent: #0e9f6e;          /* 强调色：电光绿，一锤定音 */
  --accent-deep: #0b7f58;     /* 强调色深一档，悬停/文字用 */
  --accent-soft: rgba(14, 159, 110, 0.10); /* 强调色淡染，做底色 */

  --ok: #0e9f6e;              /* 在线绿（与强调色同族，页面更统一） */
  --ok-soft: rgba(14, 159, 110, 0.14);
  --bad: #d64d57;             /* 离线红：唯一的暖色，语义专用 */
  --bad-soft: rgba(214, 77, 87, 0.10);
  --pending: #9aa4b2;         /* 探测中 / 未响应灰 */

  --topbar-bg: rgba(243, 244, 241, 0.86);
  --shadow-card: 0 1px 2px rgba(20, 24, 30, 0.04), 0 8px 24px -12px rgba(20, 24, 30, 0.08);
  --shadow-card-hover: 0 2px 4px rgba(20, 24, 30, 0.05), 0 16px 40px -16px rgba(20, 24, 30, 0.16);

  --radius-card: 16px;
  --radius-tile: 10px;

  --font-display: "Space Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* ---- 深色主题令牌：整体锁同一套色板，只是换亮度 ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1113;
    --surface: #15181c;
    --surface-2: #1b1f24;
    --ink: #edf0f3;
    --ink-2: #a4acb7;
    --ink-3: #6c7581;
    --line: #24282e;
    --line-2: #33383f;

    --accent: #34d399;
    --accent-deep: #2bbd89;
    --accent-soft: rgba(52, 211, 153, 0.12);

    --ok: #34d399;
    --ok-soft: rgba(52, 211, 153, 0.16);
    --bad: #f87171;
    --bad-soft: rgba(248, 113, 113, 0.12);
    --pending: #56606d;

    --topbar-bg: rgba(15, 17, 19, 0.86);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 12px 32px -12px rgba(0, 0, 0, 0.55);
  }
}

/* ==================== 字体自托管 ==================== */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ==================== 基础 ==================== */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }   /* 局域网区没数据时整块藏起来 */

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ==================== 顶部栏 ==================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }

.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}

.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; }

.nav { display: flex; gap: 2px; }

.nav a {
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }

.topbar-tools { display: flex; align-items: center; gap: 12px; }

.btn {
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.btn:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn:active { transform: scale(0.97); }   /* 按下去的物理反馈 */
.btn:disabled { opacity: 0.55; cursor: wait; }

.clock {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ==================== Hero ==================== */
.hero {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 56px;
  align-items: end;
  padding: 72px 0 64px;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 18px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  font-variant-numeric: tabular-nums;
}
.hero-title .hl { color: var(--accent); transition: color 0.3s ease; }
.hero-title .hl.down { color: var(--bad); }   /* 有节点离线时，在线数字变红 */

.hero-sub {
  margin: 0;
  max-width: 46ch;
  font-size: 15px;
  color: var(--ink-2);
}

/* Hero 入场：文案和读数面板轻轻浮起，像开机点亮 */
.hero-copy, .readout {
  animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.readout { animation-delay: 0.08s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* LIVE READOUT 读数面板：真数据，不是装饰 */
.readout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
}

.readout-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin: 0 0 16px;
}

.readout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin: 0;
}

.readout-item dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.readout-item dd {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.status-line { display: flex; align-items: center; gap: 8px; }

/* ==================== 分组与台账 ==================== */
.group { margin: 40px 0 8px; scroll-margin-top: 80px; }

.group-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.group-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  margin: 0;
  white-space: nowrap;
}
.group-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }  /* 发丝分隔线 */

/* 局域网区的在线小计数（等宽数字，和读数面板一个味道） */
.lan-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  white-space: nowrap;
}

/* 台账：不套卡片框，用发丝线逐行登记，像一本服务账本 */
.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
}

.row {
  position: relative;
  display: grid;
  grid-template-columns: 44px 36px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 12px;
  text-decoration: none;
  color: inherit;
  transition: background 0.18s ease, transform 0.18s ease;
}
.ledger li:not(:last-child) .row { border-bottom: 1px solid var(--line); }  /* 只在行之间画一条线，最后一行不画 */

/* 悬停：整行轻轻右移 + 背景浮起 + 左侧亮起一根强调色小竖条 */
.row:hover { background: var(--surface); transform: translateX(3px); }
.row:active { transform: translateX(0); }

.row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 16%;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleY(0.5);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.row:hover::before { opacity: 1; transform: scaleY(1); }

/* 滚动渐显：JS 加 .in 触发；--i 控制交错延迟，像翻账本一页页翻开 */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.reveal.in { opacity: 1; transform: none; transition-delay: 0s; }

/* 行首序号：账本味道，等宽数字 */
.row-index {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* monogram 方块：用节点名首字代替图标，比 emoji 更克制 */
.tile {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-tile);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.row:hover .tile {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-deep);
}

.row-body {
  display: flex;
  flex-direction: column;
  min-width: 0;   /* 让超长描述能乖乖收缩，不把表格挤爆 */
}

.row-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
}

.row-desc {
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.row-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.row-status.ok { color: var(--ok); }
.row-status.bad { color: var(--bad); }
.row-status.wait { color: var(--ink-3); }   /* 局域网设备"未响应"用灰色 */

.latency {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* 行尾箭头：平时藏着，悬停滑出来，指明可点击 */
.row-arrow {
  font-size: 15px;
  color: var(--accent-deep);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.row:hover .row-arrow { opacity: 1; transform: none; }

/* 离线行：整体虚化 + 状态变红，一眼识别 */
.row.offline .tile { opacity: 0.5; }
.row.offline .row-name,
.row.offline .row-desc,
.row.offline .row-index { color: var(--ink-3); }

/* ==================== 状态小圆点 ==================== */
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pending);
  flex-shrink: 0;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.dot.bad { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.dot.wait { background: var(--pending); }   /* 局域网设备未响应：灰色圆点 */

/* 在线点的呼吸灯：语义是"正在被探活盯着"，不是装饰 */
.dot-live.ok { animation: pulse 2.4s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--ok-soft); }
  50% { box-shadow: 0 0 0 7px transparent; }
}

/* ==================== 页脚 ==================== */
.footer {
  margin-top: 56px;
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}

/* ==================== 移动端折叠 ==================== */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; align-items: start; gap: 28px; padding: 48px 0 40px; }
  .container { padding: 0 18px; }
}

@media (max-width: 640px) {
  .nav { display: none; }          /* 手机上分类锚点收起来，行本身就能导航 */
  .hero-title { font-size: 1.9rem; }
  .readout-grid { grid-template-columns: 1fr 1fr; }
  .row { grid-template-columns: 34px 32px 1fr auto; gap: 10px; padding: 12px 6px; }
  .row-index, .row-desc, .latency { display: none; }  /* 手机上只留关键信息 */
}

/* ==================== 减少动效适配 ==================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-copy, .readout { animation: none; }
  .dot-live.ok { animation: none; }
  .row, .btn, .tile { transition: none; }
}