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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  background-color: var(--color-bg);
}

body.app-body {
  margin: 0;
  min-height: 100dvh;
  --radar-bar-top: calc(var(--space-4) + 0.25rem + env(safe-area-inset-top, 0px));
  --header-height: calc(4.25rem + var(--space-4) + var(--radar-bar-top) + var(--space-4));
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

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

button,
input,
select {
  font: inherit;
}

/* --- Layout shells --- */
.screen {
  min-height: 100dvh;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-6) + var(--safe-bottom));
}

.screen--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.screen--radar {
  padding: 0;
  max-width: 100%;
}

.screen--with-bar {
  padding-top: var(--space-2);
}

.screen--landing.screen--with-bar {
  padding-top: 0;
}

.screen--landing.screen--center {
  justify-content: flex-start;
  min-height: 100dvh;
}

.screen--landing .brand-mark {
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
}

.screen--landing {
  --home-logo-size: calc(8.8rem * 0.8);
}

/* Svivli home gateway: light page bg + dark copy (radar keeps graphite) */
html[data-theme="svivli"] body.app-body:has(#landing-page) {
  --color-bg: #e4e4ea;
  --color-silver-100: #e4e4ea;
  --color-text: var(--color-navy-900);
  --color-text-muted: #6b7686;
}

.brand-logo--landing {
  width: var(--home-logo-size);
  height: var(--home-logo-size);
  flex-shrink: 0;
  border-radius: var(--radius-full);
  object-fit: cover;
  box-shadow: var(--shadow-md);
  background: transparent;
}

.screen--auth.screen--with-bar {
  padding-top: 0;
}

.screen--auth.screen--center {
  justify-content: flex-start;
}

.screen--auth .brand-mark--compact {
  margin-top: var(--space-1);
  margin-bottom: var(--space-4);
  gap: var(--space-2);
}

.screen--radar.screen--with-bar {
  padding-top: 0;
}

/* --- App bar (back, language, role) --- */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--header-height);
  padding: calc(var(--space-2) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-2);
  background: var(--color-header-bg, color-mix(in srgb, var(--color-silver-200) 94%, transparent));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-header-border, var(--color-silver-300));
}

.app-bar--radar {
  /*
    Nav icons = full export canvas as one picture (no content-fit / crop).
    All source frames share height 584px → same display HEIGHT; WIDTH = H × (canvasW/584).
    Brand: svivli_logo.svg at profile size + wordmark → `/`. Top-aligned with profile.
  */
  --nav-unit: clamp(2.5rem, 12.05vw, 3.5rem);
  /* Display height of every nav icon canvas (matches shared artboard height) */
  --nav-icon-canvas-h: calc(var(--nav-unit) * 0.8); /* −20% vs unit */
  --nav-icon-size: var(--nav-icon-canvas-h); /* legacy alias */
  --radar-bar-icon-size: calc(var(--nav-unit) * 38.21 / 47);
  /* Full-canvas: radar 608×584, calendar/portfolio 475×584 */
  --nav-icon-radar-w: calc(var(--nav-icon-canvas-h) * 608 / 584);
  --nav-icon-tall-w: calc(var(--nav-icon-canvas-h) * 475 / 584);
  --nav-gap: calc(var(--nav-unit) * 0.086); /* 2× previous 0.043 */
  --nav-cluster-w: calc(var(--nav-icon-radar-w) + 2 * var(--nav-icon-tall-w) + 2 * var(--nav-gap));
  --app-bar-wordmark-he: calc(var(--nav-unit) * 40 / 47);
  --radar-bar-top: calc(var(--space-4) + 0.25rem + env(safe-area-inset-top, 0px));
  /* Shared chrome (Radar and all standard pages). Themes may set --color-header-bg / --color-header-border. */
  --app-bar-chrome-bg: var(--color-header-bg, color-mix(in srgb, var(--color-silver-200) 96%, transparent));
  --app-bar-chrome-border: var(--color-header-border, var(--color-silver-300));
  position: sticky;
  top: 0;
  max-width: 100%;
  /* Height hugs profile+langs / nav — no extra band under the language switch */
  min-height: 0;
  padding-top: var(--radar-bar-top);
  padding-bottom: var(--space-1);
  padding-inline: var(--space-4);
  display: grid;
  /* hug nav | gap search↔profile | hug profile — RTL flips sides */
  grid-template-columns: auto 1fr auto;
  align-items: start;
  column-gap: var(--space-2);
  overflow: visible;
  background: var(--app-bar-chrome-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--app-bar-chrome-border);
  /* Keep chrome inside viewport — direction flips on the bar caused sideways scroll */
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/*
  Header chrome sides (HE is the reference; RU/EN are its mirror):
  - HE (page rtl): col 3 = left → nav left, profile right
  - RU/EN (page ltr): col 3 = right → nav right, profile left
*/
.app-bar--radar .app-bar__lead {
  grid-column: 3;
  grid-row: 1;
  z-index: 1;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: start; /* HE: hug left (outer) */
  gap: var(--space-1);
  min-width: 0;
  max-width: min(var(--nav-cluster-w), 100%);
  overflow: visible;
  direction: ltr;
}

:lang(ru) .app-bar--radar .app-bar__lead,
:lang(en) .app-bar--radar .app-bar__lead {
  align-items: end; /* hug right (outer) */
}

/*
  Nav DOM: radar → portfolio → calendar
  RU/EN LTR: radar, portfolio, calendar
  HE RTL: calendar, portfolio, radar
*/
.app-bar--radar .app-bar__nav {
  direction: rtl;
}

:lang(ru) .app-bar--radar .app-bar__nav,
:lang(en) .app-bar--radar .app-bar__nav {
  direction: ltr;
}

.app-bar--radar .app-bar__brand {
  grid-column: 2;
  grid-row: 1;
  /* One unit (logo+name): geometric mid between profile column and nav (radar) */
  justify-self: center;
  align-self: start;
  z-index: 0;
  width: max-content;
  max-width: 100%;
  text-decoration: none;
  overflow: visible;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.35em; /* keep — owner likes logo↔name spacing */
  margin: 0;
  pointer-events: auto;
  color: inherit;
}

/* Main logo in header = profile avatar size, same top edge */
.app-bar--radar .app-bar__brand-logo {
  width: var(--radar-bar-icon-size);
  height: var(--radar-bar-icon-size);
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

/*
  Trail width for the grid = profile/login only,
  so the 1fr mid column is truly between avatar and radar.
*/
.app-bar--radar .app-bar__trail {
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  justify-self: start;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1);
  width: var(--radar-bar-icon-size);
  min-width: var(--radar-bar-icon-size);
  height: auto;
  overflow: visible;
}

.app-bar--radar:has(.app-bar__login) .app-bar__trail {
  width: max-content;
  min-width: var(--radar-bar-icon-size);
}

/* Langs + currency under the three Svivli nav icons (same width as icon cluster) */
.app-bar--radar .app-bar__lead .app-bar__prefs {
  align-self: stretch;
  flex-shrink: 0;
  width: var(--nav-cluster-w);
  max-width: 100%;
  margin-top: 0;
}

.app-bar__wordmark {
  display: block;
  font-size: calc(2.0625rem * 1.3);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand-navy);
  line-height: 1;
  white-space: nowrap;
}

:lang(ru) .app-bar__wordmark {
  font-family: var(--font-brand-ru);
  font-weight: 700; /* Great Vibes is single-weight; bold is synthetic */
  font-style: normal;
  font-size: calc(2.75rem * 0.7 * 1.15 * 1.3); /* +30% vs previous wordmark */
  letter-spacing: 0;
  text-transform: none;
  /* Script terminal on «и» extends past the advance width */
  padding-inline-end: 0.2em;
  overflow: visible;
}

:lang(en) .app-bar__wordmark {
  font-family: var(--font-brand-en);
  font-weight: 700;
  font-style: italic;
  font-size: calc(2.75rem * 0.7 * 1.15 * 1.3); /* +30% vs previous wordmark */
  letter-spacing: 0;
  text-transform: none;
}

:lang(he) .app-bar__wordmark {
  font-family: var(--font-brand-he);
  font-weight: 500; /* David Libre Medium */
  font-style: normal;
  font-size: var(--app-bar-wordmark-he, calc(var(--nav-unit, 2.9375rem) * 40 / 47));
  letter-spacing: 0;
  text-transform: none;
}

.app-bar--radar .app-bar__prefs {
  flex-shrink: 0;
  margin-top: 0;
  position: relative;
}

/* Guest login sits in the profile-avatar footprint (same top band as nav icons) */
.app-bar--radar .app-bar__login {
  flex-shrink: 0;
  margin-top: 0;
  box-sizing: border-box;
  min-width: var(--radar-bar-icon-size);
  width: max-content;
  max-width: 5.5rem;
  height: var(--radar-bar-icon-size);
  min-height: var(--radar-bar-icon-size);
  padding: 0 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  border-width: 1px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.1;
  text-align: center;
}

.app-bar--radar .app-bar__login.is-auth-prompt {
  animation: app-bar-login-prompt 0.75s ease-in-out 3;
  border-color: var(--color-danger);
  color: var(--color-danger);
}

@keyframes app-bar-login-prompt {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(196, 75, 75, 0.35);
  }

  50% {
    box-shadow: 0 0 0 0.35rem rgba(196, 75, 75, 0.2);
  }
}

.app-bar--radar .user-menu__avatar {
  width: var(--radar-bar-icon-size);
  height: var(--radar-bar-icon-size);
  font-size: calc(var(--radar-bar-icon-size) * 0.3);
  border: 2px solid var(--color-navy-800);
}

.app-bar--radar .user-menu__trigger {
  flex-shrink: 0;
}

.user-menu {
  position: relative;
  flex-shrink: 0;
}

.user-menu__trigger {
  display: inline-flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
}

.user-menu__trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.user-menu__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}

.user-menu__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1;
}

.user-menu__dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  /* Trail sits in grid col 1 (outer start) after icon-side swap — open toward center */
  inset-inline-start: 0;
  inset-inline-end: auto;
  z-index: 70;
  min-width: 14rem;
  max-width: min(18rem, calc(100vw - 2rem));
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  text-align: start;
}

.user-menu__dropdown[hidden] {
  display: none !important;
}

.user-menu__profile {
  padding: var(--space-3) var(--space-3) var(--space-3);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.user-menu__profile-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.user-menu__profile-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.user-menu__profile-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy-900);
  color: var(--color-on-strong);
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: 1;
}

.user-menu__profile-name {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-navy-900);
  white-space: normal;
  word-break: break-word;
}

.user-menu__profile-details {
  margin: var(--space-3) 0 0;
}

.user-menu__profile-row {
  display: grid;
  gap: 2px;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  text-align: start;
}

.user-menu__profile-row:first-child {
  border-top: none;
  padding-top: 0;
}

.user-menu__profile-row dt {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.user-menu__profile-row dd {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-navy-900);
  word-break: break-word;
}

/* Email / phone stay LTR glyphs but sit on the start edge (right in HE) */
.user-menu__profile-value {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

.user-menu__item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy-900);
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}

.user-menu__item:hover:not(:disabled) {
  background: var(--color-silver-100);
}

.user-menu__ils {
  display: inline-block;
  margin-inline-start: 0.4em;
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1;
  vertical-align: -0.05em;
}

.user-menu__item--muted {
  color: var(--color-text-muted);
}

.user-menu__item--logout {
  color: var(--color-danger, #b42318);
}

.user-menu__footer {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-border);
}

.user-menu__footer form {
  margin: 0;
}

.app-bar__actions--stack {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--space-1);
  flex-shrink: 0;
  margin-left: auto;
}

.app-bar__actions--stack .app-bar__prefs {
  align-self: flex-end;
}

.app-bar__start,
.app-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-bar__actions {
  justify-content: flex-end;
}

.app-bar__user {
  max-width: 9.5rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-silver-50);
  font-size: var(--font-size-xs);
  line-height: 1.3;
  color: var(--color-navy-900);
  text-align: end;
}

.app-bar__user-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-bar__title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-bar__title--spacer {
  visibility: hidden;
}

.app-bar__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}

.brand-logo--app-bar {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: transparent;
}

.app-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-navy-900);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}

.app-bar__btn:hover {
  background: var(--color-silver-100);
  border-color: var(--color-silver-400);
}

.app-bar__back {
  font-size: var(--font-size-lg);
  line-height: 1;
  padding: 0;
}

.app-bar__back.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.lang-switch {
  display: flex;
  gap: 1px;
  padding: 2px;
  border-radius: var(--radius-sm);
  /* Paler than header chrome so the track reads on steel AppBar (Svivli) and pastel themes */
  background: var(--color-silver-300);
  border: 1px solid var(--color-border);
}

/* Language + currency dropdowns (AppBar): shared chrome-menu, prefs row = nav cluster width */
.app-bar__prefs {
  display: flex;
  align-items: stretch;
  gap: clamp(0.15rem, 0.08 * var(--nav-unit, 2.5rem), 0.3rem);
  width: min(100%, var(--nav-cluster-w, 100%));
  max-width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: app-bar-prefs;
}

.chrome-menu {
  position: relative;
  flex: 1 1 0;
  min-width: 0; /* equal halves can shrink on narrow viewports */
  z-index: 60;
}

.chrome-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.08rem, 0.05 * var(--nav-unit, 2.5rem), 0.26rem);
  width: 100%;
  min-width: 0;
  min-height: clamp(1.55rem, 0.78 * var(--nav-unit, 2.5rem), 2rem);
  padding: 0.12rem clamp(0.1rem, 0.07 * var(--nav-unit, 2.5rem), 0.3rem) 0.12rem 0.12rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-navy-900);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(12, 22, 40, 0.08));
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  overflow: hidden;
}

