@import url("/assets/fonts/golos.css");

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/cg_cyr.woff2") format("woff2");
  unicode-range: U+0400-052F, U+2DE0-2DFF, U+A640-A69F;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/cg_lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --color-canvas: #efe4d8;
  --color-card: #fbf7f1;
  --color-inner: #e4d3c3;
  --color-text: #2a1d17;
  --color-secondary: #6f5b50;
  --color-line: #d3bfaa;
  --color-accent: #d99b6c;
  --color-good: #38755d;
  --color-bad: #a9473f;
  --color-warning: #99631f;
  --color-on-accent: var(--color-card);
  --font-family: "Golos Text", system-ui, sans-serif;
  --display-font-family: "Cormorant Garamond", Georgia, serif;
  --type-small: 0.875rem;
  --type-body: 1rem;
  --type-title: 1.5rem;
  --type-display: 2rem;
  --palette-glow-a: color-mix(in srgb, var(--color-accent) 17%, transparent);
  --palette-glow-b: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --guest-canvas: #efe4d8;
  --guest-card: #fbf7f1;
  --guest-ink: #2a1d17;
  --guest-muted: #6f5b50;
  --guest-line: #d3bfaa;
  --guest-accent: #d99b6c;
  --guest-on-dark: #2a1d17;
  --guest-muted-on-dark: #6f5b50;
  --guest-line-on-dark: #d3bfaa;
  --guest-photo-shade: #2a1d17;
  --guest-photo-copy: #fbf7f1;
}

.client-profile__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.schedule-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: var(--color-card);
}

.schedule-filters label {
  display: grid;
  gap: 7px;
  color: var(--color-secondary);
  font-size: var(--type-small);
  font-weight: 650;
}

.schedule-filters input,
.schedule-filters select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  color: var(--color-text);
  background: var(--color-inner);
  font: inherit;
}

.schedule-filters .button {
  min-height: 44px;
  white-space: nowrap;
}

.schedule-filters--compact {
  grid-template-columns: minmax(220px, 360px) auto;
  justify-content: start;
}

.operational-list {
  display: grid;
  gap: 14px;
}

.operational-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
  gap: 24px;
  align-items: center;
}

.operational-card h2 {
  margin: 7px 0;
}

.operational-card p {
  margin: 5px 0;
}

.operational-card__actions,
.quality-resolve {
  display: grid;
  gap: 10px;
}

.quality-resolve label {
  display: grid;
  gap: 7px;
  color: var(--color-secondary);
  font-size: var(--type-small);
  font-weight: 650;
}

.quality-resolve input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  color: var(--color-text);
  background: var(--color-inner);
}

.client-profile__hero h1 {
  margin-bottom: 6px;
}

.client-profile__hero p {
  margin: 0;
}

.client-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.client-metrics .metric {
  min-height: 112px;
}

.client-metrics .metric span {
  color: var(--color-secondary);
}

.client-metrics .metric strong {
  display: block;
  margin-top: 8px;
  font-size: 1.8rem;
}

.client-next h2 {
  margin: 8px 0 4px;
}

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

.client-context-grid h2 {
  margin: 8px 0;
}

.client-notes {
  display: grid;
  margin: 14px 0 0;
  padding-left: 20px;
  gap: 8px;
}

.client-feedback {
  display: grid;
}

.client-feedback__item {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--color-line);
}

.client-feedback__item small {
  color: var(--color-secondary);
}

.client-history {
  display: grid;
}

.client-history__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--color-line);
}

.client-history__row time,
.client-history__row div {
  display: grid;
  gap: 3px;
}

.client-history__row small,
.client-history__row span {
  color: var(--color-secondary);
}

.client-history__status {
  padding: 6px 10px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: var(--type-small);
  white-space: nowrap;
}

.booking-client-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--color-accent);
  font-weight: 700;
  text-underline-offset: 3px;
}

@media (max-width: 700px) {
  .schedule-filters {
    grid-template-columns: 1fr;
  }

  .operational-card {
    grid-template-columns: 1fr;
  }

  .client-profile__hero {
    display: grid;
  }

  .client-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-context-grid,
  .client-feedback__item {
    grid-template-columns: 1fr;
  }

  .client-history__row {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
  }

  .client-history__status {
    grid-column: 2;
    justify-self: start;
  }
}

/* Public Beauty booking: calm, editorial and intentionally separate from the
   denser team workspace. It still inherits the tenant palette and typography. */
.public-booking {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 56px;
}

.public-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-line);
}

.public-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text);
  font-weight: 750;
  text-decoration: none;
  letter-spacing: -.02em;
}

.public-brand span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-card);
  background: var(--color-accent);
  font-family: var(--display-font-family);
}

.public-team-link {
  color: var(--color-secondary);
  font-size: var(--type-small);
  text-underline-offset: 4px;
}

.public-hero {
  padding: clamp(54px, 9vw, 104px) 0 clamp(48px, 8vw, 86px);
  max-width: 760px;
}

.public-hero h1,
.public-success h1 {
  margin: 12px 0 20px;
  font-family: var(--display-font-family);
  font-size: clamp(2.7rem, 7vw, 5.8rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.055em;
}

.public-hero p {
  max-width: 560px;
  margin: 0;
  color: var(--color-secondary);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.65;
}

.public-step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 22px;
  padding: 34px 0;
  border-top: 1px solid var(--color-line);
}

.public-step__number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-accent);
  font-weight: 750;
}

.public-step__body h2 {
  margin: 4px 0 24px;
  font-family: var(--display-font-family);
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  font-weight: 520;
}

.public-filters,
.public-contact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

.public-filters label,
.public-contact label {
  display: grid;
  gap: 8px;
  color: var(--color-secondary);
  font-size: var(--type-small);
  font-weight: 650;
}

.public-filters select,
.public-filters input,
.public-contact input,
.public-contact textarea {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: 0 14px;
  color: var(--color-text);
  background: var(--color-card);
  font: inherit;
}

.public-contact textarea {
  min-height: 96px;
  padding: 14px;
  resize: vertical;
}

.public-contact__note {
  grid-column: 1 / -1;
}

.public-contact__note > span {
  color: var(--color-secondary);
  font-size: 0.75rem;
  font-weight: 500;
}

.public-filters .button {
  min-height: 52px;
}

.public-note {
  margin-top: 20px;
  padding: 18px 20px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-inner);
}

.public-note p {
  margin: 6px 0 0;
  color: var(--color-secondary);
}

.public-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.public-slot {
  position: relative;
  color: var(--public-card-ink);
  text-decoration: none;
  cursor: pointer;
}

.public-slot input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.public-slot span {
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: 13px;
  background: var(--color-card);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.public-slot strong {
  font-size: 1.12rem;
}

.public-slot small {
  color: var(--color-secondary);
}

.public-slot input:checked + span {
  border-color: var(--color-accent);
  background: var(--color-inner);
}

.public-slot input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
  outline-offset: 2px;
}

.public-contact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 16px;
}

.public-confirm > button {
  min-height: 52px;
  padding-inline: 26px;
}

.public-footer {
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
  color: var(--color-secondary);
  font-size: var(--type-small);
}

.public-booking--confirmed {
  min-height: 100vh;
}

.public-success {
  max-width: 720px;
  margin: clamp(50px, 10vw, 110px) auto;
  padding: clamp(28px, 6vw, 64px);
  border: 1px solid var(--color-line);
  border-radius: 24px;
  background: var(--color-card);
}

.public-success h1 {
  font-size: clamp(2.5rem, 6vw, 4.8rem);
}

.public-success__mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  border-radius: 50%;
  color: var(--color-card);
  background: var(--color-good);
  font-size: 1.55rem;
}

.public-success dl {
  margin: 30px 0;
  border-top: 1px solid var(--color-line);
}

.public-success dl div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--color-line);
}

.public-success dt {
  color: var(--color-secondary);
}

.public-success dd {
  margin: 0;
  font-weight: 650;
}

/* Кнопки подтверждения: главное действие во всю ширину, под ним пара
   «перенести — отменить» в две колонки. Раньше «Записаться ещё» брало
   button--quiet — панельную пилюлю на 40px с автошириной, — и висело
   между двумя широкими кнопками огрызком. */
.public-success__actions {
  display: grid;
  gap: 10px;
  margin-top: 30px;
}

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

@media (max-width: 760px) {
  .public-booking {
    width: min(100% - 22px, 1120px);
    padding-top: 10px;
  }

  .public-hero {
    padding: 48px 4px 54px;
  }

  .public-hero h1 {
    font-size: clamp(2.55rem, 14vw, 4.2rem);
  }

  .public-step {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .public-step__number {
    width: 34px;
    height: 34px;
  }

  .public-filters,
  .public-contact,
  .public-slots {
    grid-template-columns: 1fr;
  }

  .public-success {
    margin: 34px 0;
    border-radius: 18px;
  }

  .public-success dl div {
    grid-template-columns: 88px 1fr;
  }
}

/* Guest microsite. Editorial cards deliberately override the compact legacy
   booking form above while keeping confirmation and cancellation compatible. */
.public-surface--site {
  --public-ink: var(--color-text);
  --public-muted: var(--color-secondary);
  --public-cream: var(--color-canvas);
  --public-paper: var(--color-card);
  --public-card-ink: var(--color-text);
  --public-card-muted: var(--color-secondary);
  --public-walnut: var(--color-text);
  --public-berry: var(--color-accent);
  --public-line: var(--color-line);
  --public-card-line: var(--color-line);
  --public-mark-line: var(--color-line);
  --public-hero-base: var(--color-text);
  --public-tile-shade: rgba(28, 17, 10, .76);
  --public-inner: var(--color-inner);
  --public-transparent: rgba(0, 0, 0, 0);
  margin: 0;
  color: var(--public-ink);
  background: var(--public-cream);
}

.public-site {
  width: min(1400px, calc(100% - 48px));
  margin: 0 auto;
}

.public-site .public-header {
  min-height: 86px;
  border-color: var(--public-line);
  gap: 28px;
}

.public-brand__mark {
  position: relative;
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px;
  overflow: hidden;
  border-radius: 12px 4px 12px 4px !important;
  object-fit: cover;
  background: var(--public-walnut) !important;
  transform: none;
}

.public-brand__mark::before,
.public-brand__mark::after,
.public-brand__mark i {
  content: "";
  position: absolute;
  border: 1.5px solid var(--public-mark-line);
  border-radius: 50% 50% 12% 50%;
  transform: rotate(38deg);
}

.public-brand__mark::before { width: 22px; height: 22px; left: 5px; top: 9px; }
.public-brand__mark::after { width: 14px; height: 14px; right: 4px; top: 5px; opacity: .72; }
.public-brand__mark i { width: 9px; height: 9px; left: 7px; bottom: 4px; opacity: .52; }

.public-brand__copy { display: grid; gap: 1px; width: auto !important; height: auto !important; background: none !important; color: inherit !important; border-radius: 0 !important; font-family: inherit !important; }
.public-brand__copy strong { font-family: var(--display-font-family); font-size: 1.2rem; font-weight: 620; }
.public-brand__copy small { color: var(--public-muted); font-size: .65rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }

.public-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.public-nav__link { padding: 32px 0 29px; border-bottom: 2px solid transparent; color: var(--public-muted); text-decoration: none; font-size: .88rem; }
.public-nav__link:hover, .public-nav__link.is-active { color: var(--public-ink); border-color: var(--public-berry); }
.public-site .public-team-link { padding: 9px 13px; border: 1px solid var(--public-line); border-radius: 999px; text-decoration: none; }

.public-home-hero {
  position: relative;
  min-height: min(720px, calc(100vh - 118px));
  margin-top: 24px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--public-hero-base);
}
.public-home-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.public-home-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--public-hero-base) 88%, transparent) 0%, color-mix(in srgb, var(--public-hero-base) 55%, transparent) 42%, color-mix(in srgb, var(--public-hero-base) 5%, transparent) 72%); }
.public-home-hero__copy { position: relative; z-index: 1; width: min(650px, 82%); padding: clamp(92px, 14vw, 190px) clamp(32px, 7vw, 100px); color: var(--color-card); }
.public-kicker { margin-bottom: 18px; color: var(--public-berry); font-size: .72rem; font-weight: 760; letter-spacing: .18em; text-transform: uppercase; }
.public-home-hero .public-kicker { color: var(--color-accent); }
.public-home-hero h1, .public-page-lead h1, .public-journey-heading h1, .public-master-hero h1, .public-about-hero h1, .public-legal h1 { margin: 0; font-family: var(--display-font-family); font-weight: 480; letter-spacing: -.045em; line-height: .98; }
.public-home-hero h1 { font-size: clamp(3.25rem, 7vw, 7rem); }
.public-home-hero p { margin: 24px 0 30px; color: var(--color-card); font-size: 1.1rem; }
.public-home-hero:not(:has(> img))::after { display: none; }
.public-home-hero:not(:has(> img)) .public-home-hero__copy { color: var(--public-ink); }
.public-home-hero:not(:has(> img)) p { color: var(--public-muted); }
.public-hero-cta { display: inline-flex; align-items: center; gap: 44px; min-height: 52px; padding: 0 20px; border-radius: 999px; color: var(--color-text); background: var(--public-berry); text-decoration: none; font-weight: 700; }
.public-hero-cta span { font-size: 1.3rem; transition: transform .18s ease; }
.public-hero-cta:hover span { transform: translateX(4px); }

.public-action-section, .public-portfolio, .public-branches { padding: 108px 0; }
.public-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.public-section-heading h2 { margin: 0; font: 500 clamp(2.2rem, 4vw, 4rem)/1 var(--display-font-family); letter-spacing: -.04em; }
.public-section-heading > p { max-width: 360px; margin: 0; color: var(--public-muted); line-height: 1.6; }
.public-action-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; }
.public-action-card { position: relative; min-height: 480px; overflow: hidden; border-radius: 20px; color: var(--color-card); text-decoration: none; }
.public-action-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.public-action-card:hover img { transform: scale(1.035); }
.public-action-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--public-hero-base) 5%, transparent), color-mix(in srgb, var(--public-hero-base) 78%, transparent)); }
.public-action-card__number, .public-action-card__copy, .public-action-card__arrow { position: absolute; z-index: 1; }
.public-action-card__number { top: 22px; left: 22px; font-size: .75rem; letter-spacing: .14em; }
.public-action-card__copy { left: 24px; right: 58px; bottom: 24px; display: grid; gap: 7px; }
.public-action-card__copy strong { font: 500 1.65rem/1.1 var(--display-font-family); }
.public-action-card__copy small { color: var(--color-card); line-height: 1.35; }
.public-action-card__arrow { right: 24px; bottom: 26px; font-size: 1.25rem; }
.public-action-card:not(:has(img)) {
  display: grid;
  min-height: 0;
  padding: 24px 58px 24px 24px;
  align-content: start;
  gap: 38px;
  border: 1px solid var(--public-card-line);
  color: var(--public-card-ink);
  background: var(--public-paper);
}
.public-action-card:not(:has(img)) .public-action-card__shade { display: none; }
.public-action-card:not(:has(img)) .public-action-card__number,
.public-action-card:not(:has(img)) .public-action-card__copy { position: static; }
.public-action-card:not(:has(img)) .public-action-card__copy small { color: var(--public-card-muted); }

.public-page-lead, .public-journey-heading { max-width: 860px; padding: clamp(76px, 10vw, 132px) 0 52px; }
.public-site--booking .public-journey-heading { padding-top: 48px; }
.public-page-lead h1, .public-journey-heading h1, .public-about-hero h1 { font-size: clamp(3rem, 6vw, 6rem); }
.public-page-lead p, .public-journey-heading p { max-width: 620px; margin: 24px 0 0; color: var(--public-muted); font-size: 1.08rem; line-height: 1.65; }

.public-master-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.public-master-card { min-width: 0; overflow: hidden; border-radius: 20px; color: var(--public-ink); background: var(--public-paper); text-decoration: none; }
.public-master-card > img { width: 100%; aspect-ratio: 4 / 4.7; object-fit: cover; transition: transform .45s ease; }
.public-master-card:hover > img { transform: scale(1.025); }
.public-master-card__meta { display: grid; min-height: 176px; padding: 22px; }
.public-master-card__meta small { color: var(--public-berry); }
.public-master-card__meta strong { margin-top: 8px; font: 500 1.65rem var(--display-font-family); }
.public-master-card__meta span { color: var(--public-muted); }
.public-master-card__meta em { align-self: end; margin-top: 20px; color: var(--public-ink); font-size: .84rem; font-style: normal; }
.public-demo-disclaimer { margin: 26px 0 0; padding: 18px 20px; border: 1px solid var(--public-line); border-radius: 14px; color: var(--public-muted); font-size: .85rem; }

