/* ===========================================================
   Dashboard · hi-fi · Запиши меня
   Палитра в духе референса: dusty mauve, cream, soft pink, beige
   =========================================================== */
:root {
  /* Background plane (the page itself) */
  --bg: #efe9e3;

  /* Surfaces */
  --surface: #ffffff;
  --surface-soft: #faf5f0;
  --surface-sunken: #f3ece5;

  /* Ink */
  --ink: #2a2226;
  --ink-2: #6e5d62;
  --ink-3: #776f78;  /* WCAG AA: 4.85:1 on white, 4.55:1 on cream surface */
  --ink-faint: #c9bdc1;

  /* Primary — dusty mauve / rose */
  --rose: #9d5a6c;
  --rose-hi: #b97a8c;
  --rose-soft: #e6d2d8;
  --rose-softer: #f3e4e8;

  /* Warm cream / beige (secondary accent for bookings) */
  --cream: #ecd7b8;
  --cream-soft: #f7ead4;
  --beige: #d8c0a3;

  /* Lines / dividers */
  --line: #ece5dd;
  --line-2: #e2d8cf;

  /* Status */
  --good: #6b8a6d;
  --good-soft: #d8e2d4;
  --warn: #b88753;
  --warn-soft: #f1e3cd;
  /* Danger: deliberately a clearer, more saturated red than the brand mauve
     --rose (#9d5a6c). They used to sit close in hue/lightness, so destructive
     actions read as ordinary brand buttons (design-audit P7-LIVE #4). Tunable. */
  --bad: #bb3a2a;
  --bad-soft: #f2dad5;

  /* Radii / shadows */
  --r-lg: 22px;
  --r: 16px;
  --r-sm: 10px;
  --r-pill: 999px;
  --shadow-card: 0 2px 16px rgba(40, 25, 30, 0.04);
  --shadow-detail: 0 6px 28px rgba(40, 25, 30, 0.06);
  --shadow-lift: 0 8px 32px rgba(40, 25, 30, 0.08);

  --font: "Manrope", "Helvetica Neue", system-ui, sans-serif;
  --font-display: "Fraunces"; /* not used — we stay sans for strictness */

  /* Compatibility aliases. These tokens are referenced across this sheet and
     the templates but were never declared, so var() silently fell back to an
     invalid value: --ink-1 → inherited (often black) text, --r-md/--border →
     collapsed radius / currentColor border, --ok → the bright forest-green
     literal fallback instead of the muted brand green. Map them onto the
     canonical tokens so those usages render as intended. */
  --ink-1: var(--ink);       /* primary ink (the "-1" step) */
  --r-md: var(--r);          /* medium radius == base radius */
  --border: var(--line);     /* default border colour */
  --ok: var(--good);         /* success status == brand "good" */
  --db-border: var(--line);  /* admin tables fell back to off-brand cold grey */
  --db-muted: var(--ink-3);  /* admin muted text → brand AA-contrast muted */
  --rose-mid: var(--rose);   /* referenced on hover; keep identical to --rose */

  /* Type scale (visual-design) — converge the sheet's ad-hoc 8.5–56px sizes
     onto these eight steps; --fs-sm is the body workhorse. Additive: nothing
     references them yet, adoption is incremental. */
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  17px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;

  /* Spacing scale (4px base) — use instead of magic px in margin/padding/gap. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* Extra brand tints (currently hardcoded as literals across the sheet). */
  --rose-deep: #84485b;  /* darker rose used in gradients / active borders */
  --on-rose: #ffffff;    /* text/icons on rose or ink fills */

  /* Motion tokens (redesign port 2026-06-21). Ported redesign components
     reference these; they were undeclared, so var() fell back to nothing.
     Additive — existing rules keep their literal durations until migrated. */
  --dur: 0.2s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);  /* ease-out, no overshoot */
}

/* Tabular numerals utility — aligns money / times / counts so columns scan.
   The sheet already uses font-variant-numeric inline in many .db-* rules; this
   is the shared handle the redesign templates lean on. */
.tnum { font-variant-numeric: tabular-nums; }

/* Honour the OS "reduce motion" setting (a11y): near-instant transitions and
   animations. The public master.css already does this; mirror it for the
   cabinet, which has toggles, hover-lifts and reveal transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
}

/* Full-bleed app shell — fills the whole viewport edge-to-edge (no floating
   framed card). Header + nav stay put; the main column scrolls internally.
   Released on ≤1100px where the detail panel reflows to a bottom row. */
.db-screen {
  --nav-w: 220px;  /* nav column width; collapse toggles it to 64px (see .is-nav-collapsed) */
  width: 100%;
  background: var(--surface-soft);
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--nav-w) 1fr 360px;
  grid-template-rows: 72px 1fr;
  height: 100vh;
  height: 100dvh;  /* dynamic vh: avoids the iOS Safari toolbar clip */
}

/* ─────────────────────────────────────────
   HEADER
   ───────────────────────────────────────── */
.db-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--nav-w) 1fr 360px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
.db-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: var(--space-5);
}
.db-brand-mark {
  width: 38px; height: 38px;
  background: url("/static/brand-mark.png") no-repeat center / contain;
  flex-shrink: 0;
}
.db-brand-name {
  font-weight: 800;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  white-space: nowrap;   /* never wrap the brand into the bell on a tight header */
}
.db-head-center {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--space-5);
}
.db-page-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.db-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: var(--space-5);
  justify-content: flex-end;
}
/* Compact "Telegram not linked" alert, pinned to the right of the header next
   to the logout button (moved out of the dashboard body). */
.db-head-alert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--warn);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.db-head-alert:hover { text-decoration: underline; }
.db-head-alert svg { width: 14px; height: 14px; }

/* Account dropdown (name + avatar → Settings / Logout). Pure <details>/<summary>
   so it needs no JS. */
.db-acct { position: relative; }
.db-acct > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  cursor: pointer;
  color: var(--ink-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
.db-acct > summary::-webkit-details-marker { display: none; }
.db-acct > summary:hover { background: var(--surface-sunken); }
.db-acct-avatar {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--rose-softer);
  color: var(--rose);
  flex-shrink: 0;
}
.db-acct-avatar svg { width: 15px; height: 15px; }
/* When the avatar carries the tariff crest (owner request) drop the rose disc so
   the honeycomb logo reads on its own. */
.db-acct-avatar.is-tariff { background: transparent; }
.db-acct-avatar.is-tariff img { width: 24px; height: 24px; display: block; }
.db-acct-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-acct-caret { color: var(--ink-3); font-size: var(--fs-2xs); }
.db-acct-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 6px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.db-acct-item {
  display: flex;
  align-items: center;
  /* <button> defaults to centered flex content in Chrome; force start so the
     logout button lines up left with the <a> items (settings/profile). */
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  color: var(--ink-1);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.db-acct-item:hover { background: var(--surface-sunken); }
.db-acct-item svg { width: 16px; height: 16px; color: var(--ink-3); }
.db-acct-menu form { margin: 0; }

/* Topbar language switcher (redesign port PB-PORT-4) — rides on .db-acct. */
.db-lang > summary svg { width: 16px; height: 16px; color: var(--ink-3); }
.db-lang .db-acct-menu { min-width: 160px; }
.db-lang .db-acct-item[aria-current="true"] { color: var(--rose); font-weight: 700; }

/* ============================================================
   «Сегодня» — agenda-first day view (redesign port, Фаза 2)
   ============================================================ */
.tg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  flex-wrap: wrap; margin-bottom: var(--space-4); }
.tg-date { font-weight: 700; color: var(--ink-2); font-size: var(--fs-md); }

.tg-confirm { border-color: #e6cba0; padding: 0; overflow: hidden; margin-bottom: var(--space-4); }
.tg-confirm-hd { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  background: var(--warn-soft); color: #8a6435; font-weight: 800; font-size: var(--fs-md);
  border-bottom: 1px solid #e6cba0; }
.tg-confirm-hd svg { width: 18px; height: 18px; }
.tg-confirm-list { list-style: none; margin: 0; padding: 0; }
.tg-confirm-list li { border-bottom: 1px solid var(--line); }
.tg-confirm-list li:last-child { border-bottom: 0; }
.tg-confirm-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  color: var(--ink); text-decoration: none; flex-wrap: wrap; }
.tg-confirm-row:hover { background: var(--surface-soft); }
.tg-confirm-when { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); min-width: 118px; }
.tg-confirm-main { flex: 1; min-width: 160px; }
.tg-confirm-cta { font-size: var(--fs-xs); font-weight: 700; color: var(--rose); white-space: nowrap; }

.tg-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.tg-slot { padding: var(--space-5); }
.tg-slot--now { border-color: var(--rose-soft);
  background: radial-gradient(120% 120% at 100% 0%, var(--rose-softer) 0%, transparent 60%), var(--surface); }
.tg-slot-tag { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); }
.tg-slot--now .tg-slot-tag { color: var(--rose-deep); }
.tg-slot-time { margin: var(--space-3) 0 var(--space-1); font-size: var(--fs-md); color: var(--ink-2); font-weight: 600; }
.tg-slot-client { display: inline-block; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; }
.tg-slot-client:hover { color: var(--rose-deep); text-decoration: underline; text-underline-offset: 3px; }
.tg-slot-svc { margin-top: var(--space-2); font-size: var(--fs-md); color: var(--ink-2); }
.tg-slot-none { padding: var(--space-4) 0; font-size: var(--fs-md); }

.tg-agenda-card { padding: 0; overflow: hidden; margin-bottom: var(--space-4); }
.tg-agenda-hd { margin: 0; padding: var(--space-4) var(--space-5); font-size: var(--fs-2xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.tg-agenda { list-style: none; margin: 0; padding: 0; }
.tg-agenda li { border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
.tg-agenda li:last-child { border-bottom: 0; }
.tg-agenda li.is-now { border-left-color: var(--rose); background: var(--rose-softer); }
.tg-agenda li.is-past { opacity: .66; }
.tg-row { display: grid; grid-template-columns: 84px 1fr auto auto; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5); text-decoration: none; color: var(--ink); }
.tg-row:hover { background: var(--surface-soft); }
.tg-row-time { font-weight: 700; font-size: var(--fs-sm); }
.tg-row-time small { display: block; font-weight: 500; color: var(--ink-3); font-size: var(--fs-xs); }
.tg-row-main { min-width: 0; }
.tg-row-client { font-weight: 700; font-size: var(--fs-md); display: flex; align-items: center; gap: var(--space-2); }
.tg-row-svc { display: block; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-row-price { font-weight: 800; font-size: var(--fs-md); white-space: nowrap; }
.tg-empty { padding: var(--space-5); text-align: center; }

.tg-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.tg-kpi { padding: var(--space-4) var(--space-5); }
.tg-kpi-l { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); margin-bottom: 6px; }
.tg-kpi-v { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; }

@media (max-width: 860px) {
  /* minmax(0,…) lets the columns shrink below their content min-content, so the
     KPI tiles / hero cards fit the phone width instead of forcing .db-page wider
     than the viewport (which clipped «Новая запись» and the cards). */
  .tg-hero { grid-template-columns: minmax(0, 1fr); }
  .tg-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tg-row { grid-template-columns: 72px 1fr; row-gap: var(--space-1); }
  .tg-row-price { grid-column: 2; justify-self: start; }
  .tg-row .db-tag { grid-column: 1 / -1; justify-self: start; }
}

/* Public-page URL shown in the page editor — clickable, monospace. */
.db-page-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-sm);
  color: var(--rose);
  text-decoration: none;
}
.db-page-url:hover { text-decoration: underline; }

/* Notification bell (header, left of the tariff crest) */
.db-notif { position: relative; }
.db-notif > summary {
  list-style: none;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  color: var(--ink-2);
}
.db-notif > summary::-webkit-details-marker { display: none; }
.db-notif > summary:hover { background: var(--surface-sunken); color: var(--ink-1); }
.db-notif > summary svg { width: 17px; height: 17px; }
.db-notif-badge-slot { position: absolute; top: -3px; right: -3px; }
.db-notif-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 var(--space-1);
  border-radius: 999px;
  background: var(--rose); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  border: 2px solid var(--surface);
}
.db-notif-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  width: 320px; max-width: 86vw;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 6px;
  z-index: 50;
  max-height: 70vh; overflow-y: auto;
}
.db-notif-head {
  padding: 6px var(--space-2) var(--space-2);
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-3);
}
.db-notif-list { list-style: none; margin: 0; padding: 0; }
.db-notif-link {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink-1);
}
.db-notif-link:hover { background: var(--surface-sunken); }
.db-notif-item.is-unread .db-notif-link { background: var(--rose-softer); }
.db-notif-ic {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-sunken); color: var(--ink-2);
}
.db-notif-ic svg { width: 16px; height: 16px; }
.db-notif-ic-review { background: var(--rose-softer); color: var(--rose); }
.db-notif-ic-email { background: var(--rose-softer); color: var(--rose); }
.db-notif-ic-birthday { background: var(--rose-softer); color: var(--rose); }
.db-notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.db-notif-title { font-size: var(--fs-sm); font-weight: 600; }
.db-notif-sub {
  font-size: var(--fs-xs); color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.db-notif-when { flex-shrink: 0; font-size: var(--fs-2xs); color: var(--ink-3); }
.db-notif-empty { padding: 18px 10px; text-align: center; color: var(--ink-3); font-size: var(--fs-sm); }

/* Icon buttons */
.db-icon-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  color: var(--ink-2);
}
.db-icon-btn svg { width: 16px; height: 16px; }
.db-icon-btn .db-dot {
  position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px;
  background: var(--rose);
  border-radius: 50%;
  border: 2px solid var(--surface);
}
.db-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-soft), var(--cream-soft));
  overflow: hidden;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rose);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────
   LEFT NAV
   ───────────────────────────────────────── */
.db-nav {
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border-right: 1px solid var(--line);
  overflow: auto;
}
.db-nav-section {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  padding: 14px var(--space-3) 6px;
  font-weight: 600;
}
.db-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
  transition: background 120ms;
}
.db-nav-item:hover { background: var(--surface-sunken); }
.db-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.db-nav-item.is-active {
  background: var(--rose);
  color: #fff;
  font-weight: 600;
}
.db-nav-item .db-badge {
  margin-left: auto;
  background: var(--rose-soft);
  color: var(--rose);
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 2px var(--space-2);
  border-radius: var(--r-pill);
}
.db-nav-item.is-active .db-badge { background: rgba(255,255,255,0.25); color: #fff; }

/* ── Collapsible sidebar (icon rail) ──────────────────────────────────────
   A toggle narrows the nav to a 64px icon rail; state persists in localStorage
   (restored before paint, see cabinet_base). Desktop only — under 860px the nav
   already collapses to the horizontal bar, so the toggle is hidden there. */
.db-nav-collapse {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  background: none; border: 0; cursor: pointer; color: var(--ink-3);
  font-size: var(--fs-xs); font-weight: 600; padding: 2px var(--space-3) 8px;
}
.db-nav-collapse:hover { color: var(--rose); }
.db-nav-collapse svg { width: 18px; height: 18px; }
/* Collapse only narrows the nav column via --nav-w (every shell grid references
   it), so it shrinks on ALL desktop/tablet layouts — detail, no-detail and the
   ≤1100 reflow — without per-variant grid overrides. Scoped to >860px: below
   that the nav is a horizontal strip and the toggle is hidden, so a persisted
   collapsed state must not touch the stacked mobile grid. */
@media (min-width: 861px) {
  .db-screen.is-nav-collapsed { --nav-w: 64px; }
  .db-screen.is-nav-collapsed .db-brand-name { display: none; }
  .db-screen.is-nav-collapsed .db-brand { padding-left: 0; justify-content: center; }
  .db-screen.is-nav-collapsed .db-nav-item > span:not(.db-notif-badge),
  .db-screen.is-nav-collapsed .db-nav-section,
  .db-screen.is-nav-collapsed .db-nav-foot,
  .db-screen.is-nav-collapsed .db-nav-collapse span { display: none; }
  .db-screen.is-nav-collapsed .db-nav-item { justify-content: center; padding: 10px 0; }
  .db-screen.is-nav-collapsed .db-nav-collapse { justify-content: center; padding: 2px 0 8px; }
  /* Collapsed: flip the chevron to point RIGHT (it expands the panel); when
     expanded it stays pointing left next to the «Свернуть» label. */
  .db-screen.is-nav-collapsed .db-nav-collapse svg { transform: scaleX(-1); }
}
@media (max-width: 860px) { .db-nav-collapse { display: none; } }

.db-nav-foot {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
/* Plan crest pinned to the sidebar foot — visible on every cabinet page,
   links to /billing. */
a.db-nav-foot {
  text-decoration: none;
  align-items: flex-start;
  padding: var(--space-4) var(--space-3) 0;
}
a.db-nav-foot:hover .tariff-pill { filter: brightness(0.97); }
/* Enlarge the sidebar-foot plan crest ~2.5x — at 16px it was barely
   noticeable. Scoped to the foot so inline .tariff-pill on billing / admin /
   landing stay compact. Desktop-only anyway (foot hidden under 860px). */
a.db-nav-foot .tariff-pill {
  font-size: 16px;
  padding: 6px var(--space-3);
  gap: 9px;
  border-radius: 9px;
}
a.db-nav-foot .tariff-pill img {
  width: 40px;
  height: 40px;
}
.db-trial-badge {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-3);
  padding-left: 2px;
}

/* ─────────────────────────────────────────
   MAIN CENTER COLUMN
   ───────────────────────────────────────── */
.db-main {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  overflow: hidden;
}

.db-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 22px;
}
.db-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.db-card-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.db-card-sub {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: 2px;
}

/* Period selector */
.db-period {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-sunken);
  border-radius: var(--r-pill);
  padding: var(--space-1);
}
.db-period button {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 500;
}
.db-period button.is-active {
  background: var(--rose);
  color: #fff;
  font-weight: 600;
}

/* Mini button (calendar nav) */
.db-mini-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-2);
}
.db-mini-btn:hover { background: var(--surface-sunken); }
.db-mini-btn svg { width: 14px; height: 14px; }
/* Fullscreen toggle: the «maximize» corners read faint at 14px next to the ‹ ›
   glyphs — give this control a slightly larger, crisper icon. */
