/* Pochatok — «9 · Кабінет після запуску»: account.html (9a Мій сайт), account-bookings.html (9b–9d + 9f на телефоні),
   account-settings.html (9e). Структура — з канвасу Claude Design «Simple Site Editor» (AccSite / AccBookings /
   AccBookingDetails / AccBookingsEmpty / AccSettings / MobileBookings / AccountNav), ВИГЛЯД — лише дизайн-система
   Pochatok з Figma: Manrope 400, чорне / біле / сірі токени, прямі кути, кнопки .cbtn, інфо-плашки — жовті (--accent).
   Підключається після style.css + inner.css + cabinet.css (+ site.css на 9a, + onboarding.css на 9b / 9e). */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* secondary buttons are FILLED, never outlined (user rule 03.10); danger = a red-tinted fill, confirm step = solid red */
.cbtn--danger { background: #f8e3dc; color: #c4320a; }
.cbtn--danger.is-confirm { background: #c4320a; color: var(--white); }
.acc-body .cbtn { gap: 10px; }

/* header «?» help icon: in cabinet.css (shared with the onboarding / launch pages) */

/* ================= layout: black header row, then menu | content ================= */
.acc { display: flex; align-items: flex-start; min-height: calc(100vh - 82px); min-height: calc(100svh - 82px); }
.acc-nav {
  position: sticky;
  top: 0;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 300px;
  min-height: calc(100vh - 82px);
  min-height: calc(100svh - 82px);
  padding: 40px var(--pad);
  border-right: 1px solid var(--grey-soft);
}
.acc-sites { position: relative; }
.acc-biz { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; background: var(--grey-bg); text-align: left; transition: background-color .2s; }
.acc-biz:hover, .acc-biz[aria-expanded="true"] { background: #ebe9e5; }
.acc-biz__chev { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-left: auto; transition: transform .2s; }
.acc-biz__chev svg { display: block; }   /* the box = the icon, so it turns around its own centre */
.acc-biz[aria-expanded="true"] .acc-biz__chev { transform: rotate(180deg); }
/* site switcher */
.acc-sites__list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10; display: flex; flex-direction: column; padding: 8px; border: 1px solid var(--black); background: var(--white); }
.acc-sites__list[hidden] { display: none; }
.acc-sites__label { padding: 8px 8px 4px; font-size: 12px; color: var(--grey-text); }
.acc-sites__item, .acc-sites__add { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px; transition: background-color .2s; }
.acc-sites__item:hover, .acc-sites__add:hover { background: var(--grey-bg); }
.acc-sites__item > svg { flex: none; margin-left: auto; }
.acc-sites__item .acc-biz__ava { width: 36px; height: 36px; font-size: 16px; }
.acc-sites__add { margin-top: 4px; padding: 12px 8px; border-top: 1px solid var(--grey-soft); font-size: 16px; }

/* 15.10 (user: «лівий сайдбар підстрибує при скролі вниз, а не має»): the black header row scrolled away and the menu rode
   82 px up with it, then stuck with its bottom (fold + mini footer) 82 px above the screen's edge. Now the header row stays
   and the menu stands still right under it, exactly the rest of the screen high (scrolling inside only when it is taller) */
@media (min-width: 901px) {
  .page-top:has(+ .acc) { position: sticky; top: 0; z-index: 50; }
  .acc-nav { top: 82px; height: calc(100vh - 82px); height: calc(100svh - 82px); min-height: 0; overflow-y: auto; scrollbar-width: none; }
  .acc-nav::-webkit-scrollbar { display: none; }
}

/* fold to icons + mini footer */
.acc-fold { display: flex; align-items: center; gap: 14px; height: 48px; margin-top: auto; padding: 0 16px; font-size: 16px; color: var(--grey-text); transition: color .2s; }
.acc-fold:hover { color: var(--black); }
.acc-fold svg { flex: none; transition: transform .3s; }
.acc-foot { display: flex; flex-direction: column; gap: 10px; padding: 20px 16px 0; border-top: 1px solid var(--grey-soft); font-size: 14px; line-height: 1.35; color: var(--grey-text); }
.acc-foot__links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.acc-foot__links a { transition: color .2s; }
.acc-foot__links a:hover { color: var(--black); }
.acc-foot__copy { color: var(--grey-soft); }

/* folded: 88 px rail with icons only (titles stay as tooltips) */
.acc-nav { transition: width .3s cubic-bezier(.4, 0, .2, 1), padding .3s; }
.acc--still .acc-nav { transition: none; }
.acc.is-folded .acc-nav { width: 88px; padding-left: 16px; padding-right: 16px; }
.acc.is-folded .acc-biz { justify-content: center; padding: 8px 0; }
.acc.is-folded .acc-biz .acc-biz__text, .acc.is-folded .acc-biz__chev,
.acc.is-folded .acc-nav__item > span:first-of-type, .acc.is-folded .acc-fold span, .acc.is-folded .acc-foot { display: none; }
.acc.is-folded .acc-nav__item { position: relative; justify-content: center; padding: 0; }
.acc.is-folded .acc-nav__count { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 12px; }
.acc.is-folded .acc-fold { justify-content: center; padding: 0; }
.acc.is-folded .acc-fold svg { transform: scaleX(-1); }
.acc.is-folded .acc-sites__list { right: auto; width: 300px; top: 0; left: calc(100% + 12px); }

.acc-biz__ava { flex: none; display: grid; place-items: center; width: 44px; height: 44px; background: var(--black); color: var(--white); font-size: 20px; }
.acc-biz__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-biz__name { font-size: 16px; line-height: 1.35; }
.acc-biz__url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.35; color: var(--grey-text); }
.acc-nav__list { display: flex; flex-direction: column; gap: 4px; }
.acc-nav__item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 16px;
  font-size: 16px;
  line-height: 1.35;
  transition: background-color .2s, color .2s;
}
.acc-nav__item > span:first-of-type { flex: 1 1 auto; }
.acc-nav__item:hover { background: var(--grey-bg); }
.acc-nav__item.is-active { background: var(--black); color: var(--white); }
/* count of new bookings = info plate → yellow */
.acc-nav__count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; background: var(--accent); color: var(--black); font-size: 14px; }
.acc-nav__count:empty { display: none; }

