/* ============================================================
   LORUSS — self-hosted brand typeface.

   Manrope (SIL Open Font License 1.1 — see fonts/Manrope-OFL.txt),
   served from our own origin so the strict CSP (`default-src 'self'`,
   see app/web/mount.py) needs no font-src relaxation and no
   third-party request is made before consent. Variable file: one
   woff2 per unicode subset covering the whole 400–800 axis, so every
   weight below costs zero extra requests.

   Chosen after an instrumental audit of the reference SaaS visual
   language (measured via CDP computed styles, not guessed): the
   reference uses Manrope 400/500/600/700/800 with tight negative
   tracking on display sizes. Manrope's open licence lets LORUSS use
   the same typeface legitimately; nothing else is taken from it.
   ============================================================ */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Wordmark-only display face — Baloo 2 ExtraBold (SIL OFL 1.1, see
   fonts/Baloo2-OFL.txt), self-hosted for the same CSP reason as Manrope
   above. Used ONLY for the "Loruss" brand wordmark (.brand-word) — not
   the body/UI font. Latin-only subset: the wordmark is a fixed Latin
   string, never user content, so no other subset is needed. Chosen and
   locked after /brand/font-preview (concept "D — Baloo 2 ExtraBold 800,
   stock L", see tests/test_brand_font_lab.py and
   tests/test_brand_wordmark.py) — install concept B (LO Monogram) stays
   the icon; this is the text next to it. */
@font-face {
  font-family: "Baloo2";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/static/fonts/baloo2-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   LORUSS — design system (light-first, premium B2B analytics SaaS)
   Single source of truth. No inline styles anywhere.

   Token architecture: every colour is a SEMANTIC token defined once
   per theme. Components consume semantic tokens only — never a raw
   hex/rgba — so the same component CSS renders correctly in both
   themes with zero duplicated component rules. Light is the primary,
   default theme; dark is a fully-specified secondary theme reached
   via [data-theme="dark"] (explicit toggle, persisted in
   localStorage — see app.js). A handful of legacy token names from
   the pre-redesign system (--accent, --loruss-*, --ok/--warn/--bad)
   are kept as aliases onto the new semantic tokens purely so the
   large existing component-CSS body below (tables, cards, badges,
   the public site, …) keeps working unchanged — new component CSS
   should consume --primary / --success / --warning / --danger /
   --text-primary / --surface / --border directly, not the aliases.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- surfaces --------------------------------------------------- */
  --background: #f6f8fa;
  --surface:         #ffffff;
  --surface-muted:   #eef1f6;
  --surface-elevated:#f7f8fb;
  --border:    #e2e6ee;
  --border-subtle:   rgba(12,16,24,.07);
  --border-strong:   #c9d0dc;
  --glass:     rgba(255,255,255,.82);

  /* ---- text --------------------------------------------------------- */
  --text-primary:   #161b26;
  --text-secondary: #3f4757;
  /* WCAG AA: measured 4.53:1 against --background (#f6f8fa). The
     previous #737c8c measured 3.95:1 — below the 4.5:1 floor for the
     11px caption text this token is used for. */
  --text-muted:     #697285;
  --text-disabled:  rgba(22,27,38,.35);

  /* ---- brand primary — Ozon-inspired blue. Association only; no
     proprietary asset is copied. Used for primary actions, active nav,
     links, selected states, key metrics and data-series — never as a
     full-bleed background. ---- */
  --primary:        #005bff;
  --primary-hover:  #0050e0;
  --primary-active: #0044c4;
  --primary-soft:   rgba(0,91,255,.10);
  --primary-muted:  rgba(0,91,255,.06);
  --primary-line:   rgba(0,91,255,.35);

  /* ---- status ------------------------------------------------------- */
  --success: #1b8a5a;
  --warning: #b45309;
  --danger:  #dc2626;
  --info:    #0284c7;
  --success-soft: rgba(27,138,90,.12);
  --warning-soft: rgba(180,83,9,.13);
  --danger-soft:  rgba(220,38,38,.10);
  --info-soft:    rgba(2,132,199,.10);

  /* marketplace identity accents — used as a small accent only (a tag,
     a chart series); the shell itself stays the unified LORUSS surface */
  --marketplace-wb:      #a03bd6;   /* Wildberries → violet/magenta */
  --marketplace-wb-soft: rgba(160,59,214,.13);
  --marketplace-ozon:      #1f7be0; /* Ozon → blue/cyan */
  --marketplace-ozon-soft: rgba(31,123,224,.13);

  /* ---- canonical brand mark colours ----------------------------------
     The production LORUSS logo ("B — LO Monogram"): L = Ozon Blue,
     O = Wildberries Purple, RUSS = neutral ink. One name, one value,
     reused everywhere the mark/wordmark appears (sidebar, public
     header/footer, login, favicon) — never a bespoke near-duplicate
     shade per surface. Aliases of the existing --primary /
     --marketplace-wb tokens, not new colours, so the mark stays in sync
     with the rest of the brand automatically. See _macros.html
     (brand_icon / brand_word) for the single source of the markup. ---- */
  --brand-ozon-blue:  var(--primary);
  --brand-wb-purple:  var(--marketplace-wb);

  /* ---- R21 creative UI layer — derived accent tones only, NEVER read
     by the monogram/wordmark (those stay on --brand-ozon-blue /
     --brand-wb-purple / --marketplace-wb above, untouched). Used by
     .creative-card / .signal-pill / .creative-callout / decorative
     .signal-* elements for local, page-level colour — never as a new
     global gradient. Kept inside the Ozon-blue and WB-purple families
     so "creative" still reads as LORUSS, not a third brand colour. ---- */
  --ozon-ice:      #eaf3ff;
  --ozon-cyan:     #17aed4;
  --ozon-electric: #2f7dff;
  --wb-lavender:   #f4e9fb;
  --wb-pink:       #d84fb0;
  --wb-electric:   #b34fe0;
  --creative-glow-blue:   rgba(0,91,255,.20);
  --creative-glow-purple: rgba(160,59,214,.20);

  /* ---- legacy aliases (pre-redesign names, still consumed by the
     component CSS below) — point at the semantic tokens above, do not
     give these their own values ---- */
  --bg:        var(--background);
  --surface-2: var(--surface-elevated);
  --surface-3: var(--surface-muted);
  --hairline:  var(--border-subtle);
  --text:      var(--text-primary);
  --text-dim:  var(--text-secondary);
  --text-mute: var(--text-muted);
  --accent:      var(--primary);
  --accent-2:    var(--primary);
  --accent-soft: var(--primary-soft);
  --accent-line: var(--primary-line);
  --loruss-violet:   var(--primary);
  --loruss-blue:     var(--primary);
  --loruss-gradient:      var(--primary);
  --loruss-gradient-soft: var(--primary-soft);
  --loruss-glow-violet: transparent;
  --loruss-glow-blue:   transparent;
  --ok:    var(--success);
  --warn:  var(--warning);
  --bad:   var(--danger);
  --ok-soft:   var(--success-soft);
  --warn-soft: var(--warning-soft);
  --bad-soft:  var(--danger-soft);

  /* ---- shape -----------------------------------------------------------
     Radius scale calibrated against the measured reference language:
     pills 999, cards 14–18, controls 8–10. LORUSS runs one step tighter
     than the reference's marketing surface (22px) because this is a dense
     analytics product, not a landing page — 18px on large panels keeps the
     same family feel without wasting vertical rhythm in tables. ---- */
  --radius:    12px;  /* cards / panels */
  --radius-lg: 18px;  /* large panels: hero cards, login card, calculator */
  --radius-sm: 8px;   /* buttons / inputs */
  --radius-xs: 6px;   /* small controls: chips, tiny icons */
  --radius-pill: 999px;
  --shadow:    0 1px 2px rgba(16,24,40,.05), 0 16px 32px -20px rgba(16,24,40,.16);
  --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 0 rgba(16,24,40,.03);
  /* signature top-highlight of the reference language; a no-op on light
     surfaces, a real 1px inner rim on dark ones (redefined in the dark
     block below) */
  --inset-hairline: 0 0 0 0 transparent;

  /* ---- spacing scale ----------------------------------------------------
     Dense 2px-based scale. The reference's measured flex/grid gaps cluster
     at 5/6/8/9/10/12px — LORUSS normalises that to an even scale so the
     whole UI snaps to one rhythm instead of ad-hoc values. ---- */
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  6px;
  --sp-4:  8px;
  --sp-5:  10px;
  --sp-6:  12px;
  --sp-7:  16px;
  --sp-8:  20px;
  --sp-9:  24px;
  --sp-10: 32px;
  --sp-11: 40px;
  --sp-12: 56px;
  --sp-13: 72px;

  /* ---- layout -----------------------------------------------------------
     --content-max 1200px matches the measured reference container exactly;
     --app-max stays wider because dense analytics tables need the room. ---- */
  --sidebar-w: 244px;
  --content-max: 1200px;
  --app-max: 1400px;
  --header-h: 56px;
  --control-h: 36px;
  --control-h-lg: 44px;

  /* ---- typography -------------------------------------------------------
     Manrope, self-hosted above. Two scales:
       · display/* — marketing surfaces (public site). Tight negative
         tracking at large sizes, mirroring the measured reference
         (60px/800/-2px, 38px/800/-1.5px, 20px/800/-0.3px).
       · text-*    — the dense application shell. Deliberately smaller than
         the marketing scale: an analytics table is not a hero. ---- */
  --font: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  /* Wordmark-only display face (see the @font-face above) — never used
     for body/UI text, only .brand-word. */
  --font-wordmark: "Baloo2", var(--font);

  --text-display:  800 56px/1.04 var(--font);
  --text-display-2:800 38px/1.08 var(--font);
  --text-display-3:800 26px/1.2  var(--font);
  --ls-display:   -.033em;
  --ls-display-2: -.028em;
  --ls-display-3: -.018em;

  --text-h1:      700 22px/1.25 var(--font);
  --text-h2:      700 16px/1.3  var(--font);
  --text-h3:      600 14px/1.35 var(--font);
  --text-body:    400 14px/1.55 var(--font);
  --text-small:   400 13px/1.62 var(--font);
  --text-caption: 500 11px/1.45 var(--font);
  --text-metric:  700 24px/1.1  var(--font);
  --text-table:   400 13px/1.45 var(--font);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --background: #0a0c11;
  --surface:         #12161f;
  --surface-muted:   #1d2430;
  --surface-elevated:#171c27;
  --border:    #262d3b;
  --border-subtle:   rgba(255,255,255,.06);
  --border-strong:   #333c4d;
  --glass:     rgba(16,20,29,.78);

  --text-primary:   #e8ebf2;
  --text-secondary: #aeb6c6;
  /* WCAG AA: measured 5.15:1 against the dark --background (#0a0c11);
     the previous #6f7889 measured 4.40:1. */
  --text-muted:     #7a8395;
  --text-disabled:  rgba(232,235,242,.28);

  /* softened for a dark canvas — same hue family as the light theme,
     lifted in lightness so it stays legible and doesn't look muddy */
  --primary:        #4d8dff;
  --primary-hover:  #6b9fff;
  --primary-active: #3a78e8;
  --primary-soft:   rgba(77,141,255,.18);
  --primary-muted:  rgba(77,141,255,.10);
  --primary-line:   rgba(77,141,255,.45);

  --success: #46c26a;
  --warning: #e0a13a;
  --danger:  #f2584a;
  --info:    #5aa2ff;
  --success-soft: rgba(70,194,106,.14);
  --warning-soft: rgba(224,161,58,.15);
  --danger-soft:  rgba(242,88,74,.15);
  --info-soft:    rgba(90,162,255,.14);

  --marketplace-wb-soft:   rgba(160,59,214,.16);
  --marketplace-ozon-soft: rgba(31,123,224,.16);

  /* Brand mark only — lifted the same way --primary is for dark, so the O
     stays legible against a near-black sidebar. Deliberately NOT applied
     to --marketplace-wb itself: WB tags/badges elsewhere keep their
     existing flat colour in both themes, unrelated to the logo. */
  --brand-wb-purple: #c15be8;

  /* R21 creative UI layer — lifted for the dark canvas the same way
     --primary/--brand-wb-purple are, so cards/pills/glow stay legible
     and don't look muddy against a near-black surface. */
  --ozon-ice:      #16233a;
  --ozon-cyan:     #35c8e8;
  --ozon-electric: #6fa0ff;
  --wb-lavender:   #2b1f36;
  --wb-pink:       #ea77c9;
  --wb-electric:   #c66bf0;
  --creative-glow-blue:   rgba(77,141,255,.28);
  --creative-glow-purple: rgba(193,91,232,.28);
  /* Whole-viewport ambient wash (R22 dark atmosphere) is a completely
     different intensity than the local card/pill glow above — at .28
     alpha across the full app-main area it would tint every page and
     compete with content, so this pair is deliberately ~6x fainter and
     used nowhere except the single .app-main background rule below. */
  --ambient-glow-blue:   rgba(77,141,255,.05);
  --ambient-glow-purple: rgba(193,91,232,.04);

  --shadow:    0 1px 0 rgba(255,255,255,.03) inset, 0 2px 6px rgba(0,0,0,.35), 0 24px 48px -24px rgba(0,0,0,.6);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px -10px rgba(0,0,0,.5);
  /* the reference language's signature 1px top rim on raised dark
     surfaces — measured as rgba(255,255,255,.06) 0 1px 0 inset */
  --inset-hairline: 0 1px 0 0 rgba(255,255,255,.06) inset;
}

