:root {
  /* Betaflight palette (from betaflight/bridge's status page). */
  --bg: #0f1115;
  --card: #181b20;
  --card-border: #262b32;
  --text: #e6e8ea;
  --muted: #8b9199;
  --accent: #ffbb00;
  /* Semantic status colours (operational uses Betaflight's green). */
  --operational: #46c66d;
  --degraded: #f1c40f;
  --partialOutage: #e67e22;
  --majorOutage: #e74c3c;
  --nodata: #2d333b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.page { max-width: 860px; margin: 0 auto; padding: 32px 20px 64px; }

.masthead { border-top: 3px solid var(--accent); padding-top: 20px; }
.masthead h1 { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.masthead .logo { height: 52px; width: auto; display: block; }
.masthead .brand-status { color: var(--muted); font-weight: 500; }
.updated { color: var(--muted); font-size: 13px; margin: 0; }

.banner {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0 28px; padding: 18px 20px;
  border-radius: 10px; font-size: 18px; font-weight: 600;
  background: var(--card); border: 1px solid var(--card-border);
}
.banner-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--operational); flex: none; }
.banner[data-status="operational"] .banner-dot { background: var(--operational); }
.banner[data-status="degraded"] .banner-dot { background: var(--degraded); }
.banner[data-status="partialOutage"] .banner-dot { background: var(--partialOutage); }
.banner[data-status="majorOutage"] .banner-dot { background: var(--majorOutage); }

.component {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 10px; padding: 16px 18px; margin-bottom: 12px;
}
.component-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.component-name { font-weight: 600; }
.component-status { font-size: 13px; font-weight: 600; }
.component-status[data-status="operational"] { color: var(--operational); }
.component-status[data-status="degraded"] { color: var(--degraded); }
.component-status[data-status="partialOutage"] { color: var(--partialOutage); }
.component-status[data-status="majorOutage"] { color: var(--majorOutage); }
.component-status[data-status="nodata"] { color: var(--muted); }

.bar { display: flex; gap: 2px; margin: 14px 0 8px; height: 34px; }
.bar-day { flex: 1 1 0; border-radius: 2px; background: var(--nodata); min-width: 2px; }
.bar-day[data-status="operational"] { background: var(--operational); }
.bar-day[data-status="degraded"] { background: var(--degraded); }
.bar-day[data-status="partialOutage"] { background: var(--partialOutage); }
.bar-day[data-status="majorOutage"] { background: var(--majorOutage); }

.bar-legend { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }

.incidents { margin-top: 40px; }
.incidents h2 { font-size: 16px; border-bottom: 1px solid var(--card-border); padding-bottom: 8px; }
.incident { padding: 10px 0; border-bottom: 1px solid var(--card-border); }
.incident-date { font-weight: 600; font-size: 14px; }
.incident-line { color: var(--muted); font-size: 13px; }
.incident-sev { font-weight: 600; }
.incident-sev[data-status="degraded"] { color: var(--degraded); }
.incident-sev[data-status="partialOutage"] { color: var(--partialOutage); }
.incident-sev[data-status="majorOutage"] { color: var(--majorOutage); }
.none { color: var(--muted); font-size: 14px; padding: 10px 0; }

.foot { margin-top: 40px; color: var(--muted); font-size: 12px; text-align: center; }