:root{
  --border:#e5e7eb; --muted:#6b7280; --chip:#b91c1c; --chip-bg:#fee2e2; --chip-border:#ef4444;
  --card-bg:#fff; --row-alt:#fafafa; --row-hover:#fff7f7;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:0; padding:24px; color:#111827; background:#fff;
}

/* Apply alternating rows & hover to both tables */
#resultsTable tbody tr:nth-child(even),
#topTable tbody tr:nth-child(even){ background:var(--row-alt) }

#resultsTable tbody tr:hover,
#topTable tbody tr:hover{ background:var(--row-hover) }

/* Make plate links and rows obviously interactive */
.plate-link{ text-decoration: underline; text-underline-offset: 2px; }
.clickable-row{ cursor:pointer; }

/* ---------- Site header / nav ---------- */
.site-header{ position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid var(--border); margin:-24px -24px 24px; padding:12px 24px; }
.site-header .wrap{ max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:16px; }
.brand{ font-weight:700; text-decoration:none; color:inherit; }
.site-nav{ margin-left:auto; display:flex; gap:16px; }
.site-nav a{ text-decoration:none; color:inherit; opacity:.9; }
.site-nav a:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px; }
.site-nav a.active{ font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Layout ---------- */
.container{ max-width:1100px; margin:0 auto; }
.card{
  border:1px solid var(--border); border-radius:12px; padding:20px;
  max-width:1100px; margin:0 auto; background:var(--card-bg);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
h2{ margin:0 0 10px; font-size:18px; font-weight:600 }

/* ---------- Inputs & buttons ---------- */
.input{
  padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:#fff; min-width:220px;
}
.btn{
  appearance:none; border:1px solid var(--border); border-radius:8px;
  padding:8px 12px; background:#f9fafb; cursor:pointer; font-size:14px;
}
.btn:disabled{ opacity:.6; cursor:default }

/* ---------- Chips ---------- */
.chipbar{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:10px; margin:6px 0 14px }
.chip{
  display:flex; align-items:center; justify-content:center;
  padding:8px 10px; border:1px solid transparent; border-radius:10px; background:transparent;
  color:var(--chip); font-weight:600; cursor:pointer; user-select:none;
}
.chip:hover{ background:var(--chip-bg); border-color:var(--chip-border) }
.chip.active{ background:var(--chip-bg); border-color:var(--chip-border) }

/* ---------- Range row ---------- */
.range{ display:flex; gap:10px; align-items:center; margin-top:6px }
.range input{ padding:6px 8px; border:1px solid var(--border); border-radius:8px }

/* ---------- Tables ---------- */
table{ width:100% }
thead th{ text-align:center }
td.dt-left{ text-align:left } td.dt-center{ text-align:center }
tfoot td{ font-weight:700; border-top:2px solid var(--border) }

/* Generic table (non-DataTables) */
.data-table{ border-collapse:collapse }
.data-table tbody tr{ border-bottom:1px solid var(--border) }
.data-table tbody tr:nth-child(even){ background:var(--row-alt) }
.data-table tbody tr:hover{ background:var(--row-hover) }

/* Top Plates DataTables stripes/hover */
#topTable tbody tr:nth-child(even){ background:var(--row-alt) }
#topTable tbody tr:hover{ background:var(--row-hover) }

/* Links that act like actions (plates) */
.plate-link{ text-decoration:underline; text-underline-offset:2px; cursor:pointer; color:inherit }

/* ---------- Toolbar / meta ---------- */
.toolbar{ display:flex; gap:12px; align-items:center; justify-content:flex-end; margin:8px 0 6px }
.toolbar input[type="number"]{ width:90px; padding:6px 8px; border:1px solid var(--border); border-radius:8px }
.meta{ font-size:13px; color:var(--muted) }
.grow{ flex:1 }

/* ---------- Media panel ---------- */
.media{ margin-top:18px; border:1px solid var(--border); border-radius:12px; padding:14px }
.media-head{ display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:12px }
.media-title{ font-weight:600 }
.media-actions{ display:flex; gap:8px }
.media-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px }
.media-card{ border:1px solid var(--border); border-radius:10px; padding:10px; background:#fff }
.media-card h3{ font-size:14px; margin:0 0 8px; font-weight:600; text-align:center }
.frame{ width:100%; aspect-ratio:16/9; background:#f3f4f6; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center }
.media-card img{ max-width:100%; height:100%; object-fit:contain; display:block }
.media-empty{ color:var(--muted); font-size:13px }
.meta-plate{ font-weight:600 }
.live-frame{ width:100%; height:100%; border:0; display:block }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .chipbar{ grid-template-columns: repeat(3, minmax(0,1fr)) }
}
@media (max-width: 900px){
  body{ padding:16px }
  .site-header{ margin:-16px -16px 16px; padding:10px 16px }
  .chipbar{ grid-template-columns: repeat(2, minmax(0,1fr)) }
  .media-grid{ grid-template-columns: 1fr }
}