/* Site Monitor Hub — single stylesheet (self-hosted, no inline styles, no external fonts). */

/* ---------- tokens ---------- */
:root {
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --bg: #f5f6fa;
  --bg-glow-1: rgba(99, 102, 241, .16);
  --bg-glow-2: rgba(56, 189, 248, .12);
  --bg-glow-3: rgba(168, 85, 247, .10);
  --card: #ffffff;
  --surface-2: #f8f9fc;
  --surface-3: #f1f3f8;
  --text: #0f172a;
  --text-2: #334155;
  --muted: #64748b;
  --border: rgba(15, 23, 42, .08);
  --border-strong: rgba(15, 23, 42, .16);
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --code-bg: #eef1f6;
  --code-text: #1e293b;
  --pre-bg: #0b1220;
  --pre-text: #dbe4f3;

  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-soft: rgba(79, 70, 229, .10);
  --primary-ring: rgba(79, 70, 229, .28);
  --link: #4338ca;

  --green: #16a34a;  --green-text: #15803d;  --green-soft: rgba(22, 163, 74, .12);
  --red: #dc2626;    --red-text: #b91c1c;    --red-soft: rgba(220, 38, 38, .11);
  --amber: #d97706;  --amber-text: #b45309;  --amber-soft: rgba(217, 119, 6, .13);
  --grey: #94a3b8;   --grey-text: #475569;   --grey-soft: rgba(100, 116, 139, .13);
  --purple: #7c3aed; --purple-text: #6d28d9; --purple-soft: rgba(124, 58, 237, .12);
  --blue-text: #1d4ed8; --blue-soft: rgba(59, 130, 246, .12);

  --nav-a: #0b1220;
  --nav-b: #141c3f;
  --nav-c: #3730a3;

  --radius: 14px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px -6px rgba(15, 23, 42, .10);
  --shadow-lg: 0 2px 4px rgba(15, 23, 42, .04), 0 14px 32px -10px rgba(15, 23, 42, .16);
  --shadow-auth: 0 2px 6px rgba(15, 23, 42, .05), 0 30px 60px -20px rgba(30, 27, 75, .28);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 140ms;
  --t: 220ms;

  /* chart palette (validated: categorical slots + status, light) */
  --c1: #2a78d6;  --c2: #eb6834;  --c3: #1baf7a;  --c4: #eda100;  --c7: #4a3aa7;  --c8: #e34948;
  --viz-good: #0ca30c; --viz-warn: #fab219; --viz-serious: #ec835a; --viz-critical: #d03b3b;
  --viz-down: #d03b3b; --viz-fatal: #4a3aa7; --viz-ssl: #eda100;
  --viz-grid: rgba(15, 23, 42, .07);
  --viz-axis: rgba(15, 23, 42, .16);
  --viz-fail: rgba(208, 59, 59, .07);
  --hm-0: #eceef3; --hm-1: #d03b3b; --hm-2: #ec835a; --hm-3: #f2c14e; --hm-4: #7fd17f; --hm-5: #0ca30c;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c111c;
    --bg-glow-1: rgba(99, 102, 241, .22);
    --bg-glow-2: rgba(56, 189, 248, .12);
    --bg-glow-3: rgba(168, 85, 247, .14);
    --card: #141a29;
    --surface-2: #181f30;
    --surface-3: #1e2637;
    --text: #e7eaf2;
    --text-2: #c6cbd8;
    --muted: #8f98ab;
    --border: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .16);
    --input-bg: #0f1522;
    --input-border: #2a3448;
    --code-bg: #1c2435;
    --code-text: #dbe2f0;
    --pre-bg: #080c15;
    --pre-text: #d5deee;
    --primary: #6366f1;
    --primary-hover: #7c7ff5;
    --primary-soft: rgba(99, 102, 241, .18);
    --primary-ring: rgba(99, 102, 241, .38);
    --link: #a5b4fc;
    --green: #22c55e;  --green-text: #4ade80;  --green-soft: rgba(34, 197, 94, .16);
    --red: #ef4444;    --red-text: #f87171;    --red-soft: rgba(239, 68, 68, .16);
    --amber: #f59e0b;  --amber-text: #fbbf24;  --amber-soft: rgba(245, 158, 11, .16);
    --grey: #64748b;   --grey-text: #a3adc2;   --grey-soft: rgba(148, 163, 184, .16);
    --purple: #a78bfa; --purple-text: #c4b5fd; --purple-soft: rgba(167, 139, 250, .16);
    --blue-text: #93c5fd; --blue-soft: rgba(59, 130, 246, .18);
    --nav-a: #070b14;
    --nav-b: #0f1530;
    --nav-c: #312e81;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -8px rgba(0, 0, 0, .5);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 16px 36px -12px rgba(0, 0, 0, .6);
    --shadow-auth: 0 2px 6px rgba(0, 0, 0, .3), 0 30px 60px -20px rgba(0, 0, 0, .7);
    --c1: #3987e5;  --c2: #d95926;  --c3: #199e70;  --c4: #c98500;  --c7: #9085e9;  --c8: #e66767;
    --viz-down: #e66767; --viz-fatal: #9085e9; --viz-ssl: #c98500;
    --viz-grid: rgba(255, 255, 255, .07);
    --viz-axis: rgba(255, 255, 255, .16);
    --viz-fail: rgba(230, 103, 103, .10);
    --hm-0: #222a3b; --hm-1: #e66767; --hm-2: #ec835a; --hm-3: #d9a441; --hm-4: #4f9f4f; --hm-5: #22b54a;
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* soft mesh glow at the top of every page */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 520px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 55% at 12% -10%, var(--bg-glow-1), transparent 70%),
    radial-gradient(45% 45% at 78% -8%, var(--bg-glow-2), transparent 70%),
    radial-gradient(35% 40% at 50% 8%, var(--bg-glow-3), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 40%, transparent);
  mask-image: linear-gradient(#000 40%, transparent);
}
body > * { position: relative; z-index: 1; }