.public-master-hero, .public-about-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 7vw, 100px); align-items: center; padding: 70px 0 100px; }
.public-master-hero > img, .public-about-hero > img { width: 100%; max-height: 720px; object-fit: cover; border-radius: 24px; }
.public-master-hero h1 { font-size: clamp(3.2rem, 7vw, 6.5rem); }
.public-master-hero p, .public-about-hero p { color: var(--public-muted); line-height: 1.7; }
.public-back-link { display: inline-block; margin-bottom: 50px; color: var(--public-muted); text-decoration: none; }
.public-service-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; }
.public-service-tags span { padding: 9px 12px; border: 1px solid var(--public-line); border-radius: 999px; font-size: .8rem; }
.public-work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.public-work-card { overflow: hidden; border-radius: 18px; background: var(--public-paper); }
.public-work-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.public-work-card div { padding: 20px; }
.public-work-card span { color: var(--color-accent); letter-spacing: .06em; }
.public-work-card strong { display: block; margin: 8px 0; font-family: var(--display-font-family); font-size: 1.3rem; }
.public-work-card p { margin: 0; color: var(--public-muted); line-height: 1.5; font-size: .88rem; }

.public-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.public-values-grid article { min-height: 210px; padding: 28px; border: 1px solid var(--public-line); border-radius: 18px; }
.public-values-grid span { color: var(--public-berry); font-size: .74rem; }
.public-values-grid strong { display: block; margin: 42px 0 10px; font: 500 1.4rem var(--display-font-family); }
.public-values-grid p { margin: 0; color: var(--public-muted); line-height: 1.55; }
.public-branch-detail { display: grid; grid-template-columns: 70px 1fr; padding: 24px 0; border-top: 1px solid var(--public-line); }
.public-branch-detail > span { color: var(--public-berry); }
.public-branch-detail strong { font: 500 1.55rem var(--display-font-family); }
.public-branch-detail p { margin: 5px 0 0; color: var(--public-muted); }

.public-progress { display: flex; gap: 4px; padding: 34px 0 0; }
.public-progress > span { flex: 1; height: 3px; border-radius: 2px; background: var(--public-line); }
.public-progress > span.is-active { background: var(--public-berry); }
.public-chosen { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 24px; }
.public-chosen a { display: grid; gap: 2px; min-width: 130px; padding: 10px 14px; border: 1px solid var(--public-line); border-radius: 12px; color: inherit; background: var(--color-card); text-decoration: none; }
.public-chosen small { color: var(--public-muted); font-size: .65rem; text-transform: uppercase; }
.public-chosen strong { font-size: .84rem; }
.public-chosen > span { display: grid; gap: 2px; min-width: 170px; padding: 10px 14px; border: 1px solid var(--public-line); border-radius: 12px; background: var(--color-card); }
.public-booking-layout { display: block; }
.public-journey { min-height: 620px; padding-bottom: 110px; }
.public-visit-aside { display: none; }
.public-visit-card { overflow: hidden; border: 1px solid var(--public-card-line); border-radius: 20px; color: var(--public-card-ink); background: var(--public-paper); }
.public-visit-card h2 { margin: 0; padding: 17px 20px 13px; border-bottom: 1px solid var(--public-card-line); font: 500 1.5rem var(--display-font-family); }
.public-visit-card__row { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 20px; border-bottom: 1px solid var(--public-card-line); }
.public-visit-card__row:last-child { border-bottom: 0; }
.public-visit-card__row span { color: var(--public-card-muted); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; }
.public-visit-card__row strong { font-size: .9rem; font-weight: 650; }
.public-visit-card__hint { margin: 0; padding: 17px 20px 20px; color: var(--public-card-muted); font-size: .84rem; line-height: 1.5; }
.public-visit-card__submit { width: 100%; margin-top: 14px; }
.public-service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.public-service-card { position: relative; min-height: 380px; overflow: hidden; border-radius: 20px; color: var(--color-card); text-decoration: none; }
.public-service-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.public-service-card:hover img { transform: scale(1.03); }
.public-service-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, color-mix(in srgb, var(--public-hero-base) 82%, transparent)); }
.public-service-card__copy { position: absolute; inset: auto 26px 24px; display: grid; gap: 7px; }
.public-service-card__copy small { color: var(--color-card); }
.public-service-card__copy strong { font: 500 clamp(1.7rem, 3vw, 2.7rem) var(--display-font-family); }
.public-service-card__copy em { margin-top: 10px; font-size: .8rem; font-style: normal; }
.public-branch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.public-branch-card { display: grid; grid-template-columns: 54px 1fr; min-height: 210px; padding: 26px; border: 1px solid var(--public-line); border-radius: 18px; color: inherit; background: var(--public-paper); text-decoration: none; }
.public-branch-card > span { color: var(--public-berry); font-size: .74rem; }
.public-branch-card div { display: grid; align-content: end; gap: 7px; }
.public-branch-card small { color: var(--public-muted); }
.public-branch-card strong { font: 500 1.45rem var(--display-font-family); }
.public-branch-card em { margin-top: 20px; font-size: .78rem; font-style: normal; }
.public-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; }
.public-date-card { display: grid; place-items: center; min-height: 144px; padding: 15px 6px; border: 1px solid var(--public-line); border-radius: 16px; color: inherit; background: var(--public-paper); text-decoration: none; transition: transform .16s ease, border-color .16s ease; }
.public-date-card:hover { border-color: var(--public-berry); transform: translateY(-3px); }
.public-date-card small, .public-date-card span { color: var(--public-muted); font-size: .72rem; }
.public-date-card strong { font: 500 2.2rem var(--display-font-family); }
.public-calendar { display: grid; gap: 16px; max-width: 560px; }
.public-calendar-head { display: flex; align-items: center; gap: 14px; }
.public-calendar-head h2 { flex: 1; margin: 0; font: 500 1.5rem var(--display-font-family); }
.public-calendar-nav { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid var(--public-line); border-radius: 50%; color: var(--public-berry); text-decoration: none; }
.public-calendar-nav.is-disabled { color: var(--public-muted); opacity: .55; }
.public-calendar-weekdays, .public-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.public-calendar-weekdays { color: var(--public-muted); font-size: .7rem; letter-spacing: .07em; text-align: center; text-transform: uppercase; }
.public-calendar-day { display: flex; aspect-ratio: 1; align-items: center; justify-content: center; flex-direction: column; gap: 3px; border-radius: 14px; color: var(--public-muted); text-decoration: none; }
.public-calendar-day.is-past { opacity: .48; }
.public-calendar-day.is-available { border: 1px solid var(--public-line); color: var(--public-card-ink); background: var(--public-paper); }
.public-calendar-day.is-selected { border: 1px solid var(--public-berry); color: var(--public-card-ink); background: var(--public-berry); }
.public-calendar-day strong { font-size: 1.05rem; font-weight: 600; line-height: 1; }
.public-calendar-day em { color: var(--public-berry); font-size: .58rem; font-style: normal; letter-spacing: .06em; line-height: 1; text-transform: uppercase; }
.public-calendar-day i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--public-berry); }
.public-calendar-day.is-selected i { background: var(--public-card-ink); }
.public-calendar-submit { margin-top: 24px; color: var(--public-card-ink); text-decoration: none; }

.public-site--booking .public-slots { grid-template-columns: repeat(3, 1fr); }
.public-site--booking .public-slot span { grid-template-columns: 46px auto 1fr auto; align-items: center; min-height: 82px; gap: 13px; }
.public-site--booking .public-slot img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.public-site--booking .public-slot i { color: var(--public-muted); font-size: .72rem; font-style: normal; }
.public-site--booking .public-slot input:checked + span { border-color: var(--public-berry); background: var(--color-inner); }
.public-site--booking .public-contact { margin-top: 30px; }
.public-consent { display: flex; align-items: flex-start; gap: 10px; max-width: 700px; margin: 18px 0 24px; color: var(--public-muted); font-size: .82rem; line-height: 1.5; }
/* Общее правило `input { min-height: 54px }` для полей формы побеждает
   height и растягивает галочку до 54px: квадратик рисуется по центру и
   уезжает на строку ниже своего текста. min-height: 0 возвращает его
   на место. */
.public-consent input { flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; margin-top: 2px; accent-color: var(--public-berry); }
.public-consent a { color: var(--public-ink); }
.public-submit { display: inline-flex; justify-content: space-between; gap: 70px; min-width: 310px; min-height: 54px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--public-berry); }
.public-reschedule-back { margin-top: 32px; }
.public-note { max-width: 760px; border-left-color: var(--public-berry); border-radius: 0 14px 14px 0; }

.public-booking-layout .public-service-card:hover img,
.public-booking-layout .public-master-card:hover > img { transform: none; }
.public-booking-layout .public-slot span { transition: none; }

@media (min-width: 1024px) {
  .public-chosen--booking { display: none; }
  .public-booking-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(30px, 4vw, 52px); align-items: start; }
  .public-booking-layout .public-journey { min-width: 0; }
  .public-visit-aside { position: sticky; top: 32px; display: block; padding-top: 48px; }
  .public-confirm__mobile-submit { display: none; }
}

.manager-zone-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.manager-zone-card { display: grid; gap: 8px; color: var(--color-text); text-decoration: none; }
.manager-zone-card > span, .manager-zone-card small { color: var(--color-secondary); }
.manager-zone-card strong { font: 500 var(--type-title) var(--display-font-family); }
.manager-profile-links { margin-top: 18px; }
.manager-team-list { display: grid; gap: 10px; }
.manager-team-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.manager-team-row:last-child { border-bottom: 0; }
.manager-team-row > span:last-child { display: grid; gap: 3px; }
.manager-team-row small { color: var(--color-secondary); }

.public-legal { max-width: 850px; margin: 0 auto; padding: 80px 0 120px; }
.public-legal h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); }
.public-legal__lead { margin: 30px 0 55px; color: var(--public-muted); font-size: 1.15rem; line-height: 1.7; }
.public-legal h2 { margin: 38px 0 8px; font: 500 1.5rem var(--display-font-family); }
.public-legal p { color: var(--public-muted); line-height: 1.7; }
.public-legal aside { margin-top: 44px; padding: 20px; border: 1px solid var(--public-line); border-radius: 14px; }
.public-site .public-footer { display: grid; grid-template-columns: 1fr auto; gap: 26px; padding: 42px 0; }
.public-site .public-footer div { display: grid; gap: 5px; }
.public-site .public-footer nav { display: flex; gap: 20px; }
.public-site .public-footer a { color: inherit; }
.public-site .public-footer > small { grid-column: 1 / -1; }
.public-hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.public-my-link { color: var(--public-ink); font-weight: 750; text-underline-offset: 5px; }
.public-my-page { min-height: 100vh; }
.public-my-hero { padding: clamp(54px, 8vw, 108px) 0 34px; max-width: 820px; }
.public-my-hero h1 { margin: 10px 0 12px; font-family: var(--display-font-family); font-size: clamp(3.1rem, 7vw, 6.4rem); line-height: .92; }
.public-my-hero p { max-width: 620px; color: var(--public-muted); font-size: 1.08rem; }
.public-my-content { padding: 14px 0 80px; }
.public-my-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.public-my-card { padding: clamp(24px, 4vw, 38px); border: 1px solid var(--public-line); border-radius: 28px; background: var(--public-paper); }
.public-my-card.is-muted { opacity: .68; }
.public-my-card__status { display: flex; align-items: center; gap: 9px; color: var(--public-muted); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.public-my-card__status span { width: 9px; height: 9px; border-radius: 50%; background: var(--public-berry); }
.public-my-card.is-muted .public-my-card__status span { background: var(--public-muted); }
.public-my-card h2 { margin: 18px 0 22px; font-family: var(--display-font-family); font-size: clamp(1.75rem, 3vw, 2.45rem); }
.public-my-card dl { display: grid; gap: 12px; margin: 0; }
.public-my-card dl div { display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding-top: 12px; border-top: 1px solid var(--public-line); }
.public-my-card dt { color: var(--public-muted); }
.public-my-card dd { margin: 0; font-weight: 700; }
.public-my-card__actions { display: flex; gap: 10px; margin-top: 26px; }
.public-forget-form { margin-top: 24px; text-align: center; }
.public-my-empty { max-width: 720px; padding: clamp(28px, 5vw, 46px); }
.public-my-empty .button { display: inline-flex; margin-top: 12px; }

/* Guest booking follows the same calm-premium surface language as the panel. */
.public-site--booking .public-header,
.public-site--booking .public-footer {
  border-color: var(--public-line);
}

.public-site .public-brand {
  color: var(--public-ink);
}

.public-site--booking .public-progress > span {
  border-color: var(--public-line);
  color: var(--public-muted);
}

.public-site--booking .public-progress > span.is-active {
  border-color: var(--public-berry);
  color: var(--public-ink);
}

.public-site--booking .public-progress i {
  color: var(--public-card-ink);
  background: var(--public-paper);
}

.public-service-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  border: 1px solid var(--public-card-line);
  border-radius: 24px;
  color: var(--public-card-ink);
  background: var(--public-paper);
}

.public-service-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.public-service-card__shade {
  display: none;
}

.public-service-card__copy {
  position: static;
  display: grid;
  gap: 8px;
  padding: 22px 24px 24px;
}

.public-service-card__copy small {
  color: var(--public-card-muted);
}

.public-service-card__copy strong {
  color: var(--public-card-ink);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.public-service-card__copy em {
  color: var(--guest-accent);
  font-weight: 750;
}

.public-demo-badge {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  padding: 7px 10px;
  border: 1px solid var(--public-card-line);
  border-radius: 999px;
  color: var(--public-card-ink);
  background: var(--public-paper);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.public-branch-card,
.public-date-card,
.public-site--booking .public-slot span,
.public-site--booking .public-contact,
.public-empty-state {
  border: 1px solid var(--public-card-line);
  color: var(--public-card-ink);
  background: var(--public-paper);
}

.public-branch-card small,
.public-date-card small,
.public-date-card span,
.public-site--booking .public-slot small,
.public-site--booking .public-slot i,
.public-site--booking .public-contact label {
  color: var(--public-card-muted);
}

.public-branch-card em,
.public-site--booking .public-slot input:checked + span {
  color: var(--public-card-ink);
  border-color: var(--public-berry);
  background: var(--public-paper);
}

.public-chosen a,
.public-chosen > span {
  border-color: var(--public-card-line);
  color: var(--public-card-ink);
  background: var(--public-paper);
}

.public-chosen small {
  color: var(--public-card-muted);
}

.public-site--booking .public-contact {
  padding: clamp(20px, 4vw, 32px);
  border-radius: 24px;
}

.public-site--booking .public-contact input,
.public-site--booking .public-contact textarea {
  border-color: var(--public-card-line);
  color: var(--public-card-ink);
  background: var(--public-paper);
}

.public-booking-team {
  margin-bottom: 32px;
}

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

.public-booking-master {
  display: grid;
  grid-template-columns: minmax(150px, .72fr) minmax(0, 1.28fr);
  overflow: hidden;
  border: 1px solid var(--public-card-line);
  border-radius: 24px;
  color: var(--public-card-ink);
  background: var(--public-paper);
}

.public-booking-master__portrait,
.public-master-card__portrait,
.public-master-hero__portrait {
  position: relative;
  display: block;
  min-width: 0;
}

.public-booking-master__portrait img {
  width: 100%;
  height: 100%;
  min-height: 310px;
  object-fit: cover;
}

.public-booking-master__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
}

.public-booking-master__copy > small {
  color: var(--guest-accent);
  font-weight: 750;
}

.public-booking-master__copy h2 {
  margin: 9px 0 6px;
  font: 500 2rem/1 var(--display-font-family);
}

.public-booking-master__copy > p {
  margin: 0;
  color: var(--public-card-muted);
}

.public-review-card {
  padding: 24px;
  border: 1px solid var(--public-card-line);
  border-radius: 20px;
  color: var(--public-card-ink);
  background: var(--public-paper);
}

.public-review-card--compact {
  margin-top: auto;
  padding: 18px 0 0;
  border: 1px solid var(--public-paper);
  border-top: 1px solid var(--public-card-line);
  border-radius: 0;
}

.public-review-card__stars,
.public-demo-label {
  color: var(--guest-accent);
  letter-spacing: .08em;
}

.public-review-card blockquote {
  margin: 12px 0 18px;
  font: 500 1.2rem/1.25 var(--display-font-family);
}

.public-review-card footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--public-card-muted);
  font-size: .78rem;
}

.public-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.public-master-card {
  position: relative;
  border: 1px solid var(--public-card-line);
  color: var(--public-card-ink);
}

.public-master-card__portrait img {
  width: 100%;
  aspect-ratio: 4 / 4.7;
  object-fit: cover;
}

.public-master-card__meta span {
  color: var(--public-card-muted);
}

.public-master-hero__portrait img {
  width: 100%;
  max-height: 720px;
  border-radius: 24px;
  object-fit: cover;
}

