:root {
  color-scheme: dark;
  --night: #0b1430;
  --surface: #13204a;
  --line: #22306a;
  --ink: #f2f4fa;
  --muted: #9aa6c8;
  --gold: #f2b544;
  --green: #2ed47a;
  --amber: #ffb020;
  --red: #ff5c5c;
  --font: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-num: "Barlow Condensed", "Barlow", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); }
button, input, select {
  font: inherit;
  color: inherit;
}
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---------- TV board ---------- */
.board {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  padding: 2vh 2.5vw;
  gap: 1.6vh;
}
.board-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: end;
  gap: 3vw;
}
.tabs { display: flex; gap: 0.6vw; align-self: end; }
.tabs button {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  padding: 0.9vh 1.4vw;
  font-size: clamp(14px, 2vh, 28px);
  font-weight: 500;
  cursor: pointer;
}
.tabs button.active { background: var(--gold); border-color: var(--gold); color: var(--night); font-weight: 600; }
.board-head h1 {
  margin: 0;
  font-weight: 600;
  font-size: clamp(22px, 2.6vh, 40px);
  letter-spacing: 0.01em;
}
.board-head .folio {
  margin-top: 0.4vh;
  color: var(--muted);
  font-size: clamp(16px, 2vh, 28px);
}
.board-head .folio strong { color: var(--ink); font-weight: 500; }
.progress {
  margin-top: 1vh;
  height: 0.7vh;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  max-width: 44vw;
}
.progress > i {
  display: block;
  height: 100%;
  background: var(--gold);
  width: 0;
  transition: width 600ms ease;
}
.clock {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 5vh, 72px);
  font-weight: 500;
  line-height: 1;
}

.panel { display: flex; flex-direction: column; min-height: 0; }
.panel h2 {
  margin: 0 0 1vh;
  font-size: clamp(22px, 3.2vh, 46px);
  font-weight: 600;
}
.panel h2 span { color: var(--muted); font-weight: 400; margin-left: 0.6em; font-size: 0.8em; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Column widths: Rep, Calls, Contacts, Talk, Quotes, Policies, Premium */
col.c-rep { width: 32%; } col.c-calls { width: 9%; } col.c-contacts { width: 12%; } col.c-talk { width: 12%; }
col.c-quotes { width: 13%; } col.c-policies { width: 10%; } col.c-premium { width: 12%; }
th {
  text-align: right;
  font-weight: 500;
  color: var(--muted);
  font-size: clamp(14px, 2.2vh, 30px);
  padding: 0 0.3vw 1vh;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
}
th:first-child { text-align: left; }
th[data-sort] { cursor: pointer; }
th[data-sort].active { color: var(--gold); }
.rank {
  display: inline-block;
  min-width: 1.5em;
  margin-right: 0.35em;
  padding: 0.05em 0.3em;
  border-radius: 0.4em;
  font-family: var(--font);
  font-style: normal;
  font-weight: 600;
  font-size: 0.34em;
  line-height: 1.4;
  vertical-align: 0.9em;
  color: var(--muted);
  background: var(--line);
}
.rank.r1 { color: var(--night); background: var(--gold); }
.rank.r2 { color: var(--ink); background: #4b5a8e; }
.board-head h1 .logo { height: 1.1em; vertical-align: -0.2em; margin-right: 0.4em; }
td {
  text-align: right;
  padding: 0 0.3vw;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 7vh, 100px);
  font-weight: 500;
  line-height: 1;
  height: 15vh;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 400ms ease;
}
td:first-child {
  text-align: left;
  font-family: var(--font);
  font-size: clamp(22px, 4.6vh, 66px);
  font-weight: 600;
  text-overflow: ellipsis;
}
td.premium { color: var(--gold); font-weight: 600; }
td.zero { color: var(--muted); font-weight: 400; }
tr.sale td { animation: sale 6s ease-out 1; }
@keyframes sale {
  0% { background-color: rgba(46, 212, 122, 0.55); }
  100% { background-color: transparent; }
}
.quota {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: end;
  gap: 0.4vw;
}
.quota i {
  display: block;
  height: 1.4vh;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  width: 6vw;
}
.quota i b { display: block; height: 100%; background: var(--gold); }
.quota i.met b { background: var(--green); }

.board-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2vw;
  padding-top: 1vh;
  border-top: 1px solid var(--line);
  font-size: clamp(15px, 2.2vh, 30px);
  color: var(--muted);
  min-height: 5vh;
}
.ticker { display: flex; gap: 2.5vw; overflow: hidden; white-space: nowrap; }
.ticker .ev { color: var(--ink); }
.ticker .ev .dot { color: var(--green); margin-right: 0.4em; }
.badges { display: flex; gap: 1vw; }
.badge {
  padding: 0.4vh 0.9vw;
  border-radius: 999px;
  font-size: 0.85em;
  color: var(--night);
  background: var(--amber);
  font-weight: 600;
}
.badge.red { background: var(--red); color: var(--ink); }
.badge.quiet { background: transparent; color: var(--muted); font-weight: 400; padding: 0; }

/* ---------- simple pages (login, upload, history) ---------- */
.page { max-width: 1100px; margin: 0 auto; padding: 32px 16px 64px; }
.page h1 { font-size: 30px; font-weight: 600; margin: 0 0 6px; }
.page .sub { color: var(--muted); margin: 0 0 28px; }
.page nav a { margin-right: 18px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.card h2 { margin: 0 0 10px; font-size: 20px; font-weight: 600; }
label { display: block; color: var(--muted); margin: 10px 0 6px; }
input[type="password"], input[type="text"], input[type="date"], select {
  background: var(--night); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; min-width: 240px;
}
input:focus-visible, button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn { background: var(--gold); color: var(--night); border: 0; border-radius: 6px; padding: 10px 16px; font-weight: 600; cursor: pointer; }
.btn.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn[disabled] { opacity: 0.5; cursor: default; }
.drop {
  border: 2px dashed var(--line); border-radius: 10px; padding: 40px; text-align: center; color: var(--muted);
}
.drop.over { border-color: var(--gold); color: var(--ink); }
.ok { color: var(--green); } .warn { color: var(--amber); } .err { color: var(--red); }
.small-table td, .small-table th { font-size: 16px; height: auto; padding: 8px 10px; font-family: var(--font); }
.small-table td.n { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.login { max-width: 420px; margin: 18vh auto 0; padding: 0 16px; }

@media (prefers-reduced-motion: reduce) {
  tr.sale td { animation: none; background-color: rgba(46, 212, 122, 0.35); }
  .progress > i { transition: none; }
}
@media (max-width: 900px) {
  .board-head { grid-template-columns: 1fr; }
  .board { height: auto; }
  td { height: auto; padding: 10px 6px; font-size: 26px; }
}