:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07111f;
  color: #edf4ff;
  --bg-card: #0b1d33dd;
  --border: #23415f;
  --muted: #8fa9c7;
  --text-soft: #bfd0e6;
  --accent: #66e6c6;
  --bad: #fb7185;
  --ok: #2dd4bf;
}
* { box-sizing: border-box; }
html { min-width: 0; overflow-x: hidden; }
body { margin: 0; background: radial-gradient(circle at top, #16375e, #07111f 45%); min-height: 100vh; overflow-x: hidden; }
main { width: min(1120px, 100%); margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
.hero > div { min-width: 0; }
h1 { margin: 0; font-size: clamp(2rem, 8vw, 4.5rem); line-height: 0.95; letter-spacing: -0.06em; text-wrap: balance; }
h2 { margin: 0; }
p { margin: 0.35rem 0; color: var(--text-soft); overflow-wrap: anywhere; }
small { color: var(--muted); }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 700; }
button, select, .button-link { min-height: 44px; border: 1px solid #315477; border-radius: 14px; background: #0d2138; color: #edf4ff; padding: 12px 14px; font: inherit; }
button, .button-link { background: linear-gradient(135deg, #2dd4bf, #3b82f6); color: #04101f; font-weight: 800; border: 0; box-shadow: 0 12px 32px #0007; text-align: center; text-decoration: none; white-space: nowrap; }
button:disabled { opacity: 0.65; }
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 10px 0 16px; }
.summary article, .fare-card, .status-row, .filters, .health-card, .status-panel, .source-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 18px 60px #0004; }
.summary article { padding: 16px; min-height: 120px; min-width: 0; }
.summary span, .health-card span { display: block; color: var(--muted); font-size: 0.82rem; margin-bottom: 8px; }
.summary strong, .health-card strong { display: block; font-size: clamp(1.35rem, 5vw, 1.7rem); overflow-wrap: anywhere; }
.summary p { font-size: 0.9rem; line-height: 1.4; }
.filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 12px; margin-bottom: 14px; }
.filters label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 0.78rem; min-width: 0; }
.filters select { width: 100%; }
.status { display: grid; gap: 8px; margin-bottom: 14px; }
.status-row { display: grid; grid-template-columns: auto minmax(110px, 1fr) minmax(90px, auto) minmax(120px, auto); gap: 10px; align-items: center; padding: 12px 14px; font-size: 0.92rem; color: inherit; text-decoration: none; min-width: 0; }
.status-row > span:not(.status-dot), .status-row time { color: var(--muted); overflow-wrap: anywhere; }
.status-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--ok); box-shadow: 0 0 18px var(--ok); }
.status-row.bad { border-color: #a54655; background: #371321dd; }
.status-row.bad .status-dot { background: var(--bad); box-shadow: 0 0 18px var(--bad); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fare-card { padding: 16px; min-width: 0; }
.fare-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; }
.fare-top strong { font-size: clamp(1.7rem, 8vw, 2rem); letter-spacing: -0.04em; }
.fare-top span { color: var(--accent); font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.fare-card h2 { margin: 10px 0 10px; font-size: 1.35rem; }
dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; }
dl div { min-width: 0; }
dt { color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; }
dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.fare-card footer { border-top: 1px solid #203b58; padding-top: 12px; margin-top: 12px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
a { color: var(--accent); font-weight: 700; }
.fare-card footer a, .status-footer a { display: inline-flex; min-height: 44px; align-items: center; }
.empty { grid-column: 1 / -1; padding: 24px; text-align: center; }
.health-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 10px 0 14px; }
.health-card { padding: 16px; min-width: 0; }
.health-card.ok, .source-card.ok { border-color: #1d8a6d; }
.health-card.bad, .source-card.bad { border-color: #a54655; background: #371321dd; }
.status-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 18px; margin-bottom: 14px; }
.origin-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.origin-pills span { display: inline-flex; min-height: 34px; align-items: center; border: 1px solid #315477; border-radius: 999px; padding: 6px 10px; color: #edf4ff; background: #0d2138; font-weight: 800; }
.origin-pills .has-fares { border-color: #1d8a6d; }
.origin-pills .no-fares { border-color: #514f65; color: #93a4b8; background: #0b1727; }
.source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.source-card { padding: 16px; min-width: 0; }
.source-card__top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.source-card__top span { border-radius: 999px; padding: 5px 8px; background: #102b47; color: var(--accent); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; }
.source-card.bad .source-card__top span { color: #fecdd3; background: #5e1b2a; }
.source-card strong { display: block; font-size: 1.6rem; margin: 10px 0 4px; }
.status-footer { padding: 18px 0 8px; }
@media (max-width: 900px) {
  .summary, .health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  main { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .hero { align-items: stretch; flex-direction: column; }
  button, .button-link { width: 100%; }
  .summary, .cards, .health-grid, .source-grid, .status-panel { grid-template-columns: 1fr; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px; position: sticky; top: 0; z-index: 2; backdrop-filter: blur(14px); }
  .status-row { grid-template-columns: auto 1fr; align-items: start; }
  .status-row > span:not(.status-dot), .status-row time { grid-column: 2; }
  .fare-card footer { align-items: flex-start; flex-direction: column; }
  dl { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  main { padding-left: 10px; padding-right: 10px; }
  .filters { grid-template-columns: 1fr; }
  h1 { font-size: clamp(1.8rem, 16vw, 2.5rem); }
}