* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0f172a;
  color: #e2e8f0;
}
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}
h1 { margin-bottom: 0.3rem; }
.card {
  background: #111827;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 16px;
  margin: 14px 0;
}
.month-title {
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: capitalize;
}
.grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.weekday {
  color: #94a3b8;
  font-size: 0.85rem;
  text-align: center;
  padding: 4px 0;
}
.day {
  min-height: 58px;
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0b1220;
  color: #e2e8f0;
  padding: 8px;
  text-align: left;
}
.day.empty {
  border-style: dashed;
  opacity: 0.4;
}
.day .num {
  font-weight: 700;
  display: inline-block;
}
.day.bookable {
  cursor: pointer;
  border-color: #0ea5e9;
  background: #082f49;
}
.day.bookable:hover { border-color: #38bdf8; }
.day .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-radius: 999px;
  background: #22c55e;
  vertical-align: middle;
}
.day.selected-day {
  border-color: #22c55e;
  background: #052e1b;
}
.day.booked {
  border-color: #7f1d1d;
  background: #2b0b0b;
}
.time-choices,
.service-choices {
  display: grid;
  gap: 8px;
}
.time-btn,
.service-btn {
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0b1220;
  color: #e2e8f0;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}
.time-btn.selected,
.service-btn.selected {
  border-color: #22c55e;
  background: #052e1b;
}
.time-btn.booked {
  border-color: #7f1d1d;
  background: #2b0b0b;
}
.time-btn small,
.service-btn small {
  display: block;
  margin-top: 4px;
  color: #cbd5e1;
}
label { display: block; margin-bottom: 10px; }
input {
  width: 100%;
  margin-top: 4px;
  border: 1px solid #334155;
  background: #020617;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 10px;
}
.primary-btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  background: #22c55e;
  color: #052e1b;
  font-weight: 700;
  cursor: pointer;
}
.primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.status { min-height: 1.2rem; margin-top: 10px; }
.bookings { margin: 0; padding-left: 18px; }