/* app.css —— 探针站 v2 样式（亮暗双主题，手机优先） */
:root { color-scheme: light dark; }
[data-theme="light"] {
  --bg:#f6f8fa; --card:#fff; --border:#e5e9f0; --rowbg:#f8fafc;
  --text:#1e293b; --muted:#64748b; --faint:#94a3b8; --track:#e8edf3;
  --accent:#2563eb; --accent-soft:#bcd3f5;
  --c1:#2563eb; --c2:#7c3aed; --c3:#0891b2; --c4:#ea580c; --c5:#059669;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
}
[data-theme="dark"] {
  --bg:#0b1220; --card:#131c2e; --border:#1e293b; --rowbg:#0f1726;
  --text:#e2e8f0; --muted:#7c8db0; --faint:#4a5c80; --track:#1c2941;
  --accent:#38bdf8; --accent-soft:#1d4a6b;
  --c1:#38bdf8; --c2:#a78bfa; --c3:#2dd4bf; --c4:#fb923c; --c5:#34d399;
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; padding:14px; transition:background .25s,color .25s; }
.wrap { max-width:860px; margin:0 auto; }
.muted { color:var(--muted); }
.faint { color:var(--faint); }
.hidden { display:none !important; }

/* 顶栏 */
.top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px; flex-wrap:wrap; }
.top h1 { font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.top .sub { font-size:11px; color:var(--muted); font-weight:400; }
.gl { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); font-weight:400; }
.tools { display:flex; align-items:center; gap:10px; }
.clock { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.tbtn { width:42px; height:22px; border-radius:11px; background:var(--track); border:0.5px solid var(--border); cursor:pointer; display:flex; align-items:center; padding:2px; }
.tbtn .knob { width:16px; height:16px; border-radius:50%; background:var(--accent); transition:transform .2s; }
[data-theme="dark"] .tbtn .knob { transform:translateX(20px); }
.lbtn { cursor:pointer; font-size:14px; opacity:.75; }
.lbtn:hover { opacity:1; }

/* 状态灯 */
.dot { width:8px; height:8px; border-radius:50%; background:var(--faint); flex-shrink:0; display:inline-block; }
.dot.ok { background:var(--ok); } .dot.warn { background:var(--warn); } .dot.bad { background:var(--bad); }

/* 卡片 */
.card { background:var(--card); border:0.5px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:12px; }
.card h3 { font-size:13px; font-weight:600; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.card h3 .side { font-size:11px; color:var(--muted); font-weight:400; display:flex; align-items:center; gap:8px; }

/* 主机四环（CPU / 内存 / 虚拟内存 / 磁盘）
 * 列数必须与环数一致：广州是五环（repeat(5)），本机不限流量已删月流量环，
 * 若仍留 5 列会空出最右一格、整排看起来偏左。四环 = 四列，铺满卡片即整体居中。 */
.rings { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.ring { text-align:center; padding:4px 2px; }
.ring svg { display:block; margin:0 auto; }
.ring .pct { font-size:13px; font-weight:600; fill:var(--text); }
.ring .lbl { font-size:11px; color:var(--muted); margin-top:2px; }
.ring .sub2 { font-size:10px; color:var(--faint); margin-top:1px; }
.hostnote { font-size:11px; color:var(--muted); margin-top:8px; line-height:1.7; }
.hostnote b { color:var(--text); }

/* 网站哨兵：行式列表（复用 .crow/.cname/.cstat，奇偶站点数都整齐） */
.badge { font-size:10px; padding:1px 6px; border-radius:5px; border:0.5px solid var(--border); color:var(--muted); }
.badge.warn { color:var(--warn); border-color:var(--warn); }
.badge.bad { color:var(--bad); border-color:var(--bad); }
.badge.ok { color:var(--ok); border-color:var(--ok); }

/* 流量窗口（同时是区间按钮：点一下切换下方曲线） */
.wins { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:10px; }
.win { background:var(--rowbg); border-radius:8px; padding:10px 12px; cursor:pointer; box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .15s,background .15s; }
.win:hover { box-shadow:inset 0 0 0 1px var(--accent-soft); }
.win.on { box-shadow:inset 0 0 0 1.5px var(--accent); background:var(--card); }
.win.on .w { color:var(--accent); font-weight:600; }
.win .w { font-size:11px; color:var(--muted); }
.win .v { font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:2px; }
.win .d { font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }

/* 行 / 列表 */
.crow { display:flex; align-items:center; gap:8px; font-size:12px; padding:7px 9px; background:var(--rowbg); border-radius:8px; margin-bottom:6px; flex-wrap:wrap; }
.cname { min-width:130px; font-weight:500; flex:1; }
.cname small { color:var(--faint); font-weight:400; margin-left:5px; }
.cstat { color:var(--muted); font-variant-numeric:tabular-nums; }
.cbtns { margin-left:auto; display:flex; gap:4px; }
.cbtn { font-size:11px; padding:3px 11px; border-radius:6px; border:0.5px solid var(--border); color:var(--muted); background:transparent; cursor:pointer; }
.cbtn.p { color:var(--accent); border-color:var(--accent-soft); }
.cbtn:hover:not(:disabled) { background:var(--rowbg); }
.cbtn:disabled { opacity:.35; cursor:not-allowed; }
.grouplabel { font-size:11px; color:var(--faint); margin:9px 0 5px; }
.grouplabel:first-child { margin-top:0; }
.toplist { max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; font-size:12px; }
.toplist .prow { display:flex; justify-content:space-between; padding:3px 9px; background:var(--rowbg); border-radius:6px; gap:8px; }
.toplist .prow span:last-child { color:var(--muted); font-variant-numeric:tabular-nums; }

/* 图表 */
.chart-tabs { display:flex; gap:5px; flex-wrap:wrap; }
.tab { font-size:11px; padding:2px 10px; border-radius:6px; border:0.5px solid var(--border); color:var(--muted); cursor:pointer; user-select:none; }
.tab.on { color:var(--accent); border-color:var(--accent-soft); background:var(--rowbg); }
.chart-tip { font-size:11px; color:var(--muted); margin-bottom:4px; font-variant-numeric:tabular-nums; }
svg.chart { display:block; width:100%; height:110px; }
.xaxis { display:flex; justify-content:space-between; font-size:10px; color:var(--faint); margin-top:3px; }

/* 操作日志 */
.opsrow { display:flex; gap:8px; font-size:11px; padding:4px 8px; border-radius:6px; color:var(--muted); font-variant-numeric:tabular-nums; }
.opsrow:nth-child(odd) { background:var(--rowbg); }
.opsrow .ok { color:var(--ok); } .opsrow .no { color:var(--bad); }

/* 暗号门 / 弹窗 */
.gate, .modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; }
.gate-box, .modal-box { background:var(--card); border-radius:14px; padding:26px 24px; width:100%; max-width:320px; text-align:center; border:0.5px solid var(--border); }
.gate-box h2, .modal-box h3 { margin-bottom:6px; font-size:16px; }
.gate-box p, .modal-box p { margin-bottom:12px; font-size:12px; }
.gate-box input, .modal-box input { width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:var(--rowbg); color:var(--text); font-size:14px; margin-bottom:10px; }
.gate-box button, .modal-box button { padding:9px 0; border-radius:8px; border:0; background:var(--accent); color:#fff; font-size:14px; cursor:pointer; }
.mrow { display:flex; gap:8px; }
.mrow button { flex:1; padding:9px 0; }
#modalCancel { background:var(--rowbg); color:var(--muted); border:0.5px solid var(--border); }

/* ===== 中等屏幕（平板 / 未最大化的 PC 窗口，721–1023px）：比手机略大一号 ===== */
@media (min-width:721px) and (max-width:1023px) {
  body { padding:18px; }
  .wrap { max-width:920px; }
  .top h1 { font-size:18px; }
  .card { padding:14px 18px; margin-bottom:13px; }
  .card h3 { font-size:14px; }
  .card h3 .side { font-size:11.5px; }
  .ring .sub2 { font-size:11px; }
  .hostnote { font-size:12px; line-height:1.8; }
  .win .w, .win .d { font-size:11.5px; }
  .win .v { font-size:19px; }
  .crow { font-size:13px; padding:8px 11px; }
  .cname small, .cstat { font-size:12px; }
  .cbtn { font-size:12px; padding:4px 12px; }
  .tab, .chart-tip { font-size:12px; }
  .xaxis { font-size:10.5px; }
  .toplist { font-size:13px; max-height:300px; }
  .opsrow { font-size:12px; padding:5px 9px; }
  .badge { font-size:10.5px; }
  /* 门禁/弹窗按钮：基线只给了垂直内边距又没写宽度，按钮会塌成"文字宽的小方块"、字还露在外面；
     这里补上撑满（PC 侧修，手机块不动） */
  .gate-box button, .modal-box button { width:100%; }
}

/* ===== PC（≥1024px）：正文整体放大一号＋放松行距与间距 =====
 * 2026-10-16 业主反馈「PC 端字体太小」：此前这个块只放大了标题与圆环，正文仍是手机号
 * 字号（说明文字 11px、行文本 12px、徽章 10px、日志 11px），在 1100px 宽的页面上显得小。
 * 这里按「正文 13px 起、行文本 13.5px、次要信息不小于 12px」重排，并同步放大内边距与间距。
 * 手机端全部规则在 ≤720px 块里，与此块不重叠，不受影响。 */
@media (min-width:1024px) {
  body { padding:26px 24px; }
  .wrap { max-width:1160px; }
  .top { margin-bottom:16px; }
  .top h1 { font-size:21px; }
  .top .sub { font-size:12.5px; }
  .gl { font-size:12.5px; }
  .clock { font-size:13px; }
  .lbtn { font-size:16px; }
  .tbtn { width:46px; height:24px; border-radius:12px; }
  .tbtn .knob { width:18px; height:18px; }
  [data-theme="dark"] .tbtn .knob { transform:translateX(24px); }

  .card { padding:18px 22px; margin-bottom:16px; border-radius:14px; }
  .card h3 { font-size:16px; margin-bottom:12px; }
  .card h3 .side { font-size:12.5px; gap:10px; }

  .rings { gap:14px; }
  .ring svg { width:104px; height:104px; }
  .ring .pct { font-size:18px; }
  .ring .lbl { font-size:14px; margin-top:4px; }
  .ring .sub2 { font-size:12.5px; }
  .hostnote { font-size:13px; line-height:1.85; margin-top:12px; }

  .wins { gap:14px; margin-bottom:14px; }
  .win { padding:13px 16px; border-radius:10px; }
  .win .w { font-size:12.5px; }
  .win .v { font-size:22px; margin-top:4px; }
  .win .d { font-size:12px; margin-top:3px; }

  .crow { font-size:13.5px; padding:10px 13px; margin-bottom:8px; gap:10px; }
  .cname small { font-size:12px; margin-left:7px; }
  .cstat { font-size:12.5px; }
  .cbtn { font-size:12.5px; padding:5px 14px; border-radius:7px; }
  .grouplabel { font-size:12.5px; margin:12px 0 7px; }
  .badge { font-size:11.5px; padding:2px 8px; border-radius:6px; }

  .toplist { font-size:13.5px; max-height:360px; gap:5px; }
  .toplist .prow { padding:5px 12px; border-radius:7px; }

  .tab { font-size:12.5px; padding:4px 13px; border-radius:7px; }
  .chart-tip { font-size:12.5px; margin-bottom:6px; }
  .xaxis { font-size:11.5px; margin-top:5px; }

  .opsrow { font-size:12.5px; padding:6px 11px; gap:10px; border-radius:7px; }

  .gate-box, .modal-box { padding:30px 28px; max-width:360px; border-radius:16px; }
  .gate-box h2, .modal-box h3 { font-size:18px; }
  .gate-box p, .modal-box p { font-size:13px; }
  .gate-box input, .modal-box input { font-size:15px; padding:11px 13px; }
  .gate-box button, .modal-box button { width:100%; font-size:15px; padding:11px 0; }
}

/* ===== 手机端（≤720px）：只在这个范围内生效，PC/平板样式完全不动 ===== */
@media (max-width:720px) {
  body { padding:10px; -webkit-tap-highlight-color:transparent; }
  .top { margin-bottom:10px; }
  .top h1 { font-size:15px; gap:6px; }
  .top .sub { font-size:10px; }
  .tools { gap:8px; }
  .clock { font-size:11px; }

  .card { padding:11px 12px; margin-bottom:10px; border-radius:10px; }
  .card h3 { font-size:13px; flex-wrap:wrap; row-gap:6px; }
  .card h3 .side { width:100%; justify-content:flex-start; flex-wrap:wrap; }

  /* 主机环（2026-10-25 修 / 本机四环）：固定 62px 的 SVG 会撑出网格最小宽，
     环多时在窄屏把最右侧顶出卡片。改为按列宽自适应（SVG 带 viewBox 等比缩放）
     ＋收紧间距；只动手机端，PC 不变。列数沿用基础规则的 4 列。 */
  .rings { gap:4px; }
  .ring { padding:4px 1px; }
  .ring svg { width:100%; max-width:62px; height:auto; }
  .ring .lbl { font-size:11px; margin-top:3px; }
  .ring .sub2 { font-size:9px; }
  .hostnote { font-size:10.5px; line-height:1.7; }

  /* 流量三窗口：窄格里 ↓/↑ 各占一行，不再挤成一团 */
  .wins { gap:6px; margin-bottom:8px; }
  .win { padding:8px 9px; border-radius:8px; }
  .win .w { font-size:10px; }
  .win .v { font-size:12px; display:flex; flex-direction:column; gap:1px; font-variant-numeric:tabular-nums; }
  .win .d { font-size:10px; margin-top:2px; }

  /* 行式列表（容器/哨兵）：名字可断行、状态小字放名字下面、按钮独占一行好按 */
  .crow { padding:7px 8px; gap:5px 6px; }
  .cname { min-width:0; flex:1 1 55%; font-size:12px; overflow-wrap:anywhere; }
  .cname small { display:block; margin-left:0; font-size:10px; }
  .cstat { font-size:10px; flex:0 0 auto; margin-left:auto; text-align:right; }
  .cbtns { width:100%; margin-left:0; justify-content:flex-end; }
  .cbtn { font-size:11px; padding:6px 13px; }   /* 手指好点的触控高度 */

  .grouplabel { font-size:10.5px; margin:8px 0 4px; }

  /* 图表与标签 */
  svg.chart { height:96px; }
  .chart-tabs { gap:4px; }
  .tab { padding:5px 11px; font-size:11px; }
  .chart-tip { font-size:10.5px; }
  .xaxis { font-size:9px; }

  .toplist { max-height:230px; }
  .toplist .prow { font-size:11px; padding:3px 8px; gap:6px; }

  .opsrow { flex-wrap:wrap; gap:3px 7px; font-size:10.5px; padding:5px 8px; }

  .badge { font-size:9.5px; padding:2px 6px; }

  /* 暗号门/弹窗：输入框 16px 防 iOS 聚焦自动放大；按钮补 width:100% 撑满
     （基线只给垂直内边距、没写宽度 → 按钮塌成"文字宽的小方块"，字还露在外面；
     弹窗那对按钮在 .mrow 里靠 flex:1 分宽度，加 width 不影响它们） */
  .gate-box, .modal-box { padding:22px 18px; }
  .gate-box input, .modal-box input { font-size:16px; padding:11px 12px; }
  .gate-box button, .modal-box button { width:100%; padding:11px 0; font-size:15px; }
}