/* ======================================================================== *
 *  ARGOS — internal distributed-monitoring dashboard.
 *  Visual identity: Zell panel. Light theme, brand orange #F5891F.
 *  Tokens lifted verbatim from pui/panel/src/app/globals.css (:root light).
 *
 *  Layout: full-width top header (serving-node info) + a grid of large,
 *  information-rich service cards. Detail = availability over time + the
 *  per-VPS logs (side by side). No sidebar, no tag filter.
 *
 *  Vanilla CSS. No build step. FastAPI serves this file statically.
 * ======================================================================== */

:root {
  --radius: 0.75rem;

  --background: #F7F7F8;
  --foreground: oklch(0.2305 0.0041 264.49);
  --card: #FFFFFF;
  --card-foreground: oklch(0.2305 0.0041 264.49);
  --border: #E7E7EA;
  --border-strong: #DCDCE0;
  --muted-foreground: #58595B;
  --muted-2: #8A8B8E;

  --primary: #F5891F;
  --brand: #F5891F;
  --brand-soft: #FEF1E2;
  --accent-foreground: oklch(0.5553 0.1455 49);

  --ok: oklch(0.6271 0.1699 149.21);
  --ok-bg: oklch(0.9624 0.0434 156.74);
  --ok-foreground: oklch(0.5273 0.1371 150.07);
  --warn: oklch(0.6658 0.1574 58.32);
  --warn-bg: oklch(0.9619 0.058 95.62);
  --warn-foreground: oklch(0.5553 0.1455 49);
  --bad: oklch(0.5771 0.2152 27.33);
  --bad-bg: oklch(0.9356 0.0309 17.72);
  --bad-foreground: oklch(0.5054 0.1905 27.52);

  --chart-1: #F5891F;
  --chart-2: oklch(0.6271 0.1699 149.21);
  --chart-3: oklch(0.6658 0.1574 58.32);
  --chart-4: oklch(0.5771 0.2152 27.33);
  --chart-5: oklch(0.4638 0.0035 264.53);

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shadow-sm: 0 1px 2px 0 rgba(20, 20, 20, 0.04), 0 1px 3px 0 rgba(20, 20, 20, 0.06);
  --shadow-md: 0 2px 4px -1px rgba(20, 20, 20, 0.05), 0 4px 12px -2px rgba(20, 20, 20, 0.08);
  --shadow-lg: 0 10px 30px -6px rgba(20, 20, 20, 0.14), 0 4px 10px -4px rgba(20, 20, 20, 0.10);
}

* { box-sizing: border-box; }
html { font-family: var(--font-sans); }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* The Zell mobile-app icon: orange rounded square, white logo centered. */
.app-icon {
  background: var(--brand);
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(245, 137, 31, 0.35);
  flex: 0 0 auto;
}
.app-icon img { object-fit: contain; display: block; }

/* ===================================================================== *
 *  TOP HEADER (full width)
 * ===================================================================== */