#cal-fs-btn svg { width: 17px; height: 17px; }

/* Calendar toolbar: give every control the same height so the row reads as one
   aligned band (segmented toggle · ‹ · Сегодня · › · ⛶ zoom · +). Without this
   the taller «Сегодня» button and the smaller round ‹ › sit at different
   heights and the icon buttons look misaligned. */
#cal-card .db-card-head .db-row > .db-btn,
#cal-card .db-card-head .db-row > .db-mini-btn,
#cal-card .db-card-head .db-row > .db-seg { height: 36px; margin: 0; }
/* The ⛶ zoom control is a <button>, so the legacy `button{margin-top:14px}`
   global pushed it ~7px below its <a> siblings — margin: 0 above re-aligns it. */
#cal-card .db-card-head .db-row > .db-mini-btn { width: 36px; }
#cal-card .db-card-head .db-row > .db-btn:not(.db-btn--icon) {
  padding-top: 0; padding-bottom: 0;
}
#cal-card .db-card-head .db-seg-btn { display: inline-flex; align-items: center; }

/* ─────────────────────────────────────────
   CALENDAR (week view)
   ───────────────────────────────────────── */
/* horizontal-scroll wrapper so the 7-day grid never overflows its card on
   narrow screens (mobile) — desktop is wider than min-width so it never
   scrolls there. Prevents the calendar from blowing out the layout. */
/* Full-height calendar — no inner vertical scrollbox ("окно в окне"); the grid
   sizes to its rows and the whole workspace scrolls as one. overflow-x:auto keeps
   a horizontal scroll only on narrow screens (preserves the responsive reflow);
   fixed-height rows + the "+N" badge stop a busy day from stretching the grid. */
/* ── week/month segmented toggle (PB-B8) ── */
.db-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.db-seg-btn {
  padding: 7px var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  text-decoration: none;
  line-height: 1.2;
}
.db-seg-btn + .db-seg-btn { border-left: 1px solid var(--line); }
.db-seg-btn:hover { background: var(--surface-sunken); }
.db-seg-btn.is-active { background: var(--rose); color: #fff; }

/* ── fullscreen calendar (PB-B8): card fills the viewport; Esc/⛶ exits ── */
body.cal-fs-open { overflow: hidden; }
.db-card.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  margin: 0;
  border-radius: 0;
  overflow: auto;
  background: var(--surface);
  padding: 18px;
}

/* ── month overview grid (PB-B8) ── */
.db-month {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.db-month-head,
.db-month-row {
  display: grid;
  /* minmax(0,1fr): every column stays exactly equal width no matter the booking
     text, so days never drift under the wrong weekday and the grid can't stretch
     to fit a chip (the cell clips instead — see .db-month-cell overflow). */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}
.db-month-wd {
  background: var(--surface-sunken);
  padding: 6px var(--space-1);
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-3);
}
.db-month-cell {
  background: var(--surface);
  min-height: 96px;
  padding: var(--space-1) 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;        /* allow the 1fr track to shrink below chip min-content */
  overflow: hidden;    /* clip long booking text rather than widen the column */
}
.db-month-cell[data-date] { cursor: pointer; }
.db-month-cell[data-date]:hover { background: var(--rose-softer); }
.db-month-cell.is-out { background: var(--surface-sunken); }
.db-month-cell.is-out .db-month-daynum { color: var(--ink-faint); }
.db-month-daynum {
  font-size: var(--fs-xs);
  font-weight: 700;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
}
.db-month-cell.is-today .db-month-daynum {
  background: var(--rose);
  color: #fff;
  border-radius: 999px;
}
/* Day header: number on the left, booking-count badge in the corner. */
.db-month-dayhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.db-month-count {
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--rose-soft);
  color: var(--rose);
}
/* Compact, non-clickable record labels (the cell drills into the week). */
.db-month-chip {
  display: block;
  font-size: var(--fs-2xs);
  line-height: 1.25;
  padding: 0 4px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  background: var(--rose-softer);
  border-left: 3px solid var(--rose);
  cursor: inherit;
  pointer-events: none;  /* labels only — the day cell handles the click */
}
.db-month-chip b { font-weight: 700; }
.db-month-chip.is-await { border-left-color: var(--warn); background: var(--warn-soft); }
.db-month-chip.is-done { border-left-color: var(--good); opacity: .75; }
.db-month-chip.is-noshow { border-left-color: var(--bad); background: var(--bad-soft); opacity: .8; }
/* Month chips become hover targets for the event card; a click still bubbles to
   the day cell (which drills into the week), so behaviour is unchanged. */
.db-month-chip { pointer-events: auto; }

/* Calendar event hover-card — floats above the grid AND the fullscreen layer. */
#cal-hovercard {
  position: fixed;
  z-index: 1100;
  max-width: 260px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  padding: 8px 11px;
  font-size: var(--fs-xs);
  pointer-events: none;  /* never intercepts the pointer it's reacting to */
}
#cal-hovercard[hidden] { display: none; }
#cal-hovercard .db-hc-name { font-weight: 700; color: var(--ink); }
#cal-hovercard .db-hc-meta { color: var(--ink-2); margin-top: 2px; white-space: nowrap; }
/* status badge in the hover-card (its tone class — is-good/is-warn/is-danger —
   carries the colour); a plain inline-flex tag under the meta line. */
#cal-hovercard .db-hc-status { margin-top: 6px; display: inline-flex; }
#cal-hovercard .db-hc-status[hidden] { display: none; }

/* Bounded, self-scrolling calendar: when the working band has more hours than
   fit, the grid scrolls vertically inside the card (day headers stay pinned via
   their sticky `top:0`) instead of relying on the page scroll — so all hours are
   reachable with an obvious scrollbar. Fullscreen lets the card own the scroll. */
.db-cal-wrap { overflow: auto; max-height: calc(100dvh - 300px); min-height: 280px;
  /* Isolate the grid's own scroll so a wheel gesture scrolls all its hours instead
     of leaking to the page after a nudge (the "scrolls only a little" feel, esp.
     WebKit/Safari with nested scrollers). */
  overscroll-behavior: contain; }
.db-card.is-fullscreen .db-cal-wrap { max-height: none; min-height: 0; }
.db-cal-grid {
  display: grid;
  grid-template-columns: 52px repeat(7, 1fr);
  gap: 0;
  min-width: 600px;
}
/* Phone: drop the 600px floor and let 7 narrow day columns share the width, so
   the whole week is visible at once instead of 4-of-7 with the weekend hidden
   behind a no-affordance horizontal scroll. (audit N3) */
@media (max-width: 640px) {
  .db-cal-grid { min-width: 0; grid-template-columns: 36px repeat(7, 1fr); }
  .db-cal-hour { font-size: 10px; padding-right: var(--space-1); }
  .db-cal-day { padding: 6px 2px var(--space-2); }
  .db-cal-day-name { font-size: 10px; letter-spacing: 0.03em; }
  .db-cal-day-num { font-size: 14px; }
}
.db-cal-corner { position: sticky; top: 0; z-index: 8; background: var(--surface); }
/* z-index 7: the pinned headers must paint ABOVE the F11 chips (z:4) and the
   "+N" expanded popover (z:6), or a chip scrolling up slides over the date. */
.db-cal-day {
  text-align: center;
  padding: 6px var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 7;
  background: var(--surface);
}
.db-cal-day-name {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 600;
}
.db-cal-day-num {
  font-size: 16px;
  font-weight: 700;
  margin-top: 2px;
  color: var(--ink);
}
.db-cal-day.is-off { opacity: 0.55; }
.db-cal-day-off {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-top: 2px;
}
/* One-off closure («Закрыть приём»): the day is a working weekday but closed by
   an exception. Mark it so it doesn't read as bookable. */
.db-cal-day-closed { color: var(--bad); }
.db-cal-cell.is-closed {
  /* 13.5px tile: 2 × 13.5 = 27px cell height, so the diagonal hatch stays
     seamless across the half-hour cell boundaries (a repeating-linear-gradient
     restarts per cell and banded at 27px). */
  background-image: linear-gradient(
    -45deg,
    var(--surface-sunken) 25%, transparent 25% 50%,
    var(--surface-sunken) 50% 75%, transparent 75%
  );
  background-size: 13.5px 13.5px;
  cursor: default;
}
/* NB: do NOT set position here — the base .db-cal-day is `position: sticky` so the
   day header pins while the hours scroll. Overriding to `relative` (the old rule)
   un-stuck ONLY the today column, so it scrolled away with its cells while the
   other six headers stayed pinned. The today circle below is inline-flex, so it
   needs no positioned parent. */
.db-cal-day.is-today .db-cal-day-num {
  background: var(--rose);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.db-cal-hour {
  font-size: var(--fs-2xs);
  color: var(--ink-3);
  padding: 6px var(--space-2) 0 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border-top: 1px dashed var(--line);
}
.db-cal-cell {
  border-top: 1px dashed var(--line);
  border-left: 1px solid var(--line);
  height: 27px;   /* HALF-HOUR row: 2 × 27px = the same 54px/hour band */
  padding: 3px var(--space-1);
  position: relative;
  overflow: hidden;
}
/* :30 rows draw a fainter divider so hours still dominate the rhythm. */
.db-cal-cell.is-half, .db-cal-hour.is-half {
  border-top-style: dotted;
  border-top-color: var(--surface-sunken);
}
/* manage-mode cells are clickable to create a booking on an empty slot */
.db-cal-cell[data-date] { cursor: pointer; }
.db-cal-cell[data-date]:hover { background: var(--rose-softer); }
/* fill the cell: a single booking occupies the whole hour block; multiple split it */
.db-cal-cell-inner { display: flex; flex-direction: column; gap: 3px; height: 100%; }
/* F11 — every chip is absolutely positioned by its exact start minute (--ev-off,
   the offset within its HALF-HOUR anchor cell) and visible duration (--ev-dur),
   both in minutes. 27px = 30 minutes → the same 0.9px/min scale as the old
   hourly rows. A chip taller than its row escapes downward over the
   (necessarily empty — no time overlap) cells below it. */
.db-cal-cell.has-ev { overflow: visible; }
.db-cal-cell .db-booking {
  position: absolute;
  left: 4px; right: 4px;
  top: calc(var(--ev-off, 0) * 0.9px + 1px);
  height: calc(var(--ev-dur, 60) * 0.9px - 2px);
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 1px;
  z-index: 4;
}
.db-booking-time {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.db-booking.is-selected .db-booking-time { color: rgba(255, 255, 255, 0.85); }
/* "+N" expands the busy cell into a small floating popover, leaving the grid
   height untouched (so 9–20 stay on one screen). */
.db-cal-cell.is-expanded { overflow: visible; z-index: 6; }
.db-cal-cell.is-expanded .db-cal-cell-inner {
  position: absolute;
  left: 2px; right: 2px; top: 2px;
  height: auto;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px;
  max-height: 240px;
  overflow: auto;
}
.db-cal-cell.is-expanded .db-booking { flex: 0 0 auto; }
.db-booking-more {
  position: absolute;
  right: 4px; bottom: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--rose);
  background: var(--rose-softer);
  border: none;
  border-radius: 6px;
  padding: 1px 6px;
  line-height: 1.4;
  cursor: pointer;
}
.db-cal-cell.is-expanded .db-booking-more { display: none; }

/* Booking chip — fills its hour cell; colour = STATUS (see legend). */
.db-booking {
  background: var(--rose-soft);
  border-radius: 9px;
  padding: 3px var(--space-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  line-height: 1.2;
  flex: 1 1 auto;          /* stretch to fill the cell height (1h → full hour) */
  min-height: 0;
  display: flex;
  align-items: center;
  transition: transform 120ms, box-shadow 120ms;
}
.db-booking:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(157, 90, 108, 0.18);
}
.db-booking .db-booking-name {
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-2xs);
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-booking-nick { color: var(--ink-3); font-weight: 400; }
.db-booking-svc { color: var(--ink-3); font-weight: 400; }
/* "changed by the client, not yet opened from the bell" — accent ring + dot,
   on top of the status tone so the status colour still reads. */
.db-booking.is-notified {
  border-color: var(--rose);
  box-shadow: 0 0 0 2px var(--rose-soft);
}
/* Header row: the status marker + notify dot sit inline with the time. */
.db-booking-hd { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; min-width: 0; }
.db-booking-dot {
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rose);
}
/* status = pale fill (hue) + a saturated LEFT BAR (second channel). The bar
   gives a value/position cue beyond the close pastel tints, so active vs
   awaiting read apart at a glance and for colour-vision deficiency. */
.db-booking.is-confirmed { background: var(--rose-soft); border-left: 3px solid var(--rose); }
.db-booking.is-await { background: var(--cream-soft); border-left: 3px solid var(--warn); }
.db-booking.is-done { background: var(--good-soft); border-left: 3px solid var(--good); }
.db-booking.is-noshow { background: var(--bad-soft); border-left: 3px solid var(--bad); }
.db-booking.is-noshow .db-booking-name { color: var(--bad); text-decoration: line-through; }

/* Status SHAPE marker — a non-colour channel on top of the hue + left bar, so
   confirmed (filled disc) vs await (hollow ring) read apart even in greyscale
   or with colour-vision deficiency (§6.1). done = disc + check, noshow = ✕. */
.db-booking-status {
  flex-shrink: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  box-sizing: border-box;
  position: relative;
}
.db-booking.is-confirmed .db-booking-status { background: var(--rose); }
.db-booking.is-await     .db-booking-status { background: transparent; border: 2px solid var(--warn); }
.db-booking.is-done      .db-booking-status { background: var(--good); }
.db-booking.is-done      .db-booking-status::after {
  content: ""; position: absolute; left: 3px; top: 0.5px;
  width: 2px; height: 5px; border: solid #fff; border-width: 0 1.5px 1.5px 0;
  transform: rotate(40deg);
}
/* ✕-in-circle. At the shared 9px dot the ring + cross had no room and read as a
   red smudge; the no-show marker is enlarged to 13px (its own size, inline with
   the time) with a 2px ring and a 7px cross inscribed inside it — a crisp ⊗. */
.db-booking.is-noshow    .db-booking-status {
  background: transparent; border: 2px solid var(--bad);
  width: 13px; height: 13px;
}
.db-booking.is-noshow    .db-booking-status::before,
.db-booking.is-noshow    .db-booking-status::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 2px; background: var(--bad); border-radius: 1px;
}
.db-booking.is-noshow    .db-booking-status::before { transform: translate(-50%,-50%) rotate(45deg); }
.db-booking.is-noshow    .db-booking-status::after  { transform: translate(-50%,-50%) rotate(-45deg); }
/* On the selected (rose-filled) chip the per-status shape would fight the bg;
   collapse it to a plain white disc (the status still shows in the detail panel). */
.db-booking.is-selected .db-booking-status { background: #fff; border: 0; }
.db-booking.is-selected .db-booking-status::before,
.db-booking.is-selected .db-booking-status::after { display: none; }

.db-booking.is-selected {
  background: var(--rose);
  box-shadow: 0 6px 18px rgba(157, 90, 108, 0.3);
}
.db-booking.is-selected .db-booking-name,
.db-booking.is-selected .db-booking-nick { color: #fff; }

/* status legend under the calendar header */
.db-cal-legend {
  display: flex; flex-wrap: wrap; gap: 6px var(--space-4);
  padding: var(--space-1) 2px 10px; font-size: var(--fs-2xs); color: var(--ink-3);
}
.db-leg { display: inline-flex; align-items: center; gap: 5px; }
.db-leg::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px; display: inline-block;
}
.db-leg.is-confirmed::before { background: var(--rose); }
.db-leg.is-await::before { background: var(--warn); }
.db-leg.is-done::before { background: var(--good); }
.db-leg.is-noshow::before { background: var(--bad); }

/* Tariff pill surfaced in the header (visible on every page) */
.db-head-plan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
/* Header plan crest: enlarged icon like the sidebar foot, but NO pill frame in
   the top bar (owner request) — just icon + name. `a.db-head-plan` outranks the
   `.tariff-pill.is-<plan>` background/border rules. */
a.db-head-plan .tariff-pill {
  font-size: 16px;
  padding: 0;
  gap: 9px;
  background: transparent;
  border-color: transparent;
}
a.db-head-plan .tariff-pill img { width: 40px; height: 40px; }

/* Detail-panel reschedule picker */
.db-reschedule {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.db-reschedule > label { margin: 0; }
.db-reschedule .db-time-input { width: 100%; min-width: 0; }

/* Detail-panel create-booking form */
.db-create { display: flex; flex-direction: column; gap: var(--space-1); }
.db-create .db-form-label { margin-top: var(--space-2); }
.db-create .db-form-label:first-child { margin-top: 0; }
.db-create .db-form-select,
.db-create .db-form-input,
.db-create .db-time-input { width: 100%; min-width: 0; }
/* Create form: date + time side by side (replaces the single datetime-local). */
.db-create-when { display: flex; gap: var(--space-2); }
.db-create-when .db-when-date { flex: 1 1 56%; }
.db-create-when .db-when-time { flex: 1 1 44%; min-width: 92px; }

/* ─────────────────────────────────────────
   CLIENT CARDS (под календарём)
   ───────────────────────────────────────── */
.db-clients-row {
  display: grid;
  /* responsive: fills the row, wraps to new rows — never overflows to the right */
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-3);
}
.db-client {
  background: var(--surface);
  border-radius: var(--r);
  border: 1px solid var(--line);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms;
}
.db-client:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.db-client.is-selected {
  background: var(--rose-softer);
  border-color: var(--rose-hi);
}
.db-client-info { min-width: 0; flex: 1; }
.db-client-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-client-meta {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: 1px;
}
.db-client-time {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--rose);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────
   STATS (внизу)
   ───────────────────────────────────────── */
.db-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
/* Number-only KPI tiles (no inline charts — visuals were removed so every tile
   reads as a plain figure; see ui-ux-reviews 2026-05-27). Content is a single
   text column, vertically centred in the tile. */
.db-stat {
  background: var(--surface);
  border-radius: var(--r);
  border: 1px solid var(--line);
  padding: 18px;
  display: flex;
  flex-direction: column;
  /* Top-align so the label sits at the same height across tiles whether or not
     a tile has a bottom delta line (else a 2-line tile centres higher than a
     3-line one and the labels read as misaligned). */
  justify-content: flex-start;
  min-height: 116px;
}
.db-stat-label {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-weight: 500;
}
.db-stat-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-1);
  color: var(--ink);
}
.db-stat-delta {
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--good);
  margin-top: 2px;
}
.db-stat-delta.is-down { color: var(--bad); }