.acc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 40px; padding: 60px var(--pad) 140px 60px; }
/* the menu stays at the left edge, the content is capped at its width in the 1440 frame (1140 = 1440 − 300 menu) and
   centred in the space to the right on wider screens (user 06.10) */
@media (min-width: 901px) { .acc-main { max-width: calc(var(--content-max) + 2 * var(--pad) - 300px); margin-inline: auto; } }
.acc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.acc-head__text { display: flex; flex-direction: column; gap: 16px; }
.acc-title { font-size: var(--fs-xl); line-height: 1.1; }
.acc-lead { font-size: 18px; line-height: 1.65; color: var(--grey-text); }

/* ================= 9a · my site ================= */
.acc-site { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: stretch; padding: 40px; background: var(--grey-bg); }
.acc-site__preview .browser__screen { height: calc(900px * var(--k)); }   /* the first screen: 1440 × 900 (06.10) */
.acc-site__preview .browser__screen iframe { width: 1440px; height: 900px; }
.acc-site__side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
/* 06.10: status at the top, name / address / note centred in the height left, the buttons at the bottom */
.acc-site__info { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; min-width: 0; max-width: 100%; }
/* status = info plate → yellow */
.acc-live { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; background: var(--accent); font-size: 14px; line-height: 1.35; }
.acc-live i { width: 8px; height: 8px; background: var(--black); animation: acc-pulse 2s ease-in-out infinite; }
@keyframes acc-pulse { 50% { opacity: .25; } }
.acc-site__name { font-size: var(--fs-l); line-height: 1.1; }
.acc-site__url { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; font-size: 16px; line-height: 1.35; text-decoration: underline; text-underline-offset: 4px; }
.acc-site__url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-site__url svg { flex: none; }
.acc-site__note { font-size: 14px; line-height: 1.65; color: var(--grey-text); }
.acc-site__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }   /* two equal buttons, full width */
.acc-site__actions .cbtn { width: 100%; justify-content: center; padding-left: 16px; padding-right: 16px; white-space: nowrap; }
.acc-site__actions .cbtn span { overflow: hidden; text-overflow: ellipsis; }
.acc-site__actions .cbtn svg { flex: none; }
/* a draft's «Обрати адресу й запустити сайт» (19.10): the whole row above the two buttons */
.acc-site__actions .acc-site__launch { grid-column: 1 / -1; }
/* delete — two steps like «Скасувати запис»: the 2nd click is solid red */
.acc-site__del.is-confirm { background: #c4320a; color: var(--white); }
.acc-site__note.is-warn { color: #c4320a; }

.acc-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }


/* the icon sits on the block's top padding, not centred (user 03.10); only the trailing arrow is centred */
.acc-tile { display: flex; align-items: flex-start; gap: 20px; min-width: 0; padding: 40px; background: var(--grey-bg); transition: background-color .2s; }
a.acc-tile:hover { background: #ebe9e5; }
.acc-tile__icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; background: var(--white); }
.acc-tile__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.acc-tile__label { font-size: 14px; line-height: 1.35; color: var(--grey-text); }
.acc-tile__title { font-size: 20px; line-height: 1.2; }
.acc-tile__sub { font-size: 16px; line-height: 1.35; color: var(--grey-text); }
.acc-tile > svg { flex: none; align-self: center; }
.acc-tile__btn { flex: none; }

/* ================= 9b · bookings ================= */
.bk { gap: 32px; }
.bk-bar { display: flex; align-items: center; gap: 20px; }
.bk-step { display: flex; align-items: center; gap: 8px; }
.bk-step__btn { display: grid; place-items: center; width: 48px; height: 48px; background: #d9d9d9; transition: opacity .2s; }
.bk-step__btn:hover { opacity: .85; }
.bk-step__btn:disabled { opacity: .35; cursor: default; }
.bk-step__date { min-width: 300px; font-size: 20px; line-height: 1.2; text-align: center; }
.bk-sum { margin-left: auto; font-size: 16px; line-height: 1.35; color: var(--grey-text); }
.bk-days { display: none; }

/* day timeline: 9:00–19:00, 84 px per hour (canvas) */
.bk-board { padding: 40px 40px 40px 24px; background: var(--grey-bg); }
.bk-time { position: relative; height: calc(10 * 84px + 16px); }
.bk-hour { position: absolute; left: 0; right: 0; display: flex; align-items: flex-start; gap: 12px; }
.bk-hour span { width: 56px; text-align: right; font-size: 14px; line-height: 1; color: var(--grey-text); transform: translateY(-7px); }
.bk-hour::after { content: ""; flex: 1 1 auto; height: 1px; background: #e6e4e0; }
.bk-ev {
  position: absolute;
  left: 80px;
  right: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 16px;
  overflow: hidden;
  border-left: 3px solid var(--black);
  background: var(--white);
  text-align: left;
  transition: background-color .2s;
}
.bk-ev:hover { background: #fafafa; }
.bk-ev__top { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 16px; line-height: 1.35; white-space: nowrap; }
.bk-ev__time { color: var(--grey-text); }
.bk-ev__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.35; color: var(--grey-text); }
.bk-ev.is-short { flex-direction: row; align-items: center; gap: 12px; }
.bk-ev.is-short .bk-ev__sub { display: none; }
/* «new» = info plate → yellow */
.bk-new { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; background: var(--accent); color: var(--black); font-size: 12px; line-height: 1; }
/* 18.10: a booking waiting for its online payment, or one whose payment was refunded (bk-new--wait too) — grey, not a notice */
.bk-new--wait { background: #d9d9d9; }
.bk-ev__sub .bk-new { display: inline-flex; height: 18px; margin-right: 8px; vertical-align: 1px; }   /* the payment tag before the service (narrow columns) */
.bk-now { position: absolute; left: 60px; right: 0; display: flex; align-items: center; pointer-events: none; }
.bk-now::before { content: ""; width: 9px; height: 9px; background: var(--black); }
.bk-now::after { content: ""; flex: 1 1 auto; height: 2px; background: var(--black); }
.bk-list { display: none; }

/* a booking as a row — the phone's day list and «Список» (13.10: every upcoming booking, grouped by date) */
.bk-item { display: flex; align-items: center; gap: 8px; min-height: 76px; padding: 0 8px 0 16px; background: var(--grey-bg); }
.bk-item.is-now { box-shadow: inset 0 0 0 2px var(--black); }
.bk-item__open { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 0; text-align: left; }
.bk-item__time { flex: none; display: flex; flex-direction: column; gap: 1px; width: 50px; font-size: 16px; line-height: 1.3; }
.bk-item__time small { font-size: 12px; color: var(--grey-text); }
.bk-item__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bk-item__name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 16px; line-height: 1.3; }
.bk-item__name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-item__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.3; color: var(--grey-text); }
.bk-item__call { flex: none; display: grid; place-items: center; width: 44px; height: 44px; background: #d9d9d9; }
.bk-agenda { display: flex; flex-direction: column; gap: 32px; }
.bk-agenda[hidden] { display: none; }
.bk-agenda__date { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 12px; font-size: 20px; font-weight: 400; line-height: 1.2; }
.bk-agenda__sum { font-size: 16px; line-height: 1.35; color: var(--grey-text); }
.bk-agenda__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* «День / Список» (13.10) — the master filter's chips; «Список» has no day stepper / strip */
.bk-mode { flex: none; display: flex; gap: 8px; }
.bk-mode .ob-chip { height: 48px; padding: 0 18px; }
.bk--list .bk-step, .bk--list .bk-days { display: none; }

.bk-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 480px; padding: 40px var(--pad); background: var(--grey-bg); text-align: center; }
.bk-empty[hidden] { display: none; }
.bk-empty__icon { display: grid; place-items: center; width: 80px; height: 80px; background: var(--white); }
.bk-empty__title { font-size: var(--fs-l); line-height: 1.1; }
.bk-empty__text { max-width: 440px; font-size: 16px; line-height: 1.65; color: var(--grey-text); }
.bk-empty__text span { white-space: nowrap; }
.bk-board[hidden] { display: none; }

/* ================= 9c · booking side panel (details + add / move form) ================= */
.bk-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: 480px;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 32px 40px;
  border: 0;
  background: var(--white);
  color: var(--black);
  overflow: auto;
}
.bk-drawer[open] { display: flex; flex-direction: column; gap: 32px; animation: bk-in .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes bk-in { from { transform: translateX(40px); opacity: 0; } }
.bk-drawer::backdrop { background: rgba(0, 0, 0, .45); }
.bk-drawer :focus { outline: none; }
.bk-drawer :focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.bk-drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.bk-drawer__badge { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; background: var(--accent); font-size: 14px; line-height: 1.35; }
.bk-drawer__badge[hidden] { display: none; }
.bk-drawer__close { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -10px 0 auto; transition: opacity .2s; }
.bk-drawer__close:hover { opacity: .6; }
.bk-drawer__view, .bk-drawer__form { flex: 1 1 auto; display: flex; flex-direction: column; gap: 28px; }
.bk-drawer__view[hidden], .bk-drawer__form[hidden] { display: none; }
.bk-drawer__form { gap: 20px; }
/* «Надіслати клієнту підтвердження» (12.10) — the landing popup's checkbox (.rq__check); greyed out without an e-mail */
.bk-drawer__mail { align-self: flex-start; }
.bk-drawer__mail[hidden] { display: none; }
.bk-drawer__mail:has(input:disabled) { opacity: .5; cursor: default; }
.bk-drawer__mail:has(input:disabled):hover { border-color: var(--grey-soft); }
.bk-drawer__who { display: flex; flex-direction: column; gap: 16px; }
.bk-drawer__name { font-size: var(--fs-l); line-height: 1.1; }
.bk-drawer__phone { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; }
.bk-drawer__facts { margin: 0; padding: 4px 24px; background: var(--grey-bg); }
.bk-drawer__facts div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.bk-drawer__facts div + div { border-top: 1px solid var(--grey-soft); }
.bk-drawer__facts dt { font-size: 16px; color: var(--grey-text); }
.bk-drawer__facts dd { margin: 0; font-size: 16px; text-align: right; }
.bk-drawer__comment { display: flex; flex-direction: column; gap: 10px; }
.bk-drawer__comment[hidden] { display: none; }
.bk-drawer__label { font-size: 16px; color: var(--grey-text); }
.bk-drawer__comment p { padding: 16px 20px; background: var(--grey-bg); font-size: 16px; line-height: 1.65; }
.bk-drawer__actions { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.bk-drawer__actions .cbtn { width: 100%; }
.bk-drawer__note { font-size: 14px; line-height: 1.65; color: var(--grey-text); text-align: center; }
.bk-drawer__area { height: auto; padding: 16px 20px; resize: vertical; }
.bk-drawer__error { min-height: 1.35em; font-size: 14px; line-height: 1.35; color: #c4320a; }

/* ================= 9e · settings ================= */
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.set-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 40px; background: var(--grey-bg); }
.set-card__head { display: flex; align-items: center; gap: 16px; }
.set-card__title { flex: 1 1 auto; font-size: 20px; line-height: 1.2; }
.set-card__btn { flex: none; height: 44px; padding: 0 20px; }
.set-card__lines { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 0 0 68px; list-style: none; }
.set-card__lines li { font-size: 16px; line-height: 1.5; color: var(--grey-text); overflow-wrap: anywhere; }
.set-card__lines li:first-child { color: var(--black); }
.set-card__link { color: var(--black); text-decoration: underline; text-underline-offset: 4px; }
.set-card__state { color: var(--black); }
/* «Валюта цін на сайті» (13.10) — under the lines, on their edge (the icon column = 68) */
.set-card__field { margin: 0; padding-left: 68px; }
.set-card__field[hidden] { display: none; }
/* 16.10: a row heading INSIDE a card — never bigger than the card's own title */
.set-card__sub { font-size: 16px; line-height: 1.5; font-weight: 400; }
/* «Перевірте ціни»: the texts with a price in another currency */
.acc-alert__list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; padding: 0 0 0 20px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }

/* ================= account-level pages (burger): profile, subscription & billing ================= */
/* account pages without the site menu (profile, billing, new site, template change): the content column like every
   page — 20 px sides at 1440, a centred 1400 wider (user 06.10: «у профілі звужене — розтягни на макс. обмеження»; was 808) */
.acc-solo { display: flex; flex-direction: column; gap: 40px; width: calc(var(--content-max) + 2 * var(--pad)); max-width: 100%; margin: 0 auto; padding: 48px var(--pad) 140px; }
/* account-services.html (12.10): the landing's «Послуги» cards; on the white cabinet page a card is a BLOCK → grey, no border */
.acc-services .services { justify-content: flex-start; }
/* 15.10 (user: «картки відцентрувати, а не прибивати вліво»): the page is as wide as its two cards (2 × 572 + 20) and centred,
   so the title and «До кабінету сайту» stand over the left card */
.acc-solo.acc-services { width: calc(2 * 572px + 20px + 2 * var(--pad)); }
.acc-services .service { background: var(--grey-bg); }
.acc-sec { display: flex; flex-direction: column; gap: 24px; padding-top: 40px; border-top: 1px solid var(--black); }
.acc-sec--quiet { border-top-color: var(--grey-soft); }
.acc-sec__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.acc-sec__title { font-size: var(--fs-l); line-height: 1.1; }
.acc-sec__note { font-size: 16px; line-height: 1.65; color: var(--grey-text); }
.acc-sec__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.acc-sec__foot .cbtn { min-width: 222px; }
.acc-sec__foot .cbtn:disabled { opacity: .35; cursor: default; }
/* «saved» = info plate → yellow, shown for 2 s */
.acc-saved { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; background: var(--accent); font-size: 14px; opacity: 0; transition: opacity .25s; }
.acc-saved.is-on { opacity: 1; }
.acc-saved:empty { display: none; }
.acc-row { display: flex; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--grey-soft); }
.acc-sec > .acc-row:first-of-type, .acc-sec__title + .acc-row { padding-top: 0; }
/* the last item of a section has no own bottom line — the next section's divider is enough (user 03.10) */
.acc-sec > .acc-row:last-child, .acc-sec > .acc-row:has(+ [hidden]:last-child) { padding-bottom: 0; border-bottom: 0; }
.acc-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.acc-row__title { font-size: 20px; line-height: 1.35; }
.acc-row__sub { font-size: 14px; line-height: 1.5; color: var(--grey-text); }
.acc-card-form { display: flex; flex-direction: column; gap: 20px; padding: 40px; background: var(--grey-bg); }
.acc-card-form[hidden] { display: none; }
.acc-card-form .ob-input { background: var(--white); }
.acc-table-wrap { overflow-x: auto; }
.acc-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.35; }
.acc-table th { padding: 0 16px 12px 0; font-weight: 400; font-size: 14px; color: var(--grey-text); text-align: left; white-space: nowrap; }
.acc-table td { padding: 16px 16px 16px 0; border-top: 1px solid var(--grey-soft); white-space: nowrap; }
.acc-paid { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--black); font-size: 14px; }

