:root{
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#22d3ee;
  --avail:#22c55e;
  --booked:#ef4444;
  --unavail:#6b7280;
  --selected:#f59e0b;
  --grid-gap:6px;
  --cell-size:36px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  background:linear-gradient(180deg,#0b1024,#0a0f1e 40%,#0a0e1b 100%);
  color:var(--text);
}

.site-header,.site-footer{
  padding:14px 16px;
  background:rgba(0,0,0,0.25);
  backdrop-filter:saturate(120%) blur(6px);
  position:sticky;
  top:0;
  z-index:10;
}
.site-footer{top:auto;bottom:0;position:static;font-size:12px;color:var(--muted)}
.site-header h1{margin:0 0 8px;font-size:20px}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.controls button{
  background:var(--card);color:var(--text);border:1px solid #1f2937;
  padding:8px 10px;border-radius:8px;cursor:pointer
}
.controls input[type=date]{
  background:var(--card);color:var(--text);border:1px solid #1f2937;
  padding:8px;border-radius:8px
}

.container{max-width:1100px;margin:16px auto;padding:0 12px}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 16px}
.legend-item{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px}
.chip{width:12px;height:12px;border-radius:3px;display:inline-block;outline:1px solid #111827}
.chip.available{background:var(--avail)}
.chip.booked{background:var(--booked)}
.chip.unavailable{background:var(--unavail)}
.chip.selected{background:var(--selected)}

.status{min-height:22px;margin-bottom:8px;font-size:14px;color:var(--muted)}

.grid{display:grid;gap:var(--grid-gap)}
.grid .row{display:grid;grid-template-columns:220px repeat(auto-fit, minmax(var(--cell-size),1fr));align-items:stretch}
.grid .row .court{
  background:var(--card);border:1px solid #1f2937;border-radius:10px;padding:8px;font-weight:600
}
.grid .row .slots{display:grid;grid-auto-flow:column;gap:var(--grid-gap)}
.cell{
  width:100%;min-width:var(--cell-size);height:var(--cell-size);
  border-radius:8px;border:1px solid #1f2937;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#cbd5e1;background:#0b1222
}
.cell.available{background:color-mix(in srgb, var(--avail) 25%, #0b1222);border-color:#14532d}
.cell.booked{background:color-mix(in srgb, var(--booked) 20%, #0b1222);border-color:#7f1d1d}
.cell.unavailable{background:color-mix(in srgb, var(--unavail) 20%, #0b1222);border-color:#1f2937}
.cell.selected{outline:2px solid var(--selected)}
.cell .time{opacity:.8;font-size:10px}

@media (max-width:700px){
  .grid .row{grid-template-columns:1fr}
  .grid .row .slots{grid-auto-flow:dense;grid-template-columns:repeat(auto-fill, minmax(32px,1fr))}
  .grid .row .court{font-size:14px}
}