/* ---- reset ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -.018em; }
h1 { font: var(--text-h1); }
h2 { font: var(--text-h2); }
h3 { font: var(--text-h3); }

/* Display scale — marketing surfaces only. Optical tracking tightens as
   size grows, which is what makes large Manrope settings read as a brand
   voice instead of "big body text". */
.display   { font: var(--text-display);   letter-spacing: var(--ls-display); }
.display-2 { font: var(--text-display-2); letter-spacing: var(--ls-display-2); }
.display-3 { font: var(--text-display-3); letter-spacing: var(--ls-display-3); }

/* Every number in the product aligns in columns: figures share one advance
   width, so digits stack in tables and metric tiles. */
table, .metric, .kpi, .num, input[type="number"], .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
code, .mono { font-family: var(--mono); font-size: .86em; }
.num { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
::selection { background: var(--accent-soft); }

/* ---- scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }

/* ============================================================
   Layout
   ============================================================ */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 14px; z-index: 40;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 120%);
  border-right: 1px solid var(--border);
}
.sidebar-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 8px 18px;
}
/* Production mark: bare two-colour linework (see _macros.html brand_icon),
   no background tile — that was the previous, now-retired gradient-square
   placeholder. flex:none so it never gets squeezed by a long org name. */
.brand-icon { flex: none; display: block; }
.brand-text {
  display: flex; flex-direction: column; line-height: 1.2;
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
}

/* Wordmark: "Loruss" set in Baloo 2 ExtraBold 800 (concept "D" from
   /brand/font-preview — stock glyphs only, no custom SVG lettering),
   title case matching the approved reference. L = Ozon Blue,
   o = Wildberries Purple, russ = --text-primary (the project's existing
   canonical dark-neutral token — already theme-aware, so wordmark stays
   readable in dark mode with zero new colour work). The single wordmark
   rule for the brand name, everywhere it renders as a logo (sidebar,
   public header/footer, login). Not applied to incidental in-copy
   mentions of "LORUSS"/"LORUSS" (nav links, footer legal text, page
   titles) — those stay plain text on purpose.

   Kerning is per letter-pair, not one uniform letter-spacing: L->o
   needs markedly more negative margin than the rest or "o" reads as a
   separate glyph, not part of the word (see font lab verdict). Values
   are the ones locked as candidate D — do not approximate/round them. */
