:root {
  --page: #E6E9ED;
  --ink: #1C232C;
  --ink-2: #4B5563;
  --ink-3: #7A8491;
  --steel: #3B4452;
  --steel-2: #505B6B;
  --bezel: #F8F9FA;
  --bezel-line: #D5DAE0;
  --tape: #F3DC6B;
  --tape-ink: #2B2610;
  --up: #2F9E44;
  --planned: #E0A100;
  --down: #D6336C;
  --nossh: #F76707;
  --idle: #9AA3AD;
  --focus: #3B7DD8;
  --font: "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #12161B; --ink: #E4E8ED; --ink-2: #B3BCC6; --ink-3: #85909C;
    --steel: #262E39; --steel-2: #37414F; --bezel: #1A2029; --bezel-line: #2E3743;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--ink); font: 400 16px/1.45 var(--font); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

/* header */
.top {
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center;
  padding: 18px 28px; border-bottom: 1px solid var(--bezel-line);
}
.brand { flex: 0 1 auto; }
.stats { flex: 1 1 380px; }
.actions { flex: 0 1 auto; margin-left: auto; }
.stats .st { white-space: nowrap; }
.brand h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.brand p { margin: 2px 0 0; color: var(--ink-2); font-size: 15px; }
.stats { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; color: var(--ink-2); }
.stats b { color: var(--ink); font-weight: 600; font-size: 18px; margin-right: 3px; }
.stats .st { display: inline-flex; align-items: center; gap: 6px; }
.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--bezel-line); background: var(--bezel);
  border-radius: 6px; padding: 0 10px; height: 36px; }
.search input { border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); width: 260px; }
.search:focus-within { border-color: var(--focus); }
#refresh { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 6px;
  border: 1px solid var(--steel); background: var(--steel); color: #fff; cursor: pointer; font-weight: 500; }
#refresh:disabled { opacity: .6; cursor: default; }
#refresh.spin i { animation: spin 1s linear infinite; }
.stamp { font-size: 14px; color: var(--ink-3); min-width: 150px; text-align: right; }

.banner { margin: 12px 28px 0; padding: 8px 12px; border-radius: 6px; font-size: 15px;
  background: color-mix(in srgb, var(--planned) 18%, transparent); border: 1px solid var(--planned); }

.who { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--ink-2); }
.who span { display: inline-flex; align-items: center; gap: 4px; }
.who button { height: 36px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--bezel-line); background: var(--bezel); cursor: pointer; }

