:root {
  --bg: #0b0f14;
  --text: #e6edf3;
  --muted: rgba(230, 237, 243, .70);
  --border: rgba(255, 255, 255, .10);
  --panel: rgba(255, 255, 255, .04);
  --head: rgba(255, 255, 255, .07);
  --arr: rgba(40, 200, 120, 1);
  --dep: rgba(255, 90, 90, 1);
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow: hidden;
}

.screen {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 26px;
  box-sizing: border-box;
  gap: 14px;
}

.top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.title-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.h1 {
  font-size: clamp(34px, 3.2vw, 72px);
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.05;
}

.sub {
  font-size: clamp(14px, 1.15vw, 18px);
  color: var(--muted);
  font-weight: 800;
}

.clock {
  text-align: right;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  min-width: 220px;
}

.clock .date {
  font-size: clamp(16px, 1.2vw, 22px);
  color: var(--dep);
  font-weight: 800;
}

.clock .time {
  font-size: clamp(30px, 2.7vw, 60px);
  color: var(--dep);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.table-title {
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  font-size: clamp(18px, 1.35vw, 26px);
  font-weight: 900;
  letter-spacing: .2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.table-title .hint {
  color: var(--muted);
  font-weight: 800;
  font-size: clamp(14px, 1.1vw, 18px);
}

.box {
  flex: 1;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .02);
  display: flex;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

thead th {
  background: var(--head);
  padding: 16px 14px;
  font-size: clamp(16px, 1.2vw, 22px);
  text-align: center;
  border-bottom: 1px solid var(--border);
}

tbody td {
  padding: 18px 14px;
  font-size: clamp(22px, 1.9vw, 44px);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .08);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ширины колонок */
.c-num {
  width: 16%;
}

.c-route {
  width: 44%;
}

.c-arr {
  width: 13%;
}

.c-dwell {
  width: 14%;
}

.c-dep {
  width: 13%;
}

.arr {
  color: var(--arr);
  font-weight: 950;
}

.dep {
  color: var(--dep);
  font-weight: 950;
}

.dwell {
  color: rgba(230, 237, 243, .92);
  font-weight: 900;
}

.empty {
  color: rgba(230, 237, 243, .35);
  font-weight: 800;
}

.empty-message {
  padding: 22px !important;
  font-size: 24px !important;
  color: rgba(230, 237, 243, .75) !important;
  text-align: center !important;
}

.err {
  margin-top: 6px;
  font-size: clamp(14px, 1.05vw, 18px);
  color: #ffb4b4;
}