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

:root {
  --u-ink: #06282b;
  --u-teal: #008b8f;
  --u-teal-bright: #19c9b6;
  --u-amber: #e6a23c;
  --u-amber-deep: #b9791f;
  --u-paper: #f3f7f7;
  --u-card: #ffffff;
  --u-line: #dbe8e8;
  --u-text: #123037;
  --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;
}
@media (prefers-color-scheme: dark) {
  :root {
    --u-ink: #04191b; --u-paper: #08211f; --u-card: #0d2c2b; --u-line: #1c3d3b;
    --u-text: #dcecea; --u-muted: #7fa0a0;
    --u-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --u-ink: #04191b; --u-paper: #08211f; --u-card: #0d2c2b; --u-line: #1c3d3b;
  --u-text: #dcecea; --u-muted: #7fa0a0;
  --u-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"] {
  --u-ink: #06282b; --u-paper: #f3f7f7; --u-card: #ffffff; --u-line: #dbe8e8;
  --u-text: #123037; --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; }