/* login */
.login-page { background: #070B11; color: #E4E8ED; overflow: hidden; color-scheme: dark; }
#bg { position: fixed; inset: 0; display: block; cursor: crosshair; }
.login { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: 24px; pointer-events: none; }
.login-card { pointer-events: auto; width: min(380px, 100%); padding: 24px 26px 26px; border-radius: 12px;
  background: rgba(13, 20, 29, 0.82); border: 1px solid #22303F; color: #EEF1F4;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(125, 211, 252, 0.06);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lc-head { display: flex; align-items: center; justify-content: space-between; }
.login-card .tape { font-size: 19px; }
.lc-leds { display: flex; gap: 6px; }
.lc-leds span { width: 7px; height: 7px; border-radius: 50%; background: #2DD4BF; box-shadow: 0 0 6px #2DD4BF; }
.lc-leds span:nth-child(2) { background: #38BDF8; box-shadow: 0 0 6px #38BDF8; animation: blink 0.9s steps(2) infinite; }
.lc-leds span:nth-child(3) { background: #38BDF8; box-shadow: 0 0 6px #38BDF8; animation: blink 1.3s steps(2) infinite 0.4s; }
.login-card h1 { font-size: 26px; font-weight: 600; margin: 16px 0 2px; letter-spacing: -0.01em; }
.lc-sub { margin: 0 0 16px; color: #94A3B8; }
.login-card label { display: block; font-size: 15px; margin: 12px 0 4px; color: #D3D9E0; }
.login-card input { width: 100%; height: 42px; border-radius: 6px; border: 1px solid #263446; background: #0A1017;
  color: #EEF1F4; font: inherit; padding: 0 12px; transition: border-color .15s; }
.login-card input:focus { outline: none; border-color: #38BDF8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22); }
.login-card button { margin-top: 22px; width: 100%; height: 44px; border-radius: 6px; border: 0; background: var(--tape);
  color: var(--tape-ink); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.login-card button:hover { filter: brightness(1.06); }
.login-card button:focus-visible { outline: 2px solid #4DABF7; outline-offset: 2px; }
.lc-msg { margin: 0 0 6px; padding: 8px 10px; border-radius: 6px; font-size: 15px; line-height: 1.35;
  background: rgba(250, 82, 82, 0.16); border: 1px solid #FA5252; color: #FFE3E3; }
.lc-msg.warn { background: rgba(250, 176, 5, 0.14); border-color: #FAB005; color: #FFF3BF; }

/* network path */
.path { display: flex; align-items: stretch; gap: 0; padding: 18px 28px 6px; overflow-x: auto; }
.pn { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-width: 170px;
  border: 1px solid var(--bezel-line); background: var(--bezel); border-radius: 8px; }
.pn i { font-size: 24px; color: var(--ink-2); }
.pn b { display: block; font-weight: 600; }
.pn small { color: var(--ink-2); font-size: 14px; }
.pn.host { cursor: pointer; }
.pn.host:hover { border-color: var(--steel-2); }
.cable { flex: 1 0 28px; align-self: center; height: 3px; background: var(--ink-3); border-radius: 2px; min-width: 28px; }

/* floor + backbone */
.floor { position: relative; padding: 14px 28px 40px 52px; }
.floor::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 40px; width: 3px; background: var(--ink-3); border-radius: 2px; }
.backbone { font-size: 14px; color: var(--ink-2); margin: 0 0 12px; display: flex; gap: 6px; align-items: center; }
.racks { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 22px; align-items: start; }

/* rack */
.rack { position: relative; background: var(--steel); border-radius: 10px; padding: 0 22px 14px; }
.rack::before { content: ""; position: absolute; left: -22px; top: 26px; width: 22px; height: 3px; background: var(--ink-3); }
.rack::after, .rack .rail-r { content: ""; position: absolute; top: 46px; bottom: 14px; width: 6px; left: 8px;
  background-image: radial-gradient(circle, var(--steel-2) 1.6px, transparent 2px); background-size: 6px 12px; }
.rack .rail-r { right: 8px; left: auto; }
.rack-head { display: flex; align-items: center; gap: 10px; padding: 12px 0 10px; color: #EEF1F4; }
.rack-head .swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--accent); flex: none; }
.rack-head b { font-size: 18px; font-weight: 600; }
.rack-head .stack { color: #B8C1CC; font-size: 14px; }
.rack-head .meta { margin-left: auto; font-size: 14px; color: #D3D9E0; text-align: right; }
.rack.external { background: transparent; border: 2px dashed var(--steel-2); }
.rack.external::before, .rack.external::after { display: none; }
.rack.external .rack-head { color: var(--ink); }
.rack.external .rack-head .stack { color: var(--ink-2); }

/* unit (bezel) */
.unit { display: grid; grid-template-columns: 26px 30px minmax(160px, 210px) 1fr; gap: 10px; align-items: center;
  background: var(--bezel); border: 1px solid var(--bezel-line); border-radius: 4px; padding: 9px 12px 9px 8px;
  margin-top: 6px; cursor: pointer; text-align: left; width: 100%; }
.unit:hover { border-color: var(--accent); }
.unit.selected { box-shadow: inset 0 0 0 2px var(--accent); }
.unit.plan { border: 1px dashed var(--planned); }
.unit.plan .ident, .unit.plan .spec-line, .unit.plan .form-icon { opacity: .7; }
.unit.dim { opacity: .28; }
.leds { display: grid; gap: 5px; justify-items: center; }
.led { width: 9px; height: 9px; border-radius: 50%; background: var(--idle); }
.s-up .led.pwr { background: var(--up); }
.s-planned .led.pwr { background: var(--planned); }
.s-down .led.pwr { background: var(--down); }
.s-no-ssh .led.pwr { background: var(--nossh); }
.led.act { background: transparent; border: 1px solid var(--idle); }
.s-up .led.act { background: var(--up); border-color: var(--up); opacity: .45; }
.collecting .s-up .led.act { opacity: 1; animation: blink .5s steps(2) infinite; }
.form-icon { font-size: 22px; color: var(--ink-2); justify-self: center; }
.ident { min-width: 0; }
.tape { display: inline-block; background: var(--tape); color: var(--tape-ink); font-weight: 600; font-size: 16px;
  letter-spacing: .06em; padding: 1px 8px 2px; border-radius: 2px; line-height: 1.35;
  clip-path: polygon(0 6%, 3px 0, calc(100% - 3px) 3%, 100% 0, 100% 94%, calc(100% - 4px) 100%, 3px 97%, 0 100%); }
.ip { font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin-left: 6px; }
.role { font-size: 14px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 4px 12px; font-size: 14px; color: var(--ink-2); }
.g { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.g i { font-size: 15px; color: var(--ink-3); }
.g.hot, .g.hot i { color: var(--down); }
.g .bar { flex: 1; height: 5px; border-radius: 3px; background: var(--bezel-line); overflow: hidden; min-width: 28px; }
.g .bar span { display: block; height: 100%; background: var(--accent); }
.state-msg { grid-column: 1 / -1; font-size: 14px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }
.s-down .state-msg { color: var(--down); }
.s-no-ssh .state-msg { color: var(--nossh); }
.warn-dot { color: var(--nossh); }
.spec-line { grid-column: 1 / -1; font-size: 14px; color: var(--ink-3); }

.ext { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-top: 6px; border-radius: 4px;
  border: 1px solid var(--bezel-line); background: var(--bezel); }
.ext i { font-size: 22px; color: var(--ink-2); }
.ext small { display: block; color: var(--ink-2); font-size: 14px; }

/* ingress */
.pub { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--ink-2); margin-left: 6px; }
.pub.bad, .pub.bad i { color: var(--down); }
.ingress { margin-top: 26px; background: var(--bezel); border: 1px solid var(--bezel-line); border-radius: 10px; padding: 14px 18px 8px; position: relative; }
.ingress:empty { display: none; }
.ingress::before { content: ""; position: absolute; left: -22px; top: 24px; width: 22px; height: 3px; background: var(--ink-3); }
.ing-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ing-head b { font-size: 18px; font-weight: 600; }
.ing-head i { font-size: 18px; color: var(--ink-2); align-self: center; }
.ing-head span { color: var(--ink-2); font-size: 15px; }
.ing-scroll { overflow-x: auto; }
.ingress tr.lv-0 td:first-child { box-shadow: inset 3px 0 0 var(--down); padding-left: 8px; }
.ingress tr.lv-1 td:first-child { box-shadow: inset 3px 0 0 var(--nossh); padding-left: 8px; }
.ingress tr.lv-2 td:first-child { padding-left: 8px; }
.ingress tr.offline td { opacity: .6; }
.ingress tr.dim { display: none; }
a.mono { color: var(--ink); text-decoration: none; }
a.mono:hover { text-decoration: underline; }
.linkish { border: 0; background: none; padding: 0; font-weight: 600; cursor: pointer; text-decoration: underline dotted; }
.iss { display: flex; gap: 5px; align-items: flex-start; font-size: 14px; line-height: 1.35; margin: 1px 0; }
.iss i { margin-top: 2px; }
.iss.danger, .iss.danger i { color: var(--down); }
.iss.warn i { color: var(--nossh); }
.iss.info { color: var(--ink-3); }

/* drawer */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100vw); background: var(--page);
  border-left: 1px solid var(--bezel-line); transform: translateX(100%); transition: transform .22s ease;
  display: flex; flex-direction: column; z-index: 20; }
.drawer.open { transform: none; }
.scrim { position: fixed; inset: 0; background: rgba(10, 14, 20, .35); z-index: 10; }
.drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px 12px; border-bottom: 1px solid var(--bezel-line); }
.drawer-head > div { flex: 1; }
.drawer-head .tape { font-size: 20px; }
.drawer-head p { margin: 6px 0 0; color: var(--ink-2); }
.icon-btn { border: 1px solid var(--bezel-line); background: var(--bezel); border-radius: 6px; width: 34px; height: 34px; cursor: pointer; font-size: 18px; }
.drawer-body { overflow-y: auto; padding: 8px 22px 40px; }
.drawer h3 { font-size: 17px; font-weight: 600; margin: 22px 0 8px; display: flex; align-items: center; gap: 8px; }
.drawer h3 i { color: var(--accent); font-size: 19px; }
.drawer h3 .n { color: var(--ink-3); font-weight: 400; font-size: 15px; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; font-size: 15px; margin: 0; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--bezel-line); padding: 4px 8px 4px 0; }
td { border-bottom: 1px solid var(--bezel-line); padding: 5px 8px 5px 0; vertical-align: top; }
td.mono, .mono { font-family: var(--mono); font-size: 13px; }
.pill { display: inline-block; white-space: nowrap; font-size: 13px; padding: 0 7px; border-radius: 10px; border: 1px solid currentColor; line-height: 1.5; }
.pill.all { color: var(--nossh); }
.pill.local { color: var(--up); }
.pill.specific { color: var(--ink-2); }
.pill.st-up, .pill.running, .pill.Running { color: var(--up); }
.pill.st-down, .pill.exited, .pill.Failed { color: var(--down); }
.pill.st-no-ssh, .pill.restarting, .pill.Pending { color: var(--nossh); }
.pill.st-planned { color: var(--planned); }
.alerts { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--nossh); border-radius: 6px; font-size: 15px; }
.alerts div { display: flex; gap: 6px; align-items: center; }
.alerts i { color: var(--nossh); }
.problem { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--down); background: var(--bezel); font-size: 15px; }
.problem.no-ssh { border-left-color: var(--nossh); }
.problem p { margin: 4px 0 0; color: var(--ink-2); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 14px; padding: 1px 8px; border-radius: 4px; background: var(--bezel); border: 1px solid var(--bezel-line); }
.muted { color: var(--ink-3); font-size: 15px; }
.meter { height: 6px; border-radius: 3px; background: var(--bezel-line); overflow: hidden; margin-top: 3px; }
.meter span { display: block; height: 100%; background: var(--accent); }

@keyframes blink { to { opacity: .2; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 900px) {
  .top { padding: 16px; }
  .actions { margin-left: 0; }
  .actions { justify-content: flex-start; }
  .search input { width: 100%; }
  .search { flex: 1; }
  .path { padding: 14px 16px 4px; }
  .banner { margin: 12px 16px 0; }
  .stamp { text-align: left; min-width: 0; }
  .floor { padding: 12px 12px 30px 30px; }
  .floor::before { left: 13px; }
  .rack::before, .ingress::before { left: -17px; width: 17px; }
  .racks { grid-template-columns: 1fr; }
  .rack { padding: 0 14px 12px; }
  .unit { grid-template-columns: 20px 26px 1fr; }
  .gauges { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- rack unit: diagnostics button ---------- */
.unit-wrap { position: relative; }
.unit-wrap.dim { opacity: .28; }
.unit-wrap .unit { padding-right: 56px; }
.diag-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--ink); color: var(--bezel);
  cursor: pointer; font-size: 20px; opacity: 0; transition: opacity .15s; }
.unit-wrap:hover .diag-btn, .unit-wrap:focus-within .diag-btn, .diag-btn:focus-visible { opacity: 1; }
@media (hover: none) { .diag-btn { opacity: 1; } }

/* ---------- drawer: actions + right-now tiles ---------- */
.d-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.d-actions button { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 8px;
  cursor: pointer; font-size: 15px; }
.d-actions i { font-size: 18px; }
.d-primary { border: 0; background: var(--ink); color: var(--bezel); font-weight: 600; }
.d-secondary { border: 1px solid var(--bezel-line); background: var(--bezel); }
.now-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-top: 16px; }
.now-tiles div { background: var(--bezel); border: 1px solid var(--bezel-line); border-radius: 6px; padding: 6px 10px; }
.now-tiles span { display: block; font-size: 13px; color: var(--ink-2); }
.now-tiles b { font-size: 18px; font-weight: 500; }

/* ---------- diagnostics view (always dark, like a terminal) ---------- */
body.diag-open { overflow: hidden; }
.diag { position: fixed; inset: 0; z-index: 40; overflow: auto; background: #0B1016; color: #E4E8ED; color-scheme: dark; }
.diag .mono, .diag code { font-family: var(--mono); }
.diag code { font-size: 0.9em; }
.diag .sky { color: #7DD3FC; } .diag .teal { color: #5EEAD4; } .diag .dim { color: #8A96A5; }
.dg-wrap { max-width: 1600px; margin: 0 auto; padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.dg-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dg-head .tape { font-size: 20px; }
.dg-ip { font-family: var(--mono); font-size: 14px; color: #A9B4C0; }
.dg-meta { flex: 1 1 260px; font-size: 15px; color: #A9B4C0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 14px;
  border: 1px solid #3A4552; color: #CBD5E1; }
.dg-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #8A96A5; }
.dg-status.live { border-color: #2F9E44; color: #8CE99A; } .dg-status.live .dot { background: #40C057; animation: blink 1.2s steps(2) infinite; }
.dg-status.wait { border-color: #8F6A00; color: #FFE066; } .dg-status.wait .dot { background: #FCC419; }
.dg-status.bad { border-color: #8A2B2B; color: #FFA8A8; } .dg-status.bad .dot { background: #FA5252; }
.dg-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid #223040;
  border-radius: 8px; background: transparent; color: #E4E8ED; font: inherit; font-size: 15px; cursor: pointer; }
.dg-btn:hover { border-color: #3B5673; }
.dg-btn.dg-icon { width: 40px; padding: 0; justify-content: center; }
.dg-btn.dg-inline { height: 32px; margin-left: 8px; background: #E4E8ED; color: #0B1016; border: 0; font-weight: 600; }
.dg-seg { display: inline-flex; border: 1px solid #223040; border-radius: 8px; overflow: hidden; }
.dg-seg button { height: 38px; min-width: 44px; padding: 0 10px; border: 0; background: transparent; color: #A9B4C0;
  font: inherit; font-size: 14px; cursor: pointer; }
.dg-seg button[aria-pressed="true"] { background: #1B2633; color: #E4E8ED; font-weight: 600; }
.diag :focus-visible { outline: 2px solid #38BDF8; outline-offset: 2px; }

.dg-banner { padding: 10px 14px; border-radius: 8px; font-size: 15px; background: #121922; border: 1px solid #223040; color: #CBD5E1; }
.dg-banner.error { border-color: #8A2B2B; background: #1A1215; }
.dg-banner.error code { color: #FFC9C9; }
.dg-banner.paused, .dg-banner.ended { border-color: #8F6A00; }
.dg-banner.partial { color: #A9B4C0; font-size: 14px; }

.dg-row { display: grid; gap: 14px; }
.dg-row1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.dg-row2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.dg-no-gpu .dg-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dg-panel { background: #121922; border: 1px solid #223040; border-radius: 10px; padding: 14px 16px; display: flex;
  flex-direction: column; gap: 10px; min-width: 0; }
.dg-ph { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dg-ph h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #CBD5E1; }
.dg-ph label { font-size: 14px; color: #A9B4C0; }
.dg-ph input { height: 34px; width: 220px; max-width: 100%; box-sizing: border-box; padding: 0 10px; border: 1px solid #223040;
  border-radius: 8px; background: #0B1016; color: #E4E8ED; font: inherit; font-size: 14px; }
.dg-sub { font-family: var(--mono); font-size: 13px; color: #8A96A5; }
.dg-grow { flex: 1; }
.dg-note { font-size: 15px; color: #A9B4C0; }
.dg-big { font-family: var(--mono); font-size: 28px; font-weight: 500; line-height: 1; }
.dg-graph { display: block; width: 100%; height: 46px; }
.dg-graph .gl { stroke: #1E2A38; stroke-dasharray: 4 6; }
.dg-cpu-graph { height: 120px; }
.dg-mem-graph { height: 80px; }
.dg-axis { display: flex; justify-content: space-between; margin-top: -6px; font-family: var(--mono); font-size: 11px; color: #7C8896; }
.dg-bar { display: block; flex: 1; height: 6px; border-radius: 3px; background: #1E2A38; overflow: hidden; min-width: 30px; }
.dg-bar > span { display: block; width: 0; height: 100%; background: #38BDF8; transition: width .4s ease; }
.dg-threads { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: 7px 14px; }
.dg-t { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; }
.dg-t .l { width: 28px; color: #8A96A5; }
.dg-t .v { width: 34px; text-align: right; color: #CBD5E1; }
.dg-foot { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: #A9B4C0; margin-top: auto; }
.dg-foot .mono { color: #E4E8ED; }
.dg-stack { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: #1E2A38; }
.dg-stack .u { width: 0; background: #2DD4BF; transition: width .4s ease; }
.dg-stack .c { width: 0; background: rgba(45, 212, 191, .35); transition: width .4s ease; }
.dg-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; font-size: 15px; }
.dg-kv div { display: flex; justify-content: space-between; }
.dg-kv dt { color: #A9B4C0; } .dg-kv dd { margin: 0; }
.dg-swap { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #A9B4C0; margin-top: auto; }
.dg-swap .mono { color: #E4E8ED; }
.dg-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; }
.dg-line > span:first-child { color: #A9B4C0; }
.dg-small { font-size: 13px; color: #8A96A5; margin-top: auto; }
.dg-mount { display: flex; flex-direction: column; gap: 5px; }
.dg-mount .dg-line > span:first-child { color: #E4E8ED; }
.dg-g { display: grid; grid-template-columns: 76px minmax(0, 1fr) 180px; gap: 16px; align-items: center;
  padding-top: 10px; border-top: 1px solid #1B2633; }
.dg-gl { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.dg-gu { font-size: 24px; }
.dg-gb { display: flex; flex-direction: column; gap: 8px; }
.dg-gb .dg-line > span:first-child { width: 48px; flex: none; }
.dg-gx { display: flex; gap: 16px; font-size: 13px; color: #CBD5E1; }
.dg-g .dg-graph { height: 54px; }
.dg-table { overflow-x: auto; }
.dg-procs table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dg-procs th { text-align: left; font-weight: 500; color: #8A96A5; padding: 4px 10px 6px 0; border: 0; font-size: 14px; }
.dg-procs td { padding: 5px 10px 5px 0; border-top: 1px solid #1B2633; border-bottom: 0; font-family: var(--mono); white-space: nowrap; }
.dg-procs td.cmd { max-width: 1px; width: 100%; overflow: hidden; text-overflow: ellipsis; color: #E4E8ED; }
.dg-pc { display: inline-flex; align-items: center; gap: 8px; }
.dg-pc .dg-bar { width: 80px; flex: none; }
.dg-ct { font-family: var(--font); font-size: 13px; color: #7DD3FC; border: 1px solid #1F4E6B; border-radius: 4px; padding: 0 6px; }
.dg-ct.host { color: #8A96A5; border-color: #2A3645; }
.dg-footnote { font-size: 13px; color: #7C8896; }
.dg-loading .dg-panel { opacity: .55; }

@media (max-width: 1100px) {
  .dg-row1, .dg-row2, .dg-no-gpu .dg-row2 { grid-template-columns: minmax(0, 1fr); }
  .dg-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dg-gpu { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .dg-wrap { padding: 12px; }
  .dg-head .dg-btn span, .dg-meta { display: none; }
  .dg-row2, .dg-no-gpu .dg-row2 { grid-template-columns: minmax(0, 1fr); }
  .dg-threads { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px 10px; }
  .dg-t .l { display: none; }
  .dg-t .v { width: 30px; }
  .dg-g { grid-template-columns: 64px minmax(0, 1fr); }
  .dg-g .dg-graph { display: none; }
  .dg-procs th.opt, .dg-procs td.opt { display: none; }
  .dg-ph input { width: 100%; }
}