/* Imperial Palace · Relax Center — дизайн-система.
   Палітра з фірмового ПРОСПЕКТА (розповсюджується всюди → сайт упізнаваний до нього):
   синій + кава + золото на кремовій основі, завитки-орнаменти.
   --brand (синій) themeable per-tenant (§0b). Дисплейний шрифт — Cormorant Garamond. */

/* ═══════════════════════════════════════════════════════════════════════
   БРЕНД ТЕНАНТА — оце і ТІЛЬКИ це змінюється для НОВОГО спа (white-label).
   Повний чек-лист (назва, телефон, логотип, каталог, мови, домен) — docs/BRANDING.md.
   Майбутнє (§0b CONCEPT): ці значення приходитимуть з tenant-конфіга/БД як :root-override.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --base:      #F1E9D8;  /* основа сторінки (крем) */
  --base-2:    #E8DEC9;  /* трохи глибша — чергування секцій */
  --ink:       #29201A;  /* колір тексту */
  --stone:     #6E685C;  /* приглушений текст */
  --brand:     #274069;  /* фірмовий акцент (hover, активне) */
  --brand-deep:#1B2E4C;  /* глибокий бренд — шапка, підвал, кнопки, кайма */
  --gold:      #9F8038;  /* акцент-золото на кремі (ціни, надзаголовки) */
  --gold-soft: #D7BD85;  /* світле золото на темному фоні */
  --cacao:     #CFA57F;  /* тепла плитка-плейсхолдер фото (верх) */
  --cacao-deep:#B5875E;  /* тепла плитка-плейсхолдер фото (низ) */
  --line:      #DED3BC;  /* тонкі лінії/рамки */
}

/* ── СИСТЕМА (однакова для всіх спа; при ребрендингу НЕ чіпати) ── */
:root {
  --wrap: 1160px;
  --gap: clamp(16px, 3vw, 32px);
  --radius: 14px;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); }
/* Банер тестового середовища (лише стейдж) — клік перекидає на прод */
.staging-banner { display: block; position: sticky; top: 0; z-index: 900; background: #b23b2e; color: #fff; text-align: center; padding: 9px 14px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.staging-banner:hover { background: #9c3226; }

.muted { color: var(--stone); }

/* ── Кнопки ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  letter-spacing: 0.02em;
  padding: 13px 26px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn-primary { background: var(--brand-deep); color: #F5F2EA; }
.btn-primary:hover { background: var(--brand); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-deep); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ── Плейсхолдер фото (атмосферна плитка; --h крутить відтінок) ── */
.ph {
  position: relative;
  --h: 0deg;
  background:
    radial-gradient(120% 90% at 24% 14%, rgba(255,248,238,.34) 0%, transparent 55%),
    radial-gradient(120% 120% at 82% 94%, rgba(120,82,54,.55) 0%, transparent 60%),
    linear-gradient(150deg, #E4C9AE 0%, var(--cacao-deep) 100%);
  filter: hue-rotate(var(--h));
  overflow: hidden;
}
/* м'яка «пара» + віньєтка, щоб плитка читалась як фото, а не як заливка */
.ph::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 30% 30%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(80% 70% at 50% 120%, rgba(0,0,0,.22), transparent 60%);
}
.ph::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px);
  opacity: .5;
}

/* ── Шапка ───────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(23,35,62,.93);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(215,189,133,.32);
}
.site-header .bar {
  display: flex; align-items: center; gap: var(--gap);
  height: 66px;
}
.wordmark {
  text-decoration: none; color: #F1E9D8;
  display: flex; align-items: center; gap: 11px; line-height: 1;
}
.logo-img { height: 31px; width: auto; display: block; }
.wordmark span {
  font-family: var(--sans); font-size: 10px; font-weight: 600; font-style: normal;
  text-transform: uppercase; letter-spacing: .2em; color: var(--gold-soft);
  padding-left: 11px; border-left: 1px solid rgba(215,189,133,.4);
}

/* Фірмова золота хвиля-роздільник (той самий завиток, що на проспекті) */
.divider { display: flex; align-items: center; justify-content: center; padding-block: 6px; }
.divider .swoosh { width: min(440px, 74vw); height: auto; display: block; opacity: .95; }
.script { font-family: var(--serif); font-style: italic; font-weight: 500; }
.site-header nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.site-header nav a { text-decoration: none; font-size: 15px; color: rgba(241,233,216,.72); }
.site-header nav a:hover { color: var(--gold-soft); }
.phone-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 15px; text-decoration: none; color: #F1E9D8;
  border: 1px solid rgba(241,233,216,.32); border-radius: 999px; padding: 8px 16px;
  white-space: nowrap;
}
.phone-btn:hover { border-color: var(--gold-soft); }
.phone-btn .ic { color: var(--gold-soft); }
@media (max-width: 720px) {
  .site-header nav .navlink { display: none; }
  .phone-btn .txt { display: none; }
  .wordmark { font-size: 20px; }
}

/* ── Hero ────────────────────────────────────────────────── */
.hero { position: relative; min-height: min(78vh, 720px); display: flex; align-items: flex-end; }
.hero .ph { position: absolute; inset: 0; --h: -6deg; }
.hero .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,22,16,.28) 0%, rgba(30,22,16,.32) 42%, rgba(30,22,16,.88) 100%);
}
.hero .stars { color: var(--gold-soft); letter-spacing: .34em; font-size: 13px; margin-bottom: 8px; }
.hero-script { font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--gold-soft); font-size: clamp(26px, 3.6vw, 40px); line-height: 1; margin-bottom: 10px; }
.hero .inner { position: relative; padding-block: clamp(40px, 8vw, 96px); color: #F7F4EC; max-width: 680px; }
.hero h1 { font-size: clamp(40px, 7vw, 76px); font-weight: 600; letter-spacing: .005em; }
.hero h1 em { font-style: italic; color: var(--gold-soft); }
.hero p { font-size: clamp(16px, 2.2vw, 20px); color: rgba(247,244,236,.9); margin: 18px 0 28px; }
.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .cta .note { font-size: 13px; color: rgba(247,244,236,.72); }
.hero .btn-ghost { color: #F7F4EC; border-color: rgba(247,244,236,.5); }
.hero .btn-ghost:hover { border-color: #F7F4EC; color: #fff; }

/* ── Секції ──────────────────────────────────────────────── */
section { padding-block: clamp(52px, 8vw, 104px); }
.section-head { max-width: 620px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 { font-size: clamp(30px, 4.5vw, 46px); margin-top: 10px; }
.section-head p { color: var(--stone); margin: 14px 0 0; }
.alt { background: var(--base-2); }

/* ── Програми (комплекси) ────────────────────────────────── */
.programs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }
.program-card {
  display: flex; flex-direction: column;
  background: var(--base); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.program-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(23,35,62,.18); }
.program-card .ph { aspect-ratio: 3 / 2; }
.program-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.program-card h3 { font-size: 30px; }
.program-card .sub { color: var(--stone); font-size: 15px; flex: 1; }
.program-card .meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.program-card .price { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--brand-deep); }
.program-card .dur { font-size: 14px; color: var(--stone); }
@media (prefers-reduced-motion: reduce) { .program-card:hover { transform: none; } }

/* ── Меню послуг ─────────────────────────────────────────── */
.cat + .cat { margin-top: clamp(40px, 6vw, 72px); }
.cat > h3 {
  font-size: clamp(24px, 3.5vw, 34px); margin-bottom: 22px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.services { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); }
.service-card {
  display: grid; grid-template-columns: 96px 1fr; gap: 16px;
  background: var(--base); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; text-decoration: none; color: inherit; align-items: stretch;
  transition: border-color .18s ease, transform .18s ease;
}
.service-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.service-card .ph { border-radius: 10px; }
.service-card .info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.service-card h4 { font-family: var(--serif); font-size: 22px; font-weight: 600; margin: 2px 0 0; line-height: 1.05; }
.service-card .teaser { font-size: 14px; color: var(--stone); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.service-card .meta { margin-top: auto; display: flex; gap: 12px; align-items: baseline; }
.service-card .price { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--brand-deep); }
.service-card .dur { font-size: 13px; color: var(--stone); }
.service-card .more { margin-left: auto; font-size: 13px; color: var(--gold); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .service-card:hover { transform: none; } }

/* ── Сторінка деталей + слайдер ──────────────────────────── */
.detail { padding-top: clamp(30px, 5vw, 56px); }
.crumb { font-size: 14px; color: var(--stone); text-decoration: none; }
.crumb:hover { color: var(--brand-deep); }
.detail-head { margin: 14px 0 26px; max-width: 720px; }
.detail-head h1 { font-size: clamp(34px, 5.5vw, 58px); }
.detail-head .lead { font-size: 19px; color: var(--stone); margin-top: 12px; }
.detail-meta { display: flex; gap: 24px; align-items: baseline; margin-top: 18px; }
.detail-meta .price { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--brand-deep); }
.detail-meta .dur { color: var(--stone); }

.slider { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--base-2); }
.slides { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce) { .slides { transition: none; } }
.slide { position: relative; flex: 0 0 100%; }
.slide .ph { aspect-ratio: 16 / 9; }
/* фото слайда (замінює плейсхолдер, коли завантажене) */
.ph.has-img { background: none; filter: none; }
.ph.has-img::before, .ph.has-img::after { display: none; }   /* декор плитки (пара/смужки) — лише для порожнього плейсхолдера, не поверх реального фото */
.slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.slide .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 4vw, 40px);
  color: #F7F4EC;
  background: linear-gradient(180deg, transparent, rgba(38,42,38,.72));
}
.slide .cap .n { font-family: var(--sans); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); }
.slide .cap h3 { font-size: clamp(24px, 3.5vw, 34px); color: #fff; margin: 6px 0 6px; }
.slide .cap p { margin: 0; max-width: 560px; color: rgba(247,244,236,.92); font-size: 16px; }
.slider .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(245,242,234,.85); color: var(--ink); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.slider .nav:hover { background: #fff; }
.slider .prev { left: 14px; } .slider .next { right: 14px; }
.slider .dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; }
.slider .dots button { width: 9px; height: 9px; border-radius: 999px; border: none; cursor: pointer; background: rgba(247,244,236,.5); padding: 0; }
.slider .dots button[aria-current="true"] { background: #fff; width: 22px; }

.detail-cta {
  margin-top: 30px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 22px 24px; background: var(--base-2); border-radius: var(--radius);
}
.detail-cta .txt { font-size: 15px; color: var(--stone); }
.detail-cta strong { color: var(--ink); }

/* ── Смуга контактів / підвал ────────────────────────────── */
.ribbon { background: var(--brand-deep); color: #EAE6DA; }  /* какао тепер світле → смугу лишаємо синьою для контрасту */
.ribbon .wrap { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; justify-content: space-between; padding-block: 26px; }
.ribbon .item { display: flex; flex-direction: column; gap: 2px; }
.ribbon .k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); }
.ribbon .v { font-family: var(--serif); font-size: 22px; }
.ribbon a { color: inherit; text-decoration: none; }

footer.site-footer { background: var(--brand-deep); color: #A8AEC0; padding-block: 40px; font-size: 14px; }
footer.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
footer.site-footer .wordmark { color: #F1E9D8; font-size: 20px; }
footer.site-footer a { color: var(--gold-soft); text-decoration: none; }

/* ── 404 ─────────────────────────────────────────────────── */
.center-page { min-height: 60vh; display: grid; place-content: center; text-align: center; gap: 14px; }
.center-page h1 { font-size: clamp(40px, 8vw, 80px); }

/* ═══════════════════════════════════════════════════════════════════════
   Клієнтський браузер послуг (панель → список → деталі). Mobile-first.
   Дані з каталогу (core), рендер — static/js/browser.js.
   ═══════════════════════════════════════════════════════════════════════ */
body.browser { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.browser, .browser-cols, .col, .detail, .slider, .slides { max-width: 100%; min-width: 0; }

/* ── Компактна шапка (mobile-first: тільки логотип + дзвінок) ── */
/* Прихований від ока, але доступний скрінрідерам/SEO (для H1 на візуальному лендингу без текст-заголовка) */
.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; }
.app-topbar {
  flex: none; display: flex; align-items: center; gap: 14px;
  height: 56px; padding: 0 clamp(14px, 4vw, 26px);
  background: var(--brand-deep); color: var(--gold-soft);
  border-bottom: 1px solid rgba(215,189,133,.28);
}
.app-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gold-soft); }
.app-logo .logo-img { height: 26px; width: auto; }
.app-logo .rc {
  font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-soft);
  padding-left: 10px; border-left: 1px solid rgba(215,189,133,.4);
}
.app-call {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; color: #F1E9D8; font-weight: 600; font-size: 14px;
  border: 1px solid rgba(241,233,216,.3); border-radius: 999px; padding: 7px 14px;
  flex: none; white-space: nowrap;   /* номер — завжди в один рядок */
}
.app-call:hover { border-color: var(--gold-soft); }
.app-call .ic { color: var(--gold-soft); }
.app-brand-mobile { display: none; }
@media (max-width: 499px) {
  .app-call .num { display: none; } .app-logo .rc { display: none; }
  /* Малі екрани: вордмарк «Imperial Palace» окремим рядком по центру над іконками
     (зліва в один ряд він тонув). Іконки переносяться на другий рядок і центруються. */
  .app-topbar { flex-wrap: wrap; height: auto; justify-content: center; row-gap: 10px; column-gap: 8px; padding-top: 9px; padding-bottom: 9px; }
  .app-logo { display: none; }
  .app-brand-mobile { display: flex; order: -1; flex-basis: 100%; justify-content: center; align-items: center; gap: 11px; }
  .app-brand-mobile img { height: 22px; width: auto; }   /* IMPERIAL + PALACE поруч в ОДИН рядок */
  /* прибрати auto-зсув loc + зайві margin-left 12px на телефон/мова/акаунт → 4 пілюлі влазять одним рядком (без 3-го ряду) */
  .app-topbar .loc-switch, .app-topbar .phone-switch, .app-topbar .lang-switch, .app-topbar .acct { margin-left: 0; }
  /* ліві тригери (локація/телефон) стоять зліва → їхнє меню анкеримо ліворуч (right:0 тягнув за лівий край) */
  .loc-menu, .phone-menu { left: 0; right: auto; }
}