.public-work-card,
.public-my-card {
  border: 1px solid var(--public-card-line);
  color: var(--public-card-ink);
}

.public-work-card p,
.public-my-card dt,
.public-my-card__status {
  color: var(--public-card-muted);
}

.public-empty-state {
  display: grid;
  gap: 10px;
  min-height: 220px;
  place-content: center;
  padding: 32px;
  border-radius: 24px;
  text-align: center;
}

.public-empty-state span {
  color: var(--public-card-muted);
}

.public-empty-state strong {
  font: 500 1.65rem var(--display-font-family);
}

@media (max-width: 800px) {
  .public-book-home .public-home-section,
  .public-book-home .public-home-services,
  .public-book-home .public-home-masters {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .public-site { width: min(100% - 24px, 1400px); }
  .public-site .public-header { min-height: 70px; gap: 10px; }
  .public-brand__copy small, .public-nav, .public-site .public-team-link { display: none; }
  .public-home-hero { min-height: 640px; margin-top: 12px; border-radius: 20px; }
  .public-home-hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--public-hero-base) 22%, transparent), color-mix(in srgb, var(--public-hero-base) 86%, transparent)); }
  .public-home-hero__copy { display: flex; flex-direction: column; justify-content: end; width: auto; min-height: 640px; padding: 34px 24px; }
  .public-home-hero:not(:has(> img)) { min-height: 0; margin-top: 0; }
  .public-home-hero:not(:has(> img)) .public-home-hero__copy {
    display: block;
    min-height: 0;
    padding: 52px 18px 28px;
  }
  .public-home-hero h1 { font-size: clamp(3.1rem, 15vw, 5.2rem); }
  .public-action-section, .public-portfolio, .public-branches { padding: 72px 0; }
  .public-section-heading { align-items: start; flex-direction: column; }
  .public-action-grid, .public-master-grid, .public-work-grid, .public-values-grid, .public-branch-grid { grid-template-columns: 1fr; }
  .public-booking-team__grid, .public-review-grid { grid-template-columns: 1fr; }
  .public-my-grid { grid-template-columns: 1fr; }
  .public-my-hero { padding-top: 42px; }
  .public-my-card dl div { grid-template-columns: 76px 1fr; gap: 12px; }
  .public-my-card__actions { flex-direction: column; }
  .public-my-card__actions .button { width: 100%; }
  .public-action-card { min-height: 390px; }
  .public-action-card:not(:has(img)) { min-height: 0; }
  .public-master-hero, .public-about-hero { grid-template-columns: 1fr; padding: 40px 0 80px; }
  .public-master-hero__portrait { order: -1; }
  .public-master-hero__portrait img { max-height: 520px; }
  .public-page-lead, .public-journey-heading { padding: 66px 0 38px; }
  .public-service-grid { grid-template-columns: 1fr; }
  .public-service-card { min-height: 330px; }
  .public-progress { gap: 4px; }
  .public-date-grid { grid-template-columns: repeat(4, 1fr); }
  .public-date-card { min-height: 116px; }
  .public-site--booking .public-slots, .public-site--booking .public-contact { grid-template-columns: 1fr; }
  .public-site .public-footer { grid-template-columns: 1fr; }
  .public-site .public-footer nav { flex-direction: column; gap: 10px; }
  .public-site .public-footer > small { grid-column: 1; }
  .manager-zone-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .public-booking-master {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .public-booking-master__portrait img {
    min-height: 100%;
  }

  .public-booking-master__copy {
    padding: 18px;
  }

  .public-review-card--compact {
    display: none;
  }

  .public-demo-badge {
    top: 10px;
    left: 10px;
    padding: 6px 8px;
    font-size: .58rem;
  }
}

/* The booking front door mirrors tenant facts and starts step one immediately. */
.public-book-home .public-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 76px;
  gap: 24px;
}

.public-header__address {
  min-width: 0;
  margin: 0;
  color: var(--public-muted);
  font-size: .82rem;
}

.public-header__address a {
  color: var(--public-muted);
  text-underline-offset: 3px;
}

.public-header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
}

.public-header__phone,
.public-header__actions .public-my-link {
  color: var(--public-ink);
  font-size: .82rem;
}

.public-header__demo {
  color: var(--public-muted);
  font-size: .58rem !important;
  letter-spacing: .08em !important;
}

.public-home-strip {
  position: relative;
  height: clamp(160px, 20vw, 260px);
  margin-top: 12px;
  overflow: hidden;
  border-radius: 20px;
  color: var(--guest-photo-copy);
  background: var(--public-walnut);
}

.public-home-strip > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-home-strip__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--guest-photo-shade) 86%, transparent), color-mix(in srgb, var(--guest-photo-shade) 36%, transparent) 72%, color-mix(in srgb, var(--guest-photo-shade) 14%, transparent));
}

.public-home-strip__copy {
  position: absolute;
  z-index: 1;
  left: clamp(22px, 4vw, 54px);
  right: clamp(22px, 4vw, 54px);
  bottom: clamp(20px, 3vw, 38px);
  display: grid;
  gap: 5px;
  max-width: 620px;
}

.public-home-strip__copy strong {
  font: 500 clamp(1.8rem, 4vw, 3.2rem)/.95 var(--display-font-family);
  letter-spacing: -.035em;
}

.public-home-strip__copy p {
  margin: 0;
  color: var(--guest-photo-copy);
  font-size: clamp(.78rem, 1.2vw, .95rem);
  line-height: 1.35;
}

.public-home-booking {
  padding-bottom: 58px;
  border-bottom: 1px solid var(--public-line);
}

.public-home-booking .public-service-grid {
  grid-template-columns: repeat(auto-fill, 352px);
  justify-content: start;
}

.public-home-booking__heading {
  padding: 30px 0 24px;
}

.public-home-booking__heading h1 {
  white-space: nowrap;
  font-size: clamp(2.45rem, 5vw, 4.5rem);
}

.public-home-booking__heading p {
  margin-top: 10px;
}

.public-home-section {
  padding: 58px 0;
  border-bottom: 1px solid var(--public-line);
}

.public-home-empty-note {
  margin: 28px 0 0;
  color: var(--public-muted);
  font-size: .82rem;
}

.public-home-section__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.public-home-section__heading h2 {
  margin: 0;
  font: 500 clamp(2rem, 4vw, 3.2rem)/1 var(--display-font-family);
  letter-spacing: -.035em;
}

.public-home-section__heading p {
  margin: 0;
  color: var(--public-muted);
}

.public-home-masters__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.public-home-master {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--public-card-line);
  border-radius: 20px;
  color: var(--public-card-ink);
  background: var(--public-paper);
  text-decoration: none;
}

.public-home-master--text {
  grid-template-columns: 1fr;
}

.public-home-master__portrait {
  position: relative;
  align-self: center;
  height: 112px;
  aspect-ratio: 1;
}

.public-home-master__portrait > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-home-master > span:last-child {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 18px;
}

.public-home-master strong {
  font: 500 1.35rem/1.05 var(--display-font-family);
}

.public-home-master small,
.public-home-master em {
  color: var(--public-card-muted);
  font-size: .76rem;
  font-style: normal;
  line-height: 1.35;
}

.public-home-about ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-home-about li {
  display: grid;
  gap: 5px;
  padding: 18px;
  border: 1px solid var(--public-card-line);
  border-radius: 16px;
  color: var(--public-card-ink);
  background: var(--public-paper);
}

.public-home-about li span,
.public-home-about__cancellation {
  color: var(--public-muted);
  font-size: .82rem;
}

.public-home-about__cancellation {
  margin: 18px 0 0;
}

.public-book-home .public-review-grid {
  margin-top: 0;
}

.public-site .public-footer {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 28px 0;
  color: var(--public-muted);
  font-size: .72rem;
  white-space: nowrap;
}

.public-site .public-footer strong {
  color: var(--public-ink);
}

@media (max-width: 800px) {
  .public-book-home .public-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 68px;
    gap: 10px;
  }

  .public-book-home .public-brand__mark {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px;
  }

  .public-header__address {
    overflow: hidden;
    font-size: .68rem;
    line-height: 1.25;
  }

  .public-header__address a {
    display: block;
  }

  .public-header__actions {
    display: grid;
    justify-items: end;
    gap: 4px;
  }

  .public-header__phone,
  .public-header__actions .public-my-link {
    font-size: .68rem;
  }

  .public-home-strip {
    height: 160px;
    margin-top: 8px;
    border-radius: 16px;
  }

  .public-home-strip__shade {
    background: linear-gradient(90deg, color-mix(in srgb, var(--guest-photo-shade) 90%, transparent), color-mix(in srgb, var(--guest-photo-shade) 42%, transparent));
  }

  .public-home-strip__copy {
    bottom: 18px;
    gap: 3px;
  }

  .public-home-strip__copy strong {
    font-size: 1.8rem;
  }

  .public-home-strip__copy p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .public-home-booking {
    padding-bottom: 44px;
  }

  .public-home-booking__heading {
    padding: 20px 0 16px;
  }

  .public-home-booking__heading .public-kicker {
    margin-bottom: 7px;
  }

  .public-home-booking__heading h1 {
    font-size: 2.45rem;
  }

  .public-home-booking__heading p {
    font-size: .9rem;
  }

  .public-home-booking .public-service-card {
    min-height: 0;
  }

  .public-home-booking .public-service-grid {
    grid-template-columns: 1fr;
  }

  .public-home-booking .public-service-card img {
    aspect-ratio: 16 / 8;
  }

  .public-home-booking .public-service-card__copy {
    padding: 17px 18px 18px;
  }

  .public-home-section {
    padding: 44px 0;
  }

  .public-home-section__heading {
    display: block;
  }

  .public-home-section__heading p {
    margin-top: 8px;
  }

  .public-home-masters__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
  }

  .public-home-master {
    flex: 0 0 286px;
    scroll-snap-align: start;
  }

  .public-home-about ul {
    grid-template-columns: 1fr;
  }

  .public-site .public-footer {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 22px 0;
    font-size: .58rem;
    letter-spacing: -.01em;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .public-booking-layout :is(.public-service-grid, .public-branch-grid, .public-master-grid, .public-calendar-grid, .public-slots) > * {
    animation: public-booking-rise 320ms cubic-bezier(.23,1,.32,1) both;
  }

  .public-booking-layout :is(.public-service-grid, .public-branch-grid, .public-master-grid, .public-calendar-grid, .public-slots) > *:nth-child(2) { animation-delay: 40ms; }
  .public-booking-layout :is(.public-service-grid, .public-branch-grid, .public-master-grid, .public-calendar-grid, .public-slots) > *:nth-child(3) { animation-delay: 80ms; }
  .public-booking-layout :is(.public-service-grid, .public-branch-grid, .public-master-grid, .public-calendar-grid, .public-slots) > *:nth-child(4) { animation-delay: 120ms; }
  .public-booking-layout :is(.public-service-grid, .public-branch-grid, .public-master-grid, .public-calendar-grid, .public-slots) > *:nth-child(5) { animation-delay: 160ms; }
  .public-booking-layout :is(.public-service-grid, .public-branch-grid, .public-master-grid, .public-calendar-grid, .public-slots) > *:nth-child(6) { animation-delay: 200ms; }
  .public-booking-layout :is(.public-service-grid, .public-branch-grid, .public-master-grid, .public-calendar-grid, .public-slots) > *:nth-child(7) { animation-delay: 240ms; }
  .public-booking-layout :is(.public-service-grid, .public-branch-grid, .public-master-grid, .public-calendar-grid, .public-slots) > *:nth-child(n+8) { animation-delay: 280ms; }

  .public-booking-layout :is(.public-service-card, .public-branch-card, .public-master-card, .public-calendar-day.is-available),
  .public-booking-layout :is(.public-submit, .public-calendar-nav, .public-slot) {
    transition: transform 160ms cubic-bezier(.23,1,.32,1);
  }

  .public-booking-layout :is(.public-service-card, .public-branch-card, .public-master-card, .public-calendar-day.is-available):active {
    transform: scale(.985);
  }

  .public-booking-layout :is(.public-submit, .public-calendar-nav, .public-slot):active {
    transform: scale(.97);
  }

  .public-booking-layout .public-calendar-day {
    transition: background 140ms cubic-bezier(.23,1,.32,1);
  }

  @keyframes public-booking-rise {
    from { opacity: 0; transform: translateY(9px); }
  }
}

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

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #17110d;
  --color-card: #fbf7f1;
  --color-inner: #efe3d7;
  --color-text: #2a1d17;
  --color-secondary: #6b574c;
  --color-line: #d7c3b2;
  --color-accent: #d99b6c;
  --color-good: #38755d;
  --color-bad: #a9473f;
  --color-warning: #99631f;
  --color-on-accent: var(--color-card);
  --guest-canvas: #17110d;
  --guest-card: #fbf7f1;
  --guest-ink: #2a1d17;
  --guest-muted: #6b574c;
  --guest-line: #d7c3b2;
  --guest-accent: #d99b6c;
  --guest-on-dark: #2a1d17;
  --guest-muted-on-dark: #6b574c;
  --guest-line-on-dark: color-mix(in srgb, var(--guest-card) 24%, var(--guest-canvas));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-canvas: #17110d;
    --color-card: #fbf7f1;
    --color-inner: #efe3d7;
    --color-text: #2a1d17;
    --color-secondary: #6b574c;
    --color-line: #d7c3b2;
    --color-accent: #d99b6c;
    --color-good: #38755d;
    --color-bad: #a9473f;
    --color-warning: #99631f;
    --color-on-accent: var(--color-card);
    --guest-canvas: #17110d;
    --guest-card: #fbf7f1;
    --guest-ink: #2a1d17;
    --guest-muted: #6b574c;
    --guest-line: #d7c3b2;
    --guest-accent: #d99b6c;
    --guest-on-dark: #2a1d17;
    --guest-muted-on-dark: #6b574c;
    --guest-line-on-dark: color-mix(in srgb, var(--guest-card) 24%, var(--guest-canvas));
  }
}

body.public-surface {
  color-scheme: light;
  --color-canvas: #efe4d8;
  --color-card: #fbf7f1;
  --color-inner: #e4d3c3;
  --color-text: #2a1d17;
  --color-secondary: #6f5b50;
  --color-line: #d3bfaa;
  --color-accent: #d99b6c;
  --color-good: #38755d;
  --color-bad: #a9473f;
  --color-warning: #99631f;
  --color-on-accent: var(--color-card);
  --guest-canvas: #efe4d8;
  --guest-card: #fbf7f1;
  --guest-ink: #2a1d17;
  --guest-muted: #6f5b50;
  --guest-line: #d3bfaa;
  --guest-accent: #d99b6c;
  --guest-on-dark: #2a1d17;
  --guest-muted-on-dark: #6f5b50;
  --guest-line-on-dark: #d3bfaa;
  --guest-photo-shade: #2a1d17;
  --guest-photo-copy: #fbf7f1;
}

body.public-surface .panel-app {
  display: block;
  width: 100%;
}

