:root {
  color-scheme: dark;
  --canvas: #080e13;
  --ink: #eef5f7;
  --body-c: #b8c8d1;
  --muted: #8fa6b5;
  --faint: var(--muted);
  --paper: rgba(12, 23, 31, .18);
  --surface: rgba(6, 15, 22, .14);
  --bg-inset: rgba(172, 207, 224, .12);
  --line: rgba(203, 229, 242, .13);
  --accent: #65d4c4;
  --accent-deep: #88ddc2;
  --electric: #65d4c4;
  --ok: #88ddc2;
  --amber: #ebc48c;
  --hot: #f3a29a;
  --metric-low: #65d4c4;
  --metric-mid: #8aaff5;
  --metric-high: #ecc284;
  --metric-max: #ef948a;
  --focus: #b8f1e7;
  --light-teal: #20bfae;
  --light-blue: #376ba9;
  --light-reflection: #b9e7ec;
  --fd: "Schibsted Grotesk", system-ui, sans-serif;
  --fb: var(--fd);
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 24px;
  --radius-inset: 14px;
  --glass-shadow: 0 16px 40px rgba(0, 5, 10, .16), inset 0 1px 1px rgba(255, 255, 255, .22), inset 0 -1px 1px rgba(255, 255, 255, .10);
  --glass-fallback: blur(4px) saturate(1.65);
  --glass-refraction: var(--glass-fallback);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --drift: cubic-bezier(.45, 0, .55, 1);
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; color: var(--body-c); font: 13px/1.5 var(--fb); }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 5px;
}
::selection { background: var(--accent); color: var(--canvas); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--ink); font-weight: 600; }
h1 { font-size: 18px; letter-spacing: .06em; line-height: 1.2; }
h2 { font-size: 16px; letter-spacing: -.01em; }
h3 { font-size: 12px; font-weight: 500; }

/* One ambient field behind the entire dashboard, never an extra content section. */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--canvas); }
body { isolation: isolate; }
.ambient-light { position: absolute; border-radius: 50%; will-change: transform; animation-play-state: paused; }
.light-teal {
  width: 1000px; height: 850px; left: -260px; top: -340px;
  background:
    radial-gradient(ellipse, transparent 42%, rgba(128, 229, 217, .10) 43.5%, rgba(185, 231, 236, .55) 44%, rgba(128, 229, 217, .12) 45%, transparent 47%),
    radial-gradient(ellipse, color-mix(in srgb, var(--light-teal) 50%, transparent), transparent 67%);
  transform: rotate(-24deg) scaleY(.7);
  animation: drift-teal 28s var(--drift) infinite alternate;
}
.light-blue {
  width: 1200px; height: 1000px; right: -470px; top: 80px;
  background:
    radial-gradient(ellipse, transparent 46%, rgba(130, 175, 240, .10) 47%, rgba(185, 214, 255, .50) 47.5%, rgba(130, 175, 240, .12) 48.5%, transparent 50%),
    radial-gradient(ellipse, color-mix(in srgb, var(--light-blue) 60%, transparent), transparent 65%);
  transform: rotate(-38deg) scaleY(.8);
  animation: drift-blue 34s var(--drift) infinite alternate;
}
.light-reflection {
  width: 1100px; height: 520px; left: 4%; top: 55%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--light-teal) 24%, transparent), transparent 68%);
  transform: rotate(-28deg) scaleY(.6);
  animation: drift-reflection 40s var(--drift) infinite alternate;
}
.ambient-grain {
  position: absolute; inset: 0; opacity: .012;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
@keyframes drift-teal {
  to { transform: translate3d(180px, 160px, 0) rotate(-8deg) scale(1.1, .9); }
}
@keyframes drift-blue {
  to { transform: translate3d(-180px, -100px, 0) rotate(-18deg) scale(.9, 1.1); }
}
@keyframes drift-reflection {
  to { transform: translate3d(-150px, -140px, 0) rotate(-14deg) scale(1.1, .9); }
}
html:not([data-motion="on"]) .ambient-light { animation-play-state: paused; }

.wrap, .topbar-in { width: 100%; max-width: 1480px; padding-inline: 40px; margin-inline: auto; }
.topbar { margin-bottom: 8px; }
.topbar-in { min-height: 104px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.title { display: flex; align-items: center; gap: 12px; }
.brand-logo { display: block; width: 88px; height: 74px; object-fit: contain; flex-shrink: 0; }
.brand-title { display: grid; gap: 4px; }
.brand-title h1 { font-size: 16px; letter-spacing: -.02em; }
.header-tools { display: flex; align-items: center; gap: 20px; }
.connection { display: flex; align-items: center; gap: 8px; }
.updated { font: 11px var(--mono); color: var(--muted); }
.updated.stale { color: var(--amber); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.dot.ok { background: var(--ok); box-shadow: 0 0 10px rgba(136, 221, 194, .25); }
.dot.stale { background: var(--amber); }
.motion-toggle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, .06); color: var(--body-c); font-size: 11px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .30), inset 0 -1px rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: var(--glass-fallback); backdrop-filter: var(--glass-fallback);
  cursor: pointer; transition: background 180ms var(--ease), transform 180ms var(--ease);
}
.motion-toggle:hover { background: rgba(255, 255, 255, .09); }
.motion-toggle:active { transform: scale(.97); }
.motion-toggle:disabled { cursor: default; color: var(--muted); }
.motion-toggle svg { width: 16px; height: 16px; }
.motion-toggle .play-icon { display: none; }
.motion-toggle[aria-pressed="false"] .play-icon { display: block; }
.motion-toggle[aria-pressed="false"] .pause-icon { display: none; }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 2; padding: 12px; border-radius: 8px; background: var(--ink); color: var(--canvas); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

