:root{--tile:#0f253f;--border:#1e3a5f;--text:#e6f0ff;--muted:#7fa0c5;--ok:#15b097;
--soldBg:#0b3b2e;--soldBorder:#1c7a60;--pendBg:#3b300b;--pendBorder:#7a641c}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:.5rem}
.ck{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.tile{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:.6rem;
  font-weight:700;letter-spacing:.2px;background:var(--tile);color:var(--text);border:1px solid var(--border);user-select:none;transition:transform .06s ease, box-shadow .16s ease}
.tile.available{cursor:pointer}
.ck:checked + .tile.available{outline:2px solid var(--ok);box-shadow:0 0 0 3px rgba(21,176,151,.22)}
.tile.unavail{cursor:not-allowed;color:#cdd9e8}
.tile.unavail.sold{background:var(--soldBg);border-color:var(--soldBorder)}
.tile.unavail.pending{background:var(--pendBg);border-color:var(--pendBorder);color:#f2d987}
.tile.unavail.sold::after{content:'🔒';position:absolute;top:6px;right:8px;font-size:14px;opacity:.95}
.tile.unavail.pending::after{content:'⏳';position:absolute;top:6px;right:8px;font-size:14px;opacity:.95}
@media (max-width:520px){.grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:.4rem}.tile{min-height:40px}}
.notice{padding:.5rem .75rem;border-radius:.6rem;margin:.5rem 0;border:1px solid var(--border);background:#0b1a2a}
.notice.warn{background:#2d210a;border-color:#7a641c;color:#f2d987}
.notice.ok{background:#0b2a22;border-color:#1c7a60;color:#9be8cf}