/* =====================================================================
   vps.232319.xyz · 监控站设计 token（v0.1 设计稿）
   ── 家族共性（≈20%，与 jiaoyi / yong / shop 同值）：中性灰阶、Geist 字体、
      12px 基准圆角 + 20/16 卡片圆角、品牌方块标、ok/warn/bad 语义色、
      150–360ms 指数 ease-out、tabular-nums、页头「左是什么 / 右主控件」。
   ── 本站独有（≈80%）：深色优先、等宽大写字距眉题、配额条、分段堆叠条、
      24h 心跳条、规格胶囊、续期倒计时卡、点阵背景、键值清单卡、图表色。
   ===================================================================== */
@font-face { font-family: "Geist VPS"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono VPS"; src: url("../fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* 仅设计稿截图用：沙箱无中文字体。生产环境走系统中文字体栈，不打包。 */

:root {
  color-scheme: dark;
  /* —— 中性层：深色（= yong 深色同值，家族共性） —— */
  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #1c1c1e;
  --surface-3: #262628;
  --border: #262628;
  --border-strong: #3a3a3d;
  --ink: #ededed;
  --ink-2: #a1a1a6;
  --ink-3: #6e6e73;
  --on-ink: #111111;
  /* —— 语义色（家族同值） —— */
  --ok: #91c9a6;  --ok-soft: #16221b;
  --warn: #d6b67d; --warn-soft: #27221a;
  --bad: #ff6961;  --bad-soft: #2c1412;
  /* —— 本站：状态点（比文字色更亮，点小需要更高饱和） —— */
  --dot-live: #3ddc84;   /* 在线 */
  --dot-pause: #f5b14c;  /* 已暂停 / 冷却（InstaBox 闲置暂停、vyce 冷却） */
  --dot-down: #ff6961;   /* 离线 */
  --dot-idle: #6e6e73;   /* 无数据 */
  /* —— 本站：图表色（取自 yong 账号色相，家族呼应） —— */
  --c-cpu: #5ccfcb;      /* = yong 宇湖青（深色） */
  --c-mem: #9aa7ff;
  --c-disk: #d6b67d;
  --c-up: #f2a27a;       /* = yong 杏橙（深色） */
  --c-down: #5ccfcb;
  --c-grid: #1f1f21;
  /* —— 配额条阈值色 —— */
  --q-low: #ededed;      /* <70% 用墨色，安静 */
  --q-mid: #f5b14c;      /* 70–90% */
  --q-high: #ef5350;     /* ≥90%（同 InstaBox 5/5 红条） */
  --track: #262628;
  /* —— 分段堆叠条灰阶（InstaBox STORAGE BY MACHINE） —— */
  --st-1: #ededed; --st-2: #bdbdc2; --st-3: #8e8e93; --st-4: #6e6e73; --st-5: #4a4a4e;
  /* —— 字体 —— */
  --font: "Geist VPS", -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "HarmonyOS Sans SC", "MiSans",
  /* —— 字号（家族阶梯 + 本站 11px 眉题） —— */
  --t-eyebrow: 11px; --t-xs: 12px; --t-sm: 13px; --t-base: 14px; --t-md: 16px; --t-lg: 18px;
  --t-xl: 20px; --t-2xl: 24px; --t-3xl: 32px; --t-4xl: 40px;
  --track-eyebrow: .12em;  /* 等宽大写字距（vyce/InstaBox 风格） */
  --track-tight: -.025em;
  /* —— 间距（4 的倍数，家族同值） —— */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  /* —— 圆角（家族同值） —— */
  --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-card: 20px; --r-pill: 999px;
  /* —— 动效（家族同值） —— */
  --ease: cubic-bezier(.16, 1, .3, 1); --d-fast: 150ms; --d: 220ms; --d-slow: 360ms;
  --gutter: 32px;
  --dotgrid: radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 1.2px) 0 0 / 22px 22px;
}
/* 浅色：系统切换（家族决策：亮暗随系统），单独设计不机械反转 */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fafafa; --surface: #ffffff; --surface-2: #f3f3f5; --surface-3: #ebebee;
  --border: #e5e5e8; --border-strong: #d6d6db;
  --ink: #1d1d1f; --ink-2: #6e6e73; --ink-3: #8e8e93; --on-ink: #ffffff;
  --ok: #1e7a45; --ok-soft: #edf7f1; --warn: #8a5a14; --warn-soft: #fbf4e8; --bad: #b42318; --bad-soft: #fdeceb;
  --dot-live: #1fa463; --dot-pause: #d48a12; --dot-down: #d92d20; --dot-idle: #aeaeb2;
  --c-cpu: #0b6e78; --c-mem: #4a5bd4; --c-disk: #a15c07; --c-up: #b4491e; --c-down: #0b6e78; --c-grid: #f0f0f2;
  --q-low: #1d1d1f; --q-mid: #d48a12; --q-high: #d92d20; --track: #ebebee;
  --st-1: #1d1d1f; --st-2: #48484c; --st-3: #6e6e73; --st-4: #9a9aa0; --st-5: #c7c7cc;
  --dotgrid: radial-gradient(circle at 1px 1px, rgba(0,0,0,.07) 1px, transparent 1.2px) 0 0 / 22px 22px;
}
@media (max-width: 760px) { :root { --gutter: 16px; --r-card: 16px; } }
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.55 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.topbar .wrap{height:60px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand__mark{width:32px;height:32px;border-radius:var(--r-sm);background:var(--ink);color:var(--on-ink);display:grid;place-items:center;font-weight:700;font-size:15px}
.brand__name{font-weight:600;font-size:16px;letter-spacing:var(--track-tight);line-height:1.15}
.brand__sub{display:block;font:500 11px/1.3 var(--mono);letter-spacing:var(--track-eyebrow);color:var(--ink-2);text-transform:uppercase}
.topbar__sp{flex:1}
.live{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-pill);font:500 11px/1 var(--mono);letter-spacing:var(--track-eyebrow);color:var(--ink-2)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--dot-live);box-shadow:0 0 0 3px color-mix(in srgb,var(--dot-live) 22%,transparent)}
.iconbtn{width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;color:var(--ink-2);border:1px solid transparent}
.iconbtn:hover{background:var(--surface-2)}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 页头（家族：左是什么 / 右主控件） ---------- */
.hero{background:var(--dotgrid);border-bottom:1px solid var(--border)}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;padding:32px 0 24px}
.pagehead h1{font-size:var(--t-3xl);line-height:1.1;font-weight:600;letter-spacing:var(--track-tight)}
.pagehead p{color:var(--ink-2);margin-top:6px}
.seg{display:inline-flex;padding:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r)}
.seg button{height:36px;min-width:44px;padding:0 14px;border-radius:9px;color:var(--ink-2);font:500 13px/1 var(--font)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--border-strong)}
.seg--mono button{font:500 12px/1 var(--mono);letter-spacing:.06em}

