:root{
  --radius:20px;
  --pad:20px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:200ms;
  --fs-hero:clamp(2.2rem,1.5rem + 2.1vw,3.35rem);
  --fs-flow:clamp(1.6rem,1.1rem + 1.4vw,2.1rem);
  --chart-empty-h:64px;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --page-bg:#07090d;
  --page-gradient:linear-gradient(180deg,rgb(255 255 255 / 4%),transparent 42%);
  --selection-bg:rgba(74,222,128,.28);
  --selection-fg:#fff;
  --focus-ring:rgba(125,180,240,.9);
  --focus-ring-soft:rgba(125,180,240,.16);

  --panel-sheen-1:rgb(255 255 255 / 5.5%);
  --panel-sheen-2:rgb(255 255 255 / 1.8%);
  --panel-fill:rgba(9,13,19,.06);
  --panel-blur:blur(26px) saturate(165%);
  --topbar-bg:rgba(7,10,15,.55);
  --topbar-line:rgb(255 255 255 / 6%);

  --surface-1:rgb(255 255 255 / 3%);
  --surface-1-hover:rgb(255 255 255 / 5%);
  --surface-2:rgb(255 255 255 / 3.5%);
  --surface-2-hover:rgb(255 255 255 / 6.5%);
  --surface-inset:rgba(0,0,0,.16);
  --hover:rgb(255 255 255 / 5%);
  --active-bg:rgb(255 255 255 / 12%);

  --input-bg:rgba(0,0,0,.28);
  --input-bg-focus:rgba(0,0,0,.34);
  --input-border:rgb(255 255 255 / 12%);
  --input-border-hover:rgb(255 255 255 / 18%);
  --input-border-focus:rgba(125,180,240,.65);

  --button-bg:rgb(255 255 255 / 5.5%);
  --button-bg-hover:rgb(255 255 255 / 9%);
  --button-border:rgb(255 255 255 / 12%);
  --button-border-hover:rgb(255 255 255 / 18%);
  --button-fg:#f4f8fc;
  --button-primary-from:#5eead4;
  --button-primary-to:#34d399;
  --button-primary-hover-from:#6ff0db;
  --button-primary-hover-to:#3fdaa6;
  --button-primary-fg:#04150f;
  --button-primary-border:rgb(255 255 255 / 18%);
  --danger-button-fg:#e8b8b8;
  --danger-button-border:rgba(241,139,139,.20);
  --danger-button-hover-bg:rgba(241,139,139,.08);
  --danger-button-hover-border:rgba(241,139,139,.32);

  --border:rgb(255 255 255 / 10%);
  --border-strong:rgb(255 255 255 / 17%);
  --border-soft:rgb(255 255 255 / 6%);
  --border-hi:rgb(255 255 255 / 40%);
  --border-lo:rgb(255 255 255 / 6%);
  --divider:rgb(255 255 255 / 7%);
  --inner-hi:rgb(255 255 255 / 12%);
  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 18px 44px -18px rgba(0,0,0,.75);

  --text-1:#f4f8fc;
  --text-2:#c8d4df;
  --text-3:#b4c6d6;
  --text-head:#dbe5ee;

  --success:#4ade80;
  --success-soft:rgba(74,222,128,.07);
  --success-line:rgba(74,222,128,.24);
  --success-ring:rgba(74,222,128,.13);
  --warning:#e6b566;
  --warning-soft:rgba(230,181,102,.07);
  --warning-line:rgba(230,181,102,.28);
  --danger:#f18b8b;
  --danger-soft:rgba(241,139,139,.07);
  --danger-line:rgba(241,139,139,.24);
  --danger-ring:rgba(241,139,139,.13);
  --info:#7db4f0;
  --accent:#4ade80;
  --accent-2:#2dd4bf;
  --mark-fg:#8ef0b8;
  --mark-bg-1:rgba(74,222,128,.20);
  --mark-bg-2:rgba(125,180,240,.10);

  --fog-blue:rgba(52,116,214,.40);
  --fog-blue-2:rgba(52,116,214,.10);
  --fog-teal:rgba(38,190,164,.38);
  --fog-warm:rgba(255,184,107,.10);
  --fog-ice:rgba(96,165,250,.26);

  --chart-grid:rgb(255 255 255 / 5%);
  --chart-empty:rgb(255 255 255 / 16%);
  --chart-area-a:.22;
  --chart-cpu:#4ade80;
  --chart-mem:#7db4f0;
  --chart-down:#7db4f0;
  --chart-up:#e6b566;

  --bar-track:rgb(255 255 255 / 8%);
  --bar-inset:inset 0 1px 1px rgba(0,0,0,.25);

  --dot-idle:#5a6876;
  --dot-idle-weak:#46525e;
  --scroll-track:transparent;
  --scroll-thumb:rgb(255 255 255 / 18%);
}

