:root {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f5f7fb;
  background: #0b0f14;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top, #182130, #0b0f14 50%); min-height: 100vh; }
.wrap { width: min(1100px, 92%); margin: 0 auto; padding: 50px 0 80px; }
header { margin-bottom: 30px; }
h1 { font-size: clamp(2rem, 5vw, 4rem); margin: 6px 0 10px; }
h2 { margin: 8px 0 14px; }
p { color: #aab5c3; line-height: 1.5; }
.eyebrow { color: #7dd3fc; font-weight: 800; letter-spacing: .14em; font-size: .78rem; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.court, .lookup, .public-card {
  background: rgba(18, 25, 35, .9);
  border: 1px solid #263241;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 16px 45px rgba(0,0,0,.25);
}
.court.recording { border-color: #7f1d1d; }
.court-top { display: flex; align-items: center; gap: 8px; color: #93a4b8; font-size: .78rem; font-weight: 800; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; }
.recording .status-dot { background: #ef4444; box-shadow: 0 0 0 5px rgba(239,68,68,.12); }
.btn {
  appearance: none; border: 0; border-radius: 12px; padding: 11px 15px;
  text-decoration: none; cursor: pointer; font-weight: 800;
  background: #273445; color: white; display: inline-block;
}
.btn.primary { background: #0284c7; }
.btn.danger { background: #991b1b; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.code, .big-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; }
.code { color: #fde68a; margin: 8px 0; }
.big-code { font-size: clamp(1.2rem, 6vw, 2rem); font-weight: 900; color: #fde68a; word-break: break-all; }
.lookup { margin-top: 18px; }
.lookup form { display: flex; gap: 10px; }
input {
  flex: 1; min-width: 0; background: #0d141d; border: 1px solid #344456;
  border-radius: 12px; color: white; padding: 12px 14px;
}
dialog { border: 0; padding: 0; border-radius: 22px; background: transparent; color: white; width: min(480px, 92%); }
dialog::backdrop { background: rgba(0,0,0,.72); }
.modal-body { position: relative; background: #121923; border: 1px solid #2b394a; border-radius: 22px; padding: 26px; text-align: center; }
.modal-body img { display: block; width: 260px; max-width: 80%; margin: 18px auto; background: white; padding: 8px; border-radius: 14px; }
.close { position: absolute; right: 12px; top: 8px; border: 0; background: none; color: white; font-size: 2rem; cursor: pointer; }
.public-card { width: min(720px, 92%); margin: 60px auto; }
.meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0; }
.meta div { background: #0d141d; padding: 14px; border-radius: 14px; }
.meta strong, .meta span { display: block; }
.meta span { margin-top: 6px; color: #cbd5e1; word-break: break-all; }
.pending { padding: 18px; border-radius: 14px; background: #1a2230; color: #cbd5e1; margin-top: 20px; }
video { width: 100%; border-radius: 14px; margin: 18px 0; background: black; }

@media (max-width: 800px) {
  .grid { grid-template-columns: 1fr; }
  .meta { grid-template-columns: 1fr; }
}