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

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --bg:       #F7F9FC;
  --surface:  #FFFFFF;
  --surface2: #F1F5FB;
  --border:   #E2E8F2;
  --border2:  #CAD4E4;

  --text:     #0F172A;
  --text-2:   #64748B;
  --text-3:   #94A3B8;

  --green:    #059669;
  --yellow:   #D97706;
  --orange:   #EA580C;
  --red:      #DC2626;

  --font: 'Sora', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --r:    8px;
}

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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout wrapper ───────────────────────────────────────────────────────── */
.inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.site-header .inner {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-mark {
  width: 28px;
  height: 28px;
  background: var(--text);
  color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
}

.logo-text {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text);
}

.last-checked {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}

/* ── Main ─────────────────────────────────────────────────────────────────── */
main {
  padding: 52px 0 96px;
}

/* ── Status Hero ──────────────────────────────────────────────────────────── */
.status-hero {
  margin-bottom: 60px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 14px;
}

.status-text {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.6px;
  color: var(--text);
  line-height: 1;
}

.hero-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  padding-bottom: 3px;
}

/* ── Status Dots ──────────────────────────────────────────────────────────── */
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-hero .status-dot {
  width: 13px;
  height: 13px;
}

.status-dot.up,
.status-dot.operational { background: var(--green); }
.status-dot.degraded    { background: var(--yellow); }
.status-dot.maintenance { background: var(--orange); }
.status-dot.down        { background: var(--red); }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.section {
  margin-bottom: 52px;
}

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

.section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.section-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  margin-left: auto;
}

/* ── Service Grid ─────────────────────────────────────────────────────────── */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(284px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.service-card {
  background: var(--surface);
  padding: 20px 22px 16px;
  box-shadow: inset 3px 0 0 var(--border);
  transition: background 0.12s;
}

.service-card[data-status="up"],
.service-card[data-status="operational"] { box-shadow: inset 3px 0 0 var(--green); }
.service-card[data-status="degraded"]    { box-shadow: inset 3px 0 0 var(--yellow); }
.service-card[data-status="maintenance"] { box-shadow: inset 3px 0 0 var(--orange); }
.service-card[data-status="down"]        { box-shadow: inset 3px 0 0 var(--red); }

.service-card:hover { background: var(--surface2); }

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

.card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
}

/* Metric row */
.card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 16px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.meta-value {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
}

/* ── SSL Badge ────────────────────────────────────────────────────────────── */
.ssl-badge {
  font-family: var(--mono);
  font-size: 13px;
}

.ssl-badge.good   { color: var(--text-2); }
.ssl-badge.warn   { color: var(--yellow); }
.ssl-badge.danger { color: var(--red); }

/* ── Uptime Bars ──────────────────────────────────────────────────────────── */
.uptime-bars {
  display: flex;
  gap: 1.5px;
  align-items: flex-end;
  height: 22px;
  margin-bottom: 5px;
}

.uptime-bar {
  flex: 1;
  min-width: 1px;
  border-radius: 1px;
}

.uptime-bar.good  { background: #6EE7B7; height: 100%; }
.uptime-bar.warn  { background: var(--yellow); height: 60%; opacity: 0.7; }
.uptime-bar.bad   { background: var(--red); height: 32%; opacity: 0.8; }
.uptime-bar.empty { background: var(--border); height: 100%; }

.card-uptime-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-3);
}

/* ── Chart ────────────────────────────────────────────────────────────────── */
.chart-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 24px 24px 16px;
}

/* ── Incident List ────────────────────────────────────────────────────────── */
.incident-list {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.incident-item {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

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

.incident-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.incident-content { flex: 1; }

.incident-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.incident-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
}

.badge.incident    { background: #FEE2E2; color: var(--red); }
.badge.down        { background: #FEE2E2; color: var(--red); }
.badge.maintenance { background: #FFEDD5; color: var(--orange); }
.badge.degradation { background: #FEF3C7; color: var(--yellow); }
.badge.recovery    { background: #D1FAE5; color: var(--green); }

/* ── Misc ─────────────────────────────────────────────────────────────────── */
.muted {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  padding: 20px;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.footer-row {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
}

/* ── Loading skeleton ─────────────────────────────────────────────────────── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

.card-skeleton {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  height: 170px;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .inner              { padding: 0 20px; }
  main                { padding: 36px 0 72px; }
  .status-hero        { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 28px; margin-bottom: 40px; }
  .status-text        { font-size: 18px; }
  .service-grid       { grid-template-columns: 1fr; }
  .footer-row         { flex-direction: column; justify-content: center; gap: 4px; height: auto; padding: 20px 0; }
}