/* --- Тема «Размах» --------------------------------------------------------------
   Под фирменный стиль «Максимального Размаха»: малиново-красный логотипа на белом,
   «Максимальный» рукописным, «РАЗМАХ» рубленым. За рабочей областью — их же надпись
   с сердцем-росчерком, крупно и размыто, всегда по центру видимой области
   (`.brandmark` в index.html). Перенесено из демо `crm-demo-pelmeni` 15.10.2026
   отдельным слоем, как wa-view.css: в других темах отсюда не действует ничего.
   Шрифты — Marck Script и Russo One, лежат в fonts/. */
@font-face { font-family: "MR Script"; src: url("/static/fonts/mr-script.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "MR Display"; src: url("/static/fonts/mr-display.ttf") format("truetype"); font-display: swap; }
:root[data-theme="razmah"] {
  --bg: #ffffff;
  --panel: #fbf1f0;
  --panel-2: #fdf7f6;
  --text: #2b1416;
  --muted: #7a4247;            /* тёмно-вишнёвый, а не серый: подписи читаются */
  --line: #f1d9d7;
  --accent-ink: color-mix(in srgb, var(--accent) 78%, #3a0a0d);
  --accent-tint: color-mix(in srgb, var(--accent) 11%, #fff);
  --alert: #c81e3a;
  --alert-tint: #fde4e8;
  --warm: #d98a12;
  --warm-tint: #fff1dc;
  --ok: #2f9e5b;
  --radius: 14px;
  --radius-s: 10px;
  --shadow: 0 10px 26px rgba(150, 24, 34, .10);
  --lift: 0 1px 2px rgba(120, 20, 30, .06), 0 12px 24px -18px rgba(150, 20, 30, .45);
  --chart-1: var(--accent);
  --chart-2: #f2a33a;
  color-scheme: light;
}
:root[data-theme="razmah"] body {
  background: radial-gradient(ellipse 80% 70% at 55% 45%, #ffffff 0%, #fff8f7 55%, #fdeceb 100%) fixed;
  background-color: #fff8f7;
}
:root[data-theme="razmah"] #app, :root[data-theme="razmah"] #login { position: relative; z-index: 1; }
:root[data-theme="razmah"] .app { background: transparent; }

/* надпись-фон */
.brandmark { display: none; }
:root[data-theme="razmah"] .brandmark {
  display: grid; place-items: center; position: fixed; z-index: 0; pointer-events: none; overflow: hidden;
  top: var(--top-h, 0px); left: var(--side-w, 0px); right: 0; bottom: 0;
}
.brandmark__in {
  position: relative; width: min(74%, 980px); aspect-ratio: 5 / 3; display: grid; place-items: center;
  container-type: inline-size; color: var(--accent);
  transform: rotate(-6deg); filter: blur(3px); opacity: .17;
}
.brandmark__in svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.brandmark__txt { position: relative; display: grid; justify-items: center; line-height: .92; margin-top: -2cqw; }
.brandmark__a { font: 400 10cqw/1 "MR Script", "Segoe Script", cursive; margin-bottom: -1.5cqw; transform: translateX(-9cqw); }
.brandmark__b { font: 400 20cqw/.9 "MR Display", "Arial Black", sans-serif; letter-spacing: .01em;
  color: currentColor; text-shadow: 1cqw 1cqw 0 color-mix(in srgb, currentColor 45%, transparent); }
.brandmark__c { font: 400 6.4cqw/1.1 "MR Script", "Segoe Script", cursive; margin-top: 2.5cqw; }
@media (max-width: 720px) { .brandmark__in { width: 96%; opacity: .12; filter: blur(2.5px); } }

/* слои рабочей области — полупрозрачные, чтобы надпись была видна в просветах */
:root[data-theme="razmah"] .top { background: rgba(255, 255, 255, .84); backdrop-filter: blur(10px); border-color: var(--line); }
:root[data-theme="razmah"] .top .brand { font-family: "MR Script", "Segoe Script", cursive; font-weight: 400;
  font-size: 21px; line-height: 1.05; color: var(--accent); letter-spacing: 0; white-space: normal;
  min-width: 0; max-width: 100%; }   /* «Максимальный Размах» целиком в панель не влезает — в две строки */
:root[data-theme="razmah"] .brand__mark { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
:root[data-theme="razmah"] .view { background: rgba(255, 255, 255, .5); }
:root[data-theme="razmah"] .view--funnel, :root[data-theme="razmah"] .view--dialogs { background: transparent; }
:root[data-theme="razmah"] .thread, :root[data-theme="razmah"] .thread__messages,
:root[data-theme="razmah"] .composer { background: transparent; }
:root[data-theme="razmah"] .list { background: rgba(255, 255, 255, .80); backdrop-filter: blur(6px); }
:root[data-theme="razmah"] .card, :root[data-theme="razmah"] .ai { background: rgba(255, 255, 255, .94); box-shadow: var(--shadow); }
:root[data-theme="razmah"] .col { background: rgba(255, 255, 255, .34); border-color: rgba(236, 200, 198, .75);
  box-shadow: 0 14px 30px -24px rgba(150, 20, 30, .4); }
:root[data-theme="razmah"] .kcard, :root[data-theme="razmah"] .modal__card, :root[data-theme="razmah"] .srow,
:root[data-theme="razmah"] .trow, :root[data-theme="razmah"] .menu, :root[data-theme="razmah"] .hqman {
  background: #fff; border: 1px solid var(--line); box-shadow: var(--lift);
}
:root[data-theme="razmah"] .kcard:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
:root[data-theme="razmah"] .msg--CLIENT { background: #fff; border-color: var(--line); box-shadow: var(--lift); }
:root[data-theme="razmah"] .lead.is-active { background: var(--accent-tint); }
:root[data-theme="razmah"] .tab { color: #4a2226; }
:root[data-theme="razmah"] .tab:hover { background: var(--accent-tint); }
:root[data-theme="razmah"] .tab.is-active { background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
:root[data-theme="razmah"] .tab.is-active .tab__ic { filter: none; }
:root[data-theme="razmah"] .btn { background: #fff; border-color: var(--line); }
:root[data-theme="razmah"] .btn:hover { background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
:root[data-theme="razmah"] .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="razmah"] .btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
:root[data-theme="razmah"] .chip--btn.is-active { background: #9e1b22; border-color: #9e1b22; color: #fff; }
:root[data-theme="razmah"] .field input, :root[data-theme="razmah"] .field select, :root[data-theme="razmah"] .field textarea,
:root[data-theme="razmah"] .taskform input, :root[data-theme="razmah"] .taskform select, :root[data-theme="razmah"] .sform input,
:root[data-theme="razmah"] .sform select, :root[data-theme="razmah"] .sform textarea,
:root[data-theme="razmah"] .list__search input { background: #fff; border-color: #ecd0ce; }
:root[data-theme="razmah"] .login { background: transparent; }
:root[data-theme="razmah"] .login__card { background: rgba(255, 255, 255, .95); box-shadow: 0 30px 60px -30px rgba(150, 20, 30, .55); }
:root[data-theme="razmah"] .toast { background: #2b1416; color: #fff; }
:root[data-theme="razmah"] .toast--error { background: var(--alert); color: #fff; }
:root[data-theme="razmah"] .modal { background: rgba(60, 10, 14, .45); }
:root[data-theme="razmah"] * { scrollbar-color: #d9a3a6 transparent; }
:root[data-theme="razmah"] .ktip { box-shadow: 0 18px 44px rgba(150, 24, 34, .22); }

:root[data-theme="razmah"] .btn--alert { background: var(--alert); border-color: var(--alert); color: #fff; }
:root[data-theme="razmah"] .btn--alert:hover { background: #a8172f; border-color: #a8172f; }