.brand-word {
  font-family: var(--font-wordmark); font-weight: 800; letter-spacing: 0;
  line-height: 1;
}
.brand-word__l { color: var(--brand-ozon-blue); }
.brand-word__o { color: var(--brand-wb-purple); margin-left: -0.10em; }
.brand-word__r { color: var(--text-primary); margin-left: -0.065em; }
.brand-word__u { color: var(--text-primary); margin-left: -0.03em; }
.brand-word__s1 { color: var(--text-primary); margin-left: -0.025em; }
.brand-word__s2 { color: var(--text-primary); margin-left: -0.07em; }
.brand-sub {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-mute); margin-top: 1px;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-weight: 500; font-size: 13.5px;
  position: relative; transition: background .14s, color .14s;
}
.nav-item::before {
  content: ""; width: 18px; height: 18px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  opacity: .85;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.is-active {
  background: var(--primary-soft); color: var(--primary);
}
.nav-item.is-active::after {
  content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--primary);
}
.nav-item[data-ico="dashboard"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 3h8v8H3zM13 3h8v5h-8zM13 10h8v11h-8zM3 13h8v8H3z'/%3E%3C/svg%3E"); }
.nav-item[data-ico="campaigns"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 10v4h3l8 4V6l-8 4H3zm15 2a4 4 0 0 0-2-3.5v7A4 4 0 0 0 18 12z'/%3E%3C/svg%3E"); }
.nav-item[data-ico="actions"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm5 7.4L10.6 16 7 12.4l1.4-1.4 2.2 2.2 5-5z'/%3E%3C/svg%3E"); }
.nav-item[data-ico="decisions"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l1.9 5L19 8.9l-5.1 1.9L12 16l-1.9-5.2L5 8.9 10.1 7zM18.5 14l1 2.5 2.5 1-2.5 1-1 2.5-1-2.5-2.5-1 2.5-1z'/%3E%3C/svg%3E"); }
.nav-item[data-ico="problems"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 2 1 21h22L12 2zm-1 7h2v6h-2V9zm0 8h2v2h-2v-2z'/%3E%3C/svg%3E"); }
.nav-item[data-ico="analytics"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 13h3v7H4zM10.5 8h3v12h-3zM17 4h3v16h-3z'/%3E%3C/svg%3E"); }
.nav-item[data-ico="audit"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M6 2h8l6 6v14H6V2zm2 9h8v2H8v-2zm0 4h8v2H8v-2zm5-11v5h5l-5-5z'/%3E%3C/svg%3E"); }
.nav-item[data-ico="accounts"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3 3 7.5 12 12l9-4.5zM3 12l9 4.5L21 12M3 16.5 12 21l9-4.5'/%3E%3C/svg%3E"); }
.nav-item[data-ico="settings"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9.5 4-2-.6.5-2-1.9-1.1L14.7 8 14 6h-4l-.7 2-1.4-.4L6 8.7 4.5 9.4 5 11.4 3 12l.5 2 2-.5L6.5 15 6 17l1.9 1.1L9.3 16 10 18h4l.7-2 1.4.4L18 15.3l1.5-.7-.5-2z'/%3E%3C/svg%3E"); }

.nav-group {
  margin: 10px 8px 2px; padding: 10px 3px 0;
  border-top: 1px solid var(--hairline);
  font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-mute);
}
.nav-item--child { padding-left: 23px; }

.sidebar-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 8px 2px; border-top: 1px solid var(--hairline); margin-top: 6px;
}
.theme-toggle {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent-line); }
.theme-toggle::before {
  content: ""; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3a9 9 0 1 0 9 9c-5 0-9-4-9-9z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3a9 9 0 1 0 9 9c-5 0-9-4-9-9z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.build-tag {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mute);
}

.app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
/* R22 dark atmosphere: a barely-there ambient wash, dark-only (light
   stays the plain flat surface it already was — see section 39 "light
   should not get neon 1:1"). Fixed attachment so it doesn't scroll/tile
   with content; --ambient-glow-* are ~6x fainter than the local
   card/pill glow tokens specifically so this never competes with
   foreground content. */
:root[data-theme="dark"] .app-main {
  background-image:
    radial-gradient(900px 560px at 12% -8%, var(--ambient-glow-blue), transparent 65%),
    radial-gradient(760px 520px at 100% 22%, var(--ambient-glow-purple), transparent 65%);
  background-attachment: fixed;
}

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}
.topbar-spacer { flex: 1; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 9px; height: 9px;
  transform: translateY(-65%) rotate(45deg);
  border-right: 1.6px solid var(--text-mute); border-bottom: 1.6px solid var(--text-mute);
  pointer-events: none;
}
.topbar select {
  appearance: none; -webkit-appearance: none;
  padding: 8px 30px 8px 12px; min-width: 190px; min-height: var(--control-h);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit;
}
.role-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 11px;
}
.role-chip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }

.app-content { padding: 24px 24px 64px; max-width: var(--content-max); width: 100%; }

.nav-toggle {
  display: none; position: fixed; top: 11px; left: 12px; z-index: 60;
  width: 40px; height: 36px; border-radius: 9px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  align-items: center; justify-content: center;
}

/* ---- route progress bar (htmx global indicator) ---- */
.route-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 80;
  background: var(--primary);
  opacity: 0; transition: opacity .2s;
}
.htmx-request.route-progress,
.htmx-request .route-progress { opacity: 1; width: 82%; transition: width 8s cubic-bezier(.1,.7,.3,1), opacity .2s; }

/* ============================================================
   Page scaffolding
   ============================================================ */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-head h1 { display: flex; align-items: center; gap: 10px; }
.page-sub { margin: 4px 0 0; color: var(--text-mute); font-size: 13px; }
.page-tools { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--hairline);
}
.panel-title { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.panel-title small { color: var(--text-mute); font-weight: 500; margin-left: 6px; }
.panel-body { padding: 16px; }
.panel-body.flush { padding: 0; }

.section-label {
  font-size: 11.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-mute); margin: 24px 0 12px;
}

/* ============================================================
   KPI cards
   ============================================================ */
.kpi-grid {
  display: grid; gap: 14px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.kpi {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px 16px 16px;
  box-shadow: var(--shadow-sm);
}
.kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: .5;
}
.kpi-label {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-mute);
}
.kpi-value {
  font-size: 26px; font-weight: 680; letter-spacing: -.02em; margin-top: 8px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.kpi-value.is-empty { color: var(--text-mute); font-size: 18px; }
.kpi-foot { margin-top: 6px; font-size: 11.5px; color: var(--text-mute); }
.kpi[data-tone="alert"]::before { background: linear-gradient(90deg, var(--bad), transparent 70%); }
.kpi[data-tone="warn"]::before  { background: linear-gradient(90deg, var(--warn), transparent 70%); }
.kpi[data-tone="good"]::before  { background: linear-gradient(90deg, var(--ok), transparent 70%); }

/* ============================================================
   Tables
   ============================================================ */
.table-wrap { width: 100%; overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
table.dt { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 13px; }
table.dt thead th {
  position: sticky; top: 0;
  text-align: left; padding: 10px 14px; white-space: nowrap;
  font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mute); background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
table.dt tbody td {
  padding: 11px 14px; border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
table.dt tbody tr:last-child td { border-bottom: 0; }
table.dt tbody tr { transition: background .12s; }
table.dt tbody tr:hover { background: var(--surface-2); }
table.dt thead th a:hover { color: var(--text); text-decoration: underline; }
table.dt thead th a.is-active { color: var(--text); }
/* "your row" marker — e.g. the subscriber's own plan in a comparison
   table. box-shadow (not border) so it doesn't shift column widths. */
table.dt tbody tr.is-active { background: var(--primary-soft); box-shadow: inset 2px 0 0 var(--primary); }
table.dt tbody tr.is-active:hover { background: var(--primary-soft); }
.stale-flag { font-size: 11px; color: var(--warn); margin-top: 2px; }

/* campaign card tabs + lightweight SVG chart (STEP 4) */
.tabs {
  display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.tabs__item {
  padding: 9px 14px; font-size: 13px; font-weight: 550; color: var(--text-mute);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs__item:hover { color: var(--text); text-decoration: none; }
.tabs__item.is-active { color: var(--text); border-bottom-color: var(--accent); }

.svg-chart { width: 100%; height: auto; display: block; }
.svg-chart__area { fill: var(--accent-soft); stroke: none; }
.svg-chart__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.svg-chart__axis { stroke: var(--border); stroke-width: 1; }
.svg-chart__label { fill: var(--text-mute); font-size: 10px; text-anchor: middle; }
table.dt td.num, table.dt th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dt .cell-actions { white-space: nowrap; text-align: right; }
.id-chip {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
  background: var(--surface-3); border-radius: 5px; padding: 2px 6px;
}

/* generic key/value blocks from _macros.render_value */
table.kv { width: 100%; border-collapse: collapse; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin: 4px 0; }
table.kv th, table.kv td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; font-size: 12.5px; }
table.kv tr:last-child th, table.kv tr:last-child td { border-bottom: 0; }
table.kv th { width: 230px; color: var(--text-mute); font-weight: 500; }
ul.lst { margin: 0; padding-left: 16px; }
ul.lst li { margin: 2px 0; }
.muted { color: var(--text-mute); }

/* ============================================================
   Badges / status / risk / priority
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-dim); background: var(--surface-2);
  white-space: nowrap;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.st-executed, .badge.st-rolled_back { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.badge.st-approved, .badge.st-executing   { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.badge.st-pending                          { color: var(--info); background: var(--info-soft); border-color: transparent; }
.badge.st-failed, .badge.st-rejected, .badge.st-expired { color: var(--bad); background: var(--bad-soft); border-color: transparent; }
/* effective-status tones (Управление рекламными кампаниями) */
.badge.ef-good { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.badge.ef-warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.badge.ef-bad  { color: var(--bad); background: var(--bad-soft); border-color: transparent; }
.badge.ef-flat { color: var(--text-mute); }

.risk { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.risk-bars { display: inline-flex; gap: 2px; }
.risk-bars i { width: 3px; height: 11px; border-radius: 1px; background: var(--surface-3); }
.risk[data-lvl="LOW"]    { color: var(--ok); }
.risk[data-lvl="MEDIUM"] { color: var(--warn); }
.risk[data-lvl="HIGH"]   { color: var(--bad); }
.risk[data-lvl="LOW"] .risk-bars i:nth-child(1),
.risk[data-lvl="MEDIUM"] .risk-bars i:nth-child(-n+2),
.risk[data-lvl="HIGH"] .risk-bars i { background: currentColor; }

/* confidence meter */
.meter { display: flex; align-items: center; gap: 8px; }
.meter-track { width: 68px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; flex: none; }
.meter-fill { height: 100%; border-radius: 999px; background: var(--primary); }
.meter-val { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.pct-0{width:0}.pct-5{width:5%}.pct-10{width:10%}.pct-15{width:15%}.pct-20{width:20%}
.pct-25{width:25%}.pct-30{width:30%}.pct-35{width:35%}.pct-40{width:40%}.pct-45{width:45%}
.pct-50{width:50%}.pct-55{width:55%}.pct-60{width:60%}.pct-65{width:65%}.pct-70{width:70%}
.pct-75{width:75%}.pct-80{width:80%}.pct-85{width:85%}.pct-90{width:90%}.pct-95{width:95%}
.pct-100{width:100%}

/* ============================================================
   AI recommendation cards
   ============================================================ */
.rec-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.rec-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 12px;
}
.rec-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rec-entity { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.rec-move {
  display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px;
}
.rec-move .arrow { color: var(--text-mute); }
.rec-move .to { color: var(--primary); }
.rec-reason { font-size: 12.5px; color: var(--text-dim); }
.rec-effect { font-size: 12px; color: var(--text-mute); border-left: 2px solid var(--primary-line); padding-left: 10px; }
.rec-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }

/* ============================================================
   Forms
   ============================================================ */
.filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field--check { flex-direction: row; align-items: center; gap: 7px; }
.field--check input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); }
.field > span, label > span { font-size: 11.5px; font-weight: 500; color: var(--text-mute); letter-spacing: .02em; }
input[type="text"], input[type="number"], input[type="email"], input[type="password"], select {
  font: inherit; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 11px; min-width: 0; min-height: var(--control-h);
  transition: border-color .14s, box-shadow .14s;
}
input:focus, select:focus, button:focus-visible {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder { color: var(--text-mute); }

.btn {
  font: inherit; font-weight: 560; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--control-h); padding: 0 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--primary); color: #fff;
  background: var(--primary);
  transition: background-color .14s, border-color .14s, transform .06s;
}
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn:active { background: var(--primary-active); border-color: var(--primary-active); transform: translateY(1px); }
.btn--ghost {
  background: var(--surface-2); border-color: var(--border); color: var(--text-dim);
}
.btn--ghost:hover { color: var(--text); border-color: var(--accent-line); background: var(--surface-3); }
.btn--sm { min-height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn--ok  { border-color: var(--ok); background: var(--ok); }
.btn--ok:hover  { background: var(--ok); filter: brightness(1.08); }
.btn--bad { border-color: var(--bad); background: var(--bad); }
.btn--bad:hover { background: var(--bad); filter: brightness(1.08); }
.btn-row { display: inline-flex; gap: 6px; }

/* ============================================================
   Flash / empty / skeleton / error
   ============================================================ */
.flash {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 14px;
  font-size: 13px; border: 1px solid transparent;
}
.flash::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2zm0-4h-2V7h2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2zm0-4h-2V7h2z'/%3E%3C/svg%3E") center/contain no-repeat; }
.flash.ok    { color: var(--ok);  background: var(--ok-soft); }
.flash.error { color: var(--bad); background: var(--bad-soft); }
.flash.info  { color: var(--info); background: var(--info-soft); }

.empty-state {
  text-align: center; padding: 48px 24px; color: var(--text-mute);
  border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface);
}
.empty-state .emoji {
  width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 12px;
  display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border);
  font-size: 20px;
}
.empty-state h3 { font-size: 15px; color: var(--text); margin-bottom: 4px; }
.empty-state p { margin: 0; font-size: 13px; }
.empty-state code { color: var(--text-dim); background: var(--surface-2); padding: 2px 6px; border-radius: 5px; }

.skeleton { display: grid; gap: 10px; }
.sk-line {
  height: 40px; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: sk 1.4s ease-in-out infinite;
}
.sk-line.tall { height: 92px; }
@keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.htmx-indicator .skeleton { display: grid; }

/* dim the actions block while it swaps */
#actions-block.htmx-swapping, #actions-block.htmx-request { opacity: .45; transition: opacity .15s; pointer-events: none; }

.pager { display: flex; gap: 10px; margin-top: 14px; }
.pager a {
  padding: 7px 13px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 550;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
}
.pager a:hover { color: var(--text); border-color: var(--accent-line); }

.total-line { font-size: 12.5px; color: var(--text-mute); margin: 0 0 12px; }

/* ============================================================
   Login
   ============================================================ */
.login-shell {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: var(--bg);
}
.login-card {
  width: 100%; max-width: 372px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 30px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-card .brand-row { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.login-card h1 { font-size: 17px; }
.login-card .hint { font-size: 12px; color: var(--text-mute); margin: -4px 0 6px; }
.login-card .btn { margin-top: 8px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .app-content { padding: 22px 20px 50px; }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .nav-toggle { display: inline-flex; }
  /* Below 860px the account <select> (190px hard floor), role chip and
     logout button no longer fit next to the 62px hamburger clearance —
     verified with real multi-account data at 375px: they pushed
     document.documentElement.scrollWidth 115px past clientWidth (a real
     body-level horizontal overflow, not a hairline rounding gap). Native
     <select> boxes clip their own text safely when narrowed — they don't
     reflow the row — so dropping the floor is enough on its own;
     flex-wrap is a safety net for the very narrowest phones instead of
     re-overflowing there too. */
  .topbar { padding: 12px 16px 12px 62px; flex-wrap: wrap; row-gap: 8px; }
  .topbar select { min-width: 0; }
  /* .nav-toggle is position:fixed at top:11px/left:12px (40x36), so its
     footprint sits in the same top-left corner the sidebar occupies once
     open — same reason .topbar above reserves 62px on its left. The
     sidebar brand row (LO Monogram + wordmark) starts at the sidebar's
     own top-left, so without this it visually sits underneath the
     toggle button. Reserve equivalent clearance here instead of moving
     the toggle or the brand, or resorting to a z-index bump that would
     only hide the overlap rather than remove it. */
  .sidebar-brand { padding-top: 44px; }
  .app-content { padding: 18px 14px 44px; }
  table.kv th { width: auto; }
  .page-head { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   Dashboard analytics — period selector + KPI comparison (BLOCK 5)
   ============================================================ */
.da-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.da-period {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.da-period__opt {
  padding: 6px 13px; border-radius: 6px;
  font-size: 12.5px; font-weight: 550; color: var(--text-mute);
  transition: background .14s, color .14s;
}
.da-period__opt:hover { color: var(--text); text-decoration: none; }
.da-period__opt.is-active {
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm);
}
.da-range {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; color: var(--text-mute); font-variant-numeric: tabular-nums;
}
.da-range__cur { color: var(--text-dim); font-weight: 600; }
.da-range__sep { opacity: .65; }

.da-notice {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
  font-size: 12px;
}
.da-notice span {
  color: var(--warn); background: var(--warn-soft);
  border-radius: 999px; padding: 4px 11px;
}

.da-kpi-grid {
  display: grid; gap: 12px; margin-bottom: 24px;
  grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
}
.da-kpi {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 14px 14px;
  box-shadow: var(--shadow-sm);
}
.da-kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--hairline);
}
.da-kpi.tone-good::before { background: linear-gradient(90deg, var(--ok), transparent 78%); }
.da-kpi.tone-bad::before  { background: linear-gradient(90deg, var(--bad), transparent 78%); }
.da-kpi__label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mute);
}
.da-kpi__value {
  font-size: 21px; font-weight: 660; letter-spacing: -.02em; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.da-kpi__value.is-muted { font-size: 12.5px; font-weight: 500; color: var(--text-mute); }
.da-kpi__cmp {
  font-size: 11.5px; color: var(--text-mute); font-variant-numeric: tabular-nums;
}
.da-kpi__delta {
  display: flex; align-items: baseline; gap: 6px; margin-top: 1px;
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.da-kpi__arrow { font-size: 12px; line-height: 1; }
.da-kpi__abs { font-weight: 600; color: var(--text-dim); }
.da-kpi__pct { color: var(--text-mute); }
.da-kpi.tone-good .da-kpi__arrow, .da-kpi.tone-good .da-kpi__abs { color: var(--ok); }
.da-kpi.tone-bad .da-kpi__arrow, .da-kpi.tone-bad .da-kpi__abs { color: var(--bad); }
.da-kpi .is-muted { color: var(--text-mute); }

@media (max-width: 560px) {
  .da-controls { flex-direction: column; align-items: flex-start; }
  .da-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .da-kpi__value { font-size: 18px; }
}

/* --- STEP 5: ручное управление кампанией ------------------------------- */
.flash.warn { color: var(--warn); background: var(--warn-soft); }
.manage .panel { margin-top: 12px; }
.manage-grid {
  display: grid; gap: 14px; margin: 10px 0 4px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.manage-ctl { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.manage-ctl .field { width: 100%; }
.manage-lifecycle { margin-top: 8px; flex-wrap: wrap; }
.manage-lifecycle form { display: inline; }
.manage-confirm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.manage-preview { border-color: var(--accent-line); }

/* --- STEP 6: разбор и подтверждение действий -------------------------- */
tr.row-danger td { background: var(--bad-soft); }
.review-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-top: 14px; }
.review-actions form { display: flex; flex-direction: column; gap: 8px; }
.review-approve .field--check { max-width: 460px; }
.panel-sub { margin: 12px 0; padding: 10px 12px; background: var(--surface-2);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm); font-size: 12.5px; }
.panel-sub b { display: block; margin: 6px 0 3px; color: var(--text-mute);
  font-weight: 500; font-size: 11.5px; letter-spacing: .02em; }
.panel-sub b:first-child { margin-top: 0; }

/* ============================================================
   R16 — LORUSS design system: brand, marketplace identity,
   Auto-Bidder, «Разведка рынка» foundation
   ============================================================ */

/* accessibility: always-visible focus ring on interactive elements */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, [role="switch"]:focus-visible {
  outline: 2px solid var(--loruss-violet);
  outline-offset: 2px; border-radius: var(--radius-xs);
}

.gradient-text { color: var(--primary); }
.hero-rule {
  height: 3px; border: 0; margin: 0 0 18px; border-radius: 3px;
  background: var(--primary);
}

/* ---- marketplace tag ------------------------------------------------------
   The marketplace *identity* lives in the coloured dot + tinted chip; the
   label text always keeps a high-contrast neutral colour (WCAG AA) so a
   violet / magenta / blue accent never makes the text hard to read. */
.mp-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 650; letter-spacing: .03em;
  padding: 3px 9px 3px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border); color: var(--text); background: var(--surface-2);
}
.mp-tag::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--mp-dot, var(--text-mute));
}
.mp-tag--wb   { --mp-dot: var(--marketplace-wb);   background: var(--marketplace-wb-soft);   border-color: transparent; }
.mp-tag--ozon { --mp-dot: var(--marketplace-ozon); background: var(--marketplace-ozon-soft); border-color: transparent; }
.mp-tag--all  { --mp-dot: var(--loruss-violet);    background: var(--loruss-gradient-soft);  border-color: transparent; }