:root[data-palette="ocean"] {
  --color-accent: color-mix(in srgb, #d99b6c 70%, #38755d);
}

:root[data-palette="plum"] {
  --color-accent: color-mix(in srgb, #d99b6c 70%, #a9473f);
}

:root[data-palette="graphite"] {
  --color-accent: color-mix(in srgb, #d99b6c 45%, #6f5b50);
}

:root[data-theme="dark"][data-palette="ocean"] {
  --color-accent: color-mix(in srgb, #d99b6c 70%, #38755d);
}

:root[data-theme="dark"][data-palette="plum"] {
  --color-accent: color-mix(in srgb, #d99b6c 70%, #a9473f);
}

:root[data-theme="dark"][data-palette="graphite"] {
  --color-accent: color-mix(in srgb, #d99b6c 45%, #6b574c);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-palette="ocean"] {
    --color-accent: color-mix(in srgb, #d99b6c 70%, #38755d);
  }

  :root:not([data-theme="light"])[data-palette="plum"] {
    --color-accent: color-mix(in srgb, #d99b6c 70%, #a9473f);
  }

  :root:not([data-theme="light"])[data-palette="graphite"] {
    --color-accent: color-mix(in srgb, #d99b6c 45%, #6b574c);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--type-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.panel-app {
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
}

.panel-profile--beauty-calm .panel-app {
  width: 100%;
}

button,
input {
  max-width: 100%;
  font: inherit;
}

button,
.button {
  display: inline-flex;
  min-height: 48px;
  width: 100%;
  align-items: center;
  justify-content: center;
  /* justify-content центрирует строку целиком; когда подпись переносится на
     две строки, сами строки без этого прижимаются влево. */
  text-align: center;
  border: 1px solid var(--color-accent);
  border-radius: 12px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 120ms ease, transform 120ms ease;
}

button:hover,
.button:hover {
  opacity: 0.9;
}

button:active,
.button:active {
  transform: translateY(1px);
}

button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.topbar {
  display: flex;
  width: 100%;
  max-width: 720px;
  min-width: 0;
  margin: 0 auto;
  padding: 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topbar form {
  margin: 0;
}

.brand {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--type-title);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.button--quiet {
  min-height: 40px;
  width: auto;
  padding: 8px 14px;
  border-color: var(--color-line);
  background: var(--color-inner);
  color: var(--color-text);
  font-size: var(--type-small);
}

.shell {
  display: grid;
  width: 100%;
  max-width: 720px;
  min-width: 0;
  margin: 0 auto;
  padding: 12px 16px 32px;
  gap: 16px;
}

.shell--auth {
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

.card {
  width: 100%;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  background: var(--color-card);
}

.auth-card {
  max-width: 420px;
}

.auth-brand {
  display: inline-flex;
  margin-bottom: 22px;
  align-items: center;
  gap: 10px;
  font-family: var(--display-font-family);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.auth-brand::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-accent);
}

.role-card {
  padding-top: 26px;
}

.card__inner {
  display: flex;
  min-width: 0;
  margin-top: 24px;
  padding: 18px;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--color-inner);
}

.card__inner > div {
  min-width: 0;
}

.eyebrow {
  margin-bottom: 8px;
  color: var(--color-accent);
  font-size: var(--type-small);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  font-family: var(--display-font-family);
  font-weight: 500;
}

h1 {
  margin: 0;
  font-size: var(--type-display);
  line-height: 1.12;
  letter-spacing: -0.04em;
}

h2 {
  margin: 0 0 4px;
  font-size: var(--type-title);
  line-height: 1.25;
}

p {
  margin: 0;
}

.secondary {
  margin-top: 10px;
  color: var(--color-secondary);
}

.stack {
  display: grid;
  min-width: 0;
  margin-top: 24px;
  gap: 10px;
}

/* ——— Закрытия расписания ————————————————————————————————————————————
   Общее правило `input { min-height: 54px }` раздувает галочку в огромный
   квадрат, а браузерная синева спорит с палитрой салона. Здесь галочка
   должна быть галочкой: свой размер, свой цвет, подпись на одной строке. */
.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
}

.checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--color-accent);
}

/* «С» и «По» — одна мысль, поэтому стоят рядом, а не одно под другим. */
.closure-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Строка списка: слева что закрыто, справа кнопка снять. */
.closure-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
}

.closure-row:last-child { border-bottom: 0; }

/* Зона управляющего: галочки лишних точек рядом с домашним филиалом. */
.zone-branches {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-inner);
}

.zone-branches__title {
  font-size: var(--type-small);
  font-weight: 700;
}

.zone-branches .fine-print { margin: 2px 0 0; }

/* Внутри формы действует `.form-grid label { display: grid }`, и подпись
   уезжает под квадратик. Здесь галочка и её филиал — одна строка. */
.zone-branches .checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
}
.closure-row p { margin: 4px 0 0; }
.closure-row form { margin: 0; flex: 0 0 auto; }

/* Выпадающий список должен выглядеть как поле ввода рядом с ним: в панели
   поля светлые, цвет карточки, а не внутренний фон. */
.stack select {
  min-height: 54px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-card);
  color: var(--color-text);
  font: inherit;
  font-weight: 650;
}

label {
  font-size: var(--type-small);
  font-weight: 700;
}

input {
  min-height: 54px;
  width: 100%;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-inner);
  color: var(--color-text);
  font-size: var(--type-body);
  font-weight: 650;
  caret-color: var(--color-accent);
}

.auth-field {
  display: grid;
  gap: 7px;
}

.auth-field span {
  color: var(--color-secondary);
  font-size: var(--type-small);
  font-weight: 700;
}

.auth-card .auth-field input {
  font-size: var(--type-body);
  font-weight: 650;
  letter-spacing: 0;
}

.auth-card input::placeholder {
  color: var(--color-secondary);
  font-weight: 500;
  opacity: 0.72;
}

.remember-choice {
  display: flex;
  margin: 4px 0 6px;
  align-items: center;
  gap: 10px;
  color: var(--color-secondary);
  cursor: pointer;
}

.remember-choice input {
  min-height: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--color-accent);
}

.remember-choice span {
  font-size: var(--type-small);
  font-weight: 650;
}

.remember-note {
  margin: -2px 0 8px 28px;
  color: var(--color-secondary);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.45;
}

input:focus {
  border-color: var(--color-accent);
}

.notice {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-inner);
  font-size: var(--type-small);
}

.notice--error {
  border-color: var(--color-bad);
  color: var(--color-bad);
}

.fine-print {
  margin-top: 16px;
  color: var(--color-secondary);
  font-size: var(--type-small);
}

.status-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--color-good);
}

.dashboard {
  align-content: start;
}

.hero-card {
  padding-bottom: 24px;
}

.metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 8px;
}

.notification-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.metric {
  display: flex;
  min-width: 0;
  padding: 14px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--color-inner);
}

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

.metric__label {
  color: var(--color-text);
  font-size: var(--type-body);
  font-weight: 750;
}

.metric__copy small {
  color: var(--color-secondary);
  font-size: var(--type-small);
}

.metric__value {
  flex: 0 0 auto;
  color: var(--color-text);
  font-size: var(--type-title);
  line-height: 1;
}

.week-card strong {
  display: block;
  margin-top: 4px;
  color: var(--color-text);
  font-size: var(--type-title);
  line-height: 1;
}

.week-card {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.week-card small,
.masked {
  color: var(--color-secondary);
  font-size: var(--type-small);
}

.attention-list {
  display: grid;
  margin: 18px 0 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.attention-list li {
  display: flex;
  padding: 12px 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--color-line);
}

.booking-list {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.booking-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  min-width: 0;
  padding: 16px;
  gap: 12px;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: var(--color-card);
  color: var(--color-text);
  text-decoration: none;
}

.booking-row--single {
  grid-template-columns: minmax(0, 1fr);
}

.booking-time {
  color: var(--color-accent);
  font-size: var(--type-title);
  font-weight: 850;
}

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

.booking-main h2,
.booking-main p {
  margin: 0;
}

.booking-main .secondary {
  margin-top: 5px;
}

.note {
  margin-top: 10px !important;
  padding: 10px;
  border-radius: 10px;
  background: var(--color-inner);
}

.booking-actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-line);
}

.booking-actions summary {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  color: var(--color-accent);
  cursor: pointer;
  font-size: var(--type-small);
  font-weight: 800;
  list-style: none;
}

.booking-actions summary::-webkit-details-marker {
  display: none;
}

.booking-actions summary::after {
  content: "+";
  font-size: var(--type-title);
  line-height: 1;
}

.booking-actions[open] summary::after {
  content: "−";
}

.booking-actions__body {
  display: grid;
  margin-top: 6px;
  gap: 8px;
}

.row-actions,
.move-form,
.form-grid,
.panel-links {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.row-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.row-actions form,
.move-form {
  margin: 0;
}

.move-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
}

.move-form button {
  grid-column: 1 / -1;
}

.form-grid {
  margin-top: 18px;
}

.form-grid select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 54px;
  padding: 10px 14px;
  border: 1px solid var(--color-line);
  border-radius: 11px;
  background: var(--color-card);
  color: var(--color-text);
  font: inherit;
  font-size: var(--type-body);
  font-weight: 650;
}

.form-grid label,
.move-form label {
  display: grid;
  gap: 5px;
}

.form-grid .access-toggle {
  position: relative;
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 4px 0;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.access-toggle > input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.access-toggle__control {
  position: relative;
  display: block;
  flex: 0 0 44px;
  width: 44px;
  height: 24px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-inner);
  transition: border-color 160ms ease, background 160ms ease;
}

.access-toggle__control::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-secondary);
  content: "";
  transition: transform 160ms ease, background 160ms ease;
}

.access-toggle > input:checked + .access-toggle__control {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 28%, var(--color-inner));
}

.access-toggle > input:checked + .access-toggle__control::after {
  background: var(--color-accent);
  transform: translateX(20px);
}

.access-toggle > input:focus-visible + .access-toggle__control {
  outline: 3px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  outline-offset: 3px;
}

.access-toggle__copy {
  display: grid;
  gap: 2px;
}

.access-toggle__copy strong {
  font-size: var(--type-small);
}

.access-toggle__copy small {
  color: var(--color-secondary);
  font-size: .72rem;
  font-weight: 500;
}

.button--danger {
  border-color: var(--color-bad);
  background: var(--color-inner);
  color: var(--color-bad);
}

/* Пара к button--danger: тот же фон и рост, обычный цвет текста. Вместе они
   читаются как одна строка равнозначных действий. */
.button--secondary {
  border-color: var(--color-line);
  background: var(--color-inner);
  color: var(--color-text);
}

.content-card,
.integration-card,
.booking-card {
  display: grid;
  gap: 18px;
}

.integration-card > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.settings-grid,
.appearance-grid {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.settings-card {
  display: flex;
  min-height: 128px;
  align-items: center;
  gap: 16px;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.settings-card:hover,
.settings-card:focus-visible {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.settings-card__icon {
  display: grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  background: var(--palette-glow-a);
  color: var(--color-accent);
  font-size: var(--type-title);
}

.settings-card strong,
.settings-card small,
.appearance-choice strong,
.appearance-choice small,
.palette-choice strong,
.palette-choice small {
  display: block;
}

.settings-card strong,
.appearance-choice strong,
.palette-choice strong {
  font-size: var(--type-body);
}

.settings-card small,
.appearance-choice small,
.palette-choice small {
  margin-top: 4px;
  color: var(--color-secondary);
  font-size: var(--type-small);
  font-weight: 550;
  line-height: 1.35;
}

.appearance-section {
  display: grid;
  gap: 20px;
}

button.appearance-choice,
button.palette-choice {
  min-height: 92px;
  padding: 15px;
  justify-content: flex-start;
  border-color: var(--color-line);
  background: var(--color-inner);
  color: var(--color-text);
  text-align: left;
}

button.appearance-choice {
  display: grid;
  align-content: center;
}

button.palette-choice {
  gap: 12px;
}

button.appearance-choice[aria-pressed="true"],
button.palette-choice[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-inner);
}

.palette-choice__swatch {
  display: block;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--swatch-accent);
}

.palette-choice--lumi {
  --swatch-accent: #d99b6c;
}

.palette-choice--ocean {
  --swatch-accent: color-mix(in srgb, #d99b6c 70%, #38755d);
}

.palette-choice--plum {
  --swatch-accent: color-mix(in srgb, #d99b6c 70%, #a9473f);
}

.palette-choice--graphite {
  --swatch-accent: color-mix(in srgb, #d99b6c 45%, #6f5b50);
}

.reading-text {
  overflow-wrap: anywhere;
  font-size: var(--type-body);
}

.brand__mark,
.brand__copy small,
.panel-nav,
.staff-card {
  display: none;
}

.panel-profile--beauty-calm .panel-app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  align-items: start;
}

.panel-profile--beauty-calm .panel-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100svh;
  margin: 0;
  padding: 22px 16px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 20px;
  border-right: 1px solid var(--color-line);
  background: var(--color-card);
}

.panel-profile--beauty-calm .panel-sidebar [data-sidebar-toggle] {
  display: none;
}

.panel-profile--beauty-calm .sidebar-logout__icon {
  display: none;
}

.panel-profile--beauty-calm .brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 2px 8px;
  overflow: visible;
  font-size: 1.125rem;
  white-space: normal;
}

.panel-profile--beauty-calm .brand__mark {
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--color-card);
}

.panel-profile--beauty-calm .brand__copy {
  display: grid;
  min-width: 0;
  line-height: 1.05;
}

.panel-profile--beauty-calm .brand__copy small {
  display: block;
  margin-top: 4px;
  color: var(--color-secondary);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-profile--beauty-calm .panel-nav {
  display: grid;
  gap: 5px;
}

.panel-profile--beauty-calm .panel-nav__link {
  display: flex;
  min-height: 44px;
  padding: 7px 10px;
  align-items: center;
  gap: 11px;
  border-radius: 13px;
  color: var(--color-secondary);
  font-size: var(--type-small);
  font-weight: 700;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.panel-profile--beauty-calm .panel-nav__link:hover,
.panel-profile--beauty-calm .panel-nav__link:focus-visible {
  background: var(--color-inner);
  color: var(--color-text);
  transform: translateX(2px);
}

.panel-profile--beauty-calm .panel-nav__icon {
  display: grid;
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 9px;
  background: var(--color-card);
  color: var(--color-secondary);
  font-size: 0.8125rem;
}

.panel-profile--beauty-calm .panel-nav__icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.panel-profile--beauty-calm .panel-nav__link.is-active {
  background: var(--color-inner);
  color: var(--color-accent);
}

.panel-profile--beauty-calm .panel-nav__link.is-active .panel-nav__icon {
  color: var(--color-accent);
}

.panel-profile--beauty-calm .staff-card {
  display: flex;
  margin-top: auto;
  padding: 10px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-line);
  border-radius: 15px;
  background: var(--color-inner);
}

.panel-profile--beauty-calm .staff-card__avatar {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-card);
  font-size: 0.75rem;
  font-weight: 850;
}

.panel-profile--beauty-calm .staff-card strong,
.panel-profile--beauty-calm .staff-card small {
  display: block;
  line-height: 1.25;
}

.panel-profile--beauty-calm .staff-card strong {
  font-size: 0.75rem;
}

.panel-profile--beauty-calm .staff-card small {
  color: var(--color-secondary);
  font-size: 0.625rem;
}

.panel-profile--beauty-calm .panel-sidebar form {
  width: 100%;
}

.panel-profile--beauty-calm .shell {
  grid-column: 2;
  width: 100%;
  max-width: 1240px;
  padding: 32px clamp(22px, 4vw, 54px) 64px;
  gap: 14px;
}

.panel-profile--beauty-calm .shell--auth {
  grid-column: 1 / -1;
  max-width: none;
}

.panel-profile--beauty-calm .card {
  padding: 20px;
  border-radius: 18px;
}

.panel-profile--beauty-calm .hero-card {
  position: relative;
  min-height: 190px;
  padding: clamp(24px, 4vw, 36px);
  overflow: hidden;
  border-radius: 18px;
  background: var(--color-card);
}

.panel-profile--beauty-calm .hero-card > * {
  position: relative;
  z-index: 1;
}

