@font-face {
  font-family: "Prata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/prata-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Prata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/prata-latin.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;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./assets/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./assets/fonts/onest-latin.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-bg: #f8f4ee;
  --color-surface: #fffdfc;
  --color-text: #181817;
  --color-text-muted: #716c68;
  --color-action: #151615;
  --color-action-text: #faf7f1;
  --color-copper: #205444;
  --color-border: #ded4cb;
  --color-control-border: #9d948c;
  --font-editorial: "Prata", "Times New Roman", serif;
  --font-ui: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-control: 4px;
  --radius-media: 6px;
  --radius-dialog: 8px;
  --line-divider: 1px;
  --line-accent: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --page-gutter: clamp(20px, 7.44vw, 29px);
  --motion-fast: 180ms;
}

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

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--color-bg);
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-ui);
  font-size: 16px;
  font-synthesis: none;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  color: inherit;
  font: inherit;
  font-synthesis: none;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

img {
  display: block;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--color-copper);
  outline-offset: 3px;
}

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

.app-main {
  position: relative;
  width: min(100%, 390px);
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    max(43px, calc(env(safe-area-inset-top) + 20px))
    var(--page-gutter)
    max(48px, calc(env(safe-area-inset-bottom) + 32px));
}

.client-shell,
.client-editorial,
.client-workspace {
  display: contents;
}

.desktop-only {
  display: none;
}

/* Client home: approved mobile composition */

.client-hero {
  display: flex;
  flex-direction: column;
}

.hero-copy {
  min-width: 0;
  padding-left: 4px;
}

.hero-copy h1 {
  margin: 0 0 0 2px;
  font-family: var(--font-editorial);
  font-size: clamp(50px, 13.72vw, 53.5px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.master-role {
  margin: 3px 0 0;
  color: var(--color-copper);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.master-avatar {
  width: 100%;
  aspect-ratio: 363 / 343;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 7px;
  background-color: var(--color-surface);
  background-image: url("./assets/lina-portrait-v2.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-location {
  width: fit-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: var(--line-divider) solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}

.location-pin {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  fill: none;
  stroke: var(--color-copper);
  stroke-width: 1.6;
}

.hero-location-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.hero-location-address {
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.hero-location-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-copper);
  font-size: 11px;
  line-height: 1.4;
}

.hero-location-action svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.client-nav {
  display: grid;
  gap: 17px;
  margin-top: 17px;
}

.client-nav-button {
  width: 100%;
  min-height: 60px;
  padding: 10px 18px;
  border: var(--line-divider) solid var(--color-copper);
  border-radius: 7px;
  color: var(--color-copper);
  background: transparent;
  cursor: pointer;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  transition:
    color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease;
}

.client-nav-button:first-child {
  min-height: 62px;
}

.client-nav-button:last-child {
  min-height: 58px;
}

.client-nav-button.active {
  color: var(--color-action-text);
  border-color: var(--color-action);
  background: var(--color-action);
}

.web-notice {
  position: absolute;
  z-index: 1;
  right: var(--page-gutter);
  left: var(--page-gutter);
  min-height: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin-top: 5px;
  color: var(--color-text-muted);
  font-size: clamp(10px, 2.82vw, 11px);
  line-height: 14px;
  white-space: nowrap;
}

.web-notice-copy,
.web-notice-copy > div {
  min-width: 0;
}

.web-notice-copy strong {
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
}

.web-notice-copy p,
.web-notice-icon {
  display: none;
}

.web-notice .compact-button {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin: -15px 0;
  padding: 0;
  color: var(--color-copper);
  background: transparent;
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0;
  line-height: inherit;
  text-decoration: none;
}

.web-notice .compact-button::before {
  margin: 0 7px;
  color: var(--color-border);
  content: "·";
  font-weight: 400;
}

.view-panel {
  min-width: 0;
}

#view-booking {
  margin-top: 22px;
}

.booking-layout,
.calendar-card {
  min-width: 0;
}

.calendar-card {
  border-top: var(--line-divider) solid var(--color-border);
}

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

.booking-step-services .step-title {
  padding-top: 22px;
}

.booking-step-services .step-title h2 {
  margin-left: 1.5px;
  font-size: clamp(28px, 7.44vw, 29px);
  letter-spacing: -0.055em;
}

.step-title h2,
.panel-head h2 {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: clamp(33px, 9.23vw, 36px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.step-title p {
  margin: 0 0 4px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 16px;
}

.service-grid {
  display: grid;
  margin-top: 14px;
}

.service-skeleton-list {
  display: grid;
}

.service-skeleton-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 19px 0;
  border-bottom: var(--line-divider) solid var(--color-border);
}

.skeleton-shape {
  position: relative;
  display: block;
  overflow: hidden;
  background: #e8e0d8;
}

.skeleton-shape::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 253, 252, 0.82), transparent);
  content: "";
  transform: translateX(-105%);
  animation: skeleton-sweep 1450ms cubic-bezier(.4, 0, .2, 1) infinite;
}

.service-skeleton-card .skeleton-photo {
  width: 92px;
  height: 92px;
  border-radius: 7px;
}

.service-skeleton-copy {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.skeleton-title {
  width: min(88%, 210px);
  height: 18px;
  border-radius: 3px;
}

.skeleton-title-short {
  width: min(68%, 160px);
}

.skeleton-meta {
  width: min(72%, 175px);
  height: 15px;
  border-radius: 3px;
}

.skeleton-meta-short {
  width: min(56%, 135px);
}

@keyframes skeleton-sweep {
  to { transform: translateX(105%); }
}

.service-card {
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: 19px 0;
  border-bottom: var(--line-divider) solid var(--color-border);
  border-radius: 0;
  color: var(--color-text);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.service-card-with-photo {
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
}

.service-card.active {
  padding-left: 12px;
}

.service-card.active::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: var(--line-accent);
  background: var(--color-copper);
  content: "";
}

.service-photo {
  width: 92px;
  height: 92px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--color-surface);
}

.service-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-body {
  min-width: 0;
  display: grid;
  align-content: center;
}

.service-body h3 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.32;
}

.service-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin-top: 11px;
  color: var(--color-copper);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 1.35;
}

.approval-badge {
  flex-basis: 100%;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 16px;
}

.calendar-card:not(.has-service) #date-step,
.calendar-card:not(.has-service) .booking-step-times,
.calendar-card:not(.has-service) .note-field,
#client-calendar:not(.has-service) ~ .booking-summary {
  display: none;
}

/* Client booking: approved mobile date-and-time composition */

.calendar-card.has-service .booking-step-services {
  display: none;
}

.app-main[data-client-stage="datetime"],
.app-main[data-client-stage="ready"] {
  min-height: 100dvh;
  padding-top: max(48px, calc(env(safe-area-inset-top) + 20px));
  padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px));
  scroll-padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px));
}

.app-main[data-client-stage="datetime"] .client-hero,
.app-main[data-client-stage="datetime"] .client-nav,
.app-main[data-client-stage="datetime"] .web-notice,
.app-main[data-client-stage="ready"] .client-hero,
.app-main[data-client-stage="ready"] .client-nav,
.app-main[data-client-stage="ready"] .web-notice {
  display: none;
}

.app-main[data-client-stage="datetime"] #view-booking,
.app-main[data-client-stage="ready"] #view-booking {
  margin-top: 0;
}

.app-main[data-client-stage="datetime"] .calendar-card,
.app-main[data-client-stage="ready"] .calendar-card {
  border-top: 0;
}

