:root {
  --font-sans:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --radius-sm: 6px;
  --radius-md: 8px;
  --shadow-soft: 0 18px 42px rgba(128, 109, 191, 0.12);
  --shadow-pro: 0 18px 42px rgba(76, 139, 121, 0.13);
  --surface: rgba(255, 255, 255, 0.94);
  --text: #292434;
  --muted: #766f82;
  --line: #e7e0f0;
  --bg: #fbf9ff;
  --accent: #c6bed8;
  --accent-strong: #67549a;
  --accent-soft: #f3e8ff;
  --customer-secondary: #76a6ad;
  --pro-bg: #f6fcf9;
  --pro-surface: rgba(255, 255, 255, 0.95);
  --pro-text: #21322e;
  --pro-muted: #667c77;
  --pro-line: #d8eee6;
  --pro-accent: #cdeddc;
  --pro-accent-strong: #4f927d;
  --pro-accent-soft: #e8f7f1;
  --pro-gold: #7d6aa8;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 0;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--text);
  background:
    radial-gradient(
      circle at 7% 8%,
      rgba(199, 182, 230, 0.34),
      transparent 34%
    ),
    radial-gradient(
      circle at 92% 0%,
      rgba(205, 237, 220, 0.54),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.92),
      rgba(242, 236, 250, 0.62)
    ),
    var(--bg);
}

body.pro-mode {
  color: var(--pro-text);
  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(205, 237, 220, 0.42),
      transparent 32%
    ),
    radial-gradient(
      circle at 92% 2%,
      rgba(199, 182, 230, 0.22),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.92),
      rgba(232, 247, 241, 0.68)
    ),
    var(--pro-bg);
}

body.auth-screen-mode {
  background: #fbf9ff;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

@keyframes pageIn {
  from {
    opacity: 1;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes authFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes contentSwap {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes selectedSettle {
  from {
    opacity: 0.82;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes softRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes progressPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(126, 104, 196, 0.2);
  }

  100% {
    box-shadow: 0 0 0 9px rgba(126, 104, 196, 0);
  }
}

@keyframes proProgressPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(79, 146, 125, 0.2);
  }

  100% {
    box-shadow: 0 0 0 9px rgba(79, 146, 125, 0);
  }
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3,
.salon-row-main strong,
.choice-card strong {
  text-wrap: pretty;
  overflow-wrap: normal;
}

h1 {
  font-size: clamp(2rem, 4vw, 4.3rem);
  line-height: 1;
  font-weight: 750;
  letter-spacing: 0;
}

h2 {
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.15;
  letter-spacing: 0;
}

h3 {
  font-size: 1rem;
  line-height: 1.25;
}

p {
  line-height: 1.6;
}

.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 22px;
  width: calc(100% - 48px);
  min-height: 74px;
  margin: 0 auto;
  padding: 12px 0;
  backdrop-filter: blur(20px);
}

.topbar > * {
  min-width: 0;
}

.customer-topbar {
  color: var(--text);
}

.pro-topbar {
  color: var(--pro-text);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 186px;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: var(--radius-md);
  color: white;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.92),
      rgba(242, 236, 250, 0.82)
    ),
    linear-gradient(135deg, var(--accent), var(--pro-accent));
  border: 1px solid rgba(199, 182, 230, 0.42);
  box-shadow: 0 12px 26px rgba(126, 104, 196, 0.16);
  font-weight: 800;
  overflow: hidden;
}

.brand-mark.pro {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.9),
      rgba(232, 247, 241, 0.84)
    ),
    linear-gradient(135deg, var(--pro-accent), var(--accent));
  border-color: rgba(79, 146, 125, 0.22);
  box-shadow: 0 12px 26px rgba(79, 146, 125, 0.14);
}

.brand-mark.logo-shell img {
  width: 100%;
  height: 100%;
  padding: 5px;
  object-fit: contain;
}

.brand-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.brand-wordmark {
  width: 118px;
  height: 24px;
  object-fit: contain;
  object-position: left center;
}

.auth-brand .brand-mark.logo-shell {
  width: 44px;
  height: 44px;
  border-color: rgba(255, 255, 255, 0.54);
  background: rgba(255, 255, 255, 0.9);
}

.auth-brand .brand-wordmark {
  width: 140px;
  height: 32px;
  filter: drop-shadow(0 8px 22px rgba(37, 25, 64, 0.22));
}

.brand strong,
.brand small {
  display: block;
  line-height: 1.1;
}

.brand small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.pro-brand small {
  color: var(--pro-muted);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(199, 182, 230, 0.32);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 28px rgba(126, 104, 196, 0.08);
}

.pro-nav {
  border-color: rgba(79, 146, 125, 0.18);
  box-shadow: 0 12px 28px rgba(79, 146, 125, 0.08);
}

.nav-link,
.side-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
}

.pro-mode .nav-link,
.pro-mode .side-link {
  color: var(--pro-muted);
}

.nav-link.active {
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.pro-mode .nav-link.active,
.side-link.active {
  color: var(--pro-accent-strong);
  background: var(--pro-accent-soft);
}

.top-actions,
.button-row,
.dashboard-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-actions {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.solid-button,
.outline-button,
.ghost-button,
.text-button,
.icon-button,
.pill,
.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}

.solid-button.customer {
  color: white;
  background: linear-gradient(135deg, #8b78d6, #66cdb4);
  box-shadow: 0 14px 30px rgba(126, 104, 196, 0.24);
}

.solid-button.pro {
  color: white;
  background: linear-gradient(135deg, #4f927d, #7c71c8);
  box-shadow: 0 14px 30px rgba(79, 146, 125, 0.2);
}

.solid-button:hover,
.outline-button:hover,
.ghost-button:hover,
.icon-button:hover,
.pill:hover,
.filter-chip:hover,
.style-option:hover,
.choice-card:hover,
.client-row:hover {
  transform: translateY(-1px);
}

.solid-button:active,
.outline-button:active,
.ghost-button:active,
.icon-button:active,
.pill:active,
.filter-chip:active {
  transform: translateY(0) scale(0.98);
}

.solid-button.customer:hover {
  background: linear-gradient(135deg, #7a66c8, #57bda3);
  box-shadow: 0 18px 34px rgba(126, 104, 196, 0.28);
}

.solid-button.pro:hover {
  background: linear-gradient(135deg, #43846f, #6f63be);
  box-shadow: 0 18px 34px rgba(79, 146, 125, 0.24);
}

.outline-button.customer {
  color: var(--accent-strong);
  border-color: rgba(199, 182, 230, 0.72);
  background: rgba(242, 236, 250, 0.68);
}

.outline-button.pro {
  color: var(--pro-accent-strong);
  border-color: rgba(205, 237, 220, 0.86);
  background: rgba(232, 247, 241, 0.72);
}

.ghost-button {
  color: var(--muted);
  border-color: rgba(199, 182, 230, 0.28);
  background: rgba(255, 255, 255, 0.66);
}

.ghost-button:hover,
.outline-button:hover,
.icon-button:hover {
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(126, 104, 196, 0.12);
}

.pro-mode .ghost-button {
  color: var(--pro-muted);
  border-color: rgba(79, 146, 125, 0.18);
}

.text-button {
  padding: 0;
  color: var(--accent-strong);
  background: transparent;
}

.pro-mode .text-button {
  color: var(--pro-accent-strong);
}

.icon-button {
  width: 40px;
  min-width: 40px;
  padding: 0;
  color: var(--accent-strong);
  border-color: rgba(139, 91, 72, 0.16);
  background: white;
}

.pro-mode .icon-button {
  color: var(--pro-accent-strong);
  border-color: rgba(79, 146, 125, 0.13);
}

.small {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.84rem;
}

.full {
  width: 100%;
}

.page-wrap {
  width: calc(100% - 48px);
  margin: 0 auto;
  padding: 14px 0 44px;
}

.route-enter .page-wrap > section,
.route-enter .dashboard-content > section,
.route-enter .pro-portal {
  animation: pageIn 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 240ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.auth-tabs button.active,
.tabs button.active,
.segmented-control button.active,
.filter-chip.active,
.category-scroll button.active,
.stepper button.active,
.signup-stepper span.active,
.date-strip button.active,
.time-grid button.active,
.choice-card.active,
.stylist-card.selectable.active,
.style-option.active,
.client-row.active,
.site-vibe-grid button.active,
.theme-swatch-grid button.active,
.nav-link.active,
.side-link.active {
  animation: selectedSettle 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Keep persistent navigation stable during first paint so it remains an
   eligible, measurable LCP viewport. State changes are already conveyed by
   color, weight, and the active indicator. */
.nav-link.active {
  animation: none;
}

.pro-page-wrap {
  padding-top: 26px;
}

.eyebrow {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: uppercase;
}

.pro-eyebrow {
  color: var(--pro-accent);
}

.panel,
.dashboard-panel,
.metric-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-soft);
  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease,
    background 200ms ease;
}

.pro-mode .panel,
.dashboard-panel,
.metric-card {
  border-color: var(--pro-line);
  background: var(--pro-surface);
  box-shadow: var(--shadow-pro);
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}

.section-head.tight {
  align-items: center;
}

.section-head p {
  color: var(--muted);
}

.pro-mode .section-head p {
  color: var(--pro-muted);
}

.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  min-width: 260px;
  padding: 0 14px;
  border: 1px solid rgba(126, 104, 196, 0.14);
  border-radius: var(--radius-md);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.86);
}

.pro-mode .search-field {
  color: var(--pro-muted);
  border-color: rgba(79, 146, 125, 0.13);
}

.search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
}

.search-field.compact {
  min-height: 40px;
  min-width: min(360px, 42vw);
}

.customer-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 16px;
}

.search-panel,
.visual-panel {
  min-width: 0;
  min-height: 340px;
  border-radius: var(--radius-md);
}

.search-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: clamp(24px, 3.4vw, 46px);
  border: 1px solid var(--line);
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96),
      rgba(242, 236, 250, 0.88)
    ),
    #fbf9ff;
  box-shadow: var(--shadow-soft);
}

.search-copy {
  display: grid;
  gap: 12px;
  max-width: 720px;
}

.search-copy h1 {
  font-size: clamp(2.15rem, 3.6vw, 3.55rem);
  line-height: 1.02;
}

.hero-search {
  width: min(720px, 100%);
  min-height: 58px;
  box-shadow: 0 18px 42px rgba(126, 104, 196, 0.1);
}

.quick-filters,
.filter-bar,
.tag-row,
.time-row,
.category-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill,
.filter-chip,
.category-scroll button {
  min-height: 34px;
  color: var(--accent-strong);
  border-color: rgba(199, 182, 230, 0.38);
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.86rem;
}

.filter-chip.active,
.category-scroll button.active {
  color: white;
  background: var(--accent-strong);
}

.pro-filters .filter-chip,
.pro-mode .filter-chip {
  color: var(--pro-accent-strong);
  border-color: rgba(79, 146, 125, 0.2);
}

.visual-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(199, 182, 230, 0.28);
  box-shadow: var(--shadow-soft);
}

.visual-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(540px, 640px);
  min-height: 100vh;
  min-height: 100dvh;
  background: #fbf9ff;
}

.auth-visual-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  padding: clamp(26px, 4.8vw, 58px);
  color: white;
  background:
    radial-gradient(
      circle at 18% 16%,
      rgba(199, 182, 230, 0.5),
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 8%,
      rgba(205, 237, 220, 0.34),
      transparent 30%
    ),
    linear-gradient(180deg, rgba(33, 26, 54, 0.16), rgba(33, 26, 54, 0.76)),
    url("assets/salon-consultation.webp") center / cover;
}

.auth-visual-panel::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, transparent 62%, rgba(242, 236, 250, 0.14)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%);
}

.auth-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 12px;
  color: white;
}

.auth-brand small,
.auth-visual-copy .eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.auth-visual-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-self: end;
  max-width: 590px;
  gap: 18px;
}

.auth-visual-copy h1 {
  max-width: 560px;
  color: white;
  font-size: clamp(2.35rem, 4.1vw, 4.15rem);
  line-height: 1.03;
}

.auth-visual-lede {
  max-width: 520px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.55;
}

.auth-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.auth-proof-grid div {
  display: grid;
  gap: 7px;
  min-height: 112px;
  align-content: start;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-md);
  padding: 14px;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(12px);
}

.auth-proof-grid strong {
  color: rgba(232, 247, 241, 0.94);
  font-size: 0.78rem;
  letter-spacing: 0;
}

.auth-proof-grid span {
  color: white;
  font-size: 1rem;
  font-weight: 820;
}

.auth-proof-grid small {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.82rem;
  line-height: 1.45;
}

.auth-workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  align-content: stretch;
  gap: 16px;
  padding: clamp(16px, 2.8vw, 28px);
  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(205, 237, 220, 0.38),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.9),
      rgba(242, 236, 250, 0.92)
    ),
    #fbf9ff;
}

.auth-workspace-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.auth-screen .auth-panel {
  width: 100%;
  max-width: 640px;
  height: clamp(580px, calc(100vh - 120px), 660px);
  height: clamp(580px, calc(100dvh - 120px), 660px);
  min-height: 0;
  align-self: center;
  justify-self: center;
  align-content: start;
  gap: 14px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  border-color: rgba(126, 104, 196, 0.13);
  border-radius: 22px;
  padding: clamp(24px, 2.6vw, 34px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 24px 70px rgba(73, 41, 35, 0.12);
}

.auth-screen .auth-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-screen button:hover,
.auth-screen button:active {
  transform: none;
}

.pro-auth-screen {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(540px, 640px);
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--pro-text);
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.92),
      rgba(218, 237, 240, 0.86)
    ),
    var(--pro-bg);
}

.pro-auth-visual {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(28px, 5vw, 62px);
  color: white;
  background:
    linear-gradient(180deg, rgba(20, 49, 58, 0.28), rgba(12, 45, 52, 0.86)),
    url("assets/salon-consultation.webp") center / cover;
}

.pro-auth-visual > div:last-child {
  align-self: end;
  display: grid;
  max-width: 640px;
  gap: 16px;
  animation: softRise 360ms ease both;
}

.pro-auth-visual h1 {
  max-width: 650px;
  color: white;
  font-size: clamp(2.4rem, 4.2vw, 4.25rem);
  line-height: 1.03;
}

.pro-auth-visual p:not(.eyebrow) {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.8);
}

.pro-auth-workspace {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  padding: clamp(18px, 3vw, 32px);
}

.pro-auth-panel {
  width: 100%;
  max-width: 640px;
  height: auto;
  max-height: calc(100dvh - clamp(36px, 6vw, 64px));
  justify-self: center;
  grid-auto-rows: max-content;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-color: rgba(31, 78, 93, 0.13);
  border-radius: 22px;
  padding: clamp(24px, 2.6vw, 34px);
  box-shadow: 0 24px 70px rgba(26, 58, 74, 0.13);
}

.pro-auth-panel > * {
  min-width: 0;
}

.pro-tabs button.active {
  background: var(--pro-accent-strong);
  box-shadow: 0 10px 20px rgba(79, 146, 125, 0.18);
}

.floating-summary {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: grid;
  gap: 4px;
  width: min(320px, calc(100% - 40px));
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  color: white;
  background: rgba(47, 31, 26, 0.72);
  backdrop-filter: blur(16px);
}

.floating-summary span {
  color: #f7d8cf;
}

.floating-summary small {
  color: rgba(255, 255, 255, 0.78);
}

.customer-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.85fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.discover-try-card {
  position: sticky;
  top: 94px;
  align-self: start;
  transition:
    transform 240ms ease,
    box-shadow 240ms ease,
    border-color 240ms ease;
  will-change: transform;
}

.discover-page {
  display: grid;
  gap: clamp(34px, 5vw, 64px);
  padding-bottom: 28px;
}

.discover-page .visual-panel img {
  object-position: center 42%;
}

.discover-marketplace,
.discover-reviews {
  display: grid;
  gap: 28px;
}

.discover-marketplace-heading,
.discover-row-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.discover-marketplace-heading > div,
.discover-row-heading > div {
  display: grid;
  gap: 6px;
}

.discover-marketplace-heading h2 {
  font-size: clamp(1.65rem, 2.4vw, 2.35rem);
}

.discover-salon-list {
  display: grid;
  gap: clamp(30px, 4vw, 46px);
  min-width: 0;
}

.discover-salon-section {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.discover-row-heading h2 {
  font-size: clamp(1.22rem, 1.8vw, 1.55rem);
}

.discover-row-heading p,
.discover-row-heading > span {
  color: var(--muted);
  font-size: 0.88rem;
}

.discover-row-heading > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 760;
  white-space: nowrap;
}

.discover-row-heading > span .icon {
  width: 15px;
  height: 15px;
}

.horizontal-scroll-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.discover-row-heading > .horizontal-scroll-controls,
.discover-marketplace-heading .horizontal-scroll-controls {
  display: inline-flex;
}

.carousel-nav-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(126, 104, 196, 0.2);
  border-radius: 50%;
  color: var(--accent-strong);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(46, 35, 31, 0.08);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

.carousel-nav-button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(126, 104, 196, 0.42);
  box-shadow: 0 14px 30px rgba(46, 35, 31, 0.13);
}

.carousel-nav-button:focus-visible {
  outline: 3px solid rgba(126, 104, 196, 0.28);
  outline-offset: 2px;
}

.carousel-nav-button:disabled {
  opacity: 0.32;
  cursor: default;
  box-shadow: none;
}

.carousel-nav-button.previous .icon {
  transform: rotate(180deg);
}

.discover-salon-track,
.discover-review-track {
  display: grid;
  grid-auto-flow: column;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-color: rgba(126, 104, 196, 0.34) transparent;
  scrollbar-width: thin;
}

.discover-salon-track {
  grid-auto-columns: clamp(360px, 32vw, 420px);
  gap: 16px;
  margin: 0 -4px;
  padding: 4px 4px 18px;
  scroll-behavior: smooth;
}

.discover-salon-track:focus-visible,
.discover-review-track:focus-visible {
  outline: 3px solid rgba(126, 104, 196, 0.2);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.discover-salon-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(126, 104, 196, 0.13);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 12px 30px rgba(46, 35, 31, 0.06);
  cursor: pointer;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease;
}

.discover-salon-card:hover {
  transform: translateY(-3px);
  border-color: rgba(126, 104, 196, 0.28);
  box-shadow: 0 20px 42px rgba(46, 35, 31, 0.11);
}

.discover-salon-card:focus-visible {
  outline: 3px solid rgba(126, 104, 196, 0.3);
  outline-offset: 3px;
}

.discover-salon-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--accent-soft);
}

.discover-salon-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
}

.discover-salon-card:hover .discover-salon-image img {
  transform: scale(1.035);
}

.discover-card-badge,
.discover-card-rating {
  position: absolute;
  top: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 850;
  backdrop-filter: blur(10px);
}

.discover-card-badge {
  left: 12px;
  color: var(--accent-strong);
  background: rgba(255, 255, 255, 0.92);
}

.discover-card-rating {
  right: 12px;
  gap: 4px;
  color: #302a25;
  background: rgba(255, 255, 255, 0.92);
}

.discover-card-rating span,
.discover-review-stars {
  color: #e5a900;
}

.discover-salon-body {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 12px;
  padding: 15px;
}

.discover-salon-body > div:first-child {
  display: grid;
  gap: 4px;
}

.discover-salon-body h3 {
  font-size: 1.04rem;
}

.discover-salon-body p,
.discover-card-footer,
.discover-card-tags span {
  color: var(--muted);
  font-size: 0.82rem;
}

.discover-card-tags {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.discover-card-tags span {
  overflow: hidden;
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #f7f2fb;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-card-footer {
  display: flex;
  align-items: center;
  align-self: end;
  justify-content: space-between;
  gap: 10px;
}

.discover-card-footer strong {
  color: var(--text);
}

.discover-salon-body .solid-button {
  width: 100%;
  margin-top: 0;
}

.discover-promos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.discover-promo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(190px, 0.95fr);
  min-height: 330px;
  overflow: hidden;
  border: 1px solid rgba(126, 104, 196, 0.14);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.discover-promo-ai {
  background:
    radial-gradient(
      circle at 16% 12%,
      rgba(205, 237, 220, 0.58),
      transparent 32%
    ),
    linear-gradient(135deg, #fbf9ff, #f2ecfa);
}

.discover-promo-pro {
  background:
    radial-gradient(
      circle at 14% 12%,
      rgba(199, 182, 230, 0.5),
      transparent 34%
    ),
    linear-gradient(135deg, #f8f5fb, #e8f7f1);
}

.discover-promo-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 13px;
  padding: clamp(24px, 3.3vw, 42px);
}

.discover-promo-copy h2 {
  max-width: 430px;
  font-size: clamp(1.55rem, 2.5vw, 2.45rem);
}

.discover-promo-copy > p:not(.eyebrow) {
  max-width: 460px;
  color: var(--muted);
}

.discover-promo > img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
}

.discover-review-track {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  overflow: visible;
  margin: 0;
  padding: 12px 0 20px;
  scroll-snap-type: none;
  scrollbar-width: auto;
}

.discover-heading-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.customer-footer {
  margin-top: clamp(36px, 6vw, 84px);
  border-top: 1px solid rgba(126, 104, 196, 0.1);
  background: #f5f4f6;
}

.customer-footer-main,
.customer-footer-bottom {
  width: calc(100% - 48px);
  margin: 0 auto;
}

.customer-footer-main {
  display: grid;
  grid-template-columns: minmax(230px, 1.25fr) repeat(4, minmax(140px, 0.8fr));
  gap: clamp(28px, 4vw, 70px);
  padding: clamp(44px, 6vw, 76px) 0;
}

.customer-footer-brand,
.customer-footer-column {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 13px;
}

.footer-brand {
  min-width: 0;
}

.footer-brand .brand-wordmark {
  width: 126px;
}

.footer-brand small {
  color: var(--muted);
}

.customer-footer-brand .outline-button {
  margin-top: 12px;
  background: white;
}

.customer-footer-column strong {
  margin-bottom: 4px;
  font-size: 0.92rem;
}

.customer-footer-column a,
.customer-footer-column span {
  color: #4d484f;
  font-size: 0.88rem;
  line-height: 1.45;
}

.customer-footer-column a:hover {
  color: var(--accent-strong);
}

.customer-footer-social span {
  display: inline-flex;
  gap: 8px;
}

.customer-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
  border-top: 1px solid rgba(126, 104, 196, 0.1);
  color: var(--muted);
  font-size: 0.82rem;
}

.discover-review-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 280px;
  padding: 22px;
  scroll-snap-align: start;
  border: 1px solid rgba(126, 104, 196, 0.11);
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, #fff, #f8f5fb);
  box-shadow: 0 16px 38px rgba(47, 36, 66, 0.08);
  animation: discoverReviewFloat 5.8s ease-in-out infinite;
  animation-delay: calc(var(--review-index) * -0.75s);
  will-change: transform;
}

.discover-review-card:hover {
  animation-play-state: paused;
  box-shadow: 0 22px 48px rgba(47, 36, 66, 0.13);
}

@keyframes discoverReviewFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.discover-review-stars {
  letter-spacing: 2px;
}

.discover-review-card h3 {
  font-size: 1.08rem;
}

.discover-review-card > p {
  color: var(--muted);
  font-size: 0.92rem;
}

.discover-review-card footer {
  display: flex;
  align-items: center;
  gap: 11px;
}

.discover-review-card footer > span:last-child,
.discover-review-card footer > span:last-child > span {
  display: grid;
  gap: 3px;
}

.discover-review-card footer strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
}

.discover-review-card footer small {
  color: var(--muted);
  font-size: 0.73rem;
}

.discover-review-avatar {
  display: block;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  object-position: center 28%;
  box-shadow: 0 5px 14px rgba(39, 29, 55, 0.16);
}

.verified-mark {
  padding: 3px 6px;
  border-radius: 999px;
  color: #167b69 !important;
  background: #e8f7f1;
  font-size: 0.64rem !important;
  font-weight: 820;
}

.large-panel {
  padding: 18px;
}

.try-card,
.appointment-panel,
.booking-sidebar,
.style-builder,
.tryon-stage,
.booking-main,
.booking-summary,
.profile-panel,
.me-main .panel,
.about-panel {
  padding: 22px;
}

.salon-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.salon-row,
.salon-card {
  display: grid;
  min-width: 0;
  border: 1px solid rgba(126, 104, 196, 0.12);
  border-radius: var(--radius-md);
  background: #fffdfb;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease;
}

.route-enter .salon-row,
.route-enter .salon-card,
.route-enter .metric-card {
  animation: cardIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.salon-row:nth-child(2),
.salon-card:nth-child(2),
.metric-card:nth-child(2) {
  animation-delay: 45ms;
}

.salon-row:nth-child(3),
.salon-card:nth-child(3),
.metric-card:nth-child(3) {
  animation-delay: 90ms;
}

.salon-row:nth-child(4),
.salon-card:nth-child(4),
.metric-card:nth-child(4) {
  animation-delay: 135ms;
}

.salon-row:hover,
.salon-card:hover,
.metric-card:hover,
.dashboard-panel:hover,
.pro-feature-card:hover,
.stylist-card:hover,
.saved-look:hover {
  transform: translateY(-2px);
  border-color: rgba(126, 104, 196, 0.22);
  box-shadow: 0 18px 42px rgba(46, 35, 31, 0.1);
}

.pro-mode .dashboard-panel:hover,
.pro-mode .metric-card:hover,
.pro-feature-card:hover {
  border-color: rgba(31, 117, 128, 0.22);
  box-shadow: 0 18px 42px rgba(25, 43, 68, 0.1);
}

.salon-row {
  grid-template-columns: 102px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px;
  align-items: center;
}

.salon-row-clickable {
  cursor: pointer;
}

.salon-row-clickable:focus-visible {
  outline: 3px solid rgba(126, 104, 196, 0.28);
  outline-offset: 3px;
}

.salon-thumb {
  width: 102px;
  height: 82px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
}

.salon-row-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.salon-row-main p,
.salon-card-body p,
.booking-summary p,
.profile-panel p,
.pro-copy p {
  color: var(--muted);
}

.salon-row-main h3,
.salon-row-main p,
.directory-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-row span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  color: var(--customer-secondary);
  background: #f7ebe5;
  font-size: 0.78rem;
  font-weight: 700;
}

.pro-mode .tag-row span {
  color: var(--pro-accent-strong);
  background: var(--pro-accent-soft);
}

.time-row button,
.availability-strip button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(126, 104, 196, 0.14);
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
  background: white;
  font-weight: 760;
}

.salon-row-side {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.salon-row-side .row-chevron {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  color: var(--accent-strong);
  background: rgba(242, 236, 250, 0.72);
}

.salon-row-side .row-chevron svg {
  width: 16px;
  height: 16px;
}

.mini-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  color: #4f927d;
  background: #e8f7f1;
  font-size: 0.72rem;
  font-weight: 840;
  vertical-align: middle;
}

.try-card {
  display: grid;
  gap: 16px;
}

.try-card img {
  aspect-ratio: 16 / 10;
  width: 100%;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.ai-reference-summary {
  display: grid;
  gap: 6px;
}

.ai-reference-summary strong {
  color: var(--text);
}

.ai-reference-summary span {
  color: var(--muted);
  line-height: 1.45;
}

.style-stat-grid,
.summary-grid,
.info-grid,
.client-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.style-stat-grid div,
.summary-grid div,
.info-grid div,
.client-stats div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: #fbf1ec;
}

.style-stat-grid span,
.summary-grid span,
.info-grid span,
.client-stats span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 760;
}

.style-stat-grid strong,
.summary-grid strong,
.info-grid strong,
.client-stats strong {
  overflow-wrap: anywhere;
}

.appointment-panel {
  display: grid;
  gap: 16px;
}

.appointment-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: #f2ecfa;
}

.appointment-card span {
  color: var(--muted);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: #6c5bb5;
  background: #f2ecfa;
  font-size: 0.78rem;
  font-weight: 820;
  text-transform: capitalize;
  white-space: nowrap;
}

.db-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(126, 104, 196, 0.14);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 820;
  white-space: nowrap;
}

.db-badge.live {
  color: #245f43;
  border-color: #b8dbc8;
  background: #e9f6ee;
}

.db-badge.connecting {
  color: #7a5b1b;
  border-color: #c7b6e6;
  background: #f2ecfa;
}

.db-badge.fallback {
  color: #6c5bb5;
  border-color: #c7b6e6;
  background: #f2ecfa;
}

.pro-mode .db-badge {
  color: var(--pro-muted);
  border-color: rgba(79, 146, 125, 0.16);
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px 0 6px;
  border: 1px solid rgba(126, 104, 196, 0.14);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: rgba(255, 255, 255, 0.78);
  font-weight: 800;
  white-space: nowrap;
}

.user-chip b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--radius-sm);
  color: white;
  background: var(--accent-strong);
  font-size: 0.78rem;
}

.me-auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.75fr);
  gap: 22px;
  align-items: stretch;
}

.auth-panel,
.account-empty-panel {
  display: grid;
  gap: 20px;
  padding: clamp(22px, 4vw, 42px);
  align-content: center;
}

.auth-panel h1 {
  max-width: 720px;
  min-height: 58px;
  font-size: clamp(1.9rem, 2.6vw, 2.45rem);
  line-height: 1.08;
}

.auth-panel p,
.account-empty-panel p {
  color: var(--muted);
}

.auth-panel > div:first-child {
  display: grid;
  gap: 8px;
  min-height: 118px;
  align-content: start;
}

.auth-panel > div:first-child p:not(.eyebrow) {
  min-height: 38px;
  line-height: 1.5;
}

.auth-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #f2ecfa;
}

.auth-tabs button {
  min-width: 0;
  min-height: 40px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  font-weight: 820;
  transition:
    color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.auth-tabs button.active {
  color: white;
  background: var(--accent-strong);
  box-shadow: 0 10px 20px rgba(126, 104, 196, 0.18);
}

.signup-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  min-height: 64px;
}

.signup-stepper span {
  display: grid;
  gap: 6px;
  min-height: 64px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 820;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.signup-stepper b {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  color: var(--accent-strong);
  background: rgba(126, 104, 196, 0.08);
}

.signup-stepper span.active {
  color: var(--text);
  border-color: rgba(126, 104, 196, 0.24);
  background: #fff7f2;
}

.signup-stepper span.active b,
.signup-stepper span.done b {
  color: white;
  background: var(--accent-strong);
}

.pro-mode .signup-stepper span.active b,
.pro-mode .signup-stepper span.done b {
  background: var(--pro-accent-strong);
}

.signup-stepper span.active b {
  animation: progressPulse 820ms ease-out both;
}

.pro-mode .signup-stepper span.active b {
  animation-name: proProgressPulse;
}

.auth-form {
  display: grid;
  gap: 10px;
  min-height: 138px;
}

.auth-form > .auth-grid,
.auth-form > label,
.auth-button-row,
.auth-actions,
.auth-tabs,
.signup-stepper,
.signup-methods {
  animation: authFade 180ms ease both;
}

.signup-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.method-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 76px;
  align-items: center;
  justify-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(126, 104, 196, 0.16);
  border-radius: var(--radius-md);
  color: var(--text);
  background: #fbf9ff;
  text-align: left;
  box-shadow: none;
}

.method-button .icon {
  color: var(--accent-strong);
}

.method-button span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.method-button b {
  font-size: 0.9rem;
  line-height: 1.1;
}

.method-button small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.method-button:hover {
  border-color: rgba(126, 104, 196, 0.28);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(73, 41, 35, 0.08);
}

.auth-panel,
.pro-auth-panel,
.activation-layout,
.activation-studio {
  animation: softRise 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.activation-studio {
  display: grid;
  gap: 18px;
  padding-bottom: 116px;
}

.activation-studio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(31, 117, 128, 0.16);
  border-radius: var(--radius-md);
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98),
      rgba(235, 246, 248, 0.86)
    ),
    white;
  box-shadow: var(--shadow-pro);
}

.activation-studio-head > div:first-child {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.activation-studio-head h1 {
  max-width: 760px;
  color: var(--pro-text);
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1.05;
}

.activation-studio-head span {
  max-width: 720px;
  color: var(--pro-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.activation-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.activation-progress-card {
  display: grid;
  gap: 6px;
  min-width: 220px;
  padding: 12px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 24px rgba(25, 43, 68, 0.06);
}

.activation-progress-card strong {
  color: var(--pro-text);
  font-size: 1rem;
}

.activation-progress-card span {
  color: var(--pro-muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.activation-progress-card i {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eff3;
}

.activation-progress-card b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pro-accent-strong), var(--pro-gold));
  transition: width 280ms ease;
}

.activation-workbench {
  display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.business-setup-workbench {
  grid-template-columns: minmax(420px, 0.95fr) minmax(320px, 0.55fr);
}

.business-setup-workbench .activation-setup-panel {
  position: static;
  max-height: none;
}

.business-next-panel {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 16px;
  align-content: start;
  min-height: 520px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96),
      rgba(235, 246, 248, 0.9)
    ),
    white;
}

.business-next-panel h2 {
  color: var(--pro-text);
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  line-height: 1.08;
}

.business-next-panel p:not(.eyebrow) {
  color: var(--pro-muted);
  line-height: 1.65;
}

.business-next-list {
  display: grid;
  gap: 10px;
}

.business-next-list div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.72);
  color: var(--pro-text);
  font-weight: 790;
}

.business-next-list .icon {
  color: var(--pro-accent-strong);
}

.activation-setup-panel {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 126px);
  overflow: auto;
  padding-bottom: 20px;
  scrollbar-width: thin;
}

.activation-step-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 14px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-md);
  background: #f8fcfd;
}

.activation-step-card > b,
.activation-section-title > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 999px;
  color: white;
  background: var(--pro-accent-strong);
  box-shadow: 0 10px 20px rgba(79, 146, 125, 0.18);
}

.activation-step-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.activation-step-card strong {
  color: var(--pro-text);
}

.activation-step-card span {
  overflow: hidden;
  color: var(--pro-muted);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activation-form-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(25, 43, 68, 0.05);
}

.activation-section-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.activation-section-title > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.activation-section-title h2 {
  color: var(--pro-text);
  font-size: 1.1rem;
}

.activation-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.activation-field-grid label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--pro-text);
  font-size: 0.82rem;
  font-weight: 820;
}

.activation-field-grid .full-field {
  grid-column: 1 / -1;
}

.activation-field-grid input,
.activation-field-grid textarea,
.activation-field-grid select,
.activation-photo-uploader input[type="file"] {
  width: 100%;
  min-width: 0;
  border: 1px solid #d7e2e9;
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  color: var(--pro-text);
  background: #f9fcfd;
  outline: 0;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.activation-field-grid textarea {
  min-height: 96px;
  resize: vertical;
}

.activation-field-grid input:focus,
.activation-field-grid textarea:focus,
.activation-field-grid select:focus {
  border-color: rgba(31, 117, 128, 0.44);
  background: white;
  box-shadow: 0 0 0 4px rgba(31, 117, 128, 0.1);
}

.activation-photo-uploader {
  display: grid;
  gap: 12px;
}

.activation-photo-uploader .upload-control {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 13px;
  border: 1px dashed rgba(31, 117, 128, 0.32);
  border-radius: var(--radius-md);
  background: #f6fbfc;
}

.activation-photo-uploader .upload-control span {
  color: var(--pro-text);
  font-weight: 850;
}

.activation-photo-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.activation-photo-strip img {
  width: 100%;
  aspect-ratio: 1.2 / 1;
  object-fit: contain;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-sm);
  background: #f5f8fa;
}

.activation-publish-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(79, 146, 125, 0.18);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(25, 43, 68, 0.12);
  backdrop-filter: blur(14px);
}

.activation-publish-bar div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.activation-publish-bar strong {
  color: var(--pro-text);
}

.activation-publish-bar span {
  color: var(--pro-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.activation-preview-panel {
  position: sticky;
  top: 92px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  max-height: calc(100vh - 126px);
  overflow: hidden;
  padding: 0;
}

.activation-preview-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px;
  border-bottom: 1px solid var(--pro-line);
  background: #fbfdfe;
}

.activation-preview-toolbar > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.activation-preview-toolbar h2 {
  overflow: hidden;
  color: var(--pro-text);
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activation-preview-toolbar span {
  color: var(--pro-muted);
  font-size: 0.86rem;
}

.activation-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--pro-line);
  background: white;
}

.activation-preset-grid button {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 74px;
  justify-content: start;
  padding: 13px;
  border: 1px solid #d8e3ea;
  border-radius: var(--radius-md);
  color: var(--pro-text);
  background: #f8fbfc;
  text-align: left;
}

.activation-preset-grid button:hover {
  transform: translateY(-1px);
  border-color: rgba(31, 117, 128, 0.28);
  background: white;
  box-shadow: 0 12px 26px rgba(25, 43, 68, 0.08);
}

.activation-preset-grid button.active {
  color: white;
  border-color: var(--pro-accent-strong);
  background: linear-gradient(135deg, var(--pro-accent-strong), #4f927d);
  box-shadow: 0 16px 32px rgba(79, 146, 125, 0.18);
}

.activation-preset-grid span {
  color: inherit;
  opacity: 0.78;
  font-size: 0.8rem;
  line-height: 1.32;
}

.activation-site-frame {
  min-height: 520px;
  overflow: auto;
  background:
    linear-gradient(
      180deg,
      rgba(239, 247, 249, 0.9),
      rgba(247, 249, 251, 0.96)
    ),
    #eef4f6;
  scrollbar-width: thin;
}

.activation-site-frame .embedded-site {
  width: min(100%, 1160px);
  margin: 0 auto;
  border-radius: 0;
  box-shadow: 0 18px 44px rgba(25, 43, 68, 0.08);
}

.activation-site-frame .embedded-site .salon-site-nav {
  position: sticky;
  display: flex;
  min-height: 62px;
  padding: 10px 18px;
}

.activation-site-frame .embedded-site .salon-site-nav nav {
  display: inline-flex;
}

.activation-site-frame .embedded-site .salon-site-book {
  display: inline-flex;
}

.activation-site-frame .embedded-site .salon-site-section {
  width: min(100% - 36px, 1040px);
}

.activation-site-frame .embedded-site .site-hero {
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.65fr);
  gap: 24px;
  min-height: 540px;
}

.activation-site-frame .embedded-site .site-hero-media img {
  height: 400px;
  object-fit: contain;
  background: var(--site-secondary);
}

.activation-ai-dock {
  left: 24px;
}

.compact-head {
  margin-top: 6px;
}

.upload-control input {
  padding: 12px;
}

.upload-control small {
  color: var(--pro-muted);
  font-weight: 700;
}

.auth-grid,
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.auth-grid > label,
.auth-form > label {
  min-width: 0;
}

.full-field {
  grid-column: 1 / -1;
}

.auth-form label,
.profile-details-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 760;
}

.auth-form input,
.auth-form select,
.auth-form textarea,
.profile-details-panel input,
.profile-details-panel select,
.profile-details-panel textarea {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.92);
  outline: 0;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.auth-form textarea,
.profile-details-panel textarea {
  min-height: 104px;
  padding: 12px;
  resize: vertical;
}

.auth-form select,
.profile-details-panel select {
  appearance: none;
}

.auth-button-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
}

.auth-button-row button,
.auth-actions button {
  min-width: 0;
  min-height: 44px;
  line-height: 1.15;
  white-space: normal;
}

.auth-button-row .full:only-child {
  grid-column: 1 / -1;
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus,
.profile-details-panel input:focus,
.profile-details-panel select:focus,
.profile-details-panel textarea:focus {
  border-color: rgba(126, 104, 196, 0.42);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(185, 99, 87, 0.11);
}

.auth-divider {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 20px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 820;
}

.auth-divider::before {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line);
  content: "";
}

.auth-divider span {
  position: relative;
  padding: 0 10px;
  background: #fffdfb;
}

.status-badge.booked,
.status-badge.confirmed,
.status-badge.saved {
  color: #2d6447;
  background: #dff0e6;
}

.status-badge.review,
.status-badge.requested {
  color: #6c5bb5;
  background: #f5e7c8;
}

.market-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 22px;
  align-items: start;
}

.market-main {
  min-width: 0;
}

.salon-directory-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: calc(100dvh - 92px);
}

.salon-directory-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(300px, 430px);
  gap: 12px;
  align-items: center;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px rgba(54, 42, 89, 0.06);
}

.salon-map-directory {
  display: grid;
  grid-template-columns: minmax(560px, 0.62fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  min-height: 0;
  height: calc(100dvh - 172px);
}

.directory-map-panel {
  position: sticky;
  top: 92px;
  height: 100%;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
  box-shadow: var(--shadow-soft);
}

.directory-map-surface {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background: #e8f7f1;
}

.directory-map-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #eef3f1;
  opacity: 0;
  transition: opacity 220ms ease;
}

.directory-map-canvas.ready {
  opacity: 1;
}

.directory-map-canvas.leaflet-container {
  color: var(--ink);
  font: inherit;
  cursor: grab;
  touch-action: none;
}

.directory-map-canvas.leaflet-dragging {
  cursor: grabbing;
}

.directory-map-canvas .leaflet-tile-pane {
  filter: saturate(0.96) contrast(1.01) brightness(1.01);
}

.directory-map-canvas .leaflet-tile {
  will-change: transform;
}

.directory-map-canvas .leaflet-control-attribution {
  margin: 0 5px 4px 0;
  border-radius: 4px;
  padding: 2px 5px;
  color: rgba(53, 49, 68, 0.62);
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.58rem;
  backdrop-filter: blur(6px);
}

.directory-map-canvas .leaflet-control-attribution a {
  color: #6553a7;
}

.directory-map-ui {
  position: absolute;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}

.directory-map-ui button {
  pointer-events: auto;
}

.prelook-leaflet-marker-shell,
.prelook-leaflet-user-shell {
  border: 0;
  background: transparent;
}

.leaflet-rating-pin {
  position: absolute;
  top: 0;
  left: 50%;
  display: inline-flex;
  min-width: 50px;
  height: 30px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px solid rgba(255, 255, 255, 0.97);
  border-radius: 9px;
  padding: 0 8px;
  color: white;
  background: linear-gradient(135deg, #51416f, #67549a);
  box-shadow: 0 8px 20px rgba(81, 65, 111, 0.28);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1;
  transform: translateX(-50%);
  transition:
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.leaflet-rating-pin::after {
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  background: inherit;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.leaflet-rating-pin b {
  color: #f3e8ff;
  font-size: 0.68rem;
}

.prelook-leaflet-marker-shell.active {
  z-index: 1000 !important;
}

.prelook-leaflet-marker-shell.active .leaflet-rating-pin {
  color: #fff;
  background: linear-gradient(135deg, #67549a, #7d6aa8);
  box-shadow:
    0 10px 24px rgba(81, 65, 111, 0.3),
    0 0 0 4px rgba(125, 106, 168, 0.24);
  transform: translateX(-50%) scale(1.08);
}

.prelook-leaflet-marker-shell.active .leaflet-rating-pin b {
  color: #f3e8ff;
}

.leaflet-user-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  border: 4px solid white;
  border-radius: 50%;
  background: #24b894;
  box-shadow:
    0 0 0 4px rgba(36, 184, 148, 0.28),
    0 8px 22px rgba(28, 112, 97, 0.3);
  transform: translate(-50%, -50%);
}

.leaflet-user-dot::before {
  position: absolute;
  inset: -11px;
  border: 1px solid rgba(36, 184, 148, 0.52);
  border-radius: 50%;
  background: rgba(36, 184, 148, 0.14);
  content: "";
  animation: locationPulse 1.9s ease-out infinite;
}

.leaflet-user-dot > span {
  position: absolute;
  bottom: 25px;
  left: 50%;
  min-width: 36px;
  border: 1px solid rgba(36, 184, 148, 0.35);
  border-radius: 999px;
  padding: 3px 7px;
  color: #167b69;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px rgba(28, 112, 97, 0.12);
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
  transform: translateX(-50%);
}

.directory-map-surface::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  background:
    linear-gradient(
      28deg,
      transparent 0 31%,
      rgba(255, 255, 255, 0.78) 31.2% 33.6%,
      transparent 33.8%
    ),
    linear-gradient(
      154deg,
      transparent 0 44%,
      rgba(255, 255, 255, 0.72) 44.2% 46.2%,
      transparent 46.4%
    ),
    linear-gradient(
      87deg,
      transparent 0 58%,
      rgba(255, 255, 255, 0.58) 58.2% 59.5%,
      transparent 59.8%
    ),
    linear-gradient(0deg, rgba(126, 104, 196, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 205, 180, 0.06) 1px, transparent 1px),
    radial-gradient(
      circle at 22% 28%,
      rgba(199, 182, 230, 0.3),
      transparent 18%
    ),
    radial-gradient(
      circle at 72% 68%,
      rgba(205, 237, 220, 0.42),
      transparent 22%
    ),
    #e8f7f1;
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    92px 92px,
    92px 92px,
    100% 100%,
    100% 100%,
    auto;
  pointer-events: none;
}

.directory-map-surface.is-dragging {
  cursor: grabbing;
}

.directory-map-surface.is-pinching,
.directory-map-surface.is-zooming {
  cursor: zoom-in;
}

.map-scene,
.map-tile-grid,
.map-coordinate-layer {
  position: absolute;
  inset: 0;
}

.map-scene {
  z-index: 1;
  transform-origin: center;
  will-change: transform;
}

.map-tile-grid {
  z-index: 1;
  overflow: hidden;
  transform-origin: center;
  transition: transform 160ms ease-out;
  will-change: transform;
}

.directory-map-surface.is-dragging .map-scene {
  transition: none;
}

.directory-map-panel.focused .map-scene {
  animation: none;
}

.map-tile {
  position: absolute;
  object-fit: cover;
  user-select: none;
  filter: saturate(0.94) contrast(1.02);
}

.map-coordinate-layer {
  z-index: 2;
  pointer-events: none;
  transition: transform 160ms ease-out;
  will-change: transform;
}

.map-controls {
  position: absolute;
  right: 12px;
  top: auto;
  bottom: 12px;
  z-index: 4;
  display: grid;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(213, 218, 226, 0.82);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 26px rgba(31, 36, 44, 0.12);
  backdrop-filter: blur(14px);
}

.map-controls button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--accent-strong);
  background: linear-gradient(
    135deg,
    rgba(242, 236, 250, 0.95),
    rgba(232, 247, 241, 0.95)
  );
  font-size: 1.1rem;
  font-weight: 850;
  line-height: 1;
}

.map-controls button:hover {
  color: white;
  background: linear-gradient(135deg, var(--accent-strong), #66cdb4);
  transform: translateY(-1px);
}

.map-location-control {
  position: absolute;
  right: 60px;
  bottom: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid rgba(213, 218, 226, 0.82);
  border-radius: 999px;
  padding: 0 14px;
  color: var(--accent-strong);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 28px rgba(31, 36, 44, 0.12);
  backdrop-filter: blur(14px);
  font-weight: 860;
}

.map-location-control:hover {
  color: white;
  background: linear-gradient(135deg, var(--accent-strong), #66cdb4);
  transform: translateY(-1px);
}

.directory-meta {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 720;
}

.salon-directory-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  height: 100%;
  min-height: 560px;
  padding: 10px 10px 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 38px rgba(54, 42, 89, 0.07);
}

.directory-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.directory-title-copy {
  display: grid;
  gap: 0;
}

.directory-panel-top .eyebrow {
  margin: 0;
}

.directory-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.directory-panel-top h1 {
  margin: 0;
  color: var(--ink);
  background: none;
  font-size: 1.42rem;
  font-weight: 800;
  line-height: 1;
}

.directory-panel-top strong {
  border: 0;
  padding: 0;
  color: var(--muted);
  background: transparent;
  font-size: 0.8rem;
  font-weight: 720;
  white-space: nowrap;
}

.directory-search {
  width: 100%;
  justify-self: end;
  min-height: 44px;
}

.directory-filter-bar {
  grid-column: auto;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 0;
  padding-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.directory-filter-bar::-webkit-scrollbar {
  display: none;
}

.directory-filter-bar::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(126, 104, 196, 0.3);
}

.directory-filter-bar .filter-chip {
  flex: 0 0 auto;
  white-space: nowrap;
}

.directory-list {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 10px;
  margin-top: 0;
  height: 100%;
  max-height: none;
  padding: 0 3px 60px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-bottom: 120px;
}

.directory-salon-row {
  grid-template-columns: 96px minmax(0, 1fr) minmax(82px, auto);
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
}

.directory-salon-row .salon-thumb {
  width: 96px;
  height: 96px;
  border-radius: 7px;
}

.directory-salon-row .outline-button.small,
.directory-salon-row .solid-button.small,
.salon-book-button.small {
  min-height: 36px;
  padding: 0 12px;
  white-space: nowrap;
}

.directory-salon-row.active {
  border-color: rgba(126, 104, 196, 0.48);
  background: linear-gradient(
    135deg,
    rgba(242, 236, 250, 0.64),
    rgba(232, 247, 241, 0.5)
  );
  box-shadow: 0 10px 28px rgba(126, 104, 196, 0.11);
}

.directory-salon-thumb {
  position: relative;
  overflow: hidden;
}

.directory-salon-thumb > span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 4px 6px;
  border-radius: 5px;
  color: white;
  background: rgba(28, 25, 38, 0.78);
  backdrop-filter: blur(8px);
  font-size: 0.67rem;
  font-weight: 800;
}

.directory-salon-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.directory-salon-heading > div {
  min-width: 0;
}

.directory-salon-row .salon-row-main {
  gap: 7px;
}

.directory-salon-row h3 {
  font-size: 0.94rem;
}

.directory-salon-row .salon-row-main p {
  margin-top: 3px;
  font-size: 0.76rem;
}

.directory-salon-row .tag-row {
  flex-wrap: nowrap;
  gap: 5px;
  overflow: hidden;
}

.directory-salon-row .tag-row span {
  min-height: 22px;
  padding: 0 7px;
  font-size: 0.69rem;
  white-space: nowrap;
}

.directory-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  color: #4c3b77;
  font-size: 0.78rem;
  font-weight: 850;
}

.directory-rating span {
  color: #7560c5;
  font-size: 0.72rem;
}

.directory-salon-row .directory-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 680;
}

.directory-salon-row .directory-meta b {
  color: var(--ink);
  font-weight: 820;
}

.directory-salon-row .salon-row-side {
  align-self: stretch;
  justify-content: center;
  justify-items: center;
}

.directory-actions {
  align-content: center;
  gap: 6px;
}

.directory-actions .solid-button,
.directory-actions .outline-button {
  width: 100%;
}

.directory-detail-button {
  border-color: rgba(199, 182, 230, 0.54);
}

.directory-detail-button .icon {
  width: 15px;
  height: 15px;
}

@media (min-width: 1540px) {
  .directory-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .directory-salon-row {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .directory-salon-row .salon-thumb {
    width: 100%;
    height: clamp(150px, 10vw, 190px);
  }

  .directory-salon-row .salon-row-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.directory-map-surface .map-pin.actual {
  width: auto;
  min-width: 48px;
  height: 30px;
  padding: 0 9px;
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 9px;
  clip-path: none;
  color: white;
  background: linear-gradient(135deg, #51416f, #67549a);
  box-shadow: 0 8px 20px rgba(81, 65, 111, 0.28);
  transform: translate(-50%, calc(-100% - 6px));
  transform-origin: center bottom;
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.directory-map-surface .map-pin.actual::after {
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  background: inherit;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.directory-map-surface .map-pin.actual .map-pin-score {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: auto;
  height: auto;
  align-items: center;
  gap: 4px;
  border-radius: 0;
  background: transparent;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1;
  transform: none;
}

.directory-map-surface .map-pin.actual .map-pin-score b {
  color: #f3e8ff;
  font-size: 0.68rem;
}

.directory-map-surface .map-pin.actual.active {
  z-index: 5;
  color: #fff;
  background: linear-gradient(135deg, #67549a, #7d6aa8);
  box-shadow:
    0 10px 24px rgba(81, 65, 111, 0.3),
    0 0 0 4px rgba(125, 106, 168, 0.24);
  transform: translate(-50%, calc(-100% - 6px)) scale(1.08);
}

.directory-map-surface .map-pin.actual.active .map-pin-score b {
  color: #f3e8ff;
}

.directory-map-surface .map-user-pin {
  width: 18px;
  height: 18px;
  border: 4px solid white;
  border-radius: 50%;
  color: white;
  background: #31bfa1;
  box-shadow:
    0 0 0 3px rgba(49, 191, 161, 0.3),
    0 8px 22px rgba(28, 112, 97, 0.3);
  filter: none;
  transform: translate(-50%, -50%);
}

.directory-map-surface .map-user-pin::before {
  inset: -11px;
  border: 1px solid rgba(49, 191, 161, 0.48);
  border-radius: 50%;
  clip-path: none;
  background: rgba(49, 191, 161, 0.13);
  animation: locationPulse 1.9s ease-out infinite;
}

.directory-map-surface .map-user-pin::after {
  top: -31px;
  min-width: 38px;
  border-color: rgba(49, 191, 161, 0.38);
  color: #167b69;
  background: rgba(255, 255, 255, 0.96);
  content: "You";
}

@keyframes locationPulse {
  0% {
    opacity: 0.8;
    transform: scale(0.72);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.sticky-head {
  position: sticky;
  top: 74px;
  z-index: 10;
  padding: 16px 0;
  backdrop-filter: blur(18px);
}

.salon-card {
  grid-template-columns: 260px minmax(0, 1fr);
  overflow: hidden;
}

.salon-image {
  position: relative;
  min-height: 235px;
  background-size: cover;
  background-position: center;
}

.distance-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: white;
  background: rgba(47, 31, 26, 0.72);
  font-size: 0.8rem;
  font-weight: 800;
}

.salon-card-body {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.price-from {
  color: var(--accent-strong);
}

.availability-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: #fff7f3;
}

.availability-strip span {
  margin-right: 6px;
  color: var(--muted);
  font-weight: 800;
}

.map-panel {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 12px;
}

.map-surface {
  position: relative;
  height: 540px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(139, 91, 72, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(139, 91, 72, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f7eee8, #fffdfb);
  background-size: 58px 58px;
  box-shadow: var(--shadow-soft);
}

.actual-map {
  background: #edf1ed;
}

.actual-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.9) contrast(1.02);
}

.map-overlay,
.map-coordinate-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.map-pin {
  position: absolute;
  display: grid;
  width: 34px;
  height: 42px;
  place-items: center;
  border: 0;
  clip-path: polygon(
    50% 100%,
    18% 58%,
    13% 28%,
    26% 8%,
    50% 0,
    74% 8%,
    87% 28%,
    82% 58%
  );
  color: white;
  background: linear-gradient(135deg, var(--accent), #78dcc5);
  box-shadow:
    0 12px 26px rgba(126, 104, 196, 0.18),
    0 0 0 5px rgba(232, 247, 241, 0.32);
  transform-origin: center bottom;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

.map-pin.actual,
.map-user-pin {
  transform: translate(-50%, -100%);
  pointer-events: auto;
}

.map-pin.actual span {
  display: grid;
  width: 10px;
  height: 10px;
  place-items: center;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.96);
  transform: translateY(-5px) rotate(45deg);
}

.map-pin.actual .icon {
  display: none;
}

.map-pin.actual.active {
  transform: translate(-50%, -100%) scale(1.12);
  background: linear-gradient(135deg, var(--accent-strong), #66cdb4);
  box-shadow:
    0 18px 34px rgba(126, 104, 196, 0.24),
    0 0 0 7px rgba(205, 237, 220, 0.42);
}

.map-user-pin {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 46px;
  height: 56px;
  place-items: center;
  border: 0;
  clip-path: none;
  color: var(--accent-strong);
  background: transparent;
  filter: drop-shadow(0 16px 22px rgba(79, 146, 125, 0.22));
}

.map-user-pin .icon {
  display: none;
}

.map-user-pin::before {
  content: "";
  position: absolute;
  inset: 6px 7px 0;
  clip-path: polygon(
    50% 100%,
    18% 58%,
    13% 28%,
    26% 8%,
    50% 0,
    74% 8%,
    87% 28%,
    82% 58%
  );
  background: linear-gradient(135deg, #4fd5bb, var(--accent-strong));
}

.map-user-pin::after {
  position: absolute;
  top: -22px;
  left: 50%;
  min-width: 40px;
  border: 1px solid rgba(102, 205, 180, 0.42);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--accent-strong);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 20px rgba(126, 104, 196, 0.13);
  content: "You";
  font-size: 0.72rem;
  font-weight: 900;
  transform: translateX(-50%);
}

.pin-1 {
  top: 24%;
  left: 44%;
}

.pin-2 {
  top: 46%;
  left: 62%;
}

.pin-3 {
  top: 64%;
  left: 35%;
}

.pin-4 {
  top: 34%;
  left: 24%;
}

.map-card {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
  box-shadow: var(--shadow-soft);
}

.map-card span {
  color: var(--muted);
}

.empty-state {
  padding: 34px;
  border: 1px dashed #d7b7ac;
  border-radius: var(--radius-md);
  color: var(--muted);
  text-align: center;
  background: rgba(255, 255, 255, 0.58);
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 22px;
  align-items: start;
}

.salon-hero {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.salon-hero img {
  width: 100%;
  height: 390px;
  object-fit: cover;
}

.salon-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    0deg,
    rgba(34, 27, 24, 0.72),
    rgba(34, 27, 24, 0.04)
  );
}

.salon-hero-copy {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 24px;
  left: 24px;
  display: grid;
  gap: 10px;
  max-width: 780px;
  color: white;
}

.salon-hero-copy p {
  color: rgba(255, 255, 255, 0.82);
}

.tabs {
  display: flex;
  gap: 8px;
  margin: 18px 0;
  overflow-x: auto;
}

.tabs button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(126, 104, 196, 0.14);
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
  background: white;
  font-weight: 800;
  white-space: nowrap;
}

.tabs button.active {
  color: white;
  background: var(--accent-strong);
}

.tab-panel,
.service-group,
.review-list {
  display: grid;
  gap: 14px;
}

.service-group {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
}

.service-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid #f0e3dc;
}

.service-row:first-of-type {
  border-top: 0;
}

.service-row p,
.service-row span,
.review-card p,
.about-panel p {
  color: var(--muted);
}

.service-row > div:last-child {
  display: grid;
  gap: 10px;
  justify-items: end;
  align-content: start;
}

.booking-sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
}

.mini-service-list,
.reference-list,
.transaction-list,
.formula-list,
.generic-list {
  display: grid;
  gap: 10px;
}

.mini-service-list div,
.reference-list div,
.transaction-list div,
.formula-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: #f8eee8;
}

.stylist-grid,
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.stylist-card,
.review-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
}

.stylist-card.selectable {
  text-align: left;
}

.stylist-card.selectable.active,
.choice-card.active,
.style-option.active,
.client-row.active {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.pro-mode .client-row.active {
  outline-color: var(--pro-accent-strong);
}

.avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--radius-md);
  color: white;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  font-weight: 800;
}

.pro-mode .avatar {
  background: linear-gradient(
    135deg,
    var(--pro-accent),
    var(--pro-accent-strong)
  );
}

.avatar.large {
  width: 82px;
  height: 82px;
  font-size: 1.4rem;
}

.portfolio-tile {
  display: flex;
  min-height: 220px;
  align-items: end;
  padding: 18px;
  border-radius: var(--radius-md);
  color: white;
  background:
    linear-gradient(0deg, rgba(34, 27, 24, 0.68), rgba(34, 27, 24, 0.08)),
    url("assets/ai-try-on.webp") center / cover;
}

.portfolio-tile.tile-2,
.portfolio-tile.tile-4 {
  background:
    linear-gradient(0deg, rgba(34, 27, 24, 0.68), rgba(34, 27, 24, 0.08)),
    url("assets/salon-consultation.webp") center / cover;
}

.portfolio-tile div {
  display: grid;
  gap: 4px;
}

.portfolio-tile span {
  opacity: 0.82;
  font-size: 0.82rem;
  font-weight: 800;
}

.salon-site-mode {
  background: #ffffff;
}

.salon-site-shell {
  min-height: 100vh;
  background: var(--site-secondary, #f2ecfa);
}

.salon-site {
  color: var(--site-text);
  background: var(--site-secondary);
}

.salon-site.embedded-site {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.salon-site-nav {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 14px clamp(16px, 4vw, 56px);
  border-bottom: 1px solid
    color-mix(in srgb, var(--site-primary) 12%, transparent);
  background: color-mix(in srgb, var(--site-secondary) 92%, white);
  backdrop-filter: blur(20px);
}

.salon-site-brand,
.salon-site-nav nav,
.salon-site-book,
.site-primary-button,
.site-secondary-button,
.site-link-button,
.site-time-grid button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  font-weight: 820;
}

.salon-site-brand {
  gap: 10px;
  min-width: 210px;
  border: 0;
  color: var(--site-primary);
  background: transparent;
}

.salon-site-brand span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--radius-md);
  color: white;
  background: var(--site-primary);
}

.salon-site-nav nav {
  flex: 1;
  gap: 4px;
}

.salon-site-nav nav button {
  min-height: 38px;
  border: 0;
  padding: 0 11px;
  color: color-mix(in srgb, var(--site-primary) 72%, #6f6762);
  background: transparent;
  font-weight: 780;
}

.salon-site-book,
.site-primary-button {
  min-height: 44px;
  padding: 0 15px;
  border: 0;
  color: white;
  background: var(--site-primary);
  box-shadow: 0 14px 30px
    color-mix(in srgb, var(--site-primary) 22%, transparent);
}

.site-secondary-button,
.site-link-button,
.site-time-grid button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--site-primary) 18%, transparent);
  color: var(--site-primary);
  background: color-mix(in srgb, var(--site-secondary) 72%, white);
}

.salon-site-section {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(38px, 7vw, 92px) 0;
}

.site-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.78fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  min-height: calc(100vh - 76px);
}

.site-hero-copy,
.site-section-head,
.site-location > div,
.site-booking > div,
.site-tryon > div {
  display: grid;
  gap: 12px;
}

.site-hero-copy p,
.site-section-head p,
.site-location p,
.site-booking p,
.site-tryon p {
  color: var(--site-accent);
  font-size: 0.78rem;
  font-weight: 860;
  text-transform: uppercase;
}

.site-hero-copy h1 {
  max-width: 820px;
  color: var(--site-primary);
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 0.96;
}

.site-hero-copy > span,
.site-tryon span,
.site-booking span,
.site-location span,
.site-location small {
  color: var(--site-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.site-hero-media {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--site-surface);
  box-shadow: 0 26px 64px
    color-mix(in srgb, var(--site-primary) 14%, transparent);
}

.site-image-edit-button {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid rgba(31, 117, 128, 0.22);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--pro-accent-strong);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 26px rgba(25, 43, 68, 0.14);
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}

.site-image-edit-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.site-hero-media img {
  width: 100%;
  height: clamp(420px, 54vw, 680px);
  object-fit: cover;
}

.site-hero-media div {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 4px;
  min-width: 190px;
  padding: 14px;
  border-radius: var(--radius-md);
  color: var(--site-primary);
  background: color-mix(
    in srgb,
    var(--site-surface) 86%,
    var(--site-secondary)
  );
  box-shadow: 0 16px 34px rgba(24, 20, 18, 0.14);
}

.site-section-head {
  max-width: 680px;
  margin-bottom: 22px;
}

.site-section-head h2,
.site-tryon h2,
.site-booking h2,
.site-location h2 {
  color: var(--site-primary);
  font-size: clamp(1.8rem, 3vw, 3.4rem);
}

.site-service-grid,
.site-stylist-grid,
.site-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.site-service-card,
.site-stylist-card,
.site-review-grid article,
.site-faq-list details {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--site-primary) 12%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(
    in srgb,
    var(--site-surface) 84%,
    var(--site-secondary)
  );
  box-shadow: 0 16px 34px
    color-mix(in srgb, var(--site-primary) 8%, transparent);
}

.site-service-card span,
.site-service-card p,
.site-stylist-card p,
.site-review-grid p,
.site-faq-list p {
  color: var(--site-muted);
}

.site-service-card div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.site-stylist-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius-md) - 6px);
  object-fit: cover;
  object-position: center 24%;
  background: color-mix(
    in srgb,
    var(--site-secondary) 74%,
    var(--site-surface)
  );
}

.pro-invitation-acceptance {
  display: grid;
  min-height: min(720px, calc(100vh - 96px));
  place-items: center;
  padding: clamp(20px, 5vw, 72px);
}

.pro-invitation-acceptance > .business-panel {
  display: grid;
  width: min(100%, 680px);
  gap: 18px;
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid color-mix(in srgb, var(--pro-accent) 20%, var(--line));
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(33, 24, 54, 0.12);
}

.pro-invitation-acceptance h1 {
  max-width: 13ch;
  font-size: clamp(2rem, 5vw, 3.7rem);
  line-height: 0.98;
}

.pro-invitation-acceptance p {
  max-width: 58ch;
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.site-tryon,
.site-booking,
.site-location {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.78fr);
  gap: 22px;
  align-items: center;
}

.site-tryon,
.site-booking {
  padding-inline: clamp(18px, 4vw, 42px);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--site-primary) 8%, var(--site-surface));
}

.site-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.site-gallery-grid figure {
  position: relative;
  min-width: 0;
  margin: 0;
}

.site-gallery-grid img {
  width: 100%;
  min-height: 190px;
  height: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--site-surface);
}

.site-gallery-grid .gallery-1 {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 390px;
}

.site-gallery-grid .gallery-1 img {
  min-height: 390px;
}

.site-image-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 30px;
  border: 1px solid rgba(31, 117, 128, 0.2);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--pro-accent-strong);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 20px rgba(25, 43, 68, 0.12);
  font-size: 0.74rem;
  font-weight: 840;
}

.site-location iframe,
.site-map-fallback {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--site-surface);
}

.site-map-fallback {
  display: grid;
  place-items: center;
  color: var(--site-primary);
}

.site-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.site-time-grid .site-primary-button {
  grid-column: 1 / -1;
}

.site-faq-list {
  display: grid;
  gap: 10px;
}

.site-faq-list summary {
  cursor: pointer;
  color: var(--site-primary);
  font-weight: 840;
}

.site-layout-gallery .site-gallery {
  width: min(1320px, calc(100% - 32px));
}

.site-layout-booking .site-booking {
  border: 2px solid color-mix(in srgb, var(--site-accent) 22%, transparent);
}

.embedded-site {
  font-size: 0.86rem;
}

.embedded-site .salon-site-nav {
  position: static;
  min-height: 58px;
  padding: 10px 14px;
}

.embedded-site .salon-site-nav nav,
.embedded-site .salon-site-book {
  display: none;
}

.embedded-site .salon-site-section {
  width: min(100% - 24px, 980px);
  padding: 28px 0;
}

.embedded-site .site-hero {
  min-height: auto;
  grid-template-columns: 1fr;
}

.embedded-site .site-hero-copy h1 {
  font-size: clamp(2.1rem, 5vw, 4rem);
}

.embedded-site .site-hero-media img {
  height: 280px;
}

.tryon-layout,
.booking-layout,
.me-layout,
.services-layout,
.clients-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 22px;
  align-items: start;
}

.tryon-stage,
.style-builder,
.booking-main,
.booking-summary {
  display: grid;
  gap: 18px;
}

.tryon-image-frame {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  overflow: hidden;
  border-radius: var(--radius-md);
  padding: 12px;
  background: #e6ddf5;
}

.tryon-image-frame.with-result {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tryon-preview-card {
  position: relative;
  display: grid;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 104, 196, 0.12);
  border-radius: var(--radius-sm);
  background: #fbf9ff;
}

.tryon-preview-card img {
  width: 100%;
  height: clamp(330px, 46vw, 560px);
  object-fit: contain;
  background: #fbf9ff;
}

.tryon-image-frame.single-preview .tryon-preview-card img {
  height: clamp(380px, 50vw, 620px);
}

.tryon-preview-card figcaption {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: white;
  background: rgba(34, 27, 24, 0.66);
  font-size: 0.8rem;
  font-weight: 800;
}

.tryon-preview-card.generated figcaption {
  background: rgba(126, 104, 196, 0.82);
}

.comparison-labels {
  position: absolute;
  inset: 16px 16px auto;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.comparison-labels span {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: white;
  background: rgba(34, 27, 24, 0.66);
  font-size: 0.8rem;
  font-weight: 800;
}

.upload-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 10px;
}

.upload-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  min-width: 0;
  padding: 0 14px;
  border: 1px dashed #c7b6e6;
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
  background: #f2ecfa;
  font-weight: 800;
  cursor: pointer;
}

.upload-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.tryon-studio {
  display: grid;
  gap: 22px;
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
}

.tryon-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 520px);
  gap: 18px;
  align-items: center;
  padding: clamp(20px, 3vw, 34px);
  border-color: rgba(126, 104, 196, 0.14);
  background:
    radial-gradient(
      circle at 92% 12%,
      rgba(205, 237, 220, 0.5),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98),
      rgba(242, 236, 250, 0.88)
    );
}

.tryon-hero-copy {
  display: grid;
  gap: 10px;
}

.tryon-hero h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(1.85rem, 2.4vw, 2.65rem);
  line-height: 1.08;
}

.tryon-hero span,
.tryon-tip-card span,
.tryon-capture-card span,
.selected-look-note span,
.tryon-result-card p,
.tryon-lightbox-footer p {
  color: var(--muted);
}

.tryon-hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.tryon-hero-benefits span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(126, 104, 196, 0.12);
  border-radius: 999px;
  color: var(--accent-strong);
  background: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
  font-weight: 820;
}

.tryon-hero-benefits .icon {
  width: 15px;
  height: 15px;
}

.tryon-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tryon-stepper button {
  display: inline-flex;
  min-width: 0;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: white;
  font-weight: 820;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.tryon-stepper button span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  color: white;
  background: #c7b6e6;
  font-size: 0.78rem;
}

.tryon-stepper button strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tryon-stepper button.active,
.tryon-stepper button.done {
  border-color: rgba(126, 104, 196, 0.22);
  color: var(--accent-strong);
  background: #f2ecfa;
}

.tryon-stepper button.active {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(126, 104, 196, 0.1);
}

.tryon-stepper button.active span,
.tryon-stepper button.done span {
  background: var(--accent-strong);
}

.tryon-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  gap: 22px;
  align-items: start;
}

.tryon-stage {
  min-width: 0;
  scroll-margin-top: 92px;
}

.tryon-side-panel {
  position: sticky;
  top: 92px;
  max-height: calc(100dvh - 112px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.tryon-step-panel {
  display: grid;
  gap: 18px;
  animation: panelIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.tryon-photo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 16px;
  align-items: stretch;
}

.tryon-photo-preview,
.tryon-side-photo {
  position: relative;
  display: grid;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 104, 196, 0.12);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, rgba(126, 104, 196, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(126, 104, 196, 0.06) 1px, transparent 1px), #fbf9ff;
  background-size: 42px 42px;
}

.tryon-photo-preview img,
.tryon-side-photo img {
  width: 100%;
  height: clamp(340px, 42vw, 520px);
  object-fit: contain;
}

.tryon-side-photo img {
  height: 300px;
}

.tryon-side-photo .tryon-character-art {
  width: 100%;
  height: 300px;
}

.tryon-photo-preview figcaption,
.tryon-side-photo figcaption {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: white;
  background: rgba(34, 27, 24, 0.68);
  font-size: 0.82rem;
  font-weight: 820;
}

.uploaded-user-photo img {
  background: #fbf9ff;
}

.tryon-side-reference,
.tryon-mini-before-after,
.tryon-selection-summary,
.tryon-result-detail-card,
.tryon-generation-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px;
  background: white;
}

.tryon-side-reference {
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
}

.tryon-side-reference.empty {
  grid-template-columns: auto minmax(0, 1fr);
  color: var(--muted);
}

.tryon-side-reference.empty .icon {
  color: var(--accent-strong);
}

.tryon-side-reference-art {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 1 / 1;
  background: #f2ecfa;
}

.tryon-side-reference-kicker,
.tryon-match-service span {
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tryon-side-reference strong {
  display: block;
  margin: 4px 0;
  line-height: 1.15;
}

.tryon-side-reference small {
  color: var(--muted);
  line-height: 1.35;
}

.tryon-side-analysis {
  display: grid;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(126, 104, 196, 0.14);
  border-radius: var(--radius-md);
  padding: 12px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 247, 243, 0.96),
      rgba(255, 255, 255, 0.98)
    ),
    white;
  box-shadow: 0 12px 28px rgba(65, 49, 43, 0.06);
}

.tryon-side-analysis.invalid {
  border-color: rgba(164, 48, 48, 0.2);
  background:
    linear-gradient(
      135deg,
      rgba(255, 246, 244, 0.98),
      rgba(255, 255, 255, 0.98)
    ),
    white;
}

.tryon-side-analysis.invalid .icon {
  width: 22px;
  height: 22px;
  color: #7d68c4;
}

.tryon-side-analysis-head,
.tryon-side-rec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tryon-side-analysis-head div {
  display: grid;
  gap: 2px;
}

.tryon-side-analysis-head span,
.tryon-side-rec-head span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tryon-side-analysis-head strong,
.tryon-side-rec-head strong {
  color: var(--text);
  line-height: 1.15;
}

.analysis-spinner {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 3px solid rgba(126, 104, 196, 0.12);
  border-top-color: var(--accent-strong);
  border-radius: 50%;
  animation: aiCoreSpin 900ms linear infinite;
}

.tryon-detected-color {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(126, 104, 196, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(255, 250, 247, 0.82);
}

.tryon-detected-color span {
  color: var(--text);
  font-weight: 900;
}

.tryon-detected-color small {
  color: var(--muted);
  line-height: 1.35;
}

.tryon-reupload-note {
  border: 1px solid rgba(164, 48, 48, 0.16);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  color: #7b2f2a;
  background: rgba(255, 244, 241, 0.86);
  font-size: 0.86rem;
  font-weight: 780;
  line-height: 1.35;
}

.tryon-side-rec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tryon-side-rec-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(126, 104, 196, 0.12);
  border-radius: var(--radius-sm);
  padding: 8px;
  color: var(--text);
  background: white;
  text-align: left;
  animation: cardIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: var(--tile-delay, 0ms);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.tryon-side-rec-card:hover {
  border-color: rgba(126, 104, 196, 0.35);
  box-shadow: 0 12px 24px rgba(65, 49, 43, 0.08);
  transform: translateY(-1px);
}

.tryon-side-rec-card figure {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  background: #f8f3ef;
}

.tryon-side-rec-card span {
  min-width: 0;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.12;
}

.tryon-side-rec-card small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tryon-side-rec-card.skeleton {
  min-height: 148px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.76), transparent),
    #f5eee9;
  background-size:
    180% 100%,
    auto;
  animation: aiScanSweep 1.4s ease-in-out infinite;
}

.tryon-mini-before-after {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tryon-mini-before-after figure,
.tryon-before-after figure,
.tryon-selection-summary figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #fbf9ff;
}

.tryon-mini-before-after img {
  width: 100%;
  aspect-ratio: 1 / 1.08;
  object-fit: contain;
}

.tryon-mini-before-after figcaption,
.tryon-before-after figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border-radius: 999px;
  padding: 6px 9px;
  color: white;
  background: rgba(34, 27, 24, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
}

.tryon-photo-actions,
.tryon-question-stack,
.tryon-side-panel,
.tryon-brief,
.tryon-style-picker {
  display: grid;
  gap: 12px;
}

.tryon-capture-card,
.tryon-tip-card {
  display: grid;
  gap: 8px;
  min-height: 112px;
  align-content: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
}

.tryon-capture-card {
  cursor: pointer;
  width: 100%;
  border-style: solid;
  color: var(--text);
  text-align: left;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.tryon-capture-card:hover {
  border-color: rgba(126, 104, 196, 0.28);
  box-shadow: 0 16px 34px rgba(126, 104, 196, 0.1);
  transform: translateY(-2px);
}

.tryon-capture-card .icon {
  color: var(--accent-strong);
}

.tryon-capture-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.tryon-camera-panel {
  position: relative;
  width: min(100%, 560px, calc((100dvh - 190px) * 0.75));
  min-height: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(126, 104, 196, 0.12);
  border-radius: var(--radius-md);
  background: #1f1816;
}

.tryon-camera-panel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center center;
  transform: scaleX(-1);
}

.tryon-camera-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 12px;
}

body.camera-modal-open {
  overflow: hidden;
}

.tryon-camera-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(22, 18, 28, 0.82);
  backdrop-filter: blur(18px);
}

.tryon-camera-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(100%, 780px);
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  background: #fbf9ff;
  box-shadow: 0 30px 100px rgba(12, 8, 18, 0.42);
}

.tryon-camera-toolbar,
.tryon-camera-modal-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.96);
}

.tryon-camera-toolbar > div {
  display: grid;
  gap: 2px;
}

.tryon-camera-toolbar h2 {
  font-size: 1.12rem;
}

.tryon-camera-frame-shell {
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: auto;
  padding: 10px;
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(126, 104, 196, 0.22),
      transparent 42%
    ),
    #17131d;
}

.tryon-camera-guide {
  position: absolute;
  inset: 11% 15% 18%;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.tryon-camera-guide::before {
  width: min(76%, 310px);
  height: 72%;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 48% 48% 42% 42%;
  content: "";
  box-shadow: 0 0 0 999px rgba(20, 16, 24, 0.08);
}

.tryon-camera-guide span {
  position: absolute;
  right: 0;
  bottom: -6%;
  left: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.44);
}

.tryon-camera-overlay {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 14px;
  left: 14px;
  display: grid;
  gap: 3px;
  padding: 12px;
  border-radius: var(--radius-sm);
  color: white;
  background: rgba(34, 27, 24, 0.7);
  backdrop-filter: blur(14px);
}

.tryon-camera-overlay span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
}

.tryon-camera-controls {
  display: grid;
  gap: 8px;
}

.tryon-camera-modal-controls {
  justify-content: flex-end;
  border-top: 1px solid rgba(126, 104, 196, 0.1);
}

.tryon-shutter-button {
  min-width: 220px;
}

.tryon-basics-panel,
.tryon-inspiration-panel,
.tryon-color-panel,
.tryon-custom-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
}

.tryon-basics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tryon-gender-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tryon-gender-card {
  display: grid;
  gap: 8px;
  min-height: 112px;
  align-content: center;
  border: 1px solid rgba(126, 104, 196, 0.14);
  border-radius: var(--radius-sm);
  padding: 18px;
  color: var(--text);
  background:
    linear-gradient(
      135deg,
      rgba(255, 244, 239, 0.82),
      rgba(255, 255, 255, 0.95)
    ),
    white;
  text-align: left;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    background 180ms ease;
}

.tryon-gender-card span {
  font-size: 1.18rem;
  font-weight: 900;
}

.tryon-gender-card small {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.tryon-gender-card:hover,
.tryon-gender-card.active {
  border-color: rgba(126, 104, 196, 0.45);
  background:
    linear-gradient(
      135deg,
      rgba(255, 237, 229, 0.95),
      rgba(255, 250, 247, 0.98)
    ),
    white;
  box-shadow: 0 14px 30px rgba(126, 104, 196, 0.1);
  transform: translateY(-1px);
}

.tryon-choice-group {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.tryon-choice-group > span {
  color: var(--text);
  font-weight: 860;
}

.tryon-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.tryon-choice-grid button {
  display: grid;
  gap: 5px;
  min-height: 86px;
  align-content: start;
  border: 1px solid rgba(126, 104, 196, 0.14);
  border-radius: var(--radius-sm);
  padding: 13px;
  color: var(--text);
  background: #fbf9ff;
  text-align: left;
  transition:
    border-color 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease,
    background 170ms ease;
}

.tryon-choice-grid button:hover,
.tryon-choice-grid button.active {
  border-color: rgba(126, 104, 196, 0.44);
  background: #f2ecfa;
  box-shadow: 0 12px 24px rgba(126, 104, 196, 0.09);
  transform: translateY(-1px);
}

.tryon-choice-grid strong {
  font-size: 0.95rem;
}

.tryon-choice-grid small,
.tryon-inspiration-card small,
.tryon-inspiration-card em,
.tryon-basics-empty span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.38;
}

.tryon-basics-empty {
  display: grid;
  min-height: 190px;
  place-items: center;
  gap: 8px;
  border: 1px dashed rgba(126, 104, 196, 0.26);
  border-radius: var(--radius-md);
  padding: 28px;
  color: var(--text);
  background: #fbf9ff;
  text-align: center;
}

.tryon-basics-empty .icon {
  color: var(--accent-strong);
}

.tryon-panel-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.tryon-panel-title div {
  display: grid;
  gap: 3px;
}

.tryon-panel-title strong {
  color: var(--text);
  font-size: 1rem;
}

.tryon-panel-title span {
  color: var(--muted);
  font-size: 0.86rem;
}

.tryon-catalog-count {
  align-self: start;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--success);
  background: #e0f5ea;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.tryon-filter-panel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(126, 104, 196, 0.12);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: #fbf9ff;
}

.tryon-filter-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tryon-filter-guide > span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 1px 8px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: white;
}

.tryon-filter-guide b {
  grid-row: 1 / span 2;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--accent-strong);
  font-size: 0.72rem;
}

.tryon-filter-guide strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tryon-filter-guide small {
  color: var(--muted);
  font-size: 0.68rem;
}

.tryon-filter-group {
  display: grid;
  gap: 7px;
}

.tryon-filter-group > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tryon-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  overflow: visible;
  padding-bottom: 0;
}

.tryon-filter-chip {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(126, 104, 196, 0.16);
  border-radius: 999px;
  padding: 8px 11px;
  color: var(--text);
  background: white;
  font-size: 0.82rem;
  font-weight: 820;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.tryon-color-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tryon-color-filter-head > span,
.tryon-color-family-head small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tryon-color-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.tryon-color-family {
  display: grid;
  gap: 7px;
  align-content: start;
  border: 1px solid rgba(126, 104, 196, 0.1);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: rgba(255, 255, 255, 0.84);
}

.tryon-color-family-head {
  display: grid;
  gap: 2px;
}

.tryon-color-family-head span {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.3;
}

.tryon-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tryon-color-filter-chip {
  min-height: 38px;
}

.tryon-filter-chip:hover,
.tryon-filter-chip.active {
  border-color: rgba(126, 104, 196, 0.45);
  color: var(--accent-strong);
  background: #fff1eb;
  transform: translateY(-1px);
}

.color-dot,
.tryon-photo-insight i {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid white;
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(126, 104, 196, 0.18);
}

.tryon-photo-insight {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  overflow: hidden;
  border: 1px solid rgba(126, 104, 196, 0.14);
  border-radius: var(--radius-sm);
  padding: 12px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 245, 240, 0.94),
      rgba(255, 255, 255, 0.96)
    ),
    white;
}

.tryon-photo-insight.loading::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.7),
    transparent
  );
  animation: aiScanSweep 1.8s ease-in-out infinite;
}

.tryon-photo-insight span,
.tryon-photo-insight strong,
.tryon-photo-insight small,
.tryon-photo-insight i {
  position: relative;
  z-index: 1;
}

.tryon-photo-insight span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tryon-photo-insight strong {
  color: var(--text);
  font-size: 0.98rem;
}

.tryon-photo-insight small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.tryon-inspiration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.tryon-inspiration-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  min-height: 282px;
  border: 1px solid rgba(126, 104, 196, 0.12);
  border-radius: var(--radius-sm);
  padding: 12px;
  color: var(--text);
  background: white;
  text-align: left;
  animation: cardIn 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: var(--tile-delay, 0ms);
  transition:
    border-color 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease,
    background 170ms ease;
}

.tryon-character-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 1 / 1;
  background: #f8f3ef;
  box-shadow:
    inset 0 0 0 1px rgba(126, 104, 196, 0.08),
    0 14px 28px rgba(65, 49, 43, 0.07);
}

.tryon-character-art {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
}

.tryon-variation-art {
  background: #fbf9ff;
}

.tryon-character-sprite {
  background-color: #f2ecfa;
  background-image: url("assets/tryon-character-sheet.png");
  background-repeat: no-repeat;
  background-size: 400% 300%;
  background-position: calc(var(--sprite-x, 0) * 33.333333%)
    calc(var(--sprite-y, 0) * 50%);
}

.tryon-character-frame::after {
  display: none;
  content: none;
}

.tryon-reference-photo {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background-color: #f2ecfa;
  background-image: var(--ref-sheet);
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background-position: calc(var(--ref-x, 0) * 33.333333%)
    calc(var(--ref-y, 0) * 33.333333%);
}

.tryon-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tryon-family-pill,
.tryon-color-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--text);
  background: #f2ecfa;
  border: 1px solid rgba(126, 104, 196, 0.12);
  font-size: 0.66rem;
  font-weight: 860;
}

.tryon-color-pill i {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(126, 104, 196, 0.18);
}

.tryon-inspiration-card strong {
  min-width: 0;
  font-size: 0.96rem;
  line-height: 1.2;
}

.tryon-inspiration-card em {
  align-self: end;
  font-style: normal;
  font-weight: 760;
}

.tryon-inspiration-card.active {
  border-color: var(--accent-strong);
  background: #f2ecfa;
  box-shadow:
    0 0 0 3px rgba(126, 104, 196, 0.14),
    0 18px 36px rgba(126, 104, 196, 0.16);
  transform: translateY(-2px);
}

.tryon-selected-style-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  border: 1px solid rgba(79, 146, 125, 0.22);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  background: linear-gradient(
    135deg,
    rgba(232, 247, 241, 0.94),
    rgba(255, 255, 255, 0.96)
  );
}

.tryon-selected-style-banner > div {
  display: grid;
  gap: 2px;
}

.tryon-selected-style-banner span,
.tryon-selected-style-banner small {
  color: var(--muted);
  font-size: 0.74rem;
}

.tryon-selected-style-banner strong {
  font-size: 0.92rem;
}

.tryon-selected-style-banner > .icon {
  color: var(--success);
}

.tryon-show-more {
  justify-self: center;
  border: 1px solid rgba(126, 104, 196, 0.28);
  border-radius: 999px;
  padding: 11px 16px;
  color: var(--accent-strong);
  background: white;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(126, 104, 196, 0.08);
  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    background 170ms ease;
}

.tryon-show-more:hover {
  background: #f2ecfa;
  box-shadow: 0 14px 28px rgba(126, 104, 196, 0.12);
  transform: translateY(-1px);
}

.tryon-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.tryon-color-grid button {
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(126, 104, 196, 0.14);
  border-radius: var(--radius-sm);
  padding: 0 11px;
  color: var(--text);
  background: #fbf9ff;
  font-weight: 820;
  text-align: left;
}

.tryon-color-grid button.active {
  border-color: rgba(126, 104, 196, 0.45);
  background: #f2ecfa;
  box-shadow: 0 10px 22px rgba(126, 104, 196, 0.08);
}

.tryon-color-grid i {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 2px solid white;
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(126, 104, 196, 0.16);
}

.tryon-question {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
}

.tryon-question > span,
.tryon-text-question span {
  color: var(--text);
  font-weight: 860;
}

.tryon-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tryon-chip-row button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(126, 104, 196, 0.16);
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
  background: #fbf9ff;
  font-weight: 800;
  transition:
    background 170ms ease,
    color 170ms ease,
    border-color 170ms ease,
    transform 170ms ease;
}

.tryon-chip-row button.active {
  color: white;
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  transform: translateY(-1px);
}

.tryon-text-question {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
}

.tryon-text-question input,
.tryon-text-question textarea {
  width: 100%;
  border: 1px solid rgba(126, 104, 196, 0.18);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  color: var(--text);
  background: #fbf9ff;
  outline: 0;
  resize: vertical;
}

.tryon-text-question input:focus,
.tryon-text-question textarea:focus {
  border-color: rgba(126, 104, 196, 0.4);
  box-shadow: 0 0 0 4px rgba(126, 104, 196, 0.1);
}

.tryon-style-picker {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fbf9ff;
}

.section-head.compact {
  margin-bottom: 2px;
}

.section-head.compact h3 {
  font-size: 1.05rem;
}

.tryon-ai-generation-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1fr);
  gap: 22px;
  min-height: clamp(420px, 54vh, 620px);
  overflow: hidden;
  border: 1px solid rgba(126, 104, 196, 0.14);
  border-radius: var(--radius-md);
  padding: clamp(18px, 3vw, 32px);
  background:
    radial-gradient(
      circle at 24% 22%,
      rgba(102, 205, 180, 0.24),
      transparent 28%
    ),
    radial-gradient(
      circle at 78% 30%,
      rgba(73, 103, 121, 0.16),
      transparent 30%
    ),
    linear-gradient(135deg, #fbf9ff, #f2ecfa 48%, #fffdfb);
  box-shadow: 0 24px 70px rgba(126, 104, 196, 0.12);
}

.tryon-ai-generation-stage::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent),
    linear-gradient(rgba(126, 104, 196, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 104, 196, 0.05) 1px, transparent 1px);
  background-size:
    46% 100%,
    36px 36px,
    36px 36px;
  animation: aiScanSweep 2.6s ease-in-out infinite;
  pointer-events: none;
}

.tryon-ai-visual,
.tryon-ai-copy,
.tryon-ai-pipeline {
  position: relative;
  z-index: 1;
}

.tryon-ai-visual {
  display: grid;
  min-height: 320px;
  place-items: center;
}

.tryon-ai-core {
  position: relative;
  display: grid;
  width: min(260px, 70vw);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  color: white;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0 9%,
    rgba(102, 205, 180, 0.9) 10% 22%,
    rgba(126, 104, 196, 0.94) 23% 42%,
    rgba(38, 31, 29, 0.98) 43% 100%
  );
  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, 0.2),
    0 28px 70px rgba(126, 104, 196, 0.28);
}

.tryon-ai-core span {
  position: absolute;
  inset: var(--ring-inset, 12px);
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-top-color: rgba(255, 255, 255, 0.95);
  border-radius: inherit;
  animation: aiCoreSpin var(--spin-speed, 4s) linear infinite;
}

.tryon-ai-core span:nth-child(1) {
  --ring-inset: 16px;
  --spin-speed: 3.2s;
}

.tryon-ai-core span:nth-child(2) {
  --ring-inset: 42px;
  --spin-speed: 4.8s;
  animation-direction: reverse;
}

.tryon-ai-core span:nth-child(3) {
  --ring-inset: 70px;
  --spin-speed: 2.8s;
}

.tryon-ai-core .icon {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 8px 18px rgba(255, 255, 255, 0.35));
}

.tryon-scan-grid {
  position: absolute;
  inset: 9%;
  border-radius: 28px;
  border: 1px solid rgba(126, 104, 196, 0.18);
  background:
    linear-gradient(90deg, rgba(126, 104, 196, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(126, 104, 196, 0.1) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle, transparent 0 34%, black 35% 100%);
  opacity: 0.65;
}

.tryon-ai-copy {
  align-self: center;
}

.tryon-ai-copy h2 {
  max-width: 680px;
  margin: 5px 0 10px;
  font-size: clamp(2rem, 4vw, 4.4rem);
  line-height: 0.94;
}

.tryon-ai-copy span {
  display: block;
  max-width: 620px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.5;
}

.tryon-ai-pipeline {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.tryon-ai-pipeline span {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(126, 104, 196, 0.13);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
  font-weight: 900;
  animation: aiStepPulse 1.4s ease-in-out infinite;
  animation-delay: var(--step-delay, 0ms);
}

.tryon-before-after {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tryon-before-after figure {
  border: 1px solid var(--line);
  box-shadow: 0 16px 34px rgba(126, 104, 196, 0.08);
}

.tryon-before-after-image {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  background: transparent;
}

.tryon-before-after-image::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 58%, rgba(34, 27, 24, 0.26));
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.tryon-before-after-image span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  border-radius: 999px;
  padding: 8px 10px;
  color: white;
  background: rgba(34, 27, 24, 0.76);
  font-size: 0.76rem;
  font-weight: 900;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.tryon-before-after-image:hover::after,
.tryon-before-after-image:hover span {
  opacity: 1;
  transform: translateY(0);
}

.tryon-before-after-image img {
  width: 100%;
  height: clamp(330px, 38vw, 520px);
  object-fit: contain;
  background:
    linear-gradient(90deg, rgba(126, 104, 196, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(126, 104, 196, 0.045) 1px, transparent 1px), #fffdfb;
  background-size: 44px 44px;
}

.tryon-result-detail-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.tryon-result-detail-card h3 {
  margin: 3px 0 6px;
  font-size: 1.35rem;
}

.tryon-result-detail-card span,
.tryon-selection-summary p,
.tryon-salon-match-body p,
.tryon-match-service small,
.tryon-match-review span {
  color: var(--muted);
}

.tryon-salon-matches {
  display: grid;
  gap: 16px;
  margin-top: 4px;
  padding-top: 4px;
}

.tryon-salon-match-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 16px;
  align-items: start;
}

.tryon-salon-match-list {
  display: grid;
  gap: 14px;
}

.tryon-salon-match {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
  box-shadow: 0 14px 30px rgba(126, 104, 196, 0.07);
  animation: cardIn 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: var(--tile-delay, 0ms);
}

.tryon-salon-choice {
  display: grid;
  gap: 18px;
}

.tryon-salon-match.selectable {
  cursor: pointer;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.tryon-salon-match.selectable:hover,
.tryon-salon-match.selectable:focus-visible {
  border-color: rgba(126, 104, 196, 0.42);
  box-shadow: 0 18px 38px rgba(126, 104, 196, 0.14);
  transform: translateY(-1px);
  outline: none;
}

.tryon-salon-match-media {
  position: relative;
  min-height: 100%;
  background: #f2ecfa;
}

.tryon-salon-match-media img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.tryon-salon-match-media span {
  position: absolute;
  top: 12px;
  left: 12px;
  border-radius: 999px;
  padding: 7px 10px;
  color: white;
  background: rgba(34, 27, 24, 0.72);
  font-size: 0.76rem;
  font-weight: 900;
}

.tryon-salon-match-body {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.tryon-match-service {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(126, 104, 196, 0.13);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: #fbf9ff;
}

.tryon-match-review {
  display: grid;
  gap: 5px;
  margin: 0;
  border-left: 3px solid var(--accent-soft);
  padding-left: 12px;
}

.tryon-match-review strong {
  color: var(--accent-strong);
  letter-spacing: 1px;
}

.tryon-salon-match iframe {
  width: 100%;
  height: 150px;
  border: 0;
  border-radius: var(--radius-sm);
  background: #edf1ed;
}

.tryon-salon-match-layout .map-panel {
  top: 90px;
}

.tryon-salon-match-layout .map-surface {
  height: 360px;
}

.tryon-selection-summary {
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1fr);
  align-items: start;
}

.tryon-selection-summary img {
  width: 100%;
  height: 220px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: #fbf9ff;
}

.tryon-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.tryon-result-card {
  display: grid;
  grid-template-rows: auto minmax(108px, 1fr) auto;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.tryon-result-card:hover,
.tryon-result-card.selected {
  border-color: rgba(126, 104, 196, 0.3);
  box-shadow: 0 18px 38px rgba(126, 104, 196, 0.12);
  transform: translateY(-2px);
}

.tryon-result-card.selected {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.tryon-result-image {
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-sm);
  background: #f2ecfa;
}

.tryon-result-image img {
  width: 100%;
  height: clamp(210px, 23vw, 300px);
  object-fit: contain;
  transition: transform 260ms ease;
}

.tryon-result-card:hover .tryon-result-image img {
  transform: scale(1.018);
}

.tryon-result-card h3 {
  margin-top: 4px;
  font-size: 1.08rem;
}

.tryon-result-card span {
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 860;
  text-transform: uppercase;
}

.tryon-result-actions,
.tryon-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.tryon-footer {
  align-items: center;
  padding-top: 4px;
}

.tryon-brief {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tryon-brief div,
.selected-look-note {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fbf9ff;
}

.tryon-brief span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 820;
}

.tryon-brief strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.9rem;
}

.tryon-prompt-notes {
  display: grid;
  gap: 8px;
}

.tryon-prompt-notes div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: #fbf9ff;
}

.tryon-prompt-notes span {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tryon-prompt-notes strong {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.35;
}

.tryon-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  animation: lightboxFade 180ms ease both;
}

.tryon-lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(25, 18, 16, 0.72);
  backdrop-filter: blur(14px);
}

.tryon-lightbox-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1180px, 100%);
  max-height: calc(100vh - 36px);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #fbf9ff;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34);
  animation: panelIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.tryon-lightbox-toolbar,
.tryon-lightbox-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.tryon-lightbox-footer {
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.tryon-lightbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.tryon-lightbox-actions .outline-button.active {
  border-color: rgba(126, 104, 196, 0.42);
  color: var(--accent-strong);
  background: #fff0eb;
}

.tryon-lightbox-body {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  padding: 16px 68px;
  background:
    linear-gradient(90deg, rgba(126, 104, 196, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(126, 104, 196, 0.06) 1px, transparent 1px), #fffdfb;
  background-size: 44px 44px;
}

.tryon-lightbox-body img {
  max-width: 100%;
  max-height: calc(100vh - 210px);
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 48px rgba(126, 104, 196, 0.12);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  color: white;
  background: rgba(34, 27, 24, 0.72);
}

.lightbox-nav.prev {
  left: 16px;
  transform: translateY(-50%) rotate(180deg);
}

.lightbox-nav.next {
  right: 16px;
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lightboxFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mapZoomSettle {
  from {
    opacity: 0.72;
    transform: scale(0.975);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes aiCoreSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes aiScanSweep {
  0%,
  100% {
    background-position:
      -48% 0,
      0 0,
      0 0;
  }

  50% {
    background-position:
      148% 0,
      0 18px,
      18px 0;
  }
}

@keyframes aiStepPulse {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 rgba(126, 104, 196, 0);
  }

  50% {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(126, 104, 196, 0.1);
  }
}

.category-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 3px;
}

.category-scroll button {
  flex: 0 0 auto;
}

.style-list {
  display: grid;
  gap: 10px;
}

.style-option,
.choice-card,
.client-row {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
}

.style-option {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  text-align: left;
}

.style-option span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.style-option small {
  color: var(--muted);
}

.style-option b {
  color: var(--accent-strong);
  white-space: nowrap;
}

.summary-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: #f2ecfa;
}

.summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
}

.booking-main > .section-head h1 {
  font-size: clamp(1.9rem, 3vw, 2.65rem);
}

.stepper {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}

.stepper button {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 0 156px;
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: #fbf9ff;
  font-size: 0.84rem;
  font-weight: 800;
  scroll-snap-align: start;
  white-space: nowrap;
}

.stepper span {
  display: grid;
  width: 24px;
  height: 24px;
  min-width: 24px;
  place-items: center;
  border-radius: 999px;
  color: white;
  background: #c7b6e6;
}

.stepper button.active {
  color: var(--accent-strong);
  border-color: #c7b6e6;
  background: #f8e7e1;
}

.stepper button.active span,
.stepper button.done span {
  background: var(--accent-strong);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.choice-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  text-align: left;
}

.choice-card span,
.choice-card small,
.choice-card p {
  color: var(--muted);
}

.booking-stylists {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calendar-picker {
  display: grid;
  gap: 18px;
}

.booking-date-carousel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.booking-date-controls {
  justify-self: end;
}

.booking-calendar-head,
.slot-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.booking-calendar-head p,
.slot-section-head p {
  color: var(--muted);
}

.date-picker-field {
  display: grid;
  gap: 6px;
  min-width: 190px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 820;
}

.date-picker-field input {
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: white;
  color: var(--ink);
  font: inherit;
  font-weight: 820;
}

.date-strip,
.time-grid {
  display: grid;
  gap: 10px;
}

.date-strip {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  padding-bottom: 0;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.date-strip::-webkit-scrollbar {
  display: none;
}

.time-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.date-strip button,
.time-grid button {
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
  background: white;
  font-weight: 800;
}

.date-strip button {
  flex: 0 0 104px;
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 10px 12px;
  scroll-snap-align: start;
  text-align: left;
}

.date-strip button span,
.time-grid button span {
  color: inherit;
  opacity: 0.72;
  font-size: 0.78rem;
}

.booking-time-grid button {
  display: grid;
  gap: 3px;
  justify-items: start;
  min-height: 68px;
  padding: 12px;
  text-align: left;
}

.date-strip button.active,
.time-grid button.active {
  color: white;
  background: var(--accent-strong);
}

.reference-step,
.confirm-step {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 18px;
}

.booking-reference-step {
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.82fr);
  align-items: start;
}

.booking-reference-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(310px, 0.72fr);
  gap: 18px;
  align-items: start;
}

.booking-reference-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.booking-reference-heading > div {
  display: grid;
  gap: 6px;
}

.booking-style-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.booking-style-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 830;
}

.booking-style-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: white;
  text-align: left;
}

.booking-style-option > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.booking-style-option strong,
.booking-style-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-style-option small {
  color: var(--muted);
  font-size: 0.76rem;
}

.booking-style-option.active {
  border-color: rgba(126, 104, 196, 0.52);
  background: linear-gradient(
    135deg,
    rgba(242, 236, 250, 0.9),
    rgba(232, 247, 241, 0.76)
  );
  box-shadow: 0 12px 26px rgba(126, 104, 196, 0.12);
}

.booking-style-visual {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  color: var(--accent-strong);
  background: #f2ecfa;
}

.booking-style-option.mint .booking-style-visual,
.booking-style-option.sky .booking-style-visual {
  background: #e8f7f1;
}

.booking-style-option.rose .booking-style-visual,
.booking-style-option.pearl .booking-style-visual {
  background: #fbefec;
}

.booking-reference-prompt {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 820;
}

.booking-match-line {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: #2d6447;
  background: #e8f7f1;
  font-size: 0.84rem;
}

.booking-reference-generating {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 20px;
  color: white;
  background: rgba(49, 40, 75, 0.74);
  backdrop-filter: blur(12px);
  text-align: center;
}

.booking-reference-generating small {
  color: rgba(255, 255, 255, 0.76);
}

.ai-orbit {
  width: 58px;
  height: 58px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #c7b6e6;
  border-right-color: #8fe0c8;
  border-radius: 999px;
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.reference-step img {
  width: 100%;
  height: 310px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: #fbf9ff;
}

.reference-step > div,
.receipt-card,
.payment-card {
  display: grid;
  gap: 14px;
}

.booking-reference-copy {
  align-content: start;
}

.booking-reference-media {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.booking-reference-preview {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 104, 196, 0.12);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, rgba(126, 104, 196, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(126, 104, 196, 0.06) 1px, transparent 1px), #fbf9ff;
  background-size: 36px 36px;
}

.booking-reference-preview img {
  width: 100%;
  height: clamp(260px, 32vw, 390px);
  object-fit: contain;
}

.booking-reference-preview:not(.has-photo) img {
  opacity: 0.5;
}

.booking-reference-preview figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: white;
  background: rgba(34, 27, 24, 0.68);
  font-size: 0.82rem;
  font-weight: 820;
}

.booking-reference-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tryon-capture-card.compact {
  min-height: 112px;
  padding: 14px;
}

.booking-camera-panel,
.booking-camera-panel video {
  min-height: clamp(280px, 32vw, 390px);
}

.reference-empty-note {
  border: 1px solid rgba(126, 104, 196, 0.14);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  color: var(--muted);
  background: #fbf9ff;
  font-weight: 760;
}

textarea,
.form-panel input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  color: var(--text);
  background: white;
  resize: vertical;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 760;
}

.check-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-strong);
}

.booking-controls {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(126, 104, 196, 0.12);
}

.summary-line span {
  color: var(--muted);
}

.summary-line strong {
  text-align: right;
}

.reference-mini {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: #f2ecfa;
}

.reference-mini img {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: #fbf9ff;
}

.policy-note {
  font-size: 0.88rem;
}

.card-mock {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  min-height: 74px;
  padding: 18px;
  border-radius: var(--radius-md);
  color: white;
  background: linear-gradient(135deg, #7d68c4, #66cdb4);
}

.me-layout {
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
}

.profile-panel {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
  justify-items: start;
}

.profile-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-facts span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(126, 104, 196, 0.15);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--muted);
  background: rgba(255, 248, 244, 0.82);
  font-size: 0.78rem;
  font-weight: 820;
}

.profile-actions {
  display: grid;
  width: 100%;
  gap: 10px;
}

.me-main {
  display: grid;
  gap: 18px;
}

.appointment-card.detailed {
  background: #f2ecfa;
}

.saved-look-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.me-dashboard {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.me-dashboard .profile-panel {
  position: sticky;
  top: 92px;
  padding: 18px;
  border-color: rgba(126, 104, 196, 0.13);
  background: rgba(255, 255, 255, 0.92);
}

.profile-photo-control {
  position: relative;
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(126, 104, 196, 0.18);
  border-radius: 18px;
  color: white;
  background: linear-gradient(135deg, #8b78d6, #66cdb4);
  box-shadow: 0 18px 34px rgba(126, 104, 196, 0.2);
  cursor: pointer;
}

.profile-photo-control img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo-control > span {
  font-size: 1.65rem;
  font-weight: 900;
}

.profile-photo-control b {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 27px;
  border-radius: 999px;
  padding: 0 8px;
  color: #352d55;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.7rem;
  font-weight: 900;
}

.profile-photo-control b .icon {
  width: 13px;
  height: 13px;
}

.profile-photo-control input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.me-dashboard .profile-panel h1 {
  margin-top: 6px;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.02;
}

.profile-completion {
  display: grid;
  width: 100%;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(126, 104, 196, 0.12);
  border-radius: var(--radius-md);
  background: #fbf9ff;
}

.profile-completion > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 820;
}

.profile-completion > b {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #ece6f5;
}

.profile-completion > b::after {
  display: block;
  width: var(--completion);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b78d6, #66cdb4);
  content: "";
}

.profile-completion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-completion-list span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 25px;
  border-radius: 999px;
  padding: 0 8px;
  color: var(--muted);
  background: white;
  font-size: 0.72rem;
  font-weight: 820;
}

.profile-completion-list span.done {
  color: #4f927d;
  background: #e8f7f1;
}

.profile-completion-list .icon {
  width: 13px;
  height: 13px;
}

.me-workspace {
  display: grid;
  min-width: 0;
  gap: 16px;
}

.me-command-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
}

.me-command-panel h1 {
  margin-top: 4px;
  font-size: clamp(1.65rem, 2.6vw, 2.55rem);
  line-height: 1.04;
}

.me-command-panel span,
.me-stat-card em,
.customer-appointment-row p,
.customer-appointment-row small,
.customer-ai-card span,
.customer-payment-row span {
  color: var(--muted);
}

.me-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.me-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.me-stat-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  min-height: 118px;
  align-content: start;
  border: 1px solid rgba(126, 104, 196, 0.12);
  border-radius: var(--radius-md);
  padding: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(54, 42, 89, 0.06);
}

.me-stat-card > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: var(--radius-sm);
  color: #6c5bb5;
  background: #f2ecfa;
}

.me-stat-card strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-stat-card small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 820;
  text-transform: uppercase;
}

.me-stat-card em {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.35;
}

.me-grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.me-section-panel,
.profile-details-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.customer-row-list {
  display: grid;
  gap: 10px;
}

.customer-appointment-row,
.customer-payment-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(126, 104, 196, 0.1);
  border-radius: var(--radius-md);
  padding: 12px;
  background: #fff;
}

.appointment-date-block {
  display: grid;
  gap: 4px;
  min-height: 66px;
  align-content: center;
  border-radius: var(--radius-sm);
  color: #352d55;
  background: #f2ecfa;
  text-align: center;
}

.appointment-date-block strong {
  font-size: 0.88rem;
}

.appointment-date-block span,
.customer-appointment-row small,
.customer-payment-row span {
  font-size: 0.78rem;
  font-weight: 760;
}

.customer-appointment-row h3 {
  overflow: hidden;
  margin-bottom: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-appointment-row .customer-appointment-row-proposal {
  display: block;
  width: fit-content;
  margin-block: 5px;
  padding: 4px 7px;
  border-radius: 7px;
  color: #4f3d80;
  background: #f3eefb;
}

.appointment-row-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.customer-ai-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.customer-ai-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(126, 104, 196, 0.1);
  border-radius: var(--radius-md);
  padding: 10px;
  background: #fff;
}

.customer-ai-card img {
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: #fbf9ff;
}

.customer-ai-card strong,
.customer-payment-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-payment-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.customer-payment-row b {
  font-size: 0.95rem;
}

.saved-look {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.saved-look img {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.saved-look span,
.timeline span,
.timeline p {
  color: var(--muted);
}

.timeline {
  display: grid;
  gap: 14px;
}

.timeline article {
  display: grid;
  gap: 6px;
  padding-left: 16px;
  border-left: 3px solid var(--accent-soft);
}

.pro-portal {
  display: grid;
  gap: 22px;
}

.pro-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 520px);
  gap: 22px;
  align-items: stretch;
}

.pro-copy,
.pro-dashboard-preview {
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-md);
  background: var(--pro-surface);
  box-shadow: var(--shadow-pro);
}

.pro-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  min-height: 460px;
  padding: clamp(28px, 5vw, 64px);
}

.pro-copy h1 {
  max-width: 900px;
}

.pro-dashboard-preview {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-sm);
  color: white;
  background: linear-gradient(135deg, var(--pro-accent-strong), #2c6b57);
}

.mini-booking,
.ai-review-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-md);
  background: #f9fbfc;
}

.mini-booking span {
  color: var(--pro-accent-strong);
  font-weight: 820;
}

.mini-booking div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mini-booking small,
.ai-review-card small {
  color: var(--pro-muted);
}

.mini-booking b {
  margin-left: auto;
  color: var(--pro-accent-strong);
  font-size: 0.82rem;
}

.ai-review-card span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--pro-accent-strong);
  background: var(--pro-accent-soft);
}

.pro-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pro-feature-card {
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-md);
  background: white;
  box-shadow: var(--shadow-pro);
}

.pro-feature-card > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--pro-accent-strong);
  background: var(--pro-accent-soft);
}

.pro-feature-card p {
  color: var(--pro-muted);
}

.dashboard-shell {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  background: var(--pro-bg);
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: 18px 14px 14px;
  overflow: hidden;
  border-right: 1px solid var(--pro-line);
  background: #ffffff;
}

.sidebar-brand {
  flex: 0 0 auto;
  margin: 0 4px 2px;
}

.side-nav {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 4px;
  min-height: 0;
  margin-inline: -3px;
  padding: 2px 3px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.side-link {
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
}

.dashboard-shell .dashboard-context-switcher {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
  padding: 12px 10px 10px;
  border: 1px solid #e4dfe9;
  border-radius: 16px;
  background: linear-gradient(145deg, #fbfafc 0%, #f7f5fa 100%);
  box-shadow: 0 8px 24px rgba(54, 43, 67, 0.06);
}

.dashboard-shell .dashboard-context-title {
  margin: 0 3px 2px;
  color: #817887;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dashboard-shell .dashboard-context-field {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 54px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #332d39;
  background: #fff;
  box-shadow: 0 1px 0 rgba(47, 38, 57, 0.04);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.dashboard-shell .dashboard-context-field:hover {
  border-color: #d8d0e1;
  box-shadow: 0 5px 16px rgba(54, 43, 67, 0.08);
}

.dashboard-shell .dashboard-context-field:focus-within {
  border-color: #8a74cf;
  box-shadow: 0 0 0 3px rgba(103, 80, 184, 0.13);
}

.dashboard-shell .dashboard-context-field.is-static {
  cursor: default;
}

.dashboard-shell .dashboard-context-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #6049ad;
  background: #eee9fa;
}

.dashboard-shell .dashboard-context-icon.location {
  color: #286f5b;
  background: #e1f5ee;
}

.dashboard-shell .dashboard-context-icon svg {
  width: 17px;
  height: 17px;
}

.dashboard-shell .dashboard-context-control {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dashboard-shell .dashboard-context-label {
  color: #817887;
  font-size: 0.64rem;
  font-weight: 750;
  line-height: 1.15;
}

.dashboard-shell .dashboard-context-salon-name {
  overflow: hidden;
  min-width: 0;
  color: #332d39;
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-shell .dashboard-context-address {
  overflow: hidden;
  min-width: 0;
  color: #817887;
  font-size: 0.66rem;
  font-weight: 560;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-shell .dashboard-context-switcher select {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 0 23px 0 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: #332d39;
  background-color: transparent;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.dashboard-shell .dashboard-context-switcher select:focus {
  outline: 0;
}

.dashboard-shell
  .dashboard-context-control
  > .prelook-select-shell
  .prelook-select-trigger {
  min-height: 28px;
  padding: 2px 3px 2px 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  font-size: 0.8rem;
  font-weight: 760;
}

.dashboard-shell
  .dashboard-context-control
  > .prelook-select-shell
  .prelook-select-trigger:hover:not(:disabled),
.dashboard-shell
  .dashboard-context-control
  > .prelook-select-shell
  .prelook-select-trigger[aria-expanded="true"] {
  background: #f7f3fc;
  box-shadow: none;
}

.sidebar-footer {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--pro-line);
}

.sidebar-footer :where(a, button) {
  min-width: 44px;
  min-height: 44px;
}

.sidebar-footer a {
  justify-content: flex-start;
}

.sidebar-footer button {
  padding-inline: 12px;
}

.dashboard-main {
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

.dashboard-topbar {
  display: none;
}

.dashboard-content {
  padding: 24px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.metric-card {
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 20px;
}

.metric-card span,
.metric-card small {
  color: var(--pro-muted);
}

.metric-card strong {
  color: var(--pro-text);
  font-size: 2rem;
}

.schedule-panel {
  grid-column: span 3;
}

.ai-review-panel {
  grid-column: span 1;
}

.dashboard-panel {
  min-width: 0;
  padding: 20px;
}

.site-builder-layout {
  display: grid;
  grid-template-columns: minmax(380px, 0.88fr) minmax(460px, 1.12fr);
  gap: 18px;
  align-items: start;
}

.site-builder-controls,
.site-builder-preview {
  display: grid;
  gap: 16px;
}

.site-builder-preview {
  position: sticky;
  top: 112px;
  max-height: calc(100vh - 136px);
  overflow: auto;
}

.builder-block {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-md);
  background: #f8fbfc;
}

.builder-block-head {
  display: grid;
  gap: 4px;
}

.builder-block-head span,
.upload-control small {
  color: var(--pro-muted);
  font-size: 0.84rem;
}

.site-vibe-grid,
.theme-swatch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.site-vibe-grid button,
.theme-swatch-grid button {
  min-height: 40px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-sm);
  color: var(--pro-accent-strong);
  background: white;
  font-weight: 800;
}

.site-vibe-grid button.active,
.theme-swatch-grid button.active {
  color: white;
  background: var(--pro-accent-strong);
}

.theme-swatch-grid button {
  justify-content: flex-start;
  padding: 10px;
  text-align: left;
}

.theme-swatch-grid button > span {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 54px;
  height: 22px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--swatch-a) 0 33%,
    var(--swatch-b) 33% 66%,
    var(--swatch-c) 66% 100%
  );
}

.theme-swatch-grid button b {
  margin-left: 8px;
}

.site-builder-controls label,
.builder-inspector-panel label,
.site-builder-controls textarea,
.builder-inspector-panel textarea,
.site-builder-controls input,
.builder-inspector-panel input,
.site-builder-controls select,
.builder-inspector-panel select {
  min-width: 0;
}

.site-builder-controls label,
.builder-inspector-panel label {
  display: grid;
  gap: 6px;
  color: var(--pro-muted);
  font-size: 0.86rem;
  font-weight: 780;
}

.site-builder-controls input,
.builder-inspector-panel input,
.site-builder-controls textarea,
.builder-inspector-panel textarea,
.site-builder-controls select,
.builder-inspector-panel select {
  width: 100%;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  color: var(--pro-text);
  background: white;
}

.site-builder-controls input[type="color"],
.builder-inspector-panel input[type="color"] {
  height: 44px;
  padding: 4px;
}

.builder-photo-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.builder-photo-strip button {
  min-width: 0;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-sm);
  padding: 0;
  overflow: hidden;
  background: white;
}

.builder-photo-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.site-section-sorter {
  display: grid;
  gap: 8px;
}

.site-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-sm);
  background: white;
  cursor: grab;
}

.site-section-row span,
.site-section-row div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-section-row .down .icon {
  transform: rotate(90deg);
}

.site-section-row .icon-button:not(.down) .icon {
  transform: rotate(-90deg);
}

.site-preview-frame {
  overflow: hidden;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-md);
  background: white;
}

.site-builder-studio {
  display: grid;
  gap: 16px;
  padding-bottom: 112px;
}

.site-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96),
      rgba(239, 247, 249, 0.86)
    ),
    white;
  box-shadow: var(--shadow-pro);
}

.site-builder-header > div:first-child {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.site-builder-header h2 {
  color: var(--pro-text);
  font-size: clamp(1.55rem, 2.5vw, 2.35rem);
}

.site-builder-header span,
.builder-panel-title > span {
  color: var(--pro-muted);
}

.site-builder-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.preset-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.preset-strip button {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 84px;
  justify-content: start;
  padding: 14px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-md);
  color: var(--pro-text);
  background: white;
  text-align: left;
  box-shadow: 0 10px 26px rgba(25, 43, 68, 0.05);
}

.preset-strip button.active {
  color: white;
  border-color: var(--pro-accent-strong);
  background: linear-gradient(135deg, var(--pro-accent-strong), #4f927d);
  box-shadow: 0 16px 34px rgba(79, 146, 125, 0.18);
}

.preset-strip span {
  color: inherit;
  opacity: 0.78;
  font-size: 0.86rem;
}

.site-builder-workbench {
  display: grid;
  grid-template-columns: 260px minmax(520px, 1fr) minmax(310px, 360px);
  gap: 16px;
  align-items: start;
}

.builder-structure-panel,
.builder-inspector-panel,
.site-canvas-panel {
  display: grid;
  gap: 14px;
}

.builder-structure-panel,
.builder-inspector-panel {
  position: sticky;
  top: 112px;
  max-height: calc(100vh - 138px);
  overflow: auto;
}

.builder-panel-title,
.site-canvas-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.builder-panel-title > div,
.site-canvas-toolbar > div:first-child {
  display: grid;
  gap: 4px;
}

.builder-panel-title h3,
.site-canvas-toolbar h3 {
  color: var(--pro-text);
  font-size: 1.02rem;
}

.site-section-row {
  min-height: 48px;
  border-color: #d8e3ea;
  box-shadow: 0 8px 18px rgba(25, 43, 68, 0.04);
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease,
    background 170ms ease;
}

.site-section-row:hover {
  transform: translateY(-1px);
  border-color: rgba(31, 117, 128, 0.25);
  box-shadow: 0 12px 24px rgba(25, 43, 68, 0.08);
}

.builder-help-text {
  margin: 0;
  color: var(--pro-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.drag-handle {
  color: var(--pro-muted);
  font-size: 1rem;
  letter-spacing: 0;
}

.site-canvas-panel {
  padding: 0;
  overflow: hidden;
}

.site-canvas-toolbar {
  padding: 16px 18px;
  border-bottom: 1px solid var(--pro-line);
  background: #fbfdfe;
}

.site-canvas-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-canvas-meta span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--pro-accent-strong);
  background: var(--pro-accent-soft);
  font-size: 0.78rem;
  font-weight: 820;
}

.canvas-editor-tools {
  display: grid;
  grid-template-columns:
    minmax(180px, 1fr) repeat(3, minmax(82px, 112px))
    auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--pro-line);
  background: #ffffff;
}

.canvas-editor-tools > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.canvas-editor-tools strong {
  color: var(--pro-text);
}

.canvas-editor-tools span {
  color: var(--pro-muted);
  font-size: 0.8rem;
}

.canvas-editor-tools label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--pro-muted);
  font-size: 0.72rem;
  font-weight: 820;
}

.canvas-editor-tools input[type="color"] {
  width: 100%;
  height: 36px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-sm);
  padding: 3px;
  background: white;
}

.canvas-upload {
  display: inline-flex !important;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-sm);
  padding: 0 11px;
  color: var(--pro-accent-strong) !important;
  background: #f6fbfc;
  cursor: pointer;
}

.canvas-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.site-canvas-panel .site-preview-frame {
  max-height: calc(100vh - 250px);
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: #eef4f6;
}

.site-canvas-panel .embedded-site {
  width: min(100%, 1180px);
  margin: 0 auto;
  border-radius: 0;
  box-shadow: 0 18px 44px rgba(25, 43, 68, 0.08);
}

.site-canvas-panel .embedded-site .salon-site-nav {
  position: sticky;
  display: flex;
  min-height: 62px;
  padding: 10px 18px;
}

.site-canvas-panel .embedded-site .salon-site-nav nav {
  display: inline-flex;
}

.site-canvas-panel .embedded-site .salon-site-book {
  display: inline-flex;
}

.site-canvas-panel .embedded-site .salon-site-section {
  width: min(100% - 36px, 1040px);
}

.site-canvas-panel .embedded-site .site-hero {
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.65fr);
  gap: 24px;
  min-height: 560px;
}

.site-canvas-panel .embedded-site .site-hero-media img {
  height: 420px;
  object-fit: contain;
  background: var(--site-secondary);
}

.site-builder-studio.focus-mode .preset-strip,
.site-builder-studio.focus-mode .builder-structure-panel,
.site-builder-studio.focus-mode .builder-inspector-panel {
  display: none;
}

.site-builder-studio.focus-mode {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  overflow: hidden;
  padding: 14px 16px 92px;
  background:
    linear-gradient(
      135deg,
      rgba(247, 249, 251, 0.98),
      rgba(230, 242, 245, 0.96)
    ),
    var(--pro-bg);
}

.site-builder-studio.focus-mode .site-builder-header {
  padding: 14px 16px;
}

.site-builder-studio.focus-mode .site-builder-workbench {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
}

.site-builder-studio.focus-mode .site-canvas-panel {
  min-height: 0;
}

.site-builder-studio.focus-mode .site-canvas-panel .site-preview-frame {
  max-height: calc(100vh - 270px);
  min-height: 0;
}

.site-builder-studio.focus-mode .site-canvas-panel .embedded-site {
  width: min(100%, 1320px);
}

.site-builder-studio.focus-mode .ai-prompt-dock {
  right: 16px;
  left: 16px;
}

.site-editor-mode .site-editable-section {
  position: relative;
  border-radius: var(--radius-md);
  transition:
    outline-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.site-editor-mode .site-editable-section:hover {
  outline: 1px dashed color-mix(in srgb, var(--site-accent) 54%, transparent);
  outline-offset: 8px;
}

.site-section-grip {
  position: absolute;
  top: 12px;
  left: 0;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid rgba(31, 117, 128, 0.22);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--pro-accent-strong);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(25, 43, 68, 0.12);
  cursor: grab;
}

.site-section-grip span {
  font-size: 0.75rem;
  font-weight: 850;
}

.site-dragging .site-editable-section {
  outline: 1px dashed rgba(31, 117, 128, 0.34);
  outline-offset: 8px;
}

.editable-copy {
  border-radius: 6px;
  transition:
    background 160ms ease,
    box-shadow 160ms ease,
    outline-color 160ms ease;
}

.editable-copy:hover {
  background: color-mix(in srgb, var(--site-accent) 10%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-accent) 10%, transparent);
}

.editable-copy:focus {
  outline: 2px solid color-mix(in srgb, var(--site-accent) 68%, transparent);
  outline-offset: 4px;
  background: color-mix(in srgb, var(--site-surface) 86%, white);
}

.editable-copy.inline {
  min-width: 24px;
}

.site-editor-mode [data-editor-disabled="true"] {
  cursor: text;
}

.builder-inspector-panel {
  align-content: start;
}

.builder-accordion {
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-md);
  background: #fbfdfe;
}

.builder-accordion summary {
  cursor: pointer;
  padding: 13px 14px;
  color: var(--pro-text);
  font-weight: 840;
}

.builder-accordion > .theme-swatch-grid,
.builder-accordion > .auth-grid,
.builder-accordion > .upload-control,
.builder-accordion > .builder-photo-strip,
.builder-accordion > textarea {
  margin: 0 14px 14px;
}

.theme-swatch-grid.compact {
  grid-template-columns: 1fr;
}

.color-grid.extended {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-prompt-dock {
  position: fixed;
  right: 24px;
  bottom: 18px;
  left: 294px;
  z-index: 45;
  pointer-events: none;
}

.ai-prompt-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 12px;
  border: 1px solid rgba(31, 117, 128, 0.18);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 20px 52px rgba(25, 43, 68, 0.2);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

.ai-prompt-inner > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: max-content;
  color: var(--pro-accent-strong);
  font-weight: 860;
}

.ai-prompt-inner input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  color: var(--pro-text);
  background: #f8fbfc;
  outline: 0;
}

.ai-prompt-inner input:focus {
  border-color: rgba(31, 117, 128, 0.42);
  box-shadow: 0 0 0 4px rgba(31, 117, 128, 0.1);
}

.booking-list,
.booking-table,
.client-list,
.service-admin-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.booking-row,
.booking-table-row,
.service-admin-row {
  display: grid;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-sm);
  background: #fbfdfe;
}

.booking-row {
  grid-template-columns: 78px minmax(160px, 1fr) minmax(140px, 0.9fr) auto 40px;
}

.booking-row span,
.booking-table-row span,
.service-admin-row span {
  color: var(--pro-muted);
}

.time-block {
  display: grid;
  height: 44px;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--pro-accent-strong);
  background: var(--pro-accent-soft);
  font-weight: 820;
}

.ai-review-panel {
  display: grid;
  gap: 16px;
}

.ai-review-panel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.pro-mode .reference-list div,
.transaction-list div,
.formula-list div {
  background: #f5f8fa;
}

.segmented-control {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-md);
  background: #f5f8fa;
}

.segmented-control button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--pro-muted);
  background: transparent;
  font-weight: 800;
}

.segmented-control button.active {
  color: white;
  background: var(--pro-accent-strong);
}

.calendar-grid {
  display: grid;
  grid-template-columns: 74px repeat(5, minmax(150px, 1fr));
  min-width: 900px;
  margin-top: 18px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.dashboard-panel:has(.calendar-grid) {
  overflow-x: auto;
}

.calendar-corner,
.calendar-day,
.calendar-time,
.calendar-cell {
  min-height: 74px;
  padding: 10px;
  border-right: 1px solid var(--pro-line);
  border-bottom: 1px solid var(--pro-line);
  background: white;
}

.calendar-day,
.calendar-time {
  display: grid;
  place-items: center;
  color: var(--pro-muted);
  font-weight: 820;
  background: #f8fafb;
}

.calendar-event {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 54px;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-sm);
  color: #173d44;
  background: #dbeff1;
  text-align: left;
}

.calendar-event.service-2 {
  color: #5a4213;
  background: #f4e5c8;
}

.calendar-event.service-3 {
  color: #4e355d;
  background: #eadff2;
}

.calendar-event span {
  font-size: 0.78rem;
}

.schedule-ops-panel {
  grid-column: 1 / -1;
}

.schedule-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.schedule-summary-grid > div {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-sm);
  background: #f8fafb;
}

.schedule-summary-grid span,
.stylist-utilization-card small,
.stylist-lane-name span,
.stylist-lane-cell span {
  color: var(--pro-muted);
  font-size: 0.84rem;
  font-weight: 760;
}

.schedule-summary-grid strong {
  color: var(--pro-ink);
  font-size: 1.8rem;
}

.stylist-utilization-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.stylist-utilization-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-md);
  background: white;
}

.stylist-utilization-card .section-head {
  margin: 0;
}

.stylist-utilization-card h3 {
  margin: 0;
}

.stylist-utilization-card strong {
  color: var(--pro-accent-strong);
}

.utilization-bar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #eaf1f2;
}

.utilization-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--pro-accent),
    var(--pro-accent-strong)
  );
  transition: width 260ms ease;
}

.mini-slot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mini-slot-row span,
.stylist-lane-cell span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--pro-accent-soft);
  color: var(--pro-accent-strong);
}

.stylist-lane-panel {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.stylist-lane-board {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) repeat(5, minmax(150px, 1fr));
  min-width: 980px;
  overflow: hidden;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-md);
}

.stylist-lane-header,
.stylist-lane-name,
.stylist-lane-cell {
  min-height: 82px;
  padding: 12px;
  border-right: 1px solid var(--pro-line);
  border-bottom: 1px solid var(--pro-line);
  background: white;
}

.stylist-lane-header {
  display: grid;
  align-content: center;
  gap: 2px;
  color: var(--pro-muted);
  font-weight: 820;
  background: #f8fafb;
}

.stylist-lane-name {
  display: grid;
  align-content: center;
  gap: 4px;
  background: #fbfcfc;
}

.stylist-lane-cell {
  display: grid;
  gap: 8px;
}

.stylist-lane-cell div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.booking-table-row {
  grid-template-columns:
    minmax(160px, 1fr) 90px minmax(140px, 1fr) minmax(180px, 1fr)
    110px auto;
}

.table-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.clients-layout {
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
}

.client-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  text-align: left;
}

.client-row span:nth-child(2) {
  display: grid;
  gap: 4px;
}

.client-row small,
.notes-card p {
  color: var(--pro-muted);
}

.client-detail-panel {
  display: grid;
  gap: 16px;
}

.client-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pro-mode .client-stats div {
  background: #f5f8fa;
}

.notes-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: #f5f8fa;
}

.services-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
}

.service-admin-row {
  grid-template-columns:
    minmax(180px, 1.2fr) 90px 90px 90px minmax(150px, 1fr)
    100px auto;
}

.service-admin-row > div:first-child {
  display: grid;
  gap: 4px;
}

.form-panel {
  display: grid;
  gap: 12px;
  align-content: start;
}

.form-panel label {
  display: grid;
  gap: 6px;
  color: var(--pro-muted);
  font-weight: 760;
}

.form-panel input {
  color: var(--pro-text);
  border-color: var(--pro-line);
}

.payments-grid .payout-panel {
  grid-column: span 2;
}

.payment-bars {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.payment-bars div {
  display: grid;
  gap: 8px;
}

.payment-bars b {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #e6edf2;
}

.payment-bars b::after {
  display: block;
  width: var(--bar-width);
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pro-accent), #61a060);
  content: "";
}

.generic-panel {
  display: grid;
  gap: 16px;
}

.generic-list article {
  display: grid;
  grid-template-columns: minmax(160px, 0.5fr) minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-sm);
  background: #fbfdfe;
}

.generic-list span {
  color: var(--pro-muted);
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 32px));
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  color: white;
  background: rgba(25, 37, 49, 0.92);
  box-shadow: 0 18px 38px rgba(25, 37, 49, 0.2);
  animation: toastIn 220ms ease both;
}

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

/* Verified-email customer signup -----------------------------------------
   The account-detail step follows the quieter, single-column reference form
   while retaining Prelook's split-screen shell and accessible controls. */
.auth-screen .auth-panel[data-auth-view="signup-details"] {
  width: min(100%, 600px);
  max-width: 600px;
  gap: 20px;
  padding-block: clamp(18px, 2.6vw, 32px);
}

.auth-screen
  .auth-panel[data-auth-view="signup-details"]
  .auth-panel-heading {
  justify-items: center;
  text-align: center;
}

.auth-screen
  .auth-panel[data-auth-view="signup-details"]
  .auth-panel-heading
  .eyebrow {
  display: none;
}

.auth-screen
  .auth-panel[data-auth-view="signup-details"]
  .auth-panel-heading
  h1 {
  font-size: clamp(2rem, 3vw, 2.45rem);
  letter-spacing: -0.035em;
}

.auth-screen
  .auth-panel[data-auth-view="signup-details"]
  .auth-panel-heading
  > p:last-child {
  color: #77737a;
  font-size: 1rem;
}

.auth-signup-details {
  display: grid;
  gap: 13px;
}

.auth-signup-details > label {
  display: grid;
  gap: 7px;
}

.auth-locked-field,
.auth-password-field {
  position: relative;
  display: block;
  min-width: 0;
}

.auth-locked-field > input,
.auth-password-field > input {
  width: 100%;
}

.auth-locked-field:is(.is-verified, .is-selected) > input,
.auth-phone-entry.is-verified > input {
  border-color: #d9d6dc !important;
  color: #77737a !important;
  background: #f4f3f5 !important;
}

.auth-locked-field:is(.is-verified, .is-selected) > input {
  padding-inline-end: 104px !important;
}

.auth-locked-field > span {
  position: absolute;
  top: 50%;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #5f5095;
  font-size: 0.72rem;
  font-weight: 760;
  transform: translateY(-50%);
}

.auth-locked-field > span .icon {
  width: 15px;
  height: 15px;
}

.auth-password-field > input {
  padding-inline-end: 54px !important;
}

.auth-password-field > button {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #26222a;
  background: transparent;
  transform: translateY(-50%);
}

.auth-password-field > button .icon {
  width: 21px;
  height: 21px;
}

.auth-password-field > button:is(:hover, :focus-visible) {
  outline: 0;
  color: #5f5095;
  background: #f0ecfa;
}

.auth-screen .auth-form .auth-marketing-choice {
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  margin-block: 2px 1px;
  color: #302c33;
  font-size: 0.8rem;
  font-weight: 560;
  line-height: 1.45;
}

.auth-screen .auth-form .auth-marketing-choice > input {
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 0;
  padding: 0;
  accent-color: #6857a4;
}

.auth-screen
  .auth-panel[data-auth-view="signup-details"]
  .solid-button.customer {
  min-height: 54px;
  border-radius: 999px;
  background: #0c0c0d;
}

.auth-screen
  .auth-panel[data-auth-view="signup-details"]
  .solid-button.customer:hover {
  background: #28242b;
}

.auth-terms-copy {
  margin: -2px auto 0 !important;
  max-width: 48ch;
  color: #77737a !important;
  font-size: 0.72rem !important;
  line-height: 1.5 !important;
  text-align: center;
}

.auth-terms-copy a {
  color: #6857a4;
  font-weight: 650;
  text-underline-offset: 2px;
}

@media (max-width: 560px) {
  .auth-screen .auth-panel[data-auth-view="signup-details"] {
    gap: 17px;
    padding-block: 20px 28px;
  }

  .auth-screen
    .auth-panel[data-auth-view="signup-details"]
    .auth-panel-heading
    > p:last-child {
    font-size: 0.9rem;
  }

  .auth-signup-details {
    gap: 12px;
  }
}

/* Verified-phone gate used before a customer booking time can be held. */
.booking-phone-panel {
  display: grid;
  width: 100%;
  gap: 18px;
  border: 0;
  border-radius: inherit;
  padding: 32px;
  background: transparent;
  box-shadow: none;
}

.booking-phone-heading {
  display: grid;
  gap: 6px;
  padding-inline-end: 44px;
}

.booking-phone-heading :is(p, h2) {
  margin: 0;
}

.booking-phone-heading h2 {
  color: #28232d;
  font-size: clamp(1.65rem, 4vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.booking-phone-heading > p:last-child {
  color: #6c6670;
  line-height: 1.5;
}

.booking-phone-heading strong {
  color: #3d3742;
}

.booking-phone-panel .auth-form {
  display: grid;
  gap: 13px;
}

.booking-phone-panel .auth-form label {
  display: grid;
  gap: 7px;
  color: #4f4a53;
  font-size: 0.82rem;
  font-weight: 720;
}

.booking-phone-panel .auth-form input {
  min-height: 49px;
  border-color: #cbc7cf;
  border-radius: 11px;
  padding-inline: 14px;
  background: #fff;
}

.auth-workspace > .booking-phone-panel,
.pro-auth-workspace > .booking-phone-panel {
  width: min(100%, 560px);
  align-self: center;
  justify-self: center;
  border-radius: 0;
  background: #fff;
}

.booking-phone-code-form input[data-control="booking-phone-verification-token"] {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 780;
  letter-spacing: 0.32em;
  text-align: center;
}

.booking-phone-secondary-actions {
  display: flex;
  justify-content: center;
  gap: 8px 18px;
  flex-wrap: wrap;
}

.booking-phone-secondary-actions button {
  border: 0;
  padding: 4px;
  color: #6552a9;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 760;
}

.booking-phone-secondary-actions button:disabled,
.booking-auth-close:disabled {
  cursor: wait;
  opacity: 0.5;
}

@media (max-width: 640px) {
  .booking-phone-panel {
    padding: 26px 18px 22px;
  }
}

/* CRM workspace --------------------------------------------------------- */
.business-crm-page {
  min-width: 0;
}

.business-crm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.business-crm-view-switch {
  width: max-content;
  padding: 4px;
}

.business-crm-view-switch button {
  min-height: 40px;
  padding-inline: 16px;
}

.business-crm-search {
  width: min(340px, 100%);
}

.business-crm-stage {
  min-width: 0;
}

.business-crm-stage.is-entering {
  animation: business-crm-enter 180ms ease both;
}

@keyframes business-crm-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.business-crm-table-wrap {
  overflow: auto;
  border: 1px solid var(--line, #e4dfea);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 34px rgb(47 37 66 / 5%);
}

.business-crm-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  text-align: left;
}

.business-crm-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 14px;
  background: #f8f6fa;
  color: #6c6475;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.business-crm-table td {
  max-width: 250px;
  padding: 14px;
  border-top: 1px solid #eee9f1;
  color: #29242f;
  vertical-align: middle;
}

.business-crm-table tbody tr {
  cursor: pointer;
  transition:
    background 140ms ease,
    box-shadow 140ms ease;
}

.business-crm-table tbody tr:hover,
.business-crm-table tbody tr:focus-visible {
  outline: none;
  background: #f5fbf8;
  box-shadow: inset 3px 0 #4bae96;
}

.business-crm-table td:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.business-crm-table td:nth-child(2) span,
.business-crm-table td:nth-child(2) small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-crm-table td:nth-child(2) small {
  margin-top: 3px;
  color: #79717f;
}

.business-crm-avatar {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #eee9ff, #dff7ef);
  color: #5f48ae;
  font-weight: 800;
}

.business-crm-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.business-crm-category-pills > span {
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--crm-category) 38%, white);
  border-radius: 999px;
  background: color-mix(in srgb, var(--crm-category) 10%, white);
  color: color-mix(in srgb, var(--crm-category) 75%, #27222e);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.business-crm-history-summary {
  display: -webkit-box;
  overflow: hidden;
  color: #6f6875;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.business-crm-categories,
.business-crm-rules {
  padding: 18px;
  border: 1px solid var(--line, #e4dfea);
  border-radius: 20px;
  background: #fff;
}

.business-crm-category-add {
  display: flex;
  align-items: end;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee9f1;
}

.business-crm-category-add label {
  display: grid;
  flex: 1;
  gap: 6px;
}

.business-crm-category-add label > span {
  color: #5e5667;
  font-size: 12px;
  font-weight: 750;
}

.business-crm-category-add input,
.business-crm-rule-toolbar select,
.business-crm-rule-row select,
.business-crm-import-preview input {
  min-height: 44px;
  border: 1px solid #ddd6e5;
  border-radius: 12px;
  background: #fff;
  color: #2d2733;
}

.business-crm-category-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 16px;
}

.business-crm-category-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid #eee9f1;
  border-radius: 14px;
}

.business-crm-category-list article.is-selected {
  border-color: color-mix(in srgb, var(--crm-category) 48%, white);
  background: color-mix(in srgb, var(--crm-category) 7%, white);
}

.business-crm-category-select {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.business-crm-category-select > i {
  width: 10px;
  height: 34px;
  border-radius: 999px;
  background: var(--crm-category);
}

.business-crm-category-select > span,
.business-crm-category-select > span > * {
  display: block;
  min-width: 0;
}

.business-crm-category-select small {
  margin-top: 2px;
  color: #7a7280;
  font-size: 12px;
}

.business-crm-category-members {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #ebe5ef;
  border-radius: 15px;
}

.business-crm-category-members > header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  background: #f8f6fa;
}

.business-crm-category-members > header > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--crm-category);
}

.business-crm-category-members h3 {
  flex: 1;
  margin: 0;
  font-size: 15px;
}

.business-crm-category-members > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.business-crm-category-members > div button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 1px 10px;
  align-items: center;
  padding: 12px;
  border: 0;
  border-top: 1px solid #eee9f1;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.business-crm-category-members > div button:nth-child(even) {
  border-left: 1px solid #eee9f1;
}

.business-crm-category-members .business-crm-avatar {
  grid-row: 1 / 3;
}

.business-crm-category-members small {
  overflow: hidden;
  color: #7a7280;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-crm-category-members > p {
  margin: 0;
  padding: 18px;
  color: #776f7d;
}

.business-crm-rule-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.business-crm-rule-toolbar > div span,
.business-crm-rule-toolbar label > span {
  display: block;
  margin-top: 3px;
  color: #756e7c;
  font-size: 12px;
}

.business-crm-rule-toolbar label {
  min-width: 220px;
}

.business-crm-rule-toolbar select {
  width: 100%;
  margin-top: 6px;
}

.business-crm-rule-grid {
  overflow: hidden;
  border: 1px solid #ebe5ef;
  border-radius: 15px;
}

.business-crm-rule-grid-head,
.business-crm-rule-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(165px, 0.7fr) minmax(
      165px,
      0.7fr
    );
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.business-crm-rule-grid-head {
  background: #f7f5f9;
  color: #746b7c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.business-crm-rule-row + .business-crm-rule-row {
  border-top: 1px solid #eee9f1;
}

.business-crm-rule-row > div strong,
.business-crm-rule-row > div small {
  display: block;
}

.business-crm-rule-row > div small {
  margin-top: 2px;
  color: #807783;
}

.business-crm-rule-row.is-locked {
  background: #fff8f8;
  color: #8d4052;
}

.business-crm-category-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.business-crm-category-choice {
  position: relative;
}

.business-crm-category-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.business-crm-category-choice span {
  display: block;
  padding: 7px 11px;
  border: 1px solid #e3ddea;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}

.business-crm-category-choice input:checked + span {
  border-color: color-mix(in srgb, var(--crm-category) 52%, white);
  background: color-mix(in srgb, var(--crm-category) 12%, white);
  color: color-mix(in srgb, var(--crm-category) 78%, #27222e);
}

.business-crm-category-choice input:focus-visible + span {
  outline: 3px solid rgb(112 84 199 / 22%);
  outline-offset: 2px;
}

.business-crm-category-choice input:disabled + span {
  cursor: default;
  opacity: 0.72;
}

.business-crm-drawer-history {
  margin: 18px 0;
}

.business-crm-muted {
  color: #766f7d;
}

.business-crm-import-upload {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px dashed #cfc4da;
  border-radius: 16px;
  background: #fbfafc;
}

.business-crm-import-upload label {
  font-weight: 800;
}

.business-crm-import-upload input {
  width: 100%;
  padding: 12px;
  border: 1px solid #dfd8e6;
  border-radius: 12px;
  background: #fff;
}

.business-crm-import-upload .business-team-drawer-form-error:empty {
  display: none;
}

.business-crm-import-summary {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 12px;
}

.business-crm-import-summary strong {
  color: #674bbf;
  font-size: 24px;
}

.business-crm-import-preview {
  display: grid;
  gap: 10px;
}

.business-crm-import-preview fieldset {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 13px;
  border: 1px solid #e5dfea;
  border-radius: 14px;
}

.business-crm-import-preview legend {
  max-width: calc(100% - 44px);
  padding: 0 5px;
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-crm-import-preview fieldset > .icon-button {
  position: absolute;
  top: 8px;
  right: 8px;
}

.business-crm-import-status {
  width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.business-crm-import-status.is-new {
  background: #e5f7f0;
  color: #276c5c;
}

.business-crm-import-status.is-match {
  background: #eee9ff;
  color: #6048ad;
}

.business-crm-import-status.is-review {
  background: #fff0f2;
  color: #a33d53;
}

.business-crm-import-preview fieldset[data-status="review"] {
  border-color: #e3a5b2;
  background: #fffafb;
}

.business-crm-import-reasons {
  grid-column: 1 / -1;
  margin: 0;
  color: #9b3f53;
  font-size: 12px;
}

@media (max-width: 820px) {
  .business-crm-toolbar,
  .business-crm-rule-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .business-crm-view-switch,
  .business-crm-search,
  .business-crm-rule-toolbar label {
    width: 100%;
  }

  .business-crm-view-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .business-crm-category-list {
    grid-template-columns: 1fr;
  }

  .business-crm-category-members > div {
    grid-template-columns: 1fr;
  }

  .business-crm-category-members > div button:nth-child(even) {
    border-left: 0;
  }

  .business-crm-rules {
    overflow-x: auto;
  }

  .business-crm-rule-grid {
    min-width: 600px;
  }
}

@media (max-width: 520px) {
  .business-crm-category-add,
  .business-crm-import-preview fieldset {
    grid-template-columns: 1fr;
  }

  .business-crm-category-add {
    align-items: stretch;
    flex-direction: column;
  }

  .business-crm-view-switch button {
    min-width: 0;
    padding-inline: 8px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .business-crm-stage.is-entering {
    animation: none;
  }
}

.legal-page {
  width: min(860px, calc(100% - 32px));
  margin: 48px auto 80px;
  color: #302a37;
}
.legal-page > header {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid #e5dfe8;
}
.legal-page h1 {
  margin: 8px 0 14px;
  font: 650 clamp(2.3rem, 5vw, 4.2rem)/1 var(--display-font, Georgia, serif);
  letter-spacing: -0.04em;
}
.legal-page h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}
.legal-page p {
  margin: 0;
  color: #68616e;
  line-height: 1.7;
}
.legal-page section {
  padding: 22px 0;
  border-bottom: 1px solid #eee9f0;
}

@media (max-width: 1180px) {
  .auth-screen {
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 520px);
  }

  .auth-visual-copy h1 {
    font-size: clamp(2.4rem, 5vw, 4.6rem);
  }

  .customer-main-grid,
  .customer-content-grid,
  .market-layout,
  .detail-layout,
  .tryon-salon-match-layout,
  .tryon-layout,
  .tryon-hero,
  .tryon-workspace,
  .booking-layout,
  .me-auth-layout,
  .me-dashboard,
  .pro-overview,
  .site-builder-layout,
  .services-layout,
  .clients-layout {
    grid-template-columns: 1fr;
  }

  .map-panel,
  .directory-map-panel,
  .discover-try-card,
  .booking-sidebar,
  .tryon-side-panel,
  .profile-panel {
    position: static;
  }

  .discover-promos {
    grid-template-columns: 1fr;
  }

  .customer-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-footer-brand {
    grid-column: 1 / -1;
  }

  .me-stat-grid,
  .me-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .map-surface {
    height: 320px;
  }

  .tryon-salon-match-layout .map-surface {
    height: 320px;
  }

  .salon-directory-controls {
    grid-template-columns: 1fr;
  }

  .directory-search {
    grid-row: 2;
  }

  .directory-filter-bar {
    grid-row: 3;
    grid-column: 1;
  }

  .booking-reference-workspace {
    grid-template-columns: 1fr;
  }

  .directory-map-panel {
    height: 440px;
    min-height: auto;
  }

  .directory-map-surface {
    height: 100%;
    min-height: 0;
  }

  .salon-directory-panel {
    height: auto;
    max-height: none;
  }

  .directory-list {
    height: auto;
    max-height: none;
  }

  .tryon-image-frame.with-result {
    grid-template-columns: 1fr;
  }

  .tryon-preview-card img,
  .tryon-image-frame.single-preview .tryon-preview-card img {
    height: clamp(280px, 72vw, 460px);
  }

  .site-builder-preview {
    position: static;
    max-height: none;
  }

  .site-builder-workbench {
    grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1fr);
  }

  .activation-workbench {
    grid-template-columns: 1fr;
  }

  .business-setup-workbench {
    grid-template-columns: 1fr;
  }

  .activation-setup-panel,
  .activation-preview-panel {
    position: static;
    max-height: none;
  }

  .activation-site-frame {
    max-height: none;
  }

  .business-next-panel {
    position: static;
    min-height: auto;
  }

  .canvas-editor-tools {
    grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(74px, 1fr));
  }

  .canvas-upload {
    grid-column: span 2;
  }

  .builder-inspector-panel {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
  }

  .builder-structure-panel {
    top: 96px;
  }

  .site-hero,
  .site-tryon,
  .site-booking,
  .site-location {
    grid-template-columns: 1fr;
  }

  .site-service-grid,
  .site-stylist-grid,
  .site-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-panel,
  .ai-review-panel,
  .payments-grid .payout-panel {
    grid-column: span 2;
  }

  .booking-table-row,
  .service-admin-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 941px) and (max-width: 1180px) {
  .tryon-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  }

  .tryon-hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
  }

  .tryon-side-panel {
    position: sticky;
    top: 92px;
  }
}

@media (max-width: 900px) {
  .salon-map-directory {
    grid-template-columns: 1fr;
  }

  .directory-map-panel,
  .salon-directory-panel {
    position: static;
    height: 520px;
  }

  .salon-directory-panel {
    height: auto;
    min-height: 420px;
  }
}

@media (max-width: 1040px) {
  .topbar {
    gap: 12px;
  }

  .brand {
    min-width: 160px;
  }

  .nav-link {
    padding: 0 10px;
  }

  .top-actions {
    gap: 8px;
  }

  .solid-button,
  .outline-button,
  .ghost-button {
    padding-inline: 11px;
  }
}

@media (max-width: 940px) {
  .auth-screen {
    grid-template-columns: 1fr;
  }

  .tryon-hero,
  .tryon-workspace,
  .tryon-photo-grid,
  .tryon-before-after,
  .tryon-ai-generation-stage,
  .tryon-ai-pipeline,
  .tryon-selection-summary,
  .tryon-result-detail-card,
  .tryon-salon-match,
  .tryon-result-grid,
  .tryon-gender-grid,
  .tryon-basics-grid {
    grid-template-columns: 1fr;
  }

  .tryon-inspiration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-summary-grid,
  .choice-grid,
  .booking-stylists,
  .time-grid {
    grid-template-columns: 1fr;
  }

  .booking-calendar-head,
  .slot-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .tryon-salon-match-media img {
    min-height: 220px;
  }

  .tryon-stepper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tryon-stepper button {
    min-height: 58px;
    flex-direction: column;
    gap: 4px;
    padding: 7px;
  }

  .tryon-stepper button strong {
    font-size: 0.72rem;
  }

  .tryon-side-panel {
    max-height: none;
    overflow: visible;
  }

  .tryon-color-matrix {
    grid-template-columns: 1fr;
  }

  .tryon-side-photo img,
  .tryon-side-photo .tryon-character-art {
    height: clamp(240px, 54vw, 360px);
  }

  .tryon-lightbox-body {
    padding: 12px 54px;
  }

  .pro-auth-screen,
  .activation-layout {
    grid-template-columns: 1fr;
  }

  .activation-studio-head,
  .activation-preview-toolbar,
  .activation-publish-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .activation-head-actions {
    justify-content: stretch;
  }

  .activation-progress-card {
    width: 100%;
    min-width: 0;
  }

  .activation-field-grid,
  .activation-preset-grid {
    grid-template-columns: 1fr;
  }

  .activation-photo-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .activation-site-frame .embedded-site .site-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .activation-site-frame .embedded-site .site-hero-media img {
    height: clamp(260px, 64vw, 390px);
  }

  .activation-preview-toolbar h2 {
    white-space: normal;
  }

  .pro-auth-visual {
    min-height: 340px;
  }

  .pro-auth-workspace {
    min-height: auto;
    align-items: start;
  }

  .salon-site-nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .salon-site-nav nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .salon-site-book {
    width: 100%;
  }

  .site-gallery-grid,
  .site-service-grid,
  .site-stylist-grid,
  .site-review-grid {
    grid-template-columns: 1fr;
  }

  .site-gallery-grid .gallery-1 {
    grid-column: auto;
    grid-row: auto;
    min-height: 240px;
  }

  .pro-auth-panel {
    height: auto;
    min-height: 560px;
    overflow: visible;
  }

  .auth-visual-panel {
    min-height: 340px;
  }

  .auth-workspace {
    min-height: auto;
    align-content: start;
  }

  .auth-screen .auth-panel {
    max-width: 620px;
    height: auto;
    min-height: 620px;
    overflow: visible;
  }

  .topbar {
    flex-wrap: wrap;
  }

  .primary-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .dashboard-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    height: auto;
    min-height: 0;
    padding: 10px 12px;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--pro-line);
    box-shadow: 0 8px 28px rgba(38, 29, 47, 0.07);
  }

  .sidebar-brand {
    display: none;
  }

  .side-nav {
    grid-column: 1 / -1;
    display: flex;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: auto;
    scroll-snap-type: inline proximity;
  }

  .side-link {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    scroll-snap-align: start;
  }

  .sidebar-footer {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-self: center;
    gap: 4px;
    padding: 0;
    border: 0;
  }

  .sidebar-footer :where(a, button) {
    justify-content: center;
    padding-inline: 12px;
  }

  .site-builder-workbench,
  .preset-strip {
    grid-template-columns: 1fr;
  }

  .canvas-editor-tools {
    grid-template-columns: 1fr 1fr;
  }

  .canvas-editor-tools > div {
    grid-column: 1 / -1;
  }

  .builder-structure-panel {
    position: static;
    max-height: none;
  }

  .site-canvas-panel .site-preview-frame {
    max-height: none;
  }

  .site-canvas-panel .embedded-site .site-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .ai-prompt-dock {
    right: 16px;
    left: 16px;
  }

  .ai-prompt-inner {
    grid-template-columns: 1fr;
  }

  .site-builder-studio.focus-mode {
    padding: 10px 10px 152px;
  }

  .site-builder-studio.focus-mode .site-canvas-panel .site-preview-frame {
    max-height: calc(100vh - 330px);
  }

  .dashboard-actions,
  .search-field,
  .search-field.compact {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  .search-field.compact {
    min-width: 0;
  }

  .booking-row {
    grid-template-columns: 78px minmax(0, 1fr) auto;
  }

  .booking-row > span {
    grid-column: 2 / -1;
  }
}

@media (max-width: 720px) {
  .auth-visual-panel,
  .auth-workspace,
  .pro-auth-visual,
  .pro-auth-workspace {
    padding: 18px;
  }

  .auth-visual-panel {
    min-height: auto;
    align-content: start;
    gap: 22px;
  }

  .auth-screen .auth-panel {
    padding: 20px;
  }

  .activation-studio-head {
    padding: 18px;
  }

  .activation-form-section {
    padding: 14px;
  }

  .activation-preview-toolbar,
  .activation-preset-grid {
    padding: 14px;
  }

  .auth-panel > div:first-child,
  .auth-panel h1,
  .auth-panel > div:first-child p:not(.eyebrow),
  .auth-form {
    min-height: 0;
  }

  .auth-workspace-top {
    grid-template-columns: 1fr;
  }

  .auth-workspace-top {
    display: grid;
  }

  .auth-visual-copy {
    gap: 10px;
  }

  .auth-visual-copy h1 {
    font-size: clamp(1.9rem, 8.6vw, 2.45rem);
    line-height: 1.05;
  }

  .pro-auth-visual h1 {
    font-size: clamp(2rem, 9vw, 2.65rem);
  }

  .auth-visual-lede {
    font-size: 0.95rem;
  }

  .auth-proof-grid {
    display: none;
  }

  .page-wrap,
  .topbar {
    width: min(100% - 20px, 1440px);
  }

  .top-actions {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top-actions > * {
    width: 100%;
    min-width: 0;
  }

  .search-panel,
  .visual-panel {
    min-height: auto;
  }

  .visual-panel img {
    aspect-ratio: 4 / 3;
  }

  .discover-page {
    gap: 38px;
  }

  .discover-marketplace-heading,
  .discover-row-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .discover-row-heading > span {
    display: none;
  }

  .discover-salon-track {
    grid-auto-columns: min(86vw, 340px);
  }

  .discover-review-track {
    grid-auto-columns: minmax(260px, 84vw);
  }

  .discover-promo {
    grid-template-columns: 1fr;
  }

  .discover-promo > img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .discover-heading-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .customer-footer-main,
  .customer-footer-bottom {
    width: min(100% - 32px, 1680px);
  }

  .customer-footer-main {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 38px 0;
  }

  .customer-footer-brand {
    grid-column: auto;
  }

  .customer-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 16px 0;
  }

  .customer-content-grid,
  .me-stat-grid,
  .me-grid.two,
  .dashboard-grid,
  .saved-look-grid,
  .stylist-grid,
  .portfolio-grid,
  .choice-grid,
  .auth-actions,
  .auth-grid,
  .profile-grid,
  .booking-stylists,
  .date-strip,
  .time-grid,
  .style-stat-grid,
  .summary-grid,
  .info-grid,
  .client-stats,
  .pro-feature-grid {
    grid-template-columns: 1fr;
  }

  .booking-style-options,
  .booking-reference-actions {
    grid-template-columns: 1fr;
  }

  .salon-row,
  .salon-card {
    grid-template-columns: 1fr;
  }

  .salon-row-main h3,
  .salon-row-main p,
  .directory-meta {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .salon-thumb {
    width: 100%;
    height: 180px;
  }

  .salon-row-side {
    justify-items: stretch;
  }

  .me-command-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .me-command-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .customer-appointment-row,
  .customer-payment-row {
    grid-template-columns: 1fr;
  }

  .appointment-row-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
  }

  .customer-ai-grid {
    grid-template-columns: 1fr;
  }

  .salon-image {
    min-height: 220px;
  }

  .service-row,
  .section-head,
  .table-toolbar,
  .upload-strip,
  .tryon-mini-before-after,
  .tryon-generation-card,
  .reference-step,
  .confirm-step {
    grid-template-columns: 1fr;
  }

  .service-row,
  .section-head,
  .table-toolbar {
    display: grid;
  }

  .service-row > div:last-child {
    justify-items: stretch;
  }

  .stepper {
    display: flex;
    overflow-x: auto;
  }

  .stepper button {
    flex: 0 0 190px;
  }

  .dashboard-content {
    padding: 14px;
  }

  .metric-card,
  .schedule-panel,
  .ai-review-panel,
  .payments-grid .payout-panel {
    grid-column: span 1;
  }

  .generic-list article,
  .booking-table-row,
  .service-admin-row {
    grid-template-columns: 1fr;
  }

  .tryon-before-after-image img {
    height: clamp(260px, 82vw, 390px);
  }

  .tryon-ai-generation-stage {
    min-height: auto;
  }

  .tryon-ai-visual {
    min-height: 250px;
  }

  .tryon-ai-copy h2 {
    font-size: clamp(1.9rem, 9vw, 3.1rem);
  }

  .tryon-side-reference {
    grid-template-columns: 82px minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  h1 {
    font-size: clamp(1.7rem, 9vw, 2.5rem);
  }

  .brand {
    min-width: 0;
  }

  .brand-wordmark {
    width: 128px;
  }

  .brand small {
    display: none;
  }

  .topbar {
    width: min(100% - 16px, 1680px);
  }

  .primary-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
  }

  .nav-link {
    width: 100%;
    min-height: 46px;
  }

  .directory-salon-row,
  .salon-row {
    grid-template-columns: 1fr;
  }

  .directory-salon-row .salon-thumb,
  .salon-thumb {
    width: 100%;
    height: 180px;
  }

  .salon-row-side {
    justify-items: stretch;
  }

  .date-picker-field {
    min-width: 0;
  }

  .date-strip button {
    flex-basis: 92px;
  }

  .page-wrap {
    width: min(100% - 16px, 1680px);
    padding-top: 10px;
  }

  .search-panel,
  .large-panel,
  .try-card,
  .appointment-panel,
  .booking-sidebar,
  .style-builder,
  .tryon-stage,
  .tryon-hero,
  .booking-main,
  .booking-summary,
  .profile-panel,
  .me-main .panel,
  .auth-panel,
  .account-empty-panel,
  .dashboard-panel {
    padding: 16px;
  }

  .activation-preview-panel,
  .site-canvas-panel {
    padding: 0;
  }

  .activation-studio {
    gap: 12px;
    padding-bottom: 152px;
  }

  .business-setup-studio {
    padding-bottom: 40px;
  }

  .tryon-stepper button {
    justify-content: center;
  }

  .tryon-filter-guide {
    grid-template-columns: 1fr;
  }

  .tryon-camera-modal {
    padding: 6px;
  }

  .tryon-camera-dialog {
    max-height: calc(100dvh - 12px);
    border-radius: 16px;
  }

  .tryon-camera-toolbar,
  .tryon-camera-modal-controls {
    padding: 10px;
  }

  .tryon-camera-modal-controls {
    display: grid;
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
  }

  .tryon-shutter-button {
    min-width: 0;
    white-space: normal;
  }

  .tryon-camera-panel {
    width: min(100%, calc((100dvh - 166px) * 0.75));
  }

  .tryon-photo-preview img,
  .tryon-result-image img {
    height: clamp(300px, 92vw, 470px);
  }

  .tryon-inspiration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .tryon-inspiration-card {
    min-height: 0;
    gap: 7px;
    padding: 9px;
  }

  .tryon-inspiration-card em {
    display: none;
  }

  .tryon-choice-grid,
  .tryon-color-grid {
    grid-template-columns: 1fr;
  }

  .tryon-brief {
    grid-template-columns: 1fr;
  }

  .tryon-result-actions,
  .tryon-footer,
  .tryon-lightbox-toolbar,
  .tryon-lightbox-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .tryon-lightbox {
    padding: 8px;
  }

  .tryon-lightbox-panel {
    max-height: calc(100vh - 16px);
  }

  .tryon-lightbox-body {
    padding: 10px 12px 58px;
  }

  .tryon-lightbox-body img {
    max-height: calc(100vh - 270px);
  }

  .lightbox-nav {
    top: auto;
    bottom: 12px;
    transform: none;
  }

  .lightbox-nav.prev {
    left: 12px;
    transform: rotate(180deg);
  }

  .lightbox-nav.next {
    right: 12px;
  }

  .canvas-editor-tools {
    grid-template-columns: 1fr;
  }

  .canvas-upload {
    grid-column: auto;
  }

  .activation-site-frame .embedded-site .salon-site-section {
    width: min(100% - 22px, 1040px);
  }

  .activation-site-frame .embedded-site .salon-site-nav {
    padding: 10px 12px;
  }

  .top-actions {
    grid-template-columns: 1fr;
  }

  .map-surface {
    height: 300px;
  }

  .auth-actions,
  .auth-button-row,
  .auth-grid,
  .profile-grid,
  .signup-methods,
  .site-vibe-grid,
  .theme-swatch-grid,
  .builder-photo-strip,
  .site-time-grid {
    grid-template-columns: 1fr;
  }

  .salon-card-body,
  .salon-row {
    padding: 14px;
  }

  .booking-row {
    grid-template-columns: 1fr;
  }

  .booking-row > span {
    grid-column: auto;
  }
}

@media (max-width: 359px) {
  .tryon-inspiration-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .customer-topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    min-height: 0;
    padding: 8px 0;
  }

  .customer-topbar .brand {
    min-height: 36px;
  }

  .customer-topbar .brand small {
    display: none;
  }

  .customer-topbar .top-actions {
    order: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    gap: 6px;
  }

  .customer-topbar .top-actions > * {
    width: 100%;
    min-height: 36px;
    padding: 0 7px;
    font-size: 0.76rem;
  }

  .customer-topbar .primary-nav {
    order: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: 3px;
    padding: 4px;
    overflow: visible;
  }

  .customer-topbar .nav-link {
    width: 100%;
    min-height: 38px;
    gap: 4px;
    padding: 0 3px;
    font-size: 0.72rem;
  }

  .customer-topbar .nav-link .icon {
    width: 15px;
    height: 15px;
  }
}

/* My Hair account workspace */
.me-dashboard {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: calc(100vh - 112px);
  overflow: hidden;
  border: 1px solid #e3e7eb;
  border-radius: 8px;
  background: #f6f7f9;
  box-shadow: 0 18px 48px rgba(29, 27, 39, 0.07);
}

.me-account-rail {
  position: sticky;
  top: 82px;
  display: flex;
  min-width: 0;
  min-height: calc(100vh - 112px);
  max-height: calc(100vh - 82px);
  flex-direction: column;
  align-self: start;
  border-right: 1px solid #e5e8ec;
  padding: 22px 14px 16px;
  background: #fff;
}

.me-rail-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 2px 6px 22px;
}

.me-rail-profile > div {
  min-width: 0;
}

.me-rail-profile strong,
.me-rail-profile span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-rail-profile strong {
  color: #24222b;
  font-size: 0.96rem;
}

.me-rail-profile span {
  margin-top: 3px;
  color: #7b7f87;
  font-size: 0.73rem;
}

.me-dashboard .me-rail-avatar {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #6f63b6;
  box-shadow: none;
}

.me-dashboard .me-rail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.me-dashboard .me-rail-avatar > span {
  font-size: 1rem;
  font-weight: 900;
}

.profile-photo-control.uploading,
.settings-photo-control.uploading {
  cursor: wait;
  opacity: 0.78;
}

.profile-photo-control.uploading b,
.settings-photo-control.uploading b {
  animation: profileUploadPulse 900ms ease-in-out infinite alternate;
}

.settings-photo-button.uploading {
  cursor: wait;
  opacity: 0.72;
}

@keyframes profileUploadPulse {
  from {
    transform: scale(0.82);
  }

  to {
    transform: scale(1);
  }
}

.me-rail-nav {
  display: grid;
  gap: 3px;
}

.me-rail-nav button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 6px;
  padding: 0 11px;
  color: #62656d;
  background: transparent;
  font-weight: 760;
  text-align: left;
}

.me-rail-nav button:hover {
  color: #2b2931;
  background: #f5f6f7;
}

.me-rail-nav button.active {
  color: #51458e;
  background: #f0edf9;
}

.me-rail-nav button .icon {
  width: 18px;
  height: 18px;
}

.me-rail-nav button b {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #6f63b6;
  font-size: 0.68rem;
}

.me-rail-nav button b.customer-notification-nav-count {
  min-width: 22px;
  padding: 0 6px;
  background: #d64055;
  box-shadow: 0 0 0 3px #fff;
}

.me-rail-footer {
  display: grid;
  gap: 10px;
  margin-top: auto;
  border-top: 1px solid #eceef0;
  padding: 16px 6px 0;
}

.me-rail-footer > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #777b83;
  font-size: 0.75rem;
  font-weight: 760;
}

.me-rail-footer > div strong {
  color: #302d38;
}

.me-rail-footer > b {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eaed;
}

.me-rail-footer > b::after {
  display: block;
  width: var(--completion);
  height: 100%;
  border-radius: inherit;
  background: #47b99e;
  content: "";
}

.me-workspace {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 22px;
  padding: 30px 32px 42px;
}

.account-data-notice {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #ddd5f5;
  border-radius: 16px;
  background: #f8f6ff;
  color: #322a47;
}

.account-data-notice > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: #ece7fb;
  color: #654db9;
}

.account-data-notice strong,
.account-data-notice p {
  display: block;
  margin: 0;
}

.account-data-notice p {
  margin-top: 3px;
  color: #686174;
  font-size: 0.84rem;
  line-height: 1.45;
}

.account-data-notice.error {
  border-color: #efc9cc;
  background: #fff7f7;
}

.account-data-notice.error > span {
  background: #fbe5e7;
  color: #9e2530;
}

.me-account-pending {
  min-height: 300px;
  overflow: hidden;
}

.me-account-pending-heading {
  display: grid;
  gap: 8px;
}

.me-account-pending-heading i,
.me-account-pending-grid > span > i {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, #efedf2, #f5f3f7);
}

.me-account-pending-heading i:first-child {
  width: min(170px, 48%);
  height: 12px;
}

.me-account-pending-heading i:last-child {
  width: min(280px, 72%);
  height: 9px;
}

.me-account-pending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.me-account-pending-grid > span {
  display: grid;
  min-height: 132px;
  align-content: end;
  gap: 9px;
  padding: 16px;
  border: 1px solid #ece9ef;
  border-radius: 12px;
  background: #faf9fb;
}

.me-account-pending-grid > span > i:first-child {
  width: 42px;
  height: 42px;
  margin-bottom: auto;
  border-radius: 12px;
}

.me-account-pending-grid > span > i:nth-child(2) {
  width: 72%;
  height: 11px;
}

.me-account-pending-grid > span > i:last-child {
  width: 48%;
  height: 8px;
}

.me-page-header {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}

.me-page-header > div {
  min-width: 0;
}

.me-page-header h1 {
  margin: 5px 0 6px;
  color: #25232c;
  font-size: clamp(1.9rem, 3vw, 2.65rem);
  font-weight: 820;
  line-height: 1.05;
}

.me-page-header > div > span,
.me-section-heading > div > span {
  color: #737780;
  font-size: 0.9rem;
}

.me-sync-status {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 0 9px;
  color: #277c68;
  background: #eaf7f3;
  font-size: 0.72rem;
  font-weight: 820;
}

.me-sync-status .icon {
  width: 13px;
  height: 13px;
}

.me-kpi-strip,
.me-payment-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #e3e6e9;
  border-radius: 8px;
  background: #fff;
}

.me-kpi {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  min-width: 0;
  align-items: center;
  padding: 17px 18px;
  border-left: 1px solid #eceef0;
}

.me-kpi:first-child {
  border-left: 0;
}

.me-kpi > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 6px;
  color: #61569f;
  background: #f0edf9;
}

.me-kpi > span .icon {
  width: 18px;
  height: 18px;
}

.me-kpi small,
.me-kpi strong,
.me-kpi em {
  display: block;
  min-width: 0;
}

.me-kpi small {
  color: #858891;
  font-size: 0.68rem;
  font-weight: 790;
  text-transform: uppercase;
}

.me-kpi strong {
  overflow: hidden;
  margin: 2px 0;
  color: #292730;
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-kpi em {
  overflow: hidden;
  color: #8a8d94;
  font-size: 0.72rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-feature-grid,
.me-overview-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
  gap: 18px;
}

.me-booking-feature,
.me-profile-readiness,
.me-content-section,
.me-looks-feature,
.me-settings-panel {
  min-width: 0;
  border: 1px solid #e2e5e8;
  border-radius: 8px;
  background: #fff;
}

.me-booking-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 32%);
  min-height: 250px;
  overflow: hidden;
  color: #fff;
  border: 0;
  background: #292733;
}

.me-feature-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  padding: 30px;
}

.me-feature-label {
  color: #8edcc8;
  font-size: 0.72rem;
  font-weight: 830;
  text-transform: uppercase;
}

.me-feature-copy h2 {
  max-width: 540px;
  color: #fff;
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  line-height: 1.08;
}

.me-feature-copy p,
.me-feature-copy strong {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.88rem;
  line-height: 1.5;
}

.me-feature-copy .button-row {
  margin-top: 6px;
}

.me-feature-copy .ghost-button {
  color: #fff;
}

.me-booking-feature > img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  opacity: 0.88;
}

.me-feature-date {
  display: grid;
  align-content: center;
  justify-items: center;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  background: #35323f;
}

.me-feature-date span,
.me-feature-date b {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.me-feature-date strong {
  margin: 5px 0 9px;
  color: #fff;
  font-size: 3rem;
  line-height: 1;
}

.me-profile-readiness,
.me-looks-feature,
.me-content-section,
.me-settings-panel {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 22px;
}

.me-section-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.me-section-heading.compact {
  align-items: center;
}

.me-section-heading h2 {
  margin-top: 4px;
  color: #292730;
  font-size: 1.25rem;
  line-height: 1.18;
}

.me-profile-readiness > p {
  color: #737780;
  font-size: 0.84rem;
  line-height: 1.5;
}

.me-profile-readiness .profile-completion {
  border: 0;
  padding: 0;
  background: transparent;
}

.me-profile-readiness .profile-completion-list {
  display: none;
}

.me-profile-readiness .profile-completion > b {
  height: 6px;
  background: #e8eaed;
}

.me-profile-readiness .profile-completion > b::after {
  background: #47b99e;
}

.me-dashboard .profile-facts span {
  min-height: 27px;
  border-color: #e4e6e8;
  border-radius: 999px;
  color: #656871;
  background: #f7f8f8;
  font-size: 0.7rem;
}

.me-overview-lower {
  align-items: stretch;
}

.me-salon-list,
.customer-row-list,
.me-history-timeline {
  display: grid;
}

.me-salon-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid #eceef0;
}

.me-salon-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.me-salon-row:last-child {
  padding-bottom: 0;
}

.me-salon-row img {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
}

.me-salon-row > div {
  min-width: 0;
}

.me-salon-title {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.me-salon-title strong {
  overflow: hidden;
  color: #2d2b33;
  font-size: 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-salon-title span {
  flex: 0 0 auto;
  color: #5a4f96;
  font-size: 0.72rem;
  font-weight: 820;
}

.me-salon-row p,
.me-salon-row small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #858890;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-ai-empty-visual {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1fr);
  gap: 15px;
  align-items: center;
}

.me-ai-empty-visual img {
  width: 100%;
  height: 140px;
  border-radius: 6px;
  object-fit: cover;
}

.me-ai-empty-visual p {
  margin-bottom: 12px;
  color: #737780;
  font-size: 0.8rem;
  line-height: 1.45;
}

.me-latest-look .customer-ai-card {
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  border: 0;
  padding: 0;
}

.me-latest-look .customer-ai-card img {
  height: 120px;
}

.me-count {
  display: grid;
  min-width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  color: #595d65;
  background: #f1f2f3;
  font-size: 0.75rem;
  font-weight: 820;
}

.me-empty-state {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 13px;
  min-height: 94px;
  align-items: center;
  border-top: 1px solid #eceef0;
  padding: 18px 0;
}

.me-empty-state > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: #6960a1;
  background: #f0edf9;
}

.me-empty-state > span .icon {
  width: 18px;
  height: 18px;
}

.me-empty-state strong {
  color: #34313a;
  font-size: 0.88rem;
}

.me-empty-state p {
  margin-top: 3px;
  color: #858890;
  font-size: 0.76rem;
  line-height: 1.4;
}

.me-dashboard .customer-appointment-row,
.me-dashboard .customer-payment-row {
  border: 0;
  border-top: 1px solid #eceef0;
  border-radius: 0;
  padding: 14px 0;
  background: transparent;
}

.me-dashboard .customer-row-list > :first-child,
.me-history-timeline > :first-child {
  border-top: 0;
}

.me-dashboard .appointment-date-block {
  min-height: 58px;
  border: 1px solid #e5e1f2;
  background: #f5f3fa;
}

.me-dashboard .customer-appointment-row h3 {
  color: #302e36;
  font-size: 0.9rem;
}

.me-dashboard .customer-appointment-row p,
.me-dashboard .customer-appointment-row small {
  color: #858890;
}

.appointment-dialog-shell {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.appointment-dialog-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(24, 20, 32, 0.48);
  backdrop-filter: blur(8px);
}

.appointment-dialog-backdrop:disabled {
  cursor: default;
  opacity: 1;
}

.appointment-dialog-card {
  position: relative;
  display: grid;
  width: min(720px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid rgba(111, 91, 190, 0.2);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(31, 23, 48, 0.24);
  animation: appointmentDialogIn 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.appointment-dialog-card:focus {
  outline: 0;
}

.appointment-dialog-card.appointment-dialog-cancelling {
  width: min(560px, 100%);
}

@keyframes appointmentDialogIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.appointment-dialog-card > header,
.appointment-dialog-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
}

.appointment-dialog-card > header {
  border-bottom: 1px solid #ebe8ee;
}
.appointment-dialog-card > header > div {
  display: grid;
  gap: 2px;
}
.appointment-dialog-card > header h2 {
  margin: 0;
  font-size: 1.25rem;
}
.appointment-dialog-card > header span {
  color: #7f7886;
  font-size: 0.76rem;
}
.appointment-dialog-card > footer {
  border-top: 1px solid #ebe8ee;
  background: #fbfafc;
  justify-content: flex-end;
}

.appointment-dialog-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-bottom: 1px solid #efecf1;
  background: #faf9fc;
}

.appointment-dialog-status > span:not(.status-badge) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #625b69;
  font-size: 0.72rem;
  font-weight: 760;
}
.appointment-dialog-status .icon {
  width: 15px;
  height: 15px;
  color: #6e5ab5;
}

.appointment-dialog-body {
  display: grid;
  gap: 16px;
  min-height: 0;
  overflow: auto;
  padding: 20px 22px;
}

.appointment-cancellation-confirmation {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  border: 1px solid rgba(202, 74, 91, 0.24);
  border-radius: 16px;
  padding: 18px;
  background: linear-gradient(145deg, #fffafa, #fff5f6);
  animation: appointmentCancellationIn 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.appointment-cancellation-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
}

.appointment-cancellation-context span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #574e54;
  font-size: 0.73rem;
  font-weight: 760;
}

.appointment-cancellation-context .icon {
  width: 15px;
  height: 15px;
  color: #9b3b48;
}

.appointment-cancellation-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  color: #a33140;
  background: #ffe2e6;
}

.appointment-cancellation-icon .icon {
  width: 21px;
  height: 21px;
}

.appointment-cancellation-confirmation h3,
.appointment-cancellation-confirmation p {
  margin: 0;
}

.appointment-cancellation-confirmation h3 {
  color: #30272d;
  font-size: 1.05rem;
}

.appointment-cancellation-confirmation p {
  margin-top: 6px;
  color: #72666c;
  font-size: 0.78rem;
  line-height: 1.55;
}

.appointment-cancellation-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 4px;
}

.appointment-cancel-confirm {
  border-color: #b53948 !important;
  color: #fff !important;
  background: #b53948 !important;
}

.appointment-cancel-confirm:hover {
  background: #9f2d3b !important;
}

.appointment-action-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.44);
  border-top-color: #fff;
  border-radius: 50%;
  animation: appointmentActionSpin 680ms linear infinite;
}

@keyframes appointmentCancellationIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes appointmentActionSpin {
  to {
    transform: rotate(360deg);
  }
}
.appointment-detail-section {
  display: grid;
  gap: 10px;
}
.appointment-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.appointment-detail-heading > span {
  color: #8a838f;
  font-size: 0.7rem;
}
.appointment-detail-timeline {
  display: grid;
  overflow: hidden;
  border: 1px solid #e7e3ea;
  border-radius: 13px;
}
.appointment-detail-timeline > div {
  display: grid;
  grid-template-columns: 135px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 11px 13px;
}
.appointment-detail-timeline > div + div {
  border-top: 1px solid #ece9ee;
}
.appointment-detail-timeline time {
  color: #6553aa;
  font-size: 0.74rem;
  font-weight: 850;
}
.appointment-detail-timeline > div > span {
  display: grid;
  gap: 2px;
}
.appointment-detail-timeline strong {
  font-size: 0.78rem;
}
.appointment-detail-timeline small {
  color: #89828e;
  font-size: 0.68rem;
}

.appointment-detail-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.appointment-detail-facts > div {
  display: grid;
  gap: 4px;
  border-radius: 11px;
  padding: 12px;
  background: #f7f5fa;
}
.appointment-detail-facts span,
.appointment-detail-notes > span,
.appointment-notes-editor > span,
.appointment-reference-detail span {
  color: #8b8390;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.appointment-detail-facts strong {
  overflow: hidden;
  font-size: 0.74rem;
  text-overflow: ellipsis;
}
.appointment-outside-deposit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid #d8eee7;
  border-radius: 14px;
  padding: 14px;
  background: #f2faf7;
}
.appointment-outside-deposit h3,
.appointment-outside-deposit p {
  margin: 0;
}
.appointment-outside-deposit h3 {
  margin-top: 3px;
  color: #2d554a;
  font-size: 0.95rem;
}
.appointment-outside-deposit p:not(.eyebrow) {
  margin-top: 4px;
  color: #64766f;
  font-size: 0.78rem;
}

.appointment-outside-deposit .appointment-outside-deposit-warning {
  margin-top: 6px;
  color: #8a5b24;
  font-weight: 700;
}
.appointment-outside-deposit-instructions {
  margin-top: 9px;
  white-space: pre-wrap;
  color: #344f47;
  font-size: 0.8rem;
  line-height: 1.45;
}
.appointment-outside-deposit img {
  width: 88px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
}
.appointment-reference-detail {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #e7e2ef;
  border-radius: 12px;
  padding: 10px;
}

.appointment-reference-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.appointment-reference-detail img {
  width: 72px;
  height: 72px;
  border-radius: 9px;
  object-fit: cover;
}
.appointment-reference-detail > div {
  display: grid;
  gap: 4px;
}
.appointment-detail-notes {
  display: grid;
  gap: 6px;
  border-top: 1px solid #ece9ee;
  padding-top: 14px;
}
.appointment-detail-notes p {
  margin: 0;
  color: #554f5a;
  font-size: 0.78rem;
  line-height: 1.55;
}
.appointment-proposal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #d7cbed;
  border-radius: 14px;
  padding: 16px;
  background: #f5f1fb;
}
.appointment-proposal > div:first-child {
  display: grid;
  gap: 4px;
}
.appointment-proposal h3,
.appointment-proposal p {
  margin: 0;
}
.appointment-proposal span {
  color: #625b69;
  font-size: 0.76rem;
  line-height: 1.5;
}
.appointment-proposal > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.appointment-change-request {
  display: grid;
  align-items: stretch;
  gap: 14px;
}
.appointment-change-request-heading {
  display: grid;
  gap: 4px;
}
.appointment-change-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}
.appointment-change-comparison > div {
  display: grid;
  align-content: start;
  gap: 4px;
  border: 1px solid #ded4ec;
  border-radius: 11px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.72);
}
.appointment-change-comparison > div > span {
  color: #776d7e;
  font-size: 0.64rem;
  font-weight: 760;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.appointment-change-comparison > div > strong {
  color: #2f2934;
  font-size: 0.82rem;
  line-height: 1.35;
}
.appointment-change-comparison > div > small {
  color: #6d6472;
  font-size: 0.7rem;
}
.appointment-change-comparison > span {
  align-self: center;
  color: #765ab3;
}
.appointment-change-request-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.appointment-change-awaiting {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 7px;
  border-radius: 999px;
  padding: 7px 10px;
  background: #e9e1f7;
  color: #584184 !important;
  font-weight: 760;
}
.appointment-change-awaiting .icon {
  width: 15px;
  height: 15px;
}
.appointment-change-outcome {
  display: grid;
  gap: 13px;
  border: 1px solid #ead8bf;
  border-radius: 14px;
  padding: 16px;
  background: linear-gradient(145deg, #fffaf3 0%, #fbf8f5 100%);
}
.appointment-change-outcome-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.appointment-change-outcome-heading > div {
  display: grid;
  gap: 4px;
}
.appointment-change-outcome-heading h3,
.appointment-change-outcome-heading p,
.appointment-change-outcome > p,
.appointment-change-outcome-note p {
  margin: 0;
}
.appointment-change-outcome-heading > span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  background: #e2f4ee;
  color: #256957;
  font-size: 0.68rem;
  font-weight: 780;
}
.appointment-change-outcome > p {
  color: #62596a;
  font-size: 0.76rem;
  line-height: 1.55;
}
.appointment-change-outcome-comparison > div {
  border-color: #eadfce;
  background: rgba(255, 255, 255, 0.8);
}
.appointment-change-outcome-note {
  display: grid;
  gap: 3px;
  border-top: 1px solid #eadfce;
  padding-top: 11px;
}
.appointment-change-outcome-note > span {
  color: #7b6e61;
  font-size: 0.64rem;
  font-weight: 760;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.appointment-change-outcome-note p {
  color: #4f4853;
  font-size: 0.75rem;
  line-height: 1.5;
}
.appointment-message-thread {
  display: grid;
  gap: 9px;
  border-top: 1px solid #ece9ee;
  padding-top: 14px;
}
.appointment-message-thread article {
  width: min(82%, 520px);
  border-radius: 13px;
  padding: 10px 12px;
  background: #f3f1f5;
}
.appointment-message-thread article.customer {
  justify-self: end;
  background: #eee8f8;
}
.appointment-message-thread article p {
  margin: 0;
  color: #514a56;
  font-size: 0.78rem;
  line-height: 1.5;
}
.appointment-message-thread article time {
  display: block;
  margin-top: 4px;
  color: #8b8390;
  font-size: 0.62rem;
}
.appointment-notes-editor {
  display: grid;
  gap: 7px;
}
.appointment-notes-editor textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid #dcd6e5;
  border-radius: 12px;
  padding: 12px;
  font: inherit;
}
.appointment-notes-editor small {
  color: #88818d;
  font-size: 0.68rem;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .appointment-dialog-shell {
    padding: 0;
  }
  .appointment-dialog-card {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .appointment-detail-facts {
    grid-template-columns: 1fr;
  }
  .appointment-detail-timeline > div {
    grid-template-columns: 110px minmax(0, 1fr);
  }
  .appointment-proposal {
    align-items: stretch;
    flex-direction: column;
  }
  .appointment-proposal > div:last-child > button {
    flex: 1;
  }
  .appointment-change-comparison {
    grid-template-columns: 1fr;
  }
  .appointment-change-comparison > span {
    justify-self: center;
    transform: rotate(90deg);
  }
  .appointment-change-outcome-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .appointment-change-outcome-heading > span {
    align-self: start;
  }
  .appointment-cancellation-confirmation {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 16px;
  }
  .appointment-cancellation-icon {
    width: 42px;
    height: 42px;
  }
  .appointment-cancellation-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .appointment-cancellation-actions button {
    width: 100%;
  }
}

@media (max-width: 1100px) {
  .discover-review-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .discover-review-track {
    grid-template-columns: 1fr;
    padding-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discover-review-card {
    animation: none;
  }
}

.me-look-library {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.me-dashboard .customer-ai-card {
  overflow: hidden;
  border-color: #e4e6e8;
  border-radius: 7px;
  padding: 8px;
  background: #fff;
}

.me-dashboard .customer-ai-card img {
  border-radius: 5px;
}

.me-empty-showcase {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(300px, 1fr);
  min-height: 360px;
  overflow: hidden;
  border-radius: 7px;
  background: #f1f4f3;
}

.me-empty-showcase > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.me-empty-showcase > div {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
  padding: 36px;
}

.me-empty-showcase > div > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #6f63b6;
}

.me-empty-showcase h2 {
  color: #2c2a32;
  font-size: 1.55rem;
}

.me-empty-showcase p {
  max-width: 440px;
  color: #747881;
  line-height: 1.55;
}

.me-payment-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.me-settings-panel {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.me-settings-panel > .me-section-heading {
  padding: 24px;
  border-bottom: 1px solid #e8eaec;
}

.me-settings-profile {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #eceef0;
}

.settings-photo-control {
  position: relative;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  background: #6f63b6;
  font-weight: 850;
  cursor: pointer;
}

.settings-photo-control img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.settings-photo-control b {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #2f9d84;
}

.settings-photo-control .icon {
  width: 11px;
  height: 11px;
}

.settings-photo-control input,
.settings-photo-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.me-settings-profile > div strong,
.me-settings-profile > div span {
  display: block;
}

.me-settings-profile > div strong {
  color: #302e36;
}

.me-settings-profile > div span {
  margin-top: 4px;
  color: #80838b;
  font-size: 0.8rem;
}

.settings-photo-button {
  position: relative;
  overflow: hidden;
}

.me-settings-group {
  display: grid;
  grid-template-columns: minmax(200px, 0.32fr) minmax(0, 1fr);
  gap: 34px;
  padding: 28px 24px;
  border-bottom: 1px solid #eceef0;
}

.me-settings-group > div:first-child h3 {
  color: #302e36;
  font-size: 0.94rem;
}

.me-settings-group > div:first-child p {
  margin-top: 6px;
  color: #84878f;
  font-size: 0.76rem;
  line-height: 1.45;
}

.me-settings-group .profile-grid {
  gap: 16px;
}

.me-settings-group .profile-grid label {
  display: grid;
  gap: 0;
  color: #5e6169;
  font-size: 0.76rem;
  font-weight: 760;
}

.me-settings-group .profile-grid input,
.me-settings-group .profile-grid select,
.me-settings-group .profile-grid textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin-top: 7px;
  border: 1px solid #dfe2e5;
  border-radius: 6px;
  padding: 0 12px;
  color: #302e36;
  border-color: #dfe2e5;
  background: #fff;
  outline: 0;
}

.me-settings-group .profile-grid textarea {
  min-height: 118px;
  padding: 12px;
  resize: vertical;
}

.me-settings-group .profile-grid input:focus,
.me-settings-group .profile-grid select:focus,
.me-settings-group .profile-grid textarea:focus {
  border-color: #8173c3;
  box-shadow: 0 0 0 3px rgba(111, 99, 182, 0.12);
}

.me-settings-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 18px 24px;
  background: #fafafa;
}

.me-settings-logout {
  margin-right: auto;
}

@media (max-width: 1180px) {
  .me-feature-grid,
  .me-overview-lower {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  }

  .me-look-library {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1040px) {
  .me-dashboard {
    grid-template-columns: 1fr;
  }

  .me-account-rail {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
    max-height: none;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid #e5e8ec;
    padding: 12px 14px;
  }

  .me-rail-profile {
    min-width: 230px;
    padding: 0 18px 0 0;
  }

  .me-rail-nav {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .me-rail-nav::-webkit-scrollbar {
    display: none;
  }

  .me-rail-nav button {
    grid-template-columns: 18px auto auto;
    flex: 0 0 auto;
    min-height: 40px;
  }

  .me-rail-footer {
    display: none;
  }

  .me-feature-grid,
  .me-overview-lower {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .account-data-notice {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .account-data-notice > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .me-account-pending {
    min-height: 250px;
  }

  .me-account-pending-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-wrap {
    width: calc(100% - 20px);
    padding-top: 10px;
  }

  .customer-topbar .top-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .customer-topbar .top-actions > * {
    padding: 0 3px;
    font-size: 0.7rem;
  }

  .me-account-rail {
    display: block;
    padding: 12px;
  }

  .me-rail-profile {
    min-width: 0;
    padding: 0 0 10px;
  }

  .me-rail-nav button {
    min-height: 38px;
    padding: 0 9px;
    font-size: 0.76rem;
  }

  .me-workspace {
    gap: 16px;
    padding: 20px 14px 30px;
  }

  .me-page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .me-page-header > button {
    width: 100%;
  }

  .me-page-header h1 {
    font-size: 1.8rem;
  }

  .me-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .me-kpi:nth-child(3) {
    border-left: 0;
  }

  .me-kpi:nth-child(n + 3) {
    border-top: 1px solid #eceef0;
  }

  .me-kpi {
    padding: 14px;
  }

  .me-booking-feature {
    grid-template-columns: minmax(0, 1fr) 130px;
  }

  .me-feature-copy {
    padding: 23px;
  }

  .me-feature-copy .button-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .me-profile-readiness,
  .me-looks-feature,
  .me-content-section {
    padding: 18px;
  }

  .me-look-library {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .me-empty-showcase {
    grid-template-columns: 1fr;
  }

  .me-empty-showcase > img {
    height: 240px;
  }

  .me-payment-summary {
    grid-template-columns: 1fr;
  }

  .me-payment-summary .me-kpi {
    border-top: 1px solid #eceef0;
    border-left: 0;
  }

  .me-payment-summary .me-kpi:first-child {
    border-top: 0;
  }

  .me-settings-group {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

body.booking-workspace-mode {
  overflow: hidden;
}
body.booking-workspace-mode .customer-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
  min-height: 0;
}
body.booking-workspace-mode .customer-shell > footer {
  display: none;
}
body.booking-workspace-mode .page-wrap {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-top: 12px;
  padding-bottom: 12px;
}
body.booking-workspace-mode .booking-layout {
  height: 100%;
  min-height: 0;
  align-items: stretch;
}
body.booking-workspace-mode .booking-main {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}
body.booking-workspace-mode .booking-step-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 5px;
}
body.booking-workspace-mode .booking-summary {
  position: relative;
  top: auto;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.booking-tryon-embedded .tryon-workspace.booking-embedded {
  grid-template-columns: minmax(0, 1fr);
}
.booking-summary-tryon {
  margin-top: 14px;
  border-top: 1px solid #e8e6ed;
  padding-top: 14px;
}
.booking-summary-tryon .tryon-side-panel {
  position: relative;
  top: auto;
  max-height: none;
  overflow: visible;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.booking-summary-tryon .tryon-side-header {
  margin-bottom: 8px;
}
.booking-summary-service {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-radius: 7px;
  padding: 7px 9px;
  color: #5f5966;
  background: #f6f5f8;
  font-size: 0.72rem;
}
.booking-summary-service strong {
  color: #2f2a35;
}
.booking-service-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.booking-service-head h2 {
  margin: 2px 0;
  font-size: 1.35rem;
}
.booking-service-head > div > span {
  color: #7c7782;
  font-size: 0.78rem;
}
.booking-service-head label {
  display: grid;
  gap: 5px;
  color: #625c69;
  font-size: 0.7rem;
  font-weight: 800;
}
.booking-service-head select {
  min-height: 38px;
  border: 1px solid #dedbe5;
  border-radius: 8px;
  padding: 0 30px 0 10px;
  background: white;
  font: inherit;
}
.booking-multi-services .choice-card {
  position: relative;
  padding-right: 52px;
  text-align: left;
}
.booking-multi-services .choice-card > i {
  position: absolute;
  top: 50%;
  right: 15px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #ddd9e5;
  border-radius: 50%;
  color: #6c5fb0;
  background: white;
  transform: translateY(-50%);
}
.booking-multi-services .choice-card.active > i {
  color: white;
  border-color: #7462bd;
  background: #7462bd;
}
.booking-multi-services .choice-card > i .icon {
  width: 15px;
  height: 15px;
}

/* Production interaction polish: no clipped selections, compact booking cards */
.tryon-color-scroll,
.tryon-style-scroll {
  padding: 7px 7px 11px;
  scroll-padding-inline: 7px;
}

.tryon-inspiration-card.active,
.tryon-color-choice.active {
  outline: 0;
  box-shadow:
    inset 0 0 0 2px var(--accent-strong),
    0 7px 18px rgba(88, 68, 145, 0.1);
}

.tryon-catalog-title {
  min-height: 42px;
}
.tryon-catalog-title > div > small {
  display: none;
}
.tryon-audience-switch {
  border: 0;
  border-radius: 8px;
  padding: 3px;
  background: #efedf3;
}
.tryon-audience-switch button {
  min-width: 96px;
  min-height: 32px;
  border-radius: 6px;
  padding-inline: 11px;
  font-size: 0.72rem;
}
.tryon-audience-switch button.active {
  box-shadow: 0 1px 4px rgba(45, 37, 62, 0.08);
}
.tryon-color-browser {
  gap: 10px;
  padding: 12px;
}
.tryon-color-category {
  gap: 6px;
}
.tryon-color-category + .tryon-color-category,
.tryon-style-row + .tryon-style-row {
  padding-top: 10px;
}
.tryon-style-groups {
  gap: 12px;
}
.tryon-custom-panel.always-open {
  gap: 10px;
  padding: 14px;
}
.tryon-custom-fields {
  gap: 10px;
}
.tryon-custom-fields textarea {
  min-height: 62px;
}

.booking-stylists {
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  padding: 5px;
}

.booking-stylists .stylist-card {
  position: relative;
  align-content: start;
  min-height: 0;
  gap: 8px;
  border-radius: 10px;
  padding: 14px;
}

.booking-stylists .stylist-card.selectable.active {
  outline: 0;
  border-color: var(--accent-strong);
  box-shadow:
    inset 0 0 0 1px var(--accent-strong),
    0 8px 20px rgba(82, 63, 138, 0.1);
}

.booking-stylists .stylist-card h3,
.booking-stylists .stylist-card p {
  margin: 0;
}
.booking-stylists .stylist-card .tag-row {
  gap: 5px;
}
.booking-stylists .stylist-card > strong {
  font-size: 0.76rem;
}

body.booking-workspace-mode .booking-title-bar h1 {
  font-size: clamp(1.65rem, 2.4vw, 2.2rem);
}
body.booking-workspace-mode .booking-main .stepper button {
  min-height: 38px;
}
body.booking-workspace-mode .booking-summary {
  border-radius: 12px;
  padding: 18px;
}

.booking-tryon-unified-head {
  display: grid !important;
  grid-template-columns: minmax(160px, 0.5fr) minmax(360px, 1fr) auto;
  align-items: center !important;
  gap: 14px !important;
  border: 1px solid #e3e0e9;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  background: #f7f5fa !important;
}

.booking-tryon-unified-head .tryon-stepper {
  min-width: 0;
}
.booking-tryon-unified-head .tryon-stepper button {
  min-height: 34px;
}
.booking-tryon-unified-head .tryon-stepper button span {
  width: 20px;
  height: 20px;
  font-size: 0.68rem;
}
.booking-tryon-unified-head .tryon-stepper button strong {
  font-size: 0.72rem;
}
.booking-tryon-embedded > .tryon-stage {
  min-height: 0;
  overflow: visible;
  padding: 14px;
}
.booking-tryon-embedded .tryon-footer {
  position: sticky;
  z-index: 12;
  bottom: 0;
  border-top: 1px solid #e5e2e9;
  padding: 10px 0 2px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.booking-tryon-embedded .tryon-ai-generation-stage {
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  min-height: 180px;
  border-radius: 10px;
  padding: 18px;
  box-shadow: none;
}
.booking-tryon-embedded .tryon-ai-visual {
  min-height: 92px;
}
.booking-tryon-embedded .tryon-ai-core {
  width: 82px;
}
.booking-tryon-embedded .tryon-ai-core span:nth-child(2) {
  --ring-inset: 22px;
}
.booking-tryon-embedded .tryon-ai-core span:nth-child(3) {
  --ring-inset: 32px;
}
.booking-tryon-embedded .tryon-ai-core .icon {
  width: 18px;
  height: 18px;
}
.booking-tryon-embedded .tryon-scan-grid {
  display: none;
}
.booking-tryon-embedded .tryon-ai-copy h2 {
  margin: 3px 0 5px;
  font-size: 1.45rem;
  line-height: 1.05;
}
.booking-tryon-embedded .tryon-ai-copy span {
  font-size: 0.78rem;
}
.booking-tryon-embedded .tryon-ai-pipeline {
  grid-column: 1 / -1;
  gap: 6px;
}
.booking-tryon-embedded .tryon-ai-pipeline span {
  padding: 8px 9px;
  font-size: 0.7rem;
}

.tryon-audience-switch {
  border-radius: 6px !important;
}
.tryon-audience-switch button {
  border-radius: 4px !important;
}
.tryon-color-scroll,
.tryon-style-scroll {
  touch-action: pan-x pan-y;
  overscroll-behavior-inline: contain;
  overscroll-behavior-block: auto;
}

.booking-summary-salon {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #e6e4e9;
  padding-bottom: 14px;
}
.booking-summary-salon img {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  object-fit: cover;
}
.booking-summary-salon > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.booking-summary-salon strong {
  overflow: hidden;
  color: #29252e;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.booking-summary-salon span {
  color: #51458e;
  font-size: 0.72rem;
  font-weight: 800;
}
.booking-summary-salon small {
  overflow: hidden;
  color: #85808a;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.booking-summary-schedule {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid #e6e4e9;
  padding: 13px 0;
}
.booking-summary-schedule > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #39343e;
  font-size: 0.8rem;
  font-weight: 750;
}
.booking-summary-schedule .icon {
  width: 17px;
  height: 17px;
}
.booking-summary-total {
  margin-top: 5px;
  border-top: 1px solid #dedbe3;
  padding-top: 14px !important;
}
.booking-summary-total span,
.booking-summary-total strong {
  color: #242029 !important;
  font-size: 0.88rem;
  font-weight: 900;
}

/* Compact embedded Try-on */
.booking-tryon-embedded .tryon-step-panel {
  gap: 10px;
}
.booking-tryon-embedded .section-head h2 {
  font-size: 1.2rem;
}
.booking-tryon-embedded .tryon-inspiration-panel {
  gap: 10px;
  padding: 12px;
}
.booking-tryon-embedded .tryon-color-browser {
  gap: 7px;
  padding: 9px;
}
.booking-tryon-embedded .tryon-browser-heading small,
.booking-tryon-embedded .tryon-row-heading small,
.booking-tryon-embedded .tryon-inspiration-card em {
  display: none;
}
.booking-tryon-embedded .tryon-color-category + .tryon-color-category,
.booking-tryon-embedded .tryon-style-row + .tryon-style-row {
  padding-top: 7px;
}
.booking-tryon-embedded .tryon-style-groups {
  gap: 8px;
}
.booking-tryon-embedded .tryon-style-scroll .tryon-inspiration-card {
  flex-basis: 156px;
  min-height: 0;
  gap: 6px;
  padding: 8px;
}
.booking-tryon-embedded .tryon-character-frame {
  border-radius: 8px;
}
.booking-tryon-embedded .tryon-inspiration-card strong {
  font-size: 0.8rem;
}
.booking-tryon-embedded .tryon-inspiration-card small {
  font-size: 0.66rem;
}
.booking-tryon-embedded .tryon-family-pill {
  padding: 3px 6px;
  font-size: 0.58rem;
}
.booking-tryon-embedded .tryon-color-scroll {
  padding-block: 3px 6px;
}
.booking-tryon-embedded .tryon-color-choice {
  min-height: 34px;
  grid-template-columns: 19px auto;
  padding-inline: 6px 9px;
  font-size: 0.68rem;
}
.booking-tryon-embedded .tryon-color-choice > i {
  width: 19px;
  height: 19px;
}
.booking-tryon-embedded .tryon-custom-panel.always-open {
  padding: 10px;
}
.booking-tryon-embedded .tryon-custom-fields textarea {
  min-height: 48px;
}

@media (max-width: 980px) {
  .booking-tryon-unified-head {
    grid-template-columns: 1fr auto;
  }
  .booking-tryon-unified-head .tryon-stepper {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.booking-step-content.has-embedded-tryon {
  min-height: 0;
}

.booking-tryon-embedded {
  display: grid;
  gap: 12px;
  min-width: 0;
  border-top: 1px solid #e7e4ec;
  padding-top: 12px;
}

.booking-tryon-embedded > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f5f2fa;
}

.booking-tryon-embedded > header > div {
  display: grid;
  gap: 2px;
}
.booking-tryon-embedded > header span {
  color: #817a8a;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}
.booking-tryon-embedded > header strong {
  color: #2d2933;
  font-size: 1rem;
}
.booking-tryon-embedded > header .icon {
  transform: rotate(180deg);
}
.booking-tryon-embedded .tryon-studio {
  width: 100%;
  max-width: none;
  gap: 12px;
}
.booking-tryon-embedded .tryon-hero {
  grid-template-columns: minmax(180px, 0.55fr) minmax(360px, 1fr);
  padding: 14px 16px;
}
.booking-tryon-embedded .tryon-hero h1 {
  font-size: 1.35rem;
}
.booking-tryon-embedded .tryon-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  gap: 12px;
  align-items: start;
}
.booking-tryon-embedded .tryon-stage {
  min-height: 0;
}
.booking-tryon-embedded .tryon-side-panel {
  position: sticky;
  top: 12px;
  max-height: calc(100dvh - 170px);
}
.booking-tryon-embedded .tryon-step-panel {
  gap: 12px;
}

@media (max-width: 1180px) {
  .booking-tryon-embedded .tryon-workspace {
    grid-template-columns: 1fr;
  }
  .booking-tryon-embedded .tryon-side-panel {
    position: relative;
    top: auto;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .booking-tryon-embedded > header {
    align-items: stretch;
    flex-direction: column;
  }
  .booking-tryon-embedded .tryon-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .me-dashboard {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .me-rail-nav button {
    grid-template-columns: 18px auto auto;
    justify-content: start;
  }

  .me-booking-feature {
    grid-template-columns: 1fr;
  }

  .me-booking-feature > img {
    height: 150px;
    min-height: 150px;
  }

  .me-feature-date {
    min-height: 150px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 0;
  }

  .me-kpi {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    padding: 12px 10px;
  }

  .me-kpi > span {
    width: 32px;
    height: 32px;
  }

  .me-kpi strong {
    font-size: 0.9rem;
  }

  .me-kpi em {
    display: none;
  }

  .me-ai-empty-visual {
    grid-template-columns: 1fr;
  }

  .me-ai-empty-visual img {
    height: 180px;
  }

  .me-salon-row {
    grid-template-columns: 50px minmax(0, 1fr) auto;
  }

  .me-salon-row img {
    width: 50px;
    height: 50px;
  }

  .me-empty-state {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .me-empty-state > button {
    grid-column: 2;
    justify-self: start;
  }

  .me-dashboard .customer-appointment-row {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .me-dashboard .appointment-row-actions {
    grid-column: 2;
    grid-template-columns: auto auto;
    justify-content: start;
    justify-items: start;
  }

  .me-settings-profile {
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 18px;
  }

  .settings-photo-control {
    width: 56px;
    height: 56px;
  }

  .settings-photo-button {
    grid-column: 2;
    justify-self: start;
  }

  .me-settings-panel > .me-section-heading,
  .me-settings-group {
    padding: 20px 18px;
  }

  .me-settings-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 16px 18px;
  }

  .me-settings-logout {
    margin-right: 0;
  }

  .me-settings-footer button {
    width: 100%;
  }

  .me-account-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .me-account-actions > button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}

/* Production responsive and booking flow hardening */
.booking-summary {
  position: sticky;
  top: 92px;
}

.booking-progress-caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(126, 104, 196, 0.12);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: linear-gradient(
    135deg,
    rgba(242, 236, 250, 0.72),
    rgba(232, 247, 241, 0.58)
  );
}

.booking-progress-caption > span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  color: var(--accent-strong);
  background: white;
  font-size: 0.76rem;
  font-weight: 850;
  white-space: nowrap;
}

.booking-progress-caption > div {
  display: grid;
  gap: 2px;
}

.booking-progress-caption small {
  color: var(--muted);
  line-height: 1.35;
}

.booking-step-content {
  min-width: 0;
  scroll-margin-top: 110px;
  outline: none;
}

.booking-step-content.is-forward {
  animation: bookingStepForward 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.booking-step-content.is-back {
  animation: bookingStepBack 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.booking-controls {
  border-top: 1px solid rgba(126, 104, 196, 0.1);
  padding-top: 16px;
}

.stepper button {
  min-width: 0;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.stepper button strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stepper button.locked,
.stepper button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.stepper button.done:hover {
  border-color: rgba(126, 104, 196, 0.42);
  transform: translateY(-1px);
}

.stepper span .icon {
  width: 14px;
  height: 14px;
}

@keyframes bookingStepForward {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bookingStepBack {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 1320px) {
  .customer-topbar .top-actions [data-action="logout"],
  .customer-topbar .top-actions [data-route="/pro"] {
    display: none;
  }

  .customer-topbar .user-chip {
    padding-right: 6px;
  }

  .customer-topbar .user-chip > span {
    display: none;
  }
}

@media (max-width: 1180px) {
  .booking-summary {
    position: static;
  }

  .discover-page .customer-main-grid {
    gap: 14px;
  }

  .discover-page .visual-panel {
    width: 100%;
    min-height: 0;
    max-height: 430px;
    aspect-ratio: 16 / 7;
  }

  .discover-page .visual-panel img {
    display: block;
    height: 100%;
  }

  .booking-reference-preview img {
    height: clamp(250px, 42vw, 340px);
  }
}

@media (max-width: 940px) {
  .salon-map-directory {
    height: auto;
    min-height: 0;
    align-items: start;
  }

  .customer-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 14px;
    padding-block: 10px;
    background: rgba(251, 249, 255, 0.9);
    border-bottom: 1px solid rgba(126, 104, 196, 0.08);
  }

  .customer-topbar .brand {
    min-width: 0;
  }

  .customer-topbar .brand small {
    display: none;
  }

  .customer-topbar .primary-nav {
    grid-column: 1 / -1;
    order: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
  }

  .customer-topbar .top-actions {
    width: auto;
    margin-left: 0;
    flex-wrap: nowrap;
  }

  .customer-topbar .top-actions [data-action="logout"],
  .customer-topbar .top-actions [data-route="/pro"] {
    display: none;
  }

  .customer-topbar .user-chip {
    padding-right: 6px;
  }

  .customer-topbar .user-chip > span {
    display: none;
  }

  .stepper {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
  }

  .stepper button {
    min-height: 60px;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 7px 5px;
    text-align: center;
    white-space: normal;
  }

  .stepper button strong {
    font-size: 0.7rem;
    line-height: 1.15;
    white-space: normal;
  }

  .choice-grid,
  .booking-stylists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-time-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .directory-map-panel,
  .salon-directory-panel {
    height: auto;
  }

  .directory-map-panel {
    position: relative;
    top: auto;
    height: 380px;
    min-height: 380px;
  }
}

@media (max-width: 720px) {
  .customer-topbar {
    width: calc(100% - 20px);
  }

  .customer-topbar .top-actions {
    display: flex;
    width: auto;
    justify-content: flex-end;
  }

  .customer-topbar .top-actions .user-chip,
  .customer-topbar .top-actions [data-action="logout"],
  .customer-topbar .top-actions [data-route="/me"],
  .customer-topbar .top-actions [data-route="/pro"] {
    display: none;
  }

  .customer-topbar .top-actions > [data-route="/salons"] {
    display: inline-flex;
    width: auto;
    min-width: 92px;
    min-height: 42px;
    padding-inline: 13px;
    font-size: 0.82rem;
  }

  .discover-page .visual-panel {
    max-height: 360px;
    aspect-ratio: 16 / 10;
  }

  .directory-map-panel {
    height: 320px;
    min-height: 320px;
  }

  .choice-grid,
  .booking-stylists {
    grid-template-columns: 1fr;
  }

  .booking-time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-progress-caption {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .booking-progress-caption > span {
    justify-self: start;
  }

  .booking-reference-heading,
  .booking-calendar-head,
  .slot-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .booking-controls {
    position: sticky;
    z-index: 12;
    bottom: 8px;
    margin: 0 -6px -8px;
    border: 1px solid rgba(126, 104, 196, 0.14);
    border-radius: var(--radius-sm);
    padding: 10px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 36px rgba(37, 25, 64, 0.14);
    backdrop-filter: blur(16px);
  }

  .booking-controls > button {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .customer-topbar .brand-wordmark {
    width: 108px;
  }

  .customer-topbar .primary-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 4px;
  }

  .customer-topbar .nav-link {
    min-height: 42px;
    gap: 4px;
    padding: 0 4px;
    font-size: 0.72rem;
  }

  .customer-topbar .nav-link .icon {
    width: 15px;
    height: 15px;
  }

  .stepper button {
    min-height: 48px;
    padding: 5px 2px;
  }

  .stepper button strong {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .stepper span {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  .booking-reference-preview img {
    height: clamp(220px, 72vw, 300px);
  }

  .booking-time-grid {
    grid-template-columns: 1fr;
  }

  .directory-map-panel {
    height: 280px;
    min-height: 280px;
  }
}

/* Fixed customer workspaces */
body.salon-directory-mode,
body.tryon-workspace-mode {
  overflow: hidden;
}

body.salon-directory-mode .customer-shell,
body.tryon-workspace-mode .customer-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body.salon-directory-mode .customer-footer,
body.tryon-workspace-mode .customer-footer {
  display: none;
}

body.salon-directory-mode .page-wrap,
body.tryon-workspace-mode .page-wrap {
  width: calc(100% - 48px);
  height: 100%;
  min-height: 0;
  padding: 10px 0 12px;
  overflow: hidden;
}

body.salon-directory-mode .salon-directory-page {
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.salon-directory-mode .salon-map-directory {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.salon-directory-mode .directory-map-panel {
  position: relative;
  top: auto;
  height: 100%;
  min-height: 0;
}

body.salon-directory-mode .salon-directory-panel {
  height: 100%;
  min-height: 0;
  padding-bottom: 10px;
}

body.salon-directory-mode .directory-list {
  height: auto;
  min-height: 0;
  padding-bottom: 24px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

body.tryon-workspace-mode .tryon-studio {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.tryon-workspace-mode .tryon-hero {
  grid-template-columns: minmax(220px, 1fr) minmax(360px, 520px);
  gap: 14px;
  padding: 14px 18px;
}

body.tryon-workspace-mode .tryon-hero-copy {
  gap: 3px;
}

body.tryon-workspace-mode .tryon-hero h1 {
  font-size: clamp(1.45rem, 2vw, 2rem);
}

body.tryon-workspace-mode .tryon-workspace {
  height: 100%;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
}

body.tryon-workspace-mode .tryon-stage,
body.tryon-workspace-mode .tryon-side-panel {
  position: relative;
  top: auto;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.tryon-workspace-mode .tryon-stage {
  padding: 18px;
}

body.tryon-workspace-mode .tryon-side-panel {
  align-content: start;
  gap: 12px;
  padding: 16px;
}

body.tryon-workspace-mode .tryon-step-panel {
  gap: 14px;
  min-height: 100%;
}

body.tryon-workspace-mode .tryon-photo-grid {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 290px);
  gap: 12px;
}

body.tryon-workspace-mode .tryon-photo-preview img {
  height: min(48dvh, 460px);
  min-height: 300px;
}

.tryon-photo-placeholder {
  display: grid;
  height: min(48dvh, 460px);
  min-height: 300px;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--text);
  text-align: center;
}

.tryon-photo-placeholder .icon {
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
  color: var(--accent-strong);
}

.tryon-photo-placeholder strong {
  font-size: 1.08rem;
}

.tryon-photo-placeholder span {
  color: var(--muted);
  font-size: 0.84rem;
}

body.tryon-workspace-mode .tryon-capture-card {
  min-height: 92px;
  gap: 5px;
  padding: 14px;
}

.tryon-photo-note {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--muted);
  background: rgba(242, 236, 250, 0.62);
  font-size: 0.82rem;
  line-height: 1.35;
}

.tryon-photo-note .icon {
  color: var(--accent-strong);
}

body.tryon-workspace-mode .tryon-footer {
  position: sticky;
  z-index: 5;
  bottom: -18px;
  margin: auto -18px -18px;
  border-top: 1px solid rgba(126, 104, 196, 0.1);
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
}

.tryon-side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tryon-side-header > div {
  display: grid;
  gap: 2px;
}

.tryon-side-header > div > span,
.tryon-side-photo-card span,
.tryon-side-facts span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.tryon-side-header h2 {
  font-size: 1.25rem;
}

.tryon-side-photo-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(126, 104, 196, 0.12);
  border-radius: var(--radius-md);
  padding: 9px;
  background: white;
}

.tryon-side-photo-card img {
  width: 86px;
  height: 104px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: #f7f4fb;
}

.tryon-side-photo-card > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.tryon-side-photo-card strong,
.tryon-side-photo-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tryon-side-photo-card small {
  color: var(--muted);
}

.tryon-photo-checklist {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tryon-photo-checklist li {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(126, 104, 196, 0.1);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.8);
  font-weight: 760;
}

.tryon-photo-checklist .icon {
  color: #2d8d70;
}

.tryon-side-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.tryon-side-facts > div {
  display: grid;
  gap: 3px;
  border-radius: var(--radius-sm);
  padding: 10px;
  background: #f7f4fb;
}

.tryon-side-facts strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tryon-side-next {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 9px;
  border-radius: var(--radius-sm);
  padding: 0 12px;
  color: var(--accent-strong);
  background: linear-gradient(
    135deg,
    rgba(242, 236, 250, 0.82),
    rgba(232, 247, 241, 0.78)
  );
  font-size: 0.84rem;
  font-weight: 820;
}

.tryon-side-next .icon {
  width: 16px;
  height: 16px;
}

body.tryon-workspace-mode .tryon-gender-card {
  min-height: 68px;
  padding: 14px;
}

body.tryon-workspace-mode .tryon-filter-panel {
  gap: 10px;
  padding: 10px;
}

body.tryon-workspace-mode .tryon-color-matrix {
  gap: 8px;
}

body.tryon-workspace-mode .tryon-color-family {
  gap: 6px;
  padding: 9px;
}

body.tryon-workspace-mode .tryon-inspiration-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

body.tryon-workspace-mode .tryon-inspiration-card {
  min-height: 0;
  gap: 7px;
  padding: 9px;
}

body.tryon-workspace-mode .tryon-inspiration-card em {
  display: none;
}

.tryon-custom-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 850;
}

.tryon-custom-panel summary span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.tryon-custom-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 12px;
}

@media (max-width: 940px) {
  body.salon-directory-mode .directory-map-panel {
    display: none;
  }

  body.salon-directory-mode .salon-map-directory {
    grid-template-columns: minmax(0, 1fr);
  }

  body.tryon-workspace-mode .tryon-side-panel {
    display: none;
  }

  body.tryon-workspace-mode .tryon-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 641px) and (max-width: 940px) {
  body.tryon-workspace-mode .tryon-hero {
    grid-template-columns: minmax(180px, 0.7fr) minmax(360px, 1.3fr);
  }
}

@media (max-width: 720px) {
  body.salon-directory-mode .page-wrap,
  body.tryon-workspace-mode .page-wrap {
    width: calc(100% - 20px);
    padding-top: 8px;
  }

  body.tryon-workspace-mode .tryon-photo-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.tryon-workspace-mode .tryon-photo-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.tryon-workspace-mode .tryon-photo-note {
    grid-column: 1 / -1;
  }

  body.tryon-workspace-mode .tryon-photo-preview img {
    height: min(38dvh, 340px);
    min-height: 230px;
  }

  body.tryon-workspace-mode .tryon-photo-placeholder {
    height: min(38dvh, 340px);
    min-height: 230px;
  }

  .tryon-custom-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.tryon-workspace-mode .tryon-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 12px;
  }

  body.tryon-workspace-mode .tryon-hero-copy {
    display: none;
  }

  body.tryon-workspace-mode .tryon-stage {
    padding: 14px;
  }

  body.tryon-workspace-mode .tryon-footer {
    bottom: -14px;
    margin: auto -14px -14px;
    padding: 10px 14px;
  }

  body.tryon-workspace-mode .tryon-capture-card {
    min-height: 82px;
    padding: 11px;
  }
}

/* v22 final viewport guards */
body.me-workspace-mode {
  overflow: hidden;
}
body.me-workspace-mode .me-dashboard {
  height: 100%;
  min-height: 0;
}
body.me-workspace-mode .me-workspace {
  min-height: 0;
  overflow-y: auto;
}
body.tryon-workspace-mode .tryon-step-panel:has(.tryon-salon-choice) {
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}
body.tryon-workspace-mode .tryon-salon-choice {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}
body.tryon-workspace-mode .tryon-salon-match-layout {
  height: 100%;
  min-height: 0;
}
body.tryon-workspace-mode .tryon-salon-match-list {
  height: 100%;
  max-height: none;
  overflow-y: auto;
}
body.tryon-workspace-mode .tryon-salon-match-layout .directory-map-panel {
  height: 100%;
  min-height: 0;
}

/* Absolute last-mile responsive overrides. */
.directory-view-list .directory-map-panel {
  display: none !important;
}
.directory-view-map .salon-directory-panel {
  display: none !important;
}
.directory-view-map .directory-map-panel,
.directory-view-split .directory-map-panel {
  display: block !important;
}
.directory-view-map .salon-map-directory {
  grid-template-columns: minmax(0, 1fr) !important;
}
@media (max-width: 768px) {
  body.me-workspace-mode,
  body.tryon-workspace-mode,
  body.booking-workspace-mode {
    overflow: auto;
  }
  body.salon-directory-mode .directory-view-map .directory-map-panel,
  body.salon-directory-mode .directory-view-split .directory-map-panel {
    display: block !important;
    min-height: 340px;
  }
  body.booking-workspace-mode .booking-controls {
    position: sticky;
    bottom: calc(82px + env(safe-area-inset-bottom));
    z-index: 160;
    padding: 9px;
  }
  body.booking-workspace-mode .booking-controls > button {
    min-height: 44px;
  }
  body.booking-workspace-mode .booking-step-content {
    padding-bottom: 18px;
  }
}
.customer-notification-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 82px;
  padding: 16px 18px;
  border: 1px solid #e5e3e9;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(45, 37, 66, 0.035);
}

.customer-notification-row.is-unread {
  border-color: #d8cdec;
  background: #fdfbff;
  box-shadow:
    inset 3px 0 #7154b5,
    0 8px 24px rgba(45, 37, 66, 0.055);
}

.me-dashboard
  .customer-notification-list
  > .customer-notification-row:first-child {
  border-top: 1px solid #e5e3e9;
}

.customer-notification-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #4d3a8d;
  background: var(--accent-soft);
}

.customer-notification-icon .icon {
  width: 17px;
  height: 17px;
}

.customer-notification-copy {
  min-width: 0;
}

.customer-notification-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.customer-notification-title strong {
  overflow: hidden;
  color: #2d2a32;
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-notification-title > span:not(.status-badge) {
  border-radius: 999px;
  padding: 4px 8px;
  color: #6c617f;
  background: #f4f1f8;
  font-size: 0.66rem;
  font-weight: 780;
}

.customer-notification-new {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 7px;
  color: #fff;
  background: #d64055;
  font-size: 0.62rem;
  line-height: 1;
}

.customer-notification-row p {
  margin: 5px 0 0;
  color: #7d8088;
  font-size: 0.79rem;
  line-height: 1.4;
}

.customer-notification-action {
  min-width: 72px;
}

.me-notifications-section {
  gap: 20px;
}

.customer-notification-list {
  gap: 12px;
}
@media (max-width: 420px) {
  .customer-notification-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .customer-notification-action {
    grid-column: 1 / -1;
    width: 100%;
  }
}
@media (max-width: 768px) {
  body.customer-mode button,
  body.customer-mode .outline-button,
  body.customer-mode .solid-button,
  body.customer-mode .ghost-button,
  body.customer-mode .icon-button {
    min-width: 44px;
    min-height: 44px !important;
  }
}

/* Final customer viewport guarantees (keep last in the cascade). */
body.customer-mode {
  background: #f8f8f6;
}
.directory-view-list .directory-map-panel {
  display: none !important;
}
.directory-view-list .salon-map-directory,
.directory-view-map .salon-map-directory {
  grid-template-columns: minmax(0, 1fr) !important;
}
.directory-view-map .salon-directory-panel {
  display: none !important;
}
.directory-view-map .directory-map-panel {
  display: block !important;
  min-height: 640px;
}
.directory-view-split .directory-map-panel {
  display: block;
}

@media (max-width: 768px) {
  body.me-workspace-mode,
  body.tryon-workspace-mode,
  body.booking-workspace-mode {
    overflow: auto;
  }
  body.salon-directory-mode .directory-view-map .directory-map-panel,
  body.salon-directory-mode .directory-view-split .directory-map-panel {
    display: block !important;
  }
  .directory-view-map .directory-map-panel,
  .directory-view-split .directory-map-panel {
    min-height: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Customer experience system — restrained editorial marketplace */
:root {
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --bg: #f8f8f6;
  --surface: #ffffff;
  --text: #24212b;
  --muted: #686270;
  --line: #e2dfe5;
  --accent-strong: #67549a;
  --accent-soft: #f3e8ff;
  --mint: #dff3ea;
  --mint-strong: #357861;
  --shadow-soft: 0 12px 36px rgba(36, 33, 43, 0.08);
}

html {
  scroll-behavior: auto;
}
body.customer-mode {
  background: var(--bg);
}
.customer-shell {
  min-width: 0;
  overflow: clip;
}
.page-wrap {
  width: min(100%, 1540px);
  margin-inline: auto;
}
.panel,
.salon-card,
.choice-card,
.tryon-result-detail-card,
.booking-service-time-card {
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(36, 33, 43, 0.03);
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: 12px 16px;
  border-radius: 10px;
  color: #fff;
  background: var(--accent-strong);
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: translateY(0);
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:where(
    button,
    a,
    input,
    select,
    textarea,
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
  outline: 3px solid #6750b8;
  outline-offset: 3px;
}

:where(input, textarea) {
  caret-color: #6750b8;
}

/* Route changes move focus to the main region for screen-reader context. The
   region is not an interactive control, so suppress the browser's native
   viewport-sized focus frame while keeping focus rings on real controls. */
#main-content[tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}
button,
.solid-button,
.outline-button,
.ghost-button,
.icon-button,
input,
select {
  min-height: 44px;
}
textarea {
  min-height: 108px;
}
input,
select,
textarea {
  border-color: #cdc8d1;
  border-radius: 12px;
  background: #fff;
  color: var(--text);
}
input::placeholder,
textarea::placeholder {
  color: #716b77;
  opacity: 1;
}
.solid-button.customer {
  background: linear-gradient(135deg, #67549a, #7d6aa8);
  box-shadow: none;
}
.solid-button.customer:hover {
  background: linear-gradient(135deg, #67549a, #67549a);
}
.outline-button.customer {
  border-color: #b9b2c2;
  background: #fff;
  color: #3b3446;
}
.ghost-button:hover {
  background: #efedf1;
}
.icon-button {
  min-width: 44px;
}
.danger {
  border-color: #d9a6a6 !important;
  color: #922f36 !important;
}
.inline-error {
  color: #9e2530;
  font-weight: 650;
}

.customer-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  border-bottom: 1px solid rgba(226, 223, 229, 0.9);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
}
.customer-topbar .brand-copy small {
  color: var(--muted);
}
.customer-topbar .primary-nav {
  min-width: 0;
}
.customer-topbar .primary-nav a {
  min-height: 44px;
  border-radius: 999px;
}
.mobile-tabbar {
  display: none;
}

.discovery-toolbar {
  margin-block: 16px;
}
.discovery-toolbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.discovery-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 700;
}
.discovery-sort select {
  padding-inline: 12px 34px;
}
.discovery-toolbar-row > .ghost-button {
  margin-left: auto;
}
.discovery-filter-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.discovery-filter-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}
.directory-view-switch {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.directory-view-switch button {
  min-height: 36px;
  padding-inline: 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
}
.directory-view-switch button.active {
  background: var(--accent-soft);
  color: #4d3a8d;
  font-weight: 750;
}
.directory-view-list .salon-map-directory {
  grid-template-columns: minmax(0, 1fr);
}
.directory-view-list .directory-map-panel {
  display: none;
}
.directory-view-map .salon-map-directory {
  grid-template-columns: minmax(0, 1fr);
}
.directory-view-map .salon-directory-panel {
  display: none;
}
.directory-view-map .directory-map-panel {
  min-height: 640px;
}
.directory-salon-row {
  overflow: visible;
}
.directory-salon-thumb {
  border-radius: 14px;
}
.salon-row-save.active,
.salon-site-actions .icon-button.active {
  border-color: #745fc1;
  color: #5d47ac;
  background: var(--accent-soft);
}

.salon-site {
  background: #fbfbf9;
  color: #24212b;
}
.salon-site-nav {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(18px);
}
.salon-site-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-hero {
  background: #f2f0ed !important;
}
.site-hero-copy h1 {
  max-width: 13ch;
  letter-spacing: -0.045em;
}
.site-hero-media {
  position: relative;
}
.media-provenance,
.site-gallery-grid figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 6px 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(25, 23, 28, 0.8);
  font-size: 0.7rem;
  font-weight: 750;
}
.site-gallery-grid figure {
  position: relative;
}
.site-gallery-grid figcaption {
  right: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
}
.service-policy {
  display: block;
  margin-top: 8px;
  color: #5f5867;
  line-height: 1.4;
}
.site-review-grid article small {
  display: block;
  margin-top: 5px;
  color: var(--mint-strong);
  font-weight: 750;
}
.site-no-times {
  display: block;
  max-width: 42ch;
  color: var(--muted);
  line-height: 1.5;
}

.tryon-reference-photo {
  background-image: var(--ref-sheet);
  background-size: 400% 400%;
  background-position: calc(var(--ref-x) * 33.333%) calc(var(--ref-y) * 33.333%);
}
.tryon-result-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tryon-regenerate-options {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.tryon-regenerate-options > span {
  margin-right: auto;
  font-weight: 750;
}
.tryon-consultation-disclaimer {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--mint-strong);
  color: #514b58;
  background: #f3faf7;
  line-height: 1.5;
}

.booking-step-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.booking-step-intro > div {
  display: grid;
  gap: 4px;
}
.booking-time-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-block: 12px 16px;
}
.booking-time-shortcut {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: center;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid #b9acd9;
  border-radius: 13px;
  color: #40346e;
  background: #f7f4fd;
  text-align: left;
}
.booking-time-shortcut strong {
  grid-row: 1 / 3;
  grid-column: 2;
}
.booking-time-shortcut small {
  color: var(--muted);
}
.booking-time-shortcut.active {
  color: #fff;
  background: var(--accent-strong);
}
.booking-time-periods {
  display: grid;
  gap: 16px;
}
.booking-time-periods section h4 {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.payment-amount {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-block: 14px;
  padding-block: 14px;
  border-block: 1px solid var(--line);
}
.payment-amount strong {
  font-size: 1.8rem;
}
.sandbox-notice {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid #c7b6e6;
  border-radius: 14px;
  color: #43366f;
  background: #f5f1fc;
  line-height: 1.5;
}
.booking-payment-element {
  min-height: 60px;
  margin-block: 14px;
}

.confirmation-page {
  width: min(1100px, calc(100% - 32px));
  margin: 40px auto 80px;
}
.confirmation-hero {
  padding: clamp(28px, 5vw, 58px);
  text-align: center;
}
.confirmation-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  color: #fff;
  background: var(--mint-strong);
}
.confirmation-hero h1 {
  margin: 8px 0;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.05em;
}
.confirmation-hero > p {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.6;
}
.confirmation-number {
  display: inline-grid;
  gap: 4px;
  margin-top: 22px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #f1eff3;
}
.confirmation-number span {
  color: var(--muted);
  font-size: 0.75rem;
}
.confirmation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: 18px;
  margin-top: 18px;
}
.confirmation-details,
.confirmation-prep {
  padding: 24px;
}
.confirmation-salon {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.confirmation-salon img {
  width: 84px;
  height: 84px;
  border-radius: 14px;
  object-fit: cover;
}
.confirmation-salon h2,
.confirmation-salon p {
  margin: 0;
}
.confirmation-salon p {
  margin-top: 5px;
  color: var(--muted);
}
.confirmation-details dl {
  display: grid;
  margin-block: 22px;
  border-top: 1px solid var(--line);
}
.confirmation-details dl > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding-block: 13px;
  border-bottom: 1px solid var(--line);
}
.confirmation-details dt {
  color: var(--muted);
}
.confirmation-details dd {
  margin: 0;
  font-weight: 700;
}
.confirmation-details .appointment-outside-deposit {
  margin-bottom: 18px;
}
.confirmation-prep ul {
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.6;
}
.confirmation-prep .full {
  margin-top: 10px;
}
.appointment-lifecycle-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.appointment-change-form,
.appointment-review-form,
.appointment-message-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fafafa;
}
.appointment-change-form h3,
.appointment-review-form h3,
.appointment-message-form h3,
.appointment-change-form p {
  margin: 0;
}
.appointment-change-form label,
.appointment-review-form label,
.appointment-message-form label {
  display: grid;
  gap: 7px;
}

@media (max-width: 1100px) {
  .customer-topbar .brand-copy small,
  .customer-topbar .top-actions .ghost-button {
    display: none;
  }
  .discovery-filter-panel {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

@media (max-width: 768px) {
  html {
    scroll-padding-bottom: 88px;
  }
  body.customer-mode {
    padding-bottom: 76px;
  }
  body.me-workspace-mode,
  body.tryon-workspace-mode,
  body.booking-workspace-mode {
    overflow: auto;
  }
  .customer-topbar {
    min-height: 60px;
    padding: 8px 14px;
  }
  .customer-topbar .brand {
    min-width: 0;
  }
  .customer-topbar .brand-wordmark {
    max-width: 106px;
  }
  .customer-topbar .primary-nav,
  .customer-topbar .top-actions > .ghost-button,
  .customer-topbar .top-actions > .solid-button {
    display: none;
  }
  .customer-topbar .top-actions {
    margin-left: auto;
    min-width: 0;
  }
  .customer-topbar .top-actions > * {
    max-width: 132px;
  }
  .mobile-tabbar {
    position: fixed;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    z-index: 200;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 5px;
    border: 1px solid rgba(222, 218, 227, 0.95);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 32px rgba(36, 33, 43, 0.16);
    backdrop-filter: blur(18px);
  }
  .mobile-tabbar a {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 54px;
    padding: 4px;
    border-radius: 13px;
    color: #625d68;
    font-size: 0.68rem;
  }
  .mobile-tabbar a.active {
    color: #503c99;
    background: var(--accent-soft);
    font-weight: 750;
  }
  .mobile-tabbar svg {
    width: 19px;
    height: 19px;
  }
  .customer-footer {
    padding-bottom: 26px;
  }
  .discovery-toolbar-row {
    align-items: stretch;
  }
  .discovery-toolbar-row > .outline-button {
    flex: 1 1 auto;
  }
  .discovery-sort {
    flex: 1 1 auto;
    justify-content: flex-end;
  }
  .discovery-sort select {
    width: 100%;
  }
  .directory-view-switch {
    order: 3;
    width: 100%;
  }
  .directory-view-switch button {
    min-height: 44px;
  }
  .discovery-toolbar-row > .ghost-button {
    order: 4;
    width: 100%;
    margin-left: 0;
  }
  .discovery-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
  }
  .salon-map-directory {
    grid-template-columns: 1fr !important;
  }
  .directory-view-split .directory-map-panel {
    min-height: 340px;
  }
  .directory-view-split .salon-directory-panel {
    order: 2;
  }
  .directory-salon-row {
    grid-template-columns: 92px minmax(0, 1fr);
  }
  .directory-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 44px 1fr 1fr;
    width: 100%;
  }
  .salon-site-nav nav {
    display: none;
  }
  .salon-site-nav {
    padding-inline: 12px;
  }
  .salon-site-actions .icon-button {
    display: none;
  }
  .confirmation-grid {
    grid-template-columns: 1fr;
  }
  .booking-step-intro {
    align-items: stretch;
    flex-direction: column;
  }
  .booking-time-shortcuts {
    grid-template-columns: 1fr;
  }
  .tryon-before-after {
    gap: 8px;
  }
  .tryon-result-actions > * {
    flex: 1 1 140px;
  }
}

@media (max-width: 480px) {
  .page-wrap {
    min-width: 0;
  }
  .customer-topbar .brand-mark {
    width: 36px;
    height: 36px;
  }
  .customer-topbar .brand-wordmark {
    max-width: 88px;
  }
  .customer-topbar .top-actions {
    gap: 4px;
  }
  .customer-topbar .top-actions button {
    padding-inline: 8px;
  }
  .discovery-filter-panel {
    grid-template-columns: 1fr;
  }
  .directory-salon-row {
    grid-template-columns: 76px minmax(0, 1fr);
    padding: 10px;
  }
  .directory-salon-thumb {
    min-height: 102px;
  }
  .directory-salon-heading {
    gap: 5px;
  }
  .directory-salon-heading h3 {
    font-size: 0.95rem;
  }
  .directory-meta {
    display: grid;
    gap: 3px;
  }
  .directory-actions {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .directory-detail-button {
    grid-column: 1 / -1;
  }
  .site-hero {
    padding-inline: 16px !important;
  }
  .salon-site-book {
    padding-inline: 10px;
  }
  .tryon-before-after {
    grid-template-columns: 1fr;
  }
  .booking-layout {
    padding-inline: 8px;
  }
  .stepper {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .stepper > button {
    min-width: 76px;
  }
  .booking-controls,
  .booking-summary-action {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }
  .confirmation-page {
    width: min(100% - 16px, 1100px);
    margin-top: 16px;
  }
  .confirmation-hero,
  .confirmation-details,
  .confirmation-prep {
    padding: 18px;
  }
  .confirmation-details dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .confirmation-details .button-row > * {
    width: 100%;
  }
}

@media (max-width: 340px) {
  .customer-topbar .brand-copy {
    display: none;
  }
  .customer-topbar .top-actions {
    max-width: calc(100% - 44px);
  }
  .mobile-tabbar {
    right: 4px;
    left: 4px;
  }
  .mobile-tabbar a {
    font-size: 0.62rem;
  }
  .discovery-toolbar-row {
    display: grid;
    grid-template-columns: 1fr;
  }
  .discovery-sort {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .directory-actions {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .booking-layout {
    padding-inline: 4px;
  }
  .booking-main,
  .booking-summary {
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* v36 — compact, decision-first booking workspace */
body.booking-workspace-mode {
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(220, 209, 244, 0.34),
      transparent 28%
    ),
    radial-gradient(
      circle at 96% 4%,
      rgba(206, 241, 232, 0.32),
      transparent 25%
    ),
    #f7f6f8;
}

body.booking-workspace-mode .page-wrap {
  width: min(calc(100% - 32px), 1440px);
  padding: 18px 0;
}

body.booking-workspace-mode .booking-layout {
  grid-template-columns: minmax(0, 1fr) minmax(310px, 352px);
  gap: clamp(18px, 2.2vw, 30px);
  max-width: 1380px;
  margin: 0 auto;
}

body.booking-workspace-mode .booking-main.panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 13px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.booking-title-bar {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 2px;
}

.booking-title-bar > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

body.booking-workspace-mode .booking-title-bar h1 {
  margin: 0;
  font-size: clamp(1.65rem, 2.45vw, 2.35rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.booking-title-bar .eyebrow {
  margin: 0 0 3px;
  color: #7565b4;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.booking-title-bar > div > p:last-child {
  max-width: 620px;
  margin: 5px 0 0;
  color: #77727d;
  font-size: 0.8rem;
  line-height: 1.35;
}

.booking-title-bar > .status-badge {
  margin-left: auto;
}

.booking-edit-context {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(104, 82, 176, 0.2);
  border-radius: 14px;
  background: linear-gradient(
    105deg,
    rgba(240, 235, 253, 0.94),
    rgba(239, 250, 247, 0.92)
  );
}

.booking-edit-context > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: white;
  background: #6d58b5;
}

.booking-edit-context > span .icon {
  width: 18px;
  height: 18px;
}

.booking-edit-context > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.booking-edit-context strong {
  font-size: 0.88rem;
}

.booking-edit-context p,
.booking-edit-context time {
  margin: 0;
  color: #6f6977;
  font-size: 0.76rem;
}

.booking-edit-context time {
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .booking-edit-context {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .booking-edit-context > span {
    width: 34px;
    height: 34px;
  }

  .booking-edit-context time {
    grid-column: 2;
  }
}

.booking-header-back {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  margin-top: 17px;
  border: 1px solid #ddd9e2;
  border-radius: 50%;
  color: #4d4852;
  background: rgba(255, 255, 255, 0.88);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.booking-header-back:hover {
  border-color: #a99bcf;
  background: white;
  transform: translateX(-2px);
}

.booking-header-back .icon {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

body.booking-workspace-mode .booking-main .stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  overflow: visible;
  padding: 4px;
  border: 1px solid rgba(99, 84, 143, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
}

body.booking-workspace-mode .booking-main .stepper button {
  min-width: 0;
  min-height: 36px;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 9px;
  padding: 0 8px;
  color: #8a8590;
  background: transparent;
  font-size: 0.74rem;
  transition:
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

body.booking-workspace-mode .booking-main .stepper button.active {
  color: #57469a;
  background: white;
  box-shadow: 0 5px 16px rgba(58, 43, 93, 0.09);
}

body.booking-workspace-mode .booking-main .stepper button.done {
  color: #58525f;
  opacity: 1;
}

body.booking-workspace-mode .booking-main .stepper button.locked {
  opacity: 0.44;
}

body.booking-workspace-mode .booking-main .stepper span {
  width: 21px;
  height: 21px;
  min-width: 21px;
  color: #7567aa;
  background: #e9e5f3;
  font-size: 0.68rem;
}

body.booking-workspace-mode .booking-main .stepper button.active span,
body.booking-workspace-mode .booking-main .stepper button.done span {
  color: white;
  background: linear-gradient(145deg, #7867c6, #59bca8);
}

body.booking-workspace-mode .booking-step-content {
  width: 100%;
  height: fit-content;
  max-height: 100%;
  align-self: start;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(91, 74, 133, 0.12);
  border-radius: 16px;
  padding: clamp(16px, 2vw, 24px);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 34px rgba(39, 29, 62, 0.055);
  scrollbar-gutter: stable;
}

body.booking-workspace-mode .booking-step-content.is-forward {
  animation: bookingStageForward 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.booking-workspace-mode .booking-step-content.is-back {
  animation: bookingStageBack 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes bookingStageForward {
  from {
    opacity: 0;
    transform: translate3d(24px, 0, 0) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes bookingStageBack {
  from {
    opacity: 0;
    transform: translate3d(-24px, 0, 0) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.booking-service-head {
  align-items: center;
  margin-bottom: 12px;
}

.booking-service-head > div {
  display: grid;
  gap: 3px;
}

.booking-service-head > div > strong,
.booking-step-intro strong {
  color: #302b35;
  font-size: 0.88rem;
}

.booking-service-head > div > span,
.booking-step-intro span {
  color: #85808a;
  font-size: 0.73rem;
}

.booking-service-head label {
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
}

.booking-service-head select {
  min-height: 34px;
  border-radius: 9px;
}

.booking-multi-services {
  gap: 10px;
}

.booking-multi-services .choice-card {
  min-height: 108px;
  align-content: center;
  gap: 4px;
  border-radius: 12px;
  padding: 14px 50px 14px 15px;
  transition:
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease;
}

.booking-multi-services .choice-card:hover {
  border-color: rgba(111, 92, 176, 0.42);
  transform: translateY(-1px);
}

.booking-multi-services .choice-card.active {
  border-color: #7967c6;
  background: linear-gradient(135deg, #fbf9ff, #f2faf7);
  box-shadow:
    inset 0 0 0 1px #7967c6,
    0 8px 22px rgba(82, 63, 138, 0.08);
}

.booking-multi-services .choice-card span,
.booking-multi-services .choice-card small {
  font-size: 0.72rem;
}

.booking-multi-services .choice-card strong {
  font-size: 0.94rem;
}

.booking-multi-services .choice-card p {
  overflow: hidden;
  margin: 2px 0 0;
  font-size: 0.75rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-multi-services .choice-card > i {
  right: 13px;
  width: 27px;
  height: 27px;
}

.booking-step-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.booking-reference-heading {
  align-items: center;
  gap: 14px;
}

.booking-reference-heading > div:first-child {
  display: grid;
  gap: 3px;
}

.booking-reference-title {
  color: #302b35;
  font-size: 0.9rem;
}

.booking-reference-heading p {
  margin: 0;
  color: #85808a;
  font-size: 0.73rem;
}

.booking-full-tryon-launch {
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
}

.booking-full-tryon-visual {
  min-height: 220px;
  max-height: 250px;
}

.booking-full-tryon-visual img {
  object-position: center 22%;
}

.booking-full-tryon-launch > div:last-child {
  gap: 7px;
  padding: clamp(18px, 2.4vw, 28px);
}

.booking-full-tryon-launch h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
}

.booking-full-tryon-launch p {
  line-height: 1.42;
}

.booking-full-tryon-launch .solid-button {
  margin-top: 7px;
}

.booking-stylists {
  gap: 10px;
  padding: 1px;
}

.booking-stylists .stylist-card {
  gap: 6px;
  padding: 13px;
}

.calendar-picker {
  gap: 13px;
}

.booking-calendar-head h2,
.slot-section-head h3 {
  margin: 2px 0;
  font-size: 1.05rem;
}

.booking-calendar-head p,
.slot-section-head p {
  margin: 2px 0 0;
  font-size: 0.74rem;
}

.date-picker-field {
  grid-template-columns: auto;
  min-width: 168px;
  gap: 4px;
  font-size: 0.7rem;
}

.date-picker-field input {
  min-height: 38px;
}

.booking-date-carousel {
  gap: 7px;
}

.booking-date-controls .scroll-arrow {
  width: 34px;
  height: 34px;
}

.booking-date-strip {
  padding: 3px 3px 6px;
}

.booking-date-strip button {
  flex-basis: 86px;
  min-height: 58px;
  border-radius: 11px;
  padding: 8px 10px;
}

.booking-time-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.booking-time-grid button {
  min-height: 58px;
  border-radius: 11px;
  padding: 10px 12px;
}

.booking-time-grid button strong {
  font-size: 0.82rem;
}

.booking-time-grid button span {
  font-size: 0.68rem;
}

body.booking-workspace-mode .booking-controls {
  display: none;
}

body.booking-workspace-mode .booking-summary.panel {
  display: flex;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(82, 68, 117, 0.12);
  border-radius: 18px;
  padding: 0;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 42px rgba(38, 28, 61, 0.07);
}

.booking-summary-body {
  min-height: 0;
  overflow-y: auto;
  padding: 20px 20px 14px;
  overscroll-behavior: contain;
}

.booking-summary-salon {
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 15px;
}

.booking-summary-salon img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
}

.booking-summary-salon strong {
  font-size: 0.9rem;
}

.booking-summary-salon span,
.booking-summary-salon small {
  font-size: 0.68rem;
}

.booking-summary-schedule {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 0;
}

.booking-summary-schedule > div {
  gap: 6px;
  font-size: 0.72rem;
}

.booking-summary-schedule .icon {
  width: 15px;
  height: 15px;
}

.booking-summary-section {
  display: grid;
  gap: 6px;
  border-bottom: 1px solid #e9e7ec;
  padding: 13px 0;
}

.booking-summary-section-head,
.booking-summary-meta > div,
.booking-summary-price > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.booking-summary-section-head span,
.booking-summary-meta span,
.booking-summary-price span {
  color: #817c86;
  font-size: 0.74rem;
}

.booking-summary-section-head strong,
.booking-summary-meta strong {
  color: #36313b;
  font-size: 0.76rem;
}

.booking-summary-service {
  min-height: 32px;
  align-items: center;
  border-radius: 9px;
  padding: 7px 9px;
  font-size: 0.7rem;
}

.booking-summary-empty {
  margin: 3px 0 0;
  color: #96919a;
  font-size: 0.7rem;
}

.booking-summary-meta {
  display: grid;
  gap: 9px;
  border-bottom: 1px solid #e9e7ec;
  padding: 13px 0;
}

.booking-summary-price {
  display: grid;
  gap: 7px;
  padding: 14px 0 8px;
}

.booking-summary-price > div:first-child strong {
  color: #29242e;
  font-size: 0.94rem;
}

.booking-summary-price > div:last-child strong {
  color: #5e5099;
  font-size: 0.8rem;
}

.booking-summary .reference-mini {
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  padding: 8px;
}

.booking-summary .reference-mini img {
  width: 48px;
  height: 48px;
  aspect-ratio: 1;
  object-fit: cover;
}

.booking-summary .reference-mini span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.booking-summary .reference-mini small {
  color: #817b88;
  font-size: 0.64rem;
}

.booking-summary .reference-mini strong {
  overflow: hidden;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-summary .policy-note {
  margin: 12px 0 0;
  color: #8b8690;
  font-size: 0.68rem;
  line-height: 1.4;
}

.booking-summary-action {
  margin-top: auto;
  border-top: 1px solid #e8e6eb;
  padding: 14px 20px 18px;
  background: rgba(255, 255, 255, 0.96);
}

.booking-summary-action .solid-button {
  width: 100%;
  min-height: 46px;
  justify-content: center;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(80, 63, 140, 0.16);
}

.booking-summary-action .solid-button:disabled {
  box-shadow: none;
}

.confirm-step {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.receipt-card,
.payment-card {
  gap: 9px;
  border: 1px solid #e8e5ec;
  border-radius: 13px;
  padding: 16px;
  background: #fff;
}

.receipt-card h2,
.payment-card h3 {
  margin: 0 0 2px;
  font-size: 1rem;
}

.receipt-card .summary-line {
  padding: 8px 0;
  font-size: 0.74rem;
}

@media (max-width: 1080px) {
  body.booking-workspace-mode .booking-layout {
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 16px;
  }

  body.booking-workspace-mode .booking-main .stepper button {
    gap: 5px;
    padding-inline: 5px;
  }

  body.booking-workspace-mode .booking-main .stepper button strong {
    font-size: 0.68rem;
  }
}

@media (max-width: 900px) {
  body.booking-workspace-mode .page-wrap {
    width: min(calc(100% - 20px), 820px);
    padding: 12px 0;
  }

  body.booking-workspace-mode .booking-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.booking-workspace-mode .booking-summary {
    display: none !important;
  }

  body.booking-workspace-mode .booking-controls {
    display: flex;
    border: 1px solid rgba(91, 74, 133, 0.12);
    border-radius: 13px;
    padding: 9px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 28px rgba(39, 29, 62, 0.08);
  }

  body.booking-workspace-mode .booking-controls .solid-button {
    margin-left: auto;
  }
}

@media (max-width: 640px) {
  .booking-title-bar > div > p:last-child {
    display: none;
  }

  body.booking-workspace-mode .booking-title-bar h1 {
    font-size: 1.5rem;
  }

  .booking-header-back {
    margin-top: 14px;
  }

  body.booking-workspace-mode .booking-main .stepper button {
    min-height: 34px;
    padding: 0;
  }

  body.booking-workspace-mode .booking-main .stepper button strong {
    display: none;
  }

  body.booking-workspace-mode .booking-step-content {
    border-radius: 14px;
    padding: 14px;
  }

  .booking-service-head {
    align-items: stretch;
    flex-direction: column;
  }

  .booking-reference-heading {
    align-items: stretch;
  }

  .booking-full-tryon-launch {
    grid-template-columns: 1fr;
  }

  .booking-full-tryon-visual {
    min-height: 138px;
    max-height: 160px;
  }

  .booking-service-head label {
    justify-content: space-between;
  }

  .choice-grid,
  .booking-stylists,
  .confirm-step {
    grid-template-columns: 1fr;
  }

  .booking-multi-services .choice-card {
    min-height: 98px;
  }

  .booking-calendar-head,
  .slot-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .date-picker-field {
    min-width: 0;
  }

  .booking-time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.booking-workspace-mode .booking-controls > button {
    min-height: 42px;
    font-size: 0.76rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.booking-workspace-mode .booking-step-content.is-forward,
  body.booking-workspace-mode .booking-step-content.is-back {
    animation: none;
  }
}

.booking-reference-tabs {
  display: flex;
  width: max-content;
  gap: 4px;
  border-radius: 10px;
  padding: 4px;
  background: #f1f0f4;
}

.booking-reference-tabs button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 7px;
  padding: 0 13px;
  color: #77727f;
  background: transparent;
  font-weight: 800;
}

.booking-reference-tabs button.active {
  color: #51458e;
  background: white;
  box-shadow: 0 2px 8px rgba(38, 31, 58, 0.08);
}
.booking-reference-tabs button span {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #ece8f8;
  font-size: 0.65rem;
}
.booking-reference-tabs .icon {
  width: 14px;
  height: 14px;
}

.booking-create-reference {
  display: grid;
  grid-template-columns: minmax(230px, 0.58fr) minmax(0, 1.42fr);
  gap: 18px;
  min-height: 0;
}

.booking-create-photo,
.booking-create-options {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.booking-create-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  min-height: 250px;
  overflow: hidden;
  border: 1px solid #e5e2ec;
  border-radius: 12px;
  background: #f5f3f8;
}

.booking-create-preview img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
}
.booking-create-preview > div {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 20px;
  color: #756f7d;
  text-align: center;
}
.booking-create-preview > div .icon {
  width: 28px;
  height: 28px;
  color: #7563c0;
}
.booking-create-preview > div span {
  font-size: 0.75rem;
}
.booking-create-photo label {
  position: relative;
  overflow: hidden;
}
.booking-create-photo input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.booking-create-options > div {
  display: grid;
  gap: 7px;
}
.booking-field-label {
  color: #383440;
  font-size: 0.78rem;
  font-weight: 850;
}

.booking-create-styles,
.booking-create-colors {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 2px 7px;
  scrollbar-width: thin;
}

.booking-create-styles button {
  display: grid;
  flex: 0 0 150px;
  gap: 3px;
  border: 1px solid #e2dfeb;
  border-radius: 9px;
  padding: 10px;
  color: #37323f;
  background: white;
  text-align: left;
}
.booking-create-styles button small {
  color: #89838f;
}
.booking-create-styles button.active {
  border-color: #806dcc;
  color: #59499b;
  background: #f3effc;
}

.booking-create-colors button {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  border: 1px solid #e2dfeb;
  border-radius: 999px;
  padding: 0 11px 0 7px;
  color: #5d5864;
  background: white;
  font-size: 0.72rem;
  font-weight: 750;
}
.booking-create-colors i {
  width: 23px;
  height: 23px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px #d8d4df;
}
.booking-create-colors button.active {
  border-color: #806dcc;
  color: #59499b;
  background: #f3effc;
}
.booking-create-reference .booking-reference-prompt textarea {
  min-height: 72px;
  resize: vertical;
}

@media (max-width: 820px) {
  .booking-create-reference {
    grid-template-columns: 1fr;
  }
  .booking-create-preview {
    min-height: 210px;
  }
  .booking-create-preview img {
    min-height: 210px;
    max-height: 300px;
  }
}

.booking-full-tryon-launch {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(300px, 1fr);
  min-height: 330px;
  overflow: hidden;
  border: 1px solid #e2dfeb;
  border-radius: 14px;
  background: linear-gradient(135deg, #f4effc, #eef8f5);
}

.booking-full-tryon-visual {
  position: relative;
  min-height: 330px;
  overflow: hidden;
}
.booking-full-tryon-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.booking-full-tryon-visual > span {
  position: absolute;
  top: 16px;
  left: 16px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #7462bd;
  box-shadow: 0 10px 24px rgba(77, 60, 137, 0.22);
}
.booking-full-tryon-launch > div:last-child {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  padding: clamp(24px, 4vw, 46px);
}
.booking-full-tryon-launch h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
}
.booking-full-tryon-launch p {
  max-width: 580px;
  margin: 0;
  color: #716c78;
  line-height: 1.55;
}
.booking-full-tryon-launch ul {
  display: grid;
  gap: 5px;
  margin: 2px 0 8px;
  padding-left: 20px;
  color: #554f5e;
  font-size: 0.82rem;
}

.booking-tryon-modal {
  position: fixed;
  z-index: 900;
  inset: 0;
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr);
  background: #f3f2f7;
}

.booking-tryon-modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #dedce5;
  padding: 8px clamp(16px, 3vw, 38px);
  background: rgba(255, 255, 255, 0.96);
}

.booking-tryon-modal-bar > div {
  display: grid;
  gap: 2px;
}
.booking-tryon-modal-bar span {
  color: #817b88;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.booking-tryon-modal-bar strong {
  color: #2d2933;
  font-size: 1rem;
}
.booking-tryon-modal-body {
  min-height: 0;
  overflow: hidden;
  padding: 12px clamp(12px, 2.4vw, 30px) 18px;
}
.booking-tryon-modal-body .tryon-studio {
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  gap: 12px;
}
.booking-tryon-modal-body .tryon-hero {
  flex: 0 0 auto;
}
.booking-tryon-modal-body .tryon-workspace {
  height: 100%;
  min-height: 0;
  align-items: stretch;
}
.booking-tryon-modal-body .tryon-stage,
.booking-tryon-modal-body .style-builder {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

@media (max-width: 760px) {
  .booking-full-tryon-launch {
    grid-template-columns: 1fr;
  }
  .booking-full-tryon-visual {
    min-height: 190px;
    max-height: 230px;
  }
  .booking-tryon-modal {
    grid-template-rows: 58px minmax(0, 1fr);
  }
  .booking-tryon-modal-body {
    overflow-y: auto;
    padding: 8px;
  }
}

/* Fixed customer workspaces and reusable AI-reference library */
body.me-workspace-mode {
  overflow: hidden;
}

body.me-workspace-mode .customer-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100dvh;
  min-height: 0;
}

body.me-workspace-mode .customer-shell > footer {
  display: none;
}

body.me-workspace-mode .page-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-top: 14px;
  padding-bottom: 14px;
}

body.me-workspace-mode .me-dashboard {
  width: 100%;
  height: 100%;
  min-height: 0;
}

body.me-workspace-mode .me-account-rail {
  position: relative;
  top: auto;
  height: 100%;
  min-height: 0;
  max-height: none;
}

body.me-workspace-mode .me-workspace {
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-auto-rows: max-content;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.customer-ai-pair {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  overflow: hidden;
  border-radius: 7px;
  background: #f1f2f4;
}

.customer-ai-pair figure {
  position: relative;
  margin: 0;
}

.me-dashboard .customer-ai-pair img {
  width: 100%;
  aspect-ratio: 0.82;
  border-radius: 0;
  object-fit: cover;
}

.customer-ai-pair figcaption {
  position: absolute;
  right: 6px;
  bottom: 6px;
  border-radius: 999px;
  padding: 3px 7px;
  color: white;
  background: rgba(29, 27, 35, 0.72);
  font-size: 0.62rem;
  font-weight: 800;
}

.ai-bookmark-button {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: inline-grid;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  aspect-ratio: 1;
  flex: 0 0 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  line-height: 1;
  color: #5f596b;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(30, 25, 45, 0.14);
}

.ai-delete-button {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  display: inline-grid;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  aspect-ratio: 1;
  flex: 0 0 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  line-height: 1;
  color: #46414c;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(30, 25, 45, 0.14);
}

.ai-delete-button:hover,
.ai-delete-button:focus-visible {
  color: #9c3d4a;
  background: #fff;
  transform: translateY(-1px);
}

.ai-delete-button .icon {
  width: 15px;
  height: 15px;
}

.ai-bookmark-button.active {
  color: #6856b2;
  background: #f1ecff;
}

.ai-bookmark-button .icon {
  width: 15px;
  height: 15px;
}

.customer-ai-card-copy {
  min-width: 0;
  padding: 11px 4px 4px;
}

.customer-ai-card-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.customer-ai-card-heading > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.customer-ai-card-heading strong {
  color: #292730;
  font-size: 0.9rem;
  line-height: 1.25;
}

.customer-ai-card-copy span {
  color: #7d8088;
  font-size: 0.7rem;
}

.customer-ai-book-button {
  flex: 0 0 auto;
  min-width: 64px;
  min-height: 36px;
  padding: 7px 15px;
}

.booking-reference-library {
  display: grid;
  gap: 16px;
}

.booking-reference-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.booking-reference-heading h2 {
  margin: 3px 0 4px;
  font-size: 1.35rem;
}
.booking-reference-heading p {
  margin: 0;
  color: #777985;
  font-size: 0.82rem;
}

.booking-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-height: min(52vh, 490px);
  overflow-y: auto;
  padding: 2px 5px 8px 2px;
}

.booking-ai-reference {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid #e2e1e9;
  border-radius: 10px;
  padding: 7px;
  color: #292632;
  background: white;
  text-align: left;
}

.booking-ai-reference.active {
  border-color: #8271cf;
  background: #f5f1ff;
  box-shadow: 0 0 0 2px rgba(126, 104, 196, 0.1);
}

.booking-ai-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  overflow: hidden;
  border-radius: 7px;
}
.booking-ai-pair img {
  width: 100%;
  height: 76px;
  object-fit: cover;
}
.booking-ai-reference > span:nth-child(2) {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.booking-ai-reference strong,
.booking-ai-reference small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.booking-ai-reference small {
  color: #80828b;
}
.booking-ai-reference > i {
  color: #7060b5;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 850;
}
.booking-ai-reference > i .icon {
  width: 17px;
  height: 17px;
}
.booking-reference-selected,
.booking-reference-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 9px;
  padding: 12px 14px;
  color: #286f5c;
  background: #eaf7f3;
  font-weight: 750;
}
.booking-reference-empty {
  color: #625c6f;
  background: #f5f4f8;
}
.booking-reference-empty > div {
  display: grid;
  margin-right: auto;
}

.tryon-booking-context {
  display: grid;
  border: 1px solid #e5e3eb;
  border-radius: 10px;
  background: #fff;
}

.tryon-booking-context > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border-bottom: 1px solid #eeedf1;
  font-size: 0.72rem;
}
.tryon-booking-context > div:last-child {
  border-bottom: 0;
}
.tryon-booking-context span {
  color: #85818e;
}
.tryon-booking-context strong {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.tryon-workspace-mode .tryon-step-panel:has(.tryon-salon-choice) {
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
}

body.tryon-workspace-mode .tryon-salon-choice,
body.tryon-workspace-mode .tryon-salon-matches,
body.tryon-workspace-mode .tryon-salon-match-layout {
  height: 100%;
  min-height: 0;
}

body.tryon-workspace-mode .tryon-salon-choice {
  grid-template-rows: auto minmax(0, 1fr);
}

body.tryon-workspace-mode .tryon-salon-match-list {
  height: 100%;
  max-height: none;
  overflow-y: auto;
}

body.tryon-workspace-mode .tryon-salon-match-layout .directory-map-panel {
  height: 100%;
  min-height: 0;
}

@media (max-width: 1040px) {
  body.me-workspace-mode .me-dashboard {
    grid-template-rows: auto minmax(0, 1fr);
  }
  body.me-workspace-mode .me-account-rail {
    height: auto;
  }
  .booking-reference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .booking-reference-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .booking-reference-grid {
    grid-template-columns: 1fr;
  }
  .booking-ai-reference {
    grid-template-columns: 84px minmax(0, 1fr) auto;
  }
}

/* Compact Try-on workspace and useful summary rail */
body.tryon-workspace-mode .tryon-hero {
  grid-template-columns: minmax(180px, 0.7fr) minmax(380px, 1.3fr);
  gap: 12px;
  padding: 10px 14px;
}

body.tryon-workspace-mode .tryon-hero-copy {
  gap: 1px;
}

body.tryon-workspace-mode .tryon-hero h1 {
  font-size: clamp(1.2rem, 1.5vw, 1.55rem);
  line-height: 1.05;
}

body.tryon-workspace-mode .tryon-hero .eyebrow {
  font-size: 0.65rem;
}

body.tryon-workspace-mode .tryon-stepper {
  gap: 6px;
}

body.tryon-workspace-mode .tryon-stepper button {
  min-height: 38px;
  gap: 6px;
  border-radius: 9px;
  font-size: 0.76rem;
}

body.tryon-workspace-mode .tryon-stepper button span {
  width: 21px;
  height: 21px;
  font-size: 0.68rem;
}

body.tryon-workspace-mode .tryon-stepper button strong {
  font-size: 0.76rem;
}

body.tryon-workspace-mode .tryon-stage {
  padding: 14px;
}

body.tryon-workspace-mode .tryon-step-panel {
  gap: 11px;
}

body.tryon-workspace-mode .tryon-step-panel > .section-head h2 {
  font-size: 1.25rem;
}

body.tryon-workspace-mode .tryon-step-panel > .section-head .eyebrow {
  font-size: 0.66rem;
}

body.tryon-workspace-mode .tryon-inspiration-panel,
body.tryon-workspace-mode .tryon-custom-panel,
body.tryon-workspace-mode .tryon-color-browser {
  padding: 12px;
  border-radius: 12px;
}

body.tryon-workspace-mode .tryon-panel-title strong,
body.tryon-workspace-mode .tryon-browser-heading > span,
body.tryon-workspace-mode .tryon-row-heading strong {
  font-size: 0.84rem;
}

body.tryon-workspace-mode .tryon-panel-title small,
body.tryon-workspace-mode .tryon-browser-heading small,
body.tryon-workspace-mode .tryon-row-heading small {
  font-size: 0.68rem;
}

body.tryon-workspace-mode .tryon-color-choice {
  min-height: 38px;
  font-size: 0.74rem;
}

body.tryon-workspace-mode .tryon-style-groups {
  gap: 13px;
}

body.tryon-workspace-mode .tryon-style-row + .tryon-style-row,
body.tryon-workspace-mode .tryon-color-category + .tryon-color-category {
  padding-top: 11px;
}

body.tryon-workspace-mode .tryon-style-scroll .tryon-inspiration-card {
  flex-basis: clamp(150px, 23%, 185px);
  gap: 5px;
  min-height: 0;
  padding: 7px;
}

body.tryon-workspace-mode .tryon-inspiration-card strong {
  font-size: 0.8rem;
}

body.tryon-workspace-mode .tryon-inspiration-card small,
body.tryon-workspace-mode .tryon-family-pill {
  font-size: 0.62rem;
}

body.tryon-workspace-mode .tryon-custom-panel.always-open textarea {
  min-height: 84px;
  font-size: 0.78rem;
}

body.tryon-workspace-mode .tryon-custom-heading strong {
  font-size: 0.88rem;
}

body.tryon-workspace-mode .tryon-side-panel {
  height: auto;
  max-height: 100%;
  align-self: start;
  gap: 10px;
  padding: 13px;
}

.tryon-side-header h2 {
  font-size: 1.05rem;
}

.tryon-side-photo-card.compact {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 8px;
  border-radius: 11px;
}

.tryon-side-photo-card.compact img {
  width: 58px;
  height: 66px;
  border-radius: 8px;
}

.tryon-side-retake {
  min-height: 34px;
  padding: 0 9px;
  font-size: 0.72rem;
}

.tryon-side-retake .icon {
  width: 14px;
  height: 14px;
}

.tryon-side-guide {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(126, 104, 196, 0.12);
  border-radius: 11px;
  padding: 10px;
  background: white;
}

.tryon-side-guide > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-strong);
  background: #f2ecfa;
}

.tryon-side-guide > span .icon {
  width: 17px;
  height: 17px;
}

.tryon-side-guide > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tryon-side-guide strong {
  font-size: 0.78rem;
}

.tryon-side-guide small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tryon-side-overview {
  display: grid;
  border: 1px solid rgba(126, 104, 196, 0.1);
  border-radius: 11px;
  background: white;
}

.tryon-side-overview > div {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 39px;
  padding: 0 10px;
  border-top: 1px solid rgba(126, 104, 196, 0.08);
}

.tryon-side-overview > div:first-child {
  border-top: 0;
}

.tryon-side-overview span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 760;
}

.tryon-side-overview span .icon,
.tryon-side-overview .color-dot {
  width: 14px;
  height: 14px;
}

.tryon-side-overview strong {
  overflow: hidden;
  font-size: 0.75rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tryon-side-panel .tryon-side-reference {
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 9px;
  padding: 8px;
  border-radius: 11px;
}

.tryon-side-panel .tryon-side-reference-art {
  width: 68px;
  height: 68px;
}

.tryon-side-panel .tryon-side-reference strong {
  font-size: 0.78rem;
}

.tryon-side-panel .tryon-side-reference small,
.tryon-side-panel .tryon-side-reference-kicker {
  font-size: 0.64rem;
}

.tryon-side-next {
  min-height: 40px;
  font-size: 0.76rem;
}

@media (max-width: 940px) {
  body.tryon-workspace-mode .tryon-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Try-on salon chooser uses the Salons directory map */
.tryon-salon-choice {
  gap: 12px;
}

.tryon-salon-choice-head {
  align-items: center;
}

.tryon-salon-choice-head h2 {
  margin-top: 2px;
  font-size: 1.35rem;
}

.tryon-salon-matches {
  gap: 0;
  margin: 0;
  padding: 0;
}

.tryon-salon-match-layout {
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: 12px;
  min-height: 0;
}

.tryon-salon-match-list {
  max-height: 560px;
  gap: 9px;
  padding: 0 5px 18px 0;
}

.tryon-salon-match {
  grid-template-columns: 168px minmax(0, 1fr);
  min-height: 166px;
  border-radius: 12px;
  box-shadow: none;
}

.tryon-salon-match.active {
  border-color: rgba(126, 104, 196, 0.68);
  background: linear-gradient(
    135deg,
    rgba(242, 236, 250, 0.66),
    rgba(232, 247, 241, 0.46)
  );
  box-shadow: 0 10px 24px rgba(83, 67, 132, 0.1);
}

.tryon-salon-match-media img {
  min-height: 166px;
}

.tryon-salon-match-media span {
  top: 9px;
  left: 9px;
  padding: 5px 8px;
}

.tryon-salon-match-body {
  gap: 8px;
  padding: 12px;
}

.tryon-salon-match-heading h3 {
  font-size: 1.02rem;
}

.tryon-salon-match-heading p {
  font-size: 0.72rem;
}

.tryon-salon-match .tryon-match-service {
  padding: 8px 10px;
  border-radius: 9px;
  background: #f8f6fc;
}

.tryon-salon-match .tryon-match-service > span {
  font-size: 0.62rem;
  text-transform: uppercase;
}

.tryon-salon-match .tryon-match-service strong {
  font-size: 0.88rem;
}

.tryon-salon-match .tryon-match-service small {
  font-size: 0.7rem;
}

.tryon-salon-match .button-row {
  gap: 7px;
}

.tryon-salon-match .button-row button {
  min-height: 36px;
  font-size: 0.74rem;
}

.tryon-salon-match-layout .directory-map-panel {
  position: relative;
  top: auto;
  height: 560px;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(126, 104, 196, 0.14);
  border-radius: 14px;
}

.tryon-salon-match-layout .directory-map-canvas {
  height: 100%;
  min-height: 0;
}

.tryon-salon-choice + .tryon-footer,
.tryon-step-panel:has(.tryon-salon-choice) .tryon-footer {
  justify-content: space-between;
}

[data-tryon-book-selected]:disabled {
  opacity: 0.55;
}

@media (max-width: 1100px) {
  .tryon-salon-match-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .tryon-salon-match-list {
    max-height: 430px;
  }

  .tryon-salon-match-layout .directory-map-panel {
    height: 380px;
    min-height: 380px;
  }
}

@media (max-width: 640px) {
  .tryon-salon-choice-head {
    align-items: stretch;
    flex-direction: column;
  }

  .tryon-salon-match {
    grid-template-columns: 124px minmax(0, 1fr);
  }

  .tryon-salon-match-media img {
    min-height: 176px;
  }

  .tryon-salon-match-layout .directory-map-panel {
    height: 300px;
    min-height: 300px;
  }
}

/* Customer identity, My Hair, booking, and grouped Try-on refinements */
.user-chip {
  min-height: 42px;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 1px rgba(126, 104, 196, 0.1);
  font: inherit;
}

.user-chip b.user-chip-avatar {
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #7664c7, #52bea6);
  box-shadow: 0 4px 12px rgba(79, 65, 142, 0.2);
}

.user-chip-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.booking-main {
  gap: 14px;
}

.booking-title-bar h1 {
  margin-top: 3px;
}

.booking-title-bar .eyebrow {
  margin-bottom: 0;
}

.booking-main .stepper {
  gap: 6px;
  padding-bottom: 0;
}

.booking-main .stepper button {
  flex-basis: 132px;
  min-height: 42px;
  border-radius: 10px;
  font-size: 0.78rem;
}

.booking-reference-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  gap: 16px;
}

.booking-reference-copy,
.booking-reference-media {
  gap: 12px;
}

.booking-reference-heading h2 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.15;
}

.booking-style-options {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 7px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.booking-style-options::-webkit-scrollbar {
  display: none;
}

.booking-style-option {
  flex: 0 0 clamp(210px, 42%, 270px);
  min-height: 66px;
  scroll-snap-align: start;
}

.booking-reference-prompt textarea {
  min-height: 88px;
}

.booking-reference-prompt span {
  display: flex;
  justify-content: space-between;
}

.booking-reference-prompt span small {
  color: var(--muted);
  font-weight: 650;
}

.booking-photo-placeholder {
  display: grid;
  min-height: 300px;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: #64579e;
  background: radial-gradient(
    circle at 50% 42%,
    rgba(199, 182, 230, 0.22),
    transparent 30%
  );
  text-align: center;
}

.booking-photo-placeholder > span {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border: 2px solid rgba(126, 104, 196, 0.24);
  border-radius: 50%;
  background: white;
}

.booking-photo-placeholder > span .icon {
  width: 40px;
  height: 40px;
}

.booking-photo-placeholder > b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  margin-top: -27px;
  margin-left: 58px;
  border: 3px solid white;
  border-radius: 50%;
  color: white;
  background: #5bbca5;
}

.booking-photo-placeholder > b .icon {
  width: 15px;
  height: 15px;
}

.booking-photo-placeholder strong {
  margin-top: 8px;
  color: var(--ink);
}

.booking-photo-placeholder small {
  color: var(--muted);
}

.tryon-browser-heading,
.tryon-row-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tryon-browser-heading {
  align-items: flex-start;
}

.tryon-browser-heading > span,
.tryon-row-heading strong {
  color: var(--ink);
  font-weight: 850;
}

.tryon-browser-heading small,
.tryon-row-heading small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
}

.tryon-color-browser,
.tryon-style-groups,
.tryon-style-row,
.tryon-color-category {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.tryon-color-browser {
  gap: 14px;
  border: 1px solid rgba(126, 104, 196, 0.12);
  border-radius: 14px;
  padding: 14px;
  background: #fbfaff;
}

.tryon-color-category + .tryon-color-category,
.tryon-style-row + .tryon-style-row {
  border-top: 1px solid rgba(126, 104, 196, 0.1);
  padding-top: 14px;
}

.tryon-color-scroll,
.tryon-style-scroll {
  display: flex;
  min-width: 0;
  gap: 9px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.tryon-color-scroll::-webkit-scrollbar,
.tryon-style-scroll::-webkit-scrollbar {
  display: none;
}

.tryon-color-choice {
  display: grid;
  grid-template-columns: 24px auto;
  flex: 0 0 auto;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(126, 104, 196, 0.15);
  border-radius: 999px;
  padding: 0 13px 0 9px;
  color: var(--ink);
  background: white;
  scroll-snap-align: start;
  font-weight: 760;
}

.tryon-color-choice > i {
  width: 24px;
  height: 24px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(32, 25, 42, 0.14);
}

.tryon-color-choice.active {
  color: var(--accent-strong);
  border-color: rgba(126, 104, 196, 0.54);
  background: #f3eefb;
  box-shadow: 0 7px 18px rgba(126, 104, 196, 0.12);
}

.tryon-style-groups {
  gap: 18px;
}

.tryon-style-scroll .tryon-inspiration-card {
  flex: 0 0 clamp(180px, 27%, 225px);
  min-width: 0;
  scroll-snap-align: start;
}

.tryon-selected-style-banner > .icon:first-child {
  color: var(--accent-strong);
}

@media (max-width: 1180px) and (min-width: 821px) {
  .booking-reference-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.76fr);
  }
}

@media (max-width: 1040px) {
  .me-dashboard {
    border-radius: 14px;
  }

  .me-account-rail {
    grid-template-columns: minmax(210px, auto) minmax(0, 1fr);
    gap: 12px;
  }

  .me-rail-profile {
    min-width: 0;
  }

  .me-workspace {
    padding: 24px;
  }
}

@media (max-width: 820px) {
  .booking-reference-workspace {
    grid-template-columns: 1fr;
  }

  .booking-summary:not(.is-review) {
    display: none;
  }

  .booking-reference-media {
    grid-row: 1;
  }

  .booking-photo-placeholder {
    min-height: 250px;
  }

  .me-account-rail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .me-rail-profile {
    padding: 0;
  }

  .me-rail-nav {
    width: 100%;
    padding-bottom: 2px;
  }

  .me-kpi-strip {
    display: flex;
    overflow-x: auto;
    border: 0;
    gap: 10px;
    background: transparent;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .me-kpi-strip::-webkit-scrollbar {
    display: none;
  }

  .me-kpi-strip .me-kpi {
    flex: 0 0 min(78vw, 230px);
    border: 1px solid #e3e6e9;
    border-radius: 10px;
    background: white;
    scroll-snap-align: start;
  }

  .me-booking-feature {
    grid-template-columns: 1fr;
  }

  .me-booking-feature > img {
    height: 190px;
    min-height: 190px;
  }

  .me-feature-date {
    min-height: 150px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 0;
  }
}

@media (max-width: 620px) {
  .me-dashboard {
    border-radius: 12px;
  }

  .me-workspace {
    gap: 14px;
    padding: 18px 12px 26px;
  }

  .me-page-header {
    gap: 14px;
  }

  .me-page-header h1 {
    font-size: 1.65rem;
  }

  .me-feature-copy {
    padding: 22px 18px;
  }

  .me-section-heading,
  .me-salon-title {
    gap: 10px;
  }

  .me-salon-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .me-salon-row > button {
    grid-column: 2;
    justify-self: start;
  }

  .me-settings-profile {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .tryon-style-scroll .tryon-inspiration-card {
    flex-basis: min(72vw, 210px);
  }

  .tryon-browser-heading {
    flex-direction: column;
  }
}

/* Fast Try-on preference controls */
.tryon-catalog-title {
  align-items: center;
}

.tryon-audience-switch {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  border: 1px solid rgba(126, 104, 196, 0.14);
  border-radius: 999px;
  padding: 3px;
  background: #f6f3fb;
}

.tryon-audience-switch button {
  min-width: 76px;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 0 13px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
}

.tryon-audience-switch button.active {
  color: var(--accent-strong);
  background: white;
  box-shadow: 0 5px 14px rgba(75, 56, 120, 0.12);
}

[data-tryon-selected-banner]:empty {
  display: none;
}

.tryon-custom-panel.always-open {
  gap: 16px;
  padding: 18px;
  background: linear-gradient(145deg, #fff, #fbfaff);
}

.tryon-custom-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.tryon-custom-heading strong {
  color: var(--ink);
  font-size: 1rem;
}

.tryon-text-question > small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
}

.tryon-custom-heading > .icon {
  width: 20px;
  height: 20px;
  color: var(--accent-strong);
}

.tryon-custom-panel.always-open .tryon-custom-fields {
  gap: 14px;
  padding-top: 0;
}

.tryon-custom-panel.always-open .tryon-text-question {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.tryon-custom-panel.always-open .tryon-text-question > span {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 820;
}

.tryon-custom-panel.always-open textarea {
  width: 100%;
  min-height: 112px;
  margin-top: 4px;
  border: 1px solid rgba(126, 104, 196, 0.18);
  border-radius: 12px;
  padding: 12px 13px;
  color: var(--ink);
  background: white;
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.5;
  resize: vertical;
  outline: 0;
}

.tryon-custom-panel.always-open textarea:focus {
  border-color: rgba(126, 104, 196, 0.62);
  box-shadow: 0 0 0 4px rgba(126, 104, 196, 0.1);
}

@media (max-width: 640px) {
  .tryon-catalog-title {
    align-items: stretch;
    flex-direction: column;
  }

  .tryon-audience-switch {
    align-self: flex-start;
  }

  .tryon-custom-panel.always-open {
    padding: 14px;
  }
}

/* Production polish: salon imagery, try-on matching workspace, and reference handoff */
@media (min-width: 521px) and (max-width: 1539px) {
  .directory-salon-row {
    grid-template-columns: 148px minmax(0, 1fr) minmax(88px, auto);
    min-height: 132px;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
  }

  .directory-salon-row .salon-thumb {
    width: 148px;
    height: 112px;
    border-radius: 10px;
  }

  .directory-salon-row h3 {
    font-size: 1rem;
  }
}

.tryon-salon-match-layout {
  grid-template-columns: minmax(360px, 0.95fr) minmax(360px, 1.05fr);
  min-height: 470px;
  align-items: stretch;
}

.tryon-salon-match-list {
  max-height: 520px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 5px 24px 2px;
  scrollbar-gutter: stable;
}

.tryon-salon-match {
  grid-template-columns: 144px minmax(0, 1fr);
  min-height: 176px;
  border-radius: 14px;
}

.tryon-salon-match.active {
  border-color: rgba(126, 104, 196, 0.58);
  box-shadow: 0 16px 34px rgba(126, 104, 196, 0.16);
}

.tryon-salon-match-media img {
  min-height: 176px;
}

.tryon-salon-match-body {
  align-content: start;
  gap: 9px;
  padding: 13px;
}

.tryon-salon-match-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.tryon-salon-match-heading h3,
.tryon-salon-match-heading p {
  margin: 0;
}

.tryon-salon-match-heading h3 {
  font-size: 1rem;
}

.tryon-salon-match-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.75rem;
}

.tryon-salon-match-heading > strong {
  color: #4c3b77;
  white-space: nowrap;
}

.tryon-salon-match-heading > strong span {
  margin-right: 3px;
  color: #7560c5;
}

.tryon-salon-match .tryon-match-service {
  gap: 2px;
  padding: 8px 10px;
}

.tryon-salon-match .button-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: auto;
}

.tryon-salon-match-layout .map-panel {
  position: relative;
  top: 0;
  height: 520px;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
}

.tryon-salon-match-layout .map-surface {
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

.tryon-salon-match-layout .map-card {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 4;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.tryon-salon-match-layout .map-card > span {
  display: none;
}

.tryon-salon-match-layout .map-card .outline-button {
  width: auto;
}

.booking-reference-preview {
  display: grid;
  grid-template-columns: 1fr;
}

.booking-reference-preview.is-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-reference-preview figure {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

.booking-reference-preview.is-pair figure + figure {
  border-left: 1px solid rgba(126, 104, 196, 0.16);
}

.booking-reference-preview.is-pair img {
  height: clamp(260px, 25vw, 390px);
}

.booking-reference-preview figure figcaption {
  position: absolute;
}

@media (max-width: 940px) {
  .tryon-salon-match-layout {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .tryon-salon-match-list {
    max-height: none;
    overflow: visible;
  }

  .tryon-salon-match-layout .map-panel {
    display: block;
    height: 360px;
  }
}

@media (max-width: 640px) {
  .tryon-salon-match {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .tryon-salon-match-media img {
    min-height: 190px;
  }

  .tryon-salon-match-layout .map-panel {
    height: 300px;
  }

  .tryon-salon-match-layout .map-card {
    grid-template-columns: 1fr;
  }

  .tryon-salon-match-layout .map-card .outline-button {
    width: 100%;
  }

  .booking-reference-preview.is-pair {
    grid-template-columns: 1fr;
  }

  .booking-reference-preview.is-pair figure + figure {
    border-top: 1px solid rgba(126, 104, 196, 0.16);
    border-left: 0;
  }
}

/* v22 final viewport guards */
body.me-workspace-mode {
  overflow: hidden;
}
body.me-workspace-mode .me-dashboard {
  height: 100%;
  min-height: 0;
}
body.me-workspace-mode .me-workspace {
  min-height: 0;
  overflow-y: auto;
}
body.tryon-workspace-mode .tryon-step-panel:has(.tryon-salon-choice) {
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}
body.tryon-workspace-mode .tryon-salon-choice {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}
body.tryon-workspace-mode .tryon-salon-match-layout {
  height: 100%;
  min-height: 0;
}
body.tryon-workspace-mode .tryon-salon-match-list {
  height: 100%;
  max-height: none;
  overflow-y: auto;
}
body.tryon-workspace-mode .tryon-salon-match-layout .directory-map-panel {
  height: 100%;
  min-height: 0;
}

/* Final viewport overrides — intentionally last. */
.directory-view-list .directory-map-panel {
  display: none !important;
}
.directory-view-map .salon-directory-panel {
  display: none !important;
}
.directory-view-map .directory-map-panel,
.directory-view-split .directory-map-panel {
  display: block !important;
}
.directory-view-map .salon-map-directory {
  grid-template-columns: minmax(0, 1fr) !important;
}
@media (max-width: 768px) {
  body.me-workspace-mode,
  body.tryon-workspace-mode,
  body.booking-workspace-mode {
    overflow: auto;
  }
  body.me-workspace-mode {
    overflow-x: hidden;
    overflow-y: auto;
  }
  body.me-workspace-mode .customer-shell {
    display: block;
    height: auto;
    min-height: 100dvh;
  }
  body.me-workspace-mode .page-wrap {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  body.me-workspace-mode .me-dashboard {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  body.me-workspace-mode .me-workspace {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }
  body.salon-directory-mode .directory-view-map .directory-map-panel,
  body.salon-directory-mode .directory-view-split .directory-map-panel {
    display: block !important;
    min-height: 340px;
  }
}

/* Salon business workspace — persisted operations */
.business-workspace-page,
.business-onboarding,
.business-site-ops {
  display: grid;
  gap: 24px;
  color: #282332;
}

.business-workspace-loading {
  display: grid;
  place-items: center;
  gap: 9px;
  min-height: 55vh;
  color: #6f6877;
  text-align: center;
}
.business-workspace-loading span {
  width: 38px;
  height: 38px;
  border: 3px solid #ded7e9;
  border-top-color: #7057aa;
  border-radius: 50%;
  animation: business-loading 0.8s linear infinite;
}
.business-workspace-loading h2,
.business-workspace-loading p {
  margin: 0;
}
@keyframes business-loading {
  to {
    transform: rotate(360deg);
  }
}

.business-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 24px);
}

.business-page-heading {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.business-page-heading > .pro-eyebrow {
  margin: 0;
  color: #6553a7;
  line-height: 1.1;
}

.business-page-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.business-page-title-row :is(h1, h2) {
  min-width: 0;
  margin: 0;
  font: 650 clamp(1.65rem, 2.4vw, 2.45rem)/1.08
    var(--display-font, Georgia, serif);
  letter-spacing: -0.035em;
}

.business-page-description {
  max-width: 760px;
  margin: 0;
  color: #706979;
  line-height: 1.55;
}

.business-header-actions,
.business-onboarding-footer,
.business-modal-form footer,
.business-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.business-header-actions > *,
.business-onboarding-footer button,
.business-modal-form footer button {
  min-height: 44px;
}

.business-save-state,
.business-calendar-hint,
.business-disclosure {
  color: #736b7d;
  font-size: 0.84rem;
  line-height: 1.5;
}

.business-panel,
.business-client-detail,
.business-calendar-surface,
.business-version-history,
.business-onboarding-sections > section {
  min-width: 0;
  border: 1px solid #e7e2ea;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(48, 37, 65, 0.055);
}

.business-panel,
.business-client-detail,
.business-onboarding-sections > section {
  padding: clamp(18px, 2.5vw, 30px);
}

.business-panel > h3,
.business-onboarding-sections > section > h3,
.business-history > h3 {
  margin: 0 0 18px;
  font-size: 1.05rem;
}

.business-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.business-metric {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 20px;
  border: 1px solid #e8e3eb;
  border-radius: 18px;
  background: #fff;
}

.business-metric span,
.business-metric small {
  color: #756e7d;
}
.business-metric strong {
  overflow-wrap: anywhere;
  font: 650 clamp(1.5rem, 2vw, 2rem)/1.1 var(--display-font, Georgia, serif);
}
.business-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.business-list {
  display: grid;
  gap: 10px;
}

.business-booking-compact {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 0;
  border-bottom: 1px solid #eee9f0;
}

.business-booking-compact:last-child {
  border-bottom: 0;
}
.business-booking-compact time,
.business-booking-compact span,
.business-booking-compact small {
  color: #746d7b;
  font-size: 0.84rem;
}
.business-booking-compact > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.business-status {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f0edf4;
  color: #625b69;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: capitalize;
}

.status-booked,
.status-confirmed,
.status-completed {
  background: #ddf5ed;
  color: #246b58;
}
.status-requested,
.status-proposed {
  background: #eee8fb;
  color: #60499c;
}
.status-cancelled,
.status-declined,
.status-no_show {
  background: #fae7e7;
  color: #9a4141;
}
.status-checked_in,
.status-in_progress {
  background: #e5f0fa;
  color: #315f85;
}

.business-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 180px;
  padding: 24px;
  text-align: center;
  color: #77707e;
}

.business-empty > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #eee9f9;
  color: #7258ae;
}
.business-empty h3,
.business-empty p {
  margin: 0;
}
.business-empty p {
  max-width: 420px;
  line-height: 1.5;
}

.business-alert {
  padding: 16px;
  border: 1px solid #efdddd;
  border-radius: 14px;
  background: #fff8f8;
}
.business-alert p {
  margin: 6px 0 0;
  color: #765b5b;
}

.business-range,
.business-calendar-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #6f6877;
  font-size: 0.8rem;
}

.business-range select,
.business-calendar-toolbar select,
.business-calendar-toolbar input,
.business-field input,
.business-field textarea,
.business-field select,
.business-message-composer input,
.business-message-composer select,
.business-message-composer textarea,
.business-propose-time input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #dcd6e1;
  border-radius: 11px;
  background: #fff;
  color: #2d2734;
  font: inherit;
}

.business-field input,
.business-field select,
.business-message-composer input,
.business-message-composer select,
.business-propose-time input {
  padding: 0 12px;
}
.business-field textarea,
.business-message-composer textarea {
  min-height: 96px;
  padding: 12px;
  resize: vertical;
}

.business-field {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  color: #514a58;
  font-size: 0.84rem;
  font-weight: 650;
}

.business-field small {
  color: #817986;
  font-weight: 450;
  line-height: 1.4;
}
.business-field-full {
  grid-column: 1 / -1;
}
.business-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.business-form-grid > h3 {
  margin: 0;
}

.business-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  color: #514a58;
  line-height: 1.45;
}

.business-check input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: #745db1;
}

.business-onboarding-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 20px;
}
.business-onboarding-steps {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 3px;
  align-self: start;
}
.business-onboarding-steps span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 8px;
  color: #736d79;
  font-size: 0.84rem;
}
.business-onboarding-steps b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #d9d1e2;
  border-radius: 50%;
  background: #fff;
}
.business-onboarding-steps .complete b {
  border-color: #a8dfcf;
  background: #ddf5ed;
  color: #246b58;
}
.business-onboarding-sections {
  display: grid;
  gap: 16px;
}
.business-onboarding-sections > section {
  scroll-margin-top: 20px;
}
.business-onboarding-sections > section > p {
  color: #706979;
  line-height: 1.55;
}
.business-onboarding-footer {
  position: sticky;
  bottom: 10px;
  grid-column: 1 / -1;
  padding: 13px;
  border: 1px solid rgba(220, 213, 227, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 36px rgba(48, 37, 65, 0.13);
  backdrop-filter: blur(14px);
}
.business-inline-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  color: #6e6775;
  font-size: 0.84rem;
}
.business-listing-editor {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
  gap: 18px;
}
.business-listing-editor > img,
.business-preview-card > img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  border-radius: 16px;
  background: #ede9f0;
}
.business-preview-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  padding: 14px;
  border: 1px solid #e5dfe8;
  border-radius: 18px;
}
.business-preview-card > div {
  align-self: center;
}
.business-preview-card h4 {
  margin: 5px 0;
  font: 650 1.5rem/1.1 var(--display-font, Georgia, serif);
}
.business-preview-card p {
  color: #6f6876;
  line-height: 1.5;
}

.business-calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e5dfe8;
  border-radius: 16px;
  background: #fff;
}
.business-calendar-hint {
  margin-left: auto;
}
.business-segmented {
  display: flex;
  padding: 3px;
  border-radius: 11px;
  background: #f0edf3;
}
.business-segmented button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6c6573;
}
.business-segmented button.active {
  background: #fff;
  color: #4e3e78;
  box-shadow: 0 3px 12px rgba(48, 37, 65, 0.1);
}
.business-calendar-surface {
  overflow: auto;
}
.business-day-timeline {
  min-width: 660px;
  padding: 16px;
}
.business-time-row {
  display: grid;
  grid-template-columns: var(--calendar-time-axis-width, 66px) minmax(0, 1fr);
  min-height: 78px;
  border-bottom: 1px solid #eeeaf0;
}
.business-time-row > time {
  padding-top: 10px;
  color: #847d89;
  font-size: 0.75rem;
}
.business-time-row > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: start;
  padding: 6px;
  border-left: 1px solid #eeeaf0;
}
.business-calendar-booking,
.business-calendar-block {
  display: grid;
  gap: 3px;
  width: min(290px, 100%);
  padding: 10px 12px;
  border-left: 4px solid #7862b0;
  border-radius: 9px;
  background: #f0ebfa;
  cursor: grab;
}
.business-calendar-booking span,
.business-calendar-booking small,
.business-calendar-block span {
  color: #6d6574;
  font-size: 0.74rem;
}
.business-calendar-block {
  border-left-color: #9b929f;
  background: #f2f0f2;
  cursor: default;
}
.service-color-1 {
  border-left-color: #4fae92;
  background: #e7f6f1;
}
.service-color-2 {
  border-left-color: #cb7e95;
  background: #fbecf1;
}
.service-color-3 {
  border-left-color: #5b8db8;
  background: #eaf3fa;
}
.service-color-4 {
  border-left-color: #c18c49;
  background: #fbf2e5;
}
.service-color-5 {
  border-left-color: #8560b5;
  background: #f1ebf8;
}

.business-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  min-width: 1050px;
}
.business-week-grid > section {
  min-height: 560px;
  border-right: 1px solid #ebe6ed;
}
.business-week-grid > section:last-child {
  border-right: 0;
}
.business-week-grid section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 10px 12px;
  border-bottom: 1px solid #ebe6ed;
}
.business-week-grid section > header span {
  color: #7b7481;
  font-size: 0.78rem;
  text-transform: uppercase;
}
.business-week-grid section > div {
  display: grid;
  gap: 8px;
  padding: 9px;
}
.business-week-grid .business-calendar-booking {
  width: 100%;
}
.business-open-day {
  padding: 8px;
  color: #a39da7;
  font-size: 0.75rem;
}
.business-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  min-width: 840px;
}
.business-month-grid > section {
  min-height: 126px;
  padding: 8px;
  border-right: 1px solid #eee9f0;
  border-bottom: 1px solid #eee9f0;
}
.business-month-grid > section.muted {
  background: #faf9fa;
  color: #a49da7;
}
.business-month-grid section > header {
  display: flex;
  justify-content: space-between;
}
.business-month-grid section > header span {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eee9f7;
  color: #6c529e;
  font-size: 0.72rem;
}
.business-month-grid section > button {
  display: grid;
  width: 100%;
  margin-top: 5px;
  padding: 6px;
  border: 0;
  border-radius: 7px;
  background: #eee9f7;
  color: #534268;
  text-align: left;
  font-size: 0.7rem;
}

.business-filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.business-filter-row button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: max-content;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #ded8e2;
  border-radius: 999px;
  background: #fff;
  color: #675f6d;
}
.business-filter-row button.active {
  border-color: #7760ae;
  background: #eee9f8;
  color: #563e8d;
}
.business-filter-row button span {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.76);
  font-size: 0.7rem;
}
.business-bookings-list {
  display: grid;
  gap: 14px;
}
.business-booking-row {
  padding: 20px;
  border: 1px solid #e4dfe7;
  border-radius: 18px;
  background: #fff;
}
.business-booking-row > header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.business-booking-row h3 {
  margin: 5px 0 3px;
  font-size: 1.1rem;
}
.business-booking-row p {
  margin: 0;
  color: #716a77;
}
.business-booking-row time {
  color: #7a7280;
  font-size: 0.78rem;
}
.business-booking-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 16px 0;
  padding: 12px 0;
  border-block: 1px solid #eeeaf0;
  color: #7b7480;
  font-size: 0.78rem;
}
.business-booking-facts strong {
  color: #4d4652;
}
.business-booking-note,
.business-booking-proposal {
  padding: 11px 13px;
  border-radius: 10px;
  background: #f7f5f8;
  color: #625b69 !important;
}
.business-booking-proposal {
  margin-top: 10px;
  background: #eee9f8;
}
.business-booking-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  margin-top: 16px;
}
.business-propose-time {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 7px;
  margin-left: auto;
}
.business-propose-time span {
  grid-column: 1 / -1;
  color: #736c79;
  font-size: 0.74rem;
}

.business-crm-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.business-client-list {
  display: grid;
  gap: 6px;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #e3dee6;
  border-radius: 18px;
  background: #fff;
}
.business-client-list > button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #4a434f;
  text-align: left;
}
.business-client-list > button.active {
  background: #eee9f8;
}
.business-client-list > button > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e4f4ee;
  color: #397866;
  font-weight: 750;
}
.business-client-list > button > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.business-client-list small {
  color: #7b7480;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.business-history {
  margin-top: 26px;
}
.business-history article {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 13px 0;
  border-top: 1px solid #eee9f0;
}
.business-history article p {
  grid-column: 2;
  margin: 0;
  color: #706a76;
}
.business-history time {
  color: #837c88;
  font-size: 0.76rem;
}

.business-messages-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(240px, 0.82fr) minmax(360px, 1.8fr);
  min-height: min(700px, calc(100vh - 190px));
  overflow: hidden;
  border: 1px solid #e3dee6;
  border-radius: 20px;
  background: #fff;
}
.business-message-customers,
.business-message-appointments {
  min-width: 0;
  background: #fcfbfd;
}
.business-message-customers {
  padding: 9px;
  border-right: 1px solid #e8e3ea;
}
.business-message-customers > header,
.business-message-appointments > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 10px 12px;
  color: #5e5665;
}
.business-message-customers > header span,
.business-message-appointments > header span {
  display: grid;
  place-items: center;
  min-width: 26px;
  min-height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: #f0ecf6;
  color: #6c50a7;
  font-size: 0.72rem;
  font-weight: 800;
}
.business-message-customers > button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 9px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  text-align: left;
  transition: background 150ms ease, box-shadow 150ms ease;
}
.business-message-customers > button:hover,
.business-message-customers > button.active,
.business-message-appointments button:hover,
.business-message-appointments button.active {
  background: #f3eff9;
  box-shadow: inset 3px 0 #7657b0;
}
.business-message-customers > button > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eee9f8;
  color: #654b9b;
  font-weight: 800;
}
.business-message-customers > button > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.business-message-customers small {
  overflow: hidden;
  color: #7d7682;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.business-message-customers b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #785daf;
  color: #fff;
  font-size: 0.7rem;
}
.business-message-appointments {
  border-right: 1px solid #e8e3ea;
}
.business-message-appointments > div {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 8px;
}
.business-message-appointments button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 11px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #423b48;
  text-align: left;
  transition: background 150ms ease, box-shadow 150ms ease;
}
.business-message-appointments button > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.business-message-appointments button small {
  overflow: hidden;
  color: #7c7482;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.business-message-appointments button em {
  color: #7257a9;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}
.business-message-chat {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
}
.business-message-chat > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  border-bottom: 1px solid #e8e3ea;
}
.business-message-chat > header div {
  display: grid;
  gap: 4px;
}
.business-message-chat > header span {
  color: #7b7480;
  font-size: 0.78rem;
}
.business-message-stream {
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  padding: 18px;
}
.business-message-stream article {
  align-self: flex-start;
  max-width: min(520px, 82%);
  padding: 10px 13px;
  border-radius: 14px 14px 14px 4px;
  background: #f0edf2;
}
.business-message-stream article.salon {
  align-self: flex-end;
  border-radius: 14px 14px 4px;
  background: #eee9f8;
}
.business-message-stream p {
  margin: 0 0 4px;
  line-height: 1.45;
}
.business-message-stream time {
  color: #7c7482;
  font-size: 0.68rem;
}
.business-message-composer {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 12px;
  border-top: 1px solid #e8e3ea;
}
.business-message-composer textarea {
  min-height: 70px;
}

.business-service-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(330px, 0.7fr);
  gap: 18px;
  align-items: start;
}
.business-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.business-service-card {
  display: grid;
  gap: 8px;
  padding: 17px;
  border: 1px solid #e7e2e9;
  border-radius: 15px;
}
.business-service-card > span {
  color: #785daf;
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
}
.business-service-card h3,
.business-service-card p {
  margin: 0;
}
.business-service-card p,
.business-service-card small {
  color: #766f7c;
  line-height: 1.4;
}
.business-service-card > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.business-inline-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #ebe6ed;
}
.business-file-button {
  position: relative;
  overflow: hidden;
}
.business-file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.business-staff-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid #e7e2e9;
  border-radius: 15px;
}
.business-staff-card > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e5f5ef;
  color: #3a7966;
  font-weight: 750;
}
.business-staff-card h3,
.business-staff-card p {
  margin: 0;
}
.business-staff-card small {
  color: #776f7c;
}
.business-member-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid #eee9f0;
}
.business-member-row > div {
  display: grid;
  gap: 4px;
}
.business-member-row > div span {
  color: #756e7a;
  font-size: 0.8rem;
}

.business-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.business-portfolio-grid > article {
  overflow: hidden;
  border: 1px solid #e5e0e8;
  border-radius: 17px;
  background: #fff;
}
.business-portfolio-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #eeeaf0;
}
.business-portfolio-grid article > div {
  display: grid;
  gap: 6px;
  padding: 15px;
}
.business-portfolio-grid h3,
.business-portfolio-grid p {
  margin: 0;
}
.business-portfolio-grid article > div > span {
  color: #3f7e6b;
  font-size: 0.7rem;
  font-weight: 750;
  text-transform: uppercase;
}
.business-portfolio-grid p,
.business-portfolio-grid small {
  color: #756e7b;
  line-height: 1.4;
}

.business-reviews-list {
  display: grid;
  gap: 14px;
}
.business-reviews-list > article {
  padding: 20px;
  border: 1px solid #e4dfe7;
  border-radius: 18px;
  background: #fff;
}
.business-reviews-list article > header {
  display: flex;
  justify-content: space-between;
}
.business-reviews-list article > header > div {
  display: grid;
  gap: 3px;
}
.business-reviews-list article > header span {
  color: #9c7132;
  letter-spacing: 0.06em;
}
.business-reviews-list article > p {
  color: #5f5865;
  line-height: 1.55;
}
.business-reviews-list blockquote {
  margin: 14px 0 0;
  padding: 13px;
  border-left: 3px solid #75bda8;
  background: #edf7f4;
}
.business-reviews-list blockquote p {
  margin: 4px 0 0;
}
.business-reviews-list form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  margin-top: 12px;
}
.business-reviews-list textarea {
  min-height: 68px;
  padding: 10px;
  border: 1px solid #ddd7e1;
  border-radius: 10px;
}

.business-table-wrap {
  overflow-x: auto;
}
.business-table-wrap table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}
.business-table-wrap th,
.business-table-wrap td {
  padding: 12px 10px;
  border-bottom: 1px solid #eeeaf0;
  text-align: left;
  font-size: 0.8rem;
}
.business-table-wrap th {
  color: #746d7b;
  font-weight: 650;
}

.business-funnel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr) 24px);
  align-items: center;
  padding: 22px;
  border: 1px solid #e4dfe7;
  border-radius: 18px;
  background: #fff;
}
.business-funnel > div {
  display: grid;
  gap: 5px;
}
.business-funnel > div span {
  color: #746d7b;
  font-size: 0.8rem;
}
.business-funnel > div strong {
  font: 650 1.7rem var(--display-font, Georgia, serif);
}
.business-funnel > i {
  width: 8px;
  height: 8px;
  border-top: 2px solid #947fbb;
  border-right: 2px solid #947fbb;
  transform: rotate(45deg);
}

.business-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.business-settings-grid .business-panel {
  display: grid;
  gap: 13px;
}
.business-version-history {
  padding: 0 16px;
}
.business-version-history > summary {
  min-height: 52px;
  padding: 16px 0;
  cursor: pointer;
  font-weight: 700;
}
.business-version-history article {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #ece7ee;
}
.business-version-history article > div {
  display: grid;
  flex: 1;
  gap: 3px;
}
.business-version-history article span {
  color: #77707d;
  font-size: 0.76rem;
}
.business-admin-queues {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.business-admin-queues article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid #e4dfe7;
  border-radius: 14px;
  background: #fff;
}
.business-admin-queues article p {
  margin: 4px 0 0;
  color: #706976;
  overflow-wrap: anywhere;
}

.business-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
}
.business-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(32, 27, 39, 0.58);
  backdrop-filter: blur(6px);
}
.business-modal {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 100px rgba(25, 19, 34, 0.32);
}
.business-modal.wide {
  width: min(760px, 100%);
}
.business-modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
}
.business-modal > header h2 {
  margin: 0;
  font: 650 1.5rem var(--display-font, Georgia, serif);
}
.business-modal-form {
  display: grid;
  gap: 16px;
}

.business-workspace-page
  :where(button, input, select, textarea, a):focus-visible,
.business-onboarding :where(button, input, select, textarea, a):focus-visible,
.business-site-ops :where(button, input, select, textarea, a):focus-visible {
  outline: 3px solid rgba(103, 80, 184, 0.42);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .business-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .business-two-column,
  .business-service-layout {
    grid-template-columns: 1fr;
  }
  .business-portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .business-message-composer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .business-message-composer textarea {
    grid-column: 1 / -1;
  }
  .business-inline-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dashboard-shell {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: clip;
  }
  .dashboard-shell .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    min-height: 0;
    height: auto;
    max-height: none;
    padding: 10px 12px;
    overflow: hidden;
  }
  .dashboard-shell .sidebar-brand {
    display: none;
  }
  .dashboard-shell .side-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: calc(100vw - 24px);
    gap: 5px;
    margin: 0;
    padding: 0 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    scroll-snap-type: inline proximity;
  }
  .dashboard-shell .side-link {
    min-width: max-content;
    min-height: 44px;
  }
  .dashboard-shell .dashboard-context-switcher {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .dashboard-shell .dashboard-context-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .dashboard-shell .dashboard-context-field {
    min-height: 44px;
    padding-block: 4px;
  }
  .dashboard-shell .sidebar-footer {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-self: center;
    gap: 4px;
    padding: 0;
    border: 0;
  }
  .dashboard-shell .sidebar-footer :where(a, button) {
    justify-content: center;
    min-height: 44px;
    padding-inline: 12px;
  }
  .dashboard-main {
    min-width: 0;
  }
  .dashboard-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .dashboard-content {
    padding: 18px;
  }
  .business-onboarding-layout {
    grid-template-columns: 1fr;
  }
  .business-onboarding-steps {
    position: static;
    display: flex;
    overflow-x: auto;
  }
  .business-onboarding-steps span {
    min-width: max-content;
  }
  .business-crm-layout,
  .business-messages-layout {
    grid-template-columns: 1fr;
  }
  .business-client-list {
    display: flex;
    max-height: none;
    overflow-x: auto;
  }
  .business-client-list > .search-field {
    min-width: 220px;
  }
  .business-client-list > button {
    min-width: 220px;
  }
  .business-messages-layout > aside {
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #e8e3ea;
  }
  .business-message-customers > header,
  .business-message-appointments > header {
    min-width: max-content;
  }
  .business-messages-layout > aside > button {
    min-width: 240px;
  }
  .business-message-appointments {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    border-right: 0;
    border-bottom: 1px solid #e8e3ea;
  }
  .business-message-appointments > div {
    display: flex;
    overflow-x: auto;
  }
  .business-message-appointments button {
    min-width: 240px;
  }
  .business-funnel {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .business-funnel > i {
    transform: rotate(135deg);
  }
}

@media (max-width: 640px) {
  .dashboard-content {
    padding: 14px;
  }
  .dashboard-shell .sidebar {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
  .dashboard-shell .dashboard-context-switcher {
    grid-column: 1;
    grid-row: 1;
  }
  .dashboard-shell .dashboard-context-field {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px;
    padding-inline: 6px;
  }
  .dashboard-shell .dashboard-context-field > span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .dashboard-shell .dashboard-context-icon {
    width: 30px;
    height: 30px;
  }
  .dashboard-shell .side-nav {
    grid-column: 1;
    grid-row: 2;
    max-width: calc(100vw - 24px);
  }
  .dashboard-shell .sidebar-footer {
    grid-column: 1;
    grid-row: 3;
    justify-content: stretch;
  }
  .dashboard-shell .sidebar-footer :where(a, button) {
    flex: 1 1 0;
  }
  .dashboard-actions .outline-button {
    flex: 1;
  }
  .business-page-header {
    display: grid;
  }
  .business-header-actions {
    justify-content: stretch;
  }
  .business-header-actions > * {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
  .business-metrics-grid,
  .business-form-grid,
  .business-card-grid,
  .business-settings-grid,
  .business-portfolio-grid {
    grid-template-columns: 1fr;
  }
  .business-field-full {
    grid-column: auto;
  }
  .business-booking-compact {
    grid-template-columns: 82px minmax(0, 1fr);
  }
  .business-booking-compact > .business-status,
  .business-booking-compact > button {
    grid-column: 2;
  }
  .business-listing-editor,
  .business-preview-card {
    grid-template-columns: 1fr;
  }
  .business-booking-row > header {
    display: grid;
  }
  .business-propose-time {
    grid-template-columns: 1fr;
    width: 100%;
    margin-left: 0;
  }
  .business-propose-time span {
    grid-column: auto;
  }
  .business-booking-actions > button {
    flex: 1 1 calc(50% - 8px);
  }
  .business-messages-layout {
    min-height: 560px;
  }
  .business-message-composer {
    grid-template-columns: 1fr;
  }
  .business-message-composer textarea {
    grid-column: auto;
  }
  .business-inline-form {
    grid-template-columns: 1fr;
  }
  .business-reviews-list form {
    grid-template-columns: 1fr;
  }
  .business-history article {
    grid-template-columns: 1fr;
  }
  .business-history article p {
    grid-column: auto;
  }
  .business-onboarding-footer {
    justify-content: stretch;
  }
  .business-onboarding-footer button {
    flex: 1;
  }
  .business-version-history article {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .business-workspace-page *,
  .business-onboarding *,
  .business-site-ops * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Salon operations: team setup clarity, truthful readiness, and scoped access. */
.business-service-row .business-service-timing {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 12px;
  border: 1px solid #e8e3eb;
  border-radius: 13px;
  background: #faf9fb;
}

.business-service-timing > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.business-service-timing > div:first-child span,
.business-service-timing > small {
  color: #746d7a;
  font-size: 0.73rem;
}

.business-service-timing > div:first-child strong {
  color: #322c38;
  font-size: 0.92rem;
}

.business-service-timing .business-timing-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.business-timing-phases > span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #eeeaf6;
  color: #65547f;
  font-size: 0.69rem;
}

.business-timing-phases b {
  margin-right: 2px;
}

.business-week-calendar {
  min-width: 0;
  background: #fff;
}

.business-week-timeline-desktop {
  display: grid;
  grid-template-columns: 68px minmax(1015px, 1fr);
  grid-template-rows: 58px auto;
  min-width: 1083px;
  background: #fff;
}

.business-week-timeline-desktop > header {
  position: sticky;
  top: 0;
  z-index: 8;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 68px repeat(7, minmax(145px, 1fr));
  min-height: 58px;
  border-bottom: 1px solid #e7e2e9;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
}

.business-week-timeline-desktop > header > :is(span, div) {
  border-right: 1px solid #eeeaf0;
}

.business-week-timeline-desktop > header > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #746d7a;
}

.business-week-timeline-desktop > header > div > span {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.business-week-timeline-desktop > header > div > strong {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  color: #39323f;
  font-size: 0.82rem;
}

.business-week-timeline-desktop > header > div.today {
  color: #4b3880;
}

.business-week-timeline-desktop > header > div.today > strong {
  background: #6e55b7;
  color: #fff;
}

.business-week-time-axis {
  position: sticky;
  left: 0;
  z-index: 5;
  display: grid;
  grid-template-rows: repeat(
    var(--week-hours),
    var(--calendar-hour-height, 64px)
  );
  background: #fff;
}

.business-week-time-axis > time {
  padding: 8px 8px 0 0;
  border-right: 1px solid #e8e3ea;
  color: #817a86;
  font-size: 0.68rem;
  text-align: right;
  transform: translateY(-1px);
}

.business-week-day-columns {
  display: grid;
  grid-template-columns: repeat(7, minmax(145px, 1fr));
}

.business-week-day-columns > section {
  position: relative;
  min-height: var(--week-height);
  border-right: 1px solid #ebe6ed;
  background: #fff;
}

.business-week-day-columns > section.today {
  background: #fcfaff;
}

.business-week-drop-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(
    var(--week-hours),
    var(--calendar-hour-height, 64px)
  );
}

.business-week-drop-grid > div {
  border-bottom: 1px solid #f0ecf1;
}

.business-week-drop-grid > div:hover {
  background: #f5f1fb;
}

.business-week-timeline-desktop .business-week-event {
  position: absolute;
  top: calc(var(--event-top) + 3px);
  left: calc(var(--event-left) + 3px);
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 2px;
  width: calc(var(--event-width) - 6px);
  min-width: 0;
  height: calc(var(--event-height) - 5px);
  min-height: 38px;
  margin: 0;
  overflow: hidden;
  padding: 7px 8px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(47, 39, 57, 0.08);
}

.business-week-timeline-desktop
  .business-week-event
  > :is(strong, span, small) {
  overflow: hidden;
  font-size: 0.66rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-week-timeline-desktop .business-week-event > strong {
  font-size: 0.7rem;
}

.business-week-timeline-desktop .business-week-event.business-week-block {
  border: 1px solid #d8d2dc;
  border-left: 3px solid #89818f;
  background: #efedf1;
  color: #5f5865;
}

.business-week-agenda {
  display: none;
}

.business-week-agenda > section {
  overflow: hidden;
  border: 1px solid #e5e0e8;
  border-radius: 15px;
  background: #fff;
}

.business-week-agenda > section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 10px 13px;
  border-bottom: 1px solid #eeeaf0;
}

.business-week-agenda > section > header > div {
  display: grid;
  gap: 2px;
}

.business-week-agenda > section > header span {
  color: #66517f;
  font-size: 0.7rem;
  font-weight: 750;
  text-transform: uppercase;
}

.business-week-agenda > section > header strong {
  color: #39323f;
  font-size: 0.86rem;
}

.business-week-agenda > section > header > b {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #eee9f7;
  color: #654e97;
  font-size: 0.68rem;
}

.business-week-agenda > section > div {
  display: grid;
  gap: 8px;
  padding: 9px;
}

.business-week-agenda .business-calendar-booking {
  width: 100%;
  min-width: 0;
  cursor: default;
}

.business-week-agenda-block {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  min-height: 52px;
  padding: 9px;
  border-left: 4px solid #918998;
  border-radius: 9px;
  background: #f1eff2;
}

.business-week-agenda-block time {
  color: #716a77;
  font-size: 0.72rem;
}

.business-week-agenda-block > div {
  display: grid;
  gap: 2px;
}

.business-week-agenda-block span {
  color: #77707d;
  font-size: 0.7rem;
}

.business-team-card .business-team-readiness {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid #e7e2e9;
  border-radius: 14px;
  background: #fbfafc;
}

.business-team-readiness > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.business-team-readiness > header > div {
  display: grid;
  gap: 2px;
}

.business-team-readiness > header strong {
  color: #3c3543;
  font-size: 0.78rem;
}

.business-team-readiness > header span,
.business-team-readiness > header > b {
  color: #77707d;
  font-size: 0.7rem;
}

.business-team-readiness > progress {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #e9e5ec;
  accent-color: #3c9078;
}

.business-team-readiness > progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #e9e5ec;
}

.business-team-readiness > progress::-webkit-progress-value {
  border-radius: 999px;
  background: #53aa91;
}

.business-team-readiness > progress::-moz-progress-bar {
  border-radius: 999px;
  background: #53aa91;
}

.business-readiness-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.business-readiness-checks > span {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 1px 6px;
  min-width: 0;
}

.business-readiness-checks i {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid #d9d3dc;
  border-radius: 50%;
  background: #fff;
  color: #918a96;
  font-style: normal;
  font-size: 0.72rem;
}

.business-readiness-checks .complete i {
  border-color: #a6d9c9;
  background: #dff4ed;
  color: #256c57;
}

.business-readiness-checks b {
  overflow: hidden;
  color: #4b444f;
  font-size: 0.69rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-readiness-checks small {
  overflow: hidden;
  color: #817a86;
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-team-card .business-team-facts {
  display: grid;
  gap: 0;
  margin: 0;
  border-block: 1px solid #eeeaf0;
}

.business-team-facts > span {
  display: grid;
  grid-template-columns: minmax(72px, 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 7px 0;
}

.business-team-facts > span + span {
  border-top: 1px solid #f1edf2;
}

.business-team-facts small {
  color: #7c7581;
  font-size: 0.72rem;
}

.business-team-facts strong {
  overflow: hidden;
  color: #49424d;
  font-size: 0.75rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-team-facts .business-status-pill {
  justify-self: end;
}

.business-team-step-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 5px;
  border: 1px solid #e5dfe8;
  border-radius: 14px;
  background: #f6f3f8;
  list-style: none;
}

.business-team-step-rail li {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 10px;
  color: #6e6675;
}

.business-team-step-rail li > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid #d6cedd;
  border-radius: 50%;
  background: #fff;
  font-size: 0.69rem;
}

.business-team-step-rail li > b {
  overflow: hidden;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-team-step-rail li.complete {
  background: #eef8f4;
  color: #2e6f5d;
}

.business-team-step-rail li.complete > span {
  border-color: #a5d9c8;
  background: #d9f1e9;
}

.business-team-setup-section > header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.business-team-setup-section > header > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e9e3f5;
  color: #62499b;
  font-size: 0.74rem;
  font-weight: 800;
}

.business-team-setup-section > header h3 {
  margin: 0;
  color: #38313e;
  font-size: 0.92rem;
}

.business-team-setup-section > header h3 small {
  margin-left: 5px;
  color: #7a7380;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
}

.business-team-setup-section > header p {
  margin: 3px 0 0;
  color: #77707d;
  font-size: 0.76rem;
  line-height: 1.45;
}

.business-profile-photo-field > div {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.business-profile-photo-field :is(img, i) {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 2px solid #ddd4e7;
  border-radius: 50%;
  background: #ede8f5;
  color: #62499b;
  object-fit: cover;
  font-style: normal;
  font-size: 1rem;
  font-weight: 800;
}

.business-profile-photo-field input[type="file"] {
  min-width: 0;
  padding: 8px;
  font-size: 0.75rem;
}

.business-setup-inline-summary,
.business-inline-setup-empty,
.business-access-restriction-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
  padding: 12px;
  border: 1px solid #e6e1e8;
  border-radius: 12px;
  background: #fff;
}

.business-setup-inline-summary > div,
.business-inline-setup-empty,
.business-access-restriction-note {
  min-width: 0;
}

.business-setup-inline-summary > div,
.business-inline-setup-empty {
  display: grid;
  gap: 3px;
}

.business-setup-inline-summary span,
.business-inline-setup-empty span,
.business-access-restriction-note span {
  overflow-wrap: anywhere;
  color: #77707d;
  font-size: 0.75rem;
  line-height: 1.4;
}

.business-inline-setup-empty > a {
  justify-self: start;
  margin-top: 5px;
}

.business-access-restriction-note {
  display: grid;
  justify-content: stretch;
  gap: 3px;
  background: #fff8e8;
  color: #75571f;
}

.business-permission-overrides {
  overflow: hidden;
  border: 1px solid #ded7e4;
  border-radius: 14px;
  background: #fff;
}

.business-service-products {
  overflow: hidden;
  border: 1px solid #ded7e4;
  border-radius: 14px;
  background: #fff;
}

.business-service-products > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
}

.business-service-products > summary::-webkit-details-marker {
  display: none;
}

.business-service-products > summary > span {
  display: grid;
  gap: 2px;
}

.business-service-products > summary small,
.business-service-products > summary > b {
  color: #77707d;
  font-size: 0.7rem;
}

.business-service-products > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  border-top: 1px solid #ece7ee;
  background: #ece7ee;
}

.business-service-products > div > label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 9px 12px;
  background: #fff;
}

.business-service-products label > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.business-service-products label strong {
  overflow: hidden;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-service-products label small {
  color: #7c7581;
  font-size: 0.68rem;
}

.business-service-products input {
  width: 100%;
  min-height: 44px;
  padding: 0 9px;
  border: 1px solid #d8d1dd;
  border-radius: 10px;
}

.business-service-products :is(summary, input):focus-visible {
  outline: 3px solid rgba(103, 80, 184, 0.42);
  outline-offset: 2px;
}

.business-permission-overrides > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
}

.business-permission-overrides > summary::-webkit-details-marker {
  display: none;
}

.business-permission-overrides > summary::after {
  content: "⌄";
  color: #725ba9;
  font-size: 1rem;
  transition: transform 160ms ease;
}

.business-permission-overrides[open] > summary::after {
  transform: rotate(180deg);
}

.business-permission-overrides > summary > span {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.business-permission-overrides > summary small {
  color: #77707d;
  font-weight: 450;
}

.business-permission-overrides > summary > b {
  padding: 5px 8px;
  border-radius: 999px;
  background: #eee9f7;
  color: #604690;
  font-size: 0.68rem;
  white-space: nowrap;
}

.business-permission-overrides > div {
  display: grid;
  max-height: min(48vh, 480px);
  overflow-y: auto;
  border-top: 1px solid #ece7ee;
}

.business-permission-overrides > div > label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.48fr);
  align-items: center;
  gap: 15px;
  min-height: 64px;
  padding: 9px 14px;
}

.business-permission-overrides > div > label + label {
  border-top: 1px solid #f0ecf1;
}

.business-permission-overrides label > span {
  display: grid;
  gap: 2px;
}

.business-permission-overrides label strong {
  color: #48404d;
  font-size: 0.78rem;
}

.business-permission-overrides label small {
  color: #7b7481;
  font-size: 0.69rem;
  line-height: 1.35;
}

.business-permission-overrides select {
  width: 100%;
  min-height: 44px;
  padding: 0 34px 0 10px;
  border: 1px solid #d8d1dd;
  border-radius: 10px;
  background: #fff;
  color: #423b47;
}

.business-permission-overrides :is(summary, select):focus-visible {
  outline: 3px solid rgba(103, 80, 184, 0.42);
  outline-offset: 2px;
}

@media (max-width: 820px) {
  .business-week-timeline-desktop {
    display: none;
  }

  .business-week-agenda {
    display: grid;
    gap: 10px;
    padding: 10px;
  }

  .business-team-step-rail {
    grid-template-columns: repeat(4, minmax(138px, 1fr));
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
  }

  .business-team-step-rail li {
    scroll-snap-align: start;
  }
}

@media (max-width: 640px) {
  .business-readiness-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-team-card footer > :is(button, a) {
    flex: 1 1 calc(50% - 8px);
    min-height: 44px;
    justify-content: center;
  }

  .business-team-step-rail {
    margin-inline: -4px;
  }

  .business-team-setup-section {
    padding: 14px;
  }

  .business-setup-inline-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .business-setup-inline-summary > :is(button, a),
  .business-inline-setup-empty > a {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .business-permission-overrides > summary {
    align-items: flex-start;
  }

  .business-permission-overrides > summary > b {
    display: none;
  }

  .business-permission-overrides > div > label {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-block: 12px;
  }

  .business-service-products > summary {
    align-items: flex-start;
  }

  .business-service-products > summary > b {
    display: none;
  }

  .business-service-products > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .business-permission-overrides > summary::after {
    transition: none;
  }
}

/* Customer UI foundation — canonical shell, responsive layout, and rails. */
:root {
  --customer-max-width: 1760px;
  --page-gutter: 24px;
  --ink: #24212b;
  --customer-focus: #6750b8;
  --customer-violet: #67549a;
  --customer-violet-dark: #51416f;
  --customer-muted: #686270;
  --customer-line: #e2dfe5;
}

/* Customer color system. Purple denotes actions and selection; availability,
   account-role, and business status colors keep their existing semantics. */
body.customer-mode {
  --accent: #9b8abe;
  --accent-strong: #67549a;
  --accent-soft: #f3e8ff;
  --customer-violet: #67549a;
  --customer-violet-dark: #51416f;
  --customer-neon: #7d6aa8;
  --customer-neon-line: #c6bed8;
  --customer-neon-soft: #f3e8ff;
  --customer-neon-glow: rgba(103, 84, 154, 0.24);
}

body.customer-mode .solid-button.customer {
  background: linear-gradient(
    135deg,
    var(--customer-violet-dark),
    var(--customer-violet)
  );
  box-shadow: 0 14px 30px -18px var(--customer-neon-glow);
}

body.customer-mode .solid-button.customer:hover {
  background: linear-gradient(
    135deg,
    var(--customer-violet),
    var(--customer-neon)
  );
  box-shadow: 0 18px 34px -18px var(--customer-neon-glow);
}

body.customer-mode .nav-link.active,
body.customer-mode .mobile-tabbar a.active,
body.customer-mode .directory-view-switch button.active {
  color: var(--customer-violet-dark);
  background: var(--customer-neon-soft);
}

body.customer-mode .filter-chip.active,
body.customer-mode .category-scroll button.active,
body.customer-mode .quick-filters .pill.active {
  color: #fff;
  border-color: var(--customer-neon);
  background: linear-gradient(
    135deg,
    var(--customer-violet-dark),
    var(--customer-violet)
  );
}

body.customer-mode .directory-salon-row.active {
  border-color: var(--customer-neon-line);
  background: linear-gradient(135deg, #faf7ff, #f3e8ff);
  box-shadow: 0 12px 30px -20px var(--customer-neon-glow);
}

body.me-workspace-mode .me-dashboard .me-rail-avatar,
body.me-workspace-mode .me-rail-nav button b {
  background: linear-gradient(
    135deg,
    var(--customer-violet),
    var(--customer-neon)
  );
}

body.me-workspace-mode .me-rail-nav button.active {
  color: var(--customer-violet-dark);
  background: var(--customer-neon-soft);
}

body.auth-screen-mode
  .auth-panel[data-auth-surface]
  .auth-panel-heading
  .eyebrow,
body.auth-screen-mode .auth-panel[data-auth-surface] .auth-account-email button,
body.auth-screen-mode .auth-panel[data-auth-surface] .method-button .icon {
  color: var(--customer-violet);
}

body.auth-screen-mode .auth-panel[data-auth-surface] .auth-form input:focus {
  border-color: #6750b8;
  box-shadow: 0 0 0 3px rgba(103, 80, 184, 0.14);
}

body.auth-screen-mode .auth-panel[data-auth-surface] .solid-button.customer {
  background: linear-gradient(
    135deg,
    var(--customer-violet-dark),
    var(--customer-violet)
  );
}

body.auth-screen-mode
  .auth-panel[data-auth-surface]
  .solid-button.customer:hover {
  background: linear-gradient(
    135deg,
    var(--customer-violet),
    var(--customer-neon)
  );
}

/* End customer color system. */

body.customer-mode {
  color: var(--ink);
  background: #f8f8f6;
}

.customer-shell {
  min-width: 0;
  overflow: visible;
}

.customer-topbar {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: max(
    var(--page-gutter),
    calc((100vw - var(--customer-max-width)) / 2)
  );
}

.page-wrap,
body.salon-directory-mode .page-wrap,
body.tryon-workspace-mode .page-wrap,
body.me-workspace-mode .page-wrap {
  width: min(
    calc(100% - var(--page-gutter) - var(--page-gutter)),
    var(--customer-max-width)
  );
  margin-inline: auto;
}

.customer-topbar .brand,
.customer-topbar .primary-nav,
.customer-topbar .top-actions {
  flex: 0 0 auto;
}

.customer-topbar .primary-nav {
  max-width: 100%;
}

.customer-topbar .top-actions {
  min-width: max-content;
}

.eyebrow,
.discover-page .eyebrow,
.me-dashboard .eyebrow {
  color: var(--customer-violet-dark);
  font-size: max(0.78rem, 12.5px);
  letter-spacing: 0.06em;
}

:where(.customer-shell, .salon-site-shell, .auth-screen)
  :where(
    button,
    a,
    input,
    select,
    textarea,
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
  outline: 3px solid var(--customer-focus);
  outline-offset: 3px;
}

[data-scroll-track] {
  min-width: 0;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 10px;
  scrollbar-color: rgba(103, 84, 154, 0.38) transparent;
  scrollbar-width: thin;
}

[data-scroll-track]:focus-visible {
  outline: 0;
  border-radius: 14px;
  box-shadow: 0 0 0 3px rgba(103, 80, 184, 0.22);
}

[data-scroll-track]::-webkit-scrollbar {
  height: 7px;
}

[data-scroll-track]::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(103, 84, 154, 0.34);
  background-clip: padding-box;
}

.horizontal-choice-rail,
.directory-filter-bar {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 3px 8px;
}

.horizontal-choice-rail > *,
.directory-filter-bar > * {
  flex: 0 0 auto;
}

.customer-main-grid {
  gap: clamp(16px, 1.6vw, 26px);
}

.search-panel,
.visual-panel {
  min-height: clamp(400px, 34vw, 520px);
  border-radius: 24px;
}

.search-panel {
  padding: clamp(30px, 4vw, 64px);
  background: linear-gradient(135deg, #fff 0%, #f5f1fc 100%);
}

.search-copy h1 {
  max-width: 15ch;
  color: var(--ink);
  font-size: clamp(2.4rem, 4vw, 4.5rem);
  letter-spacing: -0.048em;
  line-height: 0.98;
}

.hero-search {
  min-height: 60px;
  border-color: var(--customer-line);
  box-shadow: 0 12px 32px rgba(45, 36, 67, 0.07);
}

.quick-filters {
  width: 100%;
  max-width: 100%;
}

.quick-filters .pill {
  min-height: 40px;
  color: #57449c;
  background: rgba(255, 255, 255, 0.86);
}

.quick-filters .pill.active {
  color: #fff;
  border-color: var(--customer-violet);
  background: var(--customer-violet);
}

.discover-page {
  gap: clamp(48px, 5vw, 78px);
  padding-bottom: 48px;
}

.discover-marketplace,
.discover-reviews {
  gap: 20px;
}

.discover-marketplace-heading,
.discover-row-heading {
  align-items: center;
}

.discover-marketplace > .discover-marketplace-heading {
  justify-content: flex-start;
}

.discover-marketplace-heading h2 {
  color: var(--ink);
  font-size: clamp(1.85rem, 2.5vw, 2.7rem);
  letter-spacing: -0.035em;
}

.result-count {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid var(--customer-line);
  border-radius: 999px;
  padding: 0 12px;
  color: #544e5b;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 760;
  white-space: nowrap;
}

.discovery-toolbar {
  min-width: 0;
  margin: 0;
}

.discovery-toolbar-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.discovery-toolbar-primary,
.discovery-toolbar-secondary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.discovery-toolbar-row > .ghost-button,
.discovery-toolbar-row > .discovery-toolbar-secondary {
  margin-left: 0;
}

.discovery-filter-trigger {
  min-width: 108px;
}

.filter-count {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--customer-violet);
  font-size: 0.72rem;
}

.discovery-sort {
  display: grid;
  grid-template-columns: auto minmax(150px, 220px);
  align-items: center;
  gap: 9px;
  color: #625c68;
  font-size: 0.8rem;
}

.discovery-sort select {
  min-height: 44px;
  padding-inline: 12px 34px;
}

.discovery-save-search {
  min-height: 44px;
  color: #554d60;
  background: #fff;
}

.discovery-filter-panel {
  grid-template-columns: repeat(5, minmax(150px, 1fr)) auto;
  margin-top: 12px;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(36, 33, 43, 0.08);
}

.discover-salon-list {
  gap: clamp(32px, 3.4vw, 50px);
}

.discover-salon-section {
  gap: 12px;
}

.discover-row-heading h2 {
  color: var(--ink);
  font-size: clamp(1.28rem, 1.7vw, 1.65rem);
  letter-spacing: -0.02em;
}

.discover-row-heading p {
  margin-top: 3px;
  font-size: 0.88rem;
  line-height: 1.45;
}

.discover-salon-track,
.discover-review-track {
  margin: 0;
  padding: 10px 2px 17px;
}

.discover-salon-track {
  grid-auto-columns: clamp(320px, 29vw, 390px);
  gap: 16px;
}

.discover-review-track {
  gap: 16px;
}

.discover-salon-card {
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(36, 33, 43, 0.07);
}

.discover-salon-card:focus-within {
  border-color: rgba(104, 82, 184, 0.45);
}

.discover-card-media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.discover-card-media-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discover-card-title-link {
  border-radius: 4px;
}

.discover-heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.discover-review-card {
  animation: none !important;
}

.carousel-nav-button {
  width: 44px;
  height: 44px;
  box-shadow: 0 5px 16px rgba(36, 33, 43, 0.08);
}

/* Salon directory control hierarchy. */
.salon-directory-page {
  gap: 12px;
}

.salon-directory-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 16px 18px;
  border-radius: 18px;
}

.directory-controls-header {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(340px, 560px);
  align-items: center;
  gap: 24px;
}

.directory-title-copy {
  gap: 3px;
}

.directory-title-copy h1 {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.directory-title-copy p {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--customer-muted);
  font-size: 0.82rem;
}

.directory-title-copy p strong {
  color: #4d4654;
}

.directory-search {
  width: 100%;
  min-height: 50px;
}

.directory-category-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  border-block: 1px solid #efedf0;
  padding-block: 8px 2px;
}

.directory-category-row > span {
  align-self: start;
  padding-top: 10px;
  color: #625c68;
  font-size: 0.78rem;
  font-weight: 760;
  white-space: nowrap;
}

.directory-filter-bar {
  grid-row: auto;
  grid-column: auto;
  margin: 0;
}

.salon-directory-controls > .discovery-toolbar {
  grid-column: 1 / -1;
}

.salon-directory-controls .discovery-toolbar-row {
  justify-content: space-between;
}

.salon-map-directory {
  grid-template-columns: minmax(540px, 0.82fr) minmax(0, 1.18fr);
  gap: 12px;
}

.salon-directory-panel,
.directory-map-panel {
  border-radius: 18px;
}

.directory-list {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 10px;
  padding: 2px 4px 40px 2px;
}

.directory-salon-row {
  grid-template-columns: 132px minmax(0, 1fr) minmax(150px, auto) !important;
  min-height: 128px;
  align-content: center;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
}

.directory-salon-row .salon-thumb {
  width: 132px !important;
  height: 108px !important;
  min-height: 0;
  border: 0;
  border-radius: 11px;
  padding: 0;
  background-position: center;
  background-size: cover;
}

.directory-salon-heading h3 a {
  border-radius: 4px;
}

.directory-salon-row .directory-meta b {
  white-space: nowrap;
}

.directory-actions {
  display: grid;
  grid-template-columns: 44px minmax(96px, 1fr);
  align-self: center;
  gap: 7px;
}

.directory-actions .directory-detail-button {
  grid-column: 1 / -1;
}

/* Public salon pages retain marketplace context without adding a second nav. */
.salon-site-nav {
  display: grid;
  grid-template-columns: minmax(280px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding-inline: max(20px, calc((100vw - 1440px) / 2));
}

.salon-site-nav-context {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.salon-site-back {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 10px;
  padding: 0 8px;
  color: color-mix(in srgb, var(--site-primary) 78%, #3d3941);
  background: transparent;
  font-weight: 760;
}

.salon-site-back .icon {
  transform: rotate(180deg);
}

.salon-site-brand {
  min-width: 0;
  justify-content: flex-start;
}

.salon-site-brand strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salon-site-section {
  scroll-margin-top: 92px;
}

.media-provenance,
.site-gallery-grid figcaption {
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Shared state surfaces. */
.customer-not-found {
  display: grid;
  width: min(720px, 100%);
  min-height: 460px;
  place-content: center;
  justify-items: start;
  gap: 14px;
  margin: 36px auto 80px;
  padding: clamp(28px, 6vw, 64px);
  border-radius: 24px;
  background: #fff;
}

.customer-not-found > span {
  color: #d8d2e6;
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 850;
  line-height: 0.8;
}

.customer-not-found h1 {
  width: auto;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: -0.04em;
}

.customer-not-found > p:not(.eyebrow) {
  max-width: 48ch;
  color: var(--customer-muted);
  line-height: 1.6;
}

.tryon-lightbox-panel,
.tryon-camera-dialog,
.appointment-dialog-card {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
}

.booking-reference-tabs {
  max-width: 100%;
  overflow-x: auto;
}

.booking-multi-services .choice-card p {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.me-workspace-mode .me-workspace,
body.tryon-workspace-mode .tryon-stage,
body.salon-directory-mode .directory-list {
  scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom));
}

@media (min-width: 769px) and (max-width: 1050px) {
  .customer-topbar {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
  }

  .customer-topbar .brand {
    min-width: 160px;
  }

  .customer-topbar .primary-nav {
    display: flex;
    grid-column: auto;
    order: initial;
    width: auto;
    padding: 4px;
  }

  .customer-topbar .primary-nav .nav-link {
    padding-inline: 9px;
    font-size: 0.84rem;
  }

  .customer-topbar .top-actions {
    margin-left: auto;
  }

  .discovery-filter-panel {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

@media (max-width: 940px) {
  .customer-main-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .search-panel,
  .visual-panel {
    min-height: 0;
  }

  .visual-panel {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 8;
  }

  .salon-map-directory {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --page-gutter: 14px;
  }

  .customer-topbar {
    min-height: 62px;
    padding: 8px var(--page-gutter);
  }

  .customer-topbar .brand {
    min-width: 0;
  }

  .page-wrap,
  body.salon-directory-mode .page-wrap,
  body.tryon-workspace-mode .page-wrap,
  body.me-workspace-mode .page-wrap {
    width: min(
      calc(100% - var(--page-gutter) - var(--page-gutter)),
      var(--customer-max-width)
    );
  }

  .mobile-tabbar {
    right: 10px;
    left: 10px;
    border-radius: 20px;
    padding: 5px;
  }

  .mobile-tabbar a {
    min-height: 56px;
    font-size: 0.72rem;
  }

  .discover-page {
    gap: 48px;
  }

  .search-panel {
    gap: 16px;
    padding: 24px 20px;
  }

  .search-copy h1 {
    font-size: clamp(2rem, 10vw, 3.1rem);
    line-height: 1;
  }

  .hero-search {
    min-height: 56px;
  }

  .quick-filters {
    margin-inline: -3px;
  }

  .quick-filters .pill {
    min-height: 42px;
  }

  .visual-panel {
    height: clamp(220px, 68vw, 300px);
    aspect-ratio: auto;
  }

  .discover-marketplace-heading,
  .discover-row-heading {
    align-items: flex-start;
  }

  .discover-marketplace-heading {
    gap: 12px;
  }

  .discover-marketplace-heading h2 {
    font-size: 1.85rem;
  }

  .result-count {
    margin-top: 18px;
  }

  .discovery-toolbar-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
  }

  .discovery-toolbar-primary,
  .discovery-toolbar-secondary {
    display: contents;
  }

  .discovery-filter-trigger {
    grid-column: 1;
    grid-row: 1;
    min-width: 108px;
  }

  .discovery-sort {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
  }

  .discovery-sort > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .directory-view-switch {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    grid-template-columns: repeat(2, minmax(64px, 1fr));
  }

  .directory-split-option {
    display: none;
  }

  .discovery-save-search {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
  }

  .discovery-toolbar-home .discovery-save-search {
    grid-column: 1 / -1;
  }

  .discovery-filter-panel {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .discover-salon-track {
    grid-auto-columns: min(84vw, 340px);
    gap: 12px;
  }

  .discover-row-heading p {
    max-width: 36ch;
  }

  .horizontal-scroll-controls {
    gap: 6px;
  }

  .salon-directory-controls {
    gap: 8px;
    padding: 12px;
  }

  .directory-controls-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .directory-title-copy h1 {
    font-size: 1.45rem;
  }

  .directory-title-copy p {
    font-size: 0.78rem;
  }

  .directory-search {
    min-height: 48px;
  }

  .directory-category-row {
    display: block;
    padding-block: 4px 0;
  }

  .directory-category-row > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .directory-filter-bar {
    padding-bottom: 7px;
  }

  body.salon-directory-mode .page-wrap {
    height: 100%;
    padding: 8px 0 10px;
  }

  body.salon-directory-mode .salon-directory-page,
  body.salon-directory-mode .salon-map-directory,
  body.salon-directory-mode .salon-directory-panel {
    min-height: 0;
  }

  body.salon-directory-mode .directory-list {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  .directory-view-split .directory-map-panel,
  .directory-view-list .directory-map-panel {
    display: none !important;
  }

  .directory-view-map .directory-map-panel {
    display: block !important;
    min-height: 0;
    height: 100%;
  }

  .directory-salon-row {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    min-height: 180px;
    gap: 10px;
  }

  .directory-salon-row .salon-thumb {
    width: 92px !important;
    height: 112px !important;
  }

  .directory-actions {
    grid-column: 1 / -1;
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
  }

  .directory-actions .directory-detail-button {
    grid-column: auto;
  }

  .salon-site-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 68px;
    padding: 10px 12px;
  }

  .salon-site-nav-context {
    overflow: hidden;
  }

  .salon-site-back {
    padding: 0;
  }

  .salon-site-back span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .salon-site-brand {
    gap: 8px;
  }

  .salon-site-brand span {
    width: 38px;
    height: 38px;
  }

  .salon-site-nav nav,
  .salon-site-actions .icon-button {
    display: none;
  }

  .salon-site-book {
    width: auto;
    min-width: 132px;
    padding-inline: 11px;
  }

  .site-hero {
    min-height: 0;
    padding-top: 34px !important;
  }

  body.tryon-workspace-mode .tryon-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }

  body.tryon-workspace-mode .tryon-hero-copy {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
  }

  body.tryon-workspace-mode .tryon-hero-copy .eyebrow {
    margin-right: 8px;
  }

  body.tryon-workspace-mode .tryon-hero h1 {
    width: auto;
    padding: 0;
    border: 0;
    color: var(--ink);
    background: transparent;
    font-size: 1.12rem;
  }

  body.tryon-workspace-mode .tryon-stage,
  body.me-workspace-mode .me-workspace {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  .tryon-footer {
    scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  body.tryon-workspace-mode .tryon-footer,
  .booking-tryon-embedded .tryon-footer {
    position: static;
    bottom: auto;
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(126, 104, 196, 0.1);
    background: transparent;
    backdrop-filter: none;
  }

  .booking-reference-tabs {
    width: 100%;
  }

  body.booking-workspace-mode .booking-main select,
  body.booking-workspace-mode .booking-main input,
  body.booking-workspace-mode .booking-main button {
    min-height: 44px;
  }

  body.me-workspace-mode .me-dashboard {
    width: 100%;
  }

  .auth-workspace {
    padding-inline: 18px;
  }

  .customer-not-found {
    min-height: 400px;
    margin-top: 16px;
  }
}

@media (max-width: 420px) {
  :root {
    --page-gutter: 10px;
  }

  .customer-topbar {
    padding-inline: 12px;
  }

  .search-panel {
    padding-inline: 16px;
  }

  .visual-panel {
    height: 210px;
  }

  .discover-marketplace-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .discover-marketplace-heading h2 {
    font-size: 1.7rem;
  }

  .result-count {
    min-height: 30px;
    margin-top: 16px;
    padding-inline: 9px;
    font-size: 0.72rem;
  }

  .discover-row-heading .horizontal-scroll-controls .previous {
    display: none;
  }

  .salon-site-book {
    min-width: 116px;
    font-size: 0.78rem;
  }
}

@media (max-width: 340px) {
  :root {
    --page-gutter: 8px;
  }

  .discovery-toolbar-row {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .discovery-filter-trigger {
    min-width: 104px;
    padding-inline: 9px;
  }

  .discovery-save-search {
    font-size: 0.78rem;
  }

  .directory-salon-row {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  .directory-salon-row .salon-thumb {
    width: 76px !important;
    height: 102px !important;
  }
}

@media (min-width: 769px) {
  .discover-marketplace {
    width: min(1500px, calc(100% - clamp(56px, 8vw, 160px)));
    margin-inline: auto;
  }

  .discover-salon-track,
  .discover-review-track {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-scroll-track] {
    scroll-behavior: auto !important;
  }
}

/* Customer marketplace refinements — compact filters and visual salon cards. */
.discovery-toolbar-home {
  display: grid;
  gap: 12px;
}

.discovery-toolbar-home .discovery-toolbar-row {
  justify-content: flex-start;
}

.discovery-toolbar-home .discovery-filter-inline {
  position: static;
  grid-template-columns: repeat(5, minmax(140px, 1fr)) auto;
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(36, 33, 43, 0.05);
}

.discovery-filter-panel-heading,
.discovery-filter-popover-header {
  grid-column: 1 / -1;
}

.discovery-filter-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.discovery-filter-popover-header strong {
  color: var(--ink);
  font-size: 1rem;
}

.discovery-clear-filters {
  align-self: end;
}

.salon-directory-controls {
  position: relative;
  gap: 10px;
  padding: 12px 16px;
}

.directory-controls-header {
  min-height: 48px;
}

.directory-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.directory-title-line > strong {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid var(--customer-line);
  border-radius: 999px;
  padding: 0 10px;
  color: #5d5664;
  background: #fff;
  font-size: 0.75rem;
  white-space: nowrap;
}

.directory-command-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border-top: 1px solid #efedf0;
  padding-top: 9px;
}

.directory-command-row > .directory-filter-bar {
  min-width: 0;
  padding-block: 1px 5px;
}

.directory-command-row > .discovery-toolbar {
  display: contents;
}

.directory-command-row .discovery-toolbar-row {
  grid-column: 2;
  justify-content: flex-end;
  gap: 8px;
}

.discovery-toolbar-directory .discovery-sort {
  grid-template-columns: minmax(150px, 188px);
}

.discovery-toolbar-directory .discovery-sort > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.discovery-toolbar-directory .discovery-save-search {
  width: 44px;
  min-width: 44px;
}

.discovery-toolbar-directory .discovery-filter-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  z-index: 180;
  width: min(940px, calc(100% - 32px));
  margin: 0;
  padding: 18px;
  border-color: rgba(104, 82, 184, 0.22);
  box-shadow: 0 24px 60px rgba(36, 33, 43, 0.18);
}

.salon-map-directory {
  grid-template-columns: minmax(760px, 1.08fr) minmax(0, 0.92fr);
}

.directory-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px;
  padding: 2px 5px 42px 2px;
}

.directory-salon-row {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 0;
  align-content: start;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
}

.directory-salon-row .salon-thumb {
  width: 100% !important;
  height: clamp(200px, 13vw, 245px) !important;
  border-radius: 13px;
}

.directory-salon-row .salon-row-main {
  min-height: 98px;
  align-content: start;
  padding-inline: 2px;
}

.directory-salon-row .tag-row {
  flex-wrap: wrap;
  overflow: visible;
}

.directory-actions {
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
}

.directory-actions .directory-detail-button {
  grid-column: auto;
}

.directory-view-list .salon-map-directory {
  grid-template-columns: minmax(0, 1fr) !important;
}

.directory-view-map .salon-map-directory {
  grid-template-columns: minmax(0, 1fr) !important;
}

.tryon-camera-upload {
  position: relative;
  overflow: hidden;
}

.tryon-camera-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1180px) {
  .salon-map-directory {
    grid-template-columns: minmax(500px, 0.95fr) minmax(0, 1.05fr);
  }

  .directory-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .directory-salon-row {
    grid-template-columns: 160px minmax(0, 1fr) !important;
    align-items: center;
    min-height: 150px;
  }

  .directory-salon-row .salon-thumb {
    width: 160px !important;
    height: 128px !important;
  }

  .directory-salon-row .salon-row-main {
    min-height: 0;
  }

  .directory-actions {
    grid-column: 1 / -1;
  }

  .directory-command-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .directory-command-row .discovery-toolbar-row {
    grid-column: 1;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .discovery-toolbar-home .discovery-toolbar-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .discovery-toolbar-home .discovery-sort {
    grid-column: 1;
    grid-row: 1;
  }

  .discovery-toolbar-home .discovery-save-search {
    grid-column: 2;
    grid-row: 1;
    width: auto;
  }

  .discovery-toolbar-home .discovery-filter-inline {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 10px;
    scrollbar-width: thin;
  }

  .discovery-toolbar-home .discovery-filter-inline > label {
    flex: 0 0 164px;
  }

  .discovery-toolbar-home .discovery-filter-inline > button {
    flex: 0 0 auto;
    align-self: end;
  }

  .directory-controls-header {
    gap: 8px;
  }

  .directory-title-line {
    justify-content: space-between;
  }

  .directory-command-row {
    gap: 7px;
    padding-top: 7px;
  }

  .directory-command-row .discovery-toolbar-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
  }

  .discovery-toolbar-directory .discovery-filter-trigger {
    grid-column: 1;
    grid-row: 1;
  }

  .discovery-toolbar-directory .discovery-sort {
    grid-column: 2;
    grid-row: 1;
  }

  .discovery-toolbar-directory .directory-view-switch {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .discovery-toolbar-directory .discovery-toolbar-secondary {
    display: none;
  }

  .discovery-toolbar-directory .discovery-filter-popover {
    position: fixed;
    top: auto;
    right: 10px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
    max-height: min(70dvh, 620px);
    overflow-y: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px;
  }

  .directory-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px;
  }

  .directory-salon-row {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    min-height: 180px;
  }

  .directory-salon-row .salon-thumb {
    width: 92px !important;
    height: 112px !important;
  }

  .directory-salon-row .salon-row-main {
    min-height: 0;
  }

  .directory-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .discovery-toolbar-directory .discovery-filter-popover {
    grid-template-columns: minmax(0, 1fr);
  }

  .directory-salon-row {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  .directory-salon-row .salon-thumb {
    width: 76px !important;
    height: 102px !important;
  }
}

/* Salon directory: collapsed filter tray and image-level save control. */
.directory-controls-header {
  grid-template-columns: minmax(220px, 1fr) minmax(440px, 680px);
}

.directory-search-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.directory-filter-row-trigger {
  position: relative;
  min-width: 112px;
  min-height: 50px;
  padding-inline: 15px;
  white-space: nowrap;
}

.directory-filter-row-trigger[aria-expanded="true"] {
  border-color: rgba(104, 82, 184, 0.42);
  color: #503d9a;
  background: #f2eefc;
}

.directory-filter-row-trigger .filter-count {
  display: inline-grid;
  min-width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 999px;
  color: white;
  background: #6550b7;
  font-size: 0.7rem;
  line-height: 1;
}

.directory-filter-disclosure {
  display: grid;
  min-height: 0;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    grid-template-rows 240ms cubic-bezier(0.2, 0.75, 0.25, 1),
    opacity 180ms ease,
    transform 240ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.directory-filter-disclosure > .directory-command-row {
  min-height: 0;
  overflow: hidden;
}

.directory-filter-disclosure.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
}

.directory-filter-disclosure.is-open > .directory-command-row {
  overflow: visible;
}

.discovery-toolbar-directory .discovery-filter-popover {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top right;
  transition:
    visibility 0s linear 180ms,
    opacity 180ms ease,
    transform 200ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.discovery-toolbar-directory .discovery-filter-popover.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.salon-directory-controls {
  z-index: 500;
  overflow: visible;
}

.salon-map-directory {
  position: relative;
  z-index: 1;
}

.directory-salon-media {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 13px;
}

.directory-salon-media .directory-salon-thumb {
  display: block;
}

.directory-media-save {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-color: rgba(255, 255, 255, 0.82);
  color: #40394a;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(26, 22, 36, 0.16);
  backdrop-filter: blur(12px);
}

.directory-media-save:hover {
  color: #5d47ac;
  background: white;
}

.directory-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.directory-actions .directory-detail-button {
  grid-column: auto;
}

body.salon-directory-mode .toast {
  top: max(86px, calc(env(safe-area-inset-top) + 76px));
  right: max(16px, var(--page-gutter));
  bottom: auto;
}

@media (max-width: 1180px) {
  .directory-controls-header {
    grid-template-columns: minmax(180px, 0.75fr) minmax(380px, 1.25fr);
  }

  .directory-salon-media {
    width: 160px;
  }
}

@media (max-width: 768px) {
  .directory-controls-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .directory-search-actions {
    grid-template-columns: minmax(0, 1fr) 50px;
  }

  .directory-filter-row-trigger {
    width: 50px;
    min-width: 50px;
    padding: 0;
  }

  .directory-filter-row-trigger > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .directory-filter-row-trigger .filter-count {
    position: absolute;
    top: -5px;
    right: -5px;
  }

  .directory-salon-media {
    width: 92px;
  }

  .directory-media-save {
    top: 6px;
    right: 6px;
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  .directory-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.salon-directory-mode .toast {
    top: max(76px, calc(env(safe-area-inset-top) + 68px));
    right: 12px;
    left: 12px;
    justify-content: center;
    max-width: none;
  }
}

@media (max-width: 420px) {
  .directory-salon-media {
    width: 76px;
  }

  .directory-media-save {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .directory-filter-disclosure,
  .discovery-toolbar-directory .discovery-filter-popover {
    transition: none !important;
  }
}

.tryon-style-scroll,
.tryon-color-scroll {
  scroll-behavior: auto;
  scroll-snap-type: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.tryon-audience-lock {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(47, 118, 96, 0.2);
  border-radius: 999px;
  padding: 0 13px;
  color: #286f5c;
  background: #edf8f4;
  font-size: 0.76rem;
  font-weight: 800;
}

.tryon-audience-lock .icon {
  width: 16px;
  height: 16px;
}

.tryon-compatible-empty {
  display: flex;
  min-height: 108px;
  align-items: center;
  gap: 12px;
  border: 1px dashed rgba(104, 82, 184, 0.25);
  border-radius: 12px;
  padding: 18px;
  color: #5f5868;
  background: #faf8fd;
}

.tryon-compatible-empty > div {
  display: grid;
  gap: 3px;
}

.tryon-compatible-empty strong {
  color: var(--ink);
}

.tryon-compatible-empty span {
  font-size: 0.8rem;
}

.business-style-link-summary {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(31, 117, 128, 0.18);
  border-radius: 14px;
  padding: 14px;
  background: #f4faf9;
}

.business-style-link-summary > div:first-child {
  display: grid;
  gap: 3px;
}

.business-style-link-summary span,
.business-style-link-summary small {
  color: #617276;
  font-size: 0.74rem;
}

.business-style-link-summary strong {
  color: #174f56;
  font-size: 0.92rem;
}

.business-style-link-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.business-style-link-chips span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(31, 117, 128, 0.14);
  border-radius: 999px;
  padding: 0 9px;
  color: #315f64;
  background: white;
  font-weight: 750;
}

@media (max-width: 640px) {
  .tryon-audience-lock {
    align-self: flex-start;
    border-radius: 12px;
  }
}

/* My Hair appointment command center. */
.me-appointments-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
}

.me-appointments-actions > button {
  min-height: 44px;
  white-space: nowrap;
}

.customer-appointment-feature {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) minmax(230px, 34%);
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ded9e8;
  border-radius: 16px;
  background: linear-gradient(135deg, #fcfbfe 0%, #fff 68%);
  box-shadow: 0 14px 34px rgba(53, 42, 79, 0.07);
}

.customer-appointment-feature-date {
  display: grid;
  align-content: center;
  justify-items: center;
  border-right: 1px solid #e7e2ed;
  color: #fff;
  background: #6651b2;
}

.customer-appointment-feature-date span,
.customer-appointment-feature-date small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.7rem;
  font-weight: 820;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.customer-appointment-feature-date strong {
  margin: 5px 0;
  color: #fff;
  font-size: 2.8rem;
  line-height: 0.95;
}

.customer-appointment-feature-copy {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 7px;
  padding: 24px;
}

.customer-appointment-feature-heading {
  display: flex;
  align-items: center;
  gap: 9px;
}

.customer-appointment-feature-heading > small {
  color: #77717d;
  font-size: 0.69rem;
  font-weight: 800;
  text-transform: uppercase;
}

.customer-appointment-feature-copy h2,
.customer-appointment-feature-copy h3,
.customer-appointment-feature-copy p {
  margin: 0;
}

.customer-appointment-feature-copy h2 {
  color: #29252f;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.15;
}

.customer-appointment-feature-copy h3 {
  color: #4b4352;
  font-size: 0.95rem;
}

.customer-appointment-feature-copy p,
.customer-appointment-feature-meta span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: #6f6974;
  font-size: 0.76rem;
  line-height: 1.4;
}

.customer-appointment-feature-copy p .icon,
.customer-appointment-feature-meta .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: #6b58ad;
}

.customer-appointment-feature-copy .customer-appointment-pending-change {
  display: inline-flex;
  width: fit-content;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid #d9cfeb;
  border-radius: 9px;
  color: #4f3d80;
  background: #f5f1fb;
}

.customer-appointment-pending-change strong,
.customer-appointment-row-proposal strong {
  color: #684ead;
  font-size: 0.64rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.customer-appointment-time-visual {
  display: grid;
  grid-template-columns: max-content minmax(80px, 1fr) max-content auto;
  align-items: center;
  gap: 8px;
  margin: 5px 0 2px;
}

.customer-appointment-time-visual > time {
  color: #302a35;
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

.customer-appointment-time-visual > span {
  position: relative;
  display: block;
  height: 7px;
  border-radius: 999px;
  background: #e8e3ee;
}

.customer-appointment-time-visual > span::before,
.customer-appointment-time-visual > span::after {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #6751b5;
  box-shadow: 0 0 0 1px #6751b5;
  content: "";
  transform: translateY(-50%);
}

.customer-appointment-time-visual > span::before {
  left: 0;
}
.customer-appointment-time-visual > span::after {
  right: 0;
  background: #55bba3;
  box-shadow: 0 0 0 1px #55bba3;
}

.customer-appointment-time-visual > span i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #6751b5, #55bba3);
}

.customer-appointment-time-visual > small {
  color: #86808b;
  font-size: 0.67rem;
  font-weight: 750;
  white-space: nowrap;
}

.customer-appointment-feature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.customer-appointment-feature-copy .button-row {
  margin-top: 5px;
}

.customer-appointment-map,
.customer-appointment-map-fallback {
  position: relative;
  min-width: 0;
  min-height: 260px;
  overflow: hidden;
  border-left: 1px solid #e4e0e8;
  background: #e9eeeb;
}

.customer-appointment-map iframe {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
  filter: saturate(0.72) contrast(0.96);
}

.customer-appointment-map > span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 9px;
  padding: 8px 10px;
  color: #312c36;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 6px 18px rgba(41, 47, 45, 0.12);
  font-size: 0.68rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-appointment-map > span .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #6751b5;
}

.customer-appointment-map-fallback {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: #77717d;
  background: #f2f3f2;
  font-size: 0.76rem;
}

.me-later-appointments {
  display: grid;
  gap: 8px;
  border-top: 1px solid #e9e6ec;
  padding-top: 18px;
}

.me-later-appointments .me-section-heading h3 {
  margin: 3px 0 0;
  color: #302c35;
  font-size: 1rem;
}

.me-past-appointments {
  animation: mePastAppointmentsIn 240ms ease-out both;
  scroll-margin-top: 18px;
}

@keyframes mePastAppointmentsIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.me-past-appointments .customer-appointment-row {
  border-left: 4px solid transparent;
  padding-left: 14px;
}

.me-past-appointments .customer-appointment-row.status-completed,
.me-past-appointments .customer-appointment-row.status-review {
  border-left-color: #56b79f;
  background: linear-gradient(90deg, rgba(86, 183, 159, 0.07), transparent 34%);
}

.me-past-appointments .customer-appointment-row.status-cancelled,
.me-past-appointments .customer-appointment-row.status-declined {
  border-left-color: #d58990;
  background: linear-gradient(
    90deg,
    rgba(213, 137, 144, 0.08),
    transparent 34%
  );
}

.me-past-appointments .customer-appointment-row.status-no_show {
  border-left-color: #b94f5c;
  background: linear-gradient(90deg, rgba(185, 79, 92, 0.1), transparent 36%);
}

.status-badge.status-requested {
  color: #66539f;
  background: #eee9fa;
}
.status-badge.status-proposed {
  color: #86651a;
  background: #fff1c8;
}
.status-badge.status-booked,
.status-badge.status-confirmed {
  color: #26725f;
  background: #e5f5ef;
}
.status-badge.status-checked_in,
.status-badge.status-in_progress {
  color: #2d648c;
  background: #e7f2fa;
}
.status-badge.status-completed,
.status-badge.status-review {
  color: #227562;
  background: #ddf3eb;
}
.status-badge.status-cancelled,
.status-badge.status-declined,
.status-badge.status-no_show {
  color: #963945;
  background: #fae5e7;
}

.appointment-dialog-card {
  max-height: min(820px, calc(100dvh - 48px));
}

@media (max-width: 900px) {
  .customer-appointment-feature {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .customer-appointment-map,
  .customer-appointment-map-fallback {
    grid-column: 1 / -1;
    min-height: 180px;
    border-top: 1px solid #e4e0e8;
    border-left: 0;
  }

  .customer-appointment-map iframe {
    min-height: 180px;
  }
}

@media (max-width: 620px) {
  .me-page-header .me-appointments-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .me-appointments-actions > button {
    width: 100%;
    min-width: 0;
    min-height: 46px !important;
    padding-inline: 10px;
  }

  .customer-appointment-feature {
    grid-template-columns: 72px minmax(0, 1fr);
    border-radius: 13px;
  }

  .customer-appointment-feature-date strong {
    font-size: 2.25rem;
  }

  .customer-appointment-feature-copy {
    padding: 18px 14px;
  }

  .customer-appointment-time-visual {
    grid-template-columns: max-content minmax(54px, 1fr) max-content;
  }

  .customer-appointment-time-visual > small {
    grid-column: 1 / -1;
  }

  .customer-appointment-feature-copy .button-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .customer-appointment-feature-copy .button-row > button {
    width: 100%;
  }

  .customer-appointment-map,
  .customer-appointment-map-fallback,
  .customer-appointment-map iframe {
    min-height: 160px;
  }

  .me-past-appointments .customer-appointment-row {
    padding-left: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .me-past-appointments {
    animation: none;
  }
}

/* Unified customer + professional account experience */
.auth-confirmation-state {
  display: grid;
  align-content: start;
  gap: 16px;
  width: 100%;
  padding-block: 8px;
}

.auth-confirmation-state h1,
.auth-confirmation-state p {
  margin: 0;
}

.auth-confirmation-state > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.65;
}

.auth-confirmation-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 22%, white);
  border-radius: 18px;
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.auth-confirmation-icon .icon {
  width: 26px;
  height: 26px;
}

.auth-confirmation-steps {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fcfbfd;
}

.auth-confirmation-steps > span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 32px;
  color: #5e5767;
  font-size: 0.88rem;
}

.auth-confirmation-steps b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  background: var(--accent-strong);
  font-size: 0.74rem;
}

.auth-confirmation-existing {
  padding: 12px 13px;
  border-left: 3px solid var(--pro-accent-strong);
  border-radius: 0 10px 10px 0;
  color: #54645f !important;
  background: var(--pro-accent-soft);
  font-size: 0.8rem;
}

.auth-confirmation-message {
  padding: 10px 12px;
  border-radius: 10px;
  color: #286c57 !important;
  background: #e8f7f1;
  font-size: 0.84rem;
  font-weight: 700;
}

.auth-confirmation-message.error {
  color: #943f4b !important;
  background: #fceced;
}

.auth-confirmation-actions {
  display: grid;
  gap: 8px;
}

.pro-account-type-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pro-account-type-picker > button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 2px 10px;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--pro-line);
  border-radius: 14px;
  color: var(--pro-text);
  text-align: left;
  background: #fff;
}

.pro-account-type-picker > button > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--pro-accent-strong);
  background: var(--pro-accent-soft);
}

.pro-account-type-picker .icon {
  width: 19px;
  height: 19px;
}

.pro-account-type-picker strong {
  align-self: end;
  font-size: 0.9rem;
}

.pro-account-type-picker small {
  grid-column: 1 / -1;
  margin-top: 5px;
  color: var(--pro-muted);
  line-height: 1.4;
}

.pro-account-type-picker > button:is(:hover, :focus-visible, .active) {
  border-color: #6750b8;
  box-shadow: 0 0 0 3px rgba(103, 80, 184, 0.14);
}

.pro-account-type-picker > button.active {
  background: #f4fbf8;
}

.pro-page-wrap:has(.pro-account-entry),
.pro-page-wrap:has(.pro-stylist-setup),
.pro-page-wrap:has(.pro-stylist-hub),
.pro-page-wrap:has(.pro-stylist-settings),
.pro-page-wrap:has(.pro-account-loading) {
  width: min(1240px, calc(100% - 40px));
  min-height: calc(100dvh - 112px);
  margin-inline: auto;
  padding-block: clamp(22px, 4vw, 54px);
}

.pro-account-entry {
  display: grid;
  gap: 28px;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
}

.pro-account-entry > header {
  display: grid;
  gap: 10px;
  max-width: 720px;
}

.pro-account-entry h1,
.pro-account-entry h2,
.pro-account-entry p {
  margin: 0;
}

.pro-account-entry > header h1,
.pro-stylist-setup > header h1,
.pro-stylist-hub h1 {
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.pro-account-entry > header > p:last-child {
  color: var(--pro-muted);
  font-size: 1.03rem;
  line-height: 1.65;
}

.pro-account-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pro-account-choice-grid.is-single {
  grid-template-columns: minmax(0, 680px);
}

.pro-account-choice-grid.is-single > article {
  min-height: 330px;
}

.pro-account-choice-grid > article {
  display: grid;
  align-content: start;
  gap: 13px;
  min-width: 0;
  min-height: 390px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--pro-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(34, 73, 62, 0.07);
}

.pro-account-choice-grid > article > span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  color: var(--pro-accent-strong);
  background: var(--pro-accent-soft);
}

.pro-account-choice-grid > article:nth-child(2) > span {
  color: #6750b8;
  background: #f1edfb;
}

.pro-account-choice-grid h2 {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
}

.pro-account-choice-grid article > p:not(.eyebrow) {
  color: var(--pro-muted);
  line-height: 1.55;
}

.pro-account-choice-grid ul {
  display: grid;
  gap: 9px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.pro-account-choice-grid li {
  position: relative;
  padding-left: 22px;
  color: #485b55;
  font-size: 0.88rem;
}

.pro-account-choice-grid li::before {
  position: absolute;
  left: 0;
  content: "✓";
  color: var(--pro-accent-strong);
  font-weight: 900;
}

.pro-account-choice-grid .solid-button {
  align-self: end;
  margin-top: auto;
}

.pro-account-entry > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--pro-muted);
  font-size: 0.86rem;
}

.pro-account-loading {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  width: min(620px, 100%);
  min-height: 520px;
  margin-inline: auto;
  padding: 34px;
  text-align: center;
}

.pro-account-loading h1,
.pro-account-loading p {
  margin: 0;
}

.pro-account-loading > p:last-of-type {
  max-width: 500px;
  color: var(--pro-muted);
  line-height: 1.55;
}

.pro-account-loading-mark {
  width: 52px;
  height: 52px;
  border: 3px solid var(--pro-line);
  border-top-color: var(--pro-accent-strong);
  border-radius: 50%;
  animation: proAccountSpin 800ms linear infinite;
}

.pro-account-error .pro-account-loading-mark {
  position: relative;
  border: 0;
  background: #fceced;
  animation: none;
}

.pro-account-error .pro-account-loading-mark::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  content: "!";
  color: #963f48;
  font-size: 1.35rem;
  font-weight: 900;
}

@keyframes proAccountSpin {
  to {
    transform: rotate(1turn);
  }
}

.pro-stylist-setup {
  display: grid;
  gap: 22px;
  width: min(940px, 100%);
  margin-inline: auto;
}

.pro-stylist-setup > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.pro-stylist-setup > header > div {
  display: grid;
  gap: 9px;
  max-width: 760px;
}

.pro-stylist-setup > header p,
.pro-stylist-setup > header h1 {
  margin: 0;
}

.pro-stylist-setup > header p:last-child {
  color: var(--pro-muted);
  line-height: 1.55;
}

.pro-stylist-setup > header h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.pro-stylist-setup-form {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--pro-line);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(34, 73, 62, 0.09);
}

.pro-stylist-setup-form > .pro-stylist-photo-card {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  padding: 38px 24px;
  border-right: 1px solid rgba(69, 133, 113, 0.12);
  text-align: center;
  background:
    radial-gradient(
      circle at 50% 19%,
      rgba(255, 255, 255, 0.9),
      transparent 36%
    ),
    linear-gradient(160deg, #f4fbf8, #eef7f4);
}

.pro-stylist-photo-control {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 13px;
  margin-bottom: 12px;
  cursor: pointer;
}

.pro-stylist-photo-control:focus-within {
  outline: 3px solid rgba(103, 80, 184, 0.42);
  outline-offset: 5px;
  border-radius: 18px;
}

.pro-stylist-photo-control.uploading {
  cursor: wait;
  opacity: 0.72;
}

.pro-stylist-photo-frame {
  position: relative;
  display: block;
}

.pro-stylist-photo-frame img {
  display: block;
  width: 116px;
  height: 116px;
  border: 5px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 14px 32px rgba(34, 73, 62, 0.15);
}

.pro-stylist-photo-badge {
  position: absolute;
  right: 1px;
  bottom: 2px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--pro-accent-strong);
  box-shadow: 0 6px 16px rgba(34, 73, 62, 0.18);
}

.pro-stylist-photo-badge .icon {
  width: 16px;
  height: 16px;
}

.pro-stylist-photo-action {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--pro-line);
  border-radius: 999px;
  color: var(--pro-accent-strong);
  background: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  font-weight: 800;
}

.pro-stylist-photo-control > input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.pro-stylist-photo-card > strong {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.pro-stylist-photo-card > span {
  color: var(--pro-muted);
}

.pro-stylist-setup-fields {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
  padding: clamp(28px, 4vw, 46px);
}

.pro-stylist-setup-fields > label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.pro-stylist-setup-fields > label > span {
  color: #294a41;
  font-size: 0.82rem;
  font-weight: 820;
}

.pro-stylist-setup-fields :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid #cbded8;
  border-radius: 14px;
  color: #18352e;
  background: #fff;
  font: inherit;
  box-shadow: 0 1px 0 rgba(34, 73, 62, 0.03);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.pro-stylist-setup-fields select {
  appearance: none;
}

.pro-stylist-setup-fields :is(input, select):focus {
  border-color: #6750b8;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(103, 80, 184, 0.14);
}

.pro-stylist-setup-fields input[readonly] {
  color: #61766f;
  background: #f6f9f8;
}

.pro-stylist-setup-fields .inline-error {
  margin: 0;
}

.pro-stylist-setup-fields .auth-button-row {
  justify-content: flex-end;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--pro-line);
}

.pro-stylist-setup-fields .auth-button-row .solid-button {
  min-width: 180px;
}

.pro-stylist-hub {
  display: grid;
  gap: 20px;
  width: min(1120px, 100%);
  margin-inline: auto;
}

.pro-stylist-settings {
  display: grid;
  gap: 18px;
  width: min(980px, 100%);
  margin-inline: auto;
}

.pro-stylist-settings :is(h1, h2, h3, p) {
  margin: 0;
}

.pro-stylist-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.pro-stylist-settings-card {
  display: grid;
  align-content: start;
  gap: 17px;
  min-width: 0;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--pro-line);
  border-radius: 22px;
  background: #fff;
}

.pro-stylist-settings-card > button {
  width: max-content;
}

.pro-stylist-profile-settings-card {
  gap: 22px;
  padding: clamp(22px, 3vw, 32px);
}

.pro-stylist-profile-settings-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.pro-stylist-profile-settings-card > header > div {
  display: grid;
  gap: 5px;
}

.pro-stylist-profile-settings-card > header > button {
  min-width: 108px;
}

.pro-stylist-profile-settings-body {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: clamp(22px, 4vw, 38px);
}

.pro-stylist-profile-settings-body > .pro-stylist-photo-control {
  margin: 0;
}

.pro-stylist-profile-settings-body .pro-stylist-photo-frame img {
  width: 104px;
  height: 104px;
}

.pro-stylist-profile-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}

.pro-stylist-profile-fields label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.pro-stylist-profile-fields label > span {
  color: #294a41;
  font-size: 0.78rem;
  font-weight: 820;
}

.pro-stylist-profile-fields :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #cbded8;
  border-radius: 11px;
  color: #18352e;
  background: #fff;
  font: inherit;
}

.pro-stylist-settings .prelook-select-trigger,
.pro-stylist-settings .pro-salon-code-request input,
.pro-stylist-settings .pro-salon-code-request button {
  min-height: 44px;
}

.pro-stylist-settings .prelook-select-trigger,
.pro-stylist-settings .pro-salon-code-request input {
  border-radius: 11px;
}

.pro-stylist-profile-fields select {
  appearance: none;
}

.pro-stylist-profile-fields :is(input, select):focus {
  border-color: #6750b8;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(103, 80, 184, 0.14);
}

.pro-stylist-profile-fields input[readonly] {
  color: #61766f;
  background: #f6f9f8;
}

.pro-stylist-role-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.pro-stylist-role-row > span {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 15px;
  color: var(--pro-accent-strong);
  background: var(--pro-accent-soft);
}

.pro-stylist-role-row > span .icon {
  width: 22px;
  height: 22px;
}

.pro-stylist-role-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pro-stylist-role-row p {
  overflow-wrap: anywhere;
  color: var(--pro-muted);
  font-size: 0.84rem;
}

.pro-stylist-connect-card {
  background: linear-gradient(145deg, #f7fcfa, #eef8f4);
}

.pro-stylist-connect-card h2 {
  overflow-wrap: anywhere;
  color: #285f50;
  letter-spacing: 0.04em;
}

.pro-stylist-hub-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--pro-line);
  border-radius: 22px;
  background: #fff;
}

.pro-stylist-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.pro-stylist-identity img {
  width: 86px;
  height: 86px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.pro-stylist-identity > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.pro-stylist-identity :is(h1, p) {
  margin: 0;
}

.pro-stylist-identity h1 {
  overflow-wrap: anywhere;
}

.pro-stylist-identity p:last-child {
  color: var(--pro-muted);
}

.pro-stylist-hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 16px;
}

.pro-code-card,
.pro-account-status-card,
.pro-salon-code-request,
.pro-connections-section,
.pro-connected-salons {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--pro-line);
  border-radius: 22px;
  background: #fff;
}

.pro-code-card,
.pro-account-status-card,
.pro-salon-code-request {
  display: grid;
  align-content: start;
  gap: 11px;
}

.pro-code-card :is(h2, p),
.pro-account-status-card :is(h2, p),
.pro-salon-code-request :is(h2, p) {
  margin: 0;
}

.pro-salon-code-request > div {
  display: grid;
  gap: 5px;
}

.pro-salon-code-request > form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.pro-salon-code-request label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.pro-salon-code-request label > span {
  color: var(--pro-muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.pro-salon-code-request input {
  width: 100%;
  min-height: 46px;
  text-transform: uppercase;
}

.pro-salon-code-request button {
  min-height: 46px;
  white-space: nowrap;
}

.pro-code-card > p:not(.eyebrow),
.pro-code-card > small {
  color: var(--pro-muted);
  line-height: 1.55;
}

.pro-code-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  gap: 10px;
  margin-block: 5px;
  padding: 11px 11px 11px 16px;
  border: 1px dashed var(--pro-accent-strong);
  border-radius: 14px;
  background: #f4fbf8;
}

.pro-code-value strong {
  overflow-wrap: anywhere;
  color: #285f50;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: 0.04em;
}

.pro-account-status-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding-block: 10px;
  border-top: 1px solid var(--pro-line);
}

.pro-account-status-card > div > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  font-weight: 700;
}

.pro-account-status-card .icon {
  width: 17px;
  height: 17px;
  color: var(--pro-accent-strong);
}

.pro-connections-section,
.pro-connected-salons {
  display: grid;
  gap: 16px;
}

.pro-connections-section > header,
.pro-connected-salons > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.pro-connections-section > header > div,
.pro-connected-salons > header {
  display: grid;
  gap: 5px;
}

.pro-connections-section :is(h2, h3, p),
.pro-connected-salons :is(h2, p) {
  margin: 0;
}

.pro-connections-section > header p:last-child {
  color: var(--pro-muted);
}

.pro-connections-section > header > span {
  padding: 6px 10px;
  border-radius: 999px;
  color: #765a1b;
  background: #fff2d8;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.pro-connections-section > div,
.pro-connected-salons > div {
  display: grid;
  gap: 10px;
}

.pro-connection-card,
.pro-connected-salons article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--pro-line);
  border-radius: 16px;
  background: #fbfdfc;
}

.pro-connection-logo,
.pro-connected-salons article > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #3d6f61;
  background: var(--pro-accent-soft);
  font-weight: 900;
}

.pro-connection-card > div:nth-child(2),
.pro-connected-salons article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pro-connection-card > div:nth-child(2) > p:not(.eyebrow),
.pro-connection-card small,
.pro-connected-salons article small {
  color: var(--pro-muted);
}

.pro-connection-actions {
  display: flex;
  gap: 8px;
}

.pro-connection-pending {
  padding: 6px 10px;
  border-radius: 999px;
  color: #765a1b;
  background: #fff2d8;
  font-size: 0.75rem;
  font-weight: 800;
}

.pro-connections-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 34px 18px;
  border: 1px dashed var(--pro-line);
  border-radius: 16px;
  color: var(--pro-muted);
  text-align: center;
}

.pro-connections-empty > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--pro-accent-strong);
  background: var(--pro-accent-soft);
}

@media (max-width: 820px) {
  .pro-account-choice-grid,
  .pro-stylist-setup-form,
  .pro-stylist-hub-grid,
  .pro-stylist-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pro-account-choice-grid > article {
    min-height: 0;
  }

  .pro-stylist-setup-form > .pro-stylist-photo-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    padding: 24px;
    border-right: 0;
    border-bottom: 1px solid rgba(69, 133, 113, 0.12);
    text-align: left;
  }

  .pro-stylist-photo-control {
    grid-row: 1 / span 2;
    margin: 0 12px 0 0;
  }

  .pro-stylist-photo-frame img {
    width: 82px;
    height: 82px;
  }

  .pro-stylist-photo-badge {
    width: 29px;
    height: 29px;
  }

  .pro-stylist-photo-action {
    min-height: 30px;
    padding-inline: 11px;
    font-size: 0.72rem;
  }

  .pro-stylist-photo-card > strong {
    align-self: end;
  }

  .pro-stylist-photo-card > span {
    align-self: start;
  }

  .pro-stylist-setup-fields {
    padding: 28px 24px;
  }

  .pro-stylist-setup-fields .auth-button-row {
    margin-top: 9px;
  }

  .pro-stylist-setup-fields .auth-button-row .solid-button {
    min-width: 160px;
  }

  .pro-stylist-profile-settings-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .pro-stylist-profile-settings-body > .pro-stylist-photo-control {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    justify-self: start;
    align-items: center;
  }

  .pro-stylist-profile-settings-body .pro-stylist-photo-frame {
    grid-row: 1 / span 2;
  }
}

@media (max-width: 620px) {
  .pro-page-wrap:has(.pro-account-entry),
  .pro-page-wrap:has(.pro-stylist-setup),
  .pro-page-wrap:has(.pro-stylist-hub),
  .pro-page-wrap:has(.pro-stylist-settings),
  .pro-page-wrap:has(.pro-account-loading) {
    width: min(100% - 24px, 1240px);
    min-height: calc(100dvh - 86px);
    padding-block: 18px 34px;
  }

  .pro-account-type-picker {
    grid-template-columns: minmax(0, 1fr);
  }

  .pro-account-entry {
    gap: 20px;
  }

  .pro-account-choice-grid > article {
    padding: 20px;
    border-radius: 18px;
  }

  .pro-account-entry > footer,
  .pro-stylist-hub-hero,
  .pro-stylist-settings > header,
  .pro-connections-section > header {
    align-items: stretch;
    flex-direction: column;
  }

  .pro-account-entry > footer,
  .pro-stylist-hub-hero {
    display: grid;
  }

  .pro-stylist-setup > header {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .pro-stylist-setup > header > button {
    width: max-content;
  }

  .pro-stylist-setup-form {
    border-radius: 18px;
  }

  .pro-stylist-setup-form > .pro-stylist-photo-card {
    padding: 20px;
  }

  .pro-stylist-setup-fields {
    gap: 16px;
    padding: 24px 18px 20px;
  }

  .pro-stylist-setup-fields .auth-button-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .pro-stylist-setup-fields .auth-button-row .solid-button {
    width: 100%;
    min-width: 0;
  }

  .pro-stylist-profile-settings-card > header {
    align-items: stretch;
  }

  .pro-stylist-profile-settings-card > header > button {
    min-width: 94px;
  }

  .pro-stylist-profile-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .pro-stylist-identity {
    align-items: flex-start;
  }

  .pro-stylist-identity img {
    width: 64px;
    height: 64px;
  }

  .pro-stylist-identity h1 {
    font-size: 1.55rem;
  }

  .pro-connection-card,
  .pro-connected-salons article {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .pro-connection-actions,
  .pro-connection-pending,
  .pro-connected-salons article > button {
    grid-column: 1 / -1;
  }

  .pro-connection-pending {
    justify-self: start;
  }

  .pro-salon-code-request > form {
    grid-template-columns: minmax(0, 1fr);
  }

  .pro-connection-actions > button {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pro-account-loading-mark {
    animation-duration: 1.8s;
  }
}

/* One authenticated UUID can move between its customer, salon-owner, and
   stylist workspaces without creating or replacing a login session. */
.account-persona-switcher {
  position: relative;
  min-width: 0;
  color: var(--text, #28232d);
}

.account-persona-switcher > summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  min-height: 44px;
  padding: 5px 9px 5px 6px;
  border: 1px solid rgba(109, 87, 178, 0.17);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(53, 42, 68, 0.07);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.account-persona-switcher > summary::-webkit-details-marker {
  display: none;
}

.account-persona-switcher > summary:hover {
  border-color: rgba(109, 87, 178, 0.34);
}

.account-persona-switcher > summary:focus-visible {
  outline: 3px solid rgba(81, 185, 158, 0.42);
  outline-offset: 2px;
}

.account-persona-icon,
.account-persona-menu button > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #5f49aa;
  background: #f0ecfb;
}

.account-persona-icon .icon,
.account-persona-menu button > span:first-child .icon {
  width: 17px;
  height: 17px;
}

.account-persona-summary-copy {
  display: grid;
  min-width: 0;
  text-align: left;
}

.account-persona-summary-copy small {
  color: #817887;
  font-size: 0.62rem;
  font-weight: 750;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.account-persona-summary-copy strong {
  overflow: hidden;
  color: #332d39;
  font-size: 0.78rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-persona-chevron {
  width: 14px;
  height: 14px;
  color: #817887;
  transform: rotate(90deg);
  transition: transform 160ms ease;
}

.account-persona-switcher[open] .account-persona-chevron {
  transform: rotate(-90deg);
}

.account-persona-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: min(310px, calc(100vw - 24px));
  gap: 5px;
  padding: 8px;
  border: 1px solid #e1dbe8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(40, 32, 50, 0.2);
}

.account-persona-menu > p {
  margin: 4px 7px 3px;
  color: #817887;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-persona-menu button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 58px;
  padding: 7px;
  border: 0;
  border-radius: 11px;
  color: #3b3441;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.account-persona-menu button:hover,
.account-persona-menu button.active {
  color: #4f3997;
  background: #f4f0fc;
}

.account-persona-menu button:focus-visible {
  outline: 3px solid rgba(81, 185, 158, 0.42);
  outline-offset: 1px;
}

.account-persona-menu button > span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-persona-menu button strong {
  font-size: 0.82rem;
}

.account-persona-menu button small {
  overflow: hidden;
  color: #817887;
  font-size: 0.69rem;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-persona-menu button > .icon {
  width: 17px;
  height: 17px;
  color: #28745f;
}

.pro-nav button.nav-link {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.dashboard-shell .account-persona-switcher.sidebar-persona {
  flex: 0 0 auto;
  width: 100%;
}

.dashboard-shell .account-persona-switcher.sidebar-persona > summary {
  width: 100%;
  min-width: 0;
  grid-template-columns: 34px 0 0;
  overflow: hidden;
}

.dashboard-shell .account-persona-switcher.sidebar-persona
  :is(.account-persona-summary-copy, .account-persona-chevron) {
  overflow: hidden;
  opacity: 0;
}

.dashboard-shell .sidebar.dashboard-bottom-dock:hover
  .account-persona-switcher.sidebar-persona
  > summary {
  grid-template-columns: 34px minmax(0, 1fr) 16px;
}

.dashboard-shell .sidebar.dashboard-bottom-dock:hover
  .account-persona-switcher.sidebar-persona
  :is(.account-persona-summary-copy, .account-persona-chevron) {
  opacity: 1;
}

@media (min-width: 761px) {
  .dashboard-shell
    .sidebar.dashboard-bottom-dock:has(
      .account-persona-switcher.sidebar-persona[open]
    ) {
    width: var(--dashboard-rail-expanded-width);
  }

  .dashboard-shell
    .sidebar.dashboard-bottom-dock:has(
      .account-persona-switcher.sidebar-persona[open]
    )
    .account-persona-switcher.sidebar-persona
    > summary {
    grid-template-columns: 34px minmax(0, 1fr) 16px;
  }

  .dashboard-shell
    .sidebar.dashboard-bottom-dock:has(
      .account-persona-switcher.sidebar-persona[open]
    )
    .account-persona-switcher.sidebar-persona
    :is(.account-persona-summary-copy, .account-persona-chevron) {
    opacity: 1;
  }
}

.dashboard-shell
  .account-persona-switcher.sidebar-persona
  .account-persona-menu {
  position: static;
  width: 100%;
  margin-top: 7px;
  padding: 6px;
  border-radius: 13px;
  box-shadow: none;
}

.dashboard-shell
  .account-persona-switcher.sidebar-persona
  .account-persona-menu
  button {
  min-height: 48px;
}

@media (max-width: 1100px) {
  .customer-topbar
    .account-persona-switcher.customer-topbar-persona
    .account-persona-summary-copy
    small {
    display: none;
  }

  .customer-topbar .account-persona-switcher.customer-topbar-persona > summary {
    min-width: 126px;
  }
}

@media (max-width: 900px) {
  .dashboard-shell .account-persona-switcher.sidebar-persona {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .dashboard-shell .account-persona-switcher.sidebar-persona > summary {
    max-width: 190px;
  }

  .dashboard-shell
    .account-persona-switcher.sidebar-persona
    .account-persona-menu {
    position: static;
    width: min(310px, 100%);
    box-shadow: none;
  }

  .dashboard-shell .dashboard-context-switcher {
    grid-row: 2;
  }

  .dashboard-shell .side-nav {
    grid-row: 3;
  }

  .dashboard-shell .sidebar-footer {
    grid-row: 1;
  }
}

@media (max-width: 700px) {
  .customer-topbar .account-persona-switcher.customer-topbar-persona > summary {
    grid-template-columns: 34px;
    width: 44px;
    min-width: 44px;
    padding: 4px;
  }

  .customer-topbar
    .account-persona-switcher.customer-topbar-persona
    :is(.account-persona-summary-copy, .account-persona-chevron) {
    display: none;
  }

  .customer-topbar
    .account-persona-switcher.customer-topbar-persona
    .account-persona-menu {
    position: fixed;
    top: 66px;
    right: 10px;
  }

  .pro-topbar .account-persona-switcher.pro-topbar-persona > summary {
    grid-template-columns: 34px;
    width: 44px;
    min-width: 44px;
    padding: 4px;
  }

  .pro-topbar
    .account-persona-switcher.pro-topbar-persona
    :is(.account-persona-summary-copy, .account-persona-chevron) {
    display: none;
  }
}

@media (max-width: 640px) {
  .dashboard-shell .account-persona-switcher.sidebar-persona {
    grid-column: 1;
    grid-row: 1;
  }

  .dashboard-shell .dashboard-context-switcher {
    grid-row: 2;
  }

  .dashboard-shell .side-nav {
    grid-row: 3;
  }

  .dashboard-shell .sidebar-footer {
    grid-row: 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-persona-chevron {
    transition: none;
  }
}

/* Keep the authenticated Pro landing header as one deliberate navigation
   surface. The dashboard lives in the primary navigation, while account and
   session controls remain aligned at the trailing edge. */
.pro-portal-shell .pro-topbar {
  display: grid;
  grid-template-columns: minmax(170px, auto) minmax(0, 1fr) auto;
  gap: clamp(10px, 1.5vw, 22px);
  width: min(calc(100% - 32px), 1680px);
}

.pro-portal-shell .pro-topbar .pro-brand {
  min-width: 0;
  max-width: 100%;
  justify-self: start;
}

.pro-portal-shell .pro-topbar .pro-brand > span:last-child,
.pro-portal-shell .pro-topbar .pro-nav,
.pro-portal-shell .pro-topbar .top-actions {
  min-width: 0;
}

.pro-portal-shell .pro-topbar .pro-brand strong,
.pro-portal-shell .pro-topbar .pro-brand small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-portal-shell .pro-topbar .pro-nav {
  justify-self: start;
  max-width: 100%;
  flex-wrap: nowrap;
}

.pro-portal-shell .pro-topbar .pro-nav .nav-link {
  min-width: 0;
}

.pro-portal-shell .pro-topbar .top-actions {
  width: auto;
  margin-left: 0;
  flex-wrap: nowrap;
  justify-self: end;
}

.pro-portal-shell
  .pro-topbar
  .account-persona-switcher.pro-topbar-persona
  > summary {
  max-width: 190px;
}

@media (max-width: 980px) {
  .pro-portal-shell .pro-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding-block: 9px;
  }

  .pro-portal-shell .pro-topbar .pro-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .pro-portal-shell .pro-topbar .pro-nav .nav-link {
    width: 100%;
    padding-inline: 8px;
  }

  .pro-portal-shell .pro-topbar .top-actions {
    grid-column: 2;
    grid-row: 1;
    display: flex;
  }
}

@media (max-width: 520px) {
  .pro-portal-shell .pro-topbar {
    width: calc(100% - 16px);
  }

  .pro-portal-shell .pro-topbar .pro-brand {
    gap: 7px;
  }

  .pro-portal-shell .pro-topbar .brand-mark {
    width: 34px;
    height: 34px;
  }

  .pro-portal-shell .pro-topbar .pro-brand strong {
    font-size: 0.9rem;
  }

  .pro-portal-shell .pro-topbar .top-actions {
    gap: 5px;
  }

  .pro-portal-shell .pro-topbar .top-actions > .ghost-button {
    min-height: 44px;
    padding-inline: 9px;
    font-size: 0.78rem;
  }

  .pro-portal-shell .pro-topbar .pro-nav .nav-link {
    gap: 5px;
    min-height: 44px;
    padding-inline: 4px;
    font-size: 0.78rem;
  }
}

/* Dashboard viewport containment
   Keep every business workspace inside the available grid track. Individual
   workspaces may scroll vertically, but the document must never grow wider
   than the browser when the sidebar and browser zoom reduce usable space. */
.dashboard-shell,
.dashboard-main,
.dashboard-content {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.dashboard-shell .sidebar,
.dashboard-content > *,
.business-workspace-page {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1380px) and (min-width: 901px) {
  .dashboard-shell {
    grid-template-columns: 232px minmax(0, 1fr);
  }

  .dashboard-shell .sidebar {
    padding-inline: 12px;
  }

  .dashboard-content {
    padding: 20px;
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .dashboard-shell {
    grid-template-columns: 216px minmax(0, 1fr);
  }

  .dashboard-content {
    padding-inline: 18px;
  }

  .dashboard-shell .side-link {
    padding-inline: 11px;
  }
}

/* Flexible salon scheduling — service capacity, manual overrides, and day ops. */
.business-service-timing-editor {
  display: grid;
  gap: 13px;
  padding: 13px;
  border: 1px solid #e3dfea;
  border-radius: 13px;
  background: #fff;
}

.business-service-timing-preview {
  display: grid;
  gap: 8px;
}

.business-service-timing-track {
  display: flex;
  min-height: 54px;
  overflow: hidden;
  border: 1px solid #ddd7e4;
  border-radius: 11px;
  background: #f7f5f8;
}

.business-service-timing-track > span {
  display: grid;
  width: var(--timing-width);
  min-width: 42px;
  align-content: center;
  gap: 1px;
  padding: 7px 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.8);
  color: #39323f;
  background: #eee9fa;
}

.business-service-timing-track > span:last-child {
  border-right: 0;
}

.business-service-timing-track > span.is-processing {
  color: #205f50;
  background: repeating-linear-gradient(
    -45deg,
    #daf3ea 0 8px,
    #eaf8f3 8px 16px
  );
}

.business-service-timing-track > span.is-processing-occupied {
  color: #6d5526;
  background: repeating-linear-gradient(
    -45deg,
    #f5e8c8 0 8px,
    #fbf3df 8px 16px
  );
}

.business-service-timing-track > span.is-buffer {
  color: #5f5863;
  background: repeating-linear-gradient(
    -45deg,
    #e8e5e9 0 6px,
    #f5f3f5 6px 12px
  );
}

.business-service-timing-track b,
.business-service-timing-track small {
  overflow: hidden;
  font-size: 0.63rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-service-timing-track small {
  opacity: 0.76;
}

.business-service-timing-preview > p {
  margin: 0;
  color: #5e5765;
  font-size: 0.69rem;
  font-weight: 760;
}

.business-service-timing-legend,
.business-booking-phase-legend,
.business-booking-phase-legend ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.business-service-timing-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #716a76;
  font-size: 0.61rem;
  font-weight: 700;
}

.business-service-timing-legend span::before,
.business-booking-phase-legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: #765cbd;
  content: "";
}

.business-service-timing-legend .is-processing::before,
.business-booking-phase-legend .is-processing i {
  background: #55b89c;
}

.business-booking-phase-legend .is-processing-occupied i {
  background: #b78a34;
}

.business-service-timing-legend .is-buffer::before,
.business-booking-phase-legend .is-buffer i {
  background: #8c858f;
}

.business-service-phase-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.business-service-phase-fields .business-field {
  gap: 5px;
  font-size: 0.69rem;
}

.business-service-phase-fields .business-field small {
  justify-self: end;
  margin-top: -34px;
  padding-right: 9px;
  pointer-events: none;
}

.business-service-phase-fields .business-field input {
  padding-right: 38px;
}

.business-service-timing-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.business-service-timing-mode > div:first-child {
  display: grid;
  gap: 2px;
}

.business-service-timing-mode strong {
  color: #38313d;
  font-size: 0.78rem;
}

.business-service-timing-mode small {
  color: #7a727e;
  font-size: 0.64rem;
}

.business-service-timing-mode > div:last-child {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border-radius: 9px;
  background: #f0edf3;
}

.business-service-timing-mode button {
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  padding: 0 11px;
  color: #716878;
  background: transparent;
  font-size: 0.67rem;
  font-weight: 800;
  transition:
    color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.business-service-timing-mode button.active {
  color: #57429b;
  background: #fff;
  box-shadow: 0 2px 7px rgba(56, 42, 68, 0.1);
}

.business-service-custom-phases {
  display: grid;
  gap: 9px;
}

.business-service-phase-list {
  display: grid;
  gap: 7px;
}

.business-service-phase-row {
  display: grid;
  grid-template-columns:
    26px minmax(112px, 0.8fr) 82px minmax(130px, 1.15fr)
    minmax(118px, auto) auto;
  align-items: end;
  gap: 7px;
  padding: 8px;
  border: 1px solid #e4dfe8;
  border-radius: 10px;
  background: #fcfbfd;
}

.business-service-phase-order {
  align-self: center;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #604ba5;
  background: #eee9f9;
  font-size: 0.64rem;
  font-weight: 850;
}

.business-service-phase-row > label:not(.business-service-phase-occupancy) {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #605864;
  font-size: 0.61rem;
  font-weight: 780;
}

.business-service-phase-row > label > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
}

.business-service-phase-row > label > span small {
  color: #958c99;
  font-size: 0.54rem;
  font-weight: 650;
}

.business-service-phase-row :is(input:not([type="checkbox"]), select) {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border: 1px solid #ddd7e2;
  border-radius: 8px;
  padding: 6px 8px;
  color: #3d3641;
  background: #fff;
  font: inherit;
  font-size: 0.67rem;
  font-weight: 720;
}

.business-service-phase-occupancy {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid #d8e9e3;
  border-radius: 8px;
  color: #315f53;
  background: #f3faf7;
  cursor: pointer;
}

.business-service-phase-occupancy > input {
  position: absolute;
  opacity: 0;
}

.business-service-phase-occupancy > span {
  position: relative;
  width: 31px;
  height: 18px;
  border-radius: 999px;
  background: #c9c4ce;
  transition: background 150ms ease;
}

.business-service-phase-occupancy > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: transform 150ms ease;
}

.business-service-phase-occupancy > input:checked + span {
  background: #489b83;
}

.business-service-phase-occupancy > input:checked + span::after {
  transform: translateX(13px);
}

.business-service-phase-occupancy > input:focus-visible + span {
  outline: 3px solid rgba(99, 78, 180, 0.25);
  outline-offset: 2px;
}

.business-service-phase-occupancy b {
  overflow: hidden;
  font-size: 0.59rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-service-phase-actions {
  display: flex;
  gap: 3px;
  align-items: center;
  min-height: 36px;
}

.business-service-phase-actions button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #dfd9e4;
  border-radius: 7px;
  color: #685f6d;
  background: #fff;
  font-size: 0.72rem;
  font-weight: 850;
}

.business-service-phase-actions button:last-child {
  color: #a04d55;
}

.business-service-phase-actions button:disabled {
  opacity: 0.35;
}

.business-service-custom-phases > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.business-service-custom-phases > footer > span {
  color: #7a717e;
  font-size: 0.62rem;
}

.business-service-custom-phases > footer > span b {
  color: #554763;
}

.business-service-capacity-control {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 2px 9px;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid #d8e9e3;
  border-radius: 11px;
  color: #315f53;
  background: #f4fbf8;
  cursor: pointer;
}

.business-service-capacity-control > input {
  position: absolute;
  opacity: 0;
}

.business-service-capacity-control > span {
  grid-row: 1 / 3;
  position: relative;
  width: 36px;
  height: 21px;
  border-radius: 999px;
  background: #c9c4ce;
  transition: background 160ms ease;
}

.business-service-capacity-control > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(42, 34, 49, 0.2);
  content: "";
  transition: transform 160ms ease;
}

.business-service-capacity-control > input:checked + span {
  background: #3f9f84;
}

.business-service-capacity-control > input:checked + span::after {
  transform: translateX(15px);
}

.business-service-capacity-control > input:focus-visible + span {
  outline: 3px solid rgba(101, 80, 184, 0.28);
  outline-offset: 2px;
}

.business-service-capacity-control b {
  font-size: 0.72rem;
}

.business-service-capacity-control small {
  color: #648076;
  font-size: 0.62rem;
  line-height: 1.35;
}

.business-service-capacity-badge {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  color: #6b552a;
  background: #f7edcf;
  font-size: 0.6rem;
  font-weight: 780;
}

.business-service-capacity-badge.is-open {
  color: #286b59;
  background: #e1f4ed;
}

.business-booking-phase-track {
  display: flex;
  width: 100%;
  height: 6px;
  overflow: hidden;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
}

.business-booking-phase-track > span {
  display: block;
  width: var(--phase-width);
  min-width: 3px;
  background: var(--stylist-color, #7056b6);
}

.business-booking-phase-track > span.is-processing {
  background: repeating-linear-gradient(90deg, #58b89e 0 4px, #bce9dc 4px 8px);
}

.business-booking-phase-track > span.is-processing-occupied {
  background: repeating-linear-gradient(90deg, #b78a34 0 4px, #ecd9ad 4px 8px);
}

.business-booking-phase-track > span.is-buffer {
  background: repeating-linear-gradient(90deg, #817986 0 3px, #d8d3da 3px 6px);
}

.business-booking-phase-legend {
  min-height: 42px;
  padding: 7px 11px;
  border: 1px solid #e4dfe7;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.business-booking-phase-legend > strong {
  color: #514956;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.business-booking-phase-legend ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.business-booking-phase-legend li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #5c5561;
  font-size: 0.65rem;
  font-weight: 720;
}

.business-booking-availability-legend {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 8px 14px;
  padding: 7px 11px;
  border: 1px solid #e4dfe7;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.business-booking-availability-legend > strong {
  color: #514956;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.business-booking-availability-legend ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.business-booking-availability-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5c5561;
  font-size: 0.65rem;
  font-weight: 720;
}

.business-booking-availability-legend i {
  width: 14px;
  height: 10px;
  border: 1px solid transparent;
  border-radius: 3px;
}

.business-booking-availability-legend .is-salon-open i {
  border-color: rgba(43, 148, 118, 0.3);
  background: #d7f2e9;
}

.business-booking-availability-legend .is-stylist-working i {
  border-color: rgba(101, 80, 184, 0.25);
  background: #eee9fb;
}

.business-booking-availability-legend .is-outside-hours i {
  border-color: #e2dee4;
  background: repeating-linear-gradient(-45deg, #f7f5f7 0 3px, #e8e4e9 3px 4px);
}

.business-manual-booking-warnings {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid #e9cc91;
  border-radius: 13px;
  color: #654d20;
  background: #fff9ea;
}

.business-manual-booking-warnings:focus-visible {
  outline: 3px solid rgba(166, 115, 24, 0.24);
}

.business-manual-booking-warnings > header {
  display: flex;
  align-items: center;
  gap: 9px;
}

.business-manual-booking-warnings > header > span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #b17921;
  font-weight: 900;
}

.business-manual-booking-warnings header div {
  display: grid;
  gap: 1px;
}

.business-manual-booking-warnings header small {
  color: #816c43;
  font-size: 0.65rem;
}

.business-manual-booking-warnings ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  font-size: 0.73rem;
  line-height: 1.4;
}

.business-manual-booking-override {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid rgba(159, 113, 35, 0.18);
  cursor: pointer;
}

.business-manual-booking-override input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #7255b4;
}

.business-manual-booking-override span {
  display: grid;
  gap: 2px;
}

.business-manual-booking-override b {
  color: #5d471f;
  font-size: 0.73rem;
}

.business-manual-booking-override small {
  color: #806b43;
  font-size: 0.63rem;
  line-height: 1.35;
}

.business-day-staff-scroll {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.business-day-staff-scroll:focus-visible {
  outline: 3px solid rgba(101, 80, 184, 0.28);
  outline-offset: -3px;
}

.business-day-staff-board {
  display: grid;
  grid-template-columns:
    var(--calendar-time-axis-width, 66px)
    minmax(calc(var(--staff-count) * 220px), 1fr);
  grid-template-rows: var(--calendar-day-header-height, 62px) auto;
  min-width: calc(
    var(--calendar-time-axis-width, 66px) + var(--staff-count) * 220px
  );
  background: #fff;
}

.business-day-staff-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 16;
  display: grid;
  place-items: center;
  border-right: 1px solid #e6e1e8;
  border-bottom: 1px solid #e6e1e8;
  color: #817985;
  background: rgba(255, 255, 255, 0.97);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.business-day-staff-headers {
  position: sticky;
  top: 0;
  z-index: 14;
  display: grid;
  grid-template-columns: repeat(var(--staff-count), minmax(220px, 1fr));
  border-bottom: 1px solid #e6e1e8;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
}

.business-day-staff-headers > span {
  display: grid;
  place-items: center;
  border-right: 1px solid #eeeaf0;
  color: #514956;
  font-size: 0.72rem;
  font-weight: 800;
}

.business-day-staff-time-axis {
  position: sticky;
  left: 0;
  z-index: 12;
  display: grid;
  grid-template-rows: repeat(auto-fit, var(--calendar-hour-height));
  background: #fff;
}

.business-day-staff-time-axis > time {
  min-height: var(--calendar-hour-height);
  padding: 7px 8px 0 0;
  border-right: 1px solid #e6e1e8;
  border-bottom: 1px solid #f0ecf1;
  color: #817985;
  font-size: 0.64rem;
  text-align: right;
}

.business-day-staff-columns {
  display: grid;
  grid-template-columns: repeat(var(--staff-count), minmax(220px, 1fr));
}

.business-day-staff-column {
  position: relative;
  min-width: 0;
  border-right: 1px solid #e9e4eb;
}

.business-day-staff-header {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  height: var(--calendar-day-header-height, 62px);
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 8px 12px;
  border-right: 1px solid #eeeaf0;
  background: rgba(255, 255, 255, 0.96);
}

.business-day-staff-header.is-off-duty {
  background: #f5f3f5;
  opacity: 0.74;
}

.business-day-staff-header > :is(img, span) {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: var(--stylist-color);
  background: var(--stylist-soft);
  object-fit: cover;
  font-size: 0.72rem;
  font-weight: 850;
}

.business-day-staff-header > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.business-day-staff-header strong,
.business-day-staff-header small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-day-staff-header strong {
  color: #3e3744;
  font-size: 0.72rem;
}

.business-day-staff-header small {
  color: #79717e;
  font-size: 0.6rem;
}

.business-day-staff-grid {
  position: relative;
  min-height: var(--staff-day-height);
  background: #f6f4f6;
}

.business-day-salon-hours-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: repeating-linear-gradient(
    -45deg,
    rgba(104, 94, 109, 0.025) 0 8px,
    rgba(104, 94, 109, 0.065) 8px 9px
  );
  pointer-events: none;
}

.business-day-salon-open-window {
  position: absolute;
  top: var(--salon-open-top);
  right: 0;
  left: 0;
  height: var(--salon-open-height);
  background: rgba(215, 242, 233, 0.78);
  box-shadow:
    inset 3px 0 0 rgba(43, 148, 118, 0.38),
    inset 0 1px 0 rgba(43, 148, 118, 0.12),
    inset 0 -1px 0 rgba(43, 148, 118, 0.12);
}

.business-day-staff-slots {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-rows: var(--calendar-hour-height);
  z-index: 2;
}

.business-day-staff-slots > div {
  border-bottom: 1px solid #f0ecf1;
}

.business-day-staff-slots > div:is(:hover, :focus-visible) {
  outline: 0;
  background: rgba(101, 80, 182, 0.07);
}

.business-day-shift-window {
  position: absolute;
  top: var(--shift-top);
  right: 3px;
  left: 3px;
  height: var(--shift-height);
  z-index: 1;
  border: 1px solid color-mix(in srgb, var(--stylist-color) 22%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--stylist-soft) 56%, transparent);
  pointer-events: none;
}

.business-day-off-duty-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: start center;
  padding-top: 16px;
  color: #9a929e;
  background: repeating-linear-gradient(
    -45deg,
    rgba(116, 105, 121, 0.04) 0 8px,
    rgba(116, 105, 121, 0.09) 8px 9px
  );
  pointer-events: none;
}

.business-day-off-duty-layer span {
  position: sticky;
  top: 74px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.62rem;
  font-weight: 800;
}

.business-day-staff-column .business-day-event {
  z-index: 5;
}

.business-calendar-surface[data-calendar-mode="bookings"]
  .business-week-closed-overlay {
  pointer-events: none;
}

.business-booking-row.is-pending-review {
  border-color: #cfc2ec;
  box-shadow: inset 4px 0 0 #7056b6;
}

.business-request-review-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 15px 0 0;
  border: 1px solid #e5e0e8;
  border-radius: 12px;
  background: #e5e0e8;
}

.business-request-review-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 11px;
  background: #fff;
}

.business-request-review-grid dt {
  color: #817985;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.business-request-review-grid dd {
  overflow: hidden;
  margin: 0;
  color: #3f3845;
  font-size: 0.76rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-booking-note > strong {
  display: block;
  margin-bottom: 4px;
  color: #4e4654;
  font-size: 0.69rem;
}

.business-booking-note > p {
  margin: 0;
}

.business-booking-override-badge {
  color: #87631c;
}

.business-date-hours-window.is-added,
.business-team-hours-window.is-added,
.business-day-shift-window.is-added {
  border-color: rgba(70, 153, 130, 0.72);
  border-style: dashed;
  background: rgba(214, 244, 234, 0.82);
  box-shadow: inset 3px 0 0 #45a68a;
}

.business-date-hours-edit {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 7;
  min-width: 0;
  min-height: 26px;
  padding: 3px 7px;
  border: 1px solid rgba(77, 132, 116, 0.3);
  border-radius: 7px;
  color: #2e715f;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.58rem;
  font-weight: 820;
}

.business-calendar-block[role="button"] {
  cursor: pointer;
}

.business-calendar-block[role="button"]:focus-visible {
  z-index: 30;
  outline: 3px solid rgba(101, 80, 184, 0.32);
  outline-offset: 2px;
}

.business-booking-phase-bands {
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  z-index: 3;
  width: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

.business-booking-phase-bands > span {
  position: absolute;
  top: var(--phase-top);
  right: 0;
  left: 0;
  height: var(--phase-height);
  min-height: 2px;
  background: var(--stylist-color, #765cbd);
}

.business-booking-phase-bands > span.is-processing {
  background: repeating-linear-gradient(0deg, #58b89e 0 4px, #bce9dc 4px 8px);
}

.business-booking-phase-bands > span.is-processing-occupied {
  background: repeating-linear-gradient(0deg, #b78a34 0 4px, #ecd9ad 4px 8px);
}

.business-booking-phase-bands > span.is-buffer {
  background: repeating-linear-gradient(0deg, #817986 0 3px, #d8d3da 3px 6px);
}

.business-booking-override-marker {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 4;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid rgba(139, 98, 23, 0.24);
  border-radius: 50%;
  color: #76510f;
  background: #fff2c9;
  font-size: 0.58rem;
  font-weight: 900;
}

.business-booking-event.has-schedule-override .business-booking-event-summary {
  padding-left: 17px;
}

.business-booking-tooltip-phases {
  display: grid;
  gap: 5px;
  padding-top: 7px;
  border-top: 1px solid #eee9f0;
}

.business-booking-tooltip-phases > strong {
  color: #625968;
  font-size: 0.61rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.business-booking-tooltip-phases ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.business-booking-tooltip-phases li {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
}

.business-booking-tooltip-phases li > i {
  width: 7px;
  height: 100%;
  min-height: 24px;
  border-radius: 999px;
  background: var(--stylist-color, #765cbd);
}

.business-booking-tooltip-phases li.is-processing > i {
  background: #58b89e;
}

.business-booking-tooltip-phases li.is-processing-occupied > i {
  background: #b78a34;
}

.business-booking-tooltip-phases li.is-buffer > i {
  background: #817986;
}

.business-booking-tooltip-phases li > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.business-booking-tooltip-phases li b,
.business-booking-tooltip-phases li small {
  overflow-wrap: anywhere;
  font-size: 0.62rem;
  line-height: 1.3;
}

.business-booking-tooltip-phases li small {
  color: #7b737f;
}

.business-booking-tooltip-override {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 7px;
  border-radius: 8px;
  color: #725216;
  background: #fff5d9;
  font-size: 0.62rem;
  font-weight: 780;
}

.business-booking-tooltip-override > span {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #a97922;
}

.business-booking-conflict-review {
  gap: 14px;
}

.business-booking-conflict-summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #e5dfeb;
  border-radius: 12px;
  background: #faf8fc;
}

.business-booking-conflict-summary > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #6046a4;
  background: #eee8fa;
  font-weight: 900;
}

.business-booking-conflict-summary > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.business-booking-conflict-summary p {
  overflow: hidden;
  margin: 0;
  color: #746c78;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-request-items {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}

.business-request-items > header {
  color: #6c6371;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.business-request-items ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.business-request-items li {
  display: grid;
  grid-template-columns: 30px minmax(120px, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid #e9e4eb;
  border-radius: 11px;
  background: #fff;
}

.business-request-item-index {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: #4c907d;
  background: #e6f5f0;
  font-size: 0.68rem;
  font-weight: 850;
}

.business-request-items li > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.business-request-items li > div :is(strong, span) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-request-items li > div strong {
  font-size: 0.72rem;
}

.business-request-items li > div span {
  color: #746c78;
  font-size: 0.66rem;
}

.business-request-items dl {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px 14px;
  margin: 0;
}

.business-request-items dl > div {
  display: grid;
  gap: 1px;
}

.business-request-items :is(dt, dd) {
  margin: 0;
  font-size: 0.62rem;
}

.business-request-items dt {
  color: #8a828e;
}

.business-request-items dd {
  color: #4a424e;
  font-weight: 760;
}

.business-day-staff-slots > div[data-business-booking-slot] {
  cursor: crosshair;
  touch-action: pan-y;
}

.business-day-staff-slots > div.is-drag-over,
.business-day-staff-slots > div[data-business-drop-date]:hover {
  background: rgba(82, 168, 143, 0.12);
}

@media (max-width: 760px) {
  .business-service-phase-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-service-phase-row {
    grid-template-columns: 26px minmax(0, 1fr) 78px auto;
  }

  .business-service-phase-label,
  .business-service-phase-occupancy {
    grid-column: 2 / -1;
  }

  .business-service-phase-actions {
    grid-column: 4;
    grid-row: 1;
  }

  .business-service-timing-track > span {
    min-width: 28px;
    padding-inline: 5px;
  }

  .business-service-timing-track b {
    display: none;
  }

  .business-day-staff-board {
    grid-template-columns:
      var(--calendar-time-axis-width, 54px)
      minmax(calc(var(--staff-count) * 192px), 1fr);
    min-width: calc(
      var(--calendar-time-axis-width, 54px) + var(--staff-count) * 192px
    );
  }

  .business-day-staff-columns,
  .business-day-staff-headers {
    grid-template-columns: repeat(var(--staff-count), minmax(192px, 1fr));
  }

  .business-calendar-professional-control {
    flex: 1 1 100%;
  }

  .business-request-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-request-items li {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .business-request-items dl {
    grid-column: 2;
    justify-content: flex-start;
  }

  .business-booking-phase-legend {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .business-booking-phase-legend ul {
    flex-wrap: nowrap;
    min-width: max-content;
  }
}

@media (max-width: 440px) {
  .business-service-phase-fields,
  .business-request-review-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .business-service-timing-mode {
    align-items: stretch;
    flex-direction: column;
  }

  .business-service-phase-row {
    grid-template-columns: 24px minmax(0, 1fr) 72px;
  }

  .business-service-phase-actions {
    grid-column: 2 / -1;
    grid-row: auto;
    justify-content: flex-end;
  }

  .business-service-phase-label,
  .business-service-phase-occupancy {
    grid-column: 2 / -1;
  }

  .business-manual-booking-warnings {
    padding: 11px;
  }

  .business-request-items li {
    padding: 8px;
  }

  .business-request-items dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-booking-phase-bands {
    width: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .business-service-capacity-control > span,
  .business-service-capacity-control > span::after,
  .business-service-timing-mode button,
  .business-service-phase-occupancy > span,
  .business-service-phase-occupancy > span::after {
    transition: none;
  }
}

/* Pro dashboard navigation -------------------------------------------------
   Desktop uses a compact icon rail that expands over the workspace. Mobile
   keeps the same destinations in a touch-friendly horizontal dock. */
html:has(.dashboard-shell) {
  scrollbar-gutter: stable;
}

.dashboard-shell {
  --dashboard-rail-width: 64px;
  --dashboard-rail-expanded-width: 224px;
  position: relative;
  display: block;
  grid-template-columns: none;
  min-height: 100dvh;
  overflow-x: clip;
  scroll-padding-left: calc(var(--dashboard-rail-width) + 14px);
}

.dashboard-shell .sidebar.dashboard-bottom-dock {
  position: fixed;
  z-index: 120;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--dashboard-rail-width);
  min-width: var(--dashboard-rail-width);
  max-width: var(--dashboard-rail-expanded-width);
  height: 100dvh;
  min-height: 0;
  max-height: none;
  flex-flow: column nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  padding: 8px 7px;
  overflow: hidden;
  border: 1px solid rgba(83, 69, 103, 0.14);
  border-left: 0;
  border-radius: 0 18px 18px 0;
  background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.985),
      rgba(249, 248, 252, 0.97)
    )
    padding-box;
  box-shadow:
    0 24px 64px rgba(39, 30, 49, 0.16),
    0 4px 16px rgba(39, 30, 49, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transform: translateZ(0);
  backdrop-filter: blur(20px) saturate(1.12);
  pointer-events: auto;
  transition:
    width 260ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms ease;
}

.dashboard-shell .sidebar.dashboard-bottom-dock:hover {
  width: var(--dashboard-rail-expanded-width);
  box-shadow:
    0 28px 72px rgba(39, 30, 49, 0.22),
    0 5px 18px rgba(39, 30, 49, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

/* `render()` replaces dashboard markup during route changes. The app mirrors
   pointer presence into this class so the replacement rail inherits the same
   expanded geometry before it paints. */
.dashboard-shell .sidebar.dashboard-bottom-dock.is-pointer-expanded {
  width: var(--dashboard-rail-expanded-width);
  box-shadow:
    0 28px 72px rgba(39, 30, 49, 0.22),
    0 5px 18px rgba(39, 30, 49, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.dashboard-shell .dashboard-dock-logo {
  display: flex;
  flex: 0 0 48px;
  width: 100%;
  height: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: flex-start;
  padding: 0 5px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition:
    background-color 180ms ease,
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dashboard-shell .dashboard-dock-logo:hover {
  background: #f3effb;
  transform: translateX(1px);
}

.dashboard-shell .dashboard-dock-logo:focus-visible {
  outline: 3px solid rgba(81, 185, 158, 0.42);
  outline-offset: 1px;
}

.dashboard-shell .dashboard-dock-logo .brand-mark {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: 0 7px 18px rgba(92, 69, 164, 0.16);
}

.dashboard-shell .dashboard-dock-brand-copy {
  display: grid;
  width: 0;
  min-width: 0;
  gap: 1px;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    width 240ms cubic-bezier(0.16, 1, 0.3, 1),
    margin-left 240ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 130ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dashboard-shell .dashboard-dock-brand-copy strong {
  width: max-content;
  background: linear-gradient(100deg, #8f79ef 0%, #9f8bff 48%, #64cbb7 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 1.03rem;
  font-weight: 760;
  letter-spacing: -0.035em;
  line-height: 1;
}

.dashboard-shell .dashboard-dock-brand-copy small {
  color: #7b7382;
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.dashboard-shell
  .sidebar.dashboard-bottom-dock:hover
  .dashboard-dock-brand-copy {
  width: 112px;
  margin-left: 9px;
  opacity: 1;
  transform: translateX(0);
  transition-delay: 35ms;
}

.dashboard-shell
  .sidebar.dashboard-bottom-dock.is-pointer-expanded
  .dashboard-dock-brand-copy {
  width: 112px;
  margin-left: 9px;
  opacity: 1;
  transform: translateX(0);
  transition-delay: 35ms;
}

.dashboard-shell .sidebar.dashboard-bottom-dock .side-nav {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -1px 0 0;
  padding: 2px 1px 1px 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(92, 69, 164, 0.18) transparent;
}

.dashboard-shell .dashboard-nav-groups {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(92, 69, 164, 0.18) transparent;
}

.dashboard-shell .dashboard-nav-groups::-webkit-scrollbar {
  width: 4px;
}

.dashboard-shell .dashboard-nav-group {
  display: grid;
  gap: 3px;
  padding-block: 5px 9px;
}

.dashboard-shell .dashboard-nav-group:first-child {
  padding-top: 1px;
}

.dashboard-shell .dashboard-nav-group + .dashboard-nav-group {
  border-top: 1px solid rgba(83, 69, 103, 0.11);
  padding-top: 9px;
}

.dashboard-shell .dashboard-nav-footer {
  display: grid;
  flex: 0 0 auto;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid rgba(83, 69, 103, 0.13);
}

.dashboard-shell .sidebar.dashboard-bottom-dock .side-nav::-webkit-scrollbar {
  width: 4px;
}

.dashboard-shell .sidebar.dashboard-bottom-dock .side-link {
  position: relative;
  display: flex;
  flex: 0 0 42px;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  gap: 10px;
  margin: 0;
  padding: 0 11px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #746c7b;
  background: transparent;
  animation: none;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dashboard-shell .sidebar.dashboard-bottom-dock .side-link .icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  transform: scale(1);
  transform-origin: center;
  transition:
    transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 180ms ease;
}

.dashboard-shell .sidebar.dashboard-bottom-dock .side-link-label {
  position: static;
  z-index: auto;
  display: block;
  width: auto;
  max-width: 0;
  min-height: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  font-size: 0.79rem;
  font-weight: 680;
  line-height: 1.15;
  text-align: left;
  overflow-wrap: normal;
  text-overflow: clip;
  white-space: nowrap;
  transform: translateX(-7px);
  pointer-events: none;
  transition:
    max-width 240ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 130ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dashboard-shell .sidebar.dashboard-bottom-dock:hover .side-link-label {
  max-width: 142px;
  opacity: 1;
  transform: translateX(0);
  transition-delay: 45ms;
}

.dashboard-shell
  .sidebar.dashboard-bottom-dock.is-pointer-expanded
  .side-link-label {
  max-width: 142px;
  opacity: 1;
  transform: translateX(0);
  transition-delay: 45ms;
}

.dashboard-shell .sidebar.dashboard-bottom-dock .side-link:hover,
.dashboard-shell .sidebar.dashboard-bottom-dock .side-link:focus-visible {
  z-index: 3;
  color: #59409f;
  border-color: rgba(111, 84, 180, 0.13);
  background: #f3effb;
  box-shadow: 0 5px 14px rgba(79, 56, 145, 0.1);
  outline: 0;
  transform: translateX(1px);
}

.dashboard-shell .sidebar.dashboard-bottom-dock .side-link:hover .icon,
.dashboard-shell .sidebar.dashboard-bottom-dock .side-link:focus-visible .icon {
  transform: scale(1.2);
  filter: drop-shadow(0 4px 6px rgba(70, 49, 133, 0.18));
}

.dashboard-shell .sidebar.dashboard-bottom-dock .side-link.active {
  color: #563f9a;
  border-color: rgba(101, 77, 170, 0.18);
  background: #eee9fa;
  box-shadow:
    0 4px 13px rgba(77, 53, 151, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  animation: none;
}

.dashboard-shell .dashboard-nav-request-count {
  position: absolute;
  right: 7px;
  top: 5px;
  z-index: 2;
  display: grid;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: #c83d55;
  box-shadow: 0 4px 10px rgba(157, 37, 60, 0.24);
  font-size: 0.55rem;
  font-weight: 850;
  line-height: 1;
}

.business-booking-request-notice {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 90;
  display: grid;
  width: min(380px, calc(100vw - 32px));
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: start;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(101, 77, 170, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 50px rgba(48, 37, 63, 0.2);
}

.business-booking-request-notice.is-entering {
  animation: toastIn 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.business-booking-request-notice-open {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 5px;
  border: 0;
  border-radius: 11px;
  color: #322b3a;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.business-booking-request-notice-open:hover,
.business-booking-request-notice-open:focus-visible {
  background: #f6f2fc;
  outline: 0;
}

.business-booking-request-notice-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #58a38f, #7658bf);
}

.business-booking-request-notice-icon .icon {
  width: 20px;
  height: 20px;
}

.business-booking-request-notice-open > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.business-booking-request-notice-open small {
  color: #684ca8;
  font-size: 0.63rem;
  font-weight: 820;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.business-booking-request-notice-open strong,
.business-booking-request-notice-open time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-booking-request-notice-open strong {
  font-size: 0.82rem;
}

.business-booking-request-notice-open time {
  color: #746c7b;
  font-size: 0.7rem;
  font-weight: 620;
}

.business-booking-request-notice-close {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: #746c7b;
  background: transparent;
  font-size: 1.15rem;
  cursor: pointer;
}

.business-booking-request-notice-close:hover,
.business-booking-request-notice-close:focus-visible {
  color: #563f9a;
  background: #f1ecfa;
  outline: 0;
}

.dashboard-shell .dashboard-main {
  width: 100%;
  min-width: 0;
  min-height: 100dvh;
}

.dashboard-shell .dashboard-content {
  width: 100%;
  max-width: none;
  padding: 16px clamp(14px, 1.7vw, 24px) 28px
    calc(var(--dashboard-rail-width) + clamp(16px, 1.7vw, 24px));
}

.dashboard-shell:has(.salon-home-inline-editor),
.dashboard-shell:has(.salon-home-inline-editor) .dashboard-main,
.dashboard-shell .dashboard-content:has(.salon-home-inline-editor) {
  background: #fff;
}

.dashboard-shell .dashboard-content:has(.salon-home-inline-editor) {
  padding-top: 0;
}

@media (min-width: 761px) {
  .dashboard-shell .dashboard-content:has(.salon-home-inline-editor) {
    padding: 0 0 0 var(--dashboard-rail-width);
  }
}

.dashboard-shell .ai-prompt-dock {
  right: 24px;
  bottom: 18px;
  left: calc(var(--dashboard-rail-width) + 24px);
}

.dashboard-shell .site-builder-studio {
  padding-bottom: 112px;
}

.dashboard-shell .toast {
  bottom: 18px;
}

/* A tighter workspace density keeps operational dashboards readable without
   making their controls feel cramped. */
.dashboard-shell .business-workspace-page,
.dashboard-shell .business-site-ops {
  gap: 16px;
}

.dashboard-shell .business-page-header {
  gap: 14px;
}

.dashboard-shell .business-page-title-row :is(h1, h2) {
  font-size: clamp(1.55rem, 2vw, 2.05rem);
}

.dashboard-shell .business-page-description {
  max-width: 680px;
  font-size: 0.86rem;
  line-height: 1.4;
}

.dashboard-shell :is(.business-panel, .business-client-detail) {
  padding: clamp(14px, 1.7vw, 22px);
  border-radius: 16px;
}

.dashboard-shell .business-metrics-grid {
  gap: 10px;
}

.dashboard-shell .business-metric {
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
}

.dashboard-route-enter .dashboard-content > :first-child {
  animation: dashboardRouteIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.dashboard-route-enter .dashboard-content > :first-child > * {
  animation: dashboardComponentIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.dashboard-route-enter .dashboard-content > :first-child > :nth-child(2) {
  animation-delay: 35ms;
}

.dashboard-route-enter .dashboard-content > :first-child > :nth-child(3) {
  animation-delay: 70ms;
}

.dashboard-route-enter .dashboard-content > :first-child > :nth-child(n + 4) {
  animation-delay: 105ms;
}

@keyframes dashboardRouteIn {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes dashboardComponentIn {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.dashboard-workspace-loading {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: calc(100dvh - 44px);
  text-align: center;
}

.dashboard-workspace-loading :is(h1, p) {
  margin: 0;
}

.dashboard-workspace-loading h1 {
  color: #292331;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  letter-spacing: -0.045em;
}

.dashboard-workspace-loading > p:not(.eyebrow) {
  color: #746c7b;
  font-size: 0.9rem;
}

.dashboard-workspace-loading-emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 5px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 50px rgba(68, 45, 127, 0.12);
}

.dashboard-workspace-loading-emblem::before,
.dashboard-workspace-loading-emblem > span {
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(131, 103, 223, 0.22);
  border-radius: 31px;
  content: "";
}

.dashboard-workspace-loading-emblem::before {
  animation: dashboardLoadingOrbit 2.4s linear infinite;
  border-top-color: #9478ef;
}

.dashboard-workspace-loading-emblem > span {
  inset: -15px;
  opacity: 0.45;
  animation: dashboardLoadingPulse 1.7s ease-in-out infinite;
}

.dashboard-workspace-loading-emblem img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.dashboard-workspace-loading-progress {
  width: min(230px, 58vw);
  height: 4px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #ece8f3;
}

.dashboard-workspace-loading-progress > span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ad98ef, #7e61dd, #9de0cc);
  animation: dashboardLoadingProgress 1.35s ease-in-out infinite;
}

@keyframes dashboardLoadingOrbit {
  to {
    transform: rotate(1turn);
  }
}

@keyframes dashboardLoadingPulse {
  50% {
    opacity: 0.1;
    transform: scale(1.08);
  }
}

@keyframes dashboardLoadingProgress {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(340%);
  }
}

@media (max-width: 760px) {
  .business-booking-request-notice {
    top: 12px;
    right: 12px;
    width: calc(100vw - 24px);
  }

  .dashboard-shell .dashboard-nav-request-count {
    top: 1px;
    right: 1px;
  }

  .dashboard-shell .account-persona-switcher.sidebar-persona {
    flex: 0 0 44px;
    width: 44px;
  }

  .dashboard-shell .account-persona-switcher.sidebar-persona > summary,
  .dashboard-shell .sidebar.dashboard-bottom-dock:hover
    .account-persona-switcher.sidebar-persona
    > summary {
    grid-template-columns: 34px;
    width: 44px;
    min-width: 44px;
    padding: 4px;
  }

  .dashboard-shell .account-persona-switcher.sidebar-persona
    :is(.account-persona-summary-copy, .account-persona-chevron),
  .dashboard-shell .sidebar.dashboard-bottom-dock:hover
    .account-persona-switcher.sidebar-persona
    :is(.account-persona-summary-copy, .account-persona-chevron) {
    display: none;
  }

  .dashboard-shell .account-persona-switcher.sidebar-persona
    .account-persona-menu {
    position: fixed;
    right: 8px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    width: min(310px, calc(100vw - 16px));
    box-shadow: 0 24px 60px rgba(40, 32, 50, 0.2);
  }

  .dashboard-shell {
    --dashboard-dock-clearance: 108px;
    scroll-padding-right: 0;
    scroll-padding-bottom: calc(
      var(--dashboard-dock-clearance) + env(safe-area-inset-bottom)
    );
    scroll-padding-left: 0;
  }

  .dashboard-shell .sidebar.dashboard-bottom-dock {
    inset: auto auto max(8px, env(safe-area-inset-bottom)) 50%;
    display: inline-flex;
    width: max-content;
    min-width: 0;
    max-width: calc(100vw - 16px);
    height: auto;
    flex-flow: row nowrap;
    align-items: center;
    padding: 6px;
    overflow: visible;
    border-left: 1px solid rgba(83, 69, 103, 0.14);
    border-radius: 20px;
    transform: translateX(-50%);
  }

  .dashboard-shell .sidebar.dashboard-bottom-dock:hover,
  .dashboard-shell .sidebar.dashboard-bottom-dock:focus-within,
  .dashboard-shell .sidebar.dashboard-bottom-dock.is-pointer-expanded {
    width: max-content;
  }

  .dashboard-shell .dashboard-dock-logo {
    flex: 0 0 42px;
    width: 42px;
    height: 54px;
    min-height: 54px;
    padding: 0 2px;
  }

  .dashboard-shell .dashboard-dock-logo .brand-mark {
    width: 36px;
    height: 36px;
  }

  .dashboard-shell .dashboard-dock-brand-copy {
    display: none;
  }

  .dashboard-shell .sidebar.dashboard-bottom-dock .side-nav {
    flex: 0 1 auto;
    width: auto;
    max-width: calc(100vw - 70px);
    height: 58px;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 2px;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }

  .dashboard-shell .dashboard-nav-groups,
  .dashboard-shell .dashboard-nav-group,
  .dashboard-shell .dashboard-nav-footer {
    display: contents;
  }

  .dashboard-shell .sidebar.dashboard-bottom-dock .side-nav::-webkit-scrollbar {
    display: none;
  }

  .dashboard-shell .sidebar.dashboard-bottom-dock .side-link {
    flex: 0 0 54px;
    width: 54px;
    min-width: 54px;
    max-width: 54px;
    height: 54px;
    min-height: 54px;
    max-height: 54px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 5px 2px 4px;
    scroll-snap-align: center;
    transform: none;
  }

  .dashboard-shell .sidebar.dashboard-bottom-dock .side-link-label,
  .dashboard-shell
    .sidebar.dashboard-bottom-dock:is(:hover, :focus-within)
    .side-link-label {
    display: block;
    max-width: none;
    opacity: 1;
    font-size: 0.49rem;
    line-height: 1;
    text-align: center;
    transform: none;
  }

  .dashboard-shell .dashboard-content {
    padding: 14px 12px
      calc(var(--dashboard-dock-clearance) + env(safe-area-inset-bottom));
  }

  .dashboard-shell .ai-prompt-dock {
    right: 12px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    left: 12px;
  }

  .dashboard-shell .toast {
    right: 12px;
    bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .dashboard-shell .site-builder-studio {
    padding-bottom: calc(var(--dashboard-dock-clearance) + 160px);
  }
}

@media (max-width: 420px) {
  .dashboard-shell {
    --dashboard-dock-clearance: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-shell .sidebar.dashboard-bottom-dock,
  .dashboard-shell .dashboard-dock-logo,
  .dashboard-shell .dashboard-dock-brand-copy,
  .dashboard-shell .sidebar.dashboard-bottom-dock .side-link,
  .dashboard-shell .sidebar.dashboard-bottom-dock .side-link .icon,
  .dashboard-shell .sidebar.dashboard-bottom-dock .side-link-label {
    transition: none;
  }

  .dashboard-route-enter .dashboard-content > :first-child,
  .dashboard-workspace-loading-emblem::before,
  .dashboard-workspace-loading-emblem > span,
  .dashboard-workspace-loading-progress > span {
    animation: none;
  }
}

.pro-page-wrap:has(.dashboard-workspace-loading) {
  width: 100%;
  min-height: calc(100dvh - 76px);
  padding: 0;
}

/* Unified professional account home. Account-level controls live here; salon
   dashboards remain focused on the salon that the user explicitly opens. */
.pro-page-wrap:has(.pro-account-home) {
  width: min(calc(100% - 40px), 1240px);
  min-height: calc(100dvh - 76px);
  margin-inline: auto;
  padding-block: 26px 64px;
}

.pro-page-wrap:focus {
  outline: 0;
}

.pro-portal-shell .pro-topbar {
  grid-template-columns: minmax(170px, auto) minmax(0, 1fr);
}

.pro-account-home {
  display: grid;
  gap: 18px;
  width: 100%;
}

.pro-account-home :is(h1, h2, h3, p) {
  margin: 0;
}

.pro-account-home-heading,
.pro-account-profile-card > header,
.pro-account-salons > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.pro-account-home-heading > div {
  display: grid;
  gap: 5px;
}

.pro-account-home-heading h1 {
  color: #19372f;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
}

.pro-account-home-heading > div > p:last-child {
  color: var(--pro-muted);
}

.pro-account-home-heading > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #cbe4dc;
  border-radius: 999px;
  color: #2d6d5a;
  background: #eff9f5;
  font-size: 0.84rem;
  font-weight: 850;
  white-space: nowrap;
}

.pro-account-home-heading > span .icon {
  width: 17px;
  height: 17px;
}

.pro-account-profile-card,
.pro-account-salons {
  display: grid;
  gap: 22px;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--pro-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(41, 82, 70, 0.055);
}

.pro-account-profile-card > header > div,
.pro-account-salons > header > div {
  display: grid;
  gap: 4px;
}

.pro-account-profile-card > header > button,
.pro-account-salons > header > button {
  min-width: 132px;
}

.pro-account-profile-layout {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 42px);
}

.pro-account-profile-layout > .pro-stylist-photo-control {
  margin: 0;
}

.pro-account-profile-layout .pro-stylist-photo-frame img {
  width: 104px;
  height: 104px;
}

.pro-account-profile-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  min-width: 0;
}

.pro-account-profile-fields label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.pro-account-profile-fields label > span {
  color: #294a41;
  font-size: 0.78rem;
  font-weight: 820;
}

.pro-account-profile-fields :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid #cbded8;
  border-radius: 12px;
  color: #18352e;
  background: #fff;
  font: inherit;
}

.pro-account-profile-fields select {
  appearance: none;
}

.pro-account-profile-fields :is(input, select):focus {
  border-color: #6750b8;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(103, 80, 184, 0.14);
}

.pro-account-profile-fields input[readonly] {
  color: #61766f;
  background: #f6f9f8;
}

.pro-account-salon-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pro-account-salon-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--pro-line);
  border-radius: 17px;
  background: #fbfdfc;
}

.pro-account-salon-card.is-current {
  border-color: rgba(71, 148, 124, 0.42);
  box-shadow: inset 3px 0 0 #4f927d;
}

.pro-account-salon-avatar {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  overflow: hidden;
  border-radius: 15px;
  color: #2f6f5d;
  background: var(--pro-accent-soft);
  font-size: 1.05rem;
  font-weight: 900;
}

.pro-account-salon-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pro-account-salon-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.pro-account-salon-copy > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pro-account-salon-copy h3,
.pro-account-salon-copy p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-account-salon-copy > div > span {
  padding: 4px 8px;
  border-radius: 999px;
  color: #2d6d5a;
  background: #e8f7f1;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.pro-account-salon-copy p {
  color: var(--pro-muted);
  font-size: 0.82rem;
}

.pro-account-salon-card > button {
  min-width: 132px;
}

.pro-account-salon-open {
  min-width: 148px;
}

.pro-account-salon-card.is-opening {
  border-color: rgba(82, 165, 142, 0.46);
  box-shadow: 0 16px 36px rgba(50, 117, 99, 0.11);
}

.pro-account-salon-spinner {
  display: inline-block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pro-account-salon-spin 700ms linear infinite;
}

@keyframes pro-account-salon-spin {
  to {
    transform: rotate(1turn);
  }
}

.pro-account-empty-salons {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 18px;
  border: 1px dashed var(--pro-line);
  border-radius: 17px;
  color: var(--pro-muted);
}

.pro-account-empty-salons > span {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  color: var(--pro-accent-strong);
  background: var(--pro-accent-soft);
}

.pro-account-empty-salons > div {
  display: grid;
  gap: 3px;
}

.pro-account-connection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.pro-account-connection-grid > :is(.pro-code-card, .pro-salon-code-request) {
  min-width: 0;
}

.me-page-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

@media (min-width: 769px) and (max-width: 1320px) {
  .customer-topbar .top-actions > .customer-pro-entry {
    display: inline-flex;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .customer-topbar .top-actions > .customer-pro-entry span {
    display: none;
  }

  .customer-topbar .top-actions > .customer-pro-entry {
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
  }
}

@media (max-width: 900px) {
  .pro-account-salon-list,
  .pro-account-connection-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .pro-page-wrap:has(.pro-account-home) {
    width: min(calc(100% - 24px), 1240px);
    padding-block: 18px 38px;
  }

  .pro-account-home-heading,
  .pro-account-profile-card > header,
  .pro-account-salons > header {
    align-items: stretch;
    flex-direction: column;
  }

  .pro-account-home-heading > span,
  .pro-account-profile-card > header > button,
  .pro-account-salons > header > button {
    align-self: flex-start;
  }

  .pro-account-profile-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .pro-account-profile-layout > .pro-stylist-photo-control {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    justify-self: start;
    align-items: center;
  }

  .pro-account-profile-layout .pro-stylist-photo-frame {
    grid-row: 1 / span 2;
  }

  .pro-account-profile-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .pro-account-salon-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .pro-account-salon-avatar {
    width: 48px;
    height: 48px;
  }

  .pro-account-salon-card > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .me-page-header-actions {
    width: 100%;
    justify-content: stretch;
  }

  .me-page-header-actions > button {
    flex: 1 1 150px;
  }
}

@media (max-width: 768px) {
  .mobile-tabbar.has-pro-entry {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Location is opt-in: keep the map completely neutral until permission is
   granted instead of implying that a default city is the visitor's location. */
.directory-map-panel.directory-map-permission {
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 64px);
  background:
    radial-gradient(
      circle at 50% 32%,
      rgba(117, 205, 179, 0.18),
      transparent 34%
    ),
    linear-gradient(145deg, #f8fcfa, #f2f0fa);
}

/* The desktop search controls share the map's grid cell and float above it.
   Reserve their full height plus a clear gap so the opt-in prompt can never
   begin underneath the search surface. */
@media (min-width: 769px) {
  body.salon-directory-mode .directory-map-panel.directory-map-permission {
    padding-block-start: clamp(112px, 15dvh, 144px);
  }
}

.directory-map-permission-content {
  display: grid;
  justify-items: center;
  width: min(100%, 420px);
  gap: 18px;
  text-align: center;
}

.directory-map-permission-content > div {
  display: grid;
  gap: 6px;
}

.directory-map-permission-content h2,
.directory-map-permission-content p {
  margin: 0;
}

.directory-map-permission-content > div > p:last-child {
  color: var(--muted);
  line-height: 1.55;
}

.directory-map-permission-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(78, 155, 132, 0.2);
  border-radius: 22px;
  color: var(--teal);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 36px rgba(54, 42, 89, 0.09);
}

.directory-map-permission-icon .icon {
  width: 28px;
  height: 28px;
}

.me-salons-view {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.me-salons-view .pro-account-salons {
  margin: 0;
  box-shadow: 0 12px 30px rgba(53, 42, 79, 0.055);
}

.me-salons-view .pro-account-salons > header > span {
  flex: 0 0 auto;
}

.me-salons-view .pro-account-salon-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.pro-account-salon-card.is-expanded {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(53, 42, 79, 0.045);
}

.pro-account-salon-card.is-expanded.is-current {
  box-shadow:
    inset 3px 0 0 #4f927d,
    0 10px 28px rgba(53, 42, 79, 0.045);
}

.pro-account-salon-primary {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 22px;
}

.pro-account-salon-card.is-expanded .pro-account-salon-avatar {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  font-size: 1.25rem;
}

.pro-account-salon-card.is-expanded .pro-account-salon-copy {
  gap: 7px;
}

.pro-account-salon-card.is-expanded .pro-account-salon-copy h3 {
  font-size: 1.12rem;
}

.pro-account-salon-card.is-expanded .pro-account-salon-open {
  min-width: 172px;
}

.pro-account-salon-card.is-expanded .pro-account-salon-open .icon {
  width: 16px;
  height: 16px;
}

.pro-account-salon-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--pro-line);
  background: #f7faf9;
}

.pro-account-salon-summary > div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 18px 22px;
}

.pro-account-salon-summary > div + div {
  border-left: 1px solid var(--pro-line);
}

.pro-account-salon-summary > div > .icon {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 12px;
  color: #3f7f6d;
  background: #e7f4ef;
}

.pro-account-salon-summary > div > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pro-account-salon-summary :is(small, strong, em) {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-account-salon-summary small {
  color: #657a73;
  font-size: 0.7rem;
  font-weight: 790;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.pro-account-salon-summary strong {
  color: #19372f;
  font-size: 0.92rem;
}

.pro-account-salon-summary em {
  color: var(--pro-muted);
  font-size: 0.75rem;
  font-style: normal;
}

.pro-account-salon-summary-state {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 16px 22px;
  border-top: 1px solid var(--pro-line);
  color: var(--pro-muted);
  background: #f7faf9;
  font-size: 0.82rem;
  font-weight: 730;
}

.pro-account-salon-summary-state > .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #4f927d;
}

.pro-account-salon-summary-state > span {
  display: grid;
  gap: 2px;
}

.pro-account-salon-summary-state :is(strong, small) {
  display: block;
}

.pro-account-salon-summary-state strong {
  color: #294a41;
}

.pro-account-salon-summary-state small {
  font-weight: 600;
}

.me-salon-connection-grid {
  margin-top: 0;
}

@media (max-width: 700px) {
  .me-salons-view .pro-account-salons {
    padding: 18px;
  }

  .pro-account-salon-primary {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 13px;
    padding: 18px;
  }

  .pro-account-salon-card.is-expanded .pro-account-salon-avatar {
    width: 56px;
    height: 56px;
    border-radius: 15px;
  }

  .pro-account-salon-primary > .pro-account-salon-open {
    grid-column: 1 / -1;
    width: 100%;
  }

  .pro-account-salon-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .pro-account-salon-summary > div {
    padding: 16px 18px;
  }

  .pro-account-salon-summary > div + div {
    border-top: 1px solid var(--pro-line);
    border-left: 0;
  }
}

/* Shared customer authentication is used on the account page and during
   booking checkout. Keep both surfaces visually and behaviorally identical. */
.auth-panel[data-auth-surface] {
  align-content: start;
  gap: 16px;
  padding: clamp(24px, 3vw, 36px);
}

.auth-panel[data-auth-surface] > div:first-child,
.auth-panel[data-auth-surface] > div:first-child p:not(.eyebrow),
.auth-panel[data-auth-surface] h1,
.auth-panel[data-auth-surface] .auth-form {
  min-height: 0;
}

.auth-panel[data-auth-surface] > div:first-child {
  gap: 7px;
}

.auth-panel[data-auth-surface] > div:first-child > p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.auth-panel[data-auth-surface] .auth-contact-grid {
  grid-template-columns: minmax(0, 1fr);
}

.auth-panel[data-auth-surface] .auth-form {
  gap: 13px;
}

.auth-panel[data-auth-surface] .auth-form label {
  gap: 7px;
  color: #514b59;
  font-size: 0.82rem;
}

.auth-panel[data-auth-surface] .auth-form input {
  min-height: 50px;
  border-radius: 13px;
  padding-inline: 15px;
}

.customer-auth-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.customer-auth-progress span {
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--muted);
  background: #f4f0f8;
  font-size: 0.75rem;
  font-weight: 820;
  text-align: center;
}

.customer-auth-progress span.done,
.customer-auth-progress span.active {
  color: #5e45b3;
  background: rgba(126, 104, 196, 0.12);
}

.auth-account-email {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px 12px;
  background: #faf8fc;
}

.auth-account-email span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 780;
}

.auth-account-email strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-account-email button {
  border: 0;
  padding: 4px 6px;
  color: var(--accent-strong);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 820;
}

.method-button.is-disabled,
.method-button:disabled {
  cursor: not-allowed;
  opacity: 0.54;
  filter: grayscale(0.35);
}

.method-button.is-disabled:hover,
.method-button:disabled:hover {
  border-color: rgba(126, 104, 196, 0.16);
  background: #fbf9ff;
  box-shadow: none;
  transform: none;
}

.auth-screen .auth-panel[data-auth-surface="page"] {
  width: min(100%, 640px);
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - 116px);
}

body.booking-auth-modal-open {
  overflow: hidden;
}

.booking-auth-modal-layer {
  position: fixed;
  z-index: 1300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
}

.booking-auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 25, 45, 0.56);
  backdrop-filter: blur(12px);
  animation: authBackdropIn 180ms ease both;
}

.booking-auth-dialog {
  position: relative;
  z-index: 1;
  width: min(610px, 100%);
  max-height: min(860px, calc(100dvh - 44px));
  overflow: auto;
  border: 1px solid rgba(126, 104, 196, 0.16);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 34px 100px rgba(28, 20, 49, 0.3);
  animation: bookingAuthIn 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.booking-auth-dialog > .auth-panel {
  width: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.booking-auth-close {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  border-color: rgba(126, 104, 196, 0.16);
  background: rgba(255, 255, 255, 0.92);
}

@keyframes authBackdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes bookingAuthIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 700px) {
  .booking-auth-modal-layer {
    align-items: end;
    padding: 10px;
  }

  .booking-auth-dialog {
    max-height: calc(100dvh - 20px);
    border-radius: 24px;
  }

  .booking-auth-dialog .auth-panel[data-auth-surface] {
    padding: 24px 18px 20px;
  }

  .signup-methods {
    grid-template-columns: minmax(0, 1fr);
  }

  .method-button {
    min-height: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-auth-backdrop,
  .booking-auth-dialog {
    animation: none;
  }
}

/* Focused customer access and booking flow — intentionally last in cascade. */
.auth-screen {
  grid-template-columns: minmax(0, 1fr) minmax(470px, 560px);
  background: #f5f4f2;
}

.auth-visual-copy {
  max-width: 600px;
  gap: 13px;
}

.auth-visual-copy h1 {
  max-width: 590px;
  font-size: clamp(2.7rem, 4.4vw, 4.7rem);
  letter-spacing: -0.045em;
}

.auth-visual-lede {
  max-width: 470px;
  margin: 0;
}

.auth-workspace {
  gap: 12px;
  padding: clamp(18px, 2.5vw, 30px);
  background: #f7f6f4;
}

.auth-workspace-top .ghost-button,
.auth-workspace-top .outline-button {
  border-color: #dedbe1;
  color: #4b4650;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: none;
}

.auth-panel[data-auth-surface] {
  --auth-ink: #24212b;
  --auth-muted: #6c6670;
  --auth-line: #e1dee4;
  width: min(100%, 520px);
  max-width: 520px;
  gap: 18px;
  border: 1px solid var(--auth-line);
  border-radius: 20px;
  padding: clamp(26px, 3vw, 34px);
  color: var(--auth-ink);
  background: #fff;
  box-shadow: 0 18px 54px rgba(36, 33, 43, 0.09);
}

.auth-screen .auth-panel[data-auth-surface="page"] {
  width: min(100%, 520px);
  max-height: calc(100dvh - 110px);
}

.auth-panel[data-auth-surface] .auth-panel-heading {
  display: grid;
  min-height: 0;
  gap: 6px;
}

.auth-panel[data-auth-surface] .auth-panel-heading .eyebrow {
  margin: 0 0 2px;
  color: #6552a9;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
}

.auth-panel[data-auth-surface] .auth-panel-heading h1 {
  min-height: 0;
  margin: 0;
  color: var(--auth-ink);
  font-size: clamp(1.9rem, 3vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.auth-panel[data-auth-surface] .auth-panel-heading > p:last-child {
  max-width: 43ch;
  margin: 0;
  color: var(--auth-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.auth-panel[data-auth-surface] .auth-tabs {
  position: relative;
  isolation: isolate;
  gap: 3px;
  border-color: var(--auth-line);
  border-radius: 12px;
  padding: 3px;
  background: #f4f3f4;
}

.auth-panel[data-auth-surface] .auth-tabs::before {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 4.5px);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(36, 33, 43, 0.12);
  content: "";
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.auth-panel[data-auth-surface] .auth-tabs[data-auth-mode="login"]::before {
  transform: translateX(calc(100% + 3px));
}

.auth-panel[data-auth-surface] .auth-tabs button {
  position: relative;
  z-index: 1;
  min-height: 42px;
  border-radius: 9px;
  color: var(--auth-muted);
  font-size: 0.88rem;
  font-weight: 730;
}

.auth-panel[data-auth-surface] .auth-tabs button.active {
  color: var(--auth-ink);
  background: transparent;
  box-shadow: none;
  animation: none;
}

.auth-mode-stage {
  display: grid;
  gap: 13px;
  min-width: 0;
  animation: authModeStageIn 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.auth-panel[data-auth-surface]
  .auth-mode-stage
  :is(
    .auth-form > .auth-grid,
    .auth-form > label,
    .auth-button-row,
    .auth-actions,
    .signup-methods
  ) {
  animation: none;
}

@keyframes authModeStageIn {
  from {
    transform: translateX(5px);
  }

  to {
    transform: translateX(0);
  }
}

.auth-panel[data-auth-surface] .auth-form {
  min-height: 0;
  gap: 13px;
}

.auth-panel[data-auth-surface] .auth-form label {
  gap: 7px;
  color: #4f4a53;
  font-size: 0.82rem;
  font-weight: 720;
}

.auth-panel[data-auth-surface] .auth-form input {
  min-height: 49px;
  border-color: #cbc7cf;
  border-radius: 11px;
  padding-inline: 14px;
  background: #fff;
}

.auth-panel[data-auth-surface] .auth-form input:focus {
  border-color: #776a88;
  box-shadow: 0 0 0 3px rgba(105, 83, 183, 0.1);
}

.auth-panel[data-auth-surface] .auth-button-row {
  gap: 8px;
}

.auth-panel[data-auth-surface] .solid-button.customer {
  min-height: 49px;
  border-radius: 11px;
  color: #fff;
  background: #28232d;
  box-shadow: none;
}

.auth-panel[data-auth-surface] .solid-button.customer:hover {
  background: #3b3344;
  box-shadow: none;
}

.auth-panel[data-auth-surface] .auth-back-button {
  border: 1px solid var(--auth-line);
  border-radius: 11px;
  background: #fff;
}

.auth-panel[data-auth-surface] .auth-account-email {
  border-color: var(--auth-line);
  border-radius: 11px;
  background: #f8f7f8;
}

.auth-panel[data-auth-surface] .auth-account-email button {
  color: #6552a9;
}

.auth-panel[data-auth-surface] .auth-divider {
  min-height: 18px;
  color: #8a858d;
  font-size: 0.73rem;
  font-weight: 690;
}

.auth-panel[data-auth-surface] .auth-divider span {
  background: #fff;
}

.auth-panel[data-auth-surface] .signup-methods {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.auth-panel[data-auth-surface] .method-button {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  min-height: 54px;
  gap: 11px;
  border-color: var(--auth-line);
  border-radius: 11px;
  padding: 9px 13px;
  background: #fff;
}

.auth-panel[data-auth-surface] .method-button .icon {
  width: 18px;
  height: 18px;
  color: #5e4ba7;
}

.auth-panel[data-auth-surface] .method-button span {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.auth-panel[data-auth-surface] .method-button b {
  font-size: 0.86rem;
  font-weight: 720;
}

.auth-panel[data-auth-surface] .method-button small {
  color: #918c94;
  font-size: 0.7rem;
}

.auth-panel[data-auth-surface] .method-button:not(:disabled):hover {
  border-color: #bdb6c5;
  background: #faf9fa;
  box-shadow: none;
}

.auth-panel[data-auth-surface] .method-button.is-disabled,
.auth-panel[data-auth-surface] .method-button:disabled {
  color: #827d86;
  background: #faf9fa;
  opacity: 0.62;
  filter: none;
}

.auth-panel[data-auth-surface] .auth-inline-error {
  margin: 0;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fdf0f1;
  font-size: 0.82rem;
}

.booking-auth-backdrop {
  background: rgba(29, 27, 32, 0.5);
  backdrop-filter: blur(8px);
}

.booking-auth-dialog {
  width: min(540px, 100%);
  max-height: min(820px, calc(100dvh - 44px));
  border-color: #dedbe1;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(28, 25, 33, 0.24);
}

.booking-auth-dialog > .auth-panel[data-auth-surface="booking"] {
  width: 100%;
  max-width: none;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

.booking-auth-dialog .auth-panel-heading {
  padding-inline-end: 42px;
}

.booking-auth-close {
  top: 18px;
  right: 18px;
  border-color: #dedbe1;
  color: #514a57;
  background: #fff;
}

@media (max-width: 640px) {
  .auth-screen {
    display: block;
    min-height: 100dvh;
  }

  .auth-visual-panel {
    display: none;
  }

  .auth-workspace {
    min-height: 100dvh;
    padding: 14px;
  }

  .auth-screen .auth-panel[data-auth-surface="page"] {
    max-height: none;
    margin-block: 18px 28px;
  }

  .booking-auth-modal-layer {
    padding: 8px;
  }

  .booking-auth-dialog {
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
  }

  .booking-auth-dialog .auth-panel[data-auth-surface] {
    padding: 25px 18px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-panel[data-auth-surface] .auth-tabs::before {
    transition: none;
  }

  .auth-mode-stage {
    animation: none;
  }
}

/* Public salon profile ----------------------------------------------------
   This namespace intentionally does not touch the editable salon-site
   canvas used by Pro. */
body.salon-site-mode {
  --salon-profile-violet: #67549a;
  --salon-profile-violet-dark: #51416f;
  --salon-profile-violet-soft: #f3e8ff;
  --salon-profile-ink: #24212b;
  --salon-profile-muted: #6f6975;
  --salon-profile-line: #e3e0e6;
  --salon-profile-surface: #fff;
  background: #fff;
}

body.salon-site-mode :is(#app, .app-shell, .customer-shell, .page-wrap) {
  background: #fff;
}

body.salon-site-mode .customer-shell > .page-wrap {
  --salon-detail-outer-gutter: clamp(96px, 15vw, 192px);
  --salon-detail-inner-gutter: clamp(60px, 9.375vw, 120px);
  width: min(calc(100% - var(--salon-detail-outer-gutter)), 1660px);
  max-width: 1660px;
  margin-inline: auto;
  padding: 0 var(--salon-detail-inner-gutter) 96px;
}

.salon-profile-section-nav button:focus-visible {
  outline: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(103, 84, 154, 0.38);
}

.salon-public-profile {
  --salon-profile-violet: #67549a;
  --salon-profile-violet-dark: #51416f;
  --salon-profile-violet-soft: #f3e8ff;
  --salon-profile-ink: #24212b;
  --salon-profile-muted: #6f6975;
  --salon-profile-line: #e3e0e6;
  --salon-profile-surface: #fff;
  --salon-profile-accent: #66cdb4;
  --salon-profile-heading-scale: 1;
  --salon-profile-body-scale: 1;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  color: var(--salon-profile-ink);
  background: transparent;
}

.salon-public-profile
  :is(button, input, textarea, select, p, span, small, dt, dd) {
  font-size-adjust: from-font;
}

.salon-profile-unavailable {
  display: grid;
  width: min(100%, 680px);
  justify-items: start;
  gap: 12px;
  margin: clamp(56px, 9vw, 120px) auto;
  padding: clamp(28px, 5vw, 52px);
}

.salon-profile-unavailable > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  color: var(--salon-profile-violet-dark);
  background: var(--salon-profile-violet-soft);
}

.salon-profile-unavailable h1,
.salon-profile-unavailable p {
  margin: 0;
}

.salon-profile-unavailable h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.salon-profile-unavailable > p:not(.eyebrow) {
  max-width: 560px;
  color: var(--salon-profile-muted);
  line-height: 1.55;
}

.salon-profile-loading {
  display: grid;
  width: 100%;
  max-width: 1680px;
  gap: 24px;
  margin: 0 auto;
  padding-top: clamp(42px, 6vw, 80px);
}

.salon-profile-loading :is(span, strong, i) {
  display: block;
  border-radius: 12px;
  background: linear-gradient(100deg, #ece9ee 22%, #f7f5f8 42%, #ece9ee 64%);
  background-size: 260% 100%;
  animation: salonProfileLoading 1.25s linear infinite;
}

.salon-profile-loading-heading {
  display: grid;
  max-width: 700px;
  gap: 14px;
}

.salon-profile-loading-heading span {
  width: 112px;
  height: 18px;
}

.salon-profile-loading-heading strong {
  width: min(620px, 84vw);
  height: clamp(52px, 7vw, 78px);
}

.salon-profile-loading-heading i {
  width: min(430px, 72vw);
  height: 20px;
}

.salon-profile-loading-nav {
  display: flex;
  gap: 28px;
  border-block: 1px solid #e6e3e8;
  padding: 17px 4px;
}

.salon-profile-loading-nav span {
  width: 72px;
  height: 18px;
}

.salon-profile-loading-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: clamp(340px, 31vw, 560px);
  gap: 14px;
}

.salon-profile-loading-gallery span:first-child {
  grid-row: 1 / -1;
}

.salon-profile-loading-body {
  display: grid;
  grid-template-columns: minmax(300px, 370px) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
}

.salon-profile-loading-body :is(aside, main) {
  display: grid;
  align-content: start;
  gap: 14px;
}

.salon-profile-loading-body aside span:first-child {
  height: 220px;
}

.salon-profile-loading-body aside span:not(:first-child) {
  height: 58px;
}

.salon-profile-loading-body main span {
  height: 118px;
}

.salon-profile-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  padding: 20px 0 14px;
  animation: salonProfileEnter 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.salon-profile-heading > div:first-child {
  display: grid;
  gap: 9px;
}

.salon-profile-back {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  margin-left: -10px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  color: var(--salon-profile-muted);
  background: transparent;
  font-size: 0.87rem;
  font-weight: 750;
}

.salon-profile-back:hover {
  color: var(--salon-profile-ink);
  background: #efedef;
}

.salon-profile-back .icon {
  width: 17px;
  height: 17px;
  transform: rotate(180deg);
}

.salon-profile-heading h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(
    calc(2.35rem * var(--salon-profile-heading-scale)),
    calc(4vw * var(--salon-profile-heading-scale)),
    calc(3.75rem * var(--salon-profile-heading-scale))
  );
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.salon-profile-heading-description {
  max-width: 760px;
  margin: 0;
  color: var(--salon-profile-muted);
  font-size: calc(0.96rem * var(--salon-profile-body-scale));
  line-height: 1.55;
}

.salon-profile-heading-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--salon-profile-muted);
  font-size: calc(0.92rem * var(--salon-profile-body-scale));
  line-height: 1.45;
  flex-wrap: wrap;
}

.salon-profile-heading-meta > * + *::before {
  margin-right: 10px;
  color: #aaa5ad;
  content: "·";
}

.salon-profile-heading-meta strong {
  color: var(--salon-profile-ink);
}

.salon-profile-heading-meta button {
  min-height: 36px;
  border: 0;
  padding: 0;
  color: var(--salon-profile-violet);
  background: transparent;
  font: inherit;
  font-weight: 760;
}

.salon-profile-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 3px;
}

.salon-profile-heading-actions .icon-button {
  border-color: var(--salon-profile-line);
  color: var(--salon-profile-ink);
  background: #fff;
  box-shadow: 0 4px 16px rgba(36, 33, 43, 0.05);
}

.salon-profile-heading-actions .icon-button.active {
  color: var(--salon-profile-violet);
  border-color: #cfc5ee;
  background: var(--salon-profile-violet-soft);
}

.salon-profile-section-nav {
  position: sticky;
  top: 83px;
  z-index: 40;
  display: flex;
  align-items: stretch;
  gap: 30px;
  min-height: 54px;
  overflow-x: auto;
  border: 0;
  border-bottom: 1px solid rgba(227, 224, 230, 0.92);
  background: var(--salon-profile-surface, #fff);
  scrollbar-width: none;
}

.salon-profile-section-nav::-webkit-scrollbar {
  display: none;
}

.salon-profile-section-nav button {
  position: relative;
  flex: 0 0 auto;
  min-height: 54px;
  border: 0;
  padding: 0 2px;
  color: #77717c;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 720;
}

.salon-profile-section-nav button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(
    90deg,
    var(--salon-profile-violet),
    var(--salon-profile-accent)
  );
  content: "";
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.salon-profile-section-nav button[aria-current="true"] {
  color: var(--salon-profile-ink);
}

.salon-profile-section-nav button[aria-current="true"]::after {
  transform: scaleX(1);
}

.salon-profile-gallery {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: clamp(340px, 31vw, 560px);
  gap: 14px;
  padding-top: 20px;
  scroll-margin-top: 144px;
}

.salon-profile-gallery figure {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #ece9ee;
  animation: salonProfileImageEnter 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.salon-profile-gallery figure:nth-child(2) {
  animation-delay: 45ms;
}

.salon-profile-gallery figure:nth-child(3) {
  animation-delay: 90ms;
}

.salon-profile-gallery-1 {
  grid-row: 1 / -1;
}

.salon-profile-gallery.has-1-images {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.salon-profile-gallery.has-1-images .salon-profile-gallery-1 {
  grid-row: 1;
}

.salon-profile-gallery.has-2-images {
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.salon-profile-gallery.has-2-images .salon-profile-gallery-1 {
  grid-row: 1;
}

.salon-profile-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.salon-profile-gallery figure:hover img {
  transform: scale(1.015);
}

.salon-profile-gallery figure > button {
  position: absolute;
  right: 16px;
  bottom: 16px;
  min-height: 44px;
  border: 1px solid rgba(36, 33, 43, 0.16);
  border-radius: 999px;
  padding: 0 16px;
  color: var(--salon-profile-ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(36, 33, 43, 0.14);
  backdrop-filter: blur(12px);
  font-weight: 760;
}

.salon-profile-gallery figure > .salon-profile-gallery-open {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  cursor: zoom-in;
}

.salon-profile-gallery-open:focus-visible {
  outline: 3px solid var(--salon-profile-violet);
  outline-offset: -5px;
}

.salon-profile-gallery-view-all {
  z-index: 3;
}

.salon-profile-gallery-paging {
  position: absolute;
  right: 18px;
  top: 50%;
  z-index: 5;
  display: flex;
  width: calc(100% - 36px);
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}

.salon-profile-gallery-paging button {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(36, 33, 43, 0.16);
  border-radius: 50%;
  padding: 0;
  color: var(--salon-profile-ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 26px rgba(36, 33, 43, 0.16);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  transition:
    color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.salon-profile-gallery-paging button:is(:hover, :focus-visible) {
  color: #fff;
  background: var(--salon-profile-violet);
  transform: scale(1.045);
}

.salon-profile-gallery-paging .previous .icon {
  transform: rotate(180deg);
}

.salon-profile-gallery-paging .icon {
  width: 20px;
  height: 20px;
}

.salon-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 54px);
}

body.salon-gallery-modal-open {
  overflow: hidden;
}

.salon-gallery-lightbox-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: rgba(36, 33, 43, 0.34);
  backdrop-filter: blur(14px);
  cursor: default;
  animation: salonGalleryBackdropEnter 180ms ease-out both;
}

.salon-gallery-lightbox-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1180px, 100%);
  max-height: calc(100dvh - clamp(36px, 8vw, 108px));
  overflow: hidden;
  border: 1px solid var(--salon-profile-line, #e3e0e6);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 100px rgba(36, 33, 43, 0.24);
  animation: salonGalleryPanelEnter 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.salon-gallery-lightbox-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px 14px 22px;
  color: var(--salon-profile-ink, #24212b);
}

.salon-gallery-lightbox-panel > header div {
  min-width: 0;
}

.salon-gallery-lightbox-panel > header :is(p, h2) {
  margin: 0;
}

.salon-gallery-lightbox-panel > header p {
  color: var(--salon-profile-muted, #6f6975);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.salon-gallery-lightbox-panel > header h2 {
  overflow: hidden;
  margin-top: 3px;
  font-size: clamp(1rem, 2vw, 1.3rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salon-gallery-lightbox-close {
  flex: 0 0 auto;
  border-color: var(--salon-profile-line, #e3e0e6);
  color: var(--salon-profile-ink, #24212b);
  background: #fff;
}

.salon-gallery-lightbox-stage {
  position: relative;
  min-height: min(66vh, 720px);
  overflow: hidden;
  background: #f4f2f5;
  touch-action: pan-y;
}

.salon-gallery-lightbox-track {
  --salon-gallery-drag: 0px;
  display: flex;
  width: 100%;
  height: min(66vh, 720px);
  transform: translate3d(
    calc(var(--salon-gallery-index) * -100% + var(--salon-gallery-drag)),
    0,
    0
  );
  transition: transform 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.salon-gallery-lightbox-track:is(.is-dragging, .is-snapping) {
  transition: none;
}

.salon-gallery-lightbox-slide {
  display: grid;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  place-items: center;
}

.salon-gallery-lightbox-slide > img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: min(66vh, 720px);
  object-fit: contain;
}

.salon-gallery-lightbox-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(36, 33, 43, 0.14);
  border-radius: 50%;
  padding: 0;
  color: var(--salon-profile-ink, #24212b);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(36, 33, 43, 0.16);
  backdrop-filter: blur(12px);
  transform: translateY(-50%);
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.salon-gallery-lightbox-arrow:hover {
  color: #fff;
  background: var(--salon-profile-violet, #67549a);
  transform: translateY(-50%) scale(1.04);
}

.salon-gallery-lightbox-arrow.previous {
  left: 18px;
}

.salon-gallery-lightbox-arrow.next {
  right: 18px;
}

.salon-gallery-lightbox-arrow.previous .icon {
  transform: rotate(180deg);
}

.salon-gallery-lightbox-thumbnails {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 18px 16px;
  scrollbar-width: thin;
}

.salon-gallery-lightbox-thumbnails button {
  flex: 0 0 72px;
  height: 54px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0;
  background: #ece9ee;
  opacity: 0.56;
  transition:
    border-color 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

.salon-gallery-lightbox-thumbnails button:is(:hover, [aria-current="true"]) {
  border-color: var(--salon-profile-violet, #67549a);
  opacity: 1;
  transform: translateY(-1px);
}

.salon-gallery-lightbox-thumbnails img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes salonGalleryBackdropEnter {
  from {
    opacity: 0;
  }
}

@keyframes salonGalleryPanelEnter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

@media (max-width: 560px) {
  .salon-gallery-lightbox {
    padding: 10px;
  }

  .salon-gallery-lightbox-panel {
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }

  .salon-gallery-lightbox-panel > header {
    padding: 13px 13px 12px 16px;
  }

  .salon-gallery-lightbox-stage {
    min-height: 58vh;
  }

  .salon-gallery-lightbox-track {
    height: 58vh;
  }

  .salon-gallery-lightbox-arrow {
    width: 44px;
    height: 44px;
  }

  .salon-gallery-lightbox-arrow.previous {
    left: 10px;
  }

  .salon-gallery-lightbox-arrow.next {
    right: 10px;
  }
}

.salon-profile-body {
  display: grid;
  grid-template-columns: minmax(300px, 370px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(36px, 5vw, 72px);
  padding-top: clamp(32px, 4vw, 52px);
}

.salon-profile-rail {
  align-self: stretch;
  min-width: 0;
}

.salon-profile-book-card {
  position: sticky;
  top: 152px;
  overflow: hidden;
  border: 1px solid var(--salon-profile-line);
  border-radius: 20px;
  background: var(--salon-profile-surface);
  box-shadow: 0 16px 44px rgba(36, 33, 43, 0.08);
}

.salon-profile-book-card-heading {
  display: grid;
  gap: 6px;
  padding: 24px 24px 18px;
}

.salon-profile-book-card-heading > span {
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--salon-profile-violet-dark);
  background: var(--salon-profile-violet-soft);
  font-size: 0.7rem;
  font-weight: 800;
}

.salon-profile-book-card h2 {
  margin: 4px 0 0;
  font-size: clamp(
    calc(1.55rem * var(--salon-profile-heading-scale)),
    calc(2.4vw * var(--salon-profile-heading-scale)),
    calc(2.05rem * var(--salon-profile-heading-scale))
  );
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.salon-profile-book-card-heading p {
  margin: 0;
  color: var(--salon-profile-muted);
  font-size: 0.86rem;
}

.salon-profile-book-button {
  display: flex;
  width: calc(100% - 48px);
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 24px 22px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--future-violet-800, #51416f),
    var(--future-violet-600, #7d6aa8)
  );
  box-shadow: 0 14px 30px -18px
    var(--future-violet-glow, rgba(103, 84, 154, 0.16));
  font-size: 0.94rem;
  font-weight: 800;
  transition:
    background-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.salon-profile-book-button:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    var(--future-violet-700, #67549a),
    var(--future-violet-600, #7d6aa8)
  );
  box-shadow: 0 18px 34px -17px rgba(103, 84, 154, 0.22);
  transform: translateY(-1px);
}

.salon-profile-book-button:disabled {
  color: #77717c;
  background: #e6e3e8;
  box-shadow: none;
}

.salon-profile-hours-summary {
  border-top: 1px solid var(--salon-profile-line);
  background: #fff;
}

.salon-profile-hours-toggle {
  display: grid;
  width: 100%;
  min-height: 68px;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 0;
  padding: 13px 18px 13px 22px;
  color: var(--salon-profile-ink);
  background: #fff;
  text-align: left;
  transition: background-color 180ms ease;
}

.salon-profile-hours-toggle:hover {
  background: #faf9fb;
}

.salon-profile-hours-toggle:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(103, 84, 154, 0.38);
}

.salon-profile-hours-toggle > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.salon-profile-hours-toggle small {
  color: var(--salon-profile-muted);
  font-size: 0.69rem;
  font-weight: 720;
  letter-spacing: 0.02em;
}

.salon-profile-hours-toggle strong {
  overflow: hidden;
  font-size: 0.83rem;
  font-weight: 740;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.salon-profile-hours-toggle strong em,
.salon-profile-hours-overview h3 em {
  margin-right: 0.28em;
  color: inherit;
  font-style: normal;
  font-weight: inherit;
}

.salon-profile-hours-toggle strong em.is-open,
.salon-profile-hours-overview h3 em.is-open {
  color: #287a57;
}

.salon-profile-hours-toggle strong em.is-closed,
.salon-profile-hours-overview h3 em.is-closed {
  color: #8f464b;
}

.salon-profile-hours-toggle strong em.is-special,
.salon-profile-hours-overview h3 em.is-special {
  color: #846120;
}

.salon-profile-hours-clock {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  color: var(--salon-profile-violet-dark);
  background: var(--salon-profile-violet-soft);
}

.salon-profile-hours-clock .icon {
  width: 17px;
  height: 17px;
}

.salon-profile-hours-clock.is-large {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

.salon-profile-hours-clock.is-large .icon {
  width: 23px;
  height: 23px;
}

.salon-profile-hours-chevron {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #746e79;
  background: #f4f2f5;
}

.salon-profile-hours-chevron .icon {
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.salon-profile-hours-summary.is-expanded
  .salon-profile-hours-chevron
  .icon {
  transform: rotate(-90deg);
}

.salon-profile-hours-collapse {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 180ms ease;
}

.salon-profile-hours-collapse > div {
  min-height: 0;
  overflow: hidden;
}

.salon-profile-hours-summary.is-expanded .salon-profile-hours-collapse {
  grid-template-rows: 1fr;
  opacity: 1;
}

.salon-profile-hours-summary .salon-profile-weekly-hours {
  margin: 0 18px 16px;
  border-top: 1px solid #eeebf0;
  padding-top: 10px;
}

.salon-profile-hours-fallback {
  margin: 0;
  border-top: 1px solid #eeebf0;
  padding: 14px 22px 17px;
  color: var(--salon-profile-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.salon-profile-book-card dl {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--salon-profile-line);
}

.salon-profile-book-card dl > div {
  display: grid;
  grid-template-columns: minmax(100px, 0.75fr) minmax(0, 1.25fr);
  gap: 14px;
  padding: 17px 24px;
  border-bottom: 1px solid var(--salon-profile-line);
}

.salon-profile-book-card dt,
.salon-profile-book-card dd {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
}

.salon-profile-book-card dt {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--salon-profile-muted);
  font-weight: 690;
}

.salon-profile-book-card dt .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.salon-profile-book-card dd {
  color: var(--salon-profile-ink);
  font-weight: 730;
  text-align: right;
}

.salon-profile-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 16px 24px 20px;
}

.salon-profile-card-actions button,
.salon-profile-outline-button,
.salon-profile-map-card button,
.salon-profile-about-grid a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfcbd2;
  border-radius: 999px;
  padding: 0 15px;
  color: #3d3743;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 760;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background-color 160ms ease;
}

.salon-profile-card-actions button:hover,
.salon-profile-outline-button:hover,
.salon-profile-map-card button:hover,
.salon-profile-about-grid a:hover {
  border-color: #ad9fdb;
  color: var(--salon-profile-violet-dark);
  background: var(--salon-profile-violet-soft);
}

.salon-profile-outline-button {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--future-violet-800),
    var(--future-violet-600)
  );
  box-shadow: 0 10px 22px rgba(115, 81, 181, 0.16);
}

.salon-profile-outline-button:hover {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--future-violet-700),
    var(--future-violet-600)
  );
}

.salon-profile-outline-button:disabled {
  border-color: #ddd7e8;
  color: #665d72;
  background: #f3f0f7;
  box-shadow: none;
  opacity: 1;
  white-space: nowrap;
}

.salon-profile-main {
  min-width: 0;
}

.salon-profile-section {
  display: grid;
  gap: 24px;
  padding: 0 0 clamp(56px, 7vw, 84px);
  scroll-margin-top: 154px;
}

.salon-profile-section + .salon-profile-section {
  border-top: 1px solid var(--salon-profile-line);
  padding-top: clamp(50px, 6vw, 72px);
}

.salon-profile-section-heading {
  display: grid;
  gap: 6px;
}

.salon-profile-section-heading > p {
  margin: 0;
  color: var(--salon-profile-violet);
  font-size: 0.73rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.salon-profile-section-heading h2 {
  margin: 0;
  font-size: clamp(
    calc(2rem * var(--salon-profile-heading-scale)),
    calc(3.8vw * var(--salon-profile-heading-scale)),
    calc(3rem * var(--salon-profile-heading-scale))
  );
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.salon-profile-section-heading > span {
  max-width: 680px;
  color: var(--salon-profile-muted);
  font-size: calc(0.92rem * var(--salon-profile-body-scale));
  line-height: 1.55;
}

.salon-profile-category-rail {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 2px 3px 6px;
  scrollbar-width: none;
}

.salon-profile-category-rail::-webkit-scrollbar {
  display: none;
}

.salon-profile-category-rail button {
  flex: 0 0 auto;
  min-height: 42px;
  border: 1px solid #d8d4dc;
  border-radius: 999px;
  padding: 0 16px;
  color: #48414d;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 720;
}

.salon-profile-category-rail button[aria-current="true"] {
  color: #fff;
  border-color: var(--salon-profile-violet);
  background: var(--salon-profile-violet);
}

/* Home editor previews the exact public profile renderer used by customers. */
.standardized-site-builder .site-builder-workbench {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
}

.standardized-site-photo-panel {
  position: sticky;
  top: 112px;
  display: grid;
  max-height: calc(100vh - 138px);
  gap: 16px;
  overflow: auto;
}

.standardized-site-controls-panel {
  gap: 10px;
  padding: 14px;
}

.home-editor-group {
  border: 1px solid var(--pro-border);
  border-radius: 12px;
  background: #fff;
}

.home-editor-group > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 13px;
  color: var(--pro-ink);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.home-editor-group > summary::-webkit-details-marker {
  display: none;
}

.home-editor-group > summary::after {
  color: var(--pro-muted);
  content: "+";
  font-size: 1rem;
}

.home-editor-group[open] > summary::after {
  content: "−";
}

.home-editor-group > :not(summary) {
  margin-inline: 12px;
}

.home-editor-group > :last-child {
  margin-bottom: 12px;
}

.home-editor-group > label:not(.home-editor-range) {
  display: grid;
  gap: 5px;
  margin-top: 9px;
  color: var(--pro-muted);
  font-size: 0.7rem;
  font-weight: 760;
}

.home-editor-group
  :is(input:not([type="color"]):not([type="range"]), textarea) {
  width: 100%;
  border: 1px solid var(--pro-border);
  border-radius: 9px;
  padding: 9px 10px;
  color: var(--pro-ink);
  background: #fff;
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.4;
  resize: vertical;
}

.home-editor-group :is(input, textarea):focus-visible {
  border-color: #6750b8;
  outline: 3px solid rgba(103, 80, 184, 0.18);
}

.home-editor-color-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.home-editor-color-grid label {
  display: grid;
  gap: 5px;
  color: var(--pro-muted);
  font-size: 0.65rem;
  font-weight: 760;
}

.home-editor-color-grid input[type="color"] {
  width: 100%;
  height: 34px;
  border: 1px solid var(--pro-border);
  border-radius: 9px;
  padding: 3px;
  background: #fff;
}

.home-editor-range {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.home-editor-range > span {
  display: flex;
  justify-content: space-between;
  color: var(--pro-muted);
  font-size: 0.7rem;
  font-weight: 760;
}

.home-editor-range b {
  color: var(--pro-ink);
}

.home-editor-range input {
  width: 100%;
  accent-color: var(--pro-accent);
}

.business-version-history-compact {
  margin-top: 10px;
}

.standardized-site-photo-help {
  margin: 0;
  color: var(--pro-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.standardized-site-upload-grid {
  display: grid;
  gap: 9px;
}

.standardized-site-upload-grid .upload-control {
  display: grid;
  min-height: 78px;
  place-content: center;
  gap: 5px;
  border: 1px dashed rgba(31, 117, 128, 0.38);
  border-radius: var(--radius-sm);
  padding: 12px;
  color: var(--pro-accent-strong);
  background: #f7fbfb;
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.standardized-site-upload-grid .upload-control input {
  width: 100%;
  max-width: 230px;
  padding: 6px;
  color: var(--pro-muted);
  font-size: 0.72rem;
}

.standardized-site-photo-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.standardized-site-photo-strip button {
  position: relative;
}

.standardized-site-photo-strip button > span {
  position: absolute;
  bottom: 7px;
  left: 7px;
  border-radius: 999px;
  padding: 4px 7px;
  color: #fff;
  background: rgba(43, 35, 62, 0.82);
  font-size: 0.62rem;
  font-weight: 800;
}

.standardized-site-preview {
  background: var(--salon-profile-violet-soft, #f8f8f6) !important;
  pointer-events: none;
}

.standardized-site-preview .salon-public-profile {
  width: min(100%, 1480px);
  padding: 0 24px 64px;
}

.standardized-site-preview [data-salon-profile-reveal] {
  opacity: 1;
  transform: none;
}

.standardized-site-preview .salon-profile-section-nav,
.standardized-site-preview .salon-profile-book-card {
  position: static;
}

/* The dashboard Home is the customer profile itself, with small editing
   affordances layered on top instead of a second, divergent page builder. */
.salon-home-inline-editor {
  display: grid;
  min-width: 0;
  gap: 0;
  background: #fff;
}

.salon-home-editor-toolbar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid color-mix(in srgb, var(--pro-border) 88%, transparent);
  border-radius: 0 0 15px 15px;
  padding: 8px 10px 8px 15px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 34px rgba(38, 31, 54, 0.1);
  backdrop-filter: blur(18px);
}

.salon-home-editor-toolbar-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.salon-home-editor-toolbar-copy strong {
  color: var(--pro-ink);
  font-size: 0.82rem;
}

.salon-home-editor-toolbar-copy span {
  overflow: hidden;
  color: var(--pro-muted);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salon-home-editor-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.salon-home-design-menu {
  position: relative;
}

.salon-home-design-menu > summary,
.salon-home-add-photo,
.salon-home-expand-button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--pro-border);
  border-radius: 10px;
  padding: 0 11px;
  color: var(--pro-ink);
  background: #fff;
  font-size: 0.72rem;
  font-weight: 780;
  cursor: pointer;
  list-style: none;
}

.salon-home-design-menu > summary::-webkit-details-marker {
  display: none;
}

.salon-home-design-menu > summary .icon,
.salon-home-add-photo .icon,
.salon-home-expand-button .icon {
  width: 16px;
  height: 16px;
}

.salon-home-add-photo input,
.salon-home-inline-photo-edit input,
.salon-home-empty-gallery input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.salon-home-design-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 110;
  display: grid;
  width: min(370px, calc(100vw - 36px));
  gap: 12px;
  border: 1px solid var(--pro-border);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(38, 31, 54, 0.18);
}

.salon-home-editor-canvas {
  min-width: 0;
  overflow: clip;
  border: 0;
  border-radius: 0;
  padding: 0 clamp(28px, 4vw, 72px) 72px;
  background: transparent;
}

.salon-home-editor-canvas .salon-public-profile {
  max-width: 1600px;
  margin-inline: auto;
}

.dashboard-shell
  .salon-home-editor-canvas
  > .salon-public-profile
  > .salon-profile-section-nav {
  top: 0;
  z-index: 80;
  background: var(--salon-profile-surface, #fff);
  backdrop-filter: none;
}

.salon-home-editor-canvas [data-salon-profile-reveal] {
  opacity: 1;
  transform: none;
}

.salon-home-editor-mode [data-site-edit] {
  border-radius: 7px;
  cursor: text;
  outline: 1px dashed transparent;
  outline-offset: 5px;
  transition:
    background 160ms ease,
    outline-color 160ms ease,
    box-shadow 160ms ease;
}

.salon-home-editor-mode [data-site-edit]:hover {
  outline-color: color-mix(
    in srgb,
    var(--salon-profile-violet) 48%,
    transparent
  );
  background: color-mix(
    in srgb,
    var(--salon-profile-violet-soft) 58%,
    transparent
  );
}

.salon-home-editor-mode [data-site-edit]:focus {
  background: #fff;
  outline: 2px solid var(--salon-profile-violet);
  box-shadow: 0 0 0 5px
    color-mix(in srgb, var(--salon-profile-violet) 13%, transparent);
}

.salon-home-editor-mode [data-site-edit]:empty::before {
  color: color-mix(in srgb, var(--salon-profile-muted) 70%, transparent);
  content: attr(data-empty-label);
}

.salon-home-editor-mode .salon-profile-gallery figure {
  isolation: isolate;
}

.salon-home-editor-mode .salon-profile-gallery {
  position: relative;
}

.salon-profile-gallery-add {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 8;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  padding: 0;
  color: #fff;
  background: var(--salon-profile-violet);
  box-shadow: 0 14px 34px rgba(81, 65, 111, 0.36);
  cursor: pointer;
  transition:
    transform 160ms ease,
    background 160ms ease;
}

.salon-profile-gallery-add:is(:hover, :focus-visible) {
  background: var(--salon-profile-violet-dark);
  transform: translateY(-2px) scale(1.04);
}

.salon-profile-gallery-add .icon {
  width: 23px;
  height: 23px;
}

.salon-home-inline-photo-tools {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  background: rgba(24, 18, 34, 0.46);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.salon-home-inline-photo-edit,
.salon-home-inline-photo-remove {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  padding: 0 12px;
  color: #fff;
  background: rgba(24, 18, 34, 0.82);
  box-shadow: 0 8px 24px rgba(24, 18, 34, 0.18);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  pointer-events: auto;
  transition:
    transform 160ms ease,
    background 160ms ease;
}

.salon-home-inline-photo-edit:hover,
.salon-home-inline-photo-remove:hover {
  transform: translateY(-1px);
  background: rgba(24, 18, 34, 0.94);
}

.salon-home-inline-photo-edit .icon,
.salon-home-inline-photo-remove .icon {
  width: 15px;
  height: 15px;
}

.salon-home-inline-photo-remove {
  background: rgba(99, 27, 51, 0.84);
}

.salon-home-inline-photo-remove:hover {
  background: rgba(115, 25, 55, 0.96);
}

.salon-home-editor-mode
  .salon-profile-gallery
  figure:hover
  .salon-home-inline-photo-tools,
.salon-home-inline-photo-tools:focus-within {
  opacity: 1;
}

body.site-photo-manager-open {
  overflow: hidden;
}

.salon-photo-manager-layer {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 54px);
}

.salon-photo-manager-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: rgba(36, 33, 43, 0.34);
  backdrop-filter: blur(14px);
}

.salon-photo-manager-panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1060px, 100%);
  max-height: calc(100dvh - clamp(28px, 8vw, 108px));
  overflow: auto;
  border: 1px solid var(--pro-border);
  border-radius: 24px;
  padding: clamp(18px, 2.5vw, 28px);
  background: #fff;
  box-shadow: 0 30px 100px rgba(38, 31, 54, 0.24);
  animation: salonGalleryPanelEnter 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.salon-photo-manager-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.salon-photo-manager-panel > header > div {
  display: grid;
  gap: 4px;
}

.salon-photo-manager-panel > header :is(p, h2, span) {
  margin: 0;
}

.salon-photo-manager-panel > header p {
  color: var(--pro-accent);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.salon-photo-manager-panel > header h2 {
  color: var(--pro-ink);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  letter-spacing: -0.035em;
}

.salon-photo-manager-panel > header span {
  color: var(--pro-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.salon-photo-manager-toolbar {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  border-block: 1px solid var(--pro-border);
  padding-block: 12px;
}

.salon-photo-manager-toolbar > span {
  color: var(--pro-muted);
  font-size: 0.8rem;
}

.salon-photo-manager-toolbar > span strong {
  color: var(--pro-ink);
}

.salon-photo-manager-add,
.salon-photo-manager-card footer label,
.salon-photo-manager-empty-slot {
  cursor: pointer;
}

.salon-photo-manager-add {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  border-radius: 10px;
  padding: 0 13px;
  color: #fff;
  background: var(--pro-accent-strong);
  font-size: 0.76rem;
  font-weight: 800;
}

.salon-photo-manager-add.disabled {
  opacity: 0.48;
  cursor: default;
}

.salon-photo-manager-add .icon {
  width: 17px;
  height: 17px;
}

.salon-photo-manager-add input,
.salon-photo-manager-card footer input,
.salon-photo-manager-empty-slot input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.salon-photo-manager-save-status {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  color: var(--pro-muted);
  font-size: 0.74rem;
  font-weight: 760;
}

.salon-photo-manager-save-status.is-saved {
  color: #287b65;
}

.salon-photo-manager-save-status.is-error {
  color: #9c3150;
}

.salon-photo-manager-save-status .icon,
.salon-photo-manager-spinner {
  width: 15px;
  height: 15px;
}

.salon-photo-manager-spinner {
  border: 2px solid rgba(103, 84, 154, 0.2);
  border-top-color: var(--salon-profile-violet);
  border-radius: 50%;
  animation: spin 720ms linear infinite;
}

.salon-photo-manager-save-status button {
  min-height: 30px;
  border: 0;
  padding: 0 4px;
  color: inherit;
  background: transparent;
  font: inherit;
  text-decoration: underline;
}

.salon-photo-manager-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.salon-photo-manager-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--pro-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(38, 31, 54, 0.06);
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    border-color 160ms ease;
}

.salon-photo-manager-card.is-dragging {
  border-color: var(--pro-accent);
  opacity: 0.52;
  transform: scale(0.98);
}

.salon-photo-manager-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ece9ee;
}

.salon-photo-manager-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.salon-photo-manager-image > span {
  position: absolute;
  top: 9px;
  left: 9px;
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--pro-ink);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(38, 31, 54, 0.1);
  font-size: 0.68rem;
  font-weight: 820;
  backdrop-filter: blur(10px);
}

.salon-photo-drag-handle {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(36, 33, 43, 0.12);
  border-radius: 10px;
  padding: 0;
  color: var(--pro-ink);
  background: rgba(255, 255, 255, 0.94);
  cursor: grab;
}

.salon-photo-drag-handle .icon {
  width: 17px;
  height: 17px;
}

.salon-photo-manager-card footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 34px minmax(0, 1fr);
  gap: 5px;
  padding: 8px;
}

.salon-photo-manager-card footer :is(label, button) {
  display: inline-flex;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--pro-border);
  border-radius: 8px;
  padding: 0 7px;
  color: var(--pro-ink);
  background: #fff;
  font: inherit;
  font-size: 0.67rem;
  font-weight: 760;
}

.salon-photo-manager-card footer :is(label, button) .icon {
  width: 14px;
  height: 14px;
}

.salon-photo-manager-card footer button[data-direction="-1"] .icon {
  transform: rotate(180deg);
}

.salon-photo-manager-card footer button:disabled {
  opacity: 0.34;
}

.salon-photo-manager-card footer .danger {
  color: #9c3150;
}

.salon-photo-manager-empty-slot {
  display: grid;
  min-height: 170px;
  place-content: center;
  justify-items: center;
  gap: 6px;
  border: 1px dashed rgba(103, 84, 154, 0.4);
  border-radius: 16px;
  color: var(--salon-profile-violet);
  background: var(--salon-profile-violet-soft);
  text-align: center;
}

.salon-photo-manager-empty-slot .icon {
  width: 24px;
  height: 24px;
}

.salon-photo-manager-empty-slot span {
  color: var(--pro-muted);
  font-size: 0.72rem;
}

.salon-photo-manager-hint {
  margin: 14px 0 0;
  color: var(--pro-muted);
  font-size: 0.74rem;
  text-align: center;
}

.salon-home-empty-gallery {
  display: grid;
  min-height: 280px;
  place-items: center;
  border: 1px dashed
    color-mix(in srgb, var(--salon-profile-violet) 40%, transparent);
  border-radius: 22px;
  background: var(--salon-profile-violet-soft);
}

.salon-home-empty-gallery label {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--salon-profile-violet-dark);
  cursor: pointer;
}

.salon-home-empty-gallery .icon {
  width: 26px;
  height: 26px;
}

.salon-home-empty-gallery span {
  color: var(--salon-profile-muted);
  font-size: 0.76rem;
}

@media (max-width: 820px) {
  .salon-home-editor-toolbar {
    position: relative;
    top: auto;
    align-items: flex-start;
  }

  .salon-home-editor-toolbar-copy span {
    display: none;
  }

  .salon-home-add-photo {
    width: 38px;
    padding: 0;
    font-size: 0;
  }

  .salon-home-editor-canvas {
    padding-inline: 14px;
  }

  .salon-photo-manager-layer {
    padding: 8px;
  }

  .salon-photo-manager-panel {
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
    padding: 16px;
  }

  .salon-photo-manager-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .salon-photo-manager-add {
    margin-left: 0;
  }

  .salon-photo-manager-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .salon-photo-manager-card footer {
    grid-template-columns: minmax(0, 1fr) repeat(2, 34px);
  }

  .salon-photo-manager-card footer .danger {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .salon-photo-manager-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (hover: none) {
  .salon-home-inline-photo-tools {
    inset: auto 8px 8px;
    display: flex;
    justify-content: flex-end;
    background: transparent;
    opacity: 1;
    pointer-events: auto;
  }

  .salon-home-inline-photo-edit,
  .salon-home-inline-photo-remove {
    min-height: 34px;
    padding-inline: 10px;
    font-size: 0.68rem;
  }
}

@media (max-width: 1200px) {
  .standardized-site-builder .site-builder-workbench {
    grid-template-columns: minmax(0, 1fr);
  }

  .standardized-site-photo-panel {
    position: static;
    max-height: none;
  }

  .standardized-site-upload-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.salon-profile-service-groups {
  display: grid;
  gap: 34px;
}

.salon-profile-service-group {
  display: grid;
  gap: 13px;
  scroll-margin-top: 154px;
}

.salon-profile-service-group > h3 {
  margin: 0;
  font-size: 1.06rem;
}

.salon-profile-service-list {
  display: grid;
  gap: 10px;
}

.salon-profile-service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 116px;
  border: 1px solid var(--salon-profile-line);
  border-radius: 16px;
  padding: 19px 20px 18px 22px;
  background: #fff;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.salon-profile-service-row:hover {
  border-color: #c7bee4;
  box-shadow: 0 9px 26px rgba(36, 33, 43, 0.055);
  transform: translateY(-1px);
}

.salon-profile-service-row > div:first-child {
  display: grid;
  gap: 5px;
}

.salon-profile-service-row h4,
.salon-profile-service-row p,
.salon-profile-service-row span {
  margin: 0;
}

.salon-profile-service-row h4 {
  font-size: 1rem;
}

.salon-profile-service-row p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--salon-profile-muted);
  font-size: 0.8rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.salon-profile-service-row span {
  color: #837d88;
  font-size: 0.74rem;
}

.salon-profile-service-action {
  display: grid;
  min-width: 116px;
  justify-items: end;
  gap: 10px;
}

.salon-profile-service-action strong {
  font-size: 0.88rem;
}

.salon-profile-stylist-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.salon-profile-stylist-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--salon-profile-line);
  border-radius: 17px;
  padding: 14px;
  background: #fff;
}

.salon-profile-stylist-card > img {
  width: 78px;
  height: 78px;
  border-radius: 14px;
  object-fit: cover;
  background: #eeeaf7;
}

.salon-profile-stylist-card > div:not(.salon-profile-stylist-actions) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.salon-profile-stylist-card h3,
.salon-profile-stylist-card p,
.salon-profile-stylist-card span {
  margin: 0;
}

.salon-profile-stylist-card h3 {
  overflow: hidden;
  min-width: 0;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salon-profile-stylist-card p,
.salon-profile-stylist-card span {
  overflow: hidden;
  color: var(--salon-profile-muted);
  font-size: 0.74rem;
  line-height: 1.4;
  text-overflow: ellipsis;
}

.salon-profile-stylist-card > .salon-profile-stylist-actions {
  display: grid;
  grid-column: 3;
  grid-row: 1;
  gap: 6px;
  min-width: 64px;
  align-self: center;
}

.salon-profile-stylist-card > div:not(.salon-profile-stylist-actions) > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.salon-profile-stylist-view {
  border: 0;
  padding: 3px 6px;
  color: #67549a;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 780;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.salon-profile-chip-row {
  display: flex;
  gap: 5px;
  overflow: hidden;
  padding-top: 3px;
}

.salon-profile-chip-row small {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 7px;
  color: #5d4a9d;
  background: var(--salon-profile-violet-soft);
  font-size: 0.64rem;
  font-weight: 730;
}

.salon-profile-review-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  border-radius: 18px;
  padding: 24px;
  background: #f0edf8;
}

.salon-profile-review-summary > strong {
  min-width: 104px;
  font-size: clamp(3.3rem, 7vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.065em;
}

.salon-profile-review-summary h3,
.salon-profile-review-summary p {
  margin: 0;
}

.salon-profile-review-summary div {
  display: grid;
  gap: 5px;
}

.salon-profile-review-summary h3 {
  font-size: 1.08rem;
}

.salon-profile-review-summary p {
  color: var(--salon-profile-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.salon-profile-review-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}

.salon-profile-review-card {
  display: grid;
  align-content: start;
  gap: 13px;
  min-width: 0;
  border-bottom: 1px solid var(--salon-profile-line);
  padding: 23px 0;
}

.salon-profile-review-card > header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.salon-profile-review-card > header > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  color: var(--salon-profile-violet-dark);
  background: var(--salon-profile-violet-soft);
  font-weight: 800;
}

.salon-profile-review-card > header > div {
  display: grid;
  gap: 3px;
}

.salon-profile-review-card header strong {
  font-size: 0.85rem;
}

.salon-profile-review-card header small {
  color: var(--salon-profile-muted);
  font-size: 0.7rem;
}

.salon-profile-review-card header b {
  color: var(--salon-profile-violet-dark);
  font-size: 0.8rem;
}

.salon-profile-review-card h4,
.salon-profile-review-card p {
  margin: 0;
}

.salon-profile-review-card > p {
  color: #514b56;
  font-size: 0.83rem;
  line-height: 1.58;
}

.salon-profile-review-card blockquote {
  margin: 0;
  border-left: 3px solid #c8bce9;
  padding: 10px 0 10px 13px;
  color: var(--salon-profile-muted);
  font-size: 0.75rem;
}

.salon-profile-review-card blockquote p {
  margin: 5px 0 0;
}

.salon-profile-about-copy {
  max-width: 760px;
  margin: 0;
  color: #514b56;
  font-size: 1rem;
  line-height: 1.7;
}

.salon-profile-hours-overview {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--salon-profile-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(36, 33, 43, 0.045);
}

.salon-profile-hours-overview > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 22px 24px 17px;
}

.salon-profile-hours-overview > header > div {
  display: grid;
  gap: 3px;
}

.salon-profile-hours-overview :is(p, h3, h4) {
  margin: 0;
}

.salon-profile-hours-overview > header p,
.salon-profile-holiday-section > header p {
  color: var(--salon-profile-violet);
  font-size: 0.68rem;
  font-weight: 810;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.salon-profile-hours-overview > header h3 {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.2;
}

.salon-profile-weekly-hours {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 24px 22px;
  list-style: none;
}

.salon-profile-weekly-hours li {
  display: grid;
  min-height: 45px;
  grid-template-columns: 11px minmax(104px, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 13px;
  border-radius: 11px;
  padding: 7px 10px;
  color: var(--salon-profile-ink);
}

.salon-profile-weekly-hours li.is-today {
  background: #f6f3fb;
}

.salon-profile-weekly-hours li > i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #bebbc1;
}

.salon-profile-weekly-hours li.is-open > i {
  background: #65c946;
}

.salon-profile-weekly-hours li.is-today > i {
  box-shadow: 0 0 0 4px rgba(101, 201, 70, 0.14);
}

.salon-profile-weekly-hours li > strong {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
}

.salon-profile-weekly-hours li > strong small {
  border-radius: 999px;
  padding: 3px 6px;
  color: var(--salon-profile-violet-dark);
  background: #ebe5f7;
  font-size: 0.59rem;
  font-weight: 800;
  text-transform: uppercase;
}

.salon-profile-weekly-hours li > span {
  color: #4f4954;
  font-size: 0.82rem;
  font-weight: 650;
  text-align: right;
}

.salon-profile-weekly-hours li:is(.is-closed, .is-neutral) {
  color: #858087;
}

.salon-profile-weekly-hours li:is(.is-closed, .is-neutral) > span {
  color: #858087;
  font-weight: 560;
}

.salon-profile-weekly-hours.is-compact {
  padding-inline: 0;
  padding-bottom: 0;
}

.salon-profile-weekly-hours.is-compact li {
  min-height: 36px;
  grid-template-columns: 8px minmax(74px, 0.7fr) minmax(0, 1.3fr);
  gap: 8px;
  padding: 5px 4px;
}

.salon-profile-weekly-hours.is-compact li > i {
  width: 7px;
  height: 7px;
}

.salon-profile-weekly-hours.is-compact li > strong,
.salon-profile-weekly-hours.is-compact li > span {
  font-size: 0.7rem;
}

.salon-profile-weekly-hours.is-compact li > strong small {
  display: none;
}

.salon-profile-holiday-section {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--salon-profile-line);
  padding: 20px 24px 24px;
  background: #fbfafc;
}

.salon-profile-holiday-section > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.salon-profile-holiday-section > header > div {
  display: grid;
  gap: 3px;
}

.salon-profile-holiday-section > header h4 {
  font-size: 1rem;
}

.salon-profile-holiday-section > header > span {
  max-width: 300px;
  color: var(--salon-profile-muted);
  font-size: 0.7rem;
  line-height: 1.4;
  text-align: right;
}

.salon-profile-holiday-hours {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.salon-profile-holiday-hours li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #e7e3e9;
  border-left: 4px solid #aaa5ad;
  border-radius: 12px;
  padding: 12px 13px 12px 11px;
  background: #fff;
}

.salon-profile-holiday-hours li.is-open {
  border-left-color: #65c946;
}

.salon-profile-holiday-hours li.is-special {
  border-left-color: #d0a43b;
}

.salon-profile-holiday-hours li.is-closed {
  border-left-color: #b8787d;
}

.salon-profile-holiday-hours time {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.salon-profile-holiday-hours time strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salon-profile-holiday-hours time small {
  color: var(--salon-profile-muted);
  font-size: 0.66rem;
}

.salon-profile-holiday-hours li > span {
  color: #4e4852;
  font-size: 0.72rem;
  font-weight: 720;
  text-align: right;
}

.salon-profile-holiday-hours li.is-open > span {
  color: #287a57;
}

.salon-profile-holiday-hours li.is-closed > span {
  color: #8f464b;
}

.salon-profile-holiday-empty,
.salon-profile-hours-unavailable {
  color: var(--salon-profile-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.salon-profile-holiday-empty {
  margin: 0;
  border: 1px dashed #d9d4dc;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}

.salon-profile-hours-unavailable {
  display: grid;
  gap: 4px;
  margin: 0 24px 22px;
  border: 1px dashed #d9d4dc;
  border-radius: 13px;
  padding: 16px;
}

.salon-profile-hours-unavailable strong {
  color: var(--salon-profile-ink);
  font-size: 0.86rem;
}

.salon-profile-more-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.salon-profile-more-photos img {
  width: 100%;
  height: clamp(210px, 24vw, 340px);
  border-radius: 16px;
  object-fit: cover;
}

.salon-profile-more-photos button {
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}

.salon-profile-more-photos button:focus-visible {
  outline: 3px solid var(--salon-profile-violet);
  outline-offset: 3px;
}

.salon-profile-more-photos button img {
  display: block;
  transition: transform 320ms ease;
}

.salon-profile-more-photos button:hover img {
  transform: scale(1.015);
}

.salon-profile-map-card {
  overflow: hidden;
  border: 1px solid var(--salon-profile-line);
  border-radius: 18px;
  background: #fff;
}

.salon-profile-map-card iframe,
.salon-profile-map-fallback {
  display: grid;
  width: 100%;
  height: clamp(350px, 36vw, 490px);
  border: 0;
  place-content: center;
  color: var(--salon-profile-muted);
  background: #efedf1;
}

.salon-profile-map-card > div:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
}

.salon-profile-map-card > div:last-child strong {
  font-size: 0.82rem;
  line-height: 1.45;
}

.salon-profile-about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.salon-profile-about-grid section {
  display: grid;
  align-content: start;
  gap: 7px;
  border: 1px solid var(--salon-profile-line);
  border-radius: 16px;
  padding: 20px;
  background: #fff;
}

.salon-profile-about-grid :is(p, h3, span) {
  margin: 0;
}

.salon-profile-about-grid p {
  color: var(--salon-profile-violet);
  font-size: 0.69rem;
  font-weight: 800;
  text-transform: uppercase;
}

.salon-profile-about-grid h3 {
  font-size: 1rem;
}

.salon-profile-about-grid span {
  color: var(--salon-profile-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.salon-profile-about-grid a {
  width: fit-content;
  margin-top: 7px;
}

.salon-profile-empty {
  display: grid;
  gap: 5px;
  border: 1px dashed #d4cfd8;
  border-radius: 16px;
  padding: 28px;
  color: var(--salon-profile-muted);
  background: rgba(255, 255, 255, 0.64);
  text-align: center;
}

.salon-profile-empty strong {
  color: var(--salon-profile-ink);
}

[data-salon-profile-reveal] {
  opacity: 0;
  transform: translateY(10px);
}

[data-salon-profile-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes salonProfileEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes salonProfileImageEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes salonProfileLoading {
  to {
    background-position: -260% 0;
  }
}

@media (max-width: 1120px) {
  .salon-profile-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .salon-profile-book-card {
    position: static;
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(220px, 0.8fr) minmax(
        320px,
        1.3fr
      );
    align-items: center;
  }

  .salon-profile-book-card-heading {
    padding: 22px;
  }

  .salon-profile-book-button {
    width: calc(100% - 32px);
    margin: 0 16px;
  }

  .salon-profile-book-card dl {
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: 1fr 1fr;
    border: 0;
    border-left: 1px solid var(--salon-profile-line);
  }

  .salon-profile-hours-summary {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .salon-profile-book-card dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    border-bottom: 0;
    padding: 16px;
  }

  .salon-profile-book-card dl > div:last-child {
    display: none;
  }

  .salon-profile-book-card dd {
    text-align: left;
  }

  .salon-profile-card-actions {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 940px) {
  .salon-profile-section-nav {
    top: 130px;
  }

  .salon-profile-section,
  .salon-profile-service-group,
  .salon-profile-gallery {
    scroll-margin-top: 200px;
  }
}

@media (min-width: 821px) and (max-width: 860px) {
  .salon-profile-book-card {
    display: block;
  }

  .salon-profile-book-button {
    width: calc(100% - 44px);
    margin: 0 22px 20px;
  }

  .salon-profile-book-card dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--salon-profile-line);
    border-left: 0;
  }

  .salon-profile-book-card dl > div {
    display: grid;
    padding: 16px 22px;
  }
}

@media (max-width: 820px) {
  body.salon-site-mode .customer-shell > .page-wrap {
    width: 100%;
    max-width: none;
    padding-inline: 16px;
    padding-bottom: 112px;
  }

  .salon-profile-heading {
    align-items: start;
    gap: 16px;
    padding-top: 26px;
  }

  .salon-profile-heading h1 {
    font-size: clamp(2.35rem, 10vw, 3.5rem);
  }

  .salon-profile-section-nav {
    top: 62px;
    gap: 24px;
  }

  .salon-profile-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(250px, 1.55fr) minmax(130px, 0.75fr);
    height: clamp(420px, 92vw, 620px);
  }

  .salon-profile-gallery-1 {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .salon-profile-gallery.has-1-images {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: clamp(300px, 72vw, 420px);
  }

  .salon-profile-gallery.has-1-images .salon-profile-gallery-1 {
    grid-column: 1;
    grid-row: 1;
  }

  .salon-profile-gallery.has-2-images {
    grid-template-columns: minmax(0, 1.45fr) minmax(110px, 0.85fr);
    grid-template-rows: minmax(0, 1fr);
    height: clamp(300px, 72vw, 440px);
  }

  .salon-profile-gallery.has-2-images .salon-profile-gallery-1 {
    grid-column: 1;
    grid-row: 1;
  }

  .salon-profile-body {
    padding-top: 38px;
  }

  .salon-profile-loading-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1.55fr 0.75fr;
  }

  .salon-profile-loading-gallery span:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .salon-profile-loading-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .salon-profile-book-card {
    display: block;
  }

  .salon-profile-hours-summary {
    grid-column: auto;
    grid-row: auto;
  }

  .salon-profile-book-button {
    width: calc(100% - 44px);
    margin: 0 22px 20px;
  }

  .salon-profile-book-card dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--salon-profile-line);
    border-left: 0;
  }

  .salon-profile-book-card dl > div {
    display: grid;
    padding: 16px 22px;
  }

  .salon-profile-stylist-grid,
  .salon-profile-review-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 769px) and (max-width: 820px) {
  .salon-profile-section-nav {
    top: 130px;
  }
}

@media (max-width: 560px) {
  .salon-profile-heading {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 20px;
  }

  .salon-profile-heading > div:first-child {
    padding-right: 104px;
  }

  .salon-profile-heading-actions {
    position: absolute;
    top: 95px;
    right: 16px;
  }

  .salon-profile-heading-meta {
    padding-right: 6px;
  }

  .salon-profile-heading-meta button::before {
    content: none;
  }

  .salon-profile-gallery {
    gap: 7px;
    padding-top: 14px;
  }

  .salon-profile-gallery figure {
    border-radius: 13px;
  }

  .salon-profile-gallery figure > button {
    right: 9px;
    bottom: 9px;
    padding-inline: 12px;
    font-size: 0.73rem;
  }

  .salon-profile-book-card dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .salon-profile-book-card dl > div {
    grid-template-columns: minmax(96px, 0.7fr) minmax(0, 1.3fr);
    border-bottom: 1px solid var(--salon-profile-line);
  }

  .salon-profile-book-card dd {
    text-align: right;
  }

  .salon-profile-hours-toggle {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    padding-inline: 18px 14px;
  }

  .salon-profile-hours-overview > header,
  .salon-profile-holiday-section {
    padding-inline: 17px;
  }

  .salon-profile-weekly-hours {
    padding-inline: 10px;
  }

  .salon-profile-weekly-hours li {
    grid-template-columns: 9px minmax(86px, 0.85fr) minmax(0, 1.15fr);
    gap: 9px;
    padding-inline: 7px;
  }

  .salon-profile-weekly-hours li > strong,
  .salon-profile-weekly-hours li > span {
    font-size: 0.76rem;
  }

  .salon-profile-holiday-section > header {
    align-items: start;
    flex-direction: column;
    gap: 6px;
  }

  .salon-profile-holiday-section > header > span {
    max-width: none;
    text-align: left;
  }

  .salon-profile-holiday-hours {
    grid-template-columns: minmax(0, 1fr);
  }

  .salon-profile-holiday-hours li {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 6px;
  }

  .salon-profile-holiday-hours time strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .salon-profile-holiday-hours li > span {
    text-align: left;
  }

  .salon-profile-service-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .salon-profile-service-action {
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    align-items: center;
    justify-items: start;
  }

  .salon-profile-service-action button {
    justify-self: end;
  }

  .salon-profile-stylist-card {
    grid-template-columns: 68px minmax(0, 1fr) auto;
    gap: 11px;
    padding: 14px;
  }

  .salon-profile-stylist-card > img {
    width: 68px;
    height: 68px;
  }

  .salon-profile-stylist-card > .salon-profile-stylist-actions {
    grid-column: 3;
  }

  .salon-profile-review-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .salon-profile-more-photos,
  .salon-profile-about-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .salon-profile-map-card > div:last-child {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .salon-profile-heading,
  .salon-profile-gallery figure {
    animation: none;
  }

  [data-salon-profile-reveal],
  [data-salon-profile-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .salon-profile-section-nav button::after,
  .salon-profile-gallery img,
  .salon-profile-book-button,
  .salon-profile-service-row {
    transition: none;
  }

  .salon-profile-loading :is(span, strong, i) {
    animation: none;
  }

  .salon-gallery-lightbox-backdrop,
  .salon-gallery-lightbox-panel {
    animation: none;
  }

  .salon-gallery-lightbox-arrow,
  .salon-gallery-lightbox-track,
  .salon-gallery-lightbox-thumbnails button,
  .salon-profile-more-photos button img,
  .salon-profile-hours-collapse,
  .salon-profile-hours-chevron .icon {
    transition: none;
  }
}

/* Salon discovery workspace — compact search and a dedicated filter drawer. */
body.salon-directory-mode .salon-directory-page {
  gap: 10px;
}

body.salon-directory-mode .salon-directory-controls {
  position: relative;
  z-index: 520;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body.salon-directory-mode .directory-search-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

body.salon-directory-mode .directory-search {
  min-height: 54px;
  border-color: rgba(83, 76, 92, 0.16);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 24px rgba(42, 36, 50, 0.06);
}

body.salon-directory-mode .directory-search:focus-within {
  border-color: rgba(103, 84, 154, 0.5);
  box-shadow:
    0 0 0 3px rgba(103, 84, 154, 0.12),
    0 10px 26px rgba(42, 36, 50, 0.08);
}

body.salon-directory-mode .discovery-filter-trigger {
  position: relative;
  min-width: 116px;
  min-height: 54px;
  gap: 8px;
  border-color: rgba(83, 76, 92, 0.18);
  border-radius: 16px;
  padding-inline: 17px;
  color: #342e3d;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 24px rgba(42, 36, 50, 0.06);
  white-space: nowrap;
}

body.salon-directory-mode .discovery-filter-trigger:hover,
body.salon-directory-mode .discovery-filter-trigger[aria-expanded="true"] {
  border-color: rgba(103, 84, 154, 0.48);
  color: #5b21b6;
  background: #f3e8ff;
}

body.salon-directory-mode .discovery-filter-trigger .filter-count {
  width: 21px;
  height: 21px;
  min-width: 21px;
  font-size: 0.68rem;
}

.discovery-filter-scrim {
  position: fixed;
  inset: 0;
  z-index: 1840;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: rgba(30, 26, 36, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(2px);
  transition:
    opacity 240ms ease,
    visibility 0s linear 240ms;
}

.discovery-filter-scrim.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.discovery-filter-panel.discovery-filter-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1850;
  display: grid;
  width: min(450px, calc(100vw - 24px));
  height: 100dvh;
  max-height: none;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  align-items: stretch;
  margin: 0;
  border: 0;
  border-left: 1px solid rgba(84, 76, 95, 0.12);
  border-radius: 26px 0 0 26px;
  padding: 0;
  background: #fbfafc;
  box-shadow: -24px 0 70px rgba(28, 23, 35, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(calc(100% + 28px), 0, 0);
  transition:
    transform 420ms cubic-bezier(0.22, 0.8, 0.22, 1),
    opacity 220ms ease,
    visibility 0s linear 420ms;
}

.discovery-filter-panel.discovery-filter-drawer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

.discovery-filter-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 26px 20px;
  border-bottom: 1px solid rgba(84, 76, 95, 0.11);
  background: rgba(251, 250, 252, 0.94);
  backdrop-filter: blur(18px);
}

.discovery-filter-drawer-header > div {
  display: grid;
  gap: 3px;
}

.discovery-filter-drawer-header span {
  color: #67549a;
  font-size: 0.68rem;
  font-weight: 830;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.discovery-filter-drawer-header strong {
  color: #27222c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.035em;
}

.discovery-filter-drawer-header .icon-button {
  border-color: rgba(84, 76, 95, 0.14);
  background: #fff;
  box-shadow: 0 6px 18px rgba(42, 36, 50, 0.07);
}

.discovery-filter-drawer .discovery-filter-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 18px;
  min-height: 0;
  padding: 24px 26px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.discovery-filter-drawer .discovery-filter-fields > label,
.discovery-filter-drawer .discovery-sort-options {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
  color: #554e5c;
  font-size: 0.78rem;
  font-weight: 780;
  opacity: 0;
  transform: translateX(22px);
  transition:
    opacity 220ms ease,
    transform 360ms cubic-bezier(0.22, 0.8, 0.22, 1);
}

.discovery-filter-drawer.is-open .discovery-filter-fields > :nth-child(1) {
  transition-delay: 80ms;
}

.discovery-filter-drawer.is-open .discovery-filter-fields > :nth-child(2) {
  transition-delay: 115ms;
}

.discovery-filter-drawer.is-open .discovery-filter-fields > :nth-child(3) {
  transition-delay: 150ms;
}

.discovery-filter-drawer.is-open .discovery-filter-fields > :nth-child(4) {
  transition-delay: 185ms;
}

.discovery-filter-drawer.is-open .discovery-filter-fields > :nth-child(5) {
  transition-delay: 220ms;
}

.discovery-filter-drawer.is-open .discovery-filter-fields > :nth-child(6) {
  transition-delay: 255ms;
}

.discovery-filter-drawer.is-open .discovery-filter-fields > label,
.discovery-filter-drawer.is-open .discovery-sort-options {
  opacity: 1;
  transform: none;
}

.discovery-filter-drawer .discovery-filter-fields > label > span,
.discovery-filter-drawer .discovery-sort-options > legend {
  color: #4c4553;
  font-size: 0.78rem;
  font-weight: 820;
}

.discovery-filter-drawer .prelook-select-shell {
  width: 100%;
}

.discovery-filter-drawer .prelook-select-trigger {
  min-height: 52px;
  padding: 10px 12px 10px 14px;
  border-color: rgba(84, 76, 95, 0.17);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #fdfcfe);
  box-shadow: 0 3px 12px rgba(42, 36, 50, 0.035);
  font-size: 0.8rem;
  font-weight: 720;
}

.discovery-filter-drawer .prelook-select-trigger:hover:not(:disabled) {
  border-color: rgba(103, 84, 154, 0.34);
  box-shadow: 0 7px 20px rgba(42, 36, 50, 0.07);
}

.discovery-filter-drawer .prelook-select-trigger[aria-expanded="true"] {
  border-color: #7d6aa8;
  box-shadow:
    0 0 0 3px rgba(125, 106, 168, 0.1),
    0 9px 24px rgba(42, 36, 50, 0.08);
}

.discovery-filter-drawer select {
  width: 100%;
  min-height: 52px;
  border-color: rgba(84, 76, 95, 0.17);
  border-radius: 14px;
  padding-inline: 14px 40px;
  background-color: #fff;
  box-shadow: 0 3px 12px rgba(42, 36, 50, 0.035);
}

.discovery-filter-drawer select:disabled {
  color: #98929d;
  background-color: #f2f0f3;
}

.discovery-sort-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.discovery-sort-options > legend {
  grid-column: 1 / -1;
  margin-bottom: 9px;
}

.discovery-sort-option {
  position: relative;
  display: grid !important;
  grid-template-rows: 34px minmax(0, auto);
  min-height: 116px;
  align-content: start;
  gap: 9px !important;
  border: 1px solid rgba(84, 76, 95, 0.16);
  border-radius: 16px;
  padding: 14px !important;
  color: #4b4452 !important;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(42, 36, 50, 0.035);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.discovery-sort-option:hover:not(.disabled) {
  border-color: rgba(103, 84, 154, 0.38);
  transform: translateY(-2px);
}

.discovery-sort-option.active {
  border-color: #67549a;
  background: #f3e8ff;
  box-shadow: inset 0 0 0 1px rgba(103, 84, 154, 0.2);
}

.discovery-sort-option.disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.discovery-sort-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.discovery-sort-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  color: #67549a;
  background: #ede9fe;
}

.discovery-sort-icon .icon {
  width: 17px;
  height: 17px;
}

.discovery-sort-option > span:nth-of-type(2) {
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 40px;
}

.discovery-sort-option strong {
  color: #302a36;
  font-size: 0.73rem;
  line-height: 1.2;
  white-space: nowrap;
}

.discovery-sort-option small {
  color: #817a86;
  font-size: 0.63rem;
  font-weight: 600;
  line-height: 1.25;
}

.discovery-sort-option > i {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  border: 1px solid #c9c3ce;
  border-radius: 50%;
  background: #fff;
}

.discovery-sort-option.active > i {
  border: 4px solid #67549a;
}

.discovery-filter-drawer-actions {
  display: grid;
  grid-template-columns: minmax(110px, 0.45fr) minmax(0, 1fr);
  gap: 10px;
  padding: 18px 26px max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(84, 76, 95, 0.11);
  background: rgba(251, 250, 252, 0.96);
  backdrop-filter: blur(18px);
}

.discovery-filter-drawer-actions button {
  min-height: 52px;
  border-radius: 14px;
}

.directory-mobile-view-switch {
  display: none;
}

body.salon-directory-mode .directory-list.is-filtering {
  opacity: 0.72;
  transform: translateY(3px);
}

body.salon-directory-mode .directory-list {
  transition:
    opacity 120ms ease,
    transform 180ms ease;
}

body.salon-directory-mode .directory-salon-row {
  animation: discovery-directory-card-in 360ms both;
  animation-delay: calc(var(--directory-card-index, 0) * 32ms);
}

body.salon-directory-mode .directory-list.is-filtered .directory-salon-row {
  animation: discovery-directory-card-in 360ms both;
  animation-delay: calc(var(--directory-card-index, 0) * 32ms);
}

body.salon-directory-mode .directory-map-canvas,
body.salon-directory-mode .leaflet-map-pane,
body.salon-directory-mode .leaflet-marker-pane {
  transition: opacity 180ms ease;
}

body.salon-directory-mode .directory-map-canvas.camera-moving {
  cursor: grabbing;
}

@keyframes discovery-directory-card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 768px) {
  body.salon-directory-mode .salon-directory-page {
    padding-bottom: calc(62px + env(safe-area-inset-bottom));
  }

  body.salon-directory-mode .directory-search-actions {
    grid-template-columns: minmax(0, 1fr) 52px;
  }

  body.salon-directory-mode .discovery-filter-trigger {
    width: 52px;
    min-width: 52px;
    padding: 0;
  }

  body.salon-directory-mode .discovery-filter-trigger > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  body.salon-directory-mode .discovery-filter-trigger .filter-count {
    position: absolute;
    top: -5px;
    right: -5px;
  }

  .discovery-filter-panel.discovery-filter-drawer {
    width: min(430px, calc(100vw - 10px));
    border-radius: 24px 0 0 24px;
  }

  .discovery-filter-drawer-header {
    padding: 22px 20px 18px;
  }

  .discovery-filter-drawer .discovery-filter-fields {
    padding: 20px;
  }

  .discovery-filter-drawer-actions {
    padding-inline: 20px;
  }

  .directory-mobile-view-switch {
    position: fixed;
    right: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 620;
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(82px, 1fr));
    gap: 3px;
    border: 1px solid rgba(84, 76, 95, 0.15);
    border-radius: 999px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 34px rgba(35, 30, 43, 0.16);
    backdrop-filter: blur(18px);
    transform: translateX(50%);
  }

  .directory-mobile-view-switch button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 999px;
    padding-inline: 14px;
    color: #655e6c;
    background: transparent;
    font-weight: 760;
  }

  .directory-mobile-view-switch button.active {
    color: #fff;
    background: #302936;
  }

  .directory-mobile-view-switch .icon {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 390px) {
  .discovery-sort-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .discovery-sort-option {
    min-height: 76px;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    align-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discovery-filter-scrim,
  .discovery-filter-panel.discovery-filter-drawer,
  .discovery-filter-drawer .discovery-filter-fields > label,
  .discovery-filter-drawer .discovery-sort-options,
  body.salon-directory-mode .directory-list,
  body.salon-directory-mode .directory-list.is-filtered .directory-salon-row {
    animation: none !important;
    transition: none !important;
  }
}

/* 2026 customer polish: softer future violet, calm confirmations, and one
   discovery control language across the home and directory experiences. */
:root {
  --future-violet-950: #342946;
  --future-violet-800: #51416f;
  --future-violet-700: #67549a;
  --future-violet-600: #7d6aa8;
  --future-violet-300: #c6bed8;
  --future-violet-100: #e9e4f1;
  --future-violet-50: #f6f3f9;
  --future-violet-glow: rgba(103, 84, 154, 0.16);
}

body.customer-mode {
  --accent: var(--future-violet-300);
  --accent-strong: var(--future-violet-700);
  --accent-soft: var(--future-violet-50);
  --customer-violet: var(--future-violet-700);
  --customer-violet-dark: var(--future-violet-800);
  --customer-neon: var(--future-violet-600);
  --customer-neon-line: var(--future-violet-300);
  --customer-neon-soft: var(--future-violet-50);
  --customer-neon-glow: var(--future-violet-glow);
}

body.customer-mode .solid-button.customer {
  background: linear-gradient(
    135deg,
    var(--future-violet-800),
    var(--future-violet-600)
  );
  box-shadow: 0 14px 30px -18px var(--future-violet-glow);
}

body.customer-mode .solid-button.customer:hover {
  background: linear-gradient(
    135deg,
    var(--future-violet-700),
    var(--future-violet-600)
  );
  box-shadow: 0 18px 34px -17px rgba(103, 84, 154, 0.22);
}

.confirmation-page {
  width: min(1120px, calc(100% - 32px));
  margin: clamp(24px, 4vw, 44px) auto 80px;
}

.confirmation-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 5vw, 58px);
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(114, 215, 187, 0.11),
      transparent 34%
    ),
    linear-gradient(145deg, #fff, #fdfcfe 68%);
}

.confirmation-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 20px;
  border: 1px solid rgba(56, 169, 135, 0.2);
  color: #217a62;
  background: #daf8ed;
  box-shadow:
    0 0 0 8px rgba(114, 215, 187, 0.08),
    0 14px 34px rgba(52, 145, 117, 0.15);
}

.confirmation-icon .icon {
  width: 24px;
  height: 24px;
}

.confirmation-icon.is-entering {
  animation: confirmationBadgeIn 580ms cubic-bezier(0.22, 1.2, 0.35, 1) both;
}

.confirmation-icon.is-entering .icon path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: confirmationCheckDraw 360ms 150ms ease-out forwards;
}

.confirmation-hero .eyebrow {
  color: var(--future-violet-700);
  font-size: 0.72rem;
  font-weight: 680;
  letter-spacing: 0.11em;
}

.confirmation-hero h1 {
  max-width: 980px;
  margin: 12px auto;
  font-size: clamp(2.25rem, 4.5vw, 3.55rem);
  font-weight: 640;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.confirmation-hero > p:not(.eyebrow) {
  max-width: 66ch;
  font-size: clamp(0.93rem, 1.25vw, 1.04rem);
  font-weight: 420;
  line-height: 1.55;
}

.confirmation-number {
  grid-template-columns: auto auto;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  border: 1px solid var(--future-violet-100);
  border-radius: 999px;
  padding: 10px 15px;
  background: var(--future-violet-50);
}

.confirmation-number span {
  font-weight: 480;
}

.confirmation-number strong,
.confirmation-salon h2,
.confirmation-prep h2,
.confirmation-details dd {
  font-weight: 620;
}

.confirmation-details dt,
.confirmation-prep li,
.confirmation-salon p {
  font-weight: 420;
}

.confirmation-details,
.confirmation-prep {
  padding: clamp(22px, 3vw, 30px);
}

.confirmation-prep ul {
  line-height: 1.55;
}

@keyframes confirmationBadgeIn {
  0% {
    opacity: 0;
    transform: scale(0.62);
  }
  64% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes confirmationCheckDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.customer-appointment-feature-list {
  display: grid;
  gap: 16px;
}

.customer-appointment-feature-date {
  background: linear-gradient(
    160deg,
    var(--future-violet-800),
    var(--future-violet-600)
  );
}

.customer-appointment-feature-copy p .icon,
.customer-appointment-feature-meta .icon,
.customer-appointment-map > span .icon {
  color: var(--future-violet-700);
}

.customer-appointment-time-visual > span::before {
  background: var(--future-violet-700);
  box-shadow: 0 0 0 1px var(--future-violet-700);
}

.customer-appointment-time-visual > span i {
  background: linear-gradient(90deg, var(--future-violet-700), #55bba3);
}

.status-badge.status-requested {
  color: var(--future-violet-700);
  background: var(--future-violet-50);
}

.discover-marketplace-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.discover-marketplace-title-row h2 {
  margin: 0;
}

.discover-marketplace-title-row .result-count {
  align-self: center;
  min-height: 30px;
  color: #655d6d;
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.74rem;
  font-weight: 620;
}

.discovery-toolbar-home {
  display: block;
}

.discovery-toolbar-home .discovery-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  width: 100%;
  border: 1px solid rgba(91, 80, 107, 0.11);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 28px rgba(43, 36, 54, 0.055);
  backdrop-filter: blur(14px);
}

.discovery-toolbar-home .discovery-toolbar-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.discovery-toolbar-home .discovery-filter-trigger,
.discovery-toolbar-home .discovery-save-search {
  min-height: 44px;
  border-radius: 12px;
}

.discovery-toolbar-home .discovery-sort {
  display: grid;
  grid-template-columns: auto minmax(164px, 220px);
  align-items: center;
  gap: 9px;
}

.discovery-toolbar-home .discovery-sort select {
  min-height: 44px;
  border-radius: 12px;
  background-color: #fff;
}

body.salon-directory-mode .salon-directory-page {
  grid-template-rows: minmax(0, 1fr);
}

body.salon-directory-mode .salon-map-directory {
  position: relative;
  display: grid;
  grid-template-columns: clamp(680px, 46vw, 960px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
}

/* Keep the directory close to the viewport edges without changing the shared
   customer-page width. Once the result rail reaches 960px, only the map grows. */
@media (min-width: 769px) {
  body.salon-directory-mode .page-wrap {
    width: calc(100% - 24px);
    max-width: none;
  }
}

body.salon-directory-mode .salon-directory-controls {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  z-index: 720;
  margin: 16px;
  pointer-events: none;
}

body.salon-directory-mode .salon-directory-controls > * {
  pointer-events: auto;
}

body.salon-directory-mode .salon-directory-panel {
  grid-column: 1;
  grid-row: 1;
}

body.salon-directory-mode .directory-map-panel {
  grid-column: 2;
  grid-row: 1;
}

body.salon-directory-mode .directory-search-actions {
  gap: 8px;
  border: 1px solid rgba(78, 68, 91, 0.13);
  border-radius: 19px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.91);
  box-shadow: 0 16px 38px rgba(39, 32, 49, 0.13);
  backdrop-filter: blur(18px);
}

body.salon-directory-mode .directory-search,
body.salon-directory-mode .discovery-filter-trigger {
  min-height: 48px;
  border-color: transparent;
  border-radius: 13px;
  box-shadow: none;
}

body.salon-directory-mode .directory-search {
  background: rgba(255, 255, 255, 0.82);
}

body.salon-directory-mode .discovery-filter-trigger {
  min-width: 108px;
  background: var(--future-violet-50);
}

body.salon-directory-mode .discovery-filter-trigger:hover,
body.salon-directory-mode .discovery-filter-trigger[aria-expanded="true"] {
  color: var(--future-violet-800);
  background: var(--future-violet-100);
}

@media (max-width: 1180px) {
  body.salon-directory-mode .salon-map-directory {
    grid-template-columns: minmax(560px, 56%) minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .confirmation-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .confirmation-number {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 16px;
  }

  .discovery-toolbar-home .discovery-toolbar-row,
  .discovery-toolbar-home .discovery-toolbar-primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .discovery-toolbar-home .discovery-sort {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .discovery-toolbar-home .discovery-sort select {
    width: 100%;
  }

  body.salon-directory-mode .salon-map-directory {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  body.salon-directory-mode .salon-directory-controls,
  body.salon-directory-mode .salon-directory-panel,
  body.salon-directory-mode .directory-map-panel {
    grid-column: 1;
    grid-row: 1;
  }

  body.salon-directory-mode .salon-directory-controls {
    margin: 10px;
  }

  body.salon-directory-mode .directory-view-list .salon-directory-panel {
    padding-top: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .confirmation-icon.is-entering,
  .confirmation-icon.is-entering .icon path {
    animation: none !important;
    stroke-dashoffset: 0;
  }
}

/* Discovery results: stable loading/empty states, in-place card motion, and a
   single compact control surface shared by Discover and the salon directory. */
.salon-results-loading,
.salon-results-state {
  display: grid;
  min-height: 190px;
  align-content: center;
  justify-items: center;
  gap: 14px;
  grid-column: 1 / -1;
  border: 1px solid rgba(82, 73, 95, 0.12);
  border-radius: 20px;
  padding: 30px;
  color: #67616c;
  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(147, 125, 214, 0.1),
      transparent 42%
    ),
    rgba(255, 255, 255, 0.86);
  text-align: center;
  box-shadow: 0 14px 38px rgba(42, 35, 53, 0.055);
}

.salon-results-loading > div,
.salon-results-state > div {
  display: grid;
  gap: 5px;
}

.salon-results-loading strong,
.salon-results-state strong {
  color: #2e2933;
  font-size: 1rem;
  font-weight: 720;
}

.salon-results-loading span,
.salon-results-state span {
  font-size: 0.84rem;
  line-height: 1.45;
}

.salon-results-spinner,
.salon-results-state-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 15px;
  color: var(--future-violet-700);
  background: var(--future-violet-50);
}

.salon-results-spinner {
  border: 3px solid var(--future-violet-100);
  border-top-color: var(--future-violet-600);
  border-radius: 50%;
  background: transparent;
  animation: salon-results-spin 760ms linear infinite;
}

.salon-results-state-icon .icon {
  width: 21px;
  height: 21px;
}

.salon-results-state .outline-button {
  min-height: 42px;
  border-radius: 12px;
}

@keyframes salon-results-spin {
  to {
    transform: rotate(360deg);
  }
}

/* First-load customer hydration. Discover and My Hair mount this stable shell
   until marketplace, private account, and professional-role data have all
   settled, preventing incomplete navigation and cards from flashing twice. */
.customer-hydration-shell {
  min-height: 100dvh;
  background:
    radial-gradient(
      circle at 50% 34%,
      rgba(174, 151, 255, 0.13),
      transparent 31rem
    ),
    linear-gradient(180deg, #fbfaff 0%, #f7f7f8 72%);
}

.salon-onboarding-launch {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(249, 248, 252, 0.88);
  backdrop-filter: blur(14px);
}

.salon-onboarding-launch > section {
  display: grid;
  width: min(100%, 430px);
  justify-items: center;
  padding: 42px 34px;
  border: 1px solid #e7e0ee;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 28px 78px rgba(47, 35, 68, 0.14);
  text-align: center;
  animation: salonOnboardingLaunchIn 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.salon-onboarding-launch-mark {
  display: grid;
  width: 66px;
  height: 66px;
  margin-bottom: 20px;
  place-items: center;
  border-radius: 22px;
  background: #f2edff;
  box-shadow: inset 0 0 0 1px rgba(126, 92, 224, 0.12);
}

.salon-onboarding-launch-mark img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.salon-onboarding-launch h2,
.salon-onboarding-launch p {
  margin: 0;
}

.salon-onboarding-launch h2 {
  margin-top: 7px;
  color: #2b2631;
  font-size: 1.65rem;
  letter-spacing: -0.025em;
}

.salon-onboarding-launch section > p:last-of-type {
  margin-top: 9px;
  color: #746e7a;
}

.salon-onboarding-launch-progress {
  width: 190px;
  height: 4px;
  margin-top: 25px;
  overflow: hidden;
  border-radius: 999px;
  background: #eeeaf4;
}

.salon-onboarding-launch-progress i {
  display: block;
  width: 46%;
  height: 100%;
  border-radius: inherit;
  background: #9678e9;
  animation: salonOnboardingProgress 1.05s ease-in-out infinite;
}

.pro-account-salon-draft {
  border-style: dashed;
  border-color: #cfc1ec;
  background: #fcfaff;
}

.pro-account-salon-draft .pro-account-salon-avatar {
  color: #654bb4;
  background: #efe9ff;
}

@keyframes salonOnboardingLaunchIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
}

@keyframes salonOnboardingProgress {
  from {
    transform: translateX(-115%);
  }
  to {
    transform: translateX(220%);
  }
}

.customer-hydration-topbar {
  pointer-events: none;
}

.customer-hydration-nav .nav-link {
  color: #8c8794;
}

.customer-hydration-actions {
  display: flex;
  min-width: 198px;
  justify-content: flex-end;
  gap: 10px;
}

.customer-hydration-actions > span {
  width: 84px;
  height: 42px;
  border: 1px solid rgba(112, 96, 142, 0.09);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.58);
}

.customer-hydration-actions > span:last-child {
  width: 74px;
  background: rgba(113, 88, 194, 0.08);
}

.customer-hydration-main {
  display: grid;
  min-height: calc(100dvh - 92px);
  place-items: center;
  padding-block: 28px 84px;
}

.customer-hydration-stage {
  display: grid;
  width: min(100%, 480px);
  justify-items: center;
  text-align: center;
  animation: customerHydrationStageIn 420ms cubic-bezier(0.22, 0.8, 0.22, 1)
    both;
}

.customer-hydration-emblem {
  position: relative;
  display: grid;
  width: 92px;
  height: 92px;
  margin-bottom: 24px;
  place-items: center;
}

.customer-hydration-emblem::before,
.customer-hydration-emblem > span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(137, 108, 224, 0.18);
  border-radius: 50%;
  content: "";
}

.customer-hydration-emblem::before {
  border-top-color: rgba(123, 86, 236, 0.82);
  animation: customerHydrationOrbit 1.1s linear infinite;
}

.customer-hydration-emblem > span {
  inset: 8px;
  border-color: rgba(164, 139, 239, 0.13);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 48px rgba(76, 55, 122, 0.11);
}

.customer-hydration-emblem img {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.customer-hydration-stage .eyebrow {
  margin: 0 0 9px;
  color: #785cce;
  letter-spacing: 0.11em;
}

.customer-hydration-stage h1 {
  margin: 0;
  color: #28242f;
  font-size: clamp(1.8rem, 4vw, 2.55rem);
  font-weight: 790;
  letter-spacing: -0.035em;
}

.customer-hydration-stage > p:not(.eyebrow) {
  max-width: 430px;
  margin: 12px 0 0;
  color: #716b78;
  font-size: 0.96rem;
  line-height: 1.6;
}

.customer-hydration-progress {
  width: min(240px, 64vw);
  height: 3px;
  margin-top: 26px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(118, 94, 186, 0.1);
}

.customer-hydration-progress > span {
  display: block;
  width: 46%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9d84ea, #7657d7);
  animation: customerHydrationProgress 1.25s cubic-bezier(0.45, 0, 0.55, 1)
    infinite;
}

@keyframes customerHydrationStageIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes customerHydrationOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes customerHydrationProgress {
  from {
    transform: translateX(-112%);
  }
  to {
    transform: translateX(224%);
  }
}

@media (max-width: 760px) {
  .customer-hydration-nav,
  .customer-hydration-actions {
    display: none;
  }

  .customer-hydration-topbar {
    justify-content: center;
  }

  .customer-hydration-main {
    min-height: calc(100dvh - 82px);
    padding-inline: 24px;
  }
}

/* One-shot customer route motion. JavaScript adds these classes only after a
   real Discover or My Hair entry, so live data and search patches stay still. */
.customer-surface-enter {
  animation-name: customerSurfaceEnter !important;
  animation-duration: 460ms !important;
  animation-timing-function: cubic-bezier(0.22, 0.8, 0.22, 1) !important;
  animation-fill-mode: both !important;
  animation-delay: var(--surface-motion-delay, 0ms) !important;
}

.customer-rail-enter {
  animation: customerRailEnter 460ms cubic-bezier(0.22, 0.8, 0.22, 1) both;
}

@keyframes customerSurfaceEnter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.994);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes customerRailEnter {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body.salon-directory-mode .directory-salon-row[data-directory-select] {
  cursor: pointer;
  transform-origin: center;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

body.salon-directory-mode
  .directory-salon-row[data-directory-select]:hover:not(.active) {
  border-color: rgba(103, 84, 154, 0.24);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 30px rgba(48, 39, 60, 0.08);
}

body.salon-directory-mode
  .directory-salon-row[data-directory-select]:focus-visible {
  outline: 3px solid var(--future-violet-300);
  outline-offset: 2px;
}

body.salon-directory-mode .directory-list,
body.salon-directory-mode .directory-salon-row {
  opacity: 1;
}

body.salon-directory-mode .directory-salon-row {
  animation: none;
}

body.salon-directory-mode .directory-salon-row.is-entering {
  animation: discovery-directory-card-in 280ms both;
}

.discovery-filter-scrim {
  top: var(--discovery-drawer-top, 74px);
  height: calc(100dvh - var(--discovery-drawer-top, 74px));
}

.discovery-filter-panel.discovery-filter-drawer {
  top: var(--discovery-drawer-top, 74px);
  bottom: auto;
  height: calc(100dvh - var(--discovery-drawer-top, 74px));
  border-radius: 26px 0 0 0;
}

.discovery-filter-drawer-header {
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(84, 76, 95, 0.11);
}

.discovery-filter-drawer-header .icon-button {
  display: inline-grid;
  flex: 0 0 auto;
}

.discover-marketplace > .discover-marketplace-heading,
.discover-marketplace > .discover-marketplace-heading > div {
  width: 100%;
}

.discover-marketplace-title-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: 100%;
}

@media (max-width: 768px) {
  .discovery-filter-panel.discovery-filter-drawer {
    border-radius: 24px 0 0 0;
  }

  .discover-marketplace-title-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .discover-marketplace-title-row h2 {
    grid-column: 1;
    grid-row: 1;
  }

  .discover-marketplace-title-row .result-count {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin-top: 0;
  }

  body.salon-directory-mode .directory-search-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: center;
    gap: 7px;
    min-height: 0;
  }

  body.salon-directory-mode .directory-search {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    height: 50px;
  }

  body.salon-directory-mode .directory-search input {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  body.salon-directory-mode .discovery-filter-trigger {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    min-height: 48px;
    padding: 0;
  }

  body.salon-directory-mode .discovery-filter-trigger > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body.salon-directory-mode .discovery-filter-trigger > .icon {
    margin: 0;
  }

  body.salon-directory-mode .discovery-filter-trigger .filter-count {
    position: absolute;
    top: -5px;
    right: -5px;
  }
}

body.discovery-filter-open.salon-directory-mode .salon-directory-controls,
body.discovery-filter-open .discover-marketplace {
  position: relative;
  z-index: 1900;
}

body.discovery-filter-open .mobile-tabbar {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
}

body:has(.discovery-filter-drawer.is-open) .mobile-tabbar {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
}

body:has(.discovery-filter-drawer.is-open) .directory-mobile-view-switch {
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, 16px);
}

/* The dashboard presents one salon-specific stylist profile. Account-bound
   demographics remain canonical without exposing a duplicate customer form. */
.stylist-dashboard-settings {
  width: min(100%, 1280px);
  margin-inline: auto;
}

.stylist-dashboard-settings-grid {
  display: grid;
  gap: 18px;
}

.stylist-dashboard-settings-card {
  display: grid;
  gap: 24px;
}

.stylist-dashboard-settings-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.stylist-dashboard-settings-card > header > div {
  display: grid;
  gap: 4px;
}

.stylist-dashboard-settings-card :is(h2, p) {
  margin: 0;
}

.stylist-dashboard-settings-card > header h2 {
  color: #292333;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.15;
}

.stylist-dashboard-settings-card > header p:last-child {
  max-width: 680px;
  color: #746d7c;
  line-height: 1.5;
}

.stylist-profile-save-status {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  color: #756e7d;
  font-size: 0.78rem;
  font-weight: 760;
  white-space: nowrap;
}

.stylist-profile-save-status.is-saved {
  color: #287b65;
}

.stylist-profile-save-status.is-error {
  max-width: min(100%, 440px);
  color: #9c3150;
  white-space: normal;
}

.stylist-profile-save-status .icon,
.stylist-profile-save-spinner {
  width: 15px;
  height: 15px;
}

.stylist-profile-save-spinner {
  border: 2px solid rgba(103, 84, 154, 0.2);
  border-top-color: var(--pro-accent-strong);
  border-radius: 50%;
  animation: spin 720ms linear infinite;
}

.stylist-profile-save-status button {
  min-height: 30px;
  border: 0;
  padding: 0 3px;
  color: inherit;
  background: transparent;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.stylist-dashboard-profile-layout {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 44px);
}

.stylist-dashboard-profile-layout > .pro-stylist-photo-control {
  margin: 0;
}

.stylist-dashboard-profile-layout .pro-stylist-photo-frame img {
  width: 112px;
  height: 112px;
}

.stylist-dashboard-settings-fields textarea {
  width: 100%;
  min-width: 0;
  padding: 13px;
  border: 1px solid #cbded8;
  border-radius: 12px;
  color: #18352e;
  background: #fff;
  font: inherit;
  line-height: 1.55;
  resize: vertical;
}

.stylist-dashboard-settings-fields textarea:focus {
  border-color: #6750b8;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(103, 80, 184, 0.14);
}

.stylist-dashboard-settings-wide {
  grid-column: 1 / -1;
}

.stylist-language-editor {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.stylist-language-editor legend {
  margin-bottom: 7px;
  padding: 0;
  color: #294c43;
  font-size: 0.8rem;
  font-weight: 760;
}

.stylist-language-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.stylist-language-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 6px;
}

.stylist-language-row input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 1px solid #cbded8;
  border-radius: 12px;
  padding: 0 13px;
  color: #18352e;
  background: #fff;
  font: inherit;
}

.stylist-language-row input:focus {
  border-color: #6750b8;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(103, 80, 184, 0.14);
}

.stylist-language-row .icon-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border: 1px solid #e2dce7;
  color: #8c4560;
  background: #fff;
}

.stylist-language-empty {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px dashed #d7e5e0;
  border-radius: 12px;
  padding: 12px 14px;
  color: #71837e;
  font-size: 0.8rem;
}

.stylist-language-editor-footer {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.stylist-language-editor-footer .outline-button {
  flex: 0 0 auto;
}

.stylist-language-save-status {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: #746d7c;
  font-size: 0.74rem;
  font-weight: 720;
  text-align: right;
}

.stylist-language-save-status.is-saved {
  color: #287b65;
}

.stylist-language-save-status.is-error {
  color: #9c3150;
}

.stylist-language-save-status .icon,
.stylist-language-save-status .stylist-profile-save-spinner {
  width: 14px;
  min-width: 14px;
  height: 14px;
}

.stylist-language-save-status button,
.stylist-portfolio-status button {
  border: 0;
  padding: 1px 2px;
  color: inherit;
  background: transparent;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.stylist-dashboard-settings-note {
  padding-top: 16px;
  border-top: 1px solid #ebe6ee;
  color: #756e7d;
  font-size: 0.84rem;
  line-height: 1.55;
}

.stylist-dashboard-portfolio-card {
  display: grid;
  gap: 18px;
}

.stylist-dashboard-portfolio-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.stylist-dashboard-portfolio-card > header > div {
  display: grid;
  gap: 4px;
}

.stylist-dashboard-portfolio-card :is(h2, p) {
  margin: 0;
}

.stylist-dashboard-portfolio-card > p {
  max-width: 760px;
  color: #746d7c;
  font-size: 0.84rem;
  line-height: 1.55;
}

.stylist-portfolio-status {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  color: #756e7d;
  font-size: 0.75rem;
  font-weight: 760;
  white-space: nowrap;
}

.stylist-portfolio-status.is-saved {
  color: #287b65;
}

.stylist-portfolio-status.is-error {
  color: #9c3150;
  white-space: normal;
}

.stylist-portfolio-status .icon,
.stylist-portfolio-status > i {
  width: 14px;
  height: 14px;
}

.stylist-portfolio-status > i {
  border: 2px solid rgba(79, 146, 125, 0.22);
  border-top-color: var(--pro-accent-strong);
  border-radius: 50%;
  animation: spin 720ms linear infinite;
}

.stylist-portfolio-consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  max-width: 760px;
  align-items: center;
  gap: 10px;
  border: 1px solid #d7ebe4;
  border-radius: 12px;
  padding: 12px 14px;
  color: #47655d;
  background: #f7fcfa;
  font-size: 0.78rem;
  line-height: 1.45;
}

.stylist-portfolio-consent input {
  width: 17px;
  min-width: 17px;
  height: 17px;
  margin: 0 !important;
  accent-color: var(--pro-accent-strong);
}

.stylist-portfolio-consent span {
  display: block;
  margin: 0;
}

.stylist-dashboard-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.stylist-dashboard-portfolio-grid figure,
.stylist-dashboard-portfolio-add {
  min-height: 180px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #dfe9e5;
  border-radius: 14px;
  background: #fff;
}

.stylist-dashboard-portfolio-grid figure {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.stylist-dashboard-portfolio-grid figure img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.stylist-dashboard-portfolio-grid figcaption {
  display: grid;
  min-width: 0;
  gap: 11px;
  padding: 13px;
}

.stylist-dashboard-portfolio-grid figcaption label {
  display: grid;
  gap: 6px;
}

.stylist-dashboard-portfolio-grid figcaption label > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: #294c43;
  font-size: 0.75rem;
  font-weight: 760;
}

.stylist-dashboard-portfolio-grid figcaption small {
  color: #8b838f;
  font-size: 0.65rem;
  font-weight: 600;
}

.stylist-dashboard-portfolio-grid figcaption :is(input, textarea) {
  width: 100%;
  min-width: 0;
  border: 1px solid #d5e2de;
  border-radius: 10px;
  padding: 10px 11px;
  color: #18352e;
  background: #fff;
  font: inherit;
  line-height: 1.45;
}

.stylist-dashboard-portfolio-grid figcaption textarea {
  min-height: 76px;
  resize: vertical;
}

.stylist-dashboard-portfolio-grid figcaption :is(input, textarea):focus {
  border-color: #6750b8;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(103, 80, 184, 0.14);
}

.stylist-dashboard-portfolio-image {
  position: relative;
  overflow: hidden;
  border-radius: 13px 13px 0 0;
}

.stylist-dashboard-portfolio-image > button {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  padding: 0 10px;
  color: #fff;
  background: rgba(35, 28, 40, 0.78);
  font-size: 0.68rem;
  font-weight: 760;
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.stylist-dashboard-portfolio-image > button .icon {
  width: 13px;
  height: 13px;
}

.stylist-dashboard-portfolio-add {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  border-style: dashed;
  color: #4f7e70;
  background: #f9fdfb;
  text-align: center;
  cursor: pointer;
}

.stylist-dashboard-portfolio-add:hover,
.stylist-dashboard-portfolio-add:focus-within {
  border-color: #6750b8;
  background: #f7f4ff;
}

.stylist-dashboard-portfolio-add.is-saving {
  opacity: 0.65;
}

.stylist-dashboard-portfolio-add .icon {
  width: 24px;
  height: 24px;
}

.stylist-dashboard-portfolio-add strong {
  font-size: 0.8rem;
}

.stylist-dashboard-portfolio-add span {
  color: #728a83;
  font-size: 0.67rem;
}

.stylist-dashboard-portfolio-add input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

@media (max-width: 1080px) {
  .stylist-dashboard-portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .stylist-dashboard-settings-card > header {
    align-items: stretch;
    flex-direction: column;
  }

  .stylist-profile-save-status {
    align-self: flex-start;
  }

  .stylist-dashboard-settings-card > header > button {
    width: 100%;
  }

  .stylist-dashboard-profile-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .stylist-dashboard-profile-layout > .pro-stylist-photo-control {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    justify-self: start;
    align-items: center;
  }

  .stylist-dashboard-profile-layout .pro-stylist-photo-frame {
    grid-row: 1 / span 2;
  }

  .stylist-dashboard-portfolio-card > header {
    align-items: stretch;
    flex-direction: column;
  }

  .stylist-language-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stylist-language-editor-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .stylist-language-save-status {
    justify-content: flex-start;
    text-align: left;
  }

  .stylist-dashboard-portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 440px) {
  .stylist-language-list,
  .stylist-dashboard-portfolio-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .salon-results-spinner,
  .customer-hydration-stage,
  .customer-hydration-emblem::before,
  .customer-hydration-progress > span,
  .customer-surface-enter,
  .customer-rail-enter,
  .appointment-cancellation-confirmation,
  body.salon-directory-mode .directory-salon-row.is-entering {
    animation: none !important;
  }
}

/* Target-specific, verified reviews. */
.appointment-dialog-card:has(.appointment-review-form) {
  width: min(920px, calc(100vw - 32px));
}

.appointment-review-form {
  gap: 18px;
  padding: clamp(16px, 2.5vw, 24px);
  border-color: #e2ddec;
  background: #fcfbfe;
}

.appointment-review-heading,
.appointment-review-editor-heading,
.appointment-review-photos > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.appointment-review-heading > div,
.appointment-review-editor-heading > div {
  display: grid;
  gap: 4px;
}

.appointment-review-heading p,
.appointment-review-complete p,
.appointment-review-separate-note {
  margin: 0;
  color: #746f7c;
  font-size: 0.8rem;
  line-height: 1.5;
}

.appointment-review-heading > span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  color: #5d4c98;
  background: #eee9f8;
  font-size: 0.72rem;
  font-weight: 820;
}

.appointment-review-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.appointment-review-target {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 84px;
  border: 1px solid #ded9e6;
  border-radius: 14px;
  padding: 12px;
  color: #302c37;
  background: #fff;
  text-align: left;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.appointment-review-target:hover:not(:disabled),
.appointment-review-target.active {
  border-color: #8876bf;
  box-shadow: 0 8px 24px rgba(83, 64, 126, 0.11);
  transform: translateY(-1px);
}

.appointment-review-target > span:first-child {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #6553a0;
  background: #f0ecf8;
}

.appointment-review-target > span:first-child .icon {
  width: 17px;
  height: 17px;
}

.appointment-review-target > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.appointment-review-target small,
.appointment-review-target em {
  overflow: hidden;
  color: #817b88;
  font-size: 0.67rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointment-review-target strong {
  overflow: hidden;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointment-review-target > b {
  color: #6c5aa5;
  font-size: 0.7rem;
}

.appointment-review-target.reviewed:disabled {
  border-color: #cfe7df;
  color: #276b59;
  background: #f1faf7;
  opacity: 1;
}

.appointment-review-target.reviewed > b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #26705d;
}

.appointment-review-target.reviewed > b .icon {
  width: 14px;
  height: 14px;
}

.appointment-review-editor {
  display: grid;
  gap: 17px;
  border: 1px solid #e5e0ea;
  border-radius: 16px;
  padding: clamp(15px, 2vw, 21px);
  background: #fff;
}

.appointment-review-editor-heading span,
.appointment-review-copy > span,
.appointment-review-photos > div:first-child > span {
  color: #68616f;
  font-size: 0.75rem;
  font-weight: 780;
}

.appointment-review-editor-heading output {
  color: #4f417b;
  font-size: 0.8rem;
  font-weight: 820;
}

.appointment-review-rating {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.customer-review-stars,
.business-review-stars {
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: #d9d4dc;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.customer-review-stars > b,
.business-review-stars > b {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--review-rating-percent, 0%);
  overflow: hidden;
  color: #d99d2b;
  white-space: nowrap;
}

.appointment-review-rating input[type="range"] {
  width: 100%;
  accent-color: #7562ac;
}

.appointment-review-rating > small,
.appointment-review-photo-upload > small,
.appointment-review-copy > small {
  color: #837d89;
  font-size: 0.68rem;
}

.appointment-review-copy textarea {
  width: 100%;
  min-height: 118px;
  border: 1px solid #dcd7e1;
  border-radius: 12px;
  padding: 12px;
  color: #302c35;
  background: #fff;
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

.appointment-review-copy > small {
  justify-self: end;
}

.appointment-review-photos {
  display: grid;
  gap: 10px;
}

.appointment-review-photo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.appointment-review-photo-grid figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 10px;
  background: #eeeaf1;
  aspect-ratio: 1;
}

.appointment-review-photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.appointment-review-photo-grid button {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(35, 31, 40, 0.78);
}

.appointment-review-photo-grid button .icon {
  width: 14px;
  height: 14px;
}

.appointment-review-photo-upload {
  display: flex !important;
  width: fit-content;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px dashed #bdb3ce;
  border-radius: 11px;
  padding: 9px 12px;
  color: #5d4d8f;
  background: #f8f5fc;
  font-size: 0.78rem;
  font-weight: 790;
  cursor: pointer;
}

.appointment-review-photo-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.appointment-review-photo-upload.disabled {
  cursor: default;
  opacity: 0.58;
}

.appointment-review-complete,
.appointment-reviews-complete {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #26705d;
}

.appointment-review-complete {
  border-radius: 14px;
  padding: 16px;
  background: #eef8f5;
}

.appointment-review-complete > .icon {
  width: 24px;
  height: 24px;
}

.appointment-reviews-complete,
.appointment-reviews-unavailable {
  min-height: 38px;
  border-radius: 999px;
  padding: 0 12px;
  background: #eef8f5;
  font-size: 0.75rem;
  font-weight: 780;
}

.appointment-reviews-unavailable {
  display: inline-flex;
  align-items: center;
  color: #746c78;
  background: #f2eff3;
}

.public-review-target,
.business-review-target-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  padding: 5px 8px;
  color: #5d4b92;
  background: #f0ebf8;
  font-size: 0.66rem;
  font-weight: 820;
  letter-spacing: 0.02em;
}

.discover-review-stars,
.site-review-rating,
.salon-profile-review-score,
.business-review-rating {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.discover-review-stars > b,
.site-review-rating > b,
.salon-profile-review-score > b {
  color: #5a4d66;
  font-size: 0.73rem;
}

.salon-profile-review-score {
  justify-self: end;
}

.salon-profile-review-score .customer-review-stars {
  font-size: 0.82rem;
}

.public-review-photo-strip {
  display: flex;
  gap: 7px;
  overflow-x: auto;
}

.public-review-photo-strip img {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 9px;
  object-fit: cover;
}

.business-review-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  border: 1px solid #e5e0e8;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}

.business-review-filters label {
  display: grid;
  gap: 6px;
}

.business-review-filters label > span {
  color: #746d79;
  font-size: 0.69rem;
  font-weight: 780;
}

.business-review-filters select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #ddd7e1;
  border-radius: 10px;
  padding: 0 34px 0 10px;
  color: #332e38;
  background-color: #fbfafc;
}

.business-review-results-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.business-review-results-heading span {
  color: #7a737f;
  font-size: 0.76rem;
}

.business-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.business-review-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 11px;
  min-width: 0;
  min-height: 270px;
  overflow: hidden;
  border: 1px solid #e2dde6;
  border-radius: 18px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(48, 39, 55, 0.045);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.business-review-card:hover {
  border-color: #b8add0;
  box-shadow: 0 16px 34px rgba(48, 39, 55, 0.09);
  transform: translateY(-2px);
}

.business-review-card > header,
.business-review-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.business-review-card time,
.business-review-card footer span {
  color: #7d7682;
  font-size: 0.7rem;
}

.business-review-card h3,
.business-review-card p {
  margin: 0;
}

.business-review-card h3 {
  font-size: 1.05rem;
}

.business-review-card > p {
  display: -webkit-box;
  overflow: hidden;
  color: #5d5662;
  font-size: 0.82rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.business-review-card > footer {
  align-self: end;
  margin-top: auto;
  border-top: 1px solid #eeeaf0;
  padding-top: 11px;
}

.business-review-card footer b {
  color: #65529c;
  font-size: 0.72rem;
}

.business-review-card-open {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.business-review-card-open:focus-visible {
  outline: 3px solid #6d5ba4;
  outline-offset: -4px;
}

.business-review-target-badge.stylist {
  color: #276d5a;
  background: #eaf6f2;
}

.business-review-rating strong {
  color: #4a414f;
  font-size: 0.8rem;
}

.business-review-rating .business-review-stars {
  font-size: 0.94rem;
}

.business-review-service-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.business-review-service-chips span {
  border-radius: 999px;
  padding: 5px 8px;
  color: #69616e;
  background: #f2eff4;
  font-size: 0.65rem;
  font-weight: 730;
}

.business-review-card-photos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.business-review-card-photos img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
}

.business-review-card-photos > span {
  position: absolute;
  right: 8px;
  bottom: 7px;
  border-radius: 999px;
  padding: 4px 7px;
  color: #fff;
  background: rgba(35, 29, 40, 0.76);
  font-size: 0.65rem;
  font-weight: 800;
}

.business-modal:has(.business-review-detail) {
  width: min(980px, 100%);
}

.business-review-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.75fr);
  gap: 20px;
}

.business-review-detail-review,
.business-review-booking-detail {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.business-review-detail-review > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.business-review-detail-review > header > div {
  display: grid;
  gap: 5px;
}

.business-review-detail-review h3,
.business-review-detail-review p,
.business-review-booking-detail p {
  margin: 0;
}

.business-review-detail-review > header p,
.business-review-detail-review > time {
  color: #7a737f;
  font-size: 0.75rem;
}

.business-review-detail-copy {
  color: #4e4753;
  line-height: 1.65;
  white-space: pre-wrap;
}

.business-review-detail-copy.muted {
  color: #89838d;
  font-style: italic;
}

.business-review-detail-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.business-review-detail-photos img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  object-fit: cover;
}

.business-review-detail-review blockquote {
  margin: 0;
  border-left: 3px solid #75bda8;
  padding: 13px;
  color: #315b50;
  background: #edf7f4;
}

.business-review-detail-review blockquote p {
  margin-top: 5px;
}

.business-review-response-form {
  display: grid;
  gap: 10px;
  border-top: 1px solid #e7e2e9;
  padding-top: 14px;
}

.business-review-response-form label {
  display: grid;
  gap: 6px;
  color: #655e69;
  font-size: 0.74rem;
  font-weight: 760;
}

.business-review-response-form textarea {
  width: 100%;
  border: 1px solid #dcd6df;
  border-radius: 11px;
  padding: 11px;
  color: #312c35;
  font: inherit;
  resize: vertical;
}

.business-review-response-form > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.business-review-booking-detail {
  border: 1px solid #e4dfe7;
  border-radius: 15px;
  padding: 16px;
  background: #faf8fb;
}

.business-review-booking-detail dl {
  display: grid;
  margin: 0;
}

.business-review-booking-detail dl > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  border-bottom: 1px solid #e8e3ea;
  padding: 9px 0;
}

.business-review-booking-detail dt {
  color: #817a85;
  font-size: 0.69rem;
}

.business-review-booking-detail dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #423c46;
  font-size: 0.74rem;
  font-weight: 730;
}

.business-review-booking-items {
  display: grid;
  gap: 8px;
}

.business-review-booking-items > div {
  display: grid;
  gap: 3px;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.business-review-booking-items span,
.business-review-booking-items time {
  color: #7a737f;
  font-size: 0.68rem;
}

@media (max-width: 760px) {
  .appointment-review-targets,
  .business-review-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .appointment-review-rating {
    grid-template-columns: minmax(0, 1fr);
  }

  .appointment-review-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .business-review-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-review-detail-review > header {
    flex-direction: column;
  }
}

@media (max-width: 440px) {
  .appointment-review-heading,
  .appointment-review-editor-heading,
  .business-review-results-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .business-review-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .business-review-response-form > div {
    align-items: stretch;
    flex-direction: column-reverse;
  }
}

/* Public stylist profile shared by salon detail and the booking flow. */
body.stylist-profile-modal-open {
  overflow: hidden;
}

.stylist-profile-modal-layer {
  position: fixed;
  z-index: 3900;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.stylist-profile-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(41, 36, 52, 0.28);
  backdrop-filter: blur(10px);
}

.stylist-profile-modal-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(980px, calc(100vw - 48px));
  height: min(920px, calc(100vh - 48px));
  height: min(920px, calc(100dvh - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  border: 1px solid #e6e0ec;
  border-radius: 24px;
  outline: 0;
  color: #2d2833;
  background: #fff;
  box-shadow: 0 28px 80px rgba(48, 39, 66, 0.2);
  animation: stylistProfileModalIn 220ms ease both;
}

@keyframes stylistProfileModalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.stylist-profile-modal-header {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #ebe6ef;
  padding: 12px 18px 12px 22px;
  background: #fff;
}

.stylist-profile-modal-header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stylist-profile-modal-header > div:first-child {
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.stylist-profile-modal-header span {
  overflow: hidden;
  max-width: min(54vw, 560px);
  color: #7d7485;
  font-size: 0.69rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stylist-profile-modal-header strong {
  font-size: 0.86rem;
}

.stylist-profile-modal-header .icon-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #e4deea;
  border-radius: 11px;
  color: #4e4756;
  background: #fff;
}

.stylist-profile-modal-header .icon-button:hover {
  border-color: #cfc3df;
  color: #67549a;
  background: #faf8fc;
}

.stylist-profile-modal-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.stylist-profile-modal-hero {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 30px);
  padding: clamp(24px, 4vw, 38px);
  padding-bottom: 24px;
  background: #fbf9fd;
}

.stylist-profile-modal-hero > img {
  width: 132px;
  height: 132px;
  border: 5px solid #fff;
  border-radius: 28px;
  object-fit: cover;
  object-position: center 22%;
  background: #eeeaf4;
  box-shadow: 0 12px 30px rgba(59, 46, 78, 0.14);
}

.stylist-profile-modal-identity {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.stylist-profile-modal-identity :is(p, h2, span) {
  margin: 0;
}

.stylist-profile-modal-identity > p {
  color: #67549a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.stylist-profile-modal-identity h2 {
  font-size: clamp(1.7rem, 3.8vw, 2.65rem);
  letter-spacing: -0.045em;
  line-height: 1;
}

.stylist-profile-modal-identity > span {
  display: -webkit-box;
  max-width: 580px;
  overflow: hidden;
  color: #726a79;
  font-size: 0.82rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.stylist-profile-modal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 3px;
}

.stylist-profile-modal-chips span {
  border-radius: 999px;
  padding: 5px 9px;
  color: #5d4a9d;
  background: #f1ebfa;
  font-size: 0.65rem;
  font-weight: 760;
}

.stylist-profile-modal-cta {
  min-width: 142px;
  justify-content: center;
}

.stylist-profile-modal-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #ece7f0;
  border-bottom: 1px solid #ece7f0;
  background: #fff;
}

.stylist-profile-modal-stats > div {
  display: grid;
  gap: 3px;
  padding: 16px clamp(14px, 2.5vw, 24px);
}

.stylist-profile-modal-stats > div + div {
  border-left: 1px solid #ece7f0;
}

.stylist-profile-modal-stats strong {
  font-size: 1rem;
}

.stylist-profile-modal-stats span {
  color: #827a89;
  font-size: 0.66rem;
}

.stylist-profile-modal-sections {
  background: #fff;
}

.stylist-profile-modal-section {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 4vw, 38px);
  scroll-margin-top: 18px;
}

.stylist-profile-modal-section + .stylist-profile-modal-section {
  border-top: 1px solid #e8e2ec;
}

.stylist-profile-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.stylist-profile-section-heading > div {
  display: grid;
  gap: 5px;
}

.stylist-profile-section-heading :is(p, h3) {
  margin: 0;
}

.stylist-profile-section-heading h3 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  letter-spacing: -0.025em;
}

.stylist-profile-section-heading > span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  color: #716879;
  background: #f5f2f7;
  font-size: 0.67rem;
  font-weight: 760;
}

.stylist-profile-about {
  display: grid;
  gap: 8px;
}

.stylist-profile-about :is(p, h3) {
  margin: 0;
}

.stylist-profile-about h3 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.stylist-profile-about > p:last-child {
  max-width: 720px;
  color: #6f6875;
  font-size: 0.86rem;
  line-height: 1.65;
}

.stylist-profile-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0;
}

.stylist-profile-facts article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #e7e1ec;
  border-radius: 15px;
  padding: 15px;
  background: #fcfbfd;
}

.stylist-profile-facts article > .icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  padding: 9px;
  color: #67549a;
  background: #f0eafa;
}

.stylist-profile-facts article > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.stylist-profile-facts span {
  color: #8a818f;
  font-size: 0.65rem;
}

.stylist-profile-facts strong {
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  line-height: 1.4;
}

.stylist-profile-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stylist-profile-portfolio-grid figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e5e0e9;
  border-radius: 15px;
  background: #fff;
}

.stylist-profile-portfolio-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.stylist-profile-portfolio-grid figcaption {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
}

.stylist-profile-portfolio-grid figcaption strong {
  font-size: 0.75rem;
}

.stylist-profile-portfolio-grid figcaption span {
  color: #817986;
  font-size: 0.67rem;
  line-height: 1.4;
}

.stylist-profile-review-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stylist-profile-review-card {
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid #e5e0e9;
  border-radius: 15px;
  padding: 16px;
  background: #fff;
}

.stylist-profile-review-card > header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.stylist-profile-review-card > header > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #5d4a9d;
  background: #f0eafa;
  font-size: 0.74rem;
  font-weight: 820;
}

.stylist-profile-review-card > header > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.stylist-profile-review-card > header > div:last-child {
  grid-template-columns: auto auto;
  align-items: center;
  color: #6c599f;
}

.stylist-profile-review-card > header svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  stroke: currentColor;
}

.stylist-profile-review-card > header b {
  font-size: 0.7rem;
}

.stylist-profile-review-card strong {
  overflow: hidden;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stylist-profile-review-card small {
  color: #8a828f;
  font-size: 0.62rem;
}

.stylist-profile-review-card > p {
  margin: 0;
  color: #6f6875;
  font-size: 0.77rem;
  line-height: 1.55;
}

.stylist-profile-review-no-copy {
  font-style: italic;
}

.stylist-profile-review-photos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.stylist-profile-review-photos img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 7px;
  object-fit: cover;
}

.stylist-profile-modal-loading,
.stylist-profile-modal-error,
.stylist-profile-modal-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin: clamp(22px, 4vw, 34px);
  border: 1px solid #e7e1ec;
  border-radius: 15px;
  padding: 26px;
  color: #756d7b;
  background: #fbfafd;
  text-align: center;
}

.stylist-profile-modal-loading + .stylist-profile-modal-sections,
.stylist-profile-modal-error + .stylist-profile-modal-sections {
  padding-top: 4px;
}

.stylist-profile-modal-loading > span {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(103, 84, 154, 0.18);
  border-top-color: #67549a;
  border-radius: 50%;
  animation: spin 760ms linear infinite;
}

.stylist-profile-modal-loading :is(strong, p),
.stylist-profile-modal-error :is(strong, p),
.stylist-profile-modal-empty :is(strong, span) {
  margin: 0;
}

.stylist-profile-modal-loading p,
.stylist-profile-modal-error p,
.stylist-profile-modal-empty span {
  font-size: 0.76rem;
  line-height: 1.45;
}

.stylist-profile-modal-empty {
  margin: 0;
  min-height: 210px;
}

.stylist-profile-modal-empty .icon {
  width: 30px;
  height: 30px;
  color: #67549a;
}

@media (max-width: 760px) {
  .stylist-profile-modal-layer {
    padding: 0;
  }

  .stylist-profile-modal-card {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .stylist-profile-modal-header {
    position: absolute;
    right: 0;
    left: 0;
    min-height: 64px;
    border: 0;
    padding: 12px 16px;
    background: transparent;
  }

  .stylist-profile-modal-header > div:first-child {
    display: none;
  }

  .stylist-profile-modal-header > div:last-child {
    width: 100%;
    justify-content: space-between;
  }

  .stylist-profile-modal-header .icon-button {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 5px 18px rgba(48, 39, 66, 0.08);
  }

  .stylist-profile-modal-hero {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 14px;
    padding: 72px 22px 28px;
    text-align: center;
  }

  .stylist-profile-modal-hero > img {
    width: 180px;
    height: 180px;
    border-width: 4px;
    border-radius: 50%;
  }

  .stylist-profile-modal-identity {
    justify-items: center;
  }

  .stylist-profile-modal-identity h2 {
    font-size: 2rem;
  }

  .stylist-profile-modal-identity > span {
    max-width: 480px;
    -webkit-line-clamp: 2;
  }

  .stylist-profile-modal-chips {
    display: none;
  }

  .stylist-profile-modal-cta {
    width: min(100%, 360px);
  }

  .stylist-profile-modal-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stylist-profile-modal-stats > div:nth-child(odd) {
    border-left: 0;
  }

  .stylist-profile-modal-stats > div:nth-child(n + 3) {
    border-top: 1px solid #ece7f0;
  }

  .stylist-profile-facts,
  .stylist-profile-review-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .stylist-profile-portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 440px) {
  .stylist-profile-portfolio-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stylist-profile-modal-section {
    padding: 22px 18px 28px;
  }

  .stylist-profile-section-heading {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stylist-profile-modal-card,
  .stylist-profile-modal-loading > span,
  .stylist-portfolio-status > i {
    animation: none !important;
  }

  .stylist-profile-modal-card,
  .stylist-profile-modal-card *,
  .stylist-dashboard-portfolio-add {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* AI try-on launch gate */
.tryon-coming-soon {
  display: grid;
  height: 100%;
  min-height: 0;
  gap: 16px;
  padding: clamp(6px, 1.2vw, 14px) 0 18px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.tryon-coming-soon-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  min-height: min(530px, calc(100dvh - 260px));
  overflow: hidden;
  border: 1px solid rgba(104, 82, 170, 0.17);
  border-radius: clamp(22px, 3vw, 34px);
  background:
    radial-gradient(circle at 8% 8%, rgba(111, 204, 178, 0.2), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(133, 108, 213, 0.2), transparent 36%),
    linear-gradient(135deg, #fcfffe 0%, #f7f4ff 52%, #f2edf9 100%);
  box-shadow: 0 28px 70px rgba(51, 38, 79, 0.1);
}

.tryon-coming-soon-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 15px;
  padding: clamp(34px, 5vw, 72px);
}

.tryon-coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(104, 80, 184, 0.2);
  border-radius: 999px;
  padding: 8px 12px;
  color: #59439b;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 22px rgba(75, 56, 119, 0.08);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  backdrop-filter: blur(12px);
}

.tryon-coming-soon-badge .icon {
  width: 17px;
  height: 17px;
}

.tryon-coming-soon-copy > .eyebrow {
  margin: 5px 0 -9px;
}

.tryon-coming-soon-copy h1 {
  max-width: 12ch;
  margin: 0;
  color: #292431;
  font-family: var(--display-font, Georgia, serif);
  font-size: clamp(2.7rem, 5.7vw, 5.5rem);
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 0.94;
}

.tryon-coming-soon-copy > p:last-of-type {
  max-width: 57ch;
  margin: 0;
  color: #696270;
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  line-height: 1.65;
}

.tryon-coming-soon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 5px;
}

.tryon-coming-soon-actions button {
  min-height: 46px;
}

.tryon-coming-soon-promises {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  color: #5f5866;
  list-style: none;
}

.tryon-coming-soon-promises li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  font-weight: 720;
}

.tryon-coming-soon-promises .icon {
  width: 16px;
  height: 16px;
  color: #4c927f;
}

.tryon-coming-soon-visual {
  position: relative;
  display: grid;
  min-height: 460px;
  place-items: center;
  padding: 34px clamp(28px, 4vw, 62px);
}

.tryon-coming-soon-visual::before {
  position: absolute;
  width: min(85%, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(102, 201, 174, 0.3), rgba(119, 91, 202, 0.24));
  filter: blur(2px);
  content: "";
}

.tryon-coming-soon-orbit {
  position: absolute;
  inset: 10% 8%;
  border: 1px solid rgba(112, 88, 181, 0.16);
  border-radius: 50%;
  transform: rotate(-12deg);
}

.tryon-coming-soon-orbit span {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 3px solid #f9f7ff;
  border-radius: 50%;
  background: #7055bd;
  box-shadow: 0 6px 14px rgba(69, 49, 120, 0.24);
}

.tryon-coming-soon-orbit span:nth-child(1) {
  top: 13%;
  right: 10%;
}

.tryon-coming-soon-orbit span:nth-child(2) {
  bottom: 17%;
  left: 4%;
  background: #51a991;
}

.tryon-coming-soon-orbit span:nth-child(3) {
  right: 3%;
  bottom: 28%;
  width: 9px;
  height: 9px;
}

.tryon-coming-soon-visual figure {
  position: relative;
  z-index: 2;
  width: min(84%, 360px);
  overflow: hidden;
  margin: 0;
  border: 8px solid rgba(255, 255, 255, 0.88);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 58px rgba(47, 35, 75, 0.24);
  animation: tryon-coming-soon-float 6s ease-in-out infinite;
}

.tryon-coming-soon-visual figure img {
  display: block;
  width: 100%;
  height: clamp(290px, 46vh, 430px);
  object-fit: cover;
  object-position: center 28%;
}

.tryon-coming-soon-visual figcaption {
  display: grid;
  gap: 3px;
  padding: 13px 15px 15px;
  color: #3d3745;
  background: rgba(255, 255, 255, 0.96);
}

.tryon-coming-soon-visual figcaption span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #684fb0;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tryon-coming-soon-visual figcaption span .icon {
  width: 13px;
  height: 13px;
}

.tryon-coming-soon-visual figcaption strong {
  font-size: 0.84rem;
}

.tryon-coming-soon-visual > aside {
  position: absolute;
  right: clamp(12px, 2vw, 34px);
  bottom: clamp(22px, 5vw, 58px);
  z-index: 3;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  width: min(270px, 70%);
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(87, 68, 136, 0.15);
  border-radius: 15px;
  padding: 11px;
  color: #494052;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 38px rgba(44, 32, 70, 0.16);
  backdrop-filter: blur(14px);
}

.tryon-coming-soon-visual > aside > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  color: #4e8e7d;
  background: #e7f6f1;
}

.tryon-coming-soon-visual > aside .icon {
  width: 17px;
  height: 17px;
}

.tryon-coming-soon-visual > aside div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.tryon-coming-soon-visual > aside small {
  color: #776e7f;
  font-size: 0.62rem;
  font-weight: 750;
}

.tryon-coming-soon-visual > aside strong {
  font-size: 0.72rem;
  line-height: 1.35;
}

.tryon-coming-soon-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tryon-coming-soon-details article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  border: 1px solid #e5dfea;
  border-radius: 16px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.88);
}

.tryon-coming-soon-details article > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #654eaa;
  background: #eee9fb;
}

.tryon-coming-soon-details article > span .icon {
  width: 18px;
  height: 18px;
}

.tryon-coming-soon-details article div {
  display: grid;
  gap: 4px;
}

.tryon-coming-soon-details :is(strong, p) {
  margin: 0;
}

.tryon-coming-soon-details strong {
  color: #3f3946;
  font-size: 0.76rem;
}

.tryon-coming-soon-details p {
  color: #7a7380;
  font-size: 0.67rem;
  line-height: 1.45;
}

@keyframes tryon-coming-soon-float {
  0%,
  100% {
    transform: translateY(0) rotate(1.2deg);
  }
  50% {
    transform: translateY(-7px) rotate(0deg);
  }
}

@media (max-width: 980px) {
  .tryon-coming-soon-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .tryon-coming-soon-copy {
    padding-bottom: 20px;
  }

  .tryon-coming-soon-copy h1 {
    max-width: 14ch;
  }

  .tryon-coming-soon-visual {
    min-height: 420px;
    padding-top: 12px;
  }
}

@media (max-width: 720px) {
  body.tryon-workspace-mode .customer-shell:has(.tryon-coming-soon) {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.tryon-workspace-mode .page-wrap {
    height: auto;
    overflow: visible;
  }

  .tryon-coming-soon {
    height: auto;
    overflow: visible;
  }

  .tryon-coming-soon-copy {
    gap: 13px;
    padding: 28px 22px 12px;
  }

  .tryon-coming-soon-copy h1 {
    font-size: clamp(2.5rem, 13vw, 4rem);
  }

  .tryon-coming-soon-actions,
  .tryon-coming-soon-actions button {
    width: 100%;
  }

  .tryon-coming-soon-actions button {
    justify-content: center;
  }

  .tryon-coming-soon-visual {
    min-height: 390px;
    padding: 18px 18px 40px;
  }

  .tryon-coming-soon-visual figure {
    width: min(82%, 330px);
  }

  .tryon-coming-soon-visual figure img {
    height: 310px;
  }

  .tryon-coming-soon-details {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 430px) {
  .tryon-coming-soon-badge {
    font-size: 0.68rem;
  }

  .tryon-coming-soon-promises li {
    align-items: start;
  }

  .tryon-coming-soon-visual {
    min-height: 350px;
  }

  .tryon-coming-soon-visual figure img {
    height: 270px;
  }

  .tryon-coming-soon-visual > aside {
    right: 12px;
    bottom: 20px;
    width: min(250px, 78%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tryon-coming-soon-visual figure {
    animation: none;
  }
}

/* Unified customer and professional access ---------------------------------
   Keep the two account surfaces structurally identical. Audience color and
   labels—not layout changes—tell customers and professionals apart. */
.auth-screen,
.pro-auth-screen {
  --auth-ink: #26212c;
  --auth-muted: #6f6874;
  --auth-line: #ddd8e2;
  display: grid;
  grid-template-columns: minmax(320px, 2fr) minmax(0, 3fr);
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--auth-ink);
  background: #fbf9ff;
}

.auth-screen {
  --auth-accent: #67549a;
  --auth-accent-dark: #51416f;
  --auth-accent-soft: #f3e8ff;
}

.pro-auth-screen {
  --auth-accent: #4f927d;
  --auth-accent-dark: #347563;
  --auth-accent-soft: #e8f7f1;
  --auth-ink: #21322e;
  --auth-muted: #667c77;
  --auth-line: #d4e7df;
  background: #f6fcf9;
}

.shared-auth-visual {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  padding: clamp(24px, 3.2vw, 46px);
  background: #3a343d;
  isolation: isolate;
}

.shared-auth-visual-image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 44%;
}

.auth-screen .shared-auth-visual::after,
.pro-auth-screen .shared-auth-visual::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
}

.auth-screen .shared-auth-visual::after {
  background: linear-gradient(
    180deg,
    rgba(65, 48, 82, 0.26) 0%,
    rgba(65, 48, 82, 0.1) 42%,
    rgba(65, 48, 82, 0.28) 100%
  );
}

.pro-auth-screen .shared-auth-visual::after {
  background: linear-gradient(
    180deg,
    rgba(22, 72, 62, 0.3) 0%,
    rgba(22, 72, 62, 0.1) 42%,
    rgba(22, 72, 62, 0.3) 100%
  );
}

.shared-auth-visual .auth-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(20, 15, 25, 0.28);
}

.shared-auth-visual .auth-brand small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.76rem;
}

.shared-auth-visual .auth-brand strong {
  color: #fff;
  font-size: 1rem;
  line-height: 1.1;
}

.auth-screen .shared-auth-visual .brand-wordmark {
  filter: brightness(0) invert(1) drop-shadow(0 6px 18px rgba(30, 21, 39, 0.18));
}

.auth-workspace,
.pro-auth-workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: stretch;
  gap: 16px;
  overflow-y: auto;
  padding: clamp(20px, 3.5vw, 48px);
  background: #fbf9ff;
}

.pro-auth-workspace {
  background: #f6fcf9;
}

.auth-workspace-top,
.pro-auth-workspace > .auth-workspace-top {
  width: min(100%, 640px);
  margin-inline: auto;
}

.auth-workspace-top :is(.ghost-button, .outline-button) {
  min-height: 44px;
  border-color: var(--auth-line);
  border-radius: 11px;
  color: var(--auth-ink);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

.pro-auth-workspace .outline-button.pro {
  color: var(--auth-accent-dark);
  border-color: rgba(79, 146, 125, 0.28);
  background: rgba(255, 255, 255, 0.74);
}

.auth-screen .auth-panel[data-auth-surface="page"],
.pro-auth-screen .pro-auth-panel {
  width: min(100%, 560px);
  max-width: 560px;
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - 116px);
  align-self: center;
  justify-self: center;
  align-content: start;
  gap: 18px;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  padding: clamp(24px, 4vw, 42px) 0;
  color: var(--auth-ink);
  background: transparent;
  box-shadow: none;
}

.pro-auth-panel > * {
  min-width: 0;
}

.auth-screen .auth-panel-heading,
.pro-auth-panel .auth-panel-heading {
  display: grid;
  min-height: 0;
  gap: 6px;
}

.auth-screen .auth-panel-heading .eyebrow,
.pro-auth-panel .auth-panel-heading .eyebrow {
  min-height: 0;
  margin: 0 0 2px;
  color: var(--auth-accent-dark);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.auth-screen .auth-panel-heading h1,
.pro-auth-panel .auth-panel-heading h1 {
  min-height: 0;
  margin: 0;
  color: var(--auth-ink);
  font-size: clamp(2rem, 3.2vw, 2.55rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.auth-screen .auth-panel-heading > p:last-child,
.pro-auth-panel .auth-panel-heading > p:last-child {
  min-height: 0;
  max-width: 44ch;
  margin: 0;
  color: var(--auth-muted);
  font-size: 0.94rem;
  line-height: 1.45;
}

.auth-screen .auth-tabs,
.pro-auth-screen .auth-tabs {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  border: 1px solid var(--auth-line);
  border-radius: 12px;
  padding: 3px;
  background: color-mix(in srgb, var(--auth-accent-soft) 54%, #f5f4f5);
}

.auth-screen .auth-tabs::before,
.pro-auth-screen .auth-tabs::before {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 4.5px);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(35, 30, 40, 0.12);
  content: "";
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.auth-screen .auth-tabs[data-auth-mode="login"]::before,
.pro-auth-screen .auth-tabs[data-auth-mode="login"]::before {
  transform: translateX(calc(100% + 3px));
}

.auth-screen .auth-tabs button,
.pro-auth-screen .auth-tabs button {
  position: relative;
  z-index: 1;
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  color: var(--auth-muted);
  background: transparent;
  font-size: 0.88rem;
  font-weight: 760;
  box-shadow: none;
}

.auth-screen .auth-tabs button.active,
.pro-auth-screen .auth-tabs button.active {
  color: var(--auth-accent-dark);
  background: transparent;
  box-shadow: none;
  animation: none;
}

.pro-auth-stage,
.pro-auth-form {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.pro-account-type-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.pro-account-type-picker > button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: 84px;
  align-items: center;
  gap: 3px 12px;
  border: 1px solid var(--auth-line);
  border-radius: 13px;
  padding: 13px 15px;
  color: var(--auth-ink);
  background: #fff;
  text-align: left;
  box-shadow: none;
}

.pro-account-type-picker > button > span {
  grid-row: 1 / span 2;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: var(--auth-accent-dark);
  background: var(--auth-accent-soft);
}

.pro-account-type-picker strong {
  align-self: end;
  color: var(--auth-ink);
  font-size: 0.94rem;
}

.pro-account-type-picker small {
  grid-column: 2;
  margin: 0;
  color: var(--auth-muted);
  font-size: 0.79rem;
  line-height: 1.35;
}

.pro-account-type-picker > button:is(:hover, :focus-visible) {
  border-color: var(--auth-accent);
  background: color-mix(in srgb, var(--auth-accent-soft) 38%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 16%, transparent);
}

.pro-selected-role {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--auth-line);
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--auth-accent-soft) 58%, #fff);
}

.pro-selected-role > span:first-child {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: var(--auth-accent-dark);
  background: #fff;
}

.pro-selected-role > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.pro-selected-role small {
  color: var(--auth-muted);
  font-size: 0.69rem;
}

.pro-selected-role strong {
  color: var(--auth-ink);
  font-size: 0.88rem;
}

.pro-selected-role button {
  border: 0;
  padding: 7px 8px;
  color: var(--auth-accent-dark);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 800;
}

.auth-screen .auth-form label,
.pro-auth-screen .auth-form label {
  gap: 7px;
  color: var(--auth-ink);
  font-size: 0.82rem;
  font-weight: 740;
}

.auth-screen .auth-form :is(input, select),
.pro-auth-screen .auth-form :is(input, select) {
  min-height: 52px;
  border: 1px solid #cfc9d3;
  border-radius: 12px;
  padding-inline: 14px;
  color: var(--auth-ink) !important;
  background: #fff;
  box-shadow: none;
}

.pro-auth-screen .auth-form select {
  padding-inline-end: 36px;
}

.auth-screen .auth-form :is(input, select):focus,
.pro-auth-screen .auth-form :is(input, select):focus {
  outline: 0;
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 14%, transparent);
}

.auth-screen .solid-button.customer,
.pro-auth-screen .solid-button.pro {
  min-height: 52px;
  border-radius: 12px;
  color: #fff;
  background: var(--auth-accent);
  box-shadow: none;
}

.auth-screen .solid-button.customer:hover,
.pro-auth-screen .solid-button.pro:hover {
  background: var(--auth-accent-dark);
  box-shadow: none;
}

:is(.auth-panel[data-auth-surface], .pro-auth-panel) .auth-provider-mark {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  justify-self: center;
}

:is(.auth-panel[data-auth-surface], .pro-auth-panel)
  .oauth-method-button:not(:disabled)
  > span {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.pro-auth-panel .auth-divider {
  min-height: 18px;
  color: var(--auth-muted);
  font-size: 0.73rem;
  font-weight: 690;
}

.pro-auth-panel .auth-divider span {
  background: #fff;
}

.pro-auth-panel .signup-methods {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.pro-auth-panel .method-button {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  min-height: 54px;
  gap: 11px;
  border-color: var(--auth-line);
  border-radius: 11px;
  padding: 9px 13px;
  background: #fff;
}

.pro-auth-panel .method-button span {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.pro-auth-panel .method-button b {
  font-size: 0.86rem;
  font-weight: 720;
}

.pro-auth-panel .method-button small {
  color: var(--auth-muted);
  font-size: 0.7rem;
}

.pro-auth-panel .method-button:not(:disabled):hover {
  border-color: var(--auth-accent);
  background: color-mix(in srgb, var(--auth-accent-soft) 32%, #fff);
  box-shadow: none;
}

:is(.auth-panel[data-auth-surface], .pro-auth-panel)
  .method-button[data-action="oauth-login"]:focus-visible {
  outline: 0;
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 14%, transparent);
}

.pro-auth-panel .method-button:disabled {
  color: #827d86;
  background: #faf9fa;
  opacity: 0.62;
  filter: none;
}

.pro-auth-panel .auth-inline-error {
  margin: 0;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fdf0f1;
  font-size: 0.82rem;
}

/* Auth access motion, phone-first entry, and email recovery */
:is(.auth-panel[data-auth-surface], .pro-auth-panel) {
  will-change: height;
}

:is(.auth-mode-stage, .pro-auth-stage) {
  transform-origin: top center;
  animation: authAccessStageIn 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes authAccessStageIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-phone-entry {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 9px;
}

.auth-country-code {
  display: grid;
  min-height: 52px;
  place-items: center;
  border: 1px solid #cfc9d3;
  border-radius: 12px;
  color: var(--auth-ink);
  background: #fff;
  font-size: 0.95rem;
  font-weight: 720;
}

.auth-form label > small {
  color: var(--auth-muted);
  font-size: 0.72rem;
  font-weight: 560;
  line-height: 1.4;
}

:is(.auth-panel[data-auth-surface], .pro-auth-panel) .auth-method-switch {
  grid-template-columns: 22px minmax(0, 1fr) auto;
}

:is(.auth-panel[data-auth-surface], .pro-auth-panel)
  .auth-method-switch
  > span {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.auth-forgot-link,
.auth-recovery-back {
  width: fit-content;
  border: 0;
  padding: 2px 0;
  color: var(--auth-accent-dark);
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 760;
  text-decoration: none;
}

.auth-forgot-link {
  justify-self: end;
  margin-top: -4px;
}

:is(.auth-forgot-link, .auth-recovery-back):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:is(.auth-forgot-link, .auth-recovery-back):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--auth-accent) 20%, transparent);
  outline-offset: 3px;
  border-radius: 4px;
}

.auth-inline-status {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--auth-accent) 20%, #fff);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--auth-accent-dark);
  background: color-mix(in srgb, var(--auth-accent-soft) 62%, #fff);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.45;
}

.password-recovery-stage {
  gap: 14px;
}

.password-recovery-form {
  gap: 13px;
}

.password-phone-recovery {
  width: 100%;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  min-height: 52px;
  opacity: 0.62;
}

.password-phone-recovery > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.password-phone-recovery small {
  color: var(--auth-muted);
  font-size: 0.7rem;
}

.auth-recovery-result {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.auth-recovery-result :is(h2, p) {
  margin: 0;
}

.auth-recovery-result h2 {
  color: var(--auth-ink);
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.auth-recovery-result p {
  color: var(--auth-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* Phone verification -------------------------------------------------------
   One semantic OTP input sits over six visual cells so paste, password
   managers, and mobile one-time-code autofill keep working reliably. */
.auth-screen .phone-confirmation,
.pro-auth-screen .phone-confirmation,
.booking-auth-dialog .phone-confirmation {
  position: relative;
  display: grid;
  width: min(100%, 560px);
  max-width: 560px;
  justify-items: center;
  align-content: center;
  gap: 24px;
  overflow: visible;
  padding: clamp(34px, 5vw, 64px) clamp(20px, 4vw, 44px);
  background: #fff;
  text-align: center;
}

.phone-confirmation-back {
  position: absolute;
  top: 12px;
  left: 0;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--auth-ink);
  background: transparent;
}

.phone-confirmation-back .icon {
  width: 24px;
  height: 24px;
  transform: rotate(180deg);
}

.phone-confirmation-back:is(:hover, :focus-visible) {
  color: var(--auth-accent-dark);
  background: var(--auth-accent-soft);
  outline: 0;
}

.phone-confirmation-heading {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.phone-confirmation-heading :is(h1, p) {
  margin: 0;
}

.phone-confirmation-heading h1 {
  color: var(--auth-ink);
  font-size: clamp(2rem, 3.4vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.phone-confirmation-heading p {
  color: var(--auth-muted);
  font-size: 0.98rem;
  line-height: 1.45;
}

.phone-confirmation-heading strong {
  color: var(--auth-ink);
  font-weight: 720;
}

.phone-confirmation-form {
  display: grid;
  width: min(100%, 390px);
  gap: 20px;
}

.phone-code-input-shell {
  position: relative;
  display: block;
  width: 100%;
  cursor: text;
}

.phone-code-input-shell > input {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  min-height: 58px;
  border: 0;
  padding: 0;
  color: transparent !important;
  background: transparent;
  caret-color: transparent;
  opacity: 0.01;
}

.phone-code-input-shell > input:focus {
  outline: 0;
  box-shadow: none;
}

.phone-code-cells {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.phone-code-cell {
  display: grid;
  min-width: 0;
  height: 58px;
  place-items: center;
  border: 1px solid #d5d0d8;
  border-radius: 12px;
  color: var(--auth-ink);
  background: #fff;
  font-size: 1.2rem;
  font-weight: 760;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.phone-code-cell.filled {
  border-color: color-mix(in srgb, var(--auth-accent) 54%, #d5d0d8);
  background: color-mix(in srgb, var(--auth-accent-soft) 40%, #fff);
}

.phone-code-cell.active,
.phone-code-input-shell:focus-within .phone-code-cell.active {
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 15%, transparent);
}

.phone-confirmation-continue {
  width: 100%;
  min-height: 56px;
  border-radius: 999px !important;
}

.phone-confirmation-continue:disabled {
  color: #fff;
  background: #aaa8ab !important;
  opacity: 1;
}

.phone-confirmation-status {
  min-height: 20px;
  margin: -7px 0 0;
  color: var(--auth-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.phone-confirmation-status.expired {
  color: #a24651;
  font-weight: 680;
}

.phone-confirmation-help {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  width: 100%;
  color: var(--auth-ink);
  font-size: 0.88rem;
  line-height: 1.35;
  white-space: nowrap;
}

.phone-confirmation-help button,
.phone-confirmation-options button {
  border: 0;
  padding: 0;
  color: var(--auth-accent-dark);
  background: transparent;
  font: inherit;
  font-weight: 760;
  line-height: inherit;
}

.phone-confirmation-help button:is(:hover, :focus-visible),
.phone-confirmation-options button:is(:hover, :focus-visible) {
  outline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.phone-confirmation-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  width: min(100%, 390px);
  border-top: 1px solid var(--auth-line);
  padding-top: 15px;
  font-size: 0.8rem;
}

.phone-confirmation-options[hidden] {
  display: none;
}

.phone-confirmation-options button:disabled {
  color: var(--auth-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

.auth-verified-phone {
  grid-column: 1 / -1;
}

.verified-phone-setting {
  display: grid;
  min-width: 0;
  align-items: end;
  gap: 8px;
}

.verified-phone-setting > label {
  min-width: 0;
}

.verified-phone-setting > button {
  width: fit-content;
  min-height: 38px;
}

/* Keep every alternate sign-in row on one shared visual grid. Equal side
   tracks leave the action label optically centered even when Apple carries a
   trailing availability note. */
:is(.auth-panel[data-auth-surface], .pro-auth-panel)
  .signup-methods
  .method-button {
  grid-template-columns: minmax(54px, 1fr) auto minmax(54px, 1fr);
  min-height: 56px;
  gap: 10px;
  border: 1px solid var(--auth-line);
  border-radius: 12px;
  padding: 10px 16px;
}

:is(.auth-panel[data-auth-surface], .pro-auth-panel)
  .method-button
  > :is(.icon, .auth-provider-mark) {
  grid-column: 1;
  width: 20px;
  height: 20px;
  justify-self: start;
}

:is(.auth-panel[data-auth-surface], .pro-auth-panel) .auth-method-label {
  grid-column: 2;
  justify-self: center;
  color: currentColor;
  font-size: 0.88rem;
  font-weight: 740;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

:is(.auth-panel[data-auth-surface], .pro-auth-panel) .auth-method-note {
  grid-column: 3;
  justify-self: end;
  color: var(--auth-muted);
  font-size: 0.68rem;
  font-weight: 620;
  line-height: 1.2;
  white-space: nowrap;
}

:is(.auth-panel[data-auth-surface], .pro-auth-panel)
  .method-button:disabled {
  color: color-mix(in srgb, var(--auth-ink) 46%, #fff);
  background: color-mix(in srgb, var(--auth-accent-soft) 14%, #fff);
  opacity: 1;
}

:is(.auth-panel[data-auth-surface], .pro-auth-panel)
  .method-button:disabled
  .auth-provider-mark {
  opacity: 0.56;
}

:is(.auth-panel[data-auth-surface], .pro-auth-panel)
  .signup-methods
  .method-button:not(:disabled):focus-visible {
  outline: 0;
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 14%, transparent);
}

:is(.auth-panel[data-auth-surface], .pro-auth-panel) .auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
}

:is(.auth-panel[data-auth-surface], .pro-auth-panel) .auth-divider::before,
:is(.auth-panel[data-auth-surface], .pro-auth-panel) .auth-divider::after {
  position: static;
  inset: auto;
  flex: 1 1 0;
  height: 1px;
  background: var(--auth-line);
  content: "";
}

:is(.auth-panel[data-auth-surface], .pro-auth-panel) .auth-divider span {
  flex: 0 0 auto;
  padding-inline: 0;
  background: transparent;
}

/* Keep the optional marketing choice compact and aligned with its first line.
   A neutral focus ring replaces the oversized purple input focus treatment. */
.auth-panel[data-auth-surface] .auth-form .auth-marketing-choice {
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.auth-panel[data-auth-surface] .auth-form .auth-marketing-choice > input {
  appearance: none;
  display: grid;
  width: 20px;
  height: 20px;
  min-height: 20px;
  place-content: center;
  align-self: start;
  margin: 1px 0 0;
  border: 1.5px solid #8f8993;
  border-radius: 5px;
  padding: 0;
  background: #fff;
  box-shadow: none;
}

.auth-panel[data-auth-surface] .auth-form .auth-marketing-choice > input::before {
  width: 10px;
  height: 7px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  content: "";
  transform: rotate(-45deg) scale(0);
  transition: transform 120ms ease;
}

.auth-panel[data-auth-surface]
  .auth-form
  .auth-marketing-choice
  > input:checked {
  border-color: #2d2931;
  background: #2d2931;
}

.auth-panel[data-auth-surface]
  .auth-form
  .auth-marketing-choice
  > input:checked::before {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

.auth-panel[data-auth-surface]
  .auth-form
  .auth-marketing-choice
  > input:focus {
  outline: 0;
  border-color: #2d2931;
  background: #fff;
  box-shadow: none;
}

.auth-panel[data-auth-surface]
  .auth-form
  .auth-marketing-choice
  > input:focus-visible {
  outline: 2px solid #2d2931;
  outline-offset: 3px;
}

.auth-panel[data-auth-surface]
  .auth-form
  .auth-marketing-choice
  > input:checked:focus {
  background: #2d2931;
}

.auth-panel[data-auth-surface] .auth-form .auth-marketing-choice > span {
  align-self: start;
  line-height: 1.45;
}

.auth-submit-button[disabled] {
  cursor: wait;
}

.auth-submit-button > span {
  display: inline-flex;
  align-items: center;
}

.auth-button-spinner {
  width: 17px;
  height: 17px;
  margin-inline-end: 9px;
  border: 2px solid rgba(255, 255, 255, 0.44);
  border-top-color: #fff;
  border-radius: 50%;
  animation: authButtonSpin 720ms linear infinite;
}

@keyframes authButtonSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1100px) {
  .auth-workspace,
  .pro-auth-workspace {
    padding: 22px clamp(24px, 4vw, 38px);
  }

  .auth-screen .auth-panel[data-auth-surface="page"],
  .pro-auth-screen .pro-auth-panel {
    width: min(100%, 520px);
    max-width: 520px;
  }
}

@media (max-width: 820px) {
  .auth-screen,
  .pro-auth-screen {
    display: block;
    min-height: 100dvh;
  }

  .shared-auth-visual {
    display: none;
  }

  .auth-workspace,
  .pro-auth-workspace {
    min-height: 100dvh;
    gap: 10px;
    overflow: visible;
    padding: 14px clamp(16px, 5vw, 30px) 28px;
  }

  .auth-screen .auth-panel[data-auth-surface="page"],
  .pro-auth-screen .pro-auth-panel {
    width: min(100%, 560px);
    max-width: 560px;
    max-height: none;
    margin-block: 8px auto;
    overflow: visible;
    padding-block: 24px;
  }
}

@media (max-width: 560px) {
  .auth-workspace-top {
    gap: 8px;
  }

  .auth-workspace-top :is(.ghost-button, .outline-button) {
    min-width: 0;
    padding-inline: 10px;
    font-size: 0.78rem;
  }

  .pro-auth-form .auth-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-screen .auth-panel-heading h1,
  .pro-auth-panel .auth-panel-heading h1 {
    font-size: clamp(1.9rem, 9vw, 2.35rem);
  }

  .auth-screen .phone-confirmation,
  .pro-auth-screen .phone-confirmation,
  .booking-auth-dialog .phone-confirmation {
    gap: 20px;
    padding: 58px 0 30px;
  }

  .phone-confirmation-heading h1 {
    font-size: clamp(1.85rem, 9vw, 2.25rem);
  }

  .phone-confirmation-form,
  .phone-confirmation-options {
    width: min(100%, 350px);
  }

  .phone-code-cells {
    gap: clamp(6px, 2.4vw, 10px);
  }

  .phone-code-cell {
    height: clamp(50px, 14vw, 56px);
    border-radius: 10px;
  }

  :is(.auth-panel[data-auth-surface], .pro-auth-panel)
    .signup-methods
    .method-button {
    grid-template-columns: minmax(42px, 1fr) auto minmax(42px, 1fr);
    gap: 6px;
    padding-inline: 10px;
  }

  :is(.auth-panel[data-auth-surface], .pro-auth-panel) .auth-method-label {
    font-size: 0.84rem;
  }

  :is(.auth-panel[data-auth-surface], .pro-auth-panel) .auth-method-note {
    font-size: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-screen .auth-tabs::before,
  .pro-auth-screen .auth-tabs::before {
    transition: none;
  }

  :is(.auth-mode-stage, .pro-auth-stage) {
    animation: none;
  }

  .phone-code-cell {
    transition: none;
  }

  .auth-button-spinner {
    animation: none;
  }
}