/* ---------- 眉题（本站签名：等宽大写字距） ---------- */
.eyebrow{font:500 var(--t-eyebrow)/1.4 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink-2)}
.sec{margin-top:32px}
.sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.sec__meta{font-size:12px;color:var(--ink-3)}

/* ---------- 卡片 ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:20px}
.card--flat{background:transparent}

/* ---------- 配额磁贴（InstaBox USAGE 卡） ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{padding:18px 20px}
.tile .eyebrow{display:flex;justify-content:space-between;align-items:center}
.tile__val{margin-top:10px;font:500 32px/1 var(--mono);letter-spacing:-.02em}
.tile__val small{font-size:18px;color:var(--ink-2);margin-left:4px}
.tile__note{margin-top:10px;font-size:12px;color:var(--ink-2)}
.qbar{height:6px;border-radius:var(--r-pill);background:var(--track);overflow:hidden;margin-top:14px}
.qbar>i{display:block;height:100%;border-radius:inherit;background:var(--q-low)}
.qbar>i.mid{background:var(--q-mid)}.qbar>i.high{background:var(--q-high)}.qbar>i.ok{background:var(--dot-live)}

/* ---------- 续期倒计时卡（vyce 卡） ---------- */
.renew{display:grid;gap:14px}
.renew__top{display:flex;gap:12px;align-items:flex-start}
.osmark{flex:none;width:40px;height:40px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center}
.renew__name{font-weight:600;font-size:16px;display:flex;align-items:center;gap:8px}
.renew__sub{font-size:13px;color:var(--ink-2)}
.renew__big{font:600 24px/1.1 var(--font);letter-spacing:var(--track-tight)}
.renew__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.btn{height:40px;padding:0 16px;border-radius:var(--r);font:500 13px/1 var(--font);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn--ghost{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--border)}
.btn--ink{background:var(--ink);color:var(--on-ink)}
.pbar{height:6px;border-radius:var(--r-pill);background:var(--track);overflow:hidden}
.pbar>i{display:block;height:100%;background:var(--ink);border-radius:inherit}

