:root {
  color-scheme: dark;
  --page: #080709; --panel: #151318; --raised: #201b27; --input: #100d14;
  --ink: #f6f2fa; --muted: #b9aec4; --line: #393040; --mint: #bc9aff;
  --accent-ink: #190c2d; --accent-hover: #d4bdff; --focus: #cfafff;
  --green: #69daba; --amber: #f4ca7c; --orange: #ffb18c; --danger: #ffa4b0;
  --green-bg: #133a35; --amber-bg: #3e3020; --orange-bg: #422f2a; --red-bg: #422636;
  --quiet: #4a3d51; --hero-wash: #211532; --shadow: #00000051; --backdrop: #08060bd6;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --page: #f8f5fc; --panel: #ffffff; --raised: #f0e9f9; --input: #fcfaff;
    --ink: #251633; --muted: #574763; --line: #d7cbe2; --mint: #6834a4;
    --accent-ink: #fff; --accent-hover: #512585; --focus: #713db1;
    --green: #176e5b; --amber: #75500d; --orange: #904626; --danger: #9b2745;
    --green-bg: #daf3e9; --amber-bg: #fbefce; --orange-bg: #ffebdf; --red-bg: #fce6eb;
    --quiet: #ded2e8; --hero-wash: #f0e5fc; --shadow: #38234a15; --backdrop: #25163397;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #f8f5fc; --panel: #ffffff; --raised: #f0e9f9; --input: #fcfaff;
  --ink: #251633; --muted: #574763; --line: #d7cbe2; --mint: #6834a4;
  --accent-ink: #fff; --accent-hover: #512585; --focus: #713db1;
  --green: #176e5b; --amber: #75500d; --orange: #904626; --danger: #9b2745;
  --green-bg: #daf3e9; --amber-bg: #fbefce; --orange-bg: #ffebdf; --red-bg: #fce6eb;
  --quiet: #ded2e8; --hero-wash: #f0e5fc; --shadow: #38234a15; --backdrop: #25163397;
}
:root { background: var(--page); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif }
:focus-visible { outline-color: var(--focus) }
.header { background: var(--page); height: 72px; gap: clamp(18px, 4vw, 54px) }
.header nav a.active, .summary strong, .service-name, .metric-row strong, .detail-metrics strong, .stats b { color: var(--ink) }
.header nav a { font-weight: 550 }
.brand { font-size: 24px; white-space: nowrap }
.brand-sub { color: var(--muted); letter-spacing: .085em; border-radius: 6px; margin-left: 2px }
.theme-button {
  min-height: 38px; display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 7px 11px;
  border-radius: 9px; font-size: 12px; font-weight: 600;
}
.theme-button span:first-child { color: var(--mint); font-size: 18px; line-height: 1 }
.theme-button:hover { border-color: var(--mint) }
.hero {
  border-radius: 22px; border: 1px solid var(--line); margin: 32px 0 20px;
  padding: clamp(28px, 5vw, 54px); gap: clamp(25px, 6vw, 90px); grid-template-columns: minmax(0, 1fr) minmax(220px, 290px);
  background: radial-gradient(ellipse at 5% 12%, var(--hero-wash), transparent 78%), var(--panel);
}
.hero h1 { font-size: clamp(42px, 6.15vw, 78px); letter-spacing: -.073em; line-height: .99; margin-bottom: 17px }
.hero h1 em { color: var(--mint) }
.hero p { max-width: 50ch; font-size: 15px }
.hero .eyebrow { margin-bottom: 19px }
.eyebrow, .cycle-card .eyebrow, .axis, .caption, .availability, .card-bottom small { color: var(--muted) }
.live-dot { background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 16%, transparent) }
.cycle-card { background: var(--input); border-radius: 15px; box-shadow: 0 9px 24px var(--shadow) }
.summary-grid { margin-bottom: 29px }
.summary { padding: 16px 19px; gap: 5px }
.summary:hover, .service-card:hover { border-color: var(--mint) }
.summary.operational .summary-dot { color: var(--green) }
.summary.slow .summary-dot { color: var(--amber) }
.summary.degraded .summary-dot { color: var(--orange) }
.summary.unavailable .summary-dot { color: var(--danger) }
.service-card { border-radius: 16px; box-shadow: 0 7px 20px var(--shadow) }
.service-symbol, .count, .tag, .icon-button:hover, .tabs button.active { color: var(--mint); background: var(--raised); border-color: var(--line) }
.service-name:hover, .text-button, .back, .compare-check:hover { color: var(--mint) }
.icon-button { color: var(--muted) }
.icon-button.is-favorite { color: var(--amber) }
.badge { white-space: normal; flex-shrink: 1; color: var(--ink); background: var(--raised); font-size: 11px; font-weight: 650 }
.badge.operational, .badge.ok { color: var(--green); background: var(--green-bg) }
.badge.slow { color: var(--amber); background: var(--amber-bg) }
.badge.degraded { color: var(--orange); background: var(--orange-bg) }
.badge.unavailable, .badge.fail { color: var(--danger); background: var(--red-bg) }
.badge.blocked, .badge.maintenance, .badge.unknown { color: var(--muted); background: var(--quiet) }
.metric-row, .card-bottom, .compare-bar, .explain-grid, .admin-test { border-color: var(--line) }
.card-status .latency, .availability b, .metric-row small, .stats span, th { color: var(--ink) }
.quick-percentiles { font-size: 11px; margin: 10px 0 0; font-variant-numeric: tabular-nums }
.days .no-data { background: var(--quiet) }
.days .good { background: var(--green) }
.days .warn { background: var(--amber) }
.days .bad { background: var(--danger) }
.days-key { color: var(--muted) }
.days-key::first-letter { color: var(--quiet) }
input, select, textarea, .search, pre, .empty { color: var(--ink); background: var(--input); border-color: var(--line) }
.search input { background: transparent }
.search input::placeholder, input::placeholder { color: var(--muted) }
.button { background: var(--mint); border-color: var(--mint); color: var(--accent-ink) }
.button:hover { background: var(--accent-hover); color: var(--accent-ink) }
.button.secondary { background: var(--raised); border-color: var(--line); color: var(--ink) }
.button.danger, .notice.error { background: var(--red-bg); border-color: var(--danger); color: var(--danger) }
.notice { background: var(--raised); border-color: var(--line); color: var(--ink) }
code, .empty-mark { color: var(--mint) }
.modal-backdrop { background: var(--backdrop) }
.modal, .compare-bar { background: var(--panel) }
.chart .grid { stroke: var(--line) }
.chart text { fill: var(--muted) }
.chart .line-mean { stroke: var(--mint) }
.chart .line-p95 { stroke: var(--green) }
.legend span:first-child { color: var(--mint) }
.legend span:nth-child(2) { color: var(--green) }
.quick-add { margin-bottom: 22px }
.quick-add fieldset { display: grid; gap: 16px; border: 0; padding: 0; min-inline-size: 0; margin: 0 }
.quick-add p { margin-bottom: 0 }
.quick-add .check { margin: 0 }
.quick-add .section-title { margin-bottom: 0 }
@media (max-width: 640px) {
  .header { height: auto; padding: 12px 18px 0; gap: 10px 12px; flex-wrap: wrap }
  .header nav { order: 3; width: 100%; min-height: 37px; gap: 23px }
  .header nav a { align-self: stretch }
  .brand { font-size: 21px; gap: 6px }
  .brand svg { width: 27px; height: 27px }
  .brand-sub { font-size: 8px }
  .hero { margin-top: 20px; padding: 24px 19px; grid-template-columns: 1fr; gap: 22px }
  .hero h1 { font-size: 49px }
  .hero p { font-size: 14px }
  .cycle-card { padding: 15px }
  .summary-grid { margin-bottom: 22px }
  .service-card { padding: 16px }
  .days { gap: 1px }
  .quick-add .section-title, main > .section-title { flex-wrap: wrap }
}

.brand svg { stroke: var(--mint) }
.brand-sub { border-color: var(--line); color: var(--mint) }