html[data-theme="light"]{
  color-scheme:light;
  --page-bg:#e6edf6;
  --page-gradient:linear-gradient(180deg,rgb(255 255 255 / 4%),transparent 42%);
  --selection-bg:rgba(37,99,235,.18);
  --selection-fg:#0f172a;
  --focus-ring:rgba(37,99,235,.9);
  --focus-ring-soft:rgba(37,99,235,.16);

  --panel-sheen-1:rgba(255,255,255,.16);
  --panel-sheen-2:rgba(255,255,255,.02);
  --panel-fill:rgba(255,255,255,.56);
  --panel-blur:blur(26px) saturate(180%);
  --topbar-bg:rgba(255,255,255,.62);
  --topbar-line:rgba(15,23,42,.10);

  --surface-1:rgba(15,23,42,.035);
  --surface-1-hover:rgba(15,23,42,.055);
  --surface-2:rgba(15,23,42,.045);
  --surface-2-hover:rgba(15,23,42,.075);
  --surface-inset:rgba(15,23,42,.035);
  --hover:rgba(15,23,42,.05);
  --active-bg:rgba(15,23,42,.10);

  --input-bg:rgba(255,255,255,.62);
  --input-bg-focus:rgba(255,255,255,.92);
  --input-border:rgba(15,23,42,.12);
  --input-border-hover:rgba(15,23,42,.20);
  --input-border-focus:rgba(37,99,235,.65);

  --button-bg:rgba(255,255,255,.62);
  --button-bg-hover:rgba(255,255,255,.92);
  --button-border:rgba(15,23,42,.12);
  --button-border-hover:rgba(15,23,42,.20);
  --button-fg:#0f172a;
  --button-primary-from:#047857;
  --button-primary-to:#065f46;
  --button-primary-hover-from:#065f46;
  --button-primary-hover-to:#064e3b;
  --button-primary-fg:#ffffff;
  --button-primary-border:rgba(255,255,255,.5);
  --danger-button-fg:#b91c1c;
  --danger-button-border:rgba(185,28,28,.22);
  --danger-button-hover-bg:rgba(185,28,28,.08);
  --danger-button-hover-border:rgba(185,28,28,.34);

  --border:rgba(15,23,42,.10);
  --border-strong:rgba(15,23,42,.16);
  --border-soft:rgba(15,23,42,.07);
  --border-hi:rgba(255,255,255,.9);
  --border-lo:rgba(15,23,42,.10);
  --divider:rgba(15,23,42,.08);
  --inner-hi:rgba(255,255,255,.9);
  --shadow-1:0 1px 2px rgba(16,24,40,.06);
  --shadow-2:0 12px 28px -14px rgba(16,24,40,.22);

  --text-1:#0f172a;
  --text-2:#3d4d61;
  --text-3:#44546a;
  --text-head:#0f172a;

  --success:#047857;
  --success-soft:rgba(4,120,87,.08);
  --success-line:rgba(4,120,87,.22);
  --success-ring:rgba(4,120,87,.14);
  --warning:#a34a08;
  --warning-soft:rgba(163,74,8,.08);
  --warning-line:rgba(163,74,8,.24);
  --danger:#b91c1c;
  --danger-soft:rgba(185,28,28,.07);
  --danger-line:rgba(185,28,28,.22);
  --danger-ring:rgba(185,28,28,.14);
  --info:#1d4ed8;
  --accent:#059669;
  --accent-2:#10b981;
  --mark-fg:#047857;
  --mark-bg-1:rgba(4,120,87,.10);
  --mark-bg-2:rgba(29,78,216,.06);

  --fog-blue:rgba(96,165,250,.16);
  --fog-blue-2:rgba(96,165,250,.04);
  --fog-teal:rgba(45,212,191,.14);
  --fog-warm:rgba(251,191,120,.12);
  --fog-ice:rgba(147,197,253,.15);

  --chart-grid:rgba(15,23,42,.10);
  --chart-empty:rgba(15,23,42,.20);
  --chart-area-a:.16;
  --chart-cpu:#047857;
  --chart-mem:#1d4ed8;
  --chart-down:#1d4ed8;
  --chart-up:#a34a08;

  --bar-track:rgba(15,23,42,.08);
  --bar-inset:inset 0 1px 1px rgba(15,23,42,.06);

  --dot-idle:#7c8b9c;
  --dot-idle-weak:#b8c4d1;
  --scroll-track:transparent;
  --scroll-thumb:rgba(15,23,42,.20);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{
  background:var(--page-bg);
  scrollbar-color:var(--scroll-thumb) var(--scroll-track);
  scrollbar-width:thin;
}
body{
  margin:0;
  min-height:100vh;
  background-color:var(--page-bg);
  background-image:var(--page-gradient);
  color:var(--text-1);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
::selection{background:var(--selection-bg);color:var(--selection-fg)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--scroll-track)}
::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);border-radius:999px;
  border:2px solid transparent;background-clip:content-box;
}
:where(html,body,.glass,.topbar,.boot,.chip,.tag,.tile,.ib,.chart-block,.bar,input,.btn,.icon-btn,.state,.lite,.foot,.card-foot,.quota-foot,.legend,.quota-head,.meter-head,.group-head,.ib-meta,.ib-amount,.mark,h1,h2,h3,p,span,b,small,strong,label,em,.sw){
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}