/* ---------- 状态点 ---------- */
.dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--dot-live);display:inline-block}
.dot.pause{background:transparent;box-shadow:inset 0 0 0 2px var(--dot-pause)}
.dot.down{background:var(--dot-down)}
.state{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:var(--r-xs)}
.state.ok{color:var(--ok);background:var(--ok-soft)}
.state.pause{color:var(--warn);background:var(--warn-soft)}
.state.down{color:var(--bad);background:var(--bad-soft)}

/* ---------- 规格胶囊（vyce 2GB / 1vCore 胶囊） ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{height:26px;padding:0 10px;border:1px solid var(--border-strong);border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--mono);color:var(--ink);white-space:nowrap}
.chip--muted{color:var(--ink-2);border-color:var(--border)}
.flag{width:14px;height:10px;border-radius:2px;display:inline-block}

/* ---------- 机器卡 ---------- */
.machines{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:12px}
.machines>*,.m>*{min-width:0}
.m{display:grid;gap:14px;padding:18px}
.m__head{display:flex;gap:12px;align-items:flex-start}
.m__title{min-width:0;flex:1}
.m__name{font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m__sub{font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m__up{font:500 12px/1.3 var(--mono);color:var(--ink-2);text-align:right;white-space:nowrap}
.meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.meter__lab{display:flex;justify-content:space-between;align-items:baseline;gap:4px}
.meter__lab b{font:500 13px/1 var(--mono)}
.meter .qbar{margin-top:8px;height:4px}
.m__net{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--mono);color:var(--ink-2)}
.m__net span{white-space:nowrap}
.m__net .up{color:var(--c-up)}.m__net .dn{color:var(--c-down)}
.spark{flex:1;min-width:40px;height:28px}
.hb{display:grid;grid-template-columns:repeat(48,1fr);gap:2px;height:18px}
.hb i{border-radius:2px;background:var(--dot-live);opacity:.85}
.hb i.p{background:var(--dot-pause)}.hb i.d{background:var(--dot-down)}.hb i.n{background:var(--surface-3)}
.hb__legend{display:flex;justify-content:space-between;gap:8px;font:500 10px/1 var(--mono);color:var(--ink-3);letter-spacing:.06em;margin-top:6px}
.m--paused{opacity:1}
.m--paused .meters,.m--paused .m__net{opacity:.45}

/* ---------- 分段堆叠条（InstaBox STORAGE BY MACHINE） ---------- */
.stack{display:flex;gap:3px;height:10px;border-radius:var(--r-pill);overflow:hidden}
.stack i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:13px}
.legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.legend em{font:500 12px/1 var(--mono);font-style:normal;color:var(--ink-2)}
.sq{width:8px;height:8px;border-radius:2px;display:inline-block}

