* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #0b1020; color: #e8eefc;
  font-family: 'Segoe UI', system-ui, sans-serif;
  padding: 20px; min-height: 100vh;
}
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #1f2b47; padding-bottom: 14px; margin-bottom: 20px;
}
.title { font-size: 26px; font-weight: 700; letter-spacing: .5px; }
.meta { display: flex; gap: 18px; align-items: center; font-size: 15px; color: #9fb2d8; }
.meta .num, #clock { font-variant-numeric: tabular-nums; }
.live { color: #4ade80; }
.stale { color: #fbbf24; }
.mock { color: #93a4c8; font-style: italic; }
.loading { color: #38bdf8; }
.hidden { display: none; }

.board { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px) { .board { grid-template-columns: 1fr; } }

.column header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.column-sep h2 { color: #60a5fa; }
.column-emb h2 { color: #f472b6; }
.column h2 { font-size: 19px; }
.total { font-size: 14px; color: #7e8db3; }

.rows-head, .row {
  display: grid; grid-template-columns: 44px 1fr 110px 90px;
  gap: 8px; align-items: center; padding: 8px 12px;
}
.rows-head { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #6b7aa3; }
.rows-head .num, .row .num { text-align: right; }
.row { border-radius: 8px; margin-bottom: 6px; font-size: 17px; }
.row .name { font-weight: 600; }
.row .pedidos { font-weight: 700; font-size: 20px; text-align: right; }
.row .pct { text-align: right; font-size: 14px; color: #93a4c8; }
.row .perhour { text-align: right; }
.row .rank { text-align: center; }

/* Resumo (tiles) */
.summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  background: #12305c; border-radius: 12px; padding: 22px 24px; margin: 28px 0 8px;
}
.tile { text-align: center; border-right: 1px solid #23477e; }
.tile:last-child { border-right: none; }
.tile-label { font-size: 14px; letter-spacing: 1px; color: #b7c8e6; margin-bottom: 8px; }
.tile-val { font-size: 46px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.tile-val.novos { color: #ffffff; }
.tile-val.aseparar { color: #fbbf24; }
.tile-val.embalados { color: #4ade80; }

/* Título de seção (mês) */
.section-title {
  font-size: 20px; font-weight: 700; margin: 30px 0 12px;
  border-top: 1px solid #1f2b47; padding-top: 22px;
}
.month-info { font-size: 14px; font-weight: 400; color: #7e8db3; margin-left: 8px; }

.column-sep .row.top { background: linear-gradient(90deg, #1a2440, #131b32); }
.column-emb .row.top { background: linear-gradient(90deg, #2a1a30, #1f1526); }
.column-sep .row.rest { color: #c3cfea; }
.column-emb .row.rest { color: #c3cfea; }
.row.gold { border-left: 3px solid #fbbf24; }
.row.silver { border-left: 3px solid #cbd5e1; }
.row.bronze { border-left: 3px solid #d97706; }