:root { --brand-gold: #eab308; --brand-dark: #0f172a; }
body { background-color: var(--brand-dark); color: #f8fafc; font-family: system-ui, sans-serif; }
.badge-open { background-color: #22c55e; color: #000; }
.badge-coming_soon { background-color: #eab308; color: #000; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; padding: 8px; }
.slot-btn { aspect-ratio: 1; border-radius: 8px; font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid transparent; }
.slot-btn.available { background-color: rgba(34, 197, 94, 0.15); color: #4ade80; border-color: rgba(34, 197, 94, 0.4); }
.slot-btn.available:hover { background-color: #22c55e; color: #000; }
.slot-btn.selected { background-color: #3b82f6 !important; color: #ffffff !important; }
.slot-btn.locked { background-color: rgba(234, 179, 8, 0.2); color: #fde047; cursor: not-allowed; }
.slot-btn.paid { background-color: rgba(239, 68, 68, 0.2); color: #fca5a5; cursor: not-allowed; text-decoration: line-through; }