.chrome-menu__trigger:hover {
  background: var(--color-silver-50);
  border-color: var(--color-silver-400);
}

.chrome-menu__trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.chrome-menu.is-open .chrome-menu__trigger {
  border-color: var(--color-navy-800);
  box-shadow: var(--shadow-md);
}

.chrome-menu__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* +30% vs previous trigger icon size */
  width: clamp(1.105rem, 0.468 * var(--nav-unit, 2.5rem), 1.43rem);
  height: clamp(1.105rem, 0.468 * var(--nav-unit, 2.5rem), 1.43rem);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  font-size: clamp(0.715rem, 0.338 * var(--nav-unit, 2.5rem), 0.975rem);
  line-height: 1;
  background: var(--color-silver-100);
}

.chrome-menu__badge--symbol {
  font-size: clamp(0.65rem, 0.286 * var(--nav-unit, 2.5rem), 0.845rem);
  font-weight: 700;
  color: var(--color-navy-900);
}

.chrome-menu__code {
  font-size: clamp(0.52rem, 0.2015 * var(--nav-unit, 2.5rem), 0.676rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--color-navy-900);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
}

/* Very narrow prefs row (~320px phones): tighten badge */
@container app-bar-prefs (max-width: 7.5rem) {
  .chrome-menu__trigger {
    gap: 0.1rem;
    padding-inline: 0.1rem;
  }

  .chrome-menu__badge {
    width: 1.04rem;
    height: 1.04rem;
    font-size: 0.715rem;
  }

  .chrome-menu__badge--symbol {
    font-size: 0.624rem;
  }

  .chrome-menu__code {
    font-size: 0.52rem;
    letter-spacing: 0;
  }
}

.chrome-menu__dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-start: 0;
  z-index: 70;
  min-width: max(100%, 10.5rem);
  max-width: min(16rem, calc(100vw - 1.5rem));
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  text-align: start;
}

/* Open toward page center when prefs sit on the outer (end) side in LTR */
:lang(ru) .app-bar--radar .currency-menu .chrome-menu__dropdown,
:lang(en) .app-bar--radar .currency-menu .chrome-menu__dropdown {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

:lang(ru) .app-bar--radar .lang-menu .chrome-menu__dropdown,
:lang(en) .app-bar--radar .lang-menu .chrome-menu__dropdown {
  inset-inline-start: 0;
  inset-inline-end: auto;
}

.chrome-menu__dropdown[hidden] {
  display: none !important;
}

.chrome-menu__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-navy-900);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: start;
  transition: background 0.15s ease;
}

.chrome-menu__option:hover {
  background: var(--color-silver-100);
}

.chrome-menu__option.is-active {
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
}

.chrome-menu__option .chrome-menu__badge {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.05rem;
}

.chrome-menu__option .chrome-menu__badge--symbol {
  font-size: 0.85rem;
}

.chrome-menu__name {
  flex: 1;
  min-width: 0;
}

.chrome-menu__meta {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.app-bar__nav {
  display: flex;
  align-items: flex-start; /* top of each canvas aligned */
  gap: var(--nav-gap, 0.35rem);
  flex-shrink: 0;
  overflow: visible;
}

.app-bar__nav:empty {
  display: none;
}

.app-bar__nav-btn {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  width: auto;
  height: var(--nav-icon-canvas-h, var(--nav-unit));
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
  position: relative;
  flex-shrink: 0;
}

.app-bar__nav-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* One picture = full PNG canvas; uniform scale from shared canvas height */
.app-bar__nav-icon {
  display: block;
  height: var(--nav-icon-canvas-h, var(--nav-unit));
  width: auto;
  object-fit: fill; /* exact box = scaled canvas; no letterboxing/crop */
  pointer-events: none;
}

.app-bar__nav-icon--radar {
  width: var(--nav-icon-radar-w, calc(var(--nav-icon-canvas-h) * 608 / 584));
}

.app-bar__nav-icon--portfolio,
.app-bar__nav-icon--calendar {
  width: var(--nav-icon-tall-w, calc(var(--nav-icon-canvas-h) * 475 / 584));
}

.app-bar--radar .app-bar__nav-btn--radar {
  width: var(--nav-icon-radar-w);
  height: var(--nav-icon-canvas-h);
}

.app-bar--radar .app-bar__nav-btn--portfolio,
.app-bar--radar .app-bar__nav-btn--calendar {
  width: var(--nav-icon-tall-w);
  height: var(--nav-icon-canvas-h);
}

/* RU/EN: Radar_L; HE: Radar_R */
.app-bar__nav-icon--radar-r {
  display: block;
}

.app-bar__nav-icon--radar-l {
  display: none;
}

:lang(ru) .app-bar--radar .app-bar__nav-icon--radar-r,
:lang(en) .app-bar--radar .app-bar__nav-icon--radar-r {
  display: none;
}

:lang(ru) .app-bar--radar .app-bar__nav-icon--radar-l,
:lang(en) .app-bar--radar .app-bar__nav-icon--radar-l {
  display: block;
}

/* Filled (_1) icon uses .is-active; only the exact destination is non-clickable */
.app-bar--radar .app-bar__nav-btn[aria-current="page"] {
  pointer-events: none;
}

.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.625rem;
  height: 1.625rem;
  padding: 0 3px;
  border: none;
  border-radius: calc(var(--radius-sm) - 1px);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-switch__btn:hover:not(.is-active) {
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  color: var(--color-navy-800);
}

.lang-switch__btn.is-active {
  background: var(--color-navy-900);
  color: var(--color-on-strong);
}

[dir="rtl"] .app-bar__back span {
  display: inline-block;
  transform: scaleX(-1);
}

/* --- Brand logo --- */
.brand-logo {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

.brand-logo--sm {
  width: 2.5rem;
  height: 2.5rem;
}

.brand-logo--auth {
  width: calc(2.5rem * 7 * 0.7); /* −30% vs previous auth logo */
  height: calc(2.5rem * 7 * 0.7);
}

.brand-logo--header {
  width: 2rem;
  height: 2rem;
}

.brand-logo--radar-title {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
}

.brand-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.brand-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-brand-navy);
  margin: 0;
}

:lang(ru) .brand-title {
  font-family: var(--font-brand-ru);
  font-weight: 700; /* Great Vibes is single-weight; bold is synthetic */
  font-style: normal;
  font-size: calc(var(--font-size-2xl) * 2 / 1.5 * 0.7 * 1.15);
  letter-spacing: 0;
  text-transform: none;
}

:lang(en) .brand-title {
  font-family: var(--font-brand-en);
  font-weight: 700;
  font-style: italic;
  font-size: calc(var(--font-size-2xl) * 2 / 1.5 * 0.7 * 1.15);
  letter-spacing: 0;
  text-transform: none;
}

:lang(he) .brand-title {
  font-family: var(--font-brand-he);
  font-weight: 700;
  font-style: normal;
  font-size: calc(var(--font-size-2xl) * 0.85);
  letter-spacing: 0;
}

/* Landing title ×1.5 (logo above title) */
.screen--landing .brand-title {
  font-size: calc(var(--font-size-2xl) * 1.5);
}

:lang(ru) .screen--landing .brand-title {
  font-size: calc(var(--font-size-2xl) * 2 / 1.5 * 0.7 * 1.15 * 1.5);
}

:lang(en) .screen--landing .brand-title {
  font-size: calc(var(--font-size-2xl) * 2 / 1.5 * 0.7 * 1.15 * 1.5);
}

:lang(he) .screen--landing .brand-title {
  font-size: calc(var(--font-size-2xl) * 0.85 * 1.5);
}

.brand-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 18rem;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: linear-gradient(135deg, var(--color-navy-800), var(--color-navy-900));
  color: var(--color-on-strong);
  box-shadow: var(--shadow-md);
}

.btn--primary:hover {
  background: linear-gradient(135deg, var(--color-navy-700), var(--color-navy-800));
}

.btn--accent {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: var(--color-on-strong);
  box-shadow: var(--shadow-md);
}

.btn--accent:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-accent-hover), var(--color-slot));
}

.btn--accent:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--outline {
  background: var(--color-surface-muted);
  color: var(--color-navy-900);
  border: 1.5px solid var(--color-border);
}

.btn--outline:hover {
  border-color: var(--color-silver-400);
  background: var(--color-silver-100);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  min-height: auto;
  width: auto;
  padding: var(--space-2);
}

.btn-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

/* --- Forms --- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  text-align: start;
}

.field label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy-800);
}

.input {
  width: 100%;
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input:focus {
  outline: none;
  border-color: var(--color-navy-700);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-navy-700) 22%, transparent);
}

/* Keep autofill fill on-theme (browsers default to pale yellow/white) */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text);
  caret-color: var(--color-text);
  box-shadow: 0 0 0 1000px var(--color-surface) inset;
  transition: background-color 99999s ease-out;
}

.input--otp {
  text-align: center;
  font-size: var(--font-size-xl);
  letter-spacing: 0.4em;
  font-weight: 700;
}

/* --- Overlay / modal --- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + var(--safe-bottom));
  background: color-mix(in srgb, var(--color-navy-950) 55%, transparent);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.sheet {
  width: 100%;
  max-width: var(--max-width);
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-lg);
  transform: translateY(1rem);
  transition: transform 0.25s ease;
}

.overlay.is-open .sheet {
  transform: translateY(0);
}

.sheet__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.sheet__hint {
  margin: 0 0 var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.phone-picker__list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.phone-picker__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-navy-900);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.phone-picker__item:hover {
  background: var(--color-silver-100);
  border-color: var(--color-silver-400);
}

.phone-picker__icon {
  font-size: 1.25rem;
  line-height: 1;
}

.phone-picker__number {
  flex: 1;
  min-width: 0;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

.phone-picker__cancel {
  width: 100%;
}

/* --- Invite join --- */
.invite-join-card {
  width: 100%;
  max-width: 24rem;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-align: center;
}

.invite-join-card__title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-navy-900);
}

.invite-join-card__desc {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* --- Role gateway --- */
.role-grid {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}

.role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  text-align: center;
}

.role-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.role-card:active {
  transform: scale(0.98);
}

.role-card__icon {
  display: block;
  /* Shared canvas height; width from each export aspect */
  height: 3rem;
  width: auto;
  margin: 0 auto;
  object-fit: fill;
  line-height: 1;
}

.role-card__icon--radar {
  width: calc(3rem * 608 / 584);
}

.role-card__icon--tall {
  width: calc(3rem * 475 / 584);
}

.role-card__label {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-navy-900);
}

.role-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.screen--landing .role-grid {
  margin-bottom: var(--space-6);
  gap: var(--space-3);
}

.screen--landing .role-card {
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
}

.screen--landing .role-card__icon {
  height: 2.25rem;
  width: auto;
}

.screen--landing .role-card__icon--radar {
  width: calc(2.25rem * 608 / 584);
}

.screen--landing .role-card__icon--tall {
  width: calc(2.25rem * 475 / 584);
}

.screen--landing .role-card__desc {
  display: none;
}

/*
  Landing search card handle (page dir):
  - LTR: Radar_L
  - RTL/HE: Radar_R
*/
.role-card__icon--search-ltr {
  display: none;
}

.role-card__icon--search-rtl {
  display: block;
}

[dir="rtl"] .role-card__icon--search-rtl {
  display: none;
}

[dir="rtl"] .role-card__icon--search-ltr {
  display: block;
}

.screen--landing .role-card__label {
  font-size: var(--font-size-md);
}

.screen--landing .role-card__desc {
  font-size: var(--font-size-xs);
}

.propose-category {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-silver-100);
}

.propose-category__summary {
  font-weight: 600;
  cursor: pointer;
  color: var(--color-navy-800);
}

.propose-category__desc {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.propose-category__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.setup-feedback {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.setup-feedback--ok {
  background: var(--color-slot-bg);
  color: var(--color-slot);
}

.setup-feedback--err {
  background: rgba(196, 75, 75, 0.1);
  color: var(--color-danger);
}

.landing-auth-btn {
  max-width: 100%;
}

.brand-mark--compact {
  margin-bottom: var(--space-6);
}

/* --- Radar chrome: sticky header + separate collapsible filters --- */
.radar-chrome {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  overflow-anchor: none;
}

.radar-chrome .app-bar--radar {
  position: relative;
  top: auto;
  /* Gray chrome already on .app-bar--radar — keep sticky chrome wrapper only */
}

.radar-filters-shell {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.radar-filters-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  max-height: 0;
  min-height: 0;
  padding: 0 var(--space-4);
  overflow: hidden;
  opacity: 0;
  border: none;
  border-bottom: 0 solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-navy-900);
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
  pointer-events: none;
  transition:
    max-height 0.28s ease,
    min-height 0.28s ease,
    opacity 0.2s ease,
    border-bottom-width 0.28s ease;
}

.radar-filters-bar__chevron {
  flex-shrink: 0;
  transition: transform 0.28s ease;
}

.radar-filters-shell:not(.is-collapsed) .radar-filters-bar__chevron {
  transform: rotate(180deg);
}

/* Collapsed strip, or expand-control while pinned open after scroll */
.radar-filters-shell.is-collapsed .radar-filters-bar,
.radar-filters-shell.is-pinned-open .radar-filters-bar {
  max-height: 3rem;
  min-height: 2.5rem;
  opacity: 1;
  border-bottom-width: 1px;
  pointer-events: auto;
}

.radar-filters-clip {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.28s ease;
  overflow: visible;
}

.radar-filters-shell.is-collapsed .radar-filters-clip {
  grid-template-rows: 0fr;
  overflow: hidden;
}

.radar-filters-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.radar-filters-shell:not(.is-collapsed) .radar-filters-panel {
  overflow: visible;
}

.radar-filters-shell.is-collapsed .radar-filters-panel {
  pointer-events: none;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .radar-filters-bar,
  .radar-filters-bar__chevron,
  .radar-filters-clip {
    transition: none;
  }
}

/* Scroll-driven collapse must be instant — animated height changes scrollY and flickers. */
.radar-filters-shell.is-instant .radar-filters-bar,
.radar-filters-shell.is-instant .radar-filters-bar__chevron,
.radar-filters-shell.is-instant .radar-filters-clip {
  transition: none !important;
}

.radar-chrome .radar-sphere-bar {
  position: relative;
  top: auto;
  z-index: auto;
  margin: 0;
  padding: var(--space-2) var(--space-4) 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
}

.radar-chrome .sphere-switch {
  margin-bottom: 0;
  padding-bottom: 0;
}

.radar-chrome .radar-header {
  position: relative;
  top: auto;
  z-index: auto;
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-3);
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
}