.acc-table--sites small { font-size: 14px; color: var(--grey-text); }
.acc-table--sites td { white-space: normal; vertical-align: top; }
.acc-table tfoot td { border-top: 1px solid var(--black); }
.acc-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.acc-steps li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 0 16px 56px; border-bottom: 1px solid var(--grey-soft); counter-increment: s; }
.acc-steps li:last-child { padding-bottom: 0; border-bottom: 0; }
.acc-steps li::before { content: counter(s); position: absolute; left: 0; top: 16px; display: grid; place-items: center; width: 36px; height: 36px; background: var(--black); color: var(--white); }
.acc-steps b, .acc-econ b { font-weight: 400; color: var(--black); }
.acc-steps b { font-size: 16px; }
.acc-steps span { font-size: 16px; line-height: 1.5; color: var(--grey-text); }
.acc-econ { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.acc-econ li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--grey-text); }
.acc-econ svg { flex: none; margin-top: 2px; color: var(--black); }

/* ================= ≤1100: narrower menu ================= */
@media (max-width: 1100px) {
  .acc-nav { width: 240px; }
  .acc-main { padding-left: 40px; }
  .acc-site { grid-template-columns: 1fr; }
  .acc-tiles, .set-grid { grid-template-columns: 1fr; }
  .bk-step__date { min-width: 0; }
}