.header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  height: 68px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.hdr-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.hdr-brand .app-icon { width: 38px; height: 38px; border-radius: 11px; }
.hdr-brand .app-icon img { width: 24px; height: 24px; }
.hdr-brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.hdr-name { font-family: var(--font-head); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.hdr-sub { font-size: 11px; color: var(--muted-2); margin-top: 1px; }

.hdr-spacer { flex: 1 1 auto; }

/* serving-node block + host health */
.hdr-node {
  display: flex; align-items: center; gap: 18px;
  padding: 7px 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: #FCFCFD;
}
.hdr-node-id { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.hdr-node-id .label { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.hdr-node-id .val { font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; color: var(--foreground); display: inline-flex; align-items: center; gap: 6px; }
.hdr-node-id .val .nd { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }

/* node switcher (dropdown to navigate to another VPS) */
.node-switch { position: relative; }
.node-trigger {
  display: flex; align-items: center; gap: 12px;
  background: transparent; border: none; cursor: pointer;
  padding: 4px 6px 4px 4px; margin: -4px -2px -4px -4px; border-radius: 9px;
  font: inherit; color: inherit; transition: background 0.12s ease;
}
.node-trigger:hover { background: rgba(20, 20, 20, 0.035); }
.node-trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.node-chev { width: 15px; height: 15px; color: var(--muted-2); transition: transform 0.15s ease, color 0.12s ease; flex: 0 0 auto; }
.node-trigger[aria-expanded="true"] .node-chev { transform: rotate(180deg); color: var(--accent-foreground); }

.node-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 248px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 60;
}
.node-menu.open { display: block; }
.node-menu-h { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); padding: 7px 9px 6px; }
.node-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 8px; color: var(--foreground); text-decoration: none;
  cursor: pointer; transition: background 0.12s ease;
}
a.node-opt:hover { background: var(--background); }
.node-opt.active { background: var(--brand-soft); cursor: default; }
.node-opt .no-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.node-opt .no-id { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--foreground); }
.node-opt.active .no-id { color: var(--accent-foreground); }
.node-opt .no-ico { width: 14px; height: 14px; color: var(--muted-2); flex: 0 0 auto; }
.node-opt .no-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); flex: 0 0 auto; }
.node-opt .no-url { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 22px; }
.node-opt .no-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-foreground); background: rgba(245, 137, 31, 0.16); padding: 2px 8px; border-radius: 6px; flex: 0 0 auto; }
.node-opt .no-arrow { width: 15px; height: 15px; color: var(--muted-2); flex: 0 0 auto; }
a.node-opt:hover .no-arrow { color: var(--accent-foreground); }
.node-empty { padding: 9px 11px; font-size: 12px; color: var(--muted-2); }

.hdr-health { display: flex; align-items: center; gap: 14px; }
.gauge { display: flex; flex-direction: column; gap: 4px; min-width: 84px; }
.gauge .g-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gauge .g-l { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); }
.gauge .g-v { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--foreground); }
.gauge .g-sub { font-size: 9.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 1px; letter-spacing: 0.01em; }
.gauge .g-bar { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.gauge .g-fill { height: 100%; border-radius: 3px; background: var(--ok); transition: width 0.4s ease; }
.gauge.warn .g-fill { background: var(--warn); }
.gauge.bad .g-fill { background: var(--bad); }
.gauge.bad .g-v { color: var(--bad-foreground); }

.hdr-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.updated { font-size: 12.5px; color: var(--muted-foreground); white-space: nowrap; }
.updated b { font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; }
.conn-pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px 5px 9px;
  font-size: 12px; font-weight: 600; color: var(--muted-foreground); background: var(--card);
}
.conn-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
.conn-pill.live { color: var(--ok-foreground); background: var(--ok-bg); border-color: transparent; }
.conn-pill.live .dot { background: var(--ok); }
.conn-pill.lost { color: var(--bad-foreground); background: var(--bad-bg); border-color: transparent; }
.conn-pill.lost .dot { background: var(--bad); }
.conn-pill.waking { color: var(--warn-foreground); background: var(--warn-bg); border-color: transparent; }
.conn-pill.waking .dot { background: var(--warn); }
.logout {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--muted-foreground);
  border: 1px solid var(--border); border-radius: 9px; padding: 6px 11px; background: var(--card);
  cursor: pointer;
}
.logout:hover { background: var(--background); color: var(--foreground); border-color: var(--border-strong); }
.logout svg { width: 15px; height: 15px; }

/* ===================================================================== *
 *  MAIN
 * ===================================================================== */
.main { padding: 28px 32px 64px; max-width: 1600px; margin: 0 auto; }
.page-head { margin-bottom: 4px; }
.page-title { font-family: var(--font-head); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; margin: 0; }
.page-sub { color: var(--muted-foreground); font-size: 14px; margin-top: 5px; }