/* --- Radar sphere bar (legacy standalone; client uses .radar-chrome) --- */
.radar-sphere-bar {
  position: sticky;
  top: var(--header-height);
  z-index: 55;
  overflow: visible;
  padding: var(--space-2) var(--space-4) var(--space-1);
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.radar-sphere-bar .sphere-switch {
  margin-bottom: 0;
}

.sphere-switch {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow: visible;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-1);
}

.sphere-switch::-webkit-scrollbar {
  display: none;
}

.sphere-switch__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(1.625rem + 6px);
  padding: 0 var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-navy-900);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sphere-switch__btn:hover:not(.is-active) {
  background: var(--color-silver-100);
  border-color: var(--color-silver-400);
}

.sphere-switch__btn.is-active {
  background: var(--color-navy-900);
  border-color: var(--color-navy-900);
  color: var(--color-on-strong);
}

.sphere-switch__more {
  position: relative;
  flex-shrink: 0;
}

.sphere-switch__more .filter-dropdown__toggle {
  min-height: calc(1.625rem + 6px);
  padding: 0 var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-navy-900);
  font-size: var(--font-size-sm);
  font-weight: 600;
  gap: var(--space-1);
}

.sphere-switch__more.is-open .filter-dropdown__toggle,
.sphere-switch__more .filter-dropdown__toggle:hover:not(.is-active) {
  background: var(--color-silver-100);
  border-color: var(--color-silver-400);
}

.sphere-switch__more .filter-dropdown__toggle.is-active {
  background: var(--color-navy-900);
  border-color: var(--color-navy-900);
  color: var(--color-on-strong);
}

.sphere-switch__more .filter-dropdown__panel {
  left: 0;
  right: auto;
  min-width: 12rem;
  z-index: 60;
}

.category-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.filter-dropdown {
  position: relative;
  min-width: 0;
}

.filter-dropdown__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy-900);
  cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

.filter-dropdown__toggle:hover:not(:disabled),
.filter-dropdown.is-open .filter-dropdown__toggle {
  border-color: var(--color-navy-700);
}

.filter-dropdown__toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--color-text-muted);
}

.filter-dropdown__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}

.filter-dropdown__chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--color-text-muted);
}

.filter-dropdown.is-open .filter-dropdown__chevron {
  transform: rotate(180deg);
}

.filter-dropdown__panel {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 55;
  max-height: 14rem;
  overflow-y: auto;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.filter-dropdown__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.filter-dropdown__empty {
  margin: 0;
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.service-combo {
  position: relative;
  min-width: 0;
}

.service-combo__field {
  position: relative;
  display: flex;
  align-items: center;
}

.service-combo__input {
  width: 100%;
  min-height: 2.75rem;
  padding-inline-end: 2.25rem;
}

.service-combo__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.service-combo__clear {
  position: absolute;
  inset-inline-end: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.service-combo__clear:hover {
  color: var(--color-navy-900);
  background: var(--color-accent-soft);
}

.service-combo.is-open .service-combo__input {
  border-color: var(--color-navy-700);
}

.filter-dropdown__option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: start;
  color: var(--color-navy-900);
  cursor: pointer;
  transition: background 0.15s ease;
}

.filter-dropdown__option:hover {
  background: var(--color-silver-100);
}

.filter-dropdown__option.is-active {
  background: var(--color-accent-soft);
  color: var(--color-navy-800);
}

.filter-dropdown__panel--checkboxes {
  max-height: 16rem;
}

.filter-dropdown__checkboxes {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.filter-dropdown__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}

.filter-dropdown__checkbox:hover {
  background: var(--color-silver-100);
}

.filter-dropdown__checkbox:has(input:checked) {
  background: var(--color-accent-soft);
}

.filter-dropdown__checkbox input {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-accent);
  flex-shrink: 0;
  margin: 0;
}

.filter-dropdown__checkbox-text {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy-900);
  line-height: 1.3;
}

.studio-filters.category-filters {
  margin-bottom: 0;
}

.search-row {
  display: flex;
  gap: var(--space-2);
  margin-top: 0;
  align-items: stretch;
  position: relative;
  z-index: 40;
}

.search-scope {
  position: relative;
  flex-shrink: 0;
  z-index: 41;
}

.search-scope__btn {
  height: 100%;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-navy-800);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.search-scope__btn:hover {
  border-color: var(--color-navy-700);
  background: var(--color-silver-100);
}

.search-scope__menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: 200;
  min-width: max(100%, 9.5rem);
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg, 0 12px 28px rgba(12, 22, 40, 0.28));
}

.search-scope__option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: start;
  color: var(--color-navy-900);
  cursor: pointer;
}

.search-scope__option:hover {
  background: var(--color-silver-100);
}

.search-scope__option.is-active {
  background: var(--color-navy-900);
  color: var(--color-on-strong);
}

.search-row__input {
  flex: 1;
  min-width: 0;
}

.radar-header {
  padding: var(--space-2) var(--space-4);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.radar-header__tools {
  display: flex;
  margin-top: var(--space-3);
}

.radar-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: none;
  position: relative;
  z-index: 1;
}

.radar-filters::-webkit-scrollbar {
  display: none;
}

.chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}

.chip.is-active {
  border-color: var(--color-navy-800);
  background: var(--color-navy-900);
  color: var(--color-on-strong);
}

.chip__sort-arrows {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.72;
}

.chip.is-active .chip__sort-arrows {
  opacity: 1;
}

.chip--fav {
  padding: 0 var(--space-2);
  min-width: 2.625rem;
  justify-content: center;
}

.chip__heart {
  font-size: 1.375rem;
  line-height: 1;
  color: var(--color-heart);
}

.chip--fav.is-fav-active {
  border-color: var(--color-heart);
  background: color-mix(in srgb, var(--color-heart) 14%, transparent);
  color: var(--color-heart);
}

.chip--icon {
  padding: 0 var(--space-3);
}

.chip--icon.is-fav-active {
  border-color: var(--color-heart);
  background: color-mix(in srgb, var(--color-heart) 14%, transparent);
  color: var(--color-heart);
}

.search-row .input {
  min-height: 2.5rem;
  font-size: var(--font-size-sm);
}

.radius-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.radius-row__label {
  flex: 0 0 auto;
}

.radius-row input[type="range"] {
  flex: 1;
  accent-color: var(--color-navy-800);
}

.radius-row__value {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 4.25rem;
  min-height: 0;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-navy-900);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.radius-row__value:hover,
.radius-row__value:focus-visible {
  border-color: var(--color-accent);
  outline: none;
}

.radius-row__input {
  box-sizing: border-box;
  flex: 0 0 4.5rem;
  width: 4.5rem;
  min-height: 0;
  padding: 0.15rem 0.4rem;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
}

/* --- Cards grid --- */
.radar-body {
  padding: var(--space-4);
  max-width: 36rem;
  margin: 0 auto;
}

.radar-geo-hint {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-navy-800);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.35;
}

.radar-section-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.master-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.master-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: box-shadow 0.2s ease;
  overflow: hidden;
}

.master-card:hover {
  box-shadow: var(--shadow-md);
}

.master-card__categories-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-navy-900);
  color: var(--color-silver-200);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.master-card__categories-text {
  flex: 1;
  min-width: 0;
}

.master-card__body {
  padding: var(--space-4);
}

.master-card__main {
  display: grid;
  grid-template-columns: 1fr 6.5rem;
  gap: var(--space-3);
  align-items: stretch;
}

.master-card__main--link {
  cursor: pointer;
  border-radius: var(--radius-md);
  margin: calc(-1 * var(--space-2));
  padding: var(--space-2);
  transition: background-color 0.15s ease;
}

.master-card__main--link:hover,
.master-card__main--link:focus-visible {
  background: var(--color-surface-muted);
  outline: none;
}

.master-card__content {
  min-width: 0;
}

.master-card__aside {
  display: flex;
  min-height: 0;
  align-self: stretch;
}

.master-card__map-nav {
  margin-top: var(--space-2);
}

.master-card__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.master-card__title-row--link {
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin-inline: calc(-1 * var(--space-1));
  padding-inline: var(--space-1);
  transition: background-color 0.15s ease;
}

.master-card__title-row--link:hover,
.master-card__title-row--link:focus-visible {
  background: var(--color-surface-muted);
  outline: none;
}

.master-card__logo {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: transparent;
}

.master-card__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.master-card__name {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1.25;
}

.master-card__photo {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 5.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-silver-100);
  border: 1px solid var(--color-border);
}

.master-card__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.master-card__photo-img--placeholder {
  object-fit: contain;
  padding: var(--space-3);
  opacity: 0.28;
  filter: grayscale(20%);
}

.master-card__address {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.setup-required-note {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.required-mark {
  color: #e53935;
  font-weight: 700;
  margin-inline-end: 0.15em;
}

.setup-names-hint {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.45;
}

.setup-lang-flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.setup-lang-flags__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.setup-lang-flags__flag {
  font-size: 1.35rem;
  line-height: 1;
}

.setup-lang-flags__btn:hover,
.setup-lang-flags__btn.is-active {
  border-color: var(--color-navy-800);
  background: var(--color-silver-100);
  box-shadow: 0 0 0 1px var(--color-navy-800) inset;
}

.setup-lang-flags__btn.is-filled {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent) inset;
}

.setup-lang-fields {
  margin-bottom: var(--space-4);
}

.setup-contact-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.setup-contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.setup-contact-row__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-silver-100);
  color: var(--color-navy-800);
  margin-top: 0.15rem;
}

.setup-contact-row__body {
  flex: 1;
  min-width: 0;
}

.setup-contact-row__body .phone-display {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-navy-900);
  padding: var(--space-2) 0;
}

.setup-contact-row__visible {
  margin: var(--space-1) 0 var(--space-2);
}

.setup-contact-row__extras {
  margin-top: var(--space-2);
}

.setup-contact-row__add {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-navy-800);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  margin-top: 0.15rem;
}

.setup-contact-row__add:hover:not(:disabled) {
  border-color: var(--color-navy-800);
  background: var(--color-silver-100);
}

.setup-contact-row__add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.setup-socials {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.setup-socials__title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-md);
  font-weight: 700;
}

.setup-socials__hint {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.setup-socials__icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.setup-socials__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-navy-800);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.setup-socials__icon svg {
  display: block;
  flex-shrink: 0;
}

.setup-socials__icon--whatsapp { color: #25D366; }
.setup-socials__icon--telegram { color: #229ED9; }
.setup-socials__icon--facebook { color: #1877F2; }
.setup-socials__icon--instagram { color: #E4405F; }
.setup-socials__icon--linkedin { color: #0A66C2; }
.setup-socials__icon--tiktok { color: #111111; }
.setup-socials__icon--email { color: #5B6B7C; }

.setup-socials__icon:hover,
.setup-socials__icon.is-active {
  border-color: currentColor;
  background: var(--color-silver-100);
  box-shadow: 0 0 0 1px currentColor inset;
}

.setup-socials__icon.is-filled {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 12%, var(--color-surface));
}

.setup-socials__fields {
  margin-top: var(--space-3);
}

.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;
}

.master-card__cities-more {
  display: inline;
  margin: 0;
  padding: 0 0.15em;
  border: 0;
  background: none;
  color: var(--color-navy-800);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  vertical-align: baseline;
}

.master-card__cities-more:hover,
.master-card__cities-more:focus-visible {
  color: var(--color-accent);
  outline: none;
}

.coverage-cities-picker__list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: min(50vh, 20rem);
  overflow-y: auto;
}

.coverage-cities-picker__item {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
}

.master-card__distance {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-navy-700);
}

.map-nav {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-1);
}

.master-card__fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  background: var(--color-silver-100);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-bg) 35%, transparent);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-heart);
  opacity: 1;
  transition: transform 0.15s, color 0.15s;
}

.master-card__fav:hover {
  transform: scale(1.05);
  color: var(--color-heart);
}

.master-card__fav.is-active {
  color: var(--color-heart);
}

/* Hearts stay bright red on every theme (chrome/metal ink must not wash them out) */
html[data-theme] .chip__heart,
html[data-theme] .master-card__fav,
html[data-theme] .master-card__fav:hover,
html[data-theme] .master-card__fav.is-active {
  color: var(--color-heart);
}

html[data-theme] .chip--fav.is-fav-active,
html[data-theme] .chip--icon.is-fav-active {
  color: var(--color-heart);
  border-color: var(--color-heart);
  background: color-mix(in srgb, var(--color-heart) 14%, transparent);
}