/* ================= mobile (≤900, canvas «Bookings on the phone»): bottom tab bar, list instead of timeline ================= */
@media (max-width: 900px) {
  .acc { display: block; min-height: 0; }
  .acc-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 20;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--grey-soft);
    background: var(--white);
  }
  .acc-sites, .acc-fold, .acc-foot { display: none; }
  .acc-nav__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding-bottom: env(safe-area-inset-bottom); }
  .acc-nav__item { position: relative; flex-direction: column; justify-content: center; gap: 4px; height: 68px; padding: 0 4px; font-size: 12px; }
  .acc-nav__item > span:first-of-type { flex: none; }
  .acc-nav__item:hover { background: none; }
  .acc-nav__count { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 20px; height: 20px; font-size: 12px; }

  .acc-main { gap: 32px; padding: 40px var(--pad) calc(68px + 100px); }
  .acc-title { font-size: 28px; }
  .acc-lead { font-size: 16px; }

  .acc-site { padding: 24px; gap: 24px; }
  .acc-site__name { font-size: 20px; }
  .acc-site__url { font-size: 16px; }
  .acc-site__actions, .acc-site__actions .cbtn { width: 100%; }
  /* 19.10: on a phone the buttons stack (two side by side cut «Видалити сайт»), the long launch label wraps */
  .acc-site__actions { grid-template-columns: minmax(0, 1fr); }
  .acc-site__actions .acc-site__launch { white-space: normal; text-align: center; height: auto; min-height: 50px; }
  .acc-tile { flex-wrap: wrap; padding: 24px; gap: 16px; }
  .acc-tile__title { font-size: 18px; }
  .acc-tile__btn { width: 100%; }

  /* bookings: date strip + list; «add» floats above the tab bar */
  .bk { gap: 20px; }
  .bk .acc-head { align-items: center; }
  .bk-add { position: fixed; right: var(--pad); bottom: calc(68px + 16px + env(safe-area-inset-bottom)); z-index: 19; height: 56px; padding: 0 22px; }
  .bk-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .bk-step { display: none; }
  .bk-days { display: grid; grid-template-columns: 28px repeat(7, minmax(0, 1fr)) 28px; gap: 4px; }
  .bk-week { display: grid; place-items: center; height: 60px; background: #d9d9d9; transition: opacity .2s; }
  .bk-week:disabled { opacity: .35; cursor: default; }
  .bk-mode .ob-chip { flex: 1 1 0; height: 44px; }
  .bk-agenda { gap: 24px; }
  .bk-agenda__date { margin-bottom: 8px; font-size: 18px; }
  .bk-agenda__sum { font-size: 14px; }
  .bk-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 60px; border: 1px solid var(--grey-soft); font-size: 12px; line-height: 1.2; transition: background-color .2s, color .2s, border-color .2s; }
  .bk-day b { font-weight: 400; font-size: 18px; }
  .bk-day[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: var(--white); }
  .bk-sum { margin: 0; font-size: 14px; }
  .bk-board { padding: 0; background: none; }
  .bk-time { display: none; }
  .bk-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .bk-empty { min-height: 360px; }
  .bk-empty__title { font-size: 20px; }

  .bk-drawer { width: 100%; padding: 20px var(--pad) 28px; }
  .bk-drawer__name { font-size: 24px; }
  .bk-drawer__facts { padding: 4px 16px; }

  .acc-solo { gap: 32px; padding: 32px var(--pad) 100px; }
  .acc-sec { gap: 20px; padding-top: 32px; }
  .acc-sec__title { font-size: 20px; }
  .acc-sec__foot .cbtn { width: 100%; }
  .acc-row { flex-wrap: wrap; gap: 12px 16px; }
  .acc-row > .cbtn { width: 100%; }
  .acc-card-form { padding: 24px; }

  .set-card { padding: 24px; }
  .set-card__head { flex-wrap: wrap; }
  .set-card__title { font-size: 18px; }
  .set-card__lines { padding-left: 0; }
  .set-card__field { padding-left: 0; }
}