/* ─────────────────────────────────────────
   RIGHT DETAIL PANEL
   ───────────────────────────────────────── */
.db-detail {
  background: var(--surface-sunken);
  border-left: 1px solid var(--line);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: auto;
}
/* Bottom-sheet chrome — mobile only (see the ≤860 rules). Hidden on desktop,
   where .db-detail is the right rail. */
.db-sheet-backdrop, .db-sheet-grab { display: none; }
.db-detail-tabs {
  display: flex;
  gap: var(--space-1);
  background: var(--surface);
  padding: var(--space-1);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
}
.db-detail-tab {
  flex: 1;
  text-align: center;
  padding: 7px 10px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 500;
  border: 0;
  background: transparent;
  font-family: inherit;
}
.db-detail-tab.is-active {
  background: var(--rose);
  color: #fff;
  font-weight: 600;
}

.db-detail-card {
  background: var(--surface);
  border-radius: var(--r);
  border: 1px solid var(--line);
  padding: var(--space-4);
}

.db-detail-client {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 14px;
}
.db-detail-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.db-detail-nick {
  font-size: var(--fs-xs);
  color: var(--rose);
  font-weight: 600;
}
/* Reused detail/section headings — extracted from repeated inline styles. */
.db-detail-title { font-size: var(--fs-md); font-weight: 700; margin-bottom: var(--space-2); }
.db-section-title { font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--space-2); }
/* Tokenised modal (was inline: #000 shadow + off-scale 12px radius). */
.db-dialog {
  border: none;
  border-radius: var(--r);
  padding: var(--space-5);
  max-width: 320px;
  width: 90%;
  box-shadow: var(--shadow-lift);
}
.db-dialog::backdrop { background: rgba(40, 25, 30, 0.32); }
/* F12 — reschedule day+slot picker inside the dialog. */
.db-resched-dialog { max-width: min(460px, 92vw); }
.db-resched-days {
  display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 6px 0 4px;
}
/* Time tiles: a STRICT 5-column grid (owner 2026-07-03) — flex-wrap made
   ragged rows because struck-through busy tiles are narrower. */
.db-resched-slots {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2); margin: 6px 0 4px;
}
.db-resched-slots .db-resched-slot { width: 100%; }
.db-resched-day { flex: 0 0 auto; }
.db-resched-day.is-full { opacity: 0.4; cursor: not-allowed; }
.db-resched-day.is-selected {
  background: var(--rose); border-color: var(--rose); color: #fff;
}
.db-resched-slots-area { margin-top: var(--space-2); }
.db-resched-slot-form { margin: 0; }
/* Busy positions stay in the grid (proportional layout) but read as taken. */
.db-resched-slot.is-busy {
  opacity: 0.45; cursor: not-allowed; text-decoration: line-through;
  background: var(--surface-sunken);
}
/* Rejected-move message inside the dialog (slot taken, off-hours, …). */
.db-resched-err {
  color: var(--bad); font-size: var(--fs-sm);
  margin: var(--space-2) 0 0;
}
/* Manual «своё время» row under the grid. */
.db-resched-custom {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); flex-wrap: wrap;
}
.db-resched-custom label { margin: 0; font-size: var(--fs-xs); color: var(--ink-2); }
.db-resched-custom .db-time-input { width: auto; min-width: 0; }
/* Banner that is itself a link (awaiting-decision summary). */
.db-banner-link { text-decoration: none; color: inherit; cursor: pointer; }
.db-banner-link:hover { border-color: var(--warn); }

.db-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
  border-bottom: 1px dashed var(--line);
}
.db-meta-row:last-child { border-bottom: 0; }
.db-meta-label { color: var(--ink-3); }
.db-meta-value { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Service list */
.db-service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: var(--fs-sm);
}
.db-service-row:last-child { border-bottom: 0; }
.db-service-name { font-weight: 600; }
.db-service-meta { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 1px; }
.db-service-price { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.db-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  margin-top: var(--space-1);
  border-top: 1.5px solid var(--ink);
  font-size: var(--fs-md);
  font-weight: 700;
}

.db-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--rose-soft);
  color: var(--rose);
}
.db-tag.is-good { background: var(--good-soft); color: var(--good); }
.db-tag.is-warn { background: var(--warn-soft); color: var(--warn); }
.db-tag.is-danger { background: var(--bad-soft); color: var(--bad); }

/* booking chips and client rows are now <a> links — keep them block-level,
   un-underlined, and inheriting the chip's own colour rules above */
a.db-booking { display: block; text-decoration: none; }
a.db-client { text-decoration: none; color: inherit; }

/* drag-n-drop reschedule (allow_calendar_manage) */
.db-booking[draggable="true"] { cursor: grab; }
.db-booking.is-dragging { opacity: 0.4; }
.db-cal-cell.is-drop { background: var(--rose-softer); box-shadow: inset 0 0 0 2px var(--rose); }
/* The empty slot the master clicked to start a new booking — highlighted so it's
   clear which cell the create form refers to (marked client-side from ?at=). */
.db-cal-cell.is-picked { background: var(--rose-soft); box-shadow: inset 0 0 0 2px var(--rose); }

/* Action buttons */
/* Booking-detail actions: a single-column stack of full-width controls.
   Never mix a lone button and a multi-field form in one grid row. */
.db-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
}
.db-actions form { margin: 0; }
.db-actions > .db-btn,
.db-actions form > .db-btn { width: 100%; }
/* contact row: call + open-client as two equal, same-height halves */
.db-actions-pair { display: flex; gap: var(--space-2); align-items: stretch; }
.db-actions-pair > .db-btn { flex: 1; min-width: 0; white-space: nowrap; }
.db-actions-pair > form { flex: 1; min-width: 0; }
.db-action-cancel { margin-top: 2px; }
/* Distilled actions (impeccable): big primary for the awaiting decision, a
   «Управление записью» disclosure for the rest, compact chips + a demoted
   (link-style) cancel for confirmed bookings. */
.db-btn--lg { font-size: var(--fs-md); padding: 14px; }
.db-actions-chips { display: flex; gap: var(--space-2); }
.db-actions-chips > .db-btn,
.db-actions-chips > form { flex: 1; min-width: 0; }
.db-actions-chips .db-btn { font-size: var(--fs-xs); padding: 8px 6px; white-space: nowrap; }
.db-manage { border: 1px solid var(--line); border-radius: var(--r-sm); }
.db-manage > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}
.db-manage > summary::-webkit-details-marker { display: none; }
.db-manage > summary::after { content: "▾"; color: var(--ink-3); transition: transform 0.15s ease; }
.db-manage[open] > summary::after { transform: rotate(180deg); }
.db-manage-body { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 12px 12px; }
.db-action-link {
  background: none;
  border: 0;
  width: 100%;
  padding: 6px;
  font-family: inherit;
  font-size: var(--fs-xs);
  color: var(--bad);
  text-decoration: underline;
  cursor: pointer;
}
.db-action-link:hover { opacity: 0.75; }
.db-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  text-decoration: none;
  vertical-align: middle;
  box-sizing: border-box;
  /* Self-contained: never inherit the legacy global `button{margin-top:14px}`
     (that leak pushed .db-btn rows out of alignment — zoom/save/Тип bugs). The
     .db-btn system spaces itself via container flex/grid gap, not own margin. */
  margin: 0;
}
.db-btn:hover { background: var(--surface-sunken); }
.db-btn.is-primary {
  background: var(--rose);
  color: #fff;
  border-color: var(--rose);
}
.db-btn.is-primary:hover { background: var(--rose-hi); }
.db-btn.is-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}
.db-btn.is-danger {
  background: var(--bad-soft);
  color: var(--bad);
  border-color: var(--bad);   /* red outline so destructive actions read clearly (N6) */
}
/* Warn variant (e.g. «отметить неявку») — referenced by templates but was
   undefined, so the button fell back to the neutral surface style. */
.db-btn.is-warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: var(--warn-soft);
}
.db-btn.is-wide { grid-column: 1 / -1; }
/* Disabled state — was missing entirely, so a disabled button looked active. */
.db-btn:disabled, .db-btn[disabled], .db-btn.is-disabled,
.btn:disabled, .btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
/* While the HTMX request a button itself triggered is in flight, dim it and
   block re-clicks — an automatic double-submit guard. HTMX adds .htmx-request
   to the triggering element for the request's duration, then removes it. */
.db-btn.htmx-request, .btn.htmx-request {
  opacity: .6;
  pointer-events: none;
}
.db-btn svg { width: 14px; height: 14px; }
/* Compact square icon-only button (e.g. calendar «+»): glyph optically centred,
   same footprint as the toolbar mini-buttons next to it. */
.db-btn--icon { width: 36px; height: 36px; padding: 0; font-size: 22px; line-height: 1; }
/* Low-weight destructive action: ghost footprint, red text (used in demoted
   management rows where «Отключить» shouldn't shout). */
.db-btn--danger-ghost { color: var(--bad); }
.db-btn--danger-ghost:hover { background: var(--bad-soft); }
/* Full-width block button (form submits, auth screens). Replaces legacy
   .btn--block; unlike .is-wide (grid-column, grid-only) this works in any
   flow/flex context. */
.db-btn--block { width: 100%; }
/* Thin in-card separator between a primary block and demoted management actions. */
.db-divider { border-top: 1px solid var(--line); margin: var(--space-4) 0 var(--space-3); }
/* Profile / account form submit buttons hug their label — never stretch to the
   card's full width, whatever the cascade does (owner kept seeing «Сохранить»
   full-width). fit-content wins even if some rule forces display:block/flex. */
form.db-card > button[type="submit"] { align-self: flex-start; width: fit-content; }

/* Mini calendar in detail */
.db-mini-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
  font-size: var(--fs-2xs);
}
.db-mini-cal-d {
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  color: var(--ink-3);
}
.db-mini-cal-d.is-active {
  background: var(--rose);
  color: #fff;
  font-weight: 700;
}
.db-mini-cal-d.has-booking { color: var(--rose); font-weight: 600; }

/* History dots */
.db-history {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: 6px;
}
.db-history > span { cursor: default; }
.db-history > span {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--rose-softer);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--rose);
}
.db-history > span.is-no-show {
  background: var(--bad-soft);
  color: var(--bad);
}

/* Helpers */
.db-row { display: flex; align-items: center; gap: var(--space-2); }
/* A form-wrapped button (e.g. a POST action) must align with sibling buttons
   in the row — shrink-wrap the form so it behaves like the button itself. */
.db-row > form { display: inline-flex; margin: 0; }
.db-spacer { flex: 1; }
.db-mute { color: var(--ink-3); }
.db-small { font-size: var(--fs-xs); }
.db-strong { font-weight: 700; color: var(--ink); }

/* ─────────────────────────────────────────
   TABLE — used in Bookings / Services / Clients
   ───────────────────────────────────────── */
.db-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}
.db-table thead th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.db-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.db-table tbody tr:last-child td { border-bottom: 0; }
.db-table tbody tr {
  cursor: pointer;
  transition: background 120ms;
}
.db-table tbody tr:hover { background: var(--surface-sunken); }
/* Non-interactive tables (e.g. stats «топ услуг») — rows aren't clickable, so no
   pointer cursor / hover affordance that would imply they are. */
.db-table.db-table--static tbody tr { cursor: default; }
.db-table.db-table--static tbody tr:hover { background: transparent; }
.db-table tbody tr.is-selected { background: var(--rose-softer); }
.db-table tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--rose);
}
.db-table .db-num { font-variant-numeric: tabular-nums; text-align: right; }

/* Phone: a .db-table.db-table--stack reflows into label/value cards so nothing — price,
   status, edit/delete — is lost off the right edge of a wide table. (audit N2)
   Each <td> shows its column name via data-label; mark the title cell
   .db-cell-title and the actions cell .db-cell-actions. */
@media (max-width: 640px) {
  .db-table.db-table--stack { min-width: 0; font-size: 14px; }
  .db-table.db-table--stack thead { display: none; }
  .db-table.db-table--stack, .db-table.db-table--stack tbody { display: block; }
  .db-table.db-table--stack tbody tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: var(--space-1) var(--space-3) var(--space-2);
    margin-bottom: 10px;
    cursor: default;
  }
  .db-table.db-table--stack tbody tr:hover { background: transparent; }
  .db-table.db-table--stack tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: 7px 0;
    text-align: right;
    border-bottom: 0;
  }
  .db-table.db-table--stack tbody td::before {
    content: attr(data-label);
    font-size: var(--fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-3);
    text-align: left;
    flex-shrink: 0;
  }
  .db-table.db-table--stack td.db-cell-title {
    display: block; text-align: left; padding: 10px 0 var(--space-2);
    border-bottom: 1px solid var(--line);
  }
  .db-table.db-table--stack td.db-cell-title::before { content: none; }
  .db-table.db-table--stack td.db-cell-actions { display: block; text-align: left; padding-top: 10px; }
  .db-table.db-table--stack td.db-cell-actions::before { content: none; }
  .db-table.db-table--stack td.db-cell-actions .db-row { justify-content: stretch; }
  .db-table.db-table--stack td.db-cell-actions .db-btn { flex: 1; justify-content: center; }
  /* Low-priority columns (marked .is-secondary) stay hidden in card mode too. */
  .db-table.db-table--stack td.is-secondary { display: none; }
}

/* ─────────────────────────────────────────
   TOOLBAR (above tables)
   ───────────────────────────────────────── */
.db-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.db-input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--space-2) 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--ink);
  min-width: 260px;
}
.db-input input {
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  flex: 1;
  color: var(--ink);
}
.db-input input::placeholder { color: var(--ink-3); }
.db-input svg { width: 14px; height: 14px; color: var(--ink-3); flex-shrink: 0; }

/* Segmented control */
.db-segment {
  display: inline-flex;
  background: var(--surface-sunken);
  border-radius: var(--r-pill);
  padding: 3px;
}
.db-segment button {
  padding: 6px var(--space-3);
  border-radius: var(--r-pill);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 500;
}
.db-segment button.is-active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* Filter chip */
.db-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px var(--space-3);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 500;
}
.db-chip.is-active { background: var(--rose-softer); border-color: var(--rose-hi); color: var(--rose); }
.db-chip svg { width: 12px; height: 12px; }

/* ─────────────────────────────────────────
   FORM FIELDS
   ───────────────────────────────────────── */
.db-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.db-form-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.db-form-hint {
  font-size: 11.5px;
  color: var(--ink-3);
  /* Cap the measure so explanatory text wraps to a readable column instead of
     stretching the full card width on wide screens (settings page). ~60–70 chars,
     per the AA line-length guideline. */
  max-width: 64ch;
}

/* ── Help hint: round «!» button + click/tap popover (see help_hint macro) ── */
.db-help-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
}
.db-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* small glyph, but a comfortable tap area via padding */
  padding: 5px;
  margin: -5px;
  border: 0;
  background: none;
  color: var(--rose);
  cursor: pointer;
  border-radius: var(--r-pill);
  line-height: 0;
}
.db-help svg { width: 17px; height: 17px; display: block; }
/* On hover the global `button:hover` fills the button rose (--rose-hi) — invert
   the glyph to white so the «?» stays visible inside the filled circle instead
   of vanishing into the fill (owner 2026-07-09). Covers hover-while-open too. */
.db-help:hover,
.db-help-wrap.is-open .db-help:hover { color: var(--on-rose); }
.db-help-wrap.is-open .db-help { color: var(--rose-deep); }
.db-help-pop {
  display: none;
  position: absolute;
  z-index: 50;
  left: 0;
  top: calc(100% + 7px);
  width: max-content;
  max-width: min(320px, 82vw);
  white-space: pre-line;      /* honour the \n line breaks in the copy */
  padding: 11px 13px;
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lift);
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.db-help-wrap.is-open .db-help-pop { display: block; }
/* ── «Моя интернет-страница»: publication header strip ──
   The status dot IS the publish toggle: green = live, red = hidden, grey =
   locked (non-Premium). The URL opens the page. One line, no extra buttons. */
.db-page-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
/* form wrapper collapses (display:contents) so the toggle is a direct flex child
   of the bar — shares the bar's align-items:center with the URL. */
