:root {
  --bg: #0b0d12;
  --bg-elev: #12151c;
  --bg-hi: #1a1f29;
  --fg: #e5e9f0;
  --fg-dim: #8b93a7;
  --fg-faint: #565e72;
  --accent: #7aa2f7;
  --ok: #9ece6a;
  --warn: #e0af68;
  --err: #f7768e;
  --gh: #a3b1cf;
  --ff: #c678dd;
  --sb: #4ade80;
  --radius: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  padding-bottom: 64px;
}

/* Split layout: feed on the left, status grid on the right. Stacks on narrow screens. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 8px 24px 40px;
  align-items: start;
}
.split-left, .split-right { min-width: 0; }
.split-left  { display: flex; flex-direction: column; gap: 10px; }
.split-right { position: sticky; top: 0; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; padding: 8px 14px 40px; }
  .split-right { position: static; }
}
@media (min-width: 1600px) {
  .split { max-width: 2000px; gap: 24px; padding: 10px 28px 40px; }
}

.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 24px 14px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 70%, transparent 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand > div { flex: 1; min-width: 0; }

/* Agency logo, top-left of the page. Source is the white-on-transparent
   variant so it drops straight onto the dark theme with no filtering. */
.brand-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}
.brand-logo img {
  height: 40px; width: auto; display: block;
  transition: opacity .15s ease;
}
.brand-logo:hover img { opacity: .8; }
@media (min-width: 1600px) {
  .brand-logo img { height: 54px; }
}
.brand h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.brand .sub { margin: 0; font-size: 12px; color: var(--fg-dim); }

/* Discreet temporary test button — sits next to the toggle */
.sound-test {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-faint);
  border-radius: 6px;
  height: 28px; padding: 0 8px;
  font-size: 11px; font-family: inherit; font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  opacity: .5;
  transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.sound-test:hover  { opacity: 1; color: var(--fg-dim); border-color: var(--bg-hi); }
.sound-test:active { opacity: 1; transform: scale(.97); }
.sound-test.playing {
  opacity: 1; color: var(--accent); border-color: rgba(122, 162, 247, .35);
}

/* Sound toggle — circular icon button, right-aligned on the brand row */
.sound-toggle {
  background: var(--bg-elev);
  border: 1px solid var(--bg-hi);
  color: var(--fg-dim);
  border-radius: 10px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: all .15s ease;
  padding: 0;
  font-family: inherit;
  flex-shrink: 0;
}
.sound-toggle:hover { color: var(--fg); border-color: var(--accent); }
.sound-toggle[aria-pressed="true"]  { color: var(--ok);       border-color: rgba(158, 206, 106, .35); }
.sound-toggle[aria-pressed="false"] { color: var(--fg-faint); border-color: var(--bg-hi); background: transparent; }

/* SVG speaker icons — show whichever matches the current aria-pressed state */
.icon-vol { width: 16px; height: 16px; display: block; }
.sound-toggle[aria-pressed="true"]  .icon-vol-off { display: none; }
.sound-toggle[aria-pressed="false"] .icon-vol-on  { display: none; }

@media (min-width: 1600px) {
  .sound-toggle { width: 40px; height: 40px; border-radius: 12px; }
  .icon-vol { width: 18px; height: 18px; }
  .sound-test { height: 32px; font-size: 12px; }
}
.brand .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 14px var(--ok);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- Incident banner (only visible when Uptime has actives) ---------- */
/* `display: flex` below would otherwise override the HTML `hidden` attribute,
   leaving an empty red gradient shell visible when there are no incidents.
   This rule wins because it's identical specificity but later in the sheet
   and uses !important on the single property that matters. */
.incident-banner[hidden] { display: none !important; }

.incident-banner {
  background: linear-gradient(135deg, rgba(247, 118, 142, .18), rgba(247, 118, 142, .06));
  border: 1px solid rgba(247, 118, 142, .55);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: incidentIn .4s ease;
  box-shadow: 0 0 24px rgba(247, 118, 142, .18);
}
@keyframes incidentIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.incident-header { display: flex; align-items: center; gap: 14px; }
.incident-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--err); color: #1a0a0f;
  font-weight: 700; font-size: 22px; line-height: 1;
  box-shadow: 0 0 0 6px rgba(247, 118, 142, .18);
  animation: incidentPulse 1.6s ease-in-out infinite;
}
@keyframes incidentPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(247, 118, 142, .18); }
  50%      { box-shadow: 0 0 0 10px rgba(247, 118, 142, .05); }
}
.incident-title {
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--err);
}
.incident-sub { font-size: 12px; color: var(--fg-dim); }
.incident-list {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px 18px;
  font-size: 13px;
}
.incident-list li { color: var(--fg-dim); }
.incident-list li strong { color: var(--fg); font-weight: 500; }
.incident-list .incident-more { color: var(--fg-faint); font-style: italic; }