/* ── Три колонки (десктоп) ── */
.browser-cols {
  flex: 1; min-height: 0; overflow-x: hidden;
  display: grid; grid-template-columns: 260px 340px 1fr;
}
.col { min-height: 0; height: 100%; padding: 0; overflow-y: auto; overflow-x: hidden;
  border-right: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
.col:last-child { border-right: none; }
.col-cats { background: linear-gradient(180deg, var(--base-2), var(--base)); }
.cats-hero { display: none; }   /* мобільна шапка — вмикається у @media ≤700px */

/* ── Категорії (без нумерації, без лічильників) ── */
.cat-list { list-style: none; margin: 0; padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.cat-item {
  width: 100%; text-align: left; display: flex; flex-direction: column; gap: 4px;
  padding: 15px 16px; border-radius: 12px; color: var(--ink); cursor: pointer;
  border: none; background: none; transition: background .16s;
}
.cat-item:hover { background: rgba(159,128,56,.10); }
.cat-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cat-item .name { font-family: var(--serif); font-size: 21px; color: var(--brand-deep); line-height: 1.1; }
.cat-item .teaser { font-size: 13px; color: var(--stone); line-height: 1.35; }
.cat-item.active { background: var(--brand-deep); }
.cat-item.active .name { color: var(--gold-soft); }
.cat-item.active .teaser { color: rgba(241,233,216,.72); }

/* ── Список послуг (БЕЗ ціни) ── */
.svc-list { list-style: none; margin: 0; padding: 10px 12px 24px; display: flex; flex-direction: column; gap: 2px; }
.svc-item {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 12px;
  padding: 14px 14px; border-radius: 11px; cursor: pointer; border: none; background: none;
  color: var(--ink); transition: background .16s;
}
.svc-item:hover { background: rgba(159,128,56,.10); }
.svc-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.svc-item .tt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.svc-item .name { font-family: var(--serif); font-size: 18px; color: var(--brand-deep); line-height: 1.15; }
.svc-item .teaser { font-size: 12.5px; color: var(--stone); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-item .chev { margin-left: auto; color: var(--gold); opacity: .55; }
.svc-item.active { background: var(--brand); }
.svc-item.active .name { color: var(--gold-soft); }
.svc-item.active .teaser { color: rgba(241,233,216,.7); }
.svc-item.active .chev { opacity: 1; color: var(--gold-soft); }

/* ── Деталі ── */
.col-detail { background: var(--base); }
.detail-scroll { height: 100%; overflow-y: auto; }
.m-back { display: none; }

/* стан за замовчуванням — гарний кадр (схематичний) */
.hero-ph { position: relative; height: 100%; min-height: 340px; }
.ph-hero { position: absolute; inset: 0; --h: 0deg; }
img.hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(24px, 5vw, 54px); color: #F7F4EC;
  background: linear-gradient(180deg, transparent, rgba(30,22,16,.62)); }
.hero-cap .stars { display: block; color: var(--gold-soft); letter-spacing: .34em; font-size: 13px; margin-bottom: 8px; }
.hero-cap .hero-script { font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--gold-soft); font-size: clamp(30px, 5vw, 52px); line-height: 1; }

/* схематичний тег плейсхолдера — «тут буде фото …» */
.ph-tag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-family: var(--sans); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,252,246,.82); background: rgba(30,22,16,.34);
  padding: 4px 9px; border-radius: 6px; border: 1px solid rgba(255,252,246,.28);
}

.detail { padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 22px; }
.detail[hidden] { display: none; }
.detail h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3.4vw, 34px);
  color: var(--brand-deep); line-height: 1.12; }
.detail .cat-of { color: var(--stone); font-size: 14px; margin-top: 5px; }

/* слайдер */
.slider { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 40px -22px rgba(27,46,76,.5); }
.slides { display: flex; transition: transform .45s cubic-bezier(.4,.05,.15,1); }
@media (prefers-reduced-motion: reduce) { .slides { transition: none; } }
.slide { flex: 0 0 100%; position: relative; }
.slide .ph { aspect-ratio: 16/10; }
.slide .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(16px, 3vw, 24px); color: #F7F4EC;
  background: linear-gradient(180deg, transparent, rgba(30,22,16,.78)); }
.slide .cap .step { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 5px; }
.slide .cap h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(18px, 2.5vw, 22px); color: #fff; margin: 0 0 4px; }
.slide .cap p { margin: 0; font-size: 14px; color: rgba(247,244,236,.92); max-width: 48ch; }
.sl-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  border-radius: 999px; border: none; cursor: pointer; z-index: 3;
  background: rgba(27,46,76,.5); color: #F7F4EC; font-size: 19px; }
.sl-btn:hover { background: rgba(27,46,76,.82); }
.sl-btn:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.sl-btn.prev { left: 12px; } .sl-btn.next { right: 12px; }
.sl-dots { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; gap: 6px; }
.sl-dots button { width: 7px; height: 7px; border-radius: 999px; border: none; padding: 0; cursor: pointer;
  background: rgba(247,244,236,.5); }
.sl-dots button[aria-current="true"] { background: var(--gold-soft); width: 20px; }

.lede { font-size: 16px; line-height: 1.6; color: var(--ink); max-width: 62ch; }

/* тривалість + ЦІНА (тільки тут) + Записатися */
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
  padding-top: 18px; border-top: 1px solid var(--line); }
.meta { display: flex; flex-direction: column; gap: 3px; }
.meta .lab { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }
.meta .val { font-family: var(--serif); font-size: 22px; color: var(--brand-deep); font-variant-numeric: tabular-nums; }
.meta.price .val { color: var(--gold); font-size: 27px; }
.book { margin-left: auto; padding: 15px 32px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: var(--brand-deep); font-weight: 600; font-size: 15px;
  box-shadow: 0 12px 24px -12px rgba(159,128,56,.9); transition: transform .12s; }