.db-page-bar-form { display: contents; }
.db-page-bar .zm-toggle { align-self: center; }
.db-page-bar .db-page-url {
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; flex: 0 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-page-bar-spacer { flex: 1 1 12px; }
.db-page-bar-sub { margin: 0 0 14px 2px; font-size: var(--fs-xs); color: var(--ink-3); }

/* ── zm-toggle — branded on/off switch (design/zm-toggle). Styled checkbox;
   ON = dusty rose, OFF = warm cream. Sizes: .zm-sm 24px · default 32 · .zm-lg 40. */
.zm-toggle {
  appearance: none; -webkit-appearance: none; outline: none; margin: 0;
  cursor: pointer; flex-shrink: 0;
  --zm-h: 32px; --zm-w: 56px; --zm-pad: 4px;
  --zm-thumb: calc(var(--zm-h) - var(--zm-pad) * 2);
  width: var(--zm-w); height: var(--zm-h); border-radius: 999px; position: relative;
  border: 1px solid #d9cfc6;
  background: linear-gradient(180deg, #ece5dd 0%, #d8cdc2 100%);
  box-shadow: inset 0 2px 4px rgba(40,25,30,.10), inset 0 -1px 0 rgba(255,255,255,.5);
  transition: background 220ms cubic-bezier(.45,.05,.55,.95), border-color 220ms, box-shadow 220ms;
}
.zm-toggle::after {
  content: ""; position: absolute; top: var(--zm-pad); left: var(--zm-pad);
  width: var(--zm-thumb); height: var(--zm-thumb); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #fafafa 60%, var(--bg) 100%);
  box-shadow: 0 2px 4px rgba(40,25,30,.20), 0 1px 2px rgba(40,25,30,.10), inset 0 -1px 1px rgba(40,25,30,.06);
  transition: transform 280ms cubic-bezier(.34,1.56,.64,1), box-shadow 220ms;
}
.zm-toggle:checked {
  background: linear-gradient(180deg, var(--rose-hi) 0%, var(--rose) 100%); border-color: var(--rose-deep);
  box-shadow: inset 0 2px 4px rgba(60,25,40,.20), inset 0 -1px 0 rgba(255,220,230,.25);
}
.zm-toggle:checked::after {
  transform: translateX(calc(var(--zm-w) - var(--zm-thumb) - var(--zm-pad) * 2));
  box-shadow: 0 3px 6px rgba(60,25,40,.30), 0 1px 2px rgba(60,25,40,.15), inset 0 -1px 1px rgba(60,25,40,.08);
}
.zm-toggle:not(:disabled):hover { border-color: var(--rose-hi); }
.zm-toggle:not(:disabled):checked:hover {
  box-shadow: inset 0 2px 4px rgba(60,25,40,.20), inset 0 -1px 0 rgba(255,220,230,.25), 0 0 0 6px rgba(157,90,108,.10);
}
.zm-toggle:not(:disabled):active::after { width: calc(var(--zm-thumb) + 4px); }
.zm-toggle:not(:disabled):checked:active::after {
  transform: translateX(calc(var(--zm-w) - var(--zm-thumb) - var(--zm-pad) * 2 - 4px));
}
.zm-toggle:focus-visible {
  box-shadow: inset 0 2px 4px rgba(40,25,30,.10), inset 0 -1px 0 rgba(255,255,255,.5), 0 0 0 3px rgba(157,90,108,.30);
}
.zm-toggle:disabled { cursor: not-allowed; opacity: .5; }
.zm-toggle.zm-sm { --zm-h: 24px; --zm-w: 42px; --zm-pad: 3px; }
.zm-toggle.zm-lg { --zm-h: 40px; --zm-w: 72px; --zm-pad: 5px; }

/* Page hidden → the whole profile is disabled via fieldset[disabled]; the
   publish toggle lives outside the form, so it stays clickable to re-enable. */
.db-page-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.db-page-fieldset[disabled] { opacity: .55; }
.db-pub-off-note { color: var(--warn); margin: -2px 0 10px; }

/* Section publish toggles: checkbox (click only the box) + a link to its editor. */
.db-section-toggle { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.db-section-toggle input { width: auto; margin: 0; cursor: pointer; }
.db-section-toggle a { font-size: var(--fs-sm); font-weight: 600; color: var(--rose); text-decoration: none; }
.db-section-toggle a:hover { text-decoration: underline; }

/* Two-column profile form mirroring /m/{slug}: main content (name, about,
   sections, location) on the left, the Контакты column on the right. The right
   column is a fixed width, so the contact inputs are sized to it. */
.db-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-1) 40px;
  align-items: start;
}
@media (max-width: 820px) { .db-page-grid { grid-template-columns: 1fr; gap: 18px 0; } }
.db-page-main, .db-page-contacts { min-width: 0; }

/* ── Contacts: hidden checkbox + icon-toggle + input, stacked as the column on
   the right of the hero (like the public page). The icon is the publish control
   (bright + rose ring = shown, dim grayscale = hidden; tooltip flips
   Опубликовать/Закрыть; the field text greys when hidden). */
.db-contacts-grid { display: flex; flex-direction: column; gap: var(--space-2); }
.db-contact-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.db-contact-row .db-form-input { flex: 1; min-width: 0; padding: 6px 9px; font-size: var(--fs-sm); }
.db-contact-row .db-pub-ico { width: 30px; height: 30px; }
.db-contact-row .db-pub-ico img, .db-contact-row .db-pub-ico svg { width: 17px; height: 17px; }
.db-pub-check { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.db-pub-ico {
  position: relative; flex-shrink: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid transparent; transition: border-color 140ms, background 140ms;
}
.db-pub-ico img, .db-pub-ico svg {
  width: 20px; height: 20px; display: block;
  filter: grayscale(1); opacity: .4; transition: filter 140ms, opacity 140ms;
}
/* published */
.db-pub-check:checked ~ .db-pub-ico { border-color: var(--rose); background: var(--rose-soft); }
.db-pub-check:checked ~ .db-pub-ico img,
.db-pub-check:checked ~ .db-pub-ico svg { filter: none; opacity: 1; }
.db-pub-check:checked ~ .db-pub-ico svg { color: var(--rose); }
/* hidden → field text greys */
.db-pub-check:not(:checked) ~ .db-form-input { color: var(--ink-3); }
/* keyboard focus surfaces a ring on the icon */
.db-pub-check:focus-visible ~ .db-pub-ico { box-shadow: 0 0 0 3px var(--rose-soft); }
/* tooltip — text depends on state (data-off = «Опубликовать», data-on = «Закрыть») */
.db-pub-ico::after {
  content: attr(data-off);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: var(--fs-2xs); font-weight: 500;
  padding: var(--space-1) var(--space-2); border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 120ms; z-index: 5;
}
.db-pub-check:checked ~ .db-pub-ico::after { content: attr(data-on); }
.db-pub-ico:hover::after { opacity: 1; }
.db-form-input--sm { padding: 7px 10px; }

/* Collapsible block (coords under the address). */
.db-disclosure { margin: 2px 0 var(--space-1); }
.db-disclosure > summary {
  cursor: pointer; list-style: none; padding: var(--space-1) 0;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.db-disclosure > summary::-webkit-details-marker { display: none; }
.db-disclosure > summary::before { content: "▸"; color: var(--ink-3); font-size: var(--fs-2xs); }
.db-disclosure[open] > summary::before { content: "▾"; }

/* compact button (header strip + section edit links) */
.db-btn--sm { padding: 6px var(--space-3); font-size: var(--fs-xs); }
/* Private notes block (nickname + note) — one privacy caption for both. */
.db-private-block {
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  padding: 14px;
  margin-bottom: 14px;
}
.db-private-block-hint {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-bottom: var(--space-3);
}
.db-private-block .db-form-group:last-child { margin-bottom: 0; }
/* Behavioural signals (§22.7) on the client card */
.db-behavior { display: flex; gap: 22px; }
.db-behavior-stat { display: flex; flex-direction: column; }
.db-behavior-num { font-size: 22px; font-weight: 800; line-height: 1; }
.db-behavior-label { font-size: 11.5px; color: var(--ink-3); margin-top: var(--space-1); }
/* Read-only field value (profile page) */
.db-form-static {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  padding: 2px 0;
}
/* Two-column settings block (weekly schedule | one-off closures) */
.db-settings-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
/* Two compact settings cards side-by-side on wide screens (Telegram + calendar
   export), each card keeping its own height; collapses to one column narrow. */
.db-settings-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;   /* equal-height cards (Telegram ↔ Экспорт в календарь) */
}
@media (max-width: 860px) {
  .db-settings-pair { grid-template-columns: 1fr; }
}
.db-subhead {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 10px;
}
@media (max-width: 900px) {
  .db-settings-2col { grid-template-columns: 1fr; gap: 22px; }
}
/* Telegram pairing code box (settings → Telegram section) */
.db-link-code {
  margin: var(--space-3) 0 0;
  padding: 14px var(--space-4);
  background: var(--surface-sunken);
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  text-align: center;
}
.db-link-code-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.6rem;
  letter-spacing: 0.2rem;
  margin: var(--space-1) 0;
}
.db-form-input,
.db-form-select,
.db-form-textarea {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px var(--space-3);
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  outline: 0;
  transition: border-color 120ms;
}
.db-form-input:focus,
.db-form-select:focus,
.db-form-textarea:focus { border-color: var(--rose); }
.db-form-input::placeholder { color: var(--ink-3); }
/* Lock inputs and selects to one height so a native <select> (shorter in some
   browsers, e.g. Safari) stays row-aligned with text inputs (e.g. the loyalty
   «Тип» field, the client-card discount row). Compact contexts opt out. */
.db-form-input, .db-form-select { min-height: 42px; }
.db-contact-row .db-form-input { min-height: 0; }
/* Strip the native <select> chrome (Safari ignores height/min-height on a native
   select, which knocked the loyalty «Тип» / discount «%» out of line) and draw a
   custom chevron, so selects are plain boxes that honour the height everywhere. */
.db-form-select, select.db-form-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23776f78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 30px;
}
.db-form-textarea { min-height: 70px; resize: vertical; line-height: 1.5; }

/* ── Settings page: section nav, section titles, danger zone ── */
.db-section-nav {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: -2px 0 var(--space-4);
}
.db-section-nav a {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  text-decoration: none; padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  transition: color 120ms, border-color 120ms, background 120ms;
}
.db-section-nav a:hover { color: var(--rose); border-color: var(--rose); }
/* Settings «правила слотов» etc.: short selects/inputs shouldn't stretch across
   the whole card — cap them to a sensible control width (still full-width on a
   phone, where the card is already narrow). */
#rules .db-form-select, #rules .db-form-input { max-width: 380px; }
/* the targeted section briefly highlights when jumped to */
.db-card:target { box-shadow: 0 0 0 2px var(--rose-soft); }

.db-card-title.is-lg { font-size: 16px; }
.db-btn.is-copied { color: var(--good); border-color: var(--good); }

/* In-app confirm dialog (replaces native confirm()). */
.db-confirm {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: var(--space-5);
  background: rgba(20,15,18,.55); backdrop-filter: blur(3px);
}
.db-confirm[hidden] { display: none; }
.db-confirm-box {
  background: var(--surface); border-radius: var(--r-md); padding: 22px var(--space-5);
  max-width: 420px; width: 100%; box-shadow: var(--shadow-lift);
}
.db-confirm-msg { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.db-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Danger zone — fenced so destructive actions don't read as routine settings. */
.db-card--danger { border-color: var(--bad); box-shadow: inset 4px 0 0 var(--bad); }
.db-card-eyebrow.is-danger {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bad); margin-bottom: var(--space-2);
}

/* Read-only lock banner (PB-A15): shown atop every cabinet page while the
   account is suspended / in dunning / pending deletion. */
.db-lock-banner {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: 14px var(--space-4); margin-bottom: 18px;
  border: 1px solid var(--bad); border-radius: 12px;
  background: var(--bad-soft);
}
.db-lock-banner--dunning { border-color: var(--warn); background: var(--warn-soft); }
.db-lock-banner-body { flex: 1 1 280px; display: flex; flex-direction: column; gap: 2px; }
.db-lock-banner-body strong { color: var(--ink); font-size: var(--fs-md); }
.db-lock-banner-body span { color: var(--ink-2); font-size: var(--fs-sm); }
.db-lock-banner .db-btn { margin: 0; flex: 0 0 auto; }

/* Account danger zone, folded away (PB-A15): destructive actions hidden behind
   a disclosure so the everyday intake-pause control stays uncluttered. */
.db-danger-fold { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 6px; }
.db-danger-fold > summary {
  cursor: pointer; list-style: none; padding: var(--space-2) 0;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bad);
}
.db-danger-fold > summary::-webkit-details-marker { display: none; }
.db-danger-fold > summary::before { content: "▸ "; color: var(--ink-3); }
.db-danger-fold[open] > summary::before { content: "▾ "; }
.db-danger-fold-body { padding-top: var(--space-1); }
.db-danger-row {
  padding: 14px; margin-top: var(--space-3);
  border: 1px solid var(--bad); border-radius: 10px;
  box-shadow: inset 4px 0 0 var(--bad);
}
.db-danger-row-title { font-weight: 600; color: var(--ink); }

.db-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* Gallery (page editor): a horizontal strip of fixed tiles that scrolls/swipes
   sideways — not the whole library dumped in a grid. Click a tile → zoom-view
   (.gal-lb) where caption/delete live. */
.db-gallery-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 2px var(--space-1);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.db-gallery-tile {
  flex: 0 0 auto;
  width: 132px; height: 132px;
  padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); overflow: hidden; cursor: pointer; position: relative;
  scroll-snap-align: start; transition: transform 120ms, box-shadow 120ms;
}
.db-gallery-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.db-gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.db-gallery-tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px var(--space-2) 5px; font-size: var(--fs-2xs); color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(20,15,18,.72));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* zoom-view / lightbox */
.gal-lb {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-5); background: rgba(20,15,18,.88); backdrop-filter: blur(8px);
}
.gal-lb[hidden] { display: none; }
.gal-lb-fig { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); max-width: min(860px, 92vw); }
.gal-lb-fig img {
  max-width: 100%; max-height: 72vh; object-fit: contain;
  border-radius: var(--r-md); background: var(--ink); align-self: center;
}
.gal-lb-cap {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border-radius: var(--r-md); padding: var(--space-2) 10px;
}
.gal-lb-count { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.gal-lb-x {
  position: absolute; top: 16px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font-size: var(--fs-2xl); line-height: 1;
}
.gal-lb-nav {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1;
}
.gal-lb-x:hover, .gal-lb-nav:hover { background: rgba(255,255,255,.24); }
@media (max-width: 640px) {
  .gal-lb { padding: var(--space-3); }
  .gal-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); }
  .gal-lb-prev { left: 8px; } .gal-lb-next { right: 8px; }
}

/* Toggle */
.db-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.db-toggle-track {
  width: 36px; height: 20px;
  background: var(--line-2);
  border-radius: var(--r-pill);
  position: relative;
  transition: background 150ms;
}
.db-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 150ms;
}
.db-toggle.is-on .db-toggle-track { background: var(--rose); }
.db-toggle.is-on .db-toggle-track::after { transform: translateX(16px); }

/* ─────────────────────────────────────────
   TABS (top of screen content)
   ───────────────────────────────────────── */
.db-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.db-tab {
  padding: 10px var(--space-4);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 500;
  position: relative;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.db-tab.is-active {
  color: var(--rose);
  font-weight: 700;
  border-bottom-color: var(--rose);
}

/* ─────────────────────────────────────────
   PAGE SCAFFOLD (used by non-calendar pages)
   ───────────────────────────────────────── */
.db-page {
  padding: var(--space-5) 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: auto;
  min-width: 0;
}
/* Slim cabinet footer (trimmed vs the public landing footer — no login/register
   CTAs). margin-top:auto pins it to the bottom of the flex-column page. */
.db-foot {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.db-foot a { color: var(--ink-3); text-decoration: none; }
.db-foot a:hover { color: var(--ink-1); text-decoration: underline; }

/* Master profile photo (cabinet → Профиль): round preview + upload/replace. */
.db-photo-row { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
.db-photo {
  width: 84px; height: 84px; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line); background: var(--surface-sunken);
}
.db-photo--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700; color: var(--ink-3);
}
.db-photo-form { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.db-photo-form .db-form-input { max-width: 280px; }
/* The column flex would otherwise stretch the submit button to the card's full
   width — keep it compact, sized to its label (owner: don't stretch buttons). */
.db-photo-form > .db-btn { align-self: flex-start; }
/* Avatar lightbox — click the profile photo to see it full-size. */
.db-photo--zoom { cursor: zoom-in; }
.db-lightbox { border: 0; background: transparent; padding: 0; max-width: 92vw; max-height: 92vh; }
.db-lightbox::backdrop { background: rgba(20, 12, 16, 0.8); }
.db-lightbox img { display: block; max-width: 92vw; max-height: 92vh; border-radius: 12px; cursor: zoom-out; }
/* Custom file picker — the native input is visually hidden (its "No file
   chosen" text is browser-locale-only); a styled label + JS filename replace it. */
.db-file-native {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.db-file-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.db-file-btn { cursor: pointer; }
.db-file-native:focus + .db-file-pick .db-file-btn { outline: 2px solid var(--rose); outline-offset: 2px; }
.db-file-name { font-size: var(--fs-sm); word-break: break-all; }
.db-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.db-page-title-block .db-card-title { font-size: 22px; }
.db-page-title-block .db-card-sub { margin-top: var(--space-1); font-size: var(--fs-sm); }

/* ─────────────────────────────────────────
   CHART CARD (Statistics)
   ───────────────────────────────────────── */
.db-chart {
  background: var(--surface);
  border-radius: var(--r);
  border: 1px solid var(--line);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 200px;
}
.db-chart-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}
.db-chart-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.db-chart-delta {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--good);
}
.db-chart-delta.is-down { color: var(--bad); }

/* Bigger donut */
.db-donut-lg {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: conic-gradient(var(--rose) 0 72%, var(--cream) 72% 90%, var(--line) 90% 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.db-donut-lg::before {
  content: "";
  position: absolute; inset: 14px;
  border-radius: 50%;
  background: var(--surface);
}
.db-donut-lg-num {
  position: relative;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.db-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
}
.db-legend-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.db-legend-dot {
  width: 10px; height: 10px; border-radius: 3px;
  background: var(--rose);
  flex-shrink: 0;
}

/* Bars chart (vertical, day-of-week) */
.db-vbars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
  align-items: flex-end;
  height: 140px;
  padding-top: var(--space-3);
}
.db-vbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}
.db-vbar-fill {
  width: 100%;
  background: var(--rose-soft);
  border-radius: 6px 6px 0 0;
  position: relative;
}
.db-vbar.is-active .db-vbar-fill {
  background: var(--rose);
}
.db-vbar-label { font-size: var(--fs-2xs); color: var(--ink-3); }
.db-vbar-val { font-size: var(--fs-2xs); font-weight: 700; color: var(--ink); }

/* Line chart placeholder (simple SVG) */
.db-line-chart { width: 100%; height: 180px; }

/* ─────────────────────────────────────────
   BANNER (read-only / warnings)
   ───────────────────────────────────────── */
.db-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--warn-soft);
  border-radius: var(--r);
  border: 1px solid var(--cream);
  padding: 14px var(--space-4);
}
.db-banner.is-bad  { background: var(--bad-soft);  border-color: var(--bad); }
.db-banner.is-good { background: var(--good-soft); border-color: var(--good); }
.db-banner.is-warn { background: var(--warn-soft); border-color: var(--warn); }
/* Single-line banners (no title) read better with the icon optically centred
   against the one line of text; titled / multi-line banners keep top-alignment. */