.summary { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 18px 0 20px; }
.sum-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted-foreground); }
.sum-item .sd { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.sum-item.up .sd { background: var(--ok); }
.sum-item.down .sd { background: var(--bad); }
.sum-item.warn .sd { background: var(--warn); }
.sum-item.tot .sd { background: var(--muted-2); }
.sum-item b { color: var(--foreground); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===================================================================== *
 *  MESH STRIP — the Argos watchers
 * ===================================================================== */
.mesh-strip { margin: 4px 0 28px; }
.mesh-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.mesh-title { font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin: 0; }
.mesh-hint { font-size: 12px; color: var(--muted-2); }
.mesh-nodes { display: flex; align-items: stretch; flex-wrap: wrap; gap: 4px; }
.mesh-node {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-sm); padding: 11px 16px; min-width: 188px;
  display: flex; flex-direction: column; gap: 6px;
}
.mesh-node.self { border-color: var(--brand); background: linear-gradient(0deg, var(--brand-soft), #fff); }
.mn-top { display: flex; align-items: center; gap: 8px; }
.mn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(20,20,20,0.04); }
.mesh-node.ok .mn-dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.mesh-node.bad .mn-dot { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.mesh-node.warn .mn-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.mn-id { font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; color: var(--foreground); }
.mn-self { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-foreground); background: rgba(245, 137, 31, 0.16); padding: 1px 7px; border-radius: 6px; }
.mn-health { font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.mesh-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 14px; align-self: center; }
.mesh-link .ml-ico { width: 24px; height: 18px; color: var(--brand); }
.mesh-link span { font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
.mesh-empty { font-size: 12.5px; color: var(--muted-2); }

/* ===================================================================== *
 *  SERVICE GROUPS — by location (the box a service runs on)
 * ===================================================================== */
/* board: one column per host, services stacked inside; scrolls horizontally
   when there are more hosts than fit the viewport. */
.groups {
  display: flex; flex-direction: row; align-items: flex-start;
  justify-content: flex-start;
  gap: 24px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 10px;
}
.group {
  /* grow to fill when few hosts (no lopsided void), but DON'T shrink when
     many — that preserves horizontal scroll instead of squeezing columns. */
  flex: 1 0 384px; max-width: 480px;
  display: flex; flex-direction: column;
  scroll-snap-align: start;
}
.group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.group-ico { width: 18px; height: 18px; color: var(--muted-foreground); flex: 0 0 auto; }
.group-name { font-family: var(--font-head); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; margin: 0; }
.group-count { font-size: 11.5px; color: var(--muted-foreground); background: var(--background); border: 1px solid var(--border); padding: 2px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.group-flag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bad-foreground); background: var(--bad-bg); padding: 2px 9px; border-radius: 6px; }
.group-certs-label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); margin: 18px 0 11px; }
.group-certs-label svg { width: 13px; height: 13px; }

/* ===================================================================== *
 *  SERVICE CARDS (bigger, information-rich)
 * ===================================================================== */
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; flex: 0 0 auto;
}
.badge .bdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.up { background: var(--ok-bg); color: var(--ok-foreground); }
.badge.down { background: var(--bad-bg); color: var(--bad-foreground); }
.badge.unknown { background: var(--warn-bg); color: var(--warn-foreground); }

.scard {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  transition: box-shadow 0.14s ease, border-color 0.14s ease;
}
.scard:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.scard:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.scard.down { border-left: 3px solid var(--bad); }

.scard-top { display: flex; align-items: flex-start; gap: 13px; padding: 17px 18px 14px; }
.t-icon {
  width: 40px; height: 40px; border-radius: 11px; background: var(--brand-soft);
  color: var(--accent-foreground); display: grid; place-items: center; flex: 0 0 auto;
}
.scard.down .t-icon { background: var(--bad-bg); color: var(--bad-foreground); }
.t-icon svg { width: 20px; height: 20px; }
.scard-id { flex: 1 1 auto; min-width: 0; }
.scard-name { font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disagree-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; color: var(--warn-foreground);
  background: var(--warn-bg); padding: 1px 7px; border-radius: 6px; margin-left: 8px;
}
.disagree-tag svg { width: 11px; height: 11px; }

/* name + tags row — tags distinguish same-named services (prod vs dev) */
.scard-name-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.scard-name-row .scard-name { flex: 0 1 auto; }
.tag-row { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.tag-chip {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent-foreground); background: var(--brand-soft);
  border: 1px solid color-mix(in oklch, var(--brand) 22%, transparent);
  padding: 1px 7px; border-radius: 6px; line-height: 1.5; white-space: nowrap; flex: 0 0 auto;
}
.tag-chip.neutral { color: var(--muted-foreground); background: var(--background); border-color: var(--border); }