@media (min-width: 1600px) {
  .incident-banner { padding: 20px 24px; }
  .incident-icon { width: 48px; height: 48px; font-size: 28px; }
  .incident-title { font-size: 24px; }
  .incident-sub { font-size: 14px; }
  .incident-list { font-size: 15px; }
}

/* Uptime filter chip — subtle red tint so it reads as the "alert" tab */
.chip-uptime { color: var(--err); }
.chip-uptime:hover { border-color: var(--err); }
.chip-uptime.active { border-color: var(--err); background: rgba(247, 118, 142, .12); color: var(--err); }

/* ---------- Status page (all monitors grid) ---------- */
.status-page {
  background: var(--bg-elev);
  border: 1px solid var(--bg-hi);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.status-page-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.status-page-title {
  margin: 0; font-size: 14px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-dim);
}
.status-page-summary {
  font-size: 13px; color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.status-page-summary .s-up   { color: var(--ok); font-weight: 600; }
.status-page-summary .s-down { color: var(--err); font-weight: 600; }
.status-page-summary .s-paused { color: var(--warn); font-weight: 600; }

.status-group + .status-group { margin-top: 14px; }
.status-group-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 8px; gap: 10px;
}
.status-group-name {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg);
}
.status-group-count {
  font-size: 11px; color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.mon {
  background: var(--bg-hi);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  transition: background .15s ease;
  text-decoration: none;
  color: inherit;
}
.mon:hover { background: #1e2330; }
.mon-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--fg-faint);
}
.mon-up      .mon-dot { background: var(--ok);   box-shadow: 0 0 8px var(--ok); }
.mon-down    .mon-dot { background: var(--err);  box-shadow: 0 0 10px var(--err); animation: monPulse 1.4s ease-in-out infinite; }
.mon-seems   .mon-dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.mon-paused  .mon-dot { background: var(--fg-faint); }
@keyframes monPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(1.3); }
}
.mon-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mon-name {
  font-size: 13px; font-weight: 500; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mon-sub {
  font-size: 11px; color: var(--fg-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mon-down .mon-sub { color: var(--err); }
.mon-right {
  font-variant-numeric: tabular-nums;
  text-align: right; font-size: 11px;
  color: var(--fg-dim);
  display: flex; flex-direction: column; gap: 2px;
  align-items: flex-end;
}
.mon-uptime { font-size: 12px; font-weight: 500; }
.mon-up      .mon-uptime { color: var(--ok); }
.mon-down    .mon-uptime { color: var(--err); }
.mon-seems   .mon-uptime { color: var(--warn); }
.mon-paused  .mon-uptime { color: var(--fg-faint); }

@media (min-width: 1600px) {
  .status-page { padding: 20px 24px; }
  .status-page-title { font-size: 16px; }
  .status-page-summary { font-size: 16px; }
  .status-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
  .mon { padding: 14px 16px; }
  .mon-name { font-size: 15px; }
  .mon-sub { font-size: 12px; }
  .mon-uptime { font-size: 14px; }
}

/* ---------- 24h activity panel (TV-readable) ---------- */
.stats {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--bg-hi);
  border-radius: var(--radius);
}
.totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: end;
}
.total-item { display: flex; flex-direction: column; gap: 2px; }
.total-value {
  font-size: 34px; font-weight: 600; line-height: 1.05;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.total-label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-faint);
}
.total-all .total-value { color: var(--fg); }
.total-gh  .total-value { color: var(--gh); }
.total-ff  .total-value { color: var(--ff); }
.total-sb  .total-value { color: var(--sb); }

.chart {
  width: 100%; height: 140px; display: block;
  overflow: visible;
}
.chart rect { transition: opacity .3s ease; }
.chart-axis {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--fg-faint);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* TV mode — kicks in on big screens (1080p+). Larger type, more breathing room. */
@media (min-width: 1600px) {
  body { font-size: 16px; }
  .brand h1 { font-size: 26px; }
  .brand .sub { font-size: 14px; }
  .card { padding: 16px 20px; grid-template-columns: 40px 1fr; gap: 16px; }
  .icon { width: 36px; height: 36px; font-size: 13px; }
  .summary { font-size: 16px; }
  .meta { font-size: 13px; }
  .total-value { font-size: 56px; }
  .total-label { font-size: 13px; }
  .chart { height: 180px; }
  .stats { padding: 20px 28px; gap: 16px; }
}

.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  background: var(--bg-elev); color: var(--fg-dim);
  border: 1px solid transparent; border-radius: 999px;
  padding: 6px 14px; font-size: 13px; cursor: pointer;
  font-family: inherit;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.chip:hover { color: var(--fg); border-color: var(--bg-hi); }
.chip.active { background: var(--bg-hi); color: var(--fg); border-color: var(--accent); }