.panel-profile--beauty-calm h1 {
  max-width: 760px;
  font-family: var(--display-font-family);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.panel-profile--beauty-calm h2 {
  letter-spacing: -0.02em;
}

.panel-profile--beauty-calm .eyebrow {
  color: var(--color-secondary);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
}

.panel-profile--beauty-calm .metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.panel-profile--beauty-calm .metric {
  display: grid;
  min-height: 126px;
  padding: 18px;
  align-content: space-between;
  align-items: start;
  border-radius: 16px;
  background: var(--color-card);
}

.panel-profile--beauty-calm .metric__value {
  margin-top: 14px;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: -0.05em;
}

.panel-profile--beauty-calm .week-card {
  min-height: 104px;
  border-radius: 20px;
}

.panel-profile--beauty-calm .booking-list {
  gap: 9px;
}

.panel-profile--beauty-calm .booking-row {
  padding: 17px;
  border-radius: 16px;
  transition: border-color 160ms ease, transform 160ms ease;
}

.panel-profile--beauty-calm .booking-row--link:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.panel-profile--beauty-calm .booking-time {
  color: var(--color-accent);
}

.panel-profile--beauty-calm .panel-links {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.panel-profile--beauty-calm .panel-links .button {
  min-height: 44px;
  border-radius: 999px;
}

.panel-profile--beauty-calm input {
  border-radius: 11px;
  background: var(--color-card);
}

.panel-profile--beauty-calm button,
.panel-profile--beauty-calm .button {
  border-radius: 11px;
}

@media (min-width: 761px) {
  .panel-profile--beauty-calm .panel-app {
    transition: grid-template-columns 180ms ease;
  }

  .panel-profile--beauty-calm .panel-sidebar [data-sidebar-toggle] {
    position: absolute;
    top: 18px;
    right: 12px;
    display: grid;
    width: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    background: var(--color-card);
    color: var(--color-secondary);
  }

  .panel-profile--beauty-calm .panel-sidebar [data-sidebar-toggle]:hover,
  .panel-profile--beauty-calm .panel-sidebar [data-sidebar-toggle]:focus-visible {
    color: var(--color-text);
    background: var(--color-inner);
  }

  .panel-profile--beauty-calm .panel-sidebar [data-sidebar-toggle] svg {
    width: 20px;
    height: 20px;
    transition: transform 180ms ease;
  }

  .panel-profile--beauty-calm .panel-sidebar [data-sidebar-toggle][aria-expanded="false"] svg {
    transform: rotate(180deg);
  }

  .panel-profile--beauty-calm .panel-sidebar .brand {
    padding-right: 48px;
  }

  html[data-sidebar="collapsed"] .panel-profile--beauty-calm .panel-app {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  html[data-sidebar="collapsed"] .panel-profile--beauty-calm .panel-sidebar {
    padding-right: 10px;
    padding-left: 10px;
  }

  html[data-sidebar="collapsed"] .panel-profile--beauty-calm .panel-sidebar .brand {
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
  }

  html[data-sidebar="collapsed"] .panel-profile--beauty-calm .brand__copy,
  html[data-sidebar="collapsed"] .panel-profile--beauty-calm .panel-nav__link > span:last-child,
  html[data-sidebar="collapsed"] .panel-profile--beauty-calm .staff-card > span:last-child {
    display: none;
  }

  html[data-sidebar="collapsed"] .panel-profile--beauty-calm .panel-sidebar [data-sidebar-toggle] {
    top: 70px;
    right: 14px;
  }

  html[data-sidebar="collapsed"] .panel-profile--beauty-calm .panel-nav {
    margin-top: 48px;
  }

  html[data-sidebar="collapsed"] .panel-profile--beauty-calm .panel-nav__link {
    padding-right: 7px;
    padding-left: 7px;
    justify-content: center;
    gap: 0;
  }

  html[data-sidebar="collapsed"] .panel-profile--beauty-calm .staff-card {
    padding-right: 7px;
    padding-left: 7px;
    justify-content: center;
  }

  html[data-sidebar="collapsed"] .panel-profile--beauty-calm .panel-sidebar form .button--quiet {
    display: grid;
    width: 100%;
    min-height: 44px;
    padding-right: 6px;
    padding-left: 6px;
    place-items: center;
    font-size: 0.6875rem;
  }

  html[data-sidebar="collapsed"] .panel-profile--beauty-calm .sidebar-logout__label {
    display: none;
  }

  html[data-sidebar="collapsed"] .panel-profile--beauty-calm .sidebar-logout__icon {
    display: inline;
    font-size: 1rem;
  }

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

  .appearance-grid--mode {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .appearance-grid--palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .panel-profile--beauty-calm {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .panel-profile--beauty-calm .panel-app {
    display: block;
  }

  .panel-profile--beauty-calm .panel-sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    width: 100%;
    height: auto;
    min-height: 62px;
    padding: 10px 13px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
  }

  .panel-profile--beauty-calm .panel-sidebar .brand {
    flex: 1 1 auto;
    padding: 0;
  }

  .panel-profile--beauty-calm .panel-sidebar .brand__copy small,
  .panel-profile--beauty-calm .staff-card {
    display: none;
  }

  .panel-profile--beauty-calm .panel-sidebar form {
    width: auto;
    margin: 0;
  }

  .panel-profile--beauty-calm .panel-sidebar form .button--quiet {
    min-height: 40px;
    padding: 8px 12px;
  }

  .panel-profile--beauty-calm .panel-nav {
    position: fixed;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    left: 8px;
    z-index: 30;
    display: grid;
    grid-auto-columns: minmax(72px, 1fr);
    grid-auto-flow: column;
    padding: 5px;
    overflow-x: auto;
    gap: 2px;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    background: var(--color-card);
  }

  .panel-profile--beauty-calm .panel-nav--owner {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-columns: auto;
  }

  .panel-profile--beauty-calm .panel-nav--admin {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: hidden;
  }

  .panel-profile--beauty-calm .panel-nav__link {
    min-height: 51px;
    min-width: 0;
    padding: 5px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    font-size: 0.5625rem;
    text-align: center;
  }

  .panel-profile--beauty-calm .panel-nav__link:hover,
  .panel-profile--beauty-calm .panel-nav__link:focus-visible {
    transform: none;
  }

  .panel-profile--beauty-calm .panel-nav__icon {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
  }

  .panel-profile--beauty-calm .shell {
    width: 100%;
    max-width: none;
    padding: 14px 13px 24px;
  }

  .panel-profile--beauty-calm .shell--auth {
    padding-bottom: 92px;
  }

  .panel-profile--beauty-calm .hero-card {
    min-height: 0;
    padding: 18px;
    border-radius: 18px;
  }

  .panel-profile--beauty-calm h1 {
    font-size: 2.1rem;
  }

  .panel-profile--beauty-calm .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .panel-profile--beauty-calm .metric {
    min-height: 116px;
    padding: 14px;
  }

  .panel-profile--beauty-calm .metric__label {
    font-size: 0.8125rem;
  }

  .panel-profile--beauty-calm .metric__value {
    font-size: 1.65rem;
  }

  .panel-profile--beauty-calm .panel-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .integration-card > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .integration-card .masked {
    overflow-wrap: normal;
  }

  .role-switcher__item {
    border-width: 0;
  }
}

@media (max-width: 380px) {
  .topbar,
  .shell {
    padding-right: 12px;
    padding-left: 12px;
  }

  .card {
    padding: 18px;
  }

  .metric {
    padding: 12px 8px;
  }

  .metric strong {
    font-size: var(--type-title);
  }

  .move-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 600px) {
  .topbar {
    padding-top: 24px;
  }

  .shell {
    padding-top: 24px;
  }

  .card {
    padding: 32px;
  }
}

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

/* Rich role-aware workspace restored from the approved demo. */
.rich-dashboard {
  gap: 14px;
}

.role-switcher {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
}

.role-switcher summary {
  display: flex;
  min-height: 44px;
  padding: 9px 14px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-card);
  color: var(--color-secondary);
  font-size: var(--type-small);
  cursor: pointer;
  list-style: none;
}

.role-switcher summary::-webkit-details-marker {
  display: none;
}

.role-switcher summary strong {
  color: var(--color-text);
}

.role-switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  width: min(290px, calc(100vw - 26px));
  padding: 6px;
  gap: 3px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--color-card);
}

.role-switcher__item {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--color-secondary);
  font-size: var(--type-small);
  font-weight: 750;
  text-decoration: none;
}

.role-switcher__item:hover,
.role-switcher__item:focus-visible,
.role-switcher__item.is-active {
  background: var(--color-card);
  color: var(--color-text);
}

.rich-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
  gap: 24px;
}

.rich-hero h1 {
  max-width: 780px;
}

.hero-chips {
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-chips span {
  padding: 8px 12px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-card);
  color: var(--color-secondary);
  font-size: var(--type-small);
}

.hero-orbit {
  position: relative;
  z-index: 2;
  display: grid;
  width: 154px;
  height: 154px;
  margin-left: auto;
  place-content: center;
  border-width: 0;
  border-radius: 50%;
  text-align: center;
  background: var(--color-card);
}

.hero-orbit svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hero-orbit circle {
  fill: none;
  stroke-width: 8;
}

.hero-orbit__track {
  stroke: var(--color-inner);
}

.hero-orbit__progress {
  stroke: var(--color-accent);
  stroke-linecap: round;
}

.owner-overview h2,
.owner-overview .metric,
.owner-overview .hero-chips,
.owner-overview .role-switcher {
  font-family: var(--font-family);
}

.owner-overview .metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hero-orbit strong,
.hero-orbit span {
  position: relative;
  z-index: 1;
}

.hero-orbit strong {
  font-family: var(--display-font-family);
  font-size: 2.35rem;
  line-height: 1;
}

.hero-orbit span {
  margin-top: 7px;
  color: var(--color-secondary);
  font-size: 0.72rem;
}

.owner-focus-grid,
.master-day-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.95fr);
  align-items: start;
  gap: 14px;
}

.focus-card,
.schedule-card {
  min-width: 0;
  padding: 24px;
}

.section-heading {
  display: flex;
  margin-bottom: 18px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.section-heading h2 {
  margin: 4px 0 0;
}

.section-heading > a {
  color: var(--color-accent);
  font-size: var(--type-small);
  font-weight: 700;
  text-decoration: none;
}

.upcoming-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  padding: 13px 8px;
  gap: 12px;
  border-top: 1px solid var(--color-line);
  color: var(--color-text);
  text-decoration: none;
}

.upcoming-row time {
  color: var(--color-accent);
  font-weight: 800;
}

.upcoming-row span,
.upcoming-row small,
.schedule-booking,
.schedule-booking span,
.schedule-booking small,
.schedule-free,
.schedule-free small {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.upcoming-row small,
.next-guest small {
  color: var(--color-secondary);
}

.load-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.45fr) minmax(120px, 2fr) 46px;
  padding: 10px 0;
  align-items: center;
  gap: 14px;
}

.load-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-inner);
}

.load-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
}

.load-fill--0 { width: 0; }
.load-fill--10 { width: 10%; }
.load-fill--20 { width: 20%; }
.load-fill--30 { width: 30%; }
.load-fill--40 { width: 40%; }
.load-fill--50 { width: 50%; }
.load-fill--60 { width: 60%; }
.load-fill--70 { width: 70%; }
.load-fill--80 { width: 80%; }
.load-fill--90 { width: 90%; }
.load-fill--100 { width: 100%; }

.schedule-card {
  overflow: hidden;
}

.schedule-layout {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.schedule-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  background: var(--color-inner);
}

.schedule-grid__table {
  display: grid;
  width: 100%;
  min-width: var(--schedule-grid-min-width, 282px);
}

.schedule-grid--columns-1 { --schedule-grid-min-width: 282px; grid-template-columns: 72px repeat(1, minmax(210px, 1fr)); }
.schedule-grid--columns-2 { --schedule-grid-min-width: 492px; grid-template-columns: 72px repeat(2, minmax(210px, 1fr)); }
.schedule-grid--columns-3 { --schedule-grid-min-width: 702px; grid-template-columns: 72px repeat(3, minmax(210px, 1fr)); }
.schedule-grid--columns-4 { --schedule-grid-min-width: 912px; grid-template-columns: 72px repeat(4, minmax(210px, 1fr)); }
.schedule-grid--columns-5 { --schedule-grid-min-width: 1122px; grid-template-columns: 72px repeat(5, minmax(210px, 1fr)); }
.schedule-grid--columns-6 { --schedule-grid-min-width: 1332px; grid-template-columns: 72px repeat(6, minmax(210px, 1fr)); }
.schedule-grid--columns-7 { --schedule-grid-min-width: 1542px; grid-template-columns: 72px repeat(7, minmax(210px, 1fr)); }
.schedule-grid--columns-8 { --schedule-grid-min-width: 1752px; grid-template-columns: 72px repeat(8, minmax(210px, 1fr)); }
.schedule-grid--columns-9 { --schedule-grid-min-width: 1962px; grid-template-columns: 72px repeat(9, minmax(210px, 1fr)); }
.schedule-grid--columns-10 { --schedule-grid-min-width: 2172px; grid-template-columns: 72px repeat(10, minmax(210px, 1fr)); }
.schedule-grid--columns-11 { --schedule-grid-min-width: 2382px; grid-template-columns: 72px repeat(11, minmax(210px, 1fr)); }
.schedule-grid--columns-12 { --schedule-grid-min-width: 2592px; grid-template-columns: 72px repeat(12, minmax(210px, 1fr)); }

.schedule-grid__corner,
.schedule-grid__master,
.schedule-grid__time,
.schedule-grid__cell {
  min-width: 0;
  padding: 12px;
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.schedule-grid__corner,
.schedule-grid__master {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-card);
}

.schedule-grid__corner {
  left: 0;
  z-index: 4;
  color: var(--color-secondary);
  font-size: var(--type-small);
}

.schedule-grid__master {
  display: grid;
  gap: 3px;
}

.schedule-grid__master small {
  color: var(--color-secondary);
}

.schedule-grid__master strong,
.schedule-booking strong,
.schedule-booking span,
.schedule-booking small,
.schedule-free strong,
.schedule-free small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.schedule-grid__time {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-inner);
  color: var(--color-secondary);
  font-size: var(--type-small);
  font-weight: 750;
}

.schedule-grid__cell {
  display: grid;
  min-height: 94px;
  align-content: start;
  gap: 7px;
}

.schedule-booking,
.schedule-free {
  padding: 11px;
  border-radius: 12px;
  color: var(--color-text);
  text-decoration: none;
}

.schedule-booking {
  border-left: 3px solid var(--color-accent);
  background: var(--color-card);
}

.schedule-free {
  border: 1px dashed color-mix(in srgb, var(--color-accent) 55%, var(--color-line));
  background: var(--color-card);
  text-align: center;
}

.schedule-empty {
  align-self: center;
  color: var(--color-secondary);
  text-align: center;
}

.day-timeline {
  display: grid;
  gap: 9px;
}

.day-timeline__item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  padding: 15px;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--color-line);
  border-radius: 15px;
  background: var(--color-inner);
  color: var(--color-text);
  text-decoration: none;
}

.day-timeline__item time {
  color: var(--color-accent);
  font-weight: 800;
}

.day-timeline__item span {
  display: grid;
  gap: 4px;
}

.day-timeline__item small,
.day-timeline__empty {
  color: var(--color-secondary);
}

.day-timeline__item--free {
  border-style: dashed;
}

.next-guest {
  align-content: start;
}

.next-guest__avatar {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 20px 0 14px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-card);
  font-weight: 850;
}

.intentional-empty,
.fixture-error {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.intentional-empty__mark,
.fixture-error__mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-inner);
  color: var(--color-accent);
  font-size: var(--type-title);
  font-weight: 800;
}

.fixture-error {
  min-height: min(520px, calc(100vh - 96px));
  padding: clamp(24px, 6vw, 64px);
  align-content: center;
}

.fixture-error__mark {
  border-color: var(--color-bad);
  color: var(--color-bad);
}

.fixture-error h1 {
  margin-top: 6px;
}

.fixture-error .secondary {
  max-width: 680px;
  margin: 14px 0 22px;
}

.booking-main,
.booking-main h2,
.booking-main p,
.operational-card,
.operational-card h2,
.operational-card p,
.day-timeline__item span,
.day-timeline__item strong,
.settings-card span,
.integration-card,
.integration-card h2,
.attention-list li,
.attention-list span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.owner-view-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 360px);
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--color-inner);
}

.owner-view-tabs a {
  display: grid;
  min-height: 44px;
  padding: 9px 14px;
  place-items: center;
  border-radius: 10px;
  color: var(--color-secondary);
  font-size: var(--type-small);
  font-weight: 800;
  text-decoration: none;
}

.owner-view-tabs a:hover,
.owner-view-tabs a:focus-visible,
.owner-view-tabs a.is-active,
.owner-view-tabs a[aria-current="page"] {
  background: var(--color-card);
  color: var(--color-text);
  outline: 1px solid var(--color-line);
}

.employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 14px;
}

.employee-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.employee-card__avatar {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-inner);
  color: var(--color-accent);
  font-weight: 850;
}

.employee-card__copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.employee-card__copy h2,
.employee-card__copy p {
  margin: 0;
}

.employee-card__action {
  grid-column: 2;
  color: var(--color-accent);
  font-size: var(--type-small);
  font-weight: 800;
  text-decoration: none;
}

.employee-card__action:hover,
.employee-card__action:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 900px) {
  .rich-hero,
  .owner-focus-grid,
  .master-day-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-orbit {
    width: 124px;
    height: 124px;
    margin: 0;
  }

  .intentional-empty,
  .fixture-error {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .role-switcher {
    display: none;
  }

  .role-switcher__item {
    min-width: 0;
  }

  .role-switcher__suffix {
    display: none;
  }

  .rich-hero {
    gap: 18px;
  }

  .owner-overview .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .panel-profile--beauty-calm .owner-overview .metric {
    display: grid;
    min-height: 112px;
    align-content: space-between;
  }

  .panel-profile--beauty-calm .owner-overview .metric__value {
    margin-top: 14px;
  }

  .owner-overview .metric:nth-child(3):last-child {
    grid-column: 1 / -1;
    min-height: 94px;
  }

  .owner-overview .rich-hero {
    grid-template-columns: minmax(0, 1fr) 88px;
    align-items: start;
    gap: 12px;
  }

  .panel-profile--beauty-calm .owner-overview .hero-card {
    padding: 16px;
  }

  .panel-profile--beauty-calm .owner-overview h1 {
    font-size: 1.9rem;
  }

  .owner-overview .hero-chips {
    margin-top: 12px;
    gap: 6px;
  }

  .owner-overview .hero-chips span {
    padding: 6px 9px;
  }

  .owner-overview .hero-orbit {
    width: 88px;
    height: 88px;
  }

  .owner-overview .hero-orbit strong {
    font-size: 1.5rem;
  }

  .owner-overview .hero-orbit span {
    margin-top: 4px;
    font-size: 0.625rem;
  }

  .focus-card,
  .schedule-card {
    padding: 17px;
  }

  .schedule-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
    gap: 10px;
  }

  .schedule-filters .button {
    width: 100%;
  }

  .panel-profile--beauty-calm .dashboard:has(> .schedule-layout) > .hero-card {
    padding: 16px;
  }

  .panel-profile--beauty-calm .dashboard:has(> .schedule-layout) > .hero-card h1 {
    font-size: 1.9rem;
  }

  .panel-profile--beauty-calm .dashboard:has(> .schedule-layout) > .hero-card .secondary {
    margin-top: 6px;
  }

  .schedule-grid__corner,
  .schedule-grid__master,
  .schedule-grid__time,
  .schedule-grid__cell {
    padding: 9px;
  }

  .schedule-grid__cell {
    min-height: 80px;
  }

  .schedule-booking,
  .schedule-free {
    padding: 8px;
  }

  .section-heading {
    display: grid;
  }

  .load-row {
    grid-template-columns: 82px minmax(90px, 1fr) 40px;
    gap: 9px;
  }

  .schedule-grid__table {
    width: 100%;
  }

  .day-timeline__item {
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 13px;
  }
}

