/* ===== Hostdeck Dashboard – shared styles ===== */

/* ---------- Theme variables ---------- */
:root,
[data-theme="dark"] {
  --bg: #383d42;
  --bg-top: #42484f;
  --bg-bottom: #2e3338;
  --glow: rgba(255, 255, 255, 0.06);
  --panel: rgba(60, 67, 74, 0.92);
  --panel-alt: rgba(72, 79, 86, 0.9);
  --panel-hover: rgba(78, 86, 93, 0.95);
  --border: rgba(208, 216, 224, 0.14);
  --text: #edf1f4;
  --text-muted: #c6ced5;
  --accent: #3b82f6;
  --accent-strong: #60a5fa;
  --accent-soft: rgba(59, 130, 246, 0.18);
  --accent-rgb: 59, 130, 246;
  --ok: #22c55e;
  --ok-rgb: 34, 197, 94;
  --warn: #f59e0b;
  --warn-rgb: 245, 158, 11;
  --err: #ef4444;
  --err-rgb: 239, 68, 68;
  --teal: #14b8a6;
  --teal-rgb: 20, 184, 166;
  --header-bg: rgba(46, 51, 56, 0.82);
  --kpi-green: #22c55e;
  --badge-bg: rgba(72, 79, 86, 0.9);
  --table-header: rgba(72, 79, 86, 0.9);
  --table-row-hover: rgba(78, 86, 93, 0.95);
  --scrollbar-thumb: #6b747d;
  --link: #60a5fa;
  --shadow: 0 22px 50px rgba(0, 0, 0, 0.28);
  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.18);
  --bg-card: #3c434a;
  --bg-secondary: #2e3338;
  --text-primary: #edf1f4;
}

[data-theme="light"] {
  --bg: #f1f5f9;
  --bg-top: #ffffff;
  --bg-bottom: #e2e8f0;
  --glow: rgba(255, 255, 255, 0.72);
  --panel: #ffffff;
  --panel-alt: #f8fafc;
  --panel-hover: #f8fafc;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-muted: #64748b;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.12);
  --accent-rgb: 37, 99, 235;
  --ok: #22c55e;
  --ok-rgb: 34, 197, 94;
  --warn: #f59e0b;
  --warn-rgb: 245, 158, 11;
  --err: #ef4444;
  --err-rgb: 239, 68, 68;
  --teal: #14b8a6;
  --teal-rgb: 20, 184, 166;
  --header-bg: #ffffff;
  --badge-bg: #e2e8f0;
  --table-header: #f1f5f9;
  --table-row-hover: #f8fafc;
  --scrollbar-thumb: #cbd5e1;
  --link: #2563eb;
  --shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.05);
  --bg-card: #ffffff;
  --bg-secondary: #f1f5f9;
  --text-primary: #1e293b;
}

/* ---- Sepia (dimmed warm-light "parchment") theme ---- */
/* Sits between light and dark: bright but toned down, warm paper-like
   greys with a muted teal accent instead of the blue used elsewhere. */
[data-theme="sepia"] {
  --bg: #e8dfcd;
  --bg-top: #f0e9d9;
  --bg-bottom: #ddd2bc;
  --glow: rgba(255, 250, 235, 0.6);
  --panel: #f6f1e4;
  --panel-alt: #efe8d6;
  --panel-hover: #f0eadb;
  --border: #d8ccb2;
  --text: #3a3226;
  --text-muted: #7c705a;
  --accent: #0f766e;
  --accent-strong: #0d6a63;
  --accent-soft: rgba(15, 118, 110, 0.13);
  --accent-rgb: 15, 118, 110;
  --ok: #34742c;
  --ok-rgb: 52, 116, 44;
  --warn: #a85f08;
  --warn-rgb: 168, 95, 8;
  --err: #c2410c;
  --err-rgb: 194, 65, 12;
  --teal: #0d9488;
  --teal-rgb: 13, 148, 136;
  --header-bg: rgba(246, 241, 228, 0.88);
  --kpi-green: #34742c;
  --badge-bg: #e6dcc4;
  --table-header: #eee7d5;
  --table-row-hover: #f0eadb;
  --scrollbar-thumb: #c4b797;
  --link: #0d6a63;
  --shadow: 0 16px 38px rgba(87, 70, 40, 0.14);
  --shadow-soft: 0 8px 22px rgba(87, 70, 40, 0.08);
  --bg-card: #f6f1e4;
  --bg-secondary: #e8dfcd;
  --text-primary: #3a3226;
}

/* ---- Ash (dimmed warm-grey "taupe") theme ---- */
/* The most dimmed of the light themes: greige surfaces halfway between
   Light and Dark, with a muted indigo accent nodding to the Neon theme. */
[data-theme="ash"] {
  --bg: #d5d0c8;
  --bg-top: #dcd8d0;
  --bg-bottom: #c8c2b8;
  --glow: rgba(255, 255, 255, 0.35);
  --panel: #e7e3dc;
  --panel-alt: #ddd8cf;
  --panel-hover: #e0dbd2;
  --border: #bfb8ac;
  --text: #26221c;
  --text-muted: #5f584d;
  --accent: #5a55c9;
  --accent-strong: #4a45b8;
  --accent-soft: rgba(90, 85, 201, 0.13);
  --accent-rgb: 90, 85, 201;
  --ok: #166534;
  --ok-rgb: 22, 101, 52;
  --warn: #9a5407;
  --warn-rgb: 154, 84, 7;
  --err: #b91c1c;
  --err-rgb: 185, 28, 28;
  --teal: #0f766e;
  --teal-rgb: 15, 118, 110;
  --header-bg: rgba(231, 227, 220, 0.88);
  --kpi-green: #166534;
  --badge-bg: #d8d2c8;
  --table-header: #ddd8cf;
  --table-row-hover: #e0dbd2;
  --scrollbar-thumb: #aaa295;
  --link: #4a45b8;
  --shadow: 0 16px 38px rgba(60, 55, 45, 0.16);
  --shadow-soft: 0 8px 22px rgba(60, 55, 45, 0.10);
  --bg-card: #e7e3dc;
  --bg-secondary: #d5d0c8;
  --text-primary: #26221c;
}

/* ---- Neon (deep-space premium) theme ---- */
/* Surfaces are shifted ~+10 lightness (HSL) vs. the original palette to
   brighten the overall feel without losing the purple/indigo hue. */
[data-theme="neon"] {
  --bg: #17223f;
  --bg-top: #1f2d4f;
  --bg-bottom: #13203c;
  --glow: rgba(129, 140, 248, 0.10);
  --panel: rgba(39, 51, 85, 0.72);
  --panel-alt: rgba(47, 61, 99, 0.6);
  --panel-hover: rgba(62, 78, 124, 0.78);
  --border: rgba(148, 163, 220, 0.18);
  --text: #eef2ff;
  --text-muted: #b7c2dc;
  --accent: #818cf8;
  --accent-strong: #a78bfa;
  --accent-soft: rgba(129, 140, 248, 0.22);
  --accent-rgb: 129, 140, 248;
  --ok: #34d399;
  --ok-rgb: 52, 211, 153;
  --warn: #fbbf24;
  --warn-rgb: 251, 191, 36;
  --err: #f87171;
  --err-rgb: 248, 113, 113;
  --teal: #22d3ee;
  --teal-rgb: 34, 211, 238;
  --header-bg: rgba(29, 40, 79, 0.55);
  --kpi-green: #34d399;
  --badge-bg: rgba(79, 92, 133, 0.7);
  --table-header: rgba(46, 61, 106, 0.8);
  --table-row-hover: rgba(77, 96, 147, 0.45);
  --scrollbar-thumb: #56638d;
  --link: #a78bfa;
  --shadow: 0 25px 70px rgba(80, 60, 200, 0.24);
  --shadow-soft: 0 10px 28px rgba(30, 20, 80, 0.28);
  --bg-card: #1f2d4f;
  --bg-secondary: #17223f;
  --text-primary: #eef2ff;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at top left, var(--glow), transparent 30%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  transition: background-color .25s ease, color .25s ease;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }

/* ---------- Header / Navbar ---------- */
.header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
}
/* mobile: header — keep the controls out of the rounded corners / notch */
@media (max-width: 900px) {
  .header {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ---------- Brand logo (ECG heartbeat) ---------- */
.header-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 8px;
  transition: transform .2s ease, filter .2s ease;
}

.header-logo:hover {
  text-decoration: none;
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.header-logo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.header-logo svg { flex-shrink: 0; }

.logo-mark {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.logo-mark-bg { fill: #0f1a2e; }
.logo-mark-tiles { fill: #ffffff; }
.logo-mark-deck { fill: #f2a93b; }

.logo-wordmark {
  font-family: inherit;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.logo-wordmark .logo-accent {
  color: #f2a93b;
}

/* Amber on a light ground needs the deeper shade to stay readable. */
[data-theme="light"] .logo-wordmark .logo-accent,
[data-theme="sepia"] .logo-wordmark .logo-accent,
[data-theme="ash"] .logo-wordmark .logo-accent {
  color: #c47a12;
}


/* ---------- App layout (sidebar + main) ---------- */
body.has-sidebar {
  display: flex;
  align-items: stretch;
}

.app-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- Sidebar ---------- */
.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  flex: 0 0 228px;
  width: 228px;
  display: flex;
  flex-direction: column;
  background: var(--header-bg);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
  z-index: 200;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .2s ease, flex-basis .2s ease;
}

.app-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
  flex-shrink: 0;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid var(--border);
}

.sidebar-collapse,
.sidebar-mobile-toggle {
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, color .2s, border-color .2s;
}

.sidebar-collapse:hover,
.sidebar-mobile-toggle:hover {
  background: var(--panel-alt);
  color: var(--text);
  border-color: var(--border);
}

/* Hamburger lives in the top bar; visible only on small screens. */
.sidebar-mobile-toggle { display: none; }

/* Brand logo in the top bar duplicates the sidebar one; show it only on
   small screens where the sidebar is hidden behind the drawer. */
.header .header-logo { display: none; }

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
}

.side-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .2s, background .2s;
}

.side-nav a:hover,
.side-nav a.active {
  color: var(--text);
  text-decoration: none;
}

.side-nav a:hover { background: var(--panel-alt); }
.side-nav a.active { background: var(--accent-soft); }

.nav-icon {
  flex-shrink: 0;
  opacity: 0.85;
}

.side-nav a:hover .nav-icon,
.side-nav a.active .nav-icon {
  opacity: 1;
  color: var(--accent-strong);
}

/* Plan pill on pages the plan doesn't include, and the trial countdown */
.nav-plan-pill {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.side-trial {
  display: grid;
  gap: 4px;
  margin: 0 10px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), .35);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .16), rgba(168, 85, 247, .14));
  color: var(--text);
  font-size: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.side-trial { margin-top: auto; }
.side-trial + .side-nav-footer { margin-top: 0; }
.side-trial:hover { text-decoration: none; border-color: rgba(var(--accent-rgb), .6); }
.side-trial-top { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-strong); }
.side-trial-days { font-size: 14px; font-weight: 600; }
.side-trial-bar { height: 4px; border-radius: 99px; background: rgba(var(--accent-rgb), .18); overflow: hidden; }
.side-trial-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #60a5fa, #a855f7); }
.side-trial-cta { color: var(--text-muted); }

/* Sidebar footer: search (command palette) + sign out */
.side-nav-footer {
  /* Shared width of the right-hand accessories (Ctrl K badge, theme toggle)
     so their left edges line up across rows. */
  --footer-accessory-w: 56px;
  margin-top: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  border-top: 1px solid var(--border);
}

.side-nav-footer form { margin: 0; }

.side-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s, background .2s;
}

.side-nav-btn:hover {
  background: var(--panel-alt);
  color: var(--text);
}

.side-nav-btn:hover .nav-icon {
  opacity: 1;
  color: var(--accent-strong);
}

.side-nav-btn .cmdk-kbd {
  margin-left: auto;
  width: var(--footer-accessory-w);
  box-sizing: border-box;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: inherit;
  letter-spacing: .04em;
}

/* Appearance toggles (streamer mode, theme) — footer rows whose current state
   sits in the same right-hand column as the Ctrl K badge. */
.side-nav-toggle .nav-icon {
  display: inline-flex;
}

.side-nav-toggle .nav-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.side-nav-state {
  margin-left: auto;
  width: var(--footer-accessory-w);
  box-sizing: border-box;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

html[data-streamer="on"] #streamer-toggle,
html[data-streamer="on"] #streamer-toggle .nav-icon,
html[data-streamer="on"] #streamer-toggle .side-nav-state {
  color: var(--accent);
  opacity: 1;
}

/* Collapsed icon rail (desktop only; the mobile drawer always shows labels) */
@media (min-width: 901px) {
  html[data-sidenav="collapsed"] .app-sidebar {
    flex-basis: 64px;
    width: 64px;
  }
  html[data-sidenav="collapsed"] .app-sidebar-head {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
  }
  html[data-sidenav="collapsed"] .app-sidebar .header-logo { padding: 2px; }
  html[data-sidenav="collapsed"] .app-sidebar .logo-wordmark { display: none; }
  html[data-sidenav="collapsed"] .side-nav { padding: 12px 8px; }
  html[data-sidenav="collapsed"] .side-nav a {
    justify-content: center;
    gap: 0;
    padding: 9px 0;
  }
  html[data-sidenav="collapsed"] .side-nav a span { display: none; }
  html[data-sidenav="collapsed"] .side-trial { display: none; }
  html[data-sidenav="collapsed"] .side-nav-footer { padding: 12px 8px; }
  html[data-sidenav="collapsed"] .side-nav-btn {
    justify-content: center;
    gap: 0;
    padding: 9px 0;
  }
  html[data-sidenav="collapsed"] .side-nav-btn span:not(.nav-icon),
  html[data-sidenav="collapsed"] .side-nav-btn .cmdk-kbd { display: none; }
  html[data-sidenav="collapsed"] .sidebar-collapse svg { transform: scaleX(-1); }
}

/* Mobile: sidebar becomes an off-canvas drawer behind a hamburger */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 20, 0.55);
  z-index: 290;
}

@media (max-width: 900px) {
  body.has-sidebar { display: block; }
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: auto;
    width: 248px;
    transform: translateX(-105%);
    transition: transform .25s ease;
    z-index: 300;
  }
  html.sidenav-open .app-sidebar {
    transform: translateX(0);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  }
  html.sidenav-open .sidebar-backdrop { display: block; }
  .sidebar-collapse { display: none; }
  .sidebar-mobile-toggle { display: inline-flex; }
  .header .header-logo { display: inline-flex; }
}
/* mobile: drawer — the page behind it must not scroll, the drawer scrolls on
   its own, and its rows are comfortable to tap */
@media (max-width: 900px) {
  html.sidenav-open body { overflow: hidden; }
  html.sidenav-open .sidebar-backdrop { touch-action: none; }
  .app-sidebar {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-left: env(safe-area-inset-left);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .side-nav a,
  .side-nav-btn { padding-top: 12px; padding-bottom: 12px; }
}

/* ---------- Command palette trigger button (header) ---------- */
.cmdk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
  box-shadow: var(--shadow-soft);
}
.cmdk-trigger:hover {
  border-color: var(--accent);
  color: var(--text);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.cmdk-trigger svg { flex-shrink: 0; }
.cmdk-trigger .cmdk-kbd {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: inherit;
  letter-spacing: .04em;
}
@media (max-width: 820px) {
  .cmdk-trigger span,
  .cmdk-trigger .cmdk-kbd { display: none; }
  .cmdk-trigger { padding: 6px 8px; }
}

/* ---------- Notifications bell ---------- */
.bell-wrap { position: relative; display: inline-flex; }
.bell-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  box-shadow: var(--shadow-soft);
}
.bell-trigger:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.bell-trigger.has-alerts {
  color: var(--err);
  border-color: rgba(var(--err-rgb), 0.45);
  background: rgba(var(--err-rgb), 0.08);
}
.bell-trigger svg { flex-shrink: 0; }

.bell-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--err);
  border: 2px solid var(--header-bg);
  animation: bellDotPulse 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes bellDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--err-rgb), 0.7); }
  60%  { box-shadow: 0 0 0 8px rgba(var(--err-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--err-rgb), 0); }
}
.bell-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--err);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  border: 2px solid var(--header-bg);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.bell-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 380px;
  max-height: 520px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.18);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: bellDropIn .2s ease-out;
  backdrop-filter: blur(14px);
}
.bell-dropdown[hidden] { display: none; }
/* mobile: bell dropdown — 380 px does not fit a phone; pin it under the header
   edge to edge and let its list scroll on its own */
@media (max-width: 640px) {
  .bell-dropdown {
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px - env(safe-area-inset-bottom));
  }
  .bell-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
@keyframes bellDropIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.bell-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bell-title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bell-link {
  font-size: 12px;
  color: var(--accent-strong);
  text-decoration: none;
  font-weight: 600;
}
.bell-link:hover { text-decoration: underline; }
@media (pointer: coarse) and (max-width: 1023px) {
  .bell-link { padding: 10px 6px; margin: -10px -6px; } /* mobile: 44 px tap target */
}
.bell-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.bell-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.bell-section-heading {
  padding: 10px 16px 4px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.bell-item {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background .15s ease;
}
.bell-item:last-child { border-bottom: none; }
.bell-item:hover { background: var(--panel-alt); text-decoration: none; }
.bell-item-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--text-muted);
}
.bell-item.alert .bell-item-icon { color: var(--err); }
.bell-item.info  .bell-item-icon { color: var(--accent-strong); }
.bell-item.success .bell-item-icon { color: var(--ok); }
.bell-item-body { flex: 1; min-width: 0; }
.bell-item-title {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.bell-item-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.bell-item-main {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.bell-item-main:hover { text-decoration: none; }
.bell-item.muted { opacity: 0.72; }
.bell-item.muted .bell-item-icon { color: var(--text-muted); }

/* Mute toggle (bell dropdown + alert cards) */
.alert-mute-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: 4px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .12s ease;
}
.alert-mute-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  transform: translateY(-1px);
}
@media (pointer: coarse) and (max-width: 1023px) {
  .alert-mute-btn { width: 40px; height: 40px; } /* mobile: tap target */
}
.alert-mute-btn.active {
  color: var(--warn, #f59e0b);
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.12);
}
.alert-mute-btn svg { display: block; }

/* 'Muted' inline chip used in the bell dropdown + on alert cards */
.alert-muted-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Alert card right-side cluster (timestamp + mute button) */
.alert-card-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-card.muted {
  opacity: 0.75;
  background: var(--panel-alt);
  border-color: var(--border);
}

/* ---------- Command palette modal ---------- */
.cmdk-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 20, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
  z-index: 9999;
  animation: cmdkFadeIn .18s ease-out;
}
.cmdk-backdrop[hidden] { display: none; }
@keyframes cmdkFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cmdk {
  width: 100%;
  max-width: 640px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 72vh;
  animation: cmdkSlideIn .22s ease-out;
}
/* mobile: command palette — fill the screen height that is left with the
   keyboard open (dvh) instead of 12vh of margin and 72vh of list */
@media (max-width: 640px), (max-height: 600px) {
  .cmdk-backdrop { padding: 8px; }
  .cmdk {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
}
@keyframes cmdkSlideIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cmdk-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cmdk-search-icon { color: var(--text-muted); flex-shrink: 0; }
.cmdk-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
}
.cmdk-input::placeholder { color: var(--text-muted); }
@media (max-width: 640px) {
  .cmdk-input { font-size: 16px; } /* mobile: no iOS focus zoom */
}
.cmdk-esc {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-family: inherit;
}
.cmdk-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0 10px;
  min-height: 80px;
}
.cmdk-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.cmdk-group {
  margin: 6px 0 4px;
}
.cmdk-group + .cmdk-group { margin-top: 10px; }
.cmdk-group-heading {
  padding: 6px 18px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 700;
}
.cmdk-item {
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  border-left: 2px solid transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.cmdk-item:hover { color: var(--text); }
.cmdk-item.active {
  background: var(--accent-soft);
  color: var(--text);
  border-left-color: var(--accent);
}
.cmdk-item-icon {
  flex-shrink: 0;
  color: var(--text-muted);
}
.cmdk-item.active .cmdk-item-icon { color: var(--accent-strong); }
.cmdk-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cmdk-item-label {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmdk-item-hint {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmdk-item-shortcut {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: inherit;
  flex-shrink: 0;
}
.cmdk-footer {
  display: flex;
  gap: 18px;
  padding: 8px 18px;
  border-top: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
}
.cmdk-footer kbd {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-family: inherit;
  margin-right: 4px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
}

.live-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--panel-alt);
  border: 1px solid rgba(var(--ok-rgb), 0.35);
  border-radius: 20px;
  padding: 5px 12px 5px 10px;
  color: var(--ok);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  user-select: none;
}

.live-badge.offline {
  color: var(--err);
  border-color: rgba(var(--err-rgb), 0.35);
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
  animation: live-pulse 2s ease-in-out infinite;
}

.conn-dot.disconnected {
  background: var(--err);
  animation: none;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--ok-rgb), 0.5); }
  50% { opacity: 0.75; box-shadow: 0 0 0 4px rgba(var(--ok-rgb), 0); }
}

/* ---------- Layout ---------- */
.page-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px;
}
/* mobile: narrower gutters — 24 px each side left 312 px of content on 360 */
@media (max-width: 640px) {
  .page-wrap {
    padding: 16px max(12px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 2px;
}

.page-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 20px;
}

/* ---------- Hero banner (earnings today) ---------- */
.hero-banner {
  display: grid;
  grid-template-columns: 1fr minmax(371px, 600px);
  gap: 24px;
  align-items: center;
  padding: 18px 24px;
  margin-bottom: 16px;
  background:
    radial-gradient(circle at 0% 0%, var(--accent-soft), transparent 55%),
    linear-gradient(135deg, var(--panel) 0%, var(--panel-alt) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  color: var(--text);
  position: relative;
  overflow: hidden;
}

.hero-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.hero-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.2;
}

.hero-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-value {
  font-size: 44px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.hero-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  white-space: nowrap;
  line-height: 1.4;
}
.hero-delta-up {
  color: var(--ok);
  background: rgba(var(--ok-rgb), 0.12);
  border-color: rgba(var(--ok-rgb), 0.35);
}
.hero-delta-down {
  color: var(--err);
  background: rgba(var(--err-rgb), 0.12);
  border-color: rgba(var(--err-rgb), 0.35);
}
.hero-delta-neutral {
  color: var(--text-muted);
}
.hero-delta-arrow {
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}
.hero-delta-pct {
  font-variant-numeric: tabular-nums;
}
.hero-delta-label {
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 2px;
}
.hero-delta-up .hero-delta-label,
.hero-delta-down .hero-delta-label {
  color: inherit;
  opacity: 0.82;
}
.hero-delta-abs {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
  font-weight: 500;
}
.hero-delta-abs:empty {
  display: none;
}

/* Compare range selector: benchmark value + pill tabs in one row */
.hero-compare-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}
.hero-compare-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.hero-compare {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: fit-content;
}
.hero-compare-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
  transition: color .15s ease, background .15s ease;
}
.hero-compare-btn:hover {
  color: var(--text);
}
.hero-compare-btn.is-active {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}
.hero-compare-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (pointer: coarse) and (max-width: 1023px) {
  .hero-compare-btn { padding: 9px 12px; } /* mobile: tap target (was 21 px tall) */
}

.hero-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.hero-sep {
  opacity: 0.6;
}


.hero-sparkline {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  z-index: 1;
}
.hero-sparkline svg {
  width: 100%;
  height: 78px;
  display: block;
  overflow: visible;
}
.hero-spark-line {
  stroke: var(--accent-strong);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hero-spark-area {
  stroke: none;
}
.hero-spark-dot {
  fill: var(--accent-strong);
  stroke: var(--panel);
  stroke-width: 2;
}
.hero-spark-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.hero-spark-caption {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hero-spark-period {
  display: flex;
  gap: 2px;
}
.hero-spark-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.4;
  transition: color .15s ease, background .15s ease;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hero-spark-btn:hover { color: var(--text); }
.hero-spark-btn.is-active {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--text);
}

@media (max-width: 900px) {
  .hero-banner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 18px;
  }
  .hero-value { font-size: 34px; }
  .hero-sparkline svg { height: 56px; }
}
@media (max-width: 520px) {
  .hero-value { font-size: 28px; }
  .hero-row { gap: 10px; }
}

/* ---------- KPI Grid ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .kpi-grid { grid-template-columns: 1fr; }
}
/* mobile: kpi tiles are short — two per row fit a 360 px phone */
@media (max-width: 520px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ---------- Card ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  padding: 22px 24px;
  position: relative;
}