/* ---- Auto-Bidder ---- */
.ab-hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: 18px 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.ab-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--loruss-gradient);
}
.ab-hero__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ab-hero__title { font-size: 16px; font-weight: 680; letter-spacing: -.01em; }
.ab-hero__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.ab-state {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-dim); background: var(--surface-2);
  white-space: nowrap;
}
.ab-state::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ab-dot, currentColor);
}
.ab-state--scale  { color: var(--ok);   background: var(--ok-soft);   border-color: transparent; }
/* REDUCE is a risk-aware, corrective decision — warning tone, not "positive" */
.ab-state--reduce { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.ab-state--hold   { color: var(--text-mute); }
/* "on" keeps a high-contrast label; the brand accent is the dot + chip tint */
.ab-state--on     { color: var(--text); --ab-dot: var(--loruss-violet); background: var(--loruss-gradient-soft); border-color: transparent; }
.ab-state--off    { color: var(--text-mute); }
/* safety states — never disguised as a friendly gradient */
.ab-state--blocked,
.ab-state--emergency_stop,
.ab-state--capability_required,
.ab-state--entitlement_required { color: var(--bad); background: var(--bad-soft); border-color: transparent; }
.ab-state--stale,
.ab-state--stale_data,
.ab-state--low_confidence,
.ab-state--insufficient_sample,
.ab-state--cooldown,
.ab-state--pending_approval { color: var(--warn); background: var(--warn-soft); border-color: transparent; }

.ab-grid {
  display: grid; gap: 12px; margin: 14px 0 4px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.ab-metric { display: flex; flex-direction: column; gap: 3px; }
.ab-metric__k {
  font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-secondary);
}
.ab-metric__v { font-size: 16px; font-weight: 660; font-variant-numeric: tabular-nums; }
.ab-metric__v.is-empty { color: var(--text-mute); font-size: 13px; font-weight: 500; }

.ab-reason {
  font-size: 12.5px; color: var(--text-dim);
  border-left: 2px solid var(--accent-line); padding-left: 10px; margin-top: 10px;
}
.ab-flow {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11px; font-weight: 600; color: var(--text-mute);
  letter-spacing: .02em; margin-top: 4px;
}
.ab-flow i { color: var(--loruss-violet); font-style: normal; }

/* toggle switch (accessible: a real checkbox behind it) */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track {
  width: 40px; height: 22px; border-radius: 999px; flex: none;
  background: var(--surface-3); border: 1px solid var(--border);
  position: relative; transition: background .16s;
}
.switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--text-mute); transition: transform .16s, background .16s;
}
.switch input:checked + .switch__track { background: var(--loruss-gradient); border-color: transparent; }
.switch input:checked + .switch__track::after { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--loruss-violet); outline-offset: 2px; }
.switch input:disabled + .switch__track { opacity: .5; }
.switch__label { font-size: 12.5px; font-weight: 550; color: var(--text-dim); }

