/* UmbraTrade · общие токены и база для лендинга, кабинета и админки (10.4, 2026-10-22).
   Один источник правды: цвета (тёмная по умолчанию + [data-theme="light"]), шрифты, шкала размеров,
   радиусы, отступы, движение, фокус, числа, скелетоны. Части добавляют только своё (поверхности админки,
   ширина меню, серии графиков) — палитру в своих файлах НЕ дублируют.
   Смысл цвета: --pos прибыль/успех, --neg убыток/ошибка, --warn внимание, --acc живое/активное/ссылка,
   --vi Runner/мастер. Контраст текста на «мягких» плашках (--*-soft) — не ниже 4.5:1 в обеих темах
   (проверено скриптом docs/VISUAL-REVIEW.md §3). Подключение: <link rel="stylesheet" href="/static/shared/tokens.css">
   ПЕРЕД css части. */

:root {
  color-scheme: dark;
  /* --- поверхности и линии */
  --bg: #05070c; --bg-2: #080c14;
  --surface: rgba(16, 22, 34, .72); --surface-solid: #0d121c; --surface-2: rgba(24, 32, 48, .7); --surface-3: #131a28;
  --line: rgba(148, 180, 225, .12); --line-2: rgba(148, 180, 225, .22);
  /* --- текст: ink-3 поднят с #7c8aa0 → #8b98ad (было 4.45:1 на вложенных карточках) */
  --ink: #e9eef6; --ink-2: #a5b1c2; --ink-3: #8b98ad;
  /* --- смысловые цвета */
  --acc: #4fd8ff; --acc-2: #2aa8d8; --acc-ink: #031319; --acc-soft: rgba(79, 216, 255, .1);
  --pos: #2fe3a0; --pos-soft: rgba(47, 227, 160, .12); --pos-ink: #03140d;
  --neg: #ff5c78; --neg-soft: rgba(255, 92, 120, .12); --neg-ink: #1a0208;
  --warn: #ffb454; --warn-soft: rgba(255, 180, 84, .1); --warn-ink: #1d1100;
  --vi: #a497ff; --vi-soft: rgba(164, 151, 255, .14);
  --grid: rgba(148, 180, 225, .07);
  /* --- серии графиков (22.10, решение владельца №1): порядок фиксирован, цвет следует за сущностью.
     Проверены валидатором палитры (dataviz validate_palette.js, dark на #0d121c / light на #fff — все проверки PASS);
     вторичный код — линия: 1 сплошная, 2 пунктир, 3 точки, 4 штрих-пунктир (shared/chart.js) */
  --s-1: #1fa3cc; --s-2: #8a76f0; --s-3: #c97a1e; --s-4: #d65f9b;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 60px -24px rgba(0, 0, 0, .7);
  --shadow-pop: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 80px -20px rgba(0, 0, 0, .8);
  --glow-acc: 0 0 0 1px rgba(79, 216, 255, .35), 0 0 28px -4px rgba(79, 216, 255, .45);
  --scrim: rgba(2, 4, 8, .62);
  --skel-a: rgba(148, 180, 225, .07); --skel-b: rgba(148, 180, 225, .14);

  /* --- шрифты и шкала (1.125 вокруг 15 px; админка плотнее — база 14) */
  --ui: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", Consolas, ui-monospace, monospace;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 26px;
  --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.55;

  /* --- радиусы и отступы (шаг 4) */
  --r-xs: 6px; --r-sm: 10px; --r: 16px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* --- движение: короткое и мягкое; при prefers-reduced-motion — выключено (низ файла) */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-1: .12s; --dur-2: .2s; --dur-3: .32s;

  /* --- фокус: одно кольцо на всё */
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--acc);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fa; --bg-2: #eaeef5;
  --surface: rgba(255, 255, 255, .9); --surface-solid: #ffffff; --surface-2: rgba(240, 244, 250, .95); --surface-3: #eef2f8;
  --line: rgba(20, 40, 80, .1); --line-2: rgba(20, 40, 80, .18);
  --ink: #0c1320; --ink-2: #3c4859; --ink-3: #566275;
  /* затемнены ради 4.5:1 на мягких плашках (было: acc #0577a3 4.1, pos #08875a 3.7, neg #cf2346 4.2, warn #9a5a00 4.4) */
  --acc: #04668c; --acc-2: #035577; --acc-ink: #ffffff; --acc-soft: rgba(4, 102, 140, .09);
  --pos: #057449; --pos-soft: rgba(5, 116, 73, .1); --pos-ink: #ffffff;
  --neg: #b51c3c; --neg-soft: rgba(181, 28, 60, .09); --neg-ink: #ffffff;
  --warn: #8a5000; --warn-soft: rgba(196, 120, 0, .11); --warn-ink: #ffffff;
  --vi: #5340cc; --vi-soft: rgba(83, 64, 204, .1);
  --grid: rgba(20, 40, 80, .07);
  --s-1: #0577a3; --s-2: #5a48d8; --s-3: #b0560a; --s-4: #b8327a;
  --shadow: 0 1px 2px rgba(15, 30, 60, .06), 0 18px 44px -24px rgba(15, 30, 60, .28);
  --shadow-pop: 0 1px 2px rgba(15, 30, 60, .08), 0 28px 70px -24px rgba(15, 30, 60, .4);
  --glow-acc: 0 0 0 1px rgba(4, 102, 140, .35), 0 6px 24px -8px rgba(4, 102, 140, .4);
  --scrim: rgba(20, 30, 50, .38);
  --skel-a: rgba(20, 40, 80, .06); --skel-b: rgba(20, 40, 80, .11);
}

/* ---------------------------------------------------------------- общая база */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: color-mix(in srgb, var(--acc) 30%, transparent); color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--acc); color: var(--acc-ink); padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }

/* числа: моноширинные цифры везде, где сравнивают значения; минус — настоящий (−) ставит форматтер */
.mono, code, .num, kbd { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table { font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); } .neg { color: var(--neg); }

/* скелетон загрузки: вместо «Загрузка…» — силуэт страницы; без мерцания при reduced-motion */
.skel { display: block; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--skel-a) 0%, var(--skel-b) 40%, var(--skel-a) 80%) 0 0 / 300% 100%;
  animation: skel 1.4s ease-in-out infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skel-page { display: grid; gap: 16px; }
.skel-page .skel--h { height: 30px; width: min(320px, 70%); }
.skel-page .skel--t { height: 14px; width: min(520px, 90%); }
.skel-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.skel-row .skel { height: 92px; border-radius: var(--r); }
.skel-page .skel--block { height: 260px; border-radius: var(--r); }

/* общий линейный график (shared/chart.js) — одинаковый в трёх частях */
.shc { position: relative; width: 100%; min-width: 0; }
.shc__legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.shc__lg { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 3px 10px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink); font: 500 var(--fs-xs) var(--ui); transition: opacity var(--dur-2), border-color var(--dur-2), background-color var(--dur-2); }
.shc__lg:hover { border-color: var(--acc); }
.shc__lg[aria-pressed="false"] { opacity: .5; background: transparent; }
.shc__lg[aria-pressed="false"] span { text-decoration: line-through; text-decoration-thickness: 1px; }
.shc__lg[aria-pressed="true"] { background: var(--surface-2, transparent); }
.shc .shc__sw { flex: none; overflow: visible; display: inline-block; width: 26px; height: 8px; max-width: none; }
.shc__plot { position: relative; width: 100%; }
.shc .shc__svg { display: block; max-width: none; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.shc__svg:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 6px; }
.shc__axis text { fill: var(--ink-3); font: 500 11px var(--mono); }
.shc__grid { stroke: var(--grid); stroke-width: 1; }
.shc__zero { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; }
.shc__area { opacity: .1; }
.shc__band { fill: var(--neg); opacity: .08; }
.shc__bandl { fill: var(--neg); font: 600 11px var(--ui); }
.shc__dot { stroke: var(--surface-solid); stroke-width: 1.5; }
.shc__end { fill: var(--ink-2); font: 600 12px var(--ui); }
.shc__xh { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.shc__pt { stroke: var(--surface-solid); stroke-width: 2; }
.shc__hit { cursor: crosshair; }
.shc__tip { position: absolute; z-index: 5; pointer-events: none; min-width: 170px; max-width: min(300px, 92%); padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--surface-solid); border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); font: var(--fs-sm)/1.4 var(--ui); color: var(--ink); }
.shc__tt { display: block; font: 600 var(--fs-xs) var(--mono); color: var(--ink-2); margin-bottom: 4px; }
.shc__tx { font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: 4px; }
.shc__tr { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.shc__tv { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.shc__empty { color: var(--ink-3); padding: 28px 8px; text-align: center; }
@media (forced-colors: active) { .shc__lg { forced-color-adjust: auto; } }

/* подключение через партнёра STARTRADER (shared/ibmail.js): крупная пометка про код + письмо о переводе */
.ibnote { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-sm); border: 2px solid var(--warn); background: var(--warn-soft); color: var(--ink); }
.ibnote__k { font: 700 var(--fs-2xs)/1 var(--ui); letter-spacing: .02em; color: var(--warn); }
.ibnote__t { margin: 0; font: 600 var(--fs-lg)/var(--lh-snug) var(--ui); }
.ibnote__code { font-size: 1.25em; font-weight: 800; letter-spacing: .04em; padding: 0 6px; border-radius: var(--r-xs); background: var(--surface-solid); color: var(--ink); white-space: nowrap; }
.ibnote--compact .ibnote__t { font-size: var(--fs-base); }
@media (min-width: 720px) { .ibnote__t { font-size: var(--fs-xl); } .ibnote--compact .ibnote__t { font-size: var(--fs-lg); } }
.ibm { display: grid; gap: 14px; min-width: 0; }
.ibm__steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-body); }
.ibm__warn { padding: 10px 12px; border-radius: var(--r-sm); background: var(--neg-soft); color: var(--ink); font-size: var(--fs-sm); }
.ibm__warn b { color: var(--neg); }
.ibm__form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ibm__f { display: grid; gap: 4px; min-width: 0; }
.ibm__f label, .ibm__r legend { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; }
.ibm__in { width: 100%; min-height: 40px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-solid); color: var(--ink); font-family: var(--mono); }
.ibm__in:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.ibm__hint { font-size: var(--fs-2xs); color: var(--ink-3); }
.ibm__err { font-size: var(--fs-xs); color: var(--neg); min-height: 0; }
.ibm__r { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ibm__r legend { padding: 0; margin-bottom: 6px; }
.ibm__ro { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); cursor: pointer; }
.ibm__ro input { width: 18px; height: 18px; accent-color: var(--acc); }
.ibm__pv { display: grid; gap: 6px; padding: 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2, var(--surface)); min-width: 0; }
.ibm__sj { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: var(--fs-sm); min-width: 0; }
.ibm__sj b { overflow-wrap: anywhere; }
.ibm__lbl { color: var(--ink-3); font-size: var(--fs-xs); min-width: 44px; }
.ibm__body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--fs-xs)/1.6 var(--mono); color: var(--ink); max-height: 260px; overflow: auto; }
.ibm__act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ibm__act .is-off { opacity: .55; }
.ibm__msg { font-size: var(--fs-xs); }

/* тонкие полосы прокрутки в обёртках таблиц и вкладок */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .skel { animation: none; background: var(--skel-b); }
}