:root {
  color-scheme: dark;
  --public-bg: #09080b;
  --public-surface: #18161b;
  --public-surface-soft: #211e25;
  --public-border: rgb(255 255 255 / 9%);
  --public-border-strong: rgb(255 255 255 / 15%);
  --public-text: #f7f4f9;
  --public-muted: #aaa4af;
  --public-accent: #c7aaff;
  --public-accent-ink: #1b112c;
  --public-success: #80dbaa;
  font-family: Inter, Geist, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--public-bg); }
body { margin: 0; background: var(--public-bg); color: var(--public-text); font-size: 16px; line-height: 1.55; }
body::before { position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 50% -8%, rgb(199 170 255 / 12%), transparent 32%); content: ""; pointer-events: none; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgb(199 170 255 / 65%); outline-offset: 3px; }
.public-skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 14px; transform: translateY(-150%); border-radius: 10px; background: var(--public-accent); color: var(--public-accent-ink); font-weight: 800; }
.public-skip-link:focus { transform: translateY(0); }

.public-brand { display: flex; min-height: 96px; align-items: center; justify-content: center; gap: 12px; padding: 20px; }
.public-brand img, .public-brand-mark { display: grid; width: 45px; height: 45px; place-items: center; object-fit: cover; border: 1px solid rgb(199 170 255 / 26%); border-radius: 14px; background: linear-gradient(145deg, var(--public-accent), #8c67d2); color: var(--public-accent-ink); font-size: .78rem; font-weight: 900; }
.public-brand strong { max-width: 260px; overflow: hidden; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.public-main { width: min(100% - 32px, 920px); margin: 0 auto; padding: 20px 0 64px; }
.public-footer { display: flex; min-height: 110px; align-items: center; justify-content: center; gap: 18px; padding: 24px; border-top: 1px solid var(--public-border); color: var(--public-muted); font-size: .76rem; text-align: center; }
.public-footer a { color: var(--public-accent); font-weight: 750; }

.booking-intro { max-width: 650px; margin: 26px auto 38px; text-align: center; }
.public-eyebrow { margin: 0 0 9px; color: var(--public-accent); font-size: .69rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.booking-intro h1, .confirmation-card h1, .public-state-card h1 { margin: 0 0 12px; font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.04; letter-spacing: -.055em; }
.booking-intro > p:last-child, .confirmation-card > p, .public-state-card > p { margin: 0; color: var(--public-muted); }
.booking-shell { overflow: hidden; border: 1px solid var(--public-border); border-radius: 26px; background: linear-gradient(145deg, rgb(27 24 30 / 98%), rgb(20 18 23 / 98%)); box-shadow: 0 32px 90px rgb(0 0 0 / 30%); }
.booking-progress { display: grid; margin: 0; padding: 18px 24px; border-bottom: 1px solid var(--public-border); list-style: none; grid-template-columns: repeat(5, 1fr); }
.booking-progress li { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; color: #716c75; }
.booking-progress li::after { position: absolute; top: 50%; right: -18%; width: 36%; height: 1px; background: var(--public-border); content: ""; }
.booking-progress li:last-child::after { display: none; }
.booking-progress span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--public-border-strong); border-radius: 50%; font-size: .7rem; font-weight: 800; }
.booking-progress small { font-size: .7rem; font-weight: 700; }
.booking-progress li.is-current { color: var(--public-accent); }
.booking-progress li.is-current span, .booking-progress li.is-complete span { border-color: var(--public-accent); background: var(--public-accent); color: var(--public-accent-ink); }
.booking-progress li.is-complete::after { background: rgb(199 170 255 / 40%); }
.booking-step { min-height: 430px; padding: clamp(28px, 5vw, 50px); }
.step-heading { margin-bottom: 28px; }
.step-heading > span { display: block; margin-bottom: 7px; color: var(--public-accent); font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.step-heading h2 { margin: 0 0 6px; font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -.035em; }
.step-heading p { margin: 0; color: var(--public-muted); font-size: .82rem; }

.service-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.service-choice { display: flex; min-height: 94px; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; border: 1px solid var(--public-border); border-radius: 16px; background: var(--public-surface-soft); color: var(--public-text); cursor: pointer; text-align: left; transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.service-choice:hover { transform: translateY(-1px); border-color: rgb(199 170 255 / 35%); }
.service-choice[aria-pressed="true"] { border-color: var(--public-accent); background: rgb(199 170 255 / 11%); box-shadow: inset 0 0 0 1px rgb(199 170 255 / 24%); }
.service-choice span { display: flex; min-width: 0; flex-direction: column; }
.service-choice strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-choice small { margin-top: 5px; color: var(--public-muted); font-size: .75rem; }
.service-choice b { color: var(--public-accent); font-size: .86rem; white-space: nowrap; }

.barber-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.barber-choice, .barber-assigned { display: flex; min-height: 92px; align-items: center; gap: 14px; padding: 17px; border: 1px solid var(--public-border); border-radius: 16px; background: var(--public-surface-soft); color: var(--public-text); }
.barber-choice { cursor: pointer; }
.barber-choice:hover, .barber-choice[aria-pressed="true"] { border-color: var(--public-accent); background: rgb(199 170 255 / 11%); }
.barber-assigned > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
.barber-assigned small { color: var(--public-muted); font-size: .68rem; }
.barber-assigned b { color: var(--public-success); }
.public-barber-avatar { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 15px; background: rgb(199 170 255 / 13%); color: var(--public-accent); font-weight: 850; }
.barber-continue { width: 100%; margin-top: 14px; }

.date-choice-grid { display: grid; overflow-x: auto; padding: 4px 3px 13px; grid-auto-columns: 78px; grid-auto-flow: column; gap: 9px; scrollbar-color: rgb(199 170 255 / 30%) transparent; }
.date-choice { display: flex; min-height: 108px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid var(--public-border); border-radius: 15px; background: var(--public-surface-soft); color: var(--public-text); cursor: pointer; }
.date-choice small, .date-choice span { color: var(--public-muted); font-size: .66rem; font-weight: 750; text-transform: uppercase; }
.date-choice strong { margin: 5px 0 2px; font-size: 1.45rem; }
.date-choice[aria-pressed="true"] { border-color: var(--public-accent); background: var(--public-accent); color: var(--public-accent-ink); }
.date-choice[aria-pressed="true"] small, .date-choice[aria-pressed="true"] span { color: #4f3c6f; }
.public-back { min-height: 44px; margin-top: 24px; padding: 8px 3px; border: 0; background: transparent; color: var(--public-muted); cursor: pointer; font-size: .78rem; font-weight: 750; }
.public-back:hover { color: var(--public-accent); }

.public-live { min-height: 44px; margin-bottom: 16px; color: var(--public-muted); font-size: .78rem; }
.public-slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.public-slot { min-height: 50px; border: 1px solid var(--public-border-strong); border-radius: 12px; background: var(--public-surface-soft); color: var(--public-text); cursor: pointer; font-size: .78rem; font-weight: 760; }
.public-slot:hover, .public-slot[aria-pressed="true"] { border-color: var(--public-accent); background: rgb(199 170 255 / 12%); color: var(--public-accent); }

.public-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.public-field { display: flex; flex-direction: column; gap: 7px; }
.public-field label { color: #ded9e2; font-size: .74rem; font-weight: 750; }
.public-field input { width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--public-border-strong); border-radius: 12px; outline: 0; background: #121014; color: var(--public-text); }
.public-field input:focus { border-color: var(--public-accent); box-shadow: 0 0 0 3px rgb(199 170 255 / 11%); }
.public-field-error { color: #ff9eaa; font-size: .7rem; }
.public-toggle { display: flex; min-height: 64px; align-items: center; gap: 12px; padding: 11px 13px; grid-column: 1 / -1; border: 1px solid var(--public-border); border-radius: 13px; background: rgb(255 255 255 / 2%); cursor: pointer; }
.public-toggle-input { position: absolute; opacity: 0; }
.public-toggle > span { position: relative; width: 42px; height: 24px; flex: 0 0 42px; border-radius: 999px; background: #4f4a54; transition: background .15s ease; }
.public-toggle > span::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; content: ""; transition: transform .15s ease; }
.public-toggle-input:checked + span { background: var(--public-accent); }
.public-toggle-input:checked + span::after { transform: translateX(18px); }
.public-toggle-input:focus-visible + span { outline: 3px solid rgb(199 170 255 / 60%); outline-offset: 3px; }
.public-toggle b { display: flex; flex-direction: column; font-size: .78rem; }
.public-toggle small { margin-top: 2px; color: var(--public-muted); font-size: .67rem; font-weight: 500; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.booking-submit-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; }
.booking-submit-bar .public-back { margin: 0; }
.public-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 11px 20px; border: 1px solid transparent; border-radius: 12px; cursor: pointer; font-weight: 800; }
.public-button-primary { background: var(--public-accent); color: var(--public-accent-ink); box-shadow: 0 10px 30px rgb(167 121 249 / 18%); }
.public-button-secondary { border-color: var(--public-border-strong); background: var(--public-surface-soft); color: var(--public-text); }
.public-alert { margin: 22px 28px 0; padding: 14px 16px; border: 1px solid rgb(255 142 155 / 25%); border-radius: 12px; background: rgb(255 142 155 / 7%); color: #ffc0c7; font-size: .75rem; }
.public-alert ul { margin: 5px 0 0; padding-left: 18px; }
.public-empty { padding: 34px 20px; border: 1px dashed var(--public-border-strong); border-radius: 15px; color: var(--public-muted); text-align: center; }
.public-empty p { margin: 5px 0 0; }

.confirmation-card, .public-state-card { max-width: 620px; margin: 30px auto; padding: clamp(30px, 6vw, 54px); border: 1px solid var(--public-border); border-radius: 28px; background: linear-gradient(145deg, rgb(28 25 31 / 98%), rgb(20 18 23 / 98%)); text-align: center; box-shadow: 0 32px 90px rgb(0 0 0 / 30%); }
.confirmation-check, .public-state-icon { display: grid; width: 68px; height: 68px; margin: 0 auto 24px; place-items: center; border-radius: 21px; background: rgb(128 219 170 / 11%); color: var(--public-success); font-size: 1.75rem; }
.public-state-icon { background: rgb(199 170 255 / 10%); color: var(--public-accent); }
.confirmation-details { margin: 30px 0 20px; text-align: left; }
.confirmation-details div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--public-border); }
.confirmation-details dt { color: var(--public-muted); font-size: .75rem; }
.confirmation-details dd { margin: 0; font-size: .82rem; font-weight: 750; text-align: right; }
.reminder-notice { margin: 20px 0; padding: 12px; border-radius: 11px; background: rgb(199 170 255 / 8%); color: var(--public-accent); font-size: .74rem; font-weight: 750; }
.confirmation-actions { display: grid; gap: 10px; margin-top: 24px; }

@media (max-width: 640px) {
  .public-brand { min-height: 78px; padding: 14px; }
  .public-brand img, .public-brand-mark { width: 39px; height: 39px; border-radius: 12px; }
  .public-main { width: min(100% - 24px, 920px); padding-top: 10px; }
  .booking-intro { margin: 17px 6px 26px; text-align: left; }
  .booking-intro h1 { font-size: 2.25rem; }
  .booking-shell { border-radius: 20px; }
  .booking-progress { padding: 13px 10px; }
  .booking-progress li { gap: 0; }
  .booking-progress li::after { right: -24%; width: 48%; }
  .booking-progress span { width: 31px; height: 31px; }
  .booking-progress small { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0, 0, 0, 0); }
  .booking-step { min-height: 470px; padding: 25px 16px 30px; }
  .service-choice-grid, .barber-choice-grid, .public-form-grid { grid-template-columns: 1fr; }
  .service-choice { min-height: 86px; }
  .public-slot-grid { grid-template-columns: repeat(3, 1fr); }
  .public-toggle { grid-column: auto; }
  .booking-submit-bar { align-items: stretch; flex-direction: column-reverse; }
  .booking-submit-bar .public-button { width: 100%; }
  .booking-submit-bar .public-back { width: 100%; }
  .public-alert { margin: 16px 16px 0; }
  .confirmation-card, .public-state-card { margin: 16px auto; padding: 32px 20px; border-radius: 21px; }
  .confirmation-details div { align-items: flex-start; flex-direction: column; gap: 3px; }
  .confirmation-details dd { text-align: left; }
  .public-footer { align-items: center; flex-direction: column; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}