/* =====================================================================================================
   03.10 — the model: payment states, cancel flow, statistics, team (several masters), days off,
   invoice details, template change, «your data» (GDPR). Same tokens; blocks = grey fill, no border,
   40 / 24 px; inputs white + border; secondary buttons grey fill; info plates / notices yellow.
   ===================================================================================================== */

/* notice at the top of every account page (payment failed / site paused / cancelled / ended) — yellow */
.acc-alert { display: flex; align-items: flex-start; gap: 20px; padding: 32px 40px; background: var(--accent); }
.acc-alert[hidden] { display: none; }
.acc-alert__icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; background: var(--black); color: var(--accent); }
.acc-alert__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.acc-alert__title { font-size: 20px; line-height: 1.2; }
.acc-alert__sub { font-size: 16px; line-height: 1.5; }
/* inline links in plates and cards («напишіть нам», 13.10): underlined like .acc-table a / .acc-sec__note a */
.acc-alert__sub a, .set-card__lines a { color: var(--black); text-decoration: underline; text-underline-offset: 4px; }
.acc-alert__actions { flex: none; align-self: center; display: flex; flex-wrap: wrap; gap: 12px; }
/* secondary buttons on the yellow notice stay the system's grey #d9d9d9 (12.10, user: the yellow is only for plates —
   a translucent grey over #ff0 looked yellowish) — the plain .cbtn--grey, no override here */
/* status plate on «Мій сайт» when the site is not working: hollow square, no pulse */
.acc-live.is-off i { animation: none; background: transparent; box-shadow: inset 0 0 0 1.5px var(--black); }

