/* Web glass treatment inspired by Apple's layered materials, not a native Apple renderer. */
:root {
  --glass-fill: rgb(15 18 24 / .72);
  --glass-solid: #151920;
  --glass-stroke: rgb(242 243 244 / .18);
  --glass-highlight: rgb(242 243 244 / .30);
  --glass-shadow: 0 12px 38px rgb(0 0 0 / .24);
  --client-nav-space: calc(110px + env(safe-area-inset-bottom, 0px));
}
.app-icon { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.75; }
.ui-root svg { stroke-width: 1.75; }
.glass-panel, .glass-control, .workspace-mobile-tabs, .calendar-popover, .schedule-filter-sheet, .workspace-mobile-sheet, .appointment-dialog, .mobile-public-action {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--glass-stroke);
  box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgb(255 255 255 / .04), var(--glass-shadow);
}
.ui-v2.with-client-tabs { padding-bottom: var(--client-nav-space); }
.with-client-tabs .auto-footer { padding-bottom: 28px; }
.client-tabs {
  position: fixed; z-index: var(--z-sticky); left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: 560px; margin-inline: auto; min-height: 78px; padding: 6px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  border-radius: 28px;
}
.client-tabs > :is(a,span) { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 64px; gap: 5px; padding: 7px 2px; border-radius: 22px; color: var(--color-ink); font-size: 11px; font-weight: 550; line-height: 1.3; transition: background-color 150ms var(--ease-out), transform 150ms var(--ease-out); }
.client-tabs .app-icon { width: 23px; height: 23px; }
.client-tabs > a:hover { background: rgb(242 243 244 / .07); }
.client-tabs > a:active { transform: scale(.95); }
.client-tabs > a[aria-current="page"] { background: rgb(242 243 244 / .12); box-shadow: inset 0 1px 0 rgb(242 243 244 / .12); }
.client-tabs > .client-book-tab { color: var(--color-accent-ink); background: var(--color-accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35); }
.client-tabs > .client-book-tab:hover, .client-tabs > .client-book-tab[aria-current="page"] { background: var(--color-focus); }
.client-tabs > .tab-disabled { color: var(--color-muted); }
.client-tabs a:focus-visible, .auth-card :is(a,button):focus-visible, .account-menu a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.studio-public .auto-my-booking { padding-inline: 15px; color: var(--color-ink); }
.studio-public .auto-button > span[aria-hidden] { width: 32px; height: 32px; }
.studio-public .auto-button > span[aria-hidden] .app-icon { width: 18px; height: 18px; }
.studio-public .auto-service-book > .app-icon { width: 17px; height: 17px; color: var(--color-ink); }
.auto-location > .app-icon:last-child { margin-left: auto; }
.auto-location > span { flex: 1; }
.auto-footer-links .app-icon, .auto-powered .app-icon, .auto-demo .app-icon { width: 15px; height: 15px; }
.auto-install summary .app-icon { width: 17px; height: 17px; }
.auto-install details[open] summary > .app-icon { transform: rotate(45deg); }
.ui-v2.with-client-tabs.has-booking-flow { padding-bottom: calc(var(--client-nav-space) + 146px); }
.with-client-tabs.has-booking-flow .booking-actionbar {
  left: 12px; right: 12px; bottom: var(--client-nav-space); max-width: 656px; margin-inline: auto;
  padding: 12px; border-radius: 24px; border: 1px solid var(--glass-stroke);
  background: var(--glass-fill); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
}
.with-client-tabs.has-booking-flow .booking-action-buttons [data-slot="button"] { padding-inline: 12px; font-size: 14px; }
.with-client-tabs.has-booking-flow .booking-action-meta { margin-bottom: 10px; }
.with-client-tabs.has-booking-flow .booking-action-meta > span { max-width: 63%; }
.with-client-tabs .confirmation-mark > .app-icon { width: 32px; height: 32px; }
.workspace-mobile-tabs { border-radius: 26px; }
.workspace-mobile-tabs [aria-current="page"] { background: rgb(242 243 244 / .12); }
.workspace-mobile-tabs :is(a,button) { color: var(--color-ink); }
.workspace-mobile-tabs .mobile-add-booking { background: var(--color-accent); color: var(--color-accent-ink); }
.workspace-topbar { background: var(--glass-fill); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border-bottom-color: var(--glass-stroke); }
.workspace-mobile-sheet .workspace-nav { background: transparent; }
.workspace-mobile-sheet { --color-background-body: transparent; --color-background-surface: transparent; }
.ap-symbol > svg { position: absolute; width: 19px; height: 19px; right: -9px; top: -6px; color: var(--color-accent); }
.account-page .site-header { min-height: 76px; }
.account-shell { overflow-wrap: anywhere; width: min(100% - 40px, 480px); margin: 16px auto 40px; }
.auth-intro { margin-bottom: 28px; }
.auth-intro h1 { margin: 12px 0 10px; font-size: clamp(28px, 7.8vw, 36px); line-height: 1.15; letter-spacing: -.045em; font-weight: 650; }
.auth-intro p { color: var(--color-muted); font-size: 14px; line-height: 1.6; }
.account-emblem { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 22px; border-radius: 22px; background: var(--color-paper-2); border: 1px solid var(--glass-stroke); box-shadow: inset 0 1px 0 var(--glass-highlight); color: var(--color-accent); }
.account-emblem .app-icon { width: 27px; height: 27px; }
.auth-card { display: grid; gap: 22px; padding: 22px; border: 1px solid var(--color-grid); border-radius: 24px; background: var(--color-paper-2); }
.auth-card fieldset { display: grid; gap: 22px; padding: 0; margin: 0; border: 0; min-width: 0; }
.auth-card fieldset + fieldset { padding-top: 24px; border-top: 1px solid var(--color-rule); }
.auth-card legend { margin-bottom: 20px; font-size: 17px; font-weight: 650; }
.auth-field { display: grid; gap: 8px; min-width: 0; }
.auth-field > label { font-size: 13px; font-weight: 600; }
.auth-field :is(input,select) { width: 100%; min-width: 0; min-height: 52px; border: 1px solid var(--color-rule); border-radius: 14px; background: var(--color-paper-inset); color: var(--color-ink); padding: 12px 14px; font-size: 16px; }
.auth-field input:focus-visible, .auth-field select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.auth-field.has-error input { border-color: var(--color-error); }
.auth-help, .auth-help p { margin: 0; font-size: 12px; line-height: 1.65; color: var(--color-muted); }
.auth-help a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.auth-errors, .auth-errors ul { padding: 0; margin: 0; list-style: none; color: var(--color-error); font-size: 13px; line-height: 1.55; }
.auth-demo { color: var(--color-muted); font-size: 12px; line-height: 1.6; padding: 16px; background: var(--color-paper-2); border-radius: 16px; margin-bottom: 20px; }
.auth-switch { margin-top: 24px; text-align: center; font-size: 13px; color: var(--color-muted); }
.auth-switch a { display: inline-flex; align-items: center; min-height: 48px; color: var(--color-accent); }
.auth-footnote { text-align: center; color: var(--color-muted); font-size: 12px; margin-top: 10px; }
.auth-card .button { min-height: 54px; border-radius: 16px; gap: 12px; font-size: 14px; }
.password-input { position: relative; }
.password-input input { padding-right: 56px; }
.password-toggle { position: absolute; right: 3px; top: 2px; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 12px; color: var(--color-muted); background: transparent; cursor: pointer; }
.password-visible-icon { display: none; }
.password-toggle[aria-pressed="true"] > .app-icon { display: none; }
.password-toggle[aria-pressed="true"] > .password-visible-icon { display: block; }
.account-menu { background: var(--color-paper-2); padding: 4px 20px; border-radius: 22px; border: 1px solid var(--color-grid); }
.account-menu a { display: flex; align-items: center; gap: 14px; min-height: 68px; border-bottom: 1px solid var(--color-grid); font-size: 14px; }
.account-menu a:last-child { border: 0; }
.account-menu a > span { flex: 1; }
.account-menu a > .app-icon:last-child { width: 17px; color: var(--color-muted); }
.account-sign-out { margin-top: 20px; }
.account-sign-out .button { width: 100%; min-height: 54px; border-radius: 16px; }
.account-page .site-footer { max-width: 480px; border: 0; font-size: 11px; }
.visit-list { display: grid; gap: 12px; margin-top: 28px; }
.visit-list h2 { font-size: 19px; letter-spacing: -.03em; font-weight: 600; margin: 0 0 6px; }
.client-visit-card { display: block; padding: 20px; background: var(--color-paper-2); border-radius: 22px; border: 1px solid var(--color-grid); }
.client-visit-date { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.client-visit-date strong { flex: 1; font-weight: 600; }
.client-visit-date > .app-icon { width: 17px; height: 17px; color: var(--color-accent); }
.client-visit-card h3 { font-size: 17px; line-height: 1.4; margin-top: 18px; font-weight: 600; }
.client-visit-card p { color: var(--color-muted); font-size: 12px; line-height: 1.6; margin-top: 6px; }
.client-visit-price { display: block; font-size: 16px; margin-top: 18px; }
.client-empty { padding: 30px 22px; background: var(--color-paper-2); border-radius: 24px; display: grid; gap: 16px; }
.client-empty > .app-icon { width: 30px; height: 30px; color: var(--color-accent); }
.client-empty h2 { font-size: 23px; letter-spacing: -.035em; line-height: 1.25; }
.client-empty p { font-size: 14px; line-height: 1.6; color: var(--color-muted); }
.client-empty .button { border-radius: 14px; min-height: 52px; }
.browser-visit { background: var(--color-paper-2); border-radius: 22px; padding: 20px; margin-bottom: 24px; }
.browser-visit > span { color: var(--color-muted); font-size: 12px; }
.browser-visit > a { display: block; padding-block: 14px; }
.browser-visit > a strong { font-size: 18px; }
.browser-visit > a p { margin-top: 8px; font-size: 14px; }
.browser-visit > a > .app-icon { margin-top: 12px; color: var(--color-accent); }
.header-signup { color: var(--color-accent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel, .glass-control, .workspace-mobile-tabs, .calendar-popover, .schedule-filter-sheet, .workspace-mobile-sheet, .appointment-dialog, .mobile-public-action, .workspace-topbar, .with-client-tabs.has-booking-flow .booking-actionbar { background: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-panel, .glass-control, .workspace-mobile-tabs, .calendar-popover, .schedule-filter-sheet, .workspace-mobile-sheet, .appointment-dialog, .mobile-public-action, .workspace-topbar, .with-client-tabs.has-booking-flow .booking-actionbar { background: var(--glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .client-tabs > a { transition: none; transform: none; }
}
@media (min-width: 1024px) {
  .account-shell { margin-top: 48px; }
  .client-tabs { max-width: 520px; }
  .with-client-tabs.has-booking-flow .booking-actionbar { position: static; padding: 24px 0 0; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; margin-top: 28px; }
  .ui-v2.with-client-tabs.has-booking-flow { padding-bottom: var(--client-nav-space); }
}

.account-page .public-header-links { display: none; }
.public-header-links a { gap: 8px; }

.has-booking-flow .site-footer { display: none; }
html:has(.with-client-tabs.has-booking-flow) { scroll-padding-bottom: calc(var(--client-nav-space) + 146px); }
.has-booking-flow :is(input, button, .booking-consent) { scroll-margin-bottom: calc(var(--client-nav-space) + 146px); }