/* ============================================================================
   UMKO Design System — единый источник для ВСЕХ поддоменов экосистемы.
   Раздаётся с https://um-ko.ru/assets/umko-ds.css
   Безопасно: все токены (--u-*) и классы (.u-*) с префиксом → НЕ трогают
   существующие стили фронтов. Внедрение strangler'ом: подключить рядом со
   старым CSS, потом по одному компоненту переводить на .u-*.
   3 носителя идентичности: «Честный чек» · светофор маржи · бирюза+золото.
   ============================================================================ */

:root {
  --u-ink: #030a08;
  --u-teal: #0aa88a;
  --u-teal-bright: #00f5c2;
  --u-amber: #e6a23c;
  --u-amber-deep: #b9791f;
  --u-paper: #eff6f4;
  --u-card: #ffffff;
  --u-line: #d7e6e1;
  --u-text: #0a211c;
  --u-muted: #5a7883;
  --u-ok: #1aa06b;
  --u-warn: #d98a00;
  --u-loss: #d1495b;
  --u-shadow: 0 1px 2px rgba(6,40,43,.06), 0 8px 24px rgba(6,40,43,.06);
  --u-radius: 14px;
  --u-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;
  --u-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --u-display: 'Unbounded', var(--u-sans);
  --u-sans-display: 'Manrope', var(--u-sans);
}
@media (prefers-color-scheme: dark) {
  :root {
    --u-ink: #030a08; --u-paper: #06120f; --u-card: #0a1a17; --u-line: #153029;
    --u-text: #eafdf6; --u-muted: #7ea89f;
    --u-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --u-ink: #030a08; --u-paper: #06120f; --u-card: #0a1a17; --u-line: #153029;
  --u-text: #eafdf6; --u-muted: #7ea89f;
  --u-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"] {
  --u-ink: #030a08; --u-paper: #eff6f4; --u-card: #ffffff; --u-line: #d7e6e1;
  --u-text: #0a211c; --u-muted: #5a7883;
  --u-shadow: 0 1px 2px rgba(6,40,43,.06), 0 8px 24px rgba(6,40,43,.06);
}

/* --- утилиты --- */
.u-num { font-family: var(--u-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.u-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--u-teal); }
.u-card { background: var(--u-card); border: 1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow); padding: 20px; color: var(--u-text); }