/* ---------- statistics (account.html) ---------- */
.acc-stats { display: flex; flex-direction: column; gap: 32px; padding: 40px; background: var(--grey-bg); }
.acc-stats__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.acc-stats__title { font-size: 20px; line-height: 1.2; }
.acc-stats__period { font-size: 14px; line-height: 1.35; color: var(--grey-text); }
.acc-stats__nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; }
.acc-stats__nums div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acc-stats__nums dt { font-size: 14px; line-height: 1.35; color: var(--grey-text); }
.acc-stats__nums dd { margin: 0; font-size: var(--fs-price); line-height: 1.1; overflow-wrap: anywhere; }
.acc-stats__nums small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--grey-text); }
.acc-stats__chart { display: flex; flex-direction: column; gap: 12px; }
.acc-stats__bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.acc-stats__bars span { position: relative; flex: 1 1 0; min-width: 0; background: #d9d9d9; }
.acc-stats__bars span i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--black); }
.acc-stats__legend { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; line-height: 1.35; color: var(--grey-text); }
.acc-stats__legend span { display: inline-flex; align-items: center; gap: 8px; }
.acc-stats__legend span::before { content: ""; width: 12px; height: 12px; background: #d9d9d9; }
.acc-stats__legend span:last-child::before { background: var(--black); }
.acc-stats__note { font-size: 14px; line-height: 1.5; color: var(--grey-text); }

/* ---------- cancel flow (account-billing.html) ---------- */
.acc-cancel { display: flex; flex-direction: column; gap: 24px; padding: 40px; background: var(--grey-bg); }
.acc-cancel[hidden] { display: none; }
.acc-cancel__title { font-size: 20px; line-height: 1.2; }
.acc-timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.acc-timeline li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 0 20px 32px; }
.acc-timeline li:last-child { padding-bottom: 0; }
.acc-timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; background: var(--black); }
.acc-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 5.25px; top: 22px; bottom: 4px; width: 1.5px; background: var(--grey-soft); }
.acc-timeline b { font-weight: 400; font-size: 16px; line-height: 1.35; }
.acc-timeline span { font-size: 16px; line-height: 1.5; color: var(--grey-text); }
.acc-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-reasons .ob-chip, .team-svcs .ob-chip, .team-form .ob-chips .ob-chip { background: var(--white); }
.acc-reasons .ob-chip, .team-svcs .ob-chip { height: 44px; padding: 0 18px; }
.acc-reasons .ob-chip[aria-pressed="true"], .team-svcs .ob-chip[aria-pressed="true"], .team-form .ob-chips .ob-chip[aria-pressed="true"] { background: var(--black); }
.acc-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 20px 24px; background: var(--accent); font-size: 16px; line-height: 1.5; }
.acc-offer[hidden] { display: none; }
.acc-offer span { flex: 1 1 260px; }
.acc-offer .cbtn--grey { background: rgba(0, 0, 0, .08); }
.acc-paid--due { border-color: #c4320a; color: #c4320a; }
.acc-table a { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- team / several masters (account-team.html) ---------- */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.team-card { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 40px; background: var(--grey-bg); }
.team-card__head { display: flex; align-items: flex-start; gap: 16px; }
.team-card__ava { flex: none; display: grid; place-items: center; width: 52px; height: 52px; background: var(--black); color: var(--white); font-size: 20px; }
.team-card__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.team-card__name { font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.team-card__role { font-size: 16px; line-height: 1.35; color: var(--grey-text); }
.team-card__lines { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 0 0 68px; list-style: none; font-size: 16px; line-height: 1.5; color: var(--grey-text); }
.team-card__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding: 16px 0 0 68px; border-top: 1px solid var(--grey-soft); font-size: 16px; line-height: 1.35; }
/* «Додати майстра»: the content centred in the card (12.10, user: «краще відцентрувати у картці контент») */
.team-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 240px; padding: 40px; border: 1px dashed var(--grey-soft); font-size: 16px; line-height: 1.5; color: var(--grey-text); text-align: center; text-wrap: balance; transition: border-color .2s, background-color .2s; }
.team-add:hover { border-color: var(--black); background: var(--grey-bg); }
.team-add b { display: inline-flex; align-items: center; gap: 10px; font-weight: 400; font-size: 20px; color: var(--black); }
.team-form { display: flex; flex-direction: column; gap: 24px; padding: 40px; background: var(--grey-bg); }
.team-form[hidden] { display: none; }
.team-form__title { font-size: var(--fs-l); line-height: 1.1; }
.team-svcs { display: flex; flex-wrap: wrap; gap: 8px; }
.team-form__error { min-height: 1.35em; margin-top: -8px; font-size: 14px; line-height: 1.35; color: #c4320a; }

/* bookings: master filter + one column per master on the timeline */
.bk-who { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-who .ob-chip { height: 44px; padding: 0 18px; }
.bk-cols { display: flex; gap: 8px; margin: 0 8px 4px 80px; }
.bk-cols:empty { display: none; }
.bk-cols span { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.35; color: var(--grey-text); }
.bk-ev__who { color: var(--grey-text); }
/* a day off / holiday in the bookings = notice → yellow */
.bk-off { padding: 20px 24px; background: var(--accent); font-size: 16px; line-height: 1.5; }
.bk-off[hidden] { display: none; }

/* ---------- days off & holidays (account-settings.html) ---------- */
.set-card--wide { grid-column: 1 / -1; }
.off-list { display: flex; flex-direction: column; margin: 0 0 0 68px; padding: 0; list-style: none; }
.off-item { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--grey-soft); }
.off-item:first-child { border-top: 0; padding-top: 0; }
.off-item__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.off-item__when { font-size: 16px; line-height: 1.35; }
.off-item__sub { font-size: 14px; line-height: 1.5; color: var(--grey-text); }
.off-item__warn { display: inline-flex; align-self: flex-start; margin-top: 6px; padding: 4px 10px; background: var(--accent); font-size: 14px; line-height: 1.35; }
.off-empty { margin-left: 68px; font-size: 16px; line-height: 1.5; color: var(--grey-text); }
.off-form { display: flex; flex-direction: column; gap: 20px; margin-left: 68px; padding-top: 20px; border-top: 1px solid var(--grey-soft); }
.off-form[hidden] { display: none; }
.off-form .ob-input, .off-form .ob-select { height: 56px; }
.off-form__error { min-height: 1.35em; margin-top: -8px; font-size: 14px; line-height: 1.35; color: #c4320a; }
.set-card__plus { margin-left: 68px; align-self: flex-start; }
.set-card__plus[hidden] { display: none; }

/* ---------- template change (account-template.html) ---------- */
.swap { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 20px; align-items: center; padding: 40px; background: var(--grey-bg); }
.swap__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.swap__label { font-size: 14px; line-height: 1.35; color: var(--grey-text); }
.swap__name { font-size: 20px; line-height: 1.2; }
.swap__side .browser__screen { height: calc(900px * var(--k)); }   /* 1440 × 900 (06.10) */
.swap__side .browser__screen iframe { width: 1440px; height: 900px; }
.swap__ph { aspect-ratio: 1440 / 900; background: #e6e4e0; }
.swap__arrow { display: grid; place-items: center; }
.swap-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; margin: 0; padding: 0; list-style: none; }
.swap-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--grey-text); }
.swap-list svg { flex: none; margin-top: 2px; color: var(--black); }
.swap-list b { font-weight: 400; color: var(--black); }
.acc-done-plate { padding: 16px 20px; background: var(--accent); font-size: 16px; line-height: 1.5; }
.acc-done-plate[hidden] { display: none; }
.acc-done-plate a, .acc-done-plate button { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- profile: your data (GDPR) ---------- */
.acc-danger { display: flex; flex-direction: column; gap: 20px; padding: 40px; background: #f8e3dc; }
.acc-danger[hidden] { display: none; }
.acc-danger__title { font-size: 20px; line-height: 1.2; color: #c4320a; }
.acc-danger .acc-timeline li::before { background: #c4320a; }
.acc-danger .acc-timeline span { color: var(--black); }

@media (max-width: 1100px) {
  .acc-stats__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .team { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .acc-nav__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .acc-alert { flex-wrap: wrap; gap: 16px; padding: 24px; }
  .acc-alert__icon { width: 44px; height: 44px; }
  .acc-alert__text { flex-basis: calc(100% - 60px); }
  .acc-alert__title { font-size: 18px; }
  .acc-alert__actions, .acc-alert__actions .cbtn { width: 100%; }
  .acc-stats { padding: 24px; gap: 24px; }
  .acc-stats__nums dd { font-size: 26px; }
  .acc-stats__bars { height: 90px; gap: 2px; }
  .acc-cancel { padding: 24px; }
  .acc-offer .cbtn { width: 100%; }
  .team-card, .team-form, .team-add { padding: 24px; }
  .team-add { min-height: 0; }
  .team-card__lines, .team-card__row { padding-left: 0; }
  .team-form__title { font-size: 22px; }
  .bk-who { flex-wrap: nowrap; overflow-x: auto; }
  .bk-who .ob-chip { flex: none; }
  .off-list, .off-empty, .off-form, .set-card__plus { margin-left: 0; }
  .off-item { flex-wrap: wrap; }
  .swap { grid-template-columns: 1fr; padding: 24px; }
  .swap__arrow { transform: rotate(90deg); }
  .swap-list { grid-template-columns: 1fr; }
  .acc-danger { padding: 24px; }
}

/* misc for the model blocks */
.ob-field[hidden], .bk-drawer__facts div[hidden], .acc-sec .ob-grid-2[hidden] { display: none; }
.acc-err { min-height: 1.35em; margin-top: -8px; font-size: 14px; line-height: 1.35; color: #c4320a; }
/* 16.10: an info plate inside a cabinet card — yellow, never a button (user rule 03.10) */
.acc-plate { padding: 12px 16px; background: var(--accent); font-size: 14px; line-height: 1.5; }
.acc-plate[hidden] { display: none; }
.acc-plate a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }   /* 19.10: «Змінити в профілі» */
/* 19.10: «Онлайн-оплата» → where the prices and each service's payment are set (the editor's «Послуги й ціни») */
.pay-svc { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; font-size: 16px; }
.pay-svc[hidden] { display: none; }
.pay-svc__text { margin: 0; }
.acc-plate .pay-svc__go { flex: none; color: var(--white); text-decoration: none; }
@media (max-width: 900px) { .pay-svc { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; } }
.acc-sec__note a { color: var(--black); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .bk-cols { display: none; } }

/* inside account pages [hidden] always hides — buttons and grids set their own display (03.10) */
.acc-body [hidden] { display: none !important; }

/* the notice in the narrow account column: buttons go under the text (03.10) */
.acc-alert { flex-wrap: wrap; }
.acc-alert__text { flex: 1 1 360px; }
.acc-solo .acc-alert__actions { margin-left: 72px; }
@media (max-width: 900px) { .acc-solo .acc-alert__actions { margin-left: 0; } }

/* a new account with no site yet (06.10): the call to make the first site, in the main area — grey block like the others */
.acc-first { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 60px 40px; background: var(--grey-bg); }
.acc-first[hidden] { display: none; }
.acc-first__kicker { padding: 6px 12px; background: var(--accent); font-size: 14px; line-height: 1.35; }
.acc-first__title { max-width: 760px; font-size: var(--fs-xl); line-height: 1.1; }
.acc-first__lead { max-width: 640px; font-size: 18px; line-height: 1.65; color: var(--grey-text); }
/* the way to a site (06.10): black circles with the step number joined by a solid line that touches them, the text
   under each; ≤1100 — vertical */
.acc-first__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100%; margin: 16px 0 0; padding: 0; list-style: none; }
.acc-first__steps li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.acc-first__steps li:not(:last-child)::after {           /* the path: from this circle to the next one */
  content: "";
  position: absolute;
  top: 24px;
  left: 48px;                                            /* right up to both circles (06.10, user), solid */
  right: -24px;
  border-top: 1px solid var(--black);
}
.acc-first__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--black);                              /* black, no border (06.10, user: yellow → yellow + border → black) */
  color: var(--white);
  font-size: 16px;
  line-height: 1;
}
.acc-first__step { display: flex; flex-direction: column; gap: 6px; font-size: 20px; line-height: 1.35; }
.acc-first__step span { font-size: 14px; line-height: 1.5; color: var(--grey-text); }
.acc-first__go { gap: 10px; margin-top: 8px; }
.acc-main.is-empty > :not(.acc-first) { display: none; }

/* «Підписка й оплата» with no subscription yet (06.10): the same grey block + the two plans to look at (not to pick) */
.acc-solo.is-nosub > .acc-sec, .acc-solo.is-nosub > .acc-done-plate { display: none; }
.acc-nosub__plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 820px; margin-top: 8px; }
.acc-nosub__plan { display: flex; flex-direction: column; gap: 10px; padding: 28px; background: var(--white); }
.acc-nosub__name { font-size: 20px; line-height: 1.35; }
.acc-nosub__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 16px; line-height: 1.35; color: var(--grey-text); }   /* «15,8 € / міс 190 € за рік» like .pick__price (13.10) */
.acc-nosub__price b { font-weight: 400; font-size: var(--fs-price); line-height: 1.1; color: var(--black); }
.acc-nosub__desc { font-size: 14px; line-height: 1.5; color: var(--grey-text); }
.acc-nosub__note { max-width: 640px; font-size: 14px; line-height: 1.5; color: var(--grey-text); }
@media (max-width: 700px) { .acc-nosub__plans { grid-template-columns: 1fr; } .acc-nosub__plan { padding: 24px; } }
@media (max-width: 1100px) {
  .acc-first__steps { grid-template-columns: 1fr; gap: 40px; }
  .acc-first__steps li { flex-direction: row; align-items: flex-start; gap: 20px; }
  .acc-first__steps li:not(:last-child)::after { top: 48px; left: 24px; right: auto; bottom: -40px; border-top: 0; border-left: 1px solid var(--black); }
}
@media (max-width: 900px) {
  .acc-first { padding: 40px 24px; }
  .acc-first__title { font-size: 32px; }
  .acc-first__lead { font-size: 16px; }
  .acc-first__go { width: 100%; justify-content: center; }
}

/* ---- «Налаштування записів» (account-booking-settings.html, 14.10): no Figma frame — the cabinet's own blocks ---- */
.bks { display: flex; flex-direction: column; gap: 60px; }
.bks[hidden] { display: none; }
.bks-masters, .bks-qs { display: flex; flex-direction: column; gap: 20px; }
.bks-masters:empty, .bks-qs:empty { display: none; }
.bks-m { display: flex; flex-direction: column; gap: 24px; padding: 40px; background: var(--grey-bg); }
.bks-m__head { display: flex; align-items: flex-end; gap: 16px; }
.bks-m__name { flex: 1 1 auto; min-width: 0; }
.bks-m__del { flex: none; height: 64px; padding: 0 24px; }
.bks-m__link { margin: -12px 0 0; font-size: 14px; line-height: 1.5; color: var(--grey-text); }
.bks-m__link[hidden] { display: none; }
.bks-m .ob-chip { background: var(--white); }
.bks-m .ob-chip[aria-pressed="true"] { background: var(--black); }
.bks-m__svcs { display: flex; flex-wrap: wrap; }
.bks-m__svcs .ob-chip { width: auto; padding: 0 16px; }
.bks-m .ob-error { margin: 0; }
.bks-fields { display: flex; flex-direction: column; }
.pay-rules { display: flex; flex-direction: column; gap: 24px; }   /* 18.10 «Онлайн-оплата»: the rules note + one field per site language */
.pay-rules[hidden] { display: none; }
.bks-f { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--grey-soft); font-size: 16px; line-height: 1.4; }
.bks-f:first-child { border-top: 1px solid var(--grey-soft); }
.bks-f__name { flex: 1 1 auto; min-width: 0; }
.bks-f__fixed { font-size: 14px; color: var(--grey-text); }
.bks-f .ob-switch:disabled { opacity: .45; cursor: default; }
.bks-q { display: flex; flex-direction: column; gap: 12px; padding: 40px; background: var(--grey-bg); }
.bks-q__line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.bks-q__line .ob-select { width: 220px; }
.bks-q .ed-req { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer; }
.bks-q .ed-check { width: 20px; height: 20px; margin: 0; accent-color: var(--black); }
.bks-q__del { height: 44px; padding: 0 20px; margin-left: auto; }
.bks-status { min-height: 1.5em; margin: 0; font-size: 16px; line-height: 1.5; color: var(--grey-text); }
@media (max-width: 900px) {
  .bks { gap: 40px; }
  .bks-m, .bks-q { padding: 24px; }
  .bks-m__head { flex-direction: column; align-items: stretch; }
  .bks-m__del { height: 50px; }
  .bks-q__line .ob-select { width: 100%; }
  .bks-q__del { margin-left: 0; }
}
.bks-m__on { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 16px; line-height: 1.4; }
/* days off inside «Налаштування записів» (14.10): the settings card's list / form without its 68 px icon indent */
.bks-off { display: flex; flex-direction: column; gap: 16px; }
.bks-off .off-list, .bks-off .off-empty, .bks-off .off-form { margin-left: 0; }
.bks-off__add { align-self: flex-start; height: 44px; padding: 0 20px; }
.bks-off__add[hidden] { display: none; }
/* «Крок запису» + a master's «Проміжок / Свій час» (14.10): chips of the cabinet, own start times as a chip grid + a field */
/* 15.10 (user: «таби в один рядок, не переносити, там же вистачає місця»): one row of chips as wide as their words; on a
   narrow phone the row scrolls sideways rather than breaking */