/* ---------- 光雾 ---------- */
.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%}
.orb-a{
  width:76vw;height:76vw;max-width:1040px;max-height:1040px;left:-24vw;top:-32vh;
  background:radial-gradient(circle at 44% 44%,var(--fog-blue),var(--fog-blue-2) 42%,transparent 72%);
  transform:translate3d(0,calc(var(--sy,0px) * .05),0);
}
.orb-b{
  width:62vw;height:62vw;max-width:900px;max-height:900px;right:-20vw;top:4vh;
  background:radial-gradient(circle,var(--fog-teal),transparent 70%);
  transform:translate3d(0,calc(var(--sy,0px) * -.04),0);
}
.orb-c{
  width:62vw;height:62vw;max-width:880px;max-height:880px;left:26vw;top:62vh;
  background:radial-gradient(circle,var(--fog-warm),transparent 74%);
  transform:translate3d(0,calc(var(--sy,0px) * .03),0);
}
.orb-d{
  width:70vw;height:70vw;max-width:960px;max-height:960px;left:12vw;top:-24vh;
  background:radial-gradient(circle,var(--fog-ice),transparent 66%);
  transform:translate3d(0,calc(var(--sy,0px) * .02),0);
}

/* ---------- 玻璃 ---------- */
.glass{
  position:relative;
  border-radius:var(--radius);
  background:
    linear-gradient(160deg,var(--panel-sheen-1),var(--panel-sheen-2)),
    var(--panel-fill);
  -webkit-backdrop-filter:var(--panel-blur);
  backdrop-filter:var(--panel-blur);
  box-shadow:
    var(--shadow-1),
    var(--shadow-2),
    inset 0 1px 0 var(--inner-hi);
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,var(--border-hi),var(--border-lo));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .glass::before{display:none}
  .glass{border:1px solid var(--border)}
}