.db-banner:not(:has(.db-banner-title)) { align-items: center; }
.db-banner-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--warn);
  flex-shrink: 0;
}
.db-banner.is-bad .db-banner-icon { color: var(--bad); }
.db-banner.is-good .db-banner-icon { color: var(--good); }
/* The icon SVG has no intrinsic size; without this it collapses and the circle
   reads as an empty white dot. */
.db-banner-icon svg { width: 16px; height: 16px; }
.db-banner.is-compact .db-banner-icon svg { width: 14px; height: 14px; }
.db-banner-body { flex: 1; font-size: var(--fs-sm); line-height: 1.5; }
.db-banner-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.db-banner-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
/* Compact one-line variant (calendar mode notice) to keep the grid above the
   fold. Title + text sit inline; smaller padding + icon. */
.db-banner.is-compact { padding: 9px 14px; align-items: center; gap: 10px; }
.db-banner.is-compact .db-banner-icon { width: 26px; height: 26px; }
.db-banner.is-compact .db-banner-body { font-size: 12.5px; }
.db-banner.is-compact .db-banner-title { display: inline; font-size: var(--fs-sm); margin: 0; }
.db-banner.is-compact .db-banner-actions { display: inline-flex; margin: 0 0 0 6px; vertical-align: middle; }

/* ─────────────────────────────────────────
   GRID HELPERS
   ───────────────────────────────────────── */
.db-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.db-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.db-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* KPI row: the 5 core stat tiles on one line (a 6th conditional tile wraps). */
.db-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.db-grid-2-3 { display: grid; grid-template-columns: 2fr 3fr; gap: 14px; }
.db-grid-3-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; }

/* ─────────────────────────────────────────
   SCREEN VARIANTS — when no right detail panel
   ───────────────────────────────────────── */
.db-screen.is-no-detail {
  grid-template-columns: var(--nav-w) 1fr;
}
.db-screen.is-no-detail .db-head {
  /* brand (--nav-w) · page title (1fr, expands) · right controls (auto, pinned
     to the right edge). Without the 3rd column the .db-head-right block wraps
     under the brand into the left column. */
  grid-template-columns: var(--nav-w) 1fr auto;
}

/* ─────────────────────────────────────────
   LIST ITEM (services / clients lists with selected state)
   ───────────────────────────────────────── */
.db-list-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 14px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms;
}
.db-list-item:hover { background: var(--surface-sunken); }
.db-list-item.is-selected {
  background: var(--rose-softer);
  border-color: var(--rose-hi);
}
.db-list-item-title { font-weight: 600; font-size: 14px; }
.db-list-item-meta { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.db-list-item-right { text-align: right; font-size: 12.5px; }

/* Plan cards */
.db-plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.db-plan.is-current {
  background: var(--rose-softer);
  border-color: var(--rose-hi);
}
.db-plan.is-recommended {
  border-color: var(--rose);
  border-width: 2px;
  padding: 21px; /* offset the +1px border so card content stays aligned */
  box-shadow: var(--shadow-card);
}
/* «Рекомендуем» ribbon on the recommended plan card. */
.db-plan-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--rose);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.db-plan-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Plan-card crest: large icon + name to match the rest of the cabinet. */
.db-plan-name .tariff-pill { font-size: 18px; gap: 10px; padding: var(--space-1) 10px; }
.db-plan-name .tariff-pill img { width: 34px; height: 34px; }
.db-plan-price {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.db-plan-price small { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.db-plan-features {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 14px; /* was 13px — align tariff card text to the cabinet scale */
}
.db-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.db-plan-features li::before {
  content: "✓";
  color: var(--rose);
  font-weight: 700;
  flex-shrink: 0;
}
/* Section headers («Телеграм-бот» / «Личный Web Кабинет»): bold, no checkmark,
   flush-left, with a little air above to group the lines under them. */
.db-plan-features li.db-plan-group {
  font-weight: 700;
  margin-top: var(--space-2);
}
.db-plan-features li.db-plan-group::before { content: none; }

/* Invoice / payment rows */
.db-invoice-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
}
.db-invoice-status.is-paid { background: var(--good-soft); color: var(--good); }
.db-invoice-status.is-failed { background: var(--bad-soft); color: var(--bad); }
.db-invoice-status.is-pending { background: var(--warn-soft); color: var(--warn); }

/* Weekday schedule editor row */
.db-day-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--line);
}
.db-day-row:last-child { border-bottom: 0; }
.db-day-label { font-weight: 600; }
.db-day-off { color: var(--ink-3); font-size: var(--fs-sm); font-style: italic; }
.db-time-input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px var(--space-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  /* Wide enough that the native time picker doesn't clip the last digit. */
  width: 112px;
  min-width: 112px;
  box-sizing: border-box;
}

/* Localised datetime facade (enhanced in cabinet_base.html). A native
   <input type=datetime-local> always renders its value in the OS locale — so an
   English-language cabinet on a Russian phone showed «25 июня 2026». We keep the
   native input as an invisible tap layer over our own text, formatted in the
   cabinet's language, so the displayed date matches the UI. */
.db-dtl { position: relative; display: block; }
.db-dtl .db-dtl-native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; padding: 0; border: 0; cursor: pointer;
}
.db-dtl-text {
  display: flex; align-items: center; min-height: 34px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 6px var(--space-2);
  font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
}
.db-dtl-text.is-empty { color: var(--ink-3); font-weight: 400; }
.db-dtl .db-dtl-native:focus-visible ~ .db-dtl-text { outline: 2px solid var(--rose); outline-offset: 1px; }

/* Compact inline weekly schedule on the settings page */
.db-sched { display: flex; flex-direction: column; }
.db-sched-row {
  display: grid;
  grid-template-columns: 120px 112px 14px 112px;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.db-sched-row:last-child { border-bottom: 0; }
.db-sched-row.is-off .db-time-input { opacity: 0.45; }
.db-sched-day {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: 600; font-size: 14px;
}
.db-sched-day input { width: auto; }
.db-sched-dash { text-align: center; color: var(--ink-3); }
@media (max-width: 560px) {
  .db-sched-row { grid-template-columns: 1fr 70px 10px 70px; gap: 6px; }
  .db-sched-day { font-size: var(--fs-sm); }
}

/* ===========================================================
   APP INTEGRATION — server-rendered cabinet shell + auth pages
   (not part of the static prototype; lives only in the running app)
   =========================================================== */

/* Disabled nav items (routes not built yet) */
.db-nav-item.is-disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.db-nav-item.is-disabled .db-badge {
  background: var(--surface-sunken);
  color: var(--ink-3);
}

/* Logout sits in the nav foot as a plain form button. */
.db-nav-foot form { margin: 0; }
.db-logout {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 10px var(--space-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}
.db-logout:hover { background: var(--surface-sunken); }

/* ───────── Auth / onboarding pages (centered, no shell) ───────── */
.wrap {
  width: min(560px, calc(100vw - 32px));
  margin: 56px auto;
}
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: 20px;
  text-decoration: none;
  color: inherit;
}
.auth-brand .db-brand-mark { width: 44px; height: 44px; }
.auth-brand-name {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.wrap--wide { width: min(880px, calc(100vw - 32px)); }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.card + .card { margin-top: var(--space-4); }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--space-2); }
h2 { font-size: 18px; font-weight: 700; margin: 20px 0 var(--space-2); }
p { color: var(--ink-2); margin: 0 0 14px; }
.muted { color: var(--ink-3); font-size: var(--fs-sm); }

label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  margin: 14px 0 6px;
}
input[type=text], input[type=email], input[type=password],
input[type=tel], input[type=date], input[type=time],
input[type=number], select, textarea {
  width: 100%;
  padding: 10px var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 14px;
  background: var(--surface);
  color: var(--ink);
  outline: 0;
  transition: border-color 120ms;
}
input:focus, select:focus, textarea:focus { border-color: var(--rose); }

/* keyboard focus ring for all interactive controls (nav items, booking chips,
   buttons, links) — mouse clicks stay ring-free via :focus-visible */
a:focus-visible,
button:focus-visible,
.db-nav-item:focus-visible,
.db-booking:focus-visible,
.db-btn:focus-visible,
.db-client:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 11px 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rose);
  background: var(--rose);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-top: 14px;
  transition: background 120ms;
}
button:hover, .btn:hover { background: var(--rose-hi); border-color: var(--rose-hi); }
.btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.btn--secondary:hover { background: var(--surface-sunken); border-color: var(--line); }
.btn--block { width: 100%; }
/* Auth cards (.wrap > .card > form) lay fields out with bare label/input and no
   .db-form-group, so the submit's top gap used to come from the legacy
   button{margin-top:14px}. Now that .db-btn zeroes its margin, restore that
   14px rhythm for the block submit inside auth cards only (dashboard forms use
   .db-card and their own spacing, so they're untouched). */
.card form .db-btn--block { margin-top: 14px; }

.error {
  background: var(--bad-soft);
  color: var(--bad);
  border: 1px solid var(--bad);
  padding: 10px var(--space-3);
  border-radius: var(--r-sm);
  margin-bottom: 14px;
  font-size: var(--fs-sm);
}
.footer { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--ink-3); }
.footer a { color: var(--rose); font-weight: 600; }
form { margin: 0; }

.row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.row--cards { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .row--cards { grid-template-columns: 1fr; } }
.choice {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--space-4) 18px;
  background: var(--surface);
}
.choice:hover { border-color: var(--rose-hi); }

/* ==================================================================
   RESPONSIVE / MOBILE — ported from design dashboard.css (2026-05-24)
   ================================================================== */
@media (max-width: 1280px) {
  .db-page { padding: 20px 22px; }
}

/* ─── ≤1100px: right detail panel drops to the bottom (full-width row) ── */
@media (max-width: 1100px) {
  .db-screen {
    grid-template-columns: var(--nav-w) 1fr;
    grid-template-rows: 72px 1fr auto;
    height: auto;  /* detail panel reflows to a bottom row; let the page grow */
  }
  .db-head {
    grid-template-columns: var(--nav-w) 1fr;
  }
  /* If the page contains a right detail panel (.db-detail), stretch it
     across columns 1–3 of the grid below the main column. */
  .db-detail {
    grid-column: 1 / -1 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--line);
    max-width: 100%;
  }
  /* In dashboards that always show a detail panel, lift its sticky width. */
  .db-screen.has-detail-bottom .db-detail { width: 100%; }
  /* 5 KPI tiles get tight on a laptop — drop to 3-up before the mobile 2-up. */
  .db-grid-5 { grid-template-columns: repeat(3, 1fr); }
}

/* ─── ≤860px: left nav becomes a horizontal scroll strip above content
       (icon + label chips), brand row moves into header. ── */
@media (max-width: 860px) {
  body { padding: 0; }
  .db-screen {
    width: 100vw;
    border-radius: 0;
    box-shadow: none;
    /* minmax(0,…): the page column must not grow past the viewport on its content
       min-content (a plain 1fr carries an implicit min:auto that let .db-page hit
       432px on a 375px screen → the whole page clipped). */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px 56px 1fr auto;
  }
  .db-head {
    grid-template-columns: 1fr auto;
    grid-template-rows: 56px;
    padding: 0 14px;
    height: 56px;
    gap: 10px;
  }
  .db-head .db-brand { padding-left: 0; }
  .db-brand-mark { width: 30px; height: 30px; }
  .db-brand-name { font-size: var(--fs-md); }
  .db-head-center { display: none; }
  .db-head-right {
    padding-right: 0;
    gap: 6px;
  }
  .db-head-right .db-page-title,
  .db-head-right .db-spacer { display: none; }
  .db-page-title { font-size: 14px; }
  /* Telegram-not-linked alert: icon-only on mobile so the 56px header
     doesn't overflow next to the logout button (full text on desktop). */
  .db-head-alert span { display: none; }
  .db-head-alert { padding: 7px 9px; }

  /* Nav becomes a horizontal scroll strip on row 2 */
  .db-nav {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
    gap: 6px;
    align-items: center;
    height: 56px;
    scrollbar-width: none;
    /* Fade the right edge so it's visibly a horizontal scroll strip — the other
       sections (Статистика/Финансы/Профиль/…) are a swipe away, not missing. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .db-nav::-webkit-scrollbar { display: none; }
  .db-nav-section,
  .db-nav-foot { display: none; }
  .db-nav-item {
    flex-shrink: 0;
    padding: var(--space-2) 14px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--line);
    white-space: nowrap;
    font-size: var(--fs-sm);
  }
  .db-nav-item.is-active {
    background: var(--rose);
    border-color: var(--rose);
  }
  .db-nav-item .db-badge { display: none; }

  /* Main page area */
  .db-page {
    padding: var(--space-4) 14px var(--space-6);
    gap: 14px;
  }
  .db-page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .db-page-title-block .db-card-title { font-size: var(--fs-xl); }

  /* Multi-column grids collapse */
  .db-grid-2,
  .db-grid-3,
  .db-grid-2-3,
  .db-grid-3-2 {
    grid-template-columns: 1fr !important;
  }
  /* KPI tiles stay 2-up (2×2) instead of a tall single column. (audit N4) */
  .db-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .db-grid-5 { grid-template-columns: 1fr 1fr !important; }

  /* Cards shrink padding */
  .db-card { padding: var(--space-4); border-radius: 16px; }
  .db-card-head { flex-wrap: wrap; gap: var(--space-2); }

  /* Tables become horizontally scrollable */
  .db-card:has(.db-table),
  .db-card > .db-table {
    overflow-x: auto;
  }
  .db-table { min-width: 540px; }
  .db-table th, .db-table td {
    padding: 10px var(--space-2);
    font-size: var(--fs-sm);
  }
  /* Hide low-priority columns on the smallest tables (mark with .is-secondary) */
  .db-table .is-secondary { display: none; }

  /* Toolbars wrap */
  .db-toolbar { flex-wrap: wrap; gap: var(--space-2); }
  .db-toolbar .db-input { flex: 1 1 200px; min-width: 0; }

  /* Forms */
  .db-form-row {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Stats cards — drop the desktop min-height so 2×2 tiles are compact (N4) */
  .db-stat { padding: 14px var(--space-4); min-height: 0; }
  .db-stat-value { font-size: 22px; }
  .db-stat-label { font-size: var(--fs-2xs); }

  /* Schedule day-row collapses to two lines (label / inputs) */
  .db-day-row {
    grid-template-columns: 60px 1fr 1fr;
    gap: var(--space-2);
  }
  .db-day-row .db-day-off { grid-column: 2 / -1; }
  .db-time-input { width: 100%; }

  /* Booking cards (calendar) shrink */
  .db-booking { font-size: var(--fs-xs); padding: 6px var(--space-2); }

  /* Booking detail → dismissible bottom-sheet, so a tap on a booking no longer
     dumps the panel far below the calendar+KPIs (audit N5). Opened by JS when a
     booking is selected (?sel) or the create form is shown (?new). */
  .db-detail {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    z-index: 60;
    width: 100%;
    max-height: 86vh;
    padding: var(--space-1) var(--space-4) 20px;
    border-radius: 18px 18px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0 !important;
    box-shadow: 0 -12px 40px rgba(30, 18, 22, 0.28);
    transform: translateY(100%);
    transition: transform 260ms ease;
  }
  .db-screen.is-sheet-open .db-detail { transform: translateY(0); }
  .db-sheet-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 59;
    background: rgba(30, 18, 22, 0.45);
    opacity: 0; pointer-events: none;
    transition: opacity 220ms ease;
  }
  .db-screen.is-sheet-open .db-sheet-backdrop { opacity: 1; pointer-events: auto; }
  .db-sheet-grab {
    display: block;
    width: 40px; height: 4px; flex: none;
    margin: 6px auto 10px;
    border: 0; padding: 0;
    border-radius: 999px;
    background: var(--ink-faint);
    cursor: pointer;
  }
}

/* ─── ≤480px: phone-tight tweaks ── */
@media (max-width: 480px) {
  .db-page { padding: 14px var(--space-3) 28px; }
  .db-card { padding: 14px; border-radius: 14px; }

  /* Phone topbar: logo-only — the brand text and a long account name can't both
     fit a 56px header, so the brand wrapped into the bell. Keep the logo mark,
     drop the wordmark, and cap the account name. */
  .db-brand-name { display: none; }
  .db-acct-name { max-width: 130px; }
  .db-page-title-block .db-card-title { font-size: 18px; }
  .db-page-title-block .db-card-sub { font-size: var(--fs-xs); }

  /* Stats stack to a 2-col mini grid */
  .db-grid-2 .db-stat,
  .db-grid-3 .db-stat,
  .db-grid-4 .db-stat,
  .db-grid-5 .db-stat { padding: var(--space-3) 14px; }
  .db-stat-value { font-size: var(--fs-xl); }

  /* Compact nav chips */
  .db-nav-item { padding: 6px 10px; font-size: var(--fs-xs); }
  .db-nav-item svg { width: 16px; height: 16px; }

  /* Buttons take more comfortable hit targets */
  .db-btn, .btn { min-height: 40px; }

  /* Banner padding */
  .db-banner { padding: var(--space-3) 14px; gap: 10px; }

  /* Tables become smaller again */
  .db-table { min-width: 460px; }
  .db-table th, .db-table td { padding: var(--space-2) 6px; font-size: var(--fs-xs); }

  /* Avatar inside head shrinks */
  .db-head-right .db-avatar { width: 28px; height: 28px; font-size: var(--fs-2xs); }
}

/* ==================================================================
   Header-right adaptations (server-rendered): logout is an icon button.
   (2026-05-24)
   ================================================================== */
.db-head-right form { margin: 0; }

/* ==================================================================
   Header chrome fixes + graceful collapse (2026-05-24, UI review)
   ================================================================== */
/* Brand is a link to the home page; no underline/blue. */
.db-brand { text-decoration: none; color: inherit; cursor: pointer; }
a.db-icon-btn { text-decoration: none; }

/* Header logout as a clear labelled pill (not a bare white circle). */
.db-head-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--space-2) 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; margin: 0;
}
.db-head-action:hover { background: var(--surface-sunken); }
.db-head-action svg { width: 15px; height: 15px; }
.db-head-right form { margin: 0; }