/* Clear glass: a backdrop lens under sharp, untouched foreground content. */
.glass-filters { position: absolute; width: 0; height: 0; pointer-events: none; }
.fig, .panel, .host, .skel {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, .07), transparent 50%, rgba(255, 255, 255, .015)), var(--paper);
  border: 1px solid rgba(255, 255, 255, .14); border-top-color: rgba(255, 255, 255, .25);
  border-radius: var(--radius); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-fallback); backdrop-filter: var(--glass-fallback);
}
.fig::after, .panel::after, .host::after, .skel::after {
  content: ""; position: absolute; inset: 0; padding: 1px;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .38), transparent 30%, transparent 55%, rgba(185, 231, 236, .20) 75%, rgba(255, 255, 255, .24));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
html[data-refraction="svg"] :is(.fig, .panel, .host, .skel, .motion-toggle) {
  backdrop-filter: var(--glass-refraction);
}
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.fig { padding: 20px 24px; min-height: 140px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fig-copy { min-width: 0; }
.fig-label { color: var(--body-c); font-size: 12px; }
.fig-num { color: var(--ink); font-family: var(--fd); font-size: 32px; font-weight: 500; letter-spacing: -.05em; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fig-num .of { margin-left: 4px; font: 14px var(--mono); color: var(--muted); letter-spacing: -.04em; }
.fig-note { color: var(--muted); font-size: 10px; }
.fig-gauge { flex: 0 0 auto; line-height: 0; }

.panel { padding: 24px; margin-bottom: 32px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.section-kind { margin-left: 12px; color: var(--muted); font: 10px var(--mono); letter-spacing: .09em; }
.sub { color: var(--muted); font-size: 11px; margin-top: 4px; }
.sub > span { padding-inline: 4px; }
.badge { display: inline-flex; align-items: center; padding: 5px 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--body-c); font: 10px/1.4 var(--mono); white-space: nowrap; }
.badge.ok { color: var(--ok); background: rgba(136, 221, 194, .09); }
.badge.busy { color: var(--amber); background: rgba(235, 196, 140, .09); }
.badge.down { color: var(--hot); background: rgba(243, 162, 154, .09); }
.node-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; min-height: 156px; }
.node { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 16px; border-radius: var(--radius-inset); background: var(--surface); box-shadow: inset 0 1px rgba(255, 255, 255, .035); }
.node-info { min-width: 0; }
.node-name { color: var(--ink); font: 12px var(--mono); }
.node-state { font: 10px/1.6 var(--mono); text-transform: uppercase; color: var(--muted); }
.node.idle .node-state { color: var(--ok); }
.node.allocated .node-state, .node.mixed .node-state { color: var(--amber); }
.node.down .node-state, .node.drained .node-state { color: var(--hot); }
.node-cpus { color: var(--muted); font: 10px var(--mono); }

.ring-wrap { position: relative; display: inline-block; flex: 0 0 auto; }
.cring { position: absolute; inset: 0; border-radius: 50%; -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - var(--stroke) - 1px), #000 calc(100% - var(--stroke))); mask: radial-gradient(circle closest-side, transparent calc(100% - var(--stroke) - 1px), #000 calc(100% - var(--stroke))); }
.cring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.cring-main { color: var(--ink); font: 500 12px/1.1 var(--mono); }
.cring-sub { color: var(--muted); font: 10px/1.1 var(--mono); }
.bar { height: 4px; border-radius: 4px; background: var(--bg-inset); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 100%; border-radius: inherit; transform-origin: left; }

.queue-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.queue-heading > span { font: 10px var(--mono); letter-spacing: .08em; color: var(--muted); }
.jobs-wrap { overflow-x: auto; border-radius: 10px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
table.jobs { width: 100%; border-collapse: collapse; font: 11px/1.5 var(--mono); }
table.jobs th { padding: 10px 12px; background: var(--surface); color: var(--muted); font: 500 10px/1.5 var(--mono); text-align: left; white-space: nowrap; }
table.jobs td { padding: 10px 12px; border-bottom: 1px solid rgba(203, 229, 242, .06); color: var(--body-c); white-space: nowrap; }
table.jobs tr:last-child td { border-bottom: 0; }
table.jobs .name-cell { color: var(--ink); }
table.jobs td.state-RUNNING { color: var(--ok); }
table.jobs td.state-PENDING { color: var(--amber); }
.section-head { margin: 0 4px 16px; }
.host-grid { --host-gap: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; column-gap: var(--host-gap); row-gap: 0; margin-bottom: calc(-1 * var(--host-gap)); }
.host-grid > * { margin-bottom: var(--host-gap); }
.host { min-width: 0; padding: 24px; display: grid; grid-row: span var(--host-rows, 3); grid-template-rows: subgrid; row-gap: 0; }
.host-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; margin-bottom: 20px; }
.host-name { color: var(--ink); font: 500 14px var(--mono); overflow-wrap: anywhere; }
.host-kind { margin-left: 8px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.host-rings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.hr-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 4px 12px; border-radius: var(--radius-inset); background: var(--surface); }
.hr-cap { color: var(--muted); font: 10px/1.6 var(--mono); text-align: center; }
.host-gpuname { margin-bottom: 12px; color: var(--muted); font-size: 11px; }
.gpu-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 64px; grid-template-rows: minmax(44px, auto) auto; gap: 8px 12px; align-items: center; align-content: start; padding: 12px 0; border-top: 1px solid rgba(203, 229, 242, .08); }
.gpu-row:last-child { padding-bottom: 0; }
.gpu-mid { min-width: 0; }
.gpu-label { color: var(--body-c); font: 10px/1.6 var(--mono); margin-bottom: 6px; }
.gpu-vram { display: block; }
.gpu-meta { text-align: right; color: var(--muted); font: 10px/1.6 var(--mono); white-space: nowrap; }
.gpu-meta .t-hot { color: var(--hot); }
.gpu-users { grid-column: 2 / 4; min-height: 16px; color: var(--muted); font: 10px/1.6 var(--mono); overflow-wrap: anywhere; }
.gpu-users span { color: var(--accent-deep); }
.unreach { color: var(--muted); font: 11px/1.6 var(--mono); padding-block: 8px; }
.skel { height: 340px; }
.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 32px 4px; color: var(--muted); font: 10px/1.5 var(--mono); }
.footer span span { margin-inline: 8px; }