#date-step {
  padding: 0;
}

.datetime-screen-heading h2,
.datetime-section-title,
.note-field-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-editorial);
  font-weight: 400;
}

.datetime-screen-heading h2 {
  font-size: clamp(20px, 5.39vw, 21px);
  letter-spacing: -0.04em;
  line-height: 1.15;
  text-align: center;
}

.selected-service-compact {
  min-width: 0;
  min-height: 63px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  padding: 0 0 18px;
  border-bottom: var(--line-divider) solid var(--color-border);
}

.selected-service-compact div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.selected-service-compact strong {
  overflow-wrap: anywhere;
  font-size: 15.5px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.35;
}

.selected-service-compact span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 7px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.selected-service-compact span b {
  color: inherit;
  font-weight: 400;
}

.selected-service-compact span i {
  font-style: normal;
}

.selected-service-compact button,
.text-action {
  min-height: 44px;
  padding: 0;
  color: var(--color-copper);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
}

.datetime-section-date {
  padding: 33px 0 20px;
  border-bottom: var(--line-divider) solid var(--color-border);
}

.datetime-section-title {
  font-size: 25px;
  letter-spacing: -0.045em;
  line-height: 1.14;
}

.date-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.date-strip.has-pagination {
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 8px;
}

.date-page-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.date-strip.single-date .date-page-list {
  grid-template-columns: minmax(0, 1fr);
}

.date-button,
.date-page-button,
.time-button {
  min-width: 0;
  min-height: 58px;
  border: var(--line-divider) solid var(--color-control-border);
  border-radius: 6px;
  color: var(--color-text);
  background: transparent;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.date-button {
  display: grid;
  place-items: center;
  padding: 8px 6px;
}

.date-button strong {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.2;
  white-space: nowrap;
}

.date-button strong span {
  color: inherit;
  font-size: inherit;
}

.date-page-button {
  display: grid;
  place-items: center;
  padding: 0;
}

.date-page-button:disabled {
  visibility: hidden;
}

.date-page-prev svg {
  transform: rotate(180deg);
}

.date-page-button svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.date-button.active,
.time-button.active {
  color: var(--color-action-text);
  border-color: var(--color-action);
  background: var(--color-action);
}

.booking-step-times {
  padding: 31px 0 40px;
}

.availability-skeleton {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.availability-skeleton .skeleton-shape {
  height: 56px;
  border-radius: var(--radius-control);
}

.time-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.time-button {
  position: relative;
  padding: 8px 4px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 400;
}

.time-button:disabled,
.time-button.unavailable {
  color: var(--color-text-muted);
  background: transparent;
  cursor: not-allowed;
}

.time-button:disabled::after,
.time-button.unavailable::after {
  position: absolute;
  top: 50%;
  left: -14%;
  width: 128%;
  height: 1px;
  background: var(--color-border);
  content: "";
  transform: rotate(34deg);
}

.note-field {
  padding: 0;
  border: 0;
}

.admin-create-panel summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  list-style: none;
}

.admin-create-panel summary::-webkit-details-marker {
  display: none;
}

.note-field-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.note-field-heading > span {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.note-field-title {
  display: block;
  font-size: 19px;
  letter-spacing: -0.035em;
  line-height: 1.25;
}

textarea,
input,
select {
  width: 100%;
  border: var(--line-divider) solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-text);
  background: var(--color-surface);
}

textarea {
  display: block;
  min-height: 96px;
  padding: 12px;
  resize: vertical;
  line-height: 1.45;
}

.note-field textarea {
  height: 106px;
  min-height: 106px;
  margin-top: 12px;
  padding: 12px 13px;
  scroll-margin-bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px));
}

input,
select {
  min-height: 46px;
  padding: 9px 11px;
}

textarea::placeholder,
input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.booking-summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 15px;
  margin-top: 32px;
  padding: 22px 0 0;
  border-top: 0;
  border-bottom: 0;
}

.booking-summary::before {
  position: absolute;
  top: 0;
  right: -8px;
  left: -8px;
  height: var(--line-divider);
  background: var(--color-border);
  content: "";
}

.summary-thumb {
  display: none;
}

.summary-mobile-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.summary-mobile-copy > span:first-child {
  color: var(--color-text-muted);
  font-size: 12px;
}

.summary-mobile-copy strong {
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

#summary-price {
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.35;
}

.summary-actions {
  display: grid;
  gap: 8px;
}

.app-main[data-client-stage="datetime"] #summary-service,
.app-main[data-client-stage="ready"] #summary-service,
.app-main[data-client-stage="datetime"] #summary-address-row,
.app-main[data-client-stage="ready"] #summary-address-row,
.app-main[data-client-stage="datetime"] .summary-policy,
.app-main[data-client-stage="ready"] .summary-policy {
  display: none;
}

#book-button {
  min-height: 56px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 400;
}

.primary-button,
.secondary-button,
.ghost-button,
.small-button,
.status-button,
.message-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.primary-button {
  color: var(--color-action-text);
  background: var(--color-action);
}

.primary-button:disabled {
  color: var(--color-text-muted);
  background: var(--color-border);
  cursor: not-allowed;
}

.secondary-button,
.status-button {
  color: var(--color-copper);
  border: var(--line-divider) solid var(--color-copper);
  background: transparent;
}

.ghost-button,
.small-button,
.message-button {
  color: var(--color-text);
  border: var(--line-divider) solid var(--color-border);
  background: transparent;
}

.danger,
.delete-booking-button,
.reschedule-cancel {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-copper);
  text-underline-offset: 3px;
}

.reschedule-cancel,
.delete-booking-button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
}

.summary-policy {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

#summary-address-row {
  font-size: 13px;
}

#summary-address-row a {
  color: var(--color-copper);
}

/* Visits */

#view-visits {
  margin-top: 23px;
  padding-top: 19px;
  border-top: var(--line-divider) solid var(--color-border);
}

.panel-head {
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-transform: uppercase;
}

.booking-list,
.admin-list {
  display: grid;
}

.booking-item,
.admin-booking-card,
.service-admin-row,
.window-row {
  padding: 18px 0;
  border-bottom: var(--line-divider) solid var(--color-border);
}