/* The cabinet shell is permanently .is-no-detail (no right panel), whose
   2-column rule out-specifies the design's responsive .db-screen rules — so
   re-assert the collapse for it, otherwise the 220px nav stays and the layout
   overflows when the window is shrunk. */
@media (max-width: 860px) {
  /* minmax(0,…), not a plain 1fr: the column must clamp to the viewport. A bare
     1fr carries an implicit min:auto = the nav strip's content min-content
     (~432px), which pushed .db-page past the screen and clipped «Новая запись» +
     the cards on every cabinet page (the shell is permanently .is-no-detail). */
  .db-screen.is-no-detail { grid-template-columns: minmax(0, 1fr); }
  .db-screen.is-no-detail .db-head { grid-template-columns: minmax(0, 1fr) auto; }
  .db-head-action span { display: none; }   /* icon-only on narrow screens */
}

/* ==================================================================
   ===== LANDING (public marketing page, GET /) =====
   Ported from the design package design/source/onboarding.css
   (landing section, 2026-05-26). All tokens already exist in :root.
   ================================================================== */
.lp {
  background: var(--bg);
  min-height: calc(100vh - 50px);
  min-height: calc(100dvh - 50px);
}

/* Top nav */
.lp-nav {
  position: absolute;
  top: 28px; right: 40px;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  z-index: 5;
}
.lp-nav a {
  padding: var(--space-2) 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: background 120ms;
}
.lp-nav a:hover { background: var(--rose-softer); color: var(--rose); }
.lp-nav a.lp-nav-cta {
  background: var(--rose);
  color: #fff;
  font-weight: 600;
}
.lp-nav a.lp-nav-cta:hover { background: var(--rose-hi); color: #fff; }

/* HERO — two columns */
.lp-hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
  min-height: 640px;
  padding: 100px var(--space-8) 80px;
  gap: var(--space-8);
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}
@media (max-width: 980px) {
  .lp-hero { grid-template-columns: 1fr; padding-top: 130px; }
  .lp-nav { right: 16px; top: 16px; gap: 0; }
  .lp-nav a { padding: 6px 10px; font-size: var(--fs-sm); }
}
.lp-hero-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Invited-master banner: when the landing carries an ?ref= invite token, lead
   with the invite context (accent callout) instead of the marketing pitch. */
.lp-invited-banner {
  background: var(--rose-softer);
  border: 1px solid var(--rose-soft);
  border-left: 4px solid var(--rose);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.lp-invited-banner-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--rose-deep);
}
.lp-invited-banner-text {
  font-size: 16px;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
  max-width: 460px;
}
.lp-invited-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.lp-invited-login {
  font-size: 15px;
  font-weight: 600;
  color: var(--rose-deep);
  text-decoration: none;
}
.lp-invited-login:hover {
  text-decoration: underline;
}
.lp-hero-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}
.lp-hero-title {
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0;
}
.lp-hero-title em {
  font-style: normal;
  color: var(--rose);
}
.lp-hero-lead {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  max-width: 460px;
  margin: 0 0 10px;
}
.lp-hero-sub {
  font-size: 18px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 460px;
  margin: 0;
}
.lp-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--rose);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  /* Match .lp-demo-cta exactly: min-height + 0 vertical padding + a 1.5px
     transparent border so both box-models (border-box) render identical height. */
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: inherit;
  width: fit-content;
  transition: all 150ms;
  box-shadow: 0 6px 18px rgba(157, 90, 108, 0.22);
}
.lp-hero-cta:hover {
  background: var(--rose-hi);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(157, 90, 108, 0.28);
}
.lp-hero-cta svg { width: 18px; height: 18px; }
.lp-hero-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
}
.lp-hero-foot::before {
  content: "✓";
  color: var(--good);
  font-weight: 700;
  font-size: 18px;
}

/* "Смотреть демо" — secondary CTA, used in the hero row and under the pain
   block. Pairs with .lp-hero-cta. */
.lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  /* stretch so the filled CTA and the outlined demo button share one height
     (they have different paddings/borders) — they otherwise render unequal. */
  align-items: stretch;
  gap: 14px;
}
.lp-demo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--surface);
  color: var(--rose);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  font-family: inherit;
  /* Same box as .lp-hero-cta → equal height regardless of the ▶ icon. */
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--rose-soft);
  cursor: pointer;
  transition: all 150ms;
}
.lp-demo-cta:hover {
  border-color: var(--rose);
  background: var(--rose-softer);
  transform: translateY(-1px);
}
.lp-demo-cta-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
  font-size: 9px;
  padding-left: 2px;   /* optically centre the ▶ glyph */
}
.lp-pain-actions { margin-top: 28px; }

/* DEMO overlay — clip chooser + in-page iframe player */
.lp-demo[hidden] { display: none; }
.lp-demo {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.lp-demo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 18, 22, 0.62);
  backdrop-filter: blur(4px);
}
.lp-demo-dialog {
  position: relative;
  width: min(960px, 100%);
  max-height: calc(100vh - 48px);
  background: var(--surface);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(30, 18, 22, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: lp-demo-in 180ms ease-out;
}
@keyframes lp-demo-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.lp-demo-x {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: all 150ms;
}
.lp-demo-x:hover { background: rgba(0, 0, 0, 0.12); color: var(--ink); }
/* Chooser */
.lp-demo-pick { padding: 40px 36px 36px; overflow-y: auto; }
.lp-demo-pick-head { text-align: center; margin-bottom: 28px; }
.lp-demo-pick-head h3 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}
.lp-demo-pick-head p { font-size: var(--fs-md); color: var(--ink-2); margin: 0; }
.lp-demo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.lp-demo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  text-align: left;
  padding: 22px 22px 20px;
  background: var(--surface-soft);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: all 150ms;
}
.lp-demo-card:hover {
  border-color: var(--rose-soft);
  background: var(--rose-softer);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(157, 90, 108, 0.14);
}
.lp-demo-card-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-faint);
}
.lp-demo-card-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
  font-size: 14px;
  padding-left: 3px;
}
.lp-demo-card-title { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }
.lp-demo-card-sub { font-size: var(--fs-sm); color: var(--ink-2); }
/* Player — must stay hidden until a clip is picked. .lp-demo-play{display:flex}
   below would otherwise override the [hidden] attribute and leak the empty
   gray stage under the chooser the moment the modal opens. */
.lp-demo-pick[hidden],
.lp-demo-play[hidden] { display: none; }
.lp-demo-play { display: flex; flex-direction: column; min-height: 0; }
.lp-demo-play-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 56px 14px 20px;
  border-bottom: 1px solid var(--line);
}
.lp-demo-back {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  border: 0;
  background: transparent;
  color: var(--rose);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  padding: var(--space-1) 6px;
  border-radius: 8px;
}
.lp-demo-back:hover { background: var(--rose-softer); }
.lp-demo-play-title {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}
.lp-demo-stage { flex: 1; min-height: 0; background: var(--bg); position: relative; }
.lp-demo-stage::after {           /* spinner behind the iframe while the clip loads */
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid rgba(157, 90, 108, 0.25);
  border-top-color: var(--rose);
  border-radius: 50%;
  animation: lp-demo-spin 0.8s linear infinite;
}
@keyframes lp-demo-spin { to { transform: rotate(360deg); } }
.lp-demo-frame {
  display: block;
  position: relative;            /* sits above the spinner; opaque once loaded */
  z-index: 1;
  width: 100%;
  height: min(70vh, 720px);
  border: 0;
}
@media (max-width: 640px) {
  .lp-demo { padding: 0; }
  .lp-demo-dialog {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .lp-demo-grid { grid-template-columns: 1fr; }
  .lp-demo-pick { padding: var(--space-6) 20px var(--space-5); }
  .lp-demo-frame { height: calc(100vh - 56px); }
}

/* HERO visual — 3-phone composition (inspired by glossy magazine ad style) */
.lp-hero-visual {
  position: relative;
  height: 600px;
  perspective: 1400px;
}

/* Generic iPhone-style phone frame — real iPhone 9:19.5 aspect ratio */
.lp-iphone {
  position: absolute;
  background: #0a0a0a;
  border-radius: 36px;
  padding: 10px;
  aspect-ratio: 9 / 19.5;
  display: flex;
  box-shadow: 0 30px 60px rgba(40, 25, 30, 0.16);
  overflow: hidden;   /* keep the 9:19.5 frame: clip the mock screen, never let it grow the bezel */
}
.lp-iphone-screen {
  flex: 1;
  min-height: 0;   /* let the screen be clipped to the aspect-ratio frame instead of
                      stretching it to its (taller) chat content — Safari needs this */
  background: var(--surface);
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  position: relative;
  display: flex;
  flex-direction: column;
}
.lp-iphone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 22px;
  background: #0a0a0a;
  border-radius: 999px;
  z-index: 3;
}
.lp-iphone-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
}
.lp-iphone-statusbar-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: -1px;
}

/* Phone 1: Client booking — animated flow */
.lp-phone-1 {
  width: 240px;
  bottom: 30px;
  left: 0;
  transform: rotate(-6deg) translateZ(-20px);
  z-index: 1;
}
.lp-phone-1-content {
  padding: 36px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}
.lp-phone-1-title { font-size: 14px; font-weight: 700; line-height: 1.2; }
.lp-phone-1-sub { font-size: 10.5px; color: var(--ink-3); margin-top: -8px; }

/* Day selector chips */
.lp-day-chips {
  display: flex;
  gap: 5px;
  overflow: hidden;
}
.lp-day-chip {
  flex: 1;
  background: var(--surface-sunken);
  border-radius: 10px;
  text-align: center;
  padding: var(--space-2) 0;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lp-day-chip-d { color: var(--ink-3); font-size: 9px; }
.lp-day-chip-n { color: var(--ink); font-weight: 700; font-size: var(--fs-sm); }
.lp-day-chip.is-active {
  background: var(--rose);
}
.lp-day-chip.is-active .lp-day-chip-d,
.lp-day-chip.is-active .lp-day-chip-n { color: #fff; }

/* Slot list */
.lp-slot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--fs-2xs);
  font-weight: 600;
}
.lp-slot.is-picked {
  background: var(--rose);
  color: #fff;
  border-color: var(--rose);
  box-shadow: 0 4px 10px rgba(157, 90, 108, 0.25);
}
.lp-slot-dur { font-size: 9px; opacity: 0.7; font-weight: 500; }
.lp-confirm-btn {
  margin-top: auto;
  background: var(--rose);
  color: #fff;
  border-radius: 12px;
  padding: 11px;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-xs);
}

/* Phone 2: Master view — plan day */
.lp-phone-2 {
  width: 260px;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) translateZ(40px);
  z-index: 3;
}
.lp-phone-2 .lp-iphone-screen {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.45) 100%),
    linear-gradient(135deg, #c98ea3, #ecd7b8);
  position: relative;
}
.lp-phone-2-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 240, 220, 0.5) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(157, 90, 108, 0.3) 0%, transparent 55%);
}
.lp-phone-2-time {
  position: absolute;
  top: 60px;
  left: 0; right: 0;
  text-align: center;
  color: #fff;
  z-index: 2;
}
.lp-phone-2-time-big {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.lp-phone-2-time-date {
  font-size: var(--fs-sm);
  margin-top: var(--space-1);
  opacity: 0.95;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.lp-notif {
  position: absolute;
  left: 12px; right: 12px;
  bottom: 90px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: var(--space-3) 14px;
  display: flex;
  gap: 10px;
  z-index: 2;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.lp-notif-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--rose);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.lp-notif-icon svg { width: 14px; height: 14px; }
.lp-notif-body { flex: 1; min-width: 0; }
.lp-notif-title { font-size: var(--fs-2xs); font-weight: 700; color: var(--ink); }
.lp-notif-text { font-size: 10.5px; color: var(--ink-2); margin-top: 1px; line-height: 1.3; }
.lp-notif-time {
  font-size: 9.5px;
  color: var(--ink-3);
  margin-left: auto;
  flex-shrink: 0;
}
.lp-phone-2-bottom {
  position: absolute;
  left: 0; right: 0;
  bottom: 8px;
  text-align: center;
  z-index: 2;
}
.lp-phone-2-bottom-line {
  width: 110px; height: 4px;
  background: rgba(255,255,255,0.8);
  border-radius: 3px;
  margin: 0 auto;
}

/* Phone 3: Master view — new booking */
.lp-phone-3 {
  width: 240px;
  bottom: 40px;
  right: 0;
  transform: rotate(6deg) translateZ(-20px);
  z-index: 1;
}
.lp-phone-3-content {
  padding: 36px var(--space-4) 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.lp-phone-3-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.lp-phone-3-head-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--good);
  margin-left: 6px;
  box-shadow: 0 0 0 4px rgba(107, 138, 109, 0.18);
  display: inline-block;
  vertical-align: middle;
}
.lp-bk-card {
  background: linear-gradient(135deg, var(--rose-softer), var(--surface));
  border-radius: 14px;
  padding: var(--space-3);
  border: 1px solid var(--rose-soft);
}
.lp-bk-row1 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.lp-bk-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-soft), var(--cream-soft));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--rose);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.lp-bk-name { font-size: var(--fs-xs); font-weight: 700; }
.lp-bk-time { font-size: 10px; color: var(--ink-3); }
.lp-bk-svc {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--rose-soft);
  font-size: 10.5px;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
}
.lp-bk-svc b { color: var(--rose); }
.lp-mini-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.lp-mini-stat {
  background: var(--surface-sunken);
  border-radius: 10px;
  padding: var(--space-2) 10px;
}
.lp-mini-stat-label { font-size: 9px; color: var(--ink-3); font-weight: 500; }
.lp-mini-stat-value { font-size: 16px; font-weight: 700; line-height: 1.1; margin-top: 1px; }
.lp-mini-stat-value small { font-size: 9px; color: var(--ink-3); font-weight: 500; }

/* Floating annotation pin (above) */
.lp-pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: 6px 14px 6px 10px;
  box-shadow: 0 10px 22px rgba(40,25,30,0.12);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  z-index: 5;
  white-space: nowrap;
}
.lp-pin::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 3px var(--rose-softer);
}

@media (max-width: 980px) {
  /* One phone on mobile = the ANIMATED client-booking flow (phone-1), centered
     & upright. The static menu phone (2) and notification phone (3) are hidden.
     Explicit height (not just aspect-ratio) so iOS Safari can't stretch the
     bezel to fit the tall chat — its aspect-ratio+flex sizing is unreliable. */
  .lp-hero-visual { height: 520px; }
  .lp-phone-2, .lp-phone-3 { display: none; }
  .lp-phone-1 {
    display: flex;
    /* aspect-ratio:auto is REQUIRED: with the base 9/19.5 aspect-ratio left on,
       iOS Safari (WebKit) ignores the explicit width and grows the flex bezel to
       its chat content's min-width (~257px → too wide). Explicit width+height
       below define the frame; auto disables the conflicting ratio. (Chromium
       honours the explicit width either way — this only bites WebKit.) */
    aspect-ratio: auto;
    width: 230px; height: 498px;   /* 230 × 19.5/9 ≈ 498 */
    left: 50%; right: auto; top: 0; bottom: auto;
    transform: translateX(-50%);
  }
  /* Pins reference the side phones — hide when they're hidden */
  .lp-pin { display: none; }
}

/* PAIN section (текст + фото) */
.lp-pain {
  background: var(--surface-soft);
  padding: 100px var(--space-8);
}
.lp-pain-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
/* Grid items must be allowed to shrink below their content min-content, else the
   non-shrinking divider flourishes (2×220px) force the 1fr track to ~596px and
   the page scrolls sideways on mobile. */
.lp-pain-grid > * { min-width: 0; }
@media (max-width: 980px) { .lp-pain-grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.lp-pain-text h2 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 22px;
}
.lp-pain-text p {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 var(--space-4);
}
.lp-pain-text strong { color: var(--ink); font-weight: 600; }
.lp-pain-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(40, 25, 30, 0.12);
}
.lp-pain-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.lp-photo-overlay {
  position: absolute;
  bottom: 28px; left: 24px; right: 24px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: var(--space-4) 18px;
  font-size: var(--fs-md);
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(40,25,30,0.08);
}
.lp-photo-overlay span { color: var(--rose); }

/* PLANS section */
.lp-plans {
  padding: 100px var(--space-8) 80px;
  background: var(--bg);
}
.lp-plans-wrap {
  max-width: 1240px;
  margin: 0 auto;
}
.lp-plans-head {
  text-align: center;
  margin-bottom: var(--space-8);
}
.lp-plans-head h2 {
  font-size: 36px;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 var(--space-3);
}
.lp-plans-head p {
  font-size: 16px;
  color: var(--ink-2);
  margin: 0;
}
.lp-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 900px) { .lp-plan-grid { grid-template-columns: 1fr; } }

/* Final CTA */
.lp-final {
  padding: 80px var(--space-8) 80px;
  text-align: center;
  background: var(--surface-soft);
}
.lp-final h2 {
  font-size: 40px;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 var(--space-3);
}
.lp-final p {
  font-size: 16px;
  color: var(--ink-2);
  margin: 0 0 28px;
}

/* Footer — light & slim (shared by landing / login / register). Replaces the
   old dark marketing slab; same legal line as the cabinet footer. */
.lp-foot-lite {
  border-top: 1px solid var(--line);
  padding: 26px var(--space-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  background: var(--surface-soft);
}
.lp-foot-lite a { color: var(--ink-2); text-decoration: none; }
.lp-foot-lite a:hover { color: var(--rose); text-decoration: underline; }

/* Section divider — eyebrow label flanked by a small art-deco flourish */
.lp-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: 18px;
  color: var(--rose);
}
.lp-divider span {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--rose);
}
.lp-divider-flourish {
  width: 220px;
  max-width: 100%;
  height: 12px;
  display: block;
  flex-shrink: 1;   /* scale the SVG flourish down on narrow screens (was 0 → caused mobile overflow) */
  min-width: 0;
}
.lp-divider-flourish.is-left { transform: scaleX(-1); }