/* primary figures */
.scard-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.fig { padding: 13px 16px; border-right: 1px solid var(--border); }
.fig:last-child { border-right: none; }
.fig-l { font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.fig-v { font-family: var(--font-head); font-weight: 800; font-size: 21px; letter-spacing: -0.01em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.fig-v small { font-size: 12px; font-weight: 600; color: var(--muted-2); }
.fig-v.good { color: var(--ok-foreground); }
.fig-v.bad { color: var(--bad-foreground); }

/* the next-check countdown — the live centerpiece */
.countdown { padding: 14px 16px; border-top: 1px solid var(--border); background: linear-gradient(0deg, var(--brand-soft), #fff); }
.scard.down .countdown { background: linear-gradient(0deg, var(--bad-bg), #fff); }
.cd-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cd-l { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-2); }
.cd-v { font-family: var(--font-mono); font-weight: 700; font-size: 20px; color: var(--accent-foreground); font-variant-numeric: tabular-nums; }
.scard.down .cd-v { color: var(--bad-foreground); }
.cd-v.now { color: var(--ok-foreground); }
/* "verificando…" — a gentle pulsing dot before the word (Argos is probing now) */
.cd-v.now::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; margin-right: 8px; vertical-align: middle;
  animation: cd-pulse 1s ease-in-out infinite;
}
@keyframes cd-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1.15); } }
.cd-bar { position: relative; height: 5px; border-radius: 3px; background: rgba(245, 137, 31, 0.18); overflow: hidden; margin-top: 9px; }
/* a soft scan sweeping across the bar while a check is in flight */
.cd-scan { position: absolute; inset: 0; transform: translateX(-110%); pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent); }
.countdown.checking .cd-scan { opacity: 1; animation: cd-scan 1.1s linear infinite; }
@keyframes cd-scan { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
/* The fill is driven entirely by a CSS animation (set inline per-card with a
   negative animation-delay = elapsed since the last check) so it glides at
   60fps over interval_s instead of stepping once per second. JS never writes
   its width; on the 10s refresh the element is recreated at the right phase,
   and when last_check_ms changes it restarts cleanly from empty. */
.cd-fill { height: 100%; border-radius: 3px; background: var(--brand); width: 0%; will-change: width; }
@keyframes cd-fill { from { width: 0%; } to { width: 100%; } }
.scard.down .cd-bar { background: rgba(220, 80, 70, 0.18); }
.scard.down .cd-fill { background: var(--bad); }
.cd-hint { font-size: 10.5px; color: var(--muted-2); margin-top: 7px; }

/* ---- fresh-result flash (~2.5s, one-shot) — fires when a check just landed.
   Uses box-shadow ring + background tint (no layout shift) + a small pop on the
   latency value and status badge so the eye catches the new reading. ---------- */
@keyframes scard-pop { 0% { transform: scale(1); } 28% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes flash-ring-up {
  0% { box-shadow: var(--shadow-sm), 0 0 0 0 color-mix(in oklch, var(--ok) 55%, transparent); }
  100% { box-shadow: var(--shadow-sm), 0 0 0 14px transparent; }
}
@keyframes flash-ring-down {
  0% { box-shadow: var(--shadow-sm), 0 0 0 0 color-mix(in oklch, var(--bad) 55%, transparent); }
  100% { box-shadow: var(--shadow-sm), 0 0 0 14px transparent; }
}
@keyframes flash-ring-warn {
  0% { box-shadow: var(--shadow-sm), 0 0 0 0 color-mix(in oklch, var(--warn) 55%, transparent); }
  100% { box-shadow: var(--shadow-sm), 0 0 0 14px transparent; }
}
@keyframes flash-bg-up { 0% { background-color: color-mix(in oklch, var(--ok-bg) 75%, white); } 100% { background-color: var(--card); } }
@keyframes flash-bg-down { 0% { background-color: color-mix(in oklch, var(--bad-bg) 75%, white); } 100% { background-color: var(--card); } }
@keyframes flash-bg-warn { 0% { background-color: color-mix(in oklch, var(--warn-bg) 75%, white); } 100% { background-color: var(--card); } }
.scard.flash-up { animation: flash-ring-up 2.4s ease-out 1, flash-bg-up 2.6s ease-out 1; }
.scard.flash-down { animation: flash-ring-down 2.4s ease-out 1, flash-bg-down 2.6s ease-out 1; }
.scard.flash-warn { animation: flash-ring-warn 2.4s ease-out 1, flash-bg-warn 2.6s ease-out 1; }
.scard[class*="flash-"] .fig-v.lat,
.scard[class*="flash-"] .badge { animation: scard-pop 0.55s ease-out 1; }
.scard[class*="flash-"] .badge { transform-origin: center; }

/* ---- respect prefers-reduced-motion: drop the attention-grabbing motion ----- */
@media (prefers-reduced-motion: reduce) {
  .scard.flash-up, .scard.flash-down, .scard.flash-warn,
  .scard[class*="flash-"] .fig-v.lat, .scard[class*="flash-"] .badge,
  .countdown.checking .cd-scan, .cd-v.now::before, .cd-fill { animation: none !important; }
  .countdown.checking .cd-scan { opacity: 0.25; }
}

/* footer: who watches + last check */
.scard-foot { padding: 13px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.watched { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.watched-l { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); }
.prober-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  padding: 2px 8px 2px 6px; border-radius: 7px; border: 1px solid;
}
.prober-chip svg { width: 12px; height: 12px; }
.prober-chip.up { background: var(--ok-bg); border-color: color-mix(in oklch, var(--ok) 30%, transparent); color: var(--ok-foreground); }
.prober-chip.down { background: var(--bad-bg); border-color: color-mix(in oklch, var(--bad) 30%, transparent); color: var(--bad-foreground); }
.prober-chip.unknown { background: var(--warn-bg); border-color: color-mix(in oklch, var(--warn) 30%, transparent); color: var(--warn-foreground); }
.last-check { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; }
.last-check b { color: var(--muted-foreground); font-weight: 600; }

/* ===================================================================== *
 *  TLS CERTIFICATES — secondary, smaller, muted cards
 * ===================================================================== */
/* Certs are NOT services: a single expiry panel, one row per https domain,
   soonest-first. Auto-derived from the monitored https services, refreshed
   daily. */
.certs { margin-top: 36px; }
.certs-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.certs-ico { width: 17px; height: 17px; color: var(--muted-foreground); flex: 0 0 auto; }
.certs-title { font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin: 0; color: var(--muted-foreground); }
.certs-list {
  max-width: 560px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.cert-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "dot host rel" "dot date rel";
  align-items: center; column-gap: 11px; row-gap: 1px;
  padding: 12px 16px; cursor: pointer;
  border-top: 1px solid var(--border);
  transition: background 0.12s ease;
}
.cert-row:first-child { border-top: none; }
.cert-row:hover { background: var(--background); }
.cert-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.cert-dot { grid-area: dot; width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); }
.cert-row.up   .cert-dot { background: var(--ok);   box-shadow: 0 0 0 3px var(--ok-bg); }
.cert-row.warn .cert-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.cert-row.down .cert-dot { background: var(--bad);  box-shadow: 0 0 0 3px var(--bad-bg); }
.cert-host { grid-area: host; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cert-date { grid-area: date; font-size: 12px; color: var(--muted-2); }
.cert-rel { grid-area: rel; justify-self: end; font-size: 12.5px; font-weight: 600; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cert-row.warn .cert-rel { color: var(--warn-foreground); }
.cert-row.down .cert-rel, .cert-row.down .cert-date { color: var(--bad-foreground); }

/* ----------------------------- EMPTY / LOST ------------------------- */
.veil {
  display: none; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 56px 24px; background: var(--card); border: 1px dashed var(--border-strong); border-radius: var(--radius);
}
.veil.show { display: flex; }
.veil .vico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 6px; }
.veil-empty .vico { background: var(--brand-soft); color: var(--accent-foreground); }
.veil-lost .vico { background: var(--bad-bg); color: var(--bad-foreground); }
.veil .vico svg { width: 24px; height: 24px; }
.veil h2 { font-family: var(--font-head); font-weight: 700; font-size: 18px; margin: 0; }
.veil p { color: var(--muted-foreground); font-size: 13.5px; max-width: 460px; margin: 0; }
.veil code { font-family: var(--font-mono); font-size: 12px; background: var(--background); padding: 1px 6px; border-radius: 5px; }
.retry-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--bad-foreground); margin-top: 4px; }