.book:hover { transform: translateY(-1px); }
.book:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; }

/* ── Тост ── */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  background: var(--brand-deep); color: #F1E9D8; padding: 13px 20px; border-radius: 12px;
  box-shadow: 0 18px 50px -24px rgba(27,46,76,.6); z-index: 100; max-width: 90vw;
  opacity: 0; pointer-events: none; transition: opacity .28s, transform .28s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast b { color: var(--gold-soft); }

/* ═══ МОБІЛЬНИЙ (≤700px): drill-down панелі — одна колонка, ковзання ═══ */
@media (max-width: 700px) {
  .browser-cols { display: block; position: relative; }
  .col { position: absolute; inset: 0; width: 100%; border-right: none; background: var(--base);
    height: 100%; transform: translateX(100%); transition: transform .32s cubic-bezier(.4,.05,.15,1); }
  @media (prefers-reduced-motion: reduce) { .col { transition: none; } }
  .col-cats { transform: translateX(0); }
  .col-list { z-index: 10; } .col-detail { z-index: 20; }

  [data-stage="cats"] .col-list, [data-stage="cats"] .col-detail { transform: translateX(100%); }
  [data-stage="list"] .col-cats { transform: translateX(-16%); }
  [data-stage="list"] .col-list { transform: translateX(0); }
  [data-stage="list"] .col-detail { transform: translateX(100%); }
  [data-stage="detail"] .col-cats { transform: translateX(-28%); }
  [data-stage="detail"] .col-list { transform: translateX(-16%); }
  [data-stage="detail"] .col-detail { transform: translateX(0); }

  .m-back { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 13px 16px; color: var(--brand-deep); font-family: var(--serif); font-size: 16px;
    border: none; border-bottom: 1px solid var(--line); background: var(--base);
    position: sticky; top: 0; z-index: 5; cursor: pointer; }
  .m-back .arrow { width: 30px; height: 30px; border-radius: 999px; flex: none; background: var(--brand-deep);
    border: 1px solid rgba(215,189,133,.4); display: grid; place-items: center; color: var(--gold-soft); font-size: 17px; }
  .cat-item .name { font-size: 22px; }
  .svc-item .name { font-size: 19px; }
  .svc-item .chev { opacity: .6; }
  .col-detail .m-back .mb-cats { display: none; }   /* моб: показуємо назву категорії, не «Розділи» */
  .book { width: 100%; margin-left: 0; text-align: center; }
  .meta-row { gap: 12px 22px; }
  .hero-ph { min-height: calc(100vh - 56px - 50px); min-height: calc(100dvh - 56px - 50px); }

  /* мобільна шапка над списком розділів */
  .cats-hero { display: block; position: relative; height: clamp(180px, 30vh, 280px); overflow: hidden; }
  .cats-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cats-hero-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px;
    background: linear-gradient(180deg, transparent, rgba(30,22,16,.66)); }
  .cats-hero-cap .stars { display: block; color: var(--gold-soft); letter-spacing: .34em; font-size: 12px; margin-bottom: 4px; }
  .cats-hero-cap .rc-title { font-family: var(--serif); font-style: italic; font-weight: 500;
    color: var(--gold-soft); font-size: 28px; line-height: 1; }
}

/* ═══ ПЛАНШЕТ (701–1000px): стрічка з 3 панелей по 50%, видно дві ═══
   [розділи | список]  →  тап послуги  →  [список | деталі] (розділи їдуть уліво).
   Список лишається видимим — можна перемикати послуги; «назад» повертає розділи. */
@media (min-width: 701px) and (max-width: 1000px) {
  .browser-cols { display: block; position: relative; overflow: hidden; }
  .col { position: absolute; top: 0; bottom: 0;
    transition: left .32s cubic-bezier(.4,.05,.15,1), width .32s cubic-bezier(.4,.05,.15,1); }
  @media (prefers-reduced-motion: reduce) { .col { transition: none; } }
  /* View1 [розділи | список] — рівно 50/50 */
  .col-cats   { left: 0;    width: 50%; }
  .col-list   { left: 50%;  width: 50%; }
  .col-detail { left: 100%; width: 62%; background: var(--base); }
  /* View2 [список | деталі] — пропорція на користь слайдів (список 38 / деталі 62) */
  [data-stage="detail"] .col-cats { left: -50%; }
  [data-stage="detail"] .col-list { left: 0;   width: 38%; }
  [data-stage="detail"] .col-detail { left: 38%; }
  /* назад до [розділи | список] — кнопка в деталях */
  .col-detail .m-back { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 13px 16px; color: var(--brand-deep); font-family: var(--serif); font-size: 16px;
    border: none; border-bottom: 1px solid var(--line); background: var(--base);
    position: sticky; top: 0; z-index: 5; cursor: pointer; }
  .col-detail .m-back .arrow { width: 30px; height: 30px; border-radius: 999px; flex: none; background: var(--brand-deep);
    border: 1px solid rgba(215,189,133,.4); display: grid; place-items: center; color: var(--gold-soft); font-size: 17px; }
  /* на планшеті список (панель 2) видно → «назад» веде до розділів, тож і підпис «Розділи» */
  .col-detail .m-back .mb-svc { display: none; }
  .col-detail .m-back .mb-cats { display: inline; }
  .book { width: 100%; margin-left: 0; text-align: center; }
}

/* ═══ Детальна панель без прокрутки + перемикач мов (feat/detail-i18n) ═══ */
.svc-item .teaser { display: none; }              /* список — тільки назви */
.svc-item { padding-block: 16px; }

.col-detail { display: flex; flex-direction: column; overflow: hidden; }
.hero-ph { flex: 1; min-height: 0; }
.detail { flex: 1; padding: 0; gap: 0; display: flex; flex-direction: column; overflow: hidden; }
.detail .slider { flex: 1; min-height: 0; border-radius: 0; box-shadow: none; }
.detail .slides, .detail .slide { height: 100%; }
.detail .slide .ph { aspect-ratio: auto; height: 100%; }

.detail-bar {
  flex: none; display: flex; align-items: center; gap: 16px;
  padding: 14px clamp(16px, 3vw, 28px); border-top: 1px solid var(--line); background: var(--base);
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));   /* норм. відступ + рівно висота системної панелі */
}
.detail-bar .dur { font-family: var(--serif); font-size: 19px; color: var(--brand-deep); white-space: nowrap; line-height: 1.1; }
.detail-bar .dur small { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); margin-bottom: 2px; }
.detail-bar .book {
  margin-left: auto; flex: 1; max-width: 440px;
  padding: 13px 24px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: var(--brand-deep); font-weight: 600; font-size: 15px; text-align: center;
  border: 2px solid var(--brand-deep);   /* синя кайма */
}
.detail-bar .book:hover { filter: brightness(1.05); }
.detail-bar .book:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; }
/* Беззцінна послуга: заклик подзвонити, а не «купити» — нейтральний контурний вигляд */
.detail-bar .book.book-phone { background: transparent; color: var(--brand-deep); }
.detail-bar .book.book-phone:hover { filter: none; background: rgba(0, 0, 0, .04); }

/* верхній рядок деталі: назва послуги (зліва) + лічильник гостей (справа) */
.detail-top {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px clamp(16px, 3vw, 28px); border-bottom: 1px solid var(--line); background: var(--base);
}
.detail-top .dt-name {
  font-family: var(--serif); font-weight: 600; font-size: clamp(19px, 2.4vw, 24px);
  color: var(--brand-deep); line-height: 1.1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* степер гостей: єдина синя пілюля  ( −  👤 × N  + ) — вміст золотий, − та + на краях */
.guests { flex: none; display: inline-flex; align-items: center;
  background: var(--brand-deep); border-radius: 999px; }
.guests .g-btn {
  border: none; background: transparent; color: var(--gold-soft);
  width: 34px; height: 34px; border-radius: 999px; font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: color .14s;
}
.guests .g-btn:hover:not(:disabled) { color: #fff; }
.guests .g-btn:disabled { opacity: .4; cursor: default; }
.guests .g-btn:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: -3px; }
.g-pill {
  display: inline-flex; align-items: center; gap: 5px; color: var(--gold-soft); padding: 0 10px;
  border-left: 1px solid rgba(215,189,133,.26); border-right: 1px solid rgba(215,189,133,.26);
}
.g-pill .g-ic { display: inline-flex; align-items: center; }
.g-pill .g-x { font-size: 12px; opacity: .78; }
.g-pill .g-count {
  min-width: 12px; text-align: center; font-family: var(--sans); font-weight: 700; font-size: 15px;
  font-variant-numeric: lining-nums tabular-nums;
}

/* стрілка «назад» — SVG-шеврон, чітко по центру кружечка */
.m-back .arrow svg { display: block; }

/* ═══ Фолбек для застарілих браузерів (показує browser.js) ═══
   БЕЗ var/grid/gap/clamp — лише хардкод-кольори й проста розкладка, щоб рендерилось скрізь. */
#oldbrowser {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: #1B2E4C; color: #F1E9D8; text-align: center; padding: 40px 22px; overflow: auto;
}
/* Тумблер овнера fallback_only: показати фолбек-лендинг усім, сховати інтерактивний сайт
   (поки не наповнено слайди). Керується з панелі; вимкнув → повний сайт. */
body.force-fb .app-topbar,
body.force-fb .browser-cols,
body.force-fb .toast { display: none !important; }
body.force-fb #oldbrowser { display: block !important; }
/* «Дверята персоналу»: ?staff відкриває топбар (вхід через Telegram + кнопки
   панелей) поверх фолбека, не показуючи незавершений SPA-острів. Фолбек —
   fixed з z-index:9999, тож топбар піднімаємо над ним і зсуваємо фолбек на 56px. */
