/* DM Sans, SIL Open Font License 1.1; license: /fonts/OFL-DM-Sans.txt. Locally hosted. */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/dm-sans-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/dm-sans-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}




:root { color-scheme: dark; --bg: #080808; --ink: #f4f3ef; --muted: #9b9b98; --line: #343432; --soft-line: #252523; --sans: 'DM Sans', Arial, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.6 var(--sans); -webkit-font-smoothing: antialiased; isolation: isolate; }
/* Composited, slow contour movement; the booking interface stays still. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(ellipse at 50% 48%, rgb(8 8 8 / .83) 0%, rgb(8 8 8 / .68) 44%, rgb(8 8 8 / .18) 100%), url('/topography.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .48;
  transform-origin: center;
  animation: topography-drift 44s ease-in-out infinite;
  will-change: transform;
}
@keyframes topography-drift {
  0%, 100% { transform: translate3d(-1.4%, -1%, 0) rotate(-.8deg) scale(1.1, 1.12); }
  50% { transform: translate3d(1.4%, 1%, 0) rotate(.8deg) scale(1.16, 1.07); }
}
body:has(.background-motion-toggle[data-paused="true"])::before { animation-play-state: paused; }
.background-motion-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 0; font-size: inherit; color: inherit; white-space: nowrap; }
.background-motion-toggle:hover { color: #fff; }
@media (max-width: 760px) {
  .footer > span:last-child { flex-wrap: wrap; }
  .background-motion-toggle { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; transform: none; will-change: auto; }
  .background-motion-toggle { display: none; }
}
button, input, textarea, select { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; background: none; transition: color .18s, background .18s, border-color .18s; }
button:disabled { opacity: .38; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
h1,h2,h3,p,dl,dd,ol { margin: 0; }
h1,h2,h3 { font-family: var(--sans); }
a { color: inherit; text-underline-offset: 4px; }
svg { flex-shrink: 0; }
::selection { color: #080808; background: #eae9e5; }
.wrap { width: min(1160px, calc(100% - 80px)); margin-inline: auto; }
.app { min-height: 100vh; }
.demo-bar { border-bottom: 1px solid var(--soft-line); color: #8d8d89; font-size: 10px; }
.demo-inner { min-height: 30px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.demo-inner > span:first-child { display: flex; align-items: center; gap: 8px; }
.live-dot { width: 4px; height: 4px; background: #a2a29b; border-radius: 50%; }
.header { min-height: 108px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 14px; padding: 0; text-align: left; }
.brand-icon { width: 52px; height: 52px; flex-shrink: 0; }
.brand-icon img, .summary-monogram img { display: block; height: 100%; width: 100%; object-fit: contain; }
.brand-wordmark { display: flex; flex-direction: column; font-size: 25px; font-weight: 650; letter-spacing: -.8px; line-height: 1.05; }
.brand-wordmark small { margin-top: 9px; font-size: 8px; font-weight: 400; letter-spacing: 3.3px; color: var(--muted); }
.header nav { display: flex; align-items: center; gap: 24px; font-size: 11px; }
.header nav a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: #b2b2ae; }
.header nav a:hover, .header nav button:hover, .header .nav-active { color: white; }
.header nav button { color: #93938e; padding: 8px 0; border-bottom: 1px solid transparent; }
.header .nav-active { border-color: #eee; }
.staff-header { flex-wrap: wrap; padding-block: 24px; }
.staff-header nav { flex-wrap: wrap; }
.hero { padding: 56px 0 44px; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.eyebrow { font-size: 9px; font-weight: 500; letter-spacing: 2.1px; color: #9b9b94; }
.hero .eyebrow { margin-bottom: 17px; }
h1 { font-size: clamp(34px, 4.5vw, 54px); font-weight: 450; line-height: 1.13; letter-spacing: -2px; }
h2 { font-size: 26px; line-height: 1.25; font-weight: 450; letter-spacing: -.8px; }
h3 { font-size: 14px; font-weight: 500; }
h2[tabindex]:focus { outline: 0; }
.page-description { font-size: 12px; color: var(--muted); margin-top: 17px; }
.hero-meta { display: flex; align-items: center; gap: 14px; padding-bottom: 4px; }
.meta-icon { color: #777772; }
.hero-meta > div { display: flex; flex-direction: column; gap: 5px; }
.hero-meta span:not(.meta-icon) { color: var(--muted); font-size: 11px; }
.hero-meta strong { font-size: 20px; font-weight: 450; }
.hero-meta i { font-size: 11px; font-weight: 400; font-style: normal; color: #92928b; margin-left: 4px; }
.booking-layout { display: grid; grid-template-columns: minmax(0, 1fr) 306px; gap: 66px; align-items: start; }
.booking-card { min-width: 0; }
.next-appointment { min-height: 91px; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 0; border-top: 1px solid #bab9b1; border-bottom: 1px solid var(--line); }
.next-appointment > div { display: flex; flex-direction: column; gap: 8px; }
.next-appointment .eyebrow { font-size: 8px; letter-spacing: 1.6px; }
.next-appointment strong { font-size: 15px; font-weight: 450; }
.next-appointment button { flex-shrink: 0; }
.steps { display: grid; grid-template-columns: 1fr 1fr; list-style: none; padding: 0; gap: 30px; margin: 26px 0 36px; }
.steps li { border-bottom: 1px solid var(--line); padding: 14px 0 17px; }
.steps li.current { border-color: #eee; }
.steps button { display: flex; align-items: center; gap: 12px; padding: 0; text-align: left; width: 100%; }
.step-number { font-size: 12px; font-weight: 450; color: #777770; min-width: 21px; }
.step-label { display: flex; flex-direction: column; gap: 2px; }
.step-label strong { color: #9b9b93; font-size: 12px; font-weight: 450; }
.step-label small { color: #77776f; font-size: 9px; }
.current .step-label strong, .current .step-number, .completed .step-number { color: #efeee7; }
.step-connector { display: none; }
.card-body { padding: 0; }
.step-content { animation: appear .18s ease-out; }
@keyframes appear { from { opacity: .3; } to { opacity: 1; } }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 26px; }
.section-heading .eyebrow { display: none; }
.section-description { color: #96968f; font-size: 11px; margin-top: 9px; }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 46px; border-radius: 2px; font-size: 11px; font-weight: 500; line-height: 1.4; padding: 13px 19px; text-decoration: none; }
.primary { background: #eeede7; border: 1px solid #eeede7; color: #111; }
.primary:hover:not(:disabled) { background: white; border-color: white; }
.secondary { border: 1px solid #65655c; background: transparent; color: #d7d7ce; }
.secondary:hover:not(:disabled) { border-color: #ddd; background: #151512; }
.text-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 7px 0; color: #babbb3; font-size: 10px; text-decoration: none; }
.text-button:hover { color: white; }
.icon-button { width: 33px; height: 33px; padding: 0; display: inline-grid; place-items: center; color: #b2b2aa; border: 1px solid #3a3a35; border-radius: 2px; flex-shrink: 0; }
.icon-button:hover:not(:disabled) { border-color: #8e8e86; }
.card-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-top: 26px; margin-top: 28px; border-top: 1px solid var(--line); }
.step-hint { font-size: 10px; color: #8f8f87; }
.step-hint strong { font-weight: 500; color: #ddd; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 24px 0 18px; }
.calendar-toolbar > div:first-child { display: flex; align-items: center; gap: 9px; font-size: 12px; text-transform: capitalize; }
.calendar-toolbar svg { color: #92928b; }
.calendar-controls { display: flex; align-items: center; gap: 12px; }
.date-picker input { width: 124px; padding: 6px 2px; background: transparent; border: 0; border-bottom: 1px solid #55554d; font-size: 10px; }
.week-arrows { display: flex; gap: 9px; }
.week-arrows button { display: grid; place-items: center; width: 26px; height: 30px; padding: 0; }
.date-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); gap: 0; }
.date-grid button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 15px 1px 13px; border-bottom: 2px solid transparent; }
.date-grid button > span { color: #989890; font-size: 10px; text-transform: capitalize; }
.date-grid button strong { font-size: 25px; line-height: 1.1; font-weight: 450; font-variant-numeric: tabular-nums; letter-spacing: -.6px; }
.date-grid button small { font-size: 8px; color: #828279; }
.date-grid button:hover:not(:disabled) { background: #161613; }
.date-grid button.selected { background: #1a1a16; border-bottom-color: #f2f1e8; }
.date-grid button.selected > span, .date-grid button.selected small { color: #d7d7ce; }
.time-toolbar { margin: 30px 0 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.time-toolbar h3 { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.time-toolbar h3 span { color: #828279; font-weight: 400; font-size: 10px; }
.period-switch { display: flex; gap: 17px; }
.period-switch button { display: flex; align-items: center; gap: 5px; font-size: 9px; padding: 6px 0; border-bottom: 1px solid transparent; color: #8c8c83; }
.period-switch button.active { color: #e9e9df; border-color: #c7c7bd; }
.time-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.time-grid button { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 43px; padding: 9px 1px; font-size: 12px; font-variant-numeric: tabular-nums; border: 1px solid #3a3a34; border-radius: 2px; color: #c8c8bd; }
.time-grid button:hover { border-color: #b9b9ac; background: #161613; }
.time-grid button.selected { background: #ebeae2; color: #13130f; border-color: #ebeae2; }
.skeleton-time { min-height: 43px; background: #171714; animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .35; } }
.empty-times { grid-column: 1/-1; padding: 30px 15px; text-align: center; border-top: 1px solid var(--soft-line); border-bottom: 1px solid var(--soft-line); }
.empty-times > svg { margin-bottom: 10px; color: #8b8b81; }
.empty-times strong { display: block; font-size: 12px; font-weight: 450; }
.empty-times p { font-size: 11px; color: var(--muted); margin-top: 7px; }
.calendar-note { display: flex; align-items: center; gap: 7px; margin-top: 19px; font-size: 9px; color: #84847b; }
.summary-column { position: sticky; top: 25px; border-left: 1px solid var(--line); padding-left: 34px; }
.summary-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.summary-heading .eyebrow { font-size: 8px; letter-spacing: 1.6px; }
.summary-progress { font-size: 9px; color: #87877e; }
.summary-brand { display: flex; align-items: center; gap: 12px; padding: 28px 0; }
.summary-monogram { width: 44px; height: 44px; flex-shrink: 0; }
.summary-brand > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.summary-brand strong { font-size: 17px; font-weight: 550; letter-spacing: -.5px; overflow-wrap: anywhere; }
.summary-brand span:not(.summary-monogram) { font-size: 10px; color: #92928a; }
.summary-service { display: flex; justify-content: space-between; gap: 10px; padding: 0 0 22px; border-bottom: 1px solid var(--line); }
.summary-service > div { display: flex; flex-direction: column; gap: 5px; }
.summary-service strong { font-weight: 450; font-size: 12px; white-space: nowrap; }
.summary-service span { font-size: 10px; color: #92928a; }
.summary-details { display: flex; flex-direction: column; gap: 21px; padding: 24px 0; }
.summary-details > div { display: grid; grid-template-columns: 65px 1fr; gap: 13px; }
.summary-details dt { display: flex; align-items: center; gap: 7px; color: #93938a; font-size: 10px; }
.summary-details dt svg { width: 14px; }
.summary-details dd { font-size: 11px; text-align: right; color: #d6d6cc; }
.summary-details dd.pending-value { color: #83837a; }
.selected-status { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #b6b6a9; margin-bottom: 24px; }
.selected-status button { margin-left: auto; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.receipt-total { padding-top: 24px; border-top: 1px solid #74746a; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.receipt-total > div { display: flex; flex-direction: column; gap: 4px; }
.receipt-total span { font-size: 11px; }
.receipt-total small { font-size: 9px; color: #8c8c81; }
.receipt-total strong { font-size: 30px; font-weight: 450; letter-spacing: -1px; white-space: nowrap; }
.payment-note { display: flex; align-items: center; gap: 7px; color: #8f8f85; font-size: 9px; margin-top: 22px; }
.availability-card { border-top: 1px solid var(--line); margin-top: 29px; padding-top: 24px; }
.availability-heading { display: flex; gap: 8px; align-items: center; color: #b9b9ae; }
.availability-heading h3 { font-size: 11px; font-weight: 450; }
.opening-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 17px 0 11px; }
.opening-days span { font-size: 9px; text-align: center; color: #62625a; padding-bottom: 7px; border-bottom: 1px solid #252521; }
.opening-days span.open { color: #bbbbae; border-color: #8a8a7e; }
.availability-card p { display: flex; justify-content: space-between; font-size: 10px; color: #adada1; }
.availability-card p span { color: #77776c; font-size: 9px; }
.demo-footnote { display: flex; gap: 7px; margin-top: 26px; font-size: 9px; color: #8d8d81; }
.demo-footnote svg { margin-top: 2px; }
.contact-form label, .settings-grid label, .confirmation-tools label { display: block; font-size: 11px; margin-bottom: 23px; color: #c6c6bc; }
input:not([type=checkbox]), textarea, select { width: 100%; min-width: 0; background: #11110f; border: 1px solid #4a4a40; border-radius: 2px; padding: 13px 12px; margin-top: 8px; font-size: 12px; color: #eee; }
input::placeholder, textarea::placeholder { color: #79796f; }
textarea { resize: vertical; }
label small { display: block; color: #8c8c82; font-size: 9px; margin-top: 7px; }
.required-mark, .optional-mark { color: #858579; font-size: 9px; margin-left: 5px; }
.character-count { text-align: right; }
.selected-appointment { display: flex; align-items: center; gap: 13px; padding: 20px 0; margin-bottom: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.selected-appointment > div { display: flex; flex-direction: column; gap: 5px; }
.selected-appointment strong { font-size: 12px; font-weight: 450; }
.selected-appointment span { font-size: 11px; color: var(--muted); }
.selected-appointment button { margin-left: auto; }
.inline-note { display: flex; gap: 9px; align-items: flex-start; color: #9c9c91; font-size: 10px; }
.inline-note svg { margin-top: 2px; }
.message { display: flex; gap: 10px; align-items: center; padding: 16px 0; margin-bottom: 24px; border-block: 1px solid #6d6255; font-size: 12px; color: #e8d4ba; }
.message button, .message a { margin-left: auto; color: #eee; font-size: 11px; }
.success-card { max-width: 740px; margin-inline: auto; border-block: 1px solid var(--line); padding: 40px 0; }
.success-icon { margin-bottom: 20px; color: #dfdfd5; }
.success-card h2 { margin: 14px 0; font-size: 34px; }
.success-card > p { color: var(--muted); font-size: 12px; }
.confirmation-id { display: flex; justify-content: space-between; gap: 20px; padding: 21px 0; margin-top: 20px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.confirmation-id strong { color: #d6d6c9; letter-spacing: 1px; font-weight: 450; }
.success-details { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 26px 0; }
.success-details > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.success-details svg { margin-bottom: 5px; color: var(--muted); }
.success-details small { font-size: 8px; letter-spacing: 1.5px; color: var(--muted); }
.success-details strong { font-size: 12px; font-weight: 450; }
.success-details span { font-size: 11px; color: var(--muted); }
.success-buttons, .confirmation-links { display: flex; flex-wrap: wrap; gap: 13px 22px; align-items: center; margin-top: 23px; }
.confirmation-tools { border-block: 1px solid var(--line); padding: 27px 0; margin-top: 26px; }
.confirmation-tools > p { font-size: 11px; color: var(--muted); margin: 10px 0 19px; }
.confirmation-tools label { margin-bottom: 0; }
.confirmation-tools input { font-size: 10px; }
.subtle-note { color: #8e8e81; font-size: 10px; margin-top: 20px; }
.shop-contact { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; padding: 45px 0 24px; margin-top: 80px; border-top: 1px solid #737369; }
.contact-intro h2 { margin-top: 17px; font-size: 35px; }
.contact-intro > p:last-child { color: var(--muted); font-size: 12px; margin-top: 13px; }
.contact-links > a { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.contact-links > a:first-child { padding-top: 0; }
.contact-links > a > svg:last-child { margin-left: auto; }
.contact-links > a > svg:first-child { color: #929285; }
.contact-links span { display: flex; flex-direction: column; gap: 7px; font-size: 16px; }
.contact-links small { font-size: 8px; letter-spacing: 1.5px; color: var(--muted); }
.shop-gallery { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; padding-top: 30px; }
.shop-gallery img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 36px; padding-block: 28px; border-top: 1px solid var(--line); }
.footer-brand { font-size: 13px; font-weight: 500; letter-spacing: -.3px; }
.footer-brand small { font-size: 8px; color: #858579; font-weight: 400; margin-left: 12px; letter-spacing: 1px; }
.footer > span:last-child { display: flex; align-items: center; gap: 13px; color: #8c8c80; font-size: 9px; }
.footer i { display: inline-block; height: 3px; width: 3px; background: #646457; }
.footer a { text-decoration: none; }
.footer a:hover { color: #eee; }
.admin-gate, .manage-reservation { padding-block: 55px; max-width: 760px; margin-inline: auto; }
.admin-gate .eyebrow, .manage-reservation .eyebrow { margin-bottom: 17px; }
.admin-gate > p:not(.eyebrow) { margin: 25px 0; color: var(--muted); }
.admin-gate > a { margin-right: 22px; }
.admin-demo-note { padding: 20px 0 0; font-size: 11px; color: var(--muted); }
.manage-reservation > .text-button { margin-bottom: 30px; }
.manage-reservation > h1 { margin-bottom: 30px; }
.manage-details { display: flex; gap: 20px; padding: 28px 0; margin-bottom: 25px; border-block: 1px solid var(--line); }
.manage-details p { font-size: 12px; color: var(--muted); margin: 12px 0; }
.cancel-confirm p { margin-top: 10px; font-size: 12px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 35px; margin-bottom: 38px; }
.stats > div { display: flex; flex-direction: column; padding: 21px 0; border-top: 1px solid #747469; border-bottom: 1px solid var(--line); }
.stats > div > span { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.stats strong { font-size: 32px; font-weight: 450; letter-spacing: -.9px; margin: 15px 0 7px; }
.stats small { color: #89897d; font-size: 10px; }
.admin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.records-tabs { display: flex; gap: 25px; }
.records-tabs button { padding: 12px 0; color: #9f9f92; font-size: 11px; border-bottom: 1px solid transparent; }
.records-tabs button.active { color: #eee; border-color: #ddd; }
.compact { min-height: 38px; padding: 10px 13px; font-size: 10px; }
.record-filters { display: flex; align-items: center; gap: 13px; margin-block: 24px; }
.search-field { display: flex; align-items: center; gap: 11px; flex: 1; }
.search-field input { margin: 0; }
.record-filters > input { max-width: 155px; margin: 0; }
.records-columns, .booking-row { display: grid; grid-template-columns: 110px minmax(0,1.4fr) minmax(0,1fr) 140px; gap: 24px; }
.records-columns { padding: 15px 0; border-block: 1px solid var(--line); font-size: 8px; letter-spacing: 1.3px; color: #8e8e82; }
.booking-row { padding: 23px 0; align-items: start; border-bottom: 1px solid var(--line); }
.booking-time, .booking-service, .booking-actions { display: flex; flex-direction: column; gap: 6px; }
.booking-time strong { font-size: 20px; font-weight: 450; }
.booking-time span, .booking-service span, .booking-service small { font-size: 10px; color: var(--muted); }
.booking-person h3, .booking-service strong { font-size: 12px; font-weight: 500; }
.booking-person a { font-size: 11px; color: var(--muted); text-decoration: none; }
.booking-person p { font-size: 10px; margin-top: 8px; color: var(--muted); overflow-wrap: anywhere; }
.status { display: inline-flex; align-items: center; gap: 7px; color: #cbcbbe; font-size: 10px; }
.status i { width: 4px; height: 4px; background: #a5a590; border-radius: 50%; }
.booking-actions { align-items: flex-start; }
.booking-row.cancelled { opacity: .5; }
.records-footer { padding-block: 17px; display: flex; justify-content: space-between; font-size: 10px; color: #88887b; }
.empty-state { padding: 60px 20px; text-align: center; color: var(--muted); }
.empty-icon { display: block; margin-bottom: 17px; }
.empty-state h3 { color: #ddd; font-size: 18px; }
.empty-state p { font-size: 12px; margin: 12px 0 25px; }
.settings-card { max-width: 860px; }
.settings-section { border-top: 1px solid var(--line); padding: 30px 0 18px; }
.settings-section-title { display: flex; align-items: center; gap: 15px; margin-bottom: 27px; }
.settings-section-title h2 { font-size: 22px; }
.settings-section-title p { font-size: 11px; color: var(--muted); margin-top: 8px; }
.section-icon { color: #929284; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 28px; }
fieldset { border: 0; padding: 0; margin: 5px 0 15px; }
legend { font-size: 11px; margin-bottom: 15px; }
.day-checks { display: flex; flex-wrap: wrap; gap: 15px; }
.day-checks label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #b6b6a8; }
input[type=checkbox] { accent-color: #eee; width: 15px; height: 15px; }
.saved-message { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #c8c8b8; }
.modal { width: min(460px, calc(100% - 40px)); padding: 36px; background: #10100e; border: 1px solid #777769; border-radius: 2px; color: #eee; }
.modal::backdrop { background: #000c; }
.close-modal { position: absolute; top: 15px; right: 15px; }
.modal-icon { display: block; margin-bottom: 21px; color: #aaa; }
.modal > p { margin-top: 20px; color: var(--muted); font-size: 12px; }
.cancel-detail { color: #ddd !important; }
.spinning { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1050px) {
  .booking-layout { grid-template-columns: minmax(0,1fr) 280px; gap: 35px; }
  .summary-column { padding-left: 25px; }
  .time-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; }
  .calendar-toolbar { flex-wrap: wrap; }
  .shop-contact { gap: 40px; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 36px); }
  .demo-inner { justify-content: center; font-size: 9px; }
  .demo-extra { display: none; }
  .header { min-height: 87px; gap: 15px; }
  .brand { gap: 10px; }
  .brand-icon { width: 39px; height: 39px; }
  .brand-wordmark { font-size: 21px; }
  .brand-wordmark small { font-size: 6px; letter-spacing: 2.7px; margin-top: 7px; }
  .header nav { gap: 15px; font-size: 10px; }
  .staff-header nav { width: 100%; justify-content: space-between; gap: 9px; }
  .customer-nav a:last-child { font-size: 0; gap: 0; }
  .customer-nav a:last-child svg { width: 19px; height: 19px; }
  .hero { padding: 34px 0 31px; }
  .hero .eyebrow { font-size: 8px; margin-bottom: 13px; }
  h1 { letter-spacing: -1.3px; }
  .page-description { font-size: 11px; margin-top: 13px; }
  .hero-meta { display: none; }
  .booking-layout { display: flex; flex-direction: column; gap: 38px; }
  .booking-card, .summary-column { width: 100%; }
  .next-appointment { padding-block: 18px; min-height: 86px; gap: 13px; }
  .next-appointment strong { font-size: 12px; }
  .next-appointment .eyebrow { font-size: 7px; letter-spacing: 1.2px; }
  .next-appointment button { font-size: 9px; gap: 6px; }
  .steps { margin: 15px 0 28px; gap: 20px; }
  .section-heading { margin-bottom: 22px; }
  h2 { font-size: 24px; }
  .calendar-toolbar { margin-top: 17px; }
  .calendar-controls { gap: 7px; }
  .date-picker input { font-size: 9px; width: 112px; }
  .date-grid button strong { font-size: 23px; }
  .date-grid button > span { font-size: 9px; }
  .time-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
  .time-grid button { min-height: 45px; }
  .time-toolbar { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .period-switch { gap: 12px; }
  .period-switch button { font-size: 8px; }
  .period-switch svg { display: none; }
  .calendar-note { font-size: 8px; align-items: flex-start; }
  .card-footer { margin-top: 23px; padding-top: 22px; }
  .summary-column { position: static; padding: 27px 0 0; border-left: 0; border-top: 1px solid #77776b; }
  .summary-brand { padding-block: 22px; }
  .summary-details > div { grid-template-columns: 80px 1fr; }
  .summary-details { gap: 17px; }
  .receipt-total strong { font-size: 29px; }
  .summary-monogram { width: 37px; height: 37px; }
  .availability-card { margin-top: 25px; padding-top: 23px; }
  .opening-days { max-width: 340px; }
  .demo-footnote { margin-top: 20px; }
  input:not([type=checkbox]), textarea, select { font-size: 16px; }
  .date-picker input, .confirmation-tools input { font-size: 11px; }
  .selected-appointment { gap: 10px; }
  .selected-appointment strong { font-size: 11px; }
  .shop-contact { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; padding-top: 30px; }
  .contact-intro h2 { font-size: 30px; margin-top: 13px; }
  .contact-links span { font-size: 15px; }
  .contact-links > a { padding-block: 18px; }
  .shop-gallery { grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 0; }
  .footer { flex-wrap: wrap; margin-top: 25px; gap: 15px; padding-block: 22px; }
  .footer-brand { font-size: 12px; }
  .footer > span:last-child { font-size: 8px; }
  .stats { grid-template-columns: 1fr; gap: 0; margin-bottom: 25px; }
  .stats > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 15px; border-top: 0; padding: 19px 0; }
  .stats > div:first-child { border-top: 1px solid var(--line); }
  .stats strong { font-size: 26px; grid-column: 2; grid-row: 1/3; margin: 0; }
  .stats small { grid-column: 1; }
  .admin-toolbar { flex-wrap: wrap; gap: 15px; }
  .records-tabs { gap: 20px; }
  .record-filters { flex-wrap: wrap; gap: 9px; }
  .search-field { flex-basis: 100%; }
  .record-filters input { font-size: 12px; }
  .records-columns { display: none; }
  .booking-row { grid-template-columns: 72px minmax(0,1fr); gap: 17px; }
  .booking-service { grid-column: 2; }
  .booking-actions { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .booking-time strong { font-size: 18px; }
  .booking-person h3 { font-size: 13px; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-section { padding-top: 24px; }
  .day-checks { gap: 14px; }
  .settings-bottom .card-footer { flex-wrap: wrap; }
  .success-card { padding-block: 28px; }
  .success-card h2 { font-size: 29px; }
  .success-details { grid-template-columns: 1fr; gap: 25px; }
  .confirmation-tools { padding-block: 23px; }
  .confirmation-links { gap: 13px 17px; }
  .message { align-items: flex-start; flex-wrap: wrap; font-size: 11px; }
  .admin-gate, .manage-reservation { padding-block: 36px; }
  .manage-details { gap: 13px; }
  .manage-details h2 { font-size: 21px; }
  .manage-details p { font-size: 11px; }
  .modal { padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* A conventional month view; availability is conveyed by text as well as color. */
.month-calendar { margin-top:27px; }
.month-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.month-toolbar h3 { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:500; text-transform:capitalize; }
.month-navigation { display:flex; align-items:center; gap:10px; }
.month-navigation .text-button { min-height:44px; padding-inline:10px; }
.calendar-legend { display:flex; gap:22px; margin-bottom:23px; flex-wrap:wrap; color:#bbb; font-size:12px; }
.calendar-legend span { display:flex; align-items:center; gap:8px; }
.calendar-legend i { width:7px; height:7px; border-radius:50%; display:inline-block; }
.legend-free { background:#f1f1e9; }
.legend-busy { background:#777; }
.legend-off { border:1px solid #999; position:relative; }
.legend-off::after { content:''; position:absolute; width:10px; height:1px; background:#999; transform:rotate(-45deg); left:-2px; top:2px; }
.month-weekdays,.month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.month-weekdays { color:#969696; font-size:12px; text-align:center; padding-bottom:13px; }
.month-grid { border-top:1px solid #54544d; border-left:1px solid #262626; background:rgb(8 8 8 / .78); }
.month-day,.month-spacer { min-width:0; min-height:84px; border:0; border-right:1px solid #262626; border-bottom:1px solid #333; }
.month-day { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#eee; background:transparent; transition:background .15s; }
.month-day-number { font-size:23px; font-weight:500; line-height:1; }
.month-day-state { font-size:10px; line-height:1.2; }
.month-day.available .month-day-state { color:#cecec2; }
.month-day.occupied { background:#222; color:#858585; }
.month-day.occupied .month-day-number { color:#a0a0a0; }
.month-day.cancelled { color:#a0a0a0; background:#111; }
.month-day.cancelled .month-day-number { text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:#666; }
.month-day.closed,.month-day.elapsed { color:#858585; }
.month-day.outside { color:#494949; cursor:default; }
.month-day.outside .month-day-state { visibility:hidden; }
.month-day:not(:disabled):hover { background:#292925; }
.month-day.selected { background:#24241f; box-shadow:inset 0 -2px #e9e9df; color:white; }
.month-day:focus-visible { outline:2px solid white; outline-offset:-3px; }
.today-marker { position:absolute; right:8px; top:8px; width:4px; height:4px; border-radius:50%; background:currentColor; }
.month-hint { margin-top:15px; color:#999; font-size:12px; line-height:1.6; }
.selected-calendar-date { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin:18px 0; color:#ddd; font-size:14px; }
.selected-calendar-date span { font-size:12px; color:#999; }
.calendar-time-grid button.time-slot { min-height:66px; flex-direction:column; gap:6px; }
.calendar-time-grid button.time-slot:not(.selected):not(.occupied):not(:hover) { background:rgb(8 8 8 / .8); }
.time-slot>small { font-size:10px; font-weight:400; }
.calendar-time-grid button.occupied:disabled { background:#252525; border-color:#363636; color:#999; opacity:1; }
.calendar-time-grid button.cancelled:disabled { color:#929292; border-style:dashed; opacity:1; }
.calendar-time-grid button.cancelled>span { text-decoration:line-through; }
.calendar-time-grid button.elapsed:disabled { color:#555; border-color:#272727; opacity:1; }
.schedule-panel { border-top:1px solid var(--line); padding-block:30px 45px; }
.schedule-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr); gap:55px; }
.schedule-layout .month-calendar { margin:0; }
.day-editor { border-left:1px solid var(--line); padding-left:35px; }
.day-editor>h3 { font-size:23px; line-height:1.4; margin:10px 0 25px; }
.day-editor fieldset { border:0; padding:0; margin-bottom:24px; }
.day-editor legend { font-size:12px; color:#999; margin-bottom:12px; }
.schedule-option { display:flex; align-items:center; gap:13px; border-bottom:1px solid #303030; padding:17px 0; cursor:pointer; }
.schedule-option input { width:18px; height:18px; flex:none; accent-color:#fff; }
.schedule-option>span { display:block; font-size:14px; }
.schedule-option svg { vertical-align:middle; margin-right:8px; }
.schedule-option small { display:block; font-size:12px; color:#969696; margin-top:7px; line-height:1.5; }
.schedule-option.active>span { color:white; }
.day-hours { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
.day-editor>.primary { width:100%; }
.day-editor .saved-message { margin-top:18px; font-size:13px; line-height:1.6; }
@media(max-width:760px) {
  .month-toolbar h3 { font-size:18px; }
  .month-navigation { gap:3px; }
  .month-day,.month-spacer { min-height:68px; }
  .month-day-number { font-size:20px; }
  .month-day-state { font-size:9px; letter-spacing:-.25px; }
  .month-weekdays { font-size:12px; }
  .calendar-legend { font-size:12px; gap:18px; }
  .month-hint { font-size:12px; }
  .schedule-layout { grid-template-columns:1fr; gap:30px; }
  .day-editor { border-left:0; padding-left:0; padding-top:25px; border-top:1px solid var(--line); }
  .calendar-time-grid button.time-slot { min-height:66px; }
}

/* Schedule tools keep the same quiet borders as the booking flow. */
.time-off-panel,.sms-panel { border-top:1px solid var(--line); padding-block:32px; }
.time-off-form { max-width:850px; padding-block:16px 32px; }
.time-off-form .primary { margin-top:20px; }
.check-row { display:flex; align-items:center; gap:12px; margin-block:22px; font-size:14px; }
.check-row input { width:19px; height:19px; flex:none; accent-color:#fff; }
.time-off-list { border-top:1px solid var(--line); padding-top:28px; }
.time-off-row { display:flex; justify-content:space-between; align-items:center; gap:22px; padding:23px 0; border-bottom:1px solid var(--line); }
.time-off-row p { margin-top:8px; font-size:14px; color:var(--muted); }
.time-off-row small { color:var(--muted); }
.sms-list>div { display:grid; grid-template-columns:140px 1fr; gap:10px; padding:16px 0; border-bottom:1px solid var(--line); }
.sms-list small { grid-column:1/-1; color:var(--muted); }
.move-form { border-top:1px solid var(--line); padding-block:25px; }
.move-form>label { max-width:300px; margin-block:22px; }
.move-form .time-grid { max-width:650px; margin-bottom:24px; }
.move-form .time-grid>p { grid-column:1/-1; }
.move-preview { margin-block:20px; }
.mobile-booking-bar { display:none; }
@media(max-width:760px) {
  .has-mobile-booking-bar { padding-bottom:calc(94px + env(safe-area-inset-bottom)); }
  .mobile-booking-bar { position:fixed; z-index:20; bottom:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; gap:12px; background:#101010; border-top:1px solid #666; padding:15px 18px calc(15px + env(safe-area-inset-bottom)); }
  .mobile-booking-bar>div { display:flex; flex-direction:column; gap:4px; min-width:0; }
  .mobile-booking-bar strong { font-size:21px; }
  .mobile-booking-bar span { font-size:12px; color:#bbb; }
  .mobile-booking-bar button { min-height:48px; padding-inline:20px; }
  .booking-card .card-footer>.primary { display:none; }
  .summary-brand,.summary-details,.summary-progress,.selected-status { display:none; }
  .summary-column { padding-top:22px; }
  .summary-service { padding-block:18px; }
  .receipt-total { padding-top:18px; }
  .hero .eyebrow,.next-appointment .eyebrow,.eyebrow { font-size:10px; }
  .page-description,.section-description,.calendar-note,.inline-note p,.subtle-note,.step-hint { font-size:13px; line-height:1.65; }
  .next-appointment strong { font-size:14px; }
  .next-appointment button { font-size:12px; min-height:44px; }
  .period-switch button { font-size:11px; min-height:44px; }
  .date-grid button>span,.date-grid button>small,.step-label small { font-size:11px; }
  .date-picker input { font-size:12px; width:130px; }
  .time-grid button { font-size:15px; min-height:48px; }
  .selected-appointment strong,.selected-appointment span,.manage-details p { font-size:13px; }
  .brand-wordmark small { font-size:9px; letter-spacing:2px; }
  .header nav { font-size:12px; }
  .staff-header { flex-wrap:wrap; padding-block:18px; }
  .staff-header nav { flex-wrap:wrap; justify-content:flex-start; gap:8px 18px; }
  .staff-header nav>a,.staff-header nav>button { min-height:44px; }
  .footer>span:last-child { font-size:11px; }
  .contact-form label { font-size:14px; }
  .contact-form label>small { font-size:12px; }
  .time-off-row { flex-wrap:wrap; }
  .time-off-row>.text-button { min-height:44px; }
  .move-form .confirmation-links { align-items:stretch; flex-direction:column; }
  .move-form .confirmation-links>button { min-height:48px; }
  .manage-reservation>h1 { font-size:34px; }
}
/* Transactional SMS previews share the booking form's graphite surfaces. */
.sms-examples{margin:24px 0;padding:28px;border:1px solid #333;border-radius:24px;background:linear-gradient(135deg,#1c1c1c,#111);box-shadow:inset 0 1px #ffffff0a}
.sms-example-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:30px 0 20px}
.sms-example-grid h3{font-size:16px;margin-bottom:16px}.sms-example-grid small,.cancellation-sms small{color:#939393;font-size:12px}
.sms-bubble{padding:20px;border:1px solid #414141;border-radius:18px 18px 18px 4px;background:#262626;color:#f1f1f1;font-size:15px;line-height:1.7;overflow-wrap:anywhere;margin:12px 0}
.cancellation-sms{margin:22px 0;text-align:left}.cancellation-sms>p{font-size:14px;line-height:1.6}
@media(max-width:640px){.sms-examples{padding:20px}.sms-example-grid{grid-template-columns:1fr;gap:24px}}
.sms-editor{padding:32px;background:radial-gradient(ellipse at 90% 0,#25252566,transparent 65%),linear-gradient(140deg,#1b1b1b,#101010);border-color:#3b3b3b}
.sms-demo-note{font-size:12px;line-height:1.6;color:#b3b3b3;margin-top:18px;padding-left:12px;border-left:2px solid #555}
.sms-template-switch{display:flex;gap:5px;padding:5px;border:1px solid #383838;border-radius:14px;background:#101010;margin:28px 0;width:fit-content;max-width:100%}
.sms-template-switch button{min-height:44px;padding:10px 20px;border-radius:9px;font-size:14px;color:#a8a8a8}
.sms-template-switch button[aria-pressed=true]{background:#343434;color:#fff;box-shadow:inset 0 1px #ffffff0b}
.sms-editor-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:36px;align-items:start}
.sms-compose>label{font-size:15px;font-weight:600;display:block}
.sms-compose textarea{background:#111;border:1px solid #515151;border-radius:14px;padding:18px;font-size:15px;line-height:1.75;min-height:205px;margin-top:12px}
.sms-compose-meta{display:flex;justify-content:space-between;gap:12px;color:#aaa;font-size:12px;margin:14px 0 10px}
.sms-compose-meta span:last-child{font-variant-numeric:tabular-nums}
.sms-variables{display:flex;gap:8px;flex-wrap:wrap}
.sms-variables button{background:#252525;border:1px solid #424242;border-radius:8px;padding:9px 12px;font-size:12px;min-height:38px}
.sms-variables button:hover:not(:disabled){background:#333;border-color:#777}
.sms-editor .subtle-note{font-size:12px;line-height:1.65;color:#a8a8a8;margin:13px 0 0}
.sms-validation{font-size:12px;line-height:1.6;color:#efb6b6;margin:8px 0 0}
.sms-reset{font-size:12px;margin-top:10px;color:#bebebe}
.sms-phone-preview{padding:24px;border:1px solid #3a3a3a;border-radius:20px;background:linear-gradient(160deg,#232323,#171717);box-shadow:inset 0 1px #ffffff06}
.sms-preview-heading{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#aaa;letter-spacing:.06em;margin-bottom:24px}
.sms-preview-sender{display:flex;gap:12px;align-items:center}
.sms-sender-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#363636;color:#ddd}
.sms-preview-sender strong{font-size:14px;letter-spacing:.04em}.sms-preview-sender small{display:block;font-size:11px;color:#aaa;margin-top:4px}
.sms-phone-preview .sms-bubble{margin:20px 0 15px;padding:18px;background:#343434;border-color:#494949;font-size:14px;white-space:pre-wrap}
.sms-segments{color:#c3c3c3;font-size:12px;font-variant-numeric:tabular-nums}
.sms-editor-footer{margin-top:28px;padding-top:24px;border-top:1px solid #383838;display:flex;align-items:center;justify-content:space-between;gap:20px}
.sms-save-state{display:flex;align-items:center;gap:7px;font-size:13px;color:#dedede;min-height:20px}
.sms-editor-footer .subtle-note{margin-top:5px}.sms-editor-footer .primary{border-radius:10px;font-size:13px;min-height:48px;flex-shrink:0}
@media(max-width:800px){.sms-editor-grid{grid-template-columns:1fr;gap:24px}.sms-compose textarea{min-height:170px}.sms-editor{padding:24px}}
@media(max-width:480px){.sms-editor{padding:18px}.sms-template-switch{width:100%;gap:3px}.sms-template-switch button{flex:1;padding:9px 7px;font-size:12px}.sms-phone-preview{padding:18px}.sms-editor-footer{align-items:stretch;flex-direction:column}.sms-editor-footer .primary{width:100%}}

/* Customer flow: one quiet workspace with date, time and a clear next action. */
.customer-app .wrap { width: min(1120px, calc(100% - 64px)); }
.customer-app .header { min-height: 84px; }
.customer-app .brand-icon { width: 44px; height: 44px; }
.customer-app .brand-wordmark { font-size: 24px; }
.customer-app .brand-wordmark small { font-size: 9px; letter-spacing: 2.6px; }
.customer-app .header nav { font-size: 14px; gap: 26px; }
.customer-app .header nav a { min-height: 44px; }
.customer-app .booking-hero { padding: 32px 0 28px; align-items: center; }
.customer-app h1 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -1.25px; font-weight: 500; }
.customer-app .page-description { margin-top: 10px; font-size: 15px; color: #b2b2b2; }
.page-description > span { margin-inline: 7px; color: #6f6f6f; }
.service-price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.service-price strong { font-size: 28px; font-weight: 500; line-height: 1.25; letter-spacing: -.8px; }
.service-price > span { font-size: 12px; color: #aaa; }
.customer-app .booking-layout { display: block; }
.customer-app .booking-card { position: relative; isolation: isolate; padding: 0 28px 24px; border: 1px solid transparent; border-radius: 20px; background: radial-gradient(ellipse at 0% 0%, #262626 0%, #171717 34%, #101010 75%) padding-box, linear-gradient(140deg, #777 0%, #383838 25%, #242424 62%, #505050 100%) border-box; box-shadow: 0 24px 65px #0006, inset 0 1px 0 #ffffff08; }
.customer-app .booking-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: url('/topography.svg') center top / 1100px auto; opacity: .12; mask-image: linear-gradient(135deg, #000, transparent 65%); pointer-events: none; z-index: 0; }
.customer-app .booking-card > * { position: relative; z-index: 1; }
.customer-app .steps { display: flex; gap: 38px; margin: 0 0 22px; padding: 20px 0; border-bottom: 1px solid #ffffff12; }
.customer-app .steps li { border: 0; padding: 0; }
.customer-app .steps button { gap: 10px; min-height: 38px; }
.customer-app .step-number { display: grid; place-items: center; width: 26px; height: 26px; min-width: 26px; border: 1px solid #555; border-radius: 50%; color: #aaa; font-size: 13px; }
.customer-app .current .step-number, .customer-app .completed .step-number { background: #f1f1ef; color: #111; border-color: #f1f1ef; }
.customer-app .step-label strong { font-size: 15px; font-weight: 500; color: #aaa; }
.customer-app .current .step-label strong { color: #fff; }
.customer-app .steps button:disabled { opacity: .65; }
.customer-app .next-appointment { min-height: 0; padding: 0 0 20px; margin-bottom: 24px; border-top: 0; border-bottom: 1px solid #ffffff10; }
.customer-app .next-appointment > div { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 5px 14px; }
.customer-app .next-appointment .eyebrow { color: #aaa; font-size: 11px; letter-spacing: .5px; }
.customer-app .next-appointment strong { font-size: 14px; font-weight: 500; }
.customer-app .text-button { font-size: 13px; min-height: 38px; }
.customer-app .next-appointment .text-button { color: #eee; }
.customer-app h2 { font-size: 24px; letter-spacing: -.6px; font-weight: 500; }
.customer-app .section-heading { margin-bottom: 24px; }
.customer-app .icon-button { width: 38px; height: 38px; color: #bdbdbd; border-color: #ffffff20; border-radius: 9px; background: #ffffff04; }
.appointment-picker { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 22px; border: 1px solid #ffffff12; border-radius: 14px; background: linear-gradient(145deg, #111111ed, #090909ed); box-shadow: inset 0 1px 0 #ffffff05, 0 8px 26px #0002; }
.date-panel { min-width: 0; }
.customer-app .month-calendar { margin: 0; padding: 0 0 5px; border: 0; background: none; }
.customer-app .month-toolbar { min-height: 44px; margin-bottom: 22px; gap: 10px; }
.customer-app .month-toolbar h3 { font-size: 25px; font-weight: 500; gap: 9px; align-items: baseline; letter-spacing: -.7px; }
.month-year { font-size: 13px; font-weight: 400; color: #999; letter-spacing: 0; }
.customer-app .month-navigation { gap: 6px; }
.customer-app .month-navigation .text-button { font-size: 12px; padding-inline: 8px; min-height: 44px; }
.customer-app .month-navigation .icon-button { width: 44px; height: 44px; border: 1px solid #ffffff13; border-radius: 50%; background: linear-gradient(145deg, #262626, #171717); color: #eee; box-shadow: inset 0 1px 0 #ffffff07; }
.customer-app .month-navigation .icon-button:hover:not(:disabled) { background: #343434; }
.customer-app .month-navigation .icon-button:disabled { background: #161616; opacity: .38; }
.customer-app .month-weekdays { font-size: 12px; color: #a6a6a6; padding-bottom: 12px; }
.customer-app .month-grid { background: transparent; border: 0; }
.customer-app .month-day, .customer-app .month-spacer { min-height: 78px; border: 0; border-top: 1px solid #ffffff0d; }
.customer-app .month-day { gap: 3px; padding: 8px 0; background: transparent; }
.customer-app .month-day-number { display: grid; place-items: center; width: 42px; max-width: 100%; height: 42px; border-radius: 50%; font-size: 23px; font-weight: 500; letter-spacing: -.6px; transition: background .18s, color .18s; }
.customer-app .month-day-state { display: grid; place-items: center; height: 14px; font-size: 10px; letter-spacing: -.2px; color: #929292; }
.day-availability-dot { display: block; width: 4px; height: 4px; background: #bbb; border-radius: 50%; }
.customer-app .month-day:disabled { opacity: 1; color: #575757; }
.customer-app .month-day.occupied { background: transparent; color: #999; }
.customer-app .month-day.occupied .month-day-number { background: #242424; color: #9c9c9c; }
.customer-app .month-day.cancelled { background: transparent; }
.customer-app .month-day.today .month-day-number { outline: 1px solid #626262; outline-offset: -1px; }
.customer-app .month-day .today-marker { display: none; }
.customer-app .month-day.selected { background: transparent; color: #f4f4f4; box-shadow: none; }
.customer-app .month-day.selected .month-day-number { background: linear-gradient(145deg, #fff, #cdcdcd); color: #101010; outline: none; box-shadow: 0 0 0 4px #ffffff07, 0 3px 13px #0005; }
.customer-app .month-day.selected .day-availability-dot { background: #f4f4f4; }
.customer-app .month-day.selected:is(.occupied, .closed, .cancelled, .elapsed) .month-day-number { background: #303030; color: #bbb; outline: 1px solid #a5a5a5; outline-offset: -1px; }
.customer-app .month-day:not(:disabled):not(.selected):hover { background: transparent; }
.customer-app .month-day:not(:disabled):not(.selected):hover .month-day-number { background: #303030; color: #fff; }
.customer-app .month-day:focus-visible { outline: 1px solid #eee; outline-offset: -3px; border-radius: 6px; }
.calendar-legend { margin-top: 18px; margin-bottom: 0; }
.customer-app .calendar-legend { justify-content: center; gap: 20px; margin-top: 21px; font-size: 12px; color: #aaa; }
.customer-app .calendar-legend .legend-free { width: 4px; height: 4px; margin-inline: 1.5px; background: #bbb; }
.time-panel { min-width: 0; padding-left: 28px; border-left: 0; background: linear-gradient(180deg, #ffffff29, #ffffff0a 75%, transparent) left top / 1px 100% no-repeat; }
.time-panel-heading h3 { font-size: 19px; font-weight: 500; line-height: 1.4; }
.time-panel-heading p { color: #bcbcbc; font-size: 13px; margin-top: 5px; }
.customer-app .period-switch { display: grid; grid-template-columns: .7fr 1fr 1fr; gap: 3px; margin: 18px 0; padding: 4px; border: 1px solid #ffffff12; border-radius: 10px; background: #08080880; box-shadow: inset 0 1px 5px #0004; }
.customer-app .period-switch button { justify-content: center; border: 0; border-radius: 6px; padding: 8px 3px; min-height: 36px; font-size: 12px; color: #aaa; }
.customer-app .period-switch button.active { color: #fff; background: linear-gradient(#383838, #292929); box-shadow: inset 0 1px 0 #ffffff14, 0 2px 5px #0003; }
.customer-app .time-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.customer-app .calendar-time-grid button.time-slot { min-height: 50px; padding: 10px 2px; gap: 3px; font-size: 14px; color: #eee; border: 1px solid #ffffff28; border-radius: 8px; box-shadow: inset 0 1px 0 #ffffff06; transition: background .18s, border-color .18s, box-shadow .18s; }
.customer-app .calendar-time-grid button.time-slot > span { display: inline-flex; align-items: center; gap: 4px; }
.customer-app .calendar-time-grid button.time-slot:not(.selected):not(.occupied):not(:hover) { background: linear-gradient(145deg, #252525, #161616); }
.customer-app .calendar-time-grid button.time-slot:hover:not(:disabled):not(.selected) { background: #303030; border-color: #8b8b8b; box-shadow: 0 0 0 2px #ffffff08; }
.customer-app .calendar-time-grid button.time-slot.selected { background: linear-gradient(145deg, #fff, #cecece); color: #111; border-color: #efefed; box-shadow: 0 0 0 3px #ffffff08; }
.customer-app .calendar-time-grid button.occupied:disabled { background: #242424; color: #999; border-color: #ffffff0e; box-shadow: none; }
.customer-app .calendar-time-grid button.cancelled:disabled, .customer-app .calendar-time-grid button.elapsed:disabled { color: #858585; border-color: #ffffff0d; box-shadow: none; }
.customer-app .calendar-time-grid small { font-size: 10px; }
.customer-app .calendar-note { margin-top: 18px; font-size: 11px; color: #a3a3a3; }
.customer-app .empty-times { padding: 36px 14px; }
.customer-app .empty-times strong { font-size: 16px; }
.customer-app .empty-times p { font-size: 13px; }
.customer-app .primary, .customer-app .secondary { min-height: 48px; font-size: 14px; padding: 13px 22px; border-radius: 9px; }
.customer-app .primary { background: linear-gradient(145deg, #fff, #d3d3d3); border-color: #efefed; color: #111; box-shadow: inset 0 1px 0 #fff5, 0 3px 12px #0003; }
.customer-app .card-footer { margin-top: 24px; padding-top: 22px; border-top: 0; background: linear-gradient(90deg, #ffffff24, #ffffff08) left top / 100% 1px no-repeat; }
.booking-selection { display: flex; flex-direction: column; gap: 4px; }
.booking-selection > span { font-size: 12px; color: #aaa; }
.booking-selection > strong { font-size: 16px; font-weight: 500; }
.customer-app .contact-form { max-width: 680px; margin: 32px auto 8px; }
.customer-app .section-description { font-size: 14px; color: #aaa; margin-top: 9px; }
.customer-app .selected-appointment { margin-bottom: 26px; padding-block: 19px; }
.customer-app .selected-appointment strong { font-size: 16px; }
.customer-app .selected-appointment span { font-size: 14px; }
.details-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.customer-app .contact-form label { font-size: 14px; margin-bottom: 20px; color: #e0e0e0; }
.customer-app .contact-form input:not([type=checkbox]), .customer-app .contact-form textarea { font-size: 16px; min-height: 50px; background: #0c0c0c99; border-color: #ffffff26; border-radius: 9px; box-shadow: inset 0 2px 8px #0002; }
.customer-app .contact-form label small { font-size: 12px; color: #aaa; }
.optional-note { border-block: 1px solid #303030; margin: 4px 0 24px; }
.optional-note summary { padding: 17px 0; font-size: 14px; color: #ddd; cursor: pointer; }
.optional-note summary span { margin-left: 7px; color: #929292; font-size: 12px; }
.customer-app .inline-note { font-size: 13px; color: #aaa; }
.booking-demo-note { font-size: 12px; color: #aaa; padding-top: 25px; }
.customer-app .shop-contact { grid-template-columns: 180px minmax(0, 1fr); gap: 30px; padding: 30px 0 8px; margin-top: 40px; border-color: #383838; }
.customer-app .contact-intro h2 { font-size: 22px; margin: 0; }
.customer-app .contact-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.customer-app .contact-links > a, .customer-app .contact-links > a:first-child { padding: 0 0 18px; gap: 11px; align-items: center; }
.customer-app .contact-links > a > svg:last-child { display: none; }
.customer-app .contact-links span { font-size: 15px; gap: 5px; overflow-wrap: anywhere; }
.customer-app .contact-links small { font-size: 10px; letter-spacing: .6px; }
.customer-app .footer { margin-top: 18px; padding-block: 22px; }
.customer-app .footer > span:last-child { font-size: 11px; gap: 13px; flex-wrap: wrap; }
.customer-app .footer-brand small { display: none; }
.customer-app .message { font-size: 14px; }
.customer-app .message button { font-size: 13px; }
@media (max-width: 1000px) {
  .customer-app .booking-card { padding-inline: 22px; }
  .appointment-picker { gap: 22px; padding: 18px; }
  .time-panel { padding-left: 22px; }
  .customer-app .shop-contact { grid-template-columns: 120px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
  .customer-app .wrap { width: calc(100% - 36px); }
  .customer-app .header { min-height: 78px; }
  .customer-app .brand-icon { width: 36px; height: 36px; }
  .customer-app .brand-wordmark { font-size: 21px; }
  .customer-app .brand-wordmark small { font-size: 8px; }
  .customer-app .header nav { font-size: 12px; gap: 17px; }
  .customer-app .booking-hero { padding: 26px 0 23px; gap: 15px; align-items: flex-start; }
  .customer-app h1 { font-size: 28px; letter-spacing: -.8px; }
  .customer-app .page-description { font-size: 13px; line-height: 1.7; margin-top: 8px; }
  .page-description > span { margin-inline: 2px; }
  .service-price strong { font-size: 25px; }
  .service-price > span { font-size: 10px; }
  .customer-app .booking-card { padding: 0 16px 21px; margin-inline: -7px; border-radius: 16px; }
  .customer-app .steps { gap: 28px; padding: 14px 0; margin-bottom: 20px; }
  .customer-app .steps button { min-height: 40px; }
  .customer-app .step-label strong { font-size: 14px; }
  .customer-app .next-appointment { padding-bottom: 16px; margin-bottom: 22px; gap: 10px; }
  .customer-app .next-appointment > div { flex-direction: column; gap: 4px; }
  .customer-app .next-appointment .eyebrow { font-size: 10px; }
  .customer-app .next-appointment strong { font-size: 13px; }
  .customer-app .next-appointment .text-button { font-size: 13px; min-height: 44px; }
  .customer-app h2 { font-size: 22px; }
  .customer-app .section-heading { margin-bottom: 19px; }
  .appointment-picker { grid-template-columns: 1fr; gap: 24px; padding: 16px 12px; border-radius: 11px; }
  .time-panel { padding: 24px 0 0; border: 0; background: linear-gradient(90deg, #ffffff29, #ffffff0a 75%, transparent) left top / 100% 1px no-repeat; }
  .customer-app .month-toolbar h3 { font-size: 25px; }
  .customer-app .month-navigation .icon-button { width: 44px; height: 44px; }
  .customer-app .month-day, .customer-app .month-spacer { min-height: 72px; }
  .customer-app .month-day-number { font-size: 23px; height: 40px; width: 40px; }
  .customer-app .month-day-state { font-size: 10px; }
  .customer-app .calendar-legend { gap: 18px; }
  .time-panel-heading h3 { font-size: 20px; }
  .time-panel-heading p { font-size: 14px; }
  .customer-app .period-switch button { min-height: 40px; font-size: 13px; }
  .customer-app .calendar-time-grid button.time-slot { min-height: 48px; font-size: 15px; }
  .customer-app .calendar-note { font-size: 12px; }
  .customer-app .booking-actions-bar { display: none; }
  .customer-app .mobile-booking-bar { background: linear-gradient(135deg, #242424f5, #111111fa); border-top-color: #ffffff2b; padding-inline: 18px; box-shadow: 0 -10px 35px #0004; }
  .customer-app .mobile-booking-bar span { font-size: 12px; }
  .customer-app .mobile-booking-bar .primary { min-height: 48px; padding-inline: 20px; }
  .customer-app .contact-form { margin-block: 26px 0; }
  .details-fields { grid-template-columns: 1fr; gap: 0; }
  .customer-app .selected-appointment strong { font-size: 15px; }
  .customer-app .selected-appointment span { font-size: 13px; }
  .customer-app .selected-appointment .text-button { min-height: 44px; }
  .customer-app .contact-form .card-footer { margin-top: 20px; padding-top: 16px; }
  .customer-app .shop-contact { grid-template-columns: 1fr; gap: 22px; margin-top: 32px; }
  .customer-app .contact-links { grid-template-columns: 1fr; gap: 16px; }
  .customer-app .contact-links span { font-size: 16px; }
  .customer-app .footer { gap: 8px; }
}
@media (max-width: 380px) {
  .customer-app h1 { font-size: 25px; }
  .service-price strong { font-size: 23px; }
  .service-price > span { max-width: 65px; text-align: right; }
  .customer-app .header nav { gap: 12px; }
  .customer-app .month-toolbar h3 { font-size: 22px; gap: 6px; }
  .customer-app .month-year { font-size: 12px; }
  .customer-app .month-navigation { gap: 3px; }
  .customer-app .month-navigation .icon-button { width: 40px; height: 44px; }
  .customer-app .month-navigation .text-button { padding-inline: 5px; }
}
.customer-app .customer-nav button{min-height:44px;font-size:inherit}
.customer-app .customer-nav .nav-active{border-bottom-color:#f1f1f1}
.map-hero{align-items:center;padding:38px 0 28px;gap:22px}
.map-hero .eyebrow{font-size:11px;letter-spacing:.12em;color:#a3a3a3;margin-bottom:12px}
.map-hero .text-button{font-size:13px;min-height:44px}
.shop-map-card{padding:26px;border:1px solid #424242;border-radius:24px;background:radial-gradient(ellipse at 100% 0,#30303066,transparent 60%),linear-gradient(140deg,#1e1e1e,#111);box-shadow:inset 0 1px #ffffff0a,0 24px 70px #0003}
.shop-map-info{display:flex;align-items:center;gap:16px;padding:0 2px 24px}
.map-location-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#303030;border:1px solid #4b4b4b;color:#e6e6e6;flex-shrink:0}
.shop-map-address{flex:1;min-width:0}.customer-app .shop-map-address h2{font-size:20px;letter-spacing:.03em;margin:0 0 6px}
.shop-map-address address{font-style:normal;font-size:14px;line-height:1.6;color:#c0c0c0}
.shop-map-info .map-navigate{min-height:48px;border-radius:11px;font-size:13px;padding:12px 18px;flex-shrink:0}
.shop-map-frame{position:relative;overflow:hidden;border:1px solid #515151;border-radius:16px;background:#252525}
.shop-map-frame iframe{width:100%;height:460px;display:block;border:0}
.map-privacy-gate{min-height:390px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:40px 24px;background:radial-gradient(ellipse at 50% 0,#373737,transparent 80%),#181818}
.map-privacy-gate h3{margin:0;font-size:22px;font-weight:550}.map-privacy-gate p{max-width:420px;margin:0;color:#bebebe;font-size:14px;line-height:1.7}.map-privacy-gate .primary{border-radius:10px;min-height:48px}.map-privacy-gate>a{color:#bbb;font-size:12px;text-underline-offset:4px}
.booking-privacy-note{line-height:1.7;overflow-wrap:anywhere}.booking-privacy-note a{color:#ddd;text-underline-offset:3px}
.map-loading{position:absolute;left:70px;right:70px;top:16px;background:#171717ed;border:1px solid #555;padding:10px 16px;border-radius:10px;font-size:12px;text-align:center;pointer-events:none}
.map-unavailable{height:350px;display:flex;align-items:center;justify-content:center;gap:18px;color:#bbb}
.shop-map-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 22px;font-size:12px;color:#aaa}
.shop-map-caption a,.shop-map-actions a,.shop-map-actions button{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#d1d1d1;min-height:36px}
.shop-map-caption a{flex-shrink:0}.shop-map-caption a:hover,.shop-map-actions a:hover,.shop-map-actions button:hover{color:#fff}
.shop-map-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #3b3b3b;padding-top:18px;font-size:14px}
.shop-map-actions button{font-size:12px}
@media(max-width:760px){
  .customer-app .header{flex-wrap:wrap;padding-block:16px;gap:12px}
  .customer-app .header .customer-nav{width:100%;justify-content:space-between;gap:12px}
  .customer-app .customer-nav .nav-instagram{font-size:12px;gap:5px}
  .customer-app .customer-nav .nav-instagram svg{width:13px;height:13px}
  .map-hero{padding:26px 0 20px;align-items:flex-start;flex-direction:column;gap:8px}
  .shop-map-card{padding:18px;border-radius:20px}.shop-map-info{flex-wrap:wrap;gap:12px;padding-bottom:18px}
  .map-location-icon{width:44px;height:44px;border-radius:12px}.shop-map-address address{font-size:13px}
  .shop-map-info .map-navigate{width:100%;margin-top:4px}.shop-map-frame iframe{height:390px}
  .shop-map-caption{flex-direction:column;align-items:flex-start;gap:4px;padding:14px 0}
  .shop-map-actions{gap:8px;flex-wrap:wrap}.map-loading{left:55px;right:12px}
}

.staff-app .wrap { width: min(1120px, calc(100% - 56px)); }
.staff-app .hero { padding: 25px 0; }
.staff-app .hero h1 { font-size: clamp(29px, 4vw, 38px); letter-spacing: -1px; }
.staff-app .hero .eyebrow { margin-bottom: 8px; }
.staff-app .page-description { margin-top: 8px; font-size: 13px; }
.staff-header nav { font-size: 13px; gap: 22px; }
.staff-header nav button, .staff-header nav a { min-height: 44px; }
.owner-agenda { position: relative; isolation: isolate; padding: 0 28px; border: 1px solid transparent; border-radius: 20px; background: radial-gradient(ellipse at 0% 0%, #262626 0%, #171717 34%, #101010 75%) padding-box, linear-gradient(140deg, #777 0%, #383838 25%, #242424 62%, #505050 100%) border-box; box-shadow: 0 24px 65px #0006, inset 0 1px 0 #ffffff08; }
.owner-agenda::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: url('/topography.svg') center top / 1100px auto; opacity: .12; mask-image: linear-gradient(135deg, #000, transparent 65%); pointer-events: none; z-index: 0; }
.owner-agenda > * { position: relative; z-index: 1; }
.agenda-workspace { padding: 20px; border: 1px solid #ffffff12; border-radius: 14px; background: linear-gradient(145deg, #111111ed, #090909ed); box-shadow: inset 0 1px 0 #ffffff05, 0 8px 26px #0002; }
.owner-agenda .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.agenda-live-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 20px; }
.agenda-kicker { display: inline-flex; gap: 7px; align-items: center; color: #aaa; font-size: 10px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
.agenda-kicker i { width: 5px; height: 5px; background: #e7e7e5; border-radius: 50%; }
.agenda-sync { font-size: 11px; color: #999; }
.agenda-focus { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 22px; margin: 18px 0 20px; border: 1px solid #ffffff12; border-radius: 14px; background: linear-gradient(145deg, #111111ed, #090909ed); box-shadow: inset 0 1px 0 #ffffff05, 0 8px 26px #0002; }
.agenda-focus > div { min-width: 0; }
.agenda-focus-next { padding-left: 28px; background: linear-gradient(180deg, #ffffff29, #ffffff0a 75%, transparent) left top / 1px 100% no-repeat; }
.agenda-focus-now > .agenda-kicker { color: #ededeb; }
.agenda-focus-button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 5px 0 8px; text-align: left; }
.agenda-focus-button strong { font-size: 27px; font-weight: 550; letter-spacing: -.6px; line-height: 1.3; overflow-wrap: anywhere; }
.agenda-focus-button > span { display: flex; align-items: center; gap: 9px; color: #ccc; font-size: 14px; font-variant-numeric: tabular-nums; }
.agenda-focus-button:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.agenda-focus small { display: block; font-size: 12px; color: #aaa; }
.agenda-focus-empty { margin-block: 9px; font-size: 20px; color: #ddd; }
.agenda-progress { height: 2px; background: #353535; margin: 2px 0 9px; max-width: 230px; }
.agenda-progress span { display: block; height: 100%; background: #e9e9e7; }
.agenda-controls { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.agenda-controls h2 { margin-top: 4px; font-size: 22px; letter-spacing: -.5px; }
.agenda-controls h2::first-letter { text-transform: uppercase; }
.agenda-date-controls { display: flex; gap: 7px; align-items: center; }
.owner-agenda .secondary { padding: 10px 14px; min-height: 44px; font-size: 13px; border-radius: 9px; border-color: #ffffff28; color: #ddd; background: linear-gradient(145deg, #252525, #161616); }
.agenda-date-controls .secondary[aria-pressed=true] { background: linear-gradient(145deg, #fff, #cecece); color: #111; border-color: #efefed; box-shadow: 0 0 0 3px #ffffff08; }
.agenda-date-controls input { margin: 0; width: 155px; min-height: 44px; padding: 9px; font-size: 13px; background: #0c0c0c99; border: 1px solid #ffffff26; border-radius: 9px; box-shadow: inset 0 2px 8px #0002; }
.agenda-week { display: grid; grid-template-columns: 28px repeat(7,minmax(0,1fr)) 28px; margin-top: 18px; border: 1px solid #ffffff12; border-radius: 10px; padding: 5px; gap: 4px; background: #08080880; box-shadow: inset 0 1px 5px #0004; }
.agenda-week-arrow { display: grid; place-items: center; color: #bbb; min-height: 44px; border-radius: 6px; }
.agenda-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px; border-bottom: 2px solid transparent; border-radius: 6px; }
.agenda-day > span { text-transform: uppercase; font-size: 10px; color: #aaa; }
.agenda-day strong { font-size: 23px; font-weight: 500; line-height: 1.3; }
.agenda-day small { font-size: 10px; color: #aaa; }
.agenda-day.today:not(.selected) { border-bottom-color: #777; }
.agenda-day.selected { color: #101010; background: linear-gradient(145deg, #fff, #cecece); box-shadow: 0 2px 8px #0004; }
.agenda-day.selected > span, .agenda-day.selected small { color: #444; }
.agenda-day:hover:not(.selected), .agenda-week-arrow:hover { background: #262626; }
.agenda-day-summary { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 12px 0 16px; font-size: 12px; color: #aaa; }
.agenda-day-summary strong { margin-left: 7px; color: #eee; font-weight: 500; }
.agenda-list-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 18px; padding-block: 8px 15px; border-bottom: 1px solid #ffffff1c; }
.agenda-tabs { display: flex; gap: 3px; padding: 4px; border: 1px solid #ffffff12; border-radius: 10px; background: #08080880; }
.agenda-tabs button { min-height: 40px; padding: 8px 10px; border: 0; border-radius: 6px; font-size: 12px; color: #aaa; }
.agenda-tabs button.active { color: #fff; background: linear-gradient(#383838, #292929); box-shadow: inset 0 1px 0 #ffffff14, 0 2px 5px #0003; }
.agenda-search { display: flex; align-items: center; flex: 1; min-width: 210px; max-width: 300px; gap: 9px; padding-left: 12px; border: 1px solid #ffffff20; border-radius: 9px; background: #0c0c0c99; color: #aaa; }
.agenda-search input { margin: 0; min-width: 0; width: 100%; padding: 10px 0; background: transparent; border: 0; font-size: 13px; }
.agenda-search .icon-button { min-width: 38px; height: 44px; border: 0; }
.agenda-scope-note { font-size: 12px; color: #aaa; padding-top: 15px; }
.agenda-past-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 0; color: #aaa; font-size: 12px; border-bottom: 1px solid #282828; text-align: left; }
.agenda-past-toggle span { padding: 0 5px; background: #252525; font-size: 10px; border-radius: 2px; }
.agenda-past-toggle svg:last-child { margin-left: auto; }
.agenda-past-toggle[aria-expanded=true] svg:last-child { transform: rotate(180deg); }
.agenda-list ol { padding: 0; list-style: none; }
.agenda-group-date { padding: 24px 0 10px; font-size: 16px; }
.agenda-group-date::first-letter { text-transform: uppercase; }
.agenda-appointment { display: grid; grid-template-columns: 88px minmax(0,1fr) 44px; gap: 0 20px; padding: 16px 0; border-bottom: 1px solid #ffffff0e; position: relative; align-items: center; }
.agenda-appointment.current { background: linear-gradient(90deg,#ffffff0c,transparent 80%); border-left: 2px solid #eee; border-radius: 8px; padding-left: 13px; margin-left: -15px; }
.agenda-appointment.is-next { border-left: 2px solid #656565; padding-left: 13px; margin-left: -15px; }
.agenda-time { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; align-self: start; padding-top: 5px; }
.agenda-time time { font-size: 26px; font-weight: 500; letter-spacing: -.6px; line-height: 1.25; }
.agenda-time > span { font-size: 12px; color: #9c9c9c; margin-top: 5px; }
.agenda-row-toggle { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; min-height: 55px; width: 100%; padding: 3px 23px 3px 0; text-align: left; }
.agenda-name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 12px; }
.agenda-name-line > strong { font-size: 21px; font-weight: 550; line-height: 1.35; overflow-wrap: anywhere; }
.agenda-detail-chevron { position: absolute; right: 0; top: calc(50% - 8px); color: #999; }
.agenda-row-toggle[aria-expanded=true] .agenda-detail-chevron { transform: rotate(180deg); }
.agenda-row-toggle:hover .agenda-name-line > strong { color: #fff; }
.agenda-status { font-size: 10px; color: #b5b5b5; padding: 2px 6px; background: #252525; border-radius: 5px; white-space: nowrap; }
.agenda-status.current { color: #111; background: #e8e8e6; }
.agenda-service { color: #aaa; font-size: 12px; }
.agenda-note-indicator { color: #c6c6c6; }
.agenda-call { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff20; border-radius: 9px; background: linear-gradient(145deg, #252525, #161616); color: #c9c9c9; text-decoration: none; }
.agenda-call:hover { color: #fff; background: #2b2b2b; border-color: #777; }
.agenda-detail { grid-column: 2 / -1; border-top: 1px solid #333; margin-top: 13px; padding-top: 10px; }
.agenda-detail[hidden] { display: none; }
.agenda-detail-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.agenda-detail-contact > span:last-child { font-size: 12px; color: #aaa; }
.agenda-phone { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; color: #ddd; text-decoration: none; }
a.agenda-phone:hover { text-decoration: underline; }
.agenda-note { font-size: 14px; color: #ddd; overflow-wrap: anywhere; white-space: pre-wrap; margin-top: 8px; }
.agenda-note > span { display: block; font-size: 10px; color: #999; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .6px; }
.agenda-detail .agenda-cancel { min-height: 44px; font-size: 12px; color: #aaa; margin-top: 8px; }
.agenda-appointment:is(.past,.cancelled) .agenda-time time, .agenda-appointment:is(.past,.cancelled) .agenda-name-line > strong { color: #999; }
.agenda-appointment.cancelled .agenda-time time { text-decoration: line-through; }
.agenda-gap { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 0; border-bottom: 1px dashed #303030; color: #979797; font-size: 11px; }
.agenda-gap > span:first-child { font-variant-numeric: tabular-nums; min-width: 96px; }
.agenda-gap strong { font-weight: 400; color: #bcbcbc; margin-left: 7px; }
.agenda-empty { padding: 34px 18px; text-align: center; color: #aaa; }
.agenda-empty > svg { margin: 0 auto 13px; }
.agenda-empty h3 { font-size: 20px; color: #eee; }
.agenda-empty p { font-size: 14px; margin: 10px 0 20px; }
.agenda-empty .secondary { display: inline-flex; }
.agenda-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 7px 15px; padding-block: 16px; font-size: 10px; color: #999; }
.agenda-footer > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.agenda-preview-banner { padding: 10px 0; border-bottom: 1px solid #333; color: #aaa; font-size: 11px; }
.agenda-preview-banner strong { color: #ddd; font-weight: 550; }
.agenda-preview .staff-header { min-height: 76px; padding-block: 14px; flex-wrap: nowrap; }
.agenda-preview .staff-header nav { width: auto; }
.agenda-preview .hero .eyebrow { display: none; }
.regular-hours { margin-bottom: 20px; border: 1px solid transparent; border-radius: 16px; background: radial-gradient(ellipse at 0% 0%, #262626 0%, #171717 34%, #101010 75%) padding-box, linear-gradient(140deg, #777 0%, #383838 25%, #242424 62%, #505050 100%) border-box; box-shadow: 0 8px 26px #0003, inset 0 1px 0 #ffffff08; }
.regular-hours-toggle { display: flex; align-items: center; gap: 14px; min-height: 84px; width: 100%; padding: 18px 24px; text-align: left; border-radius: inherit; }
.regular-hours-icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; color: #ccc; border: 1px solid #ffffff18; border-radius: 10px; background: #ffffff04; }
.regular-hours-title { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 5px; }
.regular-hours-title strong { font-size: 15px; font-weight: 500; }
.regular-hours-title > span { font-size: 12px; color: #aaa; }
.regular-hours-edit { display: flex; align-items: center; gap: 10px; color: #ccc; font-size: 12px; }
.regular-hours-toggle[aria-expanded=true] .regular-hours-edit svg { transform: rotate(180deg); }
.regular-hours form { border-top: 1px solid #ffffff12; padding: 20px 24px 24px; }
.regular-hours-description { font-size: 12px; color: #aaa; line-height: 1.7; margin-bottom: 18px; }
.regular-hours fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.regular-hours legend { font-size: 13px; margin-bottom: 12px; }
.regular-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; max-width: 540px; }
.regular-days label { display: grid; place-items: center; min-height: 46px; position: relative; cursor: pointer; border: 1px solid #ffffff22; border-radius: 8px; background: linear-gradient(145deg, #252525, #161616); font-size: 13px; }
.regular-days label.checked { color: #111; background: linear-gradient(145deg, #fff, #cecece); border-color: #efefed; }
.regular-days input { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; clip-path: inset(50%); overflow: hidden; }
.regular-days label:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }
.regular-times { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; max-width: 540px; margin-top: 20px; }
.regular-times label { font-size: 13px; color: #ccc; min-width: 0; }
.regular-times input { width: 100%; min-width: 0; min-height: 48px; font-size: 16px; margin-top: 8px; border: 1px solid #ffffff26; border-radius: 9px; background: #0c0c0c99; box-shadow: inset 0 2px 8px #0002; }
.regular-hours-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 18px; border-top: 1px solid #ffffff12; }
.regular-hours .primary, .regular-hours .secondary { border-radius: 9px; min-height: 48px; font-size: 13px; }
.regular-hours .primary { color: #111; border-color: #efefed; background: linear-gradient(145deg, #fff, #d3d3d3); box-shadow: 0 3px 12px #0003; }
.regular-hours .secondary { color: #ddd; border-color: #ffffff35; }
.regular-hours .primary:hover:not(:disabled) { background: #fff; }
.regular-hours-error { padding: 15px; margin-block: 18px; border: 1px solid #ffffff25; border-left: 2px solid #ddd; border-radius: 9px; background: #ffffff05; font-size: 13px; line-height: 1.6; }
.regular-hours-error ul { padding: 0; list-style: none; margin-top: 10px; }
.regular-hours-error li { display: flex; flex-wrap: wrap; gap: 5px 15px; padding-block: 6px; border-top: 1px solid #ffffff10; }
.regular-hours-error li span { color: #bbb; }
.regular-hours-error li strong { font-weight: 500; }
.regular-hours-error .secondary { margin-top: 10px; }
.regular-hours-notice { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #ccc; margin: 0 24px 18px; line-height: 1.6; }
.regular-hours-notice svg { flex-shrink: 0; }
@media(max-width:800px) {
  .agenda-controls { align-items: flex-start; flex-direction: column; gap: 14px; }
  .agenda-search { max-width: none; flex-basis: 100%; }
  .agenda-appointment { grid-template-columns: 76px minmax(0,1fr) 44px; gap: 0 14px; }
  .agenda-gap > span:first-child { min-width: 78px; }
}
@media(max-width:560px) {
  .regular-hours { margin-inline: -6px; }
  .regular-hours-toggle { padding: 16px 14px; gap: 10px; }
  .regular-hours-icon { width: 32px; height: 36px; }
  .regular-hours-title strong { font-size: 14px; }
  .regular-hours-edit { gap: 5px; font-size: 11px; }
  .regular-hours form { padding: 18px 16px; }
  .regular-days { gap: 5px; }
  .regular-times { gap: 12px; }
  .regular-hours-actions { justify-content: space-between; }
  .regular-hours-actions .primary { flex: 1; }
  .regular-hours-notice { margin-inline: 16px; }
  .staff-app .wrap { width: calc(100% - 36px); }
  .staff-header { padding-block: 16px 10px; }
  .staff-header nav { gap: 4px 18px; font-size: 12px; }
  .agenda-preview .brand-icon { width: 34px; height: 34px; }
  .agenda-preview .brand-wordmark { font-size: 20px; }
  .agenda-preview .staff-header nav a { font-size: 11px; }
  .staff-app .hero { padding-block: 20px; }
  .owner-agenda { padding-inline: 14px; margin-inline: -6px; border-radius: 16px; }
  .agenda-workspace { padding: 16px 12px; border-radius: 11px; }
  .agenda-live-heading { padding-top: 15px; }
  .agenda-kicker { font-size: 9px; letter-spacing: .7px; }
  .agenda-sync { font-size: 10px; }
  .agenda-focus { gap: 16px; padding: 16px 12px; border-radius: 11px; }
  .agenda-focus-next { padding-left: 16px; }
  .agenda-focus-button strong { font-size: 21px; letter-spacing: -.3px; }
  .agenda-focus-button > span { font-size: 12px; }
  .agenda-focus small { font-size: 10px; }
  .agenda-focus-empty { font-size: 17px; }
  .agenda-controls { gap: 12px; }
  .agenda-controls h2 { font-size: 21px; }
  .agenda-date-controls { width: 100%; gap: 6px; }
  .agenda-date-controls label { flex: 1; min-width: 0; }
  .agenda-date-controls input { width: 100%; padding-inline: 7px; font-size: 12px; }
  .agenda-date-controls .secondary { padding-inline: 13px; }
  .agenda-week { grid-template-columns: 22px repeat(7,minmax(0,1fr)) 22px; gap: 2px; margin: 14px -5px 0; }
  .agenda-day strong { font-size: 21px; }
  .agenda-day small span { display: none; }
  .agenda-day-summary { justify-content: space-between; gap: 6px 12px; font-size: 11px; padding-block: 10px 12px; }
  .agenda-day-summary strong { margin-left: 3px; }
  .agenda-tabs { width: 100%; justify-content: space-between; gap: 2px; }
  .agenda-tabs button { font-size: 11px; padding-inline: 5px; }
  .agenda-appointment { grid-template-columns: 65px minmax(0,1fr) 40px; gap: 0 12px; padding-block: 13px; }
  .agenda-time time { font-size: 23px; }
  .agenda-name-line > strong { font-size: 19px; }
  .agenda-call { width: 40px; height: 44px; }
  .agenda-row-toggle { padding-right: 17px; }
  .agenda-service { font-size: 11px; }
  .agenda-appointment.current, .agenda-appointment.is-next { margin-left: -10px; padding-left: 8px; }
  .agenda-gap { gap: 8px; font-size: 10px; }
  .agenda-gap > span:first-child { min-width: 69px; }
  .agenda-gap strong { margin-left: 4px; }
  .agenda-detail { grid-column: 1 / -1; margin-top: 12px; padding: 9px 0 0 77px; }
}
@media(max-width:380px) {
  .agenda-preview .brand { gap: 8px; }
  .agenda-preview .brand-icon { width: 28px; height: 28px; }
  .agenda-preview .brand-wordmark { font-size: 18px; }
  .agenda-focus-button strong { font-size: 19px; }
  .agenda-focus { gap: 12px; }
  .agenda-focus-next { padding-left: 12px; }
  .agenda-appointment { grid-template-columns: 57px minmax(0,1fr) 40px; gap: 0 8px; }
  .agenda-name-line > strong { font-size: 17px; }
  .agenda-detail { padding-left: 65px; }
}

.owner-preview-nav { display: flex; gap: 24px; margin-bottom: 22px; border-bottom: 1px solid #333; }
.owner-preview-nav button { min-height: 44px; padding: 8px 0 12px; font-size: 13px; color: #aaa; border-bottom: 2px solid transparent; }
.owner-preview-nav button[aria-pressed=true] { color: #fff; border-color: #eee; }
.owner-schedule { position: relative; isolation: isolate; padding: 24px; border: 1px solid transparent; border-radius: 20px; background: radial-gradient(ellipse at 0% 0%, #262626 0%, #171717 34%, #101010 75%) padding-box, linear-gradient(140deg, #777 0%, #383838 25%, #242424 62%, #505050 100%) border-box; box-shadow: 0 24px 65px #0006, inset 0 1px 0 #ffffff08; }
.owner-schedule::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: url('/topography.svg') center top / 1100px auto; opacity: .12; mask-image: linear-gradient(135deg, #000, transparent 65%); pointer-events: none; z-index: 0; }
.owner-schedule > :not(dialog) { position: relative; z-index: 1; }
.owner-schedule .section-heading { margin-bottom: 28px; }
.owner-schedule .section-heading h2 { font-size: 24px; }
.owner-schedule .section-heading .section-description { max-width: 550px; line-height: 1.6; }
.owner-schedule .schedule-layout { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 28px; align-items: start; padding: 22px; border: 1px solid #ffffff12; border-radius: 14px; background: linear-gradient(145deg, #111111ed, #090909ed); box-shadow: inset 0 1px 0 #ffffff05, 0 8px 26px #0002; }
.owner-month-calendar { min-width: 0; }
.owner-month-calendar .month-toolbar { gap: 8px; margin-bottom: 12px; }
.owner-month-calendar .month-toolbar h3 { font-size: 21px; }
.owner-month-calendar .month-navigation { gap: 6px; }
.owner-schedule .icon-button { width: 44px; height: 44px; min-width: 44px; border: 1px solid #ffffff20; border-radius: 9px; background: #ffffff04; color: #bdbdbd; }
.owner-month-calendar .month-navigation .icon-button { border: 1px solid #ffffff13; border-radius: 50%; background: linear-gradient(145deg, #262626, #171717); color: #eee; box-shadow: inset 0 1px 0 #ffffff07; }
.owner-month-calendar .month-navigation .icon-button:hover:not(:disabled) { background: #343434; }
.owner-month-calendar .month-navigation .icon-button:disabled { background: #161616; opacity: .38; }
.owner-calendar-key { display: flex; flex-wrap: wrap; gap: 7px 18px; color: #999; font-size: 10px; margin-bottom: 22px; }
.owner-calendar-key > span:first-child { display: flex; align-items: center; gap: 7px; color: #ddd; }
.owner-calendar-key i { width: 7px; height: 7px; border-radius: 50%; background: #eee; }
.owner-month-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.owner-month-day,.owner-month-spacer { min-height: 93px; min-width: 0; border-top: 1px solid #ffffff0d; }
.owner-month-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; position: relative; padding: 8px 0 6px; }
.owner-date-number { display: grid; place-items: center; width: 38px; max-width: 100%; height: 38px; font-size: 21px; font-weight: 500; border-radius: 50%; transition: background .18s, color .18s; }
.owner-month-day.today .owner-date-number { outline: 1px solid #777; }
.owner-month-day.has-bookings { background: linear-gradient(#ffffff09,transparent); }
.owner-day-count { min-height: 18px; font-size: 10px; color: #aaa; display: inline-flex; align-items: center; gap: 2px; }
.owner-day-count b { color: #111; background: linear-gradient(145deg, #eee, #bcbcbc); border-radius: 5px; font-size: 11px; min-width: 18px; min-height: 18px; display: grid; place-items: center; font-weight: 600; padding: 1px 3px; }
.owner-no-bookings { color: #777; }
.owner-day-off { font-size: 9px; color: #999; }
.owner-month-day.selected { background: linear-gradient(#ffffff09, transparent); }
.owner-month-day.selected .owner-date-number { color: #101010; background: linear-gradient(145deg, #fff, #cdcdcd); outline: none; box-shadow: 0 0 0 4px #ffffff07, 0 3px 13px #0005; }
.owner-month-day.elapsed:not(.selected) .owner-date-number { color: #777; }
.owner-month-day:disabled { opacity: .35; }
.owner-month-day:hover:not(:disabled):not(.selected) .owner-date-number { background: #303030; color: #fff; }
.owner-month-day:focus-visible { outline: 1px solid #eee; outline-offset: -3px; border-radius: 6px; }
.owner-selected-day { padding-left: 28px; min-width: 0; background: linear-gradient(180deg, #ffffff29, #ffffff0a 75%, transparent) left top / 1px 100% no-repeat; }
.owner-day-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.owner-day-heading h3 { font-size: 22px; line-height: 1.4; margin-top: 6px; }
.owner-day-heading h3::first-letter { text-transform: uppercase; }
.owner-reservation-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 0 8px; border-bottom: 1px solid #ffffff1c; }
.owner-reservation-heading h4 { font-size: 14px; font-weight: 500; }
.owner-reservation-heading .text-button { min-height: 44px; font-size: 11px; }
.owner-booking-list { margin: 0; padding: 0; list-style: none; }
.owner-booking-list > li { border-bottom: 1px solid #ffffff0e; }
.owner-booking-row { display: grid; grid-template-columns: 57px minmax(0,1fr) auto; gap: 11px; align-items: center; padding-block: 13px; }
.owner-booking-time { display: flex; flex-direction: column; gap: 5px; font-variant-numeric: tabular-nums; }
.owner-booking-time strong { font-size: 21px; font-weight: 500; }
.owner-booking-time small { font-size: 10px; color: #999; }
.owner-booking-person { text-align: left; min-width: 0; min-height: 44px; }
.owner-booking-person strong { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.owner-booking-person > span { margin-top: 4px; display: flex; align-items: center; gap: 5px; font-size: 10px; color: #999; }
.owner-booking-person svg { flex-shrink: 0; }
.owner-booking-person[aria-expanded=true] svg { transform: rotate(180deg); }
.owner-cancel-link { min-height: 44px; min-width: 44px; font-size: 11px; color: #bbb; text-decoration: underline; text-decoration-color: #666; text-underline-offset: 4px; }
.owner-cancel-link:hover { color: #fff; }
.owner-booking-detail { padding: 0 0 15px 68px; color: #ccc; font-size: 13px; }
.owner-booking-detail > a,.owner-booking-detail > span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #eee; text-decoration: none; }
.owner-booking-detail p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.owner-booking-list .elapsed { color: #999; }
.owner-booking-list .schedule-conflict { box-shadow: -2px 0 0 #bdbdbd; background: linear-gradient(90deg, #ffffff0c, transparent); border-radius: 6px; }
.owner-booking-list .schedule-conflict .owner-booking-person > span { color: #ddd; }
.owner-day-empty { font-size: 13px; line-height: 1.6; padding: 22px 0; color: #aaa; }
.owner-cancelled { margin-top: 12px; color: #999; font-size: 11px; }
.owner-cancelled summary { cursor: pointer; min-height: 44px; padding-block: 13px; }
.owner-cancelled p { display: flex; justify-content: space-between; gap: 10px; padding-block: 10px; border-bottom: 1px solid #292929; }
.owner-hours { margin-top: 18px; border-top: 0; background: linear-gradient(90deg, #ffffff24, #ffffff08) left top / 100% 1px no-repeat; }
.owner-hours > summary { display: flex; align-items: center; justify-content: space-between; min-height: 55px; cursor: pointer; font-size: 15px; list-style: none; }
.owner-hours > summary::-webkit-details-marker { display: none; }
.owner-hours[open] > summary svg { transform: rotate(180deg); }
.owner-schedule .day-editor { border: 0; padding: 0; }
.owner-schedule .day-editor fieldset { margin-bottom: 18px; }
.owner-schedule .schedule-option { margin-block: 5px; padding: 12px; border: 1px solid transparent; border-radius: 9px; }
.owner-schedule .schedule-option.active { border-color: #ffffff1d; background: linear-gradient(145deg, #292929, #191919); box-shadow: inset 0 1px 0 #ffffff06; }
.owner-schedule .schedule-option:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.owner-schedule .schedule-option small { font-size: 11px; margin-top: 4px; }
.owner-schedule .subtle-note { font-size: 11px; line-height: 1.65; }
.owner-schedule .saved-message { margin-top: 18px; padding-block: 12px; font-size: 13px; line-height: 1.6; border-top: 1px solid #777; }
.owner-conflict-notice { border: 1px solid #ffffff20; border-left: 2px solid #ddd; border-radius: 9px; background: linear-gradient(145deg, #292929, #191919); padding: 14px; margin-block: 15px; font-size: 12px; line-height: 1.6; }
.owner-conflict-notice strong { font-weight: 500; color: #fff; }
.owner-conflict-notice p { color: #ddd; margin-block: 8px; }
.owner-conflict-notice > span { color: #aaa; }
.owner-schedule .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.owner-schedule .primary, .owner-schedule .secondary { min-height: 48px; border-radius: 9px; font-size: 14px; }
.owner-schedule .primary { background: linear-gradient(145deg, #fff, #d3d3d3); border-color: #efefed; color: #111; box-shadow: inset 0 1px 0 #fff5, 0 3px 12px #0003; }
.owner-schedule .primary:hover:not(:disabled) { background: #fff; }
.owner-schedule .secondary { color: #ddd; border-color: #ffffff35; }
.owner-schedule .secondary:hover:not(:disabled) { background: #272727; }
.owner-schedule .day-hours input { min-width: 0; font-size: 16px; min-height: 48px; background: #0c0c0c99; border-color: #ffffff26; border-radius: 9px; box-shadow: inset 0 2px 8px #0002; }
.owner-schedule .modal { border: 1px solid #ffffff35; border-radius: 16px; background: radial-gradient(ellipse at 0% 0%, #262626, #111 80%); box-shadow: 0 24px 65px #0008; }
@media(max-width:850px) {
  .owner-schedule .schedule-layout { grid-template-columns: 1fr; gap: 28px; }
  .owner-selected-day { padding: 24px 0 0; background: linear-gradient(90deg, #ffffff29, #ffffff0a 75%, transparent) left top / 100% 1px no-repeat; }
  .owner-month-day,.owner-month-spacer { min-height: 88px; }
}
@media(max-width:560px) {
  .owner-schedule { padding: 20px 14px; margin-inline: -6px; border-radius: 16px; }
  .owner-schedule .schedule-layout { padding: 16px 12px; border-radius: 11px; }
  .owner-schedule .section-heading h2 { font-size: 21px; }
  .owner-schedule .section-heading .eyebrow { display: none; }
  .owner-month-calendar .month-toolbar h3 { font-size: 22px; }
  .owner-calendar-key { font-size: 10px; gap: 5px 10px; }
  .owner-month-day,.owner-month-spacer { min-height: 88px; }
  .owner-date-number { font-size: 21px; }
  .owner-day-heading h3 { font-size: 23px; }
  .owner-booking-row { grid-template-columns: 65px minmax(0,1fr) auto; gap: 12px; }
  .owner-booking-person strong { font-size: 17px; }
  .owner-booking-time strong { font-size: 23px; }
  .owner-booking-detail { padding-left: 77px; }
}
@media(prefers-reduced-motion:reduce) {
  .owner-date-number { transition: none; }
}

.launch-page { min-height: 100svh; display: flex; flex-direction: column; padding-top: 32px; }
.launch-page > .brand { align-self: flex-start; }
.launch-card { margin: auto 0; padding: clamp(28px, 6vw, 64px); border: 1px solid transparent; border-radius: 24px; background: radial-gradient(ellipse at 0% 0%, #292929, #121212 75%) padding-box, linear-gradient(140deg, #777, #292929 65%, #505050) border-box; box-shadow: 0 24px 65px #0006; }
.launch-card h1 { font-size: clamp(28px, 5vw, 48px); letter-spacing: -1px; line-height: 1.15; }
.launch-card > p { color: #bcbcbc; margin: 20px 0; line-height: 1.6; }
.launch-card .success-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0; }
.launch-card .launch-address { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 0; }
@media (max-width: 600px) { .launch-page { gap: 36px; } .launch-card { border-radius: 18px; } }

.owner-access-page { max-width: 500px; padding: 32px 0; }
.owner-access-page > .brand { margin-bottom: 30px; text-decoration: none; }
.owner-access-card { padding: 32px; border: 1px solid transparent; border-radius: 22px; background: radial-gradient(ellipse at 0% 0%, #292929, #121212 75%) padding-box, linear-gradient(140deg, #777, #292929 65%, #505050) border-box; box-shadow: 0 24px 65px #0006; }
.auth-icon { display: inline-flex; padding: 13px; border: 1px solid #ffffff20; border-radius: 14px; background: #ffffff06; margin-bottom: 25px; }
.owner-access-card h1 { font-size: 29px; line-height: 1.2; letter-spacing: -.7px; margin: 8px 0 12px; }
.owner-access-card p { color: #b9b9b9; line-height: 1.6; font-size: 14px; }
.owner-access-card form { display: grid; gap: 18px; margin-top: 26px; }
.owner-access-card label { display: grid; gap: 8px; font-size: 13px; color: #ddd; }
.owner-access-card input:not([type=checkbox]) { width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid #555; border-radius: 9px; background: #0c0c0c; color: #fff; font-size: 16px; }
.password-input { display: flex; position: relative; }
.password-input input { padding-right: 46px !important; }
.password-input button { position: absolute; right: 0; top: 0; width: 44px; height: 48px; display: grid; place-items: center; }
.owner-access-card small { color: #aaa; line-height: 1.5; margin-top: -10px; }
.owner-access-card .primary { width: 100%; justify-content: center; border-radius: 9px; min-height: 48px; }
.auth-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; text-decoration: none; margin-top: 25px; color: #aaa; }
.auth-footer { text-align: center; color: #777; font-size: 12px; margin-top: 25px; }
.owner-access-card .auth-error { padding: 12px; border: 1px solid #a66; border-radius: 8px; color: #ffd5d5; background: #9e444419; }
.recovery-code { display: block; overflow-wrap: anywhere; border: 1px solid #555; padding: 16px; margin: 22px 0 16px; border-radius: 9px; line-height: 1.7; font-variant-numeric: tabular-nums; }
.owner-access-card .auth-check { display: flex; align-items: center; gap: 10px; margin: 24px 0; }
.auth-check input { width: 18px; height: 18px; accent-color: white; }
.auth-notice { margin-top: 25px; }
@media(max-width:520px) { .owner-access-page { width: calc(100% - 32px); padding-top: 24px; } .owner-access-card { padding: 24px; } }