/* ===================================================================== *
 *  DETAIL MODAL (availability over time + per-VPS logs) — unchanged in function
 * ===================================================================== */
.scrim {
  position: fixed; inset: 0; background: rgba(26, 27, 30, 0.42); backdrop-filter: blur(2px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 48px 20px; overflow-y: auto; z-index: 100;
}
.scrim.open { display: flex; }
.modal {
  width: min(880px, 100%); background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.modal-head { display: flex; align-items: center; gap: 13px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.m-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--brand-soft); color: var(--accent-foreground); display: grid; place-items: center; flex: 0 0 auto; }
.m-icon svg { width: 21px; height: 21px; }
.m-head-txt { flex: 1 1 auto; min-width: 0; }
.m-name { font-family: var(--font-head); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; margin: 0; }
.m-sub { font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.m-head-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.m-uptime { text-align: right; line-height: 1.15; }
.m-uptime .mu-v { font-family: var(--font-head); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.m-uptime .mu-v.good { color: var(--ok-foreground); }
.m-uptime .mu-v.bad { color: var(--bad-foreground); }
.m-uptime .mu-l { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
.m-close {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--card);
  color: var(--muted-foreground); font-size: 20px; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
.m-close:hover { background: var(--background); color: var(--foreground); }
.modal-body { padding: 20px 22px 24px; }

.detail-section { margin-bottom: 26px; }
.detail-section:last-child { margin-bottom: 0; }
.ds-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ds-title { font-family: var(--font-head); font-weight: 700; font-size: 14px; margin: 0; letter-spacing: -0.01em; }

.ranges { display: inline-flex; background: var(--background); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.ranges button {
  border: none; background: transparent; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  color: var(--muted-foreground); padding: 5px 14px; border-radius: 7px; cursor: pointer;
}
.ranges button:hover { color: var(--foreground); }
.ranges button.active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }

.chart-block { margin-bottom: 18px; }
.chart-block:last-child { margin-bottom: 0; }
.cb-title { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--muted-foreground); margin-bottom: 8px; }
.cb-title .legend { display: flex; gap: 12px; font-weight: 500; color: var(--muted-2); font-size: 11px; }
.cb-title .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.cb-title .legend .p50 i { background: var(--chart-2); }
.cb-title .legend .p95 i { background: var(--chart-1); }
.chart { width: 100%; display: block; }
svg.uptime-bar { height: 44px; border-radius: 7px; overflow: hidden; }
svg.latency-chart { height: 150px; }
.latency-chart .axis-line { stroke: var(--border); stroke-width: 1; }
.latency-chart text { font-family: var(--font-mono); font-size: 10px; fill: var(--muted-2); }
.emptychart text { fill: var(--muted-2); font-family: var(--font-sans); }
.cb-axis { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--muted-2); }

.logs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 14px; }
.log-col { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); }
.log-col-head { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-bottom: 1px solid var(--border); background: var(--background); }
.log-col-head .lh-eye { width: 15px; height: 15px; color: var(--muted-2); }
.log-col-head .lh-name { font-weight: 700; font-size: 12.5px; }
.log-col-head .lh-name b { font-family: var(--font-mono); }
.log-col-head .lh-cnt { margin-left: auto; font-size: 10.5px; color: var(--muted-foreground); font-family: var(--font-mono); font-weight: 600; }
.log-sub { padding: 5px 13px; font-size: 10px; color: var(--muted-2); letter-spacing: 0.02em; border-bottom: 1px solid var(--border); background: var(--card); }
.log-body { max-height: 280px; overflow-y: auto; }
.log-line { display: flex; align-items: baseline; gap: 9px; padding: 5px 13px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 11.5px; }
.log-line:last-child { border-bottom: none; }
.log-line.up { background: color-mix(in oklch, var(--ok-bg) 50%, white); }
.log-line.down { background: var(--bad-bg); }
.log-line.unknown { background: color-mix(in oklch, var(--warn-bg) 55%, white); }
.log-time { color: var(--muted-2); flex: 0 0 auto; }
.log-glyph { flex: 0 0 auto; display: inline-flex; }
.log-glyph svg { width: 13px; height: 13px; }
.log-line.up .log-glyph { color: var(--ok-foreground); }
.log-line.down .log-glyph { color: var(--bad-foreground); }
.log-line.unknown .log-glyph { color: var(--warn-foreground); }
.log-lat { color: var(--foreground); font-weight: 500; flex: 0 0 auto; min-width: 50px; }
.log-line.down .log-lat { color: var(--bad-foreground); }
.log-err { color: var(--bad-foreground); flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.log-code { color: var(--muted-2); flex: 0 0 auto; }
.log-empty { padding: 16px 13px; color: var(--muted-2); font-size: 12px; text-align: center; }

.incidents h4 { font-family: var(--font-head); font-weight: 700; font-size: 14px; margin: 0 0 10px; }
.no-incidents { display: flex; align-items: center; gap: 9px; color: var(--ok-foreground); font-size: 13px; font-weight: 500; background: var(--ok-bg); border-radius: 9px; padding: 11px 14px; }
.no-incidents svg { width: 16px; height: 16px; }
.incident { display: flex; align-items: center; gap: 11px; border: 1px solid var(--border); border-radius: 9px; padding: 9px 13px; margin-bottom: 7px; font-size: 12.5px; }
.incident .idot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: 0 0 auto; }
.incident.ongoing { border-color: color-mix(in oklch, var(--bad) 30%, transparent); background: var(--bad-bg); }
.incident .ispan { font-family: var(--font-mono); color: var(--muted-foreground); flex: 0 0 auto; }
.incident .badge-ongoing, .incident .badge-resolved { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; flex: 0 0 auto; }
.incident .badge-ongoing { background: var(--bad); color: #fff; }
.incident .badge-resolved { background: var(--ok-bg); color: var(--ok-foreground); }
.incident .ierr { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.skeleton {
  background: linear-gradient(90deg, var(--background) 25%, #EFEFF1 50%, var(--background) 75%);
  background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 10px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===================================================================== *
 *  LOGIN PAGE
 * ===================================================================== */
.login-body {
  min-height: 100vh; margin: 0;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    radial-gradient(48rem 32rem at 50% -8%, rgba(245, 137, 31, 0.10), transparent 60%),
    var(--background);
}
.login-card {
  width: 100%; max-width: 392px;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 36px 32px 32px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.login-icon { width: 72px; height: 72px; border-radius: 19px; margin-bottom: 18px; }
.login-icon img { width: 46px; height: 46px; }
.login-card h1 { font-family: var(--font-head); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; margin: 0; }
.login-card .login-subtitle { color: var(--muted-foreground); font-size: 13.5px; margin: 4px 0 26px; }
.login-form { width: 100%; display: flex; flex-direction: column; gap: 11px; }
.login-error {
  width: 100%; margin: 0 0 4px; padding: 9px 13px; border-radius: 9px;
  background: var(--bad-bg); color: var(--bad-foreground);
  font-size: 12.5px; font-weight: 600; text-align: left;
  border: 1px solid color-mix(in oklch, var(--bad) 25%, transparent);
}
.login-form .field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.login-form label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); }
.login-form input {
  width: 100%; font-family: var(--font-sans); font-size: 14px; color: var(--foreground);
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px;
  transition: border-color 0.13s, box-shadow 0.13s;
}
.login-form input::placeholder { color: var(--muted-2); }
.login-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(245, 137, 31, 0.16); }
.login-form button {
  margin-top: 8px; width: 100%;
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 700; color: #fff;
  background: var(--brand); border: none; border-radius: 10px; padding: 12px 16px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(245, 137, 31, 0.28); transition: filter 0.13s, transform 0.05s;
}
.login-form button:hover { filter: brightness(1.04); }
.login-form button:active { transform: translateY(1px); }
.login-foot { margin-top: 22px; font-size: 11.5px; color: var(--muted-2); }

/* ----------------------------- RESPONSIVE --------------------------- */
@media (max-width: 1080px) {
  .hdr-health { display: none; }
}
@media (max-width: 960px) {
  .groups { flex-direction: column; overflow-x: visible; }
  .group { flex: 1 1 auto; max-width: none; }
  .logs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .hdr-node { display: none; }
  .updated { display: none; }
}