* { box-sizing: border-box; margin: 0; padding: 0; font-family: "Segoe UI", Arial, sans-serif; }

html, body {
  width: 1920px;
  height: 1080px;
  background: transparent;
  overflow: hidden;
}

#canvas {
  width: 1920px;
  height: 1080px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #0b1220;
  position: relative;
}

.hidden { display: none !important; }

/* DEBUG */
#debugBox {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  z-index: 9999;
  min-width: 260px;
  line-height: 1.35;
  white-space: pre-line;
}

/* TOPBAR */
#topbar {
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: #f3f6fb;
  border-bottom: 1px solid #dbe3ef;
  box-shadow: 0 2px 10px rgba(20,40,80,0.08);
}

#logoWrap { width: 120px; }
#logo { height: 52px; }

#topFields {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  font-size: 15px;
}

.field { white-space: nowrap; }
.label { font-weight: 700; margin-right: 6px; }

/* trends */
.trend {
  margin-left: 6px;
  font-weight: 900;
  font-size: 14px;
  opacity: 0.9;
}
.trend.up { color: #0a7a0a; }
.trend.down { color: #d10000; }
.trend.flat { color: #334155; }
.trend.diag { color: #0b3a52; }

/* TITLE */
#titleWrap { border-bottom: 1px solid #e5e7eb; }

#titleRow {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 17px;
  font-weight: 800;
}

#subTitleRow {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  font-size: 13px;
  color: #334155;
  background: #ffffff;
}

#metaLeft, #metaRight {
  display: flex;
  align-items: center;
  gap: 14px;
}
#metaRight { margin-left: auto; }

.metaLabel { font-weight: 800; color: #0f172a; }
.metaItem { white-space: nowrap; }

/* STATUS PILL */
.pill {
  min-width: 90px;
  height: 22px;
  border-radius: 999px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: 0.6px;
  font-size: 12px;
  border: 1px solid transparent;
}
.pill.waiting { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.pill.live    { background:#ecfeff; color:#155e75; border-color:#a5f3fc; }
.pill.done    { background:#ecfdf5; color:#166534; border-color:#bbf7d0; }

/* DONE BANNER */
#raceDoneBanner {
  height: 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 900;
  background: #111827;
  color: #ffffff;
  border-bottom: 3px solid #7cc120;
}
.bannerTitle { font-size: 20px; letter-spacing: 0.5px; }
.bannerSub { font-size: 12px; opacity: 0.9; margin-top: 2px; }

#mainBlank { flex: 1; }

/* BOTTOM INFO */
#bottomInfo {
  height: 34px;
  background: #1f4f6d;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 14px;
}
#arrivalsLeft { flex: 1; }
#arrivalsMid { flex: 1; text-align: center; }
#velocityRight { flex: 1; text-align: right; }

/* TABLE HEADER */
#table { width: 100%; }

#thead {
  height: 38px;
  display: grid;
  grid-template-columns: 80px 380px 380px 360px 280px 200px;
  background: #7cc120;
  color: #ffffff;
  font-weight: 900;
  font-size: 15px;
  align-items: center;
  padding-left: 10px;
}
.th { padding-left: 10px; }

/* latest ticker bar */
.latestBar {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  background: #0b1324;
  color: #ffffff;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.latestLabel { font-weight: 900; letter-spacing: 0.2px; opacity: 0.95; }
#latestText { font-weight: 800; opacity: 0.95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@keyframes latestPulse {
  0% { filter: brightness(1.0); }
  40% { filter: brightness(1.35); }
  100% { filter: brightness(1.0); }
}
.latestBar.pulse { animation: latestPulse 900ms ease-in-out 0s 2; }

/* SCROLL WINDOW */
#scrollWindow {
  height: 250px;
  overflow: hidden;
  position: relative;
  background: #ffffff;
}

.noRows {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #64748b;
  font-size: 16px;
  letter-spacing: 0.2px;
}

/* BODY ROWS */
#tbody {
  will-change: transform;
  transform: translateY(0);
}

/* rows */
.row {
  display: grid;
  grid-template-columns: 80px 380px 380px 360px 280px 200px;
  height: 34px;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  padding-left: 10px;
}

.row:nth-child(even) { background: #f5f7fa; }

.cell {
  padding-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell:nth-child(5) { color: #0a7a0a; font-weight: 900; }
.cell:last-child { font-weight: 900; color: #d10000; }

@keyframes flashGlow {
  0% { filter: brightness(1.15); }
  40% { filter: brightness(1.35); }
  100% { filter: brightness(1.0); }
}
.row.flash {
  outline: 2px solid rgba(124, 193, 32, 0.9);
  background: #f0ffe6 !important;
  animation: flashGlow 700ms ease-in-out 0s 4;
}

.row.top5 { background: #fff6cc !important; }

/* DARK THEME */
.theme-dark { background: #0f172a; color: #f8fafc; }
.theme-dark #topbar { background:#0b1324; border-color:#334155; box-shadow:0 2px 10px rgba(0,0,0,0.35); }
.theme-dark #subTitleRow { background:#0f172a; color:#94a3b8; border-bottom:1px solid #334155; }
.theme-dark .metaLabel { color:#e2e8f0; }
.theme-dark #titleWrap { border-color:#334155; }
.theme-dark #bottomInfo { background:#0b3a52; }
.theme-dark #thead { background:#65a30d; }
.theme-dark #scrollWindow { background:#0f172a; }
.theme-dark .row { border-color:#334155; }
.theme-dark .row:nth-child(even) { background:#1e293b; }
.theme-dark .noRows { color:#94a3b8; }
.theme-dark .row.top5 { background:#3b2f00 !important; }
.theme-dark .row.flash { background:#163014 !important; outline-color:rgba(124,193,32,0.8); }
.theme-dark .latestBar { background:#111827; }

/* LAYOUT SWITCHING */
.layout-single #table { width: 100%; }

.layout-dual.safe-wide #table { width: 1500px; margin: 0 auto; }
.layout-dual.safe-tight #table { width: 1300px; margin: 0 auto; }

.layout-dual.safe-wide #thead,
.layout-dual.safe-wide .row {
  grid-template-columns: 70px 320px 330px 320px 260px 200px;
}

.layout-dual.safe-tight #thead,
.layout-dual.safe-tight .row {
  grid-template-columns: 70px 280px 300px 300px 230px 170px;
}