.map-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.map-nav__btn:hover {
  box-shadow: var(--shadow-sm);
  transform: scale(1.05);
}

.map-nav__btn--google svg,
.map-nav__btn--waze svg,
.map-nav__icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.master-card__slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-slot-bg);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-slot);
  color: var(--color-slot);
}

.master-card__slot-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.35em;
}

.master-card__slot-service-row,
.master-card__slot-bottom-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: nowrap;
}

.master-card__slot-service,
.master-card__slot-service-row .master-card__slot-price {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy-800);
}

.master-card__slot-label,
.master-card__slot-when,
.master-card__slot-time,
.master-card__slot-bottom-row .master-card__slot-duration {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-slot);
  white-space: nowrap;
}

.master-card__slot-label {
  font-size: var(--font-size-base);
}

.master-card__slot-empty {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-slot);
}

.master-card__actions {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.master-card__contacts {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.master-card__contact-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.master-card__contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-navy-800);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.master-card__contact svg {
  display: block;
  flex-shrink: 0;
}

.master-card__contact--call { color: #2F6FED; }
.master-card__contact--whatsapp { color: #25D366; }
.master-card__contact--telegram { color: #229ED9; }
.master-card__contact--facebook { color: #1877F2; }
.master-card__contact--instagram { color: #E4405F; }
.master-card__contact--linkedin { color: #0A66C2; }
.master-card__contact--tiktok { color: #111111; }
.master-card__contact--email { color: #5B6B7C; }

.master-card__contact:hover,
.master-card__contact.is-revealed {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 12%, var(--color-surface));
  box-shadow: 0 0 0 1px currentColor inset;
}

.master-card__contact-reveal {
  margin: 0;
  padding: 0.2rem 0.35rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-navy-800);
  word-break: break-word;
  line-height: 1.3;
}

.master-card__contact-reveal[hidden] {
  display: none;
}

.master-card__action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 2.5rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-navy-900);
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.master-card__action:hover {
  background: var(--color-silver-100);
}

.master-card__action--book {
  flex: 0 0 auto;
  width: auto;
  margin-left: auto;
  padding-inline: var(--space-3);
  background: var(--color-navy-900);
  color: var(--color-on-strong);
  border-color: transparent;
  gap: var(--space-2);
  padding-block: var(--space-1);
  white-space: nowrap;
}

.master-card__book-logo {
  flex-shrink: 0;
  width: 2.125rem;
  height: 2.125rem;
  object-fit: contain;
  border-radius: var(--radius-full);
  opacity: 1;
}

.master-card__action--book:hover {
  background: var(--color-navy-800);
}

.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
}

/* --- Checkout summary --- */
.checkout-summary {
  background: var(--color-silver-100);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  text-align: start;
}

.checkout-summary dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.checkout-summary dd {
  margin: 0;
  font-weight: 600;
}

.toast {
  position: fixed;
  bottom: calc(var(--space-6) + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--color-navy-900);
  color: var(--color-on-strong);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

.toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.toast--center {
  top: 50%;
  bottom: auto;
  left: 50%;
  max-width: min(22rem, calc(100vw - 2 * var(--space-4)));
  text-align: center;
  border-radius: var(--radius-md);
  transform: translate(-50%, -50%) translateY(0.5rem);
}

.toast--center.is-visible {
  transform: translate(-50%, -50%);
}

/* Stub / not-yet feature: one-word “Soon” popup */
.soon-overlay {
  z-index: 220;
  align-items: center;
  justify-content: center;
}

.soon-dialog {
  margin: auto;
  padding: var(--space-5) var(--space-7);
  min-width: 8rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.soon-dialog__text {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy-900, #0f2337);
  letter-spacing: 0.02em;
}

.hidden {
  display: none !important;
}

/* --- Auth step visibility --- */
.auth-steps {
  width: 100%;
}

.auth-step {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-step.is-active {
  display: flex;
}

.auth-reset-link {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: var(--font-size-sm);
}

.auth-reset-link a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.auth-reset-link a:hover {
  color: var(--color-navy-900);
}

.auth-google-user {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-silver-50);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy-900);
  text-align: center;
}

.auth-register-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.auth-email-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-email-fields.hidden {
  display: none;
}

.auth-steps {
  width: 100%;
  max-width: 22rem;
}

.auth-inline-form {
  display: block;
  width: 100%;
}

.auth-inline-form .btn {
  width: 100%;
}

.auth-google-hint {
  margin: calc(-1 * var(--space-2)) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.35;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  width: 100%;
  max-width: 22rem;
}

.auth-tabs__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
}

.auth-tabs__btn.is-active {
  border-color: var(--color-accent);
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.auth-panel {
  width: 100%;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-panel__title {
  margin: 0;
  font-size: var(--font-size-lg);
  text-align: center;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-google-form {
  width: 100%;
  max-width: 22rem;
}

.auth-google-btn {
  width: 100%;
}

.auth-divider {
  margin: var(--space-3) 0;
  text-align: center;
  color: var(--color-text-muted);
}

.auth-status {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  font-size: var(--font-size-sm);
  text-align: center;
  max-width: 22rem;
}

.auth-errors {
  width: 100%;
  max-width: 22rem;
  margin-bottom: var(--space-3);
  color: #e85d5d;
  font-size: var(--font-size-sm);
}

.field__hint {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

.auth-reset-link {
  margin: 0;
  text-align: center;
  font-size: var(--font-size-sm);
}

.auth-reset-link a {
  color: var(--color-accent);
  text-decoration: none;
}

.role-user-panel {
  position: absolute;
  top: calc(var(--app-bar-height, 3.5rem) + var(--space-2));
  inset-inline-end: var(--space-4);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 7rem;
}

.role-user-panel__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}

.role-user-panel__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.role-user-panel__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: 700;
}

.role-user-panel__name {
  font-size: var(--font-size-xs);
  line-height: 1.3;
  color: var(--color-text);
  word-break: break-word;
}

.role-user-panel__login,
.role-user-panel__logout {
  width: 100%;
}

.screen--landing {
  position: relative;
}

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: var(--space-2) 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* --- Master setup wizard (screen 4) --- */
.wizard-progress {
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.wizard-progress__bar {
  display: block;
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-navy-800));
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.wizard-step-label {
  margin: 0 0 var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wizard-steps {
  flex: 1;
}

.wizard-step {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
}

.wizard-step.is-active {
  display: flex;
}

.wizard-step__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.wizard-step__desc {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.setup-callout {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  border: 1px solid rgba(45, 138, 94, 0.2);
}

.setup-callout__text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-navy-800);
}

.field__legend {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy-900);
}

.field__error {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  line-height: 1.4;
}

.input--invalid {
  border-color: var(--color-danger);
  background: rgba(196, 75, 75, 0.04);
}

.setup-extra-names {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.setup-add-lang {
  margin-top: var(--space-2);
}

.setup-add-lang__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  justify-content: center;
}

.setup-add-lang__trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.setup-add-lang__plus {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 400;
}

.setup-add-lang__select {
  min-height: 2.75rem;
}

.setup-add-lang-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.setup-add-lang-intro__item {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-navy-800);
}

.setup-add-lang-fallback {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  border: 1px solid rgba(45, 138, 94, 0.2);
}

.setup-add-lang-fallback__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy-900);
}

.setup-add-lang-fallback__list {
  margin: 0;
  padding-inline-start: var(--space-4);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-navy-800);
}

.setup-add-lang-fallback__list li + li {
  margin-top: var(--space-1);
}

.setup-add-lang-sheet__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sphere-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sphere-option {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.sphere-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sphere-option.is-selected {
  border-color: var(--color-navy-800);
  box-shadow: var(--shadow-sm);
}

.sphere-option__text {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-navy-900);
}

.phone-field__row {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: var(--space-2);
  align-items: center;
  direction: ltr;
  unicode-bidi: isolate;
}

.phone-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.phone-group--primary {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.phone-group__hint {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.phone-visible-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  cursor: pointer;
  user-select: none;
}

.phone-visible-toggle input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--color-accent);
}

.phone-field--primary .phone-field__row--primary {
  grid-template-columns: 7.5rem 1fr;
}

.phone-display {
  padding: var(--space-3) var(--space-4);
  background: var(--color-silver-50);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-navy-900);
  line-height: 1.4;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

.phone-field--readonly .phone-visible-toggle {
  margin-top: var(--space-3);
}

.phone-group--extra {
  gap: var(--space-3);
}

.setup-add-phone__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  justify-content: center;
}

.setup-add-phone__trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.setup-add-phone__plus {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 400;
}

.phone-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.phone-group__head .field__legend {
  margin-bottom: 0;
}

.phone-group__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-navy-900);
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.phone-group__add:hover {
  background: var(--color-silver-100);
  border-color: var(--color-silver-400);
}

.phone-group__add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.phone-group__add:disabled:hover {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.phone-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.phone-field--row {
  margin: 0;
}

.phone-field__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  line-height: 1;
  cursor: pointer;
}

.phone-field__remove:hover {
  color: var(--color-danger);
  background: rgba(196, 75, 75, 0.08);
}

.phone-field__country {
  min-height: 2.75rem;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  font-size: var(--font-size-sm);
}

.location-mode-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.location-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  background: var(--color-silver-100);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.location-tabs__btn {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.location-tabs__btn.is-active {
  background: var(--color-surface);
  color: var(--color-navy-900);
  box-shadow: var(--shadow-sm);
}

.location-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-3);
}

.location-panel.is-active {
  display: flex;
}

.location-panel__desc {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.city-checkboxes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.city-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}

.city-checkbox:has(input:checked) {
  border-color: var(--color-navy-800);
  background: var(--color-silver-100);
}

.city-checkbox input {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-accent);
}

.address-form__gps {
  margin-bottom: var(--space-3);
}

.af-picker {
  position: relative;
}

.af-options {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% - 0.25rem);
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  max-height: 14rem;
  overflow: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 0.75rem);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.af-option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  background: transparent;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm, 0.5rem);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.af-option:hover,
.af-option:focus-visible {
  background: var(--color-silver-100);
}

.af-option--add {
  color: var(--color-navy-800);
  font-weight: 600;
}

.af-option__badge,
.af-selected--pending {
  color: var(--color-warning, #b45309);
  font-size: 0.85em;
}

.af-selected {
  margin: var(--space-1) 0 0;
  font-size: 0.9rem;
  color: var(--color-muted, #64748b);
}

.af-notes {
  display: grid;
  gap: var(--space-2);
}

.af-notes__row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-2);
  align-items: center;
}

.af-notes__lang {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-muted, #64748b);
}

.af-nav {
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 0.75rem);
  padding: var(--space-3);
}

.af-nav summary {
  cursor: pointer;
  font-weight: 600;
}

.af-nav__rows {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.af-nav__row {
  display: grid;
  gap: var(--space-2);
}

.af-nav__app {
  font-size: 0.85rem;
  font-weight: 600;
}

.af-nav__value {
  font-size: 0.8rem;
  color: var(--color-muted, #64748b);
}

.admin-geo {
  margin-top: var(--space-6);
}

.admin-geo__list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.admin-geo__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 0.75rem);
  padding: var(--space-3);
  display: grid;
  gap: var(--space-3);
}

.admin-geo__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.admin-geo__kind {
  font-weight: 700;
}

.admin-geo__meta {
  color: var(--color-muted, #64748b);
  font-size: 0.85rem;
}

.admin-geo__names {
  display: grid;
  gap: var(--space-2);
}

.admin-geo__names label {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--space-2);
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.admin-geo__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.admin-geo__empty {
  color: var(--color-muted, #64748b);
}

.coverage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.coverage-chip {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-silver-100);
  padding: var(--space-1) var(--space-3);
  font: inherit;
  cursor: pointer;
}

.checkout-visit-address {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.checkout-visit-address__title {
  margin: 0 0 var(--space-3);
  font-size: 1rem;
}

.checkout-saved-addresses {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.checkout-address-pick {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.master-card__distance--badge {
  color: var(--color-accent);
  font-weight: 600;
}

.category-checkboxes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.category-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}

.category-checkbox:has(input:checked) {
  border-color: var(--color-navy-800);
  background: var(--color-silver-100);
}

.category-checkbox input {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}

.btn--compact {
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
}

.setup-service-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--space-4));
  padding: 0 var(--space-4);
  margin-bottom: var(--space-3);
}

.setup-add-service__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.setup-add-service__plus {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 400;
}

.setup-service-table {
  /* Shared tokens so header + body checkboxes stay on one axis */
  --svc-check-size: 1.125rem;
  --svc-control-row-h: 1.85rem;
  --svc-title-row-h: 1.15rem;
  --svc-check-col-w: 2rem;
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 0.875rem;
  table-layout: fixed;
}

.setup-service-table th,
.setup-service-table td {
  padding: 0.4rem 0.3rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  text-align: center;
}

.setup-service-table th {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  /* Keep header labels (Сервис / Время / Цена) on one baseline */
  vertical-align: top;
}

.setup-service-table__check,
.setup-service-table__check-head {
  width: var(--svc-check-col-w);
  max-width: var(--svc-check-col-w);
  padding: 0.4rem 0;
  text-align: center;
  vertical-align: middle;
}

.setup-service-table__check-head {
  vertical-align: top;
}

/* Same flex slot for select-all and row checks — do not use text-align alone on native checkboxes */
.setup-service-table__check-slot,
.svc-col-head__control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.setup-service-table__check-slot {
  min-height: var(--svc-check-size);
}

.svc-col-head__control {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--svc-control-row-h);
  min-height: var(--svc-control-row-h);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.setup-service-table__name,