/* Public booking home: approved Lumi light landing fused with Direction B.
   Keep the editorial dark treatment inside the photographed hero only. */
.public-book-home .public-header {
  position: relative;
  z-index: 4;
  min-height: 78px;
  border-bottom: 1px solid var(--public-line);
  background: var(--public-cream);
}

.public-book-home .public-header__actions {
  display: flex;
  align-items: center;
}

.public-header__booking,
.public-home-cta__primary,
.public-home-cta__secondary,
.public-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 750;
}

.public-header__booking {
  color: var(--color-on-accent);
  background: var(--public-berry);
}

.public-book-home .public-home-hero.public-home-strip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  align-items: center;
  gap: clamp(42px, 6vw, 88px);
  height: auto;
  min-height: min(650px, calc(100vh - 112px));
  margin-top: 22px;
  padding: clamp(54px, 7vw, 96px);
  border-radius: 28px;
  color: var(--color-card);
  background: var(--public-hero-base);
}

.public-book-home .public-home-hero > img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-book-home .public-home-hero::after {
  display: none;
}

.public-home-hero__shade {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: color-mix(in srgb, var(--public-hero-base) 56%, transparent);
}

.public-book-home .public-home-hero__copy {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 650px;
  padding: 0;
  color: var(--color-card);
}

.public-book-home .public-home-hero__copy .public-kicker {
  color: var(--color-card);
}

.public-book-home .public-home-hero h1 {
  max-width: 11ch;
  font-size: clamp(3.4rem, 5.8vw, 6rem);
}

.public-book-home .public-home-hero__copy > p {
  max-width: 500px;
  margin: 22px 0 30px;
  color: var(--color-card);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.55;
}

.public-book-home .public-hero-cta {
  min-height: 52px;
  color: var(--color-on-accent);
  background: var(--public-berry);
}

.public-hero-secondary {
  padding-inline: 4px;
  color: var(--color-card);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.public-book-home .public-home-section {
  padding: clamp(76px, 8vw, 112px) 0;
}

.public-book-home .public-home-section__heading {
  align-items: end;
  margin-bottom: clamp(30px, 4vw, 48px);
}

.public-book-home .public-home-section__heading h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.public-book-home .public-home-section__heading > p {
  max-width: 360px;
  line-height: 1.55;
}

.public-section-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--public-berry);
  border-radius: 999px;
  color: var(--public-berry);
  text-decoration: none;
}

.public-home-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.public-home-service {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--public-card-line);
  border-radius: 22px;
  color: var(--public-card-ink);
  background: var(--public-paper);
  text-decoration: none;
}

.public-home-service > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.public-home-service > span {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 190px;
  padding: 25px;
}

.public-home-service small {
  color: var(--public-card-muted);
}

.public-home-service strong {
  font: 500 clamp(1.55rem, 2.4vw, 2.15rem)/1.08 var(--display-font-family);
}

.public-home-service em {
  align-self: end;
  margin-top: auto;
  color: var(--public-berry);
  font-size: .86rem;
  font-style: normal;
  font-weight: 760;
}

.public-book-home .public-home-masters__track {
  gap: clamp(24px, 4vw, 56px);
}

.public-book-home .public-home-master {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 20px;
  overflow: visible;
  border: 1px solid var(--public-cream);
  border-radius: 0;
  background: color-mix(in srgb, var(--public-paper) 0%, transparent);
  text-align: center;
}

.public-book-home .public-home-master__portrait {
  width: min(100%, 250px);
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--public-card-line);
  border-radius: 50%;
  background: var(--public-paper);
}

.public-book-home .public-home-master__portrait > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-book-home .public-home-master > span:last-child {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0;
}

.public-book-home .public-home-master strong {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.public-book-home .public-home-master small {
  color: var(--public-berry);
  font-weight: 760;
}

.public-book-home .public-home-master em {
  color: var(--public-card-muted);
}

.public-home-trust {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  gap: clamp(48px, 7vw, 100px);
  align-items: start;
}

.public-home-about__intro {
  max-width: 720px;
  margin: 0;
  color: var(--public-muted);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.7;
}

.public-home-about__hours {
  margin: 24px 0 18px;
  color: var(--public-card-ink);
  font-weight: 760;
}

.public-book-home .public-home-about ul {
  grid-template-columns: 1fr;
}

.public-book-home .public-home-about li {
  min-height: 88px;
  padding: 20px;
}

.public-home-reviews .public-home-section__heading {
  margin-bottom: 22px;
}

.public-book-home .public-home-reviews .public-review-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

.public-book-home .public-review-card {
  border-radius: 18px;
}

.public-home-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  margin-top: clamp(74px, 8vw, 110px);
  padding: clamp(38px, 5vw, 64px);
  border-radius: 26px;
  color: var(--color-on-accent);
  background: var(--public-berry);
}

.public-home-cta .public-kicker,
.public-home-cta p {
  color: var(--color-on-accent);
}

.public-home-cta h2 {
  margin: 0;
  font: 500 clamp(2.5rem, 4.6vw, 4.6rem)/1 var(--display-font-family);
  letter-spacing: -.04em;
}

.public-home-cta p {
  margin: 14px 0 0;
  line-height: 1.55;
}

.public-home-cta > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.public-home-cta__primary {
  min-height: 52px;
  color: var(--public-berry);
  background: var(--public-paper);
}

.public-home-cta__secondary {
  min-height: 52px;
  border: 1px solid var(--color-on-accent);
  color: var(--color-on-accent);
}

.public-site .public-footer.public-footer--home {
  display: grid;
  grid-template-columns: minmax(240px, 1.25fr) repeat(3, minmax(150px, 1fr));
  align-items: start;
  gap: clamp(26px, 4vw, 60px);
  margin-top: 28px;
  padding: 54px 0 30px;
  white-space: normal;
}

.public-footer--home > div {
  align-content: start;
}

.public-footer--home p {
  max-width: 390px;
  margin: 8px 0 0;
  color: var(--public-muted);
  line-height: 1.55;
}

.public-footer--home a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--public-muted);
  text-decoration: none;
}

.public-site .public-footer.public-footer--home > small {
  grid-column: 1 / -1;
  padding-top: 24px;
  border-top: 1px solid var(--public-line);
}

.public-book-home a:focus-visible,
.public-book-home button:focus-visible,
.public-book-home select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--public-berry) 38%, transparent);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .public-book-home .public-home-hero.public-home-strip {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 30px;
    padding: 44px;
  }

  .public-book-home .public-home-hero h1 {
    font-size: clamp(3rem, 6vw, 4.5rem);
  }

  .public-home-trust {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-site .public-footer.public-footer--home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 800px) {
  .public-book-home .public-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 68px;
    gap: 10px;
  }

  .public-book-home .public-header__actions {
    display: flex;
  }

  .public-header__booking {
    min-height: 44px;
    padding-inline: 15px;
    font-size: .78rem;
  }

  .public-book-home .public-home-hero.public-home-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    height: auto;
    min-height: 0;
    margin-top: 12px;
    overflow: visible;
    padding: 0 0 24px;
    border-radius: 20px;
    background: var(--public-paper);
  }

  .public-book-home .public-home-hero > img,
  .public-home-hero__shade {
    height: 390px;
    border-radius: 20px 20px 0 0;
  }

  .public-home-hero__shade {
    background: color-mix(in srgb, var(--public-hero-base) 58%, transparent);
  }

  .public-book-home .public-home-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: end;
    min-height: 390px;
    padding: 34px 24px;
  }

  .public-book-home .public-home-hero h1 {
    font-size: clamp(2.8rem, 13vw, 4.7rem);
  }

  .public-book-home .public-home-hero__copy > p {
    margin-block: 16px 22px;
  }

  .public-book-home .public-home-section {
    padding: 68px 0;
  }

  .public-book-home .public-home-section__heading {
    display: grid;
    align-items: start;
    gap: 12px;
    margin-bottom: 28px;
  }

  .public-book-home .public-home-section__heading h2 {
    font-size: clamp(2.35rem, 11vw, 3.55rem);
  }

  .public-home-services__grid {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
  }

  .public-home-service {
    flex: 0 0 min(78vw, 290px);
    scroll-snap-align: start;
  }

  .public-home-service > span {
    min-height: 176px;
    padding: 21px;
  }

  .public-book-home .public-home-masters__track {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 12px;
    overflow: visible;
  }

  .public-book-home .public-home-master {
    grid-template-columns: 88px minmax(0, 1fr);
    justify-items: stretch;
    gap: 16px;
    padding: 12px;
    border: 1px solid var(--public-card-line);
    border-radius: 18px;
    background: var(--public-paper);
    text-align: left;
  }

  .public-book-home .public-home-master > span:last-child {
    min-width: 0;
  }

  .public-book-home .public-home-master strong,
  .public-book-home .public-home-master small,
  .public-book-home .public-home-master em {
    overflow-wrap: anywhere;
  }

  .public-book-home .public-home-master__portrait {
    width: 88px;
  }

  .public-book-home .public-home-master > span:last-child {
    justify-items: start;
    align-content: center;
  }

  .public-home-cta {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    margin-top: 66px;
    padding: 34px 24px;
    border-radius: 22px;
  }

  .public-home-cta > div:last-child {
    display: grid;
  }

  .public-site .public-footer.public-footer--home {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 42px 0 24px;
    font-size: .72rem;
  }

  .public-footer__brand,
  .public-site .public-footer.public-footer--home > small {
    grid-column: 1;
  }
}

@media (max-width: 460px) {
  .public-book-home .public-home-hero > img,
  .public-home-hero__shade,
  .public-book-home .public-home-hero__copy {
    min-height: 350px;
    height: 350px;
  }

  .public-book-home .public-home-hero h1 {
    font-size: clamp(2.45rem, 12.1vw, 3.55rem);
  }

  .public-hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 8px;
  }

  .public-book-home .public-hero-cta {
    width: auto;
    gap: 12px;
    justify-content: space-between;
    padding-inline: 14px;
    font-size: .82rem;
  }

  .public-hero-secondary {
    min-height: 44px;
    padding-inline: 4px;
    white-space: nowrap;
    font-size: .84rem;
  }
}

@media (max-width: 360px) {
  .public-book-home .public-hero-cta span {
    display: none;
  }
}

/* --- Отклик на нажатие и защита от залипающего hover -------------------
   На телефоне hover не существует как состояние: браузер выдаёт его по
   касанию, и подсветка остаётся висеть после ухода пальца. Ставим hover
   только для настоящего курсора, а тактильный отклик даём через :active.
   390 px — основная ширина, поэтому нажатие важнее наведения. */

@media (hover: none), (pointer: coarse) {
  .public-action-card:hover img,
  .public-master-card:hover > img,
  .public-service-card:hover img,
  .public-hero-cta:hover span { transform: none; }
  .public-date-card:hover { transform: none; }
}

.public-action-card,
.public-service-card,
.public-master-card,
.public-branch-card,
.public-date-card,
.public-slot,
.public-hero-cta {
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.public-action-card:active,
.public-service-card:active,
.public-master-card:active,
.public-branch-card:active,
.public-date-card:active,
.public-slot:active,
.public-hero-cta:active { transform: scale(0.985); }

/* --- Подпись внизу рабочего экрана ------------------------------------
   Панель без низа выглядит обрезанной: непонятно, кончилась страница или
   не догрузилась. Строка отвечает, чей это инструмент, и даёт две ссылки,
   которые в панели больше нигде не лежат. */

.panel-footer {
  /* Панель разложена сеткой «боковая + содержимое». Без этой строки подпись
     падает в первую колонку и жмётся к левому краю шириной с сайдбар. */
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 30px 26px;
  color: var(--color-secondary);
  font-size: .82rem;
}

/* На странице входа нет боковой панели и нет колонки содержимого, поэтому
   подпись растягивается во всю ширину, а по центру собирается её начинка. */
.panel-app:not(:has(.panel-sidebar)) .panel-footer {
  max-width: none;
  justify-content: center;
  gap: 10px 20px;
}

/* Под боковой панелью подпись начинается там же, где содержимое. */
.panel-app:has(.panel-sidebar) .panel-footer { padding-left: 278px; }

@media (max-width: 760px) {
  .panel-app:has(.panel-sidebar) .panel-footer { padding-left: 18px; }
}

.panel-footer__links { display: flex; flex-wrap: wrap; gap: 18px; }

.panel-footer a {
  color: var(--color-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.panel-footer a:hover,
.panel-footer a:focus-visible { color: var(--color-accent); border-bottom-color: currentColor; }

@media (max-width: 560px) {
  .panel-footer { padding: 18px 18px 22px; }
}

/* Карточка одного сотрудника: кто он и что с ним можно сделать. */
.staff-profile__hero {
  display: flex;
  align-items: center;
  gap: 20px;
}

.staff-profile__avatar {
  display: grid;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 1.5rem;
  font-weight: 600;
}

.staff-profile__block { margin-top: 18px; }

.staff-profile__block .button { margin-top: 14px; }

/* Имя в списке сотрудников — такая же ссылка, как и вся карточка. */
.employee-card__name { color: inherit; text-decoration: none; }

.employee-card__name:hover,
.employee-card__name:focus-visible { color: var(--color-accent); }

@media (max-width: 560px) {
  .staff-profile__hero { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Оформление стоит первой строкой рабочей области и по центру: его меняют
   редко, но искать в подвале приходилось долго. */
.appearance-strip {
  display: flex;
  justify-content: center;
  margin: 0 0 18px;
}

/* --- Переключатель оформления ------------------------------------------
   Три названных режима вместо палитры и темы по отдельности. Обычные
   ссылки: без скриптов, без мигания чужой темой на первой отрисовке. */

.appearance-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-inner);
}

.appearance-switch a {
  padding: 5px 13px;
  border-radius: 999px;
  color: var(--color-secondary);
  text-decoration: none;
  font-size: .78rem;
  line-height: 1.5;
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease;
}

.appearance-switch a:hover,
.appearance-switch a:focus-visible { color: var(--color-text); }

.appearance-switch a[aria-current="true"] {
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-line);
  padding: 4px 12px;
}

.appearance-switch a:active { transform: scale(.97); }

/* Public booking journey: mirror the approved narrow and 1280 px canvases. */
.public-site--booking {
  display: flex;
  flex-direction: column;
  width: min(1280px, 100%);
  min-height: 100vh;
}

.public-booking-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--public-line);
  background: var(--public-paper);
}

.public-booking-brand,
.public-booking-back,
.public-booking-my {
  display: inline-flex;
  align-items: center;
  color: var(--public-muted);
  text-decoration: none;
}

.public-booking-brand {
  gap: 9px;
  color: var(--public-ink);
  font: 400 1.32rem/1 var(--display-font-family);
}

.public-booking-brand__mark { width: 22px; height: 22px; object-fit: contain; }
.public-booking-back { gap: 7px; font-size: .84rem; }
.public-booking-back > span:first-child { font-size: 1.1rem; }
.public-booking-my { font-size: .81rem; }

.public-site--booking > .public-progress {
  width: auto;
  margin: 22px 18px 0;
  padding: 0;
}

.public-site--booking > .public-chosen {
  gap: 6px;
  margin: 14px 18px 0;
  padding: 0;
}

.public-site--booking .public-choice-chip {
  display: inline-flex;
  min-width: 0;
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  color: var(--public-muted);
  background: var(--color-inner);
  font-size: 12.5px;
  line-height: 1.2;
}

.public-site--booking .public-booking-layout {
  display: block;
  flex: 1 0 auto;
  padding: 0 18px 26px;
}

.public-site--booking .public-journey {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 174px);
  padding-bottom: 0;
}

.public-site--booking .public-journey-heading { max-width: 100%; padding: 18px 0; }
.public-site--booking .public-journey-heading h1,
.public-booking--confirmed .public-success h1 {
  font-family: var(--display-font-family);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.02em;
}