/* ---------- 启动 / 登录 ---------- */
.boot{
  position:fixed;inset:0;z-index:6;display:grid;place-content:center;justify-items:center;gap:14px;
  color:var(--text-3);font-size:12.5px;
}
.boot p{margin:0}
.boot-dot{
  width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 5px var(--success-ring);
  animation:pulse 1.5s ease-in-out infinite;
}
.gate{
  position:relative;z-index:2;min-height:100vh;min-height:100svh;display:grid;place-items:center;
  padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
}
@media(max-height:540px){
  .gate{place-items:start center;padding-top:calc(20px + env(safe-area-inset-top))}
}
.login{width:100%;max-width:380px;padding:30px 28px 26px;display:flex;flex-direction:column;gap:15px}
.mark{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--mark-fg);
  background:linear-gradient(150deg,var(--mark-bg-1),var(--mark-bg-2));
  border:1px solid var(--border);
}
.mark svg{width:22px;height:22px}
.login-head h1{margin:0;font-size:21px;font-weight:600;letter-spacing:-.01em}
.login-head p{margin:6px 0 0;font-size:12px;color:var(--text-3);line-height:1.55}
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-2)}
.field span{padding-left:1px}
input{
  width:100%;height:44px;padding:0 13px;border-radius:11px;
  border:1px solid var(--input-border);
  background:var(--input-bg);color:var(--text-1);
  font:inherit;font-size:16px;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
input::placeholder{color:var(--text-3)}
input:hover{border-color:var(--input-border-hover)}
input:focus-visible{
  outline:none;border-color:var(--input-border-focus);
  box-shadow:0 0 0 3px var(--focus-ring-soft);
  background:var(--input-bg-focus);
}
.wide-btn{width:100%;margin-top:2px}
.form-msg{min-height:19px;margin:0;font-size:12px;line-height:1.5;color:var(--danger)}
.form-msg.ok{color:var(--text-3)}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:calc(11px + env(safe-area-inset-top)) clamp(14px,3vw,28px) 11px;
  background:var(--topbar-bg);
  -webkit-backdrop-filter:var(--panel-blur);
  backdrop-filter:var(--panel-blur);
  border-bottom:1px solid var(--topbar-line);
  box-shadow:inset 0 1px 0 var(--inner-hi);
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-text{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.brand-text strong{font-size:15px;font-weight:600;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip{font-size:12px;line-height:1.4;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--dot-idle);flex:0 0 auto}
.live-dot.ok{background:var(--success);box-shadow:0 0 0 4px var(--success-ring);animation:pulse 3.2s ease-in-out infinite}
.live-dot.bad{background:var(--danger);box-shadow:0 0 0 4px var(--danger-ring)}
.chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface-2);
  font-size:12px;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.chip:empty{display:none}
.chip.ok{color:var(--success);border-color:var(--success-line);background:var(--success-soft)}
.chip.ok::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.chip.bad{color:var(--danger);border-color:var(--danger-line);background:var(--danger-soft)}
.chip.bad::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.chip.quiet{color:var(--text-3);background:transparent}
.top-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.icon-btn{
  width:36px;height:36px;display:grid;place-items:center;border-radius:11px;
  border:1px solid transparent;background:transparent;color:var(--text-2);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.icon-btn:hover{background:var(--hover);border-color:var(--border);color:var(--text-1)}
.icon-btn:active{background:var(--active-bg)}
.icon-btn svg{width:17px;height:17px}
.icon-btn.spin svg{animation:spin .65s var(--ease)}
.theme-btn .ti{display:none}
.theme-btn[data-mode="auto"] .ti-auto{display:block}
.theme-btn[data-mode="light"] .ti-light{display:block}
.theme-btn[data-mode="dark"] .ti-dark{display:block}
.gate-theme{
  position:fixed;z-index:4;top:calc(14px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));
  width:44px;height:44px;background:var(--surface-2);border-color:var(--border);color:var(--text-2);
}
.gate-theme:hover{background:var(--surface-2-hover);border-color:var(--border-strong);color:var(--text-1)}

/* ---------- 布局 ---------- */
.layout{
  position:relative;z-index:1;
  max-width:1280px;margin:0 auto;
  padding:16px clamp(14px,3vw,28px) 0;
  display:grid;grid-template-columns:1fr;gap:14px;align-items:stretch;
}
.card{padding:var(--pad);display:flex;flex-direction:column;min-width:0}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;min-height:24px}
.eyebrow{margin:0;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--text-head);white-space:nowrap}
.card-sub{margin:2px 0 0;font-size:12px;line-height:1.4;color:var(--text-3)}
.head-title{display:flex;align-items:baseline;gap:8px;min-width:0}
.head-title .card-sub{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- 资源 ---------- */
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:0 0 6px}
.hero-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);letter-spacing:.02em;margin-bottom:4px}
.big-num{display:flex;align-items:baseline;gap:2px;line-height:1}
.big-num b{font-size:var(--fs-hero);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.big-num .unit{font-size:15px;color:var(--text-3);font-weight:500;margin-left:0}
.hero-side{display:flex;gap:18px;padding-bottom:3px;text-align:right}
.mini{display:flex;flex-direction:column;gap:1px}
.mini span{font-size:12px;color:var(--text-3);line-height:1.4}
.mini b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.4}
.chart-block{
  position:relative;margin-top:10px;padding:8px 10px 4px;border-radius:14px;display:flex;flex-direction:column;
  background:var(--surface-inset);border:1px solid var(--border-soft);
}
.chart-top{display:flex;align-items:center;justify-content:space-between;gap:10px;transition:opacity var(--dur) var(--ease)}
.legend{display:flex;align-items:center;gap:12px;font-size:12px;line-height:1.4;color:var(--text-3)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.chart-hint{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.sw{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto}
.sw.cpu{background:var(--chart-cpu)}
.sw.mem,.sw.down{background:var(--info)}
.sw.up{background:var(--chart-up)}
.spark{display:block;width:100%;height:72px;margin-top:4px;transition:height var(--dur) var(--ease)}
.net .spark{height:120px}
.chart-empty{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.chart-block.empty{height:var(--chart-empty-h);flex:0 0 auto;justify-content:center}
.chart-block.empty .chart-top{opacity:0}
.chart-block.empty .spark{height:26px}
.chart-block:not(.empty) .chart-empty{display:none}
.meters{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.meter-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.meter-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px;font-size:12px;color:var(--text-3)}
.mv{color:var(--text-1);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-size:13px}
.mv b{font-weight:600}
.mv .u{font-size:12px;color:var(--text-3);font-weight:400;margin-left:2px}
.mv .slash{color:var(--text-3);margin:0 3px}
.bar{height:6px;border-radius:999px;background:var(--bar-track);box-shadow:var(--bar-inset);overflow:hidden}
.bar>i{
  display:block;height:100%;width:0;min-width:2px;border-radius:inherit;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  transition:width var(--dur) var(--ease),background var(--dur) var(--ease);
}
.bar>i.warn{background:var(--warning)}
.bar>i.bad{background:var(--danger)}
.card-foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:10px;border-top:1px solid var(--divider);
  font-size:12px;color:var(--text-3);
}
.foot-val{color:var(--text-2);font-variant-numeric:tabular-nums}

/* ---------- 网络 ---------- */
.net-hero{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:14px;min-height:85.5px;margin:0 0 0}
.net-flow{min-width:0}
.net-flow + .net-flow{border-left:1px solid var(--divider);padding-left:14px}
.flow-num{display:flex;align-items:baseline;gap:0;line-height:1}
.flow-num b{font-size:var(--fs-flow);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.flow-num .unit{font-size:12px;color:var(--text-3);font-weight:400;white-space:nowrap;margin-left:2px}
.quota{margin-top:auto;padding-top:12px}
.quota-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px;color:var(--text-3);margin-bottom:6px}
.quota-head b{font-size:13px;font-weight:600;color:var(--text-1);font-variant-numeric:tabular-nums;white-space:nowrap}
.quota-head .u{font-size:12px;color:var(--text-3);font-weight:400;margin-left:2px}
.quota-foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:6px;font-size:12px;line-height:1.45;color:var(--text-3);font-variant-numeric:tabular-nums;
}
.quota-foot .u{font-size:12px;color:var(--text-3);font-weight:400;margin-left:2px}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:38px;padding:0 13px;border-radius:11px;
  border:1px solid var(--button-border);background:var(--button-bg);
  color:var(--button-fg);font:inherit;font-size:13px;font-weight:500;text-decoration:none;
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:hover{background:var(--button-bg-hover);border-color:var(--button-border-hover)}
.btn:active{transform:scale(.98)}
.btn svg{width:14px;height:14px}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--hover);border-color:var(--border-strong)}
.btn.danger-ghost{background:transparent;color:var(--danger-button-fg);border-color:var(--danger-button-border)}
.btn.danger-ghost:hover{background:var(--danger-button-hover-bg);border-color:var(--danger-button-hover-border)}
.btn.primary{
  min-height:46px;font-size:13.5px;font-weight:600;color:var(--button-primary-fg);
  background:linear-gradient(180deg,var(--button-primary-from),var(--button-primary-to));
  border-color:var(--button-primary-border);
}
.btn.primary:hover{background:linear-gradient(180deg,var(--button-primary-hover-from),var(--button-primary-hover-to))}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ---------- 入站 ---------- */
.list{display:flex;flex-direction:column;gap:8px}
.state{
  display:flex;align-items:center;gap:8px;margin:2px;font-size:12.5px;color:var(--text-3);line-height:1.5;
}
.state::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--text-3);flex:0 0 auto}
.state.loading::before{background:var(--text-2);animation:pulse 1.4s ease-in-out infinite}
.state.err{color:var(--warning)}
.state.err::before{background:var(--warning)}
.ib{
  display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:10px 20px;align-items:center;
  padding:13px 15px;border-radius:14px;
  background:var(--surface-1);border:1px solid var(--border-soft);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.ib:hover{background:var(--surface-1-hover);border-color:var(--border)}
.ib.off{opacity:.55}
.ib-main{min-width:0}
.ib-name{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13.5px;font-weight:600;line-height:1.4}
.ib-name>b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{
  font-size:12px;font-weight:400;line-height:1.4;color:var(--text-3);border:1px solid var(--border-soft);
  border-radius:6px;padding:0 6px;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.tag.off{color:var(--warning);border-color:var(--warning-line);background:var(--warning-soft)}
.ib-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:3px;font-size:12px;line-height:1.4;color:var(--text-3);font-variant-numeric:tabular-nums}
.ib-meta b{font-weight:500;color:var(--text-2)}
.ib-meta .u{font-size:12px;color:var(--text-3);font-weight:400;margin-left:2px}
.ib-use{min-width:0}
.ib-amount{display:flex;align-items:baseline;justify-content:flex-end;gap:0;font-size:13px;font-variant-numeric:tabular-nums}
.ib-amount b{font-weight:600}
.ib-amount .u{font-size:12px;color:var(--text-3);font-weight:400;margin-left:2px}
.ib-sep{color:var(--text-3);margin:0 3px;font-size:12px}
.ib-note{color:var(--text-3);font-size:12px;margin-left:4px}
.ib-use .bar{margin-top:6px}
.ib-pct{text-align:right;min-width:4.5ch;font-size:12px;line-height:1.4;color:var(--text-3);margin-top:3px;font-variant-numeric:tabular-nums}
.list-foot{
  display:flex;align-items:baseline;justify-content:flex-end;gap:16px;flex-wrap:wrap;
  margin-top:8px;padding:0 3px;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;
}
.list-foot b{color:var(--text-2);font-weight:600}
.list-foot .u{font-size:12px;color:var(--text-3);font-weight:400;margin-left:2px}

/* ---------- 站点 ---------- */
.group{margin-top:16px}
.group:first-child{margin-top:0}
.group-head{display:flex;align-items:baseline;gap:8px;margin:0 0 8px}
.group-head h3{margin:0;font-size:12px;font-weight:500;letter-spacing:.03em;line-height:1.4;color:var(--text-2)}
.group-head span{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.tiles{display:flex;flex-wrap:wrap;gap:9px}
.tile{
  flex:1 1 240px;max-width:560px;min-width:0;
  display:flex;align-items:center;gap:11px;min-height:56px;padding:9px 12px;border-radius:14px;
  background:var(--surface-1);border:1px solid var(--border-soft);
  color:var(--text-1);text-decoration:none;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
a.tile:hover{background:var(--surface-1-hover);border-color:var(--border);transform:translateY(-1px)}
a.tile:active{background:var(--active-bg)}
.tile .ic{
  width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;
  background:var(--surface-2);font-size:17px;line-height:1;
}
.tile .tt{flex:1;min-width:0}
.tile .tt b{display:block;font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .tt small{display:block;margin-top:1px;font-size:12px;line-height:1.4;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st{width:7px;height:7px;border-radius:50%;background:var(--dot-idle);flex:0 0 auto;transition:background var(--dur)}
.st.ok{background:var(--success);box-shadow:0 0 0 3px var(--success-ring)}
.st.bad{background:var(--danger);box-shadow:0 0 0 3px var(--danger-ring)}
.st.wait{background:var(--warning);animation:pulse 1.2s ease-in-out infinite}
.probe-key{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-3)}
.probe-key .st{width:6px;height:6px;margin-left:6px}
.probe-key .st:first-child{margin-left:0}
.group-lite{margin-top:18px;padding-top:14px;border-top:1px solid var(--divider)}
.group-lite .group-head{margin-bottom:6px}
.group-lite .group-head h3{color:var(--text-3);font-size:12px}
.lite-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px 18px}
.lite{display:grid;grid-template-columns:16px auto 1fr 6px;align-items:center;gap:8px;min-height:29px;font-size:12px;line-height:1.4}
.lite .ic{font-size:12px;opacity:.65;text-align:center}
.lite-name{color:var(--text-2);font-weight:500;white-space:nowrap}
.lite-desc{color:var(--text-3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.lite .st{width:5px;height:5px;background:var(--dot-idle-weak);box-shadow:none}

/* ---------- 操作 ---------- */
.ops .card-head{margin-bottom:8px}
.ops-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.op-form{display:flex;gap:8px;flex:0 1 260px;min-width:0}
.port-field{flex:1;min-width:0;display:flex}
.op-form input{flex:1;min-width:0;height:40px}
.op-form .btn{min-height:40px}
.op-msg{margin:0;flex:1 1 180px;min-height:1.4em;font-size:12px;color:var(--text-3);line-height:1.5}
.op-msg.ok{color:var(--success)}
.op-msg.err{color:var(--danger)}

/* ---------- 页脚 ---------- */
.foot{
  position:relative;z-index:1;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  max-width:1280px;margin:0 auto;
  padding:16px clamp(14px,3vw,28px) calc(24px + env(safe-area-inset-bottom));
  font-size:12px;line-height:1.45;color:var(--text-3);
}
.conn-note{color:var(--warning)}

/* ---------- 动效 ---------- */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.42}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 响应式 ---------- */
@media(min-width:1080px){
  .layout{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
  .wide{grid-column:1/-1}
  .res{grid-column:1}
  .net{grid-column:2}
}
@media(max-width:720px){
  :root{--radius:18px}
  .topbar{padding-left:14px;padding-right:14px;gap:10px}
  .chips{order:3;width:100%}
  .icon-btn{
    width:44px;height:44px;
    border-color:var(--border);background:var(--hover);
  }
  .btn{min-height:44px}
  .btn.primary{min-height:48px}
  .big-num b{font-size:clamp(2.2rem,10vw,2.75rem)}
  .net-hero{gap:12px;min-height:0}
  .net-flow + .net-flow{padding-left:12px}
  .card-head{flex-wrap:wrap}
  .card-head.with-actions{flex-direction:column;align-items:stretch;gap:10px}
  .with-actions .head-actions{justify-content:flex-start}
  .meter-pair{grid-template-columns:1fr;gap:8px}
  .ib{grid-template-columns:1fr;gap:9px;padding:13px}
  .tiles{display:grid;grid-template-columns:1fr;gap:9px}
  .tile{max-width:none;min-height:58px}
  .lite-grid{grid-template-columns:1fr}
  .ops-row{flex-direction:column;align-items:stretch}
  .op-form{flex:1 1 auto}
  .op-form input{height:44px}
  .op-form .btn{min-height:44px}
  .op-msg{flex:1 1 auto}
  .foot{flex-direction:column;gap:4px}
  .orb-d{width:150vw;height:150vw;left:-25vw;top:4vh}
}
@media(max-width:560px){
  .glass,.topbar{
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    backdrop-filter:blur(14px) saturate(140%);
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .orb{transform:none!important}
}