.setup-service-table__name-head {
  width: auto;
  text-align: start;
  overflow: hidden;
}

/* Compromise: fits 9999.99 + unit/currency select with arrow, still fits narrow screens */
.setup-service-table__duration,
.setup-service-table__duration-head,
.setup-service-table__price,
.setup-service-table__price-head {
  width: 5.4rem;
  max-width: 5.4rem;
}

.setup-service-table__delivery select {
  min-width: 4.5rem;
}

.setup-service-table__capacity input {
  width: 100%;
  min-width: 3.5rem;
}

.slot-item__capacity {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-accent);
  font-weight: 600;
}

.slot-item__group-badge {
  display: inline-block;
  margin-inline-start: var(--space-1);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
}

.slot-item--group .slot-item__badge {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-silver-100));
  color: var(--color-accent);
}

.studio-slots-empty {
  margin: 0;
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.setup-service-table__actions {
  width: 2rem;
  text-align: center;
}

.setup-service-table__actions-head,
.setup-service-table__more {
  width: 2rem;
  text-align: center;
}

.setup-service-table__actions-head {
  vertical-align: top;
}

/* Header “i” tip: same row as unit/currency dropdowns, centered above ⋯ */
.svc-col-head--actions {
  justify-items: center;
}

.setup-service-header-tip.setup-service-name-tip {
  position: static;
  top: auto;
  inset-inline-end: auto;
  flex-shrink: 0;
}

.setup-service-table .input--compact {
  padding: 0.35rem 0.4rem;
  font-size: 0.875rem;
  min-height: 2.15rem;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.3;
}

.setup-service-duration,
.setup-service-price {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.setup-service-price-wrap {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  width: 100%;
  /* Keep ~ before the digits in both LTR and RTL UIs. */
  direction: ltr;
}

.setup-service-price-wrap .setup-service-price {
  flex: 1 1 auto;
  min-width: 0;
}

.setup-service-price-approx {
  flex: 0 0 auto;
  /* Match compact input size; ~ reads small optically, so bump one step. */
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

/* Hide number spinners — values are typed, not stepped */
.input--no-spin::-webkit-outer-spin-button,
.input--no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input--no-spin[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.setup-service-name {
  display: block;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: start;
}

.setup-service-custom-name {
  display: block;
  width: 100%;
  min-height: 2.5rem;
  max-height: 4.5rem;
  resize: none;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: start;
  field-sizing: content;
}

.setup-service-name-field {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.setup-service-name-field .setup-service-custom-name {
  width: 100%;
  padding-inline-end: 1.55rem;
}

.setup-service-name-field .setup-service-name {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 1.55rem 0.4rem 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: 0.875rem;
  line-height: 1.35;
  min-height: 2.15rem;
}

.setup-service-name-field--local .setup-service-custom-name,
.setup-service-name-field--local .setup-service-name {
  border-color: var(--color-accent, #2b6cb0);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent, #2b6cb0) 35%, transparent);
}

.setup-service-name-field--pending .setup-service-custom-name,
.setup-service-name-field--pending .setup-service-name {
  border-color: #c9a227;
  box-shadow: 0 0 0 1px color-mix(in srgb, #c9a227 40%, transparent);
}

.setup-service-name-tip {
  position: absolute;
  top: 0.2rem;
  inset-inline-end: 0.2rem;
  z-index: 1;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #e8912d;
  color: var(--color-on-strong);
  font-size: 0.7rem;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.setup-service-name-tip--pending {
  background: #e8912d;
  color: var(--color-on-strong);
}

.svc-mark {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border-radius: 0.35rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.svc-mark--local {
  border-color: color-mix(in srgb, var(--color-accent, #2b6cb0) 45%, var(--color-border));
  color: var(--color-accent, #2b6cb0);
}

.svc-mark--pending {
  border-color: color-mix(in srgb, #c9a227 55%, var(--color-border));
  color: #8a6d00;
}

.svc-col-head {
  display: grid;
  /* Row 1 = titles; row 2 = dropdowns / select-all — same heights across columns */
  grid-template-rows: var(--svc-title-row-h, 1.15rem) var(--svc-control-row-h, 1.85rem);
  align-items: center;
  justify-items: center;
  gap: 0.3rem;
  width: 100%;
}

.svc-col-head--name {
  justify-items: center;
}

.svc-col-head--check {
  justify-items: stretch;
}

/* Title-row spacer only — never match .svc-col-head__control (that must stay on row 2 with dropdowns) */
.svc-col-head__spacer {
  grid-row: 1;
  align-self: center;
  white-space: nowrap;
  line-height: var(--svc-title-row-h, 1.15rem);
  height: var(--svc-title-row-h, 1.15rem);
  text-align: center;
  visibility: hidden;
  width: 1px;
  padding: 0;
  margin: 0;
}

/* Title centered over the dropdown; sort arrows sit just to the right of the word */
.svc-col-head__label {
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  align-self: center;
  width: 100%;
  height: var(--svc-title-row-h, 1.15rem);
  line-height: var(--svc-title-row-h, 1.15rem);
  white-space: nowrap;
  max-width: 100%;
}

.svc-col-head__title {
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

.svc-col-head__label > .svc-col-sort {
  grid-column: 3;
  justify-self: start;
  margin-inline-start: 0.12rem;
}

.svc-col-head--name > .svc-col-head__label,
.svc-col-head--name > .setup-service-filter {
  width: 6.25rem;
  max-width: 100%;
  justify-self: center;
}

.svc-col-head > select {
  grid-row: 2;
  align-self: center;
  justify-self: stretch;
  box-sizing: border-box;
  width: 100%;
  height: var(--svc-control-row-h, 1.85rem);
  min-height: var(--svc-control-row-h, 1.85rem);
}

/* Checkboxes live inside flex slots — never rely on text-align / UA margins */
.svc-col-head--check .setup-service-select-all,
.setup-service-table__check .setup-service-check {
  width: var(--svc-check-size, 1.125rem);
  height: var(--svc-check-size, 1.125rem);
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  vertical-align: middle;
  accent-color: var(--color-accent);
}

/* Compact unit/currency/filter: text centered, arrow clear of label (extra end padding) */
select.input.svc-col-head__select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--svc-control-row-h, 1.85rem);
  height: var(--svc-control-row-h, 1.85rem);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-align-last: center;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237a8494' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 0.55rem auto;
  background-position: right 0.28rem center;
  padding: 0.28rem 1.05rem 0.28rem 0.2rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
}

:dir(rtl) select.input.svc-col-head__select {
  background-position: left 0.28rem center;
  padding: 0.28rem 0.2rem 0.28rem 1.05rem;
}

/* Compact ▲▼ just to the right of the centered column title */
.svc-col-sort {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
}

.svc-col-sort:hover,
.svc-col-sort:focus-visible {
  color: var(--color-accent, #2b6cb0);
  background: color-mix(in srgb, var(--color-accent, #2b6cb0) 10%, transparent);
  outline: none;
}

.svc-col-sort__arrows {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 0.7;
  font-size: 0.48rem;
}

.svc-col-sort__up,
.svc-col-sort__down {
  opacity: 0.32;
  transition: opacity 0.12s ease;
}

.svc-col-sort[data-sort-dir='asc'] .svc-col-sort__up,
.svc-col-sort[data-sort-dir='desc'] .svc-col-sort__down {
  opacity: 1;
}

.svc-col-sort[aria-pressed='true'] {
  color: var(--color-accent, #2b6cb0);
}

.svc-duration,
.svc-price {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  min-width: 0;
}

.svc-duration .setup-service-duration-unit,
.svc-price .setup-service-currency {
  flex: 0 0 auto;
  width: 3.25rem;
  padding-inline: 0.25rem;
}

.svc-duration .setup-service-duration,
.svc-price .setup-service-price {
  flex: 1 1 auto;
  min-width: 3rem;
}

.svc-soon-hint {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted, #5a6a7a);
}

.svc-note-field__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 0.35rem;
}

.svc-note-field__label {
  font-size: 0.875rem;
  font-weight: 600;
}

.svc-note-field__hint {
  margin: 0 0 0.35rem;
}

.svc-note-add {
  font-size: 1.15rem;
  line-height: 1;
  min-width: 1.75rem;
}

.svc-badge {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted, #5a6a7a);
  border-radius: 999px;
  font-size: 0.7rem;
  line-height: 1.2;
  padding: 0.15rem 0.45rem;
  cursor: pointer;
}

.svc-badge--global {
  cursor: default;
}

.svc-badge--local {
  border-color: color-mix(in srgb, var(--color-accent, #2b6cb0) 40%, var(--color-border));
  color: var(--color-accent, #2b6cb0);
}

.svc-badge--pending {
  border-color: color-mix(in srgb, #c9a227 50%, var(--color-border));
  color: #8a6d00;
}

.setup-service-table__more {
  position: relative;
  vertical-align: top;
  white-space: nowrap;
}

.svc-more-panel {
  position: absolute;
  inset-inline-end: 0;
  top: 100%;
  z-index: 20;
  width: min(18rem, 80vw);
  padding-top: 0.35rem;
}

.svc-more-panel__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(15, 35, 55, 0.12);
  padding: var(--space-3);
  display: grid;
  gap: var(--space-3);
}

.svc-more-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.svc-more-panel__title {
  margin: 0;
  font-size: 0.95rem;
}

.svc-more-panel__actions {
  display: flex;
  justify-content: flex-end;
}

/* Type select + seats on one row (~half width each) */
.svc-delivery-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.svc-delivery-row__type,
.svc-delivery-row__seats {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.svc-delivery-row__seats .input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  color: var(--color-text-muted);
}

.svc-soon-btn {
  margin-top: 0.35rem;
}

/* Add-service sheet: clear vertical rhythm; label+unit flush left over each field */
#svc-add-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#svc-add-sheet .sheet__title {
  margin-bottom: 0;
}

#svc-add-sheet .sheet__hint {
  margin: calc(-1 * var(--space-2)) 0 0;
}

#svc-add-sheet > .field {
  gap: var(--space-2);
}

#svc-add-sheet .sheet__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-1);
}

.svc-add-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

.svc-add-metrics > .field {
  gap: var(--space-2);
  min-width: 0;
}

.svc-add-field-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  width: 100%;
}

.svc-add-field-head label {
  margin: 0;
  font-weight: 600;
  line-height: 1.85rem;
}

.svc-add-unit {
  width: auto;
  flex: 0 0 auto;
  min-width: 2.75rem;
  max-width: 4.5rem;
  min-height: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0.2rem 1.05rem 0.2rem 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237a8494' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 0.55rem auto;
  background-position: right 0.28rem center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

:dir(rtl) .svc-add-unit {
  background-position: left 0.28rem center;
  padding: 0.2rem 0.35rem 0.2rem 1.05rem;
}

:dir(rtl) .svc-add-field-head {
  justify-content: flex-start;
}

.admin-services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.admin-services__item {
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.admin-services__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
}

.admin-services__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.checkout-service-note {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-accent, #2b6cb0) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #2b6cb0) 20%, var(--color-border));
}

.checkout-service-note__label {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  color: var(--color-text-muted, #5a6a7a);
}

.checkout-service-note__text {
  margin: 0;
  white-space: pre-wrap;
}

.setup-service-select-all,
.setup-service-check {
  width: var(--svc-check-size, 1.125rem);
  height: var(--svc-check-size, 1.125rem);
  margin: 0;
  padding: 0;
  accent-color: var(--color-accent);
}

.setup-service-remove {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--space-1);
}

.setup-service-remove:hover {
  color: var(--color-danger, #c0392b);
}

.setup-address-hint {
  margin-top: var(--space-2);
}

.wizard-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.visibility-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.visibility-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-align: start;
}

.visibility-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.visibility-option.is-selected {
  border-color: var(--color-navy-800);
  box-shadow: var(--shadow-sm);
}

.visibility-option__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.visibility-option__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.visibility-option__text strong {
  font-size: var(--font-size-base);
  color: var(--color-navy-900);
}

.visibility-option__text small {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237a8494' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-8);
}

/* --- Master my pages --- */
.screen--master-pages {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--header-height));
  padding: var(--space-6) var(--space-4) calc(var(--space-6) + var(--safe-bottom));
}

.master-pages__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
}

.master-pages__hint {
  margin: 0;
  max-width: 18rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.master-pages__list-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.master-pages__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.master-pages__sphere-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.master-pages__sphere-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.master-pages__biz-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  word-break: break-word;
}

.master-pages__biz-btn--inactive {
  opacity: 0.72;
}

.master-card--owner.master-card--inactive {
  opacity: 0.78;
}

.master-card--owner.master-card--inactive .master-card__photo-img {
  filter: grayscale(0.35);
}

.master-card__owner-badge {
  flex-shrink: 0;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.14);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.master-card__owner-menu {
  position: relative;
  flex-shrink: 0;
}

.master-card__owner-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-silver-200);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.master-card__owner-menu-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.master-card__owner-dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  inset-inline-end: 0;
  z-index: 20;
  min-width: 9.5rem;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.master-card__owner-menu-item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy-900);
  text-align: start;
  cursor: pointer;
  transition: background 0.15s ease;
}

.master-card__owner-menu-item:hover:not(:disabled) {
  background: var(--color-silver-100);
}

.master-card__owner-menu-item--danger {
  color: #b42318;
}

.master-card__owner-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.master-biz-card {
  position: relative;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.master-biz-card--inactive {
  opacity: 0.78;
}

.master-biz-card__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-navy-900);
  color: var(--color-silver-200);
  font-size: var(--font-size-xs);
}

.master-biz-card__categories {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-biz-card__badge {
  flex-shrink: 0;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.14);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.master-biz-card__menu {
  position: relative;
  flex-shrink: 0;
  margin-inline-start: auto;
}

.master-biz-card__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-silver-200);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.master-biz-card__menu-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.master-biz-card__dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  inset-inline-end: 0;
  z-index: 20;
  min-width: 9.5rem;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.master-biz-card__menu-item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy-900);
  text-align: start;
  cursor: pointer;
  transition: background 0.15s ease;
}

.master-biz-card__menu-item:hover:not(:disabled) {
  background: var(--color-silver-100);
}

.master-biz-card__menu-item--danger {
  color: #b42318;
}

.master-biz-card__body {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-3);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}

.master-biz-card__body:hover {
  background: var(--color-silver-100);
}

.master-biz-card__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.master-biz-card__logo,
.master-biz-card__photo {
  display: block;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-silver-100);
}

.master-biz-card__logo {
  width: 2.5rem;
  height: 2.5rem;
}

.master-biz-card__photo {
  width: 4.5rem;
  height: 4.5rem;
}

.master-biz-card__img--placeholder {
  object-fit: contain;
  padding: 0.25rem;
  opacity: 0.55;
}

.master-biz-card--inactive .master-biz-card__photo {
  filter: grayscale(0.35);
}

.master-biz-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.master-biz-card__name {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-navy-900);
  line-height: 1.3;
}

.master-biz-card__address {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.master-biz-card__phones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.master-biz-card__phone {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy-900);
  direction: ltr;
  unicode-bidi: isolate;
}

.master-biz-card__hint {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.master-pages__section-title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.master-pages__create-more {
  margin-top: var(--space-2);
}

/* --- Master dashboard (screen 5) --- */
.dash-chrome {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  border-bottom: none;
}

.dash-chrome .app-bar--radar {
  position: relative;
  top: auto;
  min-height: 0;
  height: auto;
  padding-bottom: var(--space-1);
  overflow: visible;
  /* Same gray chrome as Radar — not blended with day tabs */
  background: var(--app-bar-chrome-bg, color-mix(in srgb, var(--color-silver-200) 96%, transparent));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--app-bar-chrome-border, var(--color-silver-300));
}

.dash-chrome .dash-header {
  position: relative;
  top: auto;
  z-index: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-3);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: visible;
}

.dash-chrome .dash-section__head {
  margin: 0;
}

.screen--dashboard {
  display: flex;
  flex-direction: column;
  padding: 0;
  padding-bottom: calc(11rem + var(--safe-bottom));
  min-height: 0;
}

.screen--dashboard.screen--with-bar {
  padding-top: 0;
}

.dash-stats {
  display: none;
}

.dash-day-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  overflow: visible;
}