/* ---- «Разведка рынка» foundation ---- */
.mi-head {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--border); padding: 22px 22px 20px; margin-bottom: 20px;
  background:
    radial-gradient(680px 200px at 88% -40%, var(--loruss-glow-violet), transparent 70%),
    radial-gradient(520px 200px at 4% -30%, var(--loruss-glow-blue), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.mi-head h1 { font-size: 20px; }
.mi-head .page-sub { margin-top: 6px; }
.mi-lead { margin: 0 0 10px; }
.mi-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.mi-foot { margin: 12px 0 0; font-size: 12px; }
.mi-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.mi-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm);
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.mi-card h3 { font-size: 13.5px; font-weight: 640; }
.mi-card p { margin: 0; font-size: 12.5px; color: var(--text-secondary); }
.mi-card__state {
  margin-top: auto; font-size: 11px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-mute);
}

/* small in-flow spacing utilities for the R16 pages (no inline styles) */
.ab-note { font-size: 12.5px; margin: 0; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.panel-note { padding: 12px 16px; font-size: 12.5px; color: var(--text-mute); }

/* long campaign names never push the state pill out of the card */
.rec-top .rec-entity {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec-top .ab-state { flex: none; }

@media (max-width: 560px) {
  .ab-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  /* single column below 560px — minmax(320/280) would otherwise force
     horizontal overflow on a ~320px viewport */
  .rec-grid, .mi-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   R17 — public commercial website (/, /features, /pricing,
   /about, /faq, /blog, …). Same tokens, same CSP, no second
   design system. Uses .btn / .badge / .mp-tag / table.dt from above.
   ============================================================ */
body.pub { background: var(--bg); }
.pub-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; width: 100%; }
.pub-narrow { max-width: 720px; }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--surface); color: var(--text); padding: 10px 16px;
  border: 1px solid var(--accent-line); border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* header */
.pub-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass); backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}
.pub-header__row { display: flex; align-items: center; gap: 20px; height: 62px; }
.pub-brand { display: flex; align-items: center; gap: 11px; flex: none; }
.pub-brand__text { display: flex; flex-direction: column; line-height: 1.15; font-size: 15px; }
.pub-brand__sub {
  font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-mute);
}
.pub-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pub-nav > a {
  padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13.5px;
  font-weight: 550; color: var(--text-dim);
}
.pub-nav > a:hover { color: var(--text); background: var(--surface-2); }
.pub-nav > a[aria-current="page"] { color: var(--text); background: var(--accent-soft); }
.pub-nav__cta { display: flex; align-items: center; gap: 8px; margin-left: 10px; }
.pub-nav-toggle {
  display: none; margin-left: auto; width: 40px; height: 36px; cursor: pointer;
  align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 9px; color: var(--text);
}

/* generic section rhythm */
.pub-main { display: block; }
.pub-section { padding: 56px 0; }
.pub-section--alt { background: var(--surface); border-block: 1px solid var(--hairline); }
/* Section headings share the display voice one step down — the reference
   measures 38px/800/-1.5px here; LORUSS scales it for a denser page. */
.pub-section h2 {
  font: var(--fw-black) clamp(22px, 2.2vw, 30px)/1.15 var(--font);
  letter-spacing: var(--ls-display-2); margin-bottom: 16px;
}
.pub-section h3 { font-size: 15px; letter-spacing: -.012em; }
.pub-section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.pub-eyebrow {
  font-size: 11.5px; font-weight: 650; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-mute); margin: 0 0 12px;
}
.pub-lead { font-size: 15px; color: var(--text-dim); line-height: 1.6; margin: 10px 0 0; }
.pub-lead--narrow { max-width: 640px; }
.pub-muted { color: var(--text-mute); font-size: 13px; line-height: 1.6; }
.pub-fineprint { color: var(--text-mute); font-size: 12px; margin: 14px 0 0; }
.pub-page-head { padding: 52px 0 8px; }
.pub-page-head h1 { font-size: 30px; letter-spacing: -.02em; }

/* hero */
.pub-hero { padding: 64px 0 52px; position: relative; overflow: hidden; }
.pub-hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
/* Marketing display scale — the measured reference sets its hero at
   60px/800 with roughly -0.033em tracking. LORUSS uses clamp() so the
   same voice survives a 1024px laptop without a second breakpoint. */