.public-site--booking .public-journey-heading p {
  margin-top: 10px;
  font-size: .84rem;
  line-height: 1.45;
}
.public-site--booking .public-kicker { margin-bottom: 10px; }

.public-site--booking .public-service-grid,
.public-site--booking .public-master-grid { grid-template-columns: 1fr; gap: 8px; }

.public-site--booking .public-service-card--row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-height: 0;
  padding: 10px 13px 10px 10px;
  border: 1px solid var(--public-card-line);
  border-radius: 15px;
  color: var(--public-card-ink);
  background: var(--public-paper);
}

.public-site--booking .public-service-card--row img {
  width: 76px;
  height: 76px;
  aspect-ratio: 1;
  border-radius: 11px;
  object-fit: cover;
}

.public-site--booking .public-service-card--row .public-service-card__copy {
  position: static;
  gap: 3px;
  padding: 0;
}

.public-site--booking .public-service-card--row .public-service-card__copy strong {
  color: var(--public-card-ink);
  font-family: var(--font-family);
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.25;
}

.public-site--booking .public-service-card--row .public-service-card__copy small {
  color: var(--public-card-muted);
  font-size: .75rem;
}

.public-site--booking .public-master-card--row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 0;
  padding: 14px 16px;
  border: 1px solid var(--public-card-line);
  border-radius: 15px;
  background: var(--public-paper);
}

.public-site--booking .public-master-card--any {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
}
.public-site--booking .public-master-card--any .public-master-card__meta {
  min-height: 0;
  gap: 3px;
  padding: 0;
}
.public-site--booking .public-master-card--any .public-master-card__meta strong {
  margin: 0;
  font-size: 1.31rem;
}
.public-site--booking .public-master-card--any .public-master-card__meta span { font-size: .78rem; }

/* «Любой мастер» предложен по умолчанию: заливка подсказывает, что шаг
   можно не проходить. Выбор при этом всё равно совершает переход. */
.public-site--booking .public-master-card--any.is-selected {
  background: var(--public-berry);
  border-color: var(--public-berry);
}
.public-site--booking .public-master-card--any.is-selected .public-master-card__meta strong,
.public-site--booking .public-master-card--any.is-selected .public-master-card__meta span,
.public-site--booking .public-master-card--any.is-selected .public-master-card__arrow {
  color: var(--public-card-ink);
}

.public-site--booking .public-master-card__select { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.public-site--booking .public-master-card__avatar {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  color: var(--public-muted);
  background: var(--color-inner);
  font: 500 1.06rem var(--display-font-family);
}
.public-site--booking .public-master-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.public-site--booking .public-master-card__arrow { display: flex; color: var(--public-card-ink); }
.public-site--booking .public-master-card__profile {
  position: relative;
  z-index: 2;
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: var(--public-berry);
  font-size: .72rem;
  text-decoration: none;
}
.public-site--booking .public-master-card__profile i {
  display: inline-flex;
  width: 15px;
  height: 15px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--public-berry);
  border-radius: 50%;
  font-size: .62rem;
  font-style: normal;
}

.public-site--booking .public-master-card--row .public-master-card__portrait,
.public-site--booking .public-master-card--row .public-master-card__portrait img {
  width: 76px;
  height: 76px;
  aspect-ratio: 1;
  border-radius: 11px;
  object-fit: cover;
}

.public-site--booking .public-master-card--row .public-master-card__meta {
  min-height: 0;
  gap: 3px;
  padding: 0;
}

.public-site--booking .public-master-card--row .public-master-card__meta strong {
  margin: 0;
  font-family: var(--display-font-family);
  font-size: 1.19rem;
  font-weight: 500;
  line-height: 1.15;
}
.public-site--booking .public-master-card--row .public-master-card__meta span { font-size: .75rem; }

.public-site--booking .public-slot-groups { display: flex; flex-direction: column; gap: 16px; }
.public-site--booking .public-slot-group { display: flex; flex-direction: column; gap: 8px; }
.public-site--booking .public-slot-group h2 {
  margin: 0;
  padding: 0 2px;
  color: var(--public-card-muted);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.public-site--booking .public-slot-group .public-slots {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}
.public-site--booking .public-slot span {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 12px;
  font-size: .91rem;
}
.public-site--booking .public-slot.is-selected span {
  border-color: var(--public-berry);
  background: var(--public-berry);
  font-weight: 600;
}
.public-site--booking .public-slot-master { margin: 12px 2px 0; color: var(--public-muted); font-size: .78rem; }

.public-site--booking :is(.public-service-card--row, .public-master-card--row).is-selected {
  border-color: var(--public-berry);
  background: var(--public-berry);
}

.public-site--booking .public-calendar-day {
  gap: 2px;
  border-radius: 12px;
  color: var(--public-muted);
}
.public-site--booking .public-calendar-day.is-past { color: var(--public-card-muted); opacity: .55; }
.public-site--booking .public-calendar-day.is-available {
  border: 1px solid var(--public-card-line);
  color: var(--public-card-ink);
  background: var(--public-paper);
}
.public-site--booking .public-calendar-day.is-selected {
  border-color: var(--public-berry);
  background: var(--public-berry);
}
.public-site--booking .public-calendar-day i { width: 4px; height: 4px; }

.public-step-foot {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding-top: 18px;
}

.public-site--booking .public-step-foot .public-submit {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  justify-content: center;
  border-radius: 999px;
  color: var(--public-card-ink);
  background: var(--public-berry);
  font-size: 1rem;
  font-weight: 600;
}

.public-site--booking .public-confirm {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.public-booking-footer {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  padding: 18px;
  border-top: 1px solid var(--public-line);
  font-size: .72rem;
}
.public-booking-footer a { color: var(--public-muted); }
.public-booking--confirmed .public-booking-header { margin-bottom: 0; }

@media (min-width: 801px) {
  .public-booking-header { padding: 18px 60px; }
  .public-booking-brand { font-size: 1.44rem; }
  .public-booking-brand__mark { width: 24px; height: 24px; }
  .public-booking-back, .public-booking-my { font-size: .84rem; }

  .public-site--booking > .public-progress { max-width: 520px; margin: 40px 60px 0; }
  .public-site--booking > .public-chosen { max-width: calc(100% - 120px); margin: 16px 60px 0; }

  /* Собранный визит — правая колонка, а не хвост под списком. Без display
     здесь grid-template-columns молча не работал: блочная раскладка из
     узкого экрана перебивала его по весу селектора. */
  .public-site--booking .public-booking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 44px;
    padding: 0 60px 52px;
    align-items: start;
  }

  .public-site--booking .public-journey { min-height: 650px; }
  .public-site--booking .public-journey-heading { padding: 18px 0 26px; }
  .public-site--booking .public-journey-heading h1,
  .public-booking--confirmed .public-success h1 { font-size: 46px; }

  .public-site--booking .public-service-grid:has(.public-service-card--row),
  .public-site--booking .public-master-grid { grid-template-columns: 1fr; gap: 10px; }

  .public-site--booking .public-service-card--row,
  .public-site--booking .public-master-card--row {
    border-radius: 16px;
  }
  .public-site--booking .public-service-card--row {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 18px;
    padding: 12px 20px 12px 12px;
  }
  .public-site--booking .public-master-card--row {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 14px 16px;
  }

  .public-site--booking .public-master-card__avatar {
    width: 52px;
    height: 52px;
  }

  .public-site--booking .public-service-card--row img {
    width: 92px;
    height: 92px;
    border-radius: 12px;
  }

  .public-site--booking .public-service-card--row .public-service-card__copy strong,
  .public-site--booking .public-master-card--row .public-master-card__meta strong { font-size: 1.06rem; }
  .public-site--booking .public-service-card--row .public-service-card__copy small,
  .public-site--booking .public-master-card--row .public-master-card__meta span { font-size: .81rem; }
  .public-site--booking .public-slot-group .public-slots { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Номер шага озвучивается вспомогательными технологиями, но не рисуется:
   на холсте о шаге сообщает только полоска сверху. */
.public-site--booking .public-journey-heading .public-kicker {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* Первый экран /book: плашка услуги во всю ширину, подпись поверх снимка.
   Раньше карточки лежали лентой вбок с текстом под фотографией — это
   не совпадало ни с холстом, ни с остальными экранами пути. */
.public-service-tiles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.public-service-tile {
  position: relative;
  display: block;
  height: 136px;
  overflow: hidden;
  border-radius: 18px;
  color: var(--public-paper);
  text-decoration: none;
}
.public-service-tile > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.public-service-tile__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 32%, var(--public-tile-shade) 100%);
}
.public-service-tile__copy {
  position: absolute;
  right: 54px;
  bottom: 15px;
  left: 20px;
}
.public-service-tile__copy strong {
  display: block;
  font: 500 1.69rem/1.1 var(--display-font-family);
}
.public-service-tile__copy small {
  display: block;
  margin-top: 3px;
  font-size: .81rem;
}
.public-service-tile__arrow {
  position: absolute;
  right: 18px;
  bottom: 17px;
  display: flex;
}
.public-service-tile--plain {
  border: 1px solid var(--public-card-line);
  background: var(--public-paper);
  color: var(--public-card-ink);
}
.public-service-tile--plain .public-service-tile__shade { display: none; }

/* Номер шага на первом экране тоже озвучивается, но не рисуется. */
.public-book-home .public-home-services .public-kicker {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* Кнопка шага стоит на месте всегда: пока выбор не сделан — приглушена.
   Пустое место внизу экрана не объясняет, чего от гостьи ждут. */
.public-submit.is-waiting {
  background: var(--public-inner);
  color: var(--public-card-muted);
  cursor: default;
  pointer-events: none;
}

/* ——— Витрина: шапка ————————————————————————————————————————————————
   Имя салона слева, «Мои записи» и кнопка справа. На узком экране кнопка
   уходит: она уже стоит на обложке, вторая подряд ничего не добавляет. */
.public-home-header .public-booking-brand__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.public-home-header .public-booking-brand__copy strong {
  font: 400 1.44rem/1 var(--display-font-family);
}
.public-home-header .public-booking-brand__copy small {
  color: var(--public-card-muted);
  font-size: .59rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.public-home-header__nav {
  display: flex;
  align-items: center;
  gap: 26px;
  color: var(--public-muted);
  font-size: .84rem;
}
.public-home-header__nav > a { color: inherit; text-decoration: none; }
.public-home-header__cta {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  padding: 0 22px;
  border-radius: 999px;
  color: var(--color-on-accent);
  background: var(--public-berry);
  font-size: .9rem;
  font-weight: 650;
}

/* ——— Витрина: мастера ——————————————————————————————————————————————
   Круглый портрет и имя. Специализацию владелец убрал: на обложке она
   ничего не решает, а на карточке мастера сказана целиком. */
.public-home-masters__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.public-book-home .public-home-masters__grid .public-home-master {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: var(--public-transparent);
  text-align: center;
}
.public-book-home .public-home-masters__grid .public-home-master__portrait {
  width: 148px;
  height: 148px;
  overflow: hidden;
  border-radius: 50%;
}
.public-book-home .public-home-masters__grid .public-home-master strong {
  font: 400 1.31rem/1.1 var(--display-font-family);
}
@media (min-width: 801px) {
  /* Заголовок и «Посмотреть всех» стоят в строку только там, где для них
     есть ширина: на телефоне кнопка наезжала на заголовок. */
  .public-book-home .public-home-masters .public-home-section__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
  }
}
.public-footer--slim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(48px, 7vw, 88px);
  padding: 30px 0 34px;
  border-top: 1px solid var(--public-line);
  color: var(--public-muted);
  font-size: .81rem;
}
.public-footer--slim a { color: inherit; text-decoration: none; }

/* ——— Шаг «Что добавим?» ————————————————————————————————————————————
   Добавка цепляется за результат процедуры, а не за саму процедуру:
   к маникюру идёт френч, к покрытию — снятие. Список приходит из конфига
   салона, поэтому у салона без добавок этого шага просто нет. */
.public-extra-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.public-extra-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--public-card-line);
  border-radius: 15px;
  color: var(--public-card-ink);
  background: var(--public-paper);
  text-decoration: none;
}
.public-extra-card:not(:has(img)) { grid-template-columns: minmax(0, 1fr) auto; }
.public-extra-card > img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
}
.public-extra-card__copy { display: block; min-width: 0; }
.public-extra-card__copy strong {
  display: block;
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.25;
}
.public-extra-card__copy small {
  display: block;
  margin-top: 3px;
  color: var(--public-card-muted);
  font-size: .75rem;
  line-height: 1.35;
}
.public-extra-card__box {
  width: 21px;
  height: 21px;
  border: 1.5px solid var(--public-card-line);
  border-radius: 7px;
}
.public-extra-card.is-selected {
  border-color: var(--public-berry);
  background: var(--public-berry);
}
.public-extra-card.is-selected .public-extra-card__copy small { color: var(--public-card-ink); }
.public-extra-card.is-selected .public-extra-card__box {
  border-color: var(--public-card-ink);
  background: var(--public-card-ink);
}
.public-skip-link {
  display: block;
  padding: 10px;
  color: var(--public-berry);
  font-size: .84rem;
  text-align: center;
  text-decoration: none;
}
.public-step-foot__note {
  margin: 9px 0 0;
  color: var(--public-card-muted);
  font-size: .72rem;
  line-height: 1.4;
  text-align: center;
}

/* ——— Шаг «Как вас записать?» ————————————————————————————————————————
   На узком экране собранный визит показан прямо в потоке: правой колонки
   там нет, а проверить выбор перед отправкой гостья должна. */
.public-visit-summary {
  overflow: hidden;
  border: 1px solid var(--public-card-line);
  border-radius: 16px;
  color: var(--public-card-ink);
  background: var(--public-paper);
}
.public-visit-summary__row,
.public-visit-summary__total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--public-card-line);
}
.public-visit-summary__total { border-bottom: 0; }
.public-visit-summary__row small,
.public-visit-summary__total span {
  display: block;
  color: var(--public-card-muted);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.public-visit-summary__total span {
  font-size: .9rem;
  letter-spacing: 0;
  text-transform: none;
}
.public-visit-summary__row strong,
.public-visit-summary__total strong {
  display: block;
  margin-top: 3px;
  font-size: .9rem;
  font-weight: 500;
}
.public-visit-summary__total strong { margin-top: 0; }
.public-visit-summary__row > a {
  color: var(--public-berry);
  font-size: .78rem;
  text-decoration: none;
}

.public-promo { margin-top: 18px; }
.public-promo > summary {
  color: var(--public-berry);
  cursor: pointer;
  font-size: .84rem;
  list-style: none;
}
.public-promo > summary::-webkit-details-marker { display: none; }
.public-promo > label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 12px;
  color: var(--public-card-muted);
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Привязка мессенджера: только знаки сервисов, без подписей. Гостья
   узнаёт их быстрее, чем читает, а подписи ломают ряд на узком экране. */
.public-messengers {
  margin: 0;
  padding: 0;
  border: 0;
}
.public-messengers > legend {
  padding: 0;
  color: var(--public-card-muted);
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.public-messengers__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  max-width: 300px;
}
.public-messenger {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--public-card-line);
  border-radius: 14px;
  background: var(--public-paper);
  cursor: pointer;
}
.public-messenger > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.public-messenger > img {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
.public-messenger:has(input:checked) {
  border-color: var(--public-berry);
  background: var(--public-inner);
}
.public-messenger:has(input:focus-visible) { outline: 2px solid var(--public-berry); }
.public-messengers > p {
  margin: 8px 0 0;
  color: var(--public-card-muted);
  font-size: .72rem;
  line-height: 1.45;
}

.public-visit-card__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
}
.public-visit-card__total span { color: var(--public-card-muted); font-size: .84rem; }
.public-visit-card__total strong { font-size: 1.19rem; font-weight: 650; }

/* Год месяца нужен на широком экране: путь тянется на три месяца вперёд,
   и «Январь» без года читается как прошедший. На телефоне он не влезает. */
.public-calendar-head h2 > span { display: none; }
.public-site--booking .public-calendar-day.is-outside { opacity: .45; }

@media (min-width: 801px) {
  .public-calendar-head h2 > span { display: inline; margin-left: .35ch; }

  /* Кнопка шага не растягивается во всю колонку: на широком экране это
     полоса в девятьсот пикселей, а не кнопка. */
  .public-site--booking .public-step-foot { align-items: center; }
  .public-site--booking .public-step-foot .public-submit { width: min(100%, 420px); }
  .public-site--booking .public-step-foot__note { max-width: 460px; }

  /* Собранный визит на широком экране живёт в правой колонке. */
  .public-site--booking .public-visit-summary { display: none; }

  .public-extra-card {
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 18px;
    padding: 12px 20px 12px 12px;
    border-radius: 16px;
  }
  .public-extra-card > img { width: 92px; height: 92px; border-radius: 12px; }
  .public-extra-card__copy strong { font-size: 1.06rem; }
  .public-extra-card__copy small { font-size: .81rem; }
  .public-skip-link { padding: 12px 2px 0; text-align: left; }
  .public-messenger { min-height: 82px; border-radius: 15px; }
  .public-messenger > img { width: 46px; height: 46px; border-radius: 13px; }
}