.bks-step { display: flex; flex-wrap: nowrap; gap: 8px; max-width: none; overflow-x: auto; scrollbar-width: none; }
.bks-step::-webkit-scrollbar { display: none; }
.bks-step .ob-chip { flex: none; padding: 0 22px; white-space: nowrap; }
@media (max-width: 600px) {
  .bks-step { gap: 4px; }
  .bks-step .ob-chip { flex: 1 1 auto; padding: 0 8px; font-size: 14px; }
}
.bks-hmode { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 400px; }
.bks-m .ob-range[hidden], .bks-times[hidden] { display: none; }
.bks-times { display: flex; flex-direction: column; gap: 16px; }
/* a master's «Перерви» (14.10): rows «з … до …» like the hours + a trash icon, a grey «+ Додати перерву» */
.bks-br[hidden], .bks-br__add[hidden] { display: none; }
.bks-br__list { display: flex; flex-direction: column; gap: 12px; }
.bks-br__list:empty { display: none; }
.bks-br__row .ob-icon { flex: none; }
.bks-br__add { align-self: flex-start; height: 44px; padding: 0 20px; }
.bks-times__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.bks-times__grid .ob-chip { width: 72px; height: 44px; padding: 0; font-size: 16px; }
.bks-times__add { display: flex; gap: 12px; }
.bks-times__in.ob-input { width: 160px; }
.bks-times__btn { flex: none; height: 64px; padding: 0 24px; }
@media (max-width: 900px) {
  .bks-step, .bks-hmode { max-width: none; }
  .bks-times__grid .ob-chip { width: calc((100% - 24px) / 4); }
  .bks-times__in.ob-input { flex: 1 1 0; width: auto; }
  .bks-times__btn { height: 60px; }
}
@media (max-width: 900px) { .bks-off__add, .bks-br__add { align-self: stretch; } }
/* a break row on the phone: two selects + the trash icon in 350 px (tighter gaps / select padding, 36 px icon) */
@media (max-width: 900px) {
  .bks-br__row { gap: 8px; }
  .bks-br__row .ob-select { padding: 0 32px 0 12px; background-position: right 10px center; }
  .bks-br__row .ob-icon { width: 36px; }
}