.pub-hero h1 {
  font: var(--fw-black) clamp(34px, 4.2vw, 56px)/1.05 var(--font);
  letter-spacing: var(--ls-display); margin: 0;
}
.pub-hero .pub-lead { font-size: 17px; line-height: 1.6; margin-top: 18px; max-width: 560px; }
.pub-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.pub-hero__panel { display: flex; justify-content: center; }
.pub-preview {
  width: 100%; max-width: 380px; border-radius: var(--radius);
  border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow); padding: 16px; position: relative; overflow: hidden;
}
.pub-preview::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--loruss-gradient);
}
.pub-preview__bar { display: flex; gap: 6px; margin-bottom: 14px; }
.pub-preview__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); }
.pub-preview__kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pub-preview__kpis > div {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.pub-preview__kpis span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); }
.pub-preview__kpis b { display: block; font-size: 18px; margin-top: 3px; color: var(--text-mute); }
.pub-preview__flow {
  margin-top: 14px; font-size: 10.5px; font-weight: 600; color: var(--text-mute);
  letter-spacing: .02em; display: flex; gap: 5px; flex-wrap: wrap;
}
.pub-preview__flow i { color: var(--loruss-violet); font-style: normal; }
.pub-preview__note { font-size: 11px; color: var(--text-mute); margin: 12px 0 0; }

/* lists / grids */
.pub-problems { list-style: none; padding: 0; margin: 16px 0 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 26px; }
.pub-problems li { position: relative; padding-left: 20px; color: var(--text-dim); font-size: 14px; }
.pub-problems li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px;
  border-radius: 2px; background: var(--loruss-violet);
}
.pub-grid { display: grid; gap: 14px; margin-top: 20px; }
.pub-grid--cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pub-grid--mini { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.pub-grid--news { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pub-grid--pricing { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-items: start; }
.pub-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-sm);
}
.pub-card h3 { margin-bottom: 6px; }
.pub-card p { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.pub-card--safety { border-left: 2px solid var(--accent-line); }
.pub-mini {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px;
}
.pub-mini h3 { font-size: 13px; margin-bottom: 4px; }
.pub-mini span { font-size: 11px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-mute); }

.pub-checklist { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.pub-checklist li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--text-dim); line-height: 1.5; }
.pub-checklist li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px;
  background: var(--ok); border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
}
.pub-split { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.pub-steps, .pub-legal { color: var(--text-dim); font-size: 14px; line-height: 1.65; }
.pub-steps li { margin: 8px 0; }
.pub-legal h2 { font-size: 16px; margin: 22px 0 6px; }
.pub-legal p { margin: 0; color: var(--text-dim); font-size: 13.5px; }

/* how-it-works flow */
.pub-flow { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pub-flow li {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 550;
  color: var(--text-dim); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px 7px 8px;
}
.pub-flow li span {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--loruss-gradient); color: #fff;
  font-size: 11px; font-weight: 700;
}

/* feature page */
.pub-feature-list { display: grid; gap: 16px; }
.pub-feature {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm); padding: 20px;
}
.pub-feature__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pub-feature__head h2 { margin: 0; font-size: 18px; }
.pub-state {
  font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 3px 10px;
  border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim);
  background: var(--surface-2); white-space: nowrap;
}
.pub-state--available { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.pub-state--plan { color: var(--loruss-violet); background: var(--loruss-gradient-soft); border-color: transparent; }
.pub-state--coming_soon, .pub-state--no_data { color: var(--warn); background: var(--warn-soft); border-color: transparent; }

/* pricing */
.pub-plan {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-sm); padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
.pub-plan--popular { border-color: var(--accent-line); box-shadow: var(--shadow); }
.pub-plan__badge {
  position: absolute; top: -11px; left: 20px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: var(--loruss-gradient); border-radius: 999px; padding: 3px 10px;
}
.pub-plan h2 { font-size: 17px; margin: 0; }
.pub-plan__aud { font-size: 12px; color: var(--text-mute); margin: 0; }
.pub-plan__price { font-size: 26px; font-weight: 680; margin: 4px 0; font-variant-numeric: tabular-nums; }
.pub-plan__price span { font-size: 12px; font-weight: 500; color: var(--text-mute); }
.pub-plan__mkt { font-size: 12.5px; color: var(--text-dim); margin: 0; min-height: 34px; }
.pub-plan__limits { list-style: none; padding: 0; margin: 6px 0 12px; display: grid; gap: 6px; }
.pub-plan__limits li { font-size: 12.5px; color: var(--text-dim); display: flex; justify-content: space-between; gap: 10px; }
.pub-plan__limits b { color: var(--text); font-variant-numeric: tabular-nums; }
.pub-plan .btn { margin-top: auto; }
.pub-matrix td:first-child, .pub-matrix th:first-child { text-align: left; }
.pub-yes { color: var(--ok); font-weight: 700; }
.pub-no { color: var(--text-mute); }

/* faq */
.pub-faq { display: grid; gap: 8px; max-width: 760px; }
.pub-faq__item {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); padding: 4px 16px;
}
.pub-faq__item summary {
  cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 14px;
  list-style: none;
}
.pub-faq__item summary::-webkit-details-marker { display: none; }
.pub-faq__item summary::after { content: "+"; float: right; color: var(--text-mute); font-weight: 400; }
.pub-faq__item[open] summary::after { content: "−"; }
.pub-faq__item p { margin: 0 0 14px; font-size: 13.5px; color: var(--text-dim); line-height: 1.6; }

/* blog */
.pub-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.pub-chip {
  padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 550;
  color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border);
}
.pub-chip:hover { color: var(--text); }
.pub-chip.is-active { color: #fff; background: var(--loruss-gradient); border-color: transparent; }
.pub-news-card {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm); padding: 16px;
  transition: border-color .14s, transform .06s;
}
.pub-news-card:hover { border-color: var(--accent-line); }
.pub-news-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pub-news-card h2, .pub-news-card h3 { font-size: 14.5px; margin: 2px 0; line-height: 1.35; }
.pub-news-card p { margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pub-news-card__src { font-size: 11px; color: var(--text-mute); margin-top: auto; }
.pub-news__fresh { margin-top: 16px; }
.pub-empty {
  border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 32px; text-align: center; color: var(--text-dim);
}
.pub-empty p { margin: 0 0 12px; font-size: 13.5px; }

/* article */
.pub-article { padding: 40px 0 56px; }
.pub-crumbs { font-size: 12px; color: var(--text-mute); margin-bottom: 14px; }
.pub-article h1 { font-size: 27px; line-height: 1.2; letter-spacing: -.02em; }
.pub-article__meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.pub-article__attr {
  display: grid; gap: 8px; margin: 16px 0 24px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
}
.pub-article__attr > div { display: flex; justify-content: space-between; gap: 12px; }
.pub-article__attr dt { font-size: 12px; color: var(--text-mute); margin: 0; }
.pub-article__attr dd { font-size: 12.5px; color: var(--text-dim); margin: 0; font-variant-numeric: tabular-nums; }
.pub-article__body h2 { font-size: 16px; margin: 22px 0 8px; }
.pub-article__body p { font-size: 14px; color: var(--text-dim); line-height: 1.65; margin: 0; }
.pub-article__source { margin: 24px 0; }
.pub-article__source a { color: var(--accent-2); font-weight: 600; font-size: 13.5px; }
.pub-article__related { margin-top: 26px; border-top: 1px solid var(--hairline); padding-top: 18px; }
.pub-article__related ul { margin: 8px 0 0; padding-left: 18px; }
.pub-article__related a { color: var(--text-dim); font-size: 13.5px; }

/* final CTA */
.pub-cta-final { padding: 52px 0; text-align: center; border-top: 1px solid var(--hairline); }
.pub-cta-final h2 { font-size: 22px; margin-bottom: 18px; }
.pub-cta-final .btn { margin: 0 6px; }

/* footer */
.pub-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 44px 0 26px; margin-top: 8px; }
.pub-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.pub-footer__brand p { font-size: 12.5px; color: var(--text-mute); line-height: 1.6; margin: 8px 0 0; max-width: 320px; }
.pub-footer h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-mute); margin: 0 0 10px; }
.pub-footer nav a, .pub-footer__muted { display: block; font-size: 13px; color: var(--text-dim); padding: 4px 0; }
.pub-footer nav a:hover { color: var(--text); }
.pub-footer__legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--hairline);
  font-size: 11.5px; color: var(--text-mute);
}

@media (max-width: 900px) {
  .pub-hero__inner, .pub-split { grid-template-columns: 1fr; }
  .pub-hero__panel { order: -1; }
  .pub-footer__grid { grid-template-columns: 1fr 1fr; }
}
/* Pre-existing gap fixed here (found during R21 creative-layer QA at the
   768px breakpoint this task requires testing): the nav's own natural
   width is ~826-830px, but this block used to collapse it only below
   760px — leaving 761-829px with a full horizontal menu wider than its
   container, i.e. a real horizontal overflow, unrelated to any R21
   markup. 860px matches the existing app-shell sidebar collapse
   breakpoint (app.css `@media (max-width: 860px)` above) for one
   consistent "narrow" threshold across the whole product, and clears
   the measured ~830px need with margin. */