.dash-header__modes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.dash-range-switch {
  flex-shrink: 0;
}

.dash-range-switch .lang-switch__btn {
  min-width: 2.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  font-size: 0.6875rem;
}

.dash-toolbar-icons {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
  position: relative;
  z-index: 2;
}

.dash-filter {
  position: relative;
  display: inline-flex;
}

.dash-filter.is-open .dash-filter__trigger {
  border-color: var(--color-navy-700);
  background: color-mix(in srgb, var(--color-navy-900) 6%, var(--color-surface));
}

.dash-filter__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-end: 0;
  z-index: 80;
  min-width: 14rem;
  max-width: min(18rem, calc(100vw - 2rem));
  max-height: min(70vh, 22rem);
  overflow-y: auto;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  text-align: start;
}

.dash-filter__panel[hidden] {
  display: none !important;
}

.dash-filter__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: calc(var(--radius-md) - 2px);
  font-size: var(--font-size-sm);
  color: var(--color-navy-900);
  cursor: pointer;
}

.dash-filter__row:hover {
  background: var(--color-silver-100);
}

.dash-filter__row input {
  flex-shrink: 0;
  margin: 0;
}

.dash-filter__businesses {
  display: flex;
  flex-direction: column;
}

.dash-filter__sep {
  margin: var(--space-1) var(--space-2);
  border: none;
  border-top: 1px solid var(--color-border);
}

.dash-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
}

.dash-icon-btn__icon {
  flex-shrink: 0;
  color: var(--color-navy-700);
}

.dash-body {
  flex: 1;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.dash-section {
  margin-bottom: var(--space-6);
}

.dash-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.dash-link {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy-700);
}

.slot-list,
.booking-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Day calendar (Android-style timeline + occupied list) */
.day-cal-view-switch {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px;
  margin-bottom: 0;
  background: var(--color-silver-100);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.day-cal-view-switch__btn {
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.day-cal-view-switch__btn.is-active {
  background: var(--color-surface);
  color: var(--color-navy-900);
  box-shadow: var(--shadow-sm);
}

.day-cal {
  position: relative;
}

.day-cal__empty {
  margin: 0;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.day-cal__timeline {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0;
}

.day-cal__hours {
  display: flex;
  flex-direction: column;
}

.day-cal__hour-label {
  height: var(--day-cal-hour-height, 3.5rem);
  padding-right: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-muted);
  text-align: right;
  transform: translateY(-0.45em);
}

.day-cal__grid-wrap {
  position: relative;
  border-left: 1px solid var(--color-border);
}

.day-cal__grid-lines {
  display: flex;
  flex-direction: column;
}

.day-cal__hour-line {
  height: var(--day-cal-hour-height, 3.5rem);
  border-bottom: 1px solid var(--color-border);
}

.day-cal__hour-line:first-child {
  border-top: 1px solid var(--color-border);
}

.day-cal__events-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.day-cal__event {
  position: absolute;
  left: var(--space-2);
  right: var(--space-1);
  min-height: 1.25rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  overflow: hidden;
  pointer-events: auto;
  box-shadow: var(--shadow-sm);
}

.day-cal__event-title {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-cal__event-meta {
  margin: 2px 0 0;
  font-size: 0.625rem;
  line-height: 1.2;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-cal__event--free,
.day-cal__event--kind-open {
  background: var(--color-slot-bg);
  border-left-color: var(--color-slot);
  color: var(--color-navy-900);
}

.day-cal__event--booked,
.day-cal__event--kind-booked {
  background: var(--color-navy-700);
  border-left-color: var(--color-navy-900);
  color: var(--color-on-strong);
}

.day-cal__event--partial {
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
  border-left-color: var(--color-accent);
  color: var(--color-navy-900);
}

.day-cal__event--full {
  background: var(--color-navy-700);
  border-left-color: var(--color-navy-900);
  color: var(--color-on-strong);
}

.day-cal__event--blocked,
.day-cal__event--kind-closed {
  background: var(--color-silver-100);
  border-left-color: var(--color-silver-400);
  color: var(--color-text-muted);
  opacity: 0.85;
}

.day-cal__event--personal {
  background: color-mix(in srgb, #c47a3a 16%, var(--color-surface));
  border-left-color: #c47a3a;
  color: #8a4f1a;
  opacity: 1;
}

.day-cal__now-line {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 2px;
  background: var(--color-accent);
  pointer-events: none;
}

.day-cal__now-line::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  transform: translateY(-50%);
}

.day-cal__schedule {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.day-cal__schedule-item {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
}

.day-cal__schedule-item--booked {
  border-left-color: var(--color-navy-700);
}

.day-cal__schedule-item--blocked {
  border-left-color: var(--color-silver-400);
  opacity: 0.75;
}

.day-cal__schedule-time {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-navy-900);
  line-height: 1.3;
}

.day-cal__schedule-end {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}

.day-cal__schedule-body {
  min-width: 0;
}

.day-cal__schedule-title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.day-cal__schedule-meta {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.day-cal__schedule-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-silver-100);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.day-cal__schedule-item--booked .day-cal__schedule-badge {
  background: rgba(26, 43, 74, 0.1);
  color: var(--color-navy-700);
}

.slot-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
}

.slot-item--free {
  border-left-color: var(--color-slot);
}

.slot-item--booked {
  border-left-color: var(--color-navy-700);
}

.slot-item--blocked {
  opacity: 0.55;
  border-left-color: var(--color-silver-400);
}

.slot-item__time {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-navy-900);
  min-width: 3.5rem;
}

.slot-item__service {
  margin: 0;
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.slot-item__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.slot-item__client {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-navy-700);
}

.slot-item__badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-silver-100);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.slot-item--free .slot-item__badge {
  background: var(--color-slot-bg);
  color: var(--color-slot);
}

.booking-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.booking-item__client {
  margin: 0;
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.booking-item__service {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.booking-item__status {
  font-size: var(--font-size-lg);
  color: var(--color-success);
}

.booking-item--pending .booking-item__status {
  color: var(--color-accent);
}

.dash-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4) calc(var(--space-4) + var(--safe-bottom));
  background: color-mix(in srgb, var(--color-bg) 96%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
}

.dash-actions--icons {
  flex-direction: column;
  align-items: stretch;
}

.dash-actions--icons .dash-actions__link {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-size-sm);
  padding-inline: var(--space-2);
}

.dash-actions--icons .dash-actions__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: 100%;
}

.dash-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
}

.dash-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 4.25rem;
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-navy-800);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.dash-quick-btn svg {
  color: var(--color-navy-700);
}

.dash-quick-btn[data-quick-action="personal"] svg { color: #c47a3a; }
.dash-quick-btn[data-quick-action="book"] svg { color: var(--color-navy-800); }
.dash-quick-btn[data-quick-action="open-slot"] svg { color: var(--color-slot); }
.dash-quick-btn[data-quick-action="close-slot"] svg { color: var(--color-silver-500); }

.dash-quick-btn:hover {
  border-color: var(--color-navy-700);
}

.day-cal__swipe {
  touch-action: pan-y;
  user-select: none;
}

.week-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  min-height: 22rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-border);
}

.week-cal__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
  padding: var(--space-2) 2px var(--space-2);
  border: none;
  background: var(--color-surface);
  cursor: pointer;
  text-align: center;
}

.week-cal__col.is-today .week-cal__date {
  background: var(--color-navy-900);
  color: var(--color-on-strong);
}

.week-cal__col.is-active {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.week-cal__weekday {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.week-cal__date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 auto;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-navy-900);
}

.week-cal__track {
  position: relative;
  flex: 1;
  min-height: 16rem;
  margin-top: var(--space-1);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-silver-100) 80%, transparent);
}

.week-cal__bar {
  position: absolute;
  inset-inline: 15%;
  border-radius: 2px;
  pointer-events: none;
}

.week-cal__bar--personal { background: #c47a3a; }
.week-cal__bar--booked { background: var(--color-navy-700); }
.week-cal__bar--open { background: var(--color-slot); }
.week-cal__bar--closed { background: var(--color-silver-400); }

.dash-settings__toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
}

.dash-settings__soon {
  font-style: normal;
  color: var(--color-text-muted);
  font-weight: 500;
}

.field__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy-900);
}

.share-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.share-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.share-list__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.share-list__meta span {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.week-schedule {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

/* Shared columns across rows: day | start | sep | end — content centered in each cell */
.week-schedule__row {
  display: grid;
  grid-template-columns: minmax(4.75rem, 1.1fr) minmax(4.25rem, 1fr) auto minmax(4.25rem, 1fr);
  align-items: center;
  justify-items: center;
  column-gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.week-schedule__day {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  min-width: 0;
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.week-schedule__day input[type="checkbox"] {
  flex-shrink: 0;
}

/* Children (start, sep, end) participate in the row grid */
.week-schedule__times {
  display: contents;
  color: var(--color-text-muted);
}

.week-schedule__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--color-text-muted);
}

.input--time {
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  text-align: center;
}

#working-hours-overlay .input--time {
  width: 100%;
  max-width: 5rem;
  box-sizing: border-box;
  text-align: center;
}

/* Center native time segments after hiding the clock glyph */
#working-hours-overlay .input--time::-webkit-datetime-edit {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0;
  text-align: center;
}

#working-hours-overlay .input--time::-webkit-datetime-edit-fields-wrapper {
  display: flex;
  justify-content: center;
}

/* Hide native clock glyphs; time remains editable by typing / focus */
#working-hours-overlay .input--time::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

#working-hours-overlay .sheet {
  padding: var(--space-4);
}

#working-hours-overlay .sheet__title {
  font-size: var(--font-size-lg);
}

#working-hours-overlay .sheet__hint {
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-2);
}

.btn--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

.btn--danger {
  color: #b42318;
  border-color: #fecdca;
}

.upcoming-bookings {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.upcoming-bookings__empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.upcoming-bookings__item {
  display: grid;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-3);
  text-align: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.upcoming-bookings__time,
.upcoming-bookings__service,
.upcoming-bookings__ref {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.booking-detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-5);
}

.booking-detail dt {
  margin: 0;
  color: var(--color-text-muted);
}

.booking-detail dd {
  margin: 0;
  font-weight: 600;
}

.day-cal__event--interactive,
.day-cal__schedule-item--interactive {
  cursor: pointer;
}

.slot-item__price-old {
  text-decoration: line-through;
  color: var(--color-text-muted);
  margin-inline-end: 0.25rem;
}

.checkout-price-old {
  text-decoration: line-through;
  color: var(--color-text-muted);
  margin-inline-end: 0.35rem;
}