.booking-item-header,
.booking-actions,
.status-actions,
.form-actions,
.admin-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.booking-item h3,
.service-admin-row h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.booking-item p,
.service-admin-row p,
.admin-booking-card p {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.status-pill {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-align: right;
}

.booking-actions {
  justify-content: flex-start;
  margin-top: 14px;
}

.empty-state,
.error-state {
  padding: 16px 0 16px 14px;
  border-left: var(--line-accent) solid var(--color-copper);
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.empty-state .booking-actions {
  margin-top: 14px;
}

.visits-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  align-items: center;
  gap: 8px 28px;
  margin-top: 24px;
  padding: 22px 0;
  border-top: var(--line-divider) solid var(--color-border);
  border-bottom: var(--line-divider) solid var(--color-border);
}

.visits-auth h3 {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.visits-auth p {
  margin: 7px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.visits-auth-button {
  min-height: 52px;
  white-space: nowrap;
}

.visits-auth .visits-auth-status {
  min-height: 20px;
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-copper);
}

@media (max-width: 767px) {
  .visits-auth {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 20px;
    padding: 20px 0;
  }

  .visits-auth-button {
    width: 100%;
  }

  .visits-auth .visits-auth-status {
    grid-column: auto;
    margin-top: -8px;
  }
}

/* Owner mobile — approved «Сегодня» composition. */

.admin-login {
  width: min(100%, 520px);
  margin: max(8vh, 42px) auto 0;
}

.admin-login-copy {
  padding-bottom: 28px;
  border-bottom: var(--line-divider) solid var(--color-border);
}

.admin-login-copy h1 {
  max-width: 440px;
  margin: 8px 0 14px;
  font-family: var(--font-editorial);
  font-size: clamp(38px, 10vw, 58px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.admin-login-copy > p:last-child {
  max-width: 470px;
  margin: 0;
  color: var(--color-text-muted);
}

.admin-login-form {
  display: grid;
  gap: 14px;
  padding-top: 28px;
}

.admin-login-form > label {
  font-size: 13px;
  font-weight: 500;
}

.admin-code-field {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border: var(--line-divider) solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.admin-code-field:focus-within {
  border-color: var(--color-copper);
  outline: 1px solid var(--color-copper);
  outline-offset: 2px;
}

.admin-code-field input {
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  border: 0;
  outline: 0;
  background: transparent;
}

.admin-code-toggle {
  min-width: 84px;
  padding: 0 14px;
  color: var(--color-copper);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
}

.admin-login-form .primary-button {
  width: 100%;
  min-height: 56px;
  margin-top: 4px;
}

.admin-login-note {
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.admin-logout {
  min-height: 44px;
  margin: 0 0 24px auto;
  display: block;
  padding: 0;
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
}

.admin-view .app-main {
  width: min(100%, 760px);
  min-height: 100dvh;
  padding: max(52px, calc(env(safe-area-inset-top) + 24px)) clamp(20px, 7.2vw, 28px) max(110px, calc(env(safe-area-inset-bottom) + 94px));
  scroll-padding-bottom: max(110px, calc(env(safe-area-inset-bottom) + 94px));
}

.admin-view .client-hero,
.admin-view .client-nav,
.admin-view .web-notice,
.admin-view [data-view-panel] {
  display: none !important;
}

.owner-panel,
.tab-panel,
.owner-today {
  min-width: 0;
}

.admin-page-title {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: clamp(34px, 10vw, 44px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.owner-today-head {
  margin-bottom: 30px;
}

.owner-today-title {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: clamp(40px, 10.8vw, 42px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.15;
}

.owner-today-title span {
  display: block;
}

.owner-today-accent {
  width: 38px;
  height: var(--line-accent);
  display: block;
  margin: 8px 0 12px;
  background: var(--color-copper);
}

.owner-today-summary {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: 0.005em;
}

.owner-today-section {
  min-width: 0;
}

.admin-section-title {
  margin: 0;
  padding-bottom: 9px;
  border-bottom: var(--line-divider) solid var(--color-border);
  font-family: var(--font-editorial);
  font-size: clamp(24px, 6.4vw, 26px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

#owner-next-heading {
  padding-bottom: 5px;
}

.upcoming-windows h2,
.admin-form h2 {
  margin: 28px 0 12px;
  font-size: 20px;
  font-weight: 500;
}

.owner-nearest {
  margin-top: 16px;
}

.owner-nearest-main {
  min-height: 120px;
  padding: 1px 0 1px 17px;
  border-left: var(--line-accent) solid var(--color-copper);
}

.owner-nearest p,
.owner-nearest h3 {
  margin: 0;
}

.owner-nearest-date {
  margin-bottom: 4px !important;
  color: var(--color-text-muted);
  font-size: 12px;
}

.owner-nearest-time {
  display: block;
  margin: 0 0 4px;
  color: var(--color-text);
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 1.25;
}

.owner-nearest h3 {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
}

.owner-nearest-service {
  margin-top: 2px !important;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.owner-nearest-status {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin-top: 8px !important;
  padding-bottom: 8px;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.2;
}

.owner-nearest-status::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 52px;
  height: var(--line-accent);
  background: var(--color-copper);
  content: "";
}

.owner-nearest-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 11px 20px 0 8px;
}

.owner-nearest-actions > :only-child {
  grid-column: 1 / -1;
}

.owner-nearest .message-button,
.owner-nearest .status-button {
  min-height: 44px;
  border-radius: var(--radius-control);
  font-size: 16px;
  font-weight: 400;
}

.owner-nearest .message-button {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.owner-nearest .message-button.is-disabled {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
  opacity: 0.56;
}

.owner-nearest .status-button {
  color: var(--color-action-text);
  border-color: var(--color-action);
  background: var(--color-action);
}

.owner-nearest-empty {
  margin-top: 16px;
}

.owner-agenda-section {
  margin-top: 31px;
}

.owner-agenda {
  min-width: 0;
}

.owner-agenda-row {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(103px, 0.38fr) minmax(0, 1fr);
  align-items: center;
  padding: 9px 4px;
  border-bottom: var(--line-divider) solid var(--color-border);
  color: var(--color-text);
  background: transparent;
  text-align: left;
}

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

button.owner-agenda-row {
  cursor: pointer;
}

.owner-agenda-time,
.admin-booking-time {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.owner-agenda-copy {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 1px;
  padding-left: 17px;
  line-height: 1.25;
}

.owner-agenda-copy::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--line-divider);
  height: 24px;
  background: var(--color-border);
  content: "";
  transform: translateY(-50%);
}

.owner-agenda-copy strong {
  overflow: hidden;
  font-size: 17px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-agenda-row.free .owner-agenda-copy strong,
.owner-agenda-status {
  color: var(--color-text-muted);
}

.owner-agenda-status {
  font-size: 12px;
}

.owner-agenda-note {
  margin: 0;
  padding: 11px 0;
  border-bottom: var(--line-divider) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.owner-agenda-empty {
  margin-top: 14px;
}

.row-chevron {
  display: none;
}

.tabs {
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: calc(78px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
  border-top: var(--line-divider) solid var(--color-copper);
  background: var(--color-bg);
}

.tab {
  position: relative;
  min-width: 0;
  min-height: 78px;
  display: grid;
  place-items: center;
  padding: 5px 2px;
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
}

.tab svg {
  display: none;
}

.tab span {
  transform: translateY(-8px);
}

.tab.active {
  color: var(--color-text);
  font-weight: 600;
}

.tab.active::after {
  position: absolute;
  right: 23%;
  bottom: 30px;
  left: 23%;
  height: var(--line-accent);
  background: var(--color-copper);
  content: "";
}

.owner-calendar {
  margin-top: 18px;
  border-top: var(--line-divider) solid var(--color-border);
  border-bottom: var(--line-divider) solid var(--color-border);
}

.owner-calendar-head {
  min-height: 58px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  border-bottom: var(--line-divider) solid var(--color-border);
  text-align: center;
}

.owner-calendar-head strong {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.calendar-arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-control);
  color: var(--color-copper);
  background: transparent;
  cursor: pointer;
}

.calendar-arrow svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.owner-calendar-weekdays,
.owner-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.owner-calendar-weekdays span {
  padding: 9px 0 7px;
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
}

.calendar-day {
  position: relative;
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-rows: auto 10px;
  place-items: center;
  gap: 1px;
  padding: 5px 1px 3px;
  border-top: var(--line-divider) solid var(--color-border);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.calendar-day i {
  color: var(--color-copper);
  font-size: 9px;
  font-style: normal;
  line-height: 1;
}

.calendar-day.selected {
  color: var(--color-action-text);
  background: var(--color-action);
}

.calendar-day.selected i {
  color: var(--color-action-text);
}

.calendar-day.today:not(.selected) {
  box-shadow: inset 0 0 0 var(--line-divider) var(--color-copper);
  font-weight: 600;
}

.calendar-day.occupied {
  border-bottom: var(--line-accent) solid var(--color-copper);
}

.calendar-day:disabled {
  color: var(--color-text-muted);
  opacity: 0.45;
  cursor: not-allowed;
}

.calendar-day:disabled i {
  color: inherit;
}

.admin-form {
  display: grid;
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: var(--line-divider) solid var(--color-border);
}

.admin-form label {
  display: grid;
  gap: 6px;
}

.admin-form label > span {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.4;
}

.admin-view .admin-form input:not([type="hidden"]):not([type="checkbox"]),
.admin-view .admin-form textarea {
  scroll-margin-top: 24px;
  scroll-margin-bottom: max(132px, calc(env(safe-area-inset-bottom) + 116px));
  border: var(--line-divider) solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-text);
  background: var(--color-surface);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
  transition: border-color var(--motion-fast) ease;
}

.admin-view .admin-form input:not([type="hidden"]):not([type="checkbox"]):hover,
.admin-view .admin-form textarea:hover {
  border-color: var(--color-copper);
}

.admin-view .admin-form input:not([type="hidden"]):not([type="checkbox"]):focus,
.admin-view .admin-form input:not([type="hidden"]):not([type="checkbox"]):focus-visible,
.admin-view .admin-form textarea:focus,
.admin-view .admin-form textarea:focus-visible {
  border-color: var(--color-copper);
  outline: 1px solid var(--color-copper);
  outline-offset: 2px;
}

.admin-view .admin-form input:disabled,
.admin-view .admin-form textarea:disabled {
  color: var(--color-text-muted);
  background: transparent;
  cursor: not-allowed;
  opacity: 1;
}

#tab-services .admin-create-panel .admin-form {
  margin-top: 0;
  border-top: 0;
}

.service-photo-field {
  display: grid;
  gap: 8px;
}

.service-photo-label,
.service-photo-status {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.4;
}

.service-photo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.service-photo-layout.has-preview {
  grid-template-columns: 112px minmax(0, 1fr);
}

.service-photo-preview {
  position: relative;
  width: 112px;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--line-divider) solid var(--color-border);
  border-radius: var(--radius-media);
  background: var(--color-surface);
}

.service-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-photo-preview.is-uploading::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgb(255 255 255 / 0.42) 48%, transparent 72%);
  background-size: 220% 100%;
  content: "";
  animation: photo-upload-sheen 1.2s ease-in-out infinite;
}

@keyframes photo-upload-sheen {
  to { background-position: -220% 0; }
}

.service-photo-controls {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.photo-file-button,
.photo-remove-button {
  min-height: 46px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: var(--radius-control);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}

.photo-file-button {
  color: var(--color-action-text);
  background: var(--color-action);
}

.photo-file-button > span {
  color: inherit !important;
  font: inherit !important;
}

.photo-file-button:active {
  transform: translateY(1px);
}

.photo-remove-button {
  min-height: 44px;
  padding-right: 0;
  padding-left: 0;
  border: 0;
  color: var(--color-text);
  background: transparent;
  text-decoration: underline;
  text-decoration-color: var(--color-copper);
  text-underline-offset: 3px;
}

.photo-remove-button[hidden] {
  display: none !important;
}

.photo-file-button:has(+ .sr-only:disabled),
.photo-file-button.is-disabled,
.photo-remove-button:disabled {
  cursor: wait;
  opacity: 0.56;
}

.admin-view .admin-form .service-photo-field .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.service-photo-status {
  margin: 0;
}

.service-photo-status[data-tone="loading"] {
  color: var(--color-text);
}

.service-photo-status[data-tone="error"] {
  color: var(--color-copper);
}

@media (prefers-reduced-motion: reduce) {
  .service-photo-preview.is-uploading::after {
    animation: none;
    background: rgb(255 255 255 / 0.18);
  }
}

@media (max-width: 359px) {
  .service-photo-layout.has-preview {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .service-photo-preview {
    width: 92px;
  }

  .photo-file-button {
    padding-right: 12px;
    padding-left: 12px;
  }
}

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

.working-day-toggle {
  min-height: 52px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
}

.working-day-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.working-day-toggle i {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--color-border);
}

.working-day-toggle i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-surface);
  content: "";
  transition: transform var(--motion-fast) ease;
}

.working-day-toggle input:checked + i {
  background: var(--color-action);
}

.working-day-toggle input:checked + i::after {
  transform: translateX(18px);
}

#tab-schedule .schedule-editor {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}

#tab-schedule .selected-work-date {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: var(--line-divider) solid var(--color-border);
  font-family: var(--font-editorial);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

#tab-schedule .schedule-editor input[type="time"] {
  min-height: 50px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

#tab-schedule .schedule-editor > .secondary-button,
#tab-services .service-editor .secondary-button,
#tab-services .settings-form > .secondary-button {
  color: var(--color-action-text);
  border-color: var(--color-action);
  background: var(--color-action);
}

#tab-schedule .schedule-editor > .secondary-button:disabled,
#tab-services .service-editor .secondary-button:disabled,
#tab-services .settings-form > .secondary-button:disabled {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  background: var(--color-border);
  cursor: wait;
}

#tab-schedule .schedule-delete {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 0;
  border: 0;
}

#tab-schedule .upcoming-windows {
  margin-top: 34px;
}

#tab-schedule .upcoming-windows h2 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: var(--line-divider) solid var(--color-border);
  font-family: var(--font-editorial);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

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

.window-row strong {
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

.window-row > span {
  color: var(--color-text-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.booking-filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 10px;
}

.booking-filter-button {
  min-height: 44px;
  padding: 0 2px;
  border-bottom: var(--line-divider) solid var(--color-border);
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
}

.booking-filter-button.active {
  color: var(--color-text);
  border-bottom: var(--line-accent) solid var(--color-copper);
}

.booking-filter-count {
  grid-column: 1 / -1;
  padding-top: 2px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.admin-date-title {
  margin: 26px 0 0;
  padding-bottom: 8px;
  border-bottom: var(--line-divider) solid var(--color-border);
  color: var(--color-copper);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.admin-booking-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 16px;
}

.admin-booking-main h4 {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
}

.admin-booking-date {
  display: none;
}

.admin-booking-person {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 13px;
}

#tab-bookings .admin-booking-person .client-avatar {
  display: none;
}

.client-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: var(--color-action-text);
  background: var(--color-action);
}

.client-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-link {
  min-height: 44px;
  display: inline-grid;
  align-content: center;
  gap: 1px;
  color: var(--color-text);
  text-decoration: none;
}

.client-link strong {
  width: fit-content;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-color: var(--color-copper);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.client-link span {
  color: var(--color-copper);
  font-size: 11px;
  line-height: 1.4;
}

.client-link.is-disabled strong {
  text-decoration: none;
}

.client-link.is-disabled span {
  color: var(--color-text-muted);
}

.admin-booking-comment {
  display: grid;
  gap: 5px;
  margin-top: 15px;
  padding-left: 13px;
  border-left: var(--line-accent) solid var(--color-copper);
  font-size: 14px;
  line-height: 1.5;
}

.admin-booking-comment span {
  color: var(--color-text-muted);
}

.status-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  gap: 10px;
  margin-top: 17px;
}

#tab-bookings .status-actions .status-button:first-child {
  grid-column: 1 / -1;
  color: var(--color-action-text);
  border-color: var(--color-action);
  background: var(--color-action);
}

#tab-bookings .status-actions .status-button:not(:first-child) {
  color: var(--color-text);
  border-color: var(--color-border);
  background: transparent;
}

#tab-bookings .status-actions .status-button:last-child:nth-child(2) {
  grid-column: 1 / -1;
}