/* ---------- Live-value animations (tween + pulse dot + delta flash) ---------- */
@keyframes valuePulse {
  0%   { filter: brightness(1);    text-shadow: 0 0 0 transparent; }
  35%  { filter: brightness(1.35); text-shadow: 0 0 14px currentColor; }
  100% { filter: brightness(1);    text-shadow: 0 0 0 transparent; }
}
.value-pulse {
  animation: valuePulse 0.9s ease-out;
  display: inline-block;
  will-change: filter, text-shadow;
}
/* When the pulse is applied to a stacked card-value + card-sub pair we
   must keep them on separate lines. inline-block would otherwise let
   both divs sit side by side on the same baseline. */
.card-value.value-pulse,
.card-sub.value-pulse {
  display: block;
}

@keyframes kpiDotPulse {
  0%   { transform: scale(0.4); opacity: 1;   box-shadow: 0 0 0 0 currentColor; }
  70%  { transform: scale(1.6); opacity: 0.4; box-shadow: 0 0 0 8px transparent; }
  100% { transform: scale(1.9); opacity: 0;   box-shadow: 0 0 0 10px transparent; }
}
.kpi-pulse-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-strong);
  color: var(--accent-strong);
  pointer-events: none;
  animation: kpiDotPulse 1.4s ease-out forwards;
  z-index: 2;
}
.kpi-pulse-dot.up   { background: var(--ok);  color: var(--ok); }
.kpi-pulse-dot.down { background: var(--err); color: var(--err); }

.delta-flash {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s ease, transform .4s ease;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
  z-index: 2;
}
.delta-flash.visible {
  opacity: 1;
  transform: translateY(0);
}
.delta-flash.up {
  background: rgba(var(--ok-rgb), 0.15);
  border-color: rgba(var(--ok-rgb), 0.4);
  color: var(--ok);
}
.delta-flash.down {
  background: rgba(var(--err-rgb), 0.15);
  border-color: rgba(var(--err-rgb), 0.4);
  color: var(--err);
}

.kpi-grid-center .card {
  text-align: center;
}

.card-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.card-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.card-value.green { color: var(--ok); }
.card-value.warn  { color: var(--warn); }
.card-value.err   { color: var(--err); }

.card-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ---------- Settings page ---------- */
.settings-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  margin-bottom: 20px;
  width: fit-content;
}
/* mobile: settings tabs — eight of them are 861 px wide. Two rows on a
   tablet, a sideways scroller (the active tab is scrolled into view by
   app.js) on a phone. */
@media (max-width: 900px) {
  .settings-tabs { width: 100%; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .settings-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .settings-tabs::-webkit-scrollbar { display: none; }
  .settings-tab { flex: 0 0 auto; scroll-snap-align: start; }
}
@media (pointer: coarse) and (max-width: 1023px) {
  .settings-tab { min-height: 44px; }
}
.settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.settings-tab:hover {
  color: var(--text);
  background: var(--panel-hover);
}
.settings-tab.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.28);
}
.settings-tab.active:hover {
  background: var(--accent-strong);
  color: #fff;
}
.settings-tab svg {
  flex-shrink: 0;
}
.settings-panel[hidden] { display: none; }
/* Alert rule editor rows (Settings → Notifications; markup in alerts_rules.js).
   These declarations used to be inline styles on the rows; they are kept
   verbatim so the mobile block below can lay the rows out differently. */
.alert-rule-row {
  display: grid;
  grid-template-columns: auto 1.4fr 1fr auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.ar-threshold-wrap { display: inline-flex; align-items: center; gap: 4px; }
.alert-rule-row .ar-threshold { width: 78px; }
.alert-rule-row2 {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0 0 8px 28px;
  flex-wrap: wrap;
  font-size: 12px;
}
.alert-rule-row2 .ar-window,
.alert-rule-row2 .ar-cooldown { width: 60px; }
.alert-rule-row2 .ar-machine { width: 90px; }
.alert-rule-row2 .ar-note { flex-basis: 100%; }
/* mobile: settings — a rule takes three short rows instead of one 1000 px row */
@media (max-width: 640px) {
  .alert-rule-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "on name remove"
      "type type type"
      "threshold threshold scope";
    row-gap: 6px;
  }
  .alert-rule-row .ar-enabled { grid-area: on; }
  .alert-rule-row .ar-name { grid-area: name; }
  .alert-rule-row .ar-remove { grid-area: remove; justify-self: end; }
  .alert-rule-row .ar-type { grid-area: type; }
  .alert-rule-row .ar-threshold-wrap { grid-area: threshold; }
  .alert-rule-row .ar-scope { grid-area: scope; }
  .alert-rule-row .input,
  .alert-rule-row2 .input { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .alert-rule-row .ar-name,
  .alert-rule-row .ar-type,
  .alert-rule-row .ar-scope { width: 100%; }
  .alert-rule-row2 { padding-left: 0; gap: 10px 14px; }
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .settings-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .settings-grid { grid-template-columns: 1fr; }
}

/* ---------- Two-column body ---------- */
/* minmax(0, 1fr): the wide column may hold wide tables/charts in
   overflow-x wrappers; a plain 1fr would refuse to shrink below their
   min-content width and push the grid past the page (beyond the KPI
   row's right edge). */
.body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1000px) {
  /* minmax(0, …): a bare 1fr cannot shrink below its widest child (a data
     table), which pushed the whole page sideways on phones. */
  .body-grid { grid-template-columns: minmax(0, 1fr); }
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.body-grid > div:last-child {
  margin-top: 51px;
}
/* Dashboard sidebar manages its own heading row (Recent Activity) so it
   must start at the same top as the Machines column, not offset by 51 px.
   The selector mirrors the '> div:last-child' rule above to beat its
   specificity (0,2,1) with (0,3,1). */
.body-grid > .dash-sidebar:last-child {
  margin-top: 0;
}

/* Matched heading row for both dashboard columns - guarantees Machines
   and Recent Activity sit at the same baseline above their panels. */
.dash-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  margin-bottom: 12px;
  gap: 12px;
}
/* The filter dropdowns inherit a global 8 px margin-top that would push
   the Machines column header taller than the Recent Activity header and
   misalign their panels. Reset it inside the dashboard header row only. */
.dash-col-header .global-range-wrap {
  margin-top: 0;
}
/* Was an inline style on the input; kept here verbatim so the mobile rule
   below can override it. */
#filter-search {
  width: 140px;
  padding: 6px 10px;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
/* mobile: filters — the title takes the first row, the filters two per row */
@media (max-width: 640px) {
  .dash-col-header { flex-wrap: wrap; }
  .dash-col-header > div { flex: 1 1 100%; }
  .dash-col-header .global-range-wrap { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .dash-col-header .global-range-select,
  #filter-search { width: 100%; }
  #filter-search { font-size: 16px; } /* the id rule above outranks the shared 16 px rule */
}

/* ---------- Machine card (index) ---------- */
.machine-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  padding: 18px 22px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: start;
}

@media (max-width: 1100px) {
  .machine-card { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .machine-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
  }
  .mc-col-rel,
  .mc-col-hw,
  .mc-col-rate {
    display: none;
  }
  .mc-mobile-panel {
    display: block;
  }
  .mc-name {
    font-size: 15px;
  }
  .mc-rate {
    font-size: 16px;
    text-align: left;
  }
  .badge-row {
    justify-content: flex-start;
    margin-top: 8px;
  }
}

/* Mobile metrics panel (hidden on desktop) */
.mc-mobile-panel {
  display: none;
}
/* mobile: overview — shown on phones (this rule has to follow the base one
   above; the earlier copy in the 640 px block was overridden by it) */
@media (max-width: 640px) {
  .mc-mobile-panel { display: block; }
}
.mc-mobile-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.mc-mobile-metric {
  display: flex;
  flex-direction: column;
  background: var(--panel-alt);
  padding: 8px 10px;
  border-radius: 8px;
  gap: 2px;
}
.mc-mobile-metric .label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mc-mobile-metric .value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.mc-mobile-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
}

.mc-name {
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mc-name .verified {
  color: var(--ok);
  font-size: 16px;
}

.mc-host {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.mc-gpu {
  font-size: 13px;
  color: var(--text-muted);
}

.mc-col-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.mc-col-value {
  font-size: 15px;
  font-weight: 600;
}

.mc-rate {
  font-size: 22px;
  font-weight: 700;
  color: var(--ok);
  text-align: right;
}

.mc-sessions {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}

.mc-name-link {
  color: inherit;
  text-decoration: none;
}

.mc-name-link:hover {
  text-decoration: underline;
}

/* ---------- GPU occupancy squares ---------- */
.gpu-squares {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.gpu-sq {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--badge-bg);
  flex-shrink: 0;
}

.gpu-sq.D { background: var(--occ-d); }
.gpu-sq.I { background: var(--occ-i); }
.gpu-sq.R { background: var(--occ-r); }

/* ---------- Type badges (nD, nI, nR) ---------- */
.type-badges {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.badge-row {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.badge-sep {
  color: var(--border);
  font-size: 14px;
  margin: 0 2px;
}

.tbadge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--badge-bg);
}

.tbadge.D { color: var(--occ-d-text); }
.tbadge.I { color: var(--occ-i); }
.tbadge.R { color: var(--occ-r); }
/* A zero count ("0I") says nothing; keep the slot but fade it. */
.tbadge.zero { opacity: .4; }

/* ---------- Sidebar panels ---------- */
.sidebar-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.sidebar-panel .panel-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}

.sidebar-empty {
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

/* ---------- Empty states ---------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
}
.empty-state-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  opacity: 0.45;
  color: var(--text-muted);
}
.empty-state-icon svg {
  width: 100%;
  height: 100%;
}
.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.empty-state-desc {
  font-size: 13px;
  line-height: 1.5;
  max-width: 320px;
  margin-bottom: 16px;
}
.empty-state-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity .15s ease;
}
.empty-state-cta:hover {
  opacity: 0.88;
}

.activity-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.activity-item:last-child { border-bottom: none; }

.activity-time {
  font-size: 11px;
  color: var(--text-muted);
}

/* Sidebar "Alerts" panel — clamp long error messages so a single
   multi-line error (e.g. nvidia-smi XML dump) cannot blow out the layout */
.sidebar-panel .activity-item .text-err,
.sidebar-panel .activity-item.text-err {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  white-space: pre-line;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Clickable sidebar alert (wraps activity-item in <a href="/alerts">) */
.sidebar-panel a.activity-item {
  display: block;
  color: inherit;
  text-decoration: none;
  margin: 0 -8px;
  padding: 8px;
  border-radius: 6px;
  transition: background .15s ease;
}
.sidebar-panel a.activity-item:hover {
  background: rgba(var(--err-rgb), 0.08);
  text-decoration: none;
}
.sidebar-panel .activity-alert {
  border-left: 3px solid var(--err);
  background: rgba(var(--err-rgb), 0.06);
  padding-left: 10px;
  margin-left: -10px;
  margin-right: -8px;
  padding-right: 8px;
}
.sidebar-panel .activity-alert:hover {
  background: rgba(var(--err-rgb), 0.14);
}

/* ---------- Alerts page: two-column History + Activity ---------- */
.alerts-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 980px) {
  .alerts-body-grid {
    grid-template-columns: 1fr;
  }
}
.section-subtitle {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 10px;
  color: var(--text);
}
/* Heading row that visually mirrors .alerts-body-grid so
   'Alert History' and 'Recent Activity' (+ 'Time range') line up
   above their respective content columns. */
.alerts-headings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  align-items: end;
  margin: 24px 0 10px;
}
.alerts-headings-grid .section-subtitle { margin: 0; }
.alerts-activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.alerts-activity-header .global-range-wrap { margin-top: 0; }
@media (max-width: 980px) {
  .alerts-headings-grid { grid-template-columns: 1fr; }
}

/* ---------- Activity timeline (Dashboard sidebar) ---------- */
.timeline-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  position: relative;
}
.timeline-list::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 7px;
  width: 2px;
  background: var(--border);
  border-radius: 999px;
}
.timeline-item {
  position: relative;
  padding: 8px 0 8px 26px;
  min-width: 0;
}
.timeline-item + .timeline-item {
  border-top: 1px solid var(--border);
}
.timeline-dot {
  position: absolute;
  left: 1px;
  top: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--panel);
  box-shadow: 0 0 0 1px var(--border);
  z-index: 1;
  transition: transform .18s ease;
}
.timeline-item.sev-info .timeline-dot    { background: var(--accent); }
.timeline-item.sev-success .timeline-dot { background: var(--ok); }
.timeline-item.sev-warn .timeline-dot    { background: var(--warn); }
.timeline-item.sev-err .timeline-dot     { background: var(--err); }
.timeline-link {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}
.timeline-link:hover { text-decoration: none; }
.timeline-link:hover .timeline-title { color: var(--accent-strong); }
.timeline-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.timeline-item.sev-info .timeline-icon    { color: var(--accent-strong); }
.timeline-item.sev-success .timeline-icon { color: var(--ok); }
.timeline-item.sev-warn .timeline-icon    { color: var(--warn); }
.timeline-item.sev-err .timeline-icon     { color: var(--err); }
.timeline-body {
  flex: 1;
  min-width: 0;
}
.timeline-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: color .15s ease;
  line-height: 1.3;
}
/* Alert rows often carry long nvidia-smi XML dumps. Clamp them to 3 lines
   so a single event can't blow out the sidebar layout. The native title
   tooltip still shows the full text on hover. */
.timeline-item.sev-err .timeline-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-line;
}
.timeline-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.timeline-time {
  display: block;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-top: 3px;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
/* Smooth slide-in + dot pulse for newly observed entries */
@keyframes timelineSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes timelinePulseAccent {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55), 0 0 0 1px var(--border); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0),   0 0 0 1px var(--border); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0),     0 0 0 1px var(--border); }
}
@keyframes timelinePulseOk {
  0%   { box-shadow: 0 0 0 0 rgba(var(--ok-rgb), 0.55), 0 0 0 1px var(--border); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--ok-rgb), 0),   0 0 0 1px var(--border); }
  100% { box-shadow: 0 0 0 0 rgba(var(--ok-rgb), 0),     0 0 0 1px var(--border); }
}
@keyframes timelinePulseWarn {
  0%   { box-shadow: 0 0 0 0 rgba(var(--warn-rgb), 0.55), 0 0 0 1px var(--border); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--warn-rgb), 0),   0 0 0 1px var(--border); }
  100% { box-shadow: 0 0 0 0 rgba(var(--warn-rgb), 0),     0 0 0 1px var(--border); }
}
@keyframes timelinePulseErr {
  0%   { box-shadow: 0 0 0 0 rgba(var(--err-rgb), 0.55), 0 0 0 1px var(--border); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--err-rgb), 0),   0 0 0 1px var(--border); }
  100% { box-shadow: 0 0 0 0 rgba(var(--err-rgb), 0),     0 0 0 1px var(--border); }
}
.timeline-item.timeline-new { animation: timelineSlideIn .45s ease-out both; }
.timeline-item.sev-info.timeline-new .timeline-dot    { animation: timelinePulseAccent 1.2s ease-out 2; }
.timeline-item.sev-success.timeline-new .timeline-dot { animation: timelinePulseOk 1.2s ease-out 2; }
.timeline-item.sev-warn.timeline-new .timeline-dot    { animation: timelinePulseWarn 1.2s ease-out 2; }
.timeline-item.sev-err.timeline-new .timeline-dot     { animation: timelinePulseErr 1.2s ease-out 2; }

/* ---------- Tables ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead th {
  background: var(--table-header);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
}

.data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.data-table tbody tr:hover { background: var(--table-row-hover); }

/* Muted rows: agent-reported containers with no matching rental session */
.data-table tbody tr.row-muted td { opacity: .55; }

/* ---------- Status badges ---------- */
.status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.status.running { background: rgba(var(--ok-rgb), .15); color: var(--ok); }
.status.stored  { background: rgba(var(--warn-rgb), .15); color: var(--warn); }

/* Dot variant (Settings → Agent token status) */
.status.with-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status.with-dot .status-dot { background: currentColor; }
.status.online  { background: rgba(var(--ok-rgb), .15); color: var(--ok); }
.status.offline { background: rgba(var(--err-rgb), .15); color: var(--err); }
.status.neutral { background: var(--badge-bg); color: var(--text-muted); }

/* ---------- Verified badge ---------- */
.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(var(--ok-rgb), .15);
  color: var(--ok);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
}

/* ---------- Machine detail page ---------- */
.breadcrumb {
  font-size: 14px;
  margin-bottom: 16px;
}

.breadcrumb a { color: var(--link); }

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.detail-header h1 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 2px;
}

.detail-header .host-sub {
  color: var(--text-muted);
  font-size: 14px;
}

.detail-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.reliability-text {
  font-size: 14px;
  color: var(--text-muted);
}

.reliability-text strong {
  color: var(--text);
}

/* ---------- Pricing / info rows ---------- */
.info-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.info-row:last-child { border-bottom: none; }

.info-row .label { color: var(--text-muted); }
.info-row .value { font-weight: 600; }
.info-row .value.green { color: var(--ok); }
.info-row .value.warn  { color: var(--warn); }
.info-row .value.err   { color: var(--err); }

/* ---------- Tasks & Maintenance ---------- */
.task-list { display: flex; flex-direction: column; gap: 10px; }

.task-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--panel);
}

.task-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.task-title {
  font-size: 14px;
  font-weight: 600;
}

.task-priority {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.task-priority-low    { background: rgba(234,179,8,.15);   color: #ca8a04; }
.task-priority-medium { background: rgba(249,115,22,.15);  color: #ea580c; }
.task-priority-high   { background: rgba(239,68,68,.15);   color: #dc2626; }

.task-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.task-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.task-status {
  font-size: 12px;
  color: var(--text-muted);
}

.task-actions { display: flex; gap: 4px; }

.task-btn {
  background: var(--btn-bg, rgba(255,255,255,.07));
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 3px 7px;
  transition: background .15s, color .15s;
}
.task-btn:hover         { background: rgba(255,255,255,.13); color: var(--text); }
.task-btn-ok:hover      { color: var(--ok); border-color: var(--ok); }
.task-btn-del:hover     { color: var(--err); border-color: var(--err); }

/* ---------- Kanban board (maintenance page) ---------- */
.maint-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 16px;
  gap: 6px;
}

.maint-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.maint-view-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.maint-view-btn:not(.active):hover {
  background: rgba(255,255,255,.07);
  color: var(--text);
}

.kb-board {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  overflow-x: auto;
}

.kb-col {
  flex: 1;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}

.kb-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.kb-col-title {
  font-size: 11.55px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.kb-col-badge {
  font-size: 11.55px;
  font-weight: 600;
  color: var(--text-muted);
}

.kb-cards { display: flex; flex-direction: column; gap: 8px; }

.kb-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 12px 10px;
}

.kb-card-title {
  font-size: 13.65px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: 5px;
}

.kb-card-machine {
  display: block;
  font-size: 11.55px;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 8px;
}

.kb-card-machine:hover { text-decoration: underline; }

.kb-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kb-card-action {
  font-size: 11.55px;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.kb-card-action:hover { color: var(--text); }

/* ---------- Hardware specs grid ---------- */
.hw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 700px) {
  .hw-grid { grid-template-columns: 1fr; }
}

.hw-section-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.hw-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
}

.hw-row .label { color: var(--text-muted); }
.hw-row .value { font-weight: 500; }
.hw-row .value.green { color: var(--ok); }
.hw-row .value.warn  { color: var(--warn); }

/* ---------- Disk usage bar ---------- */
.usage-bar-wrap {
  margin-top: 8px;
}

.usage-bar {
  height: 8px;
  background: var(--badge-bg);
  border-radius: 4px;
  overflow: hidden;
}

.usage-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width .3s;
}

.usage-bar-label {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 2px;
}

.usage-bar-fill.vram { background: linear-gradient(90deg, var(--accent), var(--err)); }

/* ---------- Live Agent Telemetry ---------- */
.agent-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--badge-bg);
}
.agent-status .agent-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.agent-status.live  { color: #22c55e; }
.agent-status.live .agent-dot { box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.agent-status.stale { color: var(--warn); }
.agent-status.off   { color: var(--text-muted); }

.agent-sys-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 8px 0 12px;
}
.agent-sys-item { display: flex; flex-direction: column; gap: 2px; }
.agent-sys-item .label { font-size: 11px; color: var(--text-muted); }
.agent-sys-item .value { font-size: 14px; font-weight: 600; }

.agent-gpu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.agent-gpu-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--badge-bg);
}
.agent-gpu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.agent-gpu-name { font-size: 12px; font-weight: 600; }
.agent-idle { font-size: 11px; color: var(--text-muted); }
.agent-gpu-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-bottom: 10px;
}
.agent-gpu-stats .label { font-size: 11px; color: var(--text-muted); margin-right: 4px; }
.agent-gpu-stats .value { font-size: 13px; font-weight: 600; }
.agent-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin: 6px 0 2px;
}

/* ---------- Agent predictive-health flags & banner ---------- */
.agent-gpu-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.agent-flag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(148, 163, 184, .18);
  color: var(--text-muted);
}
.agent-flag.ok   { background: rgba(34, 197, 94, .15);  color: rgb(34, 197, 94); }
.agent-flag.warn { background: rgba(245, 158, 11, .15); color: rgb(245, 158, 11); }
.agent-flag.crit { background: rgba(239, 68, 68, .15);  color: rgb(239, 68, 68); }
.agent-health-banner {
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(245, 158, 11, .06);
}
.agent-health-title { font-size: 12px; font-weight: 700; margin-bottom: 6px; color: rgb(245, 158, 11); }
.agent-health-item { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 3px 0; }
.agent-health-sev {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(245, 158, 11, .18);
  color: rgb(245, 158, 11);
  min-width: 58px;
  text-align: center;
}
.agent-health-item.critical .agent-health-sev { background: rgba(239, 68, 68, .18); color: rgb(239, 68, 68); }

/* ---------- Reports page ---------- */
.report-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.report-kpi { padding: 14px 16px; }
.report-kpi-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.report-kpi-value { font-size: 24px; font-weight: 700; }
.report-kpi-note { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.report-delta { font-weight: 600; }
.report-delta.pos { color: rgb(34, 197, 94); }
.report-delta.neg { color: rgb(239, 68, 68); }

/* ---------- Session group badges (running/paused with type counts) ---------- */
.session-groups {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.session-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.session-group .sg-label {
  font-size: 13px;
  font-weight: 600;
}

.session-group .sg-label.running { color: var(--ok); }
.session-group .sg-label.paused  { color: var(--text-muted); }

/* ---------- Notification target cards ---------- */
.notif-target-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  padding: 20px;
  margin-bottom: 12px;
}

.ntc-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.ntc-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ntc-icon-discord {
  background: rgba(88, 101, 242, .15);
  color: #5865f2;
}

.ntc-icon-email {
  background: rgba(var(--accent-rgb), .15);
  color: var(--accent);
}

.ntc-icon-unknown {
  background: rgba(148, 163, 184, .15);
  color: #94a3b8;
}

.ntc-icon-monitor {
  background: rgba(var(--ok-rgb), .15);
  color: var(--ok);
}

.ntc-info {
  flex: 1;
  min-width: 0;
}

.ntc-name {
  font-size: 16px;
  font-weight: 700;
}

.ntc-service {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ntc-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch .toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--badge-bg);
  border-radius: 24px;
  transition: background .3s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform .3s, background .3s;
}

.toggle-input:checked + .toggle-slider {
  background: rgba(var(--ok-rgb), .25);
}

.toggle-input:checked + .toggle-slider::before {
  background: var(--ok);
  transform: translateX(20px);
}

/* Test button */
.btn-test {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}

.btn-test:hover {
  background: var(--badge-bg);
  color: var(--text);
  border-color: var(--accent);
}

.btn-test:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn-test.sending {
  color: var(--warn);
  border-color: var(--warn);
}

/* Target status */
.ntc-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.active { background: var(--ok); }
.status-dot.inactive { background: var(--err); }

/* Event chips */
.ntc-events {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.ntc-events-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.event-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.event-chip {
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background .15s, color .15s, opacity .15s;
  user-select: none;
}

.event-chip.subscribed {
  background: rgba(var(--ok-rgb), .12);
  color: var(--ok);
}

.event-chip.unsubscribed {
  background: var(--badge-bg);
  color: var(--text-muted);
  opacity: .55;
}

.event-chip[data-event]:hover {
  opacity: .85;
  filter: brightness(1.15);
}

/* Event legend */
.event-legend {
  display: grid;
  gap: 8px;
}

.event-legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Notification history items */
.notif-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.notif-item:last-child { border-bottom: none; }

.notif-item .ni-type {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-right: 6px;
}

.ni-type.rental_event { background: rgba(var(--accent-rgb), .15); color: var(--accent-strong); }
.ni-type.test { background: rgba(var(--warn-rgb), .15); color: var(--warn); }
.ni-type.config_change { background: rgba(var(--teal-rgb), .15); color: var(--teal); }
.ni-type.error { background: rgba(var(--err-rgb), .15); color: var(--err); }
/* A host leaving the account inventory is an error-class event, and the one
   entry in this feed a host operator must not scroll past. */
.ni-type.host_missing { background: rgba(var(--err-rgb), .15); color: var(--err); }
.ni-type.host_returned { background: rgba(var(--ok-rgb), .15); color: var(--ok); }

.notif-item .ni-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Toast */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1300;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  max-width: 380px;
}
/* mobile: toasts span the screen above the home indicator */
@media (max-width: 640px) {
  #toast-container {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-width: none;
  }
  .toast { max-width: none; }
}