/* =========================================================
   TELEGRAM BOT MOCK — phones in hero
   Light theme, rose chat wallpaper, no top photo.
   ========================================================= */
.lp-tg {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  background: var(--rose-softer);
  overflow: hidden;
}
/* Subtle wallpaper texture using stacked radial gradients (no photo) */
.lp-tg::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.65) 0%, transparent 32%),
    radial-gradient(circle at 82% 28%, rgba(255,255,255,0.4) 0%, transparent 38%),
    radial-gradient(circle at 50% 78%, rgba(157, 90, 108, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 12% 92%, rgba(236, 215, 184, 0.35) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

/* Status bar (light) */
.lp-tg-status {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px var(--space-1);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink);
}
.lp-tg-status-icons {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 10px;
  letter-spacing: -1px;
}

/* Telegram-style header */
.lp-tg-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px var(--space-2);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(157, 90, 108, 0.1);
}
.lp-tg-back {
  font-size: 14px;
  color: var(--rose);
  width: 16px;
  text-align: center;
  font-weight: 600;
  line-height: 1;
}
.lp-tg-bot-avatar {
  width: 28px; height: 28px;
  background: url("/static/brand-mark.png") no-repeat center / contain;
  color: transparent;
  font-size: 0;
  flex-shrink: 0;
}
.lp-tg-bot-meta {
  flex: 1;
  min-width: 0;
  line-height: 1.1;
}
.lp-tg-bot-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-tg-bot-status {
  font-size: 9px;
  color: var(--good);
  margin-top: 1px;
  font-weight: 500;
}
.lp-tg-head-more {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-1);
}
.lp-tg-head-more::before,
.lp-tg-head-more::after { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
.lp-tg-head-more span { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }

/* Chat scroll area */
.lp-tg-chat {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 10px var(--space-2) 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

/* Day separator pill */
.lp-tg-daysep {
  align-self: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 2px 9px;
  border-radius: 9px;
  margin: 2px 0;
}

/* Bot message bubble (left) */
.lp-tg-msg {
  align-self: flex-start;
  max-width: 88%;
  background: var(--surface);
  border-radius: 14px 14px 14px 4px;
  padding: 7px 10px 6px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(40, 25, 30, 0.06);
  position: relative;
}
.lp-tg-msg-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.lp-tg-msg-time {
  font-size: 8.5px;
  color: var(--ink-3);
  font-weight: 500;
  flex-shrink: 0;
}
.lp-tg-msg b { font-weight: 700; }

/* User message bubble (right) */
.lp-tg-msg.is-user {
  align-self: flex-end;
  background: var(--rose);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 2px 6px rgba(157, 90, 108, 0.25);
}
.lp-tg-msg.is-user .lp-tg-msg-time { color: rgba(255,255,255,0.75); }

/* Reply keyboard / menu grid (Telegram custom keyboard) */
.lp-tg-keyboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-top: var(--space-1);
}

/* Persistent reply keyboard bar — sits above the composer */
.lp-tg-kb-bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  padding: 6px var(--space-2) var(--space-1);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(157, 90, 108, 0.08);
}
.lp-tg-key {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  padding: 7px 6px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  line-height: 1.1;
  border: 1px solid rgba(157,90,108,0.06);
}
.lp-tg-key-ico { font-size: var(--fs-2xs); line-height: 1; }

/* Inline buttons attached to a message bubble */
.lp-tg-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-top: 6px;
}
.lp-tg-inline-1col { grid-template-columns: 1fr; }
.lp-tg-inline-btn {
  background: var(--rose-softer);
  color: var(--rose);
  border-radius: 7px;
  padding: 5px 6px;
  font-size: 9.5px;
  font-weight: 600;
  text-align: center;
  border: 1px solid rgba(157,90,108,0.12);
}
.lp-tg-inline-btn.is-primary {
  background: var(--rose);
  color: #fff;
  border-color: var(--rose);
}

/* Day chips and slot chips inside bot messages */
.lp-tg-days {
  display: flex;
  gap: 3px;
  margin-top: 6px;
}
.lp-tg-day {
  flex: 1;
  background: var(--rose-softer);
  border-radius: 7px;
  padding: var(--space-1) 0 5px;
  text-align: center;
  font-size: 8.5px;
  color: var(--ink-3);
  font-weight: 600;
  line-height: 1.15;
}
.lp-tg-day b { display: block; font-size: var(--fs-2xs); color: var(--ink); font-weight: 700; }
.lp-tg-day.is-active {
  background: var(--rose);
  color: rgba(255,255,255,0.75);
  box-shadow: 0 3px 8px rgba(157,90,108,0.25);
}
.lp-tg-day.is-active b { color: #fff; }

.lp-tg-slots {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-1);
  margin-top: 5px;
}
.lp-tg-slot {
  background: var(--rose-softer);
  border-radius: 6px;
  padding: 5px 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--rose);
}
.lp-tg-slot.is-active {
  background: var(--rose);
  color: #fff;
}

/* Booking summary card inside a message */
.lp-tg-bk {
  background: linear-gradient(135deg, var(--rose-softer), var(--surface));
  border-radius: 10px;
  margin-top: 5px;
  border: 1px solid rgba(157,90,108,0.12);
  padding: var(--space-2) 10px;
}
.lp-tg-bk-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lp-tg-bk-av {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-soft), var(--cream-soft));
  color: var(--rose);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lp-tg-bk-name { font-size: 10.5px; font-weight: 700; color: var(--ink); }
.lp-tg-bk-meta { font-size: 9px; color: var(--ink-3); margin-top: 1px; }
.lp-tg-bk-line {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(157,90,108,0.18);
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-2);
}
.lp-tg-bk-line b { color: var(--rose); font-weight: 700; }

/* Composer (bottom input bar) */
.lp-tg-composer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px 10px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(157, 90, 108, 0.1);
  /* match screen radius so backdrop-filter doesn't escape rounded clip */
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}
.lp-tg-menu-pill {
  background: var(--rose);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 5px 9px;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.lp-tg-menu-pill-ico {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.lp-tg-menu-pill-ico span {
  display: block;
  width: 8px; height: 1.5px;
  border-radius: 1px;
  background: #fff;
}
.lp-tg-input {
  flex: 1;
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: 5px 10px;
  font-size: 10px;
  color: var(--ink-3);
  border: 1px solid rgba(157, 90, 108, 0.12);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lp-tg-mic {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--fs-2xs);
}
.lp-tg-mic svg { width: 11px; height: 11px; }

/* Override existing dark gradient on phone-2 so TG mock shows correctly */
.lp-phone-2 .lp-iphone-screen {
  background: var(--surface) !important;
}

/* =========================================================
   PHONE-1 BOOKING FLOW ANIMATION
   Cycles through: menu → day picker → time picker → confirm
   ========================================================= */

/* Stage transition — fade + small lift each time chat is keyed */
.lp-tg-chat.is-anim {
  animation: lpStageIn 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reply keyboard pinned at the TOP of the chat (right phone) */
.lp-tg-kb-bar.is-top {
  border-top: 0;
  border-bottom: 1px solid rgba(157, 90, 108, 0.08);
  padding: 6px var(--space-2) 7px;
  background: rgba(255, 255, 255, 0.55);
}

/* New-booking message — slides in from above when Andrey confirms */
.lp-tg-newbk {
  align-self: stretch;
  max-width: 100%;
  animation: lpNewBookingIn 520ms cubic-bezier(0.22, 1, 0.36, 1);
  border: 1px solid rgba(157, 90, 108, 0.18);
  box-shadow: 0 6px 16px -6px rgba(157, 90, 108, 0.28);
}
@keyframes lpNewBookingIn {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.94); }
  60%  { opacity: 1; transform: translateY(2px) scale(1.01); }
  100% { opacity: 1; transform: none; }
}
@keyframes lpStageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tap pulse — applied to the cell/button the user "presses" */
.lp-tap-pulse {
  position: relative;
  animation: lpTapPulse 1100ms ease-in-out infinite;
}
@keyframes lpTapPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(157, 90, 108, 0.55); transform: scale(1); }
  55%      { box-shadow: 0 0 0 6px rgba(157, 90, 108, 0); transform: scale(1.04); }
}

/* Day picker grid (4 cols) */
.lp-tg-days-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-top: 5px;
}
.lp-tg-day-cell {
  background: var(--rose-softer);
  border-radius: 6px;
  padding: 5px 0;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--rose);
  line-height: 1.1;
  border: 1px solid rgba(157, 90, 108, 0.1);
}
.lp-tg-day-cell.is-tap {
  background: var(--rose);
  color: #fff;
  border-color: var(--rose);
}

/* Time picker grid (4 cols, denser) */
.lp-tg-times-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-top: 5px;
}
.lp-tg-time-cell {
  background: var(--rose-softer);
  border-radius: 5px;
  padding: var(--space-1) 0;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--rose);
  line-height: 1.1;
  border: 1px solid rgba(157, 90, 108, 0.1);
}
.lp-tg-time-cell.is-tap {
  background: var(--rose);
  color: #fff;
  border-color: var(--rose);
}

/* Confirm details block */
.lp-tg-confirm {
  margin-top: var(--space-1);
  font-size: 10px;
  line-height: 1.6;
  color: var(--ink);
}
.lp-tg-confirm-label { color: var(--ink-3); font-size: 9px; }

/* Stage progress dots — overlay at bottom of phone-1, subtle */
.lp-tg-progress {
  position: absolute;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-1);
  z-index: 4;
  pointer-events: none;
}
.lp-tg-progress-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(157, 90, 108, 0.25);
  transition: all 250ms ease;
}
.lp-tg-progress-dot.is-on {
  background: var(--rose);
  width: 16px;
  border-radius: 3px;
}

/* ---- Onboarding vertical picker ---- */
.onb-vert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.onb-vert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 20px var(--space-3);
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  transition: border-color 150ms, background 150ms;
  position: relative;
}
.onb-vert-card:hover { border-color: var(--rose-mid, var(--rose)); }
.onb-vert-card.is-selected {
  border-color: var(--rose);
  background: var(--rose-softer);
}
.onb-vert-icon {
  width: 48px;
  height: 48px;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Keep tiles square-shouldered: top-align content and reserve a uniform 2-line
   label area so 1-line and 2-line labels don't shift the icon row (owner:
   «кривое расположение плиток»). */
.onb-vert-card { justify-content: flex-start; }
.onb-vert-card > span:last-child {
  display: flex; align-items: center; justify-content: center;
  min-height: 2.6em; line-height: 1.25;
}

/* Onboarding services step — quick-pick presets (P6-1) */
.onb-presets { margin: 2px 0 18px; }
.onb-presets-hint { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--space-2); }
.onb-presets-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.onb-presets-chips .db-chip { cursor: pointer; font-family: inherit; font-size: var(--fs-sm); }

/* Onboarding services step — list of already-added services */
.onb-svc-list {
  margin-bottom: var(--space-4);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.onb-svc-list-head {
  padding: var(--space-2) 14px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
  background: var(--surface-sunken);
}
.onb-svc-list ul { list-style: none; margin: 0; padding: 0; }
.onb-svc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}
.onb-svc-name { font-weight: 500; color: var(--ink); }
.onb-svc-meta { font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.onb-svc-hint {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  text-align: center;
}

/* Onboarding link step — the /link code block */
.onb-link-code {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-sunken);
  text-align: center;
}
.onb-link-cmd {
  display: inline-block;
  margin-top: 6px;
  padding: 6px var(--space-3);
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  user-select: all;
}

/* =========================================================
   MOBILE — tablet & phone breakpoints
   ========================================================= */

/* ---------- Tablet (≤768px) ---------- */
@media (max-width: 768px) {
  /* Stage switcher chrome */
  .onb-stage-switcher {
    padding: 10px 14px;
    font-size: var(--fs-2xs);
  }

  /* ───── AUTH (register / verify / login) ───── */
  .onb-auth-right {
    padding: 28px 18px 40px;
    align-items: flex-start;
  }
  .onb-form { max-width: 100%; }
  .onb-h { font-size: var(--fs-2xl); }

  /* Two-up password row → stack */
  .db-form-row {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Verify card */
  .onb-form .db-card { padding: 14px; }

  /* ───── PLANS PAGE (post-register choice) ───── */
  .onb-plans-head {
    padding: 14px var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .onb-plans-body { padding: var(--space-5) var(--space-4) var(--space-8); }

  /* ───── WIZARD ───── */
  .onb-wiz {
    grid-template-columns: minmax(0, 1fr);
    min-height: calc(100vh - 50px);
    min-height: calc(100dvh - 50px);
  }
  .onb-wiz-side {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px var(--space-4);
    position: sticky;
    top: 41px;
    z-index: 10;
    background: var(--surface-soft);
    min-width: 0;
  }
  /* Steps go horizontal, scrollable */
  .onb-wiz-steps {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    margin: 0 -var(--space-4);
    padding: 0 var(--space-4) var(--space-1);
    scrollbar-width: none;
  }
  .onb-wiz-steps::-webkit-scrollbar { display: none; }
  .onb-wiz-step {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--line);
  }
  .onb-wiz-step.is-active {
    border-color: var(--rose-hi);
    box-shadow: none;
  }
  .onb-wiz-num {
    width: 22px; height: 22px;
    font-size: var(--fs-2xs);
  }
  /* Hide section heading + footer in compact mode */
  .onb-wiz-side > .db-mute,
  .onb-wiz-side-foot { display: none; }

  .onb-wiz-main { padding: var(--space-5) var(--space-4) 40px; min-width: 0; overflow-x: hidden; }

  /* Collapse all multi-col grid helpers inside wizard */
  .onb-wiz-main .db-grid-2,
  .onb-wiz-main .db-grid-3,
  .onb-wiz-main .db-grid-4,
  .onb-wiz-main .db-grid-2-3,
  .onb-wiz-main .db-grid-3-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Cards inside wizard — no min-width spill */
  .onb-wiz-main .db-card { min-width: 0; }
  /* Telegram blue widget — let it wrap */
  .onb-wiz-main .onb-tg-widget {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
  /* Generic buttons inside wizard go full width to avoid overshoot */
  .onb-wiz-main .db-btn { max-width: 100%; }

  /* Rows with input+button or multiple buttons → wrap */
  .onb-wiz-main .db-row { flex-wrap: wrap; }
  .onb-wiz-main .db-form-input { min-width: 0; max-width: 100%; }

  /* Step head + actions */
  .onb-step-head { margin-bottom: 18px; }
  .onb-step-head .onb-h { font-size: 22px; }
  .onb-step-actions {
    flex-direction: column-reverse;
    gap: 10px;
    margin-top: 22px;
  }
  .onb-step-actions .db-btn { width: 100%; justify-content: center; }

  /* Vertical chooser 4 → 2 cols */
  .onb-vert-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .onb-vert-card { padding: var(--space-4) 10px; font-size: var(--fs-sm); }
  .onb-vert-icon { width: 40px; height: 40px; font-size: var(--fs-xl); }

  /* Preset list → single column */
  .onb-preset-grid { grid-template-columns: 1fr; }

  /* Telegram code input — smaller cells */
  .onb-code-cell { padding: var(--space-3) 0; font-size: 18px; }
  .onb-code-input { gap: 6px; }

  /* ───── LANDING ───── */
  .lp-nav {
    top: 12px;
    right: 12px;
    left: 12px;
    justify-content: flex-end;
  }
  .lp-nav a { padding: 6px 9px; font-size: var(--fs-xs); }
  .lp-nav { gap: 2px; }
  /* Keep «Войти» + register CTA on phones; only the in-page #tariffs scroll
     link is dropped (no anchor target during the free launch anyway). */
  .lp-nav a.lp-nav-anchor { display: none; }

  .lp-hero {
    padding: 88px 18px 56px;
    gap: 28px;
    min-height: auto;
  }
  .lp-hero-title { font-size: 38px; }
  .lp-hero-sub { font-size: 16px; }
  .lp-hero-cta {
    padding: 14px 22px;
    font-size: var(--fs-md);
    width: 100%;
    justify-content: center;
  }
  .lp-hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .lp-demo-cta { width: 100%; justify-content: center; padding: 14px 22px; font-size: var(--fs-md); }
  .lp-hero-foot { font-size: var(--fs-xs); gap: 10px; flex-wrap: wrap; }
  /* phone-1 stays 230×498 (the ≤980 rule): the Telegram-mock content has a
     ~230px min width, so a narrower frame would clip the keyboard keys. */
  .lp-pin { display: none; }

  /* Pain section */
  .lp-pain { padding: 56px 18px; }
  .lp-pain-grid { gap: var(--space-5); }
  .lp-pain-text h2 { font-size: 28px; margin-bottom: 14px; }
  .lp-pain-text p { font-size: var(--fs-md); }
  .lp-pain-photo { aspect-ratio: 4 / 4; }
  .lp-photo-overlay {
    bottom: 16px; left: 14px; right: 14px;
    padding: var(--space-3) 14px;
    font-size: var(--fs-sm);
  }

  /* Plans section */
  .lp-plans { padding: 56px 18px var(--space-8); }
  .lp-plans-head { margin-bottom: 28px; }
  .lp-plans-head h2 { font-size: 28px; }
  .lp-plans-head p { font-size: var(--fs-md); }
  .lp-plan-grid { gap: 14px; }
  .db-plan.onb-bot-card { padding: 18px; }

  /* Final CTA */
  .lp-final { padding: 56px 18px 80px; }
  .lp-final h2 { font-size: var(--fs-3xl); }
  .lp-final p { font-size: var(--fs-md); }
  .lp-final .lp-hero-cta { width: auto; }

  .lp-foot-lite { padding: 22px var(--space-4); }
}

/* ---------- Small phones (≤480px) ---------- */
@media (max-width: 480px) {
  .lp-hero { padding: 80px var(--space-4) 40px; }
  .lp-hero-title { font-size: 32px; line-height: 1.08; }
  .lp-hero-sub { font-size: var(--fs-md); }
  /* phone-1 keeps 230×498 down to the smallest phones — narrower clips the mock
     content (see ≤980 rule); 230 fits a 320px viewport with margin. */

  .lp-pain-text h2,
  .lp-plans-head h2 { font-size: var(--fs-2xl); }
  .lp-final h2 { font-size: 26px; }

  .onb-auth-right { padding: var(--space-5) 14px 36px; }
  .onb-h { font-size: 22px; }

  /* Vertical chooser → still 2 cols, smaller */
  .onb-vert-card { padding: 14px var(--space-2); font-size: var(--fs-xs); }
  .onb-vert-icon { width: 36px; height: 36px; font-size: 18px; }

  /* Code cells — compact */
  .onb-code-cell { font-size: 16px; padding: 10px 0; }
}


/* ===== tariff pills ===== */
/* Honeycomb plan badges (basic/pro/premium). Icon SVGs use currentColor and
   are served from /static/tariff-<code>.svg. Rendered via the
   _tariff.html `tariff_pill` macro on billing / admin_plans / landing. */
.tariff-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 7px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;  /* equal box metrics across all variants */
  border-radius: var(--r-sm);
}
.tariff-pill img {
  width: 16px;
  height: 16px;
  display: block;
}
.tariff-pill.is-basic {
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
}
.tariff-pill.is-pro {
  color: var(--rose);
  background: var(--rose-softer);
  border: 1px solid var(--rose-soft);
}
.tariff-pill.is-premium {
  color: #fff;
  background: var(--rose);
}

/* ===== feature-lock pattern + upgrade modal (ported from design/tariff.css) ===== */
/* Inline lock chip — next to a feature label */
.t-lock-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--rose-softer); color: var(--rose);
  border: 1px solid var(--rose-soft);
  padding: 3px 9px 3px 7px; border-radius: 999px;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.02em;
  cursor: pointer; transition: background 120ms; vertical-align: middle;
  text-decoration: none;
}
.t-lock-chip:hover { background: var(--rose-soft); }
.t-lock-chip .lock-ic { width: 10px; height: 10px; }
.t-lock-chip .hc { width: 11px; height: 11px; }