.vip-benefits-panel {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.check-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.dash-section--upcoming {
  margin-bottom: var(--space-4);
}

.dash-section__subtitle {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 700;
}

/* --- Checkout page (screen 6) --- */
.checkout-card {
  margin-bottom: var(--space-5);
}

.checkout-card.master-card {
  padding: 0;
}

.checkout-card__head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.checkout-card__name {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.checkout-card__address {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.checkout-summary--page {
  margin-bottom: var(--space-5);
}

.input--textarea {
  min-height: 5rem;
  resize: vertical;
  line-height: 1.5;
}

.checkout-agree {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  text-align: start;
}

.checkout-agree input {
  margin-top: 0.2rem;
  accent-color: var(--color-navy-800);
  flex-shrink: 0;
}

.checkout-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-8) 0;
}

.checkout-success__icon {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-slot-bg);
  color: var(--color-slot);
  font-size: 2rem;
  font-weight: 700;
}

.checkout-success__title {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: 700;
}

.checkout-success__text {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.checkout-success__ref {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* --- Client studio page --- */
.screen--studio {
  padding: var(--space-4);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.studio-top {
  margin-top: calc(-1 * var(--space-2));
}

.studio-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy-700);
  text-decoration: none;
}

.studio-back:hover {
  text-decoration: underline;
}

.studio-hero.master-card {
  margin: 0;
}

.studio-hero__main {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--space-3);
  align-items: start;
}

.studio-hero__photo {
  width: 6.5rem;
  height: 6.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-silver-100);
  border: 1px solid var(--color-border);
}

.studio-hero__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.studio-hero__photo-img--placeholder {
  object-fit: contain;
  padding: var(--space-3);
  opacity: 0.28;
  filter: grayscale(20%);
}

.studio-hero__info {
  min-width: 0;
}

.studio-hero__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.studio-hero__name {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.25;
}

.studio-hero__address {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.studio-hero__map-nav {
  margin-top: var(--space-2);
}

.studio-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.studio-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.studio-section__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.studio-section__hint {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.studio-day-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.studio-date-picker {
  position: relative;
}

.studio-date-picker__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 2.5rem;
}

.studio-date-picker__icon {
  flex-shrink: 0;
  color: var(--color-navy-700);
}

.studio-date-picker__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

.studio-date-picker__panel {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  min-width: 16.5rem;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.studio-date-picker.is-open .studio-date-picker__trigger {
  border-color: var(--color-navy-700);
}

.mini-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.mini-cal__month {
  flex: 1;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-navy-900);
}

.mini-cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-navy-700);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.mini-cal__nav:hover {
  background: var(--color-silver-100);
}

.mini-cal__weekdays,
.mini-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.mini-cal__weekdays {
  margin-bottom: var(--space-2);
}

.mini-cal__weekday {
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  padding: var(--space-1) 0;
}

.mini-cal__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy-900);
  cursor: pointer;
}

.mini-cal__day:hover:not(.mini-cal__day--disabled):not(.is-selected) {
  background: var(--color-silver-100);
}

.mini-cal__day--today {
  box-shadow: inset 0 0 0 1.5px var(--color-navy-400);
}

.mini-cal__day.is-selected {
  background: var(--color-accent);
  color: var(--color-on-strong);
}

.mini-cal__day--disabled {
  color: var(--color-text-muted);
  opacity: 0.35;
  cursor: default;
}