@media (max-width: 1279px) {
  .host-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig { padding: 20px 16px; }
  .fig-gauge .ring-wrap { transform: scale(.85); }
  .node { padding: 12px; gap: 8px; }
}
@media (max-width: 1099px) {
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig { padding: 20px 24px; }
  .node-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .header-tools { gap: 12px; }
  .wrap, .topbar-in { padding-inline: 24px; }
}
@media (max-width: 699px) {
  .wrap, .topbar-in { padding-inline: 16px; }
  .topbar-in { min-height: 116px; flex-wrap: wrap; gap: 12px; padding-block: 20px 16px; }
  .title { gap: 12px; }
  .brand-title { display: flex; align-items: baseline; gap: 12px; }
  .brand-logo { width: 64px; height: 54px; }
  h1 { font-size: 16px; }
  .header-tools { width: 100%; justify-content: space-between; }
  .motion-toggle { min-height: 44px; }
  .summary { gap: 12px; margin-bottom: 20px; }
  .fig { min-height: 144px; padding: 16px; position: relative; align-items: flex-start; overflow: hidden; }
  .fig-label { font-size: 11px; }
  .fig-num { font-size: 32px; }
  .fig-num .of { font-size: 12px; }
  .fig-note { max-width: 90px; }
  .fig-gauge { position: absolute; right: 8px; bottom: 8px; transform: scale(.64); transform-origin: bottom right; opacity: .8; }
  .fig-gauge .ring-wrap { transform: none; }
  .panel { padding: 20px 16px; margin-bottom: 24px; }
  .panel-head { gap: 8px; margin-bottom: 20px; }
  .panel-head .section-kind { display: block; margin: 4px 0 0; }
  .sub { font-size: 10px; }
  .node-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
  .node { padding: 12px 8px; gap: 8px; }
  .node-name { font-size: 11px; }
  .host-grid { --host-gap: 16px; grid-template-columns: minmax(0, 1fr); }
  .host { padding: 20px; display: block; grid-row: auto; }
  .host-head { margin-bottom: 16px; }
  .footer { font-size: 10px; padding-block: 24px; }
  .light-teal { width: 720px; height: 800px; left: -400px; top: -300px; }
  .light-blue { width: 800px; height: 1100px; right: -570px; top: 0; }
  .light-reflection { width: 800px; left: -260px; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-light { animation: none; will-change: auto; }
  .motion-toggle { transition: none; }
}