.u-btn { display:inline-flex; align-items:center; gap:7px; font: 600 14px/1 var(--u-sans); color:#fff; background: var(--u-teal); border:0; border-radius:9px; padding:10px 16px; cursor:pointer; text-decoration:none; transition: background .15s; }
.u-btn:hover { background:#00767a; }
.u-btn:focus-visible { outline: 2px solid var(--u-amber); outline-offset: 2px; }
.u-btn--ghost { background: transparent; color: var(--u-teal); border:1px solid var(--u-line); }

.u-tag { font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px; border:1px solid var(--u-line); color: var(--u-text); background: var(--u-card); }
.u-pill { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }

/* --- светофор маржи (семантика, отдельно от бренда) --- */
.u-light { width:10px; height:10px; border-radius:999px; display:inline-block; vertical-align:middle; }
.u-light--ok { background: var(--u-ok); }
.u-light--warn { background: var(--u-warn); }
.u-light--loss { background: var(--u-loss); }
.u-pill--ok { background: rgba(26,160,107,.15); color: var(--u-ok); }
.u-pill--warn { background: rgba(217,138,0,.15); color: var(--u-warn); }
.u-pill--loss { background: rgba(209,73,91,.15); color: var(--u-loss); }

/* --- KPI-карточка со стрип-индикатором состояния --- */
.u-kpi { position:relative; background: var(--u-card); border:1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow); padding:18px 18px 18px 22px; }
.u-kpi__stripe { position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:4px; background: var(--u-teal); }
.u-kpi--ok .u-kpi__stripe { background: var(--u-ok); }
.u-kpi--warn .u-kpi__stripe { background: var(--u-warn); }
.u-kpi--loss .u-kpi__stripe { background: var(--u-loss); }
.u-kpi__val { font-family: var(--u-mono); font-variant-numeric: tabular-nums; font-size:28px; font-weight:800; color: var(--u-text); letter-spacing:-.02em; }
.u-kpi__lbl { font-size:12.5px; color: var(--u-muted); margin-top:2px; }
.u-kpi__sub { font-size:12px; margin-top:8px; display:inline-flex; align-items:center; gap:6px; color: var(--u-muted); }

/* --- «заверено» печать (TSP/ПЭП) --- */
.u-seal { font-size:11px; font-weight:700; color: var(--u-amber-deep); background: rgba(230,162,60,.14); border:1px solid rgba(230,162,60,.4); padding:3px 8px; border-radius:999px; letter-spacing:.02em; }

/* --- пояснитель «как это считается» (прозрачность у цифры) --- */
.u-explain { display:flex; gap:12px; align-items:flex-start; background: color-mix(in srgb, var(--u-teal) 8%, var(--u-card)); border:1px solid color-mix(in srgb, var(--u-teal) 25%, var(--u-line)); border-radius:12px; padding:14px 16px; color: var(--u-text); font-size:14px; }
.u-explain__q { flex:none; width:26px; height:26px; border-radius:999px; background: var(--u-teal); color:#fff; display:grid; place-items:center; font-weight:800; }

/* ============================================================================
   ФИРМЕННЫЙ КОМПОНЕНТ: «Честный чек» — куда ушёл каждый рубль.
   Разметка:
   <div class="u-cheq">
     <div class="u-cheq__head">🧾 Честный чек <span class="u-seal">✔ заверено · TSP</span></div>
     <div class="u-cheq__bar">
       <span style="width:62%;background:var(--u-teal)">Продавец</span>
       <span style="width:10%;background:var(--u-amber)">УМКО</span> ...
     </div>
     <div class="u-cheq__legend"> строки ... </div>
     <div class="u-cheq__total"><span>Заплатил покупатель</span><span class="u-num">4 000 ₽</span></div>
   </div>
   ============================================================================ */
.u-cheq { background: var(--u-card); border:1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow); padding:20px; color: var(--u-text); }
.u-cheq__head { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; flex-wrap:wrap; }
.u-cheq__bar { display:flex; height:38px; border-radius:10px; overflow:hidden; margin:16px 0 12px; border:1px solid var(--u-line); }
.u-cheq__bar > span { display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700; min-width:0; overflow:hidden; white-space:nowrap; }
.u-cheq__legend { display:grid; grid-template-columns:1fr auto auto; gap:2px 14px; font-size:13px; }
.u-cheq__legend > .u-row { display:contents; }
.u-cheq__legend > .u-row > * { padding:6px 0; border-bottom:1px dashed var(--u-line); }
.u-cheq__legend .u-dot { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:8px; vertical-align:middle; }
.u-cheq__legend .u-v { text-align:right; color: var(--u-muted); font-family: var(--u-mono); font-variant-numeric: tabular-nums; }
.u-cheq__legend .u-p { text-align:right; font-weight:700; font-family: var(--u-mono); }
.u-cheq__total { display:flex; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:2px solid var(--u-text); font-weight:800; }
.u-cheq__total .u-num { font-size:16px; }


/* ============================================================================
   Шрифты (07.08.2026, вынесено 27.08.2026): Unbounded — дисплей/крупные
   заголовки (.u-display), Manrope — опциональный body-шрифт (.u-manrope).
   САМИ ФАЙЛЫ (@font-face, 14 woff2) переехали в assets/umko-ds-display-fonts.css
   — этот файл на 81 из 83 страниц подключается впустую (классы нигде не
   используются), поэтому больше НЕ тянет woff2 сам. Если странице реально
   нужны .u-display/.u-manrope — подключи assets/umko-ds-display-fonts.css
   ОТДЕЛЬНЫМ <link> рядом с этим файлом (см. odr/landing.php,
   app/modules/site/eco_product.php). Custom properties --u-display/
   --u-sans-display остаются здесь — это просто имена стеков, не файлы.
   ============================================================================ */

.u-display { font-family: var(--u-display); }
.u-manrope { font-family: var(--u-sans-display); }

/* Централизованные hero-эффекты (umko-effects.js, 07.08.2026) — позиционирование canvas
   одинаковое на всех страницах, сам эффект в JS читает --umko-ink/--umko-teal/--umko-teal-br. */
canvas.umko-shader{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* Централизованная иконка-система (07.08.2026) — единый набор линейных SVG вместо разноцветных
   эмодзи (было "стрёмно" на тёмном UI). Символы объявляются локально на каждой странице (спрайт
   маленький и специфичный под контент), но базовый класс — общий, чтобы не дублировать в каждом файле. */
.ico{width:1em;height:1em;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.ico.solid{fill:currentColor;stroke:none}
.mp-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}

/* #аудит 13.08: единый класс кастомных попапов (переключатель организации/контекста,
   уведомления) — раньше каждый попап (#org-dd/#notif-dd/#ctx-dd и т.п.) дублировал одну и ту же
   разметку инлайн-стилями с разъехавшимися деталями (border-radius 8 vs 10px, тень .1 vs .15
   альфа, где-то не было max-height/overflow-y вообще — см. баг с непрокручивающимися списками).
   position:relative на обёртке и toggle через JS (display:none/block) остаются на конкретной
   странице — здесь только визуальная оболочка самого списка. */
.umko-popup{
  position:absolute; top:110%; right:0;
  background:var(--light,#fff); border:1px solid var(--border,#d4e8ed); border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.12); min-width:180px; max-height:400px; overflow-y:auto;
  z-index:999; padding:4px 0;
}
.umko-popup.umko-popup-left{ right:auto; left:0; }

/* #аудит 17.08: канонiчный hero-баннер продуктовых лендингов. До этого момента такого компонента
   в системе не было вообще — каждый из 16 публичных лендингов писал .hero/.zhero с нуля инлайн,
   отсюда визуальный разнобой (владелец заметил "3 разных стиля" на скриншотах). Это тот же
   визуальный язык, что уже фактически сложился как большинство (сплошной var(--umko-teal-d),
   круглые декоративные обводки) — используется кластером eco_product.php (kassa/edo/spravki/
   karty/pochta/bilety/tury/platezhi/oteli) + odr. Формализовано здесь, чтобы дальше не
   копипастить инлайн и не расходиться заново. mp/ads/sec выровнены под эти же значения.
   Разметка: <section class="u-hero"><div class="u-hero-in"><div class="u-hero-ic">…</div>
   <span class="u-hero-tag">…</span><h1>…</h1><p>…</p></div></section> */
.u-hero{color:#fff;padding:74px 24px 66px;text-align:center;position:relative;overflow:hidden;background:var(--umko-teal-d,#077d68)}
.u-hero::before{content:"";position:absolute;top:-70px;right:-70px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(255,255,255,.14);pointer-events:none}
.u-hero::after{content:"";position:absolute;bottom:-90px;left:20px;width:200px;height:200px;border-radius:50%;border:1px solid rgba(255,255,255,.1);pointer-events:none}
.u-hero-in{position:relative;z-index:2}
.u-hero-ic{font-size:56px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.2));display:flex;justify-content:center}
.u-hero h1{font-size:clamp(28px,5vw,40px);margin:14px auto 8px;font-weight:850;letter-spacing:-.025em;max-width:16ch;text-wrap:balance;font-family:var(--u-display,inherit);color:#fff!important}
.u-hero-tag{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.16);padding:6px 14px;border-radius:30px}
.u-hero p{max-width:640px;margin:20px auto 26px;font-size:17px;line-height:1.6;opacity:.95}
@media(max-width:560px){.u-hero{padding:56px 18px 50px}}