@media (max-width: 800px) {
  .public-home-header__nav > a:not(.public-booking-my) { display: none; }
  .public-home-masters__grid { grid-template-columns: 1fr; }
  .public-book-home .public-home-masters__grid .public-home-master__portrait {
    width: 120px;
    height: 120px;
  }
  .public-footer--slim { flex-direction: column; align-items: start; gap: 8px; }
}

/* ——— Первый шаг записи ——————————————————————————————————————————————
   Направления — плашками во всю ширину, услуги внутри направления —
   строками со снимком, длительностью и ценой. Цену видно до записи:
   узнавать её у администратора по телефону гостья не должна. */
.public-site--booking .public-service-card__price {
  grid-column: 2;
  margin-top: 5px;
  font-size: .84rem;
  font-weight: 650;
  white-space: nowrap;
}
.public-site--booking .public-service-card--row > img { grid-row: 1 / span 2; align-self: center; }
.public-site--booking .public-service-card--row:not(:has(> img)) { grid-template-columns: minmax(0, 1fr); }
.public-site--booking .public-service-card--row:not(:has(> img)) .public-service-card__price { grid-column: 1; }
.public-service-group {
  padding: 8px 2px 0;
  color: var(--public-card-muted);
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
/* Тихая ссылка идёт сразу за списком, а не прижимается к низу экрана:
   с двумя направлениями «прижать к низу» — это полэкрана пустоты. */
.public-step-quiet { padding-top: 6px; }
.public-quiet-link {
  display: block;
  padding: 8px;
  color: var(--public-berry);
  font-size: .84rem;
  text-align: center;
  text-decoration: none;
}

@media (min-width: 801px) {
  .public-site--booking .public-service-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .public-site--booking .public-service-tile { height: 168px; }
  .public-site--booking .public-service-tile__arrow { display: none; }
  .public-site--booking .public-service-tile__copy { right: 20px; bottom: 16px; }

  .public-site--booking .public-service-card--row {
    grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: center;
  }
  .public-site--booking .public-service-card--row > img { grid-row: 1; }
  .public-site--booking .public-service-card__price {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
    font-size: 1rem;
  }
  .public-quiet-link { text-align: left; padding-left: 2px; }
}

/* ——— Правки после первого просмотра живых экранов —————————————————— */

/* Кнопка шага — ссылка, но выглядеть должна кнопкой: подчёркивание из
   базового стиля ссылок ей не нужно. */
.public-submit,
.public-quiet-link,
.public-skip-link,
.public-extra-card,
.public-service-tile,
.public-visit-summary__row > a { text-decoration: none; }

/* Пока выбор не сделан, кнопка приглушена. Правило внутри пути должно
   перебивать заливку шага, иначе «Выберите день» выглядит нажимаемым. */
.public-site--booking .public-step-foot .public-submit.is-waiting {
  color: var(--public-card-muted);
  background: var(--public-inner);
  cursor: default;
  pointer-events: none;
}

/* Экран не растягивается искусственно: пустая полоса между списком и
   кнопкой — это не «воздух», а обещание, что ниже что-то есть. Низ страницы
   держит подвал, а кнопка идёт сразу за содержимым шага. */
.public-site--booking .public-journey { min-height: 0; }
.public-site--booking .public-step-foot { margin-top: 18px; }

/* Подписи полей на пути записи — тихие надстрочные метки, как на холсте:
   жирная тёмная строка спорит с самим полем за внимание. */
.public-site--booking .public-contact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--public-transparent);
}
.public-site--booking .public-contact label {
  gap: 5px;
  color: var(--public-card-muted);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.public-site--booking .public-contact input,
.public-site--booking .public-contact textarea {
  min-height: 48px;
  border-radius: 13px;
  border-color: var(--public-card-line);
  background: var(--public-paper);
  font-size: .94rem;
  letter-spacing: 0;
  text-transform: none;
}
.public-site--booking .public-contact textarea { min-height: 96px; padding: 13px 15px; }
.public-site--booking .public-contact__note > span {
  letter-spacing: .07em;
  text-transform: uppercase;
}
.public-site--booking .public-messengers { margin-top: 18px; }
.public-site--booking .public-consent { margin-top: 18px; }

/* Вторая галочка — про рекламу, необязательная. Визуально тише первой:
   обязательное согласие не должно теряться рядом с предложением акций.
   Отступ сверху меньше, чтобы обе читались как одна группа. */
.public-consent--optional { margin-top: -12px; }
.public-consent--optional small {
  display: block;
  margin-top: 3px;
  color: color-mix(in srgb, var(--public-muted) 78%, transparent);
  /* Подпись у согласия набрана полужирным — пояснение должно быть тише её,
     иначе необязательная галочка спорит с обязательной за внимание. */
  font-weight: 400;
  font-size: .95em;
}
.public-site--booking .public-consent--optional { margin-top: -10px; }

@media (min-width: 801px) {
  .public-site--booking .public-contact { max-width: 460px; }
  .public-site--booking .public-contact input,
  .public-site--booking .public-contact textarea {
    min-height: 52px;
    border-radius: 14px;
    font-size: 1rem;
  }
}

/* ——— Обложка витрины: правки владельца с холста ————————————————————
   Кнопка на снимке — приглушённый градиент, а не сплошная охра: поверх
   фотографии сплошная заливка спорит с ней за внимание. */
.public-book-home .public-home-hero .public-hero-cta {
  gap: 12px;
  color: var(--color-text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--public-berry) 60%, transparent), color-mix(in srgb, var(--public-berry) 39%, transparent));
  font-size: 1.03rem;
}
.public-book-home .public-home-hero h1 { max-width: 15ch; }
/* Отступ снизу уже даёт секция: второй сверху подвала делал пустую полосу. */
.public-footer--slim { margin-top: 0; }

@media (max-width: 800px) {
  /* Кнопка на обложке — по своей ширине, а не во всю колонку: растянутая
     во весь экран, она перестаёт читаться как кнопка. */
  .public-book-home .public-home-hero__copy { align-items: start; }
  .public-book-home .public-home-hero .public-hero-cta { width: auto; }
}

@media (max-width: 800px) {
  /* «Посмотреть всех» — кнопка по содержимому, а не полоса во всю ширину. */
  .public-book-home .public-home-masters .public-section-link { width: max-content; }
}

@media (max-width: 800px) {
  /* Обложка на телефоне: имя салона стоит выше середины, а не прижимается
     к нижнему краю снимка — так владелец выровнял её на холсте. */
  .public-book-home .public-home-hero.public-home-strip {
    min-height: 460px;
    padding: 30px 24px;
  }
  .public-book-home .public-home-hero__copy {
    justify-content: center;
    min-height: 0;
    padding: 0;
  }
  .public-book-home .public-home-hero h1 { font-size: clamp(2.5rem, 10.5vw, 3.2rem); }

  /* Блок мастеров выровнен по центру целиком: заголовок, кнопка и портреты. */
  .public-book-home .public-home-masters .public-home-section__heading {
    justify-items: center;
    text-align: center;
  }
  .public-book-home .public-home-masters .public-section-link { margin: 0 auto; }
}

/* Подпись кнопки шага центрируется целиком: при переносе вторая строка
   прижималась влево и кнопка выглядела съехавшей. */
.public-submit { text-align: center; }

@media (max-width: 800px) {
  /* «Продолжить · 2 200–2 800 ₽ · 1 ч 30 мин» должно умещаться в строку:
     вилка цены длиннее одной суммы, и на 16px подпись рвалась пополам. */
  .public-site--booking .public-step-foot .public-submit {
    padding: 0 16px;
    font-size: .88rem;
  }
}

/* Снимок обложки растягивается краями, а не процентом высоты: при
   min-height процент считался от старой высоты и снизу оставалась
   светлая полоса в треть обложки. Фон под ним тоже тёмный — если
   фотография не подгрузится, дыры не будет. */
.public-book-home .public-home-hero.public-home-strip { background: var(--public-hero-base); }
.public-book-home .public-home-hero > img { height: auto; }

/* Обложка перестала быть сеткой из двух колонок: второй колонки в ней
   больше нет с тех пор, как владелец убрал оттуда форму. Заодно это
   чинит снимок — у абсолютного потомка grid-контейнера охватывающим
   блоком становится ячейка, а не вся обложка, и фотография не
   дотягивалась до низа. */
.public-book-home .public-home-hero.public-home-strip {
  display: flex;
  align-items: center;
}
.public-book-home .public-home-hero > img { height: 100%; }

/* ——— Подпись внутри кнопки ————————————————————————————————————————
   У `.public-submit` не было вертикального выравнивания: анонимный
   текстовый бокс растягивался на всю высоту и надпись прилипала к верху.
   Именно поэтому «Записаться онлайн» выглядела ровно (у неё выравнивание
   задано), а все кнопки шагов — съехавшими вверх. */
.public-submit,
.public-site--booking .public-step-foot .public-submit,
.public-visit-card__submit {
  align-items: center;
}

/* ——— Обложка витрины на телефоне ————————————————————————————————————
   Имя салона стоит сверху, кнопка — внизу снимка, как на холсте.
   Раньше блок был выровнен по центру: заголовок не поднимался, а лишь
   становился шире, и под кнопкой оставалась пустая треть. */
@media (max-width: 800px) {
  .public-book-home .public-home-hero.public-home-strip {
    align-items: stretch;
    min-height: 420px;
    padding: 40px 24px 36px;
  }
  .public-book-home .public-home-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
  }
  .public-book-home .public-home-hero h1 {
    max-width: none;
    font-size: 2.5rem;
  }
  .public-book-home .public-home-hero .public-hero-cta {
    align-self: flex-start;
    margin-top: auto;
  }
}

/* ——— Отклик на нажатие для новых элементов пути ————————————————————
   Плашка направления, строка добавки и знак мессенджера обязаны отвечать
   на палец: без этого они читаются как картинка, а не как выбор.
   Кривая и длительность те же, что у остальных карточек пути. */
@media (prefers-reduced-motion: no-preference) {
  .public-service-tile,
  .public-extra-card,
  .public-messenger,
  .public-visit-summary__row > a,
  .public-skip-link,
  .public-quiet-link {
    transition: transform 160ms cubic-bezier(.23, 1, .32, 1);
  }

  .public-service-tile:active,
  .public-extra-card:active { transform: scale(.985); }

  .public-messenger:active,
  .public-visit-summary__row > a:active,
  .public-skip-link:active,
  .public-quiet-link:active { transform: scale(.97); }

  /* Списки добавок и направлений появляются той же лесенкой, что и
     остальные шаги: элемент за элементом, а не всё разом. */
  .public-booking-layout :is(.public-extra-grid, .public-service-tiles) > * {
    animation: public-booking-rise 320ms cubic-bezier(.23, 1, .32, 1) both;
  }
  .public-booking-layout :is(.public-extra-grid, .public-service-tiles) > *:nth-child(2) { animation-delay: 40ms; }
  .public-booking-layout :is(.public-extra-grid, .public-service-tiles) > *:nth-child(3) { animation-delay: 80ms; }
  .public-booking-layout :is(.public-extra-grid, .public-service-tiles) > *:nth-child(4) { animation-delay: 120ms; }
  .public-booking-layout :is(.public-extra-grid, .public-service-tiles) > *:nth-child(5) { animation-delay: 160ms; }
  .public-booking-layout :is(.public-extra-grid, .public-service-tiles) > *:nth-child(n+6) { animation-delay: 200ms; }

  /* Приближение фотографии под курсором было 450 мс на слабой кривой —
     заметно вяло. Тот же ease-out, что и у всего пути. */
  .public-service-card img,
  .public-master-card > img {
    transition: transform 320ms cubic-bezier(.23, 1, .32, 1);
  }
}

/* ——— Юридические документы ————————————————————————————————————————————
   Документ должен нормально читаться с телефона: постоянный адрес, живые
   заголовки, никаких модальных окон в двести пикселей высотой. */
.public-legal-page .legal-document { max-width: 760px; }
.legal-badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--public-card-ink);
  background: var(--public-inner);
  font-size: .78rem;
  letter-spacing: .04em;
}
.legal-meta {
  margin: 0 0 26px;
  color: var(--public-muted);
  font-size: .84rem;
}
.legal-document h2 {
  margin: 34px 0 12px;
  font: 400 1.5rem/1.2 var(--display-font-family);
}
.legal-document h3 { margin: 24px 0 10px; font-size: 1.02rem; font-weight: 650; }
.legal-document p { margin: 0 0 14px; line-height: 1.65; }
.legal-document ul { margin: 0 0 16px; padding-left: 22px; line-height: 1.65; }
.legal-document li { margin-bottom: 6px; }
.legal-document code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--public-inner);
  font-size: .88em;
}
.legal-operator {
  margin: 22px 0 30px;
  padding: 20px 22px;
  border: 1px solid var(--public-card-line);
  border-radius: 16px;
  background: var(--public-paper);
}
.legal-operator h2 { margin: 0 0 12px; font-size: 1.19rem; }
.legal-operator dl { display: grid; gap: 10px; margin: 0; }
.legal-operator dt {
  color: var(--public-card-muted);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.legal-operator dd { margin: 3px 0 0; font-size: .94rem; }
.legal-operator--empty p { margin: 0; color: var(--public-card-muted); }
.legal-table { overflow-x: auto; margin: 0 0 18px; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.legal-table th, .legal-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--public-card-line);
  text-align: left;
  vertical-align: top;
}
.legal-table th { color: var(--public-card-muted); font-size: .72rem; text-transform: uppercase; }
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--public-line);
  font-size: .84rem;
}
.legal-links a { color: var(--public-berry); text-decoration: none; }

/* Единый юридический подвал на всех публичных страницах. */
.public-legal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: clamp(40px, 6vw, 72px);
  padding: 26px 0 30px;
  border-top: 1px solid var(--public-line);
  color: var(--public-muted);
  font-size: .78rem;
}
.public-legal-footer a { color: inherit; text-decoration: none; }
.public-legal-footer__demo { color: var(--public-berry); }

/* Предупреждение у свободного поля: не приглашаем сообщать о здоровье. */
.public-contact__caution {
  margin: 6px 0 0;
  color: var(--public-card-muted);
  font-size: .72rem;
  line-height: 1.45;
}
.public-consent-note { margin: 10px 0 0; font-size: .78rem; }
.public-consent-note a { color: var(--public-berry); }

/* Готовность салона к работе с настоящими данными — экран владельца. */
.legal-readiness__list { margin: 12px 0 16px; padding-left: 20px; line-height: 1.6; }
.legal-check--review_required td:nth-child(2) { color: var(--color-warning); }
.legal-check--ready td:nth-child(2) { color: var(--color-good); }

@media (max-width: 800px) {
  .public-legal-footer { gap: 6px 14px; }
  .legal-document h2 { font-size: 1.31rem; }
}


/* Палитры салона: переключаются атрибутами на <html>. */
:root[data-palette="panel-neutral"] {
  color-scheme: light;
  --color-canvas: #F4F5F7;
  --color-card: #FFFFFF;
  --color-inner: #EDEFF2;
  --color-text: #16181D;
  --color-secondary: #5A6069;
  --color-line: #DFE2E7;
  --color-accent: #B25E3A;
  --color-good: #1C7A55;
  --color-bad: #B3372F;
  --color-warning: #9A6410;
}

:root[data-palette="panel-neutral"][data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #111317;
  --color-card: #181B21;
  --color-inner: #20242B;
  --color-text: #E8EAEE;
  --color-secondary: #99A0AB;
  --color-line: #282D35;
  --color-accent: #D98A62;
  --color-good: #4FBE90;
  --color-bad: #F0837B;
  --color-warning: #D9A247;
}

:root[data-palette="warm"] {
  color-scheme: light;
  --color-canvas: #efe4d8;
  --color-card: #fbf7f1;
  --color-inner: #e4d3c3;
  --color-text: #2a1d17;
  --color-secondary: #6f5b50;
  --color-line: #d3bfaa;
  --color-accent: #d99b6c;
  --color-good: #38755d;
  --color-bad: #a9473f;
  --color-warning: #99631f;
}

:root[data-palette="warm"][data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #17110d;
  --color-card: #fbf7f1;
  --color-inner: #efe3d7;
  --color-text: #2a1d17;
  --color-secondary: #6b574c;
  --color-line: #d7c3b2;
  --color-accent: #d99b6c;
  --color-good: #38755d;
  --color-bad: #a9473f;
  --color-warning: #99631f;
}