.toast {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px 10px 12px;
  font-size: 13px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  animation: toastIn .25s ease-out;
  max-width: 380px;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-left-width: 3px;
  line-height: 1.4;
  transition: opacity .3s ease, transform .3s ease;
}
.toast.success { border-left: 3px solid var(--ok); }
.toast.error   { border-left: 3px solid var(--err); }
.toast.warn    { border-left: 3px solid var(--warn); }
.toast.info    { border-left: 3px solid var(--accent-strong); }
.toast-icon { flex-shrink: 0; margin-top: 1px; color: var(--text-muted); }
.toast.success .toast-icon { color: var(--ok); }
.toast.error   .toast-icon { color: var(--err); }
.toast.warn    .toast-icon { color: var(--warn); }
.toast.info    .toast-icon { color: var(--accent-strong); }
.toast-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-title { font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
.toast.success .toast-title { color: var(--ok); }
.toast.error   .toast-title { color: var(--err); }
.toast.warn    .toast-title { color: var(--warn); }
.toast.info    .toast-title { color: var(--accent-strong); }
.toast-msg { color: var(--text); font-weight: 500; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---------- Notification schedule ---------- */
.schedule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sched-body {
  transition: opacity .3s;
}

.sched-body.sched-disabled {
  opacity: .4;
  pointer-events: none;
}

.sched-section {
  margin-bottom: 16px;
}

/* Day selector pills */
.day-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.day-pill {
  cursor: pointer;
  user-select: none;
}

.day-pill .day-input {
  display: none;
}

.day-pill .day-label {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: var(--badge-bg);
  color: var(--text-muted);
  border: 2px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}

.day-pill .day-input:checked + .day-label {
  background: rgba(var(--accent-rgb), .15);
  color: var(--accent);
  border-color: var(--accent);
}

.day-pill:hover .day-label {
  background: var(--table-row-hover);
}

/* Time range inputs */
.time-range {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.time-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.time-input {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 12px;
  width: 130px;
  outline: none;
  transition: border-color .2s;
}

.time-input:focus {
  border-color: var(--accent);
}

.time-separator {
  font-size: 18px;
  color: var(--text-muted);
  padding-bottom: 8px;
}

/* Save schedule button */
.btn-save-schedule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .1s;
}

.btn-save-schedule:hover {
  background: var(--accent-strong);
}

.btn-save-schedule:active {
  transform: scale(.97);
}

.btn-save-schedule:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ---------- Gauge cards (Charts page) ---------- */
.gauge-grid {
  display: grid;
  gap: 12px;
}

.gauge-grid-5 { grid-template-columns: repeat(5, 1fr); }
.gauge-grid-7 { grid-template-columns: repeat(7, 1fr); }

@media (max-width: 1100px) {
  .gauge-grid-7 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 800px) {
  .gauge-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .gauge-grid-7 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .gauge-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .gauge-grid-7 { grid-template-columns: repeat(2, 1fr); }
}

.gauge-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  padding: 10px 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.gauge-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.gauge-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}

.gauge-value.green { color: var(--ok); }

/* Arc gauge */
.gauge-card-arc {
  padding-bottom: 4px;
}

.gauge-arc-wrap {
  position: relative;
  width: 100%;
  max-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gauge-arc-svg {
  width: 100%;
  height: auto;
}

.gauge-arc-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 12;
  stroke-linecap: round;
}

.gauge-arc-fill {
  fill: none;
  stroke: var(--ok);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 157.08;
  stroke-dashoffset: 157.08;
  transition: stroke-dashoffset 0.8s ease;
}

.gauge-arc-blue  { stroke: var(--accent); }
.gauge-arc-orange { stroke: var(--warn); }
.gauge-arc-red   { stroke: var(--err); }
.gauge-arc-green { stroke: var(--ok); }

.gauge-arc-value {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-top: 0;
  white-space: nowrap;
}

/* ---------- Charts section ---------- */
.charts-section {
  margin-top: 32px;
}

.charts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.charts-header .section-title {
  margin-bottom: 0;
}
/* mobile: charts — the subtitle and the range select wrap */
@media (max-width: 640px) {
  .charts-header { flex-wrap: wrap; row-gap: 8px; }
}


.charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.chart-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  padding: 18px 20px;
}

.chart-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
}

.chart-wrap {
  position: relative;
  height: 320px;
}

/* ---------- Fleet Status card (dashboard) ---------- */
.fleet-status-card {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 28px;
  align-items: center;
  padding: 18px 24px;
}
@media (max-width: 1200px) {
  .fleet-status-card {
    grid-template-columns: auto 1fr;
    gap: 20px;
  }
  .fleet-status-kpi { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
  .fleet-status-card { grid-template-columns: 1fr; gap: 16px; }
  .fleet-status-donut { margin: 0 auto; }
}

.fleet-status-donut {
  position: relative;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
}
.fleet-status-donut canvas {
  width: 100% !important;
  height: 100% !important;
}
.fleet-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.fleet-donut-primary {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fleet-donut-secondary {
  font-size: 15px;
  font-weight: 600;
  color: var(--ok);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.fleet-status-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}
.fs-leg-heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.fs-leg-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  transition: background .15s ease;
}
.fs-leg-item:hover { background: var(--panel-alt); }
.fs-leg-item .fs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  box-shadow: 0 0 0 2px rgba(0,0,0,.15);
}
.fs-leg-d .fs-dot    { background: var(--warn); }
.fs-leg-i .fs-dot    { background: var(--accent); }
.fs-leg-r .fs-dot    { background: var(--err); }
.fs-leg-idle .fs-dot { background: var(--text-muted); opacity: 0.55; }
.fs-leg-label {
  font-weight: 500;
  color: var(--text-muted);
}
.fs-leg-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.fleet-status-kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 12px;
  min-width: 320px;
}
@media (max-width: 900px) {
  .fleet-status-kpi { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .fleet-status-kpi { grid-template-columns: 1fr; }
}
/* mobile: overview — no fixed minimum widths inside a 312 px card, and the
   six mini KPIs two per row */
@media (max-width: 640px) {
  .fleet-status-kpi { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fleet-status-legend { min-width: 0; }
}
.fs-mini-kpi {
  display: block;
  padding: 10px 14px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .2s, background .2s, transform .2s;
}
.fs-mini-link:hover {
  border-color: var(--accent);
  background: var(--panel-hover);
  transform: translateY(-1px);
  text-decoration: none;
}
.fs-mini-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.fs-mini-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.fs-mini-value.err { color: var(--err); }
.fs-mini-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Chart glow endpoint ---------- */
.chart-glow-dot {
  --glow-rgb: 59, 130, 246;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(var(--glow-rgb));
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 10px 2px rgba(var(--glow-rgb), 0.6);
  animation: chartGlowPulse 1.8s ease-out infinite;
}
.chart-glow-dot.dim {
  opacity: 0.18;
  animation: none;
  box-shadow: none;
}
@keyframes chartGlowPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--glow-rgb), 0.75),
                     0 0 10px 2px rgba(var(--glow-rgb), 0.6); }
  60%  { box-shadow: 0 0 0 9px rgba(var(--glow-rgb), 0),
                     0 0 12px 3px rgba(var(--glow-rgb), 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(var(--glow-rgb), 0),
                     0 0 10px 2px rgba(var(--glow-rgb), 0.45); }
}

/* ---------- HTML Legend (underline style) ---------- */
.html-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  padding-top: 10px;
}

.html-legend-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  color: var(--text-muted);
  transition: opacity .2s;
  line-height: 1.3;
}

.html-legend-item:hover {
  opacity: 0.8;
}

.html-legend-item.hidden {
  opacity: 0.35;
  text-decoration: line-through;
}

.html-legend-bar {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  margin-top: 2px;
}

/* ---------- Utility ---------- */
.text-muted { color: var(--text-muted); }
.text-green { color: var(--ok); }
.text-warn  { color: var(--warn); }
.text-err   { color: var(--err); }
.text-blue-faded { color: var(--teal); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fs-sm  { font-size: 13px; }
.fs-xs  { font-size: 11px; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.gap-4 { gap: 4px; }

/* ===== Monitor Status ===== */
.mb-24 {
  margin-bottom: 24px;
}

.btn-monitor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .1s;
  color: var(--text-muted);
}

.btn-monitor:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-monitor-start {
  background: rgba(var(--ok-rgb), .12);
  color: var(--ok);
  border-color: var(--ok);
}

.btn-monitor-start:hover:not(:disabled) {
  background: rgba(var(--ok-rgb), .25);
}

.btn-monitor-stop {
  background: rgba(var(--err-rgb), .12);
  color: var(--err);
  border-color: var(--err);
}

.btn-monitor-stop:hover:not(:disabled) {
  background: rgba(var(--err-rgb), .25);
}

.btn-monitor-restart {
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent);
  border-color: var(--accent);
}

.btn-monitor-restart:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), .25);
}


/* ===== Alert cards ===== */
.alert-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  padding: 16px 20px;
  margin-bottom: 8px;
}

.alert-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.alert-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.alert-hostname {
  font-weight: 600;
  font-size: 15px;
}
/* mobile: alerts — the card header wraps instead of breaking the hostname
   in half ("fra-" / "c04") */
@media (max-width: 640px) {
  .alert-card-header { flex-wrap: wrap; row-gap: 6px; }
  .alert-card-left { flex-wrap: wrap; row-gap: 4px; }
  .alert-hostname { white-space: nowrap; }
  .alert-card-right { margin-left: auto; }
  .alert-card { padding: 14px 16px; }
}


.alert-message {
  font-size: 14px;
  padding-left: 2px;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-line;
  max-height: 9.5em;
  overflow-y: auto;
}

/* Active alerts - red accent */
.alert-active {
  border-left: 3px solid var(--err);
}

.alert-active .alert-message {
  color: var(--err);
}

/* Historical alerts - greyed out */
.alert-historical {
  opacity: 0.5;
  border-left: 3px solid var(--border);
}

.alert-historical:hover {
  opacity: 0.75;
}

/* Alert type badges */
.alert-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.alert-badge.error {
  background: rgba(var(--err-rgb), .15);
  color: var(--err);
}

.alert-badge.timeout {
  background: rgba(var(--warn-rgb), .15);
  color: var(--warn);
}

/* Alert range selector */
.alert-range-selector {
  display: flex;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  width: fit-content;
}

/* Clickable card (KPI) */
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .1s;
}

.card-link:hover {
  border-color: var(--accent);
  text-decoration: none;
  transform: translateY(-1px);
}

/* ===== Hosts Inventory page ===== */
.fleet-map-card {
  overflow: hidden;
}
.fleet-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.fleet-map-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}
.fm-legend-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.fm-legend-hint { margin-left: 4px; font-style: italic; }
.fm-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.fm-rented { background: var(--ok); }
.fm-paused { background: var(--warn); }
.fm-idle   { background: var(--accent); }
.fm-alert  { background: var(--err); }
.fleet-map {
  position: relative;
  height: 440px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #0d1524;
}
/* mobile: inventory — the "explore" button app.js adds on touch screens
   (the map takes the swipe only after it is tapped) */
.fleet-map-unlock {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 500;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}
.fleet-map .leaflet-container {
  width: 100%;
  height: 100%;
  background: #0d1524;
  font-family: inherit;
}
/* Raster fallback only: tile.openstreetmap.org has no dark style, so the tiles
   are inverted here. The filter is scoped to the tile pane on purpose — on the
   whole container it would also invert markers, popups and zoom controls. */
.fleet-map.fm-raster .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}
.fleet-map .leaflet-popup-content-wrapper,
.fleet-map .leaflet-popup-tip {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.fleet-map .leaflet-popup-content {
  margin: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
}
.fleet-map .leaflet-popup-content .fm-popup-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
}
.fleet-map .leaflet-popup-content .fm-popup-row {
  color: var(--text-muted);
}
.fleet-map .leaflet-popup-close-button { color: var(--text-muted); }
.fleet-map .leaflet-control-zoom a {
  background: var(--panel-alt);
  color: var(--text);
  border: 1px solid var(--border);
}
.fleet-map .leaflet-control-attribution {
  background: rgba(15, 23, 42, 0.65) !important;
  color: var(--text-muted) !important;
  font-size: 10px;
}
.fleet-map .leaflet-control-attribution a { color: var(--accent-strong); }
.fleet-map-missing {
  margin-top: 10px;
}

/* Inventory orderable rows wrapper */
.inv-rows-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 8px;
}

.inv-row { /* flex child of inv-rows-wrap; receives CSS order for reordering */ }

/* Hardware analysis section (CPU, RAM, DDR) */
.inv-section-header {
  margin-bottom: 16px;
}

/* Two cards per section; auto-fit lets one card take the whole row when its
   neighbour is hidden, and stacks them on narrow screens. */
.inv-hw-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 24px;
  align-items: start;
}

/* Verification badge in table */
.inv-badge-verified {
  display: inline-block;
  background: rgba(var(--ok-rgb), .15);
  color: var(--ok);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
}

.inv-badge-unverified {
  display: inline-block;
  background: rgba(var(--warn-rgb), .15);
  color: var(--warn);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
}

/* Machine card alert state */
.machine-card-alert {
}

/* Machine card status indicators (border-top controlled by user preference) */
.machine-card-offline { opacity: 0.82; }

html[data-card-borders="true"] .machine-card-ok   { border-top: 3px solid var(--ok); }
html[data-card-borders="true"] .machine-card-warn { border-top: 3px solid var(--warn); }
html[data-card-borders="true"] .machine-card-offline { border-top: 3px solid var(--text-muted); }

.mc-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  flex-shrink: 0;
}
.mc-status-dot.ok {
  background: var(--ok);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.55);
}
.mc-status-dot.warn {
  background: var(--warn);
  box-shadow: 0 0 6px rgba(234, 179, 8, 0.55);
  animation: statusPulse 2s ease-in-out infinite;
}
.mc-status-dot.offline {
  background: var(--text-muted);
  box-shadow: none;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.mc-alert-badge {
  display: inline-block;
  background: rgba(var(--err-rgb), .15);
  color: var(--err);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  animation: alertPulse 2s ease-in-out infinite;
}

.mc-alert-badge:hover {
  background: rgba(var(--err-rgb), .3);
  text-decoration: none;
}

@keyframes alertPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}


/* ===== Earnings page ===== */
.earn-breakdown {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.earn-breakdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  padding: 12px 20px;
  flex: 1;
  min-width: 160px;
}

.earn-cat-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.earn-cat-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.earn-cat-value {
  font-size: 16px;
  font-weight: 700;
  margin-left: auto;
}

.earn-import-card:hover {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, .06);
  transition: border-color .2s, background .2s;
}

/* ===== Import Earnings page ===== */
.import-back-link {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.import-back-link:hover {
  text-decoration: underline;
}

.import-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .import-layout { grid-template-columns: 1fr; }
}

.import-instructions {
  padding: 24px;
}

.import-steps {
  padding-left: 20px;
  margin: 12px 0 20px;
  line-height: 1.8;
  font-size: 14px;
  color: var(--text);
}
.import-steps li {
  margin-bottom: 8px;
}
.import-steps a {
  color: var(--accent);
  text-decoration: none;
}
.import-steps a:hover {
  text-decoration: underline;
}
.import-steps code {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.import-format-info {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.import-format-block {
  font-size: 13px;
  line-height: 1.6;
}

.import-csv-example {
  display: block;
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(0,0,0,.15);
  border-radius: 4px;
  font-size: 12px;
  font-family: monospace;
  word-break: break-all;
}
[data-theme="light"] .import-csv-example,
[data-theme="sepia"] .import-csv-example,
[data-theme="ash"] .import-csv-example {
  background: rgba(0,0,0,.05);
}

.import-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.import-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
}

.import-upload-card {
  padding: 24px;
}

.import-upload-section {
  margin-bottom: 20px;
}

.import-upload-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.import-drop-zone {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.import-drop-zone:hover,
.import-drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .05);
}
.import-drop-zone.has-file {
  border-color: var(--ok);
  border-style: solid;
}

.import-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.import-drop-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
}
.import-drop-content svg {
  opacity: .4;
}

.import-file-name {
  display: none;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ok);
}

.btn-import {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .2s;
  width: 100%;
  justify-content: center;
}
.btn-import:hover:not(:disabled) {
  opacity: .9;
}
.btn-import:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.import-result {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.import-result-success {
  background: rgba(var(--ok-rgb), .12);
  color: var(--ok);
  border: 1px solid rgba(var(--ok-rgb), .25);
}
.import-result-error {
  background: rgba(var(--err-rgb), .12);
  color: var(--err);
  border: 1px solid rgba(var(--err-rgb), .25);
}
.import-result-warn {
  background: rgba(var(--warn-rgb), .12);
  color: var(--warn);
  border: 1px solid rgba(var(--warn-rgb), .25);
}

/* ===== GPU Occupancy Matrix ===== */
.occ-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.occ-matrix thead th {
  background: var(--table-header);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 12px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.occ-matrix thead th:first-child {
  text-align: left;
  width: 100px;
}

.occ-matrix tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
}

.occ-matrix tbody td:first-child {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.occ-matrix tbody tr:first-child td {
  border-top: 1px solid var(--border);
}

.occ-matrix tbody tr:hover {
  background: var(--table-row-hover);
}

.occ-cell {
  display: inline-block;
  width: 100%;
  min-width: 60px;
  padding: 6px 4px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.occ-cell.occ-D {
  background: rgba(var(--ok-rgb), .25);
  color: var(--ok);
}

.occ-cell.occ-I {
  background: rgba(var(--accent-rgb), .25);
  color: var(--accent);
}

.occ-cell.occ-R {
  background: rgba(var(--occ-r-rgb), .25);
  color: var(--occ-r);
}

.occ-cell.occ-idle {
  background: transparent;
  color: var(--text-muted);
}

.occ-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 4px;
}

.occ-swatch.occ-D { background: rgba(var(--ok-rgb), .5); }
.occ-swatch.occ-I { background: rgba(var(--accent-rgb), .5); }
.occ-swatch.occ-R { background: rgba(var(--occ-r-rgb), .5); }
.occ-swatch.occ-idle { background: var(--badge-bg); border: 1px solid var(--border); }

/* ===== GPU Occupancy heatmap ===== */
.occ-heatmap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.occ-host-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: center;
  padding: 4px 0;
}
.occ-host-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.occ-host-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.occ-tile {
  width: 64px;
  height: 32px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--badge-bg);
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.occ-tile:hover {
  transform: translateY(-1px) scale(1.06);
  filter: brightness(1.12);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32);
  z-index: 2;
}
.occ-tile.active {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  transform: translateY(-1px);
}
.occ-tile.occ-D { background: var(--ok);     color: #06220e; }
.occ-tile.occ-I { background: var(--accent); color: #0a1126; }
.occ-tile.occ-R { background: var(--occ-r);  color: #1e0a33; }
.occ-tile.occ-idle {
  background: transparent;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}
/* mobile: charts — one row per host: 28 px tiles instead of 64 px pills that
   wrapped two per row (an 8-GPU host took four rows); scoped to the Charts
   matrix, the machine page styles its own tiles */
@media (max-width: 640px) {
  #occ-matrix .occ-host-row { grid-template-columns: 64px 1fr; gap: 8px; }
  #occ-matrix .occ-host-name { font-size: 12px; }
  #occ-matrix .occ-host-tiles { gap: 3px; }
  #occ-matrix .occ-tile { width: 26px; height: 26px; font-size: 10px; border-radius: 5px; }
}

.occ-expand {
  grid-column: 1 / -1;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 2px 0 8px;
  animation: occExpandIn .18s ease-out;
}
.occ-expand[hidden] { display: none; }
@keyframes occExpandIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.occ-expand-header {
  font-size: 13px;
  margin-bottom: 8px;
}
.occ-expand-loading,
.occ-expand-empty {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding: 10px 4px;
}
.occ-exp-track {
  position: relative;
  height: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.occ-exp-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: filter .15s ease;
  cursor: help;
}
.occ-exp-seg:hover { filter: brightness(1.25); }
.occ-exp-D    { background: rgba(var(--ok-rgb),     0.8); }
.occ-exp-I    { background: rgba(var(--accent-rgb), 0.8); }
.occ-exp-R    { background: rgba(var(--occ-r-rgb),  0.8); }
.occ-exp-idle { background: repeating-linear-gradient(45deg,
                 rgba(148, 163, 184, 0.18) 0 6px,
                 rgba(148, 163, 184, 0.32) 6px 12px); }
.occ-exp-axis {
  position: relative;
  height: 14px;
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.occ-exp-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
.occ-exp-tick:first-child { transform: translateX(0); }
.occ-exp-tick:last-child  { transform: translateX(-100%); }
.occ-exp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
}
.occ-exp-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.occ-D-text    { color: var(--ok); }
.occ-I-text    { color: var(--accent); }
.occ-R-text    { color: var(--occ-r); }
.occ-idle-text { color: var(--text-muted); }

.occ-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  padding: 10px 4px 2px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.occ-foot-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 700;
}
.occ-foot-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.occ-foot-item strong {
  font-size: 16px;
  font-weight: 700;
}

/* ===== Fleet Temperature heatmap ===== */
.temp-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 12px;
}
.temp-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text-muted);
}
.temp-leg-swatch {
  width: 18px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.temp-cool { background: rgb(34, 197, 94); }
.temp-warm { background: rgb(245, 158, 11); }
.temp-hot  { background: rgb(239, 68, 68); }
.temp-leg-hint { margin-left: auto; font-style: italic; }

.temp-heatmap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.temp-tile {
  height: 48px;
  min-width: 64px;
  padding: 6px 10px;
  border-radius: 8px;
  color: #0b1020;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  cursor: help;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.temp-tile:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  filter: brightness(1.08);
  z-index: 2;
}
.temp-tile-host {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.temp-tile-val {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.temp-tile-sub {
  font-size: 10px;
  opacity: 0.78;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.temp-empty {
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  padding: 14px 6px;
}

/* ===== Actual vs theoretical revenue summary ===== */
.rev-max-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  margin: 2px 0 10px;
}
.rev-max-summary-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  font-weight: 700;
}
#rev-max-lost {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--err);
  font-variant-numeric: tabular-nums;
}
.rev-max-pct {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--err-rgb), 0.15);
  color: var(--err);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* ===== Calendar heatmap (GitHub-style) ===== */
.cal-heatmap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cal-summary {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.cal-scale {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}
.cal-scale-label { color: var(--text-muted); }
.cal-scale-box {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(148, 163, 184, 0.15);
}
.cal-lvl-0 { background: rgba(148, 163, 184, 0.12); }
.cal-lvl-1 { background: rgba(var(--accent-rgb), 0.22); }
.cal-lvl-2 { background: rgba(var(--accent-rgb), 0.45); }
.cal-lvl-3 { background: rgba(var(--accent-rgb), 0.70); }
.cal-lvl-4 { background: rgb(var(--accent-rgb));      }

/* --cal-weeks week columns: 53 (the last 12 months), or on Charts as many as
   app.js fits at the full 14px (its CAL_AXIS_PX and CAL_COLUMN_PX mirror the
   sizes here). The day cell shrinks from 14px to 10px so the columns fit the
   card on a laptop screen; only below that does the grid scroll. 38px is the
   weekday axis plus its gap; each column takes its cell and a 2px gap, the
   last gap being slack for sub-pixel rounding. overflow-y is spelled out
   because overflow-x alone turns it to auto, and the pixel of glyph below
   the month totals then drew a vertical scrollbar. */
.cal-heatmap-wrap {
  container-type: inline-size;
  --cal-weeks: 53;
  --cal-cell: clamp(10px, calc((100cqi - 38px) / var(--cal-weeks) - 2px), 14px);
  display: grid;
  grid-template-columns: 32px auto;
  gap: 6px;
  align-items: start;
  justify-content: start;
  overflow-x: auto;
  overflow-y: hidden;
}
/* mobile: the 53-week calendar scrolls sideways — shadows hint at it and
   app.js starts it at the newest weeks */
@media (max-width: 640px) {
  .cal-heatmap-wrap {
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--panel) 40%, rgba(0, 0, 0, 0)) left / 32px 100% no-repeat local,
      linear-gradient(to left, var(--panel) 40%, rgba(0, 0, 0, 0)) right / 32px 100% no-repeat local,
      linear-gradient(to right, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0)) left / 12px 100% no-repeat scroll,
      linear-gradient(to left, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0)) right / 12px 100% no-repeat scroll;
  }
}
.cal-dow-axis {
  display: grid;
  grid-template-rows: repeat(7, var(--cal-cell));
  row-gap: 2px;
  font-size: 10px;
  color: var(--text-muted);
  padding-top: 16px; /* the month row and the gap below it */
}
.cal-dow-axis span {
  line-height: var(--cal-cell);
}
.cal-heatmap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* line-height 1.2 is Inter's glyph box: at 1 the labels clipped the
   descenders of "Apr", "May", "Aug" and "Sep". */