body.force-fb.staff-peek .app-topbar {
  display: flex !important;
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
}
body.force-fb.staff-peek #oldbrowser { top: 56px; }
#oldbrowser .ob-card { max-width: 1100px; margin: 4vh auto 0; font-size: 0; }   /* font-size:0 — зазори inline-block */
#oldbrowser .ob-left { display: inline-block; vertical-align: top; width: 46%; margin-right: 3%; font-size: 16px; }
#oldbrowser .ob-right { display: inline-block; vertical-align: top; width: 50%; font-size: 16px; text-align: left; }
#oldbrowser .ob-hero { display: block; width: 72%; max-width: 300px; height: auto; border-radius: 12px; margin: 0 auto 18px; }
#oldbrowser .ob-stars { color: #D7BD85; letter-spacing: .3em; font-size: 15px; margin-bottom: 6px; }
#oldbrowser .ob-logo { display: block; width: 66%; max-width: 320px; height: auto; margin: 0 auto; }
#oldbrowser .ob-sub { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: #D7BD85; margin-top: 8px; }
/* перемикач мов (авто-визначення з браузера) */
#oldbrowser .ob-langs { margin: 0 auto 16px; line-height: 2; }
#oldbrowser .ob-langs button {
  background: transparent; border: 0; cursor: pointer; font: inherit; font-size: 13px;
  font-weight: 600; letter-spacing: .06em; color: #8CA0BC; padding: 3px 9px; border-radius: 999px;
}
#oldbrowser .ob-langs button.is-active { color: #1B2E4C; background: #D7BD85; }
/* кнопка «Прокласти маршрут» (Google Maps directions, як на хіро) */
#oldbrowser .ob-route {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  color: #1B2E4C; background: #D7BD85; text-decoration: none; font-weight: 700;
  font-size: 16px; letter-spacing: .01em; padding: 12px 22px; border-radius: 999px;
}
#oldbrowser .ob-route .pin { display: inline-flex; }
#oldbrowser .ob-msg { font-size: 14px; line-height: 1.85; margin: 26px auto 6px; max-width: 380px; color: #C9BE9E; }
#oldbrowser .ob-phones a {
  display: block; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600; font-size: 21px; letter-spacing: .02em; color: #D7BD85;
  text-decoration: none; padding: 13px 0; border-top: 1px solid rgba(215,189,133,.28);
}
#oldbrowser .ob-phones a:first-child { margin-top: 18px; }
#oldbrowser .ob-cat { margin-bottom: 18px; }
#oldbrowser .ob-cat h3 { font-family: Georgia, "Times New Roman", serif; font-size: 22px; color: #D7BD85; margin: 0 0 8px; border-bottom: 1px solid rgba(215,189,133,.28); padding-bottom: 5px; }
#oldbrowser .ob-cat ul { list-style: none; margin: 0; padding: 0; }
#oldbrowser .ob-cat li { font-size: 17px; color: #E8DEC9; padding: 5px 0; overflow: hidden; }
#oldbrowser .ob-svc { float: left; color: #D7BD85; }   /* послуги — золотим */
#oldbrowser .ob-price { float: right; color: #D7BD85; padding-left: 10px; white-space: nowrap; }
/* розкривний склад послуги/кроку програми (тап/клік; JS-рендер із острова) */
#oldbrowser .ob-cat li.ob-item { padding: 0; overflow: visible; }
#oldbrowser .ob-row {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  background: transparent; border: 0; color: inherit; font: inherit; text-align: left;
  padding: 6px 0; line-height: 1.35;
}
#oldbrowser .ob-item.has-desc .ob-row { cursor: pointer; }
#oldbrowser .ob-row .ob-svc { float: none; flex: 1 1 auto; }
#oldbrowser .ob-row .ob-price { float: none; padding-left: 0; }
#oldbrowser .ob-dur { flex: 0 0 auto; color: #8CA0BC; font-size: 14px; white-space: nowrap; }   /* тривалість послуги */
#oldbrowser .ob-sdur { color: #8CA0BC; font-weight: 400; font-size: 13px; }                      /* час кроку програми */
/* стрілка — CSS-трикутник (без шрифтових гліфів, рендериться скрізь) */
#oldbrowser .ob-caret {
  flex: 0 0 auto; align-self: center; width: 0; height: 0; margin-left: 4px;
  border-left: 6px solid #8CA0BC; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
#oldbrowser .ob-item.is-open .ob-caret { border-left-color: #D7BD85; transform: rotate(90deg); }
#oldbrowser .ob-desc { display: none; padding: 2px 0 10px; }
#oldbrowser .ob-item.is-open .ob-desc { display: block; }
#oldbrowser .ob-step { font-size: 14px; line-height: 1.6; color: #F1E9D8; margin: 4px 0; }   /* описи — білим */
#oldbrowser .ob-step b { color: #F1E9D8; font-weight: 600; }   /* назва кроку — білим (золото лише в назв послуг) */
/* мобільний — усе в одну стрічку */
@media (max-width: 860px) {
  #oldbrowser .ob-card { max-width: 440px; }
  #oldbrowser .ob-left, #oldbrowser .ob-right { display: block; width: auto; margin: 0 auto; }
  #oldbrowser .ob-right { margin-top: 28px; }
}

/* перемикач мов — глобус + випадне меню */
.lang-switch { position: relative; margin-left: 12px; order: 3; }   /* мова: між телефоном і акаунтом */
.app-call { margin-left: 12px; }
.lang-trigger {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid rgba(215,189,133,.42); background: transparent; color: var(--gold-soft);
  border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; letter-spacing: .04em;
}
.lang-trigger:hover { border-color: var(--gold-soft); }
.lang-trigger .globe { display: inline-flex; align-items: center; color: var(--gold-soft); }
.lang-trigger .globe svg { display: block; }
.lang-trigger .caret { font-size: 10px; color: var(--gold-soft); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  margin: 0; padding: 6px; list-style: none; min-width: 168px;
  background: var(--base); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px -18px rgba(27,46,76,.45);
}
.lang-menu[hidden] { display: none; }
.lang-menu li { margin: 0; }
.lang-menu button {
  width: 100%; text-align: left; border: none; background: transparent; cursor: pointer;
  padding: 10px 14px; border-radius: 8px; font-size: 14px; color: var(--ink);
}
.lang-menu button:hover { background: rgba(159,128,56,.12); }
.lang-menu button.active { background: var(--brand-deep); color: var(--gold-soft); }
@media (max-width: 520px) { .lang-trigger { padding: 7px 10px; } .app-call { margin-left: 8px; } }

/* локація — пін-крапелька поряд із мовою: панель з маршрутом + безкоштовним трансфером */
.loc-switch { position: relative; margin-left: auto; order: 1; }   /* локація — перша в правій групі */
.loc-trigger {
  display: inline-flex; align-items: center; cursor: pointer;
  border: 1px solid rgba(215,189,133,.42); background: transparent; color: var(--gold-soft);
  border-radius: 999px; padding: 7px 9px;
}
.loc-trigger:hover { border-color: var(--gold-soft); }
.loc-trigger .pin { display: inline-flex; }
.loc-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  margin: 0; padding: 12px; min-width: 236px;
  background: var(--base); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px -18px rgba(27,46,76,.45);
  display: flex; flex-direction: column; gap: 11px;
}
.loc-menu[hidden] { display: none; }
.loc-route {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  text-decoration: none; padding: 11px 18px; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: var(--brand-deep); font-weight: 600; font-size: 14px; border: 2px solid var(--brand-deep);
}
.loc-route:hover { filter: brightness(1.05); }
.loc-transfer { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; line-height: 1.35; color: var(--ink); }

/* телефони — випадна панель: ☎ → список номерів, тап по номеру = набір (tel:) */
.phone-switch { position: relative; margin-left: 12px; order: 2; }
.phone-trigger {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid rgba(215,189,133,.42); background: transparent; color: var(--gold-soft);
  border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600;
}
.phone-trigger:hover { border-color: var(--gold-soft); }
.phone-trigger .ic { color: var(--gold-soft); font-size: 15px; line-height: 1; }
.phone-trigger .caret { font-size: 10px; color: var(--gold-soft); }
.phone-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  margin: 0; padding: 6px; list-style: none; min-width: 208px;
  background: var(--base); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px -18px rgba(27,46,76,.45);
}
.phone-menu[hidden] { display: none; }
.phone-menu li { margin: 0; }
.phone-menu a {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  padding: 10px 14px; border-radius: 8px; color: var(--ink);
}
.phone-menu a:hover { background: rgba(159,128,56,.12); }
.phone-menu .lab { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.phone-menu .num { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--brand-deep);
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: .02em; }

/* акаунт — праворуч від телефону: піктограма + імʼя (Гість) + меню за роллю */
.acct { position: relative; margin-left: 12px; order: 4; }
.acct-trigger {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid rgba(215,189,133,.42); background: transparent; color: var(--gold-soft);
  border-radius: 999px; padding: 5px 12px 5px 6px; font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.acct-trigger:hover { border-color: var(--gold-soft); }
.acct-trigger .acct-ic { display: inline-grid; place-items: center; width: 25px; height: 25px;
  border-radius: 999px; background: rgba(215,189,133,.16); color: var(--gold-soft); }
.acct-trigger .caret { font-size: 10px; color: var(--gold-soft); }
.acct-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  margin: 0; padding: 6px; list-style: none; min-width: 214px;
  background: var(--base); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px -18px rgba(27,46,76,.45);
}
.acct-menu[hidden], .acct-menu li[hidden] { display: none; }
.acct-menu li { margin: 0; }
.acct-menu li.role-auth { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.acct-menu button {
  width: 100%; text-align: left; border: none; background: transparent; cursor: pointer;
  padding: 10px 14px; border-radius: 8px; font-size: 14px; color: var(--ink);
}
.acct-menu button:hover { background: rgba(159,128,56,.12); }
@media (max-width: 560px) { .acct-name { display: none; } .acct { margin-left: 8px; } }

/* ═══ Календар бронювання (модалка) ══════════════════════════════════════════ */
.cal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(20,15,10,.55);
  backdrop-filter: blur(2px); animation: calFade .2s ease; }