/* Wrapper that locks an arbitrary block: dims content + floating badge */
.t-locked { position: relative; }
.t-locked.is-locked > .t-locked-content {
  /* Blur (not just dim) so the gated content reads as an obscured premium
     preview behind the unlock badge, rather than broken/empty placeholder
     rows (design-audit P7-LIVE #6). */
  opacity: 0.5; pointer-events: none; filter: blur(3px) grayscale(0.4); user-select: none;
}
.t-locked-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  cursor: pointer; z-index: 2; text-decoration: none;
}
.t-locked-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: #fff; border: 1px solid var(--rose-soft); border-radius: 999px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3); font-size: var(--fs-sm); font-weight: 700; color: var(--rose);
  box-shadow: 0 8px 24px rgba(157, 90, 108, 0.18); transition: transform 120ms;
}
.t-locked:hover .t-locked-badge { transform: translateY(-1px) scale(1.02); }
.t-locked-badge .lock-ic { width: 14px; height: 14px; }
.t-locked-badge .hc { width: 16px; height: 16px; }

/* Locked row — full-width upsell strip (replaces a gated section) */
.t-locked-row {
  position: relative; border: 1px dashed var(--rose-soft); background: var(--surface);
  border-radius: 12px; padding: var(--space-3) var(--space-4) var(--space-3) 14px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
  cursor: pointer; transition: background 120ms; text-decoration: none;
}
.t-locked-row:hover { background: var(--rose-softer); }
.t-locked-row .lr-icon {
  width: 28px; height: 28px; background: var(--rose-softer); color: var(--rose);
  border-radius: 8px; display: grid; place-items: center;
}
.t-locked-row .lr-icon svg { width: 14px; height: 14px; }
.t-locked-row .lr-title { font-weight: 600; font-size: 13.5px; color: var(--ink); display: block; }
.t-locked-row .lr-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; display: flex; align-items: center; gap: 5px; }
.t-locked-row .lr-cta {
  background: var(--rose); color: #fff; border: 0; padding: 6px var(--space-3);
  border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}

/* Upgrade modal (HTMX-injected into #modal-root) */
.t-modal-backdrop {
  position: fixed; inset: 0; background: rgba(30, 20, 24, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 9000; display: grid; place-items: center; padding: var(--space-5);
  animation: t-fade 160ms ease;
}
@keyframes t-fade { from { opacity: 0; } to { opacity: 1; } }
.t-modal {
  background: var(--surface); border-radius: 22px; width: min(520px, 100%);
  box-shadow: 0 30px 80px rgba(40, 25, 30, 0.35); overflow: hidden;
  animation: t-rise 220ms cubic-bezier(.2,.9,.3,1.1);
}
@keyframes t-rise {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.t-modal-hero {
  background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: var(--on-rose);
  padding: var(--space-6) 28px 26px; position: relative; text-align: center;
}
.t-modal-hero .ring {
  width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.15);
  margin: 0 auto var(--space-4); display: grid; place-items: center; position: relative;
}
.t-modal-hero .ring img { width: 52px; height: 52px; }
.t-modal-hero h3 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.t-modal-hero p { margin: 0 auto; font-size: var(--fs-sm); color: rgba(255,255,255,.85); max-width: 36ch; line-height: 1.5; }
.t-modal-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(255,255,255,.18); border: 0; color: #fff;
  cursor: pointer; display: grid; place-items: center; font-size: 16px; line-height: 1;
  padding: 0; box-sizing: border-box; font-family: inherit;
}
.t-modal-close:hover { background: rgba(255,255,255,.28); }
.t-modal-body { padding: var(--space-5) 28px 22px; }
.t-modal-body h4 {
  margin: 0 0 var(--space-3); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}
.t-modal-feat { list-style: none; padding: 0; margin: 0 0 22px; }
.t-modal-feat li { position: relative; padding: 7px 0 7px 26px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.t-modal-feat li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 12px; height: 13px;
  background: var(--rose); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.t-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Modal actions use the canonical .db-btn (was a parallel .t-modal-btn system,
   design-audit P4-1). The grid cell just needs full width + a touch target; the
   <a> and <button> both being .db-btn already render as identical boxes. */
.t-modal-actions > .db-btn { width: 100%; min-height: 44px; }
.t-modal-price { text-align: center; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 14px; }
.t-modal-price b { color: var(--ink); font-size: var(--fs-sm); }

/* ==================================================================
   ADMIN PANEL  (shell + nav + forms)  — 2026-05-26
   The /admin pages render into a centered shell with a persistent
   section nav. Reuses the cabinet tokens; rectangular controls only
   (no pill-shaped .db-input on form fields here).
   ================================================================== */
/* Redesign port (Фаза 9): dark left-sidebar ops console. The shell is a grid —
   a dark sidebar (brand + vertical nav + logout foot) and the content column.
   Inherited by every /admin page via admin_base.html ({% block admin_content %}). */
.adm-shell {
  display: grid;
  grid-template-columns: 236px 1fr;
  min-height: 100vh;
}
.adm-side {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #2a2226;
  color: rgba(255, 255, 255, 0.82);
  padding: var(--space-4) var(--space-3);
}
.adm-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px var(--space-2) var(--space-4);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.adm-brand img { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; }
.adm-brand-name { display: flex; flex-direction: column; line-height: 1.15; }
.adm-brand-sub {
  color: var(--rose-hi); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; margin-top: 2px;
}
/* Section nav — vertical list in the dark sidebar */
.adm-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  overflow-y: auto;
}
.adm-nav-item {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms, color 120ms;
}
.adm-nav-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.adm-nav-item.is-active { background: var(--rose); color: #fff; }
.adm-side-foot {
  padding-top: var(--space-3);
  margin-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.adm-side-foot .db-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
}
.adm-side-foot .db-btn:hover { background: rgba(255, 255, 255, 0.15); }

/* Fluid: wide tables (tenants) should use the whole window; min-width: 0 lets
   the grid column shrink so inner overflow-x wrappers can scroll instead of
   pushing the page wide. */
.adm-main { padding: var(--space-5); min-width: 0; padding-bottom: var(--space-8); }
/* Generic horizontal-scroll wrapper for wide admin tables. */
.adm-tbl-scroll { overflow-x: auto; }
/* A stat number that drills down into a filtered tenant list. */
.adm-statlink {
  color: inherit; text-decoration: none;
  border-bottom: 1px dashed var(--line-2);
  cursor: pointer;
}
.adm-statlink:hover, .adm-statlink:focus-visible { color: var(--rose); border-bottom-color: var(--rose); }

/* Page header inside the shell */
.adm-head { margin-bottom: 20px; }
.adm-head h1 { margin: 0 0 var(--space-1); }
.adm-head .muted { margin: 0; }

/* Consistent card grids */
.adm-cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 720px) { .adm-cards { grid-template-columns: 1fr; } }

/* Tariff configurator — three plan columns side by side for easy
   horizontal comparison. Collapses to one column on narrow screens. */
.adm-plan-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  margin-bottom: 20px;
}
@media (max-width: 920px) { .adm-plan-grid { grid-template-columns: 1fr; max-width: 480px; } }

.adm-plan {
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
}
.adm-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: var(--space-1);
}
.adm-plan-code { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.adm-plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: var(--space-3) 0 var(--space-1);
}
.adm-plan-price input {
  width: 120px;
  font-size: var(--fs-xl);
  font-weight: 700;
  text-align: right;
  margin: 0;
}
.adm-plan-price .adm-plan-cur { font-size: 14px; color: var(--ink-3); }
.adm-plan-feats {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adm-plan-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.adm-plan-feat input { width: auto; margin: 0; flex-shrink: 0; }
.adm-plan-limit {
  margin-top: auto;
  padding-top: 14px;
}
.adm-plan-limit label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  margin: 0 0 6px;
}
.adm-plan-limit input { width: 100%; margin: 0; }

/* Save (left) and reset-to-default (right) on one row */
.adm-plan-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
.adm-plan-foot .db-btn { margin: 0; }
.adm-plan-foot-reset {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Platform day-parameters page (/admin/settings) */
.adm-fieldset {
  border: 1px solid var(--db-border, #e2e2e2);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4) var(--space-1);
  margin-bottom: 18px;
}
.adm-fieldset > legend { font-weight: 600; padding: 0 6px; }
.adm-set-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 10px 0;
  border-top: 1px solid var(--db-border, #efefef);
}
.adm-fieldset > .adm-set-row:first-of-type { border-top: 0; }
.adm-set-label { flex: 1 1 auto; }
/* Fixed-width right column so every row's input starts at the same x. */
.adm-set-input {
  display: flex; align-items: center; gap: var(--space-2);
  white-space: nowrap; flex: 0 0 300px;
}
/* Left-aligned on purpose: with text-align:right the browser's number stepper
   sits ON TOP of the last digits (owner report 2026-07-02). Double class beats
   the later `.adm-input { width: 100% }` — the cause of the uneven widths. */
.adm-input.adm-input-num { width: 104px; text-align: left; }
.adm-set-unit { color: var(--db-muted, #777); }
.adm-set-default { color: var(--db-muted, #999); font-size: var(--fs-xs); }
.adm-set-actions { margin-top: var(--space-2); }
@media (max-width: 480px) {
  .adm-set-row { flex-direction: column; gap: 6px; }
  .adm-set-input { flex-basis: auto; }
}

/* Subscription management rows on the tenant card (PB-B11): one compact
   line per action — label, controls, button. The generic `.adm-input`
   (width:100%) must NOT apply here or every control takes the whole row and
   the card degenerates into a stack (owner report 2026-07-02). */
.adm-sub-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.adm-sub-row:first-of-type { border-top: 0; }
.adm-sub-label { flex: 0 0 200px; min-width: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.adm-sub-row .adm-input { width: auto; margin: 0; }
.adm-sub-row select.adm-input { flex: 0 1 170px; }
.adm-sub-row .db-btn { margin-left: auto; }
@media (max-width: 560px) {
  .adm-sub-label { flex-basis: 100%; }
  .adm-sub-row .db-btn { margin-left: 0; }
}

/* Forms: align labels/fields in a single column with even rhythm.
   Rectangular controls — the bare input/select/textarea rules already
   give r-sm corners; we just normalise spacing and full width. */
.adm-form { max-width: 640px; }
.adm-field { margin-bottom: var(--space-4); }
.adm-field > label,
.adm-field > .adm-field-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  margin: 0 0 6px;
}
.adm-field input[type=text],
.adm-field input[type=email],
.adm-field input[type=password],
.adm-field input[type=number],
.adm-field select,
.adm-field textarea {
  width: 100%;
  margin: 0;
}
.adm-field-hint { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }

/* Compatibility shim (design-audit P4-4). Several admin templates reference a
   parallel class naming that was never defined, so those elements rendered
   unstyled (e.g. success/error flashes, tables, form fields). Map each onto the
   established admin look + tokens. TODO: consolidate templates onto the
   canonical classes (.adm-field / .db-btn / .adm-toolbar …) and drop these. */
.adm-flash {
  padding: 10px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  margin-bottom: 14px; font-size: 14px;
}
.adm-flash.is-good { background: var(--good-soft); border-color: var(--good); }
.adm-flash.is-bad  { background: var(--bad-soft);  border-color: var(--bad); }
.adm-mute  { color: var(--ink-3); }
.adm-hint  { font-size: var(--fs-sm); color: var(--ink-3); }
.adm-sub   { font-size: var(--fs-sm); color: var(--ink-3); }
.adm-num   { text-align: right; font-variant-numeric: tabular-nums; }
.adm-danger { color: var(--bad); }
.adm-label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); margin: 0 0 6px; }
.adm-input { width: 100%; margin: 0; }
.adm-form-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-start; margin-bottom: var(--space-4); }
.adm-row-warn { background: var(--warn-soft); }
.adm-btn-link {
  background: transparent; border: 0; padding: 0; font: inherit;
  color: var(--rose); cursor: pointer; text-decoration: underline;
}
.adm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 14px; border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); text-decoration: none;
}
.adm-btn:hover { background: var(--surface-sunken); }
.adm-table, .adm-tbl { width: 100%; border-collapse: collapse; }
.adm-table th, .adm-tbl th {
  text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3);
  padding: var(--space-2) 10px; border-bottom: 1px solid var(--line);
}
.adm-table td, .adm-tbl td { padding: var(--space-2) 10px; border-bottom: 1px solid var(--line); }

/* Inline toolbar (search + filters) — aligned, equal-height controls */
.adm-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: 18px;
}
.adm-toolbar input[type=text],
.adm-toolbar select {
  width: auto;
  height: 40px;
  margin: 0;
}
.adm-toolbar input[type=text] { min-width: 200px; }
.adm-toolbar .db-btn,
.adm-toolbar button { margin: 0; height: 40px; }

/* Checkbox row (e.g. broadcast confirm) */
.adm-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: var(--space-4) 0;
}
.adm-check input { width: auto; margin: 2px 0 0; flex-shrink: 0; }

/* Key/value rows in the tenant card */
.adm-kv { display: flex; gap: var(--space-3); margin-bottom: var(--space-2); align-items: baseline; }
.adm-kv-key { min-width: 140px; color: var(--ink-3); font-size: var(--fs-sm); flex-shrink: 0; }
.adm-kv-val { color: var(--ink); }
.adm-divider { border: none; border-top: 1px solid var(--line); margin: var(--space-4) 0; }

/* Action button row — buttons left-aligned, no stray top margin */
.adm-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.adm-actions > form { margin: 0; }
.adm-actions .btn,
.adm-actions .db-btn,
.adm-actions button { margin: 0; }

@media (max-width: 900px) {
  /* Sidebar collapses to a horizontal strip above the content. */
  .adm-shell { grid-template-columns: 1fr; }
  .adm-side {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: var(--space-2);
  }
  .adm-brand { padding: 0 var(--space-2) 0 0; }
  .adm-nav { flex-direction: row; flex-wrap: wrap; flex: 1; overflow: visible; }
  .adm-side-foot { border-top: 0; padding-top: 0; margin-top: 0; }
  .adm-side-foot .db-btn { width: auto; }
}

/* ── Admin client-base stat cells (tenant card + analytics) ── */
.adm-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 760px) { .adm-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .adm-stats { grid-template-columns: repeat(2, 1fr); } }
.adm-stat-cell {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px var(--space-3);
  text-align: center;
}
.adm-stat-num { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.adm-stat-num.is-bad { color: var(--bad); }
.adm-stat-num.is-warn { color: var(--warn); }
.adm-stat-lbl { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--ink-3); }

/* ── Newcomer watchlist ── */
.adm-watch-crit {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin: 0 0 14px;
  line-height: 1.5;
}
.adm-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-reason {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  color: var(--ink-2);
  white-space: nowrap;
}
.adm-reason.is-onboarding { background: var(--bad-soft); color: var(--bad); }
.adm-reason.is-trial { background: var(--cream-soft, #f3ece0); color: #8a6d3b; }
.adm-reason.is-new { background: var(--rose-soft); color: var(--rose); }

/* ── Tenants list: compact client mini-breakdown in one cell ── */
.adm-mini { display: inline-flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.adm-mini b { font-weight: 700; }
.adm-mini .is-dormant { color: var(--ink-3); }
.adm-mini .is-blocked { color: var(--bad); }

/* Landing: brand pinned to the top-left corner (mirrors .lp-nav top-right) */
.lp-topbrand {
  position: absolute;
  top: 28px; left: 48px;
  z-index: 5;
  text-decoration: none;
  color: var(--ink);
}
@media (max-width: 980px) {
  .lp-topbrand { top: 20px; left: 24px; }
}
@media (max-width: 600px) {
  .lp-topbrand .db-brand-mark { width: 30px; height: 30px; }
  .lp-topbrand div:last-child { font-size: 18px !important; }
}
/* Tight phones: collapse the wordmark to its mark icon so «Войти» + the register
   CTA both fit the top bar without colliding with the brand. The hero restates
   the brand name immediately below, so recognition isn't lost. */
@media (max-width: 480px) {
  .lp-topbrand div:last-child { display: none; }
}

/* Landing: single-specialist positioning statement (req-spec §24.2) */
.lp-solo { max-width: 720px; margin: 0 auto; padding: 28px var(--space-5) var(--space-2); text-align: center; }
.lp-solo h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 10px; }
.lp-solo p { color: var(--ink-2); margin: 0; }