:root {
  color-scheme: dark;
  --bg: #0e1014; --panel: #171a20; --panel2: #1d2129;
  --text: #f2f4f7; --muted: #9aa3af; --border: #303642;
  --accent: #5ba7ff; --warning: #f3c74d; --danger: #ff4d57;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif; }
body { display: flex; min-height: 100vh; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); background: #111318; }
h1 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.subtitle { margin: .2rem 0 0; color: var(--muted); font-size: .8rem; }
.status { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .82rem; white-space: nowrap; }
.status-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--warning); box-shadow: 0 0 10px rgba(243,199,77,.8); }
main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .65rem 1rem; border-bottom: 1px solid var(--border); background: var(--panel); }
.filter { border: 1px solid var(--border); border-radius: 999px; background: var(--panel2); color: var(--text); padding: .45rem .8rem; cursor: pointer; }
.filter.active { border-color: var(--accent); background: rgba(91,167,255,.14); }
.legend { margin-left: auto; display: flex; flex-wrap: wrap; gap: .85rem; color: var(--muted); font-size: .78rem; }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #f5f7fa; display: inline-block; }
.legend-dot.delayed { box-shadow: 0 0 8px 3px rgba(243,199,77,.8); }
.legend-dot.major { box-shadow: 0 0 8px 3px rgba(255,77,87,.9); }
.map-wrap { position: relative; flex: 1; min-height: 560px; }
#map { position: absolute; inset: 0; background: #12151a; }
.vehicle-marker { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 1px 4px rgba(0,0,0,.65); }
.vehicle-marker.tram { background: #56c271; }
.vehicle-marker.metro { background: #5ba7ff; }
.vehicle-marker.vline { background: #a87be8; }
.vehicle-marker.delayed { box-shadow: 0 0 11px 5px rgba(243,199,77,.9), 0 1px 4px rgba(0,0,0,.65); }
.vehicle-marker.major { box-shadow: 0 0 12px 6px rgba(255,77,87,.95), 0 1px 4px rgba(0,0,0,.65); }
.vehicle-card { position: absolute; z-index: 1000; right: 1rem; top: 1rem; width: min(320px, calc(100% - 2rem)); padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(23,26,32,.96); backdrop-filter: blur(8px); }
.close-card { position: absolute; top: .45rem; right: .6rem; border: 0; background: transparent; color: var(--muted); font-size: 1.4rem; cursor: pointer; }
.vehicle-kind { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.vehicle-card h2 { margin: .25rem 2rem .8rem 0; font-size: 1.1rem; }
.vehicle-card dl { margin: 0; }
.vehicle-card dl div { display: grid; grid-template-columns: 90px 1fr; gap: .6rem; padding: .35rem 0; border-top: 1px solid rgba(255,255,255,.06); }
.vehicle-card dt { color: var(--muted); font-size: .78rem; }
.vehicle-card dd { margin: 0; font-size: .86rem; }
footer { padding: .7rem 1rem; border-top: 1px solid var(--border); background: #111318; color: var(--muted); font-size: .72rem; display: flex; justify-content: space-between; gap: 1rem; }
footer p { margin: 0; }
@media (max-width: 760px) {
  .topbar { align-items: flex-start; }
  .legend { width: 100%; margin-left: 0; }
  .map-wrap { min-height: 520px; }
  footer { flex-direction: column; }
}
/* v0.2.0 — Swan Hill service */
.status-dot.static { background: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,.55); }
.status-dot.error { background: var(--danger); box-shadow: 0 0 10px rgba(255,77,87,.9); }
.vehicle-key { display: inline-block; width: .65rem; height: .65rem; background: #fff; border: 1px solid #717784; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.vehicle-key.vline-key { border-radius: 1px; }
.vehicle-marker.vline { width: 12px; height: 12px; border-radius: 1px; background: #fff; border: 2px solid #656b75; box-shadow: 0 1px 4px rgba(0,0,0,.75); }
.vehicle-marker.vline.delayed { box-shadow: 0 0 11px 5px rgba(243,199,77,.95), 0 1px 4px rgba(0,0,0,.75); }
.vehicle-marker.vline.major { box-shadow: 0 0 12px 6px rgba(255,77,87,.95), 0 1px 4px rgba(0,0,0,.75); }

/* v0.2.1 — station information popups */
.station-popup-shell .leaflet-popup-content-wrapper {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(23,26,32,.98);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0,0,0,.38);
}
.station-popup-shell .leaflet-popup-content { margin: 0; width: auto !important; }
.station-popup-shell .leaflet-popup-tip { background: rgba(23,26,32,.98); }
.station-popup-shell .leaflet-popup-close-button { color: #fff !important; font-size: 22px !important; top: 4px !important; right: 6px !important; z-index: 5; }
.station-popup { width: 100%; max-width: 360px; }
.station-photo-link { display: block; background: #0d0f13; }
.station-photo { display: block; width: 100%; height: 150px; object-fit: cover; background: #0d0f13; }
.station-photo-missing { display: grid; place-items: center; color: var(--muted); font-size: .78rem; }
.station-photo-credit {
  padding: .3rem .7rem;
  background: #111318;
  color: var(--muted);
  font-size: .62rem;
  line-height: 1.25;
  border-bottom: 1px solid var(--border);
}
.station-popup-body { padding: .8rem .9rem .9rem; }
.station-popup-kicker { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; }
.station-popup h3 { margin: .15rem 0 .7rem; font-size: 1.05rem; }
.station-info-row, .station-info-block { border-top: 1px solid rgba(255,255,255,.07); padding-top: .55rem; margin-top: .55rem; }
.station-info-row > span, .station-info-block > span { display: block; margin-bottom: .25rem; color: var(--muted); font-size: .68rem; }
.station-info-row strong { display: block; font-size: .79rem; line-height: 1.35; font-weight: 500; }
.station-line-row { display: grid; grid-template-columns: 52px 1fr; gap: .5rem; padding: .18rem 0; font-size: .76rem; line-height: 1.35; }
.station-line-row strong { color: #fff; font-weight: 600; }
.station-line-row span { color: #d7dbe2; }
.station-lines-empty { color: var(--muted); font-size: .75rem; }
@media (max-width: 520px) {
  .station-photo { height: 130px; }
  .station-line-row { grid-template-columns: 1fr; gap: .1rem; }
}


/* v0.2.2 — horizontal station card */
.station-popup-shell .leaflet-popup-content-wrapper {
  border-radius: 4px;
}
.station-popup {
  width: 360px;
  max-width: 360px;
}
.station-popup-top {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 150px;
}
.station-photo-column {
  min-width: 0;
  background: #0d0f13;
  border-right: 1px solid var(--border);
}
.station-photo-link { display: block; height: 118px; }
.station-photo {
  width: 100%;
  height: 118px;
  object-fit: cover;
}
.station-photo-credit {
  min-height: 32px;
  padding: .28rem .45rem;
  border-bottom: 0;
  font-size: .56rem;
  line-height: 1.2;
}
.station-summary {
  padding: .8rem .85rem;
  min-width: 0;
}
.station-summary .station-popup-kicker {
  margin-top: 0;
}
.station-summary h3 {
  margin: .15rem 0 .7rem;
  font-size: 1.08rem;
}
.station-summary .station-info-row {
  margin-top: .45rem;
  padding-top: .5rem;
}
.station-lines-section {
  border-top: 1px solid var(--border);
  padding: .65rem .85rem .75rem;
}
.station-lines-section > span {
  display: block;
  margin-bottom: .3rem;
  color: var(--muted);
  font-size: .68rem;
}
.station-info-block { display: none; }
@media (max-width: 520px) {
  .station-popup { width: 300px; max-width: 300px; }
  .station-popup-top { grid-template-columns: 120px minmax(0, 1fr); min-height: 132px; }
  .station-photo-link, .station-photo { height: 100px; }
  .station-photo-credit { min-height: 32px; }
  .station-line-row { grid-template-columns: 52px 1fr; gap: .45rem; }
}


/* v0.2.3 — station card credit removal + full-height photo */
.station-photo-link,
.station-photo {
  height: 150px;
}
.station-photo-credit { display: none !important; }
@media (max-width: 520px) {
  .station-photo-link, .station-photo { height: 132px; }
}

/* v0.3.0 — live feed status */
.status-dot.live { background: #4dd17a; box-shadow: 0 0 10px rgba(77,209,122,.85); }