@media (max-width: 860px) {
  .pub-nav {
    position: absolute; left: 0; right: 0; top: 62px; flex-direction: column;
    align-items: stretch; gap: 2px; padding: 10px 16px 16px; margin: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow); display: none;
  }
  .pub-nav.is-open { display: flex; }
  .pub-nav__cta { margin: 8px 0 0; }
  .pub-nav-toggle { display: inline-flex; }
  .pub-hero h1 { font-size: 30px; }
  .pub-page-head h1 { font-size: 25px; }
  .pub-problems { grid-template-columns: 1fr; }
  .pub-section { padding: 40px 0; }
}
@media (max-width: 560px) {
  .pub-wrap { padding: 0 16px; }
  .pub-grid--cards, .pub-grid--news, .pub-grid--pricing { grid-template-columns: 1fr; }
  .pub-footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   R18 — Помощь и поддержка: sidebar/footer icon, cookie-consent
   banner + settings modal. Same tokens as the rest of the system —
   no new colours, no gradient, restrained density.
   ============================================================ */
.nav-item[data-ico="support"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2zm1.6-6.3c-.5.5-.8.9-.9 1.5-.1.4-.1.8-.1 1.3h-2c0-.8.1-1.4.3-1.9.2-.6.7-1.1 1.3-1.7.5-.5.9-.9.9-1.5 0-.9-.7-1.4-1.6-1.4-.8 0-1.4.4-1.7 1.1l-1.8-.8C8.4 6.1 9.7 5 11.5 5c2.1 0 3.6 1.3 3.6 3.1 0 1-.5 1.8-1.5 2.6z'/%3E%3C/svg%3E"); }

/* text-styled button used inline (e.g. "Настроить cookies") — a real
   <button>, never a non-interactive span, for keyboard/AT accessibility */
.link-like {
  font: inherit; font-size: inherit; font-weight: 600; color: var(--primary);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}
.link-like:hover { color: var(--primary-hover); }

.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: var(--shadow); padding: 14px 16px;
}
.consent-banner__body {
  max-width: var(--content-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.consent-banner__text { margin: 0; font-size: 13px; color: var(--text-dim); max-width: 640px; }
.consent-banner__text a { color: var(--primary); text-decoration: underline; }
.consent-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.consent-modal {
  position: fixed; inset: 0; z-index: 110;
  display: grid; place-items: center; padding: 20px;
  background: rgba(12, 16, 24, .45);
}
/* R18 P1 fix: the `hidden` attribute maps to a user-agent-stylesheet
 * `display: none`, which this class's own author-level `display: grid`
 * above silently wins over (author origin beats UA origin regardless of
 * specificity) — so `modal.hidden = true` never actually hid the element.
 * The modal's full-viewport backdrop (position: fixed; inset: 0) stayed
 * rendered and pointer-catching at all times, including on first paint
 * before any interaction, intercepting every click anywhere on the page
 * (verified: clicking the banner's own Accept-All button landed on this
 * div, not the button — nothing in the banner was ever reachable by a
 * mouse). This rule re-establishes `hidden` at equal specificity plus one
 * more attribute selector, so it wins on the same (author) origin. */
.consent-modal[hidden] { display: none; }
.consent-modal__panel {
  width: 100%; max-width: 420px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 22px;
}
.consent-modal__title { font-size: 16px; margin: 0 0 14px; }
.consent-modal__row { margin: 12px 0; }
.consent-modal__row .field--check span { font-size: 13px; color: var(--text-dim); }
.consent-modal__actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px;
}

@media (max-width: 560px) {
  .consent-banner__body { flex-direction: column; align-items: stretch; }
  .consent-banner__actions { justify-content: stretch; }
  .consent-banner__actions .btn { flex: 1; }
}

/* ============================================================
   Калькулятор юнит-экономики
   Dense two-column analytics layout: inputs on the left, a sticky
   result rail on the right. Collapses to a single column with a
   sticky verdict on narrow viewports.
   ============================================================ */
.calc { display: block; }
.calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: var(--sp-8);
  align-items: start;
}
.calc-inputs { display: flex; flex-direction: column; gap: var(--sp-7); min-width: 0; }
.calc-results {
  display: flex; flex-direction: column; gap: var(--sp-7);
  position: sticky; top: var(--sp-7); min-width: 0;
}

.calc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-sm), var(--inset-hairline);
}
.calc-card__title {
  font: var(--text-h2); letter-spacing: -.015em;
  margin: 0 0 var(--sp-7); color: var(--text-primary);
}
.calc-card--placeholder { border-style: dashed; background: var(--surface-elevated); }
.calc-placeholder { margin: 0; font: var(--text-small); color: var(--text-muted); }

.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-6) var(--sp-7);
}

.calc-field { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.calc-field__label {
  font: var(--text-caption); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
}
.calc-req { color: var(--primary); font-style: normal; }
.calc-field__control { position: relative; display: flex; align-items: center; }
.calc-field__control input,
.calc-field__control select {
  width: 100%; height: var(--control-h-lg);
  padding: 0 var(--sp-6); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text-primary); font: var(--text-body);
  font-variant-numeric: tabular-nums;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.calc-field__control input:hover,
.calc-field__control select:hover { border-color: var(--border-strong); }
.calc-field__control input:focus-visible,
.calc-field__control select:focus-visible {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.calc-field__unit {
  position: absolute; right: var(--sp-6); pointer-events: none;
  font: var(--text-small); color: var(--text-muted);
}
.calc-field__control input { padding-right: var(--sp-11); }
.calc-field__hint { font: var(--text-caption); color: var(--text-muted); line-height: 1.4; }
.calc-note {
  margin: var(--sp-6) 0 0; font: var(--text-caption);
  color: var(--text-muted); line-height: 1.5;
}

.calc-actions { display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center; }

/* ---- verdict ---- */
.calc-verdict { border-width: 1px; }
.calc-verdict__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-7);
}
.calc-verdict__tag {
  font: var(--text-caption); text-transform: uppercase; letter-spacing: .06em;
  padding: var(--sp-2) var(--sp-5); border-radius: var(--radius-pill);
  border: 1px solid currentColor;
}
.calc-verdict--profitable        { border-color: var(--success); }
.calc-verdict--profitable .calc-verdict__tag { color: var(--success); background: var(--success-soft); }
.calc-verdict--low_margin        { border-color: var(--warning); }
.calc-verdict--low_margin .calc-verdict__tag { color: var(--warning); background: var(--warning-soft); }
.calc-verdict--break_even        { border-color: var(--border-strong); }
.calc-verdict--break_even .calc-verdict__tag { color: var(--text-secondary); background: var(--surface-muted); }
.calc-verdict--loss              { border-color: var(--danger); }
.calc-verdict--loss .calc-verdict__tag { color: var(--danger); background: var(--danger-soft); }
.calc-verdict--insufficient_data { border-color: var(--border-strong); border-style: dashed; }
.calc-verdict--insufficient_data .calc-verdict__tag {
  color: var(--text-secondary); background: var(--surface-muted);
}
.calc-verdict__why { margin: 0; font: var(--text-small); color: var(--text-secondary); }

