.payment-methods{min-width:0;margin:16px 0;padding:12px 16px;border:1px solid var(--line);border-radius:12px}
.payment-methods legend{padding:0 6px;font-weight:600}
.payment-methods label.check{display:flex;align-items:flex-start;gap:10px;margin:8px 0;cursor:pointer}
.payment-methods label.check input[type=radio]{width:18px;height:18px;min-width:18px;margin:3px 0 0;accent-color:var(--forest);flex:0 0 auto}
/* Manrope trimmed to the signs the pages set, all its weights (site/assets/fonts/manrope.source.md, 08.10.2026: 31 KB
   instead of the 165 KB ttf). */
@font-face {
  font-family: Manrope;
  src: url(/assets/fonts/manrope.woff2) format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
/* The name «на связи 24» (site/assets/golos-wordmark.source.md): Golos Text ExtraBold (800), the heavy lowercase sans of
   the owner's banner, chosen 04.10.2026; «24» since 05.10.2026, the same weight and colour after a no-break space. The
   file holds the name's signs alone (1.4 KB); the pages' own Golos Text draws the name while it is on its way. */
@font-face {
  font-family: "Golos Wordmark";
  src: url(/assets/golos-wordmark.woff2) format("woff2");
  font-weight: 800;
  font-display: swap;
}
/* Self-hosted faces (site/assets/fonts/*.source.md). Current pages use Manrope for headings and words, JetBrains Mono
   for times and sums, and the existing Golos wordmark for the name. Earlier editorial faces remain available, but a
   browser downloads only the faces a page uses. All current selectors take their families through the shared tokens. */
@font-face {
  font-family: "NS Text Serif";
  src: url(/assets/fonts/lora-600.woff2) format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
/* The company websites' display faces, one per sphere (the owner's «Все четыре по сферам», 09.10.2026; company-site.css
   --s-display): a car service's Unbounded, a salon's Playfair Display, a clinic's Lora, a club's Oswald in capitals.
   A page preloads its sphere's upright face alone (app/site_looks.py preload); the italics — one or two words of a
   salon's or a clinic's headline, medium, never bold — come only when a page sets them. Each italic face covers every
   weight with its one 500 file: the browser never thickens it by itself. */
@font-face {
  font-family: "NS Text Serif";
  src: url(/assets/fonts/lora-500.woff2) format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NS Text Serif";
  src: url(/assets/fonts/lora-italic-500.woff2) format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url(/assets/fonts/unbounded-700.woff2) format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NS Display Serif";
  src: url(/assets/fonts/playfair-display-600.woff2) format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NS Display Serif";
  src: url(/assets/fonts/playfair-display-italic-500.woff2) format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url(/assets/fonts/oswald-600-700.woff2) format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url(/assets/fonts/source-serif-4-600.woff2) format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Golos Text";
  src: url(/assets/fonts/golos-text.woff2) format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(/assets/fonts/jetbrains-mono.woff2) format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

/* --- Shared palette: white surfaces, forest blocks and a vivid lime action (05.10.2026) ------------------------- */
/* The owner's BentoML reference: strong colour blocks without the former beige cast or hard offset shadows. Public pages,
   booking and working screens inherit these values together; the support page reverses its surfaces explicitly.
     paper — the page's ground; sheet — a card, a field; shade — a quiet fill (a hovered row, a table's foot);
     ink — words; muted — second words (5.5:1 on paper); faint — rules and marks, never words (3:1);
     rule — a hairline between blocks, line its old name; hair — a hairline inside a card;
     forest — the main action, the active menu item; lime — the page's one key action, the highlighter's ink;
     hi — the highlighter (a marked word, what came of it); band — the pale-green band of a result;
     card — a white surface with a quiet edge and a shallow shadow. */
:root {
  --sans: Manrope, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  /* Existing heading and navigation selectors keep their token; all now use the same clear sans. */
  --serif: var(--sans);
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --paper: #f7f8f9;
  --sheet: #ffffff;
  --white: var(--sheet);
  --shade: #edf2ef;
  --ink: #182b26;
  --muted: #596862;
  --faint: #7c8983;
  --rule: #dce4df;
  --line: var(--rule);
  --hair: #edf1ee;
  --forest: #16382b;
  --forest-deep: #0c291e;
  --on-forest: #ffffff;
  --forest-muted: #bfd5c8;
  /* The forest frame's own lines (the cabinet's header and menu, desk.css): a hairline, a control's edge, a hover */
  --forest-rule: #365748;
  --forest-edge: #779689;
  --forest-hover: #254638;
  --lime: #b4f477;
  --lime-hover: #a3e861;
  --lime-deep: #3d711f;
  --hi: #c9f6a7;
  --band: #e5f5dc;
  --row-hover: #f0f6f1;
  --card-edge: #d7e0da;
  --card-shadow: 0 4px 20px rgba(23, 46, 37, 0.045);
  --card-radius: 12px;
  /* statuses: words in these colours are 4.5:1 on paper and on their own tint */
  --ok: #29633f;
  --ok-tint: #eaf6ec;
  --warn: #7a5410;
  --warn-tint: #fff6df;
  --error: #a83232;
  --error-edge: #d9aaa3;
  --error-tint: #fff0ed;
  --radius: 10px;
  --shadow-card: var(--card-shadow);
  /* Working screens (the desk, the console's forms): a field and a button of one row share this height, and it is a
     thumb's target on a phone. */
  --control-h: 44px;
  --control-radius: 8px;
  --control-gap: 8px;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 95px;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
::selection {
  background: var(--hi);
  color: var(--ink);
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 4px var(--hi);
}
input,
select,
textarea {
  min-width: 0;
}
button,
.btn {
  touch-action: manipulation;
}
button:disabled,
.btn[aria-disabled="true"] {
  transform: none !important;
}
a {
  color: inherit;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}
button,
.btn {
  cursor: pointer;
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
}
a,
button,
input,
select,
textarea,
summary {
  outline-offset: 5px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--lime-deep);
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 1.08;
}
h1 {
  font-size: clamp(44px, 6.4vw, 88px);
}
h2 {
  font-size: clamp(34px, 4vw, 56px);
}
h3 {
  font-size: 25px;
}
p {
  color: var(--muted);
}
/* The pages' mark — the lockup of the owner's banner, chosen 04.10.2026: the robot head, the heavy lowercase sans name
   and, on the products' public pages, a hairline and what the product is (.brand-desc). The robot is site/assets/
   favicon.svg itself — the tab's icon and the apps' — drawn in the .brandmark every page already has inside .brand, so
   a page the app writes needs no markup of its own. The tech support's pages take the same drawing in its cream
   colourway (site/assets/robot-support.svg): .brand.support. Both files are written into the rules below as they are
   by scripts/og/icons.cjs (tests/test_brand_mark.py holds them equal): the robot comes with the stylesheet, at the
   page's first paint and under the products' view transition, with no request of its own. The banner's sizes: the
   robot 1.44 em (36 px at a 25 px name), 0.4 em (10 px) between them. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: "Golos Wordmark", "Golos Text", system-ui, sans-serif;
  font-weight: 800;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brandmark {
  display: block;
  flex: none;
  width: 1.44em;
  height: 1.44em;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%223%208%20118%20118%22%3E%3Crect%20x%3D%225%22%20y%3D%2245%22%20width%3D%2211%22%20height%3D%2234%22%20rx%3D%225%22%20fill%3D%22%2317201a%22%2F%3E%3Crect%20x%3D%22108%22%20y%3D%2245%22%20width%3D%2211%22%20height%3D%2234%22%20rx%3D%225%22%20fill%3D%22%2317201a%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%2213%22%20width%3D%2294%22%20height%3D%2294%22%20rx%3D%2234%22%20fill%3D%22%23c8f46c%22%20stroke%3D%22%2317201a%22%20stroke-width%3D%228%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2240%22%20width%3D%2262%22%20height%3D%2238%22%20rx%3D%2219%22%20fill%3D%22%2317201a%22%2F%3E%3Cg%20fill%3D%22%23c8f46c%22%3E%3Crect%20x%3D%2246%22%20y%3D%2249%22%20width%3D%227%22%20height%3D%2220%22%20rx%3D%223.5%22%2F%3E%3Crect%20x%3D%2258.5%22%20y%3D%2249%22%20width%3D%227%22%20height%3D%2220%22%20rx%3D%223.5%22%2F%3E%3Crect%20x%3D%2271%22%20y%3D%2249%22%20width%3D%227%22%20height%3D%2220%22%20rx%3D%223.5%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22103%22%20cy%3D%22109%22%20r%3D%2213%22%20fill%3D%22%23c8f46c%22%20stroke%3D%22%2317201a%22%20stroke-width%3D%227%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.brand.support .brandmark {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%223%208%20118%20118%22%3E%3Crect%20x%3D%225%22%20y%3D%2245%22%20width%3D%2211%22%20height%3D%2234%22%20rx%3D%225%22%20fill%3D%22%2317201a%22%2F%3E%3Crect%20x%3D%22108%22%20y%3D%2245%22%20width%3D%2211%22%20height%3D%2234%22%20rx%3D%225%22%20fill%3D%22%2317201a%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%2213%22%20width%3D%2294%22%20height%3D%2294%22%20rx%3D%2234%22%20fill%3D%22%23f4f1e8%22%20stroke%3D%22%2317201a%22%20stroke-width%3D%228%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2240%22%20width%3D%2262%22%20height%3D%2238%22%20rx%3D%2219%22%20fill%3D%22%2317201a%22%2F%3E%3Cg%20fill%3D%22%23c8f46c%22%3E%3Crect%20x%3D%2246%22%20y%3D%2249%22%20width%3D%227%22%20height%3D%2220%22%20rx%3D%223.5%22%2F%3E%3Crect%20x%3D%2258.5%22%20y%3D%2249%22%20width%3D%227%22%20height%3D%2220%22%20rx%3D%223.5%22%2F%3E%3Crect%20x%3D%2271%22%20y%3D%2249%22%20width%3D%227%22%20height%3D%2220%22%20rx%3D%223.5%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22103%22%20cy%3D%22109%22%20r%3D%2213%22%20fill%3D%22%23c8f46c%22%20stroke%3D%22%2317201a%22%20stroke-width%3D%227%22%2F%3E%3C%2Fsvg%3E");
}
.brandmark i {
  display: none;
}
/* The lockup: the mark, a 1 px hairline, what the product is. The words are outside the link, whose name stays
   «На связи 24 — главная». A page hides them where they would crowd its row (site.css .topbar: below 1 100 px). */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.brand-desc {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 500 14px/1.3 var(--sans);
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
}
.brand-desc::before {
  content: "";
  flex: none;
  width: 1px;
  height: 26px;
  background: var(--line);
}
@media (max-width: 640px) {
  .brand-desc {
    display: none;
  }
}
.btn,
button.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 50px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--ink);
  color: white;
  font-weight: 650;
  text-decoration: none;
  line-height: 1.3;
  transition:
    background 0.2s,
    transform 0.2s;
}
.btn:hover,
button.primary:hover {
  background: var(--forest);
  transform: none;
}
.btn.lime {
  background: var(--lime);
  color: var(--ink);
}
.btn.lime:hover {
  background: var(--lime-hover);
}
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn.ghost:hover {
  background: #edf0e7;
}
.btn.small {
  min-height: 40px;
  padding: 9px 15px;
  font-size: 14px;
}
@media (max-width: 760px) {
  .btn.small {
    min-height: 44px; /* a thumb's target on a phone */
  }
}
/* --- The working screens' buttons: ONE RULE for the cabinet (desk.css), the console and the portal (control.css) and
   the bases' pages, the guest's and the staff's (stays.css, body.stay) ----------------------------------------------
     main     the screen's main action: forest, paper words — a plain <button>, .btn, button.primary;
     key      the page's single key action: lime, ink words — .lime (one a screen, as on the public pages);
     second   everything beside the main action: an ink outline on nothing — .ghost;
     danger   what deletes or cancels: a muted red outline, red words — .danger, .bad, .remove-item, .delete-row;
              red is for danger alone;
     quiet    a way, not an act: underlined words — .text-link, a link in the words.
   One height (--control-h), one corner (--control-radius), Golos Text 600, no lift and no shadow; a hover darkens
   the main and key faces and fills the others with the shade. Each sheet keeps its own selectors (desk.css,
   control.css, stays.css) and only these faces. The public pages are not under it. */
:where(.console, .desk, .portal:not(.business, .stand), body.stay) :is(.btn, button.primary) {
  min-height: var(--control-h);
  padding: 9px 18px;
  gap: 10px;
  border: 1px solid var(--forest);
  border-radius: var(--control-radius);
  background: var(--forest);
  color: var(--on-forest);
  font-weight: 600;
  line-height: 1.3;
  transition: background 0.15s, border-color 0.15s;
}
:where(.console, .desk, .portal:not(.business, .stand), body.stay) :is(.btn, button.primary):hover {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  transform: none;
}
:where(.console, .desk, .portal:not(.business, .stand), body.stay) .btn.lime {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}
:where(.console, .desk, .portal:not(.business, .stand), body.stay) .btn.lime:hover {
  background: var(--lime-hover);
  border-color: var(--lime-hover);
}
:where(.console, .desk, .portal:not(.business, .stand), body.stay) .btn.ghost {
  background: var(--sheet);
  border-color: var(--faint);
  color: var(--ink);
}
:where(.console, .desk, .portal:not(.business, .stand), body.stay) .btn.ghost:hover {
  background: var(--shade);
  border-color: var(--forest);
}
:where(.console, .desk, .portal:not(.business, .stand), body.stay) :is(.btn.danger, .btn.bad) {
  background: transparent;
  border-color: var(--error-edge);
  color: var(--error);
}
:where(.console, .desk, .portal:not(.business, .stand), body.stay) :is(.btn.danger, .btn.bad):hover {
  background: var(--error-tint);
  border-color: var(--error);
}
:where(.console, .desk, .portal:not(.business, .stand), body.stay) .btn.small {
  min-height: 40px;
  padding: 7px 14px;
  font-size: 14px;
}
@media (max-width: 760px), (pointer: coarse) {
  :where(.console, .desk, .portal:not(.business, .stand), body.stay) .btn.small {
    min-height: var(--control-h);
  }
}
:where(.console, .desk, .portal:not(.business, .stand), body.stay) .text-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
/* The working screens' fields: a sheet with the card's edge (the hairline of the public pages is too faint for a field
   one fills all day), the forest edge and the highlighter's glow when focused. */
:where(.console, .desk, .portal:not(.business, .stand), body.stay) :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) {
  border-color: var(--card-edge);
  background-color: var(--sheet);
}
:where(.console, .desk, .portal:not(.business, .stand), body.stay) :is(input:not([type="checkbox"], [type="radio"]), select, textarea):focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px var(--hi);
}
.arrow {
  font-size: 23px;
  line-height: 1;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 750;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 24px;
}
/* The working screens' labels over a block — «Журнал записи» over the day, «Управление сервисом» over the console, the
   kind of a cabinet under the company's name: sentence case in the muted words, never tracked capitals (the owner,
   04.10.2026). The code writes several of them in capitals; they read here as a sentence, its first letter capital.
   A label holding a name or a code keeps its own letters (.as-is, .code). */
:where(.console, .desk, .portal:not(.business, .stand)) :is(.eyebrow, .page-context, .workspace-label) {
  font: 400 14px/1.4 var(--sans);
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--muted);
}
:where(.console, .desk, .portal:not(.business, .stand)) :is(.eyebrow, .page-context, .workspace-label)::first-letter {
  text-transform: uppercase;
}
:where(.console, .desk, .portal:not(.business, .stand)) :is(.eyebrow.as-is, .eyebrow.code) {
  text-transform: none;
}
:where(.console, .desk, .portal:not(.business, .stand)) .eyebrow.code {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6c9b3b;
  margin-right: 7px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  padding: 5px 11px;
  background: #edf2e6;
  border-radius: 20px;
  font-weight: 600;
}
.muted,
.hint {
  color: var(--muted);
  font-size: 13px;
}
.err {
  color: var(--error);
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  letter-spacing: 0;
}
.check input {
  width: 17px;
  height: 17px;
  min-width: 17px;
  margin: 3px 0 0;
  accent-color: var(--forest);
}
/* A thumb's target: the box and its row */
@media (pointer: coarse) {
  .check input {
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin-top: 0;
  }
  .check {
    min-height: 44px;
    align-items: center;
  }
}
.check a {
  text-underline-offset: 3px;
}
input,
select,
textarea {
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  padding: 12px 14px;
  min-width: 0;
  width: 100%;
}
input[type="checkbox"] {
  width: auto;
  accent-color: var(--forest);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--forest);
}
label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 7px;
}
textarea {
  min-height: 110px;
  resize: vertical;
}
::selection {
  background: var(--lime);
  color: var(--ink);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
/* The settings' parts (the console's company and base forms, the desk's settings): in the banner's style — sheets on
   the paper with the card's edge, hairlines, chips with 4 px corners. */
.settings-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.settings-jumps a {
  padding: 9px 13px;
  border: 1px solid var(--rule);
  border-radius: var(--control-radius);
  text-decoration: none;
  font-size: 13px;
}
.settings-jumps a:hover {
  background: var(--shade);
}
.settings-launch {
  margin: 0 0 24px;
  padding: 24px;
  border-radius: var(--card-radius);
  background: var(--band);
  border: 1px solid var(--card-edge);
}
.settings-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.setting-toggle {
  display: block;
  padding: 22px;
  margin: 0 !important;
  border: 1px solid var(--card-edge);
  border-radius: var(--card-radius);
  background: var(--sheet);
  cursor: pointer;
}
.setting-toggle:has(input:checked) {
  border-color: var(--forest);
}
.setting-toggle strong {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  margin: 17px 0 10px;
}
.setting-description {
  display: block;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 400;
}
.setting-toggle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.setting-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 50px;
  min-width: 50px;
  height: 28px;
  border: 1px solid var(--muted);
  border-radius: 30px;
  background: var(--shade);
  padding: 3px;
  margin: 0;
  cursor: pointer;
}
.setting-toggle input[type="checkbox"]::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s;
}
.setting-toggle input[type="checkbox"]:checked {
  background: var(--forest);
  border-color: var(--forest);
}
.setting-toggle input[type="checkbox"]:checked::before {
  background: var(--lime);
  transform: translateX(21px);
}
.switch-state {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.switch-state .when-on {
  display: none;
}
.setting-toggle:has(input:checked) .when-on {
  display: inline;
  color: var(--ok);
}
.setting-toggle:has(input:checked) .when-off {
  display: none;
}
.settings-apply {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
}
.settings-apply span {
  max-width: 440px;
  font-size: 13px;
  color: var(--muted);
}
.settings-section {
  scroll-margin-top: 20px;
}
.settings-section summary {
  cursor: pointer;
  font-weight: 600;
}
.settings-section[open] > summary {
  margin-bottom: 20px;
}
.settings-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
}
.settings-section summary::-webkit-details-marker {
  display: none;
}
.settings-section summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid var(--rule);
  border-radius: var(--control-radius);
  font-size: 20px;
  font-weight: 400;
}
.settings-section[open] > summary::after {
  content: "−";
  background: var(--paper);
}
.settings-jumps a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.settings-jumps a:hover {
  border-bottom-color: currentColor;
}
.settings-launch {
  box-shadow: var(--card-shadow);
}
.setting-toggle {
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
}
.setting-toggle:has(input:checked) {
  border-color: var(--forest);
  box-shadow: inset 0 3px var(--forest);
}
.setting-toggle:focus-within {
  outline: 3px solid #5a842a;
  outline-offset: 4px;
}
/* «Есть несохранённые изменения» with its button: a sheet standing over the page's corner */
.form-savebar {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 480px;
  max-width: calc(100vw - 32px);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--card-edge);
  border-radius: var(--card-radius);
  background: var(--sheet);
  box-shadow: var(--card-shadow);
}
.form-savebar[hidden] {
  display: none;
}
.form-savebar span {
  flex: 1;
  font-size: 13px;
  color: var(--warn);
}
.form-savebar button {
  margin: 0 !important;
}
.settings-section .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.theme details {
  margin-top: 12px;
}
.theme blockquote {
  margin: 12px 0;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--rule);
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .settings-launch {
    padding: 16px;
  }
  .settings-toggle-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .setting-toggle {
    padding: 18px;
  }
  .settings-apply {
    flex-wrap: wrap;
    gap: 12px;
  }
  .settings-section .grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

/* v0.77–v0.78: long pages are folded sections, each naming what is set; repeated things are folded cards with «+ добавить» */
html details.form-section { padding: 0; }
/* Folds that follow each other are one sheet, as the public pages' ruled lists: a hairline between them, the card's
   edge and its hard drop around them all (each fold's drop runs on under the next one) */
html details.form-section:has(+ details.form-section) { margin-bottom: 0; border-bottom-color: var(--hair); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
html details.form-section + details.form-section { margin-top: 0; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
html details.form-section > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 18px 27px; font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; cursor: pointer; margin: 0; }
html details.form-section > summary::-webkit-details-marker { display: none; }
html details.form-section > summary::after { content: "›"; margin-left: auto; font-family: var(--serif); font-size: 22px; color: var(--muted); transform: rotate(90deg); transition: transform .15s; }
html details.form-section[open] > summary::after { transform: rotate(-90deg); }
html details.form-section > summary .num { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
html details.form-section > summary .fill { margin-left: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 1.35; padding: 3px 9px; border-radius: var(--card-radius); }
html details.form-section > summary .fill.ok { background: var(--ok-tint); color: var(--ok); }
html details.form-section > summary .fill.none { background: var(--shade); color: var(--muted); }
html details.form-section > summary + *, html details.form-section > :not(summary) { margin-left: 27px; margin-right: 27px; }
html details.form-section > :is(textarea, input, select) { width: calc(100% - 54px); }
html details.form-section > p:first-of-type { margin-top: 0; }
html details.form-section[open] { padding-bottom: 22px; }
html details.form-section .field .hint, html details.form-section p.hint { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
html details.form-section .field .hint.err { color: var(--error); font-weight: 600; }
/* A labelled item inside a section («07 Отзывы и подарки»: «Подарок, если визит не понравился (оценка 1–3)»): a small
   heading, the item's rule under it, then its fields. */
html details.form-section > h3.group { font-size: 16px; line-height: 1.35; margin-top: 24px; margin-bottom: 4px; }
html details.form-section > h3.group + p.hint { margin-top: 0; margin-bottom: 12px; }
html details.form-section > .form-grid + p.hint { margin-top: 16px; }
html details.form-section .field [aria-invalid="true"] { border-color: var(--error); }
html details.form-section details.more { border: 0; background: transparent; padding: 0; margin: 4px 0 0; }
html details.form-section details.more > summary { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; padding: 4px 0; }
.launch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; padding: 14px 18px; border: 1px solid var(--card-edge); border-radius: var(--card-radius); background: var(--sheet); box-shadow: var(--card-shadow); }
.launch b { font-size: 14px; margin-right: 6px; }
/* «✓ Компания» on one line (a column of flex items used to put the tick over the word on a phone), the detail under it. */
.launch a { display: inline-block; white-space: nowrap; text-decoration: none; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: var(--card-radius); border: 1px solid var(--rule); color: var(--ink); }
.launch a small { display: block; white-space: normal; font-weight: 400; color: var(--muted); font-size: 12px; }
.launch a.ok { background: var(--ok-tint); border-color: var(--ok-tint); }
.launch a.todo { background: var(--warn-tint); border-color: var(--warn-tint); }
html details.form-section > summary .num, html details.form-section > summary::after { color: var(--muted); }
.launch a small { color: var(--muted); font-size: 12px; }
.section-links { font-size: 13px; color: var(--muted); margin: -8px 0 22px 6px; }
.section-links a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.save-bar span.err { color: var(--error); font-size: 13px; font-weight: 600; }
html details.form-section details > summary { display: flex; align-items: center; min-height: 44px; }
@media (max-width: 640px) {
  /* A grid, not a wrapping flex row: a long title shrinks in its column and wraps there, the chevron stays at the
     right of the first row (it used to drop onto a row of its own under a two-line title), the badge takes the row
     under the title. */
  html details.form-section > summary { padding: 14px 18px; font-size: 17px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: center; }
  html details.form-section > summary::after { grid-column: -2; grid-row: 1; margin-left: 0; }
  html details.form-section > summary .fill { grid-column: 1 / -1; grid-row: 2; justify-self: start; max-width: none; white-space: normal; margin-left: 0; }
  /* With a number before the title (app/control_ui.fold): the number's column first, the badge under the title. */
  html details.form-section > summary:has(.num) { grid-template-columns: auto minmax(0, 1fr) auto; }
  html details.form-section > summary:has(.num) .num { grid-column: 1; grid-row: 1; }
  html details.form-section > summary:has(.num) .fill { grid-column: 2 / -1; }
  html details.form-section > :not(summary) { margin-left: 18px; margin-right: 18px; }
  html details.form-section > :is(textarea, input, select) { width: calc(100% - 36px); }
  form[data-client-form] input:not([type=checkbox]), form[data-client-form] select, form[data-client-form] textarea { font-size: 16px; min-width: 0; }
  html .hours-grid, form[data-client-form] .hours-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  form[data-client-form] .hours-grid input { font-size: 14px; padding: 10px 6px; }
  .save-bar { flex-wrap: wrap; }
  .save-bar span:not(.err) { display: none; }
  .save-bar button { flex: 1 1 100%; }
}

html details.item { border: 1px solid var(--rule); border-radius: var(--card-radius); background: var(--sheet); margin: 0 0 10px; padding: 0; }
html details.item > summary { list-style: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px; cursor: pointer; min-height: 44px; box-sizing: border-box; }
html details.item > summary::-webkit-details-marker { display: none; }
/* The chevron is the title's first glyph, not a flex item of its own: a long title wraps with it on a phone (it used
   to leave «›» alone on a line above the title). */
html details.item > summary b::before { content: "›"; color: var(--muted); transition: transform .15s; display: inline-block; margin-right: 10px; }
html details.item[open] > summary b::before { transform: rotate(90deg); }
html details.item > summary b { font-size: 14px; }
html details.item > summary small { font-size: 12px; color: var(--muted); }
html details.item .item-body { padding: 0 16px 14px; }
.row-item { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 8px; }
.row-item > .field { flex: 1 1 140px; min-width: 0; }
.row-item > button { flex: 0 0 auto; }
html button.add-row, html button.remove-item { width: auto; min-height: var(--control-h); padding: 9px 14px; border-radius: var(--control-radius); font-size: 14px; font-weight: 600; background: transparent; color: var(--ink); border: 1px solid var(--ink); cursor: pointer; }
html button.add-row:hover { background: var(--shade); }
html button.remove-item { color: var(--error); border-color: var(--error-edge); }
html button.remove-item:hover { background: var(--error-tint); border-color: var(--error); }
html button.add-row { margin: 4px 0 6px; }
@media (max-width: 640px) {
  .row-item > .field { flex-basis: 120px; }
  html details.item .item-body { padding: 0 12px 12px; }
}

/* v0.81: a row of captioned fields in a settings section (.form-grid > .field: caption, field, hint) — the captions
   of one row share its height, so the fields under them stand on one line whatever the captions' length; the hints
   share the next one */
html details.form-section .form-grid > .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; align-content: start; }
html details.form-section .form-grid > .field > label { align-self: end; margin: 0; }
html button.delete-row { min-width: var(--control-h); min-height: var(--control-h); }
/* A section's own hint and «Реже нужное» stand in the section's column, as its fields do */
html details.form-section > p.hint { margin: 4px 27px 0; }
html details.form-section > details.more { margin: 4px 27px 0; }
/* A service's row: name, minutes, price, repeat, places in a group and «×» on one line */
html .service-row { grid-template-columns: minmax(0, 2fr) minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 0.7fr) auto; }
html .hours-grid { margin-bottom: 18px; }
html .hours-grid input { font-size: 13px; padding-inline: 8px; }
@media (max-width: 760px) {
  html .hours-grid input { min-height: var(--control-h); } /* a thumb's target: the hours' fields were 42 px */
}
html .hours-grid label { font-size: 12px; }
@media (max-width: 760px) {
  html .service-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--control-h); }
}
@media (max-width: 640px) {
  html details.form-section > p.hint, html details.form-section > details.more { margin-inline: 18px; }
}

/* Shared by the staff cabinets: visible while a full-page response is pending. */
.page-loading {
  position: fixed;
  z-index: 1000;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 1px solid var(--card-edge);
  border-radius: var(--card-radius);
  background: var(--sheet);
  color: var(--ink);
  box-shadow: var(--card-shadow);
  font-size: 14px;
}
.page-loading[hidden], .page-loading button[hidden] { display: none; }
.page-loading-spinner {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 3px solid var(--line);
  border-top-color: var(--forest);
  border-radius: 50%;
  animation: page-loading-spin .8s linear infinite;
}
html .page-loading button {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--ink);
  font-size: 24px;
  cursor: pointer;
}
.page-loading[data-slow] .page-loading-spinner { animation: none; }
@keyframes page-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .page-loading-spinner { animation: none; }
}

/* «Перенести с сайта компании» (app/website_import_page.py): the preview reads the same in the desk and in the
   console — the old site's photos as even tiles, then a framed card per service with its fields in a grid, the chosen
   photo under its choice and «Кто выполняет» as a row of ticks. */
.website-import-preview input,
.website-import-preview textarea,
.website-import-preview select {
  max-width: 100%;
}
.website-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 16px;
  margin-top: 16px;
}
.website-photo-grid img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
}
.website-photo p {
  margin: 8px 0 4px;
}
.website-service {
  min-width: 0;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.website-service > legend {
  max-width: 100%;
  padding: 0 6px;
}
.website-service .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px;
  align-items: start;
}
.website-service .form-grid > .website-wide {
  grid-column: 1 / -1;
}
.website-service-photo {
  display: block;
  width: 120px;
  height: 80px;
  margin-top: 8px;
  object-fit: cover;
  border-radius: 8px;
}
.website-service-photo[hidden] {
  display: none;
}
.website-staff {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  min-width: 0;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}
.website-staff > legend {
  width: 100%;
  margin-bottom: 6px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
}

/* «Готовые обложки» under the cover's field (app/site_covers.py, pictures.js): four drawn covers of the sphere, the
   chosen one framed; one row on a computer, two columns on a phone. */
.cover-library{grid-column:1/-1;min-width:0;margin:4px 0 8px;padding:0;border:0}
.cover-library legend{font-weight:600;margin:0 0 8px;padding:0}
.cover-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:12px}
.cover-library .cover-pick{display:flex;flex-direction:column;gap:6px;min-height:44px;padding:6px;border:1px solid #c9d6c6;border-radius:10px;background:#fff;color:#16382b;font:500 13px/1.3 inherit;text-align:left;cursor:pointer}
.cover-library .cover-pick img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.cover-library .cover-pick[aria-pressed="true"]{border-color:#16382b;box-shadow:0 0 0 2px #16382b}
/* A tile under the pointer keeps its words readable: the desk's buttons turn forest on hover (desk.css). */
.cover-library .cover-pick:hover{background:var(--shade);border-color:#16382b;color:#16382b}
/* «Без обложки»: the first screen as it then is — the green card with the assistant's light one in its right half. */
.cover-library .cover-none-art{display:block;width:100%;aspect-ratio:4/3;border-radius:6px;background:linear-gradient(#c1f58a,#c1f58a) 88% 50%/40% 64% no-repeat,#16382b}
.cover-library .cover-pick:focus-visible{outline:3px solid #16382b;outline-offset:2px}

.payment-state{margin:16px 0}.payment-progress{display:flex;flex-wrap:wrap;gap:8px 20px;margin:8px 0 16px;padding:0;list-style:none;counter-reset:payment}.payment-progress li{counter-increment:payment;font-size:.85rem;color:var(--muted,#53645c)}.payment-progress li::before{content:counter(payment) " · ";font-variant-numeric:tabular-nums}.payment-progress .complete{color:var(--forest,#173f30)}.payment-progress .current{font-weight:700;color:var(--ink,#182b25)}

/* The demos' next action (the owner, 13.10.2026: «сделай переливающимися нужные для нажатия кнопки в демо сценариях
   всех»): the one control a visitor presses to go on — .dv-next in the server-rendered demos (app/demo_visit.py,
   demo_site.py, demo_estimate.py, demo_decision.py) and on a demo company's own page (app/business_page.py
   demo_first_mark, site/assets/demo-next.js), .stand-guide-next on the stand and in its client's chat
   (site/assets/stand.js decides which) — keeps a visible outline and a soft light passes over it; its words, size and
   place never move. With reduced motion, while the stand acts or prepares, while the control is disabled or has just
   been pressed (focused by a tap, not the keyboard — the page is on its way; not the focus a closed chat gives back,
   data-dv-back of site/assets/demo-next.js): the outline only. !important — the mark
   lies over every face it meets: the messengers' keys, the chat's chips, the forms' buttons. */
@keyframes demo-next-shimmer { 0%, 10% { background-position: 100% 0; } 90%, 100% { background-position: 0% 0; } }
:is(.dv-next, .stand-guide-next) { outline: 2px solid rgba(21, 57, 45, .55) !important; outline-offset: 3px !important; }
:is(.dv-next, .stand-guide-next):focus-visible { outline: 3px solid var(--lime-deep) !important; }
/* on the forest bar at a guided show's end (stand.css .stand-finale) the outline is light */
.stand-finale .stand-guide-next { outline-color: rgba(255, 255, 255, .7) !important; }
/* … and on a demo company's dark grounds (company-site.css): a club's page and chat — not the demo strip's light band
   over it —, a car service's menu and scene */
:is(.company-site.site-sport, .company-site.site-auto :is(.biz-bar, .site-nav, .site-hero-scene)) .dv-next:not(.biz-demo *) { outline-color: rgba(255, 255, 255, .7) !important; }
@media (prefers-reduced-motion: no-preference) {
  :is(.dv-next, .stand-guide-next):not(:disabled):is(:not(:focus:not(:focus-visible)), [data-dv-back]):not(:is(.is-acting, .is-preparing, [aria-busy="true"]) *) {
    background-image: linear-gradient(110deg, transparent 38%, rgba(187, 246, 136, .28) 50%, transparent 62%) !important;
    background-size: 260% 100% !important;
    background-repeat: no-repeat !important;
    background-position: 100% 0;
    animation: demo-next-shimmer 2.6s ease-in-out infinite !important;
  }
}