: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: #00e676;
  --dep: #ff1f1f;
  --screen-padding-y: 18px;
  --screen-padding-x: 20px;
  --screen-gap: 10px;
  --top-gap: 14px;
  --title-size: clamp(34px, 3.2vw, 72px);
  --sub-size: clamp(14px, 1.15vw, 18px);
  --clock-date-size: clamp(22px, 1.75vw, 36px);
  --clock-time-size: clamp(34px, 2.75vw, 64px);
  --clock-min-width: 360px;
  --clock-padding-y: 10px;
  --clock-padding-x: 14px;
  --box-radius: 18px;
  --table-head-size: clamp(20px, 1.65vw, 32px);
  --table-cell-size: clamp(26px, 2.25vw, 54px);
  --table-head-padding-y: 14px;
  --table-head-padding-x: 10px;
  --table-cell-padding-y: 12px;
  --table-cell-padding-x: 10px;
  --table-cell-line-height: 1.15;
  --num-cell-size: var(--table-cell-size);
  --route-cell-size: var(--table-cell-size);
  --time-cell-size: var(--table-cell-size);
  --dwell-cell-size: var(--table-cell-size);
  --route-cell-weight: 800;
  --num-width: 15%;
  --route-width: 43%;
  --arr-width: 14%;
  --dwell-width: 14%;
  --dep-width: 14%;
  --scroll-duration: 15s;
  --scroll-offset: -120px;
  --title-accent: var(--text);
  --header-uppercase: none;
}

* { box-sizing: border-box; }
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: var(--screen-padding-y) var(--screen-padding-x);
  gap: var(--screen-gap);
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--top-gap);
}

.title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.h1 {
  font-size: var(--title-size);
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.05;
  color: var(--title-accent);
  text-transform: var(--header-uppercase);
}

.sub {
  font-size: var(--sub-size);
  color: var(--muted);
  font-weight: 800;
}

.right-block {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.clock {
  text-align: right;
  padding: var(--clock-padding-y) var(--clock-padding-x);
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-width: var(--clock-min-width);
}

.clock .dt-line {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 14px;
  white-space: nowrap;
}

.clock .date {
  font-size: var(--clock-date-size);
  color: var(--dep);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.clock .time {
  font-size: var(--clock-time-size);
  color: var(--dep);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1.0;
}

.logout-btn a {
  display: inline-block;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
  text-decoration: none;
  font-size: 18px;
  transition: all 0.2s;
}

.logout-btn a:hover {
  background: rgba(255, 31, 31, 0.12);
  color: var(--dep);
  border-color: var(--dep);
}

.box {
  flex: 1;
  min-height: 0;
  border-radius: var(--box-radius);
  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: var(--table-head-padding-y) var(--table-head-padding-x);
  font-size: var(--table-head-size);
  font-weight: 950;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

tbody td {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  font-size: var(--table-cell-size);
  line-height: var(--table-cell-line-height);
  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: var(--num-width); }
.c-route { width: var(--route-width); }
.c-arr { width: var(--arr-width); }
.c-dwell { width: var(--dwell-width); }
.c-dep { width: var(--dep-width); }

.route-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
}

.route-text {
  white-space: nowrap;
  padding: 0 4px;
  display: inline-block;
  font-size: var(--route-cell-size);
  font-weight: var(--route-cell-weight);
  line-height: var(--table-cell-line-height);
  will-change: transform;
}

.c-num b {
  font-size: var(--num-cell-size);
  font-weight: 900;
}

.c-arr, .c-dep {
  font-size: var(--time-cell-size);
}

.c-dwell {
  font-size: var(--dwell-cell-size);
}

.route-text.scrolling {
  animation: scrollText var(--scroll-duration, 15s) linear infinite;
  animation-delay: 1.5s;
  padding-right: 40px;
}

.route-text.scrolling:hover { animation-play-state: paused; }
@keyframes scrollText {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--scroll-offset, -120px)); }
}

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

.dep {
  color: var(--dep);
  font-weight: 950;
  text-shadow: 0 0 10px rgba(255, 31, 31, .35);
}

.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: 4px;
  font-size: clamp(14px, 1.05vw, 18px);
  color: #ffb4b4;
}

.data-attribution {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 22px;
  padding: 2px 4px 0;
}

.data-attribution a {
  font-size: clamp(12px, 0.95vw, 16px);
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  opacity: 0.88;
}

.data-attribution a:hover {
  color: var(--text);
  opacity: 1;
}

.skin-cycle-btn {
  position: fixed;
  right: 14px;
  bottom: 12px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: rgba(230, 237, 243, .42);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
  z-index: 30;
}

.skin-cycle-btn:hover {
  color: rgba(230, 237, 243, .82);
  border-color: rgba(255, 255, 255, .20);
  background: rgba(255, 255, 255, .08);
}