:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #080e1b; color: #f4f7ff; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1800px; margin: auto; padding: 24px 40px; }
.controls { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; padding-bottom: 24px; }
.back { color: #b9c9e2; text-decoration: none; margin-right: auto; align-self: center; }
label { display: grid; gap: 7px; font-size: 13px; color: #b9c9e2; }
input, select, button { font: inherit; font-size: 16px; padding: 12px 14px; color: #fff; background: #142039; border: 1px solid #3b4a63; border-radius: 8px; }
input { width: 180px; text-transform: uppercase; }
select { max-width: 420px; }
button { cursor: pointer; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #91e5c3; outline-offset: 4px; }
.board { background: #0e1729; border: 1px solid #27344c; border-radius: 16px; padding: 32px 40px 24px; }
header { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.eyebrow { font-size: 12px; letter-spacing: 2px; font-weight: bold; color: #91e5c3; margin: 0 0 10px; }
h1 { margin: 0; font-size: clamp(36px, 5vw, 72px); letter-spacing: -2px; }
#stopTitle { color: #b9c9e2; margin: 12px 0 0; font-size: clamp(16px, 2vw, 26px); }
.clock { display: grid; gap: 8px; text-align: right; flex-shrink: 0; }
.clock time { font-size: clamp(24px, 3vw, 44px); font-variant-numeric: tabular-nums; }
.clock span { font-size: 13px; color: #b9c9e2; }
#boardStatus { color: #91e5c3; padding: 16px 0; margin: 8px 0; font-size: 14px; }
#boardStatus.warning { color: #ffc873; }
.column-head, .arrival { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.column-head { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #9eafca; padding: 16px 0; border-bottom: 1px solid #34415a; }
.column-head span:last-child { text-align: right; }
.arrival { border-bottom: 1px solid #27344c; padding: 28px 0; }
.route-number { font-size: clamp(32px, 5vw, 68px); font-weight: 800; letter-spacing: -1px; }
.plate { font-size: clamp(25px, 3vw, 44px); font-weight: 700; }
.arrival small { display: block; color: #b9c9e2; font-size: 15px; line-height: 1.5; margin-top: 7px; }
.eta { color: #91e5c3; font-size: clamp(30px, 4vw, 60px); font-weight: 700; text-align: right; white-space: nowrap; }
.eta.unavailable { color: #ffc873; font-size: clamp(20px, 2vw, 32px); white-space: normal; }
.eta small { font-size: 13px; font-weight: 400; }
.empty { color: #b9c9e2; padding: 48px 0; font-size: 22px; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; color: #9eafca; font-size: 12px; line-height: 1.7; }
footer div { display: grid; gap: 4px; }
#lastUpdated { color: #fff; font-size: 15px; }
footer p { margin: 0; }
body:fullscreen main { max-width: none; padding: 20px 36px; }
@media (max-width: 700px) {
  main { padding: 16px; } .board { padding: 24px 16px; } header { align-items: flex-start; }
  .clock span { font-size: 10px; } h1 { letter-spacing: -1px; font-size: 32px; }
  .back { width: 100%; } .stop-control { flex: 1; min-width: 180px; } select { width: 100%; max-width: 100%; }
  .column-head, .arrival { gap: 12px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .column-head { font-size: 9px; letter-spacing: 0; } .route-number { font-size: 27px; } .plate { font-size: 22px; }
  .arrival small { font-size: 12px; } .eta { font-size: 27px; } .eta small { font-size: 11px; }
  .eta.unavailable { font-size: 17px; }
}

.arrival .gps-age { color: #91e5c3; font-weight: 700; }
.arrival.old-gps .gps-age, .eta.old-estimate { color: #ffc873; }
.arrival > div { min-width: 0; }
.eta small { white-space: normal; overflow-wrap: anywhere; }
.arrival-carousel[hidden] { display: none; }
.arrival-carousel { margin: 12px 0 24px; padding: 24px 28px; border: 1px solid #3c6d68; border-radius: 12px; background: linear-gradient(120deg, #142c35, #122039); }
.carousel-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #b9c9e2; font-size: 13px; }
.carousel-controls { display: flex; gap: 8px; }
.carousel-controls button { padding: 7px 12px; font-size: 13px; }
.carousel-content { display: grid; grid-template-columns: minmax(160px, .6fr) minmax(0, 2fr); gap: 32px; align-items: center; padding: 24px 0 4px; }
.carousel-service { display: grid; gap: 8px; }
.carousel-service strong { font-size: clamp(40px, 6vw, 80px); letter-spacing: -2px; }
.carousel-service span { font-size: clamp(20px, 2.5vw, 30px); color: #b9c9e2; }
.carousel-language { color: #91e5c3; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; }
.carousel-announcement p { margin: 10px 0; }
#carouselMessage { font-size: clamp(24px, 3vw, 42px); line-height: 1.2; }
#carouselTime { display: block; font-size: clamp(32px, 5vw, 66px); line-height: 1.2; color: #91e5c3; font-variant-numeric: tabular-nums; }
#carouselTime.carousel-note { font-size: clamp(22px, 3vw, 36px); }
#carouselGps { font-size: 13px; line-height: 1.5; color: #b9c9e2; }
.arrival-carousel.old-gps #carouselTime, .arrival-carousel.old-gps #carouselGps { color: #ffc873; }
@media (max-width: 700px) {
  .arrival-carousel { padding: 16px; }
  .carousel-toolbar { flex-wrap: wrap; }
  .carousel-content { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; }
  .carousel-service { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
  .carousel-service strong { font-size: 40px; }
  .carousel-announcement { min-width: 0; overflow-wrap: anywhere; }
}

.plate > .route-number { font-size: clamp(17px, 2vw, 24px); font-weight: 600; letter-spacing: 0; color: #91e5c3; }
#carouselPlate { font-size: clamp(32px, 4.5vw, 66px); letter-spacing: -1px; overflow-wrap: anywhere; }
#carouselRoute { font-size: clamp(19px, 2.5vw, 30px); color: #91e5c3; }
@media (max-width: 700px) {
  .carousel-service { display: grid; gap: 6px; }
  #carouselPlate { font-size: 36px; }
  #carouselRoute { font-size: 21px; }
  .plate > .route-number { font-size: 17px; }
}