/* ---------- 事件流 ---------- */
.feed{display:grid}
.feed__it{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--border)}
.feed__it:first-child{border-top:0;padding-top:0}
.feed__t{font-size:13px}
.feed__t small{display:block;color:var(--ink-2);font-size:12px}
.feed__w{font:500 11px/1 var(--mono);color:var(--ink-3);white-space:nowrap}

/* ---------- 桌面表格视图 ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.table{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.tr{display:grid;grid-template-columns:minmax(200px,1.5fr) 92px repeat(3,minmax(84px,.8fr)) 128px 64px minmax(150px,1.1fr);gap:16px;align-items:center;padding:14px 20px;border-top:1px solid var(--border)}
.tr--head{border-top:0;background:var(--surface-2);padding-top:12px;padding-bottom:12px}
.tr--head span{font:500 11px/1 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.tcell-name{display:flex;gap:10px;align-items:center;min-width:0}
.tcell-name>div{min-width:0}
.mini b{font:500 13px/1 var(--mono)}
.mini .qbar{margin-top:7px;height:4px}
.rail{display:grid;gap:12px}

/* ---------- 详情页 ---------- */
.dl{display:grid;grid-template-columns:auto 1fr;gap:14px 24px;align-items:baseline}
.dl dt{font:500 11px/1.4 var(--mono);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.dl dd{margin:0;font-size:14px;min-width:0;overflow-wrap:anywhere}
.chart{display:grid;gap:10px}
.chart__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.chart__val{font:500 20px/1 var(--mono)}
.chart__val small{font-size:12px;color:var(--ink-2);margin-left:4px}
.chart svg{display:block;width:100%;height:120px}
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kv{display:flex;gap:14px;flex-wrap:wrap;font:500 12px/1 var(--mono);color:var(--ink-2)}
.kv i{display:inline-block;width:10px;height:2px;vertical-align:middle;margin-right:5px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:13px;height:44px}

.foot{margin:48px 0 32px;padding-top:16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}

@media (max-width:1100px){.layout{grid-template-columns:1fr}.tr{grid-template-columns:minmax(180px,1.5fr) 92px repeat(3,minmax(70px,.8fr)) 120px}.tr>.h-lg{display:none}}
@media (max-width:760px){
  .topbar .wrap{height:56px}
  .pagehead{padding:24px 0 20px}
  .pagehead h1{font-size:28px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{padding:16px}
  .tile__val{font-size:26px}
  .machines{grid-template-columns:1fr}
  .charts{grid-template-columns:1fr}
  .sec{margin-top:28px}
  .live .t{display:none}
}

/* ---- production additions (vps232319) ---- */
.live.warn i{background:var(--dot-pause);box-shadow:0 0 0 3px color-mix(in srgb,var(--dot-pause) 22%,transparent)}
.live.down i{background:var(--dot-down);box-shadow:0 0 0 3px color-mix(in srgb,var(--dot-down) 22%,transparent)}
.seg button:focus-visible,.iconbtn:focus-visible,a:focus-visible{outline:2px solid var(--c-cpu);outline-offset:2px}
.chart__empty{height:120px;display:grid;place-items:center;color:var(--ink-3);font-size:12px}
.hb i.n{background:var(--surface-3)}
.btn--ghost[aria-disabled="true"]{opacity:.75;cursor:default}
.m__up .state{margin-left:0}
.tick{animation:tickfade var(--d-fast) var(--ease)}
@keyframes tickfade{from{opacity:.35}to{opacity:1}}
.loadwrap{display:grid;place-items:center;padding:64px 0;color:var(--ink-3)}
.dot.unk{background:var(--ink-3);box-shadow:none}
.state.unk{color:var(--ink-2);background:var(--surface-3)}
.live.unk{color:var(--ink-2)}
.live.unk i{background:var(--ink-3);box-shadow:none}