/* Matana — оформление.
   Тёмная тема как основная: график смотрят часами. Светлая — полноценная,
   не инверсия. Все размеры кратны 2, контролы 34 px, панель 56 px. */

:root {
  --bg:        #0B0D11;
  --panel:     #12161C;
  --panel-2:   #171C24;
  --raise:     #1C222B;
  --line:      #222A34;
  --line-soft: #1A2029;
  --text:      #E7ECF3;
  --text-2:    #A7B2C2;
  --muted:     #6F7B8C;
  --accent:    #E5A13B;
  --accent-d:  #C2812A;
  --accent-sf: rgba(229,161,59,.14);
  --up:        #2FBF71;
  --down:      #F05A6E;
  --blue:      #57A6F5;
  --violet:    #A78BFA;
  --grid:      #161C24;
  --shadow:    0 18px 50px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  --r:         10px;
  --r-sm:      7px;
  --i1:#57A6F5; --i2:#A78BFA; --i3:#2FBF71; --i4:#F05A6E; --i5:#E5A13B;
  --i6:#38BDF8; --i7:#F472B6; --i8:#A3E635; --i9:#FB923C; --i10:#2DD4BF;
  --vol:rgba(150,164,184,.45);
  /* Цвета действий на графике. Покупка, продажа и выход по стопу — три разные
     вещи, и красить их одинаково значит скрыть от человека главное: по стопу
     выходят не потому, что так решили, а потому, что сработала защита. */
  --act-buy:#2FBF71; --act-sell:#F05A6E; --act-stop:#E5A13B; --act-short:#A78BFA;
  --on-accent: #0B0D11;
  --mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:      -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg:#F5F7FA; --panel:#FFFFFF; --panel-2:#EEF1F6; --raise:#E6EAF1;
  --line:#DCE2EA; --line-soft:#E8ECF2; --text:#131922; --text-2:#4A5768;
  --muted:#7A8698; --grid:#EDF0F5;
  --accent:#A96A12; --accent-d:#8A5410; --accent-sf:rgba(169,106,18,.12);
  --up:#0E9F6E; --down:#DE3B4B;
  --shadow:0 16px 44px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.08);
  --i1:#2B7FD4; --i2:#7C5CFF; --i3:#0E9F6E; --i4:#DE3B4B; --i5:#C6802A;
  --i6:#0EA5E9; --i7:#EC4899; --i8:#65A30D; --i9:#F97316; --i10:#14B8A6;
  --vol:rgba(104,117,138,.45);
  --act-buy:#0E9F6E; --act-sell:#DE3B4B; --act-stop:#C6802A; --act-short:#7C5CFF;
  --on-accent: #FFFFFF;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 13px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  display: flex;                 /* слева меню, справа раздел */
  height: 100vh;
}
svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
      stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
button, input, select { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--raise); border-radius: 6px;
  border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ── верхняя панель ───────────────────────────────────────────── */
/* Высота панели задана не жёстким числом, а полем сверху и снизу плюс нижней
   границей: так воздух над содержимым и под ним есть всегда и по построению
   одинаковый. Жёсткие 56 пикселей держались, пока содержимое было ровно 36;
   стоило ему подрасти (плотность, крупный шрифт, ещё один ряд) — и панель
   резала его, прижимая к верхнему краю. Теперь в такой ситуации растёт сама
   панель, а min-height оставляет привычные 56, когда расти не нужно. */
.topbar {
  flex: 0 0 auto; min-height: 60px;
  display: flex; align-items: center; gap: 8px;
  padding: 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 9px; padding-right: 2px; }
.brand .mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(150deg, var(--accent), var(--accent-d));
  box-shadow: 0 2px 8px rgba(229,161,59,.35);
  position: relative;
}
.brand .mark::after {
  content: ""; position: absolute; inset: 5px 4px;
  border: 2px solid var(--bg); border-top: 0; border-radius: 0 0 2px 2px;
  clip-path: polygon(0 100%, 0 0, 50% 55%, 100% 0, 100% 100%);
}
.brand .name { font-weight: 650; letter-spacing: .2px; font-size: 14px; }
.brand .sym {
  font: 600 11px/1 var(--mono); letter-spacing: .06em;
  color: var(--muted); background: var(--panel-2);
  padding: 4px 7px; border-radius: 5px;
}
.sep { width: 1px; height: 26px; background: var(--line); flex: 0 0 auto; }
.spacer { flex: 1 1 auto; min-width: 8px; }
.group { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.btn {
  height: 34px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer; white-space: nowrap; color: var(--text-2);
  transition: background .13s, color .13s, border-color .13s, transform .06s;
}
.btn:hover { background: var(--panel-2); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn.icon { width: 34px; padding: 0; }
.btn.ghost { border-color: var(--line); }
.btn.on { background: var(--accent-sf); color: var(--accent); font-weight: 600; }
.btn.primary {
  background: var(--accent); color: var(--on-accent); font-weight: 650;
  border-color: var(--accent); padding: 0 15px;
}
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 82%, #fff); color: var(--on-accent); }
.btn.primary svg { stroke: none; fill: currentColor; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn.date {
  gap: 9px; padding: 0 12px; border: 1px solid var(--line);
  background: var(--panel-2); min-width: 190px; justify-content: flex-start;
  font-variant-numeric: tabular-nums;
}
.btn.date:hover { border-color: var(--accent); }
.btn.date .cal { color: var(--muted); }
.btn.date #dateLabel { color: var(--text); font-weight: 550; }
.btn.date .wd { color: var(--muted); font-size: 12px; margin-left: auto; }

.segmented {
  display: flex; align-items: center; gap: 2px;
  background: var(--panel-2); border-radius: var(--r-sm); padding: 3px;
  overflow-x: auto; scrollbar-width: none;
  /* Край растворяется, когда список не влез: так видно, что справа есть ещё,
     а не что кнопку обрезали. */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}
.segmented.full { -webkit-mask-image: none; mask-image: none; }
.segmented::-webkit-scrollbar { display: none; }
.segmented button {
  height: 28px; min-width: 38px; padding: 0 9px; border: 0; border-radius: 5px;
  background: transparent; color: var(--muted); cursor: pointer;
  font: 500 12px/1 var(--mono); transition: background .12s, color .12s;
}
.segmented button:hover { color: var(--text); }
.segmented button.on { background: var(--raise); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* Все поля считают ширину по рамке: иначе в узком контейнере select вылезает
   за край, и стрелку срезает — выглядит как сломанный список. */
.select, .input, .num, textarea.input { box-sizing: border-box; }
.select {
  height: 34px; padding: 0 28px 0 10px; border-radius: var(--r-sm);
  background: var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236F7B8C' stroke-width='1.7'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center/14px;
  border: 1px solid var(--line); cursor: pointer; appearance: none;
  min-width: 150px; max-width: 240px; text-overflow: ellipsis;
}
.select:hover { border-color: var(--accent); }
.select.tiny { height: 28px; min-width: 0; padding: 0 24px 0 8px; font-size: 12px; }
.input {
  height: 34px; padding: 0 11px; border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--line);
}
.input:focus { outline: none; border-color: var(--accent); }
.range .lbl { color: var(--muted); font-size: 12px; }

/* ── рабочая область ──────────────────────────────────────────── */
.workspace { flex: 1 1 auto; display: flex; min-height: 0; }
.chartwrap { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.panes { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; position: relative; }
.pane { position: relative; min-height: 70px; }
.pane.main { flex: 1 1 auto; }
.pane + .pane { border-top: 1px solid var(--line); }
#chart, .pane .pchart { position: absolute; inset: 0; }

.legend {
  position: absolute; left: 14px; top: 11px; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; gap: 3px;
  font: 12px/1.35 var(--mono); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px var(--bg);
}
.legend .l1 { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.legend .l1 b { font-weight: 650; letter-spacing: .3px; }
.legend .l1 .m { color: var(--muted); font-size: 11.5px; }
.legend .l2 { display: flex; gap: 12px; color: var(--muted); flex-wrap: wrap; }
.legend .l2 b { color: var(--text); font-weight: 500; }
.legend .up { color: var(--up); } .legend .down { color: var(--down); }

.loading { position: absolute; inset: 0; display: none; place-items: center;
  background: color-mix(in srgb, var(--bg) 55%, transparent); z-index: 8; }
.loading.on { display: grid; }
.loading span {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.statusbar {
  height: 28px; flex: 0 0 28px; display: flex; align-items: center; gap: 18px;
  padding: 0 14px; background: var(--panel); border-top: 1px solid var(--line);
  color: var(--muted); font: 11px/1 var(--mono); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden;
}
.statusbar .grow { flex: 1 1 auto; }

/* ── правая панель ────────────────────────────────────────────── */
.side {
  flex: 0 0 auto; width: 420px; min-width: 320px; max-width: 60vw;
  display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line);
}
.side.hidden { display: none; }
.side-head {
  height: 44px; flex: 0 0 44px; display: flex; align-items: center;
  padding: 0 8px 0 10px; border-bottom: 1px solid var(--line); gap: 6px;
}
.tabs { display: flex; gap: 2px; flex: 1 1 auto; }
.tab {
  height: 28px; padding: 0 11px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 12.5px;
  transition: background .12s, color .12s;
}
.tab:hover { color: var(--text); }
.tab.on { background: var(--accent-sf); color: var(--accent); font-weight: 600; }
.side-body { flex: 1 1 auto; overflow: auto; min-height: 0; }

.empty { padding: 48px 28px; text-align: center; color: var(--muted); }
.empty .ico { display: grid; place-items: center; margin-bottom: 14px; }
.empty .ico svg { width: 48px; height: 48px; stroke: var(--line); stroke-width: 2; }
.empty h3 { margin: 0 0 6px; font-size: 14px; color: var(--text); font-weight: 600; }
.empty p { margin: 0 0 18px; font-size: 12.5px; line-height: 1.6; }

.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); }
.metrics .m { background: var(--panel); padding: 10px 12px; }
.metrics .m span { display: block; color: var(--muted); font-size: 11px; letter-spacing: .02em; }
.metrics .m b {
  display: block; margin-top: 3px; font: 600 16px/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
}
.metrics .m b.pos { color: var(--up); } .metrics .m b.neg { color: var(--down); }
.metrics .m.wide { grid-column: span 2; }

.block-title {
  padding: 13px 12px 7px; color: var(--muted); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
}
.eq { padding: 6px 12px 14px; }
.eq canvas { width: 100%; height: 130px; display: block; }
.eq .cap { display: flex; justify-content: space-between; color: var(--muted);
  font: 11px/1 var(--mono); margin-bottom: 6px; }

table.grid { width: 100%; border-collapse: collapse; font: 11.5px/1.3 var(--mono);
  font-variant-numeric: tabular-nums; }
table.grid th {
  position: sticky; top: 0; z-index: 1; background: var(--panel-2); color: var(--muted);
  font-weight: 500; text-align: right; padding: 7px 8px; white-space: nowrap;
  border-bottom: 1px solid var(--line); cursor: pointer; user-select: none;
}
table.grid th:first-child, table.grid td:first-child { text-align: left; }
table.grid th.s::after { content: " ↓"; color: var(--accent); }
table.grid th.s.up::after { content: " ↑"; }
table.grid td { padding: 6px 8px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft); }
table.grid tbody tr { cursor: pointer; }
table.grid tbody tr:hover { background: var(--panel-2); }
table.grid tbody tr.on { background: var(--accent-sf); box-shadow: inset 2px 0 0 var(--accent); }
table.grid td.pos { color: var(--up); } table.grid td.neg { color: var(--down); }
td .tag {
  display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10.5px;
  background: var(--raise); color: var(--text-2);
}

/* ── всплывающие панели ───────────────────────────────────────── */
.pop {
  position: fixed; z-index: 60; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 10px;
}
.pop .row { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.pop .row.two { display: grid; grid-template-columns: 1fr 1fr; }
.pop .row label { display: flex; flex-direction: column; gap: 4px;
  color: var(--muted); font-size: 11px; }
.pop .row input[type=date] {
  height: 32px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--panel-2); padding: 0 8px; color: var(--text);
}
.pop-title { font-weight: 600; padding: 2px 4px 8px; }
.chip {
  height: 28px; padding: 0 11px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text-2); font-size: 12px;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on { background: var(--accent-sf); border-color: transparent; color: var(--accent); font-weight: 600; }
.chip.wide, .btn.wide { width: 100%; }
.grow { flex: 1 1 auto; }
.hint { color: var(--muted); font-size: 11.5px; }

.cal-pop { width: 302px; padding: 12px; }
.cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cal-title { display: flex; gap: 6px; flex: 1 1 auto; justify-content: center; }
.cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.cal-wd i { text-align: center; font-style: normal; font-size: 10.5px; color: var(--muted); }
.cal-wd i.we { color: color-mix(in srgb, var(--down) 60%, var(--muted)); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-grid button {
  height: 36px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  color: var(--text-2); font: 500 12.5px/1 var(--mono); position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: background .1s;
}
.cal-grid button .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.cal-grid button:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }
.cal-grid button:disabled { color: color-mix(in srgb, var(--muted) 45%, transparent); cursor: default; }
.cal-grid button.today { box-shadow: inset 0 0 0 1px var(--line); }
.cal-grid button.on { background: var(--accent); color: #0B0D11; font-weight: 700; }
.cal-grid button.on .dot { background: var(--on-accent); }
.cal-grid button.pos .dot { background: var(--up); }
.cal-grid button.neg .dot { background: var(--down); }
.cal-grid button.out { visibility: hidden; }
.cal-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--line-soft); }

/* ── модальные ────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(3px);
  animation: fade .12s ease-out;
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden;
}
.modal.wide .sheet { width: min(1240px, calc(100vw - 32px)); height: calc(100vh - 48px); }
.sheet header {
  display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.sheet header h2 { margin: 0; font-size: 15px; font-weight: 620; }
.sheet-body { flex: 1 1 auto; overflow: auto; padding: 14px 16px; min-height: 0; }
.sheet-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--line); flex: 0 0 auto; }
.modes { display: flex; gap: 2px; margin-left: 8px; }
.input.name { width: 220px; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--raise); border: 1px solid var(--line); color: var(--text);
  padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow); z-index: 90;
  font-size: 13px; animation: rise .16s ease-out;
}
.toast.err { border-color: var(--down); color: var(--down); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ── конструктор ──────────────────────────────────────────────── */
.editor .sheet-body { padding: 0; display: flex; }
#builderBody { display: flex; padding: 0; }
.ed-nav {
  width: 232px; flex: 0 0 232px; border-right: 1px solid var(--line);
  overflow: auto; padding: 10px 8px; background: var(--panel-2);
}
.ed-nav .grp { color: var(--muted); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: 12px 8px 5px; }
.ed-nav button {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 9px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--text-2); font-size: 12.5px;
}
.ed-nav button:hover { background: var(--panel); color: var(--text); }
.ed-nav button.on { background: var(--accent-sf); color: var(--accent); font-weight: 600; }
.ed-nav button .sw {
  width: 8px; height: 8px; border-radius: 3px; background: var(--line); flex: 0 0 auto;
}
.ed-nav button.act .sw { background: var(--up); box-shadow: 0 0 6px rgba(47,191,113,.6); }
.ed-main { flex: 1 1 auto; overflow: auto; padding: 18px 22px; min-width: 0; }
.ed-main h3 { margin: 0 0 4px; font-size: 15px; font-weight: 620; }
.ed-main .desc { color: var(--muted); font-size: 12.5px; line-height: 1.65; margin: 0 0 16px;
  max-width: 70ch; }
.field {
  display: flex; align-items: center; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.field .fl { flex: 1 1 auto; min-width: 0; }
.field .fl b { display: block; font-weight: 500; font-size: 12.5px; }
.field .fl i { display: block; font-style: normal; color: var(--muted);
  font-size: 11.5px; line-height: 1.5; margin-top: 2px; }
.field .fv { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.num {
  width: 92px; height: 30px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--panel-2); padding: 0 9px; text-align: right;
  font: 12.5px/1 var(--mono); font-variant-numeric: tabular-nums;
}
.num:focus { outline: none; border-color: var(--accent); }
.num.wide { width: 150px; text-align: left; }
.unit { color: var(--muted); font-size: 11.5px; width: 26px; }
.sw-toggle {
  width: 38px; height: 22px; border-radius: 11px; background: var(--raise);
  border: 0; position: relative; cursor: pointer; transition: background .15s; flex: 0 0 auto;
}
.sw-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s;
}
.sw-toggle.on { background: color-mix(in srgb, var(--up) 35%, transparent); }
.sw-toggle.on::after { transform: translateX(16px); background: var(--up); }
.lots { display: grid; gap: 6px; margin: 6px 0 2px; }
.lots .lot { display: grid; grid-template-columns: 44px 1fr 1fr 1fr; gap: 8px; align-items: center; }
.lots .lot .tag { color: var(--muted); font: 11px/1 var(--mono); }
.lots .hd { color: var(--muted); font-size: 11px; }
.codearea {
  width: 100%; min-height: 60vh; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); padding: 14px;
  font: 12.5px/1.6 var(--mono); resize: vertical; tab-size: 2;
}
.codearea:focus { outline: none; border-color: var(--accent); }

@media (max-width: 1100px) {
  .side { width: 340px; }
  .brand .name { display: none; }
}
@media (max-width: 820px) {
  .side { position: fixed; right: 0; top: 56px; bottom: 0; width: min(420px, 100vw); z-index: 30; }
  .segmented { max-width: 34vw; }
}

/* ── панели индикаторов ───────────────────────────────────────── */
.pane.sub { flex: 0 0 auto; min-height: 60px; background: var(--bg); }
.pane.sub .pchart { position: absolute; inset: 0; }
.pane.sub .pres {
  position: absolute; left: 0; right: 0; top: -3px; height: 7px;
  cursor: row-resize; z-index: 6; touch-action: none;
}
.pane.sub .pres:hover { background: var(--accent); opacity: .3; }
.pane.sub .plab {
  position: absolute; left: 14px; top: 6px; z-index: 4; pointer-events: none;
  display: flex; gap: 8px; align-items: baseline; white-space: nowrap;
  font: 11px/1 var(--mono); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px var(--bg);
}
.pane.sub .plab .nm { color: var(--muted); }
.pane.sub .pbtns {
  position: absolute; right: 8px; top: 5px; z-index: 5; display: flex; gap: 3px;
  opacity: 0; transition: opacity .12s;
}
.pane.sub:hover .pbtns { opacity: 1; }
.pane.sub .pbtns button {
  width: 22px; height: 20px; border: 0; border-radius: 5px; cursor: pointer;
  background: var(--panel-2); color: var(--muted); font-size: 11px; line-height: 1;
}
.pane.sub .pbtns button:hover { background: var(--accent-sf); color: var(--accent); }

/* ── менеджер индикаторов ─────────────────────────────────────── */
.ilist { display: flex; flex-direction: column; gap: 5px; }
.iitem {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2);
}
.iitem.off { opacity: .45; }
.iitem .sw { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.iitem .tt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12.5px; }
.iitem .tt small { color: var(--muted); font: 11px/1 var(--mono); margin-left: 7px; }
.iitem .pn { color: var(--muted); font: 11px/1 var(--mono); }
.iitem button {
  width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; flex: 0 0 auto;
}
.iitem button:hover { background: var(--panel); color: var(--accent); }
.iempty {
  padding: 22px 16px; text-align: center; color: var(--muted); font-size: 12.5px;
  line-height: 1.6; border: 1px dashed var(--line); border-radius: 10px;
}
.srch {
  width: 100%; height: 36px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel-2); padding: 0 12px; margin-bottom: 10px;
}
.srch:focus { outline: none; border-color: var(--accent); }
.cats { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.cgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 7px;
  max-height: 52vh; overflow: auto; padding-right: 3px;
}
.citem {
  text-align: left; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel-2); cursor: pointer; line-height: 1.45;
}
.citem:hover { border-color: var(--accent); background: var(--accent-sf); }
.citem b { display: block; font-size: 12.5px; font-weight: 600; }
.citem span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.prog { height: 4px; border-radius: 2px; background: var(--panel-2); overflow: hidden; margin: 10px 0; }
.prog i { display: block; height: 100%; width: 0; background: var(--accent);
  transition: width .15s linear; }

/* ── конструктор правил ──────────────────────────────────────────────────── */
.rules-wrap { flex: 1 1 auto; overflow: auto; padding: 18px 22px 40px; min-width: 0; }
.rules-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.rules-head h3 { margin: 0 0 4px; font-size: 15px; font-weight: 620; }
.rules-head .desc { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin: 0; max-width: 74ch; }
.rules-btns { flex: 0 0 auto; display: flex; gap: 8px; }

.empty-rules {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 40px 20px; border: 1px dashed var(--line); border-radius: 12px;
  color: var(--muted); margin-bottom: 16px;
}
.empty-rules b { color: var(--text); font-size: 14px; font-weight: 600; }
.empty-rules span { font-size: 12.5px; }
.empty-rules .btn { margin-top: 6px; }

.rule {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  margin-bottom: 14px; overflow: hidden;
}
.rule.off { opacity: .5; }
.rule .rhead {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--raise); border-bottom: 1px solid var(--line);
}
.rule .rname {
  flex: 0 1 auto; min-width: 160px; height: 28px; border: 1px solid transparent;
  background: transparent; color: var(--text); font-size: 13px; font-weight: 600;
  border-radius: 6px; padding: 0 8px;
}
.rule .rname:hover { border-color: var(--line); }
.rule .rname:focus { outline: none; border-color: var(--accent); background: var(--panel-2); }
.rule .rbody { padding: 4px 12px 10px; }
.rsec { padding: 8px 0; }
.rlab {
  color: var(--muted); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 6px; font-weight: 600;
}
.rrows { display: flex; flex-direction: column; gap: 6px; }
.rnote { color: var(--muted); font-size: 12px; padding: 4px 2px; }
.cond, .act {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: 9px; padding: 7px 9px;
}
.cond .opd {
  height: 30px; padding: 0 12px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--raise); color: var(--text);
  font-size: 12.5px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cond .opd:hover { border-color: var(--accent); color: var(--accent); }
.select.op { min-width: 170px; }
.act .act-sel { min-width: 250px; }
.logic {
  align-self: flex-start; margin-left: 12px; height: 22px; padding: 0 12px;
  border-radius: 11px; border: 1px solid var(--line); background: var(--raise);
  color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; letter-spacing: .06em;
}
.logic:hover { color: var(--accent); border-color: var(--accent); }
.chip.add { margin-top: 8px; }
.rfoot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 0 2px; border-top: 1px solid var(--line-soft);
  color: var(--muted); font-size: 12px;
}
.rsent {
  padding: 9px 14px; background: var(--accent-sf); color: var(--accent);
  font-size: 12.5px; line-height: 1.55; border-top: 1px solid var(--line);
}

/* выбор операнда */
.op-modal .op-body { display: flex; padding: 0; }
.op-nav {
  flex: 0 0 150px; border-right: 1px solid var(--line); padding: 10px 8px;
  display: flex; flex-direction: column; gap: 2px; background: var(--panel-2);
}
.op-nav button {
  text-align: left; height: 32px; padding: 0 10px; border-radius: 7px; border: 0;
  background: transparent; color: var(--muted); font-size: 12.5px; cursor: pointer;
}
.op-nav button:hover { background: var(--panel); color: var(--text); }
.op-nav button.on { background: var(--accent-sf); color: var(--accent); font-weight: 600; }
.op-main { flex: 1 1 auto; padding: 16px 18px; overflow: auto; max-height: 62vh; }
.op-main h3 { margin: 0 0 4px; font-size: 14px; }
.op-main .desc { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin: 0 0 12px; }
.ind-pick { margin-bottom: 12px; }
.ind-pick .input { width: 100%; margin-bottom: 8px; }
.ind-list {
  max-height: 190px; overflow: auto; border: 1px solid var(--line); border-radius: 9px;
  padding: 6px; display: flex; flex-direction: column; gap: 1px; background: var(--panel-2);
}
.ind-list .grp {
  color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 6px 3px;
}
.ind-it {
  text-align: left; border: 0; background: transparent; color: var(--text);
  font-size: 12.5px; padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.ind-it:hover { background: var(--raise); }
.ind-it.on { background: var(--accent-sf); color: var(--accent); font-weight: 600; }

.tpl-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpl {
  text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  background: var(--panel-2); cursor: pointer; color: var(--text);
}
.tpl:hover { border-color: var(--accent); }
.tpl b { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.tpl i { display: block; font-style: normal; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.ind-cfg .fl b { display: block; font-size: 12.5px; font-weight: 600; }
.ind-cfg .fl i { display: block; font-style: normal; color: var(--muted);
  font-size: 11.5px; line-height: 1.5; margin-top: 3px; }
/* Таблица сделок шире панели — пусть прокручивается, а не обрезается. */
.tbl { overflow-x: auto; }
.tbl table.grid { min-width: 560px; }
/* Ручка для растягивания панели результатов. */
.side { position: relative; }
.side-grip {
  position: absolute; left: -3px; top: 0; bottom: 0; width: 7px;
  cursor: col-resize; z-index: 5;
}
.side-grip:hover { background: linear-gradient(90deg, transparent, var(--accent-sf)); }
/* Сколько раз сработало правило в последнем прогоне. */
.rfire {
  font-size: 11px; color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent);
  padding: 3px 9px; border-radius: 10px; white-space: nowrap;
}
.rfire.zero { color: var(--muted); background: var(--raise); }

/* ── оболочка: левое меню и разделы ──────────────────────────────────────── */
.rail {
  flex: 0 0 74px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 0 12px; background: var(--panel-2); border-right: 1px solid var(--line);
  z-index: 40;
}
.rail-brand {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  margin-bottom: 10px;
}
.rail-brand .mark { width: 22px; height: 22px; }
.rail-btn {
  width: 62px; padding: 9px 0 7px; border: 0; border-radius: 12px; background: transparent;
  color: var(--muted); cursor: pointer; display: grid; justify-items: center; gap: 4px;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
.rail-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.rail-btn i { font-style: normal; font-size: 10px; letter-spacing: .01em; }
.rail-btn:hover { background: var(--panel); color: var(--text); }
.rail-btn:active { transform: scale(.95); }
.rail-btn.on { background: var(--accent-sf); color: var(--accent); }
.rail-gap { flex: 1 1 auto; }

.shell { flex: 1 1 auto; min-width: 0; position: relative; display: flex; }
/* Разделы не подменяются рывком: старый уходит, новый приезжает. Все они
   лежат друг на друге и всегда имеют настоящий размер — поэтому холст схемы
   и график знают свою ширину даже до того, как их показали. */
.view {
  position: absolute; inset: 0; display: flex; flex-direction: column; min-width: 0;
  background: var(--bg); opacity: 0; pointer-events: none; z-index: 1;
  transform: translateY(8px) scale(.995); transform-origin: 50% 0;
  transition: opacity .17s ease, transform .24s cubic-bezier(.22,.9,.3,1);
}
.view.on { opacity: 1; pointer-events: auto; transform: none; z-index: 2; }
/* содержимое въезжает чуть позже шапки — получается «разворачивание», а не сдвиг */
.view .vbody, .view .workspace { transition: opacity .2s ease .04s, transform .26s cubic-bezier(.22,.9,.3,1) .04s; }
.view:not(.on) .vbody, .view:not(.on) .workspace { opacity: 0; transform: translateY(6px); }

.vhead {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.vhead h1 { margin: 0; font-size: 16px; font-weight: 640; letter-spacing: -.01em; }
.vbody { flex: 1 1 auto; overflow: auto; min-height: 0; display: flex; }
.vfoot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 20px;
  border-top: 1px solid var(--line); background: var(--panel);
}
/* Отступ вокруг верхней панели.
   Четыре раза подряд претензия была одна: содержимое панели висит вплотную к
   верхнему краю окна. Внутреннего поля для этого мало — сколько его ни ставь,
   сама панель всё равно начинается в нулевой точке страницы, и глаз читает
   именно это. Поэтому панель отодвинута от края окна и стала отдельной
   карточкой: над содержимым теперь и внешний отступ, и внутреннее поле. */
#view-chart .topbar {
  margin: 10px 10px 0; border-radius: var(--r);
  border: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
#view-chart .workspace { padding: 8px 10px 10px; gap: 8px; }
#view-chart .chartwrap, #view-chart .side {
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
#view-chart .side { border-left: 1px solid var(--line); }
#view-chart .side.full { inset: 8px 10px 10px; }

/* заглушка раздела, которому нужен источник данных */
.soon {
  margin: auto; max-width: 620px; padding: 40px 28px; text-align: center; color: var(--muted);
}
.soon h2 { color: var(--text); font-size: 17px; margin: 0 0 8px; }
.soon p { font-size: 13px; line-height: 1.7; margin: 0 0 6px; }
.soon .tag { display: inline-block; margin-top: 14px; }

/* ── плавность ───────────────────────────────────────────────────────────── */
.btn, .chip, .tab, .select, .num, .input { transition: background .15s ease, border-color .15s ease,
  color .15s ease, transform .1s ease; }
.btn:active, .chip:active { transform: translateY(1px); }
.rule { animation: cardIn .2s cubic-bezier(.22,.9,.3,1); }
@keyframes cardIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.modal .sheet { animation: sheetIn .18s cubic-bezier(.22,.9,.3,1); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
/* появление содержимого разделов: карточки, строки таблиц, метрики */
.card, .kpis > div, .mk-body > *, .plan { animation: cardIn .24s cubic-bezier(.22,.9,.3,1) both; }
.mk-body > *:nth-child(2) { animation-delay: .03s; }
.mk-body > *:nth-child(3) { animation-delay: .06s; }
.mk-body > *:nth-child(4) { animation-delay: .09s; }
.mk-body > *:nth-child(n+5) { animation-delay: .12s; }
table.grid tbody tr { transition: background .12s ease; }
.side-body > * { animation: cardIn .22s cubic-bezier(.22,.9,.3,1) both; }
/* Узлы не анимируем: холст перерисовывается на каждый клик, и анимация
   появления заставляла бы всю схему мигать при любой правке. */
.toast { transition: opacity .18s ease, transform .2s cubic-bezier(.22,.9,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .view, .rule, .modal .sheet, .card, .kpis > div, .mk-body > *, .plan,
  .side-body > * { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* ── индикация занятости ─────────────────────────────────────────────────── */
/* Тонкая полоса поверх всего: пока она бежит, программа занята. */
.topline {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  background: transparent; overflow: hidden;
}
.topline i {
  display: block; height: 100%; width: 32%; background: var(--accent);
  animation: topline 1s ease-in-out infinite;
}
@keyframes topline { 0% { margin-left: -34%; } 100% { margin-left: 102%; } }

.btn.busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px;
  border-radius: 50%; border: 2px solid rgba(0,0,0,.25); border-top-color: #000;
  animation: spin .7s linear infinite;
}
.loading span { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent); }
.loading .what {
  position: absolute; top: calc(50% + 26px); left: 0; right: 0; text-align: center;
  color: var(--muted); font-size: 12px;
}

/* перетаскивание правил */
.rgrip {
  cursor: grab; color: var(--muted); font-size: 15px; letter-spacing: -2px;
  padding: 0 4px; user-select: none; touch-action: none;
}
.rgrip:hover { color: var(--accent); }
.rgrip:active { cursor: grabbing; }
.rule.dragging { opacity: .85; box-shadow: var(--shadow); position: relative; z-index: 20; }
.drop-mark {
  height: 3px; border-radius: 2px; background: var(--accent); margin: 5px 0;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Узкое окно разбирает не панель, а ряд пунктов внутри неё (.topbar-items):
   прокрутка живёт там. Сама панель прокруткой быть не должна — у области
   прокрутки нельзя уехать выше нулевой отметки, поэтому любое содержимое,
   которому не хватило высоты, у неё не просто обрезается, а намертво
   прижимается к верхней границе. Ровно так и выглядела жалоба. */
.topbar { overflow: visible; }
.topbar > * { flex-shrink: 0; }
.topbar .spacer { flex: 1 1 auto; min-width: 8px; }
@media (max-width: 1400px) {
  .topbar .brand .name { display: none; }
  .segmented button { padding: 0 8px; }
}

/* свёрнутое правило — одна строка: так их видно десяток разом и удобно тащить */
.rfold {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 11px; padding: 2px 4px; border-radius: 4px;
}
.rfold:hover { color: var(--accent); background: var(--panel-2); }
.rule.fold .rbody { display: none; }
.rule.fold .rsent { border-top: 0; }
.rule .rbody { animation: bodyIn .16s ease; }
@keyframes bodyIn { from { opacity: 0; } to { opacity: 1; } }

/* ── вкладка «Код» ───────────────────────────────────────────────────────── */
.code-view { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; padding: 14px 18px 0; }
.code-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.code-head b { font-size: 13px; }
.code-head .desc { color: var(--muted); font-size: 12px; max-width: 60ch; }
.code-state { font-size: 12px; font-family: var(--mono); }
.code-state.ok { color: var(--up); }
.code-state.bad { color: var(--down); }

.code-wrap {
  position: relative; flex: 1 1 auto; min-height: 0; display: flex;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);
  overflow: hidden;
}
.code-gutter {
  flex: 0 0 52px; overflow: hidden; padding: 12px 8px 12px 0; text-align: right;
  color: var(--muted); font: 12.5px/1.6 var(--mono); background: var(--panel);
  border-right: 1px solid var(--line); user-select: none;
}
.code-gutter i { display: block; font-style: normal; }
.code-gutter i.bad { color: var(--down); font-weight: 700; }
/* Два слоя лежат друг на друге: видимый с подсветкой и прозрачная textarea с
   кареткой. Совпадать они обязаны посимвольно, поэтому здесь запрещено всё,
   что меняет ширину глифа. Лигатуры — главный виновник: в JetBrains Mono
   «>=» склеивается в один знак, а подсветка рвёт его на два span, и каретка
   уезжает на пол-буквы. Жирность по той же причине запрещена: у жирного
   начертания другая ширина. */
/* Текст подсветки лежит в <code> внутри <pre>. У браузера на <code> своё
   правило font-family: monospace — оно перебивает шрифт родителя, и слой
   подсветки начинает рисоваться другим шрифтом, чем textarea. Отсюда и
   каретка посреди буквы. Поэтому шрифт задаётся и самому <code> тоже. */
.code-hl, .code-hl code, .code-hl span, .code-area {
  margin: 0; padding: 0; font: 12.5px/1.6 var(--mono);
  white-space: pre; tab-size: 2;
  font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
  font-kerning: none; letter-spacing: 0; text-rendering: optimizeSpeed;
}
.code-hl *, .code-area { font-weight: 400; font-style: normal; }
.code-hl {
  position: absolute; inset: 0 0 0 52px; overflow: auto; pointer-events: none;
  color: var(--text); padding: 12px 14px;
}
.code-hl code { display: block; }
.code-area {
  position: absolute; inset: 0 0 0 52px; width: calc(100% - 52px); height: 100%;
  border: 0; resize: none; background: transparent; color: transparent;
  caret-color: var(--accent); outline: none; overflow: auto;
  padding: 12px 14px;
}
.code-area::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.code-hl .bad { display: block; background: color-mix(in srgb, var(--down) 13%, transparent); }
.c-key { color: var(--accent); }
.c-act { color: var(--i2, #6ea8fe); }
.c-flow { color: var(--muted); }
.c-op  { color: var(--i5, #c48cff); }
.c-ind { color: var(--i1, #5fd3a6); }
.c-var { color: var(--i9, #e08f5a); }
.c-num { color: var(--up); }
.c-str { color: var(--text); }
.c-com { color: var(--muted); }
.c-id  { color: var(--text-2, var(--text)); }

.code-errs { flex: 0 0 auto; max-height: 26vh; overflow: auto; padding: 10px 0 14px; }
.code-errs .err {
  display: flex; gap: 8px; padding: 6px 10px; border-radius: 7px; cursor: pointer;
  font-size: 12.5px; color: var(--down); background: color-mix(in srgb, var(--down) 10%, transparent);
  margin-bottom: 5px;
}
.code-errs .err b { color: var(--text); font-weight: 600; }
.code-errs .err:hover { background: color-mix(in srgb, var(--down) 18%, transparent); }

/* ── новости, активы, тарифы ─────────────────────────────────────────────── */
.mk { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.mk-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}
.mk-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.mk-body { flex: 1 1 auto; overflow: auto; padding: 16px 20px 40px; }
.mk-load { display: grid; place-items: center; padding: 60px 0; }
.mk-load span {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
.mk-err {
  border: 1px solid color-mix(in srgb, var(--down) 40%, var(--line));
  background: color-mix(in srgb, var(--down) 8%, transparent);
  border-radius: 10px; padding: 14px 16px; display: grid; gap: 4px; margin-bottom: 14px;
}
.mk-err b { color: var(--down); }
.mk-err span { color: var(--muted); font-size: 12.5px; }

.news {
  display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.news .pic {
  flex: 0 0 118px; height: 78px; border-radius: 9px; background: var(--panel-2) center/cover;
}
.news .txt { min-width: 0; }
.news .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.news .pub { color: var(--text); font-size: 11.5px; font-weight: 600; }
.news .ago, .news .tk { color: var(--muted); font-size: 11.5px; }
.news .tk { background: var(--raise); padding: 1px 6px; border-radius: 4px; font-family: var(--mono); }
.news .sent { font-size: 11px; padding: 1px 7px; border-radius: 4px; background: var(--raise); color: var(--muted); }
.news .sent.pos { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.news .sent.neg { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
.news .ttl { display: block; color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1.4; }
.news .ttl:hover { color: var(--accent); }
.news .sum { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin: 5px 0 0; }
.news .impact { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.news .impact .lbl { color: var(--muted); font-size: 11px; font-style: normal; }
.news .mv { display: inline-flex; gap: 5px; align-items: baseline; font-family: var(--mono); font-size: 12px; }
.news .mv i { color: var(--muted); font-style: normal; font-size: 11px; }

.card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin-bottom: 16px; }
.card-h { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.card-h b { font-size: 14px; }
.card-h span { color: var(--muted); font-size: 12px; }
.card-h a { color: var(--accent); font-size: 12px; }
.card .kv { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 16px; }
.card .kv i { display: block; color: var(--muted); font-style: normal; font-size: 11.5px; }
.card .kv b { font-size: 13px; font-family: var(--mono); }
.card .desc { color: var(--muted); font-size: 12.5px; line-height: 1.6; padding: 0 16px 14px; margin: 0; }
.card .tbl { padding: 0 8px 10px; }
table.fin th.lab { text-align: left; color: var(--muted); font-weight: 500; }
table.fin td i { display: block; font-style: normal; font-size: 10.5px; }
td.muted, .muted { color: var(--muted); }
.pos-add { display: flex; gap: 8px; align-items: center; padding: 10px 16px 14px; flex-wrap: wrap; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; padding: 20px; }
.plan { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--panel); }
.plan.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.plan .pn { font-size: 15px; font-weight: 650; }
.plan .pp { color: var(--accent); font-size: 13px; margin: 4px 0 8px; font-family: var(--mono); }
.plan .pd { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.plan ul { list-style: none; padding: 0; margin: 12px 0 16px; display: grid; gap: 6px; }
.plan li { color: var(--text-2, var(--text)); font-size: 12.5px; padding-left: 18px; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--up); }

/* ── тесты ───────────────────────────────────────────────────────────────── */
.tests .card { max-width: 1100px; }
.test-body:empty { display: none; }
.test-body { padding: 4px 16px 14px; }
.test-note { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin: 10px 0; max-width: 78ch; }
.test-sub { color: var(--muted); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  margin: 16px 0 8px; }
.test-foot { color: var(--muted); font-size: 11.5px; padding-top: 8px; }
.kpis { display: flex; flex-wrap: wrap; gap: 22px; padding: 12px 0 6px; }
.kpis i { display: block; color: var(--muted); font-style: normal; font-size: 11.5px; }
.kpis b { font-family: var(--mono); font-size: 15px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 92px; padding: 6px 0 18px;
  border-bottom: 1px solid var(--line-soft); }
.bars.wide { gap: 2px; height: 110px; }
.bars .b { flex: 1 1 0; min-width: 3px; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.bars .b i { width: 100%; border-radius: 2px; background: var(--muted); min-height: 2px; }
.bars .b i.pos { background: var(--up); }
.bars .b i.neg { background: var(--down); }
.bars .b span { position: absolute; bottom: -16px; font-size: 10px; color: var(--muted);
  font-family: var(--mono); }
.bars .b { max-width: 90px; }

/* ── схема стратегии ─────────────────────────────────────────────────────── */
.gr { flex: 1 1 auto; display: flex; min-width: 0; min-height: 0; }
.gr-pal {
  flex: 0 0 214px; border-right: 1px solid var(--line); background: var(--panel-2);
  padding: 12px 10px; overflow: hidden; display: flex; flex-direction: column;
}
.pal-h { font-size: 13px; font-weight: 650; margin-bottom: 8px; }
.pal-s { width: 100%; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--panel); color: var(--text); padding: 0 9px; font: inherit; font-size: 12px;
  margin-bottom: 8px; }
.pal-s:focus { outline: none; border-color: var(--accent); }
.pal-list { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0 -4px; padding: 0 4px; }
.pal-g { color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  margin: 12px 0 6px; }
.pal-b {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left;
  padding: 7px 9px; margin-bottom: 3px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--text); font-size: 12.5px; cursor: grab;
  transition: border-color .15s, transform .12s;
}
.pal-b:hover { border-color: var(--accent); transform: translateX(2px); }
.pal-b i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; margin-top: 4px; }
.pal-b span { min-width: 0; }
.pal-b b { display: block; font-weight: 560; }
.pal-b em { display: block; font-style: normal; color: var(--muted); font-size: 10.5px;
  line-height: 1.45; margin-top: 1px; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pal-note { color: var(--muted); font-size: 11.5px; line-height: 1.6; margin-top: 14px; }

.gr-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.gr-tools { display: flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-bottom: 1px solid var(--line); background: var(--panel); flex: 0 0 auto; }
.gr-tools .sep { width: 1px; height: 16px; background: var(--line); margin: 0 4px; }
.gr-tools .zoom { color: var(--muted); font-size: 11.5px; font-family: var(--mono);
  min-width: 46px; text-align: center; }
.gr-tools .gr-hint { color: var(--accent); font-size: 11.5px; }

.gr-canvas {
  flex: 1 1 auto; position: relative; overflow: hidden; cursor: grab; background: var(--bg);
}
.gr-canvas.grid {
  background:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0/22px 22px,
    var(--bg);
}
/* Связи лежат под узлами: их толстая мишень для щелчка не должна перекрывать
   гнёзда и поля. В пустом месте между блоками связь всё равно ловится. */
/* Связи — под блоками. Толстая невидимая полоса, за которую линию хватают,
   иначе накрывала гнёзда: у гнезда, от которого уже идёт связь, нельзя было
   начать вторую — попадание доставалось линии. */
.gr-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.gr-wires path { fill: none; stroke-width: 2; opacity: .85; }
/* Порядок наложения блоков задаётся из кода (graph.js, raise): у каждого узла
   свой z-index, поэтому правил на :hover и .sel здесь нет — они бы не работали. */
/* Слой блоков лежит поверх связей, иначе линия накрывала бы гнёзда. Но сам
   слой растянут на весь холст, и без этого он съедал бы все нажатия по пустому
   месту — в том числе щелчок по связи, которым её обрывают. Ловят нажатия
   только сами блоки. */
.gr-nodes { position: absolute; inset: 0; transform-origin: 0 0; z-index: 3;
  pointer-events: none; }
.gr-nodes > .gr-node { pointer-events: auto; }

.gr-quick { position: absolute; z-index: 20; width: 264px; max-height: 260px; overflow: auto;
  overscroll-behavior: contain;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 6px; }
.gr-quick .q-h { color: var(--muted); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 8px 6px; }
.gr-quick button { display: flex; align-items: baseline; gap: 7px; width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--text); font: inherit; font-size: 12.5px;
  padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.gr-quick button:hover { background: var(--accent-sf); }
.gr-quick button i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.gr-quick button em { font-style: normal; color: var(--muted); font-size: 10.5px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.gr-node {
  position: absolute; background: var(--panel); border: 1px solid var(--line);
  border-radius: 11px; box-shadow: 0 6px 18px rgba(0,0,0,.28); z-index: 3;
  transition: border-color .15s, box-shadow .15s;
}
.gr-node:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.gr-node.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(0,0,0,.35); }
.gr-node.bad { border-color: color-mix(in srgb, var(--down) 55%, var(--line)); }
.gn-h {
  display: flex; align-items: center; gap: 6px; padding: 5px 9px; cursor: grab;
  user-select: none; -webkit-user-select: none;
  border-bottom: 1px solid var(--line); background: var(--raise);
  border-radius: 10px 10px 0 0; font-size: 12.5px;
}
.gn-h .warn { font-style: normal; color: var(--down); font-weight: 700; font-size: 12px; }
.gn-h .x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.gn-h .x:hover { color: var(--down); }
.gn-b { padding: 6px 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.gn-b:empty { display: none; }
.gn-b .num { width: 68px; }
.gn-b .input, .gn-b .select { width: 100%; }
.gn-b .area { min-height: 56px; resize: vertical; padding: 6px 8px; }
.gn-chk { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
/* Строка с гнездом торчит на 16 пикселей за край блока — это нужно, чтобы
   кружок висел снаружи. Но сама строка при этом перекрывает соседний блок и
   съедает клики по его шапке. Поэтому строка кликов не ловит: их ловят только
   кружок и подпись. */
.gr-node .row { display: flex; align-items: center; gap: 8px; padding: 4px 8px;
  min-height: 20px; pointer-events: none; }
.gr-node .row > * { pointer-events: auto; }
.gr-node .row .grow { pointer-events: none; }
.gr-node .row label { color: var(--muted); font-size: 11px; }
.gr-node .row.out { padding-bottom: 8px; }
.port {
  position: relative;
  width: 12px; height: 12px; border-radius: 50%; background: var(--panel-2);
  border: 2px solid var(--c, var(--muted)); cursor: crosshair; flex: 0 0 auto;
  margin-left: -16px; touch-action: none; transition: transform .1s, box-shadow .15s;
}
/* Мишень больше кружка, но не настолько, чтобы залезть на соседнее гнездо:
   когда у блока несколько входов подряд, перекрытые мишени делают попадание
   случайным. Прощение даёт примагничивание при отпускании, а не халат. */
.port::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
.port.pout { margin-left: 0; margin-right: -16px; }
.port.on { background: var(--c, var(--accent)); }
.port:hover { background: var(--c, var(--accent)); transform: scale(1.35); }
.port.arm { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 32%, transparent);
  background: var(--c, var(--accent)); transform: scale(1.3); }
.port.dim { opacity: .28; }
/* Пока тянется связь, браузер не должен выделять текст под курсором. */
.gr-canvas.wiring, .gr-canvas.wiring * { user-select: none; -webkit-user-select: none; }

.k-rule { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.k-act .gn-h { background: color-mix(in srgb, var(--accent) 12%, var(--raise)); }
.k-note { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }

/* нижняя панель: инспектор, проблемы, пересказ */
.gr-bottom { flex: 0 0 auto; height: 232px; border-top: 1px solid var(--line);
  background: var(--panel); display: flex; flex-direction: column; min-height: 0;
  transition: height .18s cubic-bezier(.22,.9,.3,1); }
.gr-bottom.fold { height: 38px; }
.gb-tabs { display: flex; align-items: center; gap: 2px; padding: 4px 10px; flex: 0 0 auto;
  border-bottom: 1px solid var(--line-soft); }
.gb-tabs .tab i { font-style: normal; display: inline-block; min-width: 16px; padding: 0 4px;
  margin-left: 4px; border-radius: 8px; background: var(--panel-2); font-size: 10.5px; }
.gb-tabs .tab i:empty { display: none; }
.gb-tabs .tab i.bad { background: var(--down); color: #fff; }
.gb-body { flex: 1 1 auto; overflow: auto; padding: 10px 14px 14px; min-height: 0; }
.gr-bottom.fold .gb-body { display: none; }
.gb-empty { color: var(--muted); font-size: 12.5px; line-height: 1.65; max-width: 80ch; padding: 6px 0; }
.gb-empty.ok { color: var(--up); }
.gi-h b { font-size: 13px; }
.gi-h span { display: block; color: var(--muted); font-size: 11.5px; margin: 2px 0 10px;
  line-height: 1.55; max-width: 80ch; }
.gi-f { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.gi-f label { display: flex; flex-direction: column; gap: 4px; }
.gi-f label.wide { min-width: 200px; }
.gi-f .cn-slot { min-width: 200px; }
.gi-f label i { font-style: normal; color: var(--muted); font-size: 10.5px; }
.gi-f .num { width: 110px; }
.gi-f .input { width: 190px; }
.gi-a { display: flex; gap: 6px; margin-top: 12px; }
.gb-probs { display: flex; flex-direction: column; gap: 6px; }
.gp { border-left: 2px solid var(--line); padding: 5px 0 5px 10px; cursor: default; }
.gp em { font-style: normal; color: var(--accent); font-size: 11px; cursor: pointer; }
.gp[data-p] em:hover { text-decoration: underline; }
.gp.stop { border-left-color: var(--down); }
.gp.conflict { border-left-color: var(--accent); }
.gp.note { border-left-color: var(--muted); }
.gp b { font-size: 12.5px; }
.gp span { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.55; max-width: 90ch; }
.gb-words { display: flex; flex-direction: column; gap: 8px; }
.gw b { font-size: 12.5px; }
.gw span { display: block; color: var(--text-2); font-size: 12px; line-height: 1.6; max-width: 100ch; }

/* ── полоска текущей стратегии в шапке ───────────────────────── */
.stratbar { display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 0 10px; height: 34px; border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--line-soft);
  max-width: 34vw; overflow: hidden; }
.stratbar b { font-size: 12.5px; font-weight: 620; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 16ch; }
.stratbar > span { color: var(--muted); font-size: 11.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.lint { border: 0; cursor: pointer; font: inherit; font-size: 11px; line-height: 1;
  padding: 5px 8px; border-radius: 999px; white-space: nowrap; max-width: 24ch;
  overflow: hidden; text-overflow: ellipsis; transition: filter .15s ease; }
.lint:hover { filter: brightness(1.15); }
.lint.stop { background: color-mix(in srgb, var(--down) 20%, transparent); color: var(--down); }
.lint.conflict { background: var(--accent-sf); color: var(--accent); }
.lint.note { background: var(--panel); color: var(--muted); }

/* ── окно запуска ─────────────────────────────────────────────── */
.run-modal .sheet { width: min(1180px, calc(100vw - 32px)); height: min(860px, calc(100vh - 48px)); }
.run-modal { opacity: 0; transition: opacity .16s ease; }
.run-modal.in { opacity: 1; }
.run-modal .sheet { transform: translateY(8px) scale(.99); transition: transform .18s cubic-bezier(.22,.9,.3,1); }
.run-modal.in .sheet { transform: none; }
.run-split { flex: 1 1 auto; display: grid; grid-template-columns: 400px 1fr;
  min-height: 0; overflow: hidden; }
.run-form { overflow: auto; padding: 14px 16px 24px; border-right: 1px solid var(--line); }
.run-out { overflow: auto; padding: 14px 18px 28px; min-width: 0; }
.rf-sec { margin-bottom: 18px; }
.rf-h { color: var(--muted); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 8px; }
.rf-strat { background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 10px 12px; }
.rf-strat b { display: block; font-size: 13.5px; }
.rf-strat span { display: block; color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.rf-kinds { display: flex; flex-direction: column; gap: 6px; }
.rf-kind { text-align: left; background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 9px 11px; cursor: pointer; color: var(--text);
  transition: border-color .15s ease, background .15s ease; }
.rf-kind:hover { border-color: var(--accent); }
.rf-kind.on { border-color: var(--accent); background: var(--accent-sf); }
.rf-kind b { display: block; font-size: 12.5px; font-weight: 620; }
.rf-kind span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; line-height: 1.5; }
.rf-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.rf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rf-two label { display: flex; flex-direction: column; gap: 4px;
  color: var(--muted); font-size: 11px; }
.rf-two input { height: 32px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); padding: 0 9px; font: inherit; font-size: 12.5px; }
.rf-two input:focus { outline: none; border-color: var(--accent); }
.rf-note { color: var(--muted); font-size: 11.5px; line-height: 1.6; margin-top: 8px; }
.rf-note.bad { color: var(--down); }
.rf-warn { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.rf-warn .w { border-radius: var(--r-sm); padding: 8px 10px; border: 1px solid var(--line-soft);
  background: var(--panel-2); }
.rf-warn .w i { font-style: normal; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.rf-warn .w b { display: block; font-size: 12.5px; margin: 2px 0 3px; }
.rf-warn .w span { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.rf-warn .w.stop { border-color: color-mix(in srgb, var(--down) 45%, var(--line)); }
.rf-warn .w.stop i, .rf-warn .w.stop b { color: var(--down); }
.rf-warn .w.conflict { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.rf-warn .w.conflict i, .rf-warn .w.conflict b { color: var(--accent); }

.run-wait { display: grid; place-items: center; gap: 10px; padding: 70px 0; color: var(--muted); }
.run-wait b { color: var(--text); font-size: 14px; }
.run-wait i { font-style: normal; font-size: 12px; }
.run-wait .prog { width: 240px; }
.spin { width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite; }
.rr-h { display: flex; align-items: center; gap: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; flex-wrap: wrap; }
.rr-h b { font-size: 14px; }
.rr-h span { color: var(--muted); font-size: 12px; }
.rr-sub { color: var(--muted); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; margin: 16px 0 6px; }
.rr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rr-mini { border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  padding: 8px 10px 6px; background: var(--panel-2); }
.rr-mini canvas { width: 100%; height: 150px; display: block; }
.rr-legend { display: flex; align-items: center; gap: 6px; color: var(--muted);
  font-size: 11px; padding-top: 4px; }
.rr-legend i { width: 14px; height: 2px; border-radius: 2px; background: var(--up); }
.rr-legend i.px { background: var(--muted); margin-left: 10px; }
.kpis.big b { font-size: 19px; }
.rr-zero { max-width: 76ch; }
.rr-zero .z-h { font-size: 14px; font-weight: 620; margin: 6px 0 10px; }
.rr-zero .z { border-left: 2px solid var(--accent); padding: 4px 0 4px 12px; margin-bottom: 12px; }
.rr-zero .z b { display: block; font-size: 13px; }
.rr-zero .z span { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 3px; }
.test-zero { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: var(--r-sm); background: var(--accent-sf); padding: 12px 14px;
  margin: 12px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.test-zero b { font-size: 13px; }
.test-zero span { color: var(--text-2); font-size: 12px; line-height: 1.6; max-width: 76ch; }

.tests-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 0 16px 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft); }
.th-s i { display: block; font-style: normal; color: var(--muted); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; }
.th-s b { font-size: 13px; }
.th-s span { display: block; color: var(--muted); font-size: 11.5px; }

@media (max-width: 1100px) {
  .run-split { grid-template-columns: 1fr; }
  .run-form { border-right: 0; border-bottom: 1px solid var(--line); }
  .rr-two { grid-template-columns: 1fr; }
}
.run-idle { display: grid; place-items: center; gap: 8px; padding: 90px 30px;
  text-align: center; color: var(--muted); }
.run-idle svg { color: var(--line); }
.run-idle b { color: var(--text); font-size: 15px; }
.run-idle span { font-size: 12.5px; line-height: 1.6; max-width: 46ch; }
.run-idle .sm { font-size: 11.5px; opacity: .8; }

/* ── анализ и записки ────────────────────────────────────────────────────── */
.vsub { color: var(--muted); font-size: 12px; }
.an { flex: 1 1 auto; display: flex; min-width: 0; min-height: 0; }
.an-side { flex: 0 0 250px; border-right: 1px solid var(--line); background: var(--panel-2);
  padding: 14px 12px; overflow: auto; }
.an-h { color: var(--muted); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  margin: 16px 0 7px; }
.an-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.an-chips i { font-style: normal; opacity: .6; font-size: 10.5px; }
.an-stat { color: var(--muted); font-size: 11.5px; margin-top: 20px;
  padding-top: 12px; border-top: 1px solid var(--line-soft); }
.an-main { flex: 1 1 auto; overflow: auto; padding: 16px 20px 40px; min-width: 0; }
.an-list { display: flex; flex-direction: column; gap: 22px; max-width: 900px; }
.an-day { display: flex; flex-direction: column; gap: 8px; }
.an-date { display: flex; align-items: center; gap: 10px; color: var(--muted);
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.an-card { border: 1px solid var(--line); border-left: 3px solid var(--kc, var(--accent));
  border-radius: var(--r-sm); background: var(--panel); padding: 10px 12px;
  transition: border-color .15s ease, transform .12s ease; }
.an-card:hover { border-color: color-mix(in srgb, var(--kc, var(--accent)) 50%, var(--line));
  border-left-color: var(--kc, var(--accent)); }
.an-card.plain { border-left-width: 1px; }
.ac-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-h b { font-size: 13.5px; }
.ac-k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--kc, var(--accent)); }
.ac-t { color: var(--muted); font-size: 11.5px; font-family: var(--mono); }
.ac-b { color: var(--text-2); font-size: 12.5px; line-height: 1.65; margin-top: 6px;
  white-space: pre-wrap; max-width: 90ch; }
.ac-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ac-tags .tag { cursor: pointer; border: 0; font: inherit; font-size: 11px; }
.an-empty { max-width: 560px; margin: 60px auto; text-align: center; color: var(--muted); }
.an-empty h3 { color: var(--text); font-size: 16px; margin: 0 0 10px; }
.an-empty p { font-size: 13px; line-height: 1.7; margin: 0 0 8px; }
.an-edit { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel);
  padding: 14px; margin-bottom: 20px; max-width: 900px; }
.an-edit.plain { border: 0; padding: 0; background: transparent; }
.ae-row { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 10px; flex-wrap: wrap; }
.ae-row.end { justify-content: flex-end; margin-bottom: 0; margin-top: 12px; }
.ae-row label { display: flex; flex-direction: column; gap: 4px;
  color: var(--muted); font-size: 11px; }
.ae-row input[type="date"], .ae-row input[type="text"] { height: 32px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  padding: 0 9px; font: inherit; font-size: 12.5px; }
.ae-row input:focus { outline: none; border-color: var(--accent); }
.an-edit .area { width: 100%; min-height: 110px; resize: vertical; padding: 9px 11px;
  line-height: 1.6; font-size: 12.5px; }
@media (max-width: 900px) {
  .an { flex-direction: column; }
  .an-side { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ── портфель ────────────────────────────────────────────────────────────── */
.pf-top { display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap;
  padding: 4px 0 18px; }
.pf-k i { display: block; font-style: normal; color: var(--muted); font-size: 11.5px; }
.pf-k b { font-family: var(--mono); font-size: 18px; }
.pf-cash { margin-left: auto; }
.pf-cash i { display: block; font-style: normal; color: var(--muted); font-size: 11.5px;
  margin-bottom: 4px; }
.pf-cash .num { width: 150px; }

/* Строка ввода: видно сразу, что от тебя хотят, без пустой строки в таблице. */
.pf-add { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel-2); margin-bottom: 14px; }
.pf-add label, .pc-edit label, .pf-sort { display: flex; flex-direction: column; gap: 4px;
  color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.pf-add .num, .pc-edit .num { width: 110px; }
.pf-hint { color: var(--muted); font-size: 11.5px; max-width: 360px; line-height: 1.5;
  align-self: center; text-align: right; }

.pf-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pf-warn { color: var(--warn, #d0a341); font-size: 11.5px; }
.pf-sort { flex-direction: row; align-items: center; gap: 6px; }
.pf-sort .select.tiny { width: 140px; }

.pf-cards { display: flex; flex-direction: column; gap: 8px; }
.pc { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel);
  overflow: hidden; transition: border-color .12s ease; }
.pc:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pc.open { border-color: var(--accent); }
.pc-h { display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex-wrap: wrap; }
.pc-t { font-family: var(--mono); font-size: 15px; font-weight: 600; min-width: 64px; }
.pc-side { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.pc-side.pos { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); }
.pc-side.neg { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, transparent); }
.pc-q { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pc-v { font-family: var(--mono); font-size: 14px; min-width: 96px; text-align: right; }
.pc-p { font-family: var(--mono); font-size: 12px; min-width: 150px; text-align: right; }
.pc-share { display: flex; align-items: center; gap: 9px; width: 130px; }
/* Полоса доли рисуется в дорожке: без дорожки «57 %» и «43 %» выглядят одинаково. */
.pc-share { position: relative; }
.pc-share::before { content: ''; position: absolute; left: 0; top: 50%; width: 84px; height: 4px;
  margin-top: -2px; border-radius: 2px; background: var(--line); }
.pc-share i { position: relative; display: block; height: 4px; border-radius: 2px;
  background: var(--accent); min-width: 2px; max-width: 84px; flex: 0 0 auto; }
.pc-share em { font-style: normal; font-family: var(--mono); font-size: 11px;
  color: var(--muted); margin-left: auto; }
.pc-h .chip { flex: 0 0 auto; }
.pc-edit, .pc-close { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  padding: 10px 14px 14px; border-top: 1px solid var(--line-soft); }
.pc-close { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.pc-close label { display: flex; flex-direction: column; gap: 4px; color: var(--muted);
  font-size: 11px; letter-spacing: .04em; }
.pc-close .num { width: 120px; }
.pc-calc { font-family: var(--mono); font-size: 12.5px; color: var(--muted);
  padding-bottom: 7px; }
.pc-when { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.pc.done { opacity: .92; }
.pc.done .pc-t { color: var(--muted); }
.pf-hint.left { text-align: left; max-width: none; margin-top: 10px; display: block; }
.pc-m { padding: 0 14px 10px; color: var(--muted); font-size: 11.5px; }
@media (max-width: 900px) {
  .pc-share, .pc-q { display: none; }
  .pf-hint { text-align: left; }
}

.share { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end;
  width: 100%; padding-right: 8px; }
.share i { display: block; height: 4px; border-radius: 2px; background: var(--accent);
  min-width: 2px; max-width: 40px; flex: 0 0 auto; opacity: .75; }
.share em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted);
  min-width: 38px; text-align: right; }

/* ── лента новостей ──────────────────────────────────────────────────────── */
.nw-q { width: 220px; margin: 0; }
.news-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.news .why { color: var(--muted); font-size: 11.5px; line-height: 1.55; margin: 6px 0 0;
  padding-left: 9px; border-left: 2px solid var(--line); }
/* Порт должен ловить клик даже когда соседний узел лёг сверху. */
.port { position: relative; z-index: 7; }

/* ── меню форматов выгрузки ──────────────────────────────────────────────── */
.exp-menu { position: fixed; z-index: 300; width: 292px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 6px;
  animation: cardIn .14s cubic-bezier(.22,.9,.3,1); }
.exp-h { color: var(--muted); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 9px 7px; }
.exp-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent;
  color: var(--text); font: inherit; padding: 7px 9px; border-radius: 7px; cursor: pointer; }
.exp-menu button:hover { background: var(--accent-sf); }
.exp-menu button b { display: block; font-size: 12.5px; font-weight: 560; }
.exp-menu button span { display: block; color: var(--muted); font-size: 10.5px; margin-top: 1px;
  line-height: 1.4; }

/* ── новости: спокойная заглушка вместо красной ошибки ───────────────────── */
.nw-empty { max-width: 560px; margin: 36px auto 8px; text-align: center; color: var(--muted); }
.nw-empty svg { color: var(--line); }
.nw-empty h3 { color: var(--text); font-size: 17px; margin: 10px 0 8px; font-weight: 620; }
.nw-empty p { font-size: 13px; line-height: 1.7; margin: 0 auto 16px; max-width: 52ch; }
.nw-acts { display: flex; gap: 8px; justify-content: center; }
.nw-raw { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 11px;
  color: var(--muted); background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: 6px; padding: 5px 9px; max-width: 100%; overflow-wrap: anywhere; }
.nw-demo-h { text-align: center; color: var(--muted); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; margin: 34px 0 12px; }
.news-grid.demo { opacity: .42; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); }
.news.skel .pic { background: var(--panel-2); }
.news.skel .meta i { display: block; height: 9px; border-radius: 5px; background: var(--panel-2); }
.news.skel .ln { height: 10px; border-radius: 5px; background: var(--panel-2); margin: 7px 0; }
.news.skel .ln.t { height: 14px; background: var(--raise); }
.news.skel .ln[style*="width:0"] { display: none; }
.news.skel .impact .lbl { display: block; width: 130px; height: 8px; border-radius: 4px;
  background: var(--panel-2); }
.news.skel .impact .mv { display: inline-block; width: 52px; height: 22px; border-radius: 6px;
  background: var(--panel-2); }
.rr-raw { margin-top: 18px; }
.rr-raw summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.rr-raw summary:hover { color: var(--accent); }
.rr-raw pre { margin: 8px 0 0; padding: 10px 12px; background: var(--panel-2);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); max-height: 320px;
  overflow: auto; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--text-2); }
.chit { font-size: 10.5px; color: var(--muted); font-family: var(--mono);
  background: var(--panel-2); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
.chit.zero { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
.ed-miss { margin: 0 0 12px; padding: 9px 10px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--down) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--down) 40%, var(--line)); }
.ed-miss b { display: block; font-size: 11.5px; color: var(--down); margin-bottom: 5px; }
.ed-miss span { display: inline-block; font-size: 11px; color: var(--text-2);
  background: var(--panel); border-radius: 5px; padding: 2px 6px; margin: 0 4px 4px 0; }
.ed-miss i { display: block; font-style: normal; font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.hint .bad { color: var(--down); }

/* ── Explore ─────────────────────────────────────────────────────────────── */
.ex { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0;
  padding: 14px 20px 32px; overflow: auto; }
.ex-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ex-q { width: 260px; margin: 0; }
.mk-tabs .tab i { font-style: normal; display: inline-block; min-width: 16px; padding: 0 5px;
  margin-left: 5px; border-radius: 8px; background: var(--panel-2); font-size: 10.5px; }
.ex-cats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
.ex-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.ex-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
  padding: 12px 13px; display: flex; flex-direction: column;
  transition: border-color .15s ease, transform .12s ease; }
.ex-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  transform: translateY(-1px); }
.ex-card.gone { opacity: .55; }
.exc-h { display: flex; align-items: center; gap: 8px; }
.exc-h b { font-size: 13.5px; }
.exc-b { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 5px; background: var(--panel-2); color: var(--muted); }
.exc-b.k-ind { color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); }
.exc-b.k-mech { color: var(--accent); background: var(--accent-sf); }
.exc-b.k-preset, .exc-b.k-import { color: var(--up);
  background: color-mix(in srgb, var(--up) 14%, transparent); }
.exc-fav { border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px; transition: color .15s, transform .12s; }
.exc-fav:hover { transform: scale(1.15); color: var(--accent); }
.exc-fav.on { color: var(--accent); }
.exc-g { color: var(--muted); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; margin: 6px 0 4px; }
.exc-d { color: var(--text-2); font-size: 12px; line-height: 1.55; margin: 0 0 10px;
  flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
.exc-m { display: flex; gap: 10px; color: var(--muted); font-size: 11px; margin-bottom: 8px; }
.exc-m .neg { color: var(--down); }
.exc-a { display: flex; gap: 6px; align-items: center; }
.ex-foot { color: var(--muted); font-size: 11.5px; line-height: 1.65; margin-top: 26px;
  padding-top: 14px; border-top: 1px solid var(--line-soft); max-width: 86ch; }

/* ── раздел «Тесты» ──────────────────────────────────────────────────────── */
.ts { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0;
  padding: 14px 20px 36px; overflow: auto; }
.ts-tabs { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; }
.ts-g { color: var(--muted); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  margin: 22px 0 10px; }
.ts-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ts-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
  padding: 13px 14px; display: flex; flex-direction: column; cursor: pointer;
  transition: border-color .15s ease, transform .12s ease; }
.ts-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  transform: translateY(-1px); }
.tsc-h b { font-size: 13.5px; }
.tsc-d { color: var(--text-2); font-size: 12px; line-height: 1.55; margin: 6px 0 10px;
  flex: 1 1 auto; }
.tsc-last { font-size: 11.5px; color: var(--muted); font-family: var(--mono);
  border-top: 1px solid var(--line-soft); padding-top: 7px; margin-bottom: 9px; }
.tsc-last i { display: block; font-style: normal; font-size: 10.5px; opacity: .8;
  font-family: var(--sans); margin-top: 2px; }
.tsc-a { display: flex; gap: 6px; align-items: center; }
.ts-custom { border: 1px dashed var(--line); border-radius: var(--r); padding: 14px;
  background: color-mix(in srgb, var(--accent) 4%, var(--panel)); }
.tsu-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0 4px; }
.tsu-row label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 11px; }
.tsu-row .num { width: 120px; }

.ts-log { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ts-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel);
  cursor: pointer; transition: border-color .15s ease; }
.ts-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.tsr-m { min-width: 220px; }
.tsr-m b { display: block; font-size: 12.5px; }
.tsr-m span { display: block; color: var(--muted); font-size: 11px; }
.tsr-h { flex: 1 1 auto; font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.tsr-h.pos { color: var(--up); } .tsr-h.neg { color: var(--down); }
.tsr-at { color: var(--muted); font-size: 11px; white-space: nowrap; }

.ts-back { display: flex; align-items: center; gap: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft); }
.tsb-t b { font-size: 14px; }
.tsb-t span { display: block; color: var(--muted); font-size: 11.5px; }
.ts-about { color: var(--muted); font-size: 12.5px; line-height: 1.6; max-width: 90ch;
  margin: 12px 0 4px; }
.ts-res { margin-top: 6px; }

/* блок условия со слотами */
.gn-slot { display: block; width: 100%; text-align: left; border: 1px dashed var(--line);
  background: var(--panel-2); color: var(--text); font: inherit; font-size: 12px;
  padding: 7px 9px; border-radius: 7px; cursor: pointer;
  transition: border-color .15s, background .15s; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.gn-slot:hover { border-color: var(--accent); background: var(--accent-sf); }
.gn-slot.empty { color: var(--muted); }
.gn-slot.linked { border-style: solid; color: var(--muted); cursor: not-allowed;
  background: transparent; }
.k-cmp .gn-b, .k-range .gn-b, .k-win .gn-b, .k-pct .gn-b { gap: 7px; }
.k-cmp .gn-b > *, .k-range .gn-b > *, .k-win .gn-b > *, .k-pct .gn-b > * { width: 100%; }
.k-cmp .gn-b .num, .k-win .gn-b .num, .k-pct .gn-b .num { width: 100%; }

/* палитра в нижней панели */
.gb-pal { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.gb-pal .pal-s { width: 280px; margin: 0; }
.gb-pal .pal-note { margin: 0; flex: 1 1 260px; }
.gb-body .pal-g { margin: 12px 0 6px; }
.pal-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pal-row .pal-b { width: auto; min-width: 190px; max-width: 250px; margin: 0; }
.nw-acts-row { display: flex; gap: 6px; margin-top: 10px; }
.nw-op { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 14px; border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); background: var(--panel-2); }
.nw-op-t { font-size: 12.5px; font-weight: 560; }
.nw-op-b { display: flex; gap: 5px; }
.nw-op-b .chip.pos.on { color: var(--up); border-color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.nw-op-b .chip.neg.on { color: var(--down); border-color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
.nw-op-b .chip i { font-style: normal; opacity: .6; font-size: 10.5px; }
.nw-op-h { color: var(--muted); font-size: 11.5px; max-width: 46ch; line-height: 1.5; }

/* ── условие: две капсулы и знак между ними ──────────────────────────────── */
.k-cmp, .k-range, .k-win, .k-pct { --nc: color-mix(in srgb, #c48cff 40%, var(--line)); }
.k-cmp, .k-range, .k-win, .k-pct { border-color: var(--nc); }
/* Плотнее: промежутки 7 вместо 12, средняя колонка уже. На схеме из десятка
   блоков лишние пиксели превращаются в лишние экраны прокрутки. */
.cn { display: grid; grid-template-columns: 1fr minmax(76px,124px) 1fr; align-items: start;
  gap: 7px; padding: 1px 0 2px; }
.k-win .cn { grid-template-columns: 1fr auto; }

/* Вложенный блок — маленькая копия обычного: шапка с названием и поля под ней.
   Он выглядит как блок, потому что это и есть блок, просто лежит внутри. */
.cn-slot { min-width: 0; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel-2); overflow: hidden;
  transition: border-color .12s, background .12s; }
.cn-slot.over { border-color: var(--accent); background: var(--accent-sf); }
.cn-slot.linked { background: transparent; border-style: dashed; }
.cn-head { display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px 7px;
  background: var(--raise); border-bottom: 1px solid var(--line); }
.cn-head b { font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }
.cn-kind { flex: 1 1 auto; min-width: 0; text-align: left; border: 0; background: transparent;
  cursor: pointer; color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; padding: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-kind:hover { color: var(--accent); }
.cn-clr { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px; border: 0;
  background: transparent; color: var(--muted); font-size: 10px; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity .12s ease; }
.cn-slot:hover .cn-clr { opacity: 1; }
.cn-clr:hover { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }

.cn-f { display: flex; flex-direction: column; gap: 4px; padding: 5px 6px 6px; }
.cn-r { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cn-r > i { font-style: normal; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.cn-f .select, .cn-f .input, .cn-f .num { width: 100%; min-width: 0; max-width: none;
  height: 26px; font-size: 12px; }
.cn-f .num { font-family: var(--mono); text-align: right; }
.cn-nums { display: flex; gap: 6px; }
.cn-nums .cn-r { flex: 1 1 0; min-width: 0; }
.cn-nums .cn-r > i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-nums .num { padding: 0 5px; text-align: center; }
/* Объяснение внутри гнезда осталось на виду: прятать его под наведение нельзя
   — блок тогда растёт под курсором и наползает на соседа, а на холсте место
   блока важнее пары сэкономленных строк. Экономим иначе: сами объяснения
   стали в одну строку, а длинное договаривает подсказка под курсором. */
.cn-note { padding: 4px 7px; color: var(--muted); font-size: 10.5px; line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; }

/* Пустой слот зовёт положить блок и принимает его перетаскиванием. */
/* Пустое гнездо занимало 78 точек в высоту и звало в две строки. Полблока
   пустоты за одно слово «пусто» — дорого. Теперь одна строка и 34 точки;
   объяснение осталось в подсказке под курсором. */
.cn-drop { display: flex; align-items: center; justify-content: center;
  gap: 5px; width: 100%; min-height: 34px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font: inherit; padding: 5px 8px; }
.cn-drop b { font-size: 12px; font-weight: 600; color: var(--text); }
.cn-drop em { font-style: normal; font-size: 10.5px; line-height: 1.3; text-align: left;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cn-drop:hover { background: var(--accent-sf); }
.act-slot-empty { align-items: center; }
.act-slot-empty.over { outline: 2px dashed #7fb2ff; border-radius: 8px;
  background: color-mix(in srgb, #7fb2ff 10%, transparent); }

/* ── «и ещё условие» прямо в блоке ──────────────────────────────────────────
   Цепочка по «И» была только гнездом снаружи: маленький фиолетовый кружок, к
   которому надо догадаться протянуть связь. Теперь это полоска внутри блока —
   мишень для перетаскивания и кнопка со списком. Пунктир говорит «сюда можно
   бросить», сплошная рамка — «уже занято, вот чем». */
.cn-chain { margin-top: 5px; border: 1px dashed var(--line); border-radius: 9px;
  display: flex; align-items: center; gap: 6px; padding: 0; min-height: 30px; }
.cn-chain.over { border-color: var(--c-cond, #c48cff); border-style: solid;
  background: color-mix(in srgb, #c48cff 12%, transparent); }
.cn-chain.on { border-style: solid; padding: 5px 5px 5px 10px; }
.cn-chain > i { font-style: normal; font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); flex: 0 0 auto; }
.cn-chain .grow { flex: 1 1 auto; }
.cn-chain-add { flex: 1 1 auto; display: flex; align-items: baseline; gap: 8px;
  border: 0; background: transparent; cursor: pointer; color: var(--text);
  font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; text-align: left; }
.cn-chain-add em { font-style: normal; font-weight: 400; font-size: 10.5px;
  color: var(--muted); }
.cn-chain-add:hover { background: color-mix(in srgb, #c48cff 12%, transparent);
  border-radius: 8px; }
.cn-chain-b { flex: 1 1 auto; text-align: left; border: 0; background: transparent;
  cursor: pointer; color: #c48cff; font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 3px 4px; border-radius: 6px; }
.cn-chain-b:hover { background: color-mix(in srgb, #c48cff 14%, transparent); }
.cn-chain .cn-clr { opacity: .55; }
.cn-chain:hover .cn-clr { opacity: 1; }

.cn-op { display: flex; align-items: center; justify-content: center; min-height: 34px;
  align-self: center; }
.cn-sel { height: 28px; min-width: 0; max-width: 100%; width: 100%; border: 0; background: transparent;
  color: var(--text); font-size: 13px; font-weight: 600; text-align: center;
  text-align-last: center; padding: 0 4px; cursor: pointer; }
.cn-sel:hover { color: var(--accent); }
.cn-pair { display: grid; gap: 8px; }

/* ── математика внутри значения ──────────────────────────────────────────────
   Арифметика — не отдельный блок где-то сбоку на проводе, а содержимое того
   места, где её считают. Поэтому она рисуется вложенной карточкой прямо в
   гнезде, и внутрь неё кладутся такие же гнёзда — сколько угодно уровней.
   Полоска слева показывает вложенность: её видно даже когда блок свёрнут в
   узкую колонку. */
/* Два слагаемых рядом, пока есть место, и друг под другом, когда места нет:
   решает сама раскладка, а не наша догадка о ширине блока. */
.cn-math { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 5px; align-items: start; }
.cn-math > .cn-r { grid-column: 1 / -1; }
.cn-slot.inner { border-color: color-mix(in srgb, var(--mc, #7fb2ff) 34%, var(--line));
  background: color-mix(in srgb, var(--mc, #7fb2ff) 5%, var(--panel-2)); }
.cn-slot.inner > .cn-head { background: color-mix(in srgb, var(--mc, #7fb2ff) 11%, var(--raise));
  border-bottom-color: color-mix(in srgb, var(--mc, #7fb2ff) 24%, var(--line)); }
.cn-slot.inner > .cn-f { padding: 5px; }
.cn-side { font-style: normal; flex: 0 0 auto; font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: color-mix(in srgb, var(--mc, #7fb2ff) 75%, var(--muted)); }
.cn-slot.math > .cn-head .cn-kind { color: color-mix(in srgb, #7fb2ff 80%, var(--text)); }
/* Сам блок математики на холсте: та же семья, тот же цвет. */
.k-math { --nc: color-mix(in srgb, #7fb2ff 42%, var(--line)); border-color: var(--nc); }
.k-math > .gn-h { background: color-mix(in srgb, #7fb2ff 12%, var(--raise));
  border-bottom-color: color-mix(in srgb, #7fb2ff 26%, var(--line)); }
.k-math > .gn-h b { color: color-mix(in srgb, #7fb2ff 78%, var(--text)); }
.cn.cn-math-node { grid-template-columns: 1fr; gap: 6px; }
.cn.cn-one { grid-template-columns: 1fr; gap: 6px; }
/* Переключатель палитры: обобщённые блоки, узкие по названиям, по величинам. */
.pal-mode { display: inline-flex; flex-wrap: wrap; gap: 0; margin: 0 0 6px; padding: 2px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); max-width: 100%; }
.pal-mode .chip { font-size: 11px; border: 0; border-radius: 7px; margin: 0;
  background: transparent; padding: 4px 7px; }
.pal-mode .chip.on { background: var(--accent-sf); color: var(--accent); }

/* Блок, который тащат в чужой слот, полупрозрачный — иначе курсор всегда
   «над собой» и слот под ним не подсветить. */
.gr-node.ghost { opacity: .42; }
.gr-node.nest-over { border-color: #7fb2ff;
  box-shadow: 0 0 0 2px color-mix(in srgb, #7fb2ff 55%, transparent); }
.gr-node.drop { border-color: #7fb2ff; }

.cn-row { display: flex; gap: 6px; margin-top: 8px; }
.cn-row > * { flex: 1 1 0; }
.cn-extra .num, .cn-extra .select { width: 100%; }
.once-why { font-style: normal; color: var(--accent); font-size: 11px; cursor: help;
  border-bottom: 1px dotted var(--accent); }
.once-hint { color: var(--muted); font-size: 11.5px; line-height: 1.55; margin-top: 8px;
  max-width: 92ch; }
.app-fmt { display: flex; gap: 6px; flex-wrap: wrap; }
.app-fmt .chip em { font-style: normal; opacity: .65; margin-left: 5px; font-family: var(--mono); }

/* ── боковая панель конструктора: те же вкладки, что внизу ─────────────── */
.gr-side { flex: 0 0 236px; border-right: 1px solid var(--line); background: var(--panel-2);
  padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.gr-side .gb-tabs { border-bottom: 1px solid var(--line-soft); }
.gr-side .gb-body { padding: 10px 12px 12px; }
.gr-side .pal-s { width: 100%; margin-bottom: 8px; }
.gr-side.dock-over, .gr-bottom.dock-over {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
  transition: box-shadow .16s ease, background .16s ease;
}
.gr-side.dock-land, .gr-bottom.dock-land {
  animation: dockLand .45s ease;
}
@keyframes dockLand {
  0% { box-shadow: inset 0 0 0 2px var(--accent); }
  100% { box-shadow: none; }
}
.gb-body.dock-in { animation: dockIn .34s cubic-bezier(.22,.9,.24,1); }
@keyframes dockIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.gb-tabs .tab.tab-drag { opacity: .28; }
.gb-tabs .tab { cursor: grab; }
.gb-tabs .tab:active { cursor: grabbing; }
.tab-fly {
  background: var(--panel) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,.42);
  color: var(--text);
  display: flex; align-items: center; padding: 4px 10px;
}
.gs-note { color: var(--muted); font-size: 11px; line-height: 1.5; margin-bottom: 10px; }
.gs-list { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0 -4px; padding: 0 4px; }
.gs-it { display: flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 7px;
  transition: background .12s ease; }
.gs-it:hover { background: var(--panel); }
.gs-n { flex: 1 1 auto; font-size: 12px; min-width: 0; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.gs-it .exc-fav { font-size: 13px; opacity: .55; }
.gs-it:hover .exc-fav, .gs-it .exc-fav.on { opacity: 1; }
.gs-add { padding: 1px 7px; font-size: 13px; line-height: 1.3; opacity: 0; }
.gs-it:hover .gs-add { opacity: 1; }
.pal-b.mine { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

/* ── стоп-кран на схеме ──────────────────────────────────────────────────── */
.gn-lab { color: var(--muted); font-size: 10.5px; letter-spacing: .04em; margin: 3px 0 1px; }

/* Пояснение под полями — две строки, остальное договаривает подсказка. Раньше
   оно занимало треть высоты блока, и на схеме из пяти действий это был лишний
   экран прокрутки за один и тот же текст. */
.gn-why { color: var(--muted); font-size: 10.5px; line-height: 1.4; margin: 5px 0 1px;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  padding-left: 8px; border-left: 2px solid var(--line); }
/* Защита — красная семья: видно с другого конца холста, что это не логика. */
.gr-node.guard { border-color: color-mix(in srgb, var(--down) 42%, var(--line)); }
.gr-node.guard .gn-h { background: color-mix(in srgb, var(--down) 14%, var(--raise));
  border-bottom-color: color-mix(in srgb, var(--down) 28%, var(--line)); }
.gr-node.guard .gn-h b { color: color-mix(in srgb, var(--down) 70%, var(--text)); }
.gr-node.guard:hover { border-color: color-mix(in srgb, var(--down) 70%, var(--line)); }
.gr-node.guard.sel { border-color: var(--down); box-shadow: 0 0 0 1px var(--down), 0 8px 24px rgba(0,0,0,.35); }
.gr-node.guard .num.wide { width: 100%; text-align: right; }

/* ── помощник ────────────────────────────────────────────────────────────── */
.help-btn { position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  font-size: 16px; font-weight: 600; line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.3); transition: all .14s ease; }
.help-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.help-btn.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.help-pane { position: fixed; right: 18px; bottom: 66px; z-index: 60;
  width: min(420px, calc(100vw - 36px)); max-height: min(70vh, 640px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: 0 16px 44px rgba(0,0,0,.45); }
.help-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--line); background: var(--raise); }
.help-body { padding: 14px; overflow: auto; }
.help-body h3 { margin: 0 0 6px; font-size: 14px; }
.help-what { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0 0 14px; }
.help-list { display: flex; flex-direction: column; gap: 8px; }
.help-i { border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px;
  padding: 9px 11px; }
.help-i b { display: block; font-size: 12.5px; font-weight: 560; }
.help-i span { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.55;
  margin-top: 4px; }
.help-i .chip { margin-top: 8px; }
.help-i.stop { border-left-color: var(--down); }
.help-i.warn { border-left-color: var(--warn, #d0a341); }
.help-i.note { border-left-color: var(--line); }
.help-ok { color: var(--muted); font-size: 12px; line-height: 1.6; }

/* ── выделение текста ─────────────────────────────────────────────────────────
   По умолчанию его нет. В приложении, где всё перетаскивается, случайное
   выделение половины страницы — это шум, который мешает каждый раз. Там, где
   текст читают и копируют — поля, код, лента, заметки, помощник — выделение
   возвращается явно. */
body { user-select: none; -webkit-user-select: none; }
input, textarea, [contenteditable="true"], .code-area, .code-hl {
  user-select: text; -webkit-user-select: text;
}
/* Выделенные вместе блоки: их видно и когда фокус на другом. */
.gr-node.mark { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 65%, transparent),
  0 8px 24px rgba(0,0,0,.35); }
.pal-cats { display: flex; gap: 4px; flex-wrap: wrap; }
.pal-cats .chip { font-size: 11.5px; }
/* Узел под перетаскиванием: видно, куда именно упадёт блок. */
.gr-node.drop { border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 10px 28px rgba(0,0,0,.4); }
/* Число и единица рядом: «47 секунд», а не выбор из пяти готовых. */
.gn-two { display: flex; gap: 6px; width: 100%; }
.gn-two .num { flex: 1 1 auto; min-width: 0; text-align: right; }
.gn-two .select { flex: 0 0 auto; width: 104px; min-width: 0; }
/* Две кнопки рядом с числом в действии: «формулой» — сразу выражение,
   «блоком» — список величин. Обе узкие, чтобы само число оставалось главным. */
.gn-two .act-fx, .gn-two .act-blk { flex: 0 0 auto; }
.gn-two .act-fx { color: var(--accent); }
/* Точка на ярлыке: «тут появилось новое», без принудительного перехода. */
.gb-tabs .tab.dot { position: relative; }
.gb-tabs .tab.dot::after { content: ''; position: absolute; top: 5px; right: 3px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* Рамка выделения и свёрнутый блок. */
.gr-box { position: absolute; z-index: 8; pointer-events: none;
  border: 1px solid var(--accent); border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); }
.gr-node.fold .gn-b, .gr-node.fold .row.in label, .gr-node.fold .row.out { }
.gr-node.fold .gn-b { display: none; }
.gr-node.fold .row { min-height: 14px; padding: 2px 8px; }
.gr-node.fold .row label { display: none; }
.gr-node.fold .gn-h b { font-weight: 560; }
.gn-h .x.fold { font-size: 14px; line-height: 1; }
/* Мишень для щелчка по связи: невидимая, но толстая. */
.gr-wires .wire-hit { stroke: transparent; stroke-width: 14; fill: none;
  pointer-events: stroke; cursor: pointer; }
.gr-wires .wire-hit:hover { stroke: color-mix(in srgb, var(--down) 45%, transparent); }
/* Кнопка выбора величины: выглядит как поле, ведёт себя как выбор блока. */
.cn-pick { width: 100%; height: 30px; text-align: left; padding: 0 9px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2);
  color: var(--text); font: inherit; font-size: 12px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-pick:hover { border-color: var(--accent); color: var(--accent); }
.gr-quick .q-s { width: calc(100% - 16px); margin: 6px 8px 4px; }
.gr-quick .q-empty { padding: 10px 12px; color: var(--muted); font-size: 12px; }
.gn-two.one .select { width: 100%; }
.gr-tip { color: var(--muted); font-size: 11px; margin-right: 12px; }
/* Рука по умолчанию, перекрестие — в режиме рамки. */
.gr-canvas { cursor: grab; }
.gr-canvas.boxmode { cursor: crosshair; }
.gr-canvas.grabbing { cursor: grabbing; }
.gr-canvas .gr-node { cursor: default; }
/* Выбранный блок всегда выше остальных — на нём сейчас работают. */
.cn-f .cn-note { padding: 2px 0 0; }
.cn-unit { flex: 0 0 auto; align-self: center; color: var(--muted); font-size: 10.5px;
  white-space: nowrap; }

/* Разделы в витрине Explore: двести карточек подряд читаются как стена,
   поэтому у каждого раздела свой заголовок со счётчиком, а у подраздела —
   тонкая подпись. */
.ex-sec { grid-column: 1 / -1; margin: 18px 0 2px; }
.ex-sec:first-child { margin-top: 4px; }
.ex-sec h4 { margin: 0; display: flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.ex-sec h4::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.ex-sec h4 i { font-style: normal; font-size: 11px; color: var(--muted);
  background: var(--panel-2); border-radius: 999px; padding: 1px 7px; order: 3; }
.ex-sub { margin: 12px 0 -4px; font-size: 11px; color: var(--muted); letter-spacing: .03em; }
.ex-cats .chip i { font-style: normal; font-size: 10px; opacity: .6; margin-left: 4px; }

/* ── панели: край, за который тянут, и кнопки сворачивания ──────────────────
   Захват узкий, но с невидимым запасом вокруг: попадать в трёхпиксельную
   полоску мышью — работа, которой быть не должно. */
.pnl-grip { position: absolute; z-index: 12; touch-action: none; }
/* Запас для попадания мышью выступает только наружу панели. Внутрь нельзя:
   там первая строка — вкладки, и захват съедал бы нажатия по ним. */
.pnl-grip::after { content: ''; position: absolute; }
.pnl-grip-top::after    { inset: -6px 0 0 0; }
.pnl-grip-bottom::after { inset: 0 0 -6px 0; }
.pnl-grip-left::after   { inset: 0 0 0 -6px; }
.pnl-grip-right::after  { inset: 0 -6px 0 0; }
.pnl-grip:hover, body.pnl-resizing-x .pnl-grip-left, body.pnl-resizing-x .pnl-grip-right,
body.pnl-resizing-y .pnl-grip-top, body.pnl-resizing-y .pnl-grip-bottom {
  background: color-mix(in srgb, var(--accent) 55%, transparent); }
.pnl-grip-left   { left: 0; top: 0; bottom: 0; width: 4px; cursor: col-resize; }
.pnl-grip-right  { right: 0; top: 0; bottom: 0; width: 4px; cursor: col-resize; }
.pnl-grip-top    { top: 0; left: 0; right: 0; height: 4px; cursor: row-resize; }
.pnl-grip-bottom { bottom: 0; left: 0; right: 0; height: 4px; cursor: row-resize; }
body.pnl-resizing-x, body.pnl-resizing-x * { cursor: col-resize !important; user-select: none; }
body.pnl-resizing-y, body.pnl-resizing-y * { cursor: row-resize !important; user-select: none; }

.pnl-hidden { display: none !important; }
/* Свёрнутая панель оставляет только шапку: видно, что она есть, и видно, как
   её вернуть. */
.pnl-collapsed > *:not(.side-head):not(.gb-tabs):not(.gr-side-head):not(.pnl-grip) { display: none; }
.pnl-collapsed { width: auto !important; height: auto !important;
  min-height: 0 !important; min-width: 0 !important; flex: 0 0 auto !important; }

.pnl-btns { display: flex; gap: 2px; margin-left: auto; padding-left: 6px; }
.pnl-b { width: 20px; height: 20px; display: grid; place-items: center; padding: 0;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; }
.pnl-b:hover { background: var(--panel-2); color: var(--text); border-color: var(--line); }

/* Язычок спрятанной панели: маленький, у того края, откуда она ушла. */
.pnl-tab { position: absolute; z-index: 14; padding: 4px 9px; font-size: 11px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--muted); cursor: pointer; box-shadow: var(--shadow); }
.pnl-tab:hover { color: var(--text); border-color: var(--accent); }
.pnl-tab-right  { right: 8px; top: 50%; transform: translateY(-50%); }
.pnl-tab-left   { left: 8px; top: 50%; transform: translateY(-50%); }
.pnl-tab-bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
.pnl-tab-top    { top: 8px; left: 50%; transform: translateX(-50%); }

/* ── «Вернуть панели» ─────────────────────────────────────────────────────
   Язычок у края — подсказка для того, кто уже знает, что ищет. Человеку,
   который только что закрыл всё подряд кнопками «✕» и остался с голым
   графиком, нужна одна кнопка, которую видно, ничего не зная. Поэтому она
   яркая, подписана словами и лежит в свободном углу; появляется, только
   когда есть что возвращать. */
.pnl-back { position: fixed; left: 14px; bottom: 44px; z-index: 120; }
.pnl-back[hidden] { display: none; }
.pnl-back-b { display: inline-flex; align-items: center; gap: 8px; height: 34px;
  padding: 0 13px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px;
  color: var(--on-accent); border: 1px solid transparent;
  background: linear-gradient(145deg, var(--accent), var(--accent-d));
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--accent) 70%, transparent),
              0 2px 6px rgba(0,0,0,.35);
  animation: pnlCall 3.2s ease-in-out infinite; }
.pnl-back-b:hover { filter: brightness(1.08); }
.pnl-back.open .pnl-back-b { animation: none; }
.pnl-back-b svg { width: 15px; height: 15px; stroke: var(--on-accent); stroke-width: 1.8; }
.pnl-back-n { font-weight: 700; font-size: 11px; min-width: 16px; height: 16px;
  display: grid; place-items: center; border-radius: 999px;
  background: color-mix(in srgb, var(--on-accent) 22%, transparent); }
@keyframes pnlCall {
  0%, 82%, 100% { transform: none; }
  88%  { transform: translateY(-3px); }
  94%  { transform: translateY(-1px); }
}
[data-motion="off"] .pnl-back-b, [data-motion="reduced"] .pnl-back-b { animation: none; }
.pnl-back-m { position: absolute; left: 0; bottom: 42px; min-width: 200px;
  padding: 5px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--panel); box-shadow: var(--shadow); display: flex;
  flex-direction: column; gap: 2px; }
.pnl-back-m[hidden] { display: none; }
.pnl-back-i { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: transparent; color: var(--text); font: inherit; font-size: 12.5px;
  text-align: left; }
.pnl-back-i:hover { background: var(--panel-2); }
.pnl-back-i.all { color: var(--accent); font-weight: 600;
  border-bottom: 1px solid var(--line); border-radius: var(--r-sm) var(--r-sm) 0 0;
  margin-bottom: 3px; padding-bottom: 9px; }
.pnl-back-i em { font-style: normal; font-size: 11px; color: var(--muted); }

/* ── меню, которое раскладывают под себя ──────────────────────────────────
   Пока правка выключена, здесь не меняется ничего, кроме появившейся справа
   неприметной кнопки «⋮». */
.menu-tools { display: flex; align-items: center; gap: 4px; margin-left: 4px; }
.menu-edit { width: 18px; height: 22px; padding: 0; border: 0; background: transparent;
  color: var(--muted); opacity: .35; cursor: pointer; border-radius: 6px; font-size: 13px; }
.menu-edit:hover { opacity: 1; background: var(--panel-2); }
.menu-edit.on { opacity: 1; color: var(--accent); background: var(--panel-2); }
.menu-add { padding: 2px 8px; font-size: 11px; border: 1px dashed var(--line);
  border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.menu-add:hover { color: var(--text); border-color: var(--accent); }

.menu-editing > *:not(.menu-tools) { position: relative; cursor: grab; }
.menu-editing > *:not(.menu-tools)::after {
  content: ''; position: absolute; inset: -2px; border: 1px dashed
  color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 8px; pointer-events: none; }
.mi-drag { opacity: .6; }
.mi-off { display: none !important; }
.menu-editing .mi-off { display: inline-flex !important; opacity: .35; }

.menu-pop { position: fixed; z-index: 300; min-width: 200px; max-height: 320px; overflow: auto;
  padding: 6px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 11px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.menu-pop button { text-align: left; padding: 6px 9px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text); font-size: 12px; cursor: pointer; }
.menu-pop button:hover { background: var(--panel-2); }
.menu-pop i { color: var(--muted); font-size: 12px; padding: 6px 9px; }

/* Верхняя панель графика: то, что можно переставлять, лежит в одной строке.
   Разделители нарисованы полем, а не отдельными элементами, — иначе при
   перестановке пунктов они бы разъезжались отдельно от того, что разделяют. */
/* Обёртка появилась ради перетаскивания пунктов, и вместе с ней сломалось
   правило «.topbar > * { flex-shrink: 0 }»: оно перестало доставать до самих
   пунктов, и таймфреймы (им нужно 411 px) сжимались до четырнадцати —
   полоска с обрезанной «1с» вместо ряда кнопок. Пункты не сжимаются никогда;
   если ряд не влезает, он прокручивается, а не давит содержимое. */
.topbar-items {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  /* Полосу прокрутки прячем жёстко и задаём нижнюю границу высоте. Если
     система показывает полосы всегда (а на macOS это включается одной
     галочкой), она съедает пятнадцать пикселей снизу — содержимое перестаёт
     помещаться и уезжает вверх, к самому краю панели. Выглядит это как
     «всё подтянуто наверх», а причина — вот эта полоса. */
  scrollbar-width: none; -ms-overflow-style: none;
  min-height: 36px;
}
.topbar-items::-webkit-scrollbar { display: none; width: 0; height: 0; }
.topbar::-webkit-scrollbar { display: none; width: 0; height: 0; }
.topbar-items > * { align-self: center; }
.topbar-items > * { flex-shrink: 0; }
/* Порядок уступок, когда окно узкое. Первой сжимается справка о стратегии:
   она ничего не делает, только рассказывает, и её же содержимое видно в
   списке рядом. Второй — лента таймфреймов: ей есть куда деваться, внутри
   она прокручивается. Кнопки не сжимаются никогда: «Прогон», уехавший за
   край, — это сломанная программа, а не тесный экран. */
.topbar-items > .stratbar { flex: 0 1 auto; }
.topbar-items > .segmented { flex: 0 1 auto; min-width: 148px; }
@media (max-width: 1600px) { .topbar-items > .stratbar { display: none; } }
/* 1440 — это обычный ноутбук, а не «узкий экран». Ряд обязан помещаться на
   нём целиком, поэтому подписи, которые можно прочитать из самой кнопки,
   уходят: день недели виден в календаре, слово «Период» — в подсказке. */
@media (max-width: 1520px) {
  .btn.date { min-width: 148px; }
  .btn.date .wd { display: none; }
  .topbar-items > .range .lbl { display: none; }
}
.topbar-items > .group + .group,
.topbar-items > .segmented + .group,
.topbar-items > .group + .segmented {
  border-left: 1px solid var(--line); padding-left: 10px; }
.topbar-items > .spacer { flex: 1; min-width: 8px; border: 0; }
.menu-editing > .spacer::after { border-style: dotted; }

/* Панелям нужен свой контекст позиционирования: захват края и язычок
   возврата лежат внутри них. */
.rail, .gr-side, .gr-bottom, .topbar { position: relative; }
/* Фиксированные размеры отдаём механизму панелей: он их и читает, и пишет. */
.rail { flex: 0 0 auto; width: 74px; }
.gr-side { flex: 0 0 auto; width: 236px; }
/* Сворачивание нижней панели раньше делалось своим классом .fold; теперь это
   общий .pnl-collapsed, и высота сжимается до одной шапки. */
.gr-bottom.pnl-collapsed { height: auto !important; }
/* Свёрнутого состояния у панели разделов больше нет — только скрытое, из
   которого есть возврат. Правила на .rail.pnl-collapsed убраны вместе с
   кнопкой: они всё равно целились в span, а подписи разделов лежат в <i>. */
.topbar.pnl-collapsed { height: 28px !important; min-height: 0 !important;
  flex: 0 0 28px !important; overflow: hidden; padding-block: 0; }

/* Крестик у пункта меню — только в режиме правки. */
.mi-x { position: absolute; right: -6px; top: -7px; z-index: 3;
  width: 15px; height: 15px; display: grid; place-items: center;
  border-radius: 50%; background: var(--down); color: #fff;
  font-size: 9px; font-style: normal; cursor: pointer; line-height: 1; }
.mi-x:hover { filter: brightness(1.2); }

/* Профиль: карточки с настройками рабочего места. */
.pf { max-width: 720px; margin-bottom: 14px; }
.pf h2 { margin: 0 0 8px; font-size: 15px; }
.pf p { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.pf-a { margin-top: 12px; }

/* В режиме правки крестик висит снаружи пункта, поэтому обрезать содержимое
   нельзя: иначе у прокручиваемых рядов (таймфреймы) он съедает кнопки. */
.menu-editing > * { overflow: visible !important; }
.menu-editing .mi-x { pointer-events: auto; }

/* Кнопка «⋮» обязана оставаться на виду: ею же режим правки и выключают.
   Ряд сверху прокручивается, поэтому она липнет к правому краю. */
.topbar .menu-tools { position: sticky; right: 0; background: var(--panel);
  padding-left: 4px; box-shadow: -8px 0 10px -8px rgba(0,0,0,.6); }

/* Заголовок каталога слева — он же место для кнопок панели. */
.pal-h { display: flex; align-items: center; }

/* ── лаборатория индикаторов ───────────────────────────────────────────── */
.exc-b.k-mine { color: var(--i2); background: color-mix(in srgb, var(--i2) 16%, transparent); }
.ex-lab-h { color: var(--muted); font-size: 12px; line-height: 1.6; max-width: 92ch;
  margin: -4px 0 14px; }
.ex-lab-h .neg { margin-top: 6px; }

.lab { display: flex; flex-direction: column; gap: 14px; }
.lab-head { display: flex; align-items: center; gap: 8px; }
.lab-name { flex: 1 1 260px; max-width: 420px; height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2);
  color: var(--text); font-size: 14px; font-weight: 600; }
.lab-name:focus { outline: none; border-color: var(--accent); }
.lab-cols { display: flex; gap: 16px; align-items: flex-start; }
.lab-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.lab-side { flex: 0 0 360px; max-width: 360px; display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 8px; }
@media (max-width: 1100px) { .lab-cols { flex-direction: column; }
  .lab-side { flex: 1 1 auto; max-width: none; width: 100%; position: static; } }

.lb-sec { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
  padding: 12px 14px 14px; }
.lb-sec > h4 { margin: 0 0 10px; font-size: 12.5px; display: flex; align-items: baseline; gap: 8px; }
.lb-sec > h4 i { font-style: normal; color: var(--muted); font-size: 11px; font-weight: 400; }
.lb-grid { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.lb-grid > label, .lb-wide { display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: var(--muted); }
.lb-wide { margin-top: 10px; }
.lb-grid input, .lb-grid select, .lb-wide textarea, .lb-wide input {
  height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel-2); color: var(--text); font-size: 12px; }
.lb-wide textarea { height: auto; padding: 6px 8px; resize: vertical; line-height: 1.5;
  font-family: inherit; }
.lb-grid input:focus, .lb-grid select:focus, .lb-wide textarea:focus { outline: none;
  border-color: var(--accent); }
.lb-chk { flex-direction: row !important; align-items: center; gap: 6px !important;
  align-self: flex-end; height: 28px; }
.lb-chk input { height: auto; }
.lb-note { color: var(--muted); font-size: 11.5px; line-height: 1.6; margin-top: 8px;
  max-width: 88ch; }
.lb-note.neg, .lb-sec .neg { color: var(--down); }
.lb-note code, .lb-ref code { background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 0 4px; font-size: 11px; }

.lb-pars td { padding: 3px 4px; }
.lb-pars input, .lb-pars select { width: 100%; min-width: 60px; height: 26px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2);
  color: var(--text); font-size: 12px; }
.lb-pars input:focus, .lb-pars select:focus { outline: none; border-color: var(--accent); }

.lb-out { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px 10px;
  margin-bottom: 10px; background: var(--panel-2); }
.lb-out-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.lb-out-h input, .lb-out-h select { height: 26px; padding: 0 6px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--panel); color: var(--text); font-size: 12px; }
.lb-out-h .lb-on { width: 150px; }
.lb-out-h .lb-ok { width: 70px; }
.lb-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lb-modes { display: flex; gap: 3px; }
.lb-f { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--panel); color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  line-height: 1.55; resize: vertical; }
.lb-f:focus { outline: none; border-color: var(--accent); }
.lb-err { margin-top: 6px; font-size: 11.5px; color: var(--down); }
.lb-err.ok { color: var(--muted); }

/* Блоки: то же дерево, только видно, из чего собрано. */
.lb-tree { padding: 4px 0 0; }
.lb-n { border-left: 2px solid var(--line); padding-left: 8px; margin: 3px 0 3px 2px; }
.lb-nh { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.lb-nh select, .lb-nh input { height: 25px; padding: 0 6px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--panel); color: var(--text); font-size: 12px;
  max-width: 340px; }
.lb-nh select:focus, .lb-nh input:focus { outline: none; border-color: var(--accent); }
.lb-nk { color: var(--muted) !important; }
.lb-sl { font-size: 10.5px; color: var(--muted); min-width: 52px; }
.lb-nk-kids { margin-left: 10px; }

.lb-pv { margin-bottom: 12px; }
.lb-pv-h { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 4px; }
.lb-pv-m { color: var(--muted); font-size: 11px; margin-top: 3px; }
.lb-spark { width: 100%; height: 54px; display: block; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); }
.lb-ref-h { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 10px 0 5px; }
.lb-ref { max-height: 240px; overflow: auto; display: flex; flex-direction: column; gap: 3px; }
.lb-ref > div { display: flex; gap: 8px; align-items: baseline; font-size: 11.5px; }
.lb-ref > div span { color: var(--muted); }
.lb-radio { display: flex; gap: 16px; font-size: 12px; }
.lb-radio label { display: flex; align-items: center; gap: 6px; }

/* ── плотность и движение ───────────────────────────────────────────────── */
/* Плотность меняет только воздух: высоты контролов и отступы. Размеры шрифта
   она не трогает — на это есть масштаб интерфейса, и путать две разные вещи
   в одной ручке нечестно. */
[data-density="tight"] .btn { height: 30px; padding: 0 10px; }
[data-density="tight"] .chip, [data-density="tight"] .tab { height: 25px; padding: 0 9px; }
/* Плотность обязана менять панель и её содержимое вместе. Раньше она
   уменьшала только саму панель — 48 пикселей, — а кнопка бумаги и ряд пунктов
   оставались прежними, и воздуха сверху доставалось пять пикселей вместо
   десяти. Именно это читается как «всё подтянуто вверх». */
[data-density="tight"] .topbar { min-height: 52px; padding-block: 9px; }
[data-density="tight"] .topbar-items { min-height: 32px; }
[data-density="tight"] .symbtn { height: 32px; }
[data-density="tight"] .vhead { padding: 10px 16px; }
[data-density="tight"] .rail-btn { padding: 6px 0 5px; }
[data-density="tight"] .vbody { --pad: 14px; }

[data-density="roomy"] .btn { height: 38px; padding: 0 15px; }
[data-density="roomy"] .chip, [data-density="roomy"] .tab { height: 32px; padding: 0 14px; }
[data-density="roomy"] .topbar { min-height: 68px; padding-block: 15px; }
[data-density="roomy"] .topbar-items { min-height: 40px; }
[data-density="roomy"] .symbtn { height: 40px; }
[data-density="roomy"] .vhead { padding: 18px 26px; }
[data-density="roomy"] .rail-btn { padding: 12px 0 10px; }

/* «Уменьшенные» оставляют переходы состояний, но убирают всё, что ездит и
   прыгает. «Выключены» — ровно ничего не двигается: это не украшение, а
   необходимость для тех, кого движение на экране укачивает. */
[data-motion="reduced"] * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
[data-motion="reduced"] .view { transition: opacity .12s ease !important; transform: none !important; }
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation: none !important; transition: none !important; }
[data-motion="off"] .view { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) * { animation-duration: .01ms !important; }
}

/* ── заставка ───────────────────────────────────────────────────────────── */
.splash { position: fixed; inset: 0; z-index: 9000; overflow: hidden;
  display: grid; place-items: center; background: var(--bg);
  font-family: var(--sans); }
.splash.sp-out { opacity: 0 !important; transition: opacity .25s ease; pointer-events: none; }
.sp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none; }
.sp-mid { position: absolute; inset: 0; display: grid; place-items: center; }
.sp-icon { position: relative; width: 128px; height: 128px; border-radius: 30%;
  overflow: hidden; will-change: transform, filter; transform-origin: center center; }
.sp-icon svg { width: 84px; height: 84px; position: absolute; inset: 22px; }
.sp-sheen { position: absolute; top: -20%; left: -60%; width: 40%; height: 140%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  opacity: 0; }
.sp-curtain { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.sp-word { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0;
  pointer-events: none; will-change: opacity, transform, filter; }
.sp-word span { color: #F5F5F7; font-weight: 600; font-size: 58px; letter-spacing: -1.5px; }
.sp-skip { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  height: 32px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted);
  font: inherit; font-size: 12.5px; backdrop-filter: blur(6px);
  transition: background .2s, color .2s; }
.sp-skip:hover { background: color-mix(in srgb, var(--text) 16%, transparent); color: var(--text); }
/* Спокойный вариант: ничего не летает и не наезжает. */
.splash.sp-still .sp-icon { transform: none !important; filter: none !important; }
.splash.sp-still .sp-word { position: static; opacity: 1; }
.splash.sp-still { grid-auto-flow: row; gap: 22px; }
.splash.sp-still .sp-word span { font-size: 30px; color: var(--text); }
.splash.sp-still .sp-mid { position: static; }
.splash.sp-still .sp-canvas, .splash.sp-still .sp-curtain { display: none; }
/* ── Главная ────────────────────────────────────────────────────────────── */
/* Витрина и рабочий стол одновременно. Всё, что здесь светится и двигается,
   показывает настоящие числа; украшать нечем, кроме правды. */

#view-home .vbody { display: block; scroll-behavior: smooth; }
.hm { --gutter: clamp(20px, 5vw, 64px); }

/* появление секций */
[data-reveal] { opacity: 0; transform: translateY(26px) scale(.985);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-reveal].fx-in { opacity: 1; transform: none; }
[data-motion="off"] [data-reveal] { opacity: 1; transform: none; transition: none; }

/* ── герой ──────────────────────────────────────────────────────────────── */
.hm-hero { position: relative; overflow: hidden; isolation: isolate;
  min-height: min(94vh, 940px); display: flex; align-items: center;
  padding: 0 var(--gutter); }
.hm-aurora { position: absolute; inset: -12%; width: 124%; height: 124%; z-index: 0;
  filter: blur(42px) saturate(112%); opacity: .9; pointer-events: none; }
[data-theme="light"] .hm-aurora { opacity: .5; filter: blur(52px) saturate(105%); }
/* Ширма под текстом. Свечение и лента красивы ровно до тех пор, пока по ним
   не приходится читать: слева фон обязан оставаться фоном. */
.hm-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(100deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 30%,
      color-mix(in srgb, var(--bg) 40%, transparent) 52%, transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 14%,
      transparent 80%, var(--bg) 100%); }
/* Сетка поверх свечения: без неё фон красив, но это фон чего угодно. */
.hm-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%); }
.hm-tape { position: absolute; inset: auto 0 -1% 0; height: 46%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%, #000 100%);
  mask-image: linear-gradient(90deg, transparent, #000 26%, #000 100%); }
.hm-tape svg { width: 100%; height: 100%; display: block; }
.hm-tape-l { stroke-dasharray: 4000; stroke-dashoffset: 4000;
  animation: hmDraw 2.6s cubic-bezier(.22,1,.3,1) .35s forwards; }
.hm-tape-a { opacity: 0; animation: hmFade 1.1s ease-out 1.4s forwards; }
.hm-tape-d { filter: drop-shadow(0 0 7px var(--accent)); opacity: 0;
  animation: hmFade .6s ease-out 2.2s forwards; }
@keyframes hmDraw { to { stroke-dashoffset: 0; } }
@keyframes hmFade { to { opacity: 1; } }

.hm-hero-in { position: relative; z-index: 1; width: 100%; max-width: 1320px; margin: 0 auto;
  padding: 18px 0 40px; }
.hm-bar { display: flex; align-items: center; gap: 10px; position: absolute; top: -8px;
  left: 0; right: 0; }
.hm-hi { display: inline-flex; align-items: baseline; gap: 9px; font-size: 13px;
  color: var(--text-2); }
.hm-hi i { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.hm-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border: 1px solid var(--line); backdrop-filter: blur(14px) saturate(140%); }
.hm-seg button { height: 26px; padding: 0 13px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
  transition: color .18s, background .18s; }
.hm-seg button:hover { color: var(--text); }
.hm-seg button.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.hm-gear { width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--line); color: var(--text-2);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  transition: color .18s, border-color .18s, transform .3s; }
.hm-gear:hover { color: var(--accent); border-color: var(--accent); transform: rotate(60deg); }
.hm-gear svg { width: 17px; height: 17px; }

/* Кто здесь и что оплачено — мелко, в углу, но всегда на виду. Зелёная
   точка рядом означает ровно одно: программа работает на этой машине и
   никуда не ходит. Это не «онлайн», и подпись под точкой говорит прямо. */
.hm-who { display: inline-flex; align-items: center; gap: 9px; height: 34px;
  padding: 0 12px 0 4px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); color: var(--text-2); font: inherit; text-align: left;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  transition: border-color .2s, color .2s, box-shadow .25s; max-width: 210px; }
.hm-who:hover { border-color: var(--accent); color: var(--text);
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.hm-who-a { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 999px;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  color: var(--on-accent); letter-spacing: 0;
  background: linear-gradient(145deg, var(--accent), var(--accent-d)); }
.hm-who-a svg { width: 15px; height: 15px; stroke: var(--on-accent); }
.hm-who-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.2; }
.hm-who-t b { font-size: 11.5px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.hm-who-t i { font-style: normal; font-size: 10px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-who-d { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 999px;
  background: var(--up); box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 60%, transparent);
  animation: hmPulse 2.8s ease-out infinite; }
@keyframes hmPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
[data-motion="off"] .hm-who-d { animation: none; }
@media (max-width: 860px) { .hm-who-t { display: none; } .hm-who { padding: 0 4px; } }

.hm-head { max-width: 860px; }
.hm-mark { width: 62px; height: 62px; border-radius: 32%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--accent), var(--accent-d));
  box-shadow: 0 18px 44px -10px color-mix(in srgb, var(--accent) 60%, transparent),
              inset 0 1px 0 rgba(255,255,255,.35);
  margin-bottom: 22px; animation: hmFloat 7s ease-in-out infinite; }
.hm-mark svg { width: 38px; height: 38px; stroke: var(--on-accent); stroke-width: 3.1; fill: none;
  stroke-linejoin: round; stroke-linecap: round; }
@keyframes hmFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }

.hm-title { margin: 0 0 14px; font-size: clamp(46px, 7.4vw, 96px); line-height: .96;
  letter-spacing: -.045em; font-weight: 700; }
.hm-title span { position: relative; background-clip: text; -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(100deg, var(--text) 18%,
    color-mix(in srgb, var(--accent) 70%, var(--text)) 42%, var(--text) 66%);
  background-size: 220% 100%; animation: hmShine 7s ease-in-out 1.2s infinite; }
@keyframes hmShine { 0%,100% { background-position: 120% 0 } 50% { background-position: -20% 0 } }
.hm-lead { margin: 0 0 30px; max-width: 58ch; font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.68; color: var(--text-2); }

.hm-stats { display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 3vw, 44px); margin-bottom: 26px; }
.hm-st { display: flex; flex-direction: column; gap: 3px; padding: 2px 0; }
.hm-st b { font-size: clamp(22px, 2.4vw, 32px); font-weight: 680; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.hm-st b.txt { font-variant-numeric: normal; }
.hm-st i { font-style: normal; color: var(--muted); font-size: 11.5px; letter-spacing: .02em; }
.hm-alert { margin: -8px 0 22px; padding: 10px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--down); color: var(--down); font-size: 12.5px; max-width: 70ch;
  background: color-mix(in srgb, var(--down) 10%, transparent); }

.hm-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.hm-b1, .hm-b2 { display: inline-flex; align-items: center; gap: 9px; height: 46px;
  padding: 0 24px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px;
  font-weight: 600; position: relative; overflow: hidden;
  transition: transform .2s cubic-bezier(.22,1,.3,1), box-shadow .25s, border-color .2s, color .2s; }
.hm-b1 { border: 0; color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-d));
  box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--accent) 75%, transparent); }
.hm-b1::after { content: ''; position: absolute; inset: 0 auto 0 -60%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition: left .6s cubic-bezier(.22,1,.3,1); }
.hm-b1:hover { transform: translateY(-2px);
  box-shadow: 0 20px 44px -12px color-mix(in srgb, var(--accent) 85%, transparent); }
.hm-b1:hover::after { left: 120%; }
.hm-b1 svg { width: 18px; height: 18px; }
.hm-b2 { border: 1px solid var(--line); color: var(--text);
  background: color-mix(in srgb, var(--panel) 66%, transparent);
  backdrop-filter: blur(14px) saturate(140%); }
.hm-b2:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.hm-b2 svg { width: 17px; height: 17px; transition: transform .25s cubic-bezier(.22,1,.3,1); }
.hm-b2:hover svg { transform: translateX(4px); }

.hm-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.hm-chips span { font-size: 11.5px; color: var(--muted); padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--panel) 45%, transparent); }

.hm-scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid var(--line);
  z-index: 1; pointer-events: none; }
.hm-scroll i { position: absolute; left: 50%; top: 7px; width: 3px; height: 6px; border-radius: 2px;
  background: var(--muted); transform: translateX(-50%); animation: hmWheel 1.9s ease-in-out infinite; }
@keyframes hmWheel { 0% { opacity: 0; transform: translate(-50%, -3px) }
  40% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, 11px) } }

/* ── тело ───────────────────────────────────────────────────────────────── */
.hm-body { max-width: 1320px; margin: 0 auto; padding: 46px var(--gutter) 70px; }
.hm-sec { margin-bottom: 44px; }
.hm-sec-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.hm-sec-h h2 { margin: 0; font-size: 12px; font-weight: 640; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.hm-sec-h span { color: var(--muted); font-size: 11.5px; }

/* лента дней */
.hm-strip { display: flex; align-items: center; gap: 3px; height: 140px;
  padding: 0 2px; border-radius: var(--r); position: relative; }
.hm-strip::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--line); }
.hm-bar-day { position: relative; flex: 1 1 0; min-width: 4px; height: 100%; border: 0;
  background: transparent; cursor: pointer; padding: 0; }
.hm-bar-day i { position: absolute; left: 0; right: 0; width: 74%;
  margin-inline: auto; border-radius: 3px; max-width: 18px;
  transform: scaleY(0); transition: filter .18s, opacity .18s;
  animation: hmGrow .55s cubic-bezier(.22,1,.3,1) forwards; animation-delay: var(--d); }
.hm-bar-day.up i { bottom: 50%; height: calc(var(--h) / 2); transform-origin: bottom;
  background: linear-gradient(180deg, var(--up), color-mix(in srgb, var(--up) 45%, transparent)); }
.hm-bar-day.dn i { top: 50%; height: calc(var(--h) / 2); transform-origin: top;
  background: linear-gradient(0deg, var(--down), color-mix(in srgb, var(--down) 45%, transparent)); }
@keyframes hmGrow { to { transform: scaleY(1); } }
[data-motion="off"] .hm-bar-day i { transform: scaleY(1); animation: none; }
.hm-bar-day:hover i { filter: brightness(1.25) saturate(1.2); }
.hm-bar-day.cur i { box-shadow: 0 0 0 1.5px var(--accent); }
.hm-bar-day.cur::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 4px;
  height: 4px; border-radius: 50%; background: var(--accent); transform: translateX(-50%); }
.hm-bar-tip { position: absolute; left: 50%; bottom: calc(50% + var(--h) / 2 + 10px);
  transform: translate(-50%, 6px); display: flex; flex-direction: column; gap: 1px;
  padding: 6px 10px; border-radius: var(--r-sm); background: var(--raise);
  border: 1px solid var(--line); box-shadow: var(--shadow); white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 5;
  transition: opacity .16s, transform .16s cubic-bezier(.22,1,.3,1); }
.hm-bar-day:hover .hm-bar-tip { opacity: 1; transform: translate(-50%, 0); }
.hm-strip-f { display: flex; align-items: baseline; gap: 12px; margin-top: 10px;
  color: var(--muted); font-size: 11px; }
.hm-strip-f span:nth-child(2) { flex: 1 1 auto; text-align: center; }
.hm-bar-tip b { font-size: 11.5px; font-weight: 600; }
.hm-bar-tip em { font-style: normal; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.hm-bar-day.up .hm-bar-tip em { color: var(--up); }
.hm-bar-day.dn .hm-bar-tip em { color: var(--down); }

/* общая «стеклянная» поверхность с подсветкой под курсором */
.dk, .hm-row {
  --sx: 50%; --sy: -40%;
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  transition: border-color .25s, transform .35s cubic-bezier(.22,1,.3,1), box-shadow .3s; }
.dk::before, .hm-row::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  transition: opacity .3s; pointer-events: none;
  background: radial-gradient(360px circle at var(--sx) var(--sy),
    color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%); }
.dk:hover, .hm-row:hover, .dk:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 22px 50px -26px rgba(0,0,0,.6); }
.dk:hover::before, .hm-row:hover::before, .dk:focus-visible::before { opacity: 1; }

/* ── рабочий стол ────────────────────────────────────────────────────────
   Шесть карточек вместо трёх разделов, говоривших одно и то же. Первые две
   шире: в них больше всего живых чисел — открытый день и последний прогон.
   Ниже 1020 px сетка складывается в один столбец, и «шире» перестаёт
   значить что-либо само собой. */
.hm-desk { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1020px) { .hm-desk { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dk.wide { grid-column: span 2; } }
@media (max-width: 720px) { .hm-desk { grid-template-columns: minmax(0, 1fr); } }

.dk { display: flex; flex-direction: column; gap: 13px; padding: 16px 18px 14px;
  text-align: left; color: var(--text); cursor: pointer; min-height: 168px;
  transform-style: preserve-3d; }
.dk:focus { outline: none; }
.dk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Полоска по верхнему краю: у карточки с плюсом она зелёная, с минусом —
   красная, у остальных акцентная. Она же и есть вся «раскраска» карточки:
   заливать фон целиком значит перекрасить текст в цвет настроения. */
.dk-edge { position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .5; transform: scaleX(.35); transform-origin: 50% 50%;
  transition: transform .45s cubic-bezier(.22,1,.3,1), opacity .3s; }
.dk:hover .dk-edge, .dk:focus-visible .dk-edge { transform: scaleX(1); opacity: 1; }
.dk.up .dk-edge { background: linear-gradient(90deg, transparent, var(--up), transparent); }
.dk.dn .dk-edge { background: linear-gradient(90deg, transparent, var(--down), transparent); }

.dk-h { display: flex; align-items: flex-start; gap: 12px; }
.dk-i { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center;
  border-radius: 11px; color: var(--accent); background: var(--accent-sf);
  transition: transform .34s cubic-bezier(.22,1,.3,1), background .25s, color .25s; }
.dk-i svg { width: 18px; height: 18px; }
.dk:hover .dk-i { transform: scale(1.08) rotate(-5deg);
  background: color-mix(in srgb, var(--accent) 22%, transparent); }
.dk.up .dk-i { color: var(--up); background: color-mix(in srgb, var(--up) 13%, transparent); }
.dk.dn .dk-i { color: var(--down); background: color-mix(in srgb, var(--down) 13%, transparent); }
.dk-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.dk-t b { font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.dk-t em { font-style: normal; color: var(--muted); font-size: 12px; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; }
.dk.up .dk-t em { color: var(--up); }
.dk.dn .dk-t em { color: var(--down); }
.dk-go { flex: 0 0 auto; color: var(--muted); display: grid; place-items: center;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .25s, transform .3s cubic-bezier(.22,1,.3,1), color .2s; }
.dk-go svg { width: 17px; height: 17px; }
.dk:hover .dk-go, .dk:focus-visible .dk-go { opacity: 1; transform: none; color: var(--accent); }
/* Кольцо и стрелка занимают одно место: если есть кольцо, стрелке там нечего
   делать — она появится на кнопке внизу. */
.dk .hm-ring + .dk-go { display: none; }

.dk-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; margin: 0; }
.dk.wide .dk-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .dk.wide .dk-kv { grid-template-columns: 1fr 1fr; } }
.dk-kv dt { color: var(--muted); font-size: 10.5px; margin: 0; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-kv dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums;
  letter-spacing: -.015em; }
.dk-note { color: var(--muted); font-size: 12px; line-height: 1.6; margin: -2px 0 0;
  max-width: 46ch; }

.dk-a { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; padding-top: 2px; }
.dk-b { display: inline-flex; align-items: center; gap: 5px; height: 29px; padding: 0 13px;
  border-radius: 999px; cursor: pointer; border: 1px solid var(--line);
  background: transparent; color: var(--text-2); font: inherit; font-size: 11.5px;
  transition: border-color .18s, color .18s, background .18s; }
.dk-b:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-sf); }
.dk-b.prime { border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--accent); background: var(--accent-sf); }
.dk-b.prime:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.dk-arr { display: grid; place-items: center; margin-right: -3px;
  transition: transform .26s cubic-bezier(.22,1,.3,1); }
.dk-arr svg { width: 15px; height: 15px; }
.dk-b.prime:hover .dk-arr { transform: translateX(3px); }

/* кольцо с числом */
.hm-ring { position: relative; width: 62px; height: 62px; flex: 0 0 62px; display: grid;
  place-items: center; }
.hm-ring svg { position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg); }
.hm-ring circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.hm-ring-bg { stroke: var(--line); }
.hm-ring-v { stroke: var(--up); transition: stroke-dasharray .9s cubic-bezier(.22,1,.3,1); }
.hm-ring.dn .hm-ring-v { stroke: var(--down); }
.hm-ring b { font-size: 10.5px; font-weight: 640; font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; }
.hm-ring.up b { color: var(--up); }
.hm-ring.dn b { color: var(--down); }

.hm-arr { display: grid; place-items: center; flex: 0 0 auto; color: var(--muted);
  transition: transform .28s cubic-bezier(.22,1,.3,1), color .2s; }
.hm-arr svg { width: 18px; height: 18px; }
.hm-row:hover .hm-arr { transform: translateX(5px); color: var(--accent); }

/* ── «Посмотрите сами» ────────────────────────────────────────────────────
   Три работающих куска программы вместо трёх абзацев о ней. Карточка здесь
   не ведёт никуда целиком: в неё тыкают, она отвечает. Поэтому курсор
   обычный, а подсвечивается то, на что можно нажать. */
.dm-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1020px) { .dm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm.wide { grid-column: 1 / -1; } }

.dm { position: relative; isolation: isolate; overflow: hidden; display: flex;
  flex-direction: column; gap: 11px; padding: 15px 17px 14px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  transition: border-color .25s, box-shadow .3s; }
.dm:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: 0 22px 50px -26px rgba(0,0,0,.6); }

.dm-h { display: flex; align-items: baseline; gap: 10px; }
.dm-h b { font-size: 14px; font-weight: 640; letter-spacing: -.015em; }
.dm-h em { font-style: normal; color: var(--muted); font-size: 11.5px; }
/* Точка «считается прямо сейчас»: она не украшение, а обещание — всё в этой
   карточке посчитано из ленты в момент открытия страницы. */
.dm-live { margin-left: auto; width: 7px; height: 7px; border-radius: 999px;
  background: var(--up); flex: 0 0 7px; animation: dmLive 2.6s ease-out infinite; }
@keyframes dmLive {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 50%, transparent); }
  60%      { box-shadow: 0 0 0 5px transparent; }
}
[data-motion="off"] .dm-live { animation: none; }

.dm-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.dm-chip { height: 26px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text-2);
  font: inherit; font-size: 11.5px; white-space: nowrap;
  transition: border-color .16s, color .16s, background .16s, transform .16s; }
.dm-chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.dm-chip:active { transform: scale(.96); }
.dm-chip.on { color: var(--on-accent); border-color: transparent;
  background: linear-gradient(145deg, var(--accent), var(--accent-d)); }

/* Сцена: тёмная подложка под рисунком, чтобы свечи читались и в светлой теме. */
.dm-stage { position: relative; height: 150px; border-radius: var(--r-sm);
  border: 1px solid var(--line-soft); overflow: hidden;
  background: color-mix(in srgb, var(--bg) 60%, var(--panel-2)); }
.dm-svg { display: block; width: 100%; height: 100%; }
/* Бары проявляются волной слева направо — видно, что картинку рисуют, а не
   показывают готовой. */
.dm-bar { opacity: 0; animation: dmPop .34s cubic-bezier(.22,1,.3,1) forwards; animation-delay: var(--d); }
@keyframes dmPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Линия индикатора вычерчивается: длина пути заранее неизвестна, поэтому
   берём заведомо большую — на 520 пикселях ширины этого с запасом хватает. */
.dm-draw { stroke-dasharray: 4000; stroke-dashoffset: 4000;
  animation: dmDraw 1.5s cubic-bezier(.4,0,.2,1) forwards; animation-delay: var(--d, 0ms); }
@keyframes dmDraw { to { stroke-dashoffset: 0; } }
[data-motion="off"] .dm-bar, [data-motion="off"] .dm-draw,
[data-motion="reduced"] .dm-bar, [data-motion="reduced"] .dm-draw {
  animation: none; opacity: 1; stroke-dashoffset: 0; transform: none; }

.dm-cap { display: flex; align-items: baseline; gap: 9px; }
.dm-cap b { font-size: 12.5px; font-weight: 600; }
.dm-cap span { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.dm-code { display: block; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--line-soft);
  font: 11.5px/1.5 var(--mono); color: var(--accent);
  overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.dm-code::-webkit-scrollbar { display: none; }
.dm-note { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.6; }

.dm-chips.small .dm-chip { height: 23px; padding: 0 9px; font-size: 11px; }

/* Цепочка механик стратегии: не картинка схемы, а разбор настоящего объекта.
   Каждая плитка — включённая механика с теми числами, что в ней стоят. */
.dm-chain { display: flex; gap: 8px; flex-wrap: wrap; }
.dm-mech { flex: 1 1 190px; min-width: 0; display: flex; flex-direction: column; gap: 7px;
  padding: 11px 13px; border-radius: var(--r-sm); cursor: pointer; text-align: left;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font: inherit; opacity: 0; position: relative; overflow: hidden;
  animation: dmPop .4s cubic-bezier(.22,1,.3,1) forwards; animation-delay: var(--d);
  transition: border-color .18s, transform .22s cubic-bezier(.22,1,.3,1), background .18s; }
.dm-mech:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  transform: translateY(-2px); background: var(--raise); }
.dm-mech > b { font-size: 12.5px; font-weight: 620; }
.dm-mech-v { display: flex; flex-direction: column; gap: 3px; }
.dm-mech-v i { display: flex; justify-content: space-between; gap: 10px; font-style: normal;
  font-size: 11px; color: var(--muted); }
.dm-mech-v i b { color: var(--text-2); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-motion="off"] .dm-mech, [data-motion="reduced"] .dm-mech { animation: none; opacity: 1; }

.dm-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-rules span { padding: 5px 11px; border-radius: 999px; font-size: 11.5px;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--text-2); background: var(--accent-sf); opacity: 0;
  animation: dmPop .4s cubic-bezier(.22,1,.3,1) forwards; animation-delay: var(--d); }
.dm-rules .more { border-style: solid; background: transparent; color: var(--muted); }
[data-motion="off"] .dm-rules span, [data-motion="reduced"] .dm-rules span {
  animation: none; opacity: 1; }

.dm-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px 16px; }
.dm-kv dt { color: var(--muted); font-size: 10.5px; margin: 0; }
.dm-kv dd { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums;
  letter-spacing: -.015em; }

.dm-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 2px; }
.dm-foot > span { color: var(--muted); font-size: 11.5px; line-height: 1.5;
  flex: 1 1 auto; min-width: 0; }
.dm-foot .dk-b { flex: 0 0 auto; }

/* строки «недавнего» */
.hm-rows { display: flex; flex-direction: column; gap: 7px; }
.hm-row { display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
  padding: 11px 14px; color: var(--text); }
.hm-row-i { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center;
  border-radius: 8px; color: var(--accent); background: var(--accent-sf); }
.hm-row-i svg { width: 14px; height: 14px; }
.hm-row b { font-size: 13px; font-weight: 600; }
.hm-row-s { color: var(--muted); font-size: 11.5px; flex: 1 1 auto; }

/* бегущая строка индикаторов */
.hm-mq { margin: 6px 0 40px; overflow: hidden; }
.hm-mq-in { display: flex; width: max-content;
  animation: hmMq 90s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hm-mq:hover .hm-mq-in { animation-play-state: paused; }
.hm-mq-row { display: flex; gap: 9px; padding-right: 9px; }
.hm-mq-row span { white-space: nowrap; font-size: 11.5px; color: var(--muted);
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--panel) 50%, transparent); }
@keyframes hmMq { to { transform: translateX(-50%); } }
[data-motion="off"] .hm-mq-in { animation: none; }
.hm-mq-cap { margin-top: 14px; color: var(--muted); font-size: 11.5px; text-align: center; }

.hm-empty, .hm-foot { color: var(--muted); font-size: 12px; line-height: 1.7; max-width: 80ch; }
.hm-foot { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--line-soft); }

/* спокойный режим: ничего не летает, но всё на месте */
[data-motion="off"] .hm-mark, [data-motion="off"] .hm-title span,
[data-motion="off"] .hm-scroll i, [data-motion="off"] .hm-tape-l,
[data-motion="off"] .hm-tape-a { animation: none; }
[data-motion="off"] .hm-tape-l { stroke-dashoffset: 0; }
[data-motion="off"] .hm-tape-a { opacity: 1; }
[data-motion="off"] .hm-title span { color: var(--text); background: none;
  -webkit-background-clip: border-box; background-clip: border-box; }
[data-motion="off"] .hm-scroll { display: none; }
[data-motion="reduced"] .hm-mark, [data-motion="reduced"] .hm-title span { animation: none; }
[data-motion="reduced"] .hm-title span { color: var(--text); background: none;
  -webkit-background-clip: border-box; background-clip: border-box; }

@media (max-width: 760px) {
  .hm-hero { min-height: auto; padding-top: 74px; padding-bottom: 36px; }
  .hm-bar { position: static; margin-bottom: 22px; }
  .hm-scroll { display: none; }
  .hm-kv { grid-template-columns: 1fr; }
}

/* ── экран настроек ─────────────────────────────────────────────────────── */
.sg { display: flex; gap: 26px; max-width: 1180px; margin: 0 auto; padding: 22px 26px 60px;
  align-items: flex-start; }
.sg-nav { flex: 0 0 236px; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 3px; }
.sg-back { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
  margin-bottom: 10px; border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--muted); cursor: pointer; font: inherit; font-size: 12.5px; }
.sg-back:hover { background: var(--panel-2); color: var(--text); }
.sg-back svg { width: 16px; height: 16px; }
.sg-s { display: flex; flex-direction: column; gap: 1px; text-align: left; cursor: pointer;
  border: 0; border-radius: var(--r-sm); background: transparent; padding: 9px 11px;
  color: var(--text-2); transition: background .14s, color .14s; }
.sg-s:hover { background: var(--panel-2); color: var(--text); }
.sg-s.on { background: var(--accent-sf); color: var(--accent); }
.sg-s b { font-size: 13px; font-weight: 600; }
.sg-s i { font-style: normal; font-size: 11px; color: var(--muted); line-height: 1.4; }
.sg-s.on i { color: color-mix(in srgb, var(--accent) 70%, var(--muted)); }
.sg-body { flex: 1 1 auto; min-width: 0; max-width: 880px; }
.sg-h { margin: 0 0 4px; font-size: 20px; font-weight: 660; letter-spacing: -.02em; }
.sg-d { margin: 0 0 20px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.sg-row { display: flex; gap: 20px; align-items: flex-start; padding: 14px 0;
  border-top: 1px solid var(--line-soft); }
.sg-row:first-of-type { border-top: 0; }
.sg-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sg-t b { font-size: 13px; font-weight: 600; }
.sg-t i { font-style: normal; color: var(--muted); font-size: 11.5px; line-height: 1.55; max-width: 52ch; }
.sg-c { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  justify-content: flex-end; max-width: 60%; }
.sg-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--line); flex-wrap: wrap; }
.sg-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: calc(var(--r-sm) - 2px);
  background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
  transition: background .14s, color .14s; }
.sg-seg button:hover { color: var(--text); }
.sg-seg button.on { background: var(--accent-sf); color: var(--accent); font-weight: 600; }
.sg-acc { display: flex; gap: 6px; flex-wrap: wrap; }
.sg-acc button { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 8px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; transition: border-color .14s; }
.sg-acc button span { width: 13px; height: 13px; border-radius: 50%; }
.sg-acc button.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.sg-sw { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12.5px;
  color: var(--text-2); }
.sg-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sg-sw span { width: 36px; height: 21px; border-radius: 999px; background: var(--raise);
  border: 1px solid var(--line); position: relative; transition: background .16s, border-color .16s; }
.sg-sw span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--muted); transition: transform .16s, background .16s; }
.sg-sw input:checked + span { background: var(--accent-sf); border-color: var(--accent); }
.sg-sw input:checked + span::after { transform: translateX(15px); background: var(--accent); }
.sg-sl { display: flex; align-items: center; gap: 10px; }
.sg-sl input[type="range"] { width: 190px; accent-color: var(--accent); }
.sg-sl b { font-variant-numeric: tabular-nums; font-size: 12.5px; min-width: 46px; text-align: right; }
.sg-i { height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel-2); color: var(--text); font: inherit; font-size: 12.5px; width: 220px; }
.sg-i:focus { outline: none; border-color: var(--accent); }
.sg-list { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.sg-li { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--panel); padding: 9px 12px; }
.sg-li-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sg-li-t b { font-size: 12.5px; font-weight: 600; }
.sg-li-t i { font-style: normal; color: var(--muted); font-size: 11px; }
.sg-mv { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--text-2); cursor: pointer; font-size: 13px; }
.sg-mv:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.sg-mv:disabled { opacity: .3; cursor: default; }
.sg-note { color: var(--muted); font-size: 11.5px; line-height: 1.65; margin: 16px 0 0; max-width: 78ch; }
.sg-about { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 20px;
  margin: 0; }
.sg-about div { display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--line-soft);
  padding-bottom: 8px; }
.sg-about dt { color: var(--muted); font-size: 11px; margin: 0; }
.sg-about dd { margin: 0; font-size: 13px; }
@media (max-width: 900px) {
  .sg { flex-direction: column; }
  .sg-nav { position: static; flex: 1 1 auto; width: 100%; flex-direction: row; overflow-x: auto; }
  .sg-s i { display: none; }
  .sg-row { flex-direction: column; gap: 8px; }
  .sg-c { max-width: none; justify-content: flex-start; }
}

/* ── Анализ: две вкладки ────────────────────────────────────────────────── */
#view-analysis .vbody { display: block; }
.an-wrap { display: flex; flex-direction: column; height: 100%; }
.an-tabs { display: flex; align-items: center; gap: 4px; padding: 10px 18px;
  border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.an-tabs .tab i { font-style: normal; font-size: 10.5px; opacity: .7; margin-left: 4px; }
/* Вкладка «Мой разбор» — это сводка сверху и привычный список записок под ней.
   Список должен занимать всё оставшееся место: иначе он схлопывается в полоску. */
.an-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.an-body > #anHabits { flex: 0 0 auto; }
.an-body > #anNotes { flex: 1 1 auto; min-height: 460px; display: flex; }
.an-body > #anNotes .an { flex: 1 1 auto; }

/* сводка по запискам */
.hb { margin: 16px 18px; padding: 16px 18px 14px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--panel); }
.hb-empty { color: var(--muted); font-size: 12.5px; line-height: 1.7; max-width: 82ch; }
.hb-h { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.hb-h b { font-size: 14px; font-weight: 640; }
.hb-h span { color: var(--muted); font-size: 11.5px; }
.hb-k { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 14px; }
.hb-kk { display: flex; align-items: baseline; gap: 7px; }
.hb-kk i { width: 8px; height: 8px; border-radius: 50%; }
.hb-kk b { font-size: 18px; font-weight: 660; font-variant-numeric: tabular-nums; }
.hb-kk span { color: var(--muted); font-size: 11.5px; }
.hb-s { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin: 12px 0 7px; }
.hb-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.hb-tags .chip i { font-style: normal; opacity: .6; font-size: 10.5px; }
.hb-l { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; line-height: 1.6; color: var(--text-2); max-width: 90ch; }
.hb-l b { color: var(--text); }
.hb-go { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit;
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.hb-n { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  color: var(--muted); font-size: 11.5px; line-height: 1.6; max-width: 88ch; }

/* ── Быстрый разбор ─────────────────────────────────────────────────────── */
.pb { display: flex; gap: 16px; align-items: flex-start; padding: 18px;
  max-width: 1500px; margin: 0 auto; }
.pb-left { flex: 0 0 258px; position: sticky; top: 0; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--panel); padding: 12px 10px; }
.pb-right { flex: 0 0 258px; position: sticky; top: 0; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--panel); padding: 12px 14px 14px; }
.pb-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1180px) {
  .pb { flex-wrap: wrap; }
  .pb-left, .pb-right { position: static; flex: 1 1 260px; }
  .pb-mid { flex: 1 1 100%; order: 3; }
}

.pb-p-h { display: flex; flex-direction: column; gap: 2px; padding: 2px 8px 10px; }
.pb-p-h b { font-size: 13px; font-weight: 620; }
.pb-p-h span { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.pb-g { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  margin: 10px 0 4px; padding: 0 8px; }
.pb-s { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; border-radius: var(--r-sm); background: transparent; padding: 6px 8px;
  color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: background .14s, color .14s; }
.pb-s:disabled { cursor: default; color: var(--muted); }
.pb-s:not(:disabled):hover { background: var(--panel-2); color: var(--text); }
.pb-s.on { background: var(--accent-sf); color: var(--accent); }
.pb-s span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.pb-s em { font-style: normal; font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.pb-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  border: 1.5px solid var(--line); }
.pb-s.done .pb-dot { background: var(--up); border-color: var(--up); }
.pb-s.fail .pb-dot { background: var(--down); border-color: var(--down); }
.pb-s.run .pb-dot { border-color: var(--accent); border-top-color: transparent;
  animation: pbSpin .8s linear infinite; }
.pb-s.run em { color: var(--accent); }
@keyframes pbSpin { to { transform: rotate(360deg); } }
[data-motion="off"] .pb-s.run .pb-dot { animation: none; border-color: var(--accent); }
.pb-again, .pb-exp { width: 100%; margin-top: 12px; height: 30px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: transparent; color: var(--text-2);
  font: inherit; font-size: 12px; cursor: pointer; }
.pb-again:hover, .pb-exp:hover { border-color: var(--accent); color: var(--accent); }

.pb-c-h { font-size: 13px; font-weight: 620; margin-bottom: 12px; }
.pb-c-r { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pb-c-r b { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.pb-c-r i { font-style: normal; color: var(--muted); font-size: 11px; line-height: 1.5; }
.pb-seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--line); }
.pb-seg button { flex: 1 1 auto; height: 25px; padding: 0 8px; border: 0;
  border-radius: calc(var(--r-sm) - 2px); background: transparent; color: var(--muted);
  font: inherit; font-size: 11.5px; cursor: pointer; }
.pb-seg button.on { background: var(--accent-sf); color: var(--accent); font-weight: 600; }

/* приглашение */
.pb-intro { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
  padding: 34px 30px; text-align: center; }
.pb-intro-i { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 16px;
  display: grid; place-items: center; color: var(--accent); background: var(--accent-sf); }
.pb-intro-i svg { width: 26px; height: 26px; }
.pb-intro h2 { margin: 0 0 10px; font-size: 22px; font-weight: 660; letter-spacing: -.02em; }
.pb-intro p { margin: 0 auto 18px; max-width: 64ch; color: var(--text-2); font-size: 13px;
  line-height: 1.7; }
.pb-intro-f { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap;
  margin-bottom: 20px; }
.pb-intro-f span { color: var(--muted); font-size: 11.5px; }
.pb-intro-f b { display: block; color: var(--text); font-size: 18px; font-weight: 660;
  font-variant-numeric: tabular-nums; }
.pb-go { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 24px;
  border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px;
  font-weight: 600; color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-d));
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--accent) 75%, transparent);
  transition: transform .2s cubic-bezier(.22,1,.3,1), box-shadow .25s; }
.pb-go:hover { transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--accent) 85%, transparent); }
.pb-go svg { width: 17px; height: 17px; }
.pb-note { color: var(--muted) !important; font-size: 11.5px !important; margin-top: 16px !important; }

/* отчёты */
.pb-r { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
  padding: 13px 16px 12px; animation: pbIn .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes pbIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
[data-motion="off"] .pb-r { animation: none; }
.pb-r.open { border-color: var(--accent); }
.pb-r-h { display: flex; align-items: baseline; gap: 9px; cursor: pointer; margin-bottom: 10px; }
.pb-r-h b { font-size: 13.5px; font-weight: 640; }
.pb-r-h em { font-style: normal; color: var(--muted); font-size: 11px; text-align: right; }
.pb-tag { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; color: var(--accent);
  background: var(--accent-sf); }
.pb-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 20px;
  margin: 0 0 10px; }
.pb-kv > div { display: flex; flex-direction: column; gap: 1px; }
.pb-kv dt { color: var(--muted); font-size: 10.5px; margin: 0; }
.pb-kv dd { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pb-kv i { font-style: normal; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.pb-t { margin: 0; color: var(--text-2); font-size: 12.5px; line-height: 1.68; max-width: 92ch; }
.pb-t.neg { color: var(--down); }
.pb-foot { color: var(--muted); font-size: 11.5px; line-height: 1.65; max-width: 92ch;
  padding-top: 8px; }

/* профиль по часам */
.pb-hours { display: flex; align-items: flex-end; gap: 3px; height: 92px; margin: 4px 0 14px;
  position: relative; }
.pb-h { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; gap: 2px;
  position: relative; }
.pb-h i { flex: 1 1 0; border-radius: 2px 2px 0 0; min-height: 2px; }
.pb-h-r { background: var(--accent); }
.pb-h-v { background: color-mix(in srgb, var(--blue) 55%, transparent); }
.pb-h span { position: absolute; left: 0; right: 0; bottom: -15px; text-align: center;
  font-size: 9.5px; color: var(--muted); }
.pb-h-leg { position: absolute; right: 0; top: -4px; display: flex; gap: 12px; font-size: 10.5px; }
.pb-h-leg span { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.pb-h-leg span::before { content: ''; width: 8px; height: 8px; border-radius: 2px; }
.pb-h-leg .r::before { background: var(--accent); }
.pb-h-leg .v::before { background: color-mix(in srgb, var(--blue) 55%, transparent); }

/* вердикт */
.pb-v { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 14px;
  background: var(--panel); position: relative; overflow: hidden; }
.pb-v::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; }
.pb-v.ok::before { background: var(--up); }
.pb-v.warn::before { background: var(--accent); }
.pb-v.bad::before { background: var(--down); }
.pb-v-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.pb-v-b { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pb-v-h b { font-size: 19px; font-weight: 680; letter-spacing: -.02em; }
.pb-v.ok .pb-v-h b { color: var(--up); }
.pb-v.warn .pb-v-h b { color: var(--accent); }
.pb-v.bad .pb-v-h b { color: var(--down); }
.pb-v-c { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; }
.pb-v-l b { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pb-v-l ul { margin: 5px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.pb-v-l.ok li::marker { color: var(--up); }
.pb-v-l.warn li::marker { color: var(--accent); }
.pb-v-l.bad li::marker { color: var(--down); }
.pb-v-n { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft);
  color: var(--muted); font-size: 11.5px; line-height: 1.6; }

/* ── Главная: как это работает ──────────────────────────────────────────── */
.hm-how { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  position: relative; }
.hm-step { position: relative; padding: 20px 18px 16px; border: 1px solid var(--line);
  border-radius: var(--r); background: color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%); display: flex; flex-direction: column; gap: 8px;
  transition: border-color .25s, transform .3s cubic-bezier(.22,1,.3,1); }
.hm-step:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  transform: translateY(-3px); }
.hm-step-n { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--accent) 55%, transparent);
  margin-bottom: 2px; }
.hm-step b { font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.hm-step p { margin: 0; color: var(--text-2); font-size: 12.5px; line-height: 1.62; flex: 1 1 auto; }
.hm-step-b { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px;
  font-weight: 600; color: var(--accent); }
.hm-step-b svg { width: 15px; height: 15px; transition: transform .25s cubic-bezier(.22,1,.3,1); }
.hm-step-b:hover svg { transform: translateX(4px); }

/* Картинка шага. Не иконка, а кусочек самого дела: линия вашего дня, цепочка
   блоков, счёт секунд, имена настоящих проверок. Поэтому у каждой свой вид и
   общая только рамка. */
.hw-art { height: 76px; border-radius: var(--r-sm); border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 55%, var(--panel-2)); overflow: hidden;
  display: flex; align-items: center; margin: 2px 0 4px; }
.hw-art .dm-svg { height: 76px; }

.hw-blocks { display: flex; align-items: center; gap: 3px; width: 100%; padding: 0 10px; }
.hw-blk { flex: 0 0 auto; padding: 5px 8px; border-radius: 7px; font-size: 10.5px;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--blue) 45%, var(--line));
  color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent);
  opacity: 0; animation: dmPop .4s cubic-bezier(.22,1,.3,1) forwards; animation-delay: var(--d); }
.hw-blk.act { border-color: color-mix(in srgb, var(--up) 45%, var(--line));
  color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); }
/* Провод между блоками вытягивается — ровно так его и тянут на холсте. */
.hw-wire { flex: 1 1 auto; min-width: 8px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 65%, transparent),
                                     color-mix(in srgb, var(--up) 65%, transparent));
  transform: scaleX(0); transform-origin: left;
  animation: hwWire .34s ease forwards; animation-delay: var(--d); }
@keyframes hwWire { to { transform: scaleX(1); } }

.hw-run { flex-direction: column; justify-content: center; gap: 4px; padding: 0 14px;
  align-items: stretch; }
.hw-run-n { display: flex; align-items: baseline; gap: 7px; }
.hw-run-n b { font-size: 16px; font-weight: 660; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; }
.hw-run-n i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.hw-run-bar { height: 3px; border-radius: 999px; background: var(--line); overflow: hidden;
  margin-top: 4px; }
.hw-run-bar i { display: block; height: 100%; width: 40%; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: hwSweep 2.2s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes hwSweep { from { transform: translateX(-110%); } to { transform: translateX(310%); } }

.hw-checks { flex-wrap: wrap; align-content: center; gap: 5px; padding: 0 12px; }
.hw-checks span { padding: 4px 9px; border-radius: 999px; font-size: 10.5px;
  border: 1px solid var(--line); color: var(--text-2); background: var(--panel-2);
  opacity: 0; animation: dmPop .4s cubic-bezier(.22,1,.3,1) forwards; animation-delay: var(--d); }

[data-motion="off"] .hw-blk, [data-motion="off"] .hw-checks span,
[data-motion="reduced"] .hw-blk, [data-motion="reduced"] .hw-checks span {
  animation: none; opacity: 1; }
[data-motion="off"] .hw-wire, [data-motion="reduced"] .hw-wire {
  animation: none; transform: none; }
[data-motion="off"] .hw-run-bar i { animation: none; width: 100%; }

/* ── Главная: что умеет ───────────────────────────────────────────────────
   Шестнадцать плиток подряд читаются как склад. Четыре кучки с заголовком и
   счётчиком читаются как оглавление: видно, из чего программа состоит, ещё
   до того, как прочитан хоть один пункт. */
.ft-groups { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px)  { .ft-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .ft-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ft-g { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ft-g-h { display: flex; align-items: center; gap: 10px; padding: 0 2px 2px; }
.ft-g-i { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center;
  border-radius: 9px; color: var(--accent); background: var(--accent-sf); }
.ft-g-i svg { width: 15px; height: 15px; }
.ft-g-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.ft-g-t b { font-size: 12.5px; font-weight: 640; letter-spacing: -.01em; }
.ft-g-t i { font-style: normal; font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.ft-g-h > em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--accent);
  min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center;
  border-radius: 999px; background: var(--accent-sf); }

.ft-list { display: flex; flex-direction: column; gap: 7px; }
.ft { --sx: 50%; --sy: -40%;
  position: relative; isolation: isolate; overflow: hidden; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%); font: inherit;
  transition: border-color .22s, transform .28s cubic-bezier(.22,1,.3,1); }
.ft::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  transition: opacity .3s; pointer-events: none;
  background: radial-gradient(280px circle at var(--sx) var(--sy),
    color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%); }
.ft:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  transform: translateX(3px); }
.ft:hover::before { opacity: 1; }
.ft-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ft-h b { font-size: 13px; font-weight: 640; letter-spacing: -.01em; }
.ft-h em { font-style: normal; color: var(--accent); font-size: 11px; }
.ft-arr { margin-left: auto; align-self: center; display: grid; place-items: center;
  color: var(--muted); opacity: 0; transform: translateX(-5px);
  transition: opacity .22s, transform .28s cubic-bezier(.22,1,.3,1), color .2s; }
.ft-arr svg { width: 15px; height: 15px; }
.ft:hover .ft-arr { opacity: 1; transform: none; color: var(--accent); }
/* Описание видно всегда — две строки; под курсором разворачивается целиком.
   Прятать его совсем было бы странно: человек пришёл узнать, что программа
   умеет, а ему показали одни заголовки. */
.ft-d { color: var(--text-2); font-size: 11.5px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; transition: color .2s; }
.ft:hover .ft-d, .ft:focus-visible .ft-d { -webkit-line-clamp: 4; color: var(--text); }
@media (hover: none) { .ft-arr { opacity: 1; transform: none; } }

/* ── Главная: каталог проверок ──────────────────────────────────────────── */
.hm-checks { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.hm-check-g h3 { margin: 0 0 8px; font-size: 11px; font-weight: 640; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: 8px; }
.hm-check-g h3 em { font-style: normal; letter-spacing: 0; font-size: 10.5px;
  min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center;
  border-radius: 999px; background: var(--accent-sf); }
.hm-check-g h3::after { content: ''; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent); }
.hm-check { --sx: 50%; --sy: -40%;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  gap: 3px; width: 100%; text-align: left; cursor: pointer; padding: 10px 13px; margin-bottom: 6px;
  color: var(--text); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--panel) 62%, transparent);
  transition: border-color .2s, background .2s; }
.hm-check::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  transition: opacity .3s; pointer-events: none;
  background: radial-gradient(220px circle at var(--sx) var(--sy),
    color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%); }
.hm-check:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.hm-check:hover::before { opacity: 1; }
.hm-check { opacity: 0; animation: dmPop .4s cubic-bezier(.22,1,.3,1) forwards;
  animation-delay: var(--d, 0ms); }
[data-motion="off"] .hm-check, [data-motion="reduced"] .hm-check { animation: none; opacity: 1; }
.hm-check b { font-size: 12.5px; font-weight: 600; }
.hm-check span { color: var(--muted); font-size: 11.5px; line-height: 1.5; }

/* ── всплывающий список у кнопки ──────────────────────────────────────────
   Один вид на все списки программы: таймфреймы, вид графика, бумаги,
   рисовалка. Раньше каждый делали заново, и они расходились в мелочах —
   один закрывался по Escape, другой нет. */
.pop {
  position: fixed; z-index: 400; min-width: 210px; max-width: 92vw;
  max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain;
  padding: 5px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--panel); box-shadow: var(--shadow);
  animation: popIn .16s cubic-bezier(.22,1,.3,1);
}
.pop.wide { min-width: min(720px, 94vw); padding: 0; overflow: hidden;
  max-height: min(78vh, 680px); display: flex; flex-direction: column; }
.pop.pop-out { opacity: 0; transform: translateY(-4px); transition: opacity .12s, transform .12s; }
@keyframes popIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
[data-motion="off"] .pop { animation: none; }
.pop::-webkit-scrollbar { width: 8px; }

.pop-h { padding: 7px 10px 8px; font-size: 11px; font-weight: 640; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); display: flex; align-items: baseline; gap: 8px; }
.pop-h span { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 10.5px; }
.pop-g { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 640; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); }
.pop-sep { height: 1px; margin: 5px 4px; background: var(--line); }

.pop-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text);
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; position: relative;
  transition: background .14s; }
.pop-i:hover { background: var(--panel-2); }
.pop-i.on { background: var(--accent-sf); }
.pop-i.on > .pop-i-t b { color: var(--accent); }
.pop-i-i { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center;
  color: var(--muted); }
.pop-i.on .pop-i-i { color: var(--accent); }
.pop-i-i svg { width: 18px; height: 18px; stroke-width: 1.4; }
.pop-i-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.pop-i-t b { font-weight: 560; }
.pop-i-t i { font-style: normal; font-size: 11px; color: var(--muted); line-height: 1.4; }
.pop-i > em { font-style: normal; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.pop-pin { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 6px; color: var(--line); opacity: 0; transition: opacity .15s, color .15s; }
.pop-i:hover .pop-pin, .pop-pin.on { opacity: 1; }
.pop-pin.on { color: var(--accent); }
.pop-pin:hover { background: var(--raise); color: var(--accent); }
.pop-pin svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.pop-open { border-color: var(--accent) !important; }

/* кнопка «ещё» в ленте таймфреймов */
.tf-more { min-width: 26px !important; padding: 0 5px !important; color: var(--muted); }
.tf-more svg { width: 13px; height: 13px; }
.tf-more:hover { color: var(--text); }

/* ── бумага в шапке ───────────────────────────────────────────────────────
   Раньше это была серая подпись рядом с названием программы. Лент будет
   больше одной, и бумага — первое, что человек меняет: значит, кнопка. */
.symbtn { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px;
  border-radius: var(--r-sm); cursor: pointer; font: inherit; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  transition: border-color .18s, background .18s; }
.symbtn:hover { border-color: var(--accent); background: var(--raise); }
.symbtn-t { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.symbtn-s { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.symbtn svg { width: 13px; height: 13px; color: var(--muted); }

/* ── бэктест в шапке боковой панели ───────────────────────────────────── */
.side-run { display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft); }
.side-run .select.tiny { flex: 1 1 auto; min-width: 0; max-width: none; }
.btn.tiny { height: 28px; padding: 0 10px; font-size: 12px; gap: 5px; }
.btn.tiny.icon { width: 28px; padding: 0; }
.btn.tiny svg { width: 14px; height: 14px; }
.side .stratbar { margin: 8px 10px 0; max-width: none; }
.side .stratbar { background: transparent; border: 0; padding: 0 2px; height: auto;
  min-height: 22px; gap: 8px; }
.side .stratbar > span { flex: 1 1 auto; }

/* ── выбор бумаги ─────────────────────────────────────────────────────────
   Два разных списка в одном окне: ленты, по которым график открывается, и
   бумаги с биржи, под которые ленту ещё надо записать. Их нельзя смешивать,
   поэтому у каждой строки справа стоит отметка, что это. */
.pop.sym { width: min(720px, 94vw); }
.sym-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.sym-mag { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted); }
.sym-q { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 15px; color: var(--text); }
.sym-q::placeholder { color: var(--muted); }
.sym-x { width: 24px; height: 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--panel-2); color: var(--muted); font-size: 11px; }
.sym-x:hover { color: var(--text); background: var(--raise); }

.sym-body { flex: 1 1 auto; overflow-y: auto; padding: 5px; min-height: 180px; }
.sym-g { display: flex; align-items: center; gap: 8px; padding: 12px 10px 6px;
  font-size: 10.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); }
.sym-g em { font-style: normal; letter-spacing: 0; min-width: 18px; height: 18px;
  padding: 0 5px; display: grid; place-items: center; border-radius: 999px;
  background: var(--accent-sf); }
.sym-g span { text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--muted); }

.sym-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text);
  font: inherit; text-align: left; cursor: pointer; transition: background .14s; }
.sym-i:hover { background: var(--panel-2); }
.sym-i.on { background: var(--accent-sf); }
.sym-t { flex: 0 0 76px; font: 700 14px/1.2 var(--mono); letter-spacing: -.01em; }
.sym-i.on .sym-t { color: var(--accent); }
.sym-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sym-n b { font-size: 12.5px; font-weight: 560; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sym-n i { font-style: normal; font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sym-b { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 10.5px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.sym-b.ok { border-color: color-mix(in srgb, var(--up) 45%, var(--line)); color: var(--up); }
.sym-b.on { border-color: transparent; color: var(--on-accent);
  background: linear-gradient(145deg, var(--accent), var(--accent-d)); }

.sym-wait, .sym-none { padding: 14px 12px; color: var(--muted); font-size: 12px;
  line-height: 1.6; }
.sym-err { display: flex; flex-direction: column; gap: 4px; margin: 4px 6px;
  padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--down) 35%, var(--line));
  background: color-mix(in srgb, var(--down) 8%, transparent); }
.sym-err b { font-size: 12.5px; }
.sym-err span { color: var(--muted); font-size: 11.5px; line-height: 1.55; }

.sym-f { flex: 0 0 auto; padding: 10px 14px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11px; line-height: 1.5; }

.pop.sym-howpop { width: min(520px, 92vw); }
.sym-how { padding: 4px 12px 10px; }
.sym-how p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.62; color: var(--text-2); }
.sym-how code { font: 11.5px var(--mono); color: var(--accent); }
.sym-cmd { display: block; padding: 10px 12px; margin: 0 0 10px; border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--line-soft);
  font: 11.5px/1.5 var(--mono); color: var(--accent);
  overflow-x: auto; white-space: nowrap; }
.sym-how-a { display: flex; gap: 8px; padding: 0 12px 12px; flex-wrap: wrap; }

/* ── календарь: режимы и крупные куски ────────────────────────────────── */
.cal-pop { width: 330px; }
.cal-mode { display: flex; gap: 3px; padding: 4px; margin: 0 0 6px;
  background: var(--panel-2); border-radius: var(--r-sm); }
.cal-mode button { flex: 1 1 0; height: 26px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--muted); font: inherit; font-size: 11.5px;
  transition: background .14s, color .14s; }
.cal-mode button:hover { color: var(--text); }
.cal-mode button.on { background: var(--raise); color: var(--text); font-weight: 560;
  box-shadow: 0 1px 3px rgba(0,0,0,.28); }

/* Период на сетке: края залиты акцентом, середина подкрашена. Так видно
   и что выбрано, и где границы, не читая подпись внизу. */
.cal-grid button.in { background: var(--accent-sf); border-radius: 0; }
.cal-grid button.in.nodata { opacity: .55; }
.cal-grid button.edge { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.cal-grid button.edge.a { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.cal-grid button.edge.b { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.cal-grid button.edge.a.b { border-radius: var(--r-sm); }
.cal-grid button.edge .dot { background: var(--on-accent); }

.cal-quick { display: flex; flex-direction: column; gap: 5px; padding: 8px 0 2px;
  border-top: 1px solid var(--line-soft); margin-top: 6px; }
.cal-quick[hidden] { display: none; }
.cal-q-r { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cal-q-r > span { flex: 0 0 62px; font-size: 10.5px; color: var(--muted); }
.cal-q-r .chip { padding: 3px 8px; font-size: 11px; }
.cal-q-r .chip:disabled { opacity: .3; cursor: default; }
.cal-q-r .chip.on { background: var(--accent); color: var(--on-accent);
  border-color: transparent; font-weight: 600; }

/* ── рисование на графике ─────────────────────────────────────────────────
   Свой холст поверх графика. Пока инструмент не выбран, он не ловит мышь
   совсем: панорама, масштаб и крестик работают как работали. */
.draw-cv { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3; }
.draw-cv.on { pointer-events: auto; }

#drawBar { gap: 2px; }
#drawBar .btn { position: relative; }
.btn.draw-t.on { color: var(--accent); background: var(--accent-sf); }
.btn.draw-c { position: relative; }
.draw-sw { display: block; width: 16px; border-radius: 2px; height: 3px;
  background: var(--accent); }
.draw-n { position: absolute; top: 2px; right: 2px; min-width: 13px; height: 13px;
  padding: 0 3px; border-radius: 999px; font-size: 9px; font-weight: 700;
  display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.draw-n[hidden] { display: none; }

.draw-pal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 2px 6px 8px; }
.draw-sw-b { width: 100%; aspect-ratio: 1; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; background: var(--c); transition: transform .15s; }
.draw-sw-b:hover { transform: scale(1.1); }
.draw-sw-b.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--panel) inset; }

.draw-ws { display: flex; gap: 6px; padding: 2px 6px 8px; }
.draw-w { flex: 1 1 0; height: 28px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--line); background: transparent; display: grid; place-items: center; }
.draw-w:hover { border-color: var(--accent); }
.draw-w.on { border-color: var(--accent); background: var(--accent-sf); }
.draw-w i { display: block; width: 26px; border-radius: 2px; background: var(--text-2); }
.draw-w.on i { background: var(--accent); }

/* ── индикаторы: каталог и то, что на графике ────────────────────────────
   Один экран вместо трёх по очереди. Слева ищут, справа настраивают и сразу
   видят настоящий ряд по открытому дню. */
#indModal .sheet { width: min(1060px, calc(100vw - 32px)); }
#indModal .sheet-body { padding: 0; }
.ip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  height: min(66vh, 620px); }
@media (max-width: 880px) { .ip { grid-template-columns: minmax(0, 1fr); height: auto; } }

.ip-cat { display: flex; flex-direction: column; min-width: 0;
  border-right: 1px solid var(--line); }
.ip-search { display: flex; align-items: center; gap: 9px; padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft); }
.ip-search svg { width: 15px; height: 15px; color: var(--muted); flex: 0 0 15px; }
.ip-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
  outline: none; font: inherit; font-size: 13.5px; color: var(--text); }
.ip-chips { display: flex; gap: 4px; overflow-x: auto; padding: 9px 14px;
  scrollbar-width: none; border-bottom: 1px solid var(--line-soft); }
.ip-chips::-webkit-scrollbar { display: none; }
.ip-chips .chip { flex: 0 0 auto; padding: 3px 9px; font-size: 11px; }
.ip-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 6px 10px; min-height: 160px; }

.ip-g { display: flex; align-items: center; gap: 8px; padding: 11px 8px 5px;
  font-size: 10.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); }
.ip-g em { font-style: normal; letter-spacing: 0; min-width: 17px; height: 17px;
  padding: 0 5px; display: grid; place-items: center; border-radius: 999px;
  background: var(--accent-sf); }
.ip-r { display: flex; align-items: center; gap: 9px; padding: 7px 8px; cursor: pointer;
  border-radius: var(--r-sm); transition: background .14s; }
.ip-r:hover { background: var(--panel-2); }
.ip-r-add { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center;
  border-radius: 6px; border: 1px dashed var(--line); background: transparent;
  color: var(--muted); cursor: pointer; }
.ip-r:hover .ip-r-add { border-style: solid; border-color: var(--accent); color: var(--accent);
  background: var(--accent-sf); }
.ip-r-add svg { width: 12px; height: 12px; }
.ip-r-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.ip-r-t b { font-size: 12.5px; font-weight: 560; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ip-r-t i { font-style: normal; font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-r-p { flex: 0 0 auto; font-size: 10px; color: var(--muted); }
.ip-star { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--line);
  cursor: pointer; opacity: 0; transition: opacity .15s, color .15s; }
.ip-star svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.ip-r:hover .ip-star, .ip-star.on { opacity: 1; }
.ip-star.on { color: var(--accent); }
.ip-star:hover { background: var(--raise); color: var(--accent); }

.ip-mine { display: flex; flex-direction: column; min-width: 0; }
.ip-mine-h { display: flex; align-items: center; gap: 9px; padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft); }
.ip-mine-h b { font-size: 12.5px; }
.ip-mine-h span { font-size: 11px; color: var(--muted); min-width: 18px; height: 18px;
  padding: 0 5px; display: grid; place-items: center; border-radius: 999px;
  background: var(--panel-2); }
.ip-mine-h span:empty { display: none; }
.ip-mine-h .btn { margin-left: auto; }
.ip-mine-b { flex: 1 1 auto; overflow-y: auto; padding: 8px; display: flex;
  flex-direction: column; gap: 8px; }

.ip-c { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--panel-2); transition: border-color .18s; }
.ip-c.open { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ip-c.off { opacity: .55; }
.ip-c-h { display: flex; align-items: center; gap: 7px; padding: 9px 10px; }
.ip-sw { width: 4px; height: 20px; border-radius: 2px; flex: 0 0 4px; }
.ip-c-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.ip-c-t b { font-size: 12.5px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ip-c-t i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.ip-b { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted);
  cursor: pointer; transition: background .14s, color .14s; }
.ip-b:hover:not(:disabled) { background: var(--raise); color: var(--text); }
.ip-b.on { color: var(--accent); background: var(--accent-sf); }
.ip-b:disabled { opacity: .25; cursor: default; }
.ip-b svg { width: 14px; height: 14px; }

.ip-prev { height: 42px; padding: 0 10px 8px; }
.ip-prev svg { display: block; width: 100%; height: 42px; }
.ip-prev-n { display: block; padding: 12px 0; font-size: 11px; color: var(--muted); }
.ip-set { padding: 10px 12px 12px; border-top: 1px solid var(--line-soft);
  background: var(--panel); display: flex; flex-direction: column; gap: 7px; }
.ip-d { margin: 0 0 4px; font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.ip-f { display: flex; align-items: center; gap: 10px; }
.ip-f > span { flex: 1 1 auto; font-size: 12px; color: var(--text-2); }
.ip-f input.num { width: 96px; }
.ip-f input[type="color"] { width: 40px; height: 26px; padding: 0; border-radius: 6px;
  border: 1px solid var(--line); background: transparent; cursor: pointer; }
.ip-f .select.tiny { min-width: 150px; }
.ip-none { padding: 18px 14px; font-size: 12px; line-height: 1.6; color: var(--muted); }

/* ── панель рисования ─────────────────────────────────────────────────── */
#drawBar { gap: 3px; }
#drawBar .btn { position: relative; }
.btn.draw-b.on { color: var(--accent); background: var(--accent-sf); }
.btn.draw-pick { height: 34px; padding: 0 7px 0 8px; gap: 3px; }
.draw-pick-i { display: grid; place-items: center; }
.draw-pick-i svg { width: 17px; height: 17px; }
.btn.draw-pick svg:last-child { width: 12px; height: 12px; opacity: .6; }

/* ── поле подписи прямо на графике ────────────────────────────────────────
   Системное окно ввода не показывает, куда встанет текст, и выглядит чужим.
   Это поле появляется там же, где будет надпись. */
.draw-ed { position: absolute; z-index: 8; width: 260px; padding: 8px;
  border-radius: var(--r); border: 1px solid var(--accent);
  background: var(--panel); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 7px;
  animation: popIn .14s cubic-bezier(.22,1,.3,1); }
.draw-ed input { width: 100%; height: 30px; padding: 0 9px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font: inherit; font-size: 13px; outline: none; }
.draw-ed input:focus { border-color: var(--accent); }
.draw-ed-a { display: flex; align-items: center; gap: 6px; }
.draw-ed-h { flex: 1 1 auto; font-size: 10px; color: var(--muted); line-height: 1.3; }

/* ── инструменты анализа ─────────────────────────────────────────────────
   Не индикаторы: эти отвечают списком мест, а не линией поверх цены.
   Поэтому и вид другой — вкладка, форма, таблица находок. */
.tl { display: flex; flex-direction: column; min-height: 320px; }
.tl-tabs { display: flex; gap: 3px; padding: 3px; margin: 0 0 14px;
  background: var(--panel-2); border-radius: var(--r-sm); }
.tl-tab { flex: 1 1 0; height: 30px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--muted); font: inherit; font-size: 12.5px;
  transition: background .14s, color .14s; }
.tl-tab:hover { color: var(--text); }
.tl-tab.on { background: var(--raise); color: var(--text); font-weight: 560;
  box-shadow: 0 1px 3px rgba(0,0,0,.28); }
.tl-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; }

.tl-note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.tl-none { margin: 0; padding: 14px; border-radius: var(--r-sm);
  border: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.tl-found { font-size: 12px; color: var(--text-2); }
.tl-found b { color: var(--accent); }

.tl-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 16px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--line-soft); }
.tl-kv dt { margin: 0; font-size: 10.5px; color: var(--muted); }
.tl-kv dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums;
  letter-spacing: -.015em; }

.tl-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.tl-f { display: grid; grid-template-columns: auto auto; align-items: center;
  gap: 4px 6px; }
.tl-f > span { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
.tl-f input.num { width: 104px; }
.tl-f em { font-style: normal; font-size: 12px; color: var(--muted); }
.tl-f .select.tiny { min-width: 130px; }

.tl-a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-seg { display: flex; gap: 3px; padding: 3px; background: var(--panel-2);
  border-radius: var(--r-sm); }
.tl-seg button { height: 26px; padding: 0 10px; border: 0; border-radius: 5px;
  cursor: pointer; background: transparent; color: var(--muted); font: inherit;
  font-size: 11.5px; }
.tl-seg button:hover { color: var(--text); background: var(--raise); }

.tl-tbl { width: 100%; border-collapse: collapse; font-size: 12px;
  font-variant-numeric: tabular-nums; }
.tl-tbl th { text-align: left; padding: 6px 8px; font-weight: 600; font-size: 10.5px;
  color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--line); position: sticky; top: 0;
  background: var(--panel); }
.tl-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }
.tl-tbl tbody tr { cursor: pointer; }
.tl-tbl tbody tr:hover { background: var(--panel-2); }
.tl-tbl tbody tr.on { background: var(--accent-sf); }
.tl-tbl td.pos { color: var(--up); }
.tl-tbl td.neg { color: var(--down); }
#toolsModal .sheet-body { max-height: min(72vh, 660px); overflow-y: auto; }
.cal-q-h { font-size: 10px; color: var(--muted); padding: 0 0 2px; }
/* Кнопка дня в режиме периода: видно, что там не один день. */
.btn.date.span { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.btn.date.span #dateLabel { font-size: 12px; }
.btn.date.span .wd { color: var(--accent); }

/* ── разбор сделки ─────────────────────────────────────────────────────────
   Цвет тут работает, а не украшает: три полосы-заголовка говорят, откуда
   взято то, что ниже — из ядра, из ленты или пересчитано здесь. Смешивать их
   в одну простыню нельзя: надёжность у этих чисел разная, и человек имеет
   право видеть, какая. */
.tv { position: absolute; inset: 0; z-index: 8; overflow: auto;
  background: var(--panel); animation: tvIn .18s cubic-bezier(.22,.9,.3,1); }
@keyframes tvIn { from { opacity: 0; transform: translateY(8px); } }
[data-motion="off"] .tv { animation: none; }
.tv-wrap { padding: 12px 14px 20px; }
.tv-load { color: var(--muted); font-size: 12.5px; padding: 20px 0; text-align: center; }
.tv-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tv-h b { font-size: 14px; }
.tv-side { font-size: 11px; padding: 2px 7px; border-radius: 999px; font-weight: 600; }
.tv-side.long { color: var(--up); background: color-mix(in srgb, var(--up) 16%, transparent); }
.tv-side.short { color: var(--down); background: color-mix(in srgb, var(--down) 16%, transparent); }
.tv-lot { font-size: 11px; color: var(--muted); }
.tv-pnl { margin-left: auto; font-family: var(--mono); font-size: 14px; font-weight: 700; }
.tv-x { width: 24px; height: 24px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 12px; }
.tv-x:hover { background: var(--panel-2); color: var(--text); }

.tv-band { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  margin: 14px 0 8px; padding: 4px 8px; border-radius: 5px; font-weight: 650; }
.tv-band.k-run  { color: var(--i1); background: color-mix(in srgb, var(--i1) 14%, transparent); }
.tv-band.k-tape { color: var(--i2); background: color-mix(in srgb, var(--i2) 14%, transparent); }
.tv-band.k-rule { color: var(--i3); background: color-mix(in srgb, var(--i3) 14%, transparent); }

.tv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.tv-c { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 7px 9px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tv-c.c-in, .tv-c.c-out { cursor: pointer; }
.tv-c.c-in:hover, .tv-c.c-out:hover { border-color: var(--accent); }
.tv-k { font-size: 10.5px; color: var(--muted); }
.tv-v { font-family: var(--mono); font-size: 12.5px; }
.tv-s { font-size: 10px; color: var(--muted); }
.tv-c.c-pos .tv-v { color: var(--up); }
.tv-c.c-neg .tv-v { color: var(--down); }
.tv-c.c-mfe .tv-v { color: var(--up); }
.tv-c.c-mae .tv-v { color: var(--down); }

.tv-rule { border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 10px; margin-bottom: 8px; border-left-width: 3px; }
.tv-rule.m-yes { border-left-color: var(--up); }
.tv-rule.m-no  { border-left-color: var(--down); }
.tv-rule.m-unk { border-left-color: var(--muted); }
.tv-rh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tv-rh b { font-size: 12.5px; }
.tv-log { font-size: 10px; color: var(--muted); }
.tv-fit { margin-left: auto; font-size: 10.5px; font-weight: 600; }
.m-yes .tv-fit { color: var(--up); }
.m-no  .tv-fit { color: var(--down); }
.m-unk .tv-fit { color: var(--muted); }

/* Каждое условие получает свой цвет точки: когда их шесть штук, глаз ищет
   нужное по цвету, а не перечитывает всю колонку. */
.tv-cond { display: flex; align-items: center; gap: 7px; padding: 4px 0;
  font-size: 11.5px; border-top: 1px solid var(--line); }
.tv-cond:first-of-type { border-top: 0; }
.tv-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.f-0 .tv-dot { background: var(--i1); } .f-1 .tv-dot { background: var(--i2); }
.f-2 .tv-dot { background: var(--i3); } .f-3 .tv-dot { background: var(--i4); }
.f-4 .tv-dot { background: var(--i5); } .f-5 .tv-dot { background: var(--i6); }
.tv-side-l, .tv-side-r { display: flex; flex-direction: column; min-width: 0; }
.tv-num { font-family: var(--mono); font-size: 12px; }
.tv-why { font-size: 9.5px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tv-op { font-family: var(--mono); color: var(--accent); font-size: 13px; }
.tv-op2 { color: var(--muted); }
.tv-no { color: var(--muted); font-style: italic; cursor: help; border-bottom: 1px dotted var(--line); }
.tv-mark { margin-left: auto; font-size: 10.5px; white-space: nowrap; }
.s-yes .tv-mark { color: var(--up); font-size: 13px; }
.s-no  .tv-mark { color: var(--down); font-size: 13px; }
.s-unk .tv-mark { color: var(--muted); }
.tv-then { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px;
  padding-top: 6px; border-top: 1px dashed var(--line); }
.tv-act { font-size: 10.5px; padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.tv-none { font-size: 11.5px; color: var(--muted); line-height: 1.6;
  padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--r-sm); }
.tv-foot { margin-top: 14px; font-size: 10.5px; color: var(--muted); line-height: 1.6;
  padding-top: 10px; border-top: 1px solid var(--line); }

/* ── таблицы, с которыми можно работать ────────────────────────────────────
   Ширина колонок тянется за границу шапки, выделенная колонка подсвечивается
   целиком — и шапка, и все её ячейки, — а под таблицей появляется строка с
   подсчётом. Это не «почти Excel», но это ровно те два действия, ради
   которых таблицу и открывают. */
.gd-host { display: flex; flex-direction: column; min-height: 0; }
.gd-scroll { overflow: auto; min-height: 0; }
table.gd { width: 100%; border-collapse: collapse; font-size: 11.5px;
  table-layout: fixed; font-variant-numeric: tabular-nums; }
table.gd th, table.gd td { padding: 4px 7px; text-align: left; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--line); }
table.gd th { position: sticky; top: 0; z-index: 2; background: var(--panel);
  color: var(--muted); font-weight: 600; font-size: 10.5px; user-select: none; }
table.gd th.n, table.gd td.n { text-align: right; }
table.gd td { font-family: var(--mono); }
table.gd tbody tr { cursor: pointer; }
table.gd tbody tr:hover > td { background: var(--panel-2); }
table.gd tbody tr.on > td { background: color-mix(in srgb, var(--accent) 16%, transparent); }
table.gd .pos { color: var(--up); }
table.gd .neg { color: var(--down); }
/* Строки входа и выхода в форме «по действиям» — разного цвета: иначе поток
   действий читается как одна серая простыня. */
table.gd tbody tr.r-in > td:first-child { box-shadow: inset 2px 0 0 var(--up); }
table.gd tbody tr.r-out > td:first-child { box-shadow: inset 2px 0 0 var(--down); }
.fl { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; }
.fl.in { color: var(--up); background: color-mix(in srgb, var(--up) 15%, transparent); }
.fl.out { color: var(--down); background: color-mix(in srgb, var(--down) 15%, transparent); }

.gd-t { cursor: pointer; }
.gd-t:hover { color: var(--text); text-decoration: underline dotted; }
table.gd th.pick { color: var(--accent); }
table.gd th.pick, table.gd td.pick { background: color-mix(in srgb, var(--accent) 12%, transparent); }
table.gd tbody tr:hover > td.pick { background: color-mix(in srgb, var(--accent) 20%, transparent); }
/* Захват держим целиком внутри шапки: у th стоит overflow: hidden, и любой
   вынос наружу просто обрезается — мышь по обрезанному не попадает. */
.gd-grip { position: absolute; top: 0; right: 0; width: 9px; height: 100%;
  cursor: col-resize; z-index: 3; }
.gd-grip:hover { background: linear-gradient(90deg, transparent, var(--accent-sf)); }
/* Захват границы сидит внутри шапки, значит шапке нужен свой отсчёт координат. */
table.gd th { position: sticky; top: 0; }
body.gd-resizing { cursor: col-resize; user-select: none; }

.gd-sum { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 7px 8px;
  background: var(--panel-2); font-size: 11px; }
.gd-sum[hidden] { display: none; }
.gd-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 2px 0; }
.gd-row b { color: var(--accent); font-size: 11.5px; min-width: 70px; }
.gd-s { font-family: var(--mono); font-size: 11px; }
.gd-s i { font-style: normal; color: var(--muted); font-family: var(--f);
  margin-right: 4px; font-size: 10px; }
.gd-hint { color: var(--muted); font-size: 10px; margin-top: 5px; line-height: 1.5; }

/* Переключатель формы показа — маленький, прямо в заголовке блока. */
.seg-mini { float: right; display: inline-flex; gap: 1px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px; }
.seg-mini button { border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 10.5px; padding: 2px 9px; border-radius: 999px; }
.seg-mini button:hover { color: var(--text); }
.seg-mini button.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }

/* Отчёт на весь экран: панель накрывает рабочую область целиком. График под
   ней никуда не девается — кнопка возвращает всё обратно. */
.side.full { position: absolute; inset: 0; width: auto !important; max-width: none;
  z-index: 30; border-left: 0; }
.side.full .gd-scroll { max-height: none; }
.side.full .tv { z-index: 8; }
#view-chart main { position: relative; }

/* ── строка вкладки и полоса выбора ────────────────────────────────────────
   Всё, что управляет таблицей, живёт над ней, а не внутри: внутри оно
   отъедает у таблицы место и наезжает на строки. */
.side-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--panel);
  font-size: 11.5px; min-height: 34px; }
.side-tools[hidden] { display: none; }
.side-tools .st-t { color: var(--muted); white-space: nowrap; }
.side-tools .grow { flex: 1 1 auto; }
.side-body { display: flex; flex-direction: column; min-height: 0; }
.side-body > .gd-host { flex: 1 1 auto; min-height: 0; }

.gd-cols { position: relative; }
.gd-cols .chip.tiny { height: 22px; padding: 0 8px; font-size: 10.5px; }
.gd-cols .chip.on { color: var(--accent); border-color: var(--accent); }
.gd-colm { position: absolute; right: 0; top: 26px; z-index: 60; min-width: 190px;
  max-height: 320px; overflow: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow);
  padding: 5px; }
.gd-colm[hidden] { display: none; }
.gd-colm label { display: flex; align-items: center; gap: 7px; padding: 4px 6px;
  border-radius: 5px; cursor: pointer; font-size: 11.5px; }
.gd-colm label:hover { background: var(--panel-2); }
.gd-colm label.lock { opacity: .55; cursor: default; }
.gd-colr { width: 100%; margin-top: 4px; border: 0; border-top: 1px solid var(--line);
  background: transparent; color: var(--muted); font: inherit; font-size: 10.5px;
  padding: 6px 4px 3px; cursor: pointer; text-align: left; }
.gd-colr:hover { color: var(--accent); }

/* Итоговая строка: липнет к низу таблицы и не уезжает при прокрутке. */
table.gd tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--panel-2);
  border-top: 1px solid var(--line); border-bottom: 0; font-size: 11px; }
table.gd tfoot b { font-family: var(--mono); }
.gd-dash { color: var(--muted); font-style: normal; }

/* Справа снизу плавает круглая кнопка помощника — она перекрывает угол
   панели. Полоса выбора кончается раньше, чем начинается кнопка. */
.pickbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 7px 62px 7px 10px; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  animation: pbIn .16s ease; }
.pickbar[hidden] { display: none; }
@keyframes pbIn { from { opacity: 0; transform: translateY(6px); } }
[data-motion="off"] .pickbar { animation: none; }
.pb-n { font-weight: 650; font-size: 12px; }
.pb-m { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.pb-p { margin-left: auto; font-family: var(--mono); font-size: 12.5px; font-weight: 700; }
.pb-x { width: 22px; height: 22px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 11px; }
.pb-x:hover { background: var(--panel-2); color: var(--text); }

.tv-back { display: flex; align-items: center; gap: 7px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2);
  color: var(--text); font: inherit; font-size: 11.5px; padding: 6px 10px;
  cursor: pointer; margin-bottom: 10px; }
.tv-back:hover { border-color: var(--accent); color: var(--accent); }
.tv-back b { font-size: 13px; }

/* ── основа перед запуском ─────────────────────────────────────────────────
   Человек видит условия, в которых будет жить стратегия, до того как нажал
   «Запустить», — а не узнаёт о них из странного результата. Рядом с каждым
   числом написано, почему мы советуем именно такое. */
.rf-basics .rf-h { display: flex; align-items: center; gap: 8px; }
.rf-basics .rf-h .chip.tiny { margin-left: auto; height: 22px; padding: 0 9px;
  font-size: 10.5px; font-weight: 400; }
.rb-list { display: flex; flex-direction: column; gap: 1px; margin-top: 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.rb-row { display: grid; grid-template-columns: 1fr 112px; gap: 4px 10px;
  align-items: center; padding: 8px 10px; background: var(--panel-2); }
.rb-row.fresh { background: color-mix(in srgb, var(--accent) 9%, var(--panel-2)); }
.rb-n { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.rb-n b { font-size: 12px; font-weight: 600; }
.rb-n i { font-style: normal; color: var(--muted); font-size: 10.5px; }
.rb-n em { font-style: normal; font-size: 9.5px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  padding: 1px 6px; border-radius: 999px; }
.rb-v .num, .rb-v .input, .rb-v .select { width: 100%; height: 26px; font-size: 11.5px; }
.rb-w { grid-column: 1 / -1; color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.rb-off { display: flex; align-items: center; gap: 8px; margin-top: 9px;
  font-size: 11.5px; cursor: pointer; }
.rb-note { color: var(--muted); font-size: 10.5px; margin-top: 3px; }

/* ── лаборатория анализа ───────────────────────────────────────────────────
   Разрезы одних и тех же сделок. Приглушённая строка — это строка, за которой
   слишком мало сделок, чтобы из неё что-то следовало. */
/* Поля те же, что у «Моего разбора» (.hb margin: 16px 18px) — вкладки одного
   раздела не должны начинаться на разном расстоянии от края. */
.al { padding: 16px 18px 28px; }
.al-empty { max-width: 520px; margin: 60px auto; text-align: center; display: flex;
  flex-direction: column; gap: 10px; align-items: center; }
.al-empty b { font-size: 15px; }
.al-empty span { color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.al-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.al-h b { font-size: 15px; }
.al-h span { color: var(--muted); font-size: 12px; }
.al-h .grow { flex: 1 1 auto; }
.al-sec { margin-bottom: 22px; }
.al-t { display: flex; align-items: center; gap: 10px; font-size: 12.5px;
  font-weight: 640; margin-bottom: 9px; }
.al-t .seg-mini { float: none; margin-left: auto; flex-wrap: wrap; }
.al-t2 { font-size: 11.5px; color: var(--muted); margin: 12px 0 7px; }
.al-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 7px; }
.al-c { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.al-c i { font-style: normal; color: var(--muted); font-size: 10.5px; }
.al-c b { font-family: var(--mono); font-size: 15px; }
.al-c u { text-decoration: none; color: var(--muted); font-size: 9.5px; line-height: 1.4; }
.al-note { color: var(--muted); font-size: 11px; line-height: 1.6; margin-top: 9px;
  padding-left: 10px; border-left: 2px solid var(--line); }

.al-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px;
  font-variant-numeric: tabular-nums; }
.al-tbl th { text-align: right; color: var(--muted); font-weight: 600; font-size: 10.5px;
  padding: 4px 8px; border-bottom: 1px solid var(--line); }
.al-tbl th:first-child { text-align: left; }
.al-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.al-tbl td.k { font-weight: 600; }
.al-tbl td.n { text-align: right; font-family: var(--mono); }
.al-tbl tr.thin { opacity: .45; }
.al-tbl td.bar { width: 26%; padding-right: 0; }
.al-tbl td.bar i { display: block; height: 7px; border-radius: 3px; min-width: 2px; }
.al-tbl td.bar i.pos { background: var(--up); }
.al-tbl td.bar i.neg { background: var(--down); }

.al-uw { display: flex; align-items: flex-start; gap: 0; height: 90px; margin-top: 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
  background: var(--panel); }
.al-uw i { display: block; background: color-mix(in srgb, var(--down) 55%, transparent);
  min-width: 1px; cursor: pointer; }
.al-uw i:hover { background: var(--down); }

/* ── рисовалки (charts.js) ──────────────────────────────────────────────────
   Холст один на все формы: карточка с рамкой, внутри svg во всю ширину.
   Высоту ставит сам график — он знает, сколько ему нужно. */
.al-ch { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); padding: 8px 10px 4px; overflow: hidden; }
.al-ch svg.cx { display: block; width: 100%; height: auto; }
/* Цвет подписей ставит сама рисовалка атрибутом fill — здесь только шрифт:
   правило `fill` в CSS перебило бы атрибут и покрасило всё одинаково. */
.cx text { font-family: var(--font); font-variant-numeric: tabular-nums; }

/* Подсказка под курсором. Одна на страницу, поэтому живёт в body, а не в
   карточке: иначе её обрезало бы overflow у .al-ch. */
.cx-tip { position: fixed; z-index: 90; pointer-events: none;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28); padding: 7px 9px; max-width: 280px;
  font-size: 11.5px; line-height: 1.55; color: var(--text);
  font-variant-numeric: tabular-nums; }
.cx-tip[hidden] { display: none; }
.cx-tip b { font-weight: 640; }
.cx-tip span { display: block; }
.cx-tip .dim { color: var(--muted); font-size: 10.5px; }
.cx-tip .warn { color: var(--down); font-size: 10.5px; }
.cx-tip .pos { color: var(--up); }
.cx-tip .neg { color: var(--down); }

/* Формула прямо в блоке: одна строка вместо пяти блоков на холсте. */
.cn-expr .cn-f { width: 100%; font-family: var(--mono); font-size: 11.5px; }
.cn-exs { font-size: 10px; margin: 3px 0 5px; padding-left: 2px; }
.cn-exs.ok { color: var(--up); }
.cn-exs.bad { color: var(--down); }
.op-exs { font-size: 11px; margin: -4px 0 10px 0; padding-left: 2px; }
.op-exs.ok { color: var(--up); }
.op-exs.bad { color: var(--down); }
.input.mono { font-family: var(--mono); font-size: 12px; }
/* Метка на шапке блока: «необязательно» и подобное. */
.gn-tag { font-style: normal; font-size: 9px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; margin-left: 6px; }

/* ── компактные блоки схемы ─────────────────────────────────────────────────
   Блоки росли вниз: у каждого поля подпись отдельной строкой над ним, у
   каждого гнезда — своя строка, под каждым вложенным блоком — абзац
   пояснения. Теперь подпись стоит слева от поля, а блок стал шире и ниже:
   на экран помещается вдвое больше схемы, а читается она так же. */
.gn-h { padding: 4px 8px; font-size: 12px; }
.gr-node .row { padding: 1px 8px; min-height: 17px; }
.gr-node .row label { font-size: 10.5px; }
.gr-node .row.out { padding-bottom: 5px; }
.gn-b { padding: 5px 8px 6px; }

/* подпись слева, поле справа */
.cn-f { gap: 3px; padding: 4px 6px 5px; }
.cn-r { flex-direction: row; align-items: center; gap: 6px; }
.cn-r > i { flex: 0 0 auto; min-width: 42px; max-width: 46%; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cn-r > .select, .cn-r > .input, .cn-r > .num, .cn-r > .gn-two, .cn-r > .cn-pick { flex: 1 1 auto; min-width: 0; }
.cn-f .select, .cn-f .input, .cn-f .num { height: 24px; font-size: 11.5px; }
.cn-nums { flex-wrap: wrap; }
.cn-nums .cn-r { flex: 1 1 45%; }
.cn-nums .cn-r > i { min-width: 0; }
.cn-expr { flex-wrap: wrap; }
.cn-expr > .input { flex: 1 1 100%; }
.cn-head { padding: 2px 4px 2px 7px; }
.gr-node .cn-note, .gr-node .gn-why { display: block; -webkit-line-clamp: 1; white-space: nowrap;
  text-overflow: ellipsis; padding-top: 2px; padding-bottom: 2px; }
.cn-row { margin-top: 5px; }

/* действие: подпись | поле в две колонки */
.k-act .gn-b { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
  column-gap: 8px; row-gap: 4px; align-items: center; }
.k-act .gn-b > .gn-lab { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 130px; }
.k-act .gn-b > .select, .k-act .gn-b > .input, .k-act .gn-b > .num,
.k-act .gn-b > .gn-two { width: 100%; min-width: 0; }
.k-act .gn-b > .cn-slot, .k-act .gn-b > .gn-why, .k-act .gn-b > .gn-chk,
.k-act .gn-b > p, .k-act .gn-b > .gn-lab:has(+ .cn-slot) { grid-column: 1 / -1; }
.k-act .gn-b > .gn-lab:has(+ .cn-slot) { margin-top: 2px; }
.k-act .act-slot-empty { display: flex; gap: 4px; }
.k-act .act-slot-empty .num { flex: 1 1 auto; min-width: 0; }

/* подсказки имён переменных */
.var-sug { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 6px 4px; }
.var-sug button { border: 1px solid var(--line); background: var(--raise); color: var(--text);
  border-radius: 6px; font-size: 10.5px; padding: 1px 6px; cursor: pointer; }
.var-sug button:hover, .var-sug button.on { border-color: var(--accent); color: var(--accent); }

/* ── справка во вкладке «Код» ─────────────────────────────────────────────── */
.code-body { flex: 1 1 auto; display: flex; gap: 12px; min-height: 0; }
.code-body > .code-wrap { flex: 1 1 auto; min-width: 0; }
.code-help { flex: 0 0 380px; overflow: auto; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); padding: 10px 12px; font-size: 12px; line-height: 1.45; }
.code-help[hidden] { display: none; }
.code-help > .input { width: 100%; margin-bottom: 8px; }
.ch-sec { margin-bottom: 12px; }
.ch-sec[hidden] { display: none; }
.ch-sec h4 { margin: 0 0 4px; font-size: 12.5px; }
.ch-sec p { margin: 0 0 6px; color: var(--muted); }
.ch-ex { display: block; font-family: var(--mono); font-size: 11.5px; padding: 3px 7px; margin: 2px 0;
  border-radius: 6px; background: var(--raise); cursor: pointer; white-space: pre; overflow-x: auto; }
.ch-ex:hover { outline: 1px solid var(--accent); }
pre.ch-ex { margin: 4px 0; }
.k-act .gn-b > .var-sug { grid-column: 1 / -1; padding: 0; }
.cn-row3 > .cn-extra:first-child { flex: 0 0 64px; }
.cn-row3 > .cn-extra:last-child { flex: 1.4 1 0; }
.cn-slot.inner .cn-drop { min-height: 22px; padding: 2px 8px; }
.cn-drop { min-height: 30px; }
.gr-node .cn-chain-add { padding-top: 3px; padding-bottom: 3px; }

/* ── шапка конструктора ─────────────────────────────────────────────────── */
.ico { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Схема / Правила / Код — один переключатель */
.seg { display: inline-flex; gap: 2px; padding: 3px; margin-left: 10px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; }
.seg .tab { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; }
.seg .tab.on { background: var(--panel); color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 0 0 1px var(--line); }
.seg .tab.on .ico { color: var(--accent); }
/* «Основа» — отдельно, через черту */
.tab.basics { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  margin-left: 6px; border: 1px dashed var(--line); border-radius: 9px; }
.tab.basics.on { border-style: solid; border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
/* сохранить / новая / импорт / экспорт — значками */
.icon-row { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel-2); }
.icon-row .btn.icon { width: 32px; height: 30px; }
.icon-row .btn.icon .ico { width: 17px; height: 17px; }
/* Прогнать — главная кнопка экрана */
.btn.run { height: 38px; padding: 0 20px 0 16px; gap: 9px; margin-left: 6px;
  font-weight: 700; font-size: 13.5px; letter-spacing: .01em; color: var(--on-accent);
  border: 0; border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 55%,
    color-mix(in srgb, var(--accent) 80%, #000) 100%);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent),
    inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .12s, box-shadow .15s, filter .15s; }
.btn.run svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.btn.run:hover { color: var(--on-accent); filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: 0 7px 20px color-mix(in srgb, var(--accent) 50%, transparent),
    inset 0 1px 0 rgba(255,255,255,.3); }
.btn.run:active { transform: translateY(0); }
.btn.run[disabled] { opacity: .6; }

/* ── панель инструментов холста: значки, подпись мельче ─────────────────── */
.gr-tools .chip.ic { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.gr-tools .chip.ic .ico { width: 14px; height: 14px; }
.gr-tools .chip.ic.only { padding: 0 7px; }

/* ── правая панель конструктора ─────────────────────────────────────────── */
.gr-right { border-right: 0; border-left: 1px solid var(--line); width: 280px; }
.gr-right.dock-empty { display: none; }
.gr.dock-dragging .gr-right.dock-empty { display: flex; width: 90px !important;
  border-left: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); }
.gr.dock-dragging .gr-right.dock-empty .gb-body::before { content: 'сюда'; display: block;
  text-align: center; color: var(--muted); font-size: 11px; margin-top: 30px; }
.gr-right.dock-over { box-shadow: inset 0 0 0 2px var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2)); }
.gr-right .gb-body { padding: 10px 12px 12px; overflow: auto; flex: 1 1 auto; min-height: 0; }

/* ── избранное в палитре ───────────────────────────────────────────────── */
.pal-b { position: relative; }
.pal-star { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
  opacity: 0; transition: opacity .12s, color .12s; font-size: 11px; cursor: pointer; }
.pal-star .ico { width: 14px; height: 14px; }
.pal-b:hover .pal-star, .pal-star.on { opacity: 1; }
.pal-star:hover { color: var(--accent); background: var(--accent-sf); }
.pal-star.on[data-star] { color: #e5a13b; }
.pal-star.on[data-star] .ico { fill: currentColor; }
.pal-star[data-unmine]:hover { color: var(--down); }

/* ── свой блок ─────────────────────────────────────────────────────────── */
.gr-node.k-grp { border: 1.5px solid color-mix(in srgb, #e5a13b 55%, var(--line)); }
.gr-node.k-grp > .gn-h { background: color-mix(in srgb, #e5a13b 14%, var(--raise)); gap: 7px; }
.gr-node.k-grp > .gn-h .ico { width: 15px; height: 15px; color: color-mix(in srgb, #e5a13b 80%, var(--text)); }
.gr-node.k-grp > .gn-h .gb-open { font-size: 10.5px; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--line); color: var(--text-2); }
.gr-node.k-grp > .gn-h .gb-open:hover { color: var(--accent); border-color: var(--accent); }
.gr-node.k-grp .row label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-node.k-grp.fold-grp { padding-bottom: 4px; }
.gr-node.k-grp.open-grp { border-radius: 10px 10px 4px 4px; min-width: 220px; }
.gr-frame { position: absolute; border: 1.5px dashed color-mix(in srgb, #e5a13b 55%, var(--line));
  border-radius: 14px; background: color-mix(in srgb, #e5a13b 5%, transparent);
  pointer-events: none; z-index: 1; }

/* ── подсказки в коде ──────────────────────────────────────────────────── */
.code-ac { position: absolute; z-index: 20; min-width: 260px; max-width: 460px; max-height: 280px;
  overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28); padding: 3px; font-size: 12px; }
.code-ac[hidden] { display: none; }
.ac-it { display: flex; align-items: baseline; gap: 10px; padding: 4px 8px; border-radius: 5px; cursor: pointer; }
.ac-it b { font-family: var(--mono); font-weight: 500; white-space: pre; }
.ac-it i { font-style: normal; color: var(--muted); font-size: 11px; margin-left: auto; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ac-it.on, .ac-it:hover { background: var(--accent-sf); }
.ac-it.on b { color: var(--accent); }
.ac-foot { padding: 4px 8px 2px; color: var(--muted); font-size: 10.5px; border-top: 1px solid var(--line-soft); margin-top: 2px; }
.gr-node.k-grp > .gn-h b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gr-node.k-grp > .gn-h .gn-tag { white-space: nowrap; }

/* ── лаборатория анализа: разделы слева, раздел справа ──────────────────────
   Вид — спокойная аналитика: крупные числа, мягкие карточки, приглушённые
   подписи. Цвет несёт смысл только в данных; в оформлении — один акцент. */
.lx { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100%; }
.lx .ic { flex: 0 0 auto; }
.lx .btn svg.ic, .lx-modal .btn svg.ic { stroke: currentColor; fill: none; width: 15px; height: 15px; }
.lx .btn { display: inline-flex; align-items: center; gap: 7px; }
.lx .btn.big { height: 38px; padding: 0 18px; font-size: 13px; font-weight: 640; }
.lx-nav { border-right: 1px solid var(--line); background: var(--panel); padding: 14px 10px 18px;
  overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.lx-ng { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 14px 10px 6px; }
.lx-ng:first-child { padding-top: 2px; }
.lx-ni { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent;
  color: var(--text-2); font: inherit; font-size: 12.5px; padding: 8px 10px; border-radius: 9px;
  cursor: pointer; text-align: left; position: relative; }
.lx-ni:hover { background: var(--panel-2); color: var(--text); }
.lx-ni.on { background: var(--accent-sf); color: var(--text); font-weight: 600; }
.lx-ni.on::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent); }
.lx-ni.on .ic { color: var(--accent); }
.lx-ni span { flex: 1 1 auto; }
.lx-nfoot { margin-top: auto; padding: 16px 10px 0; font-size: 10.5px; line-height: 1.6; color: var(--muted); }
.lx-main { overflow: auto; min-width: 0; padding: 22px 28px 40px; scroll-behavior: auto; }
.lx-sec { max-width: 1480px; }

/* шапка прогона */
.lx-hero { display: flex; gap: 24px; align-items: stretch; justify-content: space-between; max-width: 1480px;
  padding: 22px 24px; margin-bottom: 18px; border-radius: 16px; border: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 55%),
    radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, #3987e5 10%, transparent) 0%, transparent 60%),
    var(--panel); }
.lx-hl { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lx-ttl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lx-ttl b { font-size: 21px; font-weight: 680; letter-spacing: -.01em; }
.lx-meta { color: var(--muted); font-size: 12px; }
.lx-hk { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 14px; }
.lx-hk div { display: flex; flex-direction: column; gap: 3px; min-width: 96px; }
.lx-hk i { font-style: normal; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.lx-hk b { font: 650 24px/1.1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lx-hk u { text-decoration: none; font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lx-hr { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 12px; flex: 0 0 auto; }
.lx-spark .spark { display: block; opacity: .9; }
.lx-cta { display: flex; align-items: center; gap: 12px; border: 0; cursor: pointer; text-align: left;
  padding: 12px 18px 12px 14px; border-radius: 12px; color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-d));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .12s ease, box-shadow .12s ease; }
.lx-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.2); }
.lx-cta .ic { width: 22px; height: 22px; padding: 7px; box-sizing: content-box; border-radius: 9px; background: rgba(255,255,255,.18); }
.lx-cta span { display: flex; flex-direction: column; }
.lx-cta b { font-size: 14px; font-weight: 700; }
.lx-cta i { font-style: normal; font-size: 11px; opacity: .8; }
.lx-hb { display: flex; gap: 6px; }
.lx-verdict { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  padding: 3px 10px 3px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); }
.lx-verdict.ok { color: var(--up); } .lx-verdict.warn { color: var(--accent); } .lx-verdict.bad { color: var(--down); }

/* карточки-панели */
.lx-p { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
  margin-bottom: 16px; min-width: 0; }
.lx-p > header { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; margin-bottom: 14px; }
.lx-p h3 { margin: 0; font-size: 14.5px; font-weight: 660; letter-spacing: -.005em; }
.lx-p header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; max-width: 820px; }
.lx-tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: 0 0 auto; max-width: 60%; }
.lx-tools .seg-mini { float: none; }
.lx-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lx-2 > .lx-p { margin-bottom: 16px; }
.lx-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1250px) { .lx-2, .lx-3 { grid-template-columns: minmax(0, 1fr); } .lx-hero { flex-direction: column; } .lx-hr { align-items: flex-start; } }
@media (max-width: 860px) { .lx { grid-template-columns: minmax(0, 1fr); } .lx-nav { display: flex; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; } .lx-ng, .lx-nfoot { display: none; } .lx-ni { width: auto; white-space: nowrap; } .lx-main { padding: 16px; } }

.lx-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin-bottom: 16px; }
.lx-p .lx-kpis { margin-bottom: 12px; }
.lx-kpis.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lx-kpis.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lx-kpis.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1250px) { .lx-kpis.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lx-k { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lx-p .lx-k { background: var(--panel-2); border-color: transparent; }
.lx-k[data-prov] { cursor: help; }
.lx-k i { font-style: normal; font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.lx-k i .pv { width: 12px; height: 12px; opacity: .55; }
.lx-k:hover i .pv { opacity: 1; color: var(--accent); }
.lx-k b { font: 640 19px/1.15 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-k u { text-decoration: none; font-size: 10.5px; color: var(--text-2); line-height: 1.45; }
.lx-k b.pos, .lx .pos { color: var(--up); } .lx-k b.neg, .lx .neg { color: var(--down); }

.lx-ch { border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel); padding: 10px 10px 4px;
  margin-top: 4px; overflow: hidden; }
.lx-p .lx-ch { border-color: var(--line-soft); }
.lx-ch svg.cx { display: block; width: 100%; height: auto; }
.lx-ch.sm { margin-top: 0; }
.lx-sub { font-size: 11.5px; color: var(--muted); margin: 14px 0 6px; font-weight: 560; }
.lx-note { color: var(--muted); font-size: 11.5px; line-height: 1.65; margin-top: 12px;
  padding: 2px 0 2px 12px; border-left: 2px solid var(--line); }
.lx-muted { color: var(--muted); font-size: 11.5px; line-height: 1.6; padding: 6px 2px; }
.lx-honest { display: flex; gap: 12px; align-items: flex-start; font-size: 12px; line-height: 1.65;
  color: var(--text-2); background: var(--panel-2); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.lx-honest .ic { color: var(--muted); margin-top: 2px; }
.lx-honest.warn .ic { color: var(--accent); }
.lx-honest b { color: var(--text); }
.lx-disc { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; margin-bottom: 14px;
  font-size: 12.5px; line-height: 1.65; color: var(--text-2);
  background: color-mix(in srgb, var(--accent) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.lx-disc .ic { color: var(--accent); width: 18px; height: 18px; margin-top: 1px; }
.lx-disc b { color: var(--text); }
.lx-okline { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-2); padding: 6px 0; flex-wrap: wrap; }
.lx-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.lx-row .grow, .lx-pl-top .grow { flex: 1 1 auto; }
.lx-row .seg-mini { float: none; flex-wrap: wrap; }
.lx-ctl { font-size: 12px; color: var(--text-2); gap: 14px; }
.lx-ctl label { display: inline-flex; align-items: center; gap: 8px; }
.lx-ctl input[type=range] { accent-color: var(--accent); width: 140px; }
.lx-ctl input[type=date] { height: 30px; width: 150px; }
.lx-chk { cursor: pointer; }
.lx-chk input { accent-color: var(--accent); }
.lx-scroll { overflow: auto; max-width: 100%; }
.lx-h320 { max-height: 340px; }
.lx-tag { font-style: normal; font-size: 9.5px; color: var(--accent); border: 1px solid var(--accent-sf);
  background: var(--accent-sf); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.lx-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.lx-chips .chip { display: inline-flex; align-items: center; gap: 6px; }
.lx-count { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 12px; }
.lx-count .ic { color: var(--accent); }
.lx-count b { color: var(--text); font-family: var(--mono); }
.lx-prog { display: inline-block; width: 110px; height: 5px; border-radius: 999px; background: var(--panel-2);
  overflow: hidden; vertical-align: middle; margin-right: 8px; }
.lx-prog i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .2s; }
[id$="Prog"] { font-size: 11px; color: var(--muted); font-family: var(--mono); display: inline-flex; align-items: center; }
.lx-spin { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line);
  border-top-color: var(--accent); animation: lxspin .8s linear infinite; vertical-align: -1px; font-style: normal; }
@keyframes lxspin { to { transform: rotate(360deg); } }
.lx-ib { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid transparent;
  background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer; padding: 0; }
.lx-ib:hover { background: var(--panel-2); color: var(--text); border-color: var(--line); }
.lx-ib:disabled { opacity: .35; cursor: default; }
.lx-ib.on { color: var(--accent); }
.lx-ib.on .ic { fill: currentColor; }
.lx-ib.sm { width: 20px; height: 20px; vertical-align: middle; }
.lx-ib.sm .ic { width: 12px; height: 12px; }
.lx-st { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; }
.lx-st.ok { color: var(--up); } .lx-st.warn { color: var(--accent); } .lx-st.bad { color: var(--down); }
.lx-st .ic { width: 16px; height: 16px; }
.lx-vd { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.lx-vd div { display: flex; align-items: center; gap: 10px; }
.cx-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--text-2); padding: 2px 4px 8px; }
.cx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cx-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.cx-legend i.vl { width: 0; height: 12px; border-left: 2px dashed; border-radius: 0; background: none; }
.cx-tip i.sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.al-tbl th.srt { cursor: pointer; user-select: none; }
.al-tbl th.srt.on { color: var(--text); }
.lx-tt tbody tr { cursor: pointer; }
.lx-tt tbody tr:hover td { background: var(--panel-2); }
.lx-tt td { white-space: nowrap; }
.lx-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.lx-cmp td.n { font-size: 12.5px; }

/* стресс */
.lx-crash td.w, .lx-crash th.w { width: 26%; min-width: 160px; }
.lx-duel { display: flex; flex-direction: column; gap: 3px; }
.lx-duel > div { position: relative; height: 7px; border-radius: 4px; background: var(--panel-2); }
.lx-duel > div::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line); }
.lx-duel i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.lx-conds { display: flex; flex-direction: column; gap: 8px; }
.lx-cond { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lx-cond .select { min-width: 250px; }
.lx-cond .num { width: 90px; }
.lx-presets { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 11.5px; margin-left: 6px; }
.lx-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px 18px; font-size: 12px; color: var(--text-2); }
.lx-form label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lx-form .seg-mini { float: none; }
.lx-form .select { max-width: 190px; }
.lx-plt td.n b { display: block; font-family: var(--mono); }
.lx-plt td.n i.dd { font-style: normal; font-size: 10px; color: var(--muted); }
.lx-plt td.dim, .al-tbl .dim { color: var(--muted); }

/* надёжность */
.lx-check { display: flex; flex-direction: column; gap: 2px; }
.lx-ck { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 10px; }
.lx-ck:nth-child(odd) { background: var(--panel-2); }
.lx-ck b { display: block; font-size: 12.5px; font-weight: 620; }
.lx-ck span { display: block; font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.lx-ck em { font-style: normal; font: 600 12px var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.lx-ck.ok em { color: var(--up); } .lx-ck.warn em { color: var(--accent); } .lx-ck.bad em { color: var(--down); }
.lx-boot td.ci, .lx-boot th.ci { width: 34%; }
.lx-ci { position: relative; height: 16px; }
.lx-ci i { position: absolute; top: 50%; }
.lx-ci i.z { width: 1px; height: 16px; top: 0; background: var(--muted); opacity: .7; }
.lx-ci i.r { height: 6px; margin-top: -3px; border-radius: 3px; }
.lx-ci i.r.ok { background: color-mix(in srgb, var(--up) 55%, transparent); }
.lx-ci i.r.warn { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.lx-ci i.v { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--text); border: 2px solid var(--panel); }
tr[data-day] { cursor: pointer; }
tr[data-day]:hover td { background: var(--panel-2); }

/* карта подбора */
.lx-mapctl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; font-size: 12px; color: var(--text-2); }
.lx-mapctl label { display: flex; flex-direction: column; gap: 6px; }
.lx-mapctl .select { width: 100%; max-width: none; }
.lx-mapctl .seg-mini { float: none; align-self: flex-start; flex-wrap: wrap; }
@media (max-width: 1250px) { .lx-mapctl { grid-template-columns: minmax(0, 1fr); } }
.lx-maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.lx-maps.s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lx-maps .lx-sub { margin-top: 0; }
@media (max-width: 1250px) { .lx-maps, .lx-maps.s3 { grid-template-columns: minmax(0, 1fr); } }
.lx-cell { margin-top: 16px; padding: 16px; border-radius: 12px; background: var(--panel-2); }
.lx-cell .lx-k { background: var(--panel); }
.lx-cell-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.lx-cell-h b { font: 600 13px var(--mono); }
.lx-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 640; padding: 3px 10px 3px 6px;
  border-radius: 999px; background: var(--panel); }
.lx-kind.ok { color: var(--up); } .lx-kind.warn { color: var(--accent); } .lx-kind.bad { color: var(--down); }
.lx-sens { display: flex; flex-direction: column; gap: 10px; }
.lx-sens div { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) 90px; gap: 12px; align-items: center; font-size: 12px; }
.lx-sens span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-sens i { display: block; height: 10px; border-radius: 5px; background: #3987e5; min-width: 2px; }
.lx-sens b { font: 600 12px var(--mono); text-align: right; }

/* плеер */
.lx-pl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.lx-pl-top .select { min-width: 220px; }
.lx-pl-top .seg-mini { float: none; }
.lx-play { width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.lx-play .ic { fill: currentColor; }
.lx-clock { font: 600 14px var(--mono); font-variant-numeric: tabular-nums; }
.lx-pl { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1250px) { .lx-pl { grid-template-columns: minmax(0, 1fr); } }
.lx-pl-ch { border: 1px solid var(--line-soft); border-radius: 12px; padding: 8px; min-height: 300px; }
.lx-pl-ch svg { display: block; width: 100%; height: auto; }
.lx-slide { width: 100%; margin-top: 10px; accent-color: var(--accent); }
.lx-pl-side { display: flex; flex-direction: column; gap: 10px; }
.lx-pl-box { background: var(--panel-2); border-radius: 12px; padding: 12px 14px; font-size: 12px; }
.lx-pl-box > b { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.lx-pl-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 3px 0; font-variant-numeric: tabular-nums; }
.lx-pl-r span:nth-child(2) { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-pl-r i { font-style: normal; color: var(--muted); font-size: 10.5px; }
.lx-pl-r b { font-family: var(--mono); }
.lx-pl-r.tot { grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.lx-pl-n { display: flex; gap: 8px; padding: 3px 0; } .lx-pl-n i { font-style: normal; color: var(--muted); font-family: var(--mono); }
.lx-pl-add { display: flex; gap: 6px; margin-top: 8px; } .lx-pl-add .input { flex: 1 1 auto; min-width: 0; }

/* снимки и музей */
.lx-snaps { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.lx-snap { background: var(--panel-2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; border: 1px solid transparent; }
.lx-snap.pin { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.lx-snap-h b { display: block; font-size: 12.5px; }
.lx-snap-h span { font-size: 10.5px; color: var(--muted); }
.lx-snap-m, .lx-exh-m { display: flex; gap: 10px; flex-wrap: wrap; font: 600 11px var(--mono); color: var(--text-2); }
.lx-snap-n { font-size: 11px; color: var(--text-2); }
.lx-snap-a { display: flex; gap: 2px; justify-content: flex-end; margin-top: auto; }
.lx-diff { font-size: 12px; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; }
.lx-museum { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.lx-exh { background: var(--panel-2); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
  border-top: 3px solid color-mix(in srgb, var(--down) 60%, transparent); }
.lx-exh b { font-size: 13px; } .lx-exh .dim { font-size: 10.5px; color: var(--muted); }
.lx-exh p { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--text); }
.lx-modal { position: fixed; inset: 0; z-index: 120; background: rgba(5, 8, 12, .55); display: grid; place-items: center; }
.lx-mbox { width: min(520px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.lx-mbox h3 { margin: 0; font-size: 16px; } .lx-mbox p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.lx-mbox label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-2); }
.lx-mbox label.lx-chk { flex-direction: row; align-items: center; }
.lx-mbox textarea.input { height: auto; padding: 8px 10px; resize: vertical; font: inherit; }
.lx-mbox .btn { display: inline-flex; align-items: center; gap: 7px; }
.lx-empty { display: grid; place-items: center; height: 100%; min-height: 420px; }
.lx-empty-in { max-width: 460px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.lx-empty-in .ic.big { width: 40px; height: 40px; color: var(--accent); padding: 14px; box-sizing: content-box; border-radius: 16px; background: var(--accent-sf); }
.lx-empty-in b { font-size: 16px; } .lx-empty-in span { color: var(--muted); font-size: 12.5px; line-height: 1.7; }
/* цифры лаборатории — гротеск с табличными цифрами: ровные столбцы без
   «машинописного» вида моноширинного шрифта */
.lx-k b, .lx-hk b, .lx-ck em, .lx-snap-m, .lx-exh-m, .lx-sens b, .lx-clock, .lx-cell-h b, .lx-count b, .lx-pl-r b,
.lx .al-tbl td.n, .lx-plt td.n b { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.lx-k b { font-weight: 660; font-size: 20px; letter-spacing: -.015em; }
.lx-hk b { font-weight: 700; font-size: 26px; letter-spacing: -.02em; }
.lx-ch svg text, .lx-pl-ch svg text { font-family: var(--sans); font-weight: 400; }
.lx-2 { align-items: start; }
.lx-2 .lx-kpis.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lx-kpis.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1400px) { .lx-kpis.c5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lx-axes { display: flex; gap: 24px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 14px; }
.lx-axes b { color: var(--text); font-weight: 600; }
.lx-qsum { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lx-qsum span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--panel-2); font-size: 12px; color: var(--text-2); }
.lx-qsum b { font-size: 14px; color: var(--text); }
/* Общее правило «svg — это значок» (обводка текущим цветом, 16 px) графикам
   не подходит: подписи от него жирнеют, а столбики получают белую кайму. */
.lx svg.cx, .lx-pl-ch svg { stroke: none; }
.lx svg.spark, .lx-modal svg.spark { width: auto; height: auto; stroke: none; }
.lx-kpis.c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1400px) { .lx-kpis.c6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lx-gantt { border: 1px solid var(--line-soft); border-radius: 12px; padding: 6px 8px; margin-top: 4px; }
.lx-gantt svg { display: block; width: 100%; height: auto; }
.lx-pl-c { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 4px 0; }
.lx-pl-c span { font-family: var(--mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-pl-c i { grid-column: 2; font-style: normal; font-size: 10px; color: var(--muted); }
.lx-st.off { color: var(--muted); }
.lx-tapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.lx-tape { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 8px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); }
.lx-tape b { font-size: 13px; } .lx-tape span { grid-column: 2; font-size: 11px; color: var(--muted); }
.lx code { font-family: var(--mono); font-size: 11px; background: var(--panel); padding: 1px 5px; border-radius: 4px; }
/* Своё имя блока: крупно имя, мелко — что это за блок. */
.gn-h .gn-kind { font-style: normal; font-size: 9.5px; color: var(--muted); margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gn-h input.gn-title { flex: 1 1 auto; min-width: 0; height: 22px; font: inherit; font-weight: 600; font-size: 12px;
  background: var(--bg); color: var(--text); border: 1px solid var(--accent); border-radius: 5px; padding: 0 6px; }

/* ── шапка стратегии: шаги схемой ───────────────────────────────────────────
   Карточка стратегии — как обложка продукта: имя, одна фраза, 3–5 шагов с
   пиктограммами и живыми стрелками между ними, параметры мелко внизу. */
.sx { position: relative; overflow: hidden; max-width: 1480px; margin-bottom: 14px; padding: 26px 28px 20px;
  border-radius: 20px; border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, #3987e5 8%), var(--panel)); isolation: isolate; }
.sx-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sx-bg i { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(80px); opacity: .22; }
.sx-bg i:first-child { background: #3987e5; top: -300px; left: -120px; animation: sxfloat 18s ease-in-out infinite alternate; }
.sx-bg i:last-child { background: var(--accent); bottom: -360px; right: -80px; opacity: .16; animation: sxfloat 22s ease-in-out infinite alternate-reverse; }
@keyframes sxfloat { from { transform: translate(0, 0) scale(1); } to { transform: translate(90px, 40px) scale(1.12); } }
.sx-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.sx-id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.sx-eye { display: block; width: 100%; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.sx h1 { margin: 2px 0 0; font-size: 30px; line-height: 1.1; font-weight: 720; letter-spacing: -.025em;
  background: linear-gradient(90deg, var(--text), color-mix(in srgb, var(--text) 70%, #3987e5)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sx-switch { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 4px 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 80%, transparent); color: var(--text-2); }
.sx-switch select { border: 0; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; height: 32px; max-width: 220px; cursor: pointer; outline: none; }
.sx-switch select option { background: var(--panel); color: var(--text); }
.lx .sx-edit { height: 34px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--text); background: var(--accent-sf); font-weight: 600; }
.lx .sx-edit:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.sx-desc { margin: 12px 0 0; max-width: 900px; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.sx-stale { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); }
.sx-stale .ic { color: var(--accent); }
.sx-stale span { flex: 1 1 auto; }
.sx-flow { display: flex; align-items: stretch; gap: 0; margin-top: 20px; overflow-x: auto; padding: 4px 2px 8px; }
.sx-step { flex: 1 1 0; min-width: 158px; max-width: 280px; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 13px;
  border-radius: 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 78%, transparent);
  backdrop-filter: blur(6px); position: relative;
  animation: sxin .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d) * 110ms + 80ms);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; --c: #3987e5; }
.sx-step:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 60%, var(--line));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--c) 22%, transparent); }
@keyframes sxin { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.sx-step.k-cond { --c: #3987e5; } .sx-step.k-entry { --c: var(--up); } .sx-step.k-exit { --c: var(--down); }
.sx-step.k-protect { --c: var(--accent); } .sx-step.k-state { --c: #a78bfa; }
.sx-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--c);
  background: radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--c) 34%, transparent), color-mix(in srgb, var(--c) 10%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent), 0 6px 18px color-mix(in srgb, var(--c) 18%, transparent); position: relative; }
.sx-ico::after { content: ''; position: absolute; inset: -4px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  opacity: 0; animation: sxping 3.2s ease-out infinite; animation-delay: calc(var(--d) * .45s + 1s); }
@keyframes sxping { 0% { opacity: .9; transform: scale(.92); } 60%, 100% { opacity: 0; transform: scale(1.18); } }
.sx-ico svg { width: 26px; height: 26px; }
.sx-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sx-tx i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sx-tx b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.sx-tx u { text-decoration: none; font-size: 11.5px; color: var(--text-2); line-height: 1.45; }
.sx-arrow { flex: 0 0 52px; display: grid; place-items: center; animation: sxin .5s ease both; animation-delay: calc(var(--d) * 110ms); }
.sx-arrow svg { width: 52px; height: 24px; overflow: visible; }
.sx-arrow .ln { stroke: var(--line); stroke-width: 2; fill: none; stroke-dasharray: 3 5; animation: sxdash 1s linear infinite; }
.sx-arrow .hd { stroke: color-mix(in srgb, var(--text) 45%, transparent); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sx-arrow .dot { fill: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); }
@keyframes sxdash { to { stroke-dashoffset: -8; } }
.sx-more { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sx-params { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 11px; color: var(--muted); }
.sx-params b { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.lx-hero.rx { margin-top: 0; }
.rx-h { display: flex; flex-direction: column; gap: 4px; }
.rx-h .sx-eye { color: var(--muted); }
/* компактная шапка в остальных разделах */
.sx-mini { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 1480px; margin-bottom: 16px; padding: 12px 16px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.sx-mini-n { display: flex; flex-direction: column; min-width: 0; }
.sx-mini-n .sx-eye { font-size: 9.5px; }
.sx-mini-n b { font-size: 15px; font-weight: 700; white-space: nowrap; }
.sx-mini-f { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow: hidden; flex-wrap: wrap; }
.sx-mini-f span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px 3px 5px; border-radius: 999px;
  background: var(--panel-2); color: var(--text-2); white-space: nowrap; --c: #3987e5; }
.sx-mini-f span svg { width: 15px; height: 15px; color: var(--c); }
.sx-mini-f .k-entry { --c: var(--up); } .sx-mini-f .k-exit { --c: var(--down); } .sx-mini-f .k-protect { --c: var(--accent); } .sx-mini-f .k-state { --c: #a78bfa; }
.sx-mini-f em { font-style: normal; color: var(--muted); font-size: 11px; }
.sx-mini-k { display: flex; gap: 12px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 1250px) { .sx-step { min-width: 170px; } .sx h1 { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) {
  .sx-bg i, .sx-ico::after, .sx-arrow .ln { animation: none; }
  .sx-step, .sx-arrow { animation: none; opacity: 1; transform: none; }
}

/* ── Комната «Тесты» ─────────────────────────────────────────────────────
   Статус всегда в двух видах: значок + слово. Цвет только дублирует. */
.tr { display: flex; flex-direction: column; min-height: 100%; }
.tr-head { display: flex; align-items: flex-start; gap: 20px; padding: 18px 22px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); position: sticky; top: 0; z-index: 3; }
.tr-hl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tr-hl > b { font-size: 20px; font-weight: 680; letter-spacing: -.02em; color: var(--text); }
.tr-hl > span { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tr-ex { font-size: 11px !important; color: var(--muted) !important; line-height: 1.5; }
.tr-hr { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.tr-hr select { max-width: 260px; }
.tr-prog { position: sticky; top: 0; z-index: 2; height: 26px; background: var(--panel); border-bottom: 1px solid var(--line); }
.tr-prog i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-sf); border-right: 2px solid var(--accent); transition: width .25s ease; }
.tr-prog span { position: relative; display: block; padding: 5px 22px; font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tr-body { flex: 1 1 auto; display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 0; }
.tr-cat { border-right: 1px solid var(--line); background: var(--panel); padding: 12px 10px 24px; overflow: auto; }
.tr-gd { font-size: 10.5px; color: var(--muted); line-height: 1.4; padding: 0 10px 6px; }
.tr-ci { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--text-2);
  font: 500 12.5px/1.25 var(--sans); padding: 7px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
.tr-ci:hover { background: var(--panel-2); color: var(--text); }
.tr-ci.on { background: var(--accent-sf); color: var(--text); font-weight: 600; }
.tr-ci.top { font-weight: 600; color: var(--text); }
.tr-ci.top .ic { color: var(--accent); }
.tr-ci > span { flex: 1 1 auto; }
.tr-dot { display: inline-flex; width: 18px; height: 18px; border-radius: 6px; align-items: center; justify-content: center; font-style: normal; }
.tr-dot .ic { width: 12px; height: 12px; }
.tr-main { padding: 20px 24px 40px; min-width: 0; }
.tr-card { max-width: 1180px; display: flex; flex-direction: column; gap: 14px; }
.tr-card > header { display: flex; align-items: center; gap: 12px; }
.tr-card h2 { margin: 0; font-size: 19px; font-weight: 680; letter-spacing: -.015em; }
.tr-why { margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.55; }
.tr-how, .tr-thr, .tr-params, .tr-check { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.tr-how b, .tr-thr > b, .tr-params > b { color: var(--text); }
.tr-thr ul { margin: 6px 0 6px; padding-left: 18px; }
.tr-thr li { margin: 2px 0; }
.tr-thr > span { font-size: 11px; color: var(--muted); }
.tr-opts { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 12px; color: var(--text-2); }
.tr-opts label { display: inline-flex; align-items: center; gap: 8px; }
.tr-params label { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.tr-params select, .tr-params input { margin-left: 6px; }
.tr-pl { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.tr-pl i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.tr-check { display: flex; flex-direction: column; gap: 7px; }
.tr-run { display: flex; align-items: center; gap: 12px; }
.tr-res { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.tr-rh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px; }
.tr-rh b { font: 640 16px/1.3 var(--mono); letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.tr-rh > span:last-child { font-size: 12.5px; color: var(--text-2); }
.tr-note { font-size: 12px; color: var(--muted); line-height: 1.5; }
.tr-sub { font-size: 11.5px; color: var(--text-2); font-weight: 600; margin-top: 4px; }
.tr-warn { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px;
  color: var(--text); background: rgba(229,161,59,.10); border: 1px solid rgba(229,161,59,.35); }
.tr-warn .ic { color: var(--accent); flex: 0 0 auto; }
.tr-rule { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.5; padding: 12px 16px; border-left: 3px solid var(--accent);
  background: var(--panel); border-radius: 0 10px 10px 0; }
.tr-empty { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px dashed var(--line); border-radius: 12px;
  font-size: 13px; color: var(--text-2); line-height: 1.55; }
.tr-empty .ic { color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.tr-h3, .tr-sense h3 { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--text); }
.tr-sense { padding: 10px 0 2px; border-top: 1px solid var(--line-soft); }
.tr-sense h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.tr-sense h3 i { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.tr-sense p { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.tr-s { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.5; color: var(--text); }
.tr-s .ic { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 3px; }
.tr-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-cnt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; color: var(--text-2);
  background: var(--panel); border: 1px solid var(--line); }
.tr-cnt b { font: 650 14px/1 var(--mono); color: var(--text); }
.tr-cnt .ic { width: 13px; height: 13px; }
.tr-tbl tbody tr { cursor: pointer; }
.tr-tbl tbody tr:hover td { background: var(--panel-2); }
.tr-tbl td.n { font-family: var(--mono); font-size: 12px; }
.tr-lr { display: grid; grid-template-columns: 30px minmax(180px, 1.1fr) minmax(0, 2fr) auto; gap: 12px; align-items: center;
  padding: 8px 4px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.tr-lr > div { display: flex; flex-direction: column; min-width: 0; }
.tr-lr > div span { font-size: 11px; color: var(--muted); }
.tr-lr em { font-style: normal; color: var(--text-2); display: flex; align-items: center; gap: 8px; min-width: 0; }
.tr-lr > i { font-style: normal; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tr-2, .tr-3 { display: grid; gap: 10px; }
.tr-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tr-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tr-3 > div, .tr-mc { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; }
.tr-3 i { font-style: normal; font-size: 11px; color: var(--muted); }
.tr-3 b { font: 640 17px/1.2 var(--mono); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.tr-3 u { text-decoration: none; font-size: 10.5px; color: var(--text-2); }
.tr-mc > b { font-size: 13px; color: var(--text); }
.tr-mc > span { font-size: 11px; color: var(--muted); }
.tr-mg { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin-top: 6px; font-size: 12px; }
.tr-mg i { font-style: normal; color: var(--muted); }
.tr-mg em { font-style: normal; font-family: var(--mono); text-align: right; color: var(--text); }
.tr-ch { min-height: 40px; }
.tr-ch svg.cx { display: block; width: 100%; height: auto; }
.tr svg.cx { stroke: none; }
.tr-ch svg text { font-family: var(--sans); font-weight: 400; }
.tr-scroll { overflow-x: auto; }
.tr-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.tr-w { position: relative; flex: 0 0 118px; height: 96px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  padding: 8px 9px; text-align: left; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.tr-w:hover { border-color: var(--accent); }
.tr-w i { position: absolute; left: 0; right: 0; bottom: 0; opacity: .16; }
.tr-w.pos i { background: var(--up); } .tr-w.neg i { background: var(--down); }
.tr-w b { position: relative; font: 640 13px/1.2 var(--mono); }
.tr-w span, .tr-w u { position: relative; font-size: 10.5px; color: var(--muted); text-decoration: none; }
.tr-w.pos b, .tr .pos { color: var(--up); } .tr-w.neg b, .tr .neg { color: var(--down); }
.tr .al-tbl tr.thin td { color: var(--muted); }

/* статусы: значок + слово, цвет только в подкрепление */
.tr-st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; border: 1px solid transparent; }
.tr-st .ic { width: 12px; height: 12px; }
.tr-st.ok, .tr-dot.ok { color: var(--up); background: rgba(47,191,113,.12); border-color: rgba(47,191,113,.3); }
.tr-st.warn, .tr-dot.warn { color: var(--accent); background: rgba(229,161,59,.12); border-color: rgba(229,161,59,.32); }
.tr-st.bad, .tr-dot.bad { color: var(--down); background: rgba(240,90,110,.12); border-color: rgba(240,90,110,.34); }
.tr-st.na, .tr-dot.na { color: var(--muted); background: var(--panel-2); border-color: var(--line); }
.tr-st.info, .tr-dot.info { color: var(--blue); background: rgba(87,166,245,.10); border-color: rgba(87,166,245,.3); }
.tr-s.ok .ic, .tr-cnt.ok .ic { color: var(--up); } .tr-s.warn .ic, .tr-cnt.warn .ic { color: var(--accent); }
.tr-s.bad .ic, .tr-cnt.bad .ic { color: var(--down); } .tr-s.na .ic, .tr-cnt.na .ic { color: var(--muted); }
.tr-cnt.bad { border-color: rgba(240,90,110,.34); }
@media (max-width: 1100px) { .tr-body { grid-template-columns: 1fr; } .tr-cat { border-right: 0; border-bottom: 1px solid var(--line); max-height: 260px; } .tr-2 { grid-template-columns: 1fr; } }

/* ── Лаборатория → Все тесты ───────────────────────────────────────────────
   Статус всегда значком и словом; цвет только подкрепляет. */
.lx-tr { min-height: 400px; }
.tpw { display: flex; flex-direction: column; gap: 16px; max-width: 1440px; --glass: color-mix(in srgb, var(--panel) 86%, transparent); }
.tpw .tr-main { padding: 0; }
.tp, .tq { display: flex; flex-direction: column; gap: 16px; }
.tp > *, .tq > * { animation: tpUp .6s cubic-bezier(.2,.8,.2,1) both; }
.tp > *:nth-child(2), .tq > *:nth-child(2) { animation-delay: .06s; } .tp > *:nth-child(3), .tq > *:nth-child(3) { animation-delay: .12s; }
.tp > *:nth-child(4), .tq > *:nth-child(4) { animation-delay: .18s; } .tq > *:nth-child(5) { animation-delay: .24s; }
@keyframes tpUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* строка предмета */
.tp-ctx { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 12px 12px 12px 16px; border: 1px solid var(--line);
  border-radius: 16px; background: linear-gradient(180deg, var(--panel), var(--panel-2)); }
.tp-ctx-l { display: flex; flex-direction: column; gap: 2px; }
.tp-ctx-k { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tp-sel select { appearance: none; border: 0; background: transparent; color: var(--text); font: 650 14px var(--sans); padding: 0 18px 0 0; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 7px) 55%, calc(100% - 3px) 55%; background-size: 4px 4px; background-repeat: no-repeat; max-width: 320px; }
.tp-chips { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tp-c { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-c i { font-style: normal; font-size: 10px; color: var(--muted); }
.tp-c.hl { border-color: rgba(229,161,59,.45); background: var(--accent-sf); }
.tp-ctx-r { display: flex; gap: 4px; }
.tp-lk { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--text-2); font: 550 12px var(--sans);
  padding: 7px 10px; border-radius: 10px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.tp-lk:hover { background: var(--panel-2); color: var(--text); }
.tp-lk .ic { width: 14px; height: 14px; }

/* герой */
.tp-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; border: 1px solid var(--line); background: var(--panel);
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: center; padding: 34px 36px; min-height: 380px; }
.tp-aura { position: absolute; inset: -50%; z-index: -2; pointer-events: none; filter: blur(60px); opacity: .5;
  background: conic-gradient(from 0deg at 70% 50%, rgba(229,161,59,.0), rgba(229,161,59,.45), rgba(87,166,245,.35), rgba(47,191,113,.25), rgba(167,139,250,.3), rgba(229,161,59,.0));
  animation: tpSpin 26s linear infinite; }
.tp-hero.run .tp-aura { animation-duration: 8s; opacity: .7; }
.tp-hero.ready .tp-aura { opacity: .8; animation-duration: 12s; }
.tp-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 1.3px) 0 0 / 22px 22px,
              linear-gradient(90deg, var(--panel) 30%, transparent 75%); }
[data-theme="light"] .tp-grain { background: radial-gradient(circle at 1px 1px, rgba(0,0,0,.05) 1px, transparent 1.3px) 0 0 / 22px 22px, linear-gradient(90deg, var(--panel) 30%, transparent 75%); }
@keyframes tpSpin { to { transform: rotate(360deg); } }
.tp-hl { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tp-eye { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.tp-eye i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(229,161,59,.6); animation: tpLive 2s ease-out infinite; }
@keyframes tpLive { 0% { box-shadow: 0 0 0 0 rgba(229,161,59,.6); } 100% { box-shadow: 0 0 0 9px rgba(229,161,59,0); } }
.tp-hl h2 { margin: 0; font-size: 44px; line-height: 1.02; font-weight: 780; letter-spacing: -.04em;
  background: linear-gradient(180deg, var(--text) 30%, color-mix(in srgb, var(--text) 55%, var(--accent))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tp-hl p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); max-width: 600px; }
.tp-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 680px; }
.tp-steps li { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px solid var(--line-soft);
  background: var(--glass); backdrop-filter: blur(8px); transition: border-color .3s, background .3s; }
.tp-steps li em { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--mono);
  font-style: normal; color: var(--muted); border: 1px solid var(--line); }
.tp-steps li em .ic { width: 13px; height: 13px; }
.tp-steps li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tp-steps li b { font-size: 12.5px; color: var(--text-2); }
.tp-steps li span { font-size: 11px; color: var(--muted); line-height: 1.35; }
.tp-steps li.on { border-color: rgba(229,161,59,.55); background: color-mix(in srgb, var(--accent-sf) 60%, var(--glass)); }
.tp-steps li.on em { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 16px rgba(229,161,59,.5); }
.tp-steps li.on b { color: var(--text); }
.tp-steps li.done em { background: rgba(47,191,113,.14); border-color: rgba(47,191,113,.5); color: var(--up); }
.tp-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.tp-act-b { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--glass); backdrop-filter: blur(8px); color: var(--text); font: 600 12.5px var(--sans); cursor: pointer; transition: transform .15s, border-color .15s; }
.tp-act-b:hover { transform: translateY(-1px); border-color: var(--accent); }
.tp-act-b .ic { width: 14px; height: 14px; }
.tp-act-b .ic path[d^="M5 3v10"] { fill: currentColor; stroke: none; }
.tp-hr { display: grid; place-items: center; }

/* реактор: 23 сегмента — 23 теста */
.tp-reactor { position: relative; width: 320px; height: 320px; }
.tp-ring2 { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; stroke: none; }
.tp-bz { stroke: color-mix(in srgb, var(--muted) 38%, transparent); stroke-width: .8; }
.tp-bz.mj { stroke: color-mix(in srgb, var(--text-2) 70%, transparent); stroke-width: 1.2; }
.tp-disc { fill: url(#tpDisc); stroke: var(--line-soft); stroke-width: 1; }
.tp-track { fill: none; stroke: var(--line-soft); stroke-width: 9; opacity: .6; }
.tp-sg { fill: none; stroke-width: 7; stroke-linecap: butt; stroke: color-mix(in srgb, var(--line) 80%, var(--text-2)); cursor: default;
  animation: tpSgIn .5s calc(var(--i) * 22ms) ease-out both; transition: stroke .35s ease, stroke-width .3s ease, opacity .3s; }
@keyframes tpSgIn { from { opacity: 0; } to { opacity: 1; } }
.tp-sg:hover { stroke-width: 9; }
.tp-sg.queued { stroke: color-mix(in srgb, var(--line) 55%, var(--text-2)); opacity: .5; }
.tp-sg.run { stroke: var(--accent); stroke-width: 9; filter: drop-shadow(0 0 4px rgba(229,161,59,.7)); animation: tpSegPulse 1.1s ease-in-out infinite; }
@keyframes tpSegPulse { 50% { opacity: .5; } }
.tp-sg.done { stroke: var(--text-2); }
.tp-sg.s-ok { stroke: var(--up); } .tp-sg.s-warn { stroke: var(--accent); } .tp-sg.s-bad { stroke: var(--down); }
.tp-sg.s-na { stroke: color-mix(in srgb, var(--muted) 40%, transparent); } .tp-sg.s-info { stroke: var(--blue); }
.tp-arc-bg { fill: none; stroke: var(--line-soft); stroke-width: 2; }
.tp-arc { fill: none; stroke: url(#tpArcG); stroke-width: 3; stroke-linecap: round; transform-box: view-box; transform-origin: 150px 150px; transform: rotate(-90deg);
  transition: stroke-dasharray .45s ease; }
.tp-reactor.idle .tp-arc { opacity: 0; }
.tp-core { position: absolute; inset: 66px; display: grid; place-items: center; }
.tp-core-btn { position: relative; width: 100%; height: 100%; border-radius: 50%; border: 0; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; color: var(--on-accent); isolation: isolate;
  background: radial-gradient(circle at 35% 28%, #FFD58A, var(--accent) 45%, var(--accent-d) 100%);
  box-shadow: 0 20px 50px rgba(229,161,59,.35), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -8px 24px rgba(0,0,0,.18); transition: transform .2s cubic-bezier(.2,.9,.3,1.3); }
.tp-core-btn::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(229,161,59,.6); z-index: -1; animation: tpHalo 2.4s ease-out infinite; }
.tp-core-btn::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(229,161,59,.45); z-index: -1; animation: tpHalo 2.4s 1.2s ease-out infinite; }
@keyframes tpHalo { 0% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1.28); opacity: 0; } }
.tp-core-btn:hover { transform: scale(1.04); } .tp-core-btn:active { transform: scale(.97); }
.tp-core-btn b { font-size: 17px; line-height: 1.15; font-weight: 780; letter-spacing: -.01em; text-align: center; }
.tp-core-btn i { font-style: normal; font-size: 11px; opacity: .75; font-weight: 600; }
.tp-cb-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.14); }
.tp-cb-ic .ic { width: 18px; height: 18px; fill: currentColor; stroke: none; margin-left: 3px; }
.tp-core-btn.reveal { background: conic-gradient(from var(--rv, 0deg), var(--accent), #F7CF6A, var(--up), #57A6F5, var(--accent)); animation: tpRv 4s linear infinite; }
.tp-core-btn.reveal::before, .tp-core-btn.reveal::after { border-color: rgba(47,191,113,.55); }
.tp-core-btn.reveal .tp-cb-ic, .tp-core-btn.reveal b, .tp-core-btn.reveal i { color: #0B0D11; text-shadow: 0 1px 0 rgba(255,255,255,.3); }
@property --rv { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes tpRv { to { --rv: 360deg; } }
.tp-core-run { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.tp-core-run b { font: 760 52px/1 var(--mono); letter-spacing: -.05em; color: var(--text); font-variant-numeric: tabular-nums; }
.tp-core-run b small { font-size: 20px; color: var(--muted); margin-left: 2px; }
.tp-core-run span { font-size: 12px; color: var(--text-2); max-width: 170px; line-height: 1.35; }
.tp-core-run i { font-style: normal; font: 600 11px var(--mono); color: var(--accent); }
.tp-core-score { width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--line); background: radial-gradient(circle at 50% 30%, var(--panel-2), var(--panel));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--text); transition: transform .2s; }
.tp-core-score:hover { transform: scale(1.03); }
.tp-core-score b { font: 780 60px/1 var(--mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.tp-core-score > i { font-style: normal; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.tp-core-score.ok { box-shadow: 0 0 60px rgba(47,191,113,.18); } .tp-core-score.bad { box-shadow: 0 0 60px rgba(240,90,110,.2); } .tp-core-score.warn { box-shadow: 0 0 60px rgba(229,161,59,.2); }

/* дни для тестов */
.tp-scope { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); padding: 10px 12px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .25s, box-shadow .25s; }
.tp-scope.on { border-color: rgba(229,161,59,.5); box-shadow: 0 0 0 3px var(--accent-sf); }
.tp-sc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tp-sc-row .grow { flex: 1; }
.tp-sc-k { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--text); padding-left: 4px; }
.tp-sc-k .ic { color: var(--accent); width: 15px; height: 15px; }
.tp-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-soft); }
.tp-seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--text-2); font: 600 12px var(--sans);
  padding: 7px 12px; border-radius: 9px; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; }
.tp-seg button i { font-style: normal; font: 600 10.5px var(--mono); color: var(--muted); padding: 1px 6px; border-radius: 6px; background: var(--panel-2); }
.tp-seg button.on { background: var(--panel-2); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 14px rgba(0,0,0,.2); }
.tp-seg button .ic { width: 13px; height: 13px; }
.tp-seg button.bad .ic { color: var(--down); } .tp-seg button.warn .ic { color: var(--accent); } .tp-seg button.ok .ic { color: var(--up); } .tp-seg button.na .ic { color: var(--muted); }
.tp-fp { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-pill { border: 1px solid var(--line); background: transparent; color: var(--text-2); font: 550 11.5px var(--sans); padding: 6px 11px; border-radius: 999px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, transform .15s; }
.tp-pill:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.tp-pill.on { background: var(--accent-sf); border-color: var(--accent); color: var(--text); }
.tp-sc-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line-soft); animation: tpUp .35s both; }
.tp-rows { display: flex; flex-direction: column; gap: 6px; }
.tp-fr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tp-fr .num { width: 84px; }
.tp-fk { font-size: 11px; color: var(--muted); }
.tp-x { border: 0; background: var(--panel-2); color: var(--muted); width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.tp-x:hover { color: var(--down); }
.tp-fa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.tp-fa .grow { flex: 1; }
.tp-stripw { display: flex; flex-direction: column; gap: 4px; }
.tp-strip { display: block; width: 100%; height: 30px; background: var(--bg); border-radius: 8px; stroke: none; }
.tp-strip rect { fill: var(--accent); cursor: pointer; transition: fill .15s; animation: tpBar .5s both; transform-origin: center; }
.tp-strip rect:hover { fill: var(--text); }
@keyframes tpBar { from { transform: scaleY(0); } to { transform: none; } }
.tp-sl { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }

/* плитки */
.tp-tiles { display: flex; flex-direction: column; gap: 10px; }
.tp-tbar { position: sticky; top: 0; z-index: 6; padding: 8px 0; background: linear-gradient(180deg, var(--bg) 70%, transparent); }
.tp-gh { display: flex; align-items: baseline; gap: 10px; margin: 14px 2px 2px; }
.tp-gh b { font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.tp-gh span { font-size: 11.5px; color: var(--muted); }
.tp-gh em { font-style: normal; font: 600 10.5px var(--mono); color: var(--muted); margin-left: auto; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.tp-t { --mx: 50%; --my: 0%; position: relative; overflow: hidden; isolation: isolate; text-align: left; cursor: pointer; border: 1px solid var(--line);
  border-radius: 18px; background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 70%, var(--bg)));
  padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 7px; color: var(--text); min-height: 176px;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .25s, opacity .3s; animation: tpUp .5s calc(var(--i) * 35ms) both; }
.tp-t::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .25s;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(229,161,59,.14), transparent 60%); }
.tp-t:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.tp-t:hover::before { opacity: 1; }
.tp-ti { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--text-2);
  background: linear-gradient(180deg, var(--panel-2), var(--bg)); border: 1px solid var(--line-soft); transition: color .2s, border-color .2s; }
.tp-ti .ic { width: 17px; height: 17px; }
.tp-t:hover .tp-ti { color: var(--accent); border-color: rgba(229,161,59,.4); }
.tp-ti.big { width: 52px; height: 52px; border-radius: 16px; color: var(--accent); }
.tp-ti.big .ic { width: 24px; height: 24px; }
.tp-tk { font: 600 9.5px/1.2 var(--mono); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; margin-top: 4px; }
.tp-tn { font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.tp-tw { font-size: 12px; color: var(--text-2); line-height: 1.5; flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tp-tf { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); min-height: 24px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.tp-tf .ic { width: 13px; height: 13px; }
.tp-pf { font: 600 11.5px/1.3 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.tp-more { position: absolute; right: 14px; top: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--accent);
  background: var(--accent-sf); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.tp-more .ic { width: 13px; height: 13px; }
.tp-t:hover .tp-more { opacity: 1; transform: none; }
.tp-t.queued { opacity: .5; border-style: dashed; }
.tp-t.run { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 34px rgba(229,161,59,.25); }
.tp-t.run::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 50% 100%; background-repeat: no-repeat; animation: tpScan 1.3s linear infinite; }
@keyframes tpScan { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.tp-t.run .tp-tf { color: var(--accent); }
.tp-dots { display: inline-flex; gap: 3px; } .tp-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: tpDot 1s infinite; }
.tp-dots i:nth-child(2) { animation-delay: .15s; } .tp-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tpDot { 0%, 100% { opacity: .2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.tp-t.done .tp-tf { color: var(--text-2); }
.tp-t[class*=" s-"] { animation: tpPop .55s calc(var(--i) * 40ms) both cubic-bezier(.2,1.1,.3,1); }
.tp-t.s-ok { box-shadow: inset 0 3px 0 var(--up); } .tp-t.s-warn { box-shadow: inset 0 3px 0 var(--accent); }
.tp-t.s-bad { box-shadow: inset 0 3px 0 var(--down); background: linear-gradient(180deg, color-mix(in srgb, var(--down) 7%, var(--panel)), var(--panel)); }
.tp-t.s-na { box-shadow: inset 0 3px 0 var(--line); } .tp-t.s-info { box-shadow: inset 0 3px 0 var(--blue); }
.tp-t[class*=" s-"]:hover { box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.tp-idle { color: var(--muted); }
@keyframes tpPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* итог */
.tp-res { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 16px; align-items: start; scroll-margin-top: 12px; }
.tp-score { position: sticky; top: 8px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); padding: 20px 22px 18px;
  display: flex; flex-direction: column; gap: 10px; overflow: hidden; isolation: isolate; }
.tp-score::before { content: ''; position: absolute; inset: -30%; z-index: -1; opacity: .22; pointer-events: none; filter: blur(30px);
  background: radial-gradient(40% 35% at 50% 32%, var(--accent), transparent 70%); }
.tp-score.ok::before { background: radial-gradient(40% 35% at 50% 32%, var(--up), transparent 70%); }
.tp-score.bad::before { background: radial-gradient(40% 35% at 50% 32%, var(--down), transparent 70%); }
.tp-gw { position: relative; margin: 4px 6px 0; }
.tp-g { display: block; width: 100%; height: auto; stroke: none; }
.tp-g text { stroke: none; }
.tp-gbg { fill: none; stroke: var(--line); stroke-width: 18; }
.tp-ga { fill: none; stroke-width: 14; opacity: .9; stroke-dasharray: 400; stroke-dashoffset: 400; }
.tp-res.go .tp-ga { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.3,.8,.2,1); }
.tp-res.go .tp-ga.warn { transition-delay: .15s; } .tp-res.go .tp-ga.ok { transition-delay: .3s; }
.tp-ga.bad { stroke: var(--down); } .tp-ga.warn { stroke: var(--accent); } .tp-ga.ok { stroke: var(--up); }
.tp-gt { stroke: var(--muted); stroke-width: 1.2; }
.tp-gl { fill: var(--muted); font: 500 9.5px var(--sans); text-anchor: middle; }
.tp-needle { transform-box: view-box; transform-origin: 160px 150px; transform: rotate(-90deg); fill: var(--text); stroke: none; }
.tp-needle circle { fill: var(--panel); stroke: var(--text); stroke-width: 3; }
.tp-res.go .tp-needle { transform: rotate(var(--ang)); transition: transform 1.8s .25s cubic-bezier(.25,1.35,.35,1); }
.tp-num { text-align: center; margin-top: -6px; }
.tp-num b { font: 780 64px/1 var(--mono); letter-spacing: -.05em; color: var(--text); font-variant-numeric: tabular-nums; }
.tp-num i { font-style: normal; font: 600 18px var(--mono); color: var(--muted); margin-left: 4px; }
.tp-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); text-align: center; }
.tp-zone .tr-st { font-size: 13.5px; padding: 6px 14px; }
.tp-scale { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.tp-scale span { font-size: 10.5px; color: var(--text-2); padding: 3px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line-soft); }
.tp-scale span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.tp-scale .bad::before { background: var(--down); } .tp-scale .warn::before { background: var(--accent); } .tp-scale .ok::before { background: var(--up); }
.tp-form { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.tp-det { border-top: 1px solid var(--line-soft); padding-top: 10px; }
.tp-det summary { cursor: pointer; font-size: 12px; color: var(--text-2); font-weight: 650; list-style: none; }
.tp-det summary::before { content: '›'; display: inline-block; margin-right: 6px; transition: transform .2s; }
.tp-det[open] summary::before { transform: rotate(90deg); }
.tp-det table { margin-top: 8px; }
.tp-det tr[data-t] { cursor: pointer; }
.tp-card { min-width: 0; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); padding: 20px 22px; }
.tp-card .tr-card { max-width: none; }
.tp-card .tr-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tp-card .tr-cnt { flex-direction: column; align-items: flex-start; gap: 4px; border-radius: 14px; padding: 12px 14px; }
.tp-card .tr-cnt b { font-size: 28px; }
.tp-card .tr-cnt.bad { background: color-mix(in srgb, var(--down) 8%, var(--panel)); }
.tp-card .tr-cnt.ok { background: color-mix(in srgb, var(--up) 7%, var(--panel)); }
.tp-card .tr-cnt.warn { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.tp-res:not(.go) .tp-card { opacity: 0; transform: translateY(12px); }
.tp-res.go .tp-card { opacity: 1; transform: none; transition: opacity .7s .6s ease, transform .7s .6s ease; }

/* страница теста */
.tp-crumb { display: flex; align-items: center; gap: 10px; }
.tp-bk { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 600 12.5px var(--sans);
  padding: 8px 14px 8px 11px; border-radius: 999px; cursor: pointer; transition: border-color .15s, transform .15s; }
.tp-bk:hover { border-color: var(--accent); transform: translateX(-2px); }
.tp-bk .ic { width: 14px; height: 14px; }
.tp-dots2 { flex: 1; display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; }
.tp-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; transition: transform .15s; }
.tp-dot:hover { transform: scale(1.5); }
.tp-dot.ok { background: var(--up); border-color: var(--up); } .tp-dot.warn { background: var(--accent); border-color: var(--accent); }
.tp-dot.bad { background: var(--down); border-color: var(--down); } .tp-dot.na { background: transparent; border-color: var(--muted); }
.tp-dot.info { background: var(--blue); border-color: var(--blue); }
.tp-dot.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
.tp-nx { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.tp-nx:hover { border-color: var(--accent); }
.tp-nx .ic { width: 14px; height: 14px; }
.tp-pos { font: 600 11px var(--mono); color: var(--muted); }
.tq-h { position: relative; overflow: hidden; isolation: isolate; display: flex; gap: 18px; align-items: flex-start; padding: 24px 26px; border-radius: 24px;
  border: 1px solid var(--line); background: var(--panel); }
.tq-h::before { content: ''; position: absolute; right: -10%; top: -60%; width: 60%; height: 200%; z-index: -1; opacity: .35; filter: blur(50px);
  background: radial-gradient(closest-side, var(--accent-sf), transparent); }
.tq-ht { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tq-k { font: 650 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tq-ht h2 { margin: 0; font-size: 30px; font-weight: 760; letter-spacing: -.03em; color: var(--text); }
.tq-ht p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.55; max-width: 720px; }
.tq-hr { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 0 auto; }
.tq-hr .tr-st { font-size: 13px; padding: 6px 13px; }
.tq-at { font-size: 11px; color: var(--muted); }
.tp-run-b { display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer; padding: 12px 20px; border-radius: 999px; font: 700 13.5px var(--sans);
  color: var(--on-accent); background: linear-gradient(135deg, #F2B54F, var(--accent-d)); box-shadow: 0 10px 26px rgba(229,161,59,.3); transition: transform .15s, box-shadow .2s; }
.tp-run-b:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(229,161,59,.4); }
.tp-run-b:disabled { opacity: .5; cursor: default; transform: none; }
.tp-run-b .ic { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.tq-res { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: 24px; border: 1px solid var(--line); background: var(--panel); box-shadow: inset 0 3px 0 var(--line); }
.tq-res.s-ok { box-shadow: inset 0 3px 0 var(--up); } .tq-res.s-warn { box-shadow: inset 0 3px 0 var(--accent); } .tq-res.s-bad { box-shadow: inset 0 3px 0 var(--down); }
.tq-res.s-info { box-shadow: inset 0 3px 0 var(--blue); }
.tq-rh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; }
.tq-rh b { font: 700 22px/1.25 var(--mono); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.tq-rh > span:last-child { flex-basis: 100%; font-size: 13px; color: var(--text-2); }
.tq-view { display: flex; flex-direction: column; gap: 12px; }
.tq-wait { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-radius: 18px; border: 1px dashed var(--line); color: var(--text-2); font-size: 13px; }
.tq-wait .ic { color: var(--accent); flex: 0 0 auto; }
.tq-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tq-c { --mx: 50%; --my: 0%; position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.tq-c::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .25s; background: radial-gradient(240px circle at var(--mx) var(--my), rgba(87,166,245,.1), transparent 60%); }
.tq-c:hover::before { opacity: 1; }
.tq-c > i { font-style: normal; display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.tq-c > i .ic { width: 14px; height: 14px; color: var(--accent); }
.tq-c p { margin: 0; } .tq-c ul { margin: 0; padding-left: 18px; } .tq-c li { margin: 3px 0; } .tq-c > span { font-size: 11px; color: var(--muted); }
.tq-set { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.tq-set > i { font-style: normal; font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.tq-sub { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-2); }
.tq-sub > b { color: var(--text); font-size: 12.5px; } .tq-sub > span { color: var(--muted); font-size: 11.5px; }
.tp-vars { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(229,161,59,.35);
  background: linear-gradient(135deg, var(--accent-sf), transparent 70%); }
.tp-vars > b { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); }
.tp-vars > b .ic { color: var(--accent); }
.tp-vars > div { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-vars .btn { border-radius: 999px; background: var(--panel); border: 1px solid var(--line); transition: border-color .15s, transform .15s; }
.tp-vars .btn:hover { border-color: var(--accent); transform: translateY(-1px); }

.var-bar { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 12px;
  padding: 8px 10px 8px 16px; border-radius: 14px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(10px); box-shadow: var(--shadow); font-size: 12.5px; color: var(--text-2); max-width: calc(100% - 40px); animation: tpPop .35s both; }
.var-bar b { color: var(--text); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.var-k { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.var-bar .pos { color: var(--up); font-family: var(--mono); } .var-bar .neg { color: var(--down); font-family: var(--mono); }

@media (max-width: 1200px) { .tp-hero { grid-template-columns: 1fr; } .tp-res { grid-template-columns: 1fr; } .tp-score { position: static; } .tq-info { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .tp-steps { grid-template-columns: 1fr; } .tp-card .tr-counts { grid-template-columns: repeat(2, 1fr); } }

/* ── Все тесты: стратегия, «Улучшить», карта подбора ───────────────────── */
.tp-ctx { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.tp-ctx-r { grid-column: 4; }
.tp-strat { display: flex; align-items: center; gap: 6px; }
.tp-sel.big select { font-size: 16px; font-weight: 720; letter-spacing: -.01em; max-width: 360px; }
.tp-sn { font-size: 16px; font-weight: 720; color: var(--text); }
.tp-ctx-l + .tp-ctx-l { padding-left: 14px; border-left: 1px solid var(--line-soft); }
.tp-nr { font-size: 11px; color: var(--muted); line-height: 1.35; flex-basis: 100%; }
.tp-imp { position: relative; overflow: hidden; border: 0; cursor: pointer; border-radius: 999px; padding: 0; color: #0B0D11; font: 750 13.5px var(--sans);
  background: linear-gradient(120deg, #F7CF6A, var(--up)); box-shadow: 0 10px 30px rgba(47,191,113,.3); transition: transform .15s; animation: tpPulse 2.4s ease-in-out infinite; }
.tp-imp span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; }
.tp-imp .ic { width: 15px; height: 15px; }
.tp-imp::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: tpShine 3s ease-in-out infinite; }
.tp-imp:hover { transform: translateY(-2px); }
@keyframes tpPulse { 0%, 100% { box-shadow: 0 8px 26px rgba(229,161,59,.3); } 50% { box-shadow: 0 12px 40px rgba(47,191,113,.45); } }
@keyframes tpShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.tp-run-b.sm { padding: 8px 14px; font-size: 12px; }
.tq-hr .tp-act-b { font-size: 12px; padding: 8px 13px; }
.ti-h { display: flex; align-items: baseline; gap: 10px; margin: 6px 2px 0; }
.ti-h b { font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.ti-h span { font-size: 11.5px; color: var(--muted); }
.ti-go { display: flex; align-items: center; gap: 20px; padding: 20px 22px; border-radius: 22px; border: 1px solid rgba(47,191,113,.4);
  background: linear-gradient(120deg, color-mix(in srgb, var(--up) 10%, var(--panel)), var(--panel) 60%); }
.ti-go > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ti-go b { font-size: 16px; color: var(--text); } .ti-go span { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.ti-run { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--accent); background: var(--accent-sf); color: var(--text); font-size: 13px; }
.ti-run span { flex: 1; }
.ti-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.ti-c { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); animation: tpPop .5s both; }
.ti-c.v-ok { border-color: rgba(47,191,113,.55); box-shadow: 0 0 0 3px rgba(47,191,113,.08); }
.ti-c header { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.ti-c header b { font-size: 14.5px; color: var(--text); letter-spacing: -.01em; }
.ti-c p { margin: 0; font-size: 12px; color: var(--text-2); line-height: 1.5; }
.ti-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ti-nums > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-soft); }
.ti-nums i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.ti-nums b { font: 700 15px/1.2 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.ti-nums b.pos { color: var(--up); } .ti-nums b.neg { color: var(--down); }
.ti-nums u { text-decoration: none; font-size: 10.5px; color: var(--text-2); font-family: var(--mono); }
.ti-c footer, .ti-d footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ti-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.ti-d { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); animation: tpPop .5s both; }
.ti-d.s-bad { box-shadow: inset 0 3px 0 var(--down); } .ti-d.s-warn { box-shadow: inset 0 3px 0 var(--accent); }
.ti-d header { display: flex; align-items: center; gap: 12px; }
.ti-d header > div { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.ti-d header b { font-size: 14.5px; color: var(--text); } .ti-d header span { font-size: 11px; color: var(--muted); }
.ti-d dl { margin: 0; display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 7px 12px; font-size: 12.5px; line-height: 1.5; }
.ti-d dt { color: var(--muted); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
.ti-d dd { margin: 0; color: var(--text); }
.ti-d dd:last-of-type { color: var(--text-2); }
.tr-map td.tr-best { outline: 2px solid var(--accent); outline-offset: -2px; font-weight: 700; }
.tr-map td.tr-cur::after { content: '•'; margin-left: 4px; color: var(--accent); }
@media (max-width: 1200px) { .tp-ctx { grid-template-columns: 1fr auto; } .tp-ctx-r { grid-column: 2; grid-row: 1; } .tp-ctx-l + .tp-ctx-l { border-left: 0; padding-left: 0; } }

/* ── Мои стратегии ───────────────────────────────────────────────────────── */
.lib-box { width: min(640px, 94vw); max-height: 80vh; display: flex; flex-direction: column; gap: 12px; animation: tpPop .3s both; }
.lib-box header { display: flex; align-items: flex-start; gap: 12px; }
.lib-box header > div { flex: 1; }
.lib-box h3 { margin: 0 0 4px; font-size: 18px; }
.lib-box header p { margin: 0; font-size: 12px; color: var(--muted); }
.lib-x { border: 0; background: var(--panel-2); color: var(--text-2); width: 30px; height: 30px; border-radius: 10px; cursor: pointer; font-size: 18px; }
.lib-list { overflow: auto; display: flex; flex-direction: column; gap: 6px; margin: 0 -4px; padding: 0 4px; }
.lib-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--bg); transition: border-color .15s; }
.lib-row:hover { border-color: var(--line); }
.lib-row.cur { border-color: rgba(229,161,59,.5); }
.lib-n { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lib-n b { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-n span { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-del:hover { color: var(--down); border-color: var(--down); }
.btn.danger { background: var(--down); border-color: var(--down); color: #fff; }
.lib-ask { font-size: 12px; color: var(--down); }
.lib-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 12.5px; }
.ti-c header { flex-direction: column; align-items: flex-start; gap: 6px; }
.ti-nums b { font-size: 13.5px; white-space: nowrap; }
.ti-nums u { white-space: nowrap; }
.lib-row .btn { border-radius: 10px; }

/* ── Настройки тестов ────────────────────────────────────────────────────── */
.tset-g { border: 1px solid var(--line); border-radius: 20px; background: var(--panel); padding: 6px 20px; animation: tpUp .5s both; }
.tset-g h3 { margin: 12px 0 4px; font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.tset-row { display: flex; align-items: center; gap: 20px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.tset-g h3 + .tset-row { border-top: 0; }
.tset-row > div:first-child { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tset-row b { font-size: 13.5px; color: var(--text); }
.tset-row span { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.tset-row .tp-seg { flex: 0 0 auto; flex-wrap: wrap; }
.tp-small { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; border: 1px dashed var(--muted); color: var(--muted); }

/* ── Улучшить: семьи кандидатов и чувствительность ─────────────────────── */
.ti-fh { display: flex; align-items: baseline; gap: 10px; margin: 8px 2px 0; }
.ti-fh b { font-size: 13px; color: var(--text); }
.ti-fh span { font-size: 11.5px; color: var(--muted); }
.ti-sens { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.ti-sens > b { font-size: 12.5px; color: var(--text); margin-bottom: 4px; }
.ti-sr { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 12px; color: var(--text-2); }
.ti-sr i { height: 8px; border-radius: 4px; background: var(--bg); position: relative; overflow: hidden; }
.ti-sr i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: linear-gradient(90deg, var(--accent-d), var(--accent)); border-radius: 4px; animation: tpGrow .8s both; }
@keyframes tpGrow { from { width: 0; } }
.ti-sr em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--text); white-space: nowrap; }

/* ── Карта параметров ───────────────────────────────────────────────────── */
:root { --pm-good: #3987e5; --pm-bad: #d95926; }
[data-theme="light"] { --pm-good: #2a78d6; --pm-bad: #eb6834; }
.pm-h { display: flex; align-items: flex-start; gap: 20px; padding: 24px 26px; border-radius: 24px; border: 1px solid var(--line); background: var(--panel); position: relative; overflow: hidden; isolation: isolate; }
.pm-h::before { content: ''; position: absolute; right: -8%; top: -80%; width: 55%; height: 220%; z-index: -1; opacity: .35; filter: blur(60px);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pm-good) 40%, transparent), transparent); }
.pm-h > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.pm-h h2 { margin: 0; font-size: 28px; font-weight: 760; letter-spacing: -.03em; color: var(--text); }
.pm-h p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.55; max-width: 760px; }
.pm-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; padding: 15px 24px; border-radius: 16px;
  font: 700 15px var(--sans); color: #fff; background: linear-gradient(135deg, #5b5cf0, #3f3fd8); box-shadow: 0 12px 30px rgba(79,70,229,.35); transition: transform .15s, box-shadow .2s; }
.pm-go:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(79,70,229,.45); }
.pm-go .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.pm-go:disabled { opacity: .5; cursor: default; transform: none; }
.pm-ctl { display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 14px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.pm-ctl label { display: flex; flex-direction: column; gap: 6px; }
.pm-ctl label > span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pm-ctl select { max-width: 280px; }
.pm-empty { display: flex; gap: 14px; align-items: center; padding: 28px; border-radius: 20px; border: 1px dashed var(--line); color: var(--text-2); }
.pm-empty .ic { width: 28px; height: 28px; color: var(--accent); }
.pm-empty div { display: flex; flex-direction: column; gap: 4px; } .pm-empty b { color: var(--text); font-size: 14px; } .pm-empty span { font-size: 12.5px; }
.pm-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.pm-main { padding: 18px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); overflow-x: auto; }
.pm-grid { display: grid; grid-template-columns: 52px repeat(var(--cols), minmax(58px, 1fr)); gap: 6px; }
.pm-xl, .pm-yl { display: flex; align-items: center; justify-content: center; font: 500 12px var(--mono); color: var(--muted); }
.pm-yl { justify-content: flex-end; padding-right: 6px; }
.pm-c { position: relative; height: 54px; border: 0; border-radius: 10px; cursor: pointer; font: 600 13px var(--mono); color: var(--text);
  font-variant-numeric: tabular-nums; transition: transform .15s, box-shadow .15s; animation: tpPop .45s calc(var(--i) * 6ms) both; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
[data-theme="light"] .pm-c { text-shadow: none; }
.pm-c:hover { transform: scale(1.06); z-index: 2; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.pm-c.best { box-shadow: 0 0 0 3px var(--text), 0 0 24px color-mix(in srgb, var(--pm-good) 60%, transparent); z-index: 1; }
.pm-c.cur::after { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--panel); }
.pm-c.sel { outline: 2px dashed var(--accent); outline-offset: 2px; }
.pm-ax { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--muted); }
.pm-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 8px; }
.pm-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.pm-card > i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.pm-card > b { font: 650 16px/1.3 var(--mono); color: var(--text); letter-spacing: -.01em; }
.pm-sub { font-size: 11px; color: var(--muted); }
.pm-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12px; }
.pm-kv span { color: var(--muted); } .pm-kv em { font-style: normal; font-family: var(--mono); text-align: right; color: var(--text); }
.pm-kv em.pos { color: var(--up); } .pm-kv em.neg { color: var(--down); }
.pm-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pm-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.45; padding: 10px 12px; border-radius: 14px; color: var(--text); border: 1px solid var(--line); }
.pm-note .ic { flex: 0 0 auto; margin-top: 1px; }
.pm-note.ok .ic { color: var(--up); } .pm-note.bad .ic { color: var(--down); }
.pm-note.bad { border-color: rgba(240,90,110,.4); background: color-mix(in srgb, var(--down) 6%, var(--panel)); }
.pm-scale { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--pm-bad), var(--panel-2) 50%, var(--pm-good)); }
.pm-scale.inv { background: linear-gradient(90deg, var(--pm-bad), var(--panel-2) 50%, var(--pm-good)); }
.pm-sl { display: flex; justify-content: space-between; font: 500 11px var(--mono); color: var(--muted); }
@media (max-width: 1200px) { .pm-body { grid-template-columns: 1fr; } .pm-side { position: static; } }
.ti-nums u { white-space: normal; }
.tr-3 > div.tr-ref { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

/* ── Matana AI: вкладка конструктора во весь экран, как разговор ─────── */
.ai-body { flex-direction: column; min-height: 0; overflow: hidden;
  background: radial-gradient(1200px 500px at 50% -10%, var(--accent-sf), transparent 70%), var(--bg); }
.ai-page { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; width: 100%; }
.ai-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 28px 20px 12px; }
.ai-col { width: 100%; max-width: 860px; margin: 0 auto; }
.ai-hero { text-align: center; padding: 8vh 0 24px; }
.ai-logo { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center;
  background: var(--accent-sf); color: var(--accent); }
.ai-logo svg { width: 28px; height: 28px; }
.ai-hero h2 { margin: 0 0 8px; font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.ai-hero p { margin: 0 auto 22px; max-width: 560px; color: var(--text-2); font-size: 13.5px; }
.ai-ex { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; text-align: left; }
.ai-exb { border: 1px solid var(--line); background: var(--panel); color: var(--text-2); border-radius: 12px;
  padding: 12px 14px; font-size: 12.5px; line-height: 1.45; cursor: pointer; text-align: left; transition: border-color .15s, color .15s; }
.ai-exb:hover { border-color: var(--accent); color: var(--text); }
.ai-feed { display: flex; flex-direction: column; gap: 10px; }
.ai-msg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.5; max-width: 85%; white-space: pre-wrap; }
.ai-msg.me { align-self: flex-end; background: var(--raise); color: var(--text); }
.ai-msg.bot { align-self: flex-start; background: var(--panel); color: var(--text); border: 1px solid var(--line-soft); }
.ai-msg.sys { max-width: none; background: var(--panel); color: var(--text-2); border: 1px dashed var(--line); white-space: normal; }
.ai-msg.sys code { font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
.ai-msg.ok { align-self: stretch; max-width: none; background: color-mix(in srgb, var(--up) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--up) 35%, transparent); white-space: normal; }
.ai-msg.ok b { color: var(--up); font-weight: 600; }
.ai-msg.ok i { color: var(--muted); font-size: 12px; }
.ai-msg.err { align-self: stretch; max-width: none; background: color-mix(in srgb, var(--down) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--down) 35%, transparent); color: var(--text); white-space: normal; word-break: break-word; }
.ai-msg .grow { flex: 1 1 auto; }
.ai-msg.wait { align-self: flex-start; color: var(--muted); }
.ai-dots { display: inline-flex; gap: 3px; }
.ai-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: aiDot 1s infinite ease-in-out; }
.ai-dots i:nth-child(2) { animation-delay: .15s; } .ai-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.ai-qs { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 14px;
  border: 1px solid var(--accent); background: var(--panel); }
.ai-q b { display: block; font-size: 13.5px; margin-bottom: 8px; }
.ai-opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ai-own { height: 28px; font-size: 12px; min-width: 160px; flex: 1 1 160px; max-width: 320px; }
.ai-qa { display: flex; justify-content: flex-end; gap: 8px; }
.ai-clear { align-self: center; border: 0; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; padding: 6px; }
.ai-clear:hover { color: var(--accent); }
.ai-dock { flex: 0 0 auto; padding: 8px 20px 18px; }
.ai-box { border: 1px solid var(--line); background: var(--panel); border-radius: 16px; padding: 10px 12px 10px 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18); transition: border-color .15s; }
.ai-box:focus-within { border-color: var(--accent); }
.ai-in { display: block; width: 100%; min-height: 44px; max-height: 220px; resize: none; border: 0; outline: 0;
  background: transparent; color: var(--text); font: inherit; font-size: 14px; line-height: 1.5; padding: 2px 0; }
.ai-in:disabled { opacity: .55; }
.ai-tools { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ai-tools .grow { flex: 1 1 auto; }
.ai-note { color: var(--muted); font-size: 11.5px; }
.ai-mode { flex: 0 0 auto; display: inline-flex; height: 30px; padding: 3px; gap: 2px; border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--line); }
.ai-mode button { border: 0; background: transparent; color: var(--text-2); font-size: 12px; padding: 0 10px;
  border-radius: 5px; cursor: pointer; white-space: nowrap; }
.ai-mode button.on { background: var(--raise); color: var(--text); font-weight: 600; }
.ai-go { flex: 0 0 auto; }
.lib-ren { width: 180px; height: 30px; }

/* ── тикеры: лента-демо, повтор, «добавить тикер» ── */
.sym-demo { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  font: 600 9.5px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px;
  color: var(--warn, #c9892b); border: 1px solid color-mix(in srgb, var(--warn, #c9892b) 45%, var(--line)); }
.sym-bad { cursor: default; opacity: .75; }
.sym-add { display: flex; align-items: center; gap: 12px; width: calc(100% - 4px); margin: 6px 2px 2px;
  padding: 10px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: transparent;
  color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .14s, background .14s; }
.sym-add:hover { border-color: var(--accent); background: var(--accent-sf); }
.sym-add svg { flex: 0 0 22px; width: 22px; height: 22px; padding: 4px; border-radius: 999px;
  background: var(--accent-sf); stroke: var(--accent); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.sym-add span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sym-add b { font-size: 12.5px; font-weight: 600; }
.sym-add i { font-style: normal; font-size: 11px; color: var(--muted); }
.sym-how .sym-cmd { white-space: nowrap; }
.tag.sym-tag { font-family: var(--mono); font-weight: 700; color: var(--accent); }

/* ── AI: заметная, но спокойная кнопка ──────────────────────────────────────
   Свой цвет (фиолетовый), чтобы её было видно среди вкладок, — но без
   переливов и свечения: она стоит на экране всё время и не должна отвлекать. */
.ai-cta { --ai-c: #a78bfa; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  height: 32px; margin-left: 8px; padding: 0 14px 0 11px; border-radius: 999px; cursor: pointer;
  font: 600 12.5px/1 var(--sans); white-space: nowrap; color: var(--ai-c);
  border: 1px solid color-mix(in srgb, var(--ai-c) 42%, var(--line));
  background: color-mix(in srgb, var(--ai-c) 11%, var(--panel));
  transition: background .15s, border-color .15s, color .15s; }
.ai-cta svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.ai-cta b { font-weight: 700; }
.ai-cta:hover { background: color-mix(in srgb, var(--ai-c) 18%, var(--panel));
  border-color: color-mix(in srgb, var(--ai-c) 65%, var(--line)); }
.ai-cta.on { color: #fff; border-color: transparent; background: color-mix(in srgb, var(--ai-c) 72%, #3b1d8f); }
[data-theme="light"] .ai-cta { --ai-c: #7c3aed; }
[data-theme="light"] .ai-cta.on { background: #7c3aed; }
@keyframes aiFlow { to { background-position: 260% 0; } }
@keyframes aiGlow { 0%, 100% { opacity: .35; transform: scale(.96); } 50% { opacity: .75; transform: scale(1.06); } }
@keyframes aiTwinkle { 0%, 100% { transform: rotate(0) scale(1); } 40% { transform: rotate(18deg) scale(1.18); } 60% { transform: rotate(-6deg) scale(.94); } }

/* логотип на первом экране AI */
.ai-hero .ai-logo { color: #fff; background: linear-gradient(135deg, #7c3aed, #c026d3 55%, #f43f5e);
  box-shadow: 0 12px 32px -14px rgba(192, 38, 211, .7); }
.ai-hero .ai-logo svg { fill: #fff; stroke: none; }

/* ── AI: «собираю стратегию» ─────────────────────────────────────────────── */
.ai-build { align-self: stretch; position: relative; overflow: hidden; padding: 14px 16px 14px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, #c026d3 35%, var(--line)); background:
  radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, #7c3aed 14%, transparent), transparent 60%),
  radial-gradient(90% 90% at 100% 100%, color-mix(in srgb, #f43f5e 10%, transparent), transparent 60%), var(--panel);
  box-shadow: 0 18px 50px -24px rgba(124, 58, 237, .55); animation: aibIn .4s cubic-bezier(.2, .9, .3, 1.2); }
.ai-build::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #c026d3, #f59e0b, transparent); background-size: 200% 100%;
  animation: aiFlow 2.2s linear infinite; }
@keyframes aibIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.aib-top { display: flex; align-items: center; gap: 12px; }
.aib-orb { position: relative; flex: 0 0 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, #7c3aed, #c026d3 50%, #f43f5e); }
.aib-orb svg { width: 20px; height: 20px; fill: #fff; animation: aibSpin 3.2s linear infinite; }
.aib-orb::after { content: ''; position: absolute; inset: -5px; border-radius: 15px; border: 2px solid transparent;
  border-top-color: #f59e0b; border-right-color: #c026d3; animation: aibSpin 1.1s linear infinite; }
@keyframes aibSpin { to { transform: rotate(360deg); } }
.aib-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.aib-title { font-size: 14px; font-weight: 650; background: linear-gradient(90deg, var(--text), #d946ef, var(--text));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.aib-sub { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 15px; }
.aib-time { font: 600 12px var(--mono); color: var(--muted); flex: 0 0 auto; }

.aib-board { position: relative; display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 10px; margin: 14px 0 12px;
  height: 172px; padding: 10px; border-radius: 12px; overflow: hidden;
  background: repeating-linear-gradient(0deg, transparent 0 19px, color-mix(in srgb, var(--line) 45%, transparent) 19px 20px),
  repeating-linear-gradient(90deg, transparent 0 19px, color-mix(in srgb, var(--line) 45%, transparent) 19px 20px),
  color-mix(in srgb, var(--bg, #0b0d11) 55%, transparent); }
.aib-col { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; }
.aib-col.mid { justify-content: center; }
.aib-col:not(.mid)::after { content: ''; position: absolute; top: 18%; bottom: 18%; width: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(180deg, transparent, #c026d3, transparent); transition: opacity .5s; }
.aib-col[data-c="0"]::after { right: -7px; } .aib-col[data-c="2"]::after { left: -7px; }
.aib-board.live .aib-col::after { opacity: .7; animation: aibPulse 1.6s ease-in-out infinite; }
@keyframes aibPulse { 50% { opacity: .2; } }
.aib-b { position: relative; padding: 6px 9px; border-radius: 8px; font: 11px/1.3 var(--mono); color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid #60a5fa; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .6);
  animation: aibFly .65s cubic-bezier(.2, 1.3, .35, 1) both; }
.aib-b.act { border-left-color: #34d399; }
.aib-b.rule { border-left-color: #c026d3; font-weight: 700; font-family: var(--sans); font-size: 12px; text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, #7c3aed 22%, var(--panel)), var(--panel)); }
.aib-b.head { border-left-color: #f59e0b; font-family: var(--sans); font-weight: 650; text-align: center; }
.aib-b.opt, .aib-b.guard { border-left-color: #f59e0b; color: var(--text-2); font-size: 10.5px; }
@keyframes aibFly { 0% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 60px)) rotate(var(--rot, 10deg)) scale(.55); }
  70% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.aib-ghosts { position: absolute; inset: 10px; z-index: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  align-content: center; transition: opacity .6s; }
.aib-board.live .aib-ghosts { display: none; }
.aib-ghosts i { height: 30px; border-radius: 8px; border: 1px dashed color-mix(in srgb, #c026d3 45%, var(--line));
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, #c026d3 16%, transparent) 50%, transparent 80%) ,
  color-mix(in srgb, var(--panel) 70%, transparent);
  background-size: 220% 100%, auto; animation: aibShimmer 1.8s linear infinite, aibShuffle 4.8s cubic-bezier(.6, 0, .3, 1) infinite;
  animation-delay: calc(var(--i) * -.21s), calc(var(--i) * -.53s); }
@keyframes aibShimmer { from { background-position: 120% 0, 0 0; } to { background-position: -120% 0, 0 0; } }
@keyframes aibShuffle {
  0%, 18% { transform: translate(0, 0); }
  25%, 43% { transform: translate(calc(100% + 10px), 0); }
  50%, 68% { transform: translate(calc(100% + 10px), calc(100% + 10px)); }
  75%, 93% { transform: translate(0, calc(100% + 10px)); }
  100% { transform: translate(0, 0); } }
.aib-ghosts i:nth-child(3n) { animation-direction: normal, reverse; }

.aib-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.aib-steps span { position: relative; padding: 4px 10px 4px 22px; border-radius: 999px; font-size: 11.5px; color: var(--muted);
  border: 1px solid var(--line-soft, var(--line)); transition: all .3s; }
.aib-steps span::before { content: ''; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--line); transition: background .3s; }
.aib-steps span.on { color: var(--text); border-color: color-mix(in srgb, #c026d3 55%, var(--line));
  background: color-mix(in srgb, #c026d3 12%, transparent); }
.aib-steps span.on::before { background: #d946ef; box-shadow: 0 0 0 0 rgba(217, 70, 239, .7); animation: aibDot 1.2s infinite; }
.aib-steps span.done { color: var(--text-2); }
.aib-steps span.done::before { background: var(--up); }
@keyframes aibDot { 70% { box-shadow: 0 0 0 7px rgba(217, 70, 239, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 70, 239, 0); } }
.aib-bar { position: relative; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--line) 70%, transparent); overflow: visible; }
.aib-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #c026d3, #f43f5e, #f59e0b); background-size: 200% 100%;
  transition: width .6s cubic-bezier(.3, .8, .3, 1); box-shadow: 0 0 12px rgba(192, 38, 211, .6); }
.aib-bar em { position: absolute; right: 0; top: -19px; font: 600 11px var(--mono); font-style: normal; color: var(--muted); }
.ai-build.fix .aib-orb::after { border-top-color: #f43f5e; }
.ai-build.ok { border-color: color-mix(in srgb, var(--up) 55%, var(--line)); }
.ai-build.ok .aib-orb { background: var(--up); animation: none; }
.ai-build.ok .aib-orb::after { display: none; }
.ai-build.ok .aib-b { animation: aibDone .5s ease both; }
@keyframes aibDone { 50% { transform: scale(1.06); box-shadow: 0 0 0 2px color-mix(in srgb, var(--up) 60%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  .aib-ghosts i, .aib-b, .aib-orb svg, .aib-orb::after { animation: none !important; }
}
@media (max-width: 720px) { .ai-cta span { display: none; } .aib-board { grid-template-columns: 1fr; height: auto; max-height: 220px; } }
/* тикер значения в шапке блока в слоте */
.cn-sym { flex: 0 0 auto; max-width: 74px; height: 20px; padding: 0 16px 0 5px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23889' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 4px center / 8px;
  color: var(--muted); font: 600 10px/18px var(--mono); cursor: pointer; appearance: none; -webkit-appearance: none; }
.cn-sym.on { color: #e879f9; border-color: color-mix(in srgb, #c026d3 55%, var(--line)); background-color: color-mix(in srgb, #c026d3 12%, var(--panel)); }
.cn-sym:hover { border-color: var(--accent); }
.ai-msg.ai-check { align-self: stretch; max-width: none; flex-direction: column; align-items: stretch; gap: 3px; }
.ai-check > b { font-weight: 600; margin-bottom: 4px; }
.ai-check .aic { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.45; }
.ai-check .aic i { font-style: normal; width: 14px; flex: none; text-align: center; color: var(--muted); }
.ai-check .aic.ok i { color: var(--up); }
.ai-check .aic.fixed i { color: var(--accent); }
.ai-check .aic.approx i { color: var(--warn, #d9a441); }
.ai-check .aic.miss i { color: var(--down); }
.ai-check .aic span { flex: none; }
.ai-check .aic code { font-family: var(--mono); font-size: 12px; color: var(--text-2); white-space: pre-wrap; word-break: break-word; min-width: 0; }
.ai-check > em { margin-top: 6px; font-style: normal; font-size: 12px; color: var(--muted); }
.ai-msg.warn { align-self: stretch; max-width: none; white-space: pre-line; color: var(--text);
  background: color-mix(in srgb, var(--warn, #d0a341) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn, #d0a341) 35%, var(--line)); }

/* ── Explore во весь экран ── */
.xp { position: absolute; inset: 0; z-index: 30; background: var(--bg); display: flex; flex-direction: column; overflow: hidden;
  clip-path: inset(0 0 0 0 round 0px); transition: clip-path .46s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; will-change: clip-path; }
.xp[hidden] { display: none !important; }
.xp:not(.on) { pointer-events: none; }
.xp .xi { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.xp-in { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(8px) scale(.995);
  transition: opacity .3s ease .12s, transform .42s cubic-bezier(.2, .8, .2, 1) .08s; }
.xp.on .xp-in { opacity: 1; transform: none; }
[data-motion="off"] .xp, [data-motion="off"] .xp-in { transition: none !important; }

.xp-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, var(--panel)), var(--panel) 40%); }
.xp-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.xp-logo { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--accent);
  background: radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.xp-logo .xi { width: 18px; height: 18px; animation: xpSpin 14s linear infinite; }
@keyframes xpSpin { to { transform: rotate(360deg); } }
.xp-brand b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.xp-brand i { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }
.xp-search { display: flex; align-items: center; gap: 8px; width: min(440px, 36vw); height: 38px; padding: 0 10px 0 12px; border-radius: 11px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); transition: border-color .15s, box-shadow .15s, width .25s; }
.xp-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-sf); color: var(--accent); width: min(520px, 42vw); }
.xp-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; color: var(--text); font-size: 13px; }
.xp kbd { font: 600 10.5px var(--mono); color: var(--muted); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; background: var(--panel); }
.xp-close { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line);
  background: transparent; color: var(--text-2); cursor: pointer; font-size: 12.5px; font-weight: 600; transition: background .15s, color .15s, border-color .15s; }
.xp-close:hover { background: var(--panel-2); color: var(--text); border-color: var(--text-2); }

.xp-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); position: relative; }
.xp-nav { border-right: 1px solid var(--line); background: var(--panel); padding: 14px 10px 16px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.xp-ng { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 6px; }
.xp-ng:first-child { padding-top: 2px; }
.xp-ni { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer; text-align: left; position: relative; transition: background .12s, color .12s; }
.xp-ni:hover { background: var(--panel-2); color: var(--text); }
.xp-ni span { flex: 1 1 auto; }
.xp-ni em { font-style: normal; font: 600 10.5px var(--mono); color: var(--muted); }
.xp-ni.on { background: var(--accent-sf); color: var(--text); font-weight: 600; }
.xp-ni.on::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.xp-ni.on .xi { color: var(--accent); }
.xp-nact { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; padding: 12px 4px 0; border-top: 1px dashed var(--line); }
.xp-nb { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text-2); font-size: 12px; cursor: pointer; text-align: left; transition: border-color .15s, color .15s; }
.xp-nb:hover { border-color: var(--accent); color: var(--text); }
.xp-nb:first-child { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-sf); }
.xp-nfoot { margin-top: auto; padding: 16px 8px 0; font-size: 10.5px; line-height: 1.6; color: var(--muted); }

.xp-main { overflow: auto; min-width: 0; padding: 22px 28px 48px; }
.xp-main.ed { padding: 16px 22px 30px; }
.xp-page { max-width: 1520px; }
.xp-page > * { animation: xpIn .5s cubic-bezier(.2, .7, .2, 1) both; }
.xp-page > *:nth-child(2) { animation-delay: .05s; } .xp-page > *:nth-child(3) { animation-delay: .1s; }
.xp-page > *:nth-child(4) { animation-delay: .15s; } .xp-page > *:nth-child(n+5) { animation-delay: .2s; }
@keyframes xpIn { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

/* обложка */
.xp-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; gap: 28px; justify-content: space-between; align-items: stretch;
  padding: 30px 32px 28px; border-radius: 22px; border: 1px solid var(--line); margin-bottom: 26px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 90%, #3987e5 10%), var(--panel) 60%); }
.xp-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.xp-glow i { position: absolute; border-radius: 50%; filter: blur(80px); }
.xp-glow i:nth-child(1) { width: 520px; height: 520px; background: #3987e5; opacity: .22; top: -320px; left: -140px; animation: sxfloat 18s ease-in-out infinite alternate; }
.xp-glow i:nth-child(2) { width: 460px; height: 460px; background: var(--accent); opacity: .16; bottom: -340px; right: -60px; animation: sxfloat 22s ease-in-out infinite alternate-reverse; }
.xp-glow i:nth-child(3) { width: 300px; height: 300px; background: #a78bfa; opacity: .14; top: -120px; right: 28%; animation: sxfloat 26s ease-in-out infinite alternate; }
.xp-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 14%, transparent) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: linear-gradient(90deg, transparent, #000 60%, transparent); }
.xp-hl { min-width: 0; display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.xp-eye { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.xp-hero h1, .xp-ph h1 { margin: 0; font-size: 34px; line-height: 1.08; font-weight: 740; letter-spacing: -.03em;
  background: linear-gradient(90deg, var(--text), color-mix(in srgb, var(--text) 62%, #3987e5)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xp-hero p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-2); max-width: 720px; }
.xp-stats { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.xp-st { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 136px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: color-mix(in srgb, var(--panel-2) 70%, transparent); backdrop-filter: blur(6px);
  text-align: left; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.xp-st:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 16%, transparent); }
.xp-st b { font: 700 28px/1.05 var(--mono); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.xp-st i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.xp-hr { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; flex: 0 0 auto; }
.xp-cta { display: flex; align-items: center; gap: 12px; border: 0; cursor: pointer; text-align: left; padding: 14px 18px; border-radius: 14px; color: var(--on-accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 45%, var(--accent-d));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .18s ease, box-shadow .18s ease; }
.xp-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
.xp-cta .xi { width: 22px; height: 22px; padding: 7px; box-sizing: content-box; border-radius: 10px; background: rgba(255,255,255,.2); }
.xp-cta span { display: flex; flex-direction: column; gap: 1px; }
.xp-cta b { font-size: 14px; font-weight: 700; } .xp-cta i { font-style: normal; font-size: 11px; opacity: .8; }
.xp-cta.sm { padding: 8px 14px 8px 8px; } .xp-cta.sm .xi { width: 16px; height: 16px; padding: 6px; } .xp-cta.sm b { font-size: 13px; }
.xp-cta2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 80%, transparent); color: var(--text); font-size: 12.5px; font-weight: 600;
  transition: border-color .15s, background .15s; }
.xp-cta2:hover { border-color: var(--accent); background: var(--accent-sf); }

/* ряды обзора */
.xp-row { margin-bottom: 28px; }
.xp-row > header, .xp-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.xp-row h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.xp-row header p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.xp-more { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 6px 8px; border-radius: 8px; white-space: nowrap; }
.xp-more:hover { background: var(--accent-sf); }
.xp-more .xi { transition: transform .18s; } .xp-more:hover .xi { transform: translateX(3px); }
.xp-ph { align-items: flex-end; padding: 6px 0 4px; margin-bottom: 18px; }
.xp-ph > div:first-child { display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.xp-ph h1 { font-size: 30px; }
.xp-ph p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.xp-ph-a { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.xp-bad { color: var(--down) !important; }

.xp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.xp-cat { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  text-align: left; border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 12%, var(--panel)), var(--panel) 70%);
  animation: xpIn .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d) * 40ms);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.xp-cat:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 60%, var(--line)); box-shadow: 0 14px 30px color-mix(in srgb, var(--c) 20%, transparent); }
.xp-cat-pv { display: block; width: 100%; height: 46px; margin-bottom: 8px; }
.xp-cat b { font-size: 13.5px; font-weight: 650; color: var(--text); }
.xp-cat i { font-style: normal; font-size: 11px; color: var(--muted); }

.xp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; position: sticky; top: -22px; z-index: 3; padding: 10px 0;
  background: linear-gradient(var(--bg) 70%, transparent); }
.xp-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--line); background: var(--panel);
  color: var(--text-2); font-size: 12px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.xp-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.xp-chip em { font-style: normal; font: 600 10.5px var(--mono); color: var(--muted); }
.xp-chip:hover { border-color: var(--c, var(--accent)); color: var(--text); }
.xp-chip.on { background: color-mix(in srgb, var(--c, var(--accent)) 16%, var(--panel)); border-color: color-mix(in srgb, var(--c, var(--accent)) 55%, transparent); color: var(--text); font-weight: 600; }
.xp-gh { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
.xp-gh b { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.xp-gh em { font-style: normal; font: 600 10.5px var(--mono); color: var(--muted); padding: 2px 7px; border-radius: 8px; background: var(--panel-2); }
.xp-gh span { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, transparent), transparent); }
.xp-sub { font-size: 11.5px; color: var(--muted); margin: 14px 0 8px; font-weight: 600; }

/* карточки */
.xp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.xc { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border-radius: 16px;
  border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 5%, var(--panel)), var(--panel) 55%); cursor: pointer;
  animation: xpIn .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d) * 28ms);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s ease, box-shadow .2s ease; outline: none; }
.xc::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--c), transparent 70%); opacity: .7; }
.xc-shine { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .25s ease; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); }
.xc:hover, .xc:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 55%, var(--line));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--c) 16%, transparent), 0 2px 8px rgba(0,0,0,.2); }
.xc:hover .xc-shine { opacity: 1; }
.xc.sel { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.xc.gone { opacity: .6; }
.xc-h, .xp-det header { display: flex; align-items: flex-start; gap: 10px; }
.xc-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--c); flex: 0 0 auto;
  background: radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--c) 32%, transparent), color-mix(in srgb, var(--c) 9%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent); }
.xc-ic .xi { width: 19px; height: 19px; }
.xc-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xc-t i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xc-t b { font-size: 14.5px; font-weight: 680; letter-spacing: -.01em; line-height: 1.25; color: var(--text); }
.xc-fav { width: 30px; height: 30px; border-radius: 9px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center;
  flex: 0 0 auto; transition: color .15s, background .15s, transform .15s; }
.xc-fav:hover { background: var(--panel-2); color: var(--accent); }
.xc-fav.on { color: var(--accent); } .xc-fav.on .xi { fill: currentColor; }
.xc-fav:active { transform: scale(.85); }
.xc-d { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.xc-pv { height: 64px; border-radius: 10px; background: color-mix(in srgb, var(--panel-2) 70%, transparent); border: 1px solid var(--line-soft); overflow: hidden; position: relative; }
.xc-pv::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 6%, transparent), transparent);
  transform: translateX(-100%); animation: xpShim 1.4s ease-in-out infinite; }
.xc-pv.in::after, .xp-cat-pv.in::after { display: none; }
@keyframes xpShim { to { transform: translateX(100%); } }
.xc-pv .pv, .xp-cat-pv .pv { width: 100%; height: 100%; display: block; animation: xpFade .5s ease both; }
@keyframes xpFade { from { opacity: 0; } to { opacity: 1; } }
.xc-pvn { display: grid; place-items: center; height: 100%; padding: 0 12px; text-align: center; font-size: 11px; color: var(--muted); }
.pv-p { fill: none; stroke: color-mix(in srgb, var(--text) 30%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.pv-o { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pv-l { stroke: color-mix(in srgb, var(--muted) 60%, transparent); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.pv-z { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.xc-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.xc-flow span { font-size: 11px; padding: 4px 8px; border-radius: 7px; background: color-mix(in srgb, var(--c) 10%, var(--panel-2)); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.xc-flow i { width: 12px; height: 1px; background: color-mix(in srgb, var(--c) 60%, transparent); position: relative; }
.xc-flow i::after { content: ''; position: absolute; right: -1px; top: -2px; border: 2.5px solid transparent; border-left-color: color-mix(in srgb, var(--c) 70%, transparent); }
.xc-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 2px; }
.xc-f > span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xc-go { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line));
  background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .12s; }
.xc-go .xi { width: 14px; height: 14px; color: var(--c); }
.xc-go:hover { background: color-mix(in srgb, var(--c) 22%, transparent); border-color: var(--c); }
.xc-go:active { transform: scale(.96); }

.xp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 60px 20px; max-width: 520px; margin: 0 auto; }
.xp-empty-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: var(--accent); background: var(--accent-sf); }
.xp-empty-ic .xi { width: 26px; height: 26px; }
.xp-empty h3 { margin: 6px 0 0; font-size: 18px; }
.xp-empty p { margin: 0 0 6px; color: var(--text-2); line-height: 1.6; font-size: 13px; }

/* карточка справа */
.xp-det { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); z-index: 5; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: -24px 0 60px rgba(0,0,0,.35);
  transform: translateX(104%); transition: transform .38s cubic-bezier(.2, .8, .2, 1); --c: var(--accent); }
.xp-det.on { transform: none; }
.xd-glow { position: absolute; top: -160px; right: -120px; width: 380px; height: 380px; border-radius: 50%; background: var(--c); opacity: .14; filter: blur(70px); z-index: -1; pointer-events: none; }
.xp-det header { padding: 18px 18px 14px; border-bottom: 1px solid var(--line-soft); align-items: center; }
.xp-det header .xc-ic { width: 44px; height: 44px; border-radius: 13px; } .xp-det header .xc-ic .xi { width: 22px; height: 22px; }
.xp-det header .xc-t b { font-size: 17px; }
.xd-x { width: 32px; height: 32px; border-radius: 9px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.xd-x:hover { background: var(--panel-2); color: var(--text); }
.xd-body { flex: 1 1 auto; overflow: auto; padding: 16px 18px 20px; }
.xp-det.on .xd-body > * { animation: xpIn .45s cubic-bezier(.2, .7, .2, 1) both; }
.xp-det.on .xd-body > *:nth-child(2) { animation-delay: .06s; } .xp-det.on .xd-body > *:nth-child(3) { animation-delay: .1s; }
.xp-det.on .xd-body > *:nth-child(n+4) { animation-delay: .14s; }
.xd-desc { margin: 0 0 14px; font-size: 13.5px; line-height: 1.65; color: var(--text-2); }
.xd-pv { border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); padding: 10px 10px 8px; margin-bottom: 6px; }
.xd-pv .pv { width: 100%; height: 150px; display: block; }
.xd-pv > span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 6px; }
.xd-pv .xc-pvn { height: 150px; }
.xd-s { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.xd-outs { display: flex; flex-direction: column; gap: 6px; }
.xd-outs > div { display: grid; grid-template-columns: 10px auto 1fr; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); }
.xd-outs i { width: 10px; height: 10px; border-radius: 3px; }
.xd-outs b { font-size: 12.5px; }
.xd-outs code { font: 11px var(--mono); color: var(--text-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xd-tbl { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; }
.xd-tbl > div { display: grid; grid-template-columns: 1fr auto 90px; gap: 10px; padding: 8px 12px; font-size: 12.5px; border-bottom: 1px solid var(--line-soft); }
.xd-tbl > div:last-child { border-bottom: 0; }
.xd-tbl span { color: var(--text-2); } .xd-tbl b { font: 600 12px var(--mono); } .xd-tbl em { font-style: normal; font: 11px var(--mono); color: var(--muted); text-align: right; }
.xd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.xd-chips span { font-size: 11.5px; padding: 4px 9px; border-radius: 8px; background: color-mix(in srgb, var(--c) 12%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); }
.xd-flist { display: flex; flex-direction: column; gap: 6px; }
.xd-flist > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; background: var(--panel-2); }
.xd-flist b { font-size: 12.5px; } .xd-flist span { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.xd-kp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.xd-kp > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 10px; background: var(--panel-2); }
.xd-kp i { font-style: normal; font-size: 10.5px; color: var(--muted); } .xd-kp b { font: 650 14px var(--mono); }
.xd-rules { display: flex; flex-direction: column; gap: 5px; }
.xd-rules > div { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); font-size: 12.5px; }
.xd-rules em { font-style: normal; font: 600 10.5px var(--mono); color: var(--c); }
.xd-note { margin-top: 16px; padding: 10px 12px; border-radius: 10px; font-size: 12px; color: var(--text-2); border: 1px dashed var(--line); }
.xp-det footer { padding: 14px 18px 18px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.xd-main { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 12px; border: 0; cursor: pointer; font-size: 14px; font-weight: 700;
  color: var(--on-accent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 50%, var(--accent-d));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 28%, transparent); transition: transform .15s, box-shadow .15s; }
.xd-main:hover { transform: translateY(-1px); box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 38%, transparent); }
.xd-main .xi { width: 17px; height: 17px; }
.xd-ex { display: flex; gap: 6px; flex-wrap: wrap; }
.xd-b { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line);
  background: transparent; color: var(--text-2); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s; }
.xd-b:hover { border-color: var(--text-2); color: var(--text); }
.xd-b.bad:hover { border-color: var(--down); color: var(--down); }

/* кнопка на полке Explore в конструкторе */
.gs-full { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), color-mix(in srgb, #3987e5 10%, var(--panel)));
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; position: relative; overflow: hidden; }
.gs-full::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
  transform: translateX(-100%); animation: gsShine 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes gsShine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.gs-full:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 20%, transparent); }
.gs-full svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }
.gs-full span { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.gs-full b { font-size: 12.5px; font-weight: 700; } .gs-full i { font-style: normal; font-size: 10.5px; color: var(--muted); }
@media (max-width: 1100px) { .xp-body { grid-template-columns: 1fr; } .xp-nav { display: none; } .xp-hero { flex-direction: column; } .xp-brand i { display: none; } }
/* ── /Explore ── */

/* ── Trade Journal ── */
.jn { flex: 1 1 auto; min-height: 0; min-width: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 100%; position: relative; }
.jn .ji, .jn-ov .ji, .jn-dr .ji { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.jn .up, .jn-ov .up { color: var(--up); } .jn .dn, .jn-ov .dn { color: var(--down); }
.jn-nav { border-right: 1px solid var(--line); background: var(--panel); padding: 14px 10px 16px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.jn-ng { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 6px; }
.jn-ng:first-child { padding-top: 2px; }
.jn-ni { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer; text-align: left; position: relative; transition: background .12s, color .12s; }
.jn-ni:hover { background: var(--panel-2); color: var(--text); }
.jn-ni span { flex: 1 1 auto; }
.jn-ni em { font-style: normal; font: 600 10.5px var(--mono); color: var(--muted); }
.jn-ni.on { background: var(--accent-sf); color: var(--text); font-weight: 600; }
.jn-ni.on::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.jn-ni.on .ji { color: var(--accent); }
.jn-nact { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; padding: 12px 4px 0; border-top: 1px dashed var(--line); }
.jn-nb { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text-2); font-size: 12.5px; cursor: pointer; text-align: left; transition: border-color .15s, color .15s, transform .15s; }
.jn-nb:hover { border-color: var(--accent); color: var(--text); }
.jn-nb.pri { color: var(--on-accent); border: 0; font-weight: 650; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent) 55%, var(--accent-d));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 25%, transparent); }
.jn-nb.pri:hover { transform: translateY(-1px); color: var(--on-accent); }
.jn-nfoot { margin-top: auto; padding: 16px 8px 0; font-size: 10.5px; line-height: 1.6; color: var(--muted); }
.jn.jn3 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.jn-top { display: flex; align-items: center; gap: 12px; padding: 10px 28px; border-bottom: 1px solid var(--line); background: var(--panel); min-width: 0; }
.jn-tabs3 { display: flex; gap: 4px; min-width: 0; }
.jn-t3 { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.jn-t3:hover { background: var(--panel-2); color: var(--text); }
.jn-t3.on { background: var(--accent-sf); color: var(--text); font-weight: 650; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.jn-t3.on .ji { color: var(--accent); }
.jn-t3 em { font-style: normal; font: 600 10.5px var(--mono); color: var(--muted); }
.jn-tact { display: flex; align-items: center; gap: 8px; }
.jn-tact .btn svg { width: 15px; height: 15px; }
.jn-tact .btn .ji { stroke: currentColor; fill: none; }
.jn-tact .btn.on { box-shadow: inset 0 0 0 1px var(--accent); color: var(--text); }
.jn-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 2px 6px 2px 0; }
.jn-back .ji { width: 14px; height: 14px; }
.jn-dr .jn-drb > .jn-dsum { margin: 0; padding: 14px 18px 4px; font-size: 13.5px; color: var(--text-2); }
.jn-dr .jn-drb > .jn-dtr, .jn-dr .jn-drb > .jn-dform { padding: 10px 18px; }
.jn-open { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.jn-open > b { font-size: 13px; }
.jn-open > div { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.jn-open > div > span:not(.tj-side) { font-family: var(--mono); }
.jn-open > div > i { color: var(--muted); font-style: normal; font-size: 12px; }
.jn-open > div > .jn-more { margin-left: auto; }
.jn-open > p { margin: 0; font-size: 12px; color: var(--text-2); }
.jn-bookb { display: flex; align-items: center; gap: 8px; height: 36px; max-width: 260px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.jn-bookb:hover { border-color: var(--accent); }
.jn-bookb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jn-bookb .ji { color: var(--accent); }
.jn .ji.sm { width: 13px; height: 13px; color: var(--muted); }
.jn-books .jn-drb { padding: 6px 18px 24px; gap: 18px; }
.jn-books section { display: flex; flex-direction: column; gap: 10px; }
.jn-books h4 { margin: 10px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.jn-books p { margin: 0; font-size: 12.5px; color: var(--text-2); }
.jn-books p.m { color: var(--muted); font-size: 12px; line-height: 1.5; }
.jn-books label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-2); }
.jn-books .btn.primary { align-self: flex-start; }
.jn-books .btn .ji { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.jn-bk { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.jn-bk.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.jn-bk > .input { font-weight: 650; width: 100%; box-sizing: border-box; }
.jn-bka { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.jn-px i { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.jn-fsum { padding: 12px 16px 4px; font-size: 12.5px; color: var(--text-2); }
.jn-opn { color: var(--accent); }
.jn .btn .ji, .jn-ov .btn .ji { stroke: currentColor; fill: none; }
.jn-o { background: color-mix(in srgb, var(--accent) 16%, transparent) !important; color: var(--text) !important; }
.jn-tg { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.jn-open > div[data-oid] { cursor: pointer; border-radius: 8px; padding: 4px 6px; margin: 0 -6px; }
.jn-open > div[data-oid]:hover { background: var(--panel-2); }
.jn-opc .jn-open { border: 0; background: transparent; padding: 4px 18px 16px; }
/* карточка сделки: режимы записи */
.jn-mode { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 4px; }
.jn-mode > span, .jn-closeb > b, .jn-cms > span, .jn-nts > span, .jn-nts2 > span { font-size: 11.5px; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 6px; }
.jn-drb:not(.jn-m-close) .jn-onlyc { display: none !important; }
.jn-m-close .jn-main, .jn-m-close #jnDc { display: none !important; }
.jn-m-open .jn-xo { display: none !important; }
.jn-op { display: none; }
.jn-m-open .jn-op { display: inline; } .jn-m-open .jn-full { display: none; }
.jn-closeb { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.jn-closeb .btn.primary { align-self: flex-start; }
.jn-closeb .ji { width: 14px; height: 14px; color: var(--accent); }
.jn-cms, .jn-nts { display: flex; flex-direction: column; gap: 8px; }
.jn-cm { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); }
.jn-cm i { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.jn-cm p { margin: 0; font-size: 13px; white-space: pre-wrap; }
.jn-cm button { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.jn-cmin { display: flex; gap: 8px; align-items: flex-end; }
.jn-cmin textarea { flex: 1; height: auto; padding: 8px 10px; font: inherit; font-size: 13px; resize: vertical; }
.jn-cms p.m, .jn-nts p.m, .jn-nts2 p.m { margin: 0; font-size: 12px; color: var(--muted); }
.tj-tgs em, .tj-form label span em { font-style: normal; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
/* заметки */
.jn-notes { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; align-items: start; }
.jn-nlist { display: flex; flex-direction: column; position: sticky; top: 0; max-height: calc(100vh - 150px); }
.jn-nlist > header { display: flex; gap: 8px; padding: 12px; }
.jn-nlist > header .jn-q { flex: 1; min-width: 0; }
.jn-nlist > footer { padding: 10px 12px; border-top: 1px solid var(--line); }
.jn-ntags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.jn-ntags i { font-style: normal; color: var(--muted); font-size: 10.5px; }
.jn-ntt { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 8px; font-size: 12.5px; color: var(--text-2); }
.jn-nl { overflow: auto; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.jn-nl > button { display: flex; flex-direction: column; gap: 3px; text-align: left; border: 0; border-bottom: 1px solid var(--line-soft, var(--line)); background: transparent; padding: 10px 14px; cursor: pointer; color: var(--text); font: inherit; }
.jn-nl > button:hover { background: var(--panel-2); }
.jn-nl > button.on { background: var(--accent-sf); }
.jn-nl b { font-size: 13px; } .jn-nl span { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jn-nl i { font-style: normal; font-size: 11px; color: var(--muted); }
.jn-ned { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.jn-ned > header { display: flex; align-items: center; gap: 10px; padding: 0; }
.jn-ntitle { flex: 1; font-size: 18px; font-weight: 700; height: 42px; }
.jn-ntext { height: auto; min-height: 220px; padding: 12px; font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; }
.jn-ned > footer { display: flex; align-items: center; gap: 10px; }
.jn-ned .m { font-size: 12px; color: var(--muted); }
.jn-nts2 { display: flex; flex-direction: column; gap: 6px; }
.jn-ntr { display: grid; grid-template-columns: 110px 70px auto 1fr 24px; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--panel-2); cursor: pointer; font-size: 13px; }
.jn-ntr:hover { outline: 1px solid var(--accent); }
.jn-ntr em { font-style: normal; text-align: right; font-family: var(--mono); }
.jn-ntr button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.jn-ntr .ji, .jn-cm .ji { width: 14px; height: 14px; }
@media (max-width: 1000px) { .jn-notes { grid-template-columns: 1fr; } .jn-nlist { position: static; max-height: none; } }
@media (max-width: 900px) { .jn-top { flex-wrap: wrap; padding: 8px 14px; } .jn-tact .btn:not(.icon):not(.primary) { display: none; } }
.jn-main { overflow: auto; min-width: 0; padding: 22px 28px 48px; }
.jn-page { max-width: 1520px; display: flex; flex-direction: column; gap: 14px; }
.jn-page > * { animation: xpIn .5s cubic-bezier(.2, .7, .2, 1) both; }
.jn-page > *:nth-child(2) { animation-delay: .04s; } .jn-page > *:nth-child(3) { animation-delay: .08s; } .jn-page > *:nth-child(4) { animation-delay: .12s; } .jn-page > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes xpIn { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.jn-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 4px 0 2px; }
.jn-ph > div:first-child { display: flex; flex-direction: column; gap: 6px; }
.jn-eye { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.jn-ph h1, .jn-empty h1 { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 740; letter-spacing: -.03em;
  background: linear-gradient(90deg, var(--text), color-mix(in srgb, var(--text) 62%, #3987e5)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jn-ph p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.jn-ph-a { display: flex; gap: 8px; }
.jn-ph-a .btn svg { width: 15px; height: 15px; }

/* фильтры */
.jn-fb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: sticky; top: -22px; z-index: 6; padding: 10px 0; margin: -4px 0 -2px;
  background: linear-gradient(var(--bg) 78%, transparent); }
.jn-fb .select.tiny { max-width: 160px; }
.input.tiny { height: 28px; font-size: 12px; padding: 0 8px; }
.jn-dash { color: var(--muted); }
.jn-q { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); }
.jn-q:focus-within { border-color: var(--accent); color: var(--accent); }
.jn-q input { border: 0; background: transparent; outline: none; color: var(--text); font-size: 12px; width: 190px; }
.jn-reset { border: 0; background: transparent; color: var(--accent); font-size: 12px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.jn-reset:hover { background: var(--accent-sf); }

/* перетаскивание файла */
.jn-drop { position: absolute; inset: 10px; z-index: 40; border-radius: 22px; border: 2px dashed var(--accent); display: grid; place-items: center; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 82%, var(--accent) 8%); backdrop-filter: blur(4px); opacity: 0; transform: scale(.985); transition: opacity .18s, transform .18s; }
.jn-drop.on { opacity: 1; transform: none; }
.jn-drop > div { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.jn-drop .ji { width: 44px; height: 44px; color: var(--accent); animation: jnBob 1.2s ease-in-out infinite; }
.jn-drop b { font-size: 20px; } .jn-drop span { color: var(--text-2); }
@keyframes jnBob { 50% { transform: translateY(-6px); } }

/* обложка */
.jn-hero, .jn-dz, .jn-cmph { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; border: 1px solid var(--line);
  background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 90%, #3987e5 10%), var(--panel) 60%); }
.jn-hero { display: flex; gap: 28px; justify-content: space-between; align-items: stretch; padding: 26px 30px 24px; }
.jn-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.jn-glow i { position: absolute; border-radius: 50%; filter: blur(80px); }
.jn-glow i:nth-child(1) { width: 520px; height: 520px; background: #3987e5; opacity: .2; top: -330px; left: -140px; animation: sxfloat 18s ease-in-out infinite alternate; }
.jn-glow i:nth-child(2) { width: 460px; height: 460px; background: var(--accent); opacity: .15; bottom: -340px; right: -60px; animation: sxfloat 22s ease-in-out infinite alternate-reverse; }
.jn-glow i:nth-child(3) { width: 300px; height: 300px; background: #a78bfa; opacity: .13; top: -140px; right: 30%; animation: sxfloat 26s ease-in-out infinite alternate; }
.jn-hero::after, .jn-dz::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .45;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 14%, transparent) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: linear-gradient(90deg, transparent, #000 60%, transparent); }
.jn-hl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.jn-big { font: 760 50px/1 var(--mono); letter-spacing: -.045em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.jn-big.up { color: var(--up); text-shadow: 0 0 40px color-mix(in srgb, var(--up) 30%, transparent); }
.jn-big.dn { color: var(--down); text-shadow: 0 0 40px color-mix(in srgb, var(--down) 30%, transparent); }
.jn-hsub { font-size: 13px; color: var(--text-2); }
.jn-hsub b { font-family: var(--mono); }
.jn-hk { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.jn-hk > div { display: flex; flex-direction: column; gap: 2px; min-width: 128px; padding: 10px 13px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--panel-2) 70%, transparent); backdrop-filter: blur(6px); }
.jn-hk i { font-style: normal; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.jn-hk b { font: 680 19px/1.1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.jn-hr { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 14px; flex: 0 0 auto; }
.jn-hspark { width: 300px; height: 90px; }
.jn-spark { width: 100%; height: 100%; display: block; overflow: visible; }
.jn-spark.up { color: var(--up); } .jn-spark.dn { color: var(--down); }
.jn-spl { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.jn-sp0 { stroke: var(--line); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.jn-ha { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.jn-cta { display: flex; align-items: center; gap: 12px; border: 0; cursor: pointer; text-align: left; padding: 12px 18px 12px 12px; border-radius: 14px; color: var(--on-accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 45%, var(--accent-d));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .18s ease, box-shadow .18s ease; }
.jn-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
.jn-cta[disabled] { opacity: .5; pointer-events: none; }
.jn-cta .ji { width: 20px; height: 20px; padding: 7px; box-sizing: content-box; border-radius: 10px; background: rgba(255,255,255,.2); }
.jn-cta span { display: flex; flex-direction: column; gap: 1px; }
.jn-cta b { font-size: 14px; font-weight: 700; } .jn-cta i { font-style: normal; font-size: 11px; opacity: .8; }
.jn-cta2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 80%, transparent); color: var(--text); font-size: 12.5px; font-weight: 600;
  transition: border-color .15s, background .15s; }
.jn-cta2:hover { border-color: var(--accent); background: var(--accent-sf); }
.jn-danger:hover { color: var(--down) !important; border-color: var(--down) !important; }
.jn-danger.sure, .jn-cta2.jn-danger.sure { color: var(--down); border-color: var(--down); }

.jn-empty { flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 50px 30px 34px; }
.jn-empty-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: var(--accent); background: var(--accent-sf); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.jn-empty-ic .ji { width: 30px; height: 30px; }
.jn-empty p { margin: 0; max-width: 700px; color: var(--text-2); line-height: 1.65; font-size: 14px; }
.jn-empty-a { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.jn-brk { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; max-width: 760px; }
.jn-brk span { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 70%, transparent); color: var(--text-2); }

/* показатели */
.jn-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.jn-kpis.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jn-k { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; min-width: 0;
  transition: transform .18s ease, border-color .18s ease; }
.jn-k:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.jn-k > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jn-k span { font-size: 11.5px; color: var(--muted); }
.jn-k b { font: 680 20px/1.15 var(--mono); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn-k b em { font-style: normal; font-size: 16px; } .jn-k b small { color: var(--muted); font-size: 14px; }
.jn-k i { font-style: normal; font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn-ring { width: 54px; height: 54px; flex: 0 0 auto; stroke: none; }
.jn-ring .bg { fill: none; stroke: var(--panel-2); stroke-width: 6; }
.jn-ring .fg { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 28px 28px; animation: jnRing 1s cubic-bezier(.2, .8, .2, 1) both; }
.jn-ring text { fill: var(--text); stroke: none; font: 700 11px var(--mono); }
@keyframes jnRing { from { stroke-dasharray: 0 200; } }

/* карточки */
.jn-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; min-width: 0; }
.jn-card > header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.jn-card > header > div:first-child { flex: 1 1 auto; min-width: 0; }
.jn-card h3 { margin: 0; font-size: 14.5px; font-weight: 680; letter-spacing: -.005em; }
.jn-card header p { margin: 3px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.jn-card header .btn.icon { width: 30px; height: 30px; }
.jn-card .tj-tw { margin: 0 -20px; }
.jn-more { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 8px; white-space: nowrap; }
.jn-more:hover { background: var(--accent-sf); }
.jn-g2 { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(330px, 1fr); gap: 14px; }
.jn-g2.r { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.jn-g2.cal { grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); }
.jn-g2.eq { grid-template-columns: 1fr 1fr; }
.jn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.jn-span2 { grid-column: 1 / -1; }
.jn-span2 > .jn-card { height: 100%; }
@media (max-width: 1250px) { .jn-g2, .jn-g2.r, .jn-g2.cal, .jn-g2.eq, .jn-grid { grid-template-columns: 1fr; } .jn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jn-hero { flex-direction: column; } .jn-hr { align-items: stretch; } .jn-hspark { width: 100%; } }
.jn-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: jnDraw 1.2s cubic-bezier(.3, .7, .2, 1) .1s forwards; }
@keyframes jnDraw { to { stroke-dashoffset: 0; } }
[data-motion="off"] .jn-draw { animation: none; stroke-dashoffset: 0; }

.jn-ins { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.jn-ins li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; color: var(--text-2);
  background: var(--panel-2); border: 1px solid transparent; }
.jn-ins li b { color: var(--text); font-weight: 650; }
.jn-ins li .ji { margin-top: 2px; }
.jn-ins li.good { border-color: color-mix(in srgb, var(--up) 25%, transparent); } .jn-ins li.good .ji { color: var(--up); }
.jn-ins li.bad { border-color: color-mix(in srgb, var(--down) 25%, transparent); } .jn-ins li.bad .ji { color: var(--down); }
.jn-ins li.info .ji { color: var(--accent); }
.jn-rules { display: flex; flex-direction: column; gap: 6px; }
.jn-rules > div { display: grid; grid-template-columns: 18px 1fr auto 70px; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; background: var(--panel-2); font-size: 12.5px; }
.jn-rules b { font-size: 12px; font-weight: 600; } .jn-rules em { font-style: normal; font: 600 12px var(--mono); text-align: right; }
.jn-rules .ok .ji { color: var(--up); } .jn-rules .bad .ji { color: var(--down); } .jn-rules .bad b { color: var(--down); } .jn-rules .ok b { color: var(--muted); }
.jn-rempty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 16px 10px; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.jn-rempty > .ji { width: 30px; height: 30px; color: var(--accent); }
.jn-rempty p { margin: 0; max-width: 520px; }

.jn-rows { display: flex; flex-direction: column; gap: 2px; }
.jn-rw { display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(60px, 1fr) 76px; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 12.5px; }
.jn-rw[data-pick] { cursor: pointer; }
.jn-rw:hover { background: var(--panel-2); }
.jn-rn { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn-rc { color: var(--muted); font: 11px var(--mono); white-space: nowrap; }
.jn-rb { position: relative; height: 8px; }
.jn-rb::before { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line); }
.jn-rb i { position: absolute; top: 0; bottom: 0; border-radius: 3px; animation: jnGrow .7s cubic-bezier(.2, .8, .2, 1) both; }
.jn-rb i.up { background: var(--up); transform-origin: left; } .jn-rb i.dn { background: var(--down); transform-origin: right; }
@keyframes jnGrow { from { transform: scaleX(0); } }
.jn-rw > b { font: 650 12px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.jn-cols { display: flex; gap: 6px; }
.jn-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; border-radius: 8px; padding: 2px 0 4px; }
.jn-col:hover { background: var(--panel-2); }
.jn-cbar { position: relative; flex: 1 1 auto; width: 100%; }
.jn-cbar::before { content: ''; position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: var(--line); }
.jn-cbar i { position: absolute; left: 24%; right: 24%; animation: jnGrowY .7s cubic-bezier(.2, .8, .2, 1) both; }
.jn-cbar i.up { background: var(--up); border-radius: 4px 4px 0 0; transform-origin: bottom; } .jn-cbar i.dn { background: var(--down); border-radius: 0 0 4px 4px; transform-origin: top; }
@keyframes jnGrowY { from { transform: scaleY(0); } }
.jn-col b { font: 600 10.5px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-2); }
.jn-col span { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* сделки */
.jn-tbar { display: flex; align-items: center; gap: 10px; }
.jn-tbar .btn svg { width: 14px; height: 14px; }
.jn-tsum { display: flex; align-items: baseline; gap: 12px; font-size: 13px; color: var(--muted); }
.jn-tsum b { font-size: 15px; color: var(--text); } .jn-tsum span:first-of-type { font: 700 15px var(--mono); }
.jn-bulk { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--accent-sf); position: sticky; top: 30px; z-index: 5; animation: xpIn .3s ease both; }
.jn-bulk b { font-size: 13px; margin-right: 6px; }
.jn-tcard { padding-top: 6px; padding-bottom: 8px; }
.jn-tw table { font-size: 12.5px; }
.jn-tw tbody tr[data-id] { cursor: pointer; }
.jn-tw tr.sel td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.jn-tw sup { font-size: 9px; color: var(--accent); margin-left: 3px; }
.jn-ck { width: 34px; } .jn-ck input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.jn-dayh td { background: var(--panel-2) !important; cursor: default; }
.jn-dayh td { display: table-cell; }
.jn-dayh b { font-size: 12.5px; } .jn-dayh i { font-style: normal; color: var(--muted); margin: 0 10px 0 6px; font-size: 11.5px; }
.jn-dayh span { color: var(--text-2); font-size: 11.5px; } .jn-dayh em { font-style: normal; font: 700 12.5px var(--mono); margin-left: 12px; }
.jn-dlink { float: right; display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--muted); font-size: 11.5px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.jn-dlink .ji { width: 13px; height: 13px; } .jn-dlink:hover { color: var(--accent); background: var(--accent-sf); }

/* карточка сделки */
.jn-dr { width: min(620px, 100vw); }
.jn-dr > header .btn.icon { width: 30px; height: 30px; }
.jn-drb { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; }
.jn-drb .tj-form { flex: 0 0 auto; overflow: visible; }
.jn-dchart { margin: 14px 18px 0; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); padding: 10px 10px 6px; }
.jn-dcn { display: flex; align-items: center; gap: 10px; padding: 10px 6px; color: var(--muted); font-size: 12px; }
.jn-dsvg { width: 100%; height: auto; display: block; stroke: none; }
.jn-hold { fill: color-mix(in srgb, var(--accent) 9%, transparent); }
.jn-wick { stroke-width: 1; } .jn-wick.u { stroke: var(--up); } .jn-wick.d { stroke: var(--down); }
.jn-body.u { fill: var(--up); } .jn-body.d { fill: var(--down); }
.jn-lv { stroke-width: 1; stroke-dasharray: 4 3; } .jn-lv.stop { stroke: var(--down); } .jn-lv.tgt { stroke: var(--up); }
.jn-lvt { font: 600 9.5px var(--mono); } .jn-lvt.stop { fill: var(--down); } .jn-lvt.tgt { fill: var(--up); }
.jn-mk.b { fill: var(--up); } .jn-mk.s { fill: var(--down); } .jn-mkd { fill: var(--text); }
.jn-exc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.jn-exc > div { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--panel); }
.jn-exc span { font-size: 10.5px; color: var(--muted); } .jn-exc b { font: 680 15px var(--mono); } .jn-exc i { font-style: normal; font-size: 10.5px; color: var(--text-2); }
details.jn-more { border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; }
details.jn-more summary { cursor: pointer; font-size: 12px; color: var(--text-2); }
.jn-sub { padding: 10px 0 2px !important; }

/* календарь */
.jn-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(64px, .9fr); gap: 5px; }
.jn-cwh { font-size: 10.5px; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .05em; padding-bottom: 2px; }
.jn-cwh:nth-child(8) { text-align: right; }
.jn-c0 { aspect-ratio: 1 / .78; }
.jn-cd { aspect-ratio: 1 / .78; border: 1px solid transparent; border-radius: 10px; background: var(--panel-2); color: var(--muted); padding: 6px 8px; cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-width: 0; font: inherit; text-align: left; transition: border-color .12s, transform .12s; }
.jn-cal.sm .jn-cd { padding: 4px 6px; border-radius: 8px; }
.jn-cd.we:not(.has) { opacity: .45; }
.jn-cd i { font-style: normal; font-size: 11px; display: flex; align-items: center; gap: 4px; }
.jn-cd i u { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.jn-cd b { font: 650 12px var(--mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.jn-cal.sm .jn-cd b { font-size: 10.5px; }
.jn-cd span { font-size: 10px; color: var(--text-2); white-space: nowrap; }
.jn-cd.has i { color: var(--text-2); }
.jn-cd:hover { border-color: var(--text-2); }
.jn-cd.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-sf); }
.jn-cd.viol::after { content: ''; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--down); box-shadow: 0 0 0 2px var(--panel); }
.jn-cwk { display: flex; align-items: center; justify-content: flex-end; font: 600 11.5px var(--mono); color: var(--muted); }
.jn-yr { overflow: hidden; }
.jn-heat { overflow-x: auto; padding-bottom: 4px; }
.jn-hm, .jn-hg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11px, 1fr); gap: 3px; min-width: 700px; }
.jn-hm span { font-size: 10px; color: var(--muted); height: 16px; white-space: nowrap; overflow: visible; }
.jn-hg > div { display: flex; flex-direction: column; gap: 3px; }
.jn-hg i { width: 100%; aspect-ratio: 1; max-height: 22px; border-radius: 4px; background: var(--panel-2); display: block; transition: transform .12s; }
.jn-hg i.h { cursor: pointer; } .jn-hg i.h:hover { transform: scale(1.35); box-shadow: 0 0 0 1px var(--text-2); }
.jn-hg i.e { background: transparent; }
.jn-hleg { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 8px; font-size: 10.5px; color: var(--muted); }
.jn-hleg i { width: 12px; height: 12px; border-radius: 3px; background: var(--panel-2); } .jn-hleg span { margin: 0 4px; }
.jn-dayb { font: 760 22px var(--mono); }
.jn-dayspark { height: 70px; margin: 0 0 10px; }
.jn-dayk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.jn-dayk > div { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); }
.jn-dayk i { font-style: normal; font-size: 10.5px; color: var(--muted); } .jn-dayk b { font: 650 13.5px var(--mono); }
.jn-dayl, .jn-dtr { display: flex; flex-direction: column; gap: 4px; }
.jn-dayl button, .jn-dtr button { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-soft);
  background: transparent; color: var(--text); cursor: pointer; text-align: left; font-size: 12.5px; transition: background .12s, border-color .12s; }
.jn-dayl button:hover, .jn-dtr button:hover { background: var(--panel-2); border-color: var(--line); }
.jn-dayl i, .jn-dtr i { font-style: normal; font: 11px var(--mono); color: var(--muted); } .jn-dayl em, .jn-dtr em { font-style: normal; font-size: 11.5px; color: var(--text-2); }
.jn-dayl strong, .jn-dtr strong { font: 650 12.5px var(--mono); }
.jn-dpeek { margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px dashed var(--line); display: flex; flex-direction: column; gap: 8px; }
.jn-dpeek > div { display: flex; gap: 8px; align-items: baseline; } .jn-dpeek > div span { font-size: 11px; color: var(--muted); }
.jn-dpeek p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.55; } .jn-dpeek p.m { color: var(--muted); }
.jn-dpeek .jn-cta2 { align-self: flex-start; height: 34px; }

/* дневник */
.jn-diary { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 14px; align-items: start; }
.jn-dlist { position: sticky; top: 0; max-height: calc(100vh - 170px); display: flex; flex-direction: column; padding: 14px 10px 10px; }
.jn-dlist > header { padding: 0 8px; align-items: center; }
.jn-dl { overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.jn-dl button { display: grid; grid-template-columns: 1fr auto 70px; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 0; background: transparent; color: var(--text); cursor: pointer; text-align: left; }
.jn-dl button:hover { background: var(--panel-2); } .jn-dl button.on { background: var(--accent-sf); }
.jn-dl button div { display: flex; flex-direction: column; } .jn-dl b { font-size: 12.5px; font-weight: 600; } .jn-dl i { font-style: normal; font-size: 11px; color: var(--muted); }
.jn-dl span { display: flex; align-items: center; gap: 6px; color: var(--accent); } .jn-dl span .ji { width: 13px; height: 13px; }
.jn-dl em { font-style: normal; font: 650 12px var(--mono); text-align: right; }
u.m1, u.m2, u.m3, u.m4, u.m5 { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
u.m1 { background: var(--down); } u.m2 { background: color-mix(in srgb, var(--down) 60%, var(--accent)); } u.m3 { background: var(--accent); } u.m4 { background: color-mix(in srgb, var(--up) 60%, var(--accent)); } u.m5 { background: var(--up); }
.jn-ded { padding: 20px 24px; }
.jn-dh { font-size: 22px !important; margin-top: 2px !important; }
.jn-saved { font-size: 11.5px; color: var(--up); opacity: 0; transition: opacity .2s; } .jn-saved.on { opacity: 1; }
.jn-dform { display: flex; flex-direction: column; gap: 14px; }
.jn-dform label { display: flex; flex-direction: column; gap: 6px; }
.jn-dform label > span, .jn-sc2 span, .jn-drules > span, .jn-dtr > span { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.jn-dform label > span .ji { color: var(--accent); width: 14px; height: 14px; }
.jn-dform textarea.input { height: auto; padding: 10px 12px; resize: vertical; font: inherit; line-height: 1.55; font-size: 13.5px; }
.jn-sc2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.jn-sc2 > div { display: flex; flex-direction: column; gap: 6px; }
.jn-scale { display: flex; gap: 4px; }
.jn-scale button { flex: 1 1 0; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2); font: 650 13px var(--mono); cursor: pointer; transition: all .15s; }
.jn-scale button:hover { border-color: var(--accent); }
.jn-scale button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 30%, transparent); }
.jn-drules { display: flex; flex-direction: column; gap: 5px; }
.jn-drules > div { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--panel-2); font-size: 12.5px; }
.jn-drules > div b { margin-left: auto; font-size: 11.5px; } .jn-drules .ok .ji, .jn-drules .ok b { color: var(--up); } .jn-drules .bad .ji, .jn-drules .bad b { color: var(--down); }
.jn-dstat { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1250px) { .jn-diary, .jn-dstat { grid-template-columns: 1fr; } .jn-dlist { position: static; max-height: 320px; } }

/* аналитика */
.jn-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); align-self: flex-start; }
.jn-tabs button { height: 32px; padding: 0 16px; border-radius: 9px; border: 0; background: transparent; color: var(--text-2); font-size: 12.5px; cursor: pointer; transition: all .15s; }
.jn-tabs button:hover { color: var(--text); }
.jn-tabs button.on { background: var(--accent-sf); color: var(--text); font-weight: 650; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.jn-hist { display: flex; align-items: flex-end; gap: 4px; height: 170px; }
.jn-hist > div { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; min-width: 0; position: relative; }
.jn-hist i { width: 78%; border-radius: 4px 4px 0 0; min-height: 1px; animation: jnGrowY .6s cubic-bezier(.2, .8, .2, 1) both; transform-origin: bottom; }
.jn-hist i.up { background: var(--up); } .jn-hist i.dn { background: var(--down); }
.jn-hist b { font: 600 10px var(--mono); color: var(--text-2); position: absolute; top: 0; }
.jn-hist span { font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; max-width: 100%; }
.jn-strip { display: flex; flex-wrap: wrap; gap: 3px; }
.jn-strip i { width: 9px; height: 22px; border-radius: 3px; background: var(--line); } .jn-strip i.up { background: var(--up); } .jn-strip i.dn { background: var(--down); }
.jn-strip i:hover { transform: scaleY(1.2); }
.jn-exh { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.jn-exh > div:first-child { max-width: 900px; } .jn-exh h3 { margin: 0 0 6px; font-size: 16px; }
.jn-exh p { margin: 0 0 6px; font-size: 13px; color: var(--text-2); line-height: 1.6; } .jn-exh p.m { color: var(--muted); font-size: 12px; }
.jn-prog { width: 100%; height: 30px; border-radius: 10px; background: var(--panel-2); position: relative; overflow: hidden; }
.jn-prog i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), var(--accent)); transition: width .25s; }
.jn-prog span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.jn-sc { width: 100%; height: auto; }
.jn-dot { fill-opacity: .75; stroke: var(--panel); stroke-width: 1.5; cursor: pointer; transition: r .12s; } .jn-dot.up { fill: var(--up); } .jn-dot.dn { fill: var(--down); }
.jn-dot:hover { r: 7; fill-opacity: 1; }
.jn-diag { stroke: var(--muted); stroke-dasharray: 4 4; }

/* сравнение */
.jn-cmpf { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.jn-cmpf label { display: flex; flex-direction: column; gap: 5px; } .jn-cmpf label > span { font-size: 11.5px; color: var(--muted); }
.jn-cmpf .select { min-width: 280px; max-width: 360px; }
.jn-cmpf .jn-cta { margin-left: auto; }
.jn-inu { position: relative; } .jn-inu .input { padding-right: 34px; font-family: var(--mono); width: 150px; }
.jn-inu em { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; color: var(--muted); }
.jn-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.jn-cmph { padding: 24px 30px; }
.jn-cmp2 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.jn-cmp2 > div:not(.vs) { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: 16px; background: color-mix(in srgb, var(--panel-2) 70%, transparent); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.jn-cmp2 .me { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)) !important; }
.jn-cmp2 .st { border-color: color-mix(in srgb, #3987e5 50%, var(--line)) !important; text-align: right; }
.jn-cmp2 span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.jn-cmp2 .me span { color: var(--accent); } .jn-cmp2 .st span { color: #57a6f5; }
.jn-cmp2 b { font: 760 40px/1 var(--mono); letter-spacing: -.04em; } .jn-cmp2 i { font-style: normal; font-size: 12px; color: var(--text-2); }
.jn-cmp2 .vs { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
.jn-ct { width: 100%; border-collapse: collapse; font-size: 13px; }
.jn-ct th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.jn-ct td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); }
.jn-ct .n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.jn-leg { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); align-items: center; }
.jn-leg span { display: flex; align-items: center; gap: 6px; } .jn-leg i { width: 16px; height: 3px; border-radius: 2px; }
.jn-leg i.me { background: var(--accent); } .jn-leg i.st { background: #57a6f5; }
.jn-cl { fill: none; stroke-width: 2.2; stroke-linejoin: round; } .jn-cl.me { stroke: var(--accent); } .jn-cl.st { stroke: #57a6f5; }
.jn-cth { fill: transparent; } .jn-cth:hover { fill: color-mix(in srgb, var(--text) 5%, transparent); }
.jn-cdd { display: flex; gap: 2px; height: 120px; align-items: stretch; }
.jn-cdd > div { flex: 1 1 0; position: relative; min-width: 2px; border-radius: 2px; }
.jn-cdd > div:hover { background: var(--panel-2); }
.jn-cdd > div::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.jn-cdd i { position: absolute; left: 15%; right: 15%; border-radius: 2px; } .jn-cdd i.up { background: var(--up); } .jn-cdd i.dn { background: var(--down); }
.jn-agree .ji { width: 14px; height: 14px; } .jn-agree.ok { color: var(--up); } .jn-agree.bad { color: var(--down); }
.jn-nos { color: var(--muted); font-size: 11.5px; }

/* импорт */
.jn-imp { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 50px; color: var(--text-2); }
.jn-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--panel-2); border-top-color: var(--accent); animation: xpSpin .8s linear infinite; }
@keyframes xpSpin { to { transform: rotate(360deg); } }
.jn-dz { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 44px 30px 34px;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); }
.jn-dz-ic { width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center; color: var(--accent); background: var(--accent-sf); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
  animation: jnBob 2.4s ease-in-out infinite; }
.jn-dz-ic .ji { width: 32px; height: 32px; }
.jn-dz h2 { margin: 4px 0 0; font-size: 26px; font-weight: 740; letter-spacing: -.025em; }
.jn-dz p { margin: 0; max-width: 700px; color: var(--text-2); line-height: 1.65; font-size: 14px; }
.jn-dz-a { margin-top: 8px; }
.jn-fmts { display: flex; gap: 6px; margin-top: 6px; }
.jn-fmts span { font: 650 11px var(--mono); padding: 4px 9px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text-2); }
.jn-brokers { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.jn-bk { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2);
  cursor: pointer; text-align: left; color: var(--text); position: relative; overflow: hidden; transition: border-color .15s, transform .15s; }
.jn-bk::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.jn-bk:hover { border-color: color-mix(in srgb, var(--c) 60%, var(--line)); transform: translateY(-1px); }
.jn-bk b { font-size: 13px; font-weight: 650; }
.jn-bk span { font-size: 11.5px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.jn-bk.open span { -webkit-line-clamp: 8; color: var(--text-2); }
.jn-hist2 { display: flex; flex-direction: column; gap: 6px; }
.jn-hist2 > div { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.jn-hist2 b { font-size: 13px; } .jn-hist2 i { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); }
.jn-hist2 em { font-style: normal; font: 600 12px var(--mono); color: var(--text-2); } .jn-hist2 .m { font-size: 11.5px; color: var(--muted); }
.jn-hic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--accent); background: var(--accent-sf); flex: 0 0 auto; }
.jn-rv { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; }
.jn-rvh { display: flex; align-items: center; gap: 12px; }
.jn-rvh b { font-size: 16px; } .jn-rvh i { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.jn-bdg { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--panel-2); color: var(--text-2); border: 1px solid var(--line); }
.jn-bdg.ok { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, transparent); background: color-mix(in srgb, var(--up) 10%, transparent); }
.jn-rvs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.jn-rvs > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.jn-rvs > div.hl { background: var(--accent-sf); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.jn-rvs i { font-style: normal; font-size: 11px; color: var(--muted); } .jn-rvs b { font: 700 20px var(--mono); }
.jn-rvm { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.6; } .jn-rvm.m { color: var(--muted); font-size: 12px; }
.jn-tpick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.jn-tpick > span { font-size: 11.5px; color: var(--muted); margin-right: 4px; }
.jn-tpick button { height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2); font-size: 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.jn-tpick button i { font-style: normal; font: 10.5px var(--mono); color: var(--muted); }
.jn-tpick button.ok { color: var(--text); } .jn-tpick button.on { border-color: var(--accent); background: var(--accent-sf); color: var(--text); font-weight: 600; }
details.jn-map { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
details.jn-map summary { cursor: pointer; font-size: 13px; font-weight: 650; }
details.jn-map summary span { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 8px; }
.jn-mapg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; margin-top: 12px; }
.jn-mapg label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jn-mapg label > span { font-size: 11.5px; color: var(--muted); } .jn-mapg label.req > span::after { content: ' •'; color: var(--accent); }
.jn-mapg label.on > span { color: var(--text-2); }
.jn-mapg .select.tiny { max-width: none; width: 100%; }
.jn-mapg em { font-style: normal; font: 10.5px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 14px; }
.jn-rvo { display: flex; gap: 14px; flex-wrap: wrap; }
.jn-rvo label { display: flex; flex-direction: column; gap: 5px; } .jn-rvo label > span { font-size: 11.5px; color: var(--muted); }
.jn-rvo .select { min-width: 240px; }
.jn-rvp { margin: 0 -22px !important; }
.jn-rvp tr.dup td { opacity: .45; }
.jn-dupb { font-style: normal; font-size: 11px; color: var(--muted); }
.jn-rvf { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.btn.big { height: 42px; padding: 0 20px; font-size: 14px; }
.btn.big svg { width: 16px; height: 16px; }

/* счета и правила */
.jn-acc { display: flex; flex-direction: column; gap: 6px; }
.jn-acc > div { display: grid; grid-template-columns: auto 1.4fr 1fr 80px 170px auto 90px auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); }
.jn-acc .input { width: 100%; height: 32px; background: var(--panel); }
.jn-acc .jn-inu .input { width: 100%; }
.jn-acc b { font-size: 12px; color: var(--text-2); font-weight: 500; white-space: nowrap; } .jn-acc em { font-style: normal; font: 650 12px var(--mono); text-align: right; }
.jn-accadd { display: flex; gap: 8px; margin-top: 10px; } .jn-accadd .input { flex: 1 1 auto; max-width: 420px; }
.jn-form2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jn-form2 label { display: flex; flex-direction: column; gap: 5px; } .jn-form2 label > span { font-size: 11.5px; color: var(--muted); }
.jn-form2 .select, .jn-form2 .input { width: 100%; max-width: none; }
.jn-ck2 { flex-direction: row !important; align-items: center; gap: 8px !important; align-self: end; height: 34px; cursor: pointer; }
.jn-ck2 input { accent-color: var(--accent); width: 16px; height: 16px; } .jn-ck2 span { color: var(--text-2) !important; font-size: 12.5px !important; }
.jn-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.jn-chips span { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 11px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; }
.jn-chips button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.jn-chips button:hover { background: var(--panel); color: var(--down); }
.jn-chips .input { width: 140px; }
.jn-play { display: flex; flex-direction: column; gap: 6px; }
.jn-play > div { display: grid; grid-template-columns: 200px 1fr 170px auto; gap: 8px; align-items: center; }
.jn-play .input { height: 32px; width: 100%; } .jn-play em { font-style: normal; font-size: 11.5px; color: var(--muted); text-align: right; }
.jn-data { display: flex; gap: 8px; flex-wrap: wrap; }
/* ── /Trade Journal ── */

/* ── Prop test и демо-торговля ── */
/* Спокойный профессиональный терминал: плотная сетка, моноширинные цифры,
   один акцентный цвет на экран, движение — только там, где оно что-то
   сообщает (что изменилось, куда поехало, что сейчас идёт). */
.pp { flex: 1 1 auto; min-height: 0; min-width: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 100%; position: relative; }
.pp .pi, .pt-ov .pi { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.pp .up, .pt-ov .up { color: var(--up); } .pp .dn, .pt-ov .dn { color: var(--down); }
.pp .grow { flex: 1 1 auto; }
.pp kbd { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 4px; border: 1px solid var(--line); border-bottom-width: 2px; font: 600 10px var(--mono); color: var(--text-2); background: var(--panel); }

/* навигация раздела */
.pp-nav { border-right: 1px solid var(--line); background: var(--panel); padding: 16px 12px 16px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.pp-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 16px; font-size: 14px; letter-spacing: -.01em; }
.pp-brand .pi { width: 28px; height: 28px; padding: 6px; box-sizing: border-box; border-radius: 8px; color: var(--accent); background: var(--accent-sf); }
.pp-ni { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left; position: relative; transition: background .15s, color .15s; }
.pp-ni:hover { background: var(--panel-2); color: var(--text); } .pp-ni span { flex: 1 1 auto; }
.pp-ni em { font-style: normal; font: 600 10.5px var(--mono); color: var(--muted); padding: 1px 6px; border-radius: 9px; background: var(--panel-2); }
.pp-ni.on { background: var(--panel-2); color: var(--text); font-weight: 600; }
.pp-ni.on::before { content: ''; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); animation: ppBar .25s cubic-bezier(.2, .8, .2, 1); }
.pp-ni.on .pi { color: var(--accent); }
@keyframes ppBar { from { transform: scaleY(.2); opacity: 0; } }
.pp-ng { margin: 18px 10px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pp-act { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.pp-act:hover { border-color: var(--line); background: var(--panel-2); }
.pp-act > i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: 0 0 auto; animation: ppPulse 2.2s ease-in-out infinite; }
.pp-act > span { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .pp-act b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-act em { font-style: normal; font: 10.5px var(--mono); color: var(--muted); } .pp-act em u { text-decoration: none; }
.pp-act > .pi { width: 14px; height: 14px; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.pp-act:hover > .pi { opacity: 1; transform: none; }
@keyframes ppPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); } 60% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 0%, transparent); } }
.pp-nfoot { margin-top: auto; padding: 18px 8px 0; font-size: 10.5px; line-height: 1.6; color: var(--muted); }

/* страница */
.pp-main { overflow: auto; min-width: 0; padding: 26px 32px 56px; scroll-behavior: smooth; }
.pp-main.full { grid-column: 1 / -1; }
.pp-page { max-width: 1340px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.pp-page > * { animation: ppIn .45s cubic-bezier(.2, .8, .2, 1) both; }
.pp-page > *:nth-child(2) { animation-delay: .04s; } .pp-page > *:nth-child(3) { animation-delay: .08s; } .pp-page > *:nth-child(n+4) { animation-delay: .12s; }
.pp-form > .pp-sec { animation: ppIn .45s cubic-bezier(.2, .8, .2, 1) both; }
.pp-form > .pp-sec:nth-child(2) { animation-delay: .05s; } .pp-form > .pp-sec:nth-child(3) { animation-delay: .1s; } .pp-form > .pp-sec:nth-child(n+4) { animation-delay: .15s; }
.pp.still .pp-page > *, .pp.still .pp-form > .pp-sec, .pp.still .pp-firm, .pp.still .pp-att, .pp.still .pp-fopt, .pp.still .pp-rc { animation: none; }
@keyframes ppIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ppFade { from { opacity: 0; } }
.pp-warn { padding: 10px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--down) 40%, var(--line)); background: color-mix(in srgb, var(--down) 8%, var(--panel)); font-size: 12.5px; margin-bottom: 14px; }
.pp-load { grid-column: 1 / -1; display: grid; place-items: center; height: 100%; }
.pp-spin { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--panel-2); border-top-color: var(--accent); animation: ppSpin .8s linear infinite; }
@keyframes ppSpin { to { transform: rotate(360deg); } }

.pp-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 2px 0 4px; }
.pp-ph h1 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; }
.pp-ph p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); max-width: 660px; }
.pp-stats { display: flex; }
.pp-stats > div { display: flex; flex-direction: column; gap: 3px; padding: 2px 20px; border-left: 1px solid var(--line); }
.pp-stats > div:first-child { border-left: 0; padding-left: 0; }
.pp-stats b { font: 700 20px/1.1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .pp-stats span { font-size: 11px; color: var(--muted); white-space: nowrap; }

.pp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.pp-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pp-aside { position: sticky; top: 0; }
.pp-sec { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px 20px; }
.pp-sec > header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.pp-n { font: 600 11px var(--mono); color: var(--muted); letter-spacing: .04em; min-width: 18px; }
.pp-sec h3 { margin: 0; font-size: 14.5px; font-weight: 650; letter-spacing: -.005em; } .pp-sec header p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.pp-sec.fold > header { cursor: pointer; margin-bottom: 0; user-select: none; }
.pp-sec.fold > header::after { content: ''; margin-left: auto; align-self: center; width: 7px; height: 7px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.pp-sec.fold.open > header { margin-bottom: 14px; } .pp-sec.fold.open > header::after { transform: rotate(-135deg) translateY(-2px); }
.pp-sec.fold:not(.open) > :not(header) { display: none; }
.pp-sec.fold.open > :not(header) { animation: ppIn .3s ease both; }

/* программы фирм */
.pp-firms { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 8px; }
.pp-firm { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text); cursor: pointer; text-align: left; font: inherit; animation: ppIn .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d) * 30ms);
  transition: border-color .18s, background .18s, box-shadow .18s, transform .18s; }
.pp-firm:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); transform: translateY(-1px); }
.pp-firm.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, var(--panel-2)); box-shadow: inset 0 0 0 1px var(--c); }
.pp-fl { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pp-fl i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: 0 0 auto; align-self: center; }
.pp-fl b { font-size: 13.5px; font-weight: 700; } .pp-fl span { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-firm dl { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 14px; margin: 0; }
.pp-firm dt { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .pp-firm dd { margin: 1px 0 0; font: 600 11.5px var(--mono); color: var(--text); white-space: nowrap; }
.pp-firm dl > div { display: flex; flex-direction: column; min-width: 0; }
.pp-fnote { margin: 12px 0 0; padding-left: 10px; border-left: 2px solid var(--c); font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.pp-sizes button { padding: 0 16px; font-family: var(--mono); height: 32px; font-size: 12.5px; }

/* рынок */
.pp-feeds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pp-feed { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: 12px; row-gap: 8px; padding: 13px 14px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); cursor: pointer; text-align: left; font: inherit; transition: border-color .18s, background .18s, box-shadow .18s; }
.pp-feed:hover { border-color: color-mix(in srgb, var(--text-2) 60%, var(--line)); }
.pp-feed.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)); box-shadow: inset 0 0 0 1px var(--accent); }
.pp-fi { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--accent); background: var(--accent-sf); grid-row: 1 / 3; }
.pp-fi .pi { width: 18px; height: 18px; }
.pp-fi.synth { color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); }
.pp-fi.live { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.pp-ft { display: flex; flex-direction: column; gap: 3px; } .pp-ft b { font-size: 13.5px; } .pp-ft span { font-size: 12px; line-height: 1.45; color: var(--text-2); }
.pp-feed > i { font-style: normal; font: 10.5px var(--mono); color: var(--muted); }
.pp-fopt { margin-top: 12px; animation: ppIn .3s ease both; }
.pp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-ck { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); cursor: pointer; } .pp-ck input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.pp-hint { font-size: 11.5px; color: var(--muted); }
.pp-srcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.pp-src { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; text-align: left; font: inherit; transition: border-color .15s, box-shadow .15s; }
.pp-src b { font-size: 12.5px; } .pp-src span { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.pp-src.on { border-color: var(--up); box-shadow: inset 0 0 0 1px var(--up); }
.pp-syms { display: flex; flex-wrap: wrap; gap: 6px; } .pp-syms .chip { font-family: var(--mono); }
.pp-symi { width: 150px; font-family: var(--mono); text-transform: uppercase; }

/* синтетика */
.pp-scens { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 6px; }
.pp-sc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; text-align: left; font: inherit; transition: border-color .15s, background .15s, transform .15s; min-width: 0; }
.pp-sc:hover { border-color: color-mix(in srgb, var(--violet) 55%, var(--line)); }
.pp-sc:active { transform: scale(.98); }
.pp-sc svg { width: 30px; height: 30px; padding: 4px; box-sizing: border-box; border-radius: 8px; flex: 0 0 auto; stroke: var(--violet); stroke-width: 1.8; fill: none; background: color-mix(in srgb, var(--violet) 12%, transparent); }
.pp-sc > span { display: flex; flex-direction: column; min-width: 0; } .pp-sc b { font-size: 12.5px; font-weight: 600; } .pp-sc i { font-style: normal; font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.pp-sc.on { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 9%, var(--panel)); box-shadow: inset 0 0 0 1px var(--violet); }
.pp-sc.on svg { stroke: var(--panel); background: var(--violet); }
.pp-syn { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; margin-top: 12px; }
.pp-fanw { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px 10px; background: var(--panel); min-width: 0; }
.pp-fanw header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pp-fanw header > div { display: flex; flex-direction: column; gap: 2px; } .pp-fanw header b { font-size: 12.5px; } .pp-fanw header > div > span { font-size: 11px; color: var(--muted); }
.pp-fanb { display: flex; gap: 12px; font-size: 11px; color: var(--muted); flex-wrap: wrap; } .pp-fanb b { font: 600 11.5px var(--mono); color: var(--text); margin-left: 3px; } .pp-fanb b.up { color: var(--up); } .pp-fanb b.dn { color: var(--down); }
.pp-fan { margin-top: 8px; min-height: 190px; } .pp-fan svg { width: 100%; height: auto; display: block; overflow: visible; stroke: none; stroke-width: 1; }
.pp-fan text, .pp-svg text, .pp-ill text { stroke: none; }
.pp-fan .gl { stroke: var(--line-soft); stroke-width: 1; } .pp-fan .ax { fill: var(--muted); font: 10px var(--mono); }
.pp-fan .band { fill: color-mix(in srgb, var(--violet) 13%, transparent); animation: ppFade .5s ease both; }
.pp-fan .pth { fill: none; stroke: var(--violet); stroke-opacity: .32; stroke-width: 1; animation: ppFade .5s ease both; animation-delay: var(--d); }
.pp-fan .med { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linejoin: round; }
.pp-fan .base { stroke: var(--text-2); stroke-opacity: .45; stroke-dasharray: 3 3; }
.pp-fan .ev { stroke: var(--down); stroke-dasharray: 3 3; } .pp-fan .evr { fill: color-mix(in srgb, var(--down) 7%, transparent); } .pp-fan .evt { fill: var(--down); font: 600 10px var(--sans); }
.pp-fanh { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.pp-gps { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.pp-gp { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; width: 100%; }
.pp-gp > span { display: flex; flex-direction: column; min-width: 0; } .pp-gp > span b { font-size: 12.5px; font-weight: 600; } .pp-gp > span em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.pp-gp output { font: 600 12.5px var(--mono); color: var(--violet); font-variant-numeric: tabular-nums; }
.pp-gp.pp-gpn { grid-template-columns: minmax(0, 1fr) 150px; } .pp-gp.pp-gpn .pp-in .input, .pp-gp.pp-gpn .select { width: 100%; min-width: 0; }
.pp-gp input[type="range"] { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: 4px 0 2px; border-radius: 2px; cursor: pointer;
  background: linear-gradient(90deg, var(--violet) var(--v, 50%), var(--line) var(--v, 50%)); outline: none; }
.pp-gp input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); border: 2px solid var(--violet); box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: transform .12s; }
.pp-gp input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 2px solid var(--violet); }
.pp-gp input[type="range"]:hover::-webkit-slider-thumb, .pp-gp input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }
.pp-gev { display: flex; flex-direction: column; gap: 8px; padding-top: 11px; border-top: 1px solid var(--line-soft); }
.pp-seed { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.pp-seed .btn .pi { width: 14px; height: 14px; }

/* правила и исполнение */
.pp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pp-grid label { display: flex; flex-direction: column; gap: 5px; } .pp-grid label > span { font-size: 11.5px; color: var(--text-2); } .pp-grid label > i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.pp-in { position: relative; display: inline-block; } .pp-in .input { width: 100%; min-width: 150px; padding-right: 86px; font-family: var(--mono); }
.pp-in em { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 11px; color: var(--muted); pointer-events: none; white-space: nowrap; }
.pp-in.sm .input { height: 30px; min-width: 0; width: 150px; }
.pp-grid .pp-in, .pp-gp .pp-in { display: block; }
.pp-rules { display: flex; flex-direction: column; gap: 2px; }
.pp-rules > div { display: grid; grid-template-columns: minmax(220px, 1.2fr) auto minmax(0, 1.3fr); gap: 14px; align-items: center; padding: 8px 12px; border-radius: 9px; background: var(--panel-2); font-size: 12.5px; }
.pp-rules > div.sub { background: transparent; padding: 2px 12px 8px; }
.pp-rules > div > span { display: flex; align-items: center; gap: 9px; color: var(--text); } .pp-rules > div.sub > span { color: var(--muted); font-size: 12px; padding-left: 25px; }
.pp-rules > div > span .pi { color: var(--accent); width: 15px; height: 15px; } .pp-rules em { font-style: normal; font-size: 11.5px; color: var(--text-2); font-family: var(--mono); }
.pp-rules .select.tiny { max-width: 220px; }

/* сводка справа */
.pp-sum { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.pp-sh { display: flex; align-items: center; gap: 12px; }
.pp-sh > i { width: 4px; align-self: stretch; border-radius: 2px; background: var(--c); }
.pp-sh > div { display: flex; flex-direction: column; gap: 1px; } .pp-sh span { font-size: 12px; color: var(--text-2); } .pp-sh b { font: 700 24px/1.1 var(--mono); letter-spacing: -.02em; }
.pp-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; position: relative; }
.pp-tl li { display: flex; gap: 11px; position: relative; }
.pp-tl li:not(:last-child)::before { content: ''; position: absolute; left: 10.5px; top: 24px; bottom: -12px; width: 1px; background: var(--line); }
.pp-tl em { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-style: normal; font: 600 10.5px var(--mono); border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2); }
.pp-tl li.fd em { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .pp-tl li.fd em .pi { width: 12px; height: 12px; }
.pp-tl li > div { display: flex; flex-direction: column; gap: 1px; } .pp-tl b { font-size: 12.5px; } .pp-tl span { font-size: 11.5px; color: var(--muted); } .pp-tl u { text-decoration: none; font-family: var(--mono); font-weight: 600; }
.pp-srs { display: flex; flex-direction: column; }
.pp-sr { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 12px; }
.pp-sr span { color: var(--muted); } .pp-sr b { font: 600 12.5px var(--mono); text-align: right; }
.pp-sfeed { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px; background: var(--panel-2); font-size: 12px; color: var(--text-2); }
.pp-sfeed .pi { width: 15px; height: 15px; color: var(--accent); }
.pp-start { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 12px 16px; border: 0; border-radius: 11px; cursor: pointer; text-align: left; font: inherit;
  color: var(--on-accent); background: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.2); transition: transform .15s, box-shadow .2s, filter .15s; }
.pp-start:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 26px color-mix(in srgb, var(--accent) 30%, transparent); }
.pp-start:active { transform: translateY(0) scale(.985); }
.pp-start > span { display: flex; flex-direction: column; } .pp-start b { font-size: 14px; font-weight: 700; } .pp-start i { font-style: normal; font-size: 11px; opacity: .72; }
.pp-start .pi { width: 18px; height: 18px; fill: currentColor; stroke: none; transition: transform .2s; } .pp-start:hover .pi { transform: translateX(2px); }
.pp-start.blue { background: var(--blue); } .pp-start.blue:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 26px color-mix(in srgb, var(--blue) 30%, transparent); }
.pp-start.sm { width: auto; padding: 8px 14px; gap: 10px; } .pp-start.sm b { font-size: 13px; } .pp-start.sm .pi { width: 14px; height: 14px; }

/* попытки */
.pp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 80px 20px; }
.pp-empty > .pi { width: 40px; height: 40px; color: var(--accent); } .pp-empty h2 { margin: 0; font-size: 18px; } .pp-empty p { margin: 0 0 8px; color: var(--text-2); max-width: 420px; }
.pp-atts { display: flex; flex-direction: column; gap: 6px; }
.pp-att { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(200px, 1.7fr) 80px minmax(110px, 1fr) 120px 130px 150px; align-items: center; gap: 18px; padding: 12px 14px 12px 18px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; animation: ppIn .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d) * 25ms);
  transition: border-color .15s, background .15s, opacity .22s, transform .22s; }
.pp-att::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.pp-att:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); background: color-mix(in srgb, var(--panel-2) 60%, var(--panel)); }
.pp-att.gone { opacity: 0; transform: translateX(-12px); }
.pp-att-a { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-att-a > b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-att-f { display: flex; align-items: center; gap: 4px; font: 11px var(--mono); color: var(--muted); white-space: nowrap; } .pp-att-f .pi { width: 12px; height: 12px; }
.pp-st { align-self: flex-start; display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 5px; font: 600 10px var(--sans); letter-spacing: .05em; text-transform: uppercase; background: var(--panel-2); color: var(--muted); }
.pp-st.run { background: var(--accent-sf); color: var(--accent); } .pp-st.ok { background: color-mix(in srgb, var(--up) 15%, transparent); color: var(--up); } .pp-st.bad { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); }
.pp-steps { display: flex; gap: 3px; } .pp-steps span { flex: 1 1 0; height: 5px; border-radius: 3px; background: var(--line); }
.pp-steps span.ok { background: var(--up); } .pp-steps span.on { background: var(--accent); } .pp-steps span.bad { background: var(--down); }
.pp-att-r { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sp { width: 120px; height: 34px; overflow: visible; stroke: none; } .pp-sp path { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke: var(--muted); }
.pp-sp.up path { stroke: var(--up); } .pp-sp.dn path { stroke: var(--down); }
.pp-att-p { display: flex; flex-direction: column; align-items: flex-end; } .pp-att-p b { font: 700 16px var(--mono); letter-spacing: -.02em; } .pp-att-p em { font-style: normal; font: 11px var(--mono); color: var(--muted); }
.pp-att-x { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.pp-att-x .btn.icon { width: 28px; height: 28px; opacity: 0; transition: opacity .15s, color .15s; } .pp-att:hover .pp-att-x .btn.icon { opacity: .55; } .pp-att-x .btn.icon:hover { opacity: 1; color: var(--down); }
.pp-att-x .btn.sure { opacity: 1 !important; color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); }
.pp-att-go { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--accent); font-weight: 600; } .pp-att-go .pi { width: 13px; height: 13px; transition: transform .15s; } .pp-att:hover .pp-att-go .pi { transform: translateX(2px); }

/* как считаются правила */
.pp-rcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pp-rc { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; animation: ppIn .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d) * 50ms); }
.pp-rc h3 { margin: 0; font-size: 14px; } .pp-rc p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.pp-ill { width: 100%; height: auto; margin-top: 6px; stroke: none; }
.pp-ill .eq { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ppDraw 1.4s cubic-bezier(.4, 0, .2, 1) .25s forwards; }
.pp-ill .fl { fill: none; stroke: var(--down); stroke-width: 2; stroke-dasharray: 5 4; }
.pp-ill text { fill: var(--muted); font: 10px var(--mono); }
@keyframes ppDraw { to { stroke-dashoffset: 0; } }

/* итоги попытки */
.pp-rh { display: flex; justify-content: space-between; gap: 24px; padding: 20px 24px 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); box-shadow: inset 0 3px 0 var(--c); flex-wrap: wrap; }
.pp-rhl { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.pp-bk { margin-bottom: 4px; }
.pp-rht { display: flex; align-items: center; gap: 10px; } .pp-rht .pp-st { align-self: center; }
.pp-rh h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; } .pp-rh p { margin: 0; font-size: 13px; color: var(--text-2); }
.pp-big { font: 700 34px/1.1 var(--mono); letter-spacing: -.03em; margin-top: 6px; } .pp-big small { font-size: 14px; color: var(--muted); margin-left: 10px; letter-spacing: 0; }
.pp-sa { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.pp-certw { flex: 0 0 360px; display: grid; place-items: center; }
.pp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pp-k { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; animation: ppIn .4s ease both; animation-delay: calc(var(--d) * 30ms); }
.pp-k span { font-size: 11px; color: var(--muted); } .pp-k b { font: 700 18px/1.25 var(--mono); letter-spacing: -.02em; } .pp-k i { font-style: normal; font-size: 11px; color: var(--text-2); }
.pp-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pp-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.pp-card > header h3 { margin: 0; font-size: 14px; } .pp-card > header p { margin: 2px 0 12px; font-size: 12px; color: var(--muted); }
.pp-svg { display: block; width: 100%; height: auto; overflow: visible; stroke: none; stroke-width: 1; }
.pp-svg .gl { stroke: var(--line-soft); } .pp-svg .gl.z { stroke: var(--line); } .pp-svg .ax { fill: var(--muted); font: 10.5px var(--mono); }
.pp-svg .tl { stroke: var(--up); stroke-dasharray: 4 4; } .pp-svg .tlt { fill: var(--up); } .pp-svg .fl { stroke: var(--down); stroke-dasharray: 4 4; } .pp-svg .flt { fill: var(--down); }
.pp-svg .eqln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ppDraw 1.1s cubic-bezier(.4, 0, .2, 1) .15s forwards; }
.pp-svg .ar { animation: ppFade .8s ease .5s both; }
.pp-svg .dot { fill: var(--panel); stroke: var(--accent); stroke-width: 2; transition: r .12s; cursor: default; } .pp-svg .dot:hover { r: 5.5; }
.pp-svg .bar { animation: ppFade .4s ease both; animation-delay: var(--d); transition: opacity .12s; } .pp-svg .bar.up { fill: var(--up); } .pp-svg .bar.dn { fill: var(--down); } .pp-svg .bar:hover { opacity: .75; }
.pp-tw { overflow: auto; max-height: 520px; }
.pp-tw table, .pt-tw table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pp-tw th, .pt-tw th { position: sticky; top: 0; background: var(--panel); text-align: left; font-size: 10.5px; font-weight: 600; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.pp-tw td, .pt-tw td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.pp-tw tbody tr:hover td, .pt-tw tbody tr:hover td { background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
.pp-tw .n, .pt-tw .n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; } .pp-tw .m, .pt-tw .m { font-family: var(--mono); color: var(--text-2); }
.pp-none { padding: 18px 12px; font-size: 12px; color: var(--muted); text-align: center; }
.pt-side-t { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.pt-side-t.long { color: var(--up); background: color-mix(in srgb, var(--up) 13%, transparent); } .pt-side-t.short { color: var(--down); background: color-mix(in srgb, var(--down) 13%, transparent); }
@media (max-width: 1280px) { .pp-cols { grid-template-columns: 1fr; } .pp-aside { position: static; } .pp-syn { grid-template-columns: 1fr; } .pp-att { grid-template-columns: minmax(180px, 1.6fr) 70px minmax(100px, 1fr) 120px 140px; } .pp-att .pp-sp { display: none; } }
@media (max-width: 1400px) { .pp-feeds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .pp-feeds, .pp-srcs, .pp-grid, .pp-rcs { grid-template-columns: 1fr; } .pp-rules > div { grid-template-columns: 1fr; gap: 6px; } .pp-kpis { grid-template-columns: repeat(2, 1fr); } .pp-g2 { grid-template-columns: 1fr; } }

/* терминал */
.pp:has(.pt), .pp:has(.pt-boot) { grid-template-columns: 1fr; }
.pt { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; min-height: 0; height: 100%; min-width: 0; animation: ppFade .3s ease both; }
.pt.shake { animation: ptShake .6s cubic-bezier(.36, .07, .19, .97); }
@keyframes ptShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
.pt-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 44px; }
.pt-top > .btn { width: 34px; height: 34px; padding: 0; justify-content: center; } .pt-top .btn .pi { width: 16px; height: 16px; }
.pt-id { display: flex; flex-direction: column; } .pt-id b { font-size: 13.5px; } .pt-id span { font: 11px var(--mono); color: var(--muted); }
.pt-steps { display: flex; align-items: center; gap: 4px; }
.pt-steps span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 4px; border-radius: 13px; font-size: 11.5px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line-soft); transition: all .3s; }
.pt-steps span em { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font: 700 10px var(--mono); background: var(--panel); }
.pt-steps span .pi { width: 18px; height: 18px; padding: 2px; border-radius: 50%; box-sizing: border-box; }
.pt-steps span.ok { color: var(--up); border-color: color-mix(in srgb, var(--up) 35%, transparent); } .pt-steps span.ok .pi { background: color-mix(in srgb, var(--up) 20%, transparent); }
.pt-steps span.on { color: var(--text); font-weight: 600; border-color: color-mix(in srgb, var(--fc) 70%, var(--line)); background: color-mix(in srgb, var(--fc) 12%, var(--panel)); }
.pt-steps span.on em { background: var(--fc); color: #fff; } .pt-steps span.demo { padding-left: 8px; }
.pt-steps > i { width: 12px; height: 1px; background: var(--line); }
.pt-feed { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 11px; border-radius: 13px; font-size: 11.5px; color: var(--text-2); background: var(--panel-2); border: 1px solid var(--line); white-space: nowrap; }
.pt-feed > i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.pt-feed.live > i { background: var(--up); animation: ptDot 1.6s ease-out infinite; }
.pt-feed.live { border-color: color-mix(in srgb, var(--up) 40%, var(--line)); }
.pt-feed.delayed > i { background: var(--accent); } .pt-feed.closed > i { background: var(--muted); } .pt-feed.wait > i { background: var(--accent); animation: ptBlink 1s ease-in-out infinite; } .pt-feed.err > i { background: var(--down); }
.pt-feed.err { border-color: color-mix(in srgb, var(--down) 45%, var(--line)); color: var(--down); }
.pt-feed .pi { width: 14px; height: 14px; color: var(--accent); } .pt-feed.syn .pi { color: var(--violet); }
@keyframes ptDot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 60%, transparent); } 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--up) 0%, transparent); } }
@keyframes ptBlink { 50% { opacity: .3; } }
.pt-acc { display: flex; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.pt-acc > div { padding: 5px 14px 6px; display: flex; flex-direction: column; min-width: 112px; position: relative; border-left: 1px solid var(--line-soft); }
.pt-acc > div:first-child { border-left: 0; }
.pt-acc span { font-size: 10.5px; color: var(--muted); } .pt-acc b { font: 700 14.5px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); transition: color .25s; border-radius: 4px; }
.pt-acc b.up { color: var(--up); } .pt-acc b.dn { color: var(--down); }
.tk-up { animation: ptTkUp .6s ease-out; } .tk-dn { animation: ptTkDn .6s ease-out; }
@keyframes ptTkUp { 0% { background: color-mix(in srgb, var(--up) 28%, transparent); } 100% { background: transparent; } }
@keyframes ptTkDn { 0% { background: color-mix(in srgb, var(--down) 28%, transparent); } 100% { background: transparent; } }
.pt-tg i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--panel-2); } .pt-tg u { display: block; height: 100%; background: var(--up); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.pt-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 8px; }
.pt-cc { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pt-cc.hit { animation: ptHit .9s ease-out; }
@keyframes ptHit { 0% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: 0 0 0 2px transparent; } }
.pt-ct { display: flex; align-items: center; gap: 10px; padding: 0 10px; height: 42px; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.pt-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--panel-2); }
.pt-seg button { height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 600 11.5px var(--mono); cursor: pointer; transition: background .15s, color .15s; }
.pt-seg button:hover { color: var(--text); } .pt-seg button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px var(--line); }
.pt-ovl { display: flex; gap: 4px; } .pt-ovl button { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 11.5px; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all .15s; }
.pt-ovl button i { width: 10px; height: 2px; border-radius: 2px; opacity: .45; transition: opacity .15s; } .pt-ovl i.v { background: var(--violet); } .pt-ovl i.e { background: var(--blue); }
.pt-ovl button.on { color: var(--text); border-color: color-mix(in srgb, var(--text-2) 50%, var(--line)); } .pt-ovl button.on i { opacity: 1; }
.pt-ohlc { font: 11.5px var(--mono); color: var(--text); white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; } .pt-ohlc span { color: var(--muted); margin: 0 4px 0 10px; } .pt-ohlc span:first-child { margin-left: 0; } .pt-ohlc b { margin-left: 6px; font-weight: 600; }
.pt-clock { font: 700 15px var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; } .pt-clock small { font-size: 12px; color: var(--muted); font-weight: 600; }
.pt-cv { position: relative; flex: 1 1 auto; min-height: 260px; } .pt-cv canvas { position: absolute; inset: 0; display: block; }
.pt-cv canvas.drag { cursor: ns-resize !important; } .pt-cv canvas.pan { cursor: grabbing !important; }
.pt-follow { position: absolute; right: 90px; bottom: 34px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 14px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--raise) 92%, transparent); color: var(--text); font-size: 11.5px; cursor: pointer; backdrop-filter: blur(6px); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .2s, transform .2s, border-color .15s; }
.pt-follow svg { width: 13px; height: 13px; } .pt-follow:hover { border-color: var(--accent); }
.pt-follow.on { opacity: 1; transform: none; pointer-events: auto; }
.pt-autoy { position: absolute; right: 10px; top: 8px; z-index: 3; height: 20px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--accent); background: var(--accent-sf); color: var(--accent); font: 600 10.5px var(--sans); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; }
.pt-autoy.on { opacity: 1; pointer-events: auto; }
.pt-toasts { position: absolute; right: 88px; top: 10px; z-index: 4; display: flex; flex-direction: column; gap: 6px; pointer-events: none; width: 320px; }
.pt-toast { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border-radius: 11px; font-size: 12.5px; line-height: 1.4; color: var(--text); background: color-mix(in srgb, var(--raise) 94%, transparent);
  border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(8px); animation: ptIn .35s cubic-bezier(.2, .9, .3, 1.15) both; }
.pt-toast.out { animation: ptOut .3s ease forwards; }
.pt-toast > i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto; background: var(--panel-2); color: var(--accent); }
.pt-toast > i .pi { width: 13px; height: 13px; }
.pt-toast.buy > i, .pt-toast.win > i { color: var(--up); background: color-mix(in srgb, var(--up) 16%, transparent); } .pt-toast.sell > i, .pt-toast.loss > i { color: var(--down); background: color-mix(in srgb, var(--down) 16%, transparent); }
.pt-toast.win { border-color: color-mix(in srgb, var(--up) 40%, var(--line)); } .pt-toast.loss { border-color: color-mix(in srgb, var(--down) 40%, var(--line)); }
@keyframes ptIn { from { opacity: 0; transform: translateX(16px) scale(.97); } }
@keyframes ptOut { to { opacity: 0; transform: translateX(16px); } }
.pt-closed { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 26px; border-radius: 14px; text-align: center;
  background: color-mix(in srgb, var(--panel) 90%, transparent); border: 1px solid var(--line); backdrop-filter: blur(8px); box-shadow: var(--shadow); }
.pt-closed .pi { width: 24px; height: 24px; color: var(--accent); } .pt-closed b { font-size: 14.5px; } .pt-closed span { font-size: 12px; color: var(--text-2); }

/* плеер */
.pt-pl { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line-soft); min-width: 0; }
.pt-pp { width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; flex: 0 0 auto; cursor: pointer; color: var(--on-accent); background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2); transition: transform .15s, filter .15s, box-shadow .3s; }
.pt-pp:hover { filter: brightness(1.08); transform: scale(1.05); } .pt-pp:active { transform: scale(.95); }
.pt-pp .pi { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 2.4; }
.pt-pp.on { animation: ptRing 2s ease-out infinite; }
@keyframes ptRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); } }
.pt-b { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; position: relative; overflow: hidden; transition: background .15s, color .15s, border-color .15s; }
.pt-b:hover { background: var(--panel-2); color: var(--text); } .pt-b:active { transform: translateY(1px); }
.pt-b .pi { width: 14px; height: 14px; }
.pt-b.run { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: var(--accent-sf); }
.pt-b.run::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent) 22%, transparent) 50%, transparent 70%); animation: ptRun 1s linear infinite; }
@keyframes ptRun { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.pt-spd { position: relative; display: inline-flex; padding: 3px; border-radius: 9px; background: var(--panel-2); }
.pt-spd button { position: relative; z-index: 1; height: 26px; min-width: 36px; padding: 0 7px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 600 11px var(--mono); cursor: pointer; transition: color .2s; }
.pt-spd button:hover { color: var(--text-2); } .pt-spd button.on { color: var(--text); }
.pt-spd > i { position: absolute; left: 3px; top: 3px; height: 26px; border-radius: 7px; background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px var(--line); transition: transform .28s cubic-bezier(.3, .9, .3, 1.1), width .28s; }
.pt-pl.ffing .pt-spd { opacity: .5; }
.pt-sess { flex: 1 1 auto; position: relative; height: 36px; cursor: pointer; min-width: 140px; margin: 0 4px; }
.pt-sb { position: absolute; left: 0; right: 0; top: 10px; height: 6px; border-radius: 3px; background: var(--panel-2); transition: background .15s, height .15s, top .15s; }
.pt-sess:hover .pt-sb { background: var(--line); height: 8px; top: 9px; }
.pt-sb > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); }
.pt-pl.ffing .pt-sb > i { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #fff), var(--accent)); background-size: 200% 100%; animation: ptSh .8s linear infinite; }
@keyframes ptSh { to { background-position: -200% 0; } }
.pt-sb > s { position: absolute; inset: 0; text-decoration: none; }
.pt-sb u { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--up); animation: ppFade .3s ease both; } .pt-sb u.s { background: var(--down); }
.pt-sess > b { position: absolute; top: 6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--accent), 0 2px 6px rgba(0,0,0,.3); }
.pt-s0, .pt-s1 { position: absolute; bottom: 0; font: 10px var(--mono); color: var(--muted); } .pt-s0 { left: 0; } .pt-s1 { right: 0; }
.pt-stip { position: absolute; bottom: 30px; transform: translateX(-50%); padding: 3px 7px; border-radius: 5px; background: var(--text); color: var(--panel); font: 600 10.5px var(--mono); font-style: normal; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; }
.pt-sess.hov .pt-stip { opacity: 1; } .pt-sess.past { cursor: not-allowed; }
.pt-lv { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); } .pt-lv .pi { color: var(--up); } .pt-lv b { font-family: var(--mono); color: var(--text); }
.pt-hint { font-size: 11px; color: var(--muted); }

/* нижняя панель */
.pt-bot { border-top: 1px solid var(--line-soft); flex: 0 0 auto; }
.pt-bot > header { display: flex; align-items: center; gap: 2px; padding: 6px 10px 0; }
.pt-bot > header button { height: 28px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; transition: background .15s, color .15s; }
.pt-bot > header button:hover { color: var(--text); }
.pt-bot > header button i { font-style: normal; font: 600 10px var(--mono); padding: 1px 5px; border-radius: 6px; background: var(--panel-2); margin-left: 4px; }
.pt-bot > header button.on { background: var(--panel-2); color: var(--text); font-weight: 600; } .pt-bot > header button.on i { background: var(--panel); }
.pt-keys { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; overflow: hidden; }
.pt-tw { max-height: 176px; min-height: 92px; overflow: auto; }
.pt-tw .btn.icon { width: 24px; height: 24px; } .pt-tw tbody tr { animation: ppIn .25s ease both; }
.pt-none { display: flex; align-items: center; gap: 10px; padding: 20px 14px; font-size: 12px; color: var(--muted); } .pt-none .pi { width: 18px; height: 18px; opacity: .7; flex: 0 0 auto; }

/* правая колонка */
.pt-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; }
.pt-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.pt-card > header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .pt-card > header span { font-size: 11px; color: var(--muted); }
.pt-ot { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 9px; background: var(--panel-2); margin-bottom: 12px; }
.pt-ot button { position: relative; z-index: 1; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: color .2s; }
.pt-ot button.on { color: var(--text); }
.pt-ot > i { position: absolute; left: 3px; top: 3px; height: 28px; border-radius: 7px; background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px var(--line); transition: transform .28s cubic-bezier(.3, .9, .3, 1.1), width .28s; }
.pt-f { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.pt-f > span, .pt-br label > span { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.pt-f > span em { font-style: normal; margin-left: auto; font: 10.5px var(--mono); color: var(--muted); }
.pt-f > span em.pt-pick { font-family: var(--sans); color: var(--accent); display: inline-flex; align-items: center; gap: 4px; } .pt-pick .pi { width: 11px; height: 11px; }
.pt-qi { display: grid; grid-template-columns: 32px 1fr 32px; gap: 6px; } .pt-qi .btn { border: 1px solid var(--line); font-size: 16px; width: 32px; } .pt-qi .input { text-align: center; font: 650 14.5px var(--mono); width: 100%; }
.pt-qi .input.pulse { animation: ptPulseIn .7s ease-out; }
@keyframes ptPulseIn { 0% { box-shadow: 0 0 0 3px var(--accent); border-color: var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
.pt-qb { display: flex; gap: 4px; } .pt-qb .chip { flex: 1 1 0; padding: 0; font: 11px var(--mono); height: 26px; min-width: 0; }
.pt-br { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pt-br label { display: flex; flex-direction: column; gap: 5px; transition: opacity .15s; } .pt-br label.off { opacity: .55; }
.pt-br .input { width: 100%; font-family: var(--mono); height: 32px; } .pt-br .input:disabled { opacity: .5; }
.pt-br input[type="checkbox"] { accent-color: var(--accent); width: 13px; height: 13px; margin: 0; }
.pt-risk { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.pt-risk b { font: 650 12px var(--mono); color: var(--text); } .pt-risk b.dn { color: var(--down); } .pt-risk .chip { height: 22px; padding: 0 7px; font-size: 11px; }
.pt-bs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.pt-bs button { position: relative; height: 54px; border-radius: 10px; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; font: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2); transition: transform .08s, filter .15s, opacity .2s; }
.pt-bs button:hover { filter: brightness(1.08); } .pt-bs button:active { transform: scale(.975); }
.pt-bs span { font-size: 13px; font-weight: 700; } .pt-bs b { font: 600 11.5px var(--mono); opacity: .9; }
.pt-bs i { position: absolute; top: 6px; right: 7px; font-style: normal; font: 600 9px var(--mono); opacity: .55; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; }
.pt-buy { background: var(--up); } .pt-sell { background: var(--down); }
.pt-bs button.dim { opacity: .42; filter: saturate(.5); }
.pt-bs button.nope { animation: ptNope .4s ease; }
@keyframes ptNope { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.pt-why { margin: 8px 0 0; font-size: 11.5px; color: var(--accent); display: none; align-items: center; gap: 6px; } .pt-why.on { display: flex; }
.pt-pos { border-left: 3px solid var(--blue); animation: ppIn .3s ease both; } .pt-pos.long { border-left-color: var(--up); } .pt-pos.short { border-left-color: var(--down); }
.pt-pos header > span:not(.pt-side-t) { font: 11.5px var(--mono); color: var(--text-2); } .pt-pos header b { font: 700 15px var(--mono); padding: 0 3px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.pt-pk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pt-pk > div { display: flex; flex-direction: column; } .pt-pk span { font-size: 10.5px; color: var(--muted); } .pt-pk b { font: 650 12.5px var(--mono); }
.pt-pa { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; } .pt-pa .btn { height: 30px; padding: 0 6px; font-size: 12px; justify-content: center; }
.pt-flat { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); font-weight: 650; }
.pt-flat i { font-style: normal; font: 600 9.5px var(--mono); opacity: .6; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; margin-left: 4px; }
.pt-rules header b { font-size: 13px; }
.pt-m2 { padding: 8px 0; border-bottom: 1px solid var(--line-soft); } .pt-m2:last-child { border-bottom: 0; padding-bottom: 0; }
.pt-mh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .pt-mh span { font-size: 12px; color: var(--text-2); }
.pt-mh b { font: 650 12.5px var(--mono); font-variant-numeric: tabular-nums; } .pt-mh b small { font-size: 11px; color: var(--muted); font-weight: 500; }
.pt-mb { height: 5px; border-radius: 3px; background: var(--panel-2); margin: 6px 0 4px; overflow: hidden; }
.pt-mb i { display: block; height: 100%; border-radius: 3px; transition: width .5s cubic-bezier(.2, .8, .2, 1), background .3s; }
.pt-m2 em { font-style: normal; font-size: 11px; color: var(--muted); }
.pt-m2.goal .pt-mb i { background: var(--accent); } .pt-m2.good .pt-mb i { background: var(--up); }
.pt-m2.safe .pt-mb i { background: var(--text-2); } .pt-m2.warn .pt-mb i { background: var(--accent); }
.pt-m2.bad .pt-mb i { background: var(--down); animation: ptDanger 1s ease-in-out infinite; } .pt-m2.bad .pt-mh b { color: var(--down); }
@keyframes ptDanger { 50% { opacity: .5; } }
.pt-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.pt-demo > div { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 9px; background: var(--panel-2); }
.pt-demo span { font-size: 10.5px; color: var(--muted); } .pt-demo b { font: 700 15px var(--mono); } .pt-demo i { font-style: normal; font-size: 11px; color: var(--text-2); }
.pt-boot { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; color: var(--text-2); text-align: center; padding: 30px; animation: ppFade .3s ease both; }
.pt-boot.err > .pi { width: 36px; height: 36px; color: var(--down); } .pt-boot h3 { margin: 0; color: var(--text); } .pt-boot p { margin: 0; max-width: 560px; line-height: 1.6; } .pt-boot p.m { font-size: 12.5px; color: var(--muted); }
.pt-bootb { display: flex; gap: 8px; margin-top: 8px; }
@media (max-width: 1150px) { .pt-main { grid-template-columns: 1fr; } .pt { height: auto; } .pt-cv { min-height: 420px; } .pt-keys { display: none; } }
@media (max-width: 1400px) { .pt-b span { display: none; } .pt-b { padding: 0 9px; } }

/* окна итогов */
.pt-m { width: min(500px, calc(100vw - 40px)); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 28px 28px 0; display: flex; flex-direction: column; align-items: center; text-align: center;
  transform: translateY(14px) scale(.97); opacity: 0; transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), opacity .2s; position: relative; overflow: hidden; }
.tj-ov.on .pt-m { transform: none; opacity: 1; }
.pt-mi { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--text-2); animation: ptPop .5s cubic-bezier(.2, .9, .3, 1.5) .1s both; }
.pt-mi .pi { width: 26px; height: 26px; } @keyframes ptPop { from { transform: scale(.4); opacity: 0; } }
.pt-m.ok .pt-mi { background: color-mix(in srgb, var(--up) 16%, transparent); color: var(--up); box-shadow: 0 0 0 8px color-mix(in srgb, var(--up) 6%, transparent); }
.pt-m.bad .pt-mi { background: color-mix(in srgb, var(--down) 16%, transparent); color: var(--down); box-shadow: 0 0 0 8px color-mix(in srgb, var(--down) 6%, transparent); }
.pt-m h2 { margin: 14px 0 4px; font-size: 21px; letter-spacing: -.015em; }
.pt-mr { margin: 6px 0 0; color: var(--down); font-weight: 650; } .pt-md { margin: 6px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.pt-mk { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 18px 0 0; width: 100%; border-radius: 11px; overflow: hidden; background: var(--line-soft); border: 1px solid var(--line-soft); }
.pt-mk > div { background: var(--panel-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; text-align: left; } .pt-mk span { font-size: 11px; color: var(--muted); } .pt-mk b { font: 700 16px var(--mono); }
.pt-m footer { display: flex; justify-content: center; gap: 8px; width: calc(100% + 56px); margin: 22px -28px 0; padding: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pt-cert { position: relative; overflow: hidden; width: 100%; margin-top: 16px; padding: 18px 20px; border-radius: 14px; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--c) 50%, var(--line)); background: linear-gradient(150deg, color-mix(in srgb, var(--c) 14%, var(--panel)), var(--panel) 70%); }
.pt-cert > span { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.pt-cert > b { grid-column: 1 / -1; font-size: 17px; } .pt-cert > i { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.pt-cert > div { display: flex; flex-direction: column; } .pt-cert em { font-style: normal; font-size: 10.5px; color: var(--muted); } .pt-cert strong { font: 700 16px var(--mono); }
.pt-cert small { grid-column: 1 / -1; font-size: 10px; color: var(--muted); margin-top: 6px; }
.pt-confetti { position: fixed; inset: 0; z-index: 500; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .pp *, .pt-ov * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
[data-motion="off"] .pp *, [data-motion="off"] .pt-ov * { animation: none !important; transition: none !important; }
/* панель графика: индикаторы, тип графика, рисование */
.pt-tb { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; transition: all .15s; }
.pt-tb:hover { color: var(--text); border-color: color-mix(in srgb, var(--text-2) 50%, var(--line)); background: var(--panel-2); }
.pt-tb .pi { width: 14px; height: 14px; } .pt-tb em { font-style: normal; font: 600 10px var(--mono); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent-sf); color: var(--accent); display: grid; place-items: center; }
.pt-tb em:empty { display: none; }
.pt-ck button { padding: 0 6px; display: grid; place-items: center; } .pt-ck svg { width: 15px; height: 15px; }
.pt-db { display: inline-flex; align-items: center; gap: 2px; padding-left: 8px; border-left: 1px solid var(--line-soft); }
.pt-db .btn { height: 28px; min-width: 28px; padding: 0 5px; border-radius: 7px; } .pt-db .btn.icon { width: 28px; } .pt-db svg { width: 15px; height: 15px; }
.pt-ct { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .pt-ct::-webkit-scrollbar { display: none; }
.pt-leg { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pt-lg { position: absolute; left: 8px; display: flex; flex-direction: column; gap: 2px; max-width: calc(100% - 100px); }
.pt-lg.main { top: 26px; }
.pt-li { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; height: 20px; padding: 0 4px 0 6px; border-radius: 6px; font-size: 11.5px; color: var(--text-2); pointer-events: auto; white-space: nowrap; background: color-mix(in srgb, var(--panel) 72%, transparent); transition: background .15s; }
.pt-li:hover { background: var(--panel-2); }
.pt-li > i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.pt-li > b { font-weight: 600; color: var(--text); cursor: pointer; } .pt-li > span { font: 11px var(--mono); font-variant-numeric: tabular-nums; }
.pt-li > em { display: inline-flex; gap: 1px; opacity: 0; transition: opacity .15s; font-style: normal; }
.pt-li:hover > em { opacity: 1; }
.pt-li > em button { width: 18px; height: 18px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; display: grid; place-items: center; }
.pt-li > em button:hover { background: var(--panel); color: var(--text); }
.pt-li.off { opacity: .55; } .pt-li.off > b { text-decoration: line-through; }
.pt-indm { width: min(980px, calc(100vw - 40px)); height: min(720px, calc(100vh - 60px)); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden;
  transform: translateY(12px) scale(.98); opacity: 0; transition: transform .3s cubic-bezier(.2, .9, .3, 1.15), opacity .2s; }
.tj-ov.on .pt-indm { transform: none; opacity: 1; }
.pt-indm > header { display: flex; align-items: baseline; gap: 12px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.pt-indm > header h2 { margin: 0; font-size: 16px; } .pt-indm > header span { font-size: 12px; color: var(--muted); flex: 1 1 auto; }
.pt-indb { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 16px; }

/* автопилот */
.pt-pilot { border-left: 3px solid var(--violet); }
.pt-pilot > header > div { display: flex; flex-direction: column; min-width: 0; } .pt-pilot > header b { font-size: 13px; } .pt-pilot > header div span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-pli { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--violet) 15%, transparent); color: var(--violet); flex: 0 0 auto; }
.pt-pli .pi { width: 16px; height: 16px; }
.pt-sw { width: 34px; height: 20px; border-radius: 10px; border: 0; background: var(--line); position: relative; cursor: pointer; transition: background .2s; flex: 0 0 auto; }
.pt-sw i { position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .22s cubic-bezier(.3, .9, .3, 1.2); }
.pt-sw.on { background: var(--violet); } .pt-sw.on i { transform: translateX(14px); }
.pt-pls { display: flex; align-items: center; gap: 7px; font-size: 12px; margin-bottom: 6px; } .pt-pls > span:last-child { font: 11px var(--mono); color: var(--muted); }
.pt-pls > i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.pt-pls.on > i { background: var(--violet); animation: ppPulse 2s ease-in-out infinite; --c: var(--violet); } .pt-pls.halt > i { background: var(--accent); } .pt-pls.off { color: var(--muted); }
.pt-plr { display: flex; flex-direction: column; gap: 2px; max-height: 150px; overflow: auto; }
.pt-plr > div { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; padding: 3px 0; border-top: 1px solid var(--line-soft); }
.pt-plr span { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-plr b { font: 600 11px var(--mono); color: var(--violet); }
.pt-pln { margin: 8px 0 0; font-size: 11px; color: var(--accent); display: flex; gap: 6px; line-height: 1.45; } .pt-pln .pi { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }
.pt-plh { margin: 8px 0 0; font-size: 10.5px; line-height: 1.45; color: var(--muted); }
.pt-who { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 10.5px; font-weight: 600; background: var(--panel-2); color: var(--text-2); }
.pt-who.me { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.pt-who.bot { background: color-mix(in srgb, var(--violet) 15%, transparent); color: var(--violet); }
.pt-tw tr.bot td { background: color-mix(in srgb, var(--violet) 5%, transparent); }
.pt-top > .btn.pt-endb { width: auto; white-space: nowrap; display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent); gap: 6px; }

/* поделиться */
.pp-share { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 11px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); background: transparent; color: var(--text); cursor: pointer; text-align: left; font: inherit; transition: background .15s, border-color .15s; }
.pp-share:hover { background: var(--accent-sf); border-style: solid; }
.pp-share .pi { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; } .pp-share span { display: flex; flex-direction: column; } .pp-share b { font-size: 12.5px; } .pp-share i { font-style: normal; font-size: 11px; color: var(--muted); }
.pt-shf { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 16px; text-align: left; }
.pt-shf label { display: flex; flex-direction: column; gap: 5px; } .pt-shf label > span { font-size: 11.5px; color: var(--text-2); }
.pt-shf .input { width: 100%; max-width: none; } .pt-shf textarea.input { height: auto; padding: 8px 10px; resize: vertical; font: inherit; }
.pt-shf .pp-in { display: block; } .pt-shf .pp-in .input { padding-right: 290px; } .pt-shf .pp-in em { font-size: 10.5px; }
.pt-shp { margin: 12px 0 0; width: 100%; display: flex; gap: 8px; text-align: left; font-size: 11.5px; line-height: 1.5; color: var(--text-2); padding: 9px 11px; border-radius: 9px; background: var(--panel-2); }
.pt-shp .pi { width: 14px; height: 14px; color: var(--accent); flex: 0 0 auto; margin-top: 1px; } .pt-shp.warn { background: color-mix(in srgb, var(--accent) 9%, var(--panel-2)); }
.pt-lnk { display: flex; gap: 8px; width: 100%; margin-top: 14px; } .pt-lnk .input { flex: 1 1 auto; font-family: var(--mono); font-size: 12px; max-width: none; } .pt-lnk .btn { gap: 6px; }
.pt-lnk .btn .pi { width: 14px; height: 14px; }
.pp-shs { display: flex; flex-direction: column; gap: 6px; }
.pp-sh2 { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px 190px; align-items: center; gap: 18px; padding: 12px 14px 12px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; position: relative; overflow: hidden;
  animation: ppIn .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d) * 25ms); transition: border-color .15s, background .15s; }
.pp-sh2::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); } .pp-sh2.closed::before { background: var(--muted); }
.pp-sh2:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--panel-2) 60%, var(--panel)); }
.pp-sh2a { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pp-sh2a > b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sh2n { display: flex; flex-direction: column; } .pp-sh2n b { font: 700 18px var(--mono); } .pp-sh2n span { font-size: 11px; color: var(--muted); }
.pp-sh2x { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .pp-sh2x .btn .pi { width: 13px; height: 13px; }
.pp-rrow { cursor: pointer; } .pp-rrow td { transition: background .12s; } .pp-rr { display: block; font-style: normal; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.pp-who2 { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 9px; background: var(--panel-2); font-size: 12.5px; }
.pp-who2 .pi { width: 15px; height: 15px; color: var(--accent); } .pp-who2 a { color: var(--blue); text-decoration: none; } .pp-who2 span { color: var(--muted); font-size: 11.5px; }
.pp-sent { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--up); } .pp-sent .pi { width: 15px; height: 15px; }
.pp-logw { max-height: 460px; }
.pp-ph .pp-bk { margin-bottom: 10px; }

/* стратегия в настройке */
.pp-strats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.pp-st2 { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; text-align: left; font: inherit; transition: border-color .15s, background .15s; min-width: 0; }
.pp-st2:hover { border-color: color-mix(in srgb, var(--violet) 50%, var(--line)); }
.pp-st2 > span:last-child { display: flex; flex-direction: column; min-width: 0; } .pp-st2 b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-st2 i { font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sti { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--panel-2); color: var(--text-2); flex: 0 0 auto; } .pp-sti .pi { width: 15px; height: 15px; }
.pp-sti.bot { background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet); }
.pp-st2.on { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 8%, var(--panel)); box-shadow: inset 0 0 0 1px var(--violet); }
.pp-stinfo { margin-top: 12px; padding: 12px 14px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--violet) 35%, var(--line)); background: color-mix(in srgb, var(--violet) 5%, var(--panel)); animation: ppIn .3s ease both; }
.pp-stinfo > div { display: flex; align-items: baseline; gap: 8px; } .pp-stinfo > div b { font: 700 20px var(--mono); color: var(--violet); } .pp-stinfo > div span { font-size: 12.5px; color: var(--text-2); }
.pp-stinfo p { margin: 8px 0 0; display: flex; gap: 8px; font-size: 12px; line-height: 1.55; color: var(--text-2); } .pp-stinfo p .pi { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; color: var(--violet); }
.pp-stinfo .pp-stwarn { color: var(--accent); } .pp-stinfo .pp-stwarn .pi { color: var(--accent); }
.pp-stinfo ul { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: var(--text-2); line-height: 1.6; }

/* нарисованный рынок */
.pp-dtools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pp-dtpl { display: flex; flex-wrap: wrap; gap: 5px; } .pp-dtpl .chip { height: 26px; font-size: 11.5px; }
.pp-dtools .btn.tiny .pi { width: 13px; height: 13px; } .pp-dtools .btn.on { color: var(--accent); background: var(--accent-sf); border-color: transparent; }
.pp-dcv { position: relative; height: 300px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; cursor: crosshair; touch-action: none; }
.pp-dcv canvas { position: absolute; inset: 0; display: block; }
.pp-dhint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; font-size: 12.5px; color: var(--text-2);
  background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line); pointer-events: none; transition: opacity .3s; backdrop-filter: blur(4px); }
.pp-dhint .pi { width: 15px; height: 15px; color: var(--accent); } .pp-dcv.used .pp-dhint { opacity: 0; }
.pp-dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; margin-top: 12px; }
.pp-dgrid .pp-gp.pp-gpn { grid-template-columns: minmax(0, 1fr) 140px; } .pp-dgrid .pp-in .input { padding-right: 44px; }

/* экзамен: человек пришёл по ссылке */
body.pp-exam #rail { display: none !important; }
.pp-examp { max-width: 900px; }
.pp-exh { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 22px 24px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); box-shadow: inset 0 3px 0 var(--accent); }
.pp-exh h1 { margin: 0; font-size: 26px; letter-spacing: -.02em; } .pp-exn { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2); white-space: pre-wrap; }
.pp-exk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; width: 100%; margin-top: 6px; border-radius: 11px; overflow: hidden; background: var(--line-soft); border: 1px solid var(--line-soft); }
.pp-exk > div { background: var(--panel-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .pp-exk span { font-size: 11px; color: var(--muted); } .pp-exk b { font-size: 13px; }
.pp-exf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .pp-exf label { display: flex; flex-direction: column; gap: 5px; } .pp-exf label > span { font-size: 11.5px; color: var(--text-2); } .pp-exf .input { width: 100%; max-width: none; }
.pp-exd { border-color: color-mix(in srgb, var(--up) 40%, var(--line)); }
.pp-start[disabled] { opacity: .5; pointer-events: none; }
@media (max-width: 1100px) { .pp-dgrid, .pp-exk, .pp-exf { grid-template-columns: 1fr; } .pp-sh2 { grid-template-columns: minmax(0, 1fr) 70px 70px; } .pp-sh2x { display: none; } }
/* ── /Prop test ── */

/* ── Matana AI в анализе ── */
.ax { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 100%; }
.ax svg.ax-ic { width: 15px; height: 15px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ax .btn svg.ax-ic, .ax-m .btn svg.ax-ic { stroke: currentColor; fill: none; }
.ax .btn.sm { height: 28px; padding: 0 10px; font-size: 11.5px; gap: 6px; }
.ax .btn { gap: 7px; }
.ax-nav { border-right: 1px solid var(--line); background: var(--panel); padding: 14px 10px 16px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.ax-ng { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 6px; }
.ax-ng:first-child { padding-top: 2px; }
.ax-ni { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer; text-align: left; position: relative; transition: background .15s, color .15s; }
.ax-ni:hover { background: var(--panel-2); color: var(--text); }
.ax-ni.on { background: var(--accent-sf); color: var(--text); font-weight: 600; }
.ax-ni.on::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.ax-ni.on .ax-ic { color: var(--accent); }
.ax-ni span { flex: 1 1 auto; }
.ax-ni em { font-style: normal; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center;
  background: var(--panel-2); color: var(--text-2); }
.ax-ni em.bad { background: color-mix(in srgb, var(--down) 18%, transparent); color: var(--down); }
.ax-ni em.live { min-width: 8px; width: 8px; height: 8px; padding: 0; background: var(--accent); animation: axPulse 1.4s ease-in-out infinite; }
.ax-ni em.gA, .ax-ni em.gB { background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); }
.ax-ni em.gC { background: var(--accent-sf); color: var(--accent); }
.ax-ni em.gD, .ax-ni em.gF { background: color-mix(in srgb, var(--down) 18%, transparent); color: var(--down); }
.ax-nfoot { margin-top: auto; padding: 16px 6px 0; display: flex; flex-direction: column; gap: 12px; }
.ax-nfoot p { margin: 0; font-size: 10.5px; line-height: 1.6; color: var(--muted); padding: 0 4px; }
.ax-st { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); }
.ax-st > i { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex: 0 0 auto; background: var(--muted); }
.ax-st > i.on { background: var(--up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 22%, transparent); animation: axPulse 2s ease-in-out infinite; }
.ax-st > i.idle { background: var(--blue); }
.ax-st > i.off { background: var(--down); }
.ax-st > i.wait { background: var(--accent); animation: axPulse 1s ease-in-out infinite; }
.ax-st span { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 650; }
.ax-st u { text-decoration: none; font-size: 10.5px; font-weight: 400; color: var(--muted); line-height: 1.45; }
.ax-st code { font-family: var(--mono); font-size: 10px; color: var(--text-2); }
.ax-main { overflow: auto; min-width: 0; padding: 22px 28px 40px; }
.ax-sec { max-width: 1440px; display: flex; flex-direction: column; gap: 16px; }
.ax-sec > * { animation: axIn .45s cubic-bezier(.2, .7, .2, 1) both; }
.ax-sec > *:nth-child(2) { animation-delay: .04s; } .ax-sec > *:nth-child(3) { animation-delay: .08s; } .ax-sec > *:nth-child(n+4) { animation-delay: .12s; }
.ax-sec[data-s="chat"] { max-width: 1040px; height: 100%; }
.ax-eye { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ax-eye .ax-ic { width: 13px; height: 13px; }

/* сфера Matana AI */
.ax-orb { position: relative; width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; }
.ax-orb > i { position: absolute; inset: 0; border-radius: 50%; }
.ax-orb > i:nth-child(1) { background: conic-gradient(from 0deg, var(--accent), #d95926, #a78bfa, #3987e5, var(--accent)); filter: blur(.3px); }
.ax-orb > i:nth-child(2) { inset: 2px; background: var(--panel); }
.ax-orb > i:nth-child(3) { inset: 6px; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%),
  radial-gradient(circle at 70% 75%, color-mix(in srgb, #3987e5 40%, transparent), transparent 62%), var(--panel-2); }
.ax-orb > b { position: relative; color: var(--accent); display: grid; place-items: center; }
.ax-orb > b .ax-ic { width: 18px; height: 18px; }
.ax-orb.sm { width: 34px; height: 34px; } .ax-orb.sm > b .ax-ic { width: 15px; height: 15px; }
.ax-orb.xs { width: 22px; height: 22px; } .ax-orb.xs > i:nth-child(3) { inset: 4px; } .ax-orb.xs > b .ax-ic { width: 11px; height: 11px; }
.ax-orb.lg { width: 72px; height: 72px; } .ax-orb.lg > i:nth-child(3) { inset: 8px; } .ax-orb.lg > b .ax-ic { width: 28px; height: 28px; }
.ax-orb.live > i:nth-child(1) { animation: axSpin 1.4s linear infinite; }
.ax-orb.live > i:nth-child(3) { animation: axBreath 1.1s ease-in-out infinite; }
.ax-orb.lg:not(.live) > i:nth-child(1) { animation: axSpin 8s linear infinite; }
.ax-orb.live::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); animation: axRing 1.6s ease-out infinite; }

/* шапка */
.ax-hero { position: relative; overflow: hidden; display: flex; gap: 28px; align-items: center; justify-content: space-between; padding: 26px 28px; border-radius: 18px;
  border: 1px solid var(--line); background:
  radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 55%),
  radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, #7c5cff 12%, transparent) 0%, transparent 60%), var(--panel); }
.ax-glow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ax-glow i { position: absolute; width: 380px; height: 380px; border-radius: 50%; filter: blur(70px); opacity: .22; }
.ax-glow i:nth-child(1) { background: #7c5cff; right: -120px; top: -180px; animation: axDrift 14s ease-in-out infinite alternate; }
.ax-glow i:nth-child(2) { background: var(--accent); right: 160px; bottom: -240px; animation: axDrift 18s ease-in-out infinite alternate-reverse; }
.ax-hl { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ax-hl h1 { margin: 0; font-size: 26px; font-weight: 720; letter-spacing: -.02em; line-height: 1.15;
  background: linear-gradient(90deg, var(--text), color-mix(in srgb, var(--text) 55%, var(--accent))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ax-hl > p { margin: 0; max-width: 820px; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.ax-hr { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 16px; }
.ax-kp { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 10px; }
.ax-kp div { display: flex; flex-direction: column; gap: 4px; min-width: 88px; }
.ax-kp i { font-style: normal; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ax-kp b { font: 650 21px/1.1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ax b.pos, .ax u.pos { color: var(--up); } .ax b.neg, .ax u.neg { color: var(--down); }
.ax-cta { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; border: 0; cursor: pointer; text-align: left; padding: 10px 20px 10px 10px; border-radius: 14px;
  color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-d));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .14s ease, box-shadow .14s ease; }
.ax-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); transform: translateX(-100%); animation: axShine 4s ease-in-out infinite; }
.ax-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.22); }
.ax-cta[disabled] { opacity: .7; cursor: default; transform: none; }
.ax-cta .ax-orb > i:nth-child(2) { background: color-mix(in srgb, var(--accent-d) 80%, #000); }
.ax-cta .ax-orb > i:nth-child(3) { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.4), transparent 60%), color-mix(in srgb, var(--accent-d) 70%, #000); }
.ax-cta .ax-orb > b { color: #fff; }
.ax-cta span { display: flex; flex-direction: column; gap: 1px; }
.ax-cta b { font-size: 14px; font-weight: 720; }
.ax-cta i { font-style: normal; font-size: 11px; opacity: .82; }
.ax-cta.sm { padding: 6px 14px 6px 6px; border-radius: 11px; gap: 9px; }
.ax-cta.sm b { font-size: 12.5px; }

/* карточки */
.ax-p { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; min-width: 0; }
.ax-p > header { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; margin-bottom: 14px; }
.ax-p h3 { margin: 0; font-size: 14.5px; font-weight: 660; letter-spacing: -.005em; }
.ax-p header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; max-width: 820px; }
.ax-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ax-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ax-seg { float: none; flex: 0 0 auto; }
.ax-none { color: var(--muted); font-size: 12px; padding: 6px 0; }
.ax-err { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; font-size: 12.5px;
  border: 1px solid color-mix(in srgb, var(--down) 35%, var(--line)); background: color-mix(in srgb, var(--down) 8%, var(--panel)); color: var(--text); }
.ax-err .ax-ic { color: var(--down); }
.ax-disc { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line); color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.ax-disc .ax-ic { color: var(--text-2); margin-top: 1px; }
.ax-f3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ax-f3 > div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 3px; align-items: center; padding: 6px 4px; }
.ax-f3 .ax-ic { grid-row: span 2; width: 18px; height: 18px; padding: 8px; box-sizing: content-box; border-radius: 10px; background: var(--accent-sf); color: var(--accent); }
.ax-f3 b { font-size: 13px; } .ax-f3 span { font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* ход ответа */
.ax-think { display: flex; gap: 14px; align-items: center; }
.ax-think > div:not(.ax-orb) { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ax-think b { font-size: 13px; }
.ax-think span { font-size: 11.5px; color: var(--muted); }
.ax-pb { height: 4px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.ax-pb i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), #d95926, #a78bfa); background-size: 200% 100%; animation: axFlow 2s linear infinite; transition: width .35s ease; }
.ax-pb.big { height: 6px; margin-top: 10px; }
.ax-live { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent), 0 12px 40px color-mix(in srgb, var(--accent) 8%, transparent); }
.ax-lt { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--text); min-height: 0; }
.ax-lt:not(:empty)::after, .ax-bub[data-live]:not(:empty)::after { content: ''; display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--accent); animation: axCaret 1s steps(2) infinite; }
.ax-mini { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.ax-spin { display: inline-block; width: 11px; height: 11px; margin-right: 8px; vertical-align: -1px; border-radius: 50%; border: 2px solid var(--panel-2); border-top-color: var(--accent); animation: axSpin .8s linear infinite; }

/* отчёт */
.ax-rep { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--panel)), var(--panel) 40%); }
.ax-sum p { margin: 8px 0 0; font-size: 16px; line-height: 1.6; letter-spacing: -.005em; max-width: 1080px; }
.ax-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ax-col { border-radius: 12px; border: 1px solid var(--line); background: var(--panel); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ax-col h3 { margin: 0 0 2px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ax-col.ok h3 { color: var(--up); } .ax-col.bad h3 { color: var(--down); } .ax-col.acc h3 { color: var(--accent); }
.ax-col.ok { border-top: 2px solid var(--up); } .ax-col.bad { border-top: 2px solid var(--down); } .ax-col.acc { border-top: 2px solid var(--accent); }
.ax-it { display: flex; flex-direction: column; gap: 4px; padding: 10px 11px; border-radius: 10px; background: var(--panel-2); }
.ax-it b { font-size: 12.5px; font-weight: 650; }
.ax-it span { font-size: 12px; color: var(--text-2); line-height: 1.55; }
.ax-it .btn { align-self: flex-start; margin-top: 4px; border: 1px solid var(--line); background: var(--panel); }
.ax-it .btn:hover { border-color: var(--accent); color: var(--accent); }
.ax-rule { flex-direction: row; align-items: flex-start; gap: 10px; }
.ax-rule em { font-style: normal; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--accent-sf); color: var(--accent); }
.ax-risk { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
.ax-risk .ax-ic { color: var(--accent); width: 18px; height: 18px; margin-top: 1px; }
.ax-risk div { display: flex; flex-direction: column; gap: 3px; } .ax-risk b { font-size: 12.5px; } .ax-risk span { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.ax-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ax-acts .btn { border: 1px solid var(--line); background: var(--panel); }

/* находки */
.ax-fl { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.ax-fc { border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); padding: 12px 13px; display: flex; flex-direction: column; gap: 6px;
  border-left: 3px solid var(--muted); animation: axIn .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d) * 35ms); }
.ax-fc.bad { border-left-color: var(--down); } .ax-fc.warn { border-left-color: var(--accent); } .ax-fc.ok { border-left-color: var(--up); } .ax-fc.info { border-left-color: var(--blue); }
.ax-fh { display: flex; align-items: center; gap: 8px; } .ax-fh b { font-size: 12.5px; }
.ax-fc.bad .ax-fh .ax-ic { color: var(--down); } .ax-fc.warn .ax-fh .ax-ic { color: var(--accent); } .ax-fc.ok .ax-fh .ax-ic { color: var(--up); } .ax-fc.info .ax-fh .ax-ic { color: var(--blue); }
.ax-fc p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-2); }
.ax-fc .btn { align-self: flex-start; border: 1px solid var(--line); background: var(--panel); }
.ax-fc .btn:hover { border-color: var(--accent); color: var(--accent); }

/* столбики разрезов */
.ax-bl { display: flex; flex-direction: column; gap: 6px; }
.ax-br { display: grid; grid-template-columns: 104px minmax(0, 1fr) 96px 64px; gap: 10px; align-items: center; font-size: 12px; }
.ax-bk { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-bt { position: relative; height: 14px; }
.ax-bt i { position: absolute; top: 1px; bottom: 1px; border-radius: 4px; transform-origin: left; animation: axGrow .7s cubic-bezier(.2, .7, .2, 1) both; }
.ax-bt i[style*="right"] { transform-origin: right; }
.ax-bt i.pos { background: var(--up); } .ax-bt i.neg { background: var(--down); }
.ax-bt em { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line); }
.ax-br b { font: 600 12px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.ax-br u { text-decoration: none; color: var(--muted); font-size: 11px; text-align: right; }

/* сделки */
.ax-tw { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.ax-tbl { overflow: auto; border-radius: 10px; border: 1px solid var(--line-soft); }
.ax-tbl table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ax-tbl th { position: sticky; top: 0; z-index: 1; background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; text-align: left; padding: 8px 10px; white-space: nowrap; }
.ax-tbl td { padding: 8px 10px; border-top: 1px solid var(--line-soft); white-space: nowrap; }
.ax-tbl .n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ax-tbl td u { text-decoration: none; color: var(--muted); font-size: 11px; }
.ax-tbl tbody tr[data-tr], .ax-tbl tbody tr[data-jt] { cursor: pointer; transition: background .12s; }
.ax-tbl tbody tr[data-tr]:hover, .ax-tbl tbody tr[data-jt]:hover { background: var(--panel-2); }
.ax-tbl tbody tr.on { background: var(--accent-sf); box-shadow: inset 3px 0 0 var(--accent); }
.ax-tl .ax-tbl { max-height: 560px; }
.ax-pg { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 10px; font-size: 12px; color: var(--muted); }
.ax-td { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; }
.ax-td > header { margin-bottom: 0; align-items: center; }
.ax-big { font: 700 26px/1.1 var(--mono) !important; letter-spacing: -.02em; margin-top: 4px !important; }
.ax-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; }
.ax-kv div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ax-kv dt { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ax-kv dd { margin: 0; font-size: 12.5px; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-note { font-size: 12px; color: var(--text-2); line-height: 1.55; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); }
.ax-ans { padding: 14px; border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--panel-2)), var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); }
.ax-md { font-size: 13px; line-height: 1.65; color: var(--text); }
.ax-md p { margin: 8px 0 0; } .ax-md p:first-child { margin-top: 6px; }
.ax-md ul, .ax-md ol { margin: 8px 0 0; padding-left: 20px; } .ax-md li { margin: 3px 0; }
.ax-md h4 { margin: 12px 0 4px; font-size: 13px; }
.ax-md code { font-family: var(--mono); font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--panel-2); }

/* AI-тест */
.ax-steps { display: flex; align-items: center; gap: 0; padding: 4px 2px; }
.ax-steps > div { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.ax-steps > div i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 1px solid var(--line); background: var(--panel); transition: all .3s; }
.ax-steps > div.on { color: var(--text); font-weight: 600; }
.ax-steps > div.on i { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-sf); animation: axPulse 1.4s ease-in-out infinite; }
.ax-steps > div.done { color: var(--text-2); }
.ax-steps > div.done i { background: var(--up); border-color: var(--up); color: #fff; }
.ax-steps > div.done i .ax-ic { width: 12px; height: 12px; stroke-width: 2.2; }
.ax-steps > em { flex: 1 1 auto; height: 1px; min-width: 20px; margin: 0 12px; background: var(--line); }
.ax-plan, .ax-und, .ax-concl { padding: 16px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--panel)), var(--panel) 60%); }
.ax-plan p, .ax-und p, .ax-concl p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--text-2); max-width: 1100px; }
.ax-und h3, .ax-concl h3 { margin: 8px 0 0; font-size: 17px; font-weight: 680; letter-spacing: -.01em; }
.ax-concl ul { margin: 10px 0 0; padding-left: 18px; color: var(--text-2); font-size: 12.5px; line-height: 1.6; }
.ax-chs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ax-ch { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-family: var(--mono); background: var(--panel-2); border: 1px solid var(--line); }
.ax-ch .ax-ic { color: var(--accent); width: 13px; height: 13px; }
.ax-cmp td b { display: block; } .ax-cmp td u { display: block; font-size: 10.5px; margin-top: 2px; }
.ax-cmp td:first-child u { font-family: var(--mono); white-space: normal; max-width: 360px; }
.ax-cmp tr.base td { background: color-mix(in srgb, var(--blue) 6%, transparent); }
.ax-cmp tr.best td { background: color-mix(in srgb, var(--up) 8%, transparent); }
.ax-cmp tr.best td:first-child { box-shadow: inset 3px 0 0 var(--up); }
.ax-cmp tr.wait td { color: var(--muted); }
.ax-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2); }
.ax-chip .ax-ic { width: 12px; height: 12px; stroke-width: 2; }
.ax-chip.ok { color: var(--up); border-color: color-mix(in srgb, var(--up) 35%, var(--line)); background: color-mix(in srgb, var(--up) 9%, var(--panel)); }
.ax-chip.warn { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--accent-sf); }
.ax-chip.bad { color: var(--down); border-color: color-mix(in srgb, var(--down) 35%, var(--line)); background: color-mix(in srgb, var(--down) 9%, var(--panel)); }
.ax-why { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; margin-top: 12px; }
.ax-why div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); font-size: 12px; }
.ax-why span { color: var(--text-2); line-height: 1.5; } .ax-why em { font-style: normal; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ax-best { border-color: color-mix(in srgb, var(--up) 35%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--up) 6%, var(--panel)), var(--panel) 50%); }
.ax-best h3 { margin-top: 6px; font-size: 16px; }
.ax-best .ax-eye { color: var(--up); }
.ax-nobest { display: flex; gap: 12px; align-items: flex-start; }
.ax-nobest > .ax-ic { width: 18px; height: 18px; color: var(--blue); margin-top: 2px; }
.ax-nobest div { display: flex; flex-direction: column; gap: 4px; } .ax-nobest b { font-size: 13px; } .ax-nobest span { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.ax-eqw { position: relative; margin-top: 14px; }
.ax svg.ax-eq { display: block; width: 100%; height: auto; stroke: none; }
.ax-eq .ax-g { stroke: var(--grid); stroke-width: 1; }
.ax-eq .ax-gt { fill: var(--muted); font: 10px var(--mono); stroke: none; }
.ax-eq .ax-lb { font: 600 11px var(--sans); stroke: none; }
.ax-eq .ax-ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: axDraw 1.2s ease both; }
.ax-eq .ax-dot { stroke: var(--panel); stroke-width: 2; }
.ax-eq .ax-split { stroke: var(--muted); stroke-dasharray: 3 4; stroke-width: 1; }
.ax-eq .ax-cross { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 2 3; }
.ax-tip { position: absolute; top: 8px; min-width: 170px; pointer-events: none; padding: 8px 10px; border-radius: 9px; font-size: 11.5px; background: var(--raise); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ax-tip b { display: block; margin-bottom: 4px; font-size: 11px; color: var(--muted); }
.ax-tip div { display: flex; align-items: center; gap: 6px; } .ax-tip i { width: 8px; height: 8px; border-radius: 2px; }
.ax-tip u { text-decoration: none; margin-left: auto; font-family: var(--mono); }
.ax-mc { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ax-mc div { padding: 10px 12px; border-radius: 10px; background: var(--panel-2); display: flex; flex-direction: column; gap: 3px; }
.ax-mc i { font-style: normal; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ax-mc b { font: 650 16px var(--mono); } .ax-mc u { text-decoration: none; font-size: 11px; color: var(--muted); }
.ax-mc u.pos { color: var(--up); } .ax-mc u.neg { color: var(--down); }
.ax-hin textarea { width: 100%; box-sizing: border-box; resize: none; font: inherit; font-size: 16px; line-height: 1.5; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; outline: none; transition: border-color .15s, box-shadow .15s; }
.ax-hin textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-sf); }
.ax-hrow { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 12px; }
.ax-ex { display: flex; gap: 6px; flex-wrap: wrap; }
.ax-can { margin-top: 12px; font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.ax-hist { display: flex; flex-direction: column; gap: 6px; }
.ax-hist > button, .ax-hist > div { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--panel-2); font: inherit; font-size: 12.5px; color: var(--text); text-align: left; }
.ax-hist > button { cursor: pointer; } .ax-hist > button:hover { border-color: var(--accent); }
.ax-hist u { text-decoration: none; margin-left: auto; color: var(--muted); font-size: 11.5px; }
.ax-grade { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.ax-grade.gA, .ax-grade.gB { background: color-mix(in srgb, var(--up) 16%, transparent); color: var(--up); }
.ax-grade.gC { background: var(--accent-sf); color: var(--accent); }
.ax-grade.gD, .ax-grade.gF { background: color-mix(in srgb, var(--down) 16%, transparent); color: var(--down); }

/* экзамен */
.ax-exr { display: flex; align-items: center; gap: 22px; }
.ax-ring { position: relative; width: 132px; height: 132px; flex: 0 0 auto; }
.ax svg.ax-ring, .ax-ring svg { width: 132px; height: 132px; transform: rotate(-90deg); stroke: none; }
.ax-ring circle { fill: none; stroke-width: 9; }
.ax-ring .bg { stroke: var(--panel-2); }
.ax-ring .fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray 1s cubic-bezier(.2, .7, .2, 1); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 40%, transparent)); }
.ax-ring.gA .fg, .ax-ring.gB .fg { stroke: var(--up); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--up) 40%, transparent)); }
.ax-ring.gD .fg, .ax-ring.gF .fg { stroke: var(--down); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--down) 40%, transparent)); }
.ax-ring.run .fg { animation: axPulse 1.4s ease-in-out infinite; }
.ax-ring > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ax-ring b { font: 800 44px/1 var(--sans); letter-spacing: -.03em; animation: axPop .6s cubic-bezier(.2, .9, .3, 1.4) both; }
.ax-ring b.sm { font-size: 24px; font-family: var(--mono); }
.ax-ring i { font-style: normal; font-size: 11px; color: var(--muted); }
.ax-ring.gA b, .ax-ring.gB b { color: var(--up); } .ax-ring.gC b { color: var(--accent); } .ax-ring.gD b, .ax-ring.gF b { color: var(--down); }
.ax-chk { display: flex; flex-direction: column; gap: 6px; }
.ax-cr { display: grid; grid-template-columns: 28px minmax(0, 1fr) 240px 140px 48px; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--panel-2);
  animation: axIn .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d) * 45ms); }
.ax-ci { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }
.ax-ci .ax-ic { width: 14px; height: 14px; stroke-width: 2; }
.ax-cr.ok .ax-ci { background: color-mix(in srgb, var(--up) 15%, transparent); color: var(--up); }
.ax-cr.warn .ax-ci { background: var(--accent-sf); color: var(--accent); }
.ax-cr.bad .ax-ci { background: color-mix(in srgb, var(--down) 15%, transparent); color: var(--down); }
.ax-cr.na .ax-ci { background: var(--panel); color: var(--muted); }
.ax-cn { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ax-cn b { font-size: 12.5px; } .ax-cn u { text-decoration: none; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-cv { font: 600 12px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.ax-cw { height: 6px; border-radius: 3px; background: var(--panel); overflow: hidden; }
.ax-cw i { display: block; height: 100%; border-radius: 3px; background: var(--accent); animation: axGrow .9s cubic-bezier(.2, .7, .2, 1) both; transform-origin: left; }
.ax-cr.ok .ax-cw i { background: var(--up); } .ax-cr.bad .ax-cw i { background: var(--down); }
.ax-cr em { font-style: normal; font: 600 11.5px var(--mono); color: var(--muted); text-align: right; }

.ax-caps { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.5; color: var(--text-2); background: color-mix(in srgb, var(--down) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--down) 28%, var(--line)); }
.ax-caps .ax-ic { color: var(--down); margin-top: 1px; }

/* чат */
.ax-chat { display: flex; flex-direction: column; height: calc(100vh - 190px); min-height: 480px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow: hidden; }
.ax-chh { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, var(--panel)), var(--panel) 60%); }
.ax-chh > div:nth-child(2) { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ax-chh b { font-size: 14px; } .ax-chh span { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-msgs { flex: 1 1 auto; overflow: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; }
.ax-hello { margin: auto; max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ax-hello h2 { margin: 6px 0 0; font-size: 20px; letter-spacing: -.01em; } .ax-hello p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.ax-hello .ax-ex { justify-content: center; margin-top: 8px; }
.ax-msg { display: flex; gap: 10px; animation: axIn .3s ease both; }
.ax-msg.me { justify-content: flex-end; }
.ax-msg.me .ax-bub { max-width: 72%; background: linear-gradient(135deg, var(--accent), var(--accent-d)); color: var(--on-accent); border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.ax-av { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; color: var(--accent); background: var(--accent-sf); }
.ax-bw { max-width: 82%; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ax-msg.ai .ax-bub { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 4px 16px 16px 16px; padding: 4px 14px 10px; }
.ax-msg.ai .ax-bub:empty { display: none; }
.ax-ma { display: flex; gap: 4px; }
.ax-ma button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 11px; padding: 3px 7px; border-radius: 6px; cursor: pointer; }
.ax-ma button:hover { background: var(--panel-2); color: var(--text); }
.ax-ma .ax-ic { width: 12px; height: 12px; }
.ax-comp { display: flex; gap: 10px; align-items: flex-end; margin: 0 16px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); transition: border-color .15s, box-shadow .15s; }
.ax-comp:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-sf); }
.ax-comp textarea { flex: 1 1 auto; resize: none; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 14px; line-height: 1.5; padding: 5px 6px; max-height: 160px; }
.ax-send { width: 38px; height: 38px; border-radius: 11px; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-d)); transition: transform .12s; }
.ax-send:hover { transform: translateY(-1px); } .ax-send[disabled] { opacity: .45; cursor: default; transform: none; }
.ax-send .ax-ic { width: 16px; height: 16px; }
.ax-cdisc { padding: 8px 18px 12px; font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.5; }

/* пусто и согласие */
.ax-empty { margin: 60px auto; max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ax-empty h2 { margin: 8px 0 0; font-size: 20px; } .ax-empty p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.ax-alt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 10px; font-size: 12px; color: var(--muted); }
.ax-alt .btn { border: 1px solid var(--line); }
.ax-ov { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(5, 7, 10, .55); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; }
.ax-ov.on { opacity: 1; }
.ax-m { width: min(520px, calc(100vw - 32px)); padding: 28px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; transform: translateY(10px) scale(.98); transition: transform .25s cubic-bezier(.2, .9, .3, 1.2); }
.ax-ov.on .ax-m { transform: none; }
.ax-m h2 { margin: 6px 0 0; font-size: 20px; letter-spacing: -.01em; }
.ax-m > p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.ax-mw { display: flex; gap: 10px; text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--accent-sf); font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.ax-mw b { color: var(--text); } .ax-mw .ax-ic { color: var(--accent); width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; stroke: currentColor; fill: none; }
.ax-m .btn.primary { margin-top: 6px; height: 40px; padding: 0 22px; }

/* ролик «Как это работает» */
.ax-how { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 12px; padding: 10px 10px 10px 10px; border-radius: 12px; cursor: pointer; text-align: left; font: inherit; color: var(--text); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), color-mix(in srgb, #7c5cff 12%, var(--panel)));
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.ax-how:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 22%, transparent); }
.ax-how::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%); transform: translateX(-100%); animation: axHowShine 5s ease-in-out 1.2s infinite; pointer-events: none; }
.ax-how > span { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.ax-how > span b { font-size: 13px; font-weight: 600; } .ax-how > span em { font-style: normal; font-size: 11px; color: var(--text-2); }
.ax-how > .ax-ic { width: 14px; height: 14px; color: var(--accent); flex: 0 0 auto; }
.ax-how-o { position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 46% 54% 52% 48% / 50% 44% 56% 50%;
  background: radial-gradient(circle at 34% 30%, #fff8 0 12%, transparent 30%), conic-gradient(from 0deg, #F2A93B, #b07cff, #4f8cff, #37d6e0, #F2A93B);
  box-shadow: 0 0 14px color-mix(in srgb, #b07cff 45%, transparent); animation: axHowMorph 6s ease-in-out infinite, axHowSpin 9s linear infinite; }
.ax-how-o b { position: absolute; inset: 3px; border-radius: inherit; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%); mix-blend-mode: screen; }
@keyframes axHowMorph { 0%,100% { border-radius: 46% 54% 52% 48% / 50% 44% 56% 50%; } 33% { border-radius: 56% 44% 40% 60% / 44% 58% 42% 56%; } 66% { border-radius: 40% 60% 58% 42% / 58% 42% 58% 42%; } }
@keyframes axHowSpin { to { filter: hue-rotate(360deg); } }
@keyframes axHowShine { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
[data-motion="off"] .ax-how::after, [data-motion="off"] .ax-how-o { animation: none; }
/* мультики Matana AI */
.tn-ov { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: rgba(4, 6, 10, .72); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s; }
.tn-ov.on { opacity: 1; }
.tn-ov svg.tn-ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.tn-win { width: min(1500px, calc(100vw - 40px)); height: min(900px, calc(100vh - 40px)); display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel); box-shadow: 0 40px 120px rgba(0,0,0,.6); transform: translateY(14px) scale(.985); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2); }
.tn-ov.on .tn-win { transform: none; }
.tn-win:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.tn-hd { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.tn-ht { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tn-ht span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.tn-ht b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-ch { font-style: normal; font-size: 12px; color: var(--text-2); padding: 4px 10px; border-radius: 999px; background: var(--panel-2); white-space: nowrap; }
.tn-orb { position: relative; width: 30px; height: 30px; flex: 0 0 auto; }
.tn-orb i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--accent), #d95926, #a78bfa, #3987e5, var(--accent)); animation: axSpin 4s linear infinite; }
.tn-orb b { position: absolute; inset: 3px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFD58A, var(--accent) 55%, #7C5CFF); }
.tn-orb.big { width: 84px; height: 84px; } .tn-orb.big i { animation-duration: 1.4s; } .tn-orb.big b { inset: 6px; }
.tn-b { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); cursor: pointer; transition: background .12s, color .12s; }
.tn-b:hover { background: var(--panel-2); color: var(--text); } .tn-b.on { color: var(--accent); }
.tn-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 330px; }
.tn-stage { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; background: #07080c; overflow: hidden; }
.tn-stage canvas { position: absolute; left: 0; top: 0; display: block; cursor: pointer; }
.tn-big { position: absolute; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; pointer-events: none; color: #fff;
  background: color-mix(in srgb, var(--accent) 85%, transparent); box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 45%, transparent); opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s; }
.tn-big.on { opacity: .95; transform: none; } .tn-big svg.tn-ic { width: 34px; height: 34px; }
.tn-sub { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(88%, 980px); text-align: center; padding: 12px 20px; border-radius: 14px;
  font-size: 19px; line-height: 1.5; font-weight: 550; color: rgba(255,255,255,.55); background: rgba(8, 10, 14, .78); backdrop-filter: blur(6px); pointer-events: none; }
.tn-sub:empty { display: none; }
.tn-sub span { transition: color .15s; } .tn-sub span.on { color: #fff; }
.tn-side { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.tn-tabs { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--line); }
.tn-tabs button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; border: 0; border-radius: 9px; cursor: pointer; font: inherit; font-size: 12.5px; background: transparent; color: var(--text-2); }
.tn-tabs button.on { background: var(--accent-sf); color: var(--text); font-weight: 650; }
.tn-pane { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.tn-tr { display: flex; gap: 10px; text-align: left; border: 1px solid transparent; border-radius: 12px; padding: 10px; cursor: pointer; font: inherit; color: var(--text); background: transparent; transition: background .15s, border-color .15s; }
.tn-tr:hover { background: var(--panel-2); }
.tn-tr.on { background: var(--accent-sf); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.tn-tr em { font-style: normal; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--panel-2); color: var(--text-2); }
.tn-tr.on em { background: var(--accent); color: var(--on-accent); }
.tn-tr div { display: flex; flex-direction: column; gap: 3px; } .tn-tr b { font-size: 12.5px; } .tn-tr span { font-size: 12px; line-height: 1.5; color: var(--text-2); }
.tn-at { font-size: 12px; color: var(--text-2); padding: 4px 4px 8px; }
.tn-qa { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.tn-qe { font-size: 12.5px; color: var(--muted); line-height: 1.55; padding: 8px 4px; }
.tn-q { align-self: flex-end; max-width: 88%; padding: 8px 12px; border-radius: 12px 12px 4px 12px; font-size: 12.5px; background: linear-gradient(135deg, var(--accent), var(--accent-d)); color: var(--on-accent); }
.tn-a { align-self: flex-start; max-width: 94%; padding: 9px 12px; border-radius: 4px 12px 12px 12px; font-size: 12.5px; line-height: 1.55; background: var(--panel-2); border: 1px solid var(--line-soft); }
.tn-a.wait { display: flex; gap: 4px; } .tn-a.wait i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: axPulse 1s ease-in-out infinite; }
.tn-a.wait i:nth-child(2) { animation-delay: .15s; } .tn-a.wait i:nth-child(3) { animation-delay: .3s; }
.tn-qi { display: flex; gap: 8px; align-items: flex-end; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); margin-top: 6px; }
.tn-qi:focus-within { border-color: var(--accent); }
.tn-qi textarea { flex: 1 1 auto; resize: none; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 13px; line-height: 1.45; }
.tn-send { width: 32px; height: 32px; border: 0; border-radius: 9px; cursor: pointer; display: grid; place-items: center; color: var(--on-accent); background: var(--accent); }
.tn-cont { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; font: inherit; font-size: 12.5px; }
.tn-cont:hover { border-color: var(--accent); color: var(--accent); }
.tn-ctl { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.tn-pp { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--on-accent); } .tn-pp:hover { background: var(--accent); color: var(--on-accent); filter: brightness(1.08); }
.tn-time { font: 600 12px var(--mono); color: var(--text-2); min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; }
.tn-bar { position: relative; flex: 1 1 auto; height: 8px; border-radius: 4px; background: var(--panel-2); cursor: pointer; touch-action: none; }
.tn-bar::before { content: ''; position: absolute; inset: -8px 0; }
.tn-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, var(--accent), #a78bfa); pointer-events: none; }
.tn-knob { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); pointer-events: none; }
.tn-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--panel); pointer-events: none; }
.tn-seg { display: inline-flex; gap: 1px; padding: 2px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.tn-seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 11px; padding: 3px 8px; border-radius: 999px; cursor: pointer; }
.tn-seg button.on { background: var(--accent); color: var(--on-accent); font-weight: 650; }
.tn-askb { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 11px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 650;
  border: 1px solid color-mix(in srgb, #7c5cff 45%, var(--line)); color: var(--text); background: color-mix(in srgb, #7c5cff 18%, var(--panel)); }
.tn-askb:hover { background: color-mix(in srgb, #7c5cff 28%, var(--panel)); }
.tn-load { background: rgba(4, 6, 10, .8); }
.tn-lw { width: min(440px, calc(100vw - 40px)); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 34px 30px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.tn-lw h3 { margin: 8px 0 0; font-size: 19px; } .tn-lw p { margin: 0; color: var(--text-2); font-size: 13px; }
.tn-steps { display: flex; gap: 6px; } .tn-steps span { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.tn-steps span.on { background: var(--accent-sf); color: var(--accent); font-weight: 650; }
.tn-lp { width: 100%; height: 5px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.tn-lp i { display: block; width: 3%; height: 100%; background: linear-gradient(90deg, var(--accent), #a78bfa); transition: width .4s; }
.tn-lw em { font-style: normal; font-size: 12px; color: var(--muted); }
.tn-cancel { border: 1px solid var(--line); background: transparent; color: var(--text-2); border-radius: 9px; padding: 6px 14px; cursor: pointer; font: inherit; font-size: 12px; }
@media (max-width: 1000px) { .tn-body { grid-template-columns: 1fr; } .tn-side { display: none; } }

@keyframes axIn { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes axSpin { to { transform: rotate(360deg); } }
@keyframes axBreath { 0%, 100% { transform: scale(.94); opacity: .85; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes axRing { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
@keyframes axPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes axDrift { from { transform: translate(0, 0); } to { transform: translate(-60px, 40px); } }
@keyframes axShine { 0%, 60% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
@keyframes axFlow { to { background-position: -200% 0; } }
@keyframes axCaret { 50% { opacity: 0; } }
@keyframes axGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes axDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes axPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
[data-motion="off"] .ax *, [data-motion="off"] .ax-ov * { animation: none !important; }
@media (max-width: 1250px) { .ax-3, .ax-f3 { grid-template-columns: 1fr; } .ax-tw { grid-template-columns: 1fr; } .ax-td { position: static; } .ax-mc { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ax-2 { grid-template-columns: 1fr; } .ax-hero { flex-direction: column; align-items: stretch; } .ax-cr { grid-template-columns: 28px minmax(0, 1fr) 120px 48px; } .ax-cw { display: none; } }
/* ── /Matana AI в анализе ── */

/* ── Trade Journal и Prop test ── */
.tj, .px { flex: 1 1 auto; min-width: 0; padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 14px; }
.tj .up, .px .up, .tj-tip .up, .tj-ov .up { color: var(--up); }
.tj .dn, .px .dn, .tj-tip .dn, .tj-ov .dn { color: var(--down); }
.tj-load { padding: 60px; text-align: center; color: var(--muted); }
.tj-warn { border: 1px solid color-mix(in srgb, var(--down) 45%, transparent); background: color-mix(in srgb, var(--down) 8%, transparent);
  color: var(--text); border-radius: 12px; padding: 10px 14px; font-size: 12.5px; }
.tj-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tj-bar .select.tiny { max-width: 170px; }
.tj-q { height: 28px; width: 220px; font-size: 12px; }
.tj-bar .btn { height: 32px; }
.tj-bar .btn svg { width: 15px; height: 15px; }
.tj-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line-soft); }
.tj-seg button { height: 26px; padding: 0 11px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; white-space: nowrap;
  font-variant-numeric: tabular-nums; transition: background .12s, color .12s; }
.tj-seg button:hover { color: var(--text); }
.tj-seg button.on { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px var(--line); }
.tj-chips { display: flex; gap: 6px; margin-top: -4px; }
.tj-fchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 11px; border-radius: 13px; border: 0; cursor: pointer;
  background: var(--accent-sf); color: var(--accent); font-size: 12px; font-weight: 600; }
.tj-fchip svg { width: 12px; height: 12px; }

.tj-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1900px) { .tj-kpis { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.tj-k { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tj-k > span { font-size: 11.5px; color: var(--muted); }
.tj-k > b { font: 680 21px/1.15 var(--mono); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-k > b em { font-style: normal; font-size: 16px; }
.tj-k > i { font-style: normal; font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tj-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.tj-card > header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.tj-card > header b { font-size: 13.5px; font-weight: 650; color: var(--text); }
.tj-card > header span { font-size: 12px; color: var(--muted); }
.tj-card > header .btn.icon { width: 28px; height: 28px; align-self: center; }
.tj-none { padding: 26px 10px; text-align: center; color: var(--muted); font-size: 12.5px; }
.tj-g2 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 14px; }
.tj-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1400px) { .tj-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .tj-g2 { grid-template-columns: 1fr; } }

.tj-svg { display: block; width: 100%; max-width: 100%; height: auto; overflow: visible; stroke: none; }
.tj-gl { stroke: var(--line-soft); stroke-width: 1; }
.tj-gl.z { stroke: var(--line); stroke-dasharray: 3 4; }
.tj-ax { fill: var(--muted); font: 10.5px var(--mono); }
.tj-axl { font-family: var(--sans); }
.tj-eqline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tj-eqdot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.tj-dd { fill: color-mix(in srgb, var(--down) 22%, transparent); stroke: var(--down); stroke-width: 1.2; }
.tj-cx { stroke: var(--muted); stroke-dasharray: 3 3; }
.tj-cd { fill: var(--panel); stroke: var(--accent); stroke-width: 2; }
.tj-hit { fill: transparent; cursor: crosshair; }
.tj-tip { position: fixed; z-index: 400; pointer-events: none; min-width: 160px; max-width: 280px; background: var(--raise); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px; box-shadow: var(--shadow); font-size: 12px; color: var(--text); }
.tj-tip b { display: block; font-weight: 650; margin-bottom: 5px; }
.tj-tip div { display: flex; justify-content: space-between; gap: 14px; line-height: 1.6; }
.tj-tip span { color: var(--muted); }
.tj-tip em { font-style: normal; font-family: var(--mono); font-variant-numeric: tabular-nums; }

.tj-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(62px, .9fr); gap: 4px; }
.tj-cwh { font-size: 10.5px; color: var(--muted); text-align: center; padding-bottom: 2px; text-transform: uppercase; letter-spacing: .04em; }
.tj-cwh:nth-child(8) { text-align: right; }
.tj-cd0 { aspect-ratio: 1 / .82; }
.tj-cday { aspect-ratio: 1 / .82; border: 1px solid transparent; border-radius: 8px; background: var(--panel-2); color: var(--muted); cursor: default; padding: 5px 6px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-width: 0; font: inherit; text-align: left; transition: border-color .12s; }
.tj-cday.we:not(.has) { opacity: .5; }
.tj-cday i { font-style: normal; font-size: 10.5px; }
.tj-cday b { font: 650 11px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tj-cday span { font-size: 10px; color: var(--text-2); }
.tj-cday.has { cursor: pointer; }
.tj-cday.has i { color: var(--text-2); }
.tj-cday.has:hover { border-color: var(--text-2); }
.tj-cday.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-sf); }
.tj-cwk { display: flex; align-items: center; justify-content: flex-end; font: 600 11px var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); }

.tj-rows { display: flex; flex-direction: column; gap: 2px; }
.tj-rw { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(50px, 1fr) 70px; align-items: center; gap: 10px; padding: 6px; border-radius: 7px; font-size: 12.5px; }
.tj-rw[data-pick] { cursor: pointer; }
.tj-rw:hover { background: var(--panel-2); }
.tj-rn { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-rc { color: var(--muted); font: 11px var(--mono); white-space: nowrap; }
.tj-rb { position: relative; height: 8px; }
.tj-rb::before { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line); }
.tj-rb i { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.tj-rb i.up { background: var(--up); } .tj-rb i.dn { background: var(--down); }
.tj-rw > b { font: 650 12px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.tj-cols { display: flex; gap: 6px; height: 176px; }
.tj-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; border-radius: 8px; padding: 2px 0 4px; }
.tj-col:hover { background: var(--panel-2); }
.tj-cbar { position: relative; flex: 1 1 auto; width: 100%; }
.tj-cbar::before { content: ''; position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; background: var(--line); }
.tj-cbar i { position: absolute; left: 26%; right: 26%; }
.tj-cbar i.up { background: var(--up); border-radius: 3px 3px 0 0; } .tj-cbar i.dn { background: var(--down); border-radius: 0 0 3px 3px; }
.tj-col b { font: 600 10.5px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-2); }
.tj-col span { font-size: 11px; color: var(--muted); }

.tj-tbl { padding-bottom: 6px; }
.tj-tw { overflow: auto; margin: 0 -16px; }
.tj-tw table, .tj-md-p table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tj-tw th, .tj-md-p th { position: sticky; top: 0; background: var(--panel); text-align: left; font-weight: 600; font-size: 11px; color: var(--muted);
  padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tj-tw th:first-child, .tj-tw td:first-child { padding-left: 16px; }
.tj-tw th:last-child, .tj-tw td:last-child { padding-right: 16px; }
.tj-tw th.so { cursor: pointer; } .tj-tw th.so:hover, .tj-tw th.on { color: var(--text); }
.tj-tw td, .tj-md-p td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; color: var(--text); }
.tj-tw tbody tr[data-id] { cursor: pointer; }
.tj-tw tbody tr:hover td { background: var(--panel-2); }
.tj-tw th.n, .tj-tw td.n, .tj-md-p th.n, .tj-md-p td.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tj-tw td.m { font-family: var(--mono); color: var(--text-2); font-size: 12px; }
.tj-tw td > i { font-style: normal; color: var(--muted); margin-left: 6px; font-size: 11px; }
.tj-side { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 11px; font-weight: 650; }
.tj-side.long { color: var(--up); background: color-mix(in srgb, var(--up) 13%, transparent); }
.tj-side.short { color: var(--down); background: color-mix(in srgb, var(--down) 13%, transparent); }
.tj-tg i { font-style: normal; font-size: 11px; padding: 2px 6px; margin-right: 4px; border-radius: 5px; background: var(--panel-2); color: var(--text-2); }
.tj-tg i.bad { color: var(--down); background: color-mix(in srgb, var(--down) 10%, transparent); }
.tj-tg i.good { color: var(--up); background: color-mix(in srgb, var(--up) 10%, transparent); }
.tj-st { color: var(--line); letter-spacing: 1px; font-size: 11px; } .tj-st span { color: var(--accent); }
.tj-src { color: var(--muted); font-size: 11.5px; }
.tj-pg { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 8px; font-size: 12px; color: var(--muted); }

.tj-empty { margin: 40px auto; max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tj-empty-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-sf); color: var(--accent); }
.tj-empty-ic svg { width: 26px; height: 26px; }
.tj-empty h2 { margin: 6px 0 0; font-size: 19px; letter-spacing: -.01em; }
.tj-empty p { margin: 0; color: var(--text-2); line-height: 1.55; }
.tj-empty-a { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.tj-empty-n { color: var(--muted); font-size: 12px; }

/* карточка сделки и окна */
.tj-ov { position: fixed; inset: 0; z-index: 150; background: rgba(5,8,12,.45); backdrop-filter: blur(2px); opacity: 0; transition: opacity .18s ease; display: flex; justify-content: flex-end; }
.tj-ov.on { opacity: 1; }
.tj-ov.center { align-items: center; justify-content: center; }
.tj-dr { width: min(560px, 100vw); height: 100%; background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column;
  transform: translateX(24px); transition: transform .22s cubic-bezier(.22,.9,.3,1); }
.tj-ov.on .tj-dr { transform: none; }
.tj-dr > header, .tj-md > header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.tj-dr > header b, .tj-md > header b { font-size: 15px; font-weight: 650; }
.tj-md > header span { color: var(--muted); font-size: 12px; }
.tj-srcb { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--panel-2); color: var(--text-2); }
.tj-dr > footer, .tj-md > footer { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.tj-prev { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border-bottom: 1px solid var(--line); }
.tj-prev > div { background: var(--panel-2); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.tj-prev span { font-size: 11px; color: var(--muted); }
.tj-prev b { font: 680 16px var(--mono); font-variant-numeric: tabular-nums; }
.tj-prev .tj-prev-n { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.tj-form { flex: 1 1 auto; overflow: auto; padding: 16px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.tj-form label, .tj-form .tj-tgs, .tj-form .tj-rate { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tj-form .w2 { grid-column: 1 / -1; }
.tj-form label > span, .tj-tgs > span, .tj-rate > span { font-size: 11.5px; color: var(--muted); }
.tj-form label > span em { font-style: normal; opacity: .7; }
.tj-form .input { width: 100%; }
.tj-form textarea.input { height: auto; padding: 9px 11px; resize: vertical; font: inherit; line-height: 1.45; }
.tj-side2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tj-side2 button { height: 38px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2); font-weight: 650; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.tj-side2 button.long.on { border-color: var(--up); color: var(--up); background: color-mix(in srgb, var(--up) 12%, var(--panel)); }
.tj-side2 button.short.on { border-color: var(--down); color: var(--down); background: color-mix(in srgb, var(--down) 12%, var(--panel)); }
.tj-tgs > div { display: flex; flex-wrap: wrap; gap: 6px; }
.tj-tgs > div:empty { display: none; }
.tj-tag { height: 26px; padding: 0 10px; border-radius: 13px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font-size: 12px; cursor: pointer; }
.tj-tag:hover { border-color: var(--text-2); }
.tj-tag.on { color: var(--text); background: var(--panel-2); border-color: var(--text-2); }
.tj-tag.bad.on { color: var(--down); border-color: color-mix(in srgb, var(--down) 60%, transparent); background: color-mix(in srgb, var(--down) 10%, transparent); }
.tj-tag.good.on { color: var(--up); border-color: color-mix(in srgb, var(--up) 60%, transparent); background: color-mix(in srgb, var(--up) 10%, transparent); }
.tj-tgs .input { height: 30px; font-size: 12px; }
.tj-rate > div { display: flex; gap: 4px; }
.tj-rate button { width: 32px; height: 32px; border: 0; background: transparent; color: var(--line); cursor: pointer; border-radius: 7px; display: grid; place-items: center; }
.tj-rate button svg { width: 20px; height: 20px; }
.tj-rate button:hover { background: var(--panel-2); }
.tj-rate button.on { color: var(--accent); } .tj-rate button.on svg { fill: currentColor; }
.tj-del.sure { color: var(--down); border-color: var(--down); }
.tj-md { width: min(760px, calc(100vw - 40px)); max-height: calc(100vh - 60px); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden; transform: translateY(10px) scale(.98); transition: transform .2s cubic-bezier(.22,.9,.3,1); }
.tj-ov.on .tj-md { transform: none; }
.tj-md-n { margin: 12px 18px 0; color: var(--text-2); font-size: 12.5px; }
.tj-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; padding: 14px 18px; }
.tj-map label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tj-map label span { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.tj-map .req { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block; }
.tj-map .select.tiny { max-width: none; width: 100%; }
.tj-md-p { padding: 0 18px 12px; overflow: auto; min-height: 60px; }
.tj-md-s { font-size: 12px; color: var(--text-2); }

/* Prop test */
.px-home { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); gap: 14px; align-items: start; }
.px-home > .tj-warn { grid-column: 1 / -1; }
@media (max-width: 1150px) { .px-home { grid-template-columns: 1fr; } }
.px-sec { font-size: 11px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 8px; }
.px-new > header + .px-sec { margin-top: 4px; }
.px-pre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1500px) { .px-pre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.px-pc { text-align: left; border: 1px solid var(--line); background: var(--panel-2); border-radius: 12px; padding: 11px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  color: var(--text); transition: border-color .12s, box-shadow .12s; }
.px-pc:hover { border-color: var(--text-2); }
.px-pc.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-sf); background: var(--panel); }
.px-pc b { font-size: 13px; font-weight: 650; }
.px-pc span { font-size: 12px; color: var(--text-2); }
.px-pc i { font-style: normal; font-size: 11px; color: var(--muted); margin-top: 3px; }
.px-sizes button { padding: 0 14px; font-family: var(--mono); }
.px-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.px-grid label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.px-grid label > span { font-size: 11.5px; color: var(--muted); }
.px-grid .select { max-width: none; width: 100%; min-width: 0; }
.px-in { position: relative; }
.px-in .input { width: 100%; padding-right: 76px; font-family: var(--mono); }
.px-in .input:disabled { opacity: .45; }
.px-in em { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 11px; color: var(--muted); pointer-events: none; }
.px-grid .px-ck { flex-direction: row; align-items: center; gap: 8px; align-self: end; height: 34px; cursor: pointer; }
.px-ck input { accent-color: var(--accent); width: 15px; height: 15px; }
.px-ck span { font-size: 12.5px; color: var(--text-2); }
.px-start { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.px-brief { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 18px; border-radius: 12px; overflow: hidden; background: var(--line-soft); border: 1px solid var(--line-soft); }
.px-brief > div { background: var(--panel-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.px-brief span { font-size: 11px; color: var(--muted); }
.px-brief b { font: 680 15px var(--mono); font-variant-numeric: tabular-nums; }
.px-go { width: 100%; height: 44px; margin-top: 14px; font-size: 14px; border-radius: 10px; }
.px-go svg { width: 14px; height: 14px; }
.px-hk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.px-hk > div { background: var(--panel-2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.px-hk span { font-size: 11px; color: var(--muted); }
.px-hk b { font: 680 17px var(--mono); }
.px-hl { display: flex; flex-direction: column; gap: 6px; max-height: 620px; overflow: auto; }
.px-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 11px; cursor: pointer;
  transition: border-color .12s, background .12s; }
.px-h:hover { border-color: var(--line); background: var(--panel-2); }
.px-h-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.px-h-m b { font-size: 13px; font-weight: 600; }
.px-h-m span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-h-p { font: 650 13px var(--mono); font-variant-numeric: tabular-nums; }
.px-h .btn { height: 30px; }
.px-st { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.px-st.run { color: var(--accent); background: var(--accent-sf); }
.px-st.ok { color: var(--up); background: color-mix(in srgb, var(--up) 13%, transparent); }
.px-st.bad { color: var(--down); background: color-mix(in srgb, var(--down) 13%, transparent); }
.px-hempty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 26px 10px 10px; color: var(--text-2); }
.px-hempty p { margin: 0; line-height: 1.55; max-width: 380px; }
.px-hempty ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 12px; color: var(--muted); text-align: left; }

.px.px-t { padding: 12px 14px 14px; gap: 10px; min-height: 0; height: 100%; }
.px-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.px-top .btn { height: 32px; }
.px-id { display: flex; flex-direction: column; gap: 1px; }
.px-id b { font-size: 14px; font-weight: 650; }
.px-id span { font-size: 11.5px; color: var(--muted); }
.px-date { font-size: 12px; color: var(--text-2); padding: 4px 10px; border-radius: 8px; background: var(--panel-2); }
.px-acc { display: flex; gap: 1px; border-radius: 11px; overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.px-acc > div { background: var(--panel); padding: 6px 14px; display: flex; flex-direction: column; min-width: 124px; }
.px-acc span { font-size: 10.5px; color: var(--muted); }
.px-acc b { font: 680 15px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.px-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 10px; }
.px-cc { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.px-ct { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.px-ohlc { font: 11.5px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.px-ohlc span { color: var(--muted); margin: 0 3px 0 8px; } .px-ohlc em { font-style: normal; color: var(--muted); }
.px-clock { font: 700 15px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.px-cv { position: relative; flex: 1 1 auto; min-height: 260px; }
.px-cv canvas { position: absolute; inset: 0; display: block; cursor: crosshair; }
.px-pl { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--line-soft); }
.px-pl .btn { height: 32px; }
.px-pl .btn svg { width: 14px; height: 14px; }
.px-pp { min-width: 96px; }
.px-sess { flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--panel-2); overflow: hidden; min-width: 60px; }
.px-sess i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.px-tt { border-top: 1px solid var(--line-soft); padding: 8px 14px 4px; max-height: 190px; overflow: auto; flex: 0 0 auto; }
.px-tt > header { display: flex; align-items: baseline; gap: 10px; padding-bottom: 4px; }
.px-tt > header b { font-size: 12.5px; } .px-tt > header span { font-size: 11.5px; color: var(--muted); }
.px-tt .px-keys { font-size: 11px; color: var(--muted); }
.px-tt .tj-tw { margin: 0 -14px; }
.px-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; }
.px-side .tj-card { padding: 12px 14px; }
.px-side .tj-card > header { margin-bottom: 8px; }
.px-q label { display: flex; flex-direction: column; gap: 5px; }
.px-q label > span, .px-br label > span { font-size: 11px; color: var(--muted); }
.px-qi { display: grid; grid-template-columns: 34px 1fr 34px; gap: 6px; }
.px-qi .btn { border: 1px solid var(--line); font-size: 16px; }
.px-qi .input { text-align: center; font: 650 15px var(--mono); }
.px-qb { display: flex; gap: 5px; margin-top: 7px; }
.px-qb .chip { flex: 1 1 0; padding: 0; font-family: var(--mono); height: 26px; }
.px-max { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; }
.px-br { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.px-br label { display: flex; flex-direction: column; gap: 5px; }
.px-br .input { width: 100%; font-family: var(--mono); height: 32px; }
.px-risk { display: flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.px-risk b { font: 650 12px var(--mono); color: var(--text); }
.px-risk b.dn { color: var(--down); }
.px-risk .chip { height: 22px; padding: 0 7px; font-size: 11px; }
.px-bs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.px-bs button { position: relative; height: 56px; border-radius: 11px; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: #fff; transition: filter .12s, transform .06s; }
.px-bs button:hover { filter: brightness(1.08); } .px-bs button:active { transform: translateY(1px); }
.px-bs span { font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.px-bs b { font: 600 12px var(--mono); opacity: .9; }
.px-bs i { position: absolute; top: 6px; right: 8px; font-style: normal; font: 600 9.5px var(--mono); opacity: .6; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; }
.px-buy { background: linear-gradient(180deg, color-mix(in srgb, var(--up) 88%, #fff), var(--up)); }
.px-sell { background: linear-gradient(180deg, color-mix(in srgb, var(--down) 88%, #fff), var(--down)); }
.px-pos { border-left: 3px solid var(--blue); }
.px-pos > header #pxUpl { font: 700 15px var(--mono); }
.px-pk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.px-pk > div { display: flex; flex-direction: column; gap: 1px; }
.px-pk span { font-size: 10.5px; color: var(--muted); } .px-pk b { font: 600 13px var(--mono); }
.px-pa { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 10px; }
.px-pa .btn { height: 32px; padding: 0 6px; font-size: 12px; }
.px-flat { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); font-weight: 650; }
.px-flat i { font-style: normal; font: 600 9.5px var(--mono); opacity: .6; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; }
.px-m { padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.px-m:last-child { border-bottom: 0; padding-bottom: 0; }
.px-mh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.px-mh span { font-size: 12px; color: var(--text-2); }
.px-mh b { font: 650 12.5px var(--mono); font-variant-numeric: tabular-nums; } .px-mh b small { font-size: 11px; color: var(--muted); font-weight: 500; }
.px-mb { height: 5px; border-radius: 3px; background: var(--panel-2); margin: 6px 0 4px; overflow: hidden; }
.px-mb i { display: block; height: 100%; border-radius: 3px; transition: width .25s ease; }
.px-m em { font-style: normal; font-size: 11px; color: var(--muted); }
.px-m.goal .px-mb i { background: var(--accent); }
.px-m.good .px-mb i { background: var(--up); }
.px-m.safe .px-mb i { background: var(--text-2); }
.px-m.warn .px-mb i { background: var(--accent); }
.px-m.bad .px-mb i { background: var(--down); }
.px-m.bad .px-mh b { color: var(--down); }
@media (max-width: 1150px) { .px-main { grid-template-columns: 1fr; } .px.px-t { height: auto; } .px-cv { min-height: 420px; } }

.px-dd { width: min(480px, calc(100vw - 40px)); padding: 26px 26px 0; text-align: center; align-items: center; }
.px-dd-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--text-2); }
.px-dd-ic svg { width: 26px; height: 26px; }
.px-dd.ok .px-dd-ic { background: color-mix(in srgb, var(--up) 15%, transparent); color: var(--up); }
.px-dd.bad .px-dd-ic { background: color-mix(in srgb, var(--down) 15%, transparent); color: var(--down); }
.px-dd h2 { margin: 12px 0 2px; font-size: 20px; letter-spacing: -.01em; }
.px-dd-d { margin: 0; color: var(--muted); font-size: 12.5px; }
.px-dd-r { margin: 12px 0 0; color: var(--down); font-weight: 600; }
.px-dd-r span { color: var(--text-2); font-weight: 400; font-size: 12.5px; }
.px-dd-k { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 18px 0 0; width: 100%; border-radius: 12px; overflow: hidden; background: var(--line-soft); border: 1px solid var(--line-soft); }
.px-dd-k > div { background: var(--panel-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.px-dd-k span { font-size: 11px; color: var(--muted); } .px-dd-k b { font: 680 16px var(--mono); } .px-dd-k em { font-style: normal; font-size: 11px; color: var(--muted); font-family: var(--sans); font-weight: 500; }
.px-dd-n { margin: 14px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.tj-md.px-dd > footer { width: calc(100% + 52px); margin: 20px -26px 0; justify-content: center; }

.px-sum { display: flex; flex-direction: column; gap: 14px; }
.px-sh { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.px-sh-t h2 { margin: 6px 0 2px; font-size: 19px; letter-spacing: -.01em; }
.px-sh-t p { margin: 0; color: var(--text-2); font-size: 12.5px; }
.px-sg { grid-template-columns: 1fr 1fr; }
.px-tl { stroke: var(--up); stroke-dasharray: 5 4; } .px-tlt { fill: var(--up); }
.px-fl { stroke: var(--down); stroke-dasharray: 5 4; } .px-flt { fill: var(--down); }
.px-dot { fill: var(--panel); stroke: var(--accent); stroke-width: 2; }
.px-dot:hover { fill: var(--accent); }
.px-bar.up { fill: var(--up); } .px-bar.dn { fill: var(--down); }
.px-bar:hover { opacity: .8; }

/* ── Схема: быстрее, компактнее, крупнее ─────────────────────────────────────
   Связи лежат в координатах блоков и едут вместе с холстом одним
   преобразованием; толщина линии от масштаба не зависит. */
.gr-nodes > .gr-wires { position: absolute; inset: auto; left: 0; top: 0; width: auto; height: auto;
  overflow: visible; z-index: 1; pointer-events: none; }
.gr-nodes > .gr-wires path { stroke-width: inherit; }
.gr-nodes > .gr-wires .wire-hit { stroke-width: inherit; pointer-events: stroke; }
.gr-canvas.moving .gr-node { transition: none; }
/* Слой блоков — отдельный слой видеокарты: сдвиг и масштаб двигают готовую
   картинку, а не перерисовывают сотни блоков на каждом движении мыши. */
.gr-canvas.moving .gr-nodes { will-change: transform; }
/* Условие: знак сравнения — строкой сверху, а два значения делят всю
   ширину блока. Раньше знак стоял посередине отдельной колонкой в треть
   блока, и значения ужимались до «ИН…», «E…». */
.gr-node:not(.k-win) .cn:not(.cn-one):not(.cn-math-node) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "op op" "l r"; gap: 4px 6px; }
.gr-node:not(.k-win) .cn:not(.cn-one):not(.cn-math-node) > .cn-op { grid-area: op; min-height: 24px; justify-self: center; }
.gr-node:not(.k-win) .cn:not(.cn-one):not(.cn-math-node) > .cn-slot:first-child { grid-area: l; }
.gr-node:not(.k-win) .cn:not(.cn-one):not(.cn-math-node) > :last-child:not(.cn-op) { grid-area: r; }
.cn-sel { width: auto; min-width: 40px; padding: 0 6px; font-size: 13.5px; }
/* «Считать по: [15] [минут]»: число всегда видно, единица — сколько останется. */
.cn-f .gn-two .num { flex: 0 0 42px; padding: 0 4px; text-align: center; }
.cn-f .gn-two .select { flex: 1 1 auto; width: auto; min-width: 0; }
.cn-f .gn-two .cn-unit { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Математика: не больше двух колонок. Подпись во всю ширину раньше
   держала пустые колонки, и два слагаемых жались в левую половину блока. */
.cn-math { grid-template-columns: repeat(auto-fit, minmax(max(124px, calc(50% - 3px)), 1fr)); }
/* Текст на блоках крупнее: читать важнее, чем уместить. */
.gn-h { font-size: 13px; }
.cn-head b, .cn-kind { font-size: 11px; }
.cn-r > i { font-size: 11px; }
.cn-f .select, .cn-f .input, .cn-f .num { height: 26px; font-size: 12.5px; }
.gr-node .row label { font-size: 11.5px; }
.gr-node .cn-note, .gr-node .gn-why { font-size: 11px; }
/* Гнездо без подписи не занимает целую строку. */
.gr-node .row.in:not(:has(> label:not(:empty))) { min-height: 12px; padding-top: 0; padding-bottom: 0; }
/* Кнопки шапки (свернуть, ⋯, ✕) видны всегда, а издалека не мельчают. */
.gn-h .x { color: var(--text-2); display: inline-grid; place-items: center; border-radius: 5px; padding: 0;
  font-size: 12.5px; width: 20px; height: 20px; }
.gr-canvas.lod .gn-h .x { font-size: calc(12px * var(--iz)); width: calc(19px * var(--iz)); height: calc(19px * var(--iz)); }
.gr-canvas.lod .port { transform: scale(min(2.2, var(--iz))); }
.gn-h .x:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
/* Издалека: шапка и суть блока одной строкой, крупно; поля спрятаны —
   их всё равно не прочесть, а рисовать их дорого. Щелчок по сути — приблизить. */
.gn-sum { display: none; }
.gr-canvas.lod .gr-node .gn-b, .gr-canvas.lod .gr-node .row label,
.gr-canvas.lod .gn-h .gn-kind, .gr-canvas.lod .gn-h .gn-tag { display: none; }
.gr-canvas.lod .gn-sum { display: block; padding: calc(3px * var(--iz)) 10px calc(4px * var(--iz));
  font-size: calc(12.5px * var(--iz)); line-height: 1.25; color: var(--text); cursor: zoom-in;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-canvas.lod .gn-h { font-size: calc(11.5px * var(--iz)); padding: calc(2px * var(--iz)) 8px; }
.gr-canvas.lod .gn-h b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gr-canvas.lod .gr-node .row { min-height: 10px; padding-top: 0; padding-bottom: 0; }
.gr-canvas.lod .gr-node { box-shadow: none; }

/* ── Список стратегий в шапке: поиск, переименовать, удалить ──────────────── */
.sp-pop { position: fixed; z-index: 1000; max-height: min(460px, 70vh); display: flex; flex-direction: column; gap: 6px;
  padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.sp-q { width: 100%; height: 32px; }
.sp-list { overflow: auto; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; }
.sp-row { display: flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 4px 0 10px; border-radius: 8px; cursor: pointer; }
.sp-row:hover, .sp-row.hi { background: var(--panel-2); }
.sp-row.cur .sp-n { color: var(--accent); font-weight: 600; }
.sp-row.edit { cursor: default; background: var(--panel-2); padding: 4px 6px; gap: 6px; }
.sp-n { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-b { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: pointer; opacity: .55; }
.sp-row:hover .sp-b, .sp-row.hi .sp-b { opacity: 1; }
.sp-b svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-b:hover { color: var(--text); background: color-mix(in srgb, var(--text) 9%, transparent); }
.sp-b.del:hover { color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); }
.sp-ren { flex: 1 1 auto; min-width: 0; height: 28px; }
.sp-ask { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--down); }
.sp-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* ── Заметки отовсюду ── */
/* Значок «В заметки»: тихий, пока на него не смотрят. */
.nt-add { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 6px;
  border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer;
  opacity: .55; transition: opacity .15s, color .15s, background .15s, border-color .15s; }
.nt-add svg { width: 14px; height: 14px; flex: 0 0 auto; }
.nt-add:hover, .nt-add:focus-visible { opacity: 1; color: var(--accent); background: var(--accent-sf); }
.nt-add.done { opacity: 1; color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.nt-add.lbl { opacity: .8; }
.lx-p:hover .nt-add, .ax-p:hover .nt-add, .ax-col:hover .nt-add, .tr-card:hover .nt-add, .rule:hover .nt-add { opacity: .9; }
.ax-p > header .nt-add, .tr-card > header .nt-add { margin-left: auto; }
.ax-col > h3 .nt-add { margin-left: auto; height: 22px; min-width: 22px; text-transform: none; letter-spacing: 0; }
.ax-ma .nt-add { height: auto; min-width: 0; padding: 3px 7px; border: 0; border-radius: 6px; font-size: 11px; opacity: 1; }
.ax-ma .nt-add svg { width: 12px; height: 12px; }
.ax-ma .nt-add:hover { background: var(--panel-2); color: var(--text); }
.lx-ib.nt-add { width: 28px; height: 28px; min-width: 28px; padding: 0; opacity: 1; }
.rhead .nt-add { height: 24px; min-width: 24px; }
.pt-top .nt-add { opacity: .75; }
.jn-dr footer .nt-add.btn { opacity: 1; height: auto; min-width: 0; padding: 0 12px; font-size: 12.5px; }
.jn-dr footer .nt-add.btn svg { width: 14px; height: 14px; }

/* Подтверждение внизу: пара секунд и исчезает. */
.nt-toast { position: fixed; left: 50%; bottom: 22px; z-index: 900; display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font-size: 12.5px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28); transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.22, .9, .3, 1); }
.nt-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.nt-toast > span { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.nt-toast b { font-weight: 650; }
.nt-toast .nt-ok { color: var(--up); margin-right: 0; }
.nt-toast .nt-ok svg { width: 15px; height: 15px; }
.nt-toast button { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 7px; cursor: pointer; }
.nt-toast button:hover { background: var(--accent-sf); }
.nt-toast button[data-t="undo"] { color: var(--muted); font-weight: 500; }

/* Выделение текста. По умолчанию в программе его нет (всё перетаскивается),
   но там, где текст читают, — в анализе, у AI и в заметках — его можно выделить
   и положить в заметки. Графики, кнопки и меню остаются невыделяемыми. */
.lx-main, .ax-main, .tr-main, .an-main, .hb { user-select: text; -webkit-user-select: text; }
.lx-main button, .ax-main button, .tr-main button, .an-main button, .lx-main svg, .ax-main svg, .tr-main svg,
.lx-ch, .seg-mini, .sx-flow { user-select: none; -webkit-user-select: none; }
/* Пилюля у выделенного текста. */
.nt-pill { position: fixed; z-index: 880; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 999px; background: var(--panel); color: var(--text);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  opacity: 0; transform: translateY(4px) scale(.96); pointer-events: none; transition: opacity .14s, transform .16s; }
.nt-pill.on { opacity: 1; transform: none; pointer-events: auto; }
.nt-pill svg { width: 14px; height: 14px; color: var(--accent); }
.nt-pill:hover { background: var(--accent-sf); }

/* Быстрая заметка — карточка в углу, а не окно поверх всего. */
.nt-quick { position: fixed; right: 20px; bottom: 20px; z-index: 890; width: min(380px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .32); opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .16s, transform .2s cubic-bezier(.22, .9, .3, 1); }
.nt-quick.on { opacity: 1; transform: none; pointer-events: auto; }
.nt-quick header { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.nt-quick header b { font-size: 13px; flex: 0 0 auto; }
.nt-quick header span { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.nt-quick .nt-x { margin-left: auto; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px; }
.nt-quick .nt-x:hover { color: var(--text); background: var(--panel-2); }
.nt-quick blockquote { margin: 0; padding: 6px 10px; border-left: 2px solid var(--line); color: var(--text-2); font-size: 12px; line-height: 1.5; max-height: 90px; overflow: auto; white-space: pre-wrap; }
.nt-quick textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; line-height: 1.5; outline: none; }
.nt-quick textarea:focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.nt-k { display: flex; flex-wrap: wrap; gap: 5px; }
.nt-k button { border: 1px solid var(--line); background: transparent; color: var(--text-2); font: inherit; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; cursor: pointer; }
.nt-k button.on { border-color: var(--kc); color: var(--text); background: color-mix(in srgb, var(--kc) 16%, transparent); }
.nt-quick footer { display: flex; align-items: center; gap: 10px; }
.nt-quick footer span { color: var(--muted); font-size: 11px; flex: 1 1 auto; }

/* Список заметок: откуда положено и что взято. */
.ac-src { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; }
.ac-q { margin: 8px 0 0; padding: 7px 11px; border-left: 2px solid color-mix(in srgb, var(--kc, var(--accent)) 55%, var(--line));
  background: var(--panel-2); border-radius: 0 8px 8px 0; color: var(--text-2); font-size: 12px; line-height: 1.55; white-space: pre-wrap; max-height: 220px; overflow: auto; }
.an-card.hl { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent); transition: box-shadow .3s; }
.an-how { color: var(--muted); font-size: 11.5px; line-height: 1.6; margin: 10px 0 2px; }
.an-how svg { width: 12px; height: 12px; vertical-align: -2px; color: var(--accent); }
.an-empty svg { width: 13px; height: 13px; vertical-align: -2px; color: var(--accent); }
.an-how kbd, .an-empty kbd { font-family: var(--mono); font-size: 10.5px; padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--panel); color: var(--text-2); }
.nt-qb .ico { width: 15px; height: 15px; }

/* Раздел «Рынок» лаборатории. */
.lx-mk-t { margin: 12px 0 0; color: var(--text-2); font-size: 12.5px; line-height: 1.6; }
.lx-mk-t.neg { color: var(--down); }
.lx-mk-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--accent-sf); color: var(--accent); font-size: 11px; font-weight: 600; vertical-align: 2px; }
@media (prefers-reduced-motion: reduce) { .nt-toast, .nt-pill, .nt-quick { transition: none; } }
/* ── /Заметки отовсюду ── */
/* ── AI: разговоры по стратегии и что AI о ней знает ─────────────────────── */
.ai-top { flex: 0 0 auto; padding: 10px 20px 0; }
.ai-bar { display: flex; align-items: center; gap: 8px; }
.ai-chatbtn { display: inline-flex; align-items: center; gap: 8px; max-width: min(520px, 70%); height: 32px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 13px; cursor: pointer; }
.ai-chatbtn:hover { border-color: var(--accent); }
.ai-chatbtn svg { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; color: var(--muted); }
.ai-chatbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ai-chatbtn em { font-style: normal; font-size: 11px; color: var(--muted); background: var(--panel-2); border-radius: 8px; padding: 1px 6px; }
.ai-chatbtn i { font-style: normal; color: var(--muted); font-size: 11px; }
.ai-chd { flex: 0 0 auto; color: var(--muted); font-size: 11px; margin-right: 4px; }
.ai-chpop .ai-chnew { align-self: flex-start; }
.ai-msg.ai-ctx { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 13px; }
.ai-msg.ai-ctx b { color: var(--text); }
.ai-msg.ai-ctx ul { margin: 2px 0 0; padding-left: 18px; }
.ai-msg.ai-ctx li { margin: 1px 0; }
/* ── «?» у настройки и окно подсказки с мультиком ────────────────────────── */
.hq { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 7px; padding: 0; vertical-align: 1px;
  border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted);
  font: 700 11px/1 var(--sans, inherit); cursor: pointer; }
.hq:hover { color: var(--accent); border-color: var(--accent); }
.hp-ov { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 24px;
  background: rgba(4, 6, 10, .62); opacity: 0; transition: opacity .18s; }
.hp-ov.on { opacity: 1; }
.hp-win { width: min(820px, 100%); max-height: calc(100vh - 48px); overflow: auto; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.hp-hd { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.hp-hd b { flex: 1; font-size: 16px; color: var(--text); }
.hp-x { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; }
.hp-x:hover { background: var(--panel-2); color: var(--text); }
.hp-stage { position: relative; margin: 14px 18px 0; border-radius: 12px; overflow: hidden; background: #07080c; }
.hp-stage canvas { display: block; width: 100%; cursor: pointer; }
.hp-pp { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: rgba(14, 17, 24, .75); color: #eef2f8; cursor: pointer; }
.hp-pp::before { content: '❚❚'; font-size: 11px; }
.hp-pp.paused::before { content: '▶'; font-size: 12px; }
.hp-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; padding: 16px 18px 20px; }
.hp-body section:first-child, .hp-body section:last-child { grid-column: 1 / -1; }
.hp-body h4 { margin: 0 0 4px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.hp-body p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2, var(--text)); }
@media (max-width: 640px) { .hp-body { grid-template-columns: 1fr; } }

/* ── Анализ: вкладки и история ── */
/* Верхнее меню — четыре равные вкладки на всю ширину. AI-аналитик слегка
   фиолетовый: это другой по природе инструмент, и его видно сразу. */
.an-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px 18px; }
.an-top .tab { height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; padding: 0 10px;
  border-radius: 9px; color: var(--text-2); font-size: 13.5px; font-weight: 560; white-space: nowrap; }
.an-top .tab span { overflow: hidden; text-overflow: ellipsis; }
.an-top .tab:hover { background: var(--panel-2); color: var(--text); }
.an-top .tab.on { background: var(--accent-sf); color: var(--accent); font-weight: 650; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.an-top .tab i { flex: 0 0 auto; }
.an-top .tab.ai { color: color-mix(in srgb, var(--violet) 75%, var(--text)); background: color-mix(in srgb, var(--violet) 8%, transparent); }
.an-top .tab.ai:hover { background: color-mix(in srgb, var(--violet) 15%, transparent); color: var(--violet); }
.an-top .tab.ai.on { background: color-mix(in srgb, var(--violet) 18%, transparent); color: var(--violet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 45%, transparent); }
.an-ai-ic { width: 15px; height: 15px; flex: 0 0 auto; fill: currentColor; }
@media (max-width: 720px) { .an-top { padding: 6px 10px; gap: 4px; } .an-top .tab { font-size: 12px; padding: 0 6px; } .an-top .tab i { display: none; } }

/* История прогонов — раздел «Отчёта». */
.lx-sec .hs { display: block; }
.hs-p > header { align-items: center; }
.hs-q { width: 220px; }
.hs-list { display: flex; flex-direction: column; margin: 0 -20px -18px; border-top: 1px solid var(--line); }
.hs-r { display: grid; grid-template-columns: 26px 118px minmax(180px, 1fr) 110px 96px 92px 70px auto; align-items: center; gap: 14px;
  padding: 11px 20px; border-top: 1px solid var(--line-soft, var(--line)); min-width: 0; }
.hs-r:first-child { border-top: 0; }
.hs-r:last-child { border-radius: 0 0 14px 14px; }
.hs-r:hover { background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
.hs-r.cur { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.hs-w { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hs-n b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-n span { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-m { display: flex; flex-direction: column; gap: 1px; text-align: right; font-variant-numeric: tabular-nums; }
.hs-m b { font-size: 13.5px; font-weight: 650; }
.hs-m span { color: var(--muted); font-size: 10.5px; }
.hs-a { display: flex; align-items: center; gap: 6px; justify-content: flex-end; min-width: 150px; }
.hs-cur { color: var(--accent); font-size: 11.5px; font-weight: 600; padding: 0 6px; }
.hs-empty { color: var(--muted); font-size: 13px; padding: 30px 0 12px; text-align: center; line-height: 1.6; }
.lx-empty-b { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 1100px) { .hs-r { grid-template-columns: 26px minmax(160px, 1fr) 100px auto; } .hs-w, .hs-r .hs-m:nth-of-type(n+2) { display: none; } }

/* AI-аналитик: переключатель AI-теста и второй блок «Разбора». */
.ax-tsw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ax-tsw button { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 38px; border: 0; border-radius: 9px; background: transparent;
  color: var(--text-2); font: inherit; font-size: 13px; font-weight: 560; cursor: pointer; white-space: nowrap; }
.ax-tsw button span { overflow: hidden; text-overflow: ellipsis; }
.ax-tsw button .ax-ic { width: 15px; height: 15px; flex: 0 0 auto; }
.ax-tsw button:hover { background: var(--panel-2); color: var(--text); }
.ax-tsw button.on { background: color-mix(in srgb, var(--violet) 15%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 40%, transparent); }
.ax-tsw button.on .ax-ic { color: var(--violet); }
.ax-part { margin-top: 30px; padding-top: 26px; border-top: 1px dashed var(--line); }
.ax-subh { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 0 0 16px; }
.ax-subh > div:first-child { display: flex; flex-direction: column; gap: 6px; max-width: 620px; }
.ax-subh .ax-eye { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 680; letter-spacing: -.01em; text-transform: none; color: var(--text); }
.ax-subh .ax-eye .ax-ic { width: 16px; height: 16px; color: var(--violet); }
.ax-subh p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.ax-subh .ax-kp { margin: 0; }
/* Чат Matana AI: на всю ширину, справа — история разговоров. */
.ax-sec[data-s="chat"] { max-width: none; height: 100%; }
.ax-chatw { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; height: calc(100vh - 196px); min-height: 480px; }
.ax-chatw .ax-chat { height: 100%; min-height: 0; }
.ax-msgi { width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; min-height: 100%; }
.ax-chatw .ax-comp { width: calc(100% - 32px); max-width: 900px; margin: 0 auto; box-sizing: border-box; }
.ax-chh .ax-seg button[disabled] { opacity: .5; cursor: default; }
.ax-cs { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.ax-csnew { display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border: 1px solid color-mix(in srgb, var(--violet) 40%, var(--line)); border-radius: 11px;
  background: color-mix(in srgb, var(--violet) 10%, var(--panel)); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ax-csnew:hover { background: color-mix(in srgb, var(--violet) 18%, var(--panel)); }
.ax-csnew[disabled] { opacity: .5; cursor: default; }
.ax-csnew .ax-ic { width: 15px; height: 15px; color: var(--violet); }
.ax-csq { height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 12.5px; outline: none; }
.ax-csq:focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.ax-csl { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 0 4px; }
.ax-csg { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 8px 4px; }
.ax-csg:first-child { padding-top: 2px; }
.ax-csi { position: relative; display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px 0 0; border-radius: 10px; }
.ax-csi:hover { background: var(--panel-2); }
.ax-csi.on { background: var(--accent-sf); }
.ax-cso { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 1px; padding: 6px 8px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ax-cso b, .ax-cso span { display: block; max-width: 100%; }
.ax-cso b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-csi.on .ax-cso b { color: var(--text); }
.ax-cso span { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-csa { display: flex; gap: 1px; opacity: 0; transition: opacity .12s; }
.ax-csi:hover .ax-csa, .ax-csi.on .ax-csa, .ax-csa:focus-within { opacity: 1; }
.ax-csa button, .ax-csd button { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.ax-csa button:hover { background: var(--panel); color: var(--text); }
.ax-csa button[data-hdel]:hover { color: var(--down); }
.ax-csa .ax-ic, .ax-csd .ax-ic { width: 13px; height: 13px; }
.ax-csd { display: flex; align-items: center; gap: 2px; }
.ax-csd button[data-hdel-ok] { width: auto; padding: 0 9px; background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); font: inherit; font-size: 11.5px; font-weight: 600; }
.ax-csr { flex: 1 1 auto; min-width: 0; height: 32px; margin: 6px 4px; padding: 0 9px; border: 1px solid var(--accent); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px; outline: none; box-shadow: 0 0 0 3px var(--accent-sf); }
.ax-csn { color: var(--muted); font-size: 12px; line-height: 1.55; padding: 14px 8px; text-align: center; }
@media (max-width: 1000px) { .ax-chatw { grid-template-columns: minmax(0, 1fr); height: auto; } .ax-chatw .ax-chat { height: calc(100vh - 196px); } .ax-cs { max-height: 300px; } }
/* Заметки. */
.an-body > #anNotes.nx-host { flex: 1 1 auto; display: block; min-height: 0; }
.nx { box-sizing: border-box; width: 100%; max-width: 1320px; margin: 0 auto; padding: 22px 28px 60px; display: flex; flex-direction: column; gap: 16px; }
.nx-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nx-ttl { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.nx-ttl h2 { margin: 0; font-size: 24px; font-weight: 720; letter-spacing: -.02em; }
.nx-ttl span { color: var(--muted); font-size: 12.5px; }
.nx-q { position: relative; display: flex; align-items: center; width: min(360px, 100%); }
.nx-q svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.nx-q input { width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; outline: none; transition: border-color .15s, box-shadow .15s; }
.nx-q input:focus { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 0 0 4px var(--accent-sf); }
.nx-new { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px; border: 0; border-radius: 12px; background: var(--accent); color: #111; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent); transition: transform .12s, box-shadow .12s; }
.nx-new:hover { transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 36%, transparent); }
.nx-new svg { width: 15px; height: 15px; }
.nx-new kbd { font: 600 10.5px var(--mono); padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.14); color: rgba(0,0,0,.7); }
.nx-kinds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.nx-kind { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text-2); font: inherit; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; min-width: 0; }
.nx-kind:hover { border-color: color-mix(in srgb, var(--kc, var(--accent)) 50%, var(--line)); }
.nx-kind i { width: 8px; height: 8px; border-radius: 50%; background: var(--kc); flex: 0 0 auto; }
.nx-kind b { font: 650 18px/1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.nx-kind span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-kind.on { border-color: var(--kc, var(--accent)); background: color-mix(in srgb, var(--kc, var(--accent)) 10%, var(--panel)); color: var(--text); }
.nx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-tag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; }
.nx-tag i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.nx-tag:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.nx-tag.on { background: var(--accent-sf); border-color: var(--accent); color: var(--accent); }
.nx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; }
.nx-g { grid-column: 1 / -1; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 10px 2px 0; }
.nx-g:first-child { padding-top: 0; }
.nx-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0; }
.nx-card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--kc); opacity: .9; }
.nx-card:hover { border-color: color-mix(in srgb, var(--kc) 40%, var(--line)); box-shadow: 0 10px 30px rgba(0,0,0,.14); transform: translateY(-1px); }
.nx-card.hl { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent), 0 10px 30px rgba(0,0,0,.18); }
.nx-ch { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11.5px; color: var(--muted); }
.nx-kp { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kc); }
.nx-kp i { width: 6px; height: 6px; border-radius: 50%; background: var(--kc); }
.nx-src { display: inline-flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); }
.nx-src svg { width: 12px; height: 12px; flex: 0 0 auto; }
.nx-when { margin-left: auto; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.nx-card h3 { margin: 2px 0 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; line-height: 1.35; color: var(--text); }
.nx-card blockquote { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--panel-2); color: var(--text-2); font-size: 12px; line-height: 1.55; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.nx-card p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.6; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.nx-ct { display: flex; flex-wrap: wrap; gap: 5px; }
.nx-ct .nx-tag { height: 22px; font-size: 11px; padding: 0 8px; }
.nx-act { display: flex; align-items: center; gap: 2px; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line-soft, var(--line)); opacity: .0; transition: opacity .15s; }
.nx-card:hover .nx-act, .nx-card:focus-within .nx-act { opacity: 1; }
.nx-act button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; }
.nx-act button:first-child { margin-right: auto; }
.nx-act button:hover { background: var(--panel-2); color: var(--text); }
.nx-act button.danger { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); font-weight: 600; }
.nx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 50px 20px 30px; }
.nx-empty.small { padding: 40px 0; }
.nx-empty > b { font-size: 18px; font-weight: 680; letter-spacing: -.01em; }
.nx-empty > span { color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 520px; }
.nx-empty-art { position: relative; width: 120px; height: 86px; margin-bottom: 8px; }
.nx-empty-art i { position: absolute; width: 74px; height: 56px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 10px 24px rgba(0,0,0,.14); }
.nx-empty-art i:nth-child(1) { left: 0; top: 18px; transform: rotate(-8deg); border-left: 3px solid #57A6F5; }
.nx-empty-art i:nth-child(2) { left: 46px; top: 22px; transform: rotate(7deg); border-left: 3px solid #A78BFA; }
.nx-empty-art i:nth-child(3) { left: 22px; top: 2px; border-left: 3px solid var(--accent); }
.nx-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); gap: 10px; margin: 10px 0 8px; }
.nx-ways > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.nx-ways svg { width: 18px; height: 18px; color: var(--accent); margin-bottom: 2px; }
.nx-ways b { font-size: 12.5px; } .nx-ways span { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.nx-ways kbd, .nx-empty kbd { font: 600 11px var(--mono); padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--panel-2); }
.nx-ov { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; padding: 16px; background: rgba(6, 8, 12, .55); backdrop-filter: blur(6px); animation: nxIn .16s ease; }
@keyframes nxIn { from { opacity: 0; } }
.nx-ed { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.nx-ed header { display: flex; align-items: center; } .nx-ed header b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nx-x { margin-left: auto; border: 0; background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; padding: 4px 6px; border-radius: 7px; }
.nx-x:hover { background: var(--panel-2); color: var(--text); }
.nx-et { border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 20px; font-weight: 680; letter-spacing: -.015em; padding: 2px 0; }
.nx-ek { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-ek button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; }
.nx-ek button i { width: 7px; height: 7px; border-radius: 50%; background: var(--kc); }
.nx-ek button.on { border-color: var(--kc); background: color-mix(in srgb, var(--kc) 14%, transparent); color: var(--text); }
.nx-eq { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--panel-2); color: var(--text-2); font-size: 12px; line-height: 1.55; white-space: pre-wrap; max-height: 160px; overflow: auto; }
.nx-ed textarea { width: 100%; box-sizing: border-box; min-height: 150px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.6; outline: none; }
.nx-ed textarea:focus, .nx-er input:focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.nx-er { display: flex; gap: 10px; flex-wrap: wrap; }
.nx-er label { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.nx-er label.grow { flex: 1 1 200px; }
.nx-er span { font-size: 11px; color: var(--muted); }
.nx-er input { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 12.5px; outline: none; }
.nx-ed footer { display: flex; align-items: center; gap: 8px; } .nx-ed footer span { margin-right: auto; color: var(--muted); font-size: 11px; }
@media (max-width: 900px) { .nx-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nx-ways { grid-template-columns: 1fr; } .nx { padding: 16px; } }
/* «Итог»: три главных перехода. */
.lx-go3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.lx-go { position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border-radius: 16px; cursor: pointer; text-align: left; font: inherit; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--gc) 45%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 16%, var(--panel)), var(--panel) 75%);
  transition: transform .14s, box-shadow .14s, border-color .14s; }
.lx-go:hover { transform: translateY(-2px); border-color: var(--gc); box-shadow: 0 14px 34px color-mix(in srgb, var(--gc) 26%, transparent); }
.lx-go.g1 { --gc: var(--accent); } .lx-go.g2 { --gc: #3987e5; } .lx-go.g3 { --gc: var(--violet); }
.lx-go-i { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--gc); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--gc) 35%, transparent); }
.lx-go.g1 .lx-go-i { color: #111; }
.lx-go-i .ic { width: 22px; height: 22px; }
.lx-go > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.lx-go b { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.lx-go i { font-style: normal; font-size: 12px; color: var(--text-2); line-height: 1.4; }
.lx-go .lx-go-a { width: 18px; height: 18px; color: var(--gc); flex: 0 0 auto; transition: transform .14s; }
.lx-go:hover .lx-go-a { transform: translateX(3px); }
@media (max-width: 1100px) { .lx-go3 { grid-template-columns: 1fr; } }

/* Блоки раздела: скрытые не показываются, «+ Добавить блок» возвращает. */
.lx-off { display: none !important; }
.lx-2.one { grid-template-columns: minmax(0, 1fr); }
.lx-blk { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 8px 10px 8px 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 12.5px; }
.lx-blk > .ic { width: 15px; height: 15px; }
.lx-blk > span { margin-right: auto; }
.lx-blk-add, .lx-blk-rs { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 9px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.lx-blk-add { border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); background: var(--accent-sf); color: var(--accent); }
.lx-blk-add:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.lx-blk-rs { border: 1px solid var(--line); background: transparent; color: var(--text-2); font-weight: 500; }
.lx-blk-rs:hover { color: var(--text); }
.lx-blk .ic, .lx-blk-add .ic, .lx-blk-rs .ic { width: 14px; height: 14px; }
.lx-blk-tile { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 20px; margin: 0 0 16px; border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 14px;
  background: transparent; color: var(--text-2); font: inherit; cursor: pointer; text-align: left; transition: background .14s, border-color .14s; }
.lx-blk-tile:hover { background: var(--accent-sf); border-color: var(--accent); color: var(--text); }
.lx-blk-tile > .ic { width: 22px; height: 22px; padding: 8px; border-radius: 50%; background: var(--accent-sf); color: var(--accent); box-sizing: content-box; }
.lx-blk-tile span { display: flex; flex-direction: column; gap: 2px; } .lx-blk-tile b { font-size: 14px; color: var(--text); } .lx-blk-tile i { font-style: normal; font-size: 12px; color: var(--muted); }
.lx-hide { opacity: .45; } .lx-p:hover .lx-hide { opacity: 1; }
.lx-blk-m { position: fixed; z-index: 900; width: 340px; max-height: 60vh; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.lx-blk-mh { padding: 8px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lx-blk-m > button { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.lx-blk-m > button:hover { background: var(--accent-sf); }
.lx-blk-m > button b { font-size: 13px; font-weight: 600; } .lx-blk-m > button span { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.lx-blk-m > button.all { border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; margin-top: 4px; } .lx-blk-m > button.all b { color: var(--accent); }
.tg-cm { width: 240px; } .tg-cm label { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; cursor: pointer; } .tg-cm label:hover { background: var(--panel-2); }

/* Таблица сделок — рабочая таблица в духе современных таблиц. */
.lx-tgb { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; }
.lx-tgb:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.lx-tgb .ic { width: 14px; height: 14px; }
.tg { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; outline: none; background: var(--panel); }
.tg:focus-within { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.tg-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--panel); }
.tg-search { position: relative; display: flex; align-items: center; width: 240px; }
.tg-search .ic { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--muted); pointer-events: none; }
.tg-search input { width: 100%; height: 32px; padding: 0 10px 0 32px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 12.5px; outline: none; }
.tg-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-sf); }
.tg-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.tg-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; white-space: nowrap; }
.tg-btn:hover { background: var(--panel-2); color: var(--text); }
.tg-btn .ic { width: 15px; height: 15px; }
.tg-full-b { background: var(--accent-sf); color: var(--accent); }
.tg-full-b:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.tg-fx { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.tg-fxi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--panel); color: var(--accent); flex: 0 0 auto; border: 1px solid var(--line); }
.tg-fxi .ic { width: 15px; height: 15px; }
.tg-fxw { position: relative; flex: 1 1 auto; min-width: 0; }
.tg-fx input { width: 100%; height: 30px; border: 0; outline: none; background: transparent; color: var(--text); font: 500 13px var(--mono); }
.tg-fx input::placeholder { font-family: inherit; color: var(--muted); }
.tg-fx > b { flex: 0 0 auto; font: 650 13.5px var(--mono); padding: 4px 10px; border-radius: 8px; }
.tg-fx > b.ok { background: var(--accent-sf); color: var(--accent); } .tg-fx > b.err { color: var(--down); font-family: inherit; font-weight: 500; font-size: 12px; }
.tg-ac { position: absolute; left: -38px; top: 34px; z-index: 20; width: 460px; max-height: 300px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.tg-ac-h { padding: 6px 10px 4px; font-size: 10.5px; color: var(--muted); }
.tg-ac button { display: grid; grid-template-columns: 110px auto 1fr; align-items: baseline; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.tg-ac button b { font: 650 12.5px var(--mono); color: var(--accent); }
.tg-ac button code { font: 11.5px var(--mono); color: var(--text-2); white-space: nowrap; }
.tg-ac button span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-ac button.on, .tg-ac button:hover { background: var(--accent-sf); }
.tg-wrap { height: 480px; overflow: auto; position: relative; background: var(--panel); overscroll-behavior: contain; }
.tg-t { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; min-width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; user-select: none; -webkit-user-select: none; }
.tg-t th, .tg-t td { height: 32px; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--line-soft, var(--line)); text-align: left; box-sizing: border-box; }
.tg-t td + td, .tg-t th + th { border-left: 1px solid color-mix(in srgb, var(--line-soft, var(--line)) 60%, transparent); }
.tg-t thead th { position: sticky; z-index: 2; background: var(--panel); }
.tg-t thead tr.tg-l th { top: 0; height: 22px; padding: 0; font: 600 10px var(--mono); color: var(--muted); text-align: center; cursor: pointer; background: var(--panel-2); border-bottom: 0; }
.tg-t thead tr.tg-l th:hover { color: var(--accent); background: var(--accent-sf); }
.tg-t thead tr.tg-h th { top: 22px; height: 36px; cursor: pointer; font-size: 11.5px; font-weight: 650; color: var(--text-2); letter-spacing: .01em; }
.tg-t thead tr.tg-h th span { overflow: hidden; text-overflow: ellipsis; }
.tg-t thead tr.tg-h th:hover { color: var(--text); background: var(--panel-2); }
.tg-t thead tr.tg-h th.on { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.tg-t thead tr.tg-h th i { font-style: normal; margin-left: 5px; }
.tg-t thead tr.tg-h th.user { color: var(--violet); }
.tg-t thead tr.tg-h th em { font-style: normal; margin-left: 6px; opacity: 0; color: var(--down); cursor: pointer; }
.tg-t thead tr.tg-h th:hover em { opacity: 1; }
.tg-t thead tr.tg-f th { top: 58px; height: 34px; padding: 0 4px; border-bottom: 1px solid var(--line); }
.tg-t thead tr.tg-f input { width: 100%; height: 26px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 11.5px; outline: none; }
.tg-t thead tr.tg-f input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.tg-t thead tr.tg-f input:focus { border-color: var(--accent); background: var(--panel); }
.tg-t thead tr.tg-f input:not(:placeholder-shown) { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--accent-sf); color: var(--accent); font-weight: 600; }
.tg-t thead tr.tg-f .ic { width: 12px; height: 12px; color: var(--muted); }
.tg-t .n { text-align: right; }
.tg-t .tg-rn { position: sticky; left: 0; z-index: 1; padding: 0 8px; text-align: right; color: var(--muted); background: var(--panel-2); font: 500 10.5px var(--mono); cursor: pointer; border-right: 1px solid var(--line); }
.tg-t thead .tg-rn { z-index: 3; }
.tg-t tbody tr.odd td:not(.tg-rn) { background: color-mix(in srgb, var(--panel-2) 35%, transparent); }
.tg-t tbody td { color: var(--text); cursor: cell; }
.tg-t tbody td.pos { color: var(--up); } .tg-t tbody td.neg { color: var(--down); }
.tg-t tbody tr:hover td:not(.s):not(.tg-rn) { background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.tg-t tbody tr:hover td.tg-rn { color: var(--text); }
.tg-t tbody td.s { background: color-mix(in srgb, var(--accent) 15%, var(--panel)) !important; }
.tg-t tbody td.act { box-shadow: inset 0 0 0 2px var(--accent); }
.tg-t tr.tg-sp td { padding: 0; border: 0; height: auto; background: transparent !important; }
.tg-t tfoot td { position: sticky; bottom: 0; z-index: 2; height: 46px; padding: 0 8px; background: var(--panel-2); border-top: 1px solid var(--line); vertical-align: middle; }
.tg-agg { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; cursor: pointer; }
.tg-agg select { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 10px; cursor: pointer; padding: 0; text-align: right; appearance: none; -webkit-appearance: none; }
.tg-agg select:hover { color: var(--accent); }
.tg-agg b { font: 650 12.5px var(--mono); } .tg-agg b.pos { color: var(--up); } .tg-agg b.neg { color: var(--down); }
.tg-st { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 38px; padding: 6px 12px; border-top: 1px solid var(--line); background: var(--panel); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tg-st b { color: var(--text); font-family: var(--mono); }
.tg-st a { color: var(--accent); cursor: pointer; }
.tg-st .tg-ref { font: 600 11px var(--mono); padding: 2px 7px; border-radius: 6px; background: var(--panel-2); color: var(--text-2); }
.tg-st .tg-hint { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.tg-piv:empty { display: none; }
.tg-piv { border-top: 1px solid var(--line); padding: 12px 14px 14px; background: var(--panel); }
.tg-piv-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tg-piv-h b { font-size: 13.5px; } .tg-piv-h span { color: var(--muted); font-size: 12px; margin-right: auto; }
.tg-pt { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tg-pt th { text-align: left; font-size: 11px; font-weight: 650; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.tg-pt td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft, var(--line)); }
.tg-pt .n { text-align: right; } .tg-pt td.pos { color: var(--up); } .tg-pt td.neg { color: var(--down); }
.tg-pt tbody tr { cursor: pointer; } .tg-pt tbody tr:hover td { background: var(--accent-sf); }
.tg-pt tfoot td { font-weight: 650; border-top: 1px solid var(--line); border-bottom: 0; }
.tg-pbar { width: 22%; } .tg-pbar i { display: block; height: 8px; border-radius: 4px; min-width: 2px; } .tg-pbar i.pos { background: var(--up); } .tg-pbar i.neg { background: var(--down); }
.tg-calc { display: flex; flex-direction: column; gap: 10px; padding: 4px 8px 8px; width: 420px; }
.tg-calc label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); }
.tg-calc input { height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 12.5px; outline: none; }
.tg-calc input:focus { border-color: var(--accent); }
.tg-calc #tgcF { font-family: var(--mono); }
.tg-calc-h { font-size: 11px; color: var(--muted); line-height: 1.6; } .tg-calc-h b { font-family: var(--mono); color: var(--accent); }
.tg-calc-e { font-size: 12px; min-height: 16px; } .tg-calc-e.ok { color: var(--up); } .tg-calc-e.err { color: var(--down); }
.lx-blk-m > button.on { background: var(--accent-sf); }
/* Полный экран. */
.lx-p.tg-fullp { position: fixed; inset: 10px; z-index: 2500; margin: 0; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.lx-p.tg-fullp .tg { flex: 1 1 auto; min-height: 0; }
.lx-p.tg-fullp .tg-wrap { flex: 1 1 auto; height: auto; }
body.tg-lock { overflow: hidden; }
body.tg-lock .lx-main { overflow: hidden; }

/* История: отметка ★. */
.hs-star { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.hs-star:hover { background: var(--panel-2); color: var(--accent); }
.hs-star.on { color: var(--accent); }
.hs-r.star { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.lx-tgb.on { border-color: var(--accent); color: var(--accent); background: var(--accent-sf); }
.hs-a .nt-add { opacity: .7; }

/* Метрики — компактно. */
.lx-mx { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 1px; background: var(--line-soft, var(--line)); border: 1px solid var(--line-soft, var(--line)); border-radius: 12px; overflow: hidden; }
.lx-mx .lx-k { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; margin: 0; border: 0; border-radius: 0; background: var(--panel); min-height: 0; box-shadow: none; }
.lx-mx .lx-k i { font-size: 11px; font-style: normal; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.lx-mx .lx-k b { font-size: 17px; font-weight: 680; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.lx-mx .lx-k u { text-decoration: none; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-mx-m { width: 280px; }
.lx-mx-f { display: flex; gap: 4px; padding: 8px 6px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.lx-mx-f button { flex: 1; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text-2); font: inherit; font-size: 11.5px; cursor: pointer; }
.lx-mx-f button:hover { color: var(--accent); border-color: var(--accent); }

/* Все тесты: вход в отдельные наборы проверок; обратно — стрелкой. */
.lx-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.lx-more-c { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .14s, transform .14s; }
.lx-more-c:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-1px); }
.lx-more-c > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.lx-more-c b { font-size: 13.5px; } .lx-more-c i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.lx-more-i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-sf); color: var(--accent); flex: 0 0 auto; }
.lx-more-i .ic { width: 18px; height: 18px; }
.lx-more-c .lx-go-a { width: 16px; height: 16px; color: var(--muted); }
.lx-crumb { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.lx-crumb span { font-size: 16px; font-weight: 680; letter-spacing: -.01em; }
.lx-back { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.lx-back:hover { color: var(--accent); border-color: var(--accent); }
.lx-back .ic { width: 15px; height: 15px; }
@media (max-width: 1000px) { .lx-more { grid-template-columns: 1fr; } }
/* подбор параметров */
.op { display: flex; flex-direction: column; gap: 14px; }
.op .seg-mini { float: none; flex-wrap: wrap; }
.op-list { columns: 2 460px; column-gap: 12px; margin-top: 4px; }
.op-g { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); overflow: hidden; break-inside: avoid; margin-bottom: 12px; }
.op-gh { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); cursor: pointer; user-select: none; }
.op-gh > .ic { width: 14px; height: 14px; color: var(--muted); transition: transform .15s; flex: 0 0 auto; }
.op-g.fold .op-gh { border-bottom: 0; }
.op-g.fold .op-gh > .ic { transform: rotate(-90deg); }
.op-gh:hover b { color: var(--accent); }
.op-gh b { font-size: 12.5px; font-weight: 650; }
.op-gh span { font-size: 11px; color: var(--muted); padding: 1px 7px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line-soft); }
.op-gh button { margin-left: auto; border: 0; background: none; color: var(--accent); font: inherit; font-size: 11.5px; cursor: pointer; padding: 2px 4px; }
.op-gh button:hover { text-decoration: underline; }
.op-r { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); column-gap: 12px; row-gap: 6px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line-soft); transition: background .12s; }
.op-r:first-of-type { border-top: 0; }
.op-r:hover { background: color-mix(in srgb, var(--panel) 60%, transparent); }
.op-r.on { background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.op-ck { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; }
.op-ck input { width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; margin: 0; }
.op-ck span { display: flex; flex-direction: column; min-width: 0; }
.op-ck b { font-size: 12.5px; font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-ck i { font-style: normal; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-v { font-family: var(--mono); font-size: 12px; color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-r:not(.on) { grid-template-columns: minmax(0, 1fr) auto; }
.op-off { font-size: 11.5px; color: var(--muted); }
.op-mode { grid-column: 3; display: flex; }
.op-r.on .op-mode { grid-column: 3; grid-row: 1; }
.op-auto, .op-rng, .op-n { grid-column: 3; }
.op-auto { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-rng { display: flex; align-items: center; gap: 6px; }
.op-rng input { width: 78px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font-family: var(--mono); font-size: 12px; }
.op-rng input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-sf); }
.op-rng em { font-style: normal; font-size: 11px; color: var(--muted); }
.op-n { font-size: 11px; color: var(--muted); }
.op-cfg { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.op-c { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.op-c > span { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.op-c > i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.op-go { display: flex; align-items: center; gap: 18px; margin-top: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.op-go.warn { border-color: color-mix(in srgb, #d99a2b 50%, var(--line)); }
.op-go.bad { border-color: color-mix(in srgb, var(--down) 55%, var(--line)); }
.op-est { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.op-est > b { font-size: 17px; font-weight: 680; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.op-est > span { font-size: 12.5px; color: var(--text-2); }
.op-est em { font-style: normal; font-size: 12px; color: var(--muted); }
.op-go.bad .op-est em { color: var(--down); }
.op-go .btn { flex: 0 0 auto; }
.op-prog { display: flex; flex-direction: column; gap: 10px; }
.op-ph { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.op-ph b { font-size: 14px; font-weight: 650; }
.op-ph .grow { flex: 1 1 auto; }
.op-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.op-prog.running .op-dot { background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: opPulse 1.6s infinite; }
.op-prog.paused .op-dot { background: #d99a2b; }
.op-prog.done .op-dot { background: var(--up); }
.op-prog.error .op-dot { background: var(--down); }
@keyframes opPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.op-pn { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.op-bar { height: 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-soft); overflow: hidden; }
.op-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--violet))); transition: width .6s ease; }
.op-prog.paused .op-bar i { background: #d99a2b; }
.op-prog.done .op-bar i { background: var(--up); }
.op-times { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 12px; color: var(--muted); }
.op-times b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 620; }
.op-lock { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--accent-sf); color: var(--text-2); font-size: 12px; line-height: 1.45; }
.op-lock .ic { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); margin-top: 1px; }
.op-lock.bad { background: color-mix(in srgb, var(--down) 10%, transparent); }
.op-lock.bad .ic { color: var(--down); }
.op-cancel:hover { color: var(--down); border-color: var(--down); }
.op-best { margin-top: 16px; padding: 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); display: flex; flex-direction: column; gap: 12px; }
.op-bp { margin-top: 4px; font-size: 13px; color: var(--text-2); }
.op-bp b { color: var(--text); font-family: var(--mono); }
.op-bk { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.op-bk > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-soft); }
.op-bk i { font-style: normal; font-size: 11px; color: var(--muted); }
.op-bk b { font-size: 12.5px; font-weight: 560; font-variant-numeric: tabular-nums; }
.op-ba { display: flex; gap: 8px; flex-wrap: wrap; }
.op-each { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; margin-top: 14px; }
.op-ec { min-width: 0; }
.op-ec .lx-sub { margin-top: 0; }
.op-dsr { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--panel-2); }
.op-dsr > div { display: flex; flex-direction: column; gap: 3px; }
.op-dsr b { font-size: 12.5px; } .op-dsr span { font-size: 11.5px; color: var(--muted); }
.op-tbl td, .op-tbl th { white-space: nowrap; }
@media (max-width: 760px) { .op-r { grid-template-columns: 1fr auto; } .op-mode, .op-auto, .op-rng, .op-n, .op-off { grid-column: 1 / -1; } .op-r.on .op-mode { grid-row: auto; } .op-go { flex-direction: column; align-items: stretch; } }
/* глобальный индикатор подбора */
.opchip { position: fixed; right: 72px; bottom: 18px; z-index: 2400; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.opchip:hover { border-color: var(--accent); }
.opchip .op-dot { background: var(--accent); animation: opPulse 1.6s infinite; }
.opchip.paused .op-dot { background: #d99a2b; animation: none; }
.opchip i { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.opchip u { text-decoration: none; display: block; width: 70px; height: 4px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.opchip u s { display: block; height: 100%; background: var(--accent); }
/* разбор: длинные подписи кнопок переносятся */
.ax-it .btn { max-width: 100%; white-space: normal; text-align: left; height: auto; min-height: 28px; line-height: 1.35; padding: 5px 10px; }
/* «Спросить AI»: кнопка у элемента и мини-чат */
.aq-pill { position: fixed; z-index: 2600; display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid color-mix(in srgb, var(--violet) 40%, var(--line)); box-shadow: 0 6px 20px rgba(0,0,0,.18); backdrop-filter: blur(8px); animation: aqIn .14s ease-out; }
.aq-pill[hidden] { display: none; }
.aq-pill button { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border: 0; border-radius: 999px; background: transparent; color: var(--violet); font: inherit; font-size: 11.5px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.aq-pill button:hover { background: color-mix(in srgb, var(--violet) 14%, transparent); }
.aq-pill button[data-a="toon"] { color: var(--accent); }
.aq-pill button[data-a="toon"]:hover { background: var(--accent-sf); }
.aq-pill svg { width: 13px; height: 13px; }
@keyframes aqIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.aq { position: fixed; right: 20px; bottom: 20px; z-index: 2650; width: min(400px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 40px)); display: flex; flex-direction: column; border-radius: 16px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--violet) 30%, var(--line)); box-shadow: 0 24px 60px rgba(0,0,0,.28); opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .18s, transform .18s; overflow: hidden; }
.aq.on { opacity: 1; transform: none; }
.aq-h { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, color-mix(in srgb, var(--violet) 8%, var(--panel)), var(--panel)); }
.aq-orb { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(circle at 35% 30%, #FFD9A0, #F2A93B 35%, #8A5CFF 75%, #2A3CFF); box-shadow: 0 0 14px color-mix(in srgb, var(--violet) 45%, transparent); }
.aq-ht { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.aq-ht b { font-size: 13px; }
.aq-ht span { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aq-b { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.aq-b:hover { background: var(--panel-2); color: var(--text); }
.aq-b svg { width: 15px; height: 15px; }
.aq-list { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.aq-u { align-self: flex-end; max-width: 85%; padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: var(--accent-sf); color: var(--text); font-size: 12.5px; line-height: 1.45; }
.aq-a { align-self: flex-start; max-width: 92%; padding: 9px 12px; border-radius: 12px 12px 12px 4px; background: var(--panel-2); color: var(--text); font-size: 13px; line-height: 1.55; }
.aq-a.err { color: var(--down); }
.aq-a.wait { display: flex; gap: 4px; align-items: center; min-height: 34px; }
.aq-a.wait i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); animation: aqDot 1s infinite ease-in-out; }
.aq-a.wait i:nth-child(2) { animation-delay: .15s; } .aq-a.wait i:nth-child(3) { animation-delay: .3s; }
@keyframes aqDot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.aq-in { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line-soft); }
.aq-in textarea { flex: 1 1 auto; resize: none; min-height: 36px; max-height: 120px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; line-height: 1.4; }
.aq-in textarea:focus { outline: none; border-color: var(--violet); }
.aq-send { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--violet); color: #fff; cursor: pointer; }
.aq-send:disabled { opacity: .45; cursor: default; }
.aq-send svg { width: 16px; height: 16px; }
.aq-foot { padding: 0 14px 10px; font-size: 10.5px; color: var(--muted); }
/* ── /Анализ: вкладки и история ── */

/* ── экран «считает»: кольцо, график, прошло/осталось ─────────────────── */
.rl { display: grid; justify-items: center; gap: 12px; padding: 30px 18px 26px; color: var(--muted); }
.rl-stage { display: grid; justify-items: center; gap: 14px; width: min(380px, 100%); }
.rl-chart { width: 100%; height: 84px; color: var(--accent); overflow: visible;
  border-bottom: 1px solid var(--line); }
.rl-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; }
.rl-dot { fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); transition: opacity .3s; }
.rl-ring { position: relative; width: 116px; height: 116px; order: -1; }
.rl-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rl-ring circle { fill: none; stroke-width: 7; }
.rl-track { stroke: var(--panel-2); }
.rl-arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 0 100;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent)); }
.rl-spin { stroke: var(--accent); opacity: .35; stroke-dasharray: 12 88; stroke-linecap: round;
  transform-origin: 60px 60px; animation: rlSpin 1.3s linear infinite; }
.rl.known .rl-spin { opacity: .14; }
@keyframes rlSpin { to { transform: rotate(360deg); } }
.rl-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--text); font-variant-numeric: tabular-nums; }
.rl-pct b { font-size: 30px; font-weight: 700; letter-spacing: -.5px; }
.rl-pct i { font-style: normal; font-size: 14px; margin: 8px 0 0 2px; color: var(--muted); }
.rl-t { display: grid; justify-items: center; gap: 3px; text-align: center; }
.rl-t b { color: var(--text); font-size: 15px; }
.rl-t span { font-size: 12px; }
.rl-bar { display: none; }
.rl-meta { display: flex; gap: 22px; font-size: 12px; font-variant-numeric: tabular-nums; }
.rl-meta b { color: var(--text); font-weight: 600; }
.rl-note { font-size: 12px; min-height: 16px; }
.rl-stop { margin-top: 2px; }
.rt-live:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .rl-spin { animation: none; } }
.fl-tab { margin: 16px 0 6px; font-size: 13px; }
.fl-tab b { font-weight: 600; color: var(--text); }
.hp-val p { font-weight: 700; color: var(--accent); }

/* ── замечания: скрыть, спросить у AI, показать ─────────────────────────── */
.lx-top { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.lx-top b { color: var(--text); }
.lx-list .w { position: relative; }
.lx-list .w.hid { opacity: .72; }
.lx-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; grid-column: 1 / -1; }
.lx-acts .chip.ghost { opacity: .8; }
.lx-ask { grid-column: 1 / -1; margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--panel-2); display: grid; gap: 8px; }
.lx-q { justify-self: end; max-width: 85%; padding: 6px 10px; border-radius: 10px 10px 2px 10px;
  background: var(--accent-sf); color: var(--text); font-size: 12.5px; }
.lx-a { max-width: 95%; padding: 8px 11px; border-radius: 10px 10px 10px 2px; background: var(--panel);
  border: 1px solid var(--line); font-size: 12.8px; line-height: 1.55; white-space: pre-wrap; color: var(--text); }
.lx-a.err { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.lx-a.busy { color: var(--muted); }
.lx-a .spin { width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px; }
.lx-pre { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-in { display: flex; gap: 6px; }
.lx-in .input { flex: 1; min-width: 0; }

/* ── AI: все разговоры справа ─────────────────────────────────────────────── */
.ai-wrap { flex: 1 1 auto; display: flex; min-height: 0; width: 100%; }
.ai-wrap .ai-page { min-width: 0; }
.ai-side { flex: 0 0 300px; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line);
  background: var(--panel); padding: 12px 10px; gap: 8px; }
.ai-side[hidden] { display: none; }
.as-h { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 13px; }
.as-list { flex: 1 1 auto; overflow: auto; display: grid; align-content: start; gap: 12px; padding-right: 2px; }
.as-g { display: grid; gap: 2px; }
.as-gn { display: flex; align-items: baseline; gap: 8px; padding: 2px 6px 4px; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.as-gn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-gn em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--accent); }
.as-row { display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto auto; column-gap: 2px;
  padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.as-row:hover { background: var(--panel-2); }
.as-row.cur { background: var(--accent-sf); }
.as-row .as-t { grid-column: 1; font-size: 12.8px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-row small { grid-column: 1; grid-row: 2; font-size: 11px; color: var(--muted); }
.as-row .sp-b { grid-row: 1 / span 2; align-self: center; opacity: 0; }
.as-row:hover .sp-b, .as-row.cur .sp-b { opacity: 1; }
.as-row.edit { display: flex; align-items: center; gap: 6px; cursor: default; background: var(--panel-2); }
.as-row.edit .input { flex: 1; min-width: 0; }
.as-ask { flex: 1; font-size: 12.5px; }
.as-empty { padding: 4px 8px; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .ai-side { position: absolute; right: 0; top: 0; bottom: 0; z-index: 20; box-shadow: -10px 0 30px rgba(0,0,0,.35); } }

/* ── AI: «похоже, забыли» ─────────────────────────────────────────────────── */
.ai-forgot { display: grid; gap: 10px; }
.afg { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-soft, var(--line)); }
.afg.done { opacity: .78; }
.afg-t { display: grid; gap: 3px; }
.afg-t b { font-size: 13px; color: var(--text); }
.afg-t span { font-size: 12.5px; color: var(--text-2, var(--muted)); line-height: 1.5; }
.afg-a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.afg-a em { font-style: normal; font-size: 12px; color: var(--muted); margin-right: 6px; }
.afg-a em.ok { color: var(--up, #2FD17F); }
.afg-v { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
.afg-v input { width: 70px; }
.afg-v i { font-style: normal; font-size: 12px; color: var(--muted); }

/* Скрытый раздел не рисуется и не анимируется, пока его не открыли. */
.view.parked { visibility: hidden; content-visibility: hidden; }

/* ── Блок-схема алгоритма (flow.js) ─────────────────────────────────────────
   Главный вид стратегии: формы блоков по ГОСТ 19.701, столбиком сверху вниз. */
.fc { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.fc-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; flex-wrap: wrap; }
.fc-bar .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.fc-chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text); }
.fc-zoom { min-width: 46px; text-align: center; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fc-tip { color: var(--muted); font-size: 12px; margin-right: 6px; }
.fc-man { font-weight: 600; }
.fc-wrap { flex: 1; min-height: 0; overflow: auto; position: relative; cursor: grab;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px; }
.fc-wrap.grab { cursor: grabbing; user-select: none; }
.fc-size { position: relative; margin: 0 auto; }
.fc-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.fc-edges { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.fc-e { fill: none; stroke: var(--text-2); stroke-width: 1.6; }
.fc-e.no { stroke-dasharray: none; }
.fc-e.back { stroke: var(--muted); stroke-dasharray: 5 4; }
.fc-ah { fill: var(--text-2); }
.fc-dot { fill: var(--text-2); }
.fc-lab { font-size: 11.5px; fill: var(--text-2); font-weight: 600; stroke: none; }
.fc-lab.no { fill: var(--down); }
.fc-lab.back { fill: var(--muted); font-weight: 500; }
.fc-node { position: absolute; cursor: default; }
.fc-sh { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fc-s { fill: var(--panel); stroke: color-mix(in srgb, var(--text) 38%, transparent); stroke-width: 1.4; }
.fc-t { position: relative; padding: 10px 16px; font-size: 13px; line-height: 1.45; color: var(--text); }
.fc-node.k-term .fc-t { text-align: center; font-weight: 600; padding: 9px 16px; }
.fc-node.k-io .fc-t { text-align: center; padding: 9px 30px; }
.fc-node.k-loop .fc-t, .fc-node.k-loopEnd .fc-t { text-align: center; font-weight: 600; padding: 10px 18px; }
.fc-node.k-loop .fc-s, .fc-node.k-loopEnd .fc-s { fill: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.fc-node.k-dec .fc-t { padding: 12px 40px; text-align: center; }
.fc-node.k-dec .fc-s { fill: color-mix(in srgb, #4F8CFF 7%, var(--panel)); stroke: color-mix(in srgb, #4F8CFF 55%, var(--line)); }
.fc-node.k-sub .fc-t { padding: 10px 24px; text-align: center; }
.fc-node.k-sub .fc-s { fill: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.fc-node.k-proc .fc-t { padding: 9px 14px; }
.fc-c { margin: 1px 0; }
.fc-c > b { color: #4F8CFF; font-weight: 600; margin-right: 2px; }
.fc-c i, .fc-a i { color: var(--text-2); font-style: normal; font-size: 12px; }
.fc-why { color: var(--muted) !important; }
.fc-once { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.fc-title { font-weight: 700; font-size: 12.5px; margin-bottom: 4px; color: var(--text); cursor: text; }
.fc-a { padding: 3px 0 3px 9px; border-left: 3px solid color-mix(in srgb, var(--text) 18%, transparent); margin: 3px 0; }
.fc-a.k-buy { border-left-color: var(--up); }
.fc-a.k-sell { border-left-color: var(--down); }
.fc-a.k-mem { border-left-color: #8B7CF6; }
.fc-lot { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 9px; margin-left: 4px;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2); }
.fc-n { color: var(--accent); font-weight: 700; cursor: pointer; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  font-variant-numeric: tabular-nums; }
.fc-n:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 3px; }
.fc-v { color: #8B7CF6; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fc-v sub { font-size: 9.5px; margin-left: 1px; }
.fc-v:hover { text-decoration: underline dotted; }
.fc-in { font: inherit; font-weight: 700; color: var(--text); background: var(--panel-2, var(--panel)); border: 1px solid var(--accent);
  border-radius: 5px; padding: 0 4px; height: 22px; outline: none; }
.fc-node.fc-off { opacity: .45; }
.fc-node.fc-off .fc-t { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text) 30%, transparent); }
.fc-node.fc-click { cursor: pointer; }
.fc-node.hl .fc-s { stroke: var(--accent); stroke-width: 2.2; }
.fc-cnt { color: var(--muted); font-weight: 500; font-size: 12px; }
.fc-what { color: var(--accent) !important; }
.fc-node small { color: var(--text-2); font-size: 12px; }
.fc-frame { position: absolute; border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 3%, transparent); }
.fc-ft { position: absolute; left: 12px; top: 7px; border: 0; background: transparent; font: inherit; font-weight: 700;
  font-size: 13px; color: var(--text); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.fc-ft span { color: var(--muted); font-weight: 500; font-size: 11.5px; margin-left: 6px; }
.fc-ft:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.fc-tools { position: absolute; z-index: 20; display: flex; gap: 3px; padding: 3px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); }
.fc-tools button { border: 0; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 4px 9px; border-radius: 6px; cursor: pointer; }
.fc-tools button:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.fc-tools button[hidden] { display: none; }
.fc-pop { position: absolute; z-index: 30; width: 370px; max-width: calc(100% - 12px); max-height: 60%; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--text); }
.fc-pop p { margin: 6px 0 8px; color: var(--text-2); }
.fc-pop.menu { width: 220px; padding: 5px; display: flex; flex-direction: column; }
.fc-pop.menu button { text-align: left; border: 0; background: transparent; color: var(--text); font: inherit; padding: 7px 10px;
  border-radius: 7px; cursor: pointer; }
.fc-pop.menu button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.fc-pop.menu button.bad { color: var(--down); }
.fc-pop.mini { width: auto; padding: 6px 12px; transform: translateX(-50%); }
.fc-q { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.fc-ask { display: flex; gap: 6px; }
.fc-ask .input { flex: 1; min-width: 0; }
.fc-ans { margin-top: 10px; padding: 9px 11px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 8%, transparent);
  white-space: pre-wrap; }
.fc-ans.busy { color: var(--muted); }
.fc-pop.vars table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fc-pop.vars td { padding: 4px 6px; border-top: 1px solid var(--line); vertical-align: top; }
.fc-pop.vars code { color: var(--muted); }
.fc-empty { position: absolute; left: 20px; top: 30px; width: 380px; display: flex; flex-direction: column; gap: 10px;
  padding: 22px; border: 1px dashed var(--line); border-radius: 14px; background: var(--panel); font-size: 13.5px; }
.fc-empty span { color: var(--text-2); }
/* «+»: добавить схему, правила или код рядом с блок-схемой. */
.alt-add { font-size: 17px; font-weight: 600; width: 30px; height: 30px; margin-left: -4px; }
.alt-pop { padding: 10px; gap: 6px; min-width: 280px; }
.alt-pop > b { font-size: 12.5px; padding: 2px 4px 4px; }
.alt-pop label { display: flex; gap: 9px; align-items: flex-start; padding: 6px 6px; border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.alt-pop label:hover { background: var(--panel-2); }
.alt-pop label span { display: flex; flex-direction: column; }
.alt-pop label i { padding: 0; font-style: normal; }
#builderModes .tab[hidden] { display: none; }
#builderModes .tab[data-m="flow"] { white-space: nowrap; }
.fc-sh { max-width: none; max-height: none; }
.fc-more { border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--accent); cursor: pointer;
  padding: 2px 6px; margin-top: 2px; border-radius: 6px; }
.fc-more:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.fc-head { position: absolute; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--text-2);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.fc-head b { color: var(--text); font-size: 14px; }
.fc-node.k-proc .fc-t small, .fc-node.k-dec .fc-t small { color: var(--text-2); font-size: 12px; }
/* AI сбоку у блок-схемы: тот же разговор, что во вкладке AI. */
.fc-chat { position: absolute; right: 0; top: 49px; bottom: 0; width: 370px; z-index: 25; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(0,0,0,.12); }
.fc.chat-on .fc-wrap { margin-right: 370px; }
.fcc-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.fcc-h b { color: #7B5CF0; }
.fcc-h span:not(.grow) { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fcc-h button { border: 0; background: transparent; color: var(--text-2); font-size: 15px; cursor: pointer; padding: 3px 7px; border-radius: 6px; }
.fcc-h button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.fcc-b { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.fcc-m { padding: 8px 11px; border-radius: 10px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; max-width: 92%; }
.fcc-m.me { align-self: flex-end; background: color-mix(in srgb, #7B5CF0 12%, var(--panel)); }
.fcc-m.bot { align-self: flex-start; background: color-mix(in srgb, var(--text) 5%, transparent); }
.fcc-m.err { background: color-mix(in srgb, var(--down) 12%, transparent); }
.fcc-m.warn { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.fcc-m.ok { background: color-mix(in srgb, var(--up) 12%, transparent); }
.fcc-m.sys { color: var(--muted); font-size: 12.5px; max-width: 100%; }
.fcc-m.busy { animation: fccPulse 1.2s ease-in-out infinite; }
@keyframes fccPulse { 50% { opacity: .45; } }
.fcc-link { border: 0; background: transparent; color: var(--accent); cursor: pointer; font: inherit; font-size: 12.5px; padding: 0 2px; }
.fcc-q { margin-bottom: 8px; } .fcc-q div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fcc-qa { display: flex; gap: 6px; }
.fcc-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px 8px; }
.fcc-in { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: flex-end; }
.fcc-in textarea { flex: 1; min-width: 0; resize: none; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.fcc-in .btn { height: 36px; min-width: 38px; }
.ai-asedit { display: block; margin-top: 6px; }
/* ── Свои данные: сделки журнала на графике, стрелки сделок, онлайн, загрузка ── */
:root { --act-journal: #22B8CF; --act-bad: #FF4040; }
[data-theme="light"] { --act-journal: #0B8FA3; --act-bad: #D92D20; }
#jrnBtn.on { background: color-mix(in srgb, var(--act-journal) 16%, transparent); color: var(--act-journal); }
#upBtn, #jrnBtn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#upBtn .ico, #jrnBtn .ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.tnav {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); font: 12px/1.2 var(--mono); font-variant-numeric: tabular-nums;
  animation: fade .12s ease-out;
}
.tnav[hidden] { display: none; }
.tnav.bad { border-color: var(--act-bad); }
.tnav-b, .tnav-x {
  width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px;
  background: transparent; color: var(--text); cursor: pointer;
}
.tnav-b svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tnav-b:hover:not(:disabled), .tnav-x:hover { background: var(--raise); }
.tnav-b:disabled { opacity: .3; cursor: default; }
.tnav-x { width: 24px; color: var(--muted); font-size: 11px; }
.tnav-t { display: flex; gap: 8px; align-items: baseline; padding: 0 6px; white-space: nowrap; }
.tnav-s { color: var(--muted); }
.tnav .pos { color: var(--up); } .tnav .neg { color: var(--down); }
.tnav-bad { color: #fff; background: var(--act-bad); border-radius: 5px; padding: 1px 6px; font-weight: 600; }

.livebadge {
  position: absolute; right: 80px; top: 10px; z-index: 5; display: flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--mono); color: var(--up); letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--up) 12%, transparent);
}
.livebadge[hidden] { display: none; }
.livebadge i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); animation: livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse { 50% { opacity: .25; } }

.up-tabs { display: flex; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid var(--line); }
.up-tabs button {
  border: 0; background: transparent; color: var(--muted); padding: 8px 12px; cursor: pointer;
  border-bottom: 2px solid transparent; font: inherit; font-weight: 560;
}
.up-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.up-modal h4 { margin: 16px 0 6px; font-size: 13px; }
.up-lead { margin: 0 0 4px; color: var(--muted); }
.up-code {
  margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line);
  font: 12px/1.5 var(--mono); overflow-x: auto; white-space: pre;
}
.up-rules { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.up-rules b, .up-note b { color: var(--text); }
.up-rules code { font: 12px var(--mono); color: var(--text); }
.up-note { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin: 12px 0 0; }
.up-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.up-form { display: grid; grid-template-columns: 160px 1fr; gap: 10px 12px; margin-top: 14px; }
.up-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.up-form .up-file, .up-form .up-mode { grid-column: span 1; }
.up-form .up-mode { grid-column: 1 / -1; }
.up-status { color: var(--muted); font-size: 12.5px; }
.up-status.err { color: var(--act-bad); }
.up-ok, .up-err { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.5; }
.up-ok { background: color-mix(in srgb, var(--up) 10%, transparent); border: 1px solid color-mix(in srgb, var(--up) 35%, transparent); }
.up-err { background: color-mix(in srgb, var(--act-bad) 9%, transparent); border: 1px solid color-mix(in srgb, var(--act-bad) 40%, transparent); }
.up-err ul { margin: 6px 0 0; padding-left: 18px; }
.up-bad { color: var(--act-bad); }
.up-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.up-tbl th, .up-tbl td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.up-tbl th { color: var(--muted); font-weight: 560; }
.up-act { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 560px) { .up-form { grid-template-columns: 1fr; } }

/* невалидные сделки журнала: цена, которой не было в ленте */
tr.jn-inv td { background: color-mix(in srgb, var(--act-bad) 7%, transparent); }
tr.jn-inv td:first-child { box-shadow: inset 3px 0 0 var(--act-bad); }
.jn-invb {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; font-style: normal;
  font-size: 11px; font-weight: 600; color: #fff; background: var(--act-bad); cursor: help; vertical-align: 1px;
}
.jn-invbar {
  display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px;
  border-radius: 10px; font-size: 12.5px; line-height: 1.5;
  background: color-mix(in srgb, var(--act-bad) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--act-bad) 40%, transparent);
}
.jn-invbar b { color: var(--act-bad); }
.jn-invbar span { color: var(--text); flex: 1 1 320px; }
.jn-invbar svg { width: 16px; height: 16px; stroke: var(--act-bad); flex: 0 0 auto; margin-top: 1px; }
table td i.jn-invb, .jn-dr header .jn-invb { color: #fff; font-style: normal; }