:root {
  --bg: #07111d;
  --panel: #0d1c2b;
  --panel-2: #112437;
  --line: rgba(255,255,255,.11);
  --text: #f5f8fb;
  --muted: #9fb0c1;
  --cyan: #25d7e5;
  --green: #57e389;
  --orange: #ffb547;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.wallboard {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 10.5vh 1fr 3.8vh;
  padding: 0 1.25vw;
  background:
    radial-gradient(circle at 78% -20%, rgba(37,215,229,.12), transparent 35%),
    linear-gradient(145deg, #07111d, #091522 65%, #06101b);
}

.topbar { display: flex; align-items: center; justify-content: space-between; }
.brand-block { display: flex; align-items: center; gap: 1vw; }
.brand-logo {
  width: clamp(150px, 10vw, 220px);
  height: 6.2vh;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 6px 15px rgba(0,0,0,.28));
}
h1 { margin: 0; font-size: clamp(30px, 2.35vw, 54px); letter-spacing: .08em; line-height: 1; }
.brand-block p { margin: .45vh 0 0; color: var(--muted); font-size: clamp(15px, 1vw, 24px); }
.clock-block { text-align: right; font-variant-numeric: tabular-nums; }
#clock { font-size: clamp(38px, 3vw, 68px); font-weight: 760; line-height: .9; letter-spacing: .01em; }
#date { margin-top: .7vh; color: var(--muted); font-size: clamp(14px, .9vw, 21px); text-transform: uppercase; letter-spacing: .1em; }

.dashboard { min-height: 0; display: grid; grid-template-columns: minmax(0, 3.15fr) minmax(300px, 1fr); gap: 1vw; }
.map-card, .panel { border: 1px solid var(--line); box-shadow: 0 18px 60px rgba(0,0,0,.28); }
.map-card { position: relative; min-height: 0; overflow: hidden; border-radius: 1vw; background: #dce4e8; }
#traffic-map { width: 100%; height: 100%; display: block; }
.map-message {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .7vh; color: #fff; background: #142433;
  text-align: center;
}
.map-message[hidden] { display: none; }
.map-message strong { font-size: clamp(20px, 1.35vw, 30px); letter-spacing: .08em; }
.map-message span { color: var(--muted); font-size: clamp(14px, .85vw, 20px); }
.map-heading {
  position: absolute; top: 1.2vw; left: 1.2vw;
  display: flex; align-items: center; gap: .55vw;
  padding: .65vw .85vw;
  color: #fff; background: rgba(5,14,23,.88); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16); border-radius: .55vw;
  font-size: clamp(15px, .9vw, 21px); font-weight: 800; letter-spacing: .08em;
}
.live-dot { width: .65vw; height: .65vw; min-width: 10px; min-height: 10px; border-radius: 50%; background: #ff4d5f; box-shadow: 0 0 0 .35vw rgba(255,77,95,.18); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 .65vw rgba(255,77,95,0); } }
.location-pin {
  position: absolute; left: 50%; top: 53%; transform: translate(-50%, -100%);
  width: 2.3vw; height: 2.3vw; min-width: 38px; min-height: 38px;
  border-radius: 50% 50% 50% 0; rotate: -45deg;
  background: #07111d; border: 4px solid var(--cyan); box-shadow: 0 7px 18px rgba(0,0,0,.45);
  pointer-events: none;
}
.location-pin::after { content: ""; position: absolute; inset: 25%; border-radius: 50%; background: var(--cyan); }
.location-pin span {
  position: absolute; rotate: 45deg; left: 115%; top: 88%;
  padding: .3vw .5vw; border-radius: .3vw;
  background: #07111d; color: #fff; border: 2px solid var(--cyan);
  font-size: clamp(12px, .7vw, 17px); font-weight: 900; letter-spacing: .08em;
}

.sidebar { min-height: 0; display: grid; grid-template-rows: 1.35fr 1.9fr .45fr; gap: 1vw; }
.panel { background: linear-gradient(145deg, rgba(17,36,55,.96), rgba(10,24,38,.98)); border-radius: 1vw; padding: 1.25vw; overflow: hidden; }
.eyebrow { color: var(--cyan); font-weight: 800; font-size: clamp(13px, .8vw, 19px); letter-spacing: .12em; }
.weather-main { display: flex; align-items: center; gap: 1vw; margin: 1.2vh 0 1.4vh; }
.weather-icon { width: 4.1vw; height: 4.1vw; min-width: 64px; min-height: 64px; display: grid; place-items: center; border-radius: 50%; background: rgba(37,215,229,.12); color: var(--cyan); font-size: clamp(32px, 2.7vw, 58px); }
.temperature { font-size: clamp(42px, 3.2vw, 72px); font-weight: 780; line-height: .9; }
.condition { color: var(--muted); font-size: clamp(15px, .9vw, 22px); margin-top: .6vh; }
.weather-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6vw; }
.weather-details div { padding: .7vw; background: rgba(255,255,255,.045); border-radius: .5vw; }
.weather-details span, .weather-details strong { display: block; }
.weather-details span { color: var(--muted); font-size: clamp(11px, .68vw, 16px); }
.weather-details strong { margin-top: .3vh; font-size: clamp(14px, .86vw, 20px); }

.corridors ul { margin: 1.4vh 0 0; padding: 0; list-style: none; }
.corridors li { display: grid; grid-template-columns: 3.2vw 1fr; align-items: center; gap: .8vw; min-height: 5.4vh; border-bottom: 1px solid var(--line); font-size: clamp(14px, .9vw, 22px); }
.corridors li:last-child { border-bottom: 0; }
.route-badge { width: 2.25vw; height: 2.25vw; min-width: 34px; min-height: 34px; display: grid; place-items: center; margin: auto; border-radius: 42% 42% 50% 50%; color: white; background: #3268c6; border: 2px solid white; font-size: clamp(11px, .68vw, 16px); font-weight: 900; }
.route-badge.loop { width: 2.85vw; border-radius: 50%; background: #6b4ea2; font-size: clamp(8px, .52vw, 12px); }
.route-line { width: 2.1vw; height: .35vw; min-height: 5px; margin: auto; border-radius: 99px; background: var(--orange); }
.status-card { display: flex; align-items: center; }
.status-row { display: flex; align-items: center; gap: .9vw; }
.status-dot { width: .75vw; height: .75vw; min-width: 12px; min-height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px rgba(87,227,137,.65); }
.status-dot.offline { background: #ff5c6c; box-shadow: 0 0 16px rgba(255,92,108,.5); }
.status-row strong, .status-row span { display: block; }
.status-row strong { font-size: clamp(12px, .74vw, 18px); letter-spacing: .06em; }
.status-row span { margin-top: .25vh; color: var(--muted); font-size: clamp(11px, .65vw, 15px); }

footer { display: flex; align-items: center; justify-content: space-between; color: #73879a; font-size: clamp(10px, .62vw, 15px); letter-spacing: .04em; }
.footer-center { color: #9fb0c1; }

@media (max-aspect-ratio: 4/3) {
  .dashboard { grid-template-columns: 2.2fr 1fr; }
}

.map-message[hidden] {
  display: none;
}