.status-finished {
  margin-top: 14px !important;
}

#tab-bookings .admin-booking-card {
  padding: 20px 0;
}

#tab-bookings .admin-booking-time {
  font-size: 18px;
  line-height: 1.25;
}

#tab-bookings .status-pill {
  position: relative;
  width: max-content;
  max-width: 116px;
  padding-bottom: 7px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}

#tab-bookings .status-pill::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34px;
  height: var(--line-accent);
  background: var(--color-copper);
  content: "";
}

#tab-bookings .delete-booking-button {
  min-height: 44px;
  margin-top: 8px;
  text-align: left;
}

.service-admin-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.service-admin-photo {
  position: relative;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: var(--line-divider) solid var(--color-border);
  border-radius: var(--radius-media);
  color: var(--color-text-muted);
  background: var(--color-surface);
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
}

.service-admin-photo::before {
  content: "Без фото";
}

.service-admin-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
}

.service-admin-photo.is-loaded img {
  opacity: 1;
}

.service-row-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 2px;
}

.service-admin-row.inactive {
  opacity: 1;
}

.service-admin-row.inactive h3,
.service-admin-row.inactive .service-admin-photo {
  opacity: 0.58;
}

.admin-create-panel {
  margin-top: 18px;
  border-top: var(--line-divider) solid var(--color-border);
  border-bottom: var(--line-divider) solid var(--color-border);
}