.calc-headline { margin-bottom: var(--sp-7); }
.calc-headline__value {
  font: var(--text-display-3); letter-spacing: var(--ls-display-3);
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.calc-headline__label { font: var(--text-caption); color: var(--text-muted); margin-top: var(--sp-2); }

.calc-kpis {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
.calc-kpi {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.calc-kpi__label { font: var(--text-caption); color: var(--text-muted); }
.calc-kpi__value {
  font: 700 16px/1.25 var(--font); color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ---- issues ---- */
.calc-issues { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-5); }
.calc-issue {
  font: var(--text-small); color: var(--text-secondary);
  padding-left: var(--sp-7); position: relative;
}
.calc-issue::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
}
.calc-issue--blocking { color: var(--text-primary); }
.calc-issue--blocking::before { background: var(--danger); }

/* ---- breakdown table ---- */
.calc-table { width: 100%; border-collapse: collapse; font: var(--text-table); }
.calc-table th {
  text-align: left; font: var(--text-caption);
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.calc-table td {
  padding: var(--sp-5); border-bottom: 1px solid var(--border-subtle);
  vertical-align: top; color: var(--text-secondary);
}
.calc-table tbody tr:hover { background: var(--surface-elevated); }
.calc-table .num-col { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-row__label { display: block; color: var(--text-primary); font-weight: var(--fw-medium); }
.calc-row__meta { display: inline-flex; margin-top: var(--sp-2); }

.calc-row--result td { border-top: 1px solid var(--border-strong); font-weight: var(--fw-bold); }
.calc-row--result .calc-row__label { font-weight: var(--fw-bold); }
.calc-row--revenue .calc-row__label { color: var(--text-primary); }
.calc-scenario__desc { display: block; font: var(--text-caption); color: var(--text-muted); margin-top: var(--sp-1); }

.calc-why { margin-top: var(--sp-2); }
.calc-why summary {
  cursor: pointer; font: var(--text-caption); color: var(--primary);
  list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2);
}
.calc-why summary::-webkit-details-marker { display: none; }
.calc-why summary::after { content: "\25BE"; font-size: 9px; }
.calc-why[open] summary::after { content: "\25B4"; }
.calc-why summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
.calc-why__body {
  margin-top: var(--sp-4); padding: var(--sp-5);
  background: var(--surface-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  display: grid; gap: var(--sp-2);
  font: var(--text-caption); color: var(--text-secondary); line-height: 1.5;
}
.calc-why__body strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.calc-why__note { color: var(--text-muted); font-style: italic; }

/* ---- definition lists (limits, price advice) ---- */
.calc-defs { margin: 0; display: grid; gap: var(--sp-5); }
.calc-defs > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-6); padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
}
.calc-defs > div:last-child { border-bottom: 0; padding-bottom: 0; }
.calc-defs dt { font: var(--text-small); color: var(--text-muted); margin: 0; }
.calc-defs dd {
  margin: 0; font: 600 14px/1.3 var(--font); color: var(--text-primary);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}

/* ---- data-freshness tags ---- */
.fresh {
  display: inline-block; font: var(--text-caption);
  padding: 1px var(--sp-4); border-radius: var(--radius-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.fresh--ok         { color: var(--success); background: var(--success-soft); border-color: var(--success-soft); }
.fresh--stale      { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-soft); }
.fresh--missing    { color: var(--text-muted); background: var(--surface-muted); border-color: var(--border); }
.fresh--unverified { color: var(--info); background: var(--info-soft); border-color: var(--info-soft); }

.calc-nodata { color: var(--text-muted); font-style: italic; }
.calc-dash { color: var(--text-disabled); }
.delta-up { color: var(--success); }
.delta-down { color: var(--danger); }

@media (max-width: 1100px) {
  .calc-layout { grid-template-columns: minmax(0, 1fr); }
  .calc-results { position: static; }
}
@media (max-width: 640px) {
  .calc-card { padding: var(--sp-7) var(--sp-6); }
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
  .calc-kpis { grid-template-columns: minmax(0, 1fr); }
  .calc-actions .btn { flex: 1 1 auto; }
  /* keep the verdict reachable while scrolling a long form on a phone */
  .calc-results .calc-verdict { position: sticky; top: var(--sp-4); z-index: 5; }
}
@media print {
  .sidebar, .topbar, .nav-toggle, .calc-inputs, .calc-export,
  .consent-banner, .consent-modal { display: none !important; }
  .calc-layout { grid-template-columns: 1fr; }
  .calc-card { break-inside: avoid; border-color: #ccc; box-shadow: none; }
}

/* ============================================================
   R21 — Creative UI layer (premium visual polish)

   Purely additive, page-level decoration on top of the existing
   design system above — no new colour system, no new stylesheet
   (still the only app.css), no new tokens beyond the Ozon/WB-family
   derivatives declared next to --brand-* above. Reuses --radius* /
   --shadow* / --sp-* / --text-* / --primary / --marketplace-wb
   everywhere it can.

   Deliberately NOT a return to the old global blue→violet→magenta
   gradient: colour is applied per-component (a card, a pill, a
   callout), never as the page/shell background. "Neon" here means a
   soft glow on a dot/border/orb — never blinking, never a full-bleed
   effect, never the only way a status is conveyed (every coloured
   pill still carries a text label).

   Budget: ~80/20 clean-UI-to-accent, enforced by using this layer on
   at most one hero + a small number of callouts/cards per page, not
   as a blanket restyle.
   ============================================================ */

/* ---- signal pill — "● MARKET SIGNAL" style label ---- */
.signal-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px 5px 10px; border-radius: var(--radius-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.signal-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.signal-pill--blue    { color: var(--primary); background: var(--primary-soft); }
.signal-pill--purple  { color: var(--marketplace-wb); background: var(--marketplace-wb-soft); }
.signal-pill--neutral { color: var(--text-secondary); background: var(--surface-muted); }
/* the one "neon" pill variant — a soft dot glow, still a solid-colour
   label underneath, so it degrades to a plain blue pill with reduced
   transparency/motion support turned off */
.signal-pill--neon { color: var(--ozon-electric); background: var(--creative-glow-blue); }
.signal-pill--neon .signal-pill__dot { box-shadow: 0 0 6px 1px currentColor; }

/* ---- creative card — reusable colour-block pattern ---- */
.creative-card {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--border); padding: 22px 24px; background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.creative-card__eyebrow { margin-bottom: 10px; }
.creative-card h3, .creative-card__title { font: var(--text-h2); margin: 0 0 6px; }
.creative-card p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.creative-card--ozon {
  background: linear-gradient(165deg, var(--primary-muted), var(--surface) 65%);
  border-color: var(--primary-line);
}
.creative-card--wb {
  background: linear-gradient(165deg, var(--marketplace-wb-soft), var(--surface) 65%);
  border-color: rgba(160,59,214,.32);
}
.creative-card--neutral { background: var(--surface); }
.creative-card--neon {
  border-color: var(--creative-glow-blue);
  box-shadow: 0 0 0 1px var(--creative-glow-blue), 0 22px 44px -30px var(--creative-glow-purple), var(--shadow-sm);
}

/* ---- creative callout — short "label + one line" pattern ---- */
.creative-callout {
  display: flex; flex-direction: column; gap: 8px;
  border-radius: var(--radius); padding: 16px 18px; border: 1px solid transparent;
}
.creative-callout p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.creative-callout--blue   { background: var(--primary-muted); border-color: var(--primary-line); }
.creative-callout--purple { background: var(--marketplace-wb-soft); border-color: rgba(160,59,214,.3); }
.creative-callout--neon   { background: var(--creative-glow-blue); border-color: var(--creative-glow-purple); }

/* ---- editorial statement — large brand-voice typography, reuses the
   existing .display-2/.display-3 scale, just adds optional two-tone
   accent spans ---- */
.editorial-statement { margin: 0 0 18px; }
.creative-card { margin-bottom: 16px; }
.creative-callout { margin-bottom: 14px; }
/* stack of creative blocks: only the gap between them, not a trailing
   one that would double up against the next page section's own margin */
.creative-card:last-child, .creative-callout:last-child { margin-bottom: 0; }
.editorial-statement.ac-blue,   .editorial-statement .ac-blue   { color: var(--primary); }
.editorial-statement.ac-purple, .editorial-statement .ac-purple { color: var(--marketplace-wb); }

/* ---- decorative signal elements — purely visual, never carry
   information on their own (every one is aria-hidden in markup) ---- */
.signal-orb {
  position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px);
}
.signal-orb--blue   { background: radial-gradient(circle, var(--creative-glow-blue), transparent 70%); }
.signal-orb--purple { background: radial-gradient(circle, var(--creative-glow-purple), transparent 70%); }
.signal-orb--lg { width: 260px; height: 260px; }
.signal-orb--top-right   { top: -90px; right: -70px; }
.signal-orb--bottom-left { bottom: -90px; left: -50px; }

.signal-ring {
  position: absolute; border-radius: 50%; border: 1px solid var(--border-subtle);
  pointer-events: none;
}
.signal-ring--lg { width: 180px; height: 180px; top: -60px; right: -50px; }
.signal-ring--sm { width: 90px; height: 90px; bottom: -30px; right: 30px; border-color: var(--creative-glow-blue); }

.signal-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
}

.signal-line {
  height: 1px; width: 100%; pointer-events: none; margin: 0 0 18px;
  background: linear-gradient(90deg, transparent, var(--creative-glow-blue) 30%, var(--creative-glow-purple) 70%, transparent);
}

.signal-wave { width: 100%; height: 28px; pointer-events: none; }
.signal-wave svg { display: block; width: 100%; height: 100%; }
.signal-wave path { stroke: var(--creative-glow-blue); stroke-width: 1.5; fill: none; }

/* ---- Market Intel card accent (top hairline, additive modifier — the
   base .mi-card rule above is untouched) ---- */
.mi-card { position: relative; }
.mi-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: var(--radius) var(--radius) 0 0; background: transparent;
}
.mi-card--accent-blue::before   { background: var(--primary); }
.mi-card--accent-purple::before { background: var(--marketplace-wb); }
/* "Рекламное давление" (ad pressure) is a cost/competition-risk signal,
   not a neutral data card — reuses the existing --warning token, the
   same one every other risk-adjacent state in the product already uses
   (.ab-state--reduce, .stale-flag), instead of a third brand hue. */
.mi-card--accent-warn::before   { background: var(--warning); }

/* ---- pricing plan accent (additive modifier on the existing
   .pub-plan card — see public site CSS above, untouched) ---- */
.pub-plan--accent-blue   { border-color: var(--primary-line); }
.pub-plan--accent-purple { border-color: rgba(160,59,214,.32); }

@media (prefers-reduced-motion: no-preference) {
  .creative-card, .signal-pill { transition: box-shadow .18s ease, transform .18s ease; }
  .creative-card--neon:hover, .creative-card--ozon:hover, .creative-card--wb:hover {
    transform: translateY(-1px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .creative-card, .signal-pill { transition: none; }
}

/* mobile: keep the wordmark/monogram-adjacent chrome intact, thin out
   secondary decoration rather than porting the desktop composition
   1:1 (orbs/grid/ring/wave add nothing on a 375–430px screen and cost
   real paint time) */
@media (max-width: 560px) {
  .signal-orb, .signal-ring, .signal-grid, .signal-wave { display: none; }
  .creative-card { padding: 18px 18px; }
}