:root{
  --bg:#05162f;
  --bg2:#0d2d5d;
  --text:#edf4ff;
  --muted:#9fb4d3;
  --line:rgba(140,175,220,.28);
  --thead:#0a2243;
  --row:#0c2a4e;
  --row-alt:#0b2545;
  --ok:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --bus:#a855f7;
  --cancel:#f87171;
  --arrived:#34d399;
}

*{box-sizing:border-box}

html, body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:"Segoe UI", "SF Pro Text", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1600px 760px at 15% -10%, var(--bg2) 0%, var(--bg) 56%, #031024 100%);
}

body{
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto;
}

.wallHeader{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:rgba(3,14,34,.86);
}

.brandBlock h1{
  margin:0;
  font-size:clamp(20px, 2.4vw, 34px);
  line-height:1.1;
  font-weight:900;
  letter-spacing:.01em;
}

.sub{
  margin-top:4px;
  color:var(--muted);
  font-size:clamp(12px, 1.2vw, 18px);
}

.legend{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid transparent;
  padding:4px 10px;
  font-weight:800;
  font-size:clamp(11px, .9vw, 14px);
  line-height:1;
}

.status.ok{background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.45); color:#bbf7d0}
.status.warn{background:rgba(245,158,11,.2); border-color:rgba(245,158,11,.45); color:#fde68a}
.status.bad{background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.45); color:#fecaca}
.status.bus{background:rgba(168,85,247,.22); border-color:rgba(168,85,247,.45); color:#e9d5ff}
.status.cancelled{background:rgba(248,113,113,.22); border-color:rgba(248,113,113,.45); color:#ffe4e6}
.status.arrived{background:rgba(52,211,153,.22); border-color:rgba(52,211,153,.45); color:#ccfbf1}

.metaBlock{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
}

.metaItem{
  font-size:clamp(12px, 1.1vw, 17px);
  font-weight:700;
  white-space:nowrap;
}

.metaItem.muted{
  color:var(--muted);
}

.viewport{
  min-height:0;
  overflow:auto;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:var(--thead);
  color:#d5e2f7;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:clamp(11px, .9vw, 15px);
  padding:12px 12px;
  border-bottom:1px solid var(--line);
}

tbody td{
  border-bottom:1px solid rgba(140,175,220,.16);
  padding:10px 12px;
  vertical-align:top;
  font-size:clamp(14px, 1.25vw, 22px);
}

tbody tr:nth-child(odd) td{background:var(--row)}
tbody tr:nth-child(even) td{background:var(--row-alt)}

.trainCell{
  font-weight:900;
}

.routeLine{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:clamp(11px, .95vw, 15px);
  font-weight:600;
}

.delayCell{
  font-weight:900;
}

.nextCell{
  font-size:clamp(13px, 1.05vw, 17px);
}

.nextCell .eta{
  color:var(--muted);
  font-size:clamp(11px, .95vw, 15px);
  margin-top:2px;
}

.messageCell{
  font-size:clamp(13px, 1.05vw, 17px);
}

.stationList{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:clamp(12px, 1vw, 16px);
}

.stationList .time{
  color:var(--muted);
  margin-left:6px;
}

.footer{
  padding:7px 12px;
  border-top:1px solid var(--line);
  background:rgba(3,14,34,.9);
  color:var(--muted);
  font-size:clamp(11px, .95vw, 14px);
}

@media (max-width: 1080px){
  .wallHeader{
    flex-direction:column;
  }
  .metaBlock{
    align-items:flex-start;
  }
}