#tab-services .admin-section-heading {
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: var(--line-divider) solid var(--color-border);
}

#tab-services #open-service-editor {
  display: none;
}

#tab-services #service-editor-panel {
  margin-top: 0;
  border-top: 0;
}

#tab-services .admin-create-panel > summary {
  min-height: 54px;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 500;
}

#tab-services .admin-create-panel[open] > summary {
  color: var(--color-copper);
  border-bottom: var(--line-divider) solid var(--color-border);
}

#tab-services .admin-create-panel[open] {
  padding-bottom: 20px;
}

#tab-services .owner-profile-panel {
  margin-top: 34px;
}

#tab-services .owner-profile-panel > summary {
  font-family: var(--font-editorial);
  font-size: 23px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

#tab-services .owner-profile-panel > summary::after {
  min-width: 74px;
  padding: 8px 12px;
  border: var(--line-divider) solid var(--color-control-border);
  border-radius: var(--radius-control);
  color: var(--color-copper);
  content: "Открыть";
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

#tab-services .owner-profile-panel[open] > summary::after {
  content: "Скрыть";
}

#tab-services .toggle-grid {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--line-divider) solid var(--color-border);
}

#tab-services .checkbox-label {
  min-height: 46px;
  padding: 8px 0;
  border-bottom: var(--line-divider) solid var(--color-border);
}

#tab-services .form-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 12px;
}

#tab-services .form-actions .ghost-button {
  padding-right: 6px;
  padding-left: 6px;
  border: 0;
  text-decoration: underline;
  text-decoration-color: var(--color-copper);
  text-underline-offset: 3px;
}

#tab-services .service-admin-row h3 {
  overflow-wrap: anywhere;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

#tab-services .service-admin-row p {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.45;
}

#tab-services .service-row-actions .text-action {
  font-size: 13px;
}

#tab-services .service-admin-row.inactive [data-toggle-service] {
  padding: 0 10px;
  border: var(--line-divider) solid var(--color-copper);
  border-radius: var(--radius-control);
  color: var(--color-text);
}

.form-explanation {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.checkbox-label {
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center;
}

.checkbox-label input,
.consent-row input {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  accent-color: var(--color-action);
}

#tab-services .checkbox-label input[type="checkbox"] {
  position: relative;
  width: 20px;
  height: 20px;
  border: var(--line-divider) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  appearance: none;
}

#tab-services .checkbox-label input[type="checkbox"]:checked {
  border-color: var(--color-action);
  background: var(--color-action);
}

#tab-services .checkbox-label input[type="checkbox"]:checked::after {
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--color-action-text);
  border-bottom: 2px solid var(--color-action-text);
  content: "";
  transform: rotate(45deg);
}

/* System states and dialogs */

.loading-state {
  position: fixed;
  z-index: 30;
  right: 20px;
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
  left: 20px;
  width: fit-content;
  max-width: min(390px, calc(100% - 40px));
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: auto;
  padding: 11px 14px;
  border: var(--line-divider) solid var(--color-border);
  border-left: var(--line-accent) solid var(--color-copper);
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  background: var(--color-surface);
  box-shadow: 0 12px 32px rgba(32, 84, 68, 0.1);
  pointer-events: none;
}

.loading-state p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
}

.loading-indicator {
  position: relative;
  width: 30px;
  height: 2px;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--color-border);
}

.loading-indicator::after {
  position: absolute;
  inset: 0;
  background: var(--color-copper);
  content: "";
  transform: translateX(-72%);
  animation: loading-shift 950ms ease-in-out infinite alternate;
}

@keyframes loading-shift {
  to { transform: translateX(72%); }
}

.error-state {
  position: fixed;
  z-index: 31;
  right: 20px;
  bottom: 20px;
  left: 20px;
  max-width: 430px;
  margin: auto;
  padding: 16px;
  border: var(--line-divider) solid var(--color-border);
  border-left: var(--line-accent) solid var(--color-copper);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.error-state p {
  margin: 5px 0 12px;
}

.modal {
  width: min(calc(100% - 24px), 480px);
  max-height: min(88dvh, 720px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--radius-dialog);
  color: var(--color-text);
  background: var(--color-surface);
}

.modal::backdrop {
  background: rgba(21, 22, 21, 0.58);
}

.modal-card {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 26px 22px max(22px, calc(env(safe-area-inset-bottom) + 16px));
}

.modal-card h2 {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}

.confirm-details {
  border-top: var(--line-divider) solid var(--color-border);
}

.confirm-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: var(--line-divider) solid var(--color-border);
  font-size: 13px;
}

.confirm-row > span {
  color: var(--color-text-muted);
}

.confirm-row strong,
.map-link {
  text-align: right;
}

.map-link {
  display: grid;
  justify-items: end;
  color: var(--color-text);
  text-decoration: none;
}

.map-link span {
  color: var(--color-copper);
  font-size: 11px;
}