.feed {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}

.card {
  background: var(--bg-elev);
  border-radius: var(--radius);
  border-left: 3px solid var(--fg-faint);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  transition: background .2s ease, box-shadow .35s ease;
  position: relative;
  --source-glow: rgba(255, 255, 255, 0);
}

.card[data-source="github"]      { border-left-color: var(--gh); --source-glow: rgba(163, 177, 207, .55); }
.card[data-source="flutterflow"] { border-left-color: var(--ff); --source-glow: rgba(198, 120, 221, .55); }
.card[data-source="supabase"]    { border-left-color: var(--sb); --source-glow: rgba(74, 222, 128, .55); }
/* Uptime default = neutral gray (informational lifecycle: added, paused, started).
   Actual state changes override via the data-event-type selectors below. */
.card[data-source="uptime"]                                    { border-left-color: var(--fg-faint); --source-glow: rgba(139, 147, 167, .35); }
.card[data-source="uptime"][data-event-type="uptime_down"]     { border-left-color: var(--err); --source-glow: rgba(247, 118, 142, .55); }
.card[data-source="uptime"][data-event-type="uptime_up"]       { border-left-color: var(--ok);  --source-glow: rgba(158, 206, 106, .55); }

/* "Pop" when a new event arrives via SSE. Scale-bounce + glow pulse + bg flash.
   Uses cubic-bezier(.22,1,.36,1) for a snappy settle without overshoot wobble. */
.card.new {
  animation: cardPop .7s cubic-bezier(.22, 1, .36, 1);
  transform-origin: top center;
}
@keyframes cardPop {
  0%   {
    opacity: 0;
    transform: scale(.94) translateY(-12px);
    background: var(--bg-hi);
    box-shadow: 0 0 0 0 var(--source-glow);
  }
  35%  {
    opacity: 1;
    transform: scale(1.015) translateY(0);
    background: var(--bg-hi);
    box-shadow: 0 0 24px 2px var(--source-glow);
  }
  70%  {
    transform: scale(1);
    box-shadow: 0 0 12px 0 var(--source-glow);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    background: var(--bg-elev);
    box-shadow: 0 0 0 0 transparent;
  }
}

/* A live "just now" dot on new cards that fades after a couple seconds */
.card.new::after {
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  color: var(--ok);
  animation: justNowBlink 2s ease-out;
  pointer-events: none;
}
@keyframes justNowBlink {
  0%   { opacity: 1; box-shadow: 0 0 12px var(--ok); }
  60%  { opacity: 1; box-shadow: 0 0 4px var(--ok); }
  100% { opacity: 0; box-shadow: 0 0 0 transparent; }
}

.icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 600; font-size: 11px;
  background: var(--bg-hi); color: var(--fg-dim);
  letter-spacing: .02em;
  object-fit: cover;
}
.icon-avatar {
  border-radius: 50%;
  border: 1px solid var(--bg-hi);
}
.card[data-source="github"] .icon      { color: var(--gh); }
.card[data-source="flutterflow"] .icon { color: var(--ff); }
.card[data-source="supabase"] .icon    { color: var(--sb); }
/* Uptime icon: neutral by default, red only on actual down, green on recovery. */
.card[data-source="uptime"] .icon                                  { color: var(--fg-faint); font-size: 16px; }
.card[data-source="uptime"][data-event-type="uptime_down"] .icon   { color: var(--err); }
.card[data-source="uptime"][data-event-type="uptime_up"] .icon     { color: var(--ok);  }

.body { min-width: 0; }
.summary { color: var(--fg); font-weight: 500; word-wrap: break-word; }
.summary a { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--fg-faint); }
.summary a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.meta {
  color: var(--fg-faint); font-size: 12px;
  margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap;
}
.meta b { color: var(--fg-dim); font-weight: 500; }

/* No expand/raw drawer — the public API intentionally omits raw payloads. */

.status {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: center; gap: 18px;
  background: var(--bg-elev);
  border-top: 1px solid var(--bg-hi);
  padding: 10px 16px; font-size: 12px; color: var(--fg-dim);
  flex-wrap: wrap;
}
.status-item::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--fg-faint); margin-right: 6px;
  vertical-align: middle;
}
.status-item.ok::before   { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.status-item.warn::before { background: var(--warn); }
.status-item.err::before  { background: var(--err); }

.empty {
  color: var(--fg-faint); text-align: center;
  padding: 48px 0; font-size: 13px;
}

@media (max-width: 520px) {
  .top { padding: 18px 14px 10px; }
  .feed { padding: 8px 14px 40px; }
  .brand h1 { font-size: 17px; }
  .card { padding: 10px 12px; grid-template-columns: 24px 1fr auto; }
  .icon { width: 24px; height: 24px; font-size: 10px; }
}