/* ---- «Звернення» (account-messages.html, 14.10): the cabinet's grey blocks ---- */
.acc-nav__count[hidden] { display: none; }
.msgs { display: flex; flex-direction: column; gap: 20px; }
.msgs:empty { display: none; }
.msg { display: flex; flex-direction: column; gap: 12px; padding: 40px; background: var(--grey-bg); }
.msg__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.msg__name { font-size: 20px; line-height: 1.2; }
.msg__when { margin-left: auto; font-size: 14px; color: var(--grey-text); }
.msg__contacts { margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.msg__contacts:empty { display: none; }
.msg__contacts a { color: var(--black); text-decoration: underline; text-underline-offset: 4px; }
.msg__text { margin: 0; font-size: 16px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.msg__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.msg__btn { height: 44px; padding: 0 20px; }
.msgs-empty[hidden] { display: none; }
@media (max-width: 900px) {
  .msg { padding: 24px; }
  .msg__when { margin-left: 0; flex-basis: 100%; }
  .msg__btn { flex: 1 1 100%; }
}

/* 15.10 (user: «сайдбар розширити на ширину найдовшого рядка меню»): the menu is as wide as its longest item on one line
   («Налаштування записів» wrapped into two); the site switcher and the mini footer don't widen it (a long site name still
   ends in «…»); folded it stays the 88 px rail */
@media (min-width: 901px) {
  .acc { interpolate-size: allow-keywords; }            /* the fold still animates where the browser can */
  .acc-nav { width: max-content; min-width: 260px; max-width: 380px; }
  .acc-nav__item > span:first-of-type { white-space: nowrap; }
  .acc-sites, .acc-foot { width: 0; min-width: 100%; }
  .acc.is-folded .acc-nav { width: 88px; min-width: 0; }
}