.studio-calendar__hint {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.studio-slot-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.studio-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.studio-actions__contacts {
  flex: 1;
  min-width: 0;
}

.studio-actions .studio-book-btn {
  flex: 0 0 auto;
  margin-left: auto;
  justify-content: center;
}

@media (max-width: 479px) {
  .studio-actions .studio-book-btn {
    width: 100%;
    margin-left: 0;
  }
}

/* --- Admin inbox (/Admin) --- */
.screen--admin {
  align-items: stretch;
  justify-content: flex-start;
  padding: var(--space-4) var(--space-4) var(--space-8);
}

.admin {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.admin__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.admin__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.admin__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.admin__meta-sep {
  opacity: 0.5;
}

.admin__github-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-size: 0.9rem;
}

.admin__github-links a {
  color: var(--color-success);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin__edit-banner {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.admin__edit-banner a {
  color: var(--color-accent, #2563eb);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin__flash {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
}

.admin__flash--ok {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: var(--color-text);
}

.admin__flash--err,
.admin__banner {
  background: color-mix(in srgb, var(--color-danger, #b42318) 12%, transparent);
  color: var(--color-danger, #b42318);
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.admin__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin__form--compact {
  gap: var(--space-2);
}

.admin__form--compact .field--compact {
  gap: var(--space-1);
}

.admin__row--compact {
  gap: var(--space-2);
}

.admin__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 479px) {
  .admin__row {
    grid-template-columns: 1fr;
  }
}

.admin__list-title {
  margin: 0 0 var(--space-3);
  font-size: 1.1rem;
}

.admin__list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: var(--space-3);
}

.admin__status-filter .input--compact {
  min-width: 11rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
}

.admin__select-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.95rem;
  cursor: pointer;
  user-select: none;
}

.admin__empty {
  margin: 0;
  color: var(--color-text-muted);
}

.admin__issues {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-issue {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.admin-issue__check {
  display: inline-flex;
  align-items: center;
  padding-top: 0.35rem;
}

.admin-issue__shots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.admin-issue__thumb {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border);
}

.admin-issue__plan {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

.admin__clear-btn {
  margin-top: var(--space-4);
  width: auto;
  max-width: 20rem;
}

.admin__github-link {
  margin: var(--space-3) 0 0;
  font-size: 0.95rem;
}

.admin__github-link a {
  font-weight: 600;
  color: var(--color-success, #2d8a5e);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.admin__github-link a:hover,
.admin__github-link a:focus-visible {
  color: var(--color-accent-hover, #236b4f);
  text-decoration-thickness: 2px;
}

.admin__github-hint {
  display: block;
  margin-top: 0.25rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.admin-issue__edit {
  margin-top: var(--space-3);
}

.admin-issue__edit summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-accent, #0b6);
}

.admin-issue__edit-form {
  margin-top: var(--space-2);
  display: grid;
  gap: var(--space-2);
}

.btn--small {
  width: auto;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
}

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

.admin-issue__status {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--color-silver-100, #f0f0f0);
}

.admin-issue.is-todo .admin-issue__status { color: var(--color-text-muted); }
.admin-issue.is-progress .admin-issue__status {
  color: #8a6d00;
  background: #fff3bf;
}
.admin-issue.is-done .admin-issue__status {
  color: #0e8a16;
  background: #d8f5d8;
}
.admin-issue.is-question .admin-issue__status {
  color: #b60205;
  background: #ffe0e0;
}

.admin-issue__title {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.35;
}

.admin-issue__title a {
  color: var(--color-success);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-issue__title:hover {
  text-decoration: underline;
}

.admin-issue__preview {
  margin: var(--space-1) 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.admin-issue__meta {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.admin-issue__meta a {
  color: var(--color-success);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-issue__delete {
  margin: 0;
}

a.user-menu__item {
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

.dash-header__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.master-subpage__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.master-subpage__title {
  margin: 0;
  font-size: var(--font-size-xl);
}

.master-subpage__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.master-subpage__actions {
  margin-top: var(--space-6);
  padding-bottom: var(--space-6);
}

/* Business manage hub */
.biz-manage-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 0;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.biz-manage-tabs::-webkit-scrollbar {
  display: none;
}

.biz-manage-tabs__btn {
  flex: 1 0 auto;
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--space-3) var(--space-2);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
}

.biz-manage-tabs__btn.is-active {
  color: var(--color-navy-900);
  border-bottom-color: var(--color-navy-900);
}

.biz-manage-panel {
  animation: biz-manage-panel-in 0.2s ease;
}

.biz-manage-panel[hidden] {
  display: none !important;
  animation: none;
}

@keyframes biz-manage-panel-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .biz-manage-panel {
    animation: none;
  }
}

.master-card--manage .master-card__categories-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.master-card__bar-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.master-card__bar-group--grow {
  flex: 1 1 auto;
}

.master-card__bar-sep {
  opacity: 0.55;
  flex-shrink: 0;
}

.master-card--manage .master-card__categories-text {
  min-width: 0;
}

.master-card__pencil {
  appearance: none;
  border: 0;
  background: color-mix(in srgb, var(--color-navy-900) 8%, transparent);
  color: var(--color-navy-900);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
}

.master-card__pencil:hover {
  background: color-mix(in srgb, var(--color-navy-900) 16%, transparent);
}

.master-card__categories-bar .master-card__pencil {
  background: color-mix(in srgb, #fff 14%, transparent);
  color: var(--color-silver-100, #f0f2f5);
}

.master-card__categories-bar .master-card__pencil:hover {
  background: color-mix(in srgb, #fff 24%, transparent);
  color: var(--color-on-strong);
}

.master-card__pencil--photo {
  position: absolute;
  right: 0.35rem;
  bottom: 0.35rem;
}

.master-card__photo {
  position: relative;
}

.master-card__title-row,
.master-card__address-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.master-card__title-row .master-card__name,
.master-card__address-row .master-card__address {
  min-width: 0;
}

.master-card__actions--manage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.master-card__contacts-edit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.master-card__visibility {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  margin-inline-start: auto;
}

.master-card__visibility-label {
  font-size: var(--font-size-sm);
  color: var(--color-navy-900);
  max-width: 8rem;
  line-height: 1.2;
}

.master-card__visibility-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.master-card__visibility-track {
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--color-silver-300, #c5c9d1);
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.master-card__visibility-track::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  inset-inline-start: 0.15rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
  transition: transform 0.15s ease;
}

.master-card__visibility-input:checked + .master-card__visibility-track {
  background: var(--color-navy-900);
}

.master-card__visibility-input:checked + .master-card__visibility-track::after {
  transform: translateX(1.25rem);
}

[dir="rtl"] .master-card__visibility-input:checked + .master-card__visibility-track::after {
  transform: translateX(-1.25rem);
}

.manage-edit-sheet__body {
  max-height: min(70vh, 32rem);
  overflow: auto;
  margin: var(--space-3) 0;
}

.manage-edit-sheet__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.phone-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.biz-manage__empty {
  margin: 0;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

.biz-manage {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.master-services__mount {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.svc-cat-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  padding: 0;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.svc-cat-tabs::-webkit-scrollbar {
  display: none;
}

.svc-cat-tabs__btn {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--space-3) var(--space-2);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
}

.svc-cat-tabs__btn.is-active {
  color: var(--color-navy-900);
  border-bottom-color: var(--color-navy-900);
}

.svc-cat-tabs__btn--add {
  min-width: 2.5rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
}

.svc-cat-panel[hidden] {
  display: none !important;
}

.svc-cat-panel__head {
  margin-bottom: var(--space-2);
}

.svc-cat-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.svc-cat-panel__title > span:first-of-type {
  min-width: 0;
  flex: 1 1 auto;
}

.svc-cat-panel__modes {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex: 0 0 auto;
}

.svc-cat-panel__mode[hidden] {
  display: none !important;
}

.svc-cat-panel__mode:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Pencil / check match Save (btn--accent) theme */
.svc-cat-panel__mode.master-card__pencil {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: var(--color-on-strong);
  box-shadow: var(--shadow-md);
}

.svc-cat-panel__mode.master-card__pencil:hover {
  background: linear-gradient(135deg, var(--color-accent-hover), var(--color-slot));
}

.svc-cat-panel__fields {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.svc-cat-panel__fields:disabled {
  opacity: 1;
}

.svc-cat-panel__actions {
  margin-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.svc-cat-panel__actions[hidden] {
  display: none !important;
}

.setup-add-service__trigger[hidden] {
  display: none !important;
}

.master-clients__section {
  margin-bottom: var(--space-6);
}

.master-clients__section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.master-clients__lists {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.master-clients__list-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.master-clients__list-name {
  font-weight: 600;
}

.master-clients__list-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Admin test results tab */
.admin__tabs {
  margin: 0.75rem 0 1rem;
}

.admin__tests-run-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin__tests-run-link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--color-border, #d0d5dd);
  text-decoration: none;
  color: inherit;
  font-size: var(--font-size-sm);
}

.admin__tests-run-link.is-active {
  border-color: var(--color-accent, #2f6fed);
  background: color-mix(in srgb, var(--color-accent, #2f6fed) 8%, transparent);
}

.admin__tests-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: var(--font-size-sm);
}

.admin__tests-table-wrap {
  overflow-x: auto;
}

.admin__tests-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.admin__tests-table th,
.admin__tests-table td {
  text-align: start;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--color-border, #e4e7ec);
  vertical-align: top;
}

.admin__tests-table tr.is-failed {
  background: color-mix(in srgb, #d92d20 8%, transparent);
}

.admin__tests-table tr.is-skipped,
.admin__tests-table tr.is-not-run {
  opacity: 0.85;
}

.admin__tests-detail-cell {
  max-width: 18rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin__tests-artifact-gone {
  color: var(--color-muted, #667085);
}

/* --- Account settings / UI theme picker --- */
#settings-overlay .sheet {
  max-height: min(88dvh, 40rem);
  overflow: auto;
}

.settings-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.settings-sheet__head .sheet__title {
  margin: 0;
}

.settings-close {
  flex-shrink: 0;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-navy-900);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.settings-theme-label {
  display: block;
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-navy-900);
}

.settings-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.theme-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-navy-900);
  text-align: start;
  cursor: pointer;
}

.theme-card:hover,
.theme-card:focus-visible {
  border-color: var(--color-navy-700);
  outline: none;
}

.theme-card.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.theme-card__swatch {
  display: block;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--theme-preview-bg, var(--color-silver-100));
  box-shadow: inset 0 -0.45rem 0 var(--theme-preview-accent, var(--color-accent));
}

.theme-card__name {
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.settings-photo-preview {
  display: block;
  height: 5.5rem;
  margin-bottom: var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
}

.theme-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.theme-photo-actions .btn {
  flex: 1 1 auto;
}

/* Dark neon themes: navy tokens are light ink — strong fills use accent instead */
html[data-theme-mode="dark"] .overlay {
  background: color-mix(in srgb, #000 72%, transparent);
}

html[data-theme-mode="dark"] .btn--primary,
html[data-theme-mode="dark"] .btn--primary:hover {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: var(--color-on-strong);
}

html[data-theme-mode="dark"] .lang-switch__btn.is-active,
html[data-theme-mode="dark"] .sphere-switch__btn.is-active,
html[data-theme-mode="dark"] .sphere-switch__more .filter-dropdown__toggle.is-active,
html[data-theme-mode="dark"] .search-scope__option.is-active,
html[data-theme-mode="dark"] .chip.is-active,
html[data-theme-mode="dark"] .user-menu__profile-avatar--initials,
html[data-theme-mode="dark"] .week-cal__col.is-today .week-cal__date,
html[data-theme-mode="dark"] .toast,
html[data-theme-mode="dark"] .master-card__action--book,
html[data-theme-mode="dark"] .master-card__action--book:hover {
  background: var(--color-accent);
  color: var(--color-on-strong);
  border-color: var(--color-accent);
}

html[data-theme-mode="dark"] .day-cal__event--booked,
html[data-theme-mode="dark"] .day-cal__event--kind-booked,
html[data-theme-mode="dark"] .day-cal__event--full,
html[data-theme-mode="dark"] .week-cal__bar--booked {
  background: color-mix(in srgb, var(--color-accent) 42%, #000);
  border-left-color: var(--color-accent);
  color: var(--color-text);
}

html[data-theme-mode="dark"] .theme-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

html[data-theme-mode="dark"] .theme-card.is-active {
  border-color: var(--color-accent);
}

/* --- Svivli (default): mid-gray metal — light ink on chrome (dark navy unreadable on #8a8a94) --- */
html[data-theme="svivli"] {
  --metal-ink: #f2f2f6;
  --metal-ink-muted: rgba(242, 242, 246, 0.72);
}

html[data-theme="svivli"] .app-bar,
html[data-theme="svivli"] .app-bar--radar {
  background: var(--metal-header);
  border-bottom-color: var(--metal-edge-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 3px 10px rgba(0, 0, 0, 0.28);
}

html[data-theme="svivli"] .app-bar--radar {
  --app-bar-chrome-bg: transparent;
  --app-bar-chrome-border: var(--metal-edge);
}

/* Wordmark stays navy to match brand icons; chrome labels use light ink */
html[data-theme="svivli"] .app-bar__wordmark,
html[data-theme="svivli"] .brand-title {
  color: var(--color-brand-navy);
}

html[data-theme="svivli"] .chrome-menu__trigger {
  background: var(--metal-inactive);
  border-color: var(--metal-edge-dark);
  color: var(--metal-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.2);
}

html[data-theme="svivli"] .chrome-menu__trigger:hover,
html[data-theme="svivli"] .chrome-menu.is-open .chrome-menu__trigger {
  background: linear-gradient(180deg, #b8b8c0 0%, #9898a2 40%, #787882 75%, #64646e 100%);
  border-color: #4a4a52;
  color: var(--metal-ink);
}

html[data-theme="svivli"] .chrome-menu__badge {
  background: #2a2a32;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

html[data-theme="svivli"] .chrome-menu__badge--symbol,
html[data-theme="svivli"] .chrome-menu__code {
  color: var(--metal-ink);
}

html[data-theme="svivli"] .chrome-menu__dropdown {
  background: var(--metal-card);
  border-color: var(--metal-edge-dark);
  color: var(--metal-ink);
}

html[data-theme="svivli"] .chrome-menu__option {
  color: var(--metal-ink);
}

html[data-theme="svivli"] .chrome-menu__name {
  color: inherit;
}

html[data-theme="svivli"] .chrome-menu__option:hover,
html[data-theme="svivli"] .chrome-menu__option.is-active {
  background: var(--metal-active);
  color: var(--color-on-strong);
}

html[data-theme="svivli"] .lang-switch__btn,
html[data-theme="svivli"] .sphere-switch__btn,
html[data-theme="svivli"] .sphere-switch__more .filter-dropdown__toggle,
html[data-theme="svivli"] .chip,
html[data-theme="svivli"] .search-scope__btn {
  background: var(--metal-inactive);
  border-color: var(--metal-edge-dark);
  color: var(--metal-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.2);
}

html[data-theme="svivli"] .lang-switch__btn:hover:not(.is-active),
html[data-theme="svivli"] .sphere-switch__btn:hover:not(.is-active),
html[data-theme="svivli"] .sphere-switch__more .filter-dropdown__toggle:hover:not(.is-active),
html[data-theme="svivli"] .chip:hover:not(.is-active) {
  background: linear-gradient(180deg, #b8b8c0 0%, #9898a2 40%, #787882 75%, #64646e 100%);
  border-color: #4a4a52;
  color: var(--metal-ink);
}

html[data-theme="svivli"] .lang-switch__btn.is-active,
html[data-theme="svivli"] .sphere-switch__btn.is-active,
html[data-theme="svivli"] .sphere-switch__more .filter-dropdown__toggle.is-active,
html[data-theme="svivli"] .search-scope__option.is-active,
html[data-theme="svivli"] .chip.is-active {
  background: var(--metal-active);
  border-color: var(--metal-edge);
  color: var(--color-on-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(12, 22, 40, 0.16),
    0 1px 3px rgba(0, 0, 0, 0.2);
}

html[data-theme="svivli"] .filter-dropdown__toggle,
html[data-theme="svivli"] .input,
html[data-theme="svivli"] .search-row .input {
  background: var(--metal-field);
  border-color: var(--metal-edge-dark);
  color: var(--metal-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

html[data-theme="svivli"] .filter-dropdown__toggle,
html[data-theme="svivli"] .filter-dropdown__label {
  color: var(--metal-ink);
}

html[data-theme="svivli"] .filter-dropdown__chevron,
html[data-theme="svivli"] .input::placeholder {
  color: var(--metal-ink-muted);
}

html[data-theme="svivli"] .filter-dropdown__panel,
html[data-theme="svivli"] .search-scope__menu,
html[data-theme="svivli"] .sheet,
html[data-theme="svivli"] .overlay .sheet {
  background: var(--metal-card);
  border-color: var(--metal-edge-dark);
  color: var(--metal-ink);
  box-shadow: var(--shadow-md);
}

html[data-theme="svivli"] .sheet__title,
html[data-theme="svivli"] .sheet__hint,
html[data-theme="svivli"] .settings-theme-label {
  color: var(--metal-ink);
}

html[data-theme="svivli"] .filter-dropdown__option {
  color: var(--metal-ink);
}

html[data-theme="svivli"] .filter-dropdown__option.is-active,
html[data-theme="svivli"] .filter-dropdown__option:hover {
  background: var(--metal-active);
  color: var(--color-on-strong);
}

html[data-theme="svivli"] .btn--primary,
html[data-theme="svivli"] .btn--primary:hover,
html[data-theme="svivli"] .btn--accent,
html[data-theme="svivli"] .master-card__action--book,
html[data-theme="svivli"] .master-card__action--book:hover {
  background: var(--metal-active);
  color: var(--color-on-strong);
  border-color: var(--metal-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.22);
}

html[data-theme="svivli"] .master-card {
  background: var(--metal-card);
  border-color: var(--metal-edge-dark);
  color: var(--metal-ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

html[data-theme="svivli"] .master-card__name,
html[data-theme="svivli"] .master-card__address,
html[data-theme="svivli"] .master-card__distance {
  color: var(--metal-ink);
}

html[data-theme="svivli"] .radar-section-title,
html[data-theme="svivli"] .radius-row {
  color: var(--metal-ink-muted);
}

html[data-theme="svivli"] .master-card__categories-bar {
  background: var(--metal-card-bar);
  color: var(--metal-ink);
  border-bottom: 1px solid #0a1018;
}

html[data-theme="svivli"] .master-card__photo,
html[data-theme="svivli"] .master-card__photo-img,
html[data-theme="svivli"] .master-card__photo-img--placeholder {
  background: linear-gradient(160deg, #a8a8b2 0%, #8a8a94 45%, #6e6e78 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 1px var(--metal-edge-dark);
}

html[data-theme="svivli"] .master-card__slot {
  background: var(--metal-field);
  border-left-color: var(--metal-edge);
  color: var(--metal-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

html[data-theme="svivli"] .master-card__slot-service,
html[data-theme="svivli"] .master-card__slot-service-row .master-card__slot-price,
html[data-theme="svivli"] .master-card__slot-label,
html[data-theme="svivli"] .master-card__slot-empty {
  color: var(--metal-ink);
}

html[data-theme="svivli"] .master-card__action:not(.master-card__action--book) {
  background: var(--metal-inactive);
  border-color: var(--metal-edge-dark);
  color: var(--metal-ink);
}

html[data-theme="svivli"] .radius-row input[type="range"] {
  accent-color: var(--metal-ink);
}

html[data-theme="svivli"] .radius-row input[type="range"]::-webkit-slider-runnable-track {
  height: 0.35rem;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #2a2a32 0%, #5a5a64 100%);
}

html[data-theme="svivli"] .radius-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: -0.4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #d5dde6 42%, #8a93a1 100%);
  border: 1px solid #6a6a74;
}

html[data-theme="svivli"] .radius-row input[type="range"]::-moz-range-track {
  height: 0.35rem;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #2a2a32 0%, #5a5a64 100%);
}

html[data-theme="svivli"] .radius-row input[type="range"]::-moz-range-thumb {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #d5dde6 42%, #8a93a1 100%);
  border: 1px solid #6a6a74;
}

html[data-theme="svivli"] .theme-card {
  background: var(--metal-inactive);
  border-color: var(--metal-edge-dark);
  color: var(--metal-ink);
}

html[data-theme="svivli"] .theme-card.is-active {
  background: var(--metal-active);
  border-color: var(--metal-edge);
  color: var(--color-on-strong);
}

html[data-theme="svivli"] .user-menu__profile-avatar--initials,
html[data-theme="svivli"] .week-cal__col.is-today .week-cal__date,
html[data-theme="svivli"] .toast {
  background: var(--metal-active);
  color: var(--color-on-strong);
  border-color: var(--metal-edge);
}

html[data-theme="svivli"] .user-menu__trigger,
html[data-theme="svivli"] .btn--outline,
html[data-theme="svivli"] .btn--ghost,
html[data-theme="svivli"] .settings-close {
  color: var(--metal-ink);
}

html[data-theme="svivli"] .btn--outline {
  border-color: var(--metal-edge);
  background: var(--metal-inactive);
}

/* --- Linen / Mist: soft volume around original navy brand --- */
html[data-theme="linen"] .sphere-switch__btn:not(.is-active),
html[data-theme="linen"] .chip:not(.is-active),
html[data-theme="linen"] .filter-dropdown__toggle,
html[data-theme="linen"] .search-scope__btn,
html[data-theme="linen"] .lang-switch__btn:not(.is-active),
html[data-theme="mist"] .sphere-switch__btn:not(.is-active),
html[data-theme="mist"] .chip:not(.is-active),
html[data-theme="mist"] .filter-dropdown__toggle,
html[data-theme="mist"] .search-scope__btn,
html[data-theme="mist"] .lang-switch__btn:not(.is-active) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 55%, #fff) 0%, var(--color-accent) 100%);
  border-color: color-mix(in srgb, var(--color-accent) 70%, var(--color-navy-900));
  color: var(--color-brand-navy);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(12, 22, 40, 0.08);
}

html[data-theme="linen"] .sphere-switch__btn.is-active,
html[data-theme="linen"] .chip.is-active,
html[data-theme="linen"] .lang-switch__btn.is-active,
html[data-theme="linen"] .btn--primary,
html[data-theme="linen"] .master-card__action--book,
html[data-theme="mist"] .sphere-switch__btn.is-active,
html[data-theme="mist"] .chip.is-active,
html[data-theme="mist"] .lang-switch__btn.is-active,
html[data-theme="mist"] .btn--primary,
html[data-theme="mist"] .master-card__action--book {
  background: linear-gradient(180deg, #1c2d4a 0%, var(--color-brand-navy) 100%);
  border-color: var(--color-brand-navy);
  color: var(--color-on-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 6px rgba(12, 22, 40, 0.2);
}

html[data-theme="linen"] .master-card__photo,
html[data-theme="linen"] .master-card__photo-img--placeholder,
html[data-theme="mist"] .master-card__photo,
html[data-theme="mist"] .master-card__photo-img--placeholder {
  background: color-mix(in srgb, var(--color-accent) 40%, #fff);
}

html[data-theme="linen"] .master-card__slot,
html[data-theme="mist"] .master-card__slot {
  background: color-mix(in srgb, var(--color-accent) 55%, #fff);
  border-left-color: var(--color-brand-navy);
}

html[data-theme="linen"] .input,
html[data-theme="mist"] .input,
html[data-theme="linen"] .search-row .input,
html[data-theme="mist"] .search-row .input {
  background: color-mix(in srgb, var(--color-accent) 45%, #fff);
  border-color: var(--color-border);
  color: var(--color-brand-navy);
}

html[data-theme="mist"] .master-card__categories-bar {
  background: linear-gradient(180deg, #d8d0ec 0%, #c4b8e0 100%);
  color: var(--color-brand-navy);
}

html[data-theme="linen"] .master-card__categories-bar {
  background: linear-gradient(180deg, #1c2d4a 0%, var(--color-brand-navy) 100%);
  color: var(--color-on-strong);
}