.cal-month-row {
  display: grid;
  grid-template-columns: repeat(var(--cal-weeks), var(--cal-cell));
  column-gap: 2px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.2;
}
.cal-month-row span { overflow: hidden; white-space: nowrap; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(var(--cal-weeks), var(--cal-cell));
  grid-template-rows: repeat(7, var(--cal-cell));
  grid-auto-flow: column;
  column-gap: 2px;
  row-gap: 2px;
}
.cal-cell {
  width: var(--cal-cell);
  height: var(--cal-cell);
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.08);
  cursor: help;
  transition: transform .12s ease, box-shadow .12s ease;
}
.cal-cell:hover {
  transform: scale(1.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 2;
}
.cal-cell.cal-empty { background: transparent; pointer-events: none; }
.cal-cell.cal-lvl-0 { background: rgba(148, 163, 184, 0.12); }
.cal-cell.cal-lvl-1 { background: rgba(var(--accent-rgb), 0.22); }
.cal-cell.cal-lvl-2 { background: rgba(var(--accent-rgb), 0.45); }
.cal-cell.cal-lvl-3 { background: rgba(var(--accent-rgb), 0.70); }
.cal-cell.cal-lvl-4 { background: rgb(var(--accent-rgb));      }
.cal-cell.cal-today { outline: 2px solid var(--accent-strong); outline-offset: 1px; }

/* ===== Machine Online Status Gantt ===== */
.online-gantt-header {
  display: grid;
  grid-template-columns: 96px 1fr 88px;
  grid-template-areas:
    "legend legend legend"
    "spacer axis   uptime";
  gap: 6px 12px;
  align-items: center;
  margin: 4px 0 10px;
}
.online-gantt-header .temp-heatmap-legend { grid-area: legend; margin: 0; }
.online-leg-online  { background: var(--ok); }
.online-leg-offline { background: var(--err); }
.online-leg-nodata  { background: rgba(148, 163, 184, 0.55); }
/* GPU Occupancy legend swatches (match the bright occupancy tiles below) */
.occ-leg-D    { background: var(--ok); }
.occ-leg-I    { background: var(--accent); }
.occ-leg-R    { background: var(--occ-r); }
.occ-leg-idle { background: transparent; border: 1px dashed rgba(148, 163, 184, 0.45); }
.gantt-axis {
  position: relative;
  grid-area: axis;
  height: 14px;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.gantt-tick {
  position: absolute;
  transform: translateX(-50%);
  top: 0;
  white-space: nowrap;
}
.gantt-tick:first-child { transform: translateX(0); }
.gantt-tick:last-child  { transform: translateX(-100%); }

.online-gantt {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gantt-row {
  display: grid;
  grid-template-columns: 96px 1fr 88px;
  gap: 12px;
  align-items: center;
  padding: 3px 0;
}
.gantt-host {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* mobile: charts — narrower name and uptime columns leave the bar its width */
@media (max-width: 640px) {
  .gantt-row,
  .online-gantt-header { grid-template-columns: 68px 1fr 60px; gap: 6px; }
  .gantt-host { font-size: 11px; }
}
.gantt-track {
  position: relative;
  height: 22px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.gantt-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: filter .15s ease;
  cursor: help;
}
.gantt-seg-online  { background: var(--ok); }
.gantt-seg-offline {
  background: repeating-linear-gradient(
    45deg,
    rgba(var(--err-rgb), 0.78) 0 6px,
    rgba(var(--err-rgb), 0.95) 6px 12px
  );
}
.gantt-seg-nodata {
  background: repeating-linear-gradient(
    45deg,
    rgba(148, 163, 184, 0.22) 0 6px,
    rgba(148, 163, 184, 0.38) 6px 12px
  );
}
.gantt-seg:hover { filter: brightness(1.25); }

.gantt-uptime {
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
}
.gantt-uptime-ok   { color: var(--ok);   border-color: rgba(var(--ok-rgb), .35);   background: rgba(var(--ok-rgb), .08); }
.gantt-uptime-warn { color: var(--warn); border-color: rgba(var(--warn-rgb), .35); background: rgba(var(--warn-rgb), .08); }
.gantt-uptime-err  { color: var(--err);  border-color: rgba(var(--err-rgb), .35);  background: rgba(var(--err-rgb), .08); }
.gantt-uptime-nodata { color: var(--text-muted); border-color: rgba(148, 163, 184, .35); background: rgba(148, 163, 184, .08); }

/* ===== Global time range dropdown ===== */
.global-range-wrap {
  display: flex;
  align-items: center;
  margin-top: 8px;
}
/* mobile: toolbars wrap instead of pushing the page wider (the Pricing
   demand-curve toolbar was 545 px on a 390 px phone) */
@media (max-width: 640px) {
  .global-range-wrap { flex-wrap: wrap; row-gap: 8px; min-width: 0; max-width: 100%; }
}

.global-range-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 32px 6px 12px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M3 4.5L6 8l3-3.5H3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.global-range-select:hover {
  border-color: var(--accent);
}

.global-range-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .25);
}
/* mobile: 16 px fields — iOS Safari zooms the page into any smaller field on
   focus and leaves it zoomed */
@media (max-width: 640px) {
  .page-wrap input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  .page-wrap select,
  .page-wrap textarea,
  .rh-dialog input,
  .rh-dialog select,
  .rh-dialog textarea { font-size: 16px; }
}
/* mobile: checkboxes and radios big enough to tap */
@media (pointer: coarse) and (max-width: 1023px) {
  .page-wrap input[type=checkbox]:not(.toggle-input),
  .page-wrap input[type=radio] { width: 20px; height: 20px; }
  /* small action buttons (Test now, Revoke, Uninstall, + Add …) */
  .page-wrap .btn,
  .page-wrap .btn-sm,
  .page-wrap .btn-xs,
  .page-wrap .btn-test,
  .page-wrap .btn-monitor,
  .page-wrap .inv-btn-sm,
  .page-wrap .btn-add-tag,
  .page-wrap .perf-range-btn { min-height: 36px; }
}
/* mobile: what-if and timeline sliders get a taller hit area */
@media (pointer: coarse) and (max-width: 1023px) {
  .page-wrap input[type=range] { height: 28px; }
}

/* ============================================================
   Neon theme (deep-space premium) — visual overrides
   ============================================================ */

[data-theme="neon"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 8% 0%, rgba(129, 140, 248, 0.20), transparent 45%),
    radial-gradient(circle at 92% 100%, rgba(168, 85, 247, 0.16), transparent 45%),
    radial-gradient(circle at 50% 55%, rgba(34, 211, 238, 0.06), transparent 60%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  background-attachment: fixed;
}

[data-theme="neon"] .header {
  background: rgba(29, 40, 79, 0.55);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid transparent;
  box-shadow:
    0 1px 0 0 rgba(168, 85, 247, 0.28),
    0 8px 32px rgba(30, 20, 80, 0.35);
}

[data-theme="neon"] .card,
[data-theme="neon"] .earn-breakdown-item,
[data-theme="neon"] .sidebar-panel,
[data-theme="neon"] .notif-target-card {
  background: linear-gradient(180deg, rgba(50, 65, 109, 0.70) 0%, rgba(32, 47, 92, 0.76) 100%);
  border: 1px solid rgba(148, 163, 220, 0.18);
  box-shadow:
    0 18px 44px -12px rgba(30, 20, 80, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

[data-theme="neon"] .machine-card {
  background: linear-gradient(180deg, rgba(50, 65, 109, 0.70) 0%, rgba(32, 47, 92, 0.76) 100%);
  border: 1px solid rgba(148, 163, 220, 0.18);
  box-shadow:
    0 18px 44px -12px rgba(30, 20, 80, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

[data-theme="neon"] .card-link:hover,
[data-theme="neon"] .machine-card:hover {
  border-color: rgba(168, 85, 247, 0.38);
  box-shadow:
    0 22px 52px -8px rgba(129, 140, 248, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

[data-theme="neon"] .machine-card.machine-card-alert {
  box-shadow:
    0 18px 44px -12px rgba(200, 40, 40, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* KPI large numbers — soft luminous gradient */
[data-theme="neon"] .card-value:not(.err):not(.green):not(.warn) {
  background: linear-gradient(180deg, #f5f7ff 0%, #c7cfff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-theme="neon"] .page-title {
  background: linear-gradient(90deg, #e2e8ff 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* GPU occupancy tiles — neon glow */
[data-theme="neon"] .gpu-sq.D { box-shadow: 0 0 10px rgba(var(--ok-rgb), 0.55); }
[data-theme="neon"] .gpu-sq.I { box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.60); }
[data-theme="neon"] .gpu-sq.R { box-shadow: 0 0 10px rgba(var(--occ-r-rgb), 0.55); }

/* Gauge arcs — subtle accent glow */
[data-theme="neon"] .gauge-arc-fill {
  filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.55));
}

/* Sidebar — same luminous glass as the header */
[data-theme="neon"] .app-sidebar {
  background: rgba(29, 40, 79, 0.55);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-right: 1px solid transparent;
  box-shadow:
    1px 0 0 0 rgba(168, 85, 247, 0.28),
    8px 0 32px rgba(30, 20, 80, 0.35);
}

/* Nav active item — gradient pill with accent edge */
[data-theme="neon"] .side-nav a.active {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.20), rgba(168, 85, 247, 0.18));
  box-shadow: inset 2px 0 0 rgba(168, 85, 247, 0.70);
}

/* Live badge — neon glow */
[data-theme="neon"] .live-badge {
  box-shadow: 0 0 12px rgba(var(--ok-rgb), 0.15);
}
[data-theme="neon"] .live-badge.offline {
  box-shadow: 0 0 12px rgba(var(--err-rgb), 0.15);
}
[data-theme="neon"] .conn-dot {
  box-shadow: 0 0 6px rgba(var(--ok-rgb), 0.9);
}
[data-theme="neon"] .conn-dot.disconnected {
  box-shadow: 0 0 6px rgba(var(--err-rgb), 0.9);
}

/* Verified badges glow */
[data-theme="neon"] .verified,
[data-theme="neon"] .badge-verified {
  filter: drop-shadow(0 0 4px rgba(var(--ok-rgb), 0.5));
}

/* Data table hover */
[data-theme="neon"] .data-table tbody tr:hover {
  background: rgba(129, 140, 248, 0.08);
}

/* Logo wordmark extra glow in neon */
[data-theme="neon"] .logo-wordmark .logo-accent {
  filter: drop-shadow(0 0 8px rgba(242, 169, 59, 0.45));
}

/* Type badges — subtle glow */
[data-theme="neon"] .tbadge.D { box-shadow: 0 0 6px rgba(var(--ok-rgb), 0.35); }
[data-theme="neon"] .tbadge.I { box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.35); }
[data-theme="neon"] .tbadge.R { box-shadow: 0 0 6px rgba(var(--occ-r-rgb), 0.35); }

/* Alert badges more vivid */
[data-theme="neon"] .mc-alert-badge {
  box-shadow: 0 0 10px rgba(var(--err-rgb), 0.45);
}

/* ============================================================
   Skeleton screens
   ============================================================ */
@keyframes skeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--panel-alt) 25%, var(--panel-hover) 50%, var(--panel-alt) 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.skeleton-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .skeleton-card { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .skeleton-card { grid-template-columns: 1fr; }
}
.skeleton-block {
  height: 16px;
  margin-bottom: 8px;
}
.skeleton-block-sm { height: 12px; width: 60%; }
.skeleton-block-lg { height: 24px; width: 80%; }
.skeleton-squares {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.skeleton-square {
  width: 22px;
  height: 22px;
  border-radius: 4px;
}
.skeleton-timeline {
  position: relative;
  padding: 8px 0 8px 26px;
  min-width: 0;
}
.skeleton-timeline + .skeleton-timeline {
  border-top: 1px solid var(--border);
}
.skeleton-timeline::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 7px;
  width: 2px;
  background: var(--border);
  border-radius: 999px;
}
.skeleton-dot {
  position: absolute;
  left: 1px;
  top: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--border);
}

/* ============================================================
   Global sticky alert banner
   ============================================================ */
.alert-banner {
  position: sticky;
  top: 56px;
  z-index: 99;
  background: rgba(var(--err-rgb), 0.12);
  border-bottom: 1px solid rgba(var(--err-rgb), 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--err);
  animation: alertBannerSlideIn 0.3s ease-out;
}
.alert-banner[hidden] { display: none; }
@keyframes alertBannerSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.alert-banner-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.alert-banner-link {
  color: var(--err);
  text-decoration: underline;
  font-weight: 700;
}
.alert-banner-link:hover {
  opacity: 0.8;
}
@media (pointer: coarse) and (max-width: 1023px) {
  .alert-banner-link { padding: 10px 6px; margin: -10px -6px; } /* mobile: tap target */
}
/* mobile: phone in landscape — the sticky header and banner took a quarter
   of the 390 px height; the banner stays at the top of the page instead */
@media (max-width: 900px) and (max-height: 600px) {
  .alert-banner { position: static; }
}

/* ============================================================
   Fleet Health Score (hero banner)
   ============================================================ */
.hero-banner.has-health {
  grid-template-columns: 1fr minmax(180px, 240px) minmax(280px, 520px);
}
@media (max-width: 1060px) {
  .hero-banner.has-health {
    grid-template-columns: 1fr minmax(180px, 240px);
  }
  .hero-banner.has-health .hero-sparkline { display: none; }
}
@media (max-width: 720px) {
  .hero-banner.has-health {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hero-health {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 16px;
    align-items: flex-start;
    flex-direction: row;
    gap: 12px;
  }
  .health-grade { font-size: 36px; }
}
.hero-health {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border);
  padding-left: 24px;
  gap: 4px;
}
.health-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.2;
}
.health-grade {
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.health-grade.health-a { color: var(--ok); }
.health-grade.health-b { color: var(--warn); }
.health-grade.health-c { color: #f97316; }
.health-grade.health-f { color: var(--err); }
.health-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   Machine Tags
   ============================================================ */
.mc-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.mc-tags-row:empty { display: none; }

/* Tag position toggle via data-tag-alignment attribute on <html> */
:root[data-tag-alignment="center"] .mc-tags-left  { display: none; }
:root[data-tag-alignment="left"]   .mc-tags-center { display: none; }
:root[data-tag-alignment="off"]    .mc-tags-left,
:root[data-tag-alignment="off"]    .mc-tags-center { display: none; }
/* Default (no attribute yet): show center, hide left */
:root:not([data-tag-alignment="left"]) .mc-tags-left { display: none; }

.tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: default;
  user-select: none;
}
.tag-badge.removable {
  cursor: pointer;
  transition: opacity .15s;
}
.tag-badge.removable:hover { opacity: 0.75; }
.tag-badge .tag-x {
  font-size: 13px;
  line-height: 1;
  opacity: 0.65;
  margin-left: 1px;
}

/* Tags panel in machine detail sidebar */
.tags-current {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  min-height: 22px;
}
.tags-empty {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* Add-tag row */
.add-tag-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.add-tag-select {
  flex: 1;
  min-width: 0;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  cursor: pointer;
}
.add-tag-select:focus { border-color: var(--accent); }
.btn-add-tag {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-add-tag:hover { opacity: 0.88; }
.btn-add-tag:disabled { opacity: 0.45; cursor: not-allowed; }

/* Inline create-tag form */
.create-tag-form {
  margin-top: 10px;
  padding: 12px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.create-tag-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.create-tag-input {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 9px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.create-tag-input:focus { border-color: var(--accent); }
.tag-swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 2px 0;
}
.tag-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .1s, border-color .1s, box-shadow .1s;
  flex-shrink: 0;
  box-sizing: content-box;
}
.tag-swatch:hover { transform: scale(1.15); }
.tag-swatch.selected {
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--panel-alt);
}
.create-tag-btns {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.btn-save-tag {
  background: var(--ok);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-save-tag:hover { opacity: 0.88; }
.btn-cancel-tag {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.btn-cancel-tag:hover { color: var(--text); }
.btn-color-tag {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.btn-color-tag:hover { border-color: var(--text-muted); transform: scale(1.1); }

/* Floating color picker popover (settings → tags) */
.tag-color-popover {
  position: absolute;
  z-index: 1000;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 220px;
}
.tag-color-popover-title {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tag-color-popover .tag-swatches { gap: 8px; }
.btn-rename-tag {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 6px;
}
.btn-rename-tag:hover { color: var(--text); border-color: var(--text-muted); }
.btn-delete-tag {
  background: var(--err);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-delete-tag:hover { opacity: 0.88; }

/* ===== Inventory section reorder (settings) ===== */
.tile-sort-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tile-sort-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: grab;
  user-select: none;
  transition: background .15s, border-color .15s, opacity .15s;
}

.tile-sort-item:hover {
  background: var(--hover);
}

.tile-sort-item.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.tile-sort-item.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.tile-sort-handle {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
}

.tile-sort-info { flex: 1; min-width: 0; }

.tile-sort-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.tile-sort-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.tile-sort-idx {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-reset-order {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .15s, color .15s;
}

.btn-reset-order:hover {
  background: var(--hover);
  color: var(--text);
}

/* ===== Streamer mode ===== */
/* Sensitive values (emails, IP addresses, machine ids) are wrapped in .sens;
   turning streamer mode on blurs them so they are safe to screen-share. */
html[data-streamer="on"] .sens {
  filter: blur(5px);
  user-select: none;
}
html[data-streamer="on"] input.sens,
html[data-streamer="on"] pre.sens {
  filter: blur(4px);
}

/* ===== Machine detail: Performance Charts ===== */
.perf-charts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.perf-range-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.perf-range-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-right: 4px;
}
.perf-range-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.perf-range-btn:hover {
  color: var(--text);
  background: var(--panel-hover);
}
.perf-range-btn.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.perf-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 1100px) {
  .perf-charts-grid { grid-template-columns: 1fr; }
}
.perf-chart-panel .chart-title {
  margin-bottom: 8px;
}
.perf-chart-wrap {
  position: relative;
  height: 260px;
}
.perf-chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px;
}

/* ---------- Charts page: machine trend tiles + fleet occupancy stream ---------- */
.trend-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.trend-tile {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px 6px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.trend-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.trend-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.trend-tile.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.trend-tile.offline { border-style: dashed; }
.trend-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.trend-tile-host {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trend-tile-gpus {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 5px;
}
.trend-tile-gpus.off { color: var(--err); border-color: var(--err); }
.trend-tile-val {
  font-size: 17px;
  font-weight: 700;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.trend-tile-delta {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.trend-tile-delta.up { color: var(--ok); }
.trend-tile-delta.dn { color: var(--err); }
.trend-tile svg { display: block; width: 100%; height: 34px; margin-top: 4px; }
.trend-focus {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.trend-focus-head {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.trend-focus-head .chart-title { flex: 1 1 auto; }
.trend-leg-host { background: var(--accent); }
.trend-leg-median { background: var(--text-muted); }
.stream-leg-event {
  background: transparent;
  border-top: 2px dashed var(--warn);
  height: 0;
}
.chart-brush-host { cursor: crosshair; user-select: none; touch-action: pan-y; }
.chart-brush {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(var(--accent-rgb), 0.16);
  border-left: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  pointer-events: none;
}
.chart-empty {
  text-align: center;
  padding: 24px 12px;
}
@media (max-width: 640px) {
  .trend-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
}

/* ---------- Charts page: thermal timeline (host × time) ---------- */
.temp-timeline {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 92px;
  gap: 3px 8px;
  align-items: center;
}
.temp-tl-host {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.temp-tl-cells {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.temp-tl-cell {
  height: 14px;
  border-radius: 2px;
  cursor: help;
}
.temp-tl-cell.nodata {
  background: transparent;
  border: 1px dashed rgba(148, 163, 184, 0.28);
}
.temp-tl-cell.offline { background: rgba(148, 163, 184, 0.28); }
.temp-tl-cell:hover { outline: 2px solid var(--text); outline-offset: -1px; }
.temp-tl-now {
  height: 26px;
  border-radius: 6px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: #0b1020;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: help;
}
.temp-tl-now small {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.8;
}
.temp-tl-now.nodata {
  background: transparent;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  color: var(--text-muted);
}
.temp-tl-axis {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.temp-leg-offline { background: rgba(148, 163, 184, 0.35); }
.temp-leg-nodata { background: transparent; border: 1px dashed rgba(148, 163, 184, 0.45); }

/* ---------- Charts page: lost potential (KPIs + per-machine breakdown) ---------- */
.lp-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 2px 0 14px;
}
.lp-kpi {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.lp-kpi-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lp-kpi-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.lp-kpi-value.lp-leak { color: var(--warn); }
.lp-kpi-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.lp-kpi-sub strong { color: var(--text); font-variant-numeric: tabular-nums; }
.lp-kpi-sub #rev-max-lost { font-size: 12px; font-weight: 700; color: var(--err); }
.lp-leg-idle { background: #64748b; }
.lp-leg-offline { background: var(--err); }
.lp-leg-discount { background: var(--warn); }
.lp-chart-wrap { height: 240px; }
@media (max-width: 720px) {
  .lp-kpis { grid-template-columns: 1fr; }
  .temp-timeline { grid-template-columns: 56px minmax(0, 1fr) 70px; }
}
/* mobile: charts — the thermal timeline's value column ("86°C 4× GPU") was cut
   at the card edge; smaller type in the name and value columns */
@media (max-width: 640px) {
  .temp-timeline { grid-template-columns: 60px minmax(0, 1fr) 64px; gap: 3px 6px; }
  .temp-tl-host { font-size: 10px; }
  .temp-tl-now {
    height: auto; min-height: 26px; padding: 2px 6px; gap: 0;
    flex-direction: column; align-items: flex-start; justify-content: center;
    font-size: 10px; line-height: 1.15;
  }
}

/* ---------- Charts page: status-page uptime (one bar per day) ---------- */
.uptime-days {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 84px;
  gap: 6px 10px;
  align-items: center;
}
.uptime-host {
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uptime-bars {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.uptime-bar {
  height: 22px;
  border-radius: 2px;
  cursor: help;
}
.uptime-bar.ok { background: var(--ok); }
.uptime-bar.warn { background: var(--warn); }
.uptime-bar.err { background: var(--err); }
.uptime-bar.nodata {
  background: transparent;
  border: 1px dashed rgba(148, 163, 184, 0.28);
}
.uptime-bar:hover { outline: 2px solid var(--text); outline-offset: -1px; }
.uptime-pct {
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  cursor: help;
}
.uptime-pct b { color: var(--text); }
.uptime-pct.warn b { color: var(--warn); }
.uptime-pct.err b { color: var(--err); }
.uptime-axis {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
}
.uptime-summary {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
.uptime-summary .uptime-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok);
  display: inline-block;
  flex: none;
}
.uptime-leg-ok { background: var(--ok); }
.uptime-leg-warn { background: var(--warn); }
.uptime-leg-err { background: var(--err); }

/* ---------- Inventory: I/O profile (internet link, disk, PCIe) ---------- */
.io-profile svg { width: 100%; height: auto; display: block; }
.io-profile text { font-family: 'Inter', sans-serif; font-size: 11px; fill: var(--text-muted); }
.io-profile text.io-host { fill: var(--text); font-weight: 600; }
.io-profile text.io-col { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: 10px; }
.io-profile line.io-rail { stroke: var(--border); }
.io-profile line.io-threshold { stroke: var(--warn); stroke-dasharray: 4 3; }
.io-profile .io-row-hit { fill: transparent; cursor: help; }
.io-profile .io-row-hit:hover { fill: rgba(var(--accent-rgb), 0.08); }
.io-profile .io-span { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.io-profile .io-dot { stroke: var(--bg-card); stroke-width: 2; }
.io-profile .io-dot-down { fill: var(--accent); }
.io-profile .io-dot-up { fill: rgba(var(--accent-rgb), .45); }
.io-profile .io-flag { fill: var(--warn); }
.io-leg-down { background: var(--accent); border-radius: 50%; width: 10px; height: 10px; }
.io-leg-up { background: rgba(var(--accent-rgb), 0.45); border-radius: 50%; width: 10px; height: 10px; }
.io-leg-flag { background: var(--warn); border-radius: 50%; width: 10px; height: 10px; }

/* ---------- Inventory: Disk health (SMART per disk, static/disk_health.js) ----------
   Four status tokens: ok / watch / warning / critical. "warning" is mixed from
   the theme's amber and red so the four stay distinct in every theme, and
   each status also has its own marker shape (circle, diamond, triangle,
   square), so none of them rides on colour alone. */
.dh-card {
  --dh-ok: var(--ok);
  --dh-watch: var(--warn);
  --dh-warning: #ea6a2a;
  --dh-critical: var(--err);
}
/* mobile: inventory — the I/O profile keeps its 960 px drawing and scrolls
   sideways instead of shrinking to unreadable 4 px text */
@media (max-width: 640px) {
  .io-profile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--panel) 40%, rgba(0, 0, 0, 0)) left / 32px 100% no-repeat local,
      linear-gradient(to left, var(--panel) 40%, rgba(0, 0, 0, 0)) right / 32px 100% no-repeat local,
      linear-gradient(to right, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0)) left / 12px 100% no-repeat scroll,
      linear-gradient(to left, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0)) right / 12px 100% no-repeat scroll;
  }
  .io-profile svg { min-width: 760px; }
}
@supports (color: color-mix(in srgb, red, blue)) {
  .dh-card { --dh-warning: color-mix(in srgb, var(--warn) 40%, var(--err)); }
}
.disk-health { position: relative; }
.dh-s-ok { fill: var(--dh-ok); }
.dh-s-watch { fill: var(--dh-watch); }
.dh-s-warning { fill: var(--dh-warning); }
.dh-s-critical { fill: var(--dh-critical); }
.dh-icon { width: 11px; height: 11px; flex: none; display: inline-block; vertical-align: -1px; }
.dh-icon .dh-mk { stroke: none; }

.dh-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 1280px) { .dh-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dh-tile {
  min-width: 0;
  padding: 10px 12px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dh-tile-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.dh-tile-value { font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--text); }
.dh-tile-sub { margin-top: 2px; font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }

.dh-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.dh-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.dh-chip b { color: var(--text); font-variant-numeric: tabular-nums; }
.dh-chip:hover:not(:disabled) { background: var(--panel-hover); }
.dh-chip.is-active { color: var(--text); background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .55); }
.dh-chip:disabled { opacity: .45; cursor: default; }
.dh-chip:focus-visible,
.dh-sort:focus-visible,
.dh-more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dh-chart-wrap { position: relative; }
.dh-svg { display: block; width: 100%; height: auto; }
.dh-svg text { font-family: 'Inter', sans-serif; font-size: 11px; fill: var(--text-muted); }
.dh-svg text.dh-col { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.dh-svg text.dh-tick { font-size: 10px; font-variant-numeric: tabular-nums; }
.dh-svg text.dh-host { fill: var(--text); font-weight: 600; }
.dh-svg tspan.dh-dev { fill: var(--text-muted); font-weight: 400; }
.dh-svg text.dh-val { fill: var(--text); font-variant-numeric: tabular-nums; }
.dh-svg text.dh-na { font-style: italic; }
.dh-svg .dh-grid { stroke: var(--border); stroke-width: 1; }
.dh-svg .dh-thr { stroke-width: 1.5; stroke-dasharray: 4 3; }
.dh-svg .dh-thr-watch { stroke: var(--dh-watch); }
.dh-svg .dh-thr-warning { stroke: var(--dh-warning); }
.dh-svg .dh-track { fill: rgba(var(--accent-rgb), .13); }
.dh-svg .dh-bar { fill: var(--accent); }
.dh-svg .dh-temp-axis { stroke: var(--border); stroke-width: 1; }
.dh-svg .dh-temp-range { stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; opacity: .5; }
.dh-svg .dh-temp-max { stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; }
.dh-svg .dh-temp-dot,
.dh-svg .dh-mk { stroke: var(--bg-card); stroke-width: 2; }
.dh-svg .dh-hit { fill: transparent; }
.dh-svg .dh-row { outline: none; }
.dh-svg .dh-row:hover .dh-hit,
.dh-svg .dh-row:focus .dh-hit { fill: rgba(var(--accent-rgb), .08); }
.dh-svg .dh-row:focus-visible .dh-hit { stroke: var(--accent); stroke-width: 1; }
.dh-svg .dh-row-stale { opacity: .6; }

.dh-tip {
  position: absolute;
  z-index: 5;
  max-width: 330px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  pointer-events: none;
}
.dh-tip[hidden] { display: none; }
.dh-tip-head { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.dh-tip-sub { margin-bottom: 4px; font-size: 11px; }
.dh-tip-line strong { color: var(--text); font-variant-numeric: tabular-nums; }
.dh-tip-issue { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; color: var(--text); }

.dh-more { text-align: center; }
.dh-more-btn {
  padding: 4px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--link);
  background: none;
  border: none;
  cursor: pointer;
}
.dh-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 6px 0 14px;
  font-size: 11px;
  color: var(--text-muted);
}
.dh-leg { display: inline-flex; align-items: center; gap: 6px; }
.dh-sw { display: inline-block; flex: none; }
.dh-sw-bar { width: 18px; height: 8px; background: var(--accent); border-radius: 0 3px 3px 0; }
.dh-sw-thr { width: 0; height: 12px; border-left: 2px dashed; }
.dh-sw-thr.dh-thr-watch { border-left-color: var(--dh-watch); }
.dh-sw-thr.dh-thr-warning { border-left-color: var(--dh-warning); }
.dh-sw-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dh-ok); }
.dh-sw-tick { width: 2px; height: 10px; border-radius: 1px; background: var(--text-muted); }

.dh-table-wrap { overflow-x: auto; container-type: inline-size; }
.dh-table td { vertical-align: top; }
.dh-table th.num,
.dh-table td.num { text-align: right; }
.dh-sort {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
.dh-sort.is-active { color: var(--text); }
.dh-sort-arrow { font-size: 9px; }
.dh-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.dh-model { font-weight: 600; color: var(--text); white-space: nowrap; }
.dh-sub { margin-top: 2px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.dh-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dh-num .dh-icon { margin-right: 5px; }
.dh-meter { width: 64px; height: 5px; margin: 4px 0 0 auto; overflow: hidden; background: rgba(var(--accent-rgb), .15); border-radius: 3px; }
.dh-meter span { display: block; height: 100%; background: var(--accent); border-radius: 0 3px 3px 0; }
.dh-muted { color: var(--text-muted); }
.dh-table thead th,
.dh-table tbody td { padding: 8px 8px; }
.dh-table tbody.dh-disk tr:hover { background: transparent; }
.dh-table tbody.dh-disk:hover td { background: var(--table-row-hover); }
.dh-table tr.dh-main.has-reasons td { padding-bottom: 3px; border-bottom: none; }
.dh-table tr.dh-reasons td { padding-top: 0; }
.dh-reasons-list { display: flex; flex-wrap: wrap; gap: 3px 18px; padding-left: 17px; }
/* When the table scrolls sideways (phones, narrow windows), keep a disk's
   reasons in view and wrapped to the visible width instead of running off with
   the columns: sticky to the scroll box, at most as wide as it (cqw). */
.dh-reasons-list { position: sticky; left: 8px; max-width: calc(100vw - 120px); max-width: calc(100cqw - 16px); }
.dh-issue { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; line-height: 1.4; color: var(--text); white-space: normal; }
.dh-info-dot { display: inline-block; flex: none; width: 8px; height: 8px; border: 1.5px solid var(--text-muted); border-radius: 50%; }
.dh-table tbody.dh-stale td { opacity: .6; }
.dh-footnotes p { margin: 10px 0 0; }
.dh-footnotes a { color: var(--link); }
@media (max-width: 720px) {
  .uptime-days { grid-template-columns: 56px minmax(0, 1fr) 64px; }
}

/* ===== Earnings page 2.0 =====
   Series colours for the revenue components (GPU / storage / bandwidth).
   One hue per component in every theme, none of them the status green, so
   the stacked bars, the hero mix bar and the legend all agree. */
:root,
[data-theme="dark"] {
  --series-gpu: #3b82f6;
  --series-storage: #199e70;
  --series-bw: #9085e9;
}
[data-theme="light"] {
  --series-gpu: #2563eb;
  --series-storage: #0d9488;
  --series-bw: #7c3aed;
}
[data-theme="sepia"] {
  --series-gpu: #0f766e;
  --series-storage: #2563eb;
  --series-bw: #7c3aed;
}
[data-theme="ash"] {
  --series-gpu: #5a55c9;
  --series-storage: #0f766e;
  --series-bw: #be185d;
}
[data-theme="neon"] {
  --series-gpu: #818cf8;
  --series-storage: #22d3ee;
  --series-bw: #f472b6;
}

#earn-range-selector { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.earn-import-link {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-strong);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  background: var(--panel-alt);
  white-space: nowrap;
}
.earn-import-link:hover { border-color: var(--accent); }

/* Hero: period total · month to date · where it came from */
.earn-hero {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  margin: 16px 0 20px;
  padding: 18px 24px;
  background:
    radial-gradient(circle at 0% 0%, var(--accent-soft), transparent 55%),
    linear-gradient(135deg, var(--panel) 0%, var(--panel-alt) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}
.earn-hero-col { min-width: 0; padding: 2px 22px 2px 0; }
.earn-hero-col + .earn-hero-col { border-left: 1px solid var(--border); padding-left: 22px; }
.earn-hero .hero-value { font-size: 38px; }
.earn-hero-live { font-size: 12px; color: var(--text-muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.earn-hero-live b { color: var(--text); font-weight: 600; }
.earn-hero-spark { margin-top: 10px; }
.earn-hero-spark svg { width: 100%; height: 60px; display: block; overflow: visible; }
.earn-hero-spark .hero-spark-caption { display: block; margin-top: 4px; }
.earn-ring-wrap { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.earn-ring { width: 92px; height: 92px; flex: 0 0 auto; }
.earn-ring-nums { font-size: 12.5px; line-height: 1.5; min-width: 0; }
.earn-ring-nums b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.earn-ring-big { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); line-height: 1.2; }
.earn-hero-foot { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.earn-hero-foot b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.earn-mix-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--panel-alt); margin-top: 10px; }
.earn-mix-bar i { display: block; height: 100%; }
.earn-mix-rows { display: grid; gap: 4px; margin-top: 10px; font-size: 12.5px; }
.earn-mix-rows > div { display: grid; grid-template-columns: 12px 1fr auto 38px; gap: 8px; align-items: center; }
.earn-mix-rows i { width: 10px; height: 10px; border-radius: 2px; display: block; }
.earn-mix-rows .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.earn-mix-rows .p { color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) {
  .earn-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 18px; }
  .earn-hero-col { padding: 0; }
  .earn-hero-col + .earn-hero-col { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: 14px; }
  .earn-hero .hero-value { font-size: 32px; }
}

/* Panels shared by the page */
.earn-panel { margin-bottom: 20px; }
.earn-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.earn-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel-alt); }
.seg button { appearance: none; border: 0; background: transparent; color: var(--text-muted); padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* mobile: a long segmented control scrolls sideways inside its own box */
@media (max-width: 640px) {
  .seg { max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .seg button { flex: 0 0 auto; white-space: nowrap; }
}
.earn-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.earn-chk input { accent-color: var(--accent); margin: 0; }
.earn-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.earn-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.earn-legend i.line { height: 2px; width: 14px; vertical-align: 3px; border-radius: 1px; }
.earn-legend i.dash { height: 0; width: 14px; border-top: 2px dashed var(--text-muted); vertical-align: 3px; background: transparent; }
.earn-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: var(--panel-alt); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.earn-pill.is-up { color: var(--ok); background: rgba(var(--ok-rgb), .12); border-color: rgba(var(--ok-rgb), .35); }
.earn-pill.is-down { color: var(--err); background: rgba(var(--err-rgb), .12); border-color: rgba(var(--err-rgb), .35); }
.earn-link-btn { appearance: none; border: 1px solid var(--border); background: var(--panel-alt); color: var(--text); border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.earn-link-btn:hover { border-color: var(--accent); color: var(--accent-strong); }

/* Daily chart + day drill-down */
.earn-daily-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.earn-daily-grid > * { min-width: 0; }
.earn-drill { border: 1px solid var(--border); border-radius: 10px; background: var(--panel-alt); padding: 12px 14px; min-height: 140px; }
.earn-drill h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.earn-drill-row { display: grid; grid-template-columns: minmax(56px, auto) 1fr auto; gap: 8px; align-items: center; font-size: 12px; margin-top: 6px; }
.earn-drill-host { font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.earn-drill-host:hover { color: var(--accent-strong); }
.earn-drill-bar { display: block; height: 7px; border-radius: 4px; background: var(--panel); overflow: hidden; }
.earn-drill-bar > span { display: flex; height: 100%; border-radius: 4px; overflow: hidden; gap: 1px; }
.earn-drill-bar i { display: block; height: 100%; }
.earn-drill-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 900px) { .earn-daily-grid { grid-template-columns: minmax(0, 1fr); } }

/* Calendar heatmap extras */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 22px; align-items: start; }
.cal-layout > * { min-width: 0; }
.cal-total-row {
  display: grid;
  grid-template-columns: repeat(var(--cal-weeks), var(--cal-cell));
  column-gap: 2px;
  font-size: 10px;
  line-height: 1.2; /* the glyph box, as in .cal-month-row */
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.cal-total-row span { overflow: visible; white-space: nowrap; }
.cal-cell[data-date] { cursor: pointer; }
.cal-cell.cal-selected { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.cal-weekday { display: grid; gap: 5px; }
.cal-weekday > div { display: grid; grid-template-columns: 28px 1fr 46px; gap: 8px; align-items: center; font-size: 12px; }
.cal-weekday .bg { display: block; height: 8px; border-radius: 4px; background: var(--panel-alt); overflow: hidden; }
.cal-weekday .fg { display: block; height: 100%; border-radius: 4px; background: rgba(var(--accent-rgb), .55); }
.cal-weekday .is-best .fg { background: rgb(var(--accent-rgb)); }
.cal-weekday .v { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .cal-layout { grid-template-columns: minmax(0, 1fr); } }

/* Per-machine league table */
.earn-table-wrap { overflow-x: auto; }
.earn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.earn-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.earn-table th button { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.earn-table th button[aria-sort="descending"] { color: var(--accent-strong); }
.earn-table th button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.earn-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; font-variant-numeric: tabular-nums; }
.earn-table tr:last-child td { border-bottom: 0; }
.earn-table tr:hover td { background: var(--table-row-hover); }
.earn-table td.r, .earn-table th.r { text-align: right; }
.earn-host { font-weight: 600; color: var(--text); text-decoration: none; }
.earn-host:hover { color: var(--accent-strong); }
.earn-gpu-tag { display: inline-block; font-size: 11px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.earn-share { display: inline-flex; align-items: center; gap: 8px; }
.earn-share .bg { display: block; width: 90px; height: 6px; border-radius: 3px; background: var(--panel-alt); overflow: hidden; }
.earn-share .fg { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.earn-mini-mix { display: flex; width: 90px; height: 6px; gap: 2px; border-radius: 3px; overflow: hidden; }
.earn-mini-mix i { display: block; height: 100%; }
.earn-rowspark { width: 96px; height: 26px; display: block; }

/* Forecast */
.earn-kpis { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12.5px; color: var(--text-muted); }
.earn-kpis b { color: var(--text); font-weight: 600; }
.earn-kpis .num { font-variant-numeric: tabular-nums; }
.earn-fc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
.earn-fc-grid > * { min-width: 0; }
.earn-whatif { border: 1px solid var(--border); border-radius: 10px; background: var(--panel-alt); padding: 12px 14px; }
.earn-whatif h3 { margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.earn-whatif label { display: block; font-size: 12px; color: var(--text-muted); margin-top: 10px; }
.earn-whatif label b { color: var(--text); float: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.earn-whatif input[type=range] { width: 100%; accent-color: var(--accent); margin: 4px 0 0; }
.earn-whatif .out { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
.earn-whatif .out .big { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; line-height: 1.3; }
.earn-whatif-reset { margin-top: 10px; appearance: none; border: 1px solid var(--border); background: transparent; color: var(--text-muted); border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.earn-whatif-reset:hover { color: var(--text); border-color: var(--accent); }
@media (max-width: 900px) { .earn-fc-grid { grid-template-columns: minmax(0, 1fr); } }

/* Section headers with a control on the right wrap on narrow screens instead
   of pushing the page sideways. */
@media (max-width: 640px) {
  .charts-header { flex-wrap: wrap; gap: 8px; }
}
/* mobile: earnings — the machine column stays put while the rest scrolls */
@media (max-width: 640px) {
  .earn-table th:first-child,
  .earn-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
}

/* ===== Pricing page 2.0 ===== */
.opp-summary { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-alt); margin-bottom: 12px; font-size: 12.5px; }
.opp-summary-big { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.opp-summary-big small { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.earn-pill.is-warn { color: var(--warn); background: rgba(var(--warn-rgb), .12); border-color: rgba(var(--warn-rgb), .35); }

/* Market band cell */
.band { position: relative; height: 22px; }
.band .outer, .band .inner { position: absolute; top: 8px; height: 6px; border-radius: 3px; }
.band .outer { background: rgba(var(--accent-rgb), .14); }
.band .inner { background: rgba(var(--accent-rgb), .32); }
.band .med { position: absolute; top: 5px; width: 2px; height: 12px; background: var(--accent-strong); border-radius: 1px; }
.band .me { position: absolute; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--panel); transform: translateX(-7px); box-shadow: 0 0 0 1px var(--border); }
.band .me.ok { background: var(--ok); } .band .me.hi { background: var(--err); } .band .me.lo { background: var(--warn); }
.band .to { position: absolute; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 2px dashed var(--accent-strong); transform: translateX(-7px); background: transparent; }
.band .tick { position: absolute; top: 3px; width: 0; height: 16px; border-left: 2px dashed var(--text-muted); opacity: .85; }
.band .tick.en { border-left-color: var(--warn); }
.band-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-muted); }
.band-legend i { display: inline-block; vertical-align: middle; margin-right: 5px; }
.band-legend .sw-o { width: 18px; height: 6px; border-radius: 3px; background: rgba(var(--accent-rgb), .14); }
.band-legend .sw-i { width: 18px; height: 6px; border-radius: 3px; background: rgba(var(--accent-rgb), .32); }
.band-legend .sw-m { width: 2px; height: 12px; background: var(--accent-strong); }
.band-legend .sw-me { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.band-legend .sw-d { width: 0; height: 12px; border-left: 2px dashed var(--text-muted); }
.band-legend .sw-e { width: 0; height: 12px; border-left: 2px dashed var(--warn); }

/* Price changes as experiments */
.pc-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.exp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.exp { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--panel); box-shadow: var(--shadow-soft); min-width: 0; }
.exp-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 12px; flex-wrap: wrap; }
.exp-host { font-weight: 600; color: var(--text); text-decoration: none; }
.exp-host:hover { color: var(--accent-strong); }
.exp-chg { font-size: 13px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.exp svg { width: 100%; height: 60px; display: block; margin-top: 8px; }
.exp-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.exp-ba b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.exp-res { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) { .exp-grid { grid-template-columns: minmax(0, 1fr); } }

/* $/GPU/day small multiples */
.gpd-multiples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gpd-panel { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow-soft); padding: 10px 12px 6px; min-width: 0; }
.gpd-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.gpd-head b { font-weight: 600; }
.gpd-wrap { position: relative; height: 150px; }
@media (max-width: 800px) { .gpd-multiples { grid-template-columns: minmax(0, 1fr); } }

/* ===================================================================== */
/* ---------- Machine detail page ---------- */
/* ===================================================================== */

/* Occupancy colours, one set for every page: on-demand green (as the
   legend always said), interruptible blue, reserved purple — red stays for
   errors, amber for warnings. */
:root {
  --occ-d: var(--ok);
  --occ-d-rgb: var(--ok-rgb);
  --occ-d-text: var(--ok);
  --occ-i: var(--accent);
  --occ-r: #a855f7;
  --occ-r-rgb: 168, 85, 247;
  /* Status text on light backgrounds: the fill colours (#22c55e ≈ 2.3:1 on
     white) are too faint for text, so light themes darken them. */
  --ok-text: var(--ok);
  --warn-text: var(--warn);
  --err-text: var(--err);
}
[data-theme="light"] {
  --ok-text: #15803d;
  --warn-text: #b45309;
  --err-text: #b91c1c;
  --occ-d-text: #15803d;
  --occ-r: #9333ea;
  --occ-r-rgb: 147, 51, 234;
}
[data-theme="sepia"] { --warn-text: #8a4b05; --occ-r: #7e22ce; --occ-r-rgb: 126, 34, 206; }
[data-theme="ash"]   { --occ-r: #7e22ce; --occ-r-rgb: 126, 34, 206; }

.t-ok   { color: var(--ok-text); }
.t-warn { color: var(--warn-text); font-weight: 700; }
.t-crit { color: var(--err-text); font-weight: 700; }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.nowrap { white-space: nowrap; }
.fs-12 { font-size: 12px; }
.table-scroll { overflow-x: auto; }
/* mobile: every horizontally scrolling table wrapper shows edge shadows that
   fade out at the ends of the scroll range (background-attachment: local
   covers the shadow with the panel colour when that edge is reached) */
@media (max-width: 900px) {
  .table-scroll,
  .earn-table-wrap,
  .inv-table-wrap,
  .dh-table-wrap,
  .prof-table-wrap,
  .pricing-table-wrap,
  .health-table-wrap,
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--panel) 40%, rgba(0, 0, 0, 0)) left / 32px 100% no-repeat local,
      linear-gradient(to left, var(--panel) 40%, rgba(0, 0, 0, 0)) right / 32px 100% no-repeat local,
      linear-gradient(to right, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0)) left / 12px 100% no-repeat scroll,
      linear-gradient(to left, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0)) right / 12px 100% no-repeat scroll;
  }
}
/* mobile: the column that names the row stays put while the rest scrolls */
@media (max-width: 640px) {
  .table-scroll .data-table th:first-child,
  .table-scroll .data-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--panel);
  }
  .table-scroll .data-table thead th:first-child { background: var(--table-header); }
}
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.machine-rail { margin-top: 0 !important; }
@media (min-width: 1001px) {
  .machine-rail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
}
@media (max-width: 1000px) {
  /* Marketplace, pricing and listing dates right after the sessions table
     instead of below Remote Hands. */
  .machine-rail { order: -1; }
}
.live-updated { font-size: 11px; }

/* Buttons for secondary actions (the solid .btn-add-tag is for "+ Add"). */
.btn-secondary {
  background: var(--panel-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-strong); }
.btn-xs { padding: 3px 9px; font-size: 11px; }

/* Attention strip */
.attn-strip { margin: -6px 0 16px; display: flex; flex-direction: column; gap: 6px; }
.attn-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--panel);
}
.attn-item.attn-critical { border-color: rgba(var(--err-rgb), .45); border-left-color: var(--err); background: rgba(var(--err-rgb), .06); }
.attn-item.attn-warning  { border-color: rgba(var(--warn-rgb), .45); border-left-color: var(--warn); background: rgba(var(--warn-rgb), .06); }
.attn-item.attn-info     { border-left-color: var(--accent); }
.attn-sev {
  flex-shrink: 0; min-width: 64px; text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  background: var(--badge-bg); color: var(--text-muted);
}
.attn-critical .attn-sev { background: rgba(var(--err-rgb), .15); color: var(--err-text); }
.attn-warning .attn-sev  { background: rgba(var(--warn-rgb), .15); color: var(--warn-text); }
.attn-info .attn-sev     { background: var(--accent-soft); color: var(--accent-strong); }
.attn-body { flex: 1; min-width: 0; }
.attn-title { font-size: 13px; font-weight: 600; color: var(--text); }
.attn-detail { font-size: 12px; color: var(--text-muted); margin-top: 1px; line-height: 1.45; }
.attn-action {
  flex-shrink: 0;
  padding: 5px 11px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--panel-alt);
  color: var(--text); font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.attn-action:hover { border-color: var(--accent); color: var(--accent-strong); }
.attn-critical .attn-action { background: var(--err); border-color: var(--err); color: #fff; }
.attn-more summary { cursor: pointer; font-size: 12px; color: var(--text-muted); padding: 2px 4px; }
.attn-more .attn-item { margin-top: 6px; }
.attn-clear { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.attn-clear-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(var(--ok-rgb), .18); }
@media (max-width: 640px) {
  .attn-item { flex-wrap: wrap; }
  .attn-body { flex-basis: calc(100% - 80px); }
  .attn-action { margin-left: 76px; }
}

/* KPI row */
.kpi-of { color: var(--text-muted); font-weight: 500; font-size: .7em; }
.kpi-segs { display: flex; gap: 3px; margin: 6px 0 4px; }
.kpi-seg { flex: 1; height: 6px; border-radius: 3px; background: var(--badge-bg); }
.kpi-seg.occ-D { background: var(--occ-d); }
.kpi-seg.occ-I { background: var(--occ-i); }
.kpi-seg.occ-R { background: var(--occ-r); }
.kpi-seg.occ-idle { background: transparent; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .5); }
.card-value.rel-good { color: var(--ok-text); }
.card-value.rel-fair { color: var(--warn-text); }
.card-value.rel-poor { color: var(--err-text); }
.card-value.green { color: var(--ok-text); }
.kpi-inet { font-size: 20px; font-weight: 700; }
.value-flash { animation: valueFlash 1.2s ease-out; }
@keyframes valueFlash {
  0% { background: var(--accent-soft); }
  100% { background: transparent; }
}

/* Occupancy */
#machine-occ-card .occ-host-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 4px 0; }
.sg-sep { color: var(--border); }
.machine-uptime { margin-top: 14px; }
.machine-uptime .uptime-title { font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--text); }

/* Rental Sessions */
.sess-sync {
  font-size: 12px; line-height: 1.5;
  margin: -4px 0 10px; padding: 8px 10px;
  border-radius: 6px; border: 1px solid var(--border);
}
.sess-sync-drift { border-color: rgba(var(--warn-rgb), .5); background: rgba(var(--warn-rgb), .07); color: var(--text); }
.sess-sync-drift strong { color: var(--warn-text); }
.sess-sync-pending { color: var(--text-muted); background: var(--panel-alt); }
.sess-sub { font-size: 11px; color: var(--text-muted); line-height: 1.35; }
.sess-image { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-table th { white-space: normal; }
.data-table.sess-table tbody td,
.data-table.sess-table thead th { padding-left: 7px; padding-right: 7px; }
.data-table.sess-table tbody td { font-size: 12.5px; }
.sess-table td { vertical-align: top; }
.sess-row.sess-stored { opacity: .85; }
.gpu-chip {
  display: inline-block; min-width: 18px; text-align: center;
  padding: 1px 5px; margin: 0 3px 2px 0;
  border-radius: 4px; border: 1px solid var(--border);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sess-total td { border-top: 2px solid var(--border); font-size: 12px; }
.sess-actions { margin-top: 8px; }
@media (max-width: 1200px) {
  .sess-image { max-width: 140px; }
}

/* Host Telemetry GPU cards: a visible bar track, VRAM coloured by fill
   level instead of a gradient that made 7 % look like an alarm. */
.agent-gpu-card .usage-bar { background: rgba(148, 163, 184, .28); }
.usage-bar-fill.vram { background: var(--accent); }
.usage-bar-fill.lvl-warn { background: var(--warn); }
.usage-bar-fill.lvl-crit { background: var(--err); }
.agent-gpu-card.is-idle { opacity: .8; }
.agent-status.live { color: var(--ok-text); }
.agent-status.live .agent-dot { box-shadow: 0 0 0 3px rgba(var(--ok-rgb), .2); }
.agent-flag.ok   { background: rgba(var(--ok-rgb), .15);  color: var(--ok-text); }
.agent-flag.warn { background: rgba(var(--warn-rgb), .15); color: var(--warn-text); }
.agent-flag.crit { background: rgba(var(--err-rgb), .15);  color: var(--err-text); }
.agent-pre {
  white-space: pre-wrap; word-break: break-all; font-size: .72rem; margin: 0;
  user-select: all; background: var(--panel-alt); padding: 8px; border-radius: 4px;
  border: 1px solid var(--border);
}
.wear-bar { height: 4px; margin-top: 3px; max-width: 80px; }

/* Hardware: disk composition */
.stack-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 10px; background: var(--badge-bg); }
.stack-seg { height: 100%; }
.stack-seg + .stack-seg { box-shadow: inset 1px 0 0 var(--panel); }
.stack-rented, .stack-swatch.stack-rented   { background: var(--accent); }
.stack-volumes, .stack-swatch.stack-volumes { background: var(--teal); }
.stack-system, .stack-swatch.stack-system   { background: rgba(148, 163, 184, .7); }
.stack-free, .stack-swatch.stack-free       { background: transparent; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.stack-leg { display: inline-flex; align-items: center; gap: 5px; }
.stack-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.stack-swatch.stack-free { box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .6); }

/* Right column */
.date-rel { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); text-align: right; }
.info-row .value.err .date-rel { color: var(--err-text); }
.info-row .value.green { color: var(--ok-text); }
.info-row .value.warn  { color: var(--warn-text); }
.info-row .value.err   { color: var(--err-text); }
.rail-warn {
  margin-top: 8px; padding: 8px 10px; border-radius: 6px;
  font-size: 12px; line-height: 1.45;
  border: 1px solid rgba(var(--warn-rgb), .5); background: rgba(var(--warn-rgb), .07); color: var(--text);
}

/* Tasks */
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.task-chip {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--text-muted);
}
.task-chip.recovering { border-color: var(--ok); color: var(--ok-text); }
.task-chip.active { border-color: var(--warn); color: var(--warn-text); }
.task-item.is-done { opacity: .6; }
.tasks-done-toggle { margin-top: 8px; }
.rh-input {
  width: 100%; box-sizing: border-box; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel-alt); color: var(--text); font-size: 13px; font-family: inherit;
}
.rh-field select { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-alt); color: var(--text); font-size: 13px; font-family: inherit; }
.task-btn:hover { background: var(--panel-hover); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Occupancy timeline: offline and missing data are their own states. */
.occ-exp-offline { background: repeating-linear-gradient(135deg,
                    rgba(var(--err-rgb), .55) 0 4px, rgba(var(--err-rgb), .25) 4px 8px); }
.occ-swatch.occ-offline { background: rgba(var(--err-rgb), .45); }
.occ-swatch.occ-nodata { background: transparent; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .55); }

/* Tag chips: only the × removes, and it is a real button. */
.tag-badge .tag-x {
  background: none; border: 0; padding: 0 0 0 4px; margin: 0;
  color: inherit; font: inherit; font-size: 13px; line-height: 1;
  cursor: pointer; opacity: .65;
}
.tag-badge .tag-x:hover, .tag-badge .tag-x:focus-visible { opacity: 1; }
.tag-badge.removable { cursor: default; }
.tag-badge.removable:hover { opacity: 1; }
@media (pointer: coarse) and (max-width: 1023px) {
  .tag-badge .tag-x { opacity: 1; padding: 6px 4px; margin: -6px 0; } /* mobile: no hover to reveal it */
}

/* Task priority chips readable in every theme. */
.task-priority-low    { background: var(--badge-bg); color: var(--text-muted); }
.task-priority-medium { background: rgba(var(--warn-rgb), .15); color: var(--warn-text); }
.task-priority-high   { background: rgba(var(--err-rgb), .15);  color: var(--err-text); }
.task-actions { flex-wrap: wrap; justify-content: flex-end; }

/* Machine page performance charts: Load | Thermals, Earnings full width. */
.perf-chart-panel.perf-wide { grid-column: 1 / -1; }
#perf-charts-card .perf-chart-wrap { height: 240px; }
#perf-charts-card .perf-wide .perf-chart-wrap { height: 220px; }
#chart-zoom-reset { margin-right: 6px; }

/* ===== Inventory 2.0 (static/inventory.js) =====
   One hue means one GPU model on the whole page. --inv-cat-1…7 are the
   validated categorical palette — light steps on the light themes, dark steps
   on dark and neon, CVD and normal-vision separation checked against each
   theme's card surface; the values that sit under 3:1 on a surface are never
   alone (every bar carries its value as text, every chart has a table view).
   Models past the seventh share --inv-other. --inv-ord-1…4 is an ordinal ramp
   for generations (1 = newest, the strongest contrast with the card), with
   lightness steps of at least 0.06 and its faint end at 2:1 or better on every
   theme. Single-series bars (hosts per CPU, per RAM size) use --inv-seq. */
:root,
[data-theme="dark"] {
  --inv-cat-1: #3987e5; --inv-cat-2: #d95926; --inv-cat-3: #199e70; --inv-cat-4: #c98500;
  --inv-cat-5: #d55181; --inv-cat-6: #008300; --inv-cat-7: #9085e9;
  --inv-other: #898781;
  --inv-ord-1: #cde2fb; --inv-ord-2: #9ec5f4; --inv-ord-3: #6da7ec; --inv-ord-4: #2a78d6;
  --inv-seq: var(--accent);
}
[data-theme="neon"] {
  --inv-cat-1: #3987e5; --inv-cat-2: #d95926; --inv-cat-3: #199e70; --inv-cat-4: #c98500;
  --inv-cat-5: #d55181; --inv-cat-6: #008300; --inv-cat-7: #9085e9;
  --inv-ord-1: #cde2fb; --inv-ord-2: #86b6ef; --inv-ord-3: #5598e7; --inv-ord-4: #256abf;
}
[data-theme="light"],
[data-theme="sepia"],
[data-theme="ash"] {
  --inv-cat-1: #2a78d6; --inv-cat-2: #eb6834; --inv-cat-3: #1baf7a; --inv-cat-4: #eda100;
  --inv-cat-5: #e87ba4; --inv-cat-6: #008300; --inv-cat-7: #4a3aa7;
  --inv-other: #898781;
  --inv-ord-1: #0d366b; --inv-ord-2: #1c5cab; --inv-ord-3: #3987e5; --inv-ord-4: #86b6ef;
}
[data-theme="sepia"] { --inv-ord-4: #6da7ec; }
[data-theme="ash"] { --inv-ord-3: #2a78d6; --inv-ord-4: #5598e7; }

.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;
}

/* Page head, buttons, banners */
.inv-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.inv-page-head .page-subtitle { margin-bottom: 0; }
.inv-page-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.inv-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--text); background: var(--panel-alt);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.inv-btn:hover { border-color: var(--accent); }
.inv-btn[aria-pressed="true"], .inv-btn-primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.inv-btn-sm { padding: 3px 9px; font-size: 12px; }
.inv-btn:focus-visible, .inv-chip:focus-visible, .inv-sort:focus-visible, .inv-menu-btn:focus-visible,
.inv-menu button:focus-visible, .inv-link-btn:focus-visible, .inv-search:focus-visible,
.inv-cols summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inv-customize-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding: 10px 14px; font-size: 13px; color: var(--text);
  background: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb), .4); border-radius: 10px;
}
.inv-customize-actions { display: flex; gap: 8px; }
.inv-error {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding: 10px 14px; font-size: 13px; color: var(--text);
  background: rgba(var(--err-rgb), .1); border: 1px solid rgba(var(--err-rgb), .4); border-radius: 10px;
}
.inv-error[hidden], .inv-customize-bar[hidden] { display: none; }
.inv-error .inv-btn { margin-left: auto; }
.inv-stale .inv-card-body, .inv-stale .inv-kpis { opacity: .55; transition: opacity .3s; }

/* KPI tiles */
.inv-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 14px; margin-top: 20px;
}
.inv-kpi { padding: 16px 16px 12px; display: flex; flex-direction: column; min-width: 0; }
.inv-kpi .card-label { font-size: 11px; margin-bottom: 4px; }
.inv-kpi-value { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.inv-kpi .card-value { font-size: 24px; }
.inv-kpi-value { flex-wrap: nowrap; white-space: nowrap; }
.inv-kpi-suffix { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.inv-kpi-sub { margin-top: 2px; font-size: 11.5px; color: var(--text-muted); min-height: 16px; }
.inv-kpi-delta { font-size: 11px; color: var(--text-muted); min-height: 15px; font-variant-numeric: tabular-nums; }
.inv-kpi-trend { margin-top: auto; padding-top: 8px; height: 34px; }
.inv-spark { display: block; overflow: visible; }
.inv-spark-line { fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.inv-spark-dot { fill: var(--accent); stroke: var(--bg-card); stroke-width: 2; }

/* Cards */
.inv-card { display: flex; flex-direction: column; min-width: 0; }
.inv-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.inv-card-titles { min-width: 0; }
.inv-card-titles .section-title { margin-bottom: 2px; }
.inv-insight { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.inv-card-tools { position: relative; flex: none; }
.inv-menu-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  color: var(--text-muted); background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.inv-menu-btn:hover, .inv-menu-btn[aria-expanded="true"] { color: var(--text); background: var(--panel-alt); border-color: var(--border); }
.inv-menu {
  position: absolute; right: 0; top: 34px; z-index: 30; min-width: 190px; padding: 5px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
}
.inv-menu[hidden] { display: none; }
.inv-menu button {
  display: block; width: 100%; padding: 7px 10px; font: inherit; font-size: 13px; text-align: left;
  color: var(--text); background: none; border: none; border-radius: 6px; cursor: pointer;
}
.inv-menu button:hover, .inv-menu button:focus { background: var(--panel-hover); }
.inv-card-body { position: relative; min-width: 0; }
.inv-card-foot:empty { display: none; }
.inv-card-foot { margin-top: 10px; }
.inv-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
.inv-more { text-align: center; margin-top: 4px; }
.inv-link-btn { padding: 4px 8px; font: inherit; font-size: 12px; color: var(--link); background: none; border: none; cursor: pointer; }
.inv-muted { color: var(--text-muted); }
.inv-icon { display: inline-block; width: 12px; height: 12px; flex: none; vertical-align: -1px; }
.inv-sev-warning { fill: var(--warn); }
.inv-sev-error { fill: var(--err); }
.inv-sev-ok { fill: var(--ok); }
.inv-sev-info { fill: none; stroke: var(--text-muted); stroke-width: 1.6; }

/* Charts (SVG) */
.inv-svg { display: block; width: 100%; height: auto; overflow: visible; }
.inv-svg text { font-family: 'Inter', system-ui, sans-serif; font-size: 12px; fill: var(--text-muted); }
.inv-svg text.inv-svg-label { fill: var(--text); font-weight: 600; }
.inv-svg text.inv-svg-value { fill: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.inv-svg text.inv-svg-group { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; fill: var(--text-muted); }
.inv-svg tspan.inv-svg-group-sub { font-weight: 500; letter-spacing: 0; text-transform: none; }
.inv-svg text.inv-svg-muted { font-size: 11px; }
.inv-svg text.inv-svg-legend { font-size: 11px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.inv-svg text.inv-svg-inseg { font-size: 11px; font-weight: 600; pointer-events: none; }
.inv-svg text.inv-ink-dark { fill: #10151b; }
.inv-svg text.inv-ink-light { fill: #ffffff; }
.inv-svg .inv-hit { fill: transparent; }
.inv-svg .inv-mark { outline: none; }
.inv-svg .inv-mark:hover .inv-hit, .inv-svg .inv-mark:focus .inv-hit { fill: rgba(var(--accent-rgb), .08); }
.inv-svg .inv-mark:focus-visible .inv-hit { stroke: var(--accent); stroke-width: 1; }
.inv-svg .inv-bar { transition: opacity .15s; }
.inv-svg .inv-mark:hover .inv-bar { opacity: .82; }
.inv-svg .inv-bar-unknown { opacity: .6; }
.inv-svg .inv-ram-ring { stroke: var(--bg-card); stroke-width: 6; stroke-linecap: round; }
.inv-svg .inv-ram-tick { stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.inv-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--text-muted); }
.inv-leg { display: inline-flex; align-items: center; gap: 6px; }
.inv-swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 2px; }
.inv-leg-bar { display: inline-block; width: 18px; height: 8px; border-radius: 0 3px 3px 0; background: var(--inv-cat-1); }
.inv-leg-tick { display: inline-block; width: 2px; height: 12px; border-radius: 1px; background: var(--text); }

/* Tooltip */
.inv-tip {
  position: fixed; z-index: 1000; max-width: 320px; padding: 8px 10px;
  font-size: 12px; line-height: 1.45; color: var(--text-muted);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-soft); pointer-events: none;
}
.inv-tip[hidden] { display: none; }
.inv-tip-head { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); }
.inv-tip-key { display: inline-block; width: 12px; height: 3px; border-radius: 2px; flex: none; }
.inv-tip-sub { margin-bottom: 3px; font-size: 11px; }
.inv-tip strong { color: var(--text); font-variant-numeric: tabular-nums; }
.inv-tip-warn { margin-top: 4px; color: var(--text); padding-left: 8px; border-left: 2px solid var(--warn); }
.inv-tip-note { margin-top: 4px; font-size: 11px; }

/* GPU models: composition strip + table */
.inv-strip { display: flex; gap: 2px; height: 12px; margin: 0 0 16px; }
.inv-strip-seg { min-width: 3px; height: 100%; cursor: default; }
.inv-strip-seg:first-child { border-radius: 4px 0 0 4px; }
.inv-strip-seg:last-child { border-radius: 0 4px 4px 0; }
.inv-strip-seg:only-child { border-radius: 4px; }
.inv-strip-seg:hover { opacity: .82; }
/* position: relative keeps the absolutely positioned .sr-only hints inside the
   scroll box; without it they escape it and widen the page on phones. */
.inv-table-wrap { position: relative; overflow-x: auto; }
.inv-card .data-table th.num, .inv-card .data-table td.num { text-align: right; }
.inv-card .data-table thead th, .inv-card .data-table tbody td, .inv-card .data-table tfoot td { padding: 9px 10px; }
.inv-card .data-table tfoot td { border-top: 2px solid var(--border); font-weight: 600; }
.inv-card .data-table td { vertical-align: middle; }
.inv-model { display: inline-flex; align-items: center; gap: 8px; }
.inv-model > span:last-child { display: inline-flex; flex-direction: column; }
.inv-sub { display: block; margin-top: 1px; font-size: 11px; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.inv-count-bar { display: inline-block; width: 64px; height: 6px; margin-right: 10px; vertical-align: middle; background: rgba(var(--accent-rgb), .12); border-radius: 3px; overflow: hidden; }
.inv-count-fill { display: block; height: 100%; border-radius: 0 3px 3px 0; }
.inv-models-table td.num .inv-sub { display: inline; margin-left: 6px; }
.inv-rented { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-meter { display: inline-block; width: 44px; height: 5px; background: rgba(var(--accent-rgb), .15); border-radius: 3px; overflow: hidden; }
.inv-meter span { display: block; height: 100%; background: var(--accent); border-radius: 0 3px 3px 0; }
.inv-sort {
  display: inline-flex; align-items: center; gap: 3px; padding: 0; font: inherit; color: inherit;
  letter-spacing: inherit; text-transform: inherit; background: none; border: none; cursor: pointer; white-space: nowrap;
}
/* mobile: inventory — the first column (host, model, disk) stays put */
@media (max-width: 640px) {
  .inv-table-wrap .data-table th:first-child,
  .inv-table-wrap .data-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
  .inv-table-wrap .data-table thead th:first-child { background: var(--table-header); }
}
.inv-sort.is-active { color: var(--text); }
.inv-sort-arrow { font-size: 9px; }

/* Host table */
.inv-host-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.inv-search {
  flex: 1 1 240px; max-width: 360px; padding: 7px 11px; font: inherit; font-size: 13px;
  color: var(--text); background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px;
}
.inv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: transparent; border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
}
.inv-chip b { color: var(--text); font-variant-numeric: tabular-nums; }
.inv-chip:hover { background: var(--panel-hover); }
.inv-chip.is-active { color: var(--text); background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .55); }
.inv-cols { position: relative; margin-left: auto; }
.inv-cols summary {
  list-style: none; cursor: pointer; padding: 5px 11px; font-size: 12px; font-weight: 600; color: var(--text);
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px;
}
.inv-cols summary::-webkit-details-marker { display: none; }
.inv-cols summary::after { content: " ▾"; color: var(--text-muted); }
.inv-cols-menu {
  position: absolute; right: 0; top: 34px; z-index: 30; display: grid; grid-template-columns: repeat(2, minmax(120px, auto));
  gap: 4px 14px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow);
}
.inv-col-opt { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); white-space: nowrap; cursor: pointer; }
.inv-host { font-weight: 600; }
.inv-verified { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--ok); }
.inv-unverified { margin-left: 6px; padding: 0 6px; font-size: 10.5px; font-weight: 700; color: var(--warn);
  background: rgba(var(--warn-rgb), .14); border-radius: 999px; text-transform: capitalize; }
.inv-clip { max-width: 168px; overflow: hidden; text-overflow: ellipsis; }
.inv-hosts-table td { white-space: nowrap; }
.inv-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; font-size: 12px; font-weight: 600; border-radius: 999px; }
.inv-st-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; }
.inv-st-rented { color: var(--ok); background: rgba(var(--ok-rgb), .13); }
.inv-st-idle { color: var(--accent-strong); background: rgba(var(--accent-rgb), .12); }
.inv-st-paused { color: var(--warn); background: rgba(var(--warn-rgb), .14); }
.inv-st-unlisted { color: var(--text-muted); background: var(--panel-alt); }
.inv-st-alert { color: var(--err); background: rgba(var(--err-rgb), .13); }
.inv-chip .inv-st-dot { background: currentColor; }
.inv-chip .inv-st-dot.inv-st-rented { color: var(--ok); background: var(--ok); }
.inv-chip .inv-st-dot.inv-st-idle { background: var(--accent); }
.inv-chip .inv-st-dot.inv-st-paused { background: var(--warn); }
.inv-chip .inv-st-dot.inv-st-unlisted { background: var(--text-muted); }
.inv-chip .inv-st-dot.inv-st-alert { background: var(--err); }
.inv-occ { display: flex; gap: 2px; margin-top: 5px; }
.inv-occ .gpu-sq { width: 9px; height: 9px; border-radius: 2px; }

/* Software */
.inv-findings { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.inv-finding {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  background: var(--panel-alt); border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px;
}
.inv-finding .inv-icon { margin-top: 3px; }
.inv-finding strong { font-size: 13px; color: var(--text); }
.inv-finding p { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.inv-finding-error { border-left-color: var(--err); }
.inv-finding-warning { border-left-color: var(--warn); }
.inv-finding-info { border-left-color: var(--text-muted); }
.inv-findings-ok { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: var(--text); }
.inv-spreads { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 12px; }
.inv-spread { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inv-spread-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.inv-spread-item { padding: 2px 8px; font-size: 12px; color: var(--text); background: var(--panel-alt); border: 1px solid var(--border); border-radius: 6px; font-variant-numeric: tabular-nums; }
.inv-spread-item b { color: var(--text-muted); font-weight: 600; margin-left: 2px; }
.inv-sw-table td.inv-flag-behind { background: rgba(var(--warn-rgb), .14); }
.inv-sw-table td.inv-flag-ahead { background: rgba(var(--accent-rgb), .1); }
.inv-sw-table td.inv-flag-differs { background: var(--panel-alt); }
.inv-sw-table td.inv-flag-error { background: rgba(var(--err-rgb), .13); }
.inv-sw-table td.inv-flag-error .inv-icon { margin-right: 6px; }
.inv-flag-mark { margin-right: 5px; font-size: 9px; color: var(--text-muted); }

/* Customize layout */
.inv-row[hidden] { display: none; }
.inv-row-ctl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 10px; padding: 8px 10px;
  background: var(--accent-soft); border: 1px dashed rgba(var(--accent-rgb), .55); border-radius: 10px;
}
.inv-row-ctl-move { display: inline-flex; gap: 4px; }
.inv-row-ctl-cards { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.inv-eye { margin-right: 2px; font-size: 10px; }

/* Full screen (native, or a fixed overlay where the API is missing) */
.inv-card:fullscreen { overflow: auto; padding: 32px 40px; background: var(--bg-card); }
.inv-card-max { position: fixed; inset: 12px; z-index: 900; overflow: auto; background: var(--bg-card); box-shadow: var(--shadow); }
html.inv-has-max { overflow: hidden; }

/* Fleet map: single-country summary, and markers in the theme's status colours */
.fleet-map[hidden] { display: none; }
.fleet-map-single {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 18px;
  font-size: 13px; line-height: 1.5; color: var(--text);
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px;
}
.fleet-map-single[hidden] { display: none; }
.fleet-single-text { flex: 1 1 360px; }
.fleet-single-chips { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-muted); }
.fleet-map-card.is-summary .fleet-map-legend { display: none; }
.fleet-map path.fm-marker { stroke: var(--bg-card); }
.fleet-map path.fm-marker-rented { fill: var(--ok); }
.fleet-map path.fm-marker-paused { fill: var(--warn); }
.fleet-map path.fm-marker-idle { fill: var(--accent); }
.fleet-map path.fm-marker-alert { fill: var(--err); }

/* Page filter: the bar, the hint, chosen and faded marks */
.inv-section-header .inv-hint { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }
.inv-filterbar {
  position: sticky; top: 64px; z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 16px; padding: 8px 12px;
  background: var(--bg-card); border: 1px solid rgba(var(--accent-rgb), .45); border-radius: 10px;
  box-shadow: var(--shadow-soft);
}
.inv-filterbar[hidden] { display: none; }
.inv-fbar-count { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-fbar-count b { color: var(--text); }
.inv-fbar-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.inv-fchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 5px 3px 10px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--text);
  background: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb), .5); border-radius: 999px; cursor: pointer;
}
.inv-fchip:hover { border-color: var(--accent); }
.inv-fchip-dim { font-weight: 500; color: var(--text-muted); }
.inv-fchip-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 13px; line-height: 1; color: var(--text-muted); }
.inv-fchip:hover .inv-fchip-x { color: var(--text); background: rgba(var(--accent-rgb), .2); }
.inv-fbar-clear { margin-left: auto; }
.inv-fchip:focus-visible, .inv-model-btn:focus-visible, .inv-bn-title:focus-visible, .inv-cmp-close:focus-visible,
.inv-cmp-x:focus-visible, .inv-cmp-check:focus-visible, .inv-th-input:focus-visible, .inv-th-on:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inv-kpis.is-filtered .inv-kpi { border-color: rgba(var(--accent-rgb), .4); }
.inv-empty-filter { padding: 20px 8px; text-align: center; font-size: 13px; color: var(--text-muted); }
.inv-svg .inv-click { cursor: pointer; }
.inv-svg .inv-mark.is-dim .inv-bar, .inv-svg .inv-mark.is-dim text { opacity: .3; }
.inv-svg .inv-mark.is-sel .inv-hit { fill: rgba(var(--accent-rgb), .11); }
.inv-svg .inv-mark.is-part .inv-hit { fill: rgba(var(--accent-rgb), .06); stroke: rgba(var(--accent-rgb), .45); stroke-dasharray: 3 2; }
.inv-svg .inv-text-dim { opacity: .35; }
.inv-strip-seg.inv-click { cursor: pointer; }
.inv-strip-seg.is-dim { opacity: .28; }
.inv-model-btn { padding: 0; font: inherit; color: inherit; text-align: left; background: none; border: none; cursor: pointer; }
.inv-model-btn:hover strong { text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .7); text-underline-offset: 3px; }
.inv-models-table tr.is-dim td { opacity: .45; }
.inv-models-table tr.is-sel td { background: rgba(var(--accent-rgb), .07); }
.inv-models-table tr.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.inv-tip-hint { margin-top: 5px; padding-top: 4px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }

/* Hover: one GPU model found everywhere */
#inv-rows-wrap [data-gpu] { transition: opacity .12s; }
.inv-hl-on [data-gpu]:not(.inv-hl) { opacity: .26; }
.inv-hl-on tr[data-gpu]:not(.inv-hl) { opacity: .42; }
.inv-hl-on [data-gpu]:not(.inv-hl) [data-gpu], .inv-hl-on [data-gpu].inv-hl [data-gpu] { opacity: 1; }

/* Score: a number and its band, always both */
.inv-score {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 2px 8px;
  font-size: 12px; font-weight: 700; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.inv-score.inv-band-good { color: var(--ok-text); background: rgba(var(--ok-rgb), .13); }
.inv-score.inv-band-fair { color: var(--warn-text); background: rgba(var(--warn-rgb), .15); }
.inv-score.inv-band-poor { color: var(--err-text); background: rgba(var(--err-rgb), .13); }
.inv-svg text.inv-band-good { fill: var(--ok-text); font-weight: 700; }
.inv-svg text.inv-band-fair { fill: var(--warn-text); font-weight: 700; }
.inv-svg text.inv-band-poor { fill: var(--err-text); font-weight: 700; }
.inv-band-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.inv-band-dot.inv-band-good { background: var(--ok); }
.inv-band-dot.inv-band-fair { background: var(--warn); }
.inv-band-dot.inv-band-poor { background: var(--err); }

/* Host table: compare picks */
.inv-hosts-table th.inv-col-cmp, .inv-hosts-table td.inv-col-cmp { width: 34px; padding-left: 10px; padding-right: 0; text-align: center; }
.inv-cmp-colhead { font-size: 14px; color: var(--text-muted); }
.inv-cmp-check { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.inv-cmp-check:disabled { cursor: not-allowed; opacity: .4; }
.inv-hosts-table tr.is-picked td { background: rgba(var(--accent-rgb), .07); }

/* Software: a finding as a filter */
.inv-finding-filter { display: inline-block; margin-top: 4px; padding: 0; }
.inv-finding.is-sel { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .55); }
.inv-finding.is-dim { opacity: .6; }
.inv-finding .inv-finding-count { font-size: 11.5px; }

/* Bottlenecks */
.inv-bn-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.inv-bn-score { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.inv-bn-score-num { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.inv-bn-score-num.inv-band-good { color: var(--ok-text); }
.inv-bn-score-num.inv-band-fair { color: var(--warn-text); }
.inv-bn-score-num.inv-band-poor { color: var(--err-text); }
.inv-bn-score-of { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.inv-bn-score-label { margin-left: 4px; font-size: 12px; color: var(--text-muted); }
.inv-bn-th-btn { margin-left: auto; }
.inv-bn-th { margin: 0 0 14px; padding: 12px 14px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px; }
.inv-bn-th[hidden] { display: none; }
.inv-th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 4px 28px; }
.inv-th-row { display: flex; align-items: center; gap: 9px; min-height: 32px; font-size: 12.5px; color: var(--text); }
.inv-th-row.is-off .inv-th-label { color: var(--text-muted); }
.inv-th-on { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.inv-th-label { flex: 1 1 auto; }
.inv-th-input {
  width: 72px; padding: 3px 6px; font: inherit; font-size: 12.5px; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; font-variant-numeric: tabular-nums;
}
.inv-th-input:disabled { opacity: .5; }
.inv-th-input[aria-invalid="true"] { border-color: var(--err); }
.inv-th-pts { flex: none; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.inv-th-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 10px; font-size: 11.5px; }
.inv-bn-items { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.inv-bn-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; cursor: pointer;
  background: var(--panel-alt); border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px;
}
.inv-bn-item:hover { border-color: rgba(var(--accent-rgb), .45); }
.inv-bn-item.inv-bn-high { border-left-color: var(--err); }
.inv-bn-item.inv-bn-medium { border-left-color: var(--warn); }
.inv-bn-item.inv-bn-low { border-left-color: var(--text-muted); }
.inv-bn-item.is-sel { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .6); }
.inv-bn-item.is-dim { opacity: .55; }
.inv-bn-icon { flex: none; margin-top: 2px; }
.inv-bn-main { flex: 1 1 auto; min-width: 0; }
.inv-bn-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.inv-bn-title { padding: 0; font: inherit; font-size: 13px; font-weight: 700; text-align: left; color: var(--text); background: none; border: none; cursor: pointer; }
.inv-bn-title:hover { text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .7); text-underline-offset: 3px; }
.inv-bn-meta { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.inv-bn-impact { display: inline-block; flex: none; width: 84px; height: 5px; margin-left: auto; background: rgba(148, 163, 184, .18); border-radius: 3px; overflow: hidden; }
.inv-bn-impact span { display: block; height: 100%; background: var(--inv-seq); border-radius: 0 3px 3px 0; }
.inv-bn-hosts { margin: 5px 0 0; font-size: 12px; line-height: 1.6; color: var(--text); }
.inv-bn-why { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.inv-bn-fix { color: var(--text); }
.inv-bn-sub { margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.inv-bn-chart-head .inv-legend { margin-bottom: 8px; }
.inv-leg-score { display: inline-block; width: 18px; height: 8px; border-radius: 0 3px 3px 0; background: var(--inv-seq); }
.inv-leg-lost { display: inline-block; width: 12px; height: 8px; border-radius: 1px; }
.inv-svg .inv-score-track { fill: rgba(148, 163, 184, .14); }
.inv-svg .inv-score-fill { fill: var(--inv-seq); }
.inv-svg .inv-lost-high { fill: rgba(var(--err-rgb), .6); }
.inv-svg .inv-lost-medium { fill: rgba(var(--warn-rgb), .6); }
.inv-svg .inv-lost-low { fill: rgba(148, 163, 184, .6); }
.inv-leg-lost.inv-lost-high { background: rgba(var(--err-rgb), .6); }
.inv-leg-lost.inv-lost-medium { background: rgba(var(--warn-rgb), .6); }
.inv-leg-lost.inv-lost-low { background: rgba(148, 163, 184, .6); }

/* Host comparer: the tray, then the dialog */
.inv-cmp-tray {
  position: fixed; left: 50%; bottom: 18px; z-index: 950; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: calc(100vw - 32px);
  padding: 10px 14px; background: var(--bg-card); border: 1px solid rgba(var(--accent-rgb), .5); border-radius: 12px; box-shadow: var(--shadow);
}
.inv-cmp-tray[hidden] { display: none; }
html.inv-tray-open .page-wrap { padding-bottom: 96px; }
.inv-cmp-tray-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.inv-cmp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-cmp-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 3px 2px 10px; font-size: 12.5px; font-weight: 600;
  color: var(--text); background: var(--panel-alt); border: 1px solid var(--border); border-radius: 999px;
}
.inv-cmp-x { width: 22px; height: 22px; padding: 0; font-size: 15px; line-height: 1; color: var(--text-muted); background: none; border: none; border-radius: 50%; cursor: pointer; }
.inv-cmp-x:hover { color: var(--text); background: var(--panel-hover); }
.inv-cmp-hint { font-size: 12px; color: var(--text-muted); }
.inv-cmp-tray .inv-btn:disabled { opacity: .5; cursor: not-allowed; }
.inv-cmp { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 28px 16px; }
.inv-cmp[hidden] { display: none; }
.inv-cmp-backdrop { position: absolute; inset: 0; background: rgba(8, 12, 20, .55); }
.inv-cmp-panel {
  position: relative; display: flex; flex-direction: column; width: min(1200px, 100%); max-height: calc(100vh - 56px);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
}
.inv-cmp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.inv-cmp-head .section-title { margin: 0; }
.inv-cmp-diff { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.inv-cmp-diff input { accent-color: var(--accent); }
.inv-cmp-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.inv-cmp-close {
  width: 32px; height: 32px; padding: 0; font-size: 20px; line-height: 1; color: var(--text-muted);
  background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.inv-cmp-close:hover { color: var(--text); background: var(--panel-alt); border-color: var(--border); }
.inv-cmp-body { overflow: auto; padding: 16px 18px 22px; }
html.inv-modal-open { overflow: hidden; }
.inv-cmp-explain { margin-bottom: 18px; }
.inv-cmp-h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--text); }
.inv-cmp-lead { margin: 0 0 10px; font-size: 13px; color: var(--text); }
.inv-cmp-gaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 10px; }
.inv-cmp-gap { padding: 10px 12px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px; }
.inv-cmp-gap-head { margin: 0 0 8px; font-size: 13px; color: var(--text); }
.inv-cmp-bridge { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.inv-cmp-part { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 8px; font-size: 12px; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; }
.inv-cmp-part b { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-cmp-part.is-down b { color: var(--err-text); }
.inv-cmp-part.is-up b { color: var(--ok-text); }
.inv-cmp-factors { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.65; color: var(--text); }
.inv-cmp-none { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.inv-cmp-table th, .inv-cmp-table td { padding: 8px 12px; }
.inv-cmp-table thead th { vertical-align: bottom; min-width: 180px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); }
.inv-cmp-table thead th:first-child, .inv-cmp-table tbody th[scope="row"] {
  position: sticky; left: 0; z-index: 1; min-width: 150px; background: var(--bg-card);
}
.inv-cmp-table thead th:first-child { background: var(--table-header); }
.inv-cmp-table tbody tr:hover { background: none; }
.inv-cmp-table tbody th[scope="row"] { font-size: 12.5px; font-weight: 500; text-align: left; white-space: nowrap; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.inv-cmp-table tbody td { min-width: 180px; font-size: 13px; }
.inv-cmp-table tr.inv-cmp-group th {
  padding-top: 18px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-align: left; color: var(--text-muted); border-bottom: 1px solid var(--border); background: var(--bg-card);
}
.inv-cmp-table tr.is-diff th[scope="row"] { color: var(--text); box-shadow: inset 3px 0 0 rgba(var(--accent-rgb), .6); }
.inv-cmp-table td.is-best { font-weight: 700; color: var(--ok-text); }
.inv-cmp-table td.is-worst { color: var(--warn-text); }
.inv-cmp-diff-only tr.inv-cmp-row.is-same, .inv-cmp-diff-only tr.inv-cmp-group.is-same { display: none; }
.inv-cmp-drop { display: block; margin-top: 2px; padding: 0; font-size: 11.5px; }
.inv-cmp-chart .inv-mini, .inv-cmp-chart .inv-spark { display: block; width: 100%; max-width: 168px; height: auto; }
.inv-mini-bar { fill: var(--inv-seq); }
.inv-mini-base { stroke: var(--border); stroke-width: 1; }

/* ---------- Inventory: shared controls (segmented buttons, select) ---------- */
.tw-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.inv-seg { display: inline-flex; flex-wrap: wrap; padding: 2px; gap: 2px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 9px; }
.inv-seg-btn {
  padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: transparent; border: none; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.inv-seg-btn:hover { color: var(--text); }
.inv-seg-btn[aria-pressed="true"] { color: var(--text); background: var(--bg-card); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.inv-seg-btn:focus-visible, .inv-select:focus-visible, .tw-rack-name:focus-visible, .tw-host:focus-visible,
.inv-hist-range:focus-visible, .inv-hist-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inv-select {
  padding: 5px 26px 5px 10px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text);
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px;
}
.tw-group-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }

/* ---------- Server room (static/twin.js) ----------
   A slot's colour is its GPU's reading: the rental colours for Rental, one
   hue light to strong for magnitudes (the page's ordinal ramp, strongest =
   most), the status colours only past the temperature warning and critical
   lines. No reading is hatched, never painted as zero. */
:root { --tw-l1: var(--inv-ord-4); --tw-l2: var(--inv-ord-3); --tw-l3: var(--inv-ord-2); --tw-l4: var(--inv-ord-1); }
.tw-room { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; align-items: start; }
.tw-rack {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 12px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 12px; transition: opacity .15s;
}
.tw-rack.is-dim { opacity: .45; }
.tw-rack.is-sel { border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35) inset; }
.tw-rack-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px; }
.tw-rack-name {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--text); background: none; border: none; text-align: left;
}
button.tw-rack-name { cursor: pointer; }
button.tw-rack-name:hover { text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .7); text-underline-offset: 3px; }
.tw-rack-meta { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.tw-rack-power { display: block; }
.tw-rack-power.is-warn { color: var(--warn-text); font-weight: 700; }
.tw-rack-power.is-crit { color: var(--err-text); font-weight: 700; }
/* The rack's frame: two rails with the chassis mounted between them. */
.tw-rack-body {
  display: flex; flex-direction: column; gap: 5px; padding: 6px;
  border-left: 4px solid var(--border); border-right: 4px solid var(--border); border-radius: 5px;
  background: rgba(var(--accent-rgb), .03);
}
.tw-host {
  display: grid; grid-template-columns: 8px minmax(52px, 1fr) auto minmax(38px, auto); align-items: center; gap: 9px;
  padding: 6px 9px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .06);
}
.tw-host:hover { border-color: rgba(var(--accent-rgb), .55); }
.tw-host.is-dim { opacity: .4; }
.tw-led { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.tw-st-rented .tw-led { background: var(--ok); box-shadow: 0 0 6px rgba(var(--ok-rgb), .8); }
.tw-st-idle .tw-led { background: var(--accent); box-shadow: 0 0 5px rgba(var(--accent-rgb), .6); }
.tw-st-paused .tw-led { background: var(--warn); }
.tw-st-alert .tw-led, .tw-st-offline .tw-led { background: var(--err); box-shadow: 0 0 6px rgba(var(--err-rgb), .8); }
.tw-st-unlisted .tw-led { background: var(--text-muted); opacity: .6; }
.tw-st-alert, .tw-st-offline { border-color: rgba(var(--err-rgb), .45); }
.tw-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--text); text-decoration: none; }
a.tw-name:hover { text-decoration: underline; }
.tw-slots { display: grid; grid-template-columns: repeat(var(--tw-cols, 4), var(--tw-slot-w, 11px)); gap: 3px; }
.tw-slot {
  width: var(--tw-slot-w, 11px); height: var(--tw-slot-h, 20px); border-radius: 2px;
  background: var(--tw-c, transparent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
.tw-read { font-size: 12px; font-weight: 700; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tw-D { --tw-c: var(--occ-d); }
.tw-I { --tw-c: var(--occ-i); }
.tw-R { --tw-c: var(--occ-r); }
.tw-x { --tw-c: transparent; box-shadow: inset 0 0 0 1.5px var(--border); }
.tw-l1 { --tw-c: var(--tw-l1); }
.tw-l2 { --tw-c: var(--tw-l2); }
.tw-l3 { --tw-c: var(--tw-l3); }
.tw-l4 { --tw-c: var(--tw-l4); }
.tw-warn { --tw-c: var(--warn); }
.tw-crit { --tw-c: var(--err); }
.tw-na {
  background: repeating-linear-gradient(135deg, rgba(128, 128, 128, .42) 0 1.5px, transparent 1.5px 5px);
  box-shadow: inset 0 0 0 1px var(--border);
}
/* Vast.ai's hottest-GPU figure painted on every slot of a host: striped, so
   it never passes for a per-GPU reading. */
.tw-hostwide { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .34) 0 2px, transparent 2px 5px); }
.tw-slot.inv-mark:hover { outline: 2px solid var(--text); outline-offset: 1px; }
.tw-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--text-muted); }
.tw-leg { display: inline-flex; align-items: center; gap: 6px; }
/* background-color, not the shorthand: the key's "no reading" hatch and the
   host-wide stripes come from .tw-na / .tw-hostwide's background-image. */
.tw-leg-sw { width: 9px; height: 15px; border-radius: 2px; background-color: var(--tw-c, transparent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.tw-leg-sw.tw-x { box-shadow: inset 0 0 0 1.5px var(--border); }
[data-theme="neon"] .tw-D, [data-theme="neon"] .tw-I, [data-theme="neon"] .tw-R { box-shadow: 0 0 6px var(--tw-c); }

/* ---------- Hardware economics ---------- */
.inv-econ-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.inv-econ-charts.is-wide { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: 28px; }
.inv-econ-fig { margin: 0; min-width: 0; }
.inv-econ-cap { margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.inv-econ-wait { padding: 30px 12px; font-size: 13px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 10px; }
.inv-svg .inv-econ-ribbon { opacity: .2; pointer-events: none; }
/* Pointing at a model: its ribbons stand out, the others fade (the page-wide
   .inv-hl-on rule would lift the others above the hovered one's .2). */
.inv-hl-on .inv-svg .inv-econ-ribbon:not(.inv-hl) { opacity: .07; }
.inv-hl-on .inv-svg .inv-econ-ribbon.inv-hl { opacity: .42; }
.inv-svg .inv-econ-dot { fill-opacity: .85; stroke: var(--bg-card); stroke-width: 1.5; transition: opacity .15s; }
.inv-svg .inv-mark:hover .inv-econ-dot, .inv-svg .inv-mark:focus .inv-econ-dot { stroke: var(--text); stroke-width: 2; }
.inv-svg .inv-mark.is-dim .inv-econ-dot { opacity: .3; }
.inv-svg .inv-econ-ref { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 3; opacity: .7; }
.inv-svg text.inv-econ-quad { font-size: 10.5px; font-style: italic; fill: var(--text-muted); opacity: .8; }
.inv-svg .inv-grid { stroke: var(--border); stroke-width: 1; }
.inv-svg .inv-axis { stroke: var(--text-muted); stroke-width: 1; opacity: .6; }
.inv-svg .inv-tick { stroke: var(--text-muted); stroke-width: 1; opacity: .6; }
.inv-econ-table td { white-space: nowrap; }
.inv-econ-table th, .inv-econ-table td { padding-left: 9px; padding-right: 9px; }
/* Ten columns: a narrow card wraps the headers rather than scrolling. */
.inv-econ-table thead th { vertical-align: bottom; }
.inv-econ-table thead .inv-sort { white-space: normal; text-align: inherit; line-height: 1.25; }
.inv-econ-table thead th.num .inv-sort { justify-content: flex-end; text-align: right; }
.inv-econ-table tr.is-dim td { opacity: .45; }
.inv-econ-table tr.is-sel td { background: rgba(var(--accent-rgb), .07); }
.inv-econ-table tr.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.inv-econ-table .inv-sub { display: block; }
.inv-econ-index { font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-econ-up { color: var(--ok-text); }
.inv-econ-down { color: var(--err-text); }

/* ---------- Fleet history ---------- */
.inv-svg .inv-hist-band { fill-opacity: .88; transition: opacity .12s; }
.inv-svg .inv-hist-nodata { fill: var(--panel-alt); opacity: .7; }
.inv-svg .inv-hist-cursor line { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 3 2; pointer-events: none; }
.inv-svg .inv-hist-day { cursor: pointer; }
.inv-svg .inv-hist-day .inv-hit { fill: transparent; }
.inv-svg .inv-hist-day:hover .inv-hit { fill: rgba(var(--accent-rgb), .12); }
.inv-svg .inv-hist-marker { fill: var(--text-muted); }
.inv-svg .inv-hist-marker.inv-hist-up { fill: var(--ok-text); }
.inv-svg .inv-hist-marker.inv-hist-down { fill: var(--err-text); }
.inv-svg .inv-hist-ev-mark:hover .inv-hist-marker, .inv-svg .inv-hist-ev-mark:focus .inv-hist-marker { fill: var(--text); }
.inv-hist-slider { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 6px 0 14px; }
.inv-hist-range { flex: 1 1 220px; min-width: 160px; accent-color: var(--accent); }
.inv-hist-date { min-width: 150px; font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.inv-hist-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.inv-hist-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.inv-hist-stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 9px; min-width: 0; }
.inv-hist-stat-label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.inv-hist-stat strong { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.inv-hist-stat-delta { min-height: 14px; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.inv-hist-models { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.inv-hist-h { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.inv-hist-events { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.inv-hist-ev { display: grid; grid-template-columns: minmax(92px, auto) 16px minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: 12.5px; }
.inv-hist-ev.is-cur { background: var(--accent-soft); }
.inv-hist-go { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-hist-icon { font-weight: 700; text-align: center; color: var(--text-muted); }
.inv-hist-k-added .inv-hist-icon, .inv-hist-k-returned .inv-hist-icon { color: var(--ok-text); }
.inv-hist-k-removed .inv-hist-icon { color: var(--err-text); }
.inv-hist-text { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.inv-hist-none { font-size: 12.5px; }
.inv-hist-leg { display: inline-block; width: 10px; height: 10px; background: var(--text-muted); }
.inv-hist-leg.inv-hist-up { background: var(--ok-text); }
.inv-hist-leg.inv-hist-down { background: var(--err-text); }
.inv-hist-leg.inv-hist-up { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.inv-hist-leg.inv-hist-down { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.inv-hist-leg.inv-hist-change { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
@media (max-width: 900px) {
  .inv-hist-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .inv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .inv-kpi { padding: 12px 14px 10px; }
  .inv-kpi .card-value { font-size: 22px; }
  .inv-cols { margin-left: 0; }
  .inv-cols-menu { left: 0; right: auto; }
  .inv-search { max-width: none; }
  .inv-filterbar { top: 60px; }
  .inv-fbar-clear { margin-left: 0; }
  .inv-bn-th-btn { margin-left: 0; }
  .inv-bn-impact { display: none; }
  .inv-cmp { padding: 0; touch-action: none; } /* mobile: inventory — a swipe on the overlay does not scroll the page */
  .inv-cmp-panel { height: 100%; max-height: none; border-radius: 0; }
  .inv-cmp-actions { margin-left: 0; }
  .inv-cmp-tray { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; }
  .inv-cmp-body { padding: 12px 12px calc(18px + env(safe-area-inset-bottom)); }
  .inv-cmp-table thead th, .inv-cmp-table tbody td { min-width: 124px; }
  .inv-cmp-table thead th:first-child, .inv-cmp-table tbody th[scope="row"] { min-width: 96px; max-width: 110px; white-space: normal; }
  .tw-room { grid-template-columns: minmax(0, 1fr); }
  .tw-host { grid-template-columns: 8px minmax(40px, 1fr) auto minmax(32px, auto); gap: 7px; padding: 6px 7px; }
  .tw-slots { --tw-slot-w: 9px; --tw-slot-h: 17px; gap: 2px; }
  .inv-hist-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-hist-ev { grid-template-columns: minmax(80px, auto) 14px minmax(0, 1fr); gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .inv-svg .inv-bar, .inv-stale .inv-card-body, #inv-rows-wrap [data-gpu], .tw-rack, .inv-svg .inv-econ-dot { transition: none; }
}

/* ---------- Inventory: energy now ----------
   The bars follow the page's colour rule: a hue is a GPU model (what draws
   the power); the frame is full load, the tick the circuit limit. Status
   colours only mark a circuit past 80% (warning) or 90% (critical). */
.inv-energy-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; margin-bottom: 12px; }
.inv-energy-fig {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px;
}
.inv-energy-fig.is-warn { border-color: rgba(var(--warn-rgb), .6); box-shadow: inset 3px 0 0 var(--warn); }
.inv-energy-fig.is-crit { border-color: rgba(var(--err-rgb), .6); box-shadow: inset 3px 0 0 var(--err); }
.inv-energy-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.inv-energy-value { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.inv-energy-fig.is-warn .inv-energy-value { color: var(--warn-text); }
.inv-energy-fig.is-crit .inv-energy-value { color: var(--err-text); }
.inv-energy-fig .inv-sub { font-size: 12px; line-height: 1.4; white-space: normal; overflow: visible; text-overflow: clip; }
.inv-energy-next { margin: 0 0 14px; font-size: 12.5px; color: var(--text); }
.inv-energy-alert { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-weight: 600; }
.inv-energy-alert .inv-icon { flex: none; width: 11px; height: 11px; }
.inv-energy-alert.is-warn { color: var(--warn-text); }
.inv-energy-alert.is-crit { color: var(--err-text); }
.inv-svg .inv-energy-full { fill: none; stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 2; opacity: .75; }
.inv-svg .inv-energy-limit { stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.inv-svg .inv-energy-limit.is-warn { stroke: var(--warn); }
.inv-svg .inv-energy-limit.is-crit { stroke: var(--err); }
.inv-svg text.inv-energy-warn { fill: var(--warn-text); }
.inv-svg text.inv-energy-crit { fill: var(--err-text); }
.inv-svg .inv-mark.is-dim .inv-energy-now { opacity: .3; }
.inv-energy-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 8px; font-size: 12px; color: var(--text-muted); }
.inv-energy-legend i { display: inline-block; margin-right: 6px; vertical-align: -1px; }
.inv-energy-key-now { width: 18px; height: 8px; border-radius: 2px; background: var(--inv-cat-1); }
.inv-energy-key-full { width: 18px; height: 8px; border: 1px dashed var(--text-muted); border-radius: 2px; }
.inv-energy-key-limit { width: 2px; height: 12px; background: var(--text); border-radius: 1px; }
.inv-energy-legend .inv-btn { margin-left: auto; }
.inv-energy-table td { white-space: nowrap; }
.inv-energy-table .inv-sub { display: block; }
/* Energy history: the room's hourly (daily) average, measured part solid,
   the estimate lighter; the status colours only past 80% / 90% of the
   circuit, as on the bars above. */
.inv-eh { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.inv-eh-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 8px; }
.inv-eh-title { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.inv-eh-text { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--text); }
.inv-eh-loading { margin: 10px 0 16px; font-size: 12.5px; }
.inv-eh-racks { display: flex; flex-direction: column; gap: 2px; margin: -4px 0 10px; padding: 0; list-style: none; font-size: 12px; color: var(--text-muted); }
.inv-eh-rack { display: flex; align-items: center; gap: 5px; }
.inv-eh-rack .inv-icon { flex: none; width: 11px; height: 11px; }
.inv-eh-rack.is-warn { color: var(--warn-text); font-weight: 600; }
.inv-eh-rack.is-crit { color: var(--err-text); font-weight: 600; }
.inv-svg .inv-eh-bar { fill: var(--inv-seq); }
.inv-svg .inv-eh-bar.is-est { opacity: .38; }
.inv-svg .inv-eh-bar.is-warn { fill: var(--warn); }
.inv-svg .inv-eh-bar.is-crit { fill: var(--err); }
.inv-svg .inv-eh-peak { stroke: var(--text); stroke-width: 1.5; }
.inv-svg .inv-eh-peak.is-warn { stroke: var(--warn); }
.inv-svg .inv-eh-peak.is-crit { stroke: var(--err); }
.inv-svg .inv-eh-limit { stroke-width: 1.5; stroke-dasharray: 5 3; }
.inv-svg .inv-mark:hover .inv-eh-bar, .inv-svg .inv-mark:focus-visible .inv-eh-bar { filter: brightness(1.15); }
.inv-eh-legend { margin-top: 6px; }
.inv-eh-key { width: 12px; height: 10px; border-radius: 2px; background: var(--inv-seq); }
.inv-eh-key.is-est { opacity: .38; }
.inv-eh-key-limit { width: 18px; height: 0; border-top: 2px dashed var(--text); }
.inv-eh-table td { white-space: nowrap; }
.inv-eh-table .inv-sub { display: block; }
.inv-cap-table td, .inv-cap-table th, .inv-ev-table td { white-space: nowrap; }
.inv-cap-table th .inv-swatch { margin-right: 5px; vertical-align: -1px; }
.inv-cap-table .inv-sub, .inv-ev-table .inv-sub { display: block; font-weight: 400; }
.inv-cap-over { color: var(--err-text); font-weight: 600; }

/* ---------- Inventory: hardware lifecycle ----------
   A host's bar is its GPU model's hue from purchase to today, dashed to its
   write-off. Markers keep one meaning each: a paid-off check is the only
   status colour (--ok; hollow while projected), a warranty ending within 60
   days and a disk within 90 days of its rated endurance turn --warn. */
.inv-svg .inv-lc-grid { stroke: var(--border); stroke-width: 1; }
.inv-svg .inv-lc-track { stroke: var(--border); stroke-width: 1; }
.inv-svg .inv-lc-life { opacity: .85; }
.inv-svg .inv-lc-left { fill: none; stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 2; opacity: .8; }
.inv-svg .inv-lc-buy { stroke: var(--bg-card); stroke-width: 1.5; }
.inv-svg .inv-lc-pay circle { fill: var(--ok); stroke: var(--bg-card); stroke-width: 1; }
.inv-svg .inv-lc-pay path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.inv-svg .inv-lc-pay.is-projected circle { fill: var(--bg-card); stroke: var(--ok); stroke-width: 1.5; stroke-dasharray: 2 1.5; }
.inv-svg .inv-lc-pay.is-projected path { stroke: var(--ok); }
.inv-svg .inv-lc-war { fill: var(--text); stroke: var(--bg-card); stroke-width: 1; }
.inv-svg .inv-lc-war.is-past { fill: var(--text-muted); opacity: .6; }
.inv-svg .inv-lc-war.is-warn { fill: var(--warn); }
.inv-svg .inv-lc-disk { fill: var(--text-muted); stroke: var(--bg-card); stroke-width: 1; }
.inv-svg .inv-lc-disk.is-warn { fill: var(--warn); }
.inv-svg .inv-lc-off { stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; }
.inv-svg .inv-lc-today { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.inv-svg text.inv-lc-today-label { font-size: 10.5px; font-weight: 700; fill: var(--accent-strong, var(--accent)); }
.inv-svg .inv-lc-area { fill: var(--inv-seq); opacity: .12; }
.inv-svg .inv-lc-line { fill: none; stroke: var(--inv-seq); stroke-width: 2; stroke-linejoin: round; }
.inv-svg .inv-lc-line.is-ahead { stroke-dasharray: 5 4; opacity: .8; }
.inv-lc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 4px; font-size: 12px; color: var(--text-muted); }
.inv-lc-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.inv-lc-i-buy { fill: var(--inv-cat-1); }
.inv-lc-i-pay { fill: var(--ok); }
.inv-lc-i-tick { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.inv-lc-i-war { fill: var(--text); }
.inv-lc-i-disk { fill: var(--text-muted); }
.inv-lc-i-off { fill: var(--text-muted); }
.inv-lc-key-left { display: inline-block; width: 18px; height: 8px; border: 1px dashed var(--text-muted); border-radius: 2px; }
.inv-lc-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.inv-lc-split.is-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.inv-lc-events { margin: 0; padding: 0; list-style: none; }
.inv-lc-ev {
  display: grid; grid-template-columns: minmax(96px, auto) 16px minmax(0, 1fr); align-items: start; gap: 4px 10px;
  padding: 6px 0; font-size: 12.5px; color: var(--text); border-bottom: 1px solid var(--border);
}
.inv-lc-ev:last-child { border-bottom: none; }
.inv-lc-ev-date { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.inv-lc-ev-date .inv-sub { font-weight: 400; }
.inv-lc-ev-icon { padding-top: 2px; }
.inv-lc-ev.is-past { color: var(--text-muted); }
.inv-lc-ev.is-past .inv-lc-ev-date { font-weight: 500; }
.inv-lc-ev.is-warn .inv-lc-i-war, .inv-lc-ev.is-warn .inv-lc-i-disk { fill: var(--warn); }
.inv-lc-ev.is-warn .inv-lc-ev-text { color: var(--warn-text); }
.inv-lc-ev.is-projected .inv-lc-i-pay { fill: none; stroke: var(--ok); stroke-width: 1.4; }
.inv-lc-ev.is-projected .inv-lc-i-tick { stroke: var(--ok); }
.inv-lc-missing .inv-link-btn { padding: 2px 0; }
.inv-lc-table td { white-space: nowrap; }
.inv-lc-table .inv-sub { display: block; }

/* ---------- Inventory: upgrade simulator ---------- */
.inv-sim-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.inv-sim-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.inv-sim-host { flex: 1 1 320px; max-width: 560px; }
.inv-sim-host select { width: 100%; padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
.inv-sim-set { margin: 0; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.inv-sim-set legend { padding: 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.inv-sim-set .inv-dlg-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.inv-sim-headline { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--text); }
.inv-sim-headline.is-up { color: var(--ok-text); }
.inv-sim-headline.is-down { color: var(--err-text); }
.inv-sim-table th[scope="row"] { font-size: 12.5px; font-weight: 500; text-align: left; white-space: nowrap; color: var(--text-muted); }
.inv-sim-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-sim-table td .inv-sub { display: block; }
.inv-sim-table tr.inv-sim-total th, .inv-sim-table tr.inv-sim-total td { border-top: 2px solid var(--border); }
.inv-sim-net.is-up { color: var(--ok-text); }
.inv-sim-net.is-down { color: var(--err-text); }
.inv-sim-notes { margin: 14px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }
.inv-svg .inv-sim-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.inv-svg .inv-sim-line.is-now { stroke: var(--text-muted); stroke-dasharray: 5 4; }
.inv-svg .inv-sim-line.is-up { stroke: var(--accent); }
.inv-svg .inv-sim-zero { stroke: var(--text-muted); opacity: .6; }
.inv-svg .inv-sim-cross { fill: var(--bg-card); stroke: var(--accent); stroke-width: 2; }
.inv-svg text.inv-sim-lab-up { fill: var(--accent-strong, var(--accent)); font-weight: 600; }
.inv-svg text.inv-sim-halo { paint-order: stroke; stroke: var(--bg-card); stroke-width: 4px; stroke-linejoin: round; }
.inv-sim-key-now { width: 18px; height: 0; border-top: 2px dashed var(--text-muted); }
.inv-sim-key-up { width: 18px; height: 0; border-top: 2px solid var(--accent); }

/* Phone width: the figures and the simulator's fields two to a row. */
@media (max-width: 560px) {
  .inv-energy-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .inv-energy-fig { padding: 8px 10px; }
  .inv-energy-value { font-size: 18px; }
  .inv-sim-set .inv-dlg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .inv-sim-table th[scope="row"] { white-space: normal; }
  .inv-sim-table th, .inv-sim-table td { padding-left: 6px; padding-right: 6px; }
  .inv-lc-ev { grid-template-columns: minmax(84px, auto) 14px minmax(0, 1fr); gap: 4px 8px; }
}

/* ---------- Inventory: editor dialog (circuit limits, depreciation, purchase data) ---------- */
.inv-dlg-panel { width: min(560px, 100%); }
.inv-dlg-lead { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.inv-dlg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px 16px; }
.inv-dlg-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12.5px; color: var(--text); }
.inv-dlg-field > span:first-child { font-weight: 600; }
.inv-dlg-field small { font-size: 11.5px; line-height: 1.4; color: var(--text-muted); }
.inv-dlg-input { display: flex; align-items: center; gap: 6px; }
.inv-dlg-input input, .inv-dlg-field select {
  flex: 1 1 auto; min-width: 0; padding: 7px 10px; font: inherit; font-size: 13px; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; font-variant-numeric: tabular-nums;
}
.inv-dlg-input input:focus-visible, .inv-dlg-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* mobile: inventory — dialog and simulator fields at 16 px so iOS does not zoom
   (this rule outranks the shared .page-wrap one by order) */
@media (max-width: 640px) {
  .inv-dlg-input input, .inv-dlg-field select { font-size: 16px; }
}
.inv-dlg-unit { flex: none; font-size: 12px; color: var(--text-muted); }
.inv-dlg-error { margin: 14px 0 0; font-size: 12.5px; color: var(--err-text); }
.inv-dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }
.inv-dlg-foot .inv-btn:disabled { opacity: .6; cursor: progress; }

/* ---------- Machine page: Rig Twin (GPU slots) ---------- */
.rig-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; margin-bottom: 10px; }
.rig-summary b { font-size: 14px; }
.rig-summary .type-badges { display: inline-flex; gap: 4px; }
#machine-occ-card .rig-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; width: 100%; }
#machine-occ-card .occ-host-row { display: block; }
#machine-occ-card .occ-tile {
  width: auto; height: auto; min-height: 92px;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px;
  padding: 9px 10px 9px 13px; text-align: left;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel-alt); color: var(--text);
  font-weight: 500; position: relative; overflow: hidden;
}
#machine-occ-card .occ-tile::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: rgba(148, 163, 184, .45);
}
#machine-occ-card .occ-tile.occ-D { background: rgba(var(--ok-rgb), .08); color: var(--text); }
#machine-occ-card .occ-tile.occ-I { background: rgba(var(--accent-rgb), .08); color: var(--text); }
#machine-occ-card .occ-tile.occ-R { background: rgba(var(--occ-r-rgb), .08); color: var(--text); }
#machine-occ-card .occ-tile.occ-D::before { background: var(--occ-d); }
#machine-occ-card .occ-tile.occ-I::before { background: var(--occ-i); }
#machine-occ-card .occ-tile.occ-R::before { background: var(--occ-r); }
#machine-occ-card .occ-tile.occ-idle { border-style: dashed; background: transparent; font-size: 12px; }
#machine-occ-card .occ-tile:hover { transform: translateY(-1px); filter: none; box-shadow: var(--shadow-soft); }
.slot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.slot-idx { font-size: 12px; font-weight: 700; }
.slot-state { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.occ-D .slot-state { color: var(--occ-d-text); }
.occ-I .slot-state { color: var(--occ-i); }
.occ-R .slot-state { color: var(--occ-r); }
.slot-temp { position: relative; height: 5px; border-radius: 3px; background: rgba(148, 163, 184, .25); overflow: visible; }
.slot-temp-fill { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
.slot-temp-fill.t-warn { background: var(--warn); }
.slot-temp-fill.t-crit { background: var(--err); }
.slot-temp-mark { position: absolute; top: -2px; bottom: -2px; width: 1px; background: rgba(var(--warn-rgb), .9); }
.slot-temp-mark.crit { background: rgba(var(--err-rgb), .9); }
.slot-line { font-size: 11.5px; color: var(--text-muted); }
.slot-line .t-ok { color: var(--text); font-weight: 600; }
.slot-sess { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-sess .mono { font-size: 11px; }
.slot-chip { align-self: flex-start; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--warn); color: var(--warn-text); }
.occ-tile.slot-changed { animation: slotChanged 1.6s ease-out; }
@keyframes slotChanged {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .6); }
  100% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0); }
}

/* ---------- Machine page: money and history cards (machine_insights.js) ---------- */
.ins-body { min-width: 0; }
.mm-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.mm-big { font-size: 26px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mm-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.mm-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.mm-row { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.mm-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.mm-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; padding: 2px 0; }
.mm-line > span { min-width: 0; }
.mm-line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm-line .text-muted { font-size: 11.5px; display: block; }
.mm-est { font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); cursor: help; }
.mm-tariff { font-size: 12px; padding: 6px 8px; border-radius: 8px; background: var(--accent-soft); margin-bottom: 10px; }
.mm-today { border-top: 1px solid var(--border); padding-top: 8px; }
.mm-counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.mm-counters span { display: flex; flex-direction: column; min-width: 0; }
.mm-counters small { font-size: 10.5px; color: var(--text-muted); }
.mm-counters b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-cta { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.45; }
.tariff-clock { width: 76px; height: 76px; flex: 0 0 76px; }
.tclock-hand { stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.tclock-hub { fill: var(--text); }
.tclock-tick { font-size: 7px; fill: var(--text-muted); }

.pb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pb-ring { width: 64px; height: 64px; flex: 0 0 64px; }
.pb-track { fill: none; stroke: rgba(148, 163, 184, .25); stroke-width: 7; }
.pb-fill { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; }
.pb-fill.ok { stroke: var(--ok); }
.pb-fill.warn { stroke: var(--warn); }
.pb-fill.crit { stroke: var(--err); }
.pb-pct { font-size: 13px; font-weight: 800; fill: var(--text); }
.pb-status { font-weight: 800; font-size: 15px; }
.pb-ok { color: var(--ok-text); }
.pb-warn { color: var(--warn-text); }
.pb-crit { color: var(--err-text); }

.market-position { margin-top: 10px; }
.market-position:empty { display: none; }
.mp-title { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.mp-bar { position: relative; height: 10px; border-radius: 5px; background: rgba(148, 163, 184, .15); margin: 4px 6px; }
.mp-range { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; background: rgba(148, 163, 184, .4); }
.mp-iqr { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: rgba(var(--accent-rgb), .35); }
.mp-median { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); }
.mp-you { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--warn); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--warn); }
.mp-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-muted); margin-top: 4px; }
.mp-text { font-size: 12.5px; margin-top: 6px; }
.mp-suggest { font-size: 12px; margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: rgba(var(--ok-rgb), .1); border: 1px solid rgba(var(--ok-rgb), .3); }
.mp-note { font-size: 11px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }

.fn-head { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.fn-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: rgba(148, 163, 184, .12); }
.fn-seg { height: 100%; min-width: 2px; }
.fn-seg + .fn-seg { border-left: 1px solid var(--panel); }
.fn-nodata, .fn-sw.fn-nodata { background-image: repeating-linear-gradient(45deg, rgba(148, 163, 184, .25) 0 4px, transparent 4px 8px) !important; }
.fn-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 12px; font-size: 12px; }
.fn-leg { display: inline-flex; align-items: center; gap: 5px; }
.fn-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; border: 1px solid var(--border); }
.fn-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fn-money > div { padding: 8px 10px; border-radius: 10px; background: var(--panel-alt); border: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.fn-money small { font-size: 11px; color: var(--text-muted); }
.fn-money b { font-size: 18px; font-variant-numeric: tabular-nums; }
.fn-weak { font-size: 12.5px; margin-top: 10px; padding: 6px 10px; border-left: 3px solid var(--warn); background: rgba(var(--warn-rgb), .08); border-radius: 0 8px 8px 0; }
.fn-gpus { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.fn-gpu { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12px; }
.fn-gpu-name { font-weight: 700; }
.fn-gpu-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(148, 163, 184, .12); }
.fn-gpu-bar span { height: 100%; }
.fn-gpu-val { color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.pl-spots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.pl-spots > div { padding: 8px 10px; border-radius: 10px; background: var(--panel-alt); border: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.pl-spots small { font-size: 11px; color: var(--text-muted); }
.pl-spots b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pl-spots span { font-size: 11.5px; color: var(--text-muted); }
.pl-spots .pl-best { border-color: rgba(var(--ok-rgb), .5); background: rgba(var(--ok-rgb), .08); }
.pl-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pl-chart { position: relative; height: 230px; min-width: 0; }
.pl-sim { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 12px; margin-top: 12px; font-size: 12.5px; }
.pl-sim input[type=range] { width: 100%; accent-color: var(--accent); }
.pl-readout { grid-column: 1 / -1; font-variant-numeric: tabular-nums; }
.pl-note { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.45; }
.pl-sub { font-size: 13px; font-weight: 700; margin: 16px 0 8px; }
.pc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pc-item { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-alt); min-width: 0; }
.pc-item.pc-paid_off { border-left: 3px solid var(--ok); }
.pc-item.pc-cost { border-left: 3px solid var(--err); }
.pc-top { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-pct { font-size: 11.5px; color: var(--text-muted); }
.pc-chip { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); margin-left: auto; }
.pc-chip.pc-ok { border-color: var(--ok); color: var(--ok-text); }
.pc-chip.pc-crit { border-color: var(--err); color: var(--err-text); }
.pc-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.pc-spark { display: block; width: 100%; height: 28px; margin-top: 6px; }
.pc-spark-line { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pc-spark-mark { stroke: var(--text-muted); stroke-dasharray: 3 2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pc-empty { font-size: 12.5px; color: var(--text-muted); font-style: italic; }

.hw-table td { vertical-align: middle; }
.hw-table tr.hw-flagged td { background: rgba(var(--err-rgb), .07); }
.hw-chip { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.hw-chip.ok { color: var(--ok-text); background: rgba(var(--ok-rgb), .12); }
.hw-chip.warn { color: var(--warn-text); background: rgba(var(--warn-rgb), .14); }
.hw-chip.bad { color: var(--err-text); background: rgba(var(--err-rgb), .14); }
.hw-spark { width: 110px; height: 24px; display: block; }
.hw-spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hw-flagged .hw-spark path { stroke: var(--err); }

@media (max-width: 720px) {
  .pl-charts { grid-template-columns: minmax(0, 1fr); }
  .pl-spots, .fn-money { grid-template-columns: minmax(0, 1fr); }
  .fn-gpu { grid-template-columns: 44px minmax(0, 1fr); }
  .fn-gpu-val { grid-column: 2; white-space: normal; }
}


/* ── Plan lock: a card the plan doesn't include (partials/plan_lock.html) ── */
.is-plan-locked { position: relative; min-height: 220px; overflow: hidden; }
.is-plan-locked > :not(.plan-lock) { filter: blur(5px) saturate(.6); opacity: .55; pointer-events: none; user-select: none; }
.plan-lock {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; padding: 20px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .04), rgba(var(--accent-rgb), .10));
}
.plan-lock-box {
  max-width: 420px; text-align: center; display: grid; gap: 10px; justify-items: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; box-shadow: var(--shadow-soft);
}
.plan-lock-pill {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-strong); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px;
}
.plan-lock-text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.plan-lock-cta {
  display: inline-block; background: var(--accent); color: #fff; font-weight: 600; font-size: 13px;
  border-radius: 8px; padding: 8px 14px; text-decoration: none;
}
.plan-lock-cta:hover { filter: brightness(1.08); text-decoration: none; }

/* ── Plan picker (partials/plan_picker.html, static/plan_picker.js) ── */
.pp { display: grid; gap: 18px; }
.pp-toggle { justify-self: start; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--panel-alt); border: 1px solid var(--border); }
.pp-toggle-btn { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.pp-toggle-btn.is-on { background: var(--panel); color: var(--text); box-shadow: var(--shadow-soft); }
.pp-save { font-size: 10.5px; font-weight: 700; color: var(--ok); background: rgba(var(--ok-rgb), .14); padding: 2px 7px; border-radius: 999px; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pp-card { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px 20px; }
.pp-card.is-featured { border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .45), var(--shadow-soft); }
.pp-card.is-current { border-color: var(--ok); box-shadow: 0 0 0 1px rgba(var(--ok-rgb), .45); }
.pp-badge { position: absolute; top: -11px; left: 20px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--accent); }
.pp-card.is-current .pp-badge { background: var(--ok); }
.pp-name { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.pp-tagline { margin: 0; font-size: 13.5px; color: var(--text); }
.pp-price { display: flex; align-items: baseline; gap: 4px; font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.pp-price small { font-size: 13px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.pp-billed { margin: -6px 0 0; font-size: 12px; color: var(--text-muted); }
.pp-numbers { list-style: none; margin: 0; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.pp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; color: var(--text-muted); flex: 1; }
.pp-list li { position: relative; padding-left: 20px; line-height: 1.45; }
.pp-list li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 9px; height: 5px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.pp-list li.pp-includes { padding-left: 0; color: var(--text); font-weight: 600; }
.pp-list li.pp-includes::before { display: none; }
.pp-btn { margin-top: 6px; border: 1px solid var(--border); background: var(--panel-alt); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; padding: 10px 14px; border-radius: 9px; cursor: pointer; }
.pp-btn:hover:not(:disabled) { border-color: var(--accent); }
.pp-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pp-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.pp-btn-muted, .pp-btn:disabled { opacity: .7; cursor: default; }
.pp-error { margin: 0; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--err); background: rgba(var(--err-rgb), .1); border: 1px solid rgba(var(--err-rgb), .3); }