@keyframes calFade { from { opacity: 0; } }
.cal-sheet { position: fixed; z-index: 201; background: #FCFAF4; color: var(--ink);
  display: flex; flex-direction: column; box-shadow: 0 24px 70px -18px rgba(20,15,10,.5);
  /* десктоп: картка по центру */
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 32px)); max-height: min(88vh, 720px);
  border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.cal-sheet[hidden], .cal-backdrop[hidden] { display: none !important; }   /* [hidden] має перебивати display:flex */
.cal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 12px;
  border-bottom: 1px solid var(--line); }
.cal-head .cal-t { flex: 1; }
.cal-head h2 { font-family: var(--serif); font-weight: 600; font-size: 23px; color: var(--brand-deep); line-height: 1.1; }
.cal-head .cal-sub { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.cal-x { flex: none; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--stone); font-size: 20px; line-height: 1; cursor: pointer; }
.cal-x:hover { color: var(--brand-deep); border-color: var(--brand-deep); }
.cal-body { padding: 14px 20px 20px; overflow-y: auto; }

/* лічильник гостей у шапці календаря — той самий вигляд */
.cal-guests { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.cal-guests .lbl { font-size: 13px; color: var(--stone); }
.cal-note { font-size: 13px; color: var(--brand-deep); background: rgba(159,128,56,.12);
  border: 1px solid rgba(159,128,56,.3); border-radius: 10px; padding: 9px 12px; margin: 6px 0 4px; }
/* Анонім не завершив запис → інлайн у панелі: «увійдіть» + кнопка входу (не нова модалка). */
.cal-loginreq { margin-top: 10px; padding: 14px; border-radius: 12px; text-align: center;
  background: rgba(159,128,56,.14); border: 1px solid rgba(159,128,56,.35); }
.cal-loginreq .clr-t { margin: 0 0 12px; font-size: 14.5px; line-height: 1.4; color: var(--brand-deep); }
.cal-login { display: inline-block; background: var(--brand-deep); color: #fff; border: none; cursor: pointer;
  border-radius: 11px; font-size: 16px; font-weight: 700; padding: 13px 26px; }
.cal-login:active { transform: translateY(1px); }

/* місяць */
.cal-month { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 10px; }
.cal-month .m-title { font-family: var(--serif); font-size: 19px; color: var(--brand-deep); text-transform: capitalize; }
.cal-nav { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line); background: transparent;
  color: var(--brand-deep); cursor: pointer; font-size: 16px; }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.cal-dow span { text-align: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day { aspect-ratio: 1; border: 1px solid transparent; border-radius: 10px; background: transparent;
  font-family: var(--sans); font-size: 15px; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.cal-day.is-open { background: #fff; border-color: #E5D9BF; font-weight: 600; box-shadow: 0 1px 3px rgba(27,46,76,.09); }
.cal-day.is-open:hover { border-color: var(--gold); box-shadow: 0 3px 10px rgba(159,128,56,.24); }
.cal-day.is-closed, .cal-day.is-out { color: var(--stone); opacity: .3; cursor: default; }
.cal-day.is-sel { background: var(--brand-deep); color: var(--gold-soft); border-color: var(--brand-deep); box-shadow: 0 4px 14px -4px rgba(27,46,76,.5); }
.cal-day.is-empty { visibility: hidden; }

/* слоти часу */
.cal-slots-h { font-family: var(--serif); font-size: 18px; color: var(--brand-deep); margin: 18px 0 8px; }
.cal-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-slot { border: 1px solid #E5D9BF; background: #fff; border-radius: 999px; padding: 9px 16px;
  font-family: var(--sans); font-size: 15px; color: var(--brand-deep); cursor: pointer;
  box-shadow: 0 1px 3px rgba(27,46,76,.07); }
.cal-slot:hover { border-color: var(--gold); box-shadow: 0 3px 10px rgba(159,128,56,.22); }
.cal-slot.is-sel { background: var(--brand-deep); color: var(--gold-soft); border-color: var(--brand-deep); box-shadow: 0 4px 14px -4px rgba(27,46,76,.5); }
.cal-empty { color: var(--stone); font-size: 14px; padding: 8px 0; }
.cal-loading { color: var(--stone); font-size: 14px; padding: 12px 0; }

/* підтвердити */
.cal-confirm { margin-top: 20px; width: 100%; padding: 14px; border: none; border-radius: 12px;
  background: var(--brand-deep); color: var(--gold-soft); font-family: var(--serif); font-size: 18px;
  font-weight: 600; cursor: pointer; }
.cal-confirm:disabled { opacity: .4; cursor: default; }
.cal-confirm:not(:disabled):hover { filter: brightness(1.08); }

/* мобільний: bottom-sheet */
@media (max-width: 700px) {
  .cal-sheet { left: 0; right: 0; bottom: 0; top: auto; transform: none;
    width: 100%; max-width: none; max-height: 92dvh;
    border-radius: 18px 18px 0 0; animation: calUp .26s cubic-bezier(.4,.05,.15,1); }
  @keyframes calUp { from { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) { .cal-sheet, .cal-backdrop { animation: none; } }

/* контактні поля у календарі (анонімний запис: ім'я + телефон) */
.cal-contact { display: grid; gap: 8px; margin-top: 16px; }
.cal-contact input { padding: 11px 13px; border: 1px solid #E5D9BF; border-radius: 10px;
  font-family: var(--sans); font-size: 15px; background: #fff; color: var(--ink); }
.cal-contact input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.cal-ok { text-align: center; padding: 8px 0; }
.cal-ok .big { font-family: var(--serif); font-size: 22px; color: var(--brand-deep); }

/* ═══ Панель менеджера ═══════════════════════════════════════════════════════ */
body.mg { background: var(--base); min-height: 100vh; }
.mg-top { display: flex; align-items: center; gap: 16px; background: var(--brand-deep); color: #F1E9D8;
  padding: 14px clamp(16px, 4vw, 36px); }
.mg-back { color: var(--gold-soft); text-decoration: none; font-size: 15px; }
.mg-back:hover { color: #fff; }
.mg-title { font-family: var(--serif); font-weight: 600; font-size: 22px; color: #F7F4EC; }
.mg-who { margin-left: auto; font-size: 13px; color: rgba(241,233,216,.72);
  border: 1px solid rgba(215,189,133,.4); border-radius: 999px; padding: 5px 12px; }
.mg-head-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mg-head-r .mg-who { margin-left: 0; }
.mg-lang { background: rgba(255,255,255,.08); color: #F1E9D8; border: 1px solid rgba(215,189,133,.4);
  border-radius: 999px; padding: 5px 10px; font-size: 13px; cursor: pointer; }
.mg-lang option { color: #29201A; }
.mg-daybar { display: flex; align-items: center; gap: 12px; padding: 16px clamp(16px, 4vw, 36px) 6px; }
.mg-nav { width: 34px; height: 34px; border-radius: 999px; border: 1.5px solid var(--gold); background: var(--gold);
  color: var(--brand-deep); font-size: 19px; font-weight: 800; line-height: 1; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.mg-nav:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--gold); }
.mg-date { font-family: var(--serif); font-size: 21px; color: var(--brand-deep); text-transform: capitalize; min-width: 220px; }
.mg-today { margin-left: 8px; border: 1px solid var(--line); background: transparent; color: var(--stone);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.mg-today:hover { border-color: var(--gold); color: var(--brand-deep); }
.mg-walkin { margin-left: auto; border: 0; background: var(--brand-deep); color: var(--gold); border-radius: 999px;
  padding: 8px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.mg-walkin:hover { background: var(--brand); }

/* Валкін-форма (в аркуші) */
.wk-form { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.wk-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--stone); }
.wk-form input, .wk-form select { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 15px; color: var(--ink); background: #fff; }
.wk-row { display: flex; gap: 12px; }
.wk-row label { flex: 1; }
.wk-submit { margin-top: 4px; padding: 12px; background: var(--brand-deep); color: #fff; border: 0; border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; }
.wk-submit:hover:not(:disabled) { background: var(--brand); }
.wk-submit:disabled { opacity: .5; }
.wk-msg { font-size: 13px; color: #b5482f; min-height: 16px; text-align: center; }
/* Степер осіб — «На місці» (− ліворуч, + праворуч, як у клієнта) */
.wk-field { display: flex; flex-direction: column; gap: 5px; }
.wk-lbl { font-size: 12.5px; color: var(--stone); }
.wk-step { display: inline-flex; align-items: stretch; align-self: flex-start; background: var(--brand-deep); border-radius: 999px; height: 42px; }
.wk-step button { border: none; background: transparent; color: var(--gold-soft); width: 44px; border-radius: 999px; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.wk-step button:hover { color: #fff; }
.wk-count { min-width: 30px; padding: 0 6px; display: grid; place-items: center; color: var(--gold-soft); font-weight: 700; font-size: 16px;
  font-variant-numeric: lining-nums tabular-nums; border-left: 1px solid rgba(215,189,133,.26); border-right: 1px solid rgba(215,189,133,.26); }

/* ── Панель масажистів ── */
.ms-wrap { padding: 12px clamp(12px, 4vw, 36px) 60px; }
.ms-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ms-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); background: #fff; border-radius: 999px; font-size: 14px; color: var(--ink); cursor: pointer; }
.ms-chip.is-active { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); }
.ms-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ms-dot.pause { background: #d99a2b; } .ms-dot.end { background: #b5482f; } .ms-dot.none { background: var(--stone); }
.ms-addbtn { padding: 8px 14px; border: 1px dashed var(--gold); background: #faf7ef; color: var(--brand-deep); border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; }
.ms-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ms-nm { font-family: var(--serif); font-size: 22px; color: var(--brand-deep); }
.ms-rename { border: 1px solid var(--line); background: #fff; border-radius: 8px; width: 32px; height: 32px; cursor: pointer; font-size: 14px; }
.ms-mnav { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.ms-mon { font-family: var(--serif); font-size: 17px; color: var(--brand-deep); min-width: 130px; text-align: center; text-transform: capitalize; }
.ms-calh { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.ms-wdh { text-align: center; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--stone); }
.ms-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ms-cell { min-height: 52px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 3px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background: #fff; }
.ms-cell.empty { border: 0; background: transparent; }
.ms-cell b { font-size: 12.5px; color: var(--brand-deep); font-variant-numeric: tabular-nums; }
.ms-cell .ms-h { font-size: 10.5px; color: var(--stone); margin-top: 3px; text-align: center; line-height: 1.15; }
.ms-cell.work { background: #f4f8f2; }
.ms-cell.pause { background: #fdf4e3; } .ms-cell.pause .ms-h { color: #b07d17; font-weight: 600; }
.ms-cell.end { background: #f7ece9; opacity: .8; } .ms-cell.end .ms-h { color: #b5482f; font-weight: 600; }
.ms-cell.none { background: #f4f2ec; }
.ms-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #faf7ef; }
.ms-ctl label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--stone); }
.ms-ctl input[type=time], .ms-ctl input[type=date] { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.ms-btn { padding: 9px 15px; border: 0; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; }
.ms-btn.work { background: var(--brand-deep); color: #fff; }
.ms-btn.pause { background: #d99a2b; color: #fff; }
.ms-btn.end { background: transparent; color: #b5482f; border: 1px solid #b5482f; }
.ms-conflicts { margin-top: 14px; }
.ms-ok { color: #2f7a3f; font-weight: 600; font-size: 14px; }
.ms-conf-hd { color: #b5482f; font-weight: 700; margin-bottom: 8px; }
.ms-conf-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border: 1px solid #eaccc4; background: #fbf1ee; border-radius: 8px; margin-bottom: 6px; font-size: 13.5px; }
.ms-conf-d { font-weight: 600; color: #b5482f; font-variant-numeric: tabular-nums; min-width: 110px; }
@media (max-width: 560px) {
  .ms-cell { min-height: 46px; }
  .ms-cell .ms-h { font-size: 9.5px; }
  .ms-ctl { gap: 8px; }
  .mg-daybar { flex-wrap: wrap; gap: 8px 10px; }
  .mg-date { min-width: 0; font-size: 18px; }
  .mg-walkin { margin-left: auto; }
}
.mg-board { padding: 10px clamp(16px, 4vw, 36px) 60px; display: flex; flex-direction: column; gap: 8px;
  max-width: 860px; }
.mg-empty { color: var(--stone); padding: 28px 4px; font-size: 15px; }
.mg-card { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 18px; box-shadow: 0 1px 3px rgba(27,46,76,.06); }
.mg-time { font-family: var(--sans); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 17px;
  color: var(--brand-deep); min-width: 66px; line-height: 1.15; }
.mg-time span { display: block; font-weight: 400; font-size: 13px; color: var(--stone); }
.mg-info { flex: 1; min-width: 0; }
.mg-name { font-family: var(--serif); font-size: 19px; color: var(--brand-deep); line-height: 1.15; }
.mg-meta { font-size: 13px; color: var(--stone); margin-top: 3px; }
.mg-cancel { flex: none; align-self: center; border: 1px solid var(--line); background: transparent;
  color: var(--stone); border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.mg-cancel:hover { border-color: #b3423a; color: #b3423a; }
.mg-cancel:disabled { opacity: .4; cursor: default; }

/* панель менеджера — вкладки + тумблери */
.mg-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px clamp(16px, 4vw, 36px) 0; border-bottom: 1px solid var(--line); }
.mg-tab { border: none; background: transparent; color: var(--stone); font-family: var(--sans); font-size: 15px;
  padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  flex: 0 0 auto; white-space: nowrap; }
.mg-tab.is-active { color: var(--brand-deep); border-bottom-color: var(--gold); font-weight: 600; }
.mg-cat { padding: 16px clamp(16px, 4vw, 36px) 60px; max-width: 1160px; }
/* Журнал змін */
.mg-log { padding: 12px clamp(16px, 4vw, 36px) 60px; max-width: 820px; }
.mg-log-row { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 10px 4px; border-bottom: 1px solid rgba(0,0,0,.07); font-size: 15px; }
.mg-log-at { color: var(--stone); font-variant-numeric: tabular-nums; flex: none; min-width: 118px; }
.mg-log-who { font-weight: 600; color: var(--brand-deep); flex: none; min-width: 150px; }
.mg-log-act { color: #2b2b2b; }
.mg-log-row.is-cancel { font-weight: 700; }
.mg-log-row.is-cancel .mg-log-act { font-weight: 700; }
.mg-log-row.is-late, .mg-log-row.is-late .mg-log-act, .mg-log-row.is-late .mg-log-who { color: #c0392b; }
.mg-log-det { color: var(--stone); }

/* ── Календар менеджера: темне полотно timeline (ресурс×час, неперервний) ── */
.mg-cal { padding: 0; background: #12203a; overflow: hidden; }
.cal-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.cal-inner { display: flex; align-items: flex-start; min-width: min-content; }
.cal-col { flex: 1 0 96px; min-width: 96px; }
.cal-col.cal-gut { flex: 0 0 46px; min-width: 46px; }
.cal-ch { height: 38px; padding: 8px 8px 0; font-size: 12.5px; font-weight: 600; color: #f1e9d8;
  background: #16263f; border-bottom: 1px solid rgba(215,189,133,.2); border-left: 1px solid rgba(255,255,255,.05);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; top: 0; z-index: 4; }
.cal-col.room .cal-ch { color: #8ca0bc; font-weight: 500; }
.cal-gut .cal-ch { border-left: 0; }
.cal-body { position: relative; border-left: 1px solid rgba(255,255,255,.05);
  background-image: linear-gradient(to bottom, rgba(255,255,255,.07) 0 1px, transparent 1px); background-repeat: repeat-y; }
.cal-gut .cal-body { border-left: 0; background: none; }
.cal-t { position: absolute; right: 6px; font-size: 10px; color: #8ca0bc; transform: translateY(-6px); font-variant-numeric: tabular-nums; }
.cal-card { position: absolute; left: 2px; right: 2px; border-radius: 7px; padding: 4px 6px; overflow: hidden; cursor: pointer;
  border-left: 3px solid var(--oc, #5fb9a8); background: color-mix(in srgb, var(--oc, #5fb9a8) 26%, #1b2e4c); transition: opacity .12s; }
.cc-h { display: flex; justify-content: space-between; gap: 5px; align-items: baseline; }
.cc-s { font-size: 11.5px; font-weight: 600; color: #f1e9d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-n { flex: none; font-size: 9.5px; font-weight: 700; color: var(--oc, #5fb9a8); font-variant-numeric: tabular-nums; }
.cc-m { font-size: 10px; color: #8ca0bc; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-card.dim { opacity: .3; }
.cal-card.hi { outline: 2px solid var(--oc, #5fb9a8); z-index: 3; }
/* Перша колонка «Замовлення» — ширша й читабельніша (мобільний зведений вид) */
.cal-col.orders { flex: 0 0 280px; min-width: 280px; background: rgba(255,255,255,.02); }
.cal-col.orders .cal-ch { color: #f1e9d8; }
.cal-card.ord { padding: 6px 9px; }
.oc-h { display: flex; gap: 7px; align-items: baseline; }
.oc-n { flex: none; font-size: 12.5px; font-weight: 700; color: var(--oc, #5fb9a8); font-variant-numeric: tabular-nums; }
.oc-s { font-size: 13.5px; font-weight: 600; color: #f1e9d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-ms { margin-top: 3px; display: flex; flex-direction: column; gap: 1px; }
.oc-m { font-size: 11.5px; color: #b9c6db; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ресурс-картка — лише № (назва в колонці «Замовлення») */
.cal-card.num-only { display: flex; align-items: center; justify-content: center; padding: 2px 4px; }
.cal-card.num-only .cc-n { font-size: 12px; color: #f1e9d8; font-weight: 700; }
.cal-now { position: absolute; left: 0; right: 0; border-top: 2px solid #c8a23e; z-index: 5; }
.cal-now::before { content: ""; position: absolute; left: -2px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: #c8a23e; }
.p0{--oc:#5fb9a8}.p1{--oc:#d98a9a}.p2{--oc:#e0b866}.p3{--oc:#a99ad6}
.p4{--oc:#7bb3e0}.p5{--oc:#c98f6b}.p6{--oc:#8fc98f}.p7{--oc:#d6a0c9}

/* ── Сумісність: матриця послуга × ресурс із місткістю пари (admin) ── */
.mg-compat { padding: 14px clamp(16px, 4vw, 36px) 60px; }
.cmp-hint { font-size: 13px; color: var(--stone); margin-bottom: 12px; max-width: 640px; line-height: 1.55; }
.cmp-scroll { overflow-x: auto; }
.cmp { border-collapse: collapse; font-size: 13px; }
.cmp th, .cmp td { border: 1px solid var(--line); padding: 0; }
.cmp thead th { background: #fff; position: sticky; top: 0; height: 100px; vertical-align: bottom; padding: 6px 2px; z-index: 2; }
.cmp thead th span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 11.5px; color: var(--brand-deep); font-weight: 600; }
.cmp thead th.cmp-rh { cursor: pointer; }
.cmp thead th.cmp-rh:hover span { color: var(--gold-deep, #c8a23e); }
.cmp .cmp-svc { background: #fff; position: sticky; left: 0; text-align: left; padding: 6px 10px; min-width: 150px; max-width: 200px;
  font-weight: 500; color: #2b2b2b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
.cmp thead .cmp-svc { z-index: 3; }
.cmp-cat td { background: var(--brand-deep); color: var(--gold); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; position: sticky; left: 0; }
.cmp-in { width: 44px; height: 36px; border: 0; background: transparent; text-align: center; font-size: 14px; color: #b3aa93;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.cmp-in::-webkit-outer-spin-button, .cmp-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cmp-in.on { color: var(--brand-deep); font-weight: 700; background: rgba(200,162,62,.1); }
.cmp-in.saved { background: rgba(107,191,123,.3); }
.cmp-in:focus { outline: 2px solid var(--gold); outline-offset: -2px; }
.cmp-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; padding: 10px 12px;
  background: #faf7ef; border: 1px solid var(--line); border-radius: 10px; }
.cmp-add input, .cmp-add select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.cmp-add #raName { min-width: 180px; }
.cmp-add #raCap { width: 64px; }
.cmp-cross { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--stone); }
.cmp-add #raAdd { padding: 8px 14px; background: var(--brand-deep); color: #fff; border: 0; border-radius: 8px; font-weight: 600; cursor: pointer; }
.cmp-add #raAdd:disabled { opacity: .5; }
.cmp-add #raKind { min-width: 130px; }

/* Типи ресурсів */
.kt-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; max-width: 480px; }
.kt-item { display: flex; align-items: center; gap: 8px; }
.kt-label { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; color: var(--ink); }
.kt-save { flex: none; padding: 6px 12px; background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer; min-width: 84px; }
.kt-save:hover:not(:disabled) { background: var(--gold); color: #fff; }
.kt-del { flex: none; width: 32px; height: 32px; border: 1px solid var(--line); background: #fff; color: var(--stone); border-radius: 7px; font-size: 14px; cursor: pointer; }
.kt-del:hover { border-color: #b5482f; color: #b5482f; }
.kt-add { display: flex; gap: 8px; align-items: center; max-width: 480px; }
.kt-add input { flex: 1; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.kt-add #ktAdd { flex: none; padding: 8px 14px; background: var(--brand-deep); color: #fff; border: 0; border-radius: 8px; font-weight: 600; cursor: pointer; }
.kt-add #ktAdd:disabled { opacity: .5; }

/* Розклад майстрів */
.sch-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; color: var(--ink); }
.sch-topbar input[type=date] { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.sch-master { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: #fff; }
.sch-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sch-hd b { font-size: 15.5px; color: var(--brand-deep); }
.sch-eff { font-size: 12px; color: var(--stone); }
.sch-days { display: flex; flex-wrap: wrap; gap: 8px; }
.sch-day { display: flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; background: #faf7ef; font-size: 12.5px; }
.sch-day.off { opacity: .55; background: #f1ede3; }
.sch-wd { font-weight: 700; color: var(--brand-deep); width: 22px; }
.sch-day input[type=time] { padding: 3px 5px; border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sch-offl { display: inline-flex; align-items: center; gap: 3px; color: var(--stone); font-size: 11.5px; margin-left: 2px; }
.sch-saverow { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--stone); }
.sch-from { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; }
.sch-save { padding: 8px 14px; background: var(--brand-deep); color: #fff; border: 0; border-radius: 8px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.sch-save:disabled { opacity: .5; }
.sch-msg { color: var(--gold); font-weight: 600; }

/* ── Аркуш сегмента: перепризначення майстра/кімнати ── */
.sh-back { position: fixed; inset: 0; background: rgba(18,32,58,.5); z-index: 40; }
.mg-sheet { position: fixed; z-index: 41; left: 50%; bottom: 0; transform: translateX(-50%); width: min(460px, 100%);
  background: #E4D2B2; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.3); max-height: 86vh; overflow-y: auto; padding: 0 0 16px; }
@media (min-width: 600px) { .mg-sheet { bottom: auto; top: 50%; transform: translate(-50%, -50%); border-radius: 16px; } }
.sh-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #E4D2B2; }
.sh-t { font-family: var(--serif); font-size: 18px; color: var(--brand-deep); }
.sh-num { color: var(--stone); font-size: 14px; font-variant-numeric: tabular-nums; }
.sh-sub { color: var(--stone); font-size: 13px; margin-top: 2px; }
.sh-x { border: 0; background: transparent; font-size: 20px; color: var(--stone); cursor: pointer; line-height: 1; }
.sh-sec { padding: 12px 18px 4px; }
.sh-danger { padding-top: 6px; padding-bottom: 16px; }
.sh-cancel { width: 100%; padding: 11px 14px; background: transparent; border: 1px solid #c0392b; color: #c0392b; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.sh-cancel:hover:not(:disabled) { background: #c0392b; color: #fff; }
.sh-cancel:disabled { opacity: .5; cursor: default; }
.sh-sec h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep); margin: 0 0 8px; }
.sh-sec h3 em { color: var(--stone); font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
.sh-cand { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #faf7ef; border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 7px; cursor: pointer; }
.sh-cand:hover:not(:disabled) { border-color: var(--gold); }
.sh-cand .sh-nm { font-weight: 600; color: #2b2b2b; flex: none; min-width: 84px; }
.sh-cand .sh-ld { flex: 1; font-size: 12px; color: var(--stone); }
.sh-cand .sh-ld b { color: #2b2b2b; font-variant-numeric: tabular-nums; }
.sh-bd { flex: none; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.sh-bd.free { color: #3a7d4d; border: 1px solid rgba(58,125,77,.4); }
.sh-bd.busy { color: #b3541e; border: 1px solid rgba(179,84,30,.3); }
.sh-bd.force { color: #fff; background: var(--gold-deep, #c8a23e); }
.sh-bd.cur { color: var(--stone); border: 1px solid var(--line); }
.sh-cand.busy { opacity: .55; }
.sh-cand:disabled { cursor: default; }

/* ── Овнер: рейтинги послуг за місяць ── */
.ow-monthbar { display: flex; align-items: center; gap: 14px; justify-content: center; padding: 14px; }
.ow-month { font-family: var(--serif); font-size: 19px; color: var(--brand-deep); text-transform: capitalize; min-width: 190px; text-align: center; }
.ow-body { padding: 6px clamp(16px, 4vw, 36px) 60px; max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 30px 44px; align-items: start; }
@media (min-width: 760px) { .ow-body { grid-template-columns: 1fr 1fr; } }   /* 2 колонки на десктопі */
.ow-rhd { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--gold); padding-bottom: 6px; margin-bottom: 12px; }
.ow-rhd h2 { font-family: var(--serif); font-size: 20px; color: var(--brand-deep); margin: 0; }
.ow-total { font-size: 18px; font-weight: 700; color: var(--gold-deep, #c8a23e); font-variant-numeric: tabular-nums; }
.ow-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.ow-rank { flex: none; width: 22px; text-align: center; font-weight: 700; color: var(--stone); font-variant-numeric: tabular-nums; }
.ow-main { flex: 1; min-width: 0; }
.ow-nm { font-size: 14px; color: #2b2b2b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.ow-bar { height: 7px; border-radius: 4px; background: rgba(0,0,0,.06); overflow: hidden; }
.ow-bar i { display: block; height: 100%; border-radius: 4px; background: var(--gold); }
.ow-val { flex: none; text-align: right; font-size: 13px; color: var(--stone); }
.ow-val b { display: block; color: var(--brand-deep); font-size: 14px; font-variant-numeric: tabular-nums; }
.ow-sub { font-size: 11px; }

/* ── Редактор послуг (admin): список назва/тривалість/ціна/показ + додавання ── */
.svc-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; padding: 10px 12px; background: #faf7ef; border: 1px solid var(--line); border-radius: 10px; }
.svc-add input, .svc-add select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.svc-add #saName { min-width: 180px; } .svc-add #saDur { width: 70px; } .svc-add #saPrice { min-width: 160px; }
.svc-add #saAdd { padding: 8px 14px; background: var(--brand-deep); color: #fff; border: 0; border-radius: 8px; font-weight: 600; cursor: pointer; }
.svc-cat { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: 16px 0 4px; font-weight: 700; }
.svc-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(0,0,0,.05); overflow-x: auto; }
.svc-item > * { flex-shrink: 0; }   /* нічого не стискається → назва завжди повна, рядок скролиться, якщо тісно */
.svc-nm { flex: 1 0 auto; min-width: 150px; font-size: 14px; color: #2b2b2b; white-space: nowrap; }
.svc-item input[type=number] { width: 56px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.svc-item input.svc-price { width: 72px; }
.svc-item input::-webkit-outer-spin-button, .svc-item input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.svc-u { color: var(--stone); font-size: 12px; margin-left: -4px; }
.svc-save { flex: none; padding: 6px 12px; background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer; min-width: 84px; }
.svc-save:hover:not(:disabled) { background: var(--gold); color: #fff; }
.svc-steps { flex: none; padding: 6px 12px; background: var(--brand-deep); border: 0; color: var(--gold); border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.svc-steps:hover { background: var(--brand); }
.svc-photos { flex: none; padding: 6px 12px; background: transparent; border: 1px solid var(--brand-deep); color: var(--brand-deep); border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.svc-photos:hover { background: var(--brand-deep); color: #fff; }
/* панель фото слайдів послуги */
.ph-list { display: flex; flex-direction: column; gap: 10px; }
.ph-row { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper, #fbf8f1); }
.ph-thumb { flex: none; width: 92px; height: 68px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(159,128,56,.10); }
.ph-img { width: 100%; height: 100%; object-fit: cover; }
.ph-none { font-size: 11.5px; color: var(--stone); }
.ph-info { flex: 1; min-width: 0; }
.ph-title { font-size: 14.5px; color: var(--brand-deep); margin-bottom: 8px; }
.ph-act { display: flex; gap: 8px; }
.ph-up { display: inline-block; padding: 8px 15px; background: var(--brand-deep); color: #fff; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ph-del { padding: 8px 13px; background: transparent; border: 1px solid var(--line); color: var(--stone); border-radius: 8px; font-size: 13px; cursor: pointer; }
.ph-del:hover { border-color: #c0503a; color: #c0503a; }
.svc-ro { flex: none; color: var(--stone); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ── Редактор складу програми ── */
.st-back { position: fixed; inset: 0; background: rgba(20,16,12,.5); z-index: 40; }
.st-sheet { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--paper, #fbf8f1);
  box-shadow: -8px 0 40px rgba(0,0,0,.25); overflow-y: auto; padding: 18px 20px 60px; -webkit-overflow-scrolling: touch; }
.st-hd { display: flex; align-items: center; gap: 12px; position: sticky; top: -18px; background: var(--paper, #fbf8f1); padding: 12px 0; margin: -18px 0 4px; z-index: 1; border-bottom: 1px solid var(--line); }
.st-hd h2 { flex: 1; font-family: var(--serif); font-size: 21px; color: var(--brand-deep); min-width: 0; }
.st-close { flex: none; padding: 8px 16px; background: var(--brand-deep); color: #fff; border: 0; border-radius: 8px; font-weight: 600; cursor: pointer; }
.st-hint { font-size: 12.5px; color: var(--stone); line-height: 1.5; margin: 12px 0 14px; }
/* Універсальний контент-редактор слайдів (текст усіма мовами + фото + автопереклад) */
.ct-langs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.ct-lang { padding: 5px 11px; border: 1px solid var(--line); background: transparent; color: var(--stone); border-radius: 14px; font-size: 13px; cursor: pointer; }
.ct-lang:hover { border-color: var(--brand-deep); color: var(--brand-deep); }
.ct-lang.on { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.ct-list { display: flex; flex-direction: column; gap: 14px; }
.ct-card { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ct-photo { flex: 0 0 92px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.ph-up.sm, .ph-del.sm { padding: 6px 10px; font-size: 12px; text-align: center; }
.ct-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ct-title { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--ink); background: #fff; }
.ct-desc { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; line-height: 1.5; color: var(--ink); background: #fff; resize: vertical; font-family: inherit; }
.ct-act { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-tr, .ct-save, .ct-del, .ct-add, .ct-tr-all, .ct-save-all { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--brand-deep); }
.ct-save, .ct-save-all { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.ct-del { color: var(--stone); }
.ct-del:hover { border-color: #c0503a; color: #c0503a; }
.ct-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ct-msg { font-size: 13px; color: var(--stone); }
/* Референс фото + пікер «Обрати з наявних» */
.ct-ref { font-size: 11.5px; color: var(--brand-deep); background: rgba(159,128,56,.12); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-pick.sm { color: var(--brand-deep); }
.pk-modal { position: fixed; inset: 0; background: rgba(20,30,50,.55); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pk-box { background: var(--paper, #fbf8f1); border-radius: 14px; max-width: 900px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
.pk-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.pk-hd b { font-family: var(--serif); font-size: 18px; color: var(--brand-deep); }
.pk-x { background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--stone); }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 16px; overflow-y: auto; }
.pk-item { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px; cursor: pointer; text-align: left; }
.pk-item:hover { border-color: var(--gold); }
.pk-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; display: block; }
.pk-lab { font-size: 12px; color: var(--stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-empty { padding: 30px; color: var(--stone); text-align: center; grid-column: 1/-1; }
@media (max-width: 560px) { .ct-card { flex-direction: column; } .ct-photo { flex-direction: row; flex: none; } .ct-photo .ph-thumb { flex: none; } }
.st-list { display: flex; flex-direction: column; gap: 10px; }
.st-step { display: flex; gap: 8px; align-items: stretch; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.st-move { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.st-move button { width: 26px; height: 22px; border: 1px solid var(--line); background: #faf7ef; border-radius: 6px; color: var(--brand-deep); font-size: 10px; cursor: pointer; line-height: 1; }
.st-move button:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
.st-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.st-svc { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--stone); }
.st-service { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; background: #faf7ef; color: var(--brand-deep); }
.st-title { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14.5px; color: var(--ink); }
.st-nums { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.st-nums label { font-size: 12.5px; color: var(--stone); display: inline-flex; align-items: center; gap: 5px; }
.st-nums input[type=number] { width: 58px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.st-nums input::-webkit-outer-spin-button, .st-nums input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-nm input { width: auto; }
.st-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.st-kind { padding: 5px 11px; border: 1px solid var(--line); background: #fff; color: var(--stone); border-radius: 999px; font-size: 12.5px; cursor: pointer; }
.st-kind.on { background: var(--brand-deep); color: var(--gold); border-color: var(--brand-deep); font-weight: 600; }
.st-act { display: flex; flex-direction: column; gap: 6px; justify-content: space-between; }
.st-act .st-save { padding: 6px 12px; background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.st-act .st-save:hover:not(:disabled) { background: var(--gold); color: #fff; }
.st-del { width: 30px; height: 30px; align-self: flex-end; border: 1px solid var(--line); background: #fff; color: var(--stone); border-radius: 7px; font-size: 14px; cursor: pointer; }
.st-del:hover { border-color: #b5482f; color: #b5482f; }
.st-add { margin-top: 14px; width: 100%; padding: 11px; background: #faf7ef; border: 1px dashed var(--gold); color: var(--brand-deep); border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer; }
.st-add:hover { background: rgba(159,128,56,.12); }
@media (max-width: 520px) { .st-step { flex-wrap: wrap; } .st-act { flex-direction: row; width: 100%; } }
.mg-sw.sm { flex: none; padding: 0; gap: 0; }
.svc-menu { flex: none; gap: 5px; margin-left: 4px; }
.svc-mlbl { font-size: 11px; color: var(--stone); }

.mg-sec { margin-bottom: 26px; }
.mg-sec h2 { font-family: var(--serif); font-size: 20px; color: var(--brand-deep); margin-bottom: 10px; }
.mg-sw { display: flex; align-items: center; gap: 12px; padding: 9px 4px; cursor: pointer; }
.mg-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.mg-track { flex: none; width: 44px; height: 26px; border-radius: 999px; background: #cfc6b0; position: relative;
  transition: background .18s ease; }
.mg-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease; }
.mg-sw input:checked + .mg-track { background: var(--brand-deep); }
.mg-sw input:checked + .mg-track::after { transform: translateX(18px); }
.mg-sw input:focus-visible + .mg-track { outline: 2px solid var(--gold); outline-offset: 2px; }
.mg-sw input:disabled + .mg-track { opacity: .5; }
.mg-lbl { font-size: 15px; color: var(--ink); }

/* «Мої записи» */
.my-sec { margin-bottom: 18px; }
.my-sec h3 { font-family: var(--serif); font-size: 17px; color: var(--brand-deep); margin: 4px 0 8px; }
.my-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #E5D9BF;
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(27,46,76,.06); }
.my-when { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--brand-deep); font-weight: 600; min-width: 96px; }
.my-name { flex: 1; min-width: 0; font-size: 15px; color: var(--ink); }
.my-card.is-off { opacity: .55; }
.my-card.is-off .my-name { text-decoration: line-through; }
.my-cancel { padding: 6px 12px; font-size: 13px; }
.cfg-num { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
/* Персонал → ролі */
.stf-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 4px; border-bottom: 1px solid rgba(0,0,0,.06); }
.stf-nm { font-weight: 600; flex: 1 1 140px; min-width: 120px; }
.stf-roles { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.stf-tg { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.stf-rl { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; }
.stf-link { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; max-width: 220px; }
.stf-linked { font-size: 14px; color: var(--ink); }
.stf-unlink { border: none; background: transparent; cursor: pointer; color: #b04a3a; font-size: 15px; padding: 2px 6px; }
.stf-badge { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-deep, #8a6d2f); background: rgba(215,189,133,.22); border-radius: 6px; padding: 2px 7px; margin-left: 6px; }
.stf-del { border: none; background: transparent; cursor: pointer; font-size: 16px; padding: 2px 6px; opacity: .7; }
.stf-del:hover { opacity: 1; }
.stf-role { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.stf-save { padding: 6px 12px; border: 1px solid var(--brand-deep, #1B2E4C); border-radius: 8px; background: var(--brand-deep, #1B2E4C); color: #fff; cursor: pointer; font-size: 14px; }
/* Сесії / пристрої */
.sess-card { padding: 12px 4px; border-bottom: 1px solid rgba(0,0,0,.06); }
.sess-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.sess-nm { font-weight: 600; }
.sess-revoke-all { margin-left: auto; border: 1px solid #b04a3a; background: transparent; color: #b04a3a; border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 13px; }
.sess-dev { display: flex; align-items: center; gap: 10px; padding: 4px 0 4px 12px; font-size: 14px; color: var(--ink); }
.sess-d em { color: var(--muted, #8a8375); font-style: normal; }
.sess-t { color: var(--muted, #8a8375); }
.sess-revoke { margin-left: auto; border: none; background: transparent; color: #b04a3a; cursor: pointer; font-size: 14px; padding: 2px 6px; }
/* CTA «активуйте нагадування» після запису */
.remind-nudge { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 9998;
  display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 16px; border-radius: 999px;
  background: var(--brand-deep, #1B2E4C); color: var(--gold-soft, #F1E9D8); box-shadow: 0 8px 28px rgba(0,0,0,.28); max-width: calc(100vw - 24px); }
.remind-nudge a { color: var(--gold-soft, #F1E9D8); text-decoration: none; font-weight: 600; font-size: 15px; }
.remind-nudge button { border: none; background: rgba(255,255,255,.14); color: inherit; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; flex: none; }
.cfg-num input { width: 72px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; text-align: right; }
.cfg-num button { padding: 8px 14px; background: var(--brand-deep); color: #fff; border: 0; border-radius: 8px; font-weight: 600; cursor: pointer; }
.cfg-num #cfgHzMsg { color: var(--gold); font-weight: 700; }

/* Клікабельні комірки + денний виняток масажиста */
.ms-cell.tap { cursor: pointer; }
.ms-cell.tap:hover { border-color: var(--gold); }
.ms-cell.ov { box-shadow: inset 0 0 0 2px var(--gold); }
.dw-form { display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.dw-hint { font-size: 12.5px; color: var(--stone); line-height: 1.5; }
.dw-list { display: flex; flex-direction: column; gap: 8px; }
.dw-row { display: flex; align-items: center; gap: 6px; }
.dw-row input[type=time] { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; font-variant-numeric: tabular-nums; }
.dw-del { flex: none; width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; color: var(--stone); border-radius: 8px; cursor: pointer; }
.dw-del:hover { border-color: #b5482f; color: #b5482f; }
.dw-add { align-self: flex-start; padding: 8px 14px; border: 1px dashed var(--gold); background: #faf7ef; color: var(--brand-deep); border-radius: 9px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.dw-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }