/* PicSeller 2.0 — базовые стили макета: токены (светлая и тёмная тема), сброс, компоненты, раскладки public/app/focus/auth,
   оверлеи, плашка макета, графики и предпросмотр сайта бренда (.sitepv, его рисует Art.site). Подключается первым в index.html;
   модульные css/<группа>.css только дополняют его своими префиксами. Контракт классов — app/API.md.
   PicSeller 2.0 — mockup base styles: tokens (light + full dark), reset, components, layout shells, overlays, mockup badge,
   charts and the brand-site preview (.sitepv, rendered by Art.site). Module stylesheets only add prefixed classes.
   Брейкпоинты / breakpoints: 600 · 900 · 1200. Скругления / radii: 8 · 12 · 16. */

/* ==================================================================
   1. Токены / Tokens
   ================================================================== */
:root {
  --primary: #164d43;
  --primary-2: #0d3c33;
  --primary-3: #072f28;
  --primary-soft: #e7efe9;
  --primary-soft-2: #d3e3d8;
  --on-primary: #ffffff;
  --accent: #d9f279;
  --accent-2: #cbe865;
  --accent-soft: #f1f5dc;
  --on-accent: #17352c;

  --bg: #f7f8f4;
  --surface: #ffffff;
  --surface-2: #f1f3ed;
  --surface-3: #e6eae2;
  --overlay: rgba(14, 26, 20, .44);

  --ink: #1c2e26;
  --ink-2: #3a4b42;
  --muted: #5f6b62;          /* ≥ 4.5 к --bg и --surface-2 / ≥ 4.5:1 on bg */
  --faint: #8d978f;          /* только декор, не текст / decoration only */
  --line: #e2e7de;
  --line-2: #d3dbcf;

  --ok: #1d7a4f;   --ok-bg: #e3f3ea;
  --warn: #8a5510; --warn-bg: #fbf0dc;
  --err: #b23b1e;  --err-bg: #fbe6df;
  --info: #2257c5; --info-bg: #e5ecfb;
  --mock: #6b4fa8; --mock-bg: #efe9fa;
  --ai: #7a3ec2;   --ai-bg: #f3eafd;   /* правки ИИ (версии) — не путать с макетом / AI edits, not the mock style */

  --focus: #2e8b72;
  --sel: #2f6fec;            /* выделение на холсте / canvas selection */
  --guide: #e5397f;          /* направляющие / snap guides */
  --toast-bg: #1c2e26;
  --toast-fg: #f4f6f1;

  --shadow-1: 0 1px 2px rgba(22, 40, 32, .06), 0 1px 1px rgba(22, 40, 32, .03);
  --shadow-2: 0 4px 16px rgba(22, 40, 32, .08), 0 1px 3px rgba(22, 40, 32, .06);
  --shadow-3: 0 20px 50px rgba(16, 30, 24, .18), 0 4px 14px rgba(16, 30, 24, .08);

  --r-s: 8px;
  --r: 12px;
  --r-l: 16px;
  --r-pill: 999px;

  --font-head: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-brand-head: 'Lora', Georgia, 'Times New Roman', serif;
  --font-brand: 'Golos Text', 'Inter', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --side-w: 232px;
  --top-h: 60px;
  --tabbar-h: 64px;
  --content-max: 1320px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #7cc7ae;
    --primary-2: #a6dcc9;
    --primary-3: #c9ecdf;
    --primary-soft: #1b3a30;
    --primary-soft-2: #24493c;
    --on-primary: #08201a;
    --accent: #d9f279;
    --accent-2: #e7fa9f;
    --accent-soft: #2c3518;
    --on-accent: #17352c;
    --bg: #0f1713;
    --surface: #16211b;
    --surface-2: #1c2a22;
    --surface-3: #23342a;
    --overlay: rgba(0, 0, 0, .62);
    --ink: #e8efe6;
    --ink-2: #c9d5c8;
    --muted: #9fae9f;
    --faint: #6d7d70;
    --line: #26362c;
    --line-2: #33463a;
    --ok: #5fd19a;   --ok-bg: #163a28;
    --warn: #f0b65a; --warn-bg: #3a2c12;
    --err: #ff8d6b;  --err-bg: #40201a;
    --info: #8fb2ff; --info-bg: #1b2847;
    --mock: #c4a8ff; --mock-bg: #2c2242;
    --ai: #dcb8ff;   --ai-bg: #33204a;
    --focus: #9fe0c8;
    --sel: #6f9dff;
    --guide: #ff6aa8;
    --toast-bg: #2a3c31;
    --toast-fg: #eef3ec;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-3: 0 20px 50px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --primary: #7cc7ae;
  --primary-2: #a6dcc9;
  --primary-3: #c9ecdf;
  --primary-soft: #1b3a30;
  --primary-soft-2: #24493c;
  --on-primary: #08201a;
  --accent: #d9f279;
  --accent-2: #e7fa9f;
  --accent-soft: #2c3518;
  --on-accent: #17352c;
  --bg: #0f1713;
  --surface: #16211b;
  --surface-2: #1c2a22;
  --surface-3: #23342a;
  --overlay: rgba(0, 0, 0, .62);
  --ink: #e8efe6;
  --ink-2: #c9d5c8;
  --muted: #9fae9f;
  --faint: #6d7d70;
  --line: #26362c;
  --line-2: #33463a;
  --ok: #5fd19a;   --ok-bg: #163a28;
  --warn: #f0b65a; --warn-bg: #3a2c12;
  --err: #ff8d6b;  --err-bg: #40201a;
  --info: #8fb2ff; --info-bg: #1b2847;
  --mock: #c4a8ff; --mock-bg: #2c2242;
  --ai: #dcb8ff;   --ai-bg: #33204a;
  --focus: #9fe0c8;
  --sel: #6f9dff;
  --guide: #ff6aa8;
  --toast-bg: #2a3c31;
  --toast-fg: #eef3ec;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-3: 0 20px 50px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* ==================================================================
   2. Сброс и типографика / Reset & typography
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.has-overlay { overflow: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; }
svg.i { display: inline-block; flex: none; vertical-align: middle; }
a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.screen:focus, .screen:focus-visible { outline: none; }
p { margin: 0 0 .75em; }
code, .mono { font-family: var(--mono); font-size: .92em; }
code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; }
hr { border: 0; height: 1px; background: var(--line); margin: 16px 0; }
::selection { background: color-mix(in srgb, var(--primary) 22%, transparent); }

h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--font-head); color: var(--ink); margin: 0 0 .5em; letter-spacing: -.01em; }
h1, .h1 { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
h2, .h2 { font-size: 22px; line-height: 1.25; font-weight: 700; }
h3, .h3 { font-size: 18px; line-height: 1.3; font-weight: 700; }
h4, .h4 { font-size: 15px; line-height: 1.35; font-weight: 700; letter-spacing: 0; }
@media (max-width: 599px) { h1, .h1 { font-size: 25px; } h2, .h2 { font-size: 20px; } }
.lead { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.small { font-size: 13px; }
.xs { font-size: 12px; }
.muted { color: var(--muted); }
.ink-2 { color: var(--ink-2); }
.strong { font-weight: 600; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.tnum { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ok-text { color: var(--ok); } .warn-text { color: var(--warn); } .err-text { color: var(--err); } .info-text { color: var(--info); }

.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--r); border: 0; background: var(--primary); color: var(--on-primary); font: 600 14px/1 var(--font); }
.skip-link:focus { top: 12px; }

/* ==================================================================
   3. Утилиты раскладки / Layout utilities
   ================================================================== */
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.row.nowrap { flex-wrap: nowrap; }
.row.top { align-items: flex-start; }
.stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }
.grow { flex: 1 1 auto; min-width: 0; }
.spacer { flex: 1 1 auto; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.m-0 { margin: 0; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) {
  .grid-2, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grid-auto { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 240px)), 1fr)); }
/* Основная колонка + боковая панель / main + aside */
.cols-aside { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1200px) { .cols-aside { grid-template-columns: minmax(0, 1fr) 360px; } }

/* Шапка страницы / Page head */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head > div:first-child { min-width: 0; }
.page-title { margin: 0; font: 800 28px/1.15 var(--font-head); letter-spacing: -.02em; color: var(--ink); }
.page-sub { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 599px) { .page-title { font-size: 24px; } .page-head { margin-bottom: 16px; } }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.section { margin-top: 32px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.section-title { margin: 0; font: 700 18px/1.3 var(--font-head); color: var(--ink); }
.link-more { display: inline-flex; align-items: center; gap: 4px; font: 600 14px/1 var(--font); color: var(--primary); text-decoration: none; }
.link-more:hover { text-decoration: underline; }

/* ==================================================================
   4. Компоненты / Components
   ================================================================== */

/* Кнопки / Buttons */
.btn {
  --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-bd: var(--line-2); --btn-bg-h: var(--surface-2);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; min-width: 0;
  border: 1px solid var(--btn-bd); border-radius: var(--r);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 600 14px/1 var(--font); letter-spacing: -.003em;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .06s, color .15s;
}
.btn:hover { background: var(--btn-bg-h); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; pointer-events: none; }
.btn-primary { --btn-bg: var(--primary); --btn-fg: var(--on-primary); --btn-bd: transparent; --btn-bg-h: var(--primary-2); }
.btn-accent { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: transparent; --btn-bg-h: var(--accent-2); }
.btn-ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-bg-h: var(--surface-2); --btn-fg: var(--ink-2); }
.btn-danger { --btn-bg: var(--surface); --btn-fg: var(--err); --btn-bd: color-mix(in srgb, var(--err) 35%, var(--line-2)); --btn-bg-h: var(--err-bg); }
.btn-sm { height: 32px; padding: 0 12px; gap: 6px; font-size: 13px; border-radius: var(--r-s); }
.btn-lg { height: 48px; padding: 0 22px; gap: 10px; font-size: 16px; }
.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }
.btn-icon.btn-lg { width: 48px; }
.btn-block { width: 100%; }
.btn .i { flex: none; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; border: 2px solid var(--btn-fg); border-right-color: transparent; animation: spin .7s linear infinite;
}
.btn .price { font-weight: 500; opacity: .8; }
.btn-group { display: inline-flex; }
.btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Чипы / Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; max-width: 100%;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2);
  font: 500 13px/1 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
button.chip:hover, a.chip:hover, label.chip:hover { border-color: var(--primary); color: var(--ink); }
.chip.is-on, .chip[aria-pressed="true"], .chip[aria-checked="true"], .chip[aria-current="true"], .chip[aria-current="page"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.chip-sm { height: 26px; padding: 0 10px; font-size: 12px; gap: 4px; }
.chip-static, span.chip, div.chip { cursor: default; }
.chip .i { flex: none; }
.chip-x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: -6px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.chip-x:hover { background: var(--surface-3); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Бейджи / Badges */
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; max-width: 100%;
  border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--surface-2); color: var(--ink-2); font: 600 12px/1 var(--font); white-space: nowrap; vertical-align: middle;
}
.badge .i { width: 13px; height: 13px; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.err { background: var(--err-bg); color: var(--err); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.mock { background: var(--mock-bg); color: var(--mock); border-color: color-mix(in srgb, var(--mock) 35%, transparent); border-style: dashed; }
.badge.neutral { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.badge.accent { background: var(--accent); color: var(--on-accent); }
.badge.ai { background: var(--ai-bg); color: var(--ai); border-color: color-mix(in srgb, var(--ai) 30%, transparent); }
.badge-lg { height: 26px; padding: 0 10px; font-size: 13px; }
.badge-ch b { font-weight: 700; }
.ch-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* Счётчик / Counter */
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); font: 700 12px/1 var(--font); }
.count-dot { position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #c2410c; color: #fff; border: 2px solid var(--bg); box-sizing: content-box; font-size: 12px; line-height: 16px; transform: translate(35%, -20%); }

/* Статус: точка + текст / Status: dot + text */
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); min-width: 0; }
.status::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.status.ok::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.status.warn::before { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.status.err::before { background: var(--err); box-shadow: 0 0 0 3px var(--err-bg); }
.status.info::before { background: var(--info); box-shadow: 0 0 0 3px var(--info-bg); }
.status.live::before { animation: pulse 1.6s ease-in-out infinite; }

/* Карточки и панели / Cards & panels */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1); min-width: 0; }
.card-pad { padding: 20px; }
@media (max-width: 599px) { .card-pad { padding: 16px; } }
.card-hover { transition: border-color .15s, box-shadow .2s, transform .2s; }
.card-hover:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-1px); }
a.card { display: block; color: inherit; text-decoration: none; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-title { margin: 0; font: 700 16px/1.3 var(--font-head); color: var(--ink); }
.panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.panel-title { margin: 0; font: 700 14px/1.3 var(--font-head); color: var(--ink); }

/* Выноски / Callouts */
.callout { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 14px; }
.callout > .i { margin-top: 1px; flex: none; }
.callout-body { flex: 1; min-width: 0; }
.callout-title { font-weight: 700; margin-bottom: 2px; }
.callout-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.callout.ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.callout.ok > .i { color: var(--ok); }
.callout.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.callout.warn > .i { color: var(--warn); }
.callout.err { background: var(--err-bg); border-color: color-mix(in srgb, var(--err) 25%, transparent); }
.callout.err > .i { color: var(--err); }
.callout.info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.callout.info > .i { color: var(--info); }

/* Поля / Fields */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field .label { font: 600 13px/1.3 var(--font); color: var(--ink-2); }
.field .req { color: var(--err); }
.input, .select, .textarea {
  width: 100%; min-width: 0; height: 40px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink);
  font: 400 14px/1.4 var(--font); transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238d978f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--line-2)); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.input-sm { height: 32px; font-size: 13px; border-radius: var(--r-s); }
.hint { font-size: 12px; line-height: 1.4; color: var(--muted); }
.error { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.4; color: var(--err); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--err); }
.input-wrap { position: relative; display: block; min-width: 0; }
.input-wrap > .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-wrap > .input { padding-left: 38px; }
.check { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.check input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--primary); flex: none; }
.form-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Переключатель / Switch: <label class="switch"><input type="checkbox"> Текст</label> */
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); cursor: pointer; line-height: 1.35; }
.switch input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; position: relative;
  width: 38px; height: 22px; border-radius: var(--r-pill); background: var(--line-2); cursor: pointer; transition: background-color .15s;
}
.switch input::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .18s ease;
}
.switch input:checked { background: var(--primary); }
.switch input:checked::after { transform: translateX(16px); }
.switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:disabled { opacity: .5; cursor: not-allowed; }

/* Сегментный переключатель / Segmented control */
.seg { display: inline-flex; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); vertical-align: middle; }
.seg::-webkit-scrollbar { display: none; }
.seg > button, .seg > a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; flex: none;
  border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink-2); font: 600 13px/1 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer;
}
.seg > button:hover, .seg > a:hover { color: var(--ink); }
.seg > .is-on, .seg > [aria-pressed="true"], .seg > [aria-selected="true"], .seg > [aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg-sm > button, .seg-sm > a { height: 26px; padding: 0 10px; font-size: 12px; }

/* Вкладки / Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab, .tabs > a, .tabs > button {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; flex: none;
  border: 0; background: none; color: var(--muted); font: 600 14px/1 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer;
}
.tabs .tab:hover, .tabs > a:hover, .tabs > button:hover { color: var(--ink); }
.tabs .is-on, .tabs [aria-selected="true"] { color: var(--ink); }
.tabs .is-on::after, .tabs [aria-selected="true"]::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--primary); }
.tab-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font: 600 12px/1 var(--font); }

/* Шаги / Stepper */
.stepper { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stepper li { display: flex; align-items: center; gap: 8px; font: 600 13px/1.2 var(--font); color: var(--muted); min-width: 0; }
.stepper li + li::before { content: ''; width: 28px; height: 1px; background: var(--line-2); flex: none; }
.stepper li a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.stepper .n { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); font: 700 12px/1 var(--font); color: var(--muted); }
.stepper .done, .stepper .is-done { color: var(--ink-2); }
.stepper .done .n, .stepper .is-done .n { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.stepper .current, .stepper .is-current { color: var(--ink); }
.stepper .current .n, .stepper .is-current .n { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
@media (max-width: 599px) {
  .stepper li:not(.current):not(.is-current) .l { display: none; }
  .stepper li + li::before { width: 14px; }
  /* Пройденный шаг — ссылка: область касания 40 px при кружке 26 px / 40 px tap area around the 26 px dot */
  .stepper li a { min-width: 40px; min-height: 40px; justify-content: center; }
}


/* Прогресс / Progress */
.progress { position: relative; display: block; height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.progress > i, .progress > .bar { position: absolute; left: 0; top: 0; bottom: 0; display: block; border-radius: inherit; background: var(--primary); transition: width .4s ease; }
.progress-sm { height: 6px; }
.progress-lg { height: 10px; }
.progress.ok > i { background: var(--ok); }
.progress.warn > i { background: var(--warn); }
.progress.err > i { background: var(--err); }
.progress.accent > i { background: var(--accent); }
.progress-indet > i { width: 35% !important; animation: indet 1.25s ease-in-out infinite; }
.progress-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.progress-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-2); }
.progress-val { font-variant-numeric: tabular-nums; color: var(--muted); }
.spinner { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; flex: none; vertical-align: middle; }

/* Таблицы / Tables */
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { position: sticky; top: 0; text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font: 600 12px/1.3 var(--font); white-space: nowrap; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.table tr.is-selected, .table tr.is-selected:hover { background: color-mix(in srgb, var(--primary-soft) 80%, transparent); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .min { width: 1%; white-space: nowrap; }
.table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); margin: 0; }

/* Показатель / KPI */
.kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1); }
.kpi-label { font: 500 13px/1.3 var(--font); color: var(--muted); }
.kpi-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.kpi-value { font: 700 28px/1.1 var(--font-head); color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi-delta { display: inline-flex; align-items: center; gap: 2px; font: 600 13px/1 var(--font); }
.kpi-delta.up { color: var(--ok); }
.kpi-delta.down { color: var(--err); }
.kpi-hint { font-size: 12px; color: var(--muted); }

/* Аватар / Avatar */
.avatar { --s: 32px; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: var(--primary-soft); color: var(--primary); font: 700 calc(var(--s) * .38)/1 var(--font-head); letter-spacing: 0; }
.avatar-sm { --s: 24px; font-size: 11px; }
.avatar-lg { --s: 44px; }
.avatars { display: inline-flex; }
.avatars .avatar { border: 2px solid var(--surface); margin-left: -8px; }
.avatars .avatar:first-child { margin-left: 0; }

/* Пустое состояние / Empty state */
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-l); background: var(--surface); }
.empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--primary-soft); color: var(--primary); }
.empty-title { font: 700 17px/1.3 var(--font-head); color: var(--ink); }
.empty-text { max-width: 440px; margin: 0; color: var(--muted); }

/* Панель инструментов / Toolbar */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.toolbar .spacer { flex: 1 1 auto; }
.toolbar .input-wrap { flex: 1 1 220px; max-width: 360px; }

/* Клавиша / Kbd */
.kbd { display: inline-flex; align-items: center; justify-content: center; height: 20px; min-width: 20px; padding: 0 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); color: var(--muted); font: 600 12px/1 var(--font); white-space: nowrap; }

/* Разделитель / Divider */
.divider { display: block; height: 1px; border: 0; background: var(--line); margin: 16px 0; }
.divider-v { display: inline-block; width: 1px; height: 20px; background: var(--line-2); vertical-align: middle; }

/* Подсказка / Tooltip: data-tip="Текст" */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 70;
  max-width: 260px; width: max-content; padding: 6px 9px; border-radius: var(--r-s);
  background: var(--toast-bg); color: var(--toast-fg); font: 500 12px/1.35 var(--font); text-align: left; white-space: normal;
  box-shadow: var(--shadow-2); pointer-events: none;
}
[data-tip][data-tip-pos="bottom"]:hover::after, [data-tip][data-tip-pos="bottom"]:focus-visible::after { bottom: auto; top: calc(100% + 8px); }
.tooltip { display: inline-block; padding: 6px 9px; border-radius: var(--r-s); background: var(--toast-bg); color: var(--toast-fg); font: 500 12px/1.35 var(--font); box-shadow: var(--shadow-2); }

/* Скелет / Skeleton */
.skeleton { display: block; min-height: 12px; border-radius: var(--r-s); background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 40%, var(--surface-2) 60%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }

/* Список строк / List rows */
.list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.list > * { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-width: 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.list > *:last-child { border-bottom: 0; }
.list > a:hover, .list > button:hover { background: var(--surface-2); }
.list > button { width: 100%; border-left: 0; border-right: 0; border-top: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.list-plain { border: 0; border-radius: 0; background: transparent; }
.list-plain > * { padding-left: 0; padding-right: 0; }
.list-title { font-weight: 600; color: var(--ink); }
.list-sub { font-size: 13px; color: var(--muted); }

/* Превью в рамке / Thumbnail frame */
.thumb { display: inline-grid; place-items: center; flex: none; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.thumb > svg, .thumb > img { width: 100%; height: 100%; object-fit: contain; }
.thumb-product { background: #eee8dc; border-color: color-mix(in srgb, #d6ccb9 70%, var(--line)); }

/* Элементы макета / Mock-only controls */
.mock-ctl { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 100%; padding: 8px 10px; border: 1.5px dashed var(--mock); border-radius: var(--r); background: var(--mock-bg); color: var(--ink); font-size: 13px; }
.mock-ctl::before { content: 'Макет:'; font: 700 12px/1 var(--font); color: var(--mock); letter-spacing: .01em; }
.mock-ctl .chip.is-on, .mock-ctl .chip[aria-pressed="true"], .mock-ctl .seg > .is-on { border-color: var(--mock); color: var(--mock); background: var(--surface); }
.mock-note { display: inline-flex; align-items: center; gap: 4px; color: var(--mock); font: 600 12px/1.3 var(--font); border-bottom: 1px dashed var(--mock); }

/* ==================================================================
   5. Раскладки / Layouts
   ================================================================== */
#app { min-height: 100vh; }

/* Логотип / Logo */
.ps-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 19px/1 var(--font-head); letter-spacing: -.02em; flex: none; }
.ps-logo:hover { color: var(--ink); }
.ps-mark { flex: none; border-radius: 9px; }

/* Публичная / Public */
.L-public { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.pub-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 899px) { .pub-wrap { padding: 0 24px; } }
@media (max-width: 599px) { .pub-wrap { padding: 0 16px; } }
.pub-top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.pub-top-in { display: flex; align-items: center; gap: 20px; height: 68px; }
.pub-nav { display: flex; gap: 4px; margin-left: 12px; }
.pub-nav a { padding: 9px 12px; border-radius: var(--r-s); color: var(--ink-2); font: 600 14px/1 var(--font); text-decoration: none; }
.pub-nav a:hover, .pub-nav a[aria-current="page"] { background: var(--surface-2); color: var(--ink); }
.pub-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pub-menu-btn { display: none; }
.pub-main { flex: 1 0 auto; min-width: 0; }
.pub-foot { margin-top: 72px; padding: 40px 0 76px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 14px; }
.pub-foot-grid { display: grid; gap: 28px; grid-template-columns: 1.5fr repeat(3, 1fr); }
.pub-foot-brand p { max-width: 320px; margin: 12px 0 0; color: var(--muted); }
.pub-foot-col { display: flex; flex-direction: column; gap: 9px; }
.pub-foot-col a { color: var(--ink-2); text-decoration: none; }
.pub-foot-col a:hover { color: var(--ink); text-decoration: underline; }
.pub-foot-h { margin-bottom: 2px; font: 700 13px/1.2 var(--font-head); color: var(--ink); }
.pub-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.pub-stub { padding-top: 56px; }
@media (max-width: 899px) {
  .pub-nav { display: none; }
  .pub-menu-btn { display: inline-flex; }
  .pub-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .pub-top-in { height: 60px; gap: 8px; }
  .pub-login { display: none; }
  .pub-cta { height: 40px; padding: 0 12px; font-size: 13px; }
  .pub-top .ps-logo-word { font-size: 17px; }
}

/* Приложение / App: боковое меню 232 + шапка 60 */
.L-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  grid-template-rows: var(--top-h) auto;
  grid-template-areas: "side top" "side main";
}
.app-side {
  grid-area: side; position: sticky; top: 0; height: 100vh; z-index: 20;
  display: flex; flex-direction: column; gap: 4px; padding: 14px 12px 14px; overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--line);
}
.app-brand { height: 32px; padding: 0 8px; margin-bottom: 14px; }
.app-create { width: 100%; height: 44px; margin-bottom: 14px; font-size: 15px; box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 22%, transparent); }
.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav-item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 10px; color: var(--ink-2); font: 600 14px/1 var(--font); text-decoration: none; transition: background-color .12s, color .12s; }
.app-nav-item .i { color: var(--muted); }
.app-nav-item:hover { background: var(--surface-2); color: var(--ink); }
.app-nav-item[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.app-nav-item[aria-current="page"] .i { color: var(--primary); }
.app-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.side-site { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r); color: var(--ink); text-decoration: none; border: 1px solid var(--line); }
.side-site:hover { background: var(--surface-2); color: var(--ink); }
.side-site .status { font-weight: 600; color: var(--ink); font-size: 13px; }
.side-site-sub { padding-left: 15px; font-size: 12px; color: var(--muted); }
.side-plan { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r); background: var(--surface-2); color: var(--ink); text-decoration: none; font-size: 13px; }
.side-plan:hover { background: var(--surface-3); color: var(--ink); }
.side-plan-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.side-plan-sub { font-size: 12px; color: var(--muted); }

.app-top {
  grid-area: top; position: sticky; top: 0; z-index: 25;
  display: flex; align-items: center; gap: 12px; padding: 0 24px; min-width: 0;
  background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.app-top-logo { display: none; flex: none; }
.app-search {
  display: flex; align-items: center; gap: 10px; height: 40px; width: min(420px, 100%); padding: 0 8px 0 12px; min-width: 0;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--muted); font: 500 14px/1 var(--font); text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.app-search:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--line-2)); box-shadow: var(--shadow-1); }
.app-search-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.app-top-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.app-jobs { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: var(--r); color: var(--ink-2); font: 600 13px/1 var(--font); text-decoration: none; }
.app-jobs:hover { background: var(--surface-2); color: var(--ink); }
.app-jobs.is-running { background: var(--primary-soft); color: var(--primary); }
.app-jobs .count { min-width: 20px; height: 20px; }
.jobs-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .9s linear infinite; flex: none; }
.app-bell { position: relative; }
.app-user { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 4px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font: 600 14px/1 var(--font); }
.app-user:hover, .app-user[aria-expanded="true"] { background: var(--surface-2); }
.app-main { grid-area: main; min-width: 0; }
.app-content { max-width: var(--content-max); margin: 0 auto; padding: 32px 32px 72px; min-width: 0; }
.app-tabbar { display: none; }
@media (max-width: 1199px) { .app-content { padding: 24px 24px 64px; } }
@media (max-width: 899px) {
  .L-app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .app-side { display: none; }
  .app-top { padding: 0 12px 0 16px; gap: 8px; }
  .app-top-logo { display: inline-flex; }
  .app-search { width: 40px; flex: none; justify-content: center; padding: 0; border-color: transparent; background: transparent; color: var(--ink-2); }
  .app-search-label, .app-search .kbd, .app-help, .app-user-name, .app-user > .i, .app-jobs-label { display: none; }
  .app-jobs { padding: 0 8px; }
  .app-user { padding: 0 2px; }
  .app-content { padding: 20px 24px calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom)); }
  .app-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: stretch; justify-content: space-around;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 4px 6px env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 599px) { .app-content { padding: 16px 16px calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom)); } }
.tab-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: var(--r); background: none; color: var(--muted); font: 600 12px/1.1 var(--font); text-decoration: none; cursor: pointer; }
.tab-item:hover { color: var(--ink); }
.tab-item[aria-current="page"], .tab-item.is-on { color: var(--primary); }
.tab-plus { color: var(--ink-2); }
.tab-plus-btn { display: grid; place-items: center; width: 44px; height: 32px; border-radius: 12px; background: var(--primary); color: var(--on-primary); box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent); }
.tab-plus[aria-current="page"] .tab-plus-btn { background: var(--accent); color: var(--on-accent); }

/* Полноэкранная / Focus: модуль рисует .focus-top сам */
.L-focus { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.focus-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.focus-main > .screen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 900px) { .L-focus { height: 100vh; overflow: hidden; } }
.focus-top { position: sticky; top: 0; z-index: 25; flex: none; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px; min-width: 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.focus-top .focus-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 15px/1.2 var(--font-head); color: var(--ink); }
.focus-top .spacer { flex: 1 1 auto; }
.focus-top .divider-v { margin: 0 4px; }
.focus-body { flex: 1 1 auto; min-height: 0; display: flex; min-width: 0; }
.focus-stub { flex: 1; display: grid; place-items: center; padding: 32px 16px; }

/* Вход / Auth: карточка по центру */
.L-auth {
  min-height: 100vh; display: flex; flex-direction: column;
  background:
    radial-gradient(900px 520px at 8% -8%, color-mix(in srgb, var(--primary-soft) 90%, transparent), transparent 62%),
    radial-gradient(760px 480px at 105% 108%, color-mix(in srgb, var(--accent-soft) 90%, transparent), transparent 60%),
    var(--bg);
}
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; padding: 0 24px; }
.auth-main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 16px 16px 40px; min-width: 0; }
.auth-main > .screen { width: 100%; display: flex; justify-content: center; }
.auth-card { width: 100%; max-width: 440px; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-2); min-width: 0; }
.auth-card-wide { max-width: 760px; }
.auth-foot { padding: 0 16px 20px; text-align: center; font-size: 12px; color: var(--muted); }
@media (max-width: 599px) { .auth-top { padding: 0 16px; } .auth-card { padding: 24px 18px; } }

/* Заглушка экрана / Stub */
.stub { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 760px; }
.stub .lead { margin: 0; }
.stub-route { font-size: 13px; }

/* ==================================================================
   6. Оверлеи / Overlays
   ================================================================== */
.modal-backdrop, .drawer-backdrop, .cmdk-backdrop { position: fixed; inset: 0; z-index: 80; background: var(--overlay); animation: fadeIn .15s ease; }
.modal-backdrop { display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); background: var(--surface); color: var(--ink); border-radius: var(--r-l); box-shadow: var(--shadow-3); outline: none; animation: popIn .18s ease; min-width: 0; }
.modal-md { max-width: 560px; } .modal-lg { max-width: 820px; } .modal-xl { max-width: 1120px; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 16px 10px 20px; }
.modal-title { flex: 1; min-width: 0; margin: 0; font: 700 19px/1.3 var(--font-head); color: var(--ink); }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 20px 20px; }
.modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
@media (max-width: 599px) {
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal { max-width: none; max-height: 92vh; border-radius: 16px 16px 0 0; animation: slideUp .22s cubic-bezier(.2, .8, .2, 1); }
  .modal-foot > .btn { flex: 1 1 auto; }
}

.drawer { position: fixed; z-index: 81; display: flex; flex-direction: column; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3); outline: none; min-width: 0; }
.drawer-right { top: 0; right: 0; bottom: 0; width: min(var(--drawer-w, 420px), 100vw); animation: slideIn .22s cubic-bezier(.2, .8, .2, 1); }
.drawer-bottom { left: 0; right: 0; bottom: 0; max-height: 86vh; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: slideUp .22s cubic-bezier(.2, .8, .2, 1); }
.drawer-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.drawer-title { flex: 1; min-width: 0; margin: 0; font: 700 18px/1.3 var(--font-head); }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px 20px; }
.drawer-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }

/* Меню / Menu */
.menu { position: fixed; z-index: 90; min-width: 230px; max-width: calc(100vw - 16px); padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-3); animation: popIn .12s ease; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: var(--r-s); background: none; color: var(--ink); font: 500 14px/1.25 var(--font); text-align: left; text-decoration: none; cursor: pointer; }
.menu-item .i { color: var(--muted); }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); color: var(--ink); outline: none; }
.menu-item.danger, .menu-item.danger .i { color: var(--err); }
.menu-item:disabled { opacity: .5; cursor: not-allowed; }
.menu-text { flex: 1; min-width: 0; }
.menu-hint { font-size: 12px; color: var(--muted); }
.menu-check { color: var(--primary); display: inline-flex; }
.menu-check .i { color: var(--primary); }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--line); }
.menu-label { padding: 8px 10px 4px; font: 600 12px/1.2 var(--font); color: var(--muted); }

/* Тосты / Toasts */
.toast-host { position: fixed; right: 20px; bottom: 20px; z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; min-width: 260px; max-width: min(440px, calc(100vw - 32px)); padding: 12px 10px 12px 14px; border-radius: var(--r); background: var(--toast-bg); color: var(--toast-fg); box-shadow: var(--shadow-3); font: 500 14px/1.4 var(--font); animation: toastIn .2s ease; }
.toast > .i { flex: none; margin-top: 1px; }
.toast.ok > .i { color: #7fdcae; } .toast.warn > .i { color: #f6c56f; } .toast.err > .i { color: #ff9f86; } .toast.info > .i { color: #a9c4ff; }
.toast-text { flex: 1; min-width: 0; }
.toast-act { border: 0; background: none; color: var(--accent); font: 700 13px/1.4 var(--font); padding: 0 4px; cursor: pointer; white-space: nowrap; }
.toast-x { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: inherit; opacity: .7; cursor: pointer; flex: none; }
.toast-x:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.toast.is-out { opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
@media (max-width: 899px) {
  .toast-host { left: 16px; right: 16px; align-items: stretch; }
  body.has-tabbar .toast-host { bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; min-width: 0; }
}
/* Нижняя панель модуля (App.bottomBar): тосты над ней / toasts above a module bottom bar */
body.has-bottom-bar .toast-host { bottom: calc(var(--bottom-bar, 0px) + 12px); }

/* Палитра команд / Command palette */
.cmdk-backdrop { display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.cmdk { width: min(640px, 100%); overflow: hidden; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-3); animation: popIn .15s ease; }
.cmdk-input-wrap { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.cmdk-input { flex: 1; min-width: 0; height: 56px; border: 0; outline: none; background: none; color: var(--ink); font: 500 16px/1 var(--font); }
.cmdk-input::placeholder { color: var(--muted); }
.cmdk-list { max-height: min(440px, 60vh); overflow-y: auto; padding: 6px; }
.cmdk-group { padding: 10px 10px 4px; font: 600 12px/1 var(--font); color: var(--muted); }
.cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-s); cursor: pointer; color: var(--ink); }
.cmdk-item .i { color: var(--muted); }
.cmdk-item[aria-selected="true"] { background: var(--primary-soft); }
.cmdk-item[aria-selected="true"] .i { color: var(--primary); }
.cmdk-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.cmdk-meta { flex: none; max-width: 40%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--muted); font-family: var(--mono); }
.cmdk-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.cmdk-foot { display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.cmdk-foot span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 599px) { .cmdk-backdrop { padding-top: 16px; } .cmdk-foot { display: none; } }

/* «Нужно внимание» / Attention feed */
.att-list { display: flex; flex-direction: column; gap: 12px; }
.att-item { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.att-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--info-bg); color: var(--info); }
.att-icon.warn { background: var(--warn-bg); color: var(--warn); }
.att-icon.err { background: var(--err-bg); color: var(--err); }
.att-icon.ok { background: var(--ok-bg); color: var(--ok); }
.att-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.att-title { font: 700 14px/1.35 var(--font-head); color: var(--ink); }
.att-text { font-size: 13px; color: var(--ink-2); }
.att-affected { display: flex; flex-wrap: wrap; gap: 6px; }
.att-affected .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.att-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.att-time { font-size: 12px; color: var(--muted); }

/* «Ещё» на телефоне / Mobile "More" sheet */
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.more-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 12px 6px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--ink); font: 600 13px/1.2 var(--font); text-align: center; text-decoration: none; }
.more-item .i { color: var(--primary); }
.more-item:hover { background: var(--primary-soft); color: var(--ink); }

/* Плашка макета / Mockup badge
   Компактный значок в шапке раскладки (public, app, auth) — в потоке, поэтому не закрывает контент; в focus — в углу.
   Compact badge inside each shell header (in flow, never over content); bottom-left corner in focus. */
.mock-pill { position: relative; z-index: 60; display: inline-flex; flex: none; min-width: 0; }
.mock-pill-toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 9px;
  border: 1.5px dashed var(--mock); border-radius: var(--r-pill); background: var(--mock-bg); color: var(--mock);
  font: 700 12px/1 var(--font); white-space: nowrap; cursor: pointer;
}
.mock-pill-toggle:hover { background: color-mix(in srgb, var(--mock) 14%, var(--mock-bg)); }
.mock-pill-chev { transition: transform .15s; }
.mock-pill.is-open .mock-pill-chev { transform: rotate(180deg); }
.mock-pill-panel {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 70; width: 268px; max-width: calc(100vw - 24px); padding: 12px;
  border: 1.5px dashed var(--mock); border-radius: var(--r); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3);
}
.mock-pill-t { font: 700 13px/1.3 var(--font-head); color: var(--mock); }
.mock-pill-d { margin: 4px 0 10px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.mock-pill-links { display: flex; flex-direction: column; gap: 2px; }
.mock-pill-links a, .mock-pill-links button {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px; border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--ink); font: 600 13px/1.2 var(--font); text-align: left; text-decoration: none; cursor: pointer;
}
.mock-pill-links a:hover, .mock-pill-links button:hover { background: var(--surface-2); color: var(--ink); }
.mock-pill-links .i { color: var(--mock); }
.mock-pill-app { margin-left: 4px; }
.mock-pill-pub { margin-left: 4px; }
.auth-top-l { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.mock-pill-focus { position: fixed; left: 12px; bottom: 12px; }
.mock-pill-focus .mock-pill-toggle { padding: 0 9px; gap: 5px; }   /* ≤ 80 px: помещается над левой рейкой модулей / fits the module's left rail */
.mock-pill-focus .mock-pill-chev { display: none; }
.mock-pill-focus .mock-pill-panel { top: auto; bottom: calc(100% + 8px); }
body.has-bottom-bar .mock-pill-focus { bottom: calc(var(--bottom-bar, 0px) + 10px); }
/* Телефон, focus без нижней панели (страница прокручивается): значок — в потоке после контента, ничего не закрывает.
   Phone focus without a bottom bar: the badge sits in flow after the content instead of floating over it. */
@media (max-width: 599px) {
  body:not(.has-bottom-bar) .mock-pill-focus { position: relative; left: auto; bottom: auto; align-self: flex-start; margin: 16px; }
  body:not(.has-bottom-bar) .mock-pill-focus .mock-pill-panel { bottom: calc(100% + 8px); }
}
@media (max-width: 599px) {
  .mock-pill-toggle { height: 40px; padding: 0 12px; }
  .mock-pill-pub { display: none; }               /* на телефоне ссылки макета — в меню шапки / in the header menu */
  .app-top .mock-pill-name { display: none; }       /* в узкой шапке — только значок / icon only in the narrow header */
  .app-top .mock-pill-toggle { width: 40px; padding: 0; justify-content: center; }
  .app-top .mock-pill-chev { display: none; }
  .app-top .mock-pill-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-width: none; }
}
@media print { .mock-pill, .toast-host { display: none !important; } }

/* Карта макетов и 404 / Screen map & 404 */
.nf { padding-top: 64px; }
.mt { padding-top: 40px; padding-bottom: 24px; }
.mt-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 860px; }
.mt-title { margin: 0; font: 800 44px/1.08 var(--font-head); letter-spacing: -.03em; color: var(--ink); }
.mt-lead { margin: 0; }
.mt-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.4fr; gap: 12px; align-items: stretch; margin: 28px 0 12px; }
.mt-sum { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1); }
.mt-sum-v { font: 800 30px/1 var(--font-head); color: var(--ink); }
.mt-sum-l { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1.2 var(--font); }
.mt-sum-ok .mt-sum-l { color: var(--ok); }
.mt-sum-warn .mt-sum-l { color: var(--warn); }
.mt-sum-err .mt-sum-l { color: var(--err); }
.mt-sum-note { align-self: center; margin: 0; font-size: 13px; color: var(--muted); }
.mt-filter { position: sticky; top: 68px; z-index: 5; padding: 12px 0; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mt-chip-n { color: var(--muted); font-weight: 500; }
.mt-search { flex: 1 1 260px; max-width: 360px; }
.mt-group { margin-top: 24px; }
.mt-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mt-group-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); flex: none; }
.mt-group-title { margin: 0; font: 700 20px/1.2 var(--font-head); color: var(--ink); }
.mt-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.mt-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mt-n { font: 700 13px/1 var(--mono); color: var(--muted); }
.mt-card-title { margin: 2px 0 0; font: 700 17px/1.3 var(--font-head); }
.mt-card-title a { color: var(--ink); text-decoration: none; }
.mt-card-title a:hover { color: var(--primary); text-decoration: underline; }
.mt-route { align-self: flex-start; font-size: 12.5px; }
.mt-purpose { margin: 0; font-size: 14px; color: var(--ink-2); }
.mt-note { margin: 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--surface-2); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.mt-note-k { font-weight: 700; color: var(--ink); }
.mt-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
@media (max-width: 899px) {
  .mt-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mt-sum-note { grid-column: 1 / -1; }
  .mt-title { font-size: 36px; }
}
@media (max-width: 599px) {
  .mt { padding-top: 24px; }
  .mt-title { font-size: 30px; }
  .mt-sum { padding: 12px; }
  .mt-sum-v { font-size: 24px; }
  .mt-filter { top: 60px; }
  .mt-search { max-width: none; }
}

/* ==================================================================
   7. Графика: графики, холсты / Graphics: charts and canvases
   ================================================================== */
.art-svg { display: block; width: 100%; height: auto; }
.ch { display: block; width: 100%; height: auto; overflow: visible; }
.ch.ch-spark { display: inline-block; width: auto; height: auto; vertical-align: middle; }
.ch-grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.ch-base { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.ch-tick { fill: var(--muted); font: 500 12px/1 var(--font); }
.ch-val { fill: var(--ink-2); font: 600 12px/1 var(--font); }
.ch-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-area { fill: var(--primary); opacity: .1; }
.ch-dot { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
.ch-bar { fill: var(--primary); }
.ch-bar.is-soft { fill: color-mix(in srgb, var(--primary) 38%, var(--surface)); }
.ch-hbar-track { fill: var(--surface-2); }
.ch-hit { fill: transparent; }
.ch-hit:hover + .ch-hl, .ch-hl { pointer-events: none; }
.ch-strip.ok { fill: var(--ok); } .ch-strip.warn { fill: var(--warn); } .ch-strip.err { fill: var(--err); }
.ch-col:hover .ch-bar { fill: var(--primary-2); }
.ch-pt .ch-dot { opacity: 0; transition: opacity .1s; }
.ch-pt:hover .ch-dot { opacity: 1; }
.ch-pt.is-last .ch-dot { opacity: 1; }

/* ==================================================================
   8. Анимации / Animations
   ================================================================== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes indet { 0% { left: -35%; } 100% { left: 100%; } }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes slideUp { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==================================================================
   9. Предпросмотр сайта бренда / Brand-site preview (.sitepv)
   Раскладка зависит от ширины контейнера (1280 / 820 / 390), а не окна.
   Layout follows the container width (1280 / 820 / 390), not the viewport.
   ================================================================== */
.sitepv-fit { position: relative; width: 100%; overflow: hidden; }
/* После подгонки (Art.fitAll) рамка устройства показывает тень целиком; с maxHeight обрезаем по высоте.
   Once fitted, a device frame keeps its full shadow; previews capped by maxHeight stay clipped. */
.sitepv-fit.is-fit:not(.is-clipped):has(> .sitepv.has-frame) { overflow: visible; }
.sitepv-fit > .sitepv { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sitepv {
  --sp-moss: #2F5D46; --sp-moss-2: #24493A; --sp-clay: #E9E2D4; --sp-terra: #C46A3E; --sp-terra-bg: #F1DED0;
  --sp-ink: #1F2622; --sp-ink-2: #4A524D; --sp-milk: #F7F3EC; --sp-line: #DDD4C4; --sp-card: #FFFFFF;
  /* Выделение секций: свой синий, не зависит от темы (белый текст 4,6 : 1); --pv-k = 1 / масштаб — ставит Art.fitAll.
     Section selection colours are theme-independent (white text 4.6:1); --pv-k = 1/scale is set by Art.fitAll. */
  --pv-sel: #2f6fec; --pv-sel-fg: #FFFFFF; --pv-hov-bg: #DBE6FD; --pv-hov-fg: #1D4FB8; --pv-k: 1;
  container: sitepv / inline-size;
  position: relative; overflow: hidden; text-align: left;
  background: var(--sp-milk); color: var(--sp-ink);
  font: 400 17px/1.6 'Golos Text', 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sitepv * { box-sizing: border-box; }
.sitepv p { margin: 0 0 12px; }
.sitepv svg.i { display: inline-block; }
.sitepv .art-svg { display: block; width: 100%; height: auto; }

/* Рамки устройств / Device frames */
.sitepv.has-frame { border-radius: 14px; border: 1px solid #D9D2C6; box-shadow: 0 24px 60px rgba(30, 40, 34, .16); }
.sp-chrome { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; background: #ECE7DF; border-bottom: 1px solid #DCD5CA; }
.sp-dots { display: inline-flex; gap: 7px; width: 64px; }
.sp-dots i { width: 12px; height: 12px; border-radius: 50%; background: #D2CABD; }
.sp-url { flex: 1; max-width: 460px; margin: 0 auto; height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; background: #FBF9F5; color: #4A524D; font: 500 13px/1 'Inter', sans-serif; }
.sitepv.has-frame[data-device="phone"] { border: 10px solid #1C2320; border-radius: 46px; }
.sp-phonebar { position: relative; display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 26px; background: var(--sp-milk); font: 600 14px/1 'Inter', sans-serif; color: var(--sp-ink); }
.sp-phonebar::after { content: ''; position: absolute; left: 50%; top: 7px; width: 104px; height: 25px; margin-left: -52px; border-radius: 14px; background: #1C2320; }

/* Сетка и типографика / Grid and type */
.sp-sec { position: relative; padding: 96px 0; }
.sp-wrap { max-width: 1168px; margin: 0 auto; padding: 0 56px; }
.sp-h1 { font: 600 60px/1.05 'Lora', Georgia, serif; letter-spacing: -.02em; margin: 0 0 22px; text-wrap: balance; }
.sp-h2 { font: 600 40px/1.15 'Lora', Georgia, serif; letter-spacing: -.015em; margin: 0 0 14px; text-wrap: balance; }
.sp-h3 { font: 600 21px/1.3 'Lora', Georgia, serif; margin: 14px 0 6px; }
.sp-center { text-align: center; }
.sp-lead { font-size: 19px; line-height: 1.55; color: var(--sp-ink-2); max-width: 520px; margin: 0 0 30px; }
.sp-sub { color: var(--sp-ink-2); margin: 0; }
.sp-eyebrow { display: inline-block; margin-bottom: 16px; font: 600 13px/1 'Golos Text', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-terra); }
.sp-link { font-weight: 500; color: var(--sp-moss); white-space: nowrap; }
.sp-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.sp-demo-note { display: inline-flex; padding: 6px 12px; border: 1px dashed #B9A88E; border-radius: 999px; font: 500 13px/1 'Inter', sans-serif; color: #7A6A55; white-space: nowrap; }

/* Кнопки / Buttons */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 28px; border-radius: 999px; background: var(--sp-moss); color: #F7F3EC; font: 500 16px/1 'Golos Text', sans-serif; white-space: nowrap; border: 1.5px solid transparent; }
.sp-btn-line { background: transparent; color: var(--sp-ink); border-color: currentColor; }
.sp-btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.sp-btn-light { background: var(--sp-milk); color: var(--sp-ink); }
.sp-btn-block { width: 100%; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Фоны секций / Section backgrounds */
.sp-bg-light { background: var(--sp-milk); }
.sp-bg-clay { background: var(--sp-clay); }
.sp-bg-terra { background: var(--sp-terra-bg); }
.sp-bg-moss { background: var(--sp-moss); color: #F3F0E8; }
.sp-bg-dark { background: var(--sp-ink); color: #E8E5DE; }
.sp-bg-moss .sp-lead, .sp-bg-moss .sp-sub, .sp-bg-moss p, .sp-bg-dark .sp-lead, .sp-bg-dark .sp-sub, .sp-bg-dark p { color: inherit; opacity: .86; }
.sp-bg-moss .sp-btn-line, .sp-bg-dark .sp-btn-line { color: #F3F0E8; }
.sp-bg-moss .sp-btn:not(.sp-btn-line), .sp-bg-dark .sp-btn:not(.sp-btn-line) { background: var(--sp-milk); color: var(--sp-ink); }
.sp-bg-moss .sp-eyebrow, .sp-bg-dark .sp-eyebrow { color: #E3B98F; }
.sp-bg-light + .sp-bg-light, .sp-bg-clay + .sp-bg-clay, .sp-bg-moss + .sp-bg-moss { padding-top: 0; }
.sp-s-header + .sp-sec { padding-top: 96px; }

/* Шапка / Header */
.sp-s-header { padding: 0; border-bottom: 1px solid var(--sp-line); }
.sp-head { display: flex; align-items: center; gap: 36px; height: 84px; }
.sp-logo { display: inline-flex; align-items: center; gap: 10px; font: 600 27px/1 'Lora', Georgia, serif; letter-spacing: -.01em; }
.sp-menu { display: flex; gap: 30px; font-size: 16px; color: var(--sp-ink-2); }
.sp-head-mp { display: flex; gap: 8px; margin-left: auto; }
.sp-burger { display: none; flex-direction: column; gap: 5px; margin-left: auto; }
.sp-burger i { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--sp-ink); }

/* Главный экран / Hero */
.sp-hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.sp-hero-art { min-width: 0; }
.sp-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--sp-ink-2); }
.sp-checks li { display: inline-flex; align-items: center; gap: 8px; }
.sp-checks .i { color: var(--sp-moss); }
.sp-v-center .sp-hero-in { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.sp-v-center .sp-lead { margin-left: auto; margin-right: auto; }
.sp-v-center .sp-actions, .sp-v-center .sp-checks { justify-content: center; }
.sp-v-center .sp-hero-art { width: 100%; max-width: 900px; }
.sp-v-warm .sp-hero-in { grid-template-columns: .95fr 1.05fr; }
.sp-v-warm .sp-hero-art { order: -1; }
.sp-bg-dark .sp-checks, .sp-bg-moss .sp-checks { color: inherit; }
.sp-bg-dark .sp-checks .i { color: #9CC6A8; }

/* Преимущества / Benefits */
.sp-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.sp-benefit { padding: 32px 28px; border-radius: 22px; background: var(--sp-card); border: 1px solid #ECE5D8; }
.sp-benefit p { margin: 0; color: var(--sp-ink-2); font-size: 16px; }
.sp-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #EAF0E8; color: var(--sp-moss); }

/* Товары / Products */
.sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.sp-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--sp-card); border: 1px solid #ECE5D8; min-width: 0; }
.sp-card-img { display: grid; place-items: center; aspect-ratio: 1 / .86; background: #EFE8DC; padding: 12px; }
.sp-card-img svg { width: 84%; height: 100%; }
.sp-card-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; min-width: 0; }
.sp-card-name { font: 600 19px/1.3 'Lora', Georgia, serif; }
.sp-card-meta { font-size: 14px; color: var(--sp-ink-2); }
.sp-card-price { font: 600 18px/1.3 'Golos Text', sans-serif; margin: 2px 0 8px; }
.sp-card-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* О бренде / Story */
.sp-story-in { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.sp-story-art { overflow: hidden; border-radius: 26px; box-shadow: 0 18px 44px rgba(52, 40, 22, .12); }
.sp-story-text p { font-size: 18px; color: var(--sp-ink-2); }
.sp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid #D6CBB8; }
.sp-stats b { display: block; font: 600 30px/1.1 'Lora', Georgia, serif; }
.sp-stats span { display: block; margin-top: 6px; font-size: 14px; color: var(--sp-ink-2); }

/* Отзывы / Reviews */
.sp-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sp-review { margin: 0; padding: 28px; border-radius: 22px; background: var(--sp-card); border: 1px solid #ECE5D8; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.sp-review blockquote { margin: 0; font-size: 17px; line-height: 1.6; }
.sp-review figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--sp-ink-2); }
.sp-review figcaption b { display: block; color: var(--sp-ink); font-size: 15px; }
.sp-avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sp-clay); color: var(--sp-moss); font: 600 17px/1 'Lora', serif; flex: none; }

/* Вопросы / FAQ */
.sp-faq-in { max-width: 880px; }
.sp-faq { margin-top: 32px; border-top: 1px solid var(--sp-line); }
.sp-q { padding: 22px 0; border-bottom: 1px solid var(--sp-line); }
.sp-q-h { display: flex; justify-content: space-between; gap: 20px; font: 500 19px/1.4 'Golos Text', sans-serif; }
.sp-q-i { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--sp-line); font-size: 20px; line-height: 1; color: var(--sp-moss); }
.sp-q.is-open .sp-q-i { background: var(--sp-moss); border-color: var(--sp-moss); color: #F7F3EC; }
.sp-q p { margin: 12px 52px 0 0; color: var(--sp-ink-2); font-size: 16px; }

/* Форма заявки / Lead form */
.sp-lead-in { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.sp-lead-text p { font-size: 18px; max-width: 440px; }
.sp-mini { display: flex; flex-direction: column; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 16px; }
.sp-mini li { display: inline-flex; align-items: center; gap: 10px; }
.sp-form { display: flex; flex-direction: column; gap: 16px; padding: 34px; border-radius: 26px; background: var(--sp-milk); color: var(--sp-ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .18); }
.sp-field { display: flex; flex-direction: column; gap: 7px; }
.sp-label { font: 500 14px/1 'Golos Text', sans-serif; color: var(--sp-ink-2); }
.sp-input { display: flex; align-items: center; height: 52px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--sp-line); background: #fff; color: #8B8F8B; font-size: 16px; }
.sp-textarea { align-items: flex-start; height: 96px; padding-top: 14px; }
.sp-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--sp-ink-2); }
.sp-cb { width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 6px; background: var(--sp-moss); box-shadow: inset 0 0 0 5px var(--sp-moss), inset 0 0 0 7px #fff; }
.sitepv .sp-form .sp-btn { background: var(--sp-moss); color: #F7F3EC; }
.sp-form-note { text-align: center; font-size: 13px; color: var(--sp-ink-2); }

/* Контакты / Contacts */
.sp-contacts-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.sp-contact-list { display: flex; flex-direction: column; gap: 18px; margin: 26px 0 0; padding: 0; list-style: none; }
.sp-contact-list li { display: flex; align-items: center; gap: 14px; font-size: 17px; }
.sp-contact-list .sp-ic { width: 44px; height: 44px; background: var(--sp-milk); }
.sp-map { overflow: hidden; border-radius: 24px; border: 1px solid #D6CBB8; }

/* Галерея / Gallery */
.sp-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.sp-tile { display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 20px; padding: 14px; }
.sp-tile svg { width: 100%; height: 100%; }
.sp-tile-wide { grid-column: span 2; aspect-ratio: auto; padding: 0; }
.sp-tile-wide svg { height: 100%; }

/* Баннер / Banner */
.sp-s-banner { padding: 56px 0; }
.sp-banner-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; padding: 48px 56px; border-radius: 30px; background: var(--sp-moss); color: #F3F0E8; overflow: hidden; }
.sp-banner-in p { opacity: .86; margin-bottom: 24px; }
.sp-banner-in .sp-eyebrow { color: #E3B98F; }

/* Подвал / Footer */
.sp-s-footer { padding: 64px 0 28px; }
.sp-foot-in { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
.sp-foot-brand p { margin-top: 14px; color: #B6BDB7; }
.sp-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sp-foot-cols div { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: #C9CEC9; }
.sp-foot-cols b { color: #F3F0E8; font-weight: 600; margin-bottom: 4px; }
.sp-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid #333D38; font-size: 14px; color: #9EA6A0; }

/* Выделение и наведение секций / Section selection & hover
   Толщина рамки и ярлык умножаются на --pv-k, поэтому на экране они одного размера при любом масштабе (ярлык ≈ 12 px).
   Outline and label scale by --pv-k, so on screen they keep the same size at any preview scale. */
.sitepv [data-sec].is-selected { outline: calc(2px * var(--pv-k)) solid var(--pv-sel); outline-offset: calc(-2px * var(--pv-k)); z-index: 2; }
.sitepv.is-hoverable [data-sec] { cursor: pointer; }
.sitepv.is-hoverable [data-sec]:hover:not(.is-selected) { outline: calc(1.5px * var(--pv-k)) dashed var(--pv-sel); outline-offset: calc(-1.5px * var(--pv-k)); }
.sitepv [data-sec].is-selected::before, .sitepv.is-hoverable [data-sec]:hover::before {
  content: attr(data-sec-label); position: absolute; left: 0; top: 0; z-index: 3;
  padding: calc(5px * var(--pv-k)) calc(9px * var(--pv-k)); border-bottom-right-radius: calc(7px * var(--pv-k));
  background: var(--pv-sel); color: var(--pv-sel-fg); font: 600 calc(12px * var(--pv-k))/1 'Inter', sans-serif; letter-spacing: 0;
}
.sitepv.is-hoverable [data-sec]:hover:not(.is-selected)::before { background: var(--pv-hov-bg); color: var(--pv-hov-fg); }
.sitepv [data-sec].is-hidden { opacity: .38; }

/* Планшет ≤ 1000 px контейнера / Tablet container */
@container sitepv (max-width: 1000px) {
  .sp-sec { padding: 72px 0; }
  .sp-s-header + .sp-sec { padding-top: 72px; }
  .sp-wrap { padding: 0 36px; }
  .sp-h1 { font-size: 46px; }
  .sp-h2 { font-size: 34px; }
  .sp-head { gap: 22px; height: 76px; }
  .sp-menu { gap: 18px; font-size: 15px; }
  .sp-hero-in, .sp-v-warm .sp-hero-in { grid-template-columns: 1fr 1fr; gap: 28px; }
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .sp-benefits { gap: 16px; }
  .sp-benefit { padding: 24px 20px; }
  .sp-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .sp-story-in, .sp-lead-in, .sp-contacts-in { gap: 36px; }
  .sp-banner-in { padding: 36px; }
  .sp-foot-in { grid-template-columns: 1fr; gap: 32px; }
}
/* Телефон ≤ 600 px контейнера / Phone container */
@container sitepv (max-width: 600px) {
  .sitepv, .sp-sec { font-size: 16px; }
  .sp-sec { padding: 52px 0; }
  .sp-s-header + .sp-sec { padding-top: 40px; }
  .sp-wrap { padding: 0 20px; }
  .sp-h1 { font-size: 34px; margin-bottom: 16px; }
  .sp-h2 { font-size: 28px; }
  .sp-lead { font-size: 17px; margin-bottom: 24px; }
  .sp-s-header { padding: 0; }
  .sp-head { height: 64px; }
  .sp-logo { font-size: 24px; }
  .sp-menu, .sp-head-mp { display: none; }
  .sp-burger { display: flex; }
  .sp-hero-in, .sp-v-warm .sp-hero-in { grid-template-columns: 1fr; gap: 28px; }
  .sp-v-warm .sp-hero-art { order: 0; }
  .sp-btn { height: 48px; padding: 0 22px; font-size: 15px; }
  .sp-btn-sm { height: 34px; padding: 0 12px; font-size: 13px; }
  .sp-card-btns { gap: 6px; }
  .sp-actions { flex-direction: column; align-items: stretch; }
  .sp-checks { flex-direction: column; gap: 8px; margin-top: 22px; }
  .sp-benefits, .sp-reviews, .sp-story-in, .sp-lead-in, .sp-contacts-in, .sp-banner-in { grid-template-columns: 1fr; }
  .sp-benefits { margin-top: 24px; }
  .sp-grid { grid-template-columns: 1fr; gap: 14px; }
  .sp-card { flex-direction: row; border-radius: 18px; }
  .sp-card-img { aspect-ratio: auto; width: 104px; flex: none; padding: 6px; }
  .sp-card-img svg { width: 100%; }
  .sp-card-body { padding: 14px 14px 16px; gap: 4px; }
  .sp-card-name { font-size: 17px; }
  .sp-card-price { margin-bottom: 6px; }
  .sp-sec-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
  .sp-story-in { gap: 28px; }
  .sp-stats { gap: 10px; }
  .sp-stats b { font-size: 20px; }
  .sp-stats span { font-size: 13px; }
  .sp-review { padding: 22px; }
  .sp-q-h { font-size: 17px; }
  .sp-q p { margin-right: 0; }
  .sp-form { padding: 22px; border-radius: 20px; }
  .sp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sp-tile-wide { grid-column: span 2; }
  .sp-banner-in { padding: 28px 22px; border-radius: 22px; }
  .sp-foot-cols { grid-template-columns: 1fr 1fr; }
  .sp-foot-bottom { flex-direction: column; }
}

/* ==================================================================
   10. Касания на телефоне / Phone tap targets (в конце, чтобы перекрыть базовые размеры / last to win)
   ================================================================== */
/* Касания на телефоне: кнопки, чипы и крестики не меньше 40 px. Десктоп не меняется.
   Phone tap targets: small buttons, chips and close buttons get at least 40 px. Desktop unchanged. */
@media (max-width: 599px) {
  .btn-sm { height: 40px; padding: 0 14px; }
  .btn-icon.btn-sm { width: 40px; padding: 0; }
  button.chip, a.chip, label.chip, .chip[role="button"], .chip[aria-pressed] { min-height: 40px; height: auto; }
  .chip-x { width: 32px; height: 32px; margin: -6px -10px -6px -4px; }
  .toast-x { width: 40px; height: 40px; margin: -9px -6px -9px 0; }
  .toast-act { min-height: 40px; margin: -9px 0; padding: 0 8px; }
}