.map-link svg {
  width: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.guest-booking-fields {
  display: grid;
  gap: 12px;
}

.guest-booking-fields p {
  margin: 3px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
}

.guest-name-field {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.booking-honeypot {
  position: absolute !important;
  left: -9999px !important;
}

.consent-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.45;
}

.booking-consents {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.privacy-details {
  margin-left: 28px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.privacy-details > summary {
  width: fit-content;
  color: var(--color-copper);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.privacy-details-copy {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 12px 14px;
  border-left: var(--line-accent) solid var(--color-copper);
  background: var(--color-surface);
}

.privacy-details-copy p {
  margin: 0;
}

.privacy-details-copy a {
  color: var(--color-copper);
}

#privacy-contact {
  color: var(--color-copper);
  font-weight: 500;
}

.success-card {
  text-align: center;
}

.success-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border: var(--line-accent) solid var(--color-copper);
  border-radius: 50%;
  color: var(--color-copper);
  font-size: 22px;
}

.telegram-connect-card {
  display: grid;
  gap: 12px;
  padding: 16px 0;
  border-top: var(--line-divider) solid var(--color-border);
  border-bottom: var(--line-divider) solid var(--color-border);
  text-align: left;
}

.telegram-connect-icon {
  display: none;
}

.telegram-connect-card p {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
}

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

.success-actions.single {
  grid-template-columns: 1fr;
}

.toast {
  position: fixed;
  z-index: 50;
  right: 16px;
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px));
  left: 16px;
  max-width: 420px;
  display: none;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: auto;
  padding: 13px 14px;
  border: var(--line-divider) solid var(--color-border);
  border-left: var(--line-accent) solid var(--color-copper);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.toast.show {
  display: grid;
}

.toast-icon {
  width: 22px;
  height: 22px;
  color: var(--color-copper);
}

.toast-icon svg {
  width: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.toast-copy {
  display: grid;
  font-size: 12px;
}

.toast-copy > span {
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .app-main[data-client-stage="ready"] {
    padding-bottom: max(154px, calc(env(safe-area-inset-bottom) + 138px));
  }

  .app-main[data-client-stage="ready"] .booking-summary {
    position: fixed;
    z-index: 12;
    right: 20px;
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px));
    left: 20px;
    width: min(350px, calc(100% - 40px));
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: auto;
    padding: 12px;
    border: var(--line-divider) solid var(--color-border);
    border-radius: var(--radius-dialog);
    background: var(--color-surface);
    box-shadow: 0 14px 38px rgba(32, 84, 68, 0.14);
  }

  .app-main[data-client-stage="ready"] .booking-summary::before {
    display: none;
  }

  .app-main[data-client-stage="ready"] .summary-mobile-copy {
    gap: 1px;
  }

  .app-main[data-client-stage="ready"] .summary-mobile-copy strong {
    overflow: hidden;
    font-size: 15px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-main[data-client-stage="ready"] #summary-price {
    font-size: 12px;
  }

  .app-main[data-client-stage="ready"] #book-button {
    min-height: 48px;
    padding: 10px 16px;
    white-space: nowrap;
  }
}

@media (max-width: 359px) {
  .app-main {
    padding-top: max(28px, calc(env(safe-area-inset-top) + 16px));
  }

  .app-main[data-client-stage="datetime"],
  .app-main[data-client-stage="ready"] {
    padding-top: max(32px, calc(env(safe-area-inset-top) + 16px));
  }

  .hero-copy h1 {
    font-size: 48px;
  }

  .master-role {
    font-size: 18px;
  }

  .client-nav-button {
    min-height: 56px;
    font-size: 19px;
  }

  .client-nav-button:first-child {
    min-height: 58px;
  }

  .service-card-featured {
    grid-template-columns: 102px minmax(0, 1fr);
    gap: 18px;
  }

  .service-photo {
    width: 102px;
    height: 102px;
  }

  .service-body h3,
  .service-meta {
    font-size: 16px;
  }

  .selected-service-compact {
    gap: 12px;
    margin-top: 24px;
  }

  .selected-service-compact strong {
    font-size: 16px;
  }

  .date-page-list,
  .time-grid {
    gap: 8px;
  }

  .date-strip.has-pagination {
    grid-template-columns: 50px minmax(0, 1fr) 50px;
  }

  .date-button strong {
    font-size: 16px;
  }

  .time-button {
    font-size: 15px;
  }

  .form-row,
  .toggle-grid {
    grid-template-columns: 1fr;
  }

  .admin-view .owner-calendar {
    margin-right: -17px;
    margin-left: -17px;
  }

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

  .window-row .text-action {
    grid-column: 1 / -1;
    justify-self: start;
  }

  #tab-bookings .admin-booking-main {
    gap: 10px;
  }

  #tab-bookings .status-pill {
    max-width: 96px;
  }
}