a { color: var(--link); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1 { font-size: 1.6rem; margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
h2 { font-size: 1rem; margin: 0 0 .9rem; font-weight: 650; letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
h3 { font-size: .9rem; margin: 1.1rem 0 .45rem; font-weight: 650; color: var(--text-2); }
p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }
code, .mono { font-family: var(--mono); font-size: .88em; }
code { background: var(--code-bg); color: var(--code-text); padding: .12em .4em; border-radius: 5px; }
pre.code { background: var(--pre-bg); color: var(--pre-text); padding: .85rem 1rem; border-radius: var(--radius-sm); overflow-x: auto; font-size: .78rem; line-height: 1.6; white-space: pre; margin: 0 0 .75rem; font-family: var(--mono); border: 1px solid rgba(255,255,255,.06); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.break { word-break: break-all; overflow-wrap: anywhere; }
.trunc { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-red { color: var(--red-text); }
.float-right { float: right; }
.num, .table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.icon { width: 1em; height: 1em; flex: none; vertical-align: -.15em; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@keyframes pulse-ring-red { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); } 70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
@keyframes slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes col-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
@keyframes tip-in { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }

.rise, .stat, .card, .auth-card, .flash, .callout, .page-head, .filters, .hero {
  animation: rise .5s var(--ease) both;
}
.hero { animation-delay: 30ms; }
.page-head { animation-delay: 0ms; }
.filters { animation-delay: 40ms; }
.stat-grid > :nth-child(1) { animation-delay: 40ms; }
.stat-grid > :nth-child(2) { animation-delay: 90ms; }
.stat-grid > :nth-child(3) { animation-delay: 140ms; }
.stat-grid > :nth-child(4) { animation-delay: 190ms; }
.container > .card:nth-of-type(1), .container > .grid-2 > :nth-child(1), .container > .grid-3 > :nth-child(1), .container > .grid-2 > div > .card:nth-of-type(1), .container > .grid-2 > form > .card:nth-of-type(1) { animation-delay: 120ms; }
.container > .card:nth-of-type(2), .container > .grid-2 > :nth-child(2), .container > .grid-3 > :nth-child(2), .container > .grid-2 > div > .card:nth-of-type(2), .container > .grid-2 > form > .card:nth-of-type(2) { animation-delay: 200ms; }
.container > .card:nth-of-type(3), .container > .grid-3 > :nth-child(3), .container > .grid-2 > div > .card:nth-of-type(3), .container > .grid-2 > form > .card:nth-of-type(3) { animation-delay: 280ms; }
.container > .card:nth-of-type(4) { animation-delay: 340ms; }
.container > .card:nth-of-type(n+5) { animation-delay: 400ms; }
.container > .grid-2:nth-of-type(2) > :nth-child(1) { animation-delay: 260ms; }
.container > .grid-2:nth-of-type(2) > :nth-child(2) { animation-delay: 320ms; }
.container > .grid-2:nth-of-type(3) > :nth-child(1) { animation-delay: 380ms; }
.container > .grid-2:nth-of-type(3) > :nth-child(2) { animation-delay: 440ms; }
.hero .stat-grid > :nth-child(1) { animation-delay: 160ms; }
.hero .stat-grid > :nth-child(2) { animation-delay: 220ms; }
.hero .stat-grid > :nth-child(3) { animation-delay: 280ms; }
.hero .stat-grid > :nth-child(4) { animation-delay: 340ms; }
.table tbody tr { animation: fade .4s var(--ease) both; }
.table tbody tr:nth-child(1) { animation-delay: 60ms; }
.table tbody tr:nth-child(2) { animation-delay: 100ms; }
.table tbody tr:nth-child(3) { animation-delay: 140ms; }
.table tbody tr:nth-child(4) { animation-delay: 180ms; }
.table tbody tr:nth-child(5) { animation-delay: 220ms; }
.table tbody tr:nth-child(6) { animation-delay: 260ms; }
.table tbody tr:nth-child(7) { animation-delay: 300ms; }
.table tbody tr:nth-child(8) { animation-delay: 340ms; }
.table tbody tr:nth-child(n+9) { animation-delay: 380ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
}

/* ---------- top bar ---------- */
.topbar {
  color: #fff;
  background: linear-gradient(100deg, var(--nav-a) 0%, var(--nav-b) 45%, var(--nav-c) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 30px -18px rgba(30, 27, 75, .7);
  position: relative;
}
.topbar::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); }
.topbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 1.25rem; height: 60px; }
.brand { color: #fff; font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-mark { position: relative; width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; color: #fff; background: linear-gradient(135deg, #6366f1, #22d3ee); box-shadow: 0 4px 12px -4px rgba(99, 102, 241, .8), 0 0 0 1px rgba(255,255,255,.14) inset; flex: none; }
.brand-mark svg { width: 18px; height: 18px; }
.brand-dot { position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; border: 2px solid var(--nav-b); animation: pulse-ring 2.2s ease-out infinite; }
.brand-lg { font-size: 1.15rem; color: var(--text); margin-bottom: 1.25rem; }
.brand-lg .brand-dot { border-color: var(--card); }
.nav { display: flex; gap: .2rem; flex: 1; overflow-x: auto; scrollbar-width: none; padding: .25rem 0; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: rgba(255,255,255,.72); padding: .42rem .85rem; border-radius: 999px; white-space: nowrap; font-weight: 500; font-size: .92rem; transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t-fast) var(--ease); }
.nav a:hover { color: #fff; background: rgba(255,255,255,.10); text-decoration: none; }
.nav a:active { transform: scale(.97); }
.nav a.active { color: #fff; background: rgba(255,255,255,.16); box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 4px 10px -6px rgba(0,0,0,.6); }
.nav-user { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: .85rem; }
.nav-user .muted { color: rgba(255,255,255,.7); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .78rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); text-transform: uppercase; flex: none; }
.nav-user .btn-link { color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: .3rem .75rem; font-size: .82rem; }
.nav-user .btn-link:hover { background: rgba(255,255,255,.10); text-decoration: none; color: #fff; }

.container { max-width: 1200px; margin: 0 auto; padding: 1.75rem 16px 2.5rem; }
.footer { max-width: 1200px; margin: 0 auto; padding: 0 16px 2rem; font-size: .8rem; color: var(--muted); display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.footer strong { color: var(--text-2); font-weight: 600; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-head h1 { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.page-head h1 .muted { font-weight: 500; font-size: 1rem; }
.page-head .muted { font-size: .88rem; }
.page-head-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ---------- cards & grids ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow);
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card-table { padding: 0; overflow-x: clip; overflow-y: visible; }
.card-table .table thead th { position: sticky; top: 0; z-index: 2; }
.card-table .table thead th:first-child { border-top-left-radius: var(--radius); }
.card-table .table thead th:last-child { border-top-right-radius: var(--radius); }
.card-narrow { max-width: 680px; }
.card-highlight { border-color: rgba(79, 70, 229, .28); background: linear-gradient(180deg, var(--primary-soft), transparent 80%), var(--card); }
.table-wrap { overflow-x: auto; margin: 0 -1.4rem; padding: 0 1.4rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.grid-2 > *, .grid-3 > *, .stat-grid > * { min-width: 0; }
.grid-2-wide { grid-template-columns: 3fr 2fr; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }

/* stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-bottom: 1.1rem; }
.stat {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.3rem 1.15rem 1.45rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  color: var(--text);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent, var(--grey)); }
.stat:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.stat:active { transform: translateY(0); }
.stat-body { display: flex; flex-direction: column; min-width: 0; }
.stat-num { font-size: 2.1rem; font-weight: 750; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--accent-text, var(--text)); }
.stat-label { color: var(--muted); font-size: .84rem; display: inline-flex; align-items: center; gap: .45rem; margin-top: .35rem; font-weight: 500; }
.stat-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--accent-soft, var(--grey-soft)); color: var(--accent-text, var(--grey-text)); transition: transform var(--t) var(--ease); }
.stat-icon svg { width: 22px; height: 22px; }
.stat:hover .stat-icon { transform: scale(1.06); }
.stat-up      { --accent: var(--green);  --accent-text: var(--green-text);  --accent-soft: var(--green-soft); }
.stat-down    { --accent: var(--red);    --accent-text: var(--red-text);    --accent-soft: var(--red-soft); }
.stat-paused  { --accent: var(--amber);  --accent-text: var(--amber-text);  --accent-soft: var(--amber-soft); }
.stat-pending { --accent: var(--grey);   --accent-text: var(--grey-text);   --accent-soft: var(--grey-soft); }
.stat-zero .stat-num { color: var(--muted); }
.uptime-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.uptime-row > div { display: flex; flex-direction: column; }
.uptime-row .stat-num { font-size: 1.45rem; }

/* ---------- dots, badges, pills ---------- */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--grey); vertical-align: middle; flex: none; }
.dot-green { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.dot-red { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); animation: pulse-ring-red 1.8s ease-out infinite; }
.dot-amber { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.dot-grey { background: var(--grey); box-shadow: 0 0 0 3px var(--grey-soft); }
.dot-cell { width: 28px; }
.badge { display: inline-flex; align-items: center; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .2em .55em; border-radius: 999px; color: #fff; background: var(--grey); vertical-align: middle; line-height: 1.4; }
.badge-green { background: var(--green); }
.badge-red { background: var(--red); }
.badge-amber { background: var(--amber); }
.badge-grey { background: var(--grey); }
.badge-purple { background: var(--purple); }
h2 .badge { font-size: .64rem; }
.pill { display: inline-flex; align-items: center; gap: .3em; font-size: .76rem; font-weight: 500; padding: .14em .6em; border-radius: 999px; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); margin: .1em 0; line-height: 1.5; vertical-align: middle; white-space: nowrap; }
.pill-amber { background: var(--amber-soft); color: var(--amber-text); border-color: transparent; }
.pill-red { background: var(--red-soft); color: var(--red-text); border-color: transparent; }
.pill-green { background: var(--green-soft); color: var(--green-text); border-color: transparent; }
.pill-type { font-family: var(--mono); font-weight: 600; font-size: .68rem; letter-spacing: .04em; padding: .1em .5em; background: var(--primary-soft); color: var(--link); border-color: transparent; }
.status-pill { display: inline-flex; align-items: center; gap: .45em; font-size: .78rem; font-weight: 600; padding: .22em .7em .22em .55em; border-radius: 999px; line-height: 1.4; white-space: nowrap; vertical-align: middle; }
.status-pill .dot { width: 8px; height: 8px; box-shadow: none; }
.status-up { background: var(--green-soft); color: var(--green-text); }
.status-down { background: var(--red-soft); color: var(--red-text); }
.status-pending { background: var(--grey-soft); color: var(--grey-text); }
.status-paused { background: var(--amber-soft); color: var(--amber-text); }
.status-pill-lg { font-size: .85rem; padding: .3em .85em .3em .65em; }

/* response-time bar */
.rt { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 64px; }
.rt-bar { width: 56px; height: 4px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.rt-bar i { display: block; height: 100%; border-radius: 999px; background: var(--green); transform-origin: left; animation: bar-grow .7s var(--ease) both; animation-delay: .25s; }
.rt-fast i { background: var(--green); }
.rt-mid i { background: var(--amber); }
.rt-slow i { background: var(--red); }
.bar-w1 i { width: 10%; } .bar-w2 i { width: 20%; } .bar-w3 i { width: 30%; } .bar-w4 i { width: 40%; } .bar-w5 i { width: 50%; }
.bar-w6 i { width: 60%; } .bar-w7 i { width: 70%; } .bar-w8 i { width: 80%; } .bar-w9 i { width: 90%; } .bar-w10 i { width: 100%; }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; background: var(--surface-2); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t-fast) var(--ease); }
.table tbody tr:hover td { background: var(--surface-2); }
.table td a strong { font-weight: 600; color: var(--text); }
.table td a:hover strong { color: var(--link); }
.row-open td { background: var(--red-soft); }
.actions-cell { white-space: normal; }
.actions-cell .btn, .actions-cell form { margin: 0 .15rem .25rem 0; }
.actions-cell form { display: inline-flex; }
.table td.small.break { word-break: normal; overflow-wrap: anywhere; }
.td-primary > a { font-weight: 600; }
.card > .table-wrap:last-child { margin-bottom: -.25rem; }

/* ---------- forms ---------- */
label { display: block; font-size: .85rem; font-weight: 600; color: var(--text-2); margin-bottom: .9rem; }
label input, label select, label textarea { display: block; width: 100%; margin-top: .35rem; font: inherit; font-weight: 400; padding: .55rem .75rem; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); box-shadow: 0 1px 2px rgba(15,23,42,.03); }
label input:focus, label select:focus, label textarea:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
label.check { display: flex; align-items: center; gap: .55rem; font-weight: 500; }
label.check input { width: auto; margin: 0; display: inline-block; accent-color: var(--primary); box-shadow: none; }
fieldset.radio-group { border: 0; padding: 0; margin: 0 0 .9rem; }
fieldset.radio-group legend { font-size: .85rem; font-weight: 600; color: var(--text-2); padding: 0; margin-bottom: .35rem; }
label.radio { display: flex; align-items: center; gap: .55rem; font-weight: 500; margin-bottom: .4rem; }
label.radio input { width: auto; margin: 0; display: inline-block; accent-color: var(--primary); box-shadow: none; }
.hint { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; margin-top: .3rem; line-height: 1.5; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-actions { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; flex-wrap: wrap; }
.inline-form { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.inline-form select, .inline-form input { font: inherit; padding: .42rem .6rem; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text); }
.input-sm { width: 100px; }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.1rem; }
.filters input, .filters select { font: inherit; padding: .5rem .7rem; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text); box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.filters input[type=search] { min-width: 240px; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-size: .88rem; font-weight: 550; padding: .5rem 1rem;
  border-radius: var(--radius-sm); border: 1px solid var(--input-border);
  background: var(--card); color: var(--text); cursor: pointer; line-height: 1.25; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn:hover { background: var(--surface-2); text-decoration: none; border-color: var(--border-strong); box-shadow: 0 2px 6px -2px rgba(15,23,42,.14); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(180deg, var(--primary), var(--primary-hover)); border-color: var(--primary-hover); color: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 6px 14px -6px rgba(79, 70, 229, .7), 0 1px 0 rgba(255,255,255,.18) inset; }
.btn-primary:hover { background: linear-gradient(180deg, var(--primary-hover), var(--primary-hover)); border-color: var(--primary-hover); color: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 8px 18px -6px rgba(79, 70, 229, .8); }
.btn-danger { background: var(--card); border-color: rgba(220, 38, 38, .35); color: var(--red-text); }
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); }
.btn-amber { border-color: rgba(217, 119, 6, .4); color: var(--amber-text); }
.btn-amber:hover { background: var(--amber-soft); border-color: var(--amber); }
.btn-link { background: transparent; border-color: transparent; color: var(--link); padding-left: .5rem; padding-right: .5rem; box-shadow: none; }
.btn-link:hover { background: var(--primary-soft); text-decoration: none; border-color: transparent; box-shadow: none; }
.btn-sm { font-size: .78rem; padding: .3rem .6rem; border-radius: var(--radius-xs); }
.btn-block { width: 100%; padding: .65rem 1rem; font-size: .95rem; }
.btn.copied { border-color: var(--green); color: var(--green-text); background: var(--green-soft); }
.btn-primary.copied { color: #fff; background: var(--green); }

/* ---------- flashes & callouts ---------- */
.flash { position: relative; display: flex; align-items: flex-start; gap: .6rem; padding: .75rem 2.4rem .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; border: 1px solid; font-size: .92rem; animation: slide-in .35s var(--ease) both; transition: opacity .45s var(--ease), transform .45s var(--ease), max-height .45s var(--ease), margin .45s var(--ease), padding .45s var(--ease); overflow: hidden; }
.flash .icon { width: 1.15em; height: 1.15em; margin-top: .15em; }
.flash-success { background: var(--green-soft); border-color: rgba(22,163,74,.25); color: var(--green-text); }
.flash-error { background: var(--red-soft); border-color: rgba(220,38,38,.25); color: var(--red-text); }
.flash-warning { background: var(--amber-soft); border-color: rgba(217,119,6,.28); color: var(--amber-text); }
.flash-info { background: var(--blue-soft); border-color: rgba(59,130,246,.25); color: var(--blue-text); }
.flash a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.flash-close { position: absolute; top: .45rem; right: .45rem; width: 26px; height: 26px; border: 0; background: transparent; color: inherit; opacity: .6; border-radius: 6px; cursor: pointer; font-size: 1.1rem; line-height: 1; display: grid; place-items: center; font-family: inherit; transition: opacity var(--t-fast), background var(--t-fast); }
.flash-close:hover { opacity: 1; background: rgba(0,0,0,.06); }
.flash-out { opacity: 0; transform: translateY(-6px); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
.callout { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.1rem; border: 1px solid; font-size: .92rem; }
.callout .icon { width: 1.25em; height: 1.25em; flex: none; margin-top: .1em; }
.callout-amber { background: var(--amber-soft); border-color: rgba(217,119,6,.28); color: var(--amber-text); }
.callout-amber a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.callout-info { background: var(--blue-soft); border-color: rgba(59,130,246,.25); color: var(--blue-text); }
.callout strong { font-weight: 650; }

/* ---------- key/value ---------- */
.kv { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: .45rem 1rem; margin: 0; font-size: .9rem; }
.kv dt { color: var(--muted); font-weight: 500; }
.kv dd { margin: 0; min-width: 0; }
.steps { padding-left: 1.25rem; margin: .25rem 0 .9rem; }
.steps li { margin-bottom: .55rem; }
.steps li::marker { color: var(--primary); font-weight: 700; }
.url-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .85rem; }
.url-row { display: flex; align-items: center; gap: .5rem; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .45rem .5rem .45rem .75rem; }
.url-row code { flex: 1; background: transparent; padding: 0; font-size: .78rem; overflow-wrap: anywhere; word-break: break-all; color: var(--code-text); }
.url-row .btn { flex: none; }
.copy-row { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ---------- charts (shared engine: .vz built by app.js; .chart = legacy server SVG) ---------- */
.chart { width: 100%; height: auto; display: block; font-family: inherit; }
.chart-grid { stroke: var(--viz-grid); stroke-width: 1; }
.chart-label { fill: var(--muted); font-size: 11px; }
.chart-empty { fill: var(--muted); font-size: 14px; }
.chart-line { fill: none; stroke: var(--c1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s var(--ease) forwards; animation-delay: .25s; }
.chart-area { fill: url(#chartGrad); animation: fade .9s var(--ease) both; animation-delay: .5s; }
.chart-stop-a { stop-color: var(--c1); stop-opacity: .28; }
.chart-stop-b { stop-color: var(--c1); stop-opacity: 0; }
.chart-fail { fill: var(--viz-critical); fill-opacity: .35; }
.chart-legend { display: flex; gap: 1rem; align-items: center; font-size: .78rem; color: var(--muted); flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.chart-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--c1); }
.chart-legend i.fail { background: var(--viz-critical); opacity: .6; height: 10px; width: 4px; }
.chart-legend i.lg-band { height: 10px; border-radius: 3px; background: var(--c1); opacity: .2; }
.chart-legend i.lg-sw { width: 10px; height: 10px; border-radius: 3px; }
.lg-down, .sw-down { background: var(--viz-down) !important; }
.lg-fatal, .sw-fatal { background: var(--viz-fatal) !important; }
.lg-ssl, .sw-ssl { background: var(--viz-ssl) !important; }

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.card-head h2 { margin: 0; }
.card-head h2 .icon { color: var(--primary); width: 1.05em; height: 1.05em; }
.h2-sub { font-weight: 500; font-size: .82rem; letter-spacing: 0; }
.card-chart { display: flex; flex-direction: column; }
.chart-host { position: relative; width: 100%; min-height: 250px; }
.chart-host-sm { min-height: 200px; }
.chart-skeleton { position: absolute; inset: 8px 0 24px 44px; border-radius: 8px; background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 800px 100%; animation: shimmer 1.4s linear infinite; opacity: .7; }
.vz { width: 100%; height: auto; display: block; font-family: inherit; overflow: visible; }
.vz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.vz-axis { stroke: var(--viz-axis); stroke-width: 1; }
.vz-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.vz-tick-strong { fill: var(--text-2); font-weight: 600; }
.vz-unit { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.vz-empty { fill: var(--muted); font-size: 13px; }
.vz-val { fill: var(--text-2); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vz-stop-a { stop-color: var(--c1); stop-opacity: .26; }
.vz-stop-b { stop-color: var(--c1); stop-opacity: 0; }
.vz-band { fill: var(--c1); fill-opacity: .10; animation: fade .8s var(--ease) both; animation-delay: .55s; }
.vz-area { animation: fade .9s var(--ease) both; animation-delay: .45s; }
.vz-line { fill: none; stroke: var(--c1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.2s var(--ease) forwards; animation-delay: .2s; }
.vz-end { fill: var(--c1); stroke: var(--card); stroke-width: 2; animation: fade .4s var(--ease) both; animation-delay: 1.2s; }
.vz-fail { fill: var(--viz-fail); }
.vz-cross { stroke: var(--viz-axis); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity var(--t-fast); pointer-events: none; }
.vz-dot { fill: var(--c1); stroke: var(--card); stroke-width: 2.5; opacity: 0; transition: opacity var(--t-fast); pointer-events: none; }
.vz-cross.vz-on, .vz-dot.vz-on { opacity: 1; }
.vz-hit { fill: transparent; cursor: crosshair; }
.vz-hit-col { cursor: default; transition: fill var(--t-fast); }
.vz-hit-col.vz-on { fill: var(--viz-grid); }
.vz-col { animation: col-grow .7s var(--ease) both; }
.vz-seg-down { fill: var(--viz-down); }
.vz-seg-fatal { fill: var(--viz-fatal); }
.vz-seg-ssl { fill: var(--viz-ssl); }
.vz-still, .vz-still * { animation: none !important; }
.vz-still .vz-line { stroke-dashoffset: 0 !important; }

/* tooltip */
.tip { position: absolute; z-index: 50; pointer-events: none; opacity: 0; background: var(--text); color: var(--bg); font-size: .78rem; line-height: 1.45; padding: .45rem .65rem; border-radius: 9px; box-shadow: var(--shadow-lg); max-width: 260px; white-space: nowrap; transform: translateY(4px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.tip-on { opacity: 1; transform: none; animation: tip-in .16s var(--ease) both; }
.tip b { font-weight: 650; }
.tip .tip-muted { opacity: .7; }
.tip .tip-bad { color: #fca5a5; font-weight: 600; }
.tip .sw { width: 8px; height: 8px; margin-right: .2rem; vertical-align: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tip { background: #f3f5fb; color: #0f172a; } }

/* sparklines */
.spark { display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--c1); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark-area { fill: var(--c1); fill-opacity: .12; }
.spark-dot { fill: var(--c1); stroke: var(--card); stroke-width: 1.5; }
.spark-fail { stroke: var(--viz-critical); stroke-width: 1.5; opacity: .7; }
.spark-flat { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 2 3; }
.stat-down .spark-line { stroke: var(--viz-critical); } .stat-down .spark-area { fill: var(--viz-critical); } .stat-down .spark-dot { fill: var(--viz-critical); }
.stat-up .spark-line { stroke: var(--viz-good); } .stat-up .spark-area { fill: var(--viz-good); } .stat-up .spark-dot { fill: var(--viz-good); }
.td-spark { width: 132px; }
.table-sites .td-name { min-width: 170px; }
.table-sites .td-name .text-red { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-sites .trunc { max-width: 190px; }
.table-sites .td-client { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-sites td:last-child { white-space: nowrap; }
.td-spark .spark { width: 76px; height: 26px; }
.up-pill { display: inline-flex; align-items: center; font-size: .74rem; font-weight: 650; padding: .1em .5em; border-radius: 999px; font-variant-numeric: tabular-nums; background: var(--green-soft); color: var(--green-text); white-space: nowrap; }
.up-pill-amber { background: var(--amber-soft); color: var(--amber-text); }
.up-pill-red { background: var(--red-soft); color: var(--red-text); }
.up-pill-grey { background: var(--grey-soft); color: var(--grey-text); }

/* ---------- dashboard hero ---------- */
.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2.5rem; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 1.5rem 1.75rem 1.5rem;
  box-shadow: var(--shadow-lg); margin-bottom: 1.1rem;
}
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 90% at 100% 0%, var(--hero-glow, var(--primary-soft)), transparent 60%); opacity: .9; }
.hero::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--hero-accent, var(--primary)), transparent 70%); opacity: .9; }
.hero-green { --hero-accent: var(--green); --hero-glow: var(--green-soft); }
.hero-red { --hero-accent: var(--red); --hero-glow: var(--red-soft); }
.hero-amber { --hero-accent: var(--amber); --hero-glow: var(--amber-soft); }
.hero-grey { --hero-accent: var(--grey); --hero-glow: var(--grey-soft); }
.hero > * { position: relative; }
.hero-main { min-width: 0; }
.hero-eyebrow { color: var(--muted); font-size: .88rem; font-weight: 500; margin: 0 0 .2rem; }
.hero-headline { font-size: 1.7rem; font-weight: 750; letter-spacing: -.025em; margin: 0 0 .3rem; display: flex; align-items: center; gap: .6rem; line-height: 1.15; }
.hero-status-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--hero-accent, var(--grey)); box-shadow: 0 0 0 4px var(--hero-glow, var(--grey-soft)); flex: none; }
.hero-green .hero-status-dot { animation: live-pulse 2.4s ease-out infinite; }
.hero-red .hero-status-dot { animation: pulse-ring-red 1.6s ease-out infinite; }
.hero-sub { color: var(--muted); font-size: .9rem; margin: 0 0 1.15rem; }
.hero .stat-grid { margin-bottom: 0; gap: .85rem; }
.hero .stat { padding: .9rem 1rem .8rem 1.15rem; box-shadow: var(--shadow-sm); flex-direction: column; align-items: stretch; gap: .5rem; background: var(--surface-2); }
.hero .stat:hover { box-shadow: var(--shadow); background: var(--card); }
.hero .stat-num { font-size: 1.85rem; }
.hero .stat-icon { width: 34px; height: 34px; border-radius: 10px; }
.hero .stat-icon svg { width: 18px; height: 18px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.stat-spark { display: block; height: 28px; }
.stat-spark .spark { width: 100%; height: 28px; }
.stat-share { display: flex; align-items: center; gap: .5rem; height: 28px; }
.stat-share-bar { display: block; flex: 1; height: 5px; border-radius: 999px; background: var(--accent, var(--grey)); opacity: .55; width: 0; transition: width 1s var(--ease); position: relative; }
.stat-share { position: relative; }
.stat-share::before { content: ""; position: absolute; left: 0; right: 42px; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 999px; background: var(--surface-3); }
.stat-share-bar { position: relative; z-index: 1; flex: none; max-width: calc(100% - 42px); }
.stat-share-num { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; width: 34px; text-align: right; margin-left: auto; }
.hero-ring { position: relative; width: 200px; height: 200px; display: grid; place-items: center; justify-self: center; }
.ring { width: 200px; height: 200px; transform: rotate(-90deg); overflow: visible; }
.ring-track { fill: none; stroke: var(--surface-3); stroke-width: 11; }
.ring-fill { fill: none; stroke: var(--ring-color, var(--grey)); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; opacity: .95; transition: stroke-dashoffset 1.4s var(--ease) .25s; filter: drop-shadow(0 0 6px var(--ring-glow, transparent)); }
.ring-green { --ring-color: var(--viz-good); --ring-glow: rgba(12, 163, 12, .35); }
.ring-amber { --ring-color: var(--viz-warn); --ring-glow: rgba(250, 178, 25, .35); }
.ring-red { --ring-color: var(--viz-critical); --ring-glow: rgba(208, 59, 59, .35); }
.ring-grey { --ring-color: var(--grey); }
.ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring-value { font-size: 2.1rem; font-weight: 750; letter-spacing: -.03em; line-height: 1; }
.ring-label { font-size: .74rem; color: var(--muted); font-weight: 500; margin-top: .3rem; text-transform: uppercase; letter-spacing: .06em; }
.meta-line { display: inline-flex; align-items: center; gap: .45rem; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); animation: live-pulse 2.2s ease-out infinite; flex: none; }
.live-dot-off { background: var(--amber); animation: none; box-shadow: 0 0 0 3px var(--amber-soft); }

/* ---------- heatmap ---------- */
.heatmap-wrap { overflow-x: auto; margin: 0 -1.4rem; padding: 0 1.4rem; }
.heatmap { display: flex; flex-direction: column; gap: 5px; min-width: 520px; }
.hm-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 60px; align-items: center; gap: 1rem; }
.hm-head { margin-bottom: 2px; }
.hm-name { font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .4rem; }
.hm-name a { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.hm-name a:hover { color: var(--link); }
.hm-name .dot { width: 8px; height: 8px; box-shadow: none; }
.hm-name .dot-red { animation: none; }
.hm-name .pill-type { flex: none; }
.hm-cells { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; }
.hm { display: block; height: 24px; border-radius: 5px; background: var(--hm-0); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); cursor: default; }
.hm-1 { background: var(--hm-1); } .hm-2 { background: var(--hm-2); } .hm-3 { background: var(--hm-3); } .hm-4 { background: var(--hm-4); } .hm-5 { background: var(--hm-5); }
.hm[data-tip]:hover { transform: scaleY(1.18) scaleX(1.12); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--border-strong); position: relative; z-index: 2; }
.hm-day { font-size: .66rem; color: var(--muted); white-space: nowrap; overflow: visible; line-height: 1; font-variant-numeric: tabular-nums; }
.hm-pct { font-size: .82rem; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.hm-legend { display: flex; align-items: center; gap: 4px; margin-top: .85rem; font-size: .72rem; color: var(--muted); }
.hm-legend .hm { width: 14px; height: 12px; }
.hm-legend span { margin: 0 .3rem; }
.hm-mobile-note { display: none; }
.hm-legend-gap { display: inline-flex; align-items: center; gap: 5px; margin-left: auto !important; }

/* ---------- timeline / lists ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: var(--border); border-radius: 2px; }
.tl-item { position: relative; padding: 0 0 .85rem 1.6rem; animation: fade .4s var(--ease) both; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item:nth-child(1) { animation-delay: 80ms; } .tl-item:nth-child(2) { animation-delay: 130ms; } .tl-item:nth-child(3) { animation-delay: 180ms; } .tl-item:nth-child(4) { animation-delay: 230ms; } .tl-item:nth-child(5) { animation-delay: 280ms; } .tl-item:nth-child(6) { animation-delay: 330ms; } .tl-item:nth-child(7) { animation-delay: 380ms; } .tl-item:nth-child(n+8) { animation-delay: 430ms; }
.tl-dot { position: absolute; left: 2px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--tl-color, var(--grey)); border: 2px solid var(--card); box-shadow: 0 0 0 2px var(--border); }
.tl-down { --tl-color: var(--viz-down); } .tl-fatal { --tl-color: var(--viz-fatal); } .tl-ssl { --tl-color: var(--viz-ssl); }
.tl-open .tl-dot { animation: pulse-ring-red 1.8s ease-out infinite; }
.tl-line { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .9rem; }
.tl-site { font-weight: 650; color: var(--text); }
.tl-site:hover { color: var(--link); }
.tl-meta { font-size: .8rem; margin-top: .1rem; }
.tl-detail { margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.attn-item { display: flex; gap: .75rem; align-items: flex-start; padding: .7rem .85rem .7rem .95rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); position: relative; overflow: hidden; animation: fade .4s var(--ease) both; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.attn-item:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.attn-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--attn-color, var(--grey)); }
.attn-red { --attn-color: var(--red); --attn-soft: var(--red-soft); --attn-text: var(--red-text); }
.attn-amber { --attn-color: var(--amber); --attn-soft: var(--amber-soft); --attn-text: var(--amber-text); }
.attn-purple { --attn-color: var(--purple); --attn-soft: var(--purple-soft); --attn-text: var(--purple-text); }
.attn-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--attn-soft, var(--grey-soft)); color: var(--attn-text, var(--grey-text)); }
.attn-icon .icon { width: 16px; height: 16px; }
.attn-body { min-width: 0; flex: 1; }
.attn-title { font-size: .9rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.attn-title > a { font-weight: 650; color: var(--text); }
.attn-title > a:hover { color: var(--link); }
.attn-title .dot { width: 8px; height: 8px; box-shadow: none; }
.attn-issues { margin-top: .3rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.attn-detail { margin-top: .15rem; overflow-wrap: anywhere; }
.attn-list .attn-item:nth-child(1) { animation-delay: 80ms; } .attn-list .attn-item:nth-child(2) { animation-delay: 140ms; } .attn-list .attn-item:nth-child(3) { animation-delay: 200ms; } .attn-list .attn-item:nth-child(n+4) { animation-delay: 260ms; }

.grid-lists { grid-template-columns: 1.15fr 1fr 1fr; }
.grid-lists .attn-item { padding: .6rem .7rem .6rem .85rem; }
.grid-lists .empty-state { flex-direction: column; align-items: flex-start; }
.grid-lists .timeline { max-height: none; }
/* empty states */
.empty-state { display: flex; align-items: center; gap: 1rem; padding: .5rem .25rem .35rem; color: var(--muted); font-size: .9rem; }
.empty-state p { margin: 0; max-width: 34ch; }
.empty-art { width: 96px; height: 64px; flex: none; fill: var(--surface-3); }
.empty-art .art-ring { fill: none; stroke: var(--green); stroke-width: 2; opacity: .5; }
.empty-art .art-fill { fill: var(--green-soft); }
.empty-art .art-check { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 1s var(--ease) forwards; animation-delay: .5s; }
.empty-art .art-wave { fill: none; stroke: var(--c1); stroke-width: 2.5; stroke-linecap: round; opacity: .55; }

/* ---------- fleet snapshot ---------- */
.snap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.snap { min-width: 0; padding: .25rem 0; }
.snap + .snap { border-left: 1px solid var(--border); padding-left: 1.25rem; }
.snap h3 { margin: 0 0 .75rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.snap-donut { display: flex; align-items: center; gap: 1rem; }
.donut { width: 104px; height: 104px; flex: none; }
.donut-track { fill: none; stroke: var(--surface-3); stroke-width: 12; }
.donut-seg { fill: none; stroke-width: 12; transform: rotate(-90deg); transform-origin: 60px 60px; opacity: 0; transition: opacity .6s var(--ease) .3s, stroke-width var(--t-fast); }
.donut-seg-on { opacity: 1; }
.donut-seg:hover { stroke-width: 14; }
.donut-center { fill: var(--text); font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.donut-sub { fill: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.seg-green { stroke: var(--viz-good); } .seg-red { stroke: var(--viz-critical); } .seg-grey { stroke: var(--grey); } .seg-amber { stroke: var(--viz-warn); }
.seg-c1 { stroke: var(--c1); } .seg-c2 { stroke: var(--c2); }
.snap-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; font-size: .84rem; min-width: 0; }
.snap-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .45rem; white-space: nowrap; }
.snap-legend li span { overflow: hidden; text-overflow: ellipsis; }
.snap-legend b { padding-left: .5rem; font-variant-numeric: tabular-nums; font-weight: 650; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--grey); flex: none; }
.sw-green { background: var(--viz-good); } .sw-red { background: var(--viz-critical); } .sw-grey { background: var(--grey); } .sw-amber { background: var(--viz-warn); } .sw-c1 { background: var(--c1); } .sw-c2 { background: var(--c2); }
.vbars, .ssl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.vbar { display: flex; flex-direction: column; gap: .3rem; font-size: .84rem; }
.vbar-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.vbar-label { display: flex; align-items: center; gap: .4rem; min-width: 0; flex-wrap: wrap; }
.vbar-num { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.vbar-track, .ssl-track { display: block; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.vbar-fill, .ssl-fill { display: block; height: 100%; border-radius: 999px; background: var(--c1); width: 0; transition: width 1s var(--ease) .2s; }
.ssl-item { font-size: .84rem; }
.ssl-line { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
.ssl-line a { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ssl-line a:hover { color: var(--link); }
.ssl-days { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; color: var(--ssl-text, var(--text-2)); }
.ssl-fill { background: var(--ssl-color, var(--viz-good)); }
.ssl-red { --ssl-color: var(--viz-critical); --ssl-text: var(--red-text); }
.ssl-amber { --ssl-color: var(--viz-warn); --ssl-text: var(--amber-text); }
.ssl-green { --ssl-color: var(--viz-good); --ssl-text: var(--green-text); }

/* ---------- site page gauges & strip ---------- */
.gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .6rem; }
.gauge { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.gauge .ring { width: 92px; height: 92px; }
.gauge .ring-track, .gauge .ring-fill { stroke-width: 9; }
.gauge .ring-fill { filter: none; }
.gauge-wrap { position: relative; width: 92px; height: 92px; }
.gauge-value { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gauge-label { font-size: .74rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.strip { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; margin-top: .25rem; }
.strip .hm { height: 28px; }
.strip-meta { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin-top: .4rem; }

/* ---------- auth pages ---------- */
.auth-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 16px; }
.auth-page::before { height: 100%; -webkit-mask-image: none; mask-image: none; background: radial-gradient(70% 60% at 15% 0%, var(--bg-glow-1), transparent 70%), radial-gradient(50% 50% at 90% 10%, var(--bg-glow-2), transparent 70%), radial-gradient(60% 50% at 50% 100%, var(--bg-glow-3), transparent 70%); }
.auth-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 2rem 2rem 1.75rem; width: 100%; max-width: 420px; box-shadow: var(--shadow-auth); animation: rise .6s var(--ease) both; }
.auth-card h1 { margin-bottom: .35rem; font-size: 1.35rem; }
.auth-card .lead { color: var(--muted); font-size: .9rem; margin-bottom: 1.1rem; }
.auth-card form { margin-top: 1rem; }
.auth-card .btn-block { margin-top: .4rem; }
.auth-foot { margin-top: 1.25rem; font-size: .8rem; color: var(--muted); text-align: center; animation: fade .8s var(--ease) both; animation-delay: .3s; }
.auth-foot strong { color: var(--text-2); font-weight: 600; }
.auth-links { margin-top: 1rem; font-size: .88rem; text-align: center; }

/* ---------- public status page ---------- */
.status-page { padding: 16px; }
.status-wrap { max-width: 760px; margin: 2.5rem auto; }
.status-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; animation: rise .5s var(--ease) both; }
.status-head h1 { font-size: 1.45rem; }
.status-head .eyebrow { display: block; font-size: .78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .15rem; }
.status-banner { display: flex; align-items: center; gap: .9rem; padding: 1.2rem 1.4rem; border-radius: var(--radius); font-weight: 650; font-size: 1.1rem; margin-bottom: 1.1rem; color: #fff; box-shadow: var(--shadow-lg); animation: rise .5s var(--ease) both; animation-delay: 60ms; }
.status-banner .icon { width: 1.5em; height: 1.5em; flex: none; }
.status-banner small { display: block; font-weight: 500; font-size: .82rem; opacity: .85; margin-top: .1rem; }
.status-ok { background: linear-gradient(120deg, #16a34a, #22c55e); }
.status-warn { background: linear-gradient(120deg, #d97706, #f59e0b); }
.status-bad { background: linear-gradient(120deg, #b91c1c, #ef4444); }
.status-table { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); animation: rise .5s var(--ease) both; animation-delay: 140ms; }
.status-table td { vertical-align: middle; }
.status-table .td-name { font-weight: 600; }
.up-bar { display: inline-flex; align-items: center; gap: .55rem; justify-content: flex-end; }
.up-bar .rt-bar { width: 80px; }
.up-bar .rt-bar i { animation-delay: .4s; }
.status-foot { margin-top: 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); animation: fade .8s var(--ease) both; animation-delay: .35s; }
.status-foot strong { color: var(--text-2); font-weight: 600; }

/* ---------- misc ---------- */
.section-title { display: flex; align-items: center; gap: .5rem; }
.section-title .icon { color: var(--primary); width: 1.1em; height: 1.1em; }
.empty { color: var(--muted); display: flex; align-items: center; gap: .5rem; padding: .35rem 0; }
.empty .icon { color: var(--green); width: 1.1em; height: 1.1em; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-lists { grid-template-columns: 1fr; }
  .grid-2-wide { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .snap-grid { grid-template-columns: 1fr 1fr; }
  .snap:nth-child(3) { border-left: 0; padding-left: 0; }
  .snap:nth-child(n+3) { border-top: 1px solid var(--border); padding-top: 1rem; }
}
@media (max-width: 900px) {
  .grid-3, .grid-2, .grid-2-wide { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; }
  .hero-ring { justify-self: center; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .card-table { overflow-x: auto; }
  .card-table .table thead th { position: static; }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .topbar-inner { height: auto; flex-wrap: wrap; padding: .6rem 16px; gap: .5rem .75rem; }
  .nav { flex: 1 1 100%; width: 100%; order: 3; padding: .15rem 0 .35rem; flex-wrap: wrap; overflow: visible; }
  .status-table { overflow-x: auto; }
  .status-table .table { min-width: 480px; }
  .card-table .table, .table-wrap .table { min-width: 560px; }
  .actions-cell { white-space: nowrap; }
  .nav-user { margin-left: auto; }
  .nav-user .muted { display: none; }
  .container { padding-top: 1.1rem; }
  .page-head { margin-bottom: 1rem; }
  h1 { font-size: 1.35rem; }
  .row-2 { grid-template-columns: 1fr; }
  .trunc { max-width: 160px; }
  .table th, .table td { padding: .55rem .6rem; }
  .card { padding: 1rem 1rem; }
  .table-wrap { margin: 0 -1rem; padding: 0 1rem; }
  .stat-grid { gap: .75rem; }
  .stat { padding: .9rem 1rem .9rem 1.15rem; }
  .stat-num { font-size: 1.7rem; }
  .stat-icon { width: 36px; height: 36px; border-radius: 10px; }
  .stat-icon svg { width: 18px; height: 18px; }
  .uptime-row { gap: 1.25rem; }
  .hero { padding: 1.15rem 1rem 1rem; border-radius: var(--radius); gap: 1rem; }
  .hero-headline { font-size: 1.35rem; }
  .hero .stat-grid { gap: .6rem; }
  .hero .stat { padding: .7rem .75rem .6rem .9rem; }
  .hero .stat-num { font-size: 1.5rem; }
  .hero-ring, .ring { width: 150px; height: 150px; }
  .ring-value { font-size: 1.55rem; }
  .card-head { margin-bottom: .7rem; }
  .heatmap-wrap { margin: 0; padding: 0; overflow: visible; }
  .heatmap { min-width: 0; }
  .hm-row { grid-template-columns: 104px minmax(0, 1fr) 48px; gap: .5rem; }
  .hm-cells { grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; }
  .hm-cells > :nth-child(-n+16) { display: none; }
  .hm { height: 20px; border-radius: 3px; }
  .hm-mobile-note { display: inline; }
  .hm-head .hm-day:last-child { visibility: hidden; }
  .hm-legend .hm { height: 12px; }
  .strip { grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; }
  .strip .hm { height: 18px; border-radius: 2px; }
  .snap-grid { grid-template-columns: 1fr; gap: 1rem; }
  .snap + .snap { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 1rem; }
  .empty-art { width: 72px; height: 48px; }
  .gauge .ring, .gauge-wrap { width: 80px; height: 80px; }
  .gauge-value { font-size: .9rem; }
  .strip .hm { height: 22px; }
  .td-spark { width: 80px; }
  .td-spark .spark { width: 72px; }
  .filters input[type=search] { min-width: 0; flex: 1 1 100%; }
  .auth-card { padding: 1.5rem 1.25rem; }
  .status-wrap { margin: 1rem auto; }
  .url-row { flex-wrap: wrap; }
}
.spark-cell { display: flex; align-items: center; gap: .5rem; }
.hm-legend .hm { cursor: default; }