@media (min-width: 768px) {
  .admin-view .app-main {
    padding-right: 32px;
    padding-left: 32px;
  }

  .service-admin-row {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
  }

  .service-row-actions {
    grid-column: auto;
  }

  .tabs {
    right: 50%;
    left: auto;
    width: min(100%, 760px);
    transform: translateX(50%);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  html:not(.admin-view) .app-main {
    width: min(100%, 680px);
    padding-right: 40px;
    padding-left: 40px;
  }

  html:not(.admin-view) .app-main[data-client-stage="datetime"],
  html:not(.admin-view) .app-main[data-client-stage="ready"] {
    padding-top: max(44px, calc(env(safe-area-inset-top) + 20px));
  }
}

/* Client desktop: approved asymmetric editorial split. */

@media (min-width: 1024px) {
  .admin-view .app-main {
    width: min(calc(100% - 220px), 1120px);
    margin: 0 0 0 max(220px, calc((100vw - 1340px) / 2 + 220px));
    padding: 64px clamp(40px, 5vw, 72px) 64px;
  }

  .admin-view.admin-login-view .app-main {
    width: min(100%, 680px);
    margin-right: auto;
    margin-left: auto;
    padding-right: 32px;
    padding-left: 32px;
  }

  .admin-view .tabs {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 220px;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 72px);
    align-content: center;
    gap: 4px;
    padding: 32px 20px;
    border-top: 0;
    border-right: var(--line-divider) solid var(--color-border);
    transform: none;
  }

  .admin-view .tab {
    min-height: 72px;
    justify-items: start;
    padding: 0 18px;
    font-size: 16px;
  }

  .admin-view .tab span {
    transform: none;
  }

  .admin-view .tab.active::after {
    top: 17px;
    right: auto;
    bottom: 17px;
    left: 0;
    width: var(--line-accent);
    height: auto;
  }

  .admin-view .owner-today {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 44px 64px;
  }

  .admin-view .owner-today-head {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .admin-view .admin-login {
    margin-top: 9vh;
  }

  html:not(.admin-view),
  html:not(.admin-view) body,
  html:not(.admin-view) .app-shell {
    min-height: 100%;
  }

  html:not(.admin-view) .app-main,
  html:not(.admin-view) .app-main[data-client-stage="datetime"],
  html:not(.admin-view) .app-main[data-client-stage="ready"] {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    scroll-padding-bottom: 32px;
  }

  html:not(.admin-view) .client-shell {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: clamp(340px, 28.1vw, 430px) minmax(0, 1fr);
    align-items: start;
  }

  html:not(.admin-view) .client-editorial {
    --color-copper: #8cb9a9;
    position: sticky;
    top: 0;
    height: 100dvh;
    min-height: 680px;
    display: block;
    align-self: start;
    padding:
      clamp(30px, 3.7vh, 38px)
      clamp(32px, 3.2vw, 47px)
      clamp(28px, 3.5vh, 40px);
    overflow: hidden;
    color: var(--color-action-text);
    background: #131412;
  }

  html:not(.admin-view) .client-workspace {
    position: relative;
    min-width: 0;
    min-height: 100dvh;
    display: block;
    padding: 0 clamp(38px, 3.85vw, 56px) 32px;
    background: var(--color-bg);
  }

  html:not(.admin-view) .desktop-only {
    display: block;
  }

  html:not(.admin-view) .app-main[data-client-stage="datetime"] .client-hero,
  html:not(.admin-view) .app-main[data-client-stage="ready"] .client-hero {
    display: block;
  }

  html:not(.admin-view) .client-editorial .hero-copy {
    width: min(100%, 290px);
    padding: 0 0 17px;
    border-bottom: var(--line-divider) solid var(--color-copper);
  }

  html:not(.admin-view) .client-editorial .hero-copy h1 {
    margin: 0;
    color: var(--color-action-text);
    font-size: clamp(58px, 5vw, 72px);
    letter-spacing: -0.035em;
    line-height: 1.02;
  }

  html:not(.admin-view) .client-editorial .master-role {
    margin-top: 5px;
    color: var(--color-copper);
    font-size: clamp(18px, 1.55vw, 21px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }

  html:not(.admin-view) .client-editorial .hero-location {
    width: 100%;
    border-top-color: rgb(250 247 241 / 0.28);
    color: var(--color-action-text);
  }

  html:not(.admin-view) .client-editorial .hero-location-address {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
  }

  html:not(.admin-view) .client-editorial .hero-location-action {
    font-size: 12px;
    font-weight: 500;
  }

  html:not(.admin-view) .client-editorial .master-avatar {
    width: 100%;
    aspect-ratio: 1.058 / 1;
    margin-top: 25px;
    border-radius: 2px;
    background-position: center;
  }

  html:not(.admin-view) .hair-detail-rail {
    margin-top: 32px;
    padding-top: 18px;
    border-top: var(--line-divider) solid var(--color-copper);
  }

  html:not(.admin-view) .hair-detail-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 1px;
    background: #0d0e0d;
  }

  html:not(.admin-view) .hair-detail-frame-upper {
    height: clamp(112px, 18.3vh, 188px);
  }

  html:not(.admin-view) .hair-detail-frame-lower {
    height: calc(clamp(124px, 20.2vh, 208px) + 19px);
    margin-top: 21px;
    padding-top: 18px;
    border-top: var(--line-divider) solid var(--color-copper);
    border-radius: 0;
  }

  html:not(.admin-view) .hair-detail-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  html:not(.admin-view) .hair-detail-frame-upper img {
    object-position: center 42%;
    transform: scale(1.03);
  }

  html:not(.admin-view) .hair-detail-frame-lower img {
    object-position: 70% 60%;
    transform: scale(1.52);
    transform-origin: 70% 58%;
  }

  html:not(.admin-view) .client-nav,
  html:not(.admin-view) .app-main[data-client-stage="datetime"] .client-nav,
  html:not(.admin-view) .app-main[data-client-stage="ready"] .client-nav {
    height: 112px;
    display: flex;
    align-items: flex-end;
    gap: clamp(38px, 4vw, 56px);
    margin: 0;
    border-bottom: var(--line-divider) solid var(--color-border);
  }

  html:not(.admin-view) .client-nav-button,
  html:not(.admin-view) .client-nav-button:first-child,
  html:not(.admin-view) .client-nav-button:last-child {
    position: relative;
    width: auto;
    min-height: 0;
    padding: 0 0 35px;
    border: 0;
    border-radius: 0;
    color: var(--color-text-muted);
    background: transparent;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  html:not(.admin-view) .client-nav-button.active {
    color: var(--color-text);
    background: transparent;
  }

  html:not(.admin-view) .client-nav-button.active::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: var(--line-accent);
    background: var(--color-copper);
    content: "";
  }

  html:not(.admin-view) #web-notice:not([hidden]),
  html:not(.admin-view) .app-main[data-client-stage="datetime"] #web-notice:not([hidden]),
  html:not(.admin-view) .app-main[data-client-stage="ready"] #web-notice:not([hidden]) {
    position: static;
    display: flex;
    margin: 9px 0 -23px;
    font-size: 11px;
  }

  html:not(.admin-view) #view-booking,
  html:not(.admin-view) .app-main[data-client-stage="datetime"] #view-booking,
  html:not(.admin-view) .app-main[data-client-stage="ready"] #view-booking {
    margin-top: 0;
  }

  html:not(.admin-view) .calendar-card,
  html:not(.admin-view) .app-main[data-client-stage="datetime"] .calendar-card,
  html:not(.admin-view) .app-main[data-client-stage="ready"] .calendar-card {
    border-top: 0;
  }

  html:not(.admin-view) .booking-step-services .step-title,
  html:not(.admin-view) .datetime-screen-heading {
    padding-top: clamp(42px, 4.7vh, 48px);
  }

  html:not(.admin-view) .booking-step-services .step-title h2,
  html:not(.admin-view) .datetime-screen-heading h2 {
    margin: 0;
    font-family: var(--font-editorial);
    font-size: clamp(54px, 4.6vw, 66px);
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 1.05;
    text-align: left;
  }

  html:not(.admin-view) .service-grid {
    margin-top: 26px;
  }

  html:not(.admin-view) .service-card {
    gap: 28px;
    padding: 21px 0;
  }

  html:not(.admin-view) .service-skeleton-card {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 28px;
    padding: 21px 0;
  }

  html:not(.admin-view) .service-skeleton-card .skeleton-photo {
    width: 112px;
    height: 96px;
    border-radius: var(--radius-media);
  }

  html:not(.admin-view) .service-card-with-photo {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  html:not(.admin-view) .service-photo {
    width: 112px;
    height: 96px;
    border-radius: var(--radius-media);
  }

  html:not(.admin-view) .service-body h3,
  html:not(.admin-view) .service-meta {
    font-size: 18px;
  }

  html:not(.admin-view) .selected-service-compact {
    min-height: 0;
    grid-template-columns: minmax(260px, 300px) auto;
    justify-content: start;
    gap: 8px 28px;
    margin-top: 36px;
    padding: 0 0 22px;
  }

  html:not(.admin-view) .selected-service-compact::before {
    grid-column: 1 / -1;
    margin-bottom: 7px;
    color: var(--color-copper);
    content: "Услуга";
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
  }

  html:not(.admin-view) .selected-service-compact div {
    gap: 3px;
  }

  html:not(.admin-view) .selected-service-compact strong {
    font-size: 21px;
    letter-spacing: -0.03em;
    line-height: 1.35;
  }

  html:not(.admin-view) .selected-service-compact span {
    gap: 0 8px;
    font-size: 17px;
    line-height: 1.4;
  }

  html:not(.admin-view) .selected-service-compact button {
    align-self: center;
    justify-self: start;
    padding: 0 4px;
    font-size: 14px;
    font-weight: 500;
  }

  html:not(.admin-view) .datetime-section-title,
  html:not(.admin-view) .note-field-title {
    color: var(--color-copper);
    font-family: var(--font-ui);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.3;
  }

  html:not(.admin-view) .datetime-section-date {
    padding: 52px 0 16px;
  }

  html:not(.admin-view) .date-strip {
    justify-content: start;
    margin-top: 21px;
  }

  html:not(.admin-view) .date-strip.has-pagination {
    grid-template-columns: 68px minmax(0, 1fr) 68px;
    gap: clamp(12px, 1.5vw, 22px);
  }

  html:not(.admin-view) .date-page-list {
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    gap: clamp(18px, 2vw, 28px);
  }

  html:not(.admin-view) .date-strip.single-date .date-page-list {
    grid-template-columns: minmax(160px, 200px);
  }

  html:not(.admin-view) .date-button,
  html:not(.admin-view) .date-page-button,
  html:not(.admin-view) .time-button {
    min-height: 68px;
    border-radius: var(--radius-control);
  }

  html:not(.admin-view) .date-button strong {
    font-size: 21px;
    letter-spacing: -0.03em;
  }

  html:not(.admin-view) .booking-step-times {
    padding: 54px 0 8px;
    border-bottom: var(--line-divider) solid var(--color-border);
  }

  html:not(.admin-view) .time-grid {
    grid-template-columns: repeat(4, minmax(108px, 172px));
    justify-content: start;
    gap: clamp(12px, 1.95vw, 28px);
    margin-top: 21px;
  }

  html:not(.admin-view) .time-button {
    padding: 10px 8px;
    font-size: 20px;
  }

  html:not(.admin-view) .date-strip .empty-state,
  html:not(.admin-view) .time-grid .empty-state {
    grid-column: 1 / -1;
  }

  html:not(.admin-view) .note-field {
    display: grid;
    grid-template-columns: minmax(220px, 0.32fr) minmax(260px, 1fr);
    align-items: center;
    gap: 28px;
    padding: 6px 0 7px;
    border-bottom: var(--line-divider) solid var(--color-border);
  }

  html:not(.admin-view) .note-field-heading {
    min-height: 44px;
    display: block;
    padding-top: 2px;
  }

  html:not(.admin-view) .note-field-heading > span {
    display: block;
    margin-top: 3px;
  }

  html:not(.admin-view) .note-field label {
    min-width: 0;
  }

  html:not(.admin-view) .note-field textarea {
    height: 46px;
    min-height: 46px;
    margin: 0;
    padding: 10px 12px;
    border: var(--line-divider) solid var(--color-border);
    border-radius: 5px;
    color: var(--color-text);
    background: var(--color-surface);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.4;
    resize: none;
    appearance: none;
    transition: border-color 160ms ease;
  }

  html:not(.admin-view) .note-field textarea:hover {
    border-color: var(--color-copper);
  }

  html:not(.admin-view) .note-field textarea:focus,
  html:not(.admin-view) .note-field textarea:focus-visible {
    border-color: var(--color-copper);
    outline: 1px solid var(--color-copper);
    outline-offset: 2px;
  }

  html:not(.admin-view) .booking-summary {
    position: sticky;
    z-index: 4;
    bottom: 0;
    grid-template-columns: minmax(0, 31fr) minmax(0, 27fr) minmax(250px, 42fr);
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 26px 0 20px;
    background: var(--color-bg);
  }

  html:not(.admin-view) .booking-summary::before {
    right: 0;
    left: 0;
  }

  html:not(.admin-view) .summary-mobile-copy {
    display: contents;
  }

  html:not(.admin-view) #summary-service {
    display: none;
  }

  html:not(.admin-view) .summary-mobile-copy strong {
    min-width: 0;
    display: flex;
    align-items: center;
    padding-right: 28px;
    font-size: 22px;
    letter-spacing: -0.025em;
    line-height: 1.3;
  }

  html:not(.admin-view) #summary-price {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-left: var(--line-divider) solid var(--color-border);
    color: var(--color-text);
    font-size: 22px;
    white-space: nowrap;
  }

  html:not(.admin-view) .summary-actions {
    align-content: stretch;
    padding-left: clamp(28px, 3.4vw, 50px);
    border-left: var(--line-divider) solid var(--color-border);
  }

  html:not(.admin-view) #book-button {
    width: 100%;
    min-height: 78px;
    border-radius: var(--radius-control);
    font-size: 19px;
  }

  html:not(.admin-view) #view-visits {
    margin-top: 43px;
    padding-top: 0;
    border-top: 0;
  }

  html:not(.admin-view) #view-visits .panel-head {
    padding-bottom: 24px;
    border-bottom: var(--line-divider) solid var(--color-border);
  }

  html:not(.admin-view) #view-visits .panel-head h2 {
    font-size: clamp(48px, 4.4vw, 64px);
  }

  html:not(.admin-view) .booking-item {
    padding: 22px 0;
  }

  html:not(.admin-view) .modal {
    width: min(calc(100% - 48px), 540px);
  }
}

@media (min-width: 1024px) and (max-height: 860px) {
  html:not(.admin-view) .client-editorial {
    min-height: 0;
    padding-top: 27px;
    padding-bottom: 26px;
  }

  html:not(.admin-view) .client-editorial .hero-copy {
    padding-bottom: 12px;
  }

  html:not(.admin-view) .client-editorial .hero-copy h1 {
    font-size: 58px;
  }

  html:not(.admin-view) .client-editorial .master-role {
    font-size: 18px;
  }

  html:not(.admin-view) .client-editorial .master-avatar {
    margin-top: 16px;
  }

  html:not(.admin-view) .hair-detail-rail {
    margin-top: 16px;
    padding-top: 12px;
  }

  html:not(.admin-view) .hair-detail-frame-upper {
    height: clamp(102px, 15.5vh, 132px);
  }

  html:not(.admin-view) .hair-detail-frame-lower {
    height: calc(clamp(112px, 17vh, 144px) + 13px);
    margin-top: 12px;
    padding-top: 12px;
  }

  html:not(.admin-view) .client-nav {
    height: 92px;
  }

  html:not(.admin-view) .client-nav-button,
  html:not(.admin-view) .client-nav-button:first-child,
  html:not(.admin-view) .client-nav-button:last-child {
    padding-bottom: 21px;
  }

  html:not(.admin-view) .booking-step-services .step-title,
  html:not(.admin-view) .datetime-screen-heading {
    padding-top: 28px;
  }

  html:not(.admin-view) .booking-step-services .step-title h2,
  html:not(.admin-view) .datetime-screen-heading h2 {
    font-size: 54px;
  }

  html:not(.admin-view) .selected-service-compact {
    margin-top: 22px;
    padding-bottom: 18px;
  }

  html:not(.admin-view) .selected-service-compact::before {
    margin-bottom: 2px;
  }

  html:not(.admin-view) .datetime-section-date,
  html:not(.admin-view) .booking-step-times {
    padding-top: 24px;
    padding-bottom: 25px;
  }

  html:not(.admin-view) .date-strip,
  html:not(.admin-view) .time-grid {
    margin-top: 14px;
  }

  html:not(.admin-view) .date-button,
  html:not(.admin-view) .date-page-button,
  html:not(.admin-view) .time-button {
    min-height: 58px;
  }

  html:not(.admin-view) .note-field {
    padding-top: 14px;
    padding-bottom: 15px;
  }

  html:not(.admin-view) .note-field textarea {
    height: 44px;
    min-height: 44px;
  }

  html:not(.admin-view) .booking-summary {
    padding-top: 18px;
  }

  html:not(.admin-view) #book-button {
    min-height: 64px;
  }
}

@media (min-width: 1024px) and (max-height: 780px) {
  html:not(.admin-view) .client-nav {
    height: 82px;
  }

  html:not(.admin-view) .client-nav-button,
  html:not(.admin-view) .client-nav-button:first-child,
  html:not(.admin-view) .client-nav-button:last-child {
    padding-bottom: 18px;
  }

  html:not(.admin-view) .booking-step-services .step-title,
  html:not(.admin-view) .datetime-screen-heading {
    padding-top: 22px;
  }

  html:not(.admin-view) .selected-service-compact {
    margin-top: 16px;
  }

  html:not(.admin-view) .note-field {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover,
  .date-button:not(.active):hover,
  .date-page-button:not(:disabled):hover,
  .time-button:not(.active):hover,
  .calendar-day:hover,
  .tab:hover {
    color: var(--color-copper);
  }

  .service-card:hover .service-photo img {
    transform: scale(1.025);
  }

  .service-photo img {
    transition: transform var(--motion-fast) ease;
  }

  .primary-button:not(:disabled):hover,
  .secondary-button:not(:disabled):hover {
    filter: brightness(1.08);
  }

  .text-action:hover,
  .admin-logout:hover,
  .admin-code-toggle:hover {
    color: var(--color-text);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}