/* ═══════════════════════════════════════
   THEME VARIABLES
═══════════════════════════════════════ */
[data-theme="dark"] {
  --bg:       #141414;
  --surface:  #1a1a1a;
  --card:     #212121;
  --card2:    #1e1e1e;
  --b0:       rgba(255,255,255,.07);
  --b1:       rgba(255,255,255,.13);
  --text:     rgba(255,255,255,.72);
  --text2:    #ffffff;
  --dim:      rgba(255,255,255,.22);
  --dim2:     rgba(255,255,255,.42);
  --accent:   #c9a84c;
  --accent2:  #e8c96b;
  --shadow:   rgba(0,0,0,.6);
  --inv:      0;
  /* [BANK-TREE-SEM] Текст НА золотой заливке. Отдельный токен нужен потому, что
     --accent в тёмной теме светлый (#c9a84c), а в светлой тёмный (#8a6010): один
     фиксированный цвет читается только в одной из тем. --inv для этого не годится —
     это ЧИСЛО для filter:invert(), а не цвет. */
  --on-accent: #141414;
}
[data-theme="light"] {
  --bg:       #f2ede4;
  --surface:  #faf7f2;
  --card:     #f5f0e8;
  --card2:    #ede8de;
  --b0:       rgba(80,50,10,.1);
  --b1:       rgba(80,50,10,.18);
  --text:     #2e2416;
  --text2:    #120e08;
  --dim:      rgba(0,0,0,.38);
  --dim2:     rgba(0,0,0,.60);
  --accent:   #8a6010;
  --accent2:  #6e4c0a;
  --shadow:   rgba(0,0,0,.14);
  --inv:      1;
  --on-accent: #f5f0e8;
}

/* SEMANTIC */
:root {
  --green:  #7db88a; --red:    #c97070;
  --orange: #c9a84c; --purple: #8ab4b8;
  /* [BANK-TREE-SEM · фаза 2] Бирюза обособляет зону юнит-экономики в дереве
     стоимости («тот же банк — в расчёте на клиента»). Отдельный цвет нужен, потому
     что зона не является частью каскада: она пересчитывает уже посчитанное, и
     красить её золотом тождества значило бы обещать ещё одно звено стоимости.
     Оттенок взят из уже существующей --purple (#8ab4b8) семьи, а не из мокапа:
     дерево обязано пережить светлую тему, а мокап дарк-онли. */
  --teal:   #6fa8a4;
  /* Чернила на средних заливках сегментов водопада (--co, --purple, --red). Сами
     заливки тема-независимы (объявлены здесь), поэтому и чернила одни на обе темы. */
  --on-fill: #1a1508;
  --cp: #c9a84c; --cm: #7db88a; --co: #c47b3a; --cf: #8ab4b8; --cl: #c97070;
  --font-h: 'Playfair Display', serif;
  --font-m: 'Golos Text', sans-serif;
  /* [PATCH UC-112-FE: semantic status tokens — Forbes-muted palette] */
  --color-error:   #c97070;  /* same as --red — muted Forbes-palette red */
  --color-success: #7db88a;  /* same as --green — muted Forbes-palette green */
  /* [PATCH B4b/B4a: tint vars — используются в unit-economics.css и carry-badge без хардкод-цветов] */
  --bg-tint-white:       rgba(255,255,255,0.02);   /* зебра-полосы таблиц */
  --bg-tint-error:       rgba(201,112,112,0.04);   /* фон строки с нарушением BRQ-074 */
  --bg-tint-accent:      rgba(200,168,76,0.1);     /* фон активного таба (--accent tint) */
  --bg-tint-success:     rgba(125,184,138,0.08);   /* фон carry-badge / финальный рейтинг */
  --border-tint-success: rgba(125,184,138,0.3);    /* граница carry-badge (--green tint) */
  /* [PATCH BANK-GHOST: палитра призрачной «цели»]
     --dim2 объявлен в обеих темах, поэтому var() разрешается по теме документа —
     отдельных светлого/тёмного значений тут не нужно. Пунктир, а не только цвет:
     «не подкреплено» уже закодировано штриховкой коридора (.fr010-hatch), и один
     концепт должен иметь одну визуальную грамматику — заодно переживает светлую
     тему и цветовую слепоту. */
  --ghost-fg:   var(--dim2);
  --ghost-op:   .62;
  --ghost-dash: 1px dashed var(--b1);
}

/* [PATCH LIGHT-SEMANTICS] Светлые пары семантики и категорий.
   Проблема: блок SEMANTIC выше объявляет их в :root ОДИН раз для обеих тем,
   а подобраны они под тёмный фон — на кремовом #f2ede4 зелёный #7db88a даёт 2.0:1,
   золото #c9a84c — 2.1:1 при норме AA 4.5:1.
   Почему отдельный блок, а не строки внутри [data-theme="light"]: тот блок стоит
   ВЫШЕ :root, специфичность у них равная (0,1,0) — победил бы :root. Селектор
   :root[data-theme="light"] даёт (0,2,0) и не зависит от порядка.
   Значения — из pa_tokens v1.1 (--pos/--neg/--warn/--purple), утверждённых
   DEC-PA-COLOR-01: design_handoff/portal_v1/project/uploads/pa_tokens.css.
   Тёмная тема не затрагивается: :root остаётся её значениями. */
:root[data-theme="light"] {
  --green:  #1f7a43;   /* ← pa_tokens --pos  (light) */
  --red:    #9d2b2b;   /* ← pa_tokens --neg  (light) */
  --orange: #8f5714;   /* ← pa_tokens --warn (light) */

  /* Категорийные цвета — не только заливки: bank/bank_ui.js:590 красит ими ТЕКСТ
     счётчика .cat-ct поверх --card2. Тёмные пары тех же семейств. */
  --cp: #8a6010;  /* Продукты — золото  */
  --cm: #1f7a43;  /* Рынок    — зелёный */
  --co: #8f5714;  /* Операции — оранж   */
  --cf: #4f7f85;  /* Финансы  — бирюза (pa_tokens --purple light) */
  --cl: #9d2b2b;  /* Люди     — красный */
}

/* ═══ RESET ═══ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; }
body { background:var(--bg); color:var(--text); font-family:var(--font-m); display:flex; flex-direction:column; transition:background .3s, color .3s; }

/* ═══════════════════════════════════════
   HEADER — compact & responsive
═══════════════════════════════════════ */
header {
  display:flex; align-items:stretch; height:60px; flex-shrink:0;
  background:var(--surface); border-bottom:1px solid var(--b0);
  box-shadow:0 1px 8px var(--shadow);
}
.h-logo {
  padding:0 14px; display:flex; flex-direction:column; justify-content:center;
  border-right:1px solid var(--b0); flex-shrink:0;
}
/* [PATCH UIFIX-1] Лок-ап шапки: двухтонный сплит (яркая первая половина слова +
   приглушённая вторая) — тот же приём, что в lp-nav лендинга. Только CSS-переменные. */
.h-logo-l1 {
  font-family:var(--font-h); font-size:14px; font-weight:700; line-height:1;
  color:var(--dim2); white-space:nowrap;
}
.h-logo-l1 b { color:var(--accent); font-weight:700; }
.h-logo-l2 {
  font-family:'Golos Text',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.8px; margin-top:3px; color:var(--dim2); white-space:nowrap;
}
.h-logo-l2 b { color:var(--text2); font-weight:700; }
.h-kpis { display:flex; flex:1; overflow:hidden; min-width:0; }
.hk {
  flex:1; border-right:1px solid var(--b0); min-width:0;
  display:flex; flex-direction:column; justify-content:center; padding:0 14px;
}
.hk-hero { flex:1.5; background:rgba(201,168,76,.04); }
.hk-l { font-size:9px; color:var(--dim2); letter-spacing:.6px; text-transform:uppercase; margin-bottom:2px; white-space:nowrap; }
.hk-row { display:flex; align-items:baseline; gap:4px; min-width:0; overflow:hidden; }
.hk-v { font-family:var(--font-h); font-size:19px; font-weight:700; color:var(--text2); white-space:nowrap; line-height:1; transition:color .3s; }
/* [PATCH UIFIX-3] Чип-дельта может сжиматься и обрезаться многоточием: раньше
   flex-shrink:0 при overflow:hidden у .hk-row резал подпись посреди слова. */
.hk-d { font-size:10px; font-weight:600; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.hk-d.up { color:var(--green); } .hk-d.dn { color:var(--red); }
.h-ip-bar {
  display:flex; flex-direction:column; justify-content:center;
  padding:0 14px; border-left:1px solid var(--b0); border-right:1px solid var(--b0);
  flex-shrink:0; min-width:84px;
}
.h-ip-top { display:flex; align-items:baseline; gap:3px; margin-bottom:4px; }
.h-ip-lbl { font-size:8px; color:var(--dim2); letter-spacing:.6px; text-transform:uppercase; flex:1; }
.h-ip-num { font-family:var(--font-h); font-size:18px; font-weight:700; color:var(--accent); transition:color .3s; }
.h-ip-max { font-size:8px; color:var(--dim); }
.h-ip-track { height:3px; background:var(--b0); border-radius:2px; overflow:hidden; }
.h-ip-fill { height:100%; background:var(--accent); border-radius:2px; transition:width .4s ease, background .3s; }
.h-controls { display:flex; align-items:center; gap:7px; padding:0 10px; flex-shrink:0; }
.h-timer { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 2px; }
.h-timer-l { font-size:7px; color:var(--dim); letter-spacing:.8px; text-transform:uppercase; line-height:1; }
.h-timer-v { font-family:var(--font-h); font-size:20px; font-weight:700; color:var(--accent); line-height:1.2; }
.h-timer-v.urgent { color:var(--red); animation:blink 1s infinite; }
.h-btn { padding:0 16px; height:38px; background:var(--accent); color:#141414; border:none; border-radius:5px; cursor:pointer; font-family:var(--font-h); font-size:11px; font-weight:700; letter-spacing:.4px; transition:all .15s; white-space:nowrap; flex-shrink:0; }
.h-btn:hover { filter:brightness(1.1); }
.h-btn.locked { background:var(--green); pointer-events:none; }

/* [PATCH BUG-theme-toggle-missing-control: восстановлено — удалено вместе с разметкой в
   d4b6df2. Дорожка на var(--b1) (было none), ползунок на var(--accent) в обеих темах
   (старое правило красило светлую тему в var(--orange) — тема-независимый токен,
   даёт светлое золото по светлой теме; --accent сам инвертируется по теме и остаётся
   контрастным). Только CSS-переменные — CLAUDE.md §4 «Никаких хардкод-цветов в JS»
   распространяется и на этот класс по духу правила. */
.theme-toggle { width:32px; height:18px; border-radius:9px; border:1px solid var(--b1); cursor:pointer; background:var(--card2); position:relative; transition:background .3s; flex-shrink:0; padding:0; --toggle-x:0; }
.theme-toggle::after { content:''; position:absolute; top:1px; left:1px; width:14px; height:14px; border-radius:50%; background:var(--accent); transition:transform .25s, background .3s; transform:translateX(var(--toggle-x)); }
[data-theme="light"] .theme-toggle { --toggle-x:14px; }
.theme-icon { font-size:11px; }

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.layout { display:flex; flex:1; overflow:hidden; }

/* ═══ LEFT: DECISIONS ═══ */
.left {
  width:380px; flex-shrink:0; display:flex; flex-direction:column;
  background:var(--surface); border-right:1px solid var(--b0); overflow:hidden;
}

/* IP BAR */
.ip-wrap {
  padding:10px 14px; border-bottom:1px solid var(--b0); flex-shrink:0;
  background:var(--card);
}
.ip-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.ip-lbl { font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim2); }
.ip-nums { display:flex; align-items:baseline; gap:3px; }
.ip-left { font-family:var(--font-h); font-size:18px; font-weight:700; transition:color .3s; }
.ip-left.full{color:var(--accent);} .ip-left.half{color:var(--orange);} .ip-left.low{color:var(--red);animation:blink 1.5s infinite;}
.ip-total { font-size:10px; color:var(--dim); }
.ip-track { height:4px; background:var(--b0); border-radius:2px; overflow:hidden; margin-bottom:6px; }
.ip-fill  { height:100%; border-radius:2px; transition:width .4s ease, background .3s; }
.ip-tiers { display:flex; gap:4px; }
.ip-tier  { flex:1; text-align:center; padding:3px; border-radius:4px; border:1px solid var(--b0); }
.ip-tier-cost { font-size:10px; font-weight:700; font-family:var(--font-h); }
.ip-tier-sub  { font-size:8px; color:var(--dim2); margin-top:1px; }

/* SCROLL AREA */
.left-scroll { flex:1; overflow-y:auto; padding:10px 12px 20px; display:flex; flex-direction:column; gap:8px; }

/* ═══ CATEGORY BLOCK ═══ */
.cat {
  border:1px solid var(--b0); border-radius:8px; overflow:hidden;
  flex-shrink:0; background:var(--card);
}
.cat-hd {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  cursor:pointer; user-select:none; transition:background .15s;
  border-left:3px solid; /* color set inline */
}
.cat-hd:hover { background:var(--card2); }
.cat-nm { font-size:10px; font-weight:600; color:var(--text2); flex:1; }
.cat-ct { font-size:8px; padding:1px 6px; border-radius:8px; font-weight:500; }
.cat-chevron { font-size:8px; color:var(--dim); transition:transform .2s; }
.cat-hd.open .cat-chevron { transform:rotate(90deg); }

.cat-body { display:none; border-top:1px solid var(--b0); padding:10px 12px; }
.cat-body.open { display:block; }

/* [FR-010-UI §4.1] Счётчик вклада инициатив в шапке категории.
   Рядом с чипом «N слайдера»; при нуле инициатив JS ставит [hidden]. */
.cat-init-ct { font-size:8px; font-weight:600; letter-spacing:.3px;
  padding:2px 6px; border-radius:7px; margin-left:6px; white-space:nowrap;
  background:var(--bg-tint-accent); color:var(--accent); }
.cat-init-ct[hidden] { display:none; }
.cat-init-ct.neg { background:var(--bg-tint-error); color:var(--red); }

/* [FR-010-UI §4.2] Подсветка «+ Предложить инициативу»: слайдер категории уведён
   от базовой линии, а инициатив в категории нет. Пульс ровно 2 цикла, дальше
   статичная рамка — без бейджей, тултипов-предупреждений и блокировок. */
.s12-tag-add.suggest-glow {
  border:1px solid var(--accent) !important;
  color:var(--accent) !important;
  background:var(--bg-tint-accent) !important;
  animation:suggestGlow 1.4s ease-in-out 2;
}
@keyframes suggestGlow {
  0%,100% { box-shadow:0 0 0 0 transparent; }
  50%     { box-shadow:0 0 0 3px var(--bg-tint-accent); }
}
@media (prefers-reduced-motion:reduce) {
  .s12-tag-add.suggest-glow { animation:none; }
}

/* [FR-010-UI §4.3] КОРИДОР ЦЕЛИ НА ТРЕКЕ СЛАЙДЕРА
   Анатомия: тонкая линия (4px) — весь диапазон; приглушённая заливка до засечки
   базы — carry-over; засечка базовой линии; коридор 8px от засечки к бегунку;
   внутри коридора сплошное золото — подкреплённая часть, штриховка — остаток.
   Класс .fr010 ставит ТОЛЬКО банковский путь (bank/bank_corridor.js), поэтому
   телеком-дорожка s12 остаётся ровно такой, какой была. */
.s12-track-wrap.fr010 .s12-track-bg { height:4px; background:var(--b1); }
/* Собственные заливки s12 несут другую семантику (цель/достигнуто) и наложились
   бы на коридор — в банке их гасим, а не переопределяем. */
.s12-track-wrap.fr010 .s12-fill-target,
.s12-track-wrap.fr010 .s12-fill-achieved,
.s12-track-wrap.fr010 .s12-dot-achieved,
.s12-track-wrap.fr010 .s12-lbl-achieved { display:none !important; }
/* Засечка базовой линии — обязательный слой 3, нейтральный серый 2×14 */
.s12-track-wrap.fr010 .s12-base-mark {
  top:-5px; width:2px; height:14px; background:var(--dim2); z-index:3;
}
.fr010-seg { position:absolute; pointer-events:none; }
.fr010-seg[hidden] { display:none; }
/* Слой 2: carry-over до засечки — приглушённый */
.fr010-carry { top:0; height:4px; border-radius:2px 0 0 2px; background:var(--dim); z-index:1; }
/* Слой 5: коридор — 8px, центрирован относительно 4px-линии */
.fr010-fill, .fr010-hatch, .fr010-over, .fr010-outward {
  top:-2px; height:8px; border-radius:4px; z-index:2;
  transition:left .12s ease, width .12s ease;
}
.fr010-fill { background:var(--accent); }
.fr010-hatch { background:repeating-linear-gradient(45deg,
  var(--accent) 0 2px, transparent 2px 6px); opacity:.55; }
/* Переполнение: инициативы дают больше заявленного сдвига */
.fr010-over { background:var(--green); }
/* Инициативы без заявленного сдвига — 70% прозрачности по спецификации */
.fr010-outward { background:var(--accent); opacity:.7; }

/* Бейдж «подкреплено N%» в шапке слайдера */
.fr010-badge { font-size:8px; font-weight:600; letter-spacing:.2px; margin-right:6px; white-space:nowrap; }
.fr010-badge[hidden] { display:none; }
.fr010-badge.ok   { color:var(--green); }
.fr010-badge.part { color:var(--accent); }
.fr010-badge.none { color:var(--dim2); }

/* Подпись под треком — по центру строки min/max */
.fr010-cap { font-size:8px; color:var(--dim2); text-align:center; flex:1; padding:0 6px; }

/* SLIDER */
.sl { margin-bottom:10px; }
.sl-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1px; }
.sl-nm { font-size:10px; color:var(--text); font-weight:500; }
.sl-val { font-size:13px; font-weight:700; color:var(--accent); font-family:var(--font-h); transition:color .2s; }
.sl-desc { font-size:9px; color:var(--dim2); margin-bottom:5px; line-height:1.5; }
.sl-desc .pos{color:var(--green);} .sl-desc .neg{color:var(--red);} .sl-desc .w{color:var(--orange);}
input[type=range] {
  -webkit-appearance:none; width:100%; height:3px; border-radius:2px;
  outline:none; cursor:pointer; background:var(--b0);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--accent); border:2px solid var(--surface);
  box-shadow:0 0 4px rgba(14,165,233,.4); transition:transform .1s;
}
input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.3); }
.sl-ends { display:flex; justify-content:space-between; margin-top:2px; }
.sl-ends span { font-size:8px; color:var(--dim); }

/* PRESET INITIATIVE CHIPS */
.preset-section { margin-top:8px; padding-top:8px; border-top:1px solid var(--b0); }
.preset-lbl { font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim2); margin-bottom:6px; }
.preset-chips { display:flex; flex-direction:column; gap:4px; }

.preset-chip {
  display:flex; align-items:center; gap:7px; padding:6px 9px;
  border-radius:6px; border:1px solid var(--b0); background:var(--card2);
  cursor:pointer; transition:all .15s; user-select:none;
}
.preset-chip:hover:not(.used):not(.cant) { border-color:var(--accent); background:var(--card); }
.preset-chip.used { opacity:.4; cursor:default; border-style:dashed; }
.preset-chip.cant { opacity:.5; cursor:not-allowed; }
.pc-icon { font-size:13px; flex-shrink:0; }
.pc-text { flex:1; font-size:10px; color:var(--text); line-height:1.4; }
.pc-cost { font-size:9px; font-weight:700; font-family:var(--font-h); padding:2px 5px; border-radius:3px; flex-shrink:0; background:var(--b0); color:var(--dim2); }
.preset-chip:hover:not(.used):not(.cant) .pc-cost { background:var(--accent); color:#fff; }
.preset-chip.used .pc-cost { background:var(--green); color:#fff; }

/* AI INITIATIVE */
.ai-init-section { margin-top:8px; padding-top:8px; border-top:1px solid var(--b0); }
.ai-init-lbl { font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim2); margin-bottom:6px; }

.add-ai-btn {
  width:100%; padding:6px 10px; border:1px dashed var(--b1); border-radius:6px;
  background:none; color:var(--dim2); font-size:10px; cursor:pointer;
  font-family:var(--font-m); transition:all .15s;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.add-ai-btn:hover { border-color:var(--accent); color:var(--accent); }

.ai-form { margin-top:6px; }
.ai-form textarea {
  width:100%; background:var(--bg); border:1px solid var(--b1); border-radius:5px;
  color:var(--text); font-family:var(--font-m); font-size:10px;
  padding:7px 9px; resize:none; outline:none; line-height:1.5;
  transition:border-color .2s;
}
.ai-form textarea:focus { border-color:var(--accent); }
.ai-form textarea::placeholder { color:var(--dim); }
.ai-form-btns { display:flex; gap:5px; margin-top:6px; }
.ai-go { flex:1; padding:6px; border:none; border-radius:5px; cursor:pointer; font-family:var(--font-m); font-size:10px; font-weight:600; background:var(--accent); color:#fff; transition:all .15s; }
.ai-go:hover { filter:brightness(1.1); }
.ai-go:disabled { opacity:.4; cursor:wait; }
.ai-cancel { padding:6px 10px; border:1px solid var(--b1); border-radius:5px; cursor:pointer; font-family:var(--font-m); font-size:10px; color:var(--dim2); background:none; transition:all .15s; }
.ai-cancel:hover { border-color:var(--red); color:var(--red); }

/* AI THINKING */
.ai-thinking { display:flex; align-items:center; gap:5px; padding:6px 0; }
.ai-dot { width:4px; height:4px; border-radius:50%; background:var(--accent); animation:dotP 1.2s infinite; }
.ai-dot:nth-child(2){animation-delay:.4s;} .ai-dot:nth-child(3){animation-delay:.8s;}
.ai-thinking-txt { font-size:10px; color:var(--dim2); }

/* RESULT CARD */
.ai-result {
  background:var(--card); border:1px solid var(--b1); border-radius:7px;
  padding:10px 11px; margin-top:6px; animation:slideUp .2s ease;
}
.ar-top { display:flex; gap:8px; margin-bottom:6px; }
.ar-score { font-family:var(--font-h); font-size:22px; font-weight:700; flex-shrink:0; line-height:1.1; }
.ar-score.h{color:var(--green);} .ar-score.m{color:var(--orange);} .ar-score.l{color:var(--red);}
.ar-info { flex:1; }
.ar-tier { font-size:10px; font-weight:600; margin-bottom:2px; }
.ar-fb { font-size:9px; color:var(--dim2); line-height:1.5; }
.ar-cost { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:5px 8px; border-radius:5px; border:1px solid var(--b1); flex-shrink:0; min-width:46px; }
.ar-cost-v { font-family:var(--font-h); font-size:16px; font-weight:700; line-height:1; }
.ar-cost-l { font-size:7px; text-transform:uppercase; letter-spacing:1px; color:var(--dim2); }
.ar-eff { font-size:9px; color:var(--green); margin-bottom:7px; line-height:1.6; }
.ar-eff .neg { color:var(--red); }
.ar-risk { font-size:9px; color:var(--orange); margin-bottom:6px; }
.ar-btns { display:flex; gap:5px; }
.ar-accept {
  flex:1; padding:6px 10px; border:none; border-radius:5px; cursor:pointer;
  font-family:var(--font-h); font-size:9px; font-weight:700; letter-spacing:.5px;
  background:var(--accent); color:#fff; transition:all .15s;
}
.ar-accept:hover:not(:disabled) { filter:brightness(1.1); }
.ar-accept:disabled { opacity:.35; cursor:not-allowed; }
.ar-skip { padding:6px 10px; border:1px solid var(--b1); border-radius:5px; cursor:pointer; font-family:var(--font-m); font-size:10px; color:var(--dim2); background:none; transition:all .15s; }
.ar-skip:hover { border-color:var(--red); color:var(--red); }

/* ═══════════════════════════════════════
   CENTER: VALUE TREE
═══════════════════════════════════════ */
/* ═══ CENTER PANEL — 3 tabs ═══ */
.mid-panel {
  flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0;
}
.mid-tabs {
  display:flex; flex-shrink:0;
  background:var(--card); border-bottom:2px solid var(--b0);
  padding:0 12px; gap:2px;
}
.mid-tab {
  padding:11px 20px; font-size:11px; font-weight:600; letter-spacing:.3px;
  color:var(--dim2); cursor:pointer; border:none; background:none;
  border-bottom:3px solid transparent; margin-bottom:-2px;
  transition:all .15s; white-space:nowrap; font-family:var(--font-m);
}
.mid-tab:hover { color:var(--text2); background:var(--card2); border-radius:4px 4px 0 0; }
.mid-tab.active {
  color:var(--accent); border-bottom-color:var(--accent);
  background:var(--surface); border-radius:4px 4px 0 0;
}
.mid-view { flex:1; overflow:hidden; display:none; }
.mid-view.active { display:flex; flex-direction:column; }

/* ── TAB A: Value Tree ── */
.tree-panel {
  flex:1; overflow-y:auto; padding:24px 28px;
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.tree-lbl { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); align-self:flex-start; margin-bottom:18px; }

/* ── TAB B: Chart Forecast ── */
.chart-view {
  flex:1; overflow-y:auto; padding:20px 20px 32px;
  display:flex; flex-direction:column; gap:16px;
}
.cv-section-title {
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim2);
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.cv-section-title::after { content:''; flex:1; height:1px; background:var(--b0); }
.cv-chart-wrap {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  padding:4px 0;
}
.cv-chart {
  background:var(--card); border:1px solid var(--b0); border-radius:8px;
  padding:12px 14px 10px; overflow:hidden; min-height:0;
}
.cv-chart-name {
  font-size:11px; font-weight:600; color:var(--text2);
  margin-bottom:6px; letter-spacing:.2px;
}
.cv-chart svg { display:block; width:100%; height:auto; overflow:visible; }
.cv-leg-line.dashed { background:repeating-linear-gradient(90deg,var(--accent) 0 5px,transparent 5px 8px); }

/* ── TAB C: Financial Tables ── */
.table-view {
  flex:1; overflow-y:auto; padding:20px 24px 40px; display:flex; flex-direction:column; gap:24px;
}

/* ── [PATCH BANK-UI-TABS UC-804-FE/UC-805-FE-fix] banking-панели как вкладки mid-panel
     (скролл-паттерн как у .chart-view/.table-view; max-width сохраняет колоночную
     вёрстку контента, рассчитанного на 340px) ── */
.bank-kpi-panel, .bank-statements {
  flex:1; overflow-y:auto;
  padding:20px 24px 40px; box-sizing:border-box;
  width:100%; max-width:560px; margin:0 auto;
  font-family:var(--font-m);
}
/* [BANK-KPI-IP] Вкладка «КПЭ команды» — ВО ВСЮ ШИРИНУ. max-width:560px выше писался под
   прежнее содержимое панели («контента, рассчитанного на 340px»): колонка KPI-карточек и
   корзины дерева. Там его и оставляем — .bank-statements по-прежнему колоночная. Таблица
   КПЭ из шести строк с пятью числовыми колонками в 560px не помещается: правые колонки
   уезжали под горизонтальный скролл, а справа пустовало полэкрана. */
.bank-kpi-panel { max-width:none; }
.ft-section { }
.ft-section-title {
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim2);
  margin-bottom:12px; display:flex; align-items:center; gap:8px; padding-bottom:8px;
  border-bottom:2px solid var(--b0);
}
.ft-section-title span { color:var(--accent); }
.ft-table { width:100%; border-collapse:collapse; }
.ft-table th {
  text-align:left; padding:8px 12px; font-size:10px; letter-spacing:.5px;
  text-transform:uppercase; color:var(--dim2); font-weight:600; border-bottom:1px solid var(--b0);
  white-space:nowrap; background:var(--card2);
}
.ft-table th:not(:first-child) { text-align:right; }
.ft-table td {
  padding:9px 12px; border-bottom:1px solid var(--b0);
  color:var(--text); font-size:13px;
}
.ft-table td:not(:first-child) { text-align:right; font-size:12px; font-weight:500; }
.ft-table tr:last-child td { border-bottom:none; }
.ft-table tr:hover td { background:var(--card); }
.ft-row-total td { font-weight:700; font-size:13px; color:var(--text2) !important; background:var(--card2) !important; }
.ft-row-total td:first-child { border-radius:4px 0 0 4px; }
.ft-row-total td:last-child  { border-radius:0 4px 4px 0; }
.ft-pos { color:var(--green) !important; }
.ft-neg { color:var(--red)   !important; }
.ft-yr-head  { color:var(--dim2); font-size:10px; }
.ft-yr-fcast { color:var(--accent); font-size:10px; font-style:italic; }

/* ROOT — Market Cap */
.t-root {
  border:2px solid var(--accent); border-radius:14px; padding:20px 32px;
  text-align:center; width:300px; cursor:pointer; position:relative;
  transition:all .35s; flex-shrink:0;
  background:linear-gradient(135deg, rgba(201,168,76,.1), transparent);
  box-shadow:0 0 40px rgba(201,168,76,.1);
}
.t-root:hover { border-color:var(--accent2); box-shadow:0 0 56px rgba(201,168,76,.2); }
.t-root:hover .root-hint { opacity:1; }
.root-hint { position:absolute; bottom:-22px; left:0; right:0; text-align:center; font-size:10px; color:var(--accent); opacity:0; transition:opacity .2s; pointer-events:none; }
.tr-lbl { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.tr-v { font-family:var(--font-h); font-size:34px; font-weight:700; color:var(--text2); line-height:1; }
.tr-sub { font-size:10px; color:var(--dim); margin-top:5px; }
.tr-d { font-size:12px; font-weight:600; margin-top:6px; }
.tr-d.up{color:var(--green);} .tr-d.dn{color:var(--red);}

/* [FR-010-UI §3.1/§3.2] ДЕКОМПОЗИЦИЯ ΔMCap НА ВЕРШИНЕ ДЕРЕВА
   Заполняется только банковским путём; `:empty`/`[hidden]` держат телеком-вид
   нетронутым. Цвета — только токены: у проекта есть светлая тема (:root выше),
   и хардкод-хекс из прототипа сломал бы её. */
/* [PATCH BANK-DECLARED-DISPLAY] Шкала «подкреплено инициативами».
   Заменила строку декомпозиции ΔMCap и полосу-мост. Вершина показывает
   ЗАЯВЛЕННЫЙ сценарий, шкала — какая его доля обеспечена инициативами и что
   реально уйдёт в зачёт. Цвета — только токены: у проекта есть светлая тема,
   и хардкод-хекс из прототипа сломал бы её. */
.tr-backing { margin-top:10px; padding-top:9px; border-top:1px solid var(--b0); }
.tr-backing[hidden] { display:none; }
.trbk-head { display:flex; align-items:baseline; gap:6px; font-size:11px; line-height:1.5; }
.trbk-lbl { color:var(--dim2); }
.trbk-pct { font-weight:600; color:var(--accent); }
.trbk-track { height:6px; border-radius:3px; overflow:hidden;
  background:var(--b1); margin-top:5px; }
.trbk-fill { height:100%; width:0%; background:var(--accent); transition:width .25s ease; }
.trbk-note { font-size:10px; color:var(--dim2); margin-top:5px; line-height:1.4; }
.trbk-note:empty { display:none; }
/* Полное подкрепление — витрина совпала с зачётом, предупреждать не о чем */
.tr-backing.is-full .trbk-pct { color:var(--green); }
/* Ноль подкрепления — весь заявленный сдвиг мимо зачёта */
.tr-backing.is-none .trbk-pct { color:var(--red); }
/* База ещё не собрана: ни процента, ни заливки — только честная подпись */
.tr-backing.is-unknown .trbk-lbl { color:var(--dim); font-style:italic; }

/* Событие раунда — название без чисел, рядом с «Раунд N · Прогноз» */
.root-event { font-size:10px; color:var(--dim2); letter-spacing:.3px;
  margin-top:-3px; margin-bottom:6px; }
.root-event[hidden] { display:none; }

/* [PATCH BANK-GHOST: ПРИЗРАЧНАЯ «ЦЕЛЬ» ПО ЗАЯВЛЕННЫМ БЕГУНКАМ]
   Правило BANK-SOT-2 пускает в каскад только подкреплённую инициативами часть
   сдвига. Обязывающее число поэтому не шевелится, пока инициатив нет, — и вместе
   с эксплойтом «двигай бесплатно» пропала разведка «а что будет, если…». Цель
   возвращает разведку, оставаясь заведомо второстепенной: приглушённый цвет,
   меньший кегль и пунктирная отбивка.

   ДВА состояния «выключено», и это не дублирование:
     :empty      — телеком (и банк до первого рендера): узел не написан никем,
                   схлопывается полностью, чужой экран байт-в-байт прежний;
     .is-off     — банк, цели сейчас нет: JS пишет NBSP, высота ЗАРЕЗЕРВИРОВАНА,
                   содержимое гасится visibility. Без этого появление и исчезание
                   цели на драге слайдера дёргало бы вёрстку дерева на каждый тик. */
/* [BANK-DECLARED-DISPLAY] Стили призрачной «цели» и полосы-моста удалены вместе
   с самими узлами: витрина теперь И ЕСТЬ заявленный сценарий, поэтому отдельной
   блёклой строки-цели больше нет. Токены --ghost-* сохранены в :root — они
   ничего не стоят, а обратно понадобятся, если призрак когда-нибудь вернётся. */

/* TREE CONNECTORS */
.conn-v { width:1px; height:18px; background:var(--b1); margin:0 auto; }
.conn-h { border-top:1px solid var(--b1); margin:0 auto; }

/* TREE NODE */
.trow { display:flex; align-items:flex-start; justify-content:center; gap:8px; width:100%; flex-wrap:wrap; }
.tnode {
  background:var(--card); border:1px solid var(--b0); border-radius:9px;
  padding:10px 16px; text-align:center; min-width:130px; flex-shrink:0;
  transition:all .3s; position:relative;
}
.tnode::after { content:''; position:absolute; bottom:0; left:6px; right:6px; height:2px; border-radius:0 0 2px 2px; }
.tnode.tc::after{background:var(--accent);} .tnode.tg::after{background:var(--green);}
.tnode.to::after{background:var(--orange);} .tnode.tp::after{background:var(--purple);}
.tnode.tr::after{background:var(--red);} .tnode.td::after{background:var(--dim);}
.tnode.pulse { animation:nodePulse .45s ease; }
/* highlight when event impact shown */
.tnode.highlighted {
  border-color:var(--orange) !important;
  box-shadow:0 0 12px rgba(245,158,11,.25);
  animation:highlightPulse 1.5s ease-in-out 2;
}
.tn-l { font-size:9px; letter-spacing:.8px; text-transform:uppercase; color:var(--dim2); margin-bottom:3px; }
.tn-v { font-size:16px; font-weight:700; color:var(--text2); line-height:1.2; }
.tn-s { font-size:9px; color:var(--dim); margin-top:2px; }
.tn-d { font-size:9px; font-weight:600; margin-top:3px; }
.tn-d.up{color:var(--green);} .tn-d.dn{color:var(--red);}
.op { font-size:16px; color:var(--dim); align-self:center; padding:0 2px; flex-shrink:0; }

/* ═══════════════════════════════════════
   AUTH MODAL
═══════════════════════════════════════ */
#paAuthModal {
  position:fixed; inset:0; z-index:9000;
  background:rgba(8,8,14,.92); backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .3s;
}
.pa-auth-box {
  background:var(--surface); border:1px solid var(--b0);
  border-radius:14px; padding:24px 28px; width:440px; max-width:96vw;
  box-shadow:0 24px 64px rgba(0,0,0,.6);
  max-height:96vh; overflow-y:auto;
}
.pa-auth-box::-webkit-scrollbar { width:4px; }
.pa-auth-box::-webkit-scrollbar-track { background:transparent; }
.pa-auth-box::-webkit-scrollbar-thumb { background:var(--b1); border-radius:2px; }
.pa-auth-logo { display:flex; flex-direction:column; gap:3px; margin-bottom:6px; }
.pa-auth-logo-row { display:flex; align-items:baseline; }
.pa-auth-tc   { font-size:11px; font-weight:700; color:var(--text2); }
.pa-auth-gray { font-size:11px; font-weight:700; color:var(--dim); }
.pa-auth-forbes { font-family:'Playfair Display',serif; font-size:12px; font-weight:700; color:var(--accent); margin-left:8px; }
.pa-auth-title { font-size:17px; font-weight:700; color:var(--text2); margin:14px 0 4px; line-height:1.2; }
.pa-auth-sub   { font-size:11px; color:var(--dim2); margin-bottom:16px; line-height:1.4; }

.pa-btn-google {
  width:100%; padding:12px; border-radius:8px; border:1px solid var(--b1);
  background:var(--card2); color:var(--text2); font-family:var(--font-m);
  font-size:13px; font-weight:600; cursor:pointer; display:flex;
  align-items:center; justify-content:center; gap:10px; transition:all .15s;
}
.pa-btn-google:hover { border-color:var(--accent); background:var(--card); }
.pa-btn-google svg   { flex-shrink:0; }

.pa-divider {
  display:flex; align-items:center; gap:12px;
  margin:16px 0; font-size:10px; color:var(--dim); letter-spacing:.5px;
}
.pa-divider::before,.pa-divider::after {
  content:''; flex:1; height:1px; background:var(--b0);
}

.pa-btn-email {
  width:100%; padding:11px; border-radius:8px;
  border:1px solid var(--b0); background:transparent;
  color:var(--dim2); font-family:var(--font-m); font-size:12px;
  font-weight:600; cursor:pointer; transition:all .15s; letter-spacing:.3px;
}
.pa-btn-email:hover { border-color:var(--b1); color:var(--text2); }

.pa-field { margin-bottom:8px; }
.pa-label { font-size:10px; font-weight:600; color:var(--dim2);
  letter-spacing:.5px; text-transform:uppercase; margin-bottom:5px; display:block; }
.pa-label span { color:var(--red); } /* обязательное поле */
.pa-input {
  width:100%; padding:8px 10px; border-radius:6px;
  border:1px solid var(--b0); background:var(--card);
  color:var(--text2); font-family:var(--font-m); font-size:12px; outline:none;
  transition:border-color .15s;
}
.pa-input:focus { border-color:var(--accent); }
.pa-input::placeholder { color:var(--dim); }
.pa-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.pa-btn-submit {
  width:100%; margin-top:10px; padding:11px; border-radius:7px; border:none;
  background:var(--accent); color:#141414; font-family:var(--font-m);
  font-size:13px; font-weight:700; cursor:pointer; letter-spacing:.3px;
  transition:filter .15s;
}
.pa-btn-submit:hover { filter:brightness(1.1); }
.pa-btn-back {
  background:none; border:none; color:var(--dim2); font-size:11px;
  cursor:pointer; padding:0; margin-top:12px; text-decoration:underline;
  font-family:var(--font-m); display:block;
}
.pa-status { font-size:11px; margin-top:10px; min-height:16px; text-align:center; }
.pa-required-note { font-size:10px; color:var(--dim); margin-top:8px; }


.right {
  width:216px; flex-shrink:0; background:var(--surface); border-left:1px solid var(--b0);
  display:flex; flex-direction:column; overflow:hidden;
}
.right-scroll { flex:1; overflow-y:auto; padding:12px 11px 16px; display:flex; flex-direction:column; gap:10px; }

.r-section { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); padding-top:8px; border-top:1px solid var(--b0); flex-shrink:0; }
.r-section:first-child { border-top:none; padding-top:0; }

/* LEADERBOARD */
.lb-row {
  background:var(--card); border:1px solid var(--b0); border-radius:7px;
  padding:7px 9px; transition:all .3s;
}
.lb-row.me { border-color:rgba(14,165,233,.4); background:rgba(14,165,233,.04); }
.lb-top { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.lb-rk { font-size:10px; font-weight:700; width:16px; flex-shrink:0; }
.lb-rk.g1{color:#f59e0b;} .lb-rk.g2{color:#94a3b8;} .lb-rk.g3{color:#cd7f32;} .lb-rk.gx{color:var(--dim2);}
.lb-nm { flex:1; font-size:10px; color:var(--text); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-nm.me{color:var(--accent);}
.lb-ev-v { font-size:11px; font-weight:700; color:var(--text2); }
.lb-ev-d { font-size:9px; }
.lb-ev-d.up{color:var(--green);} .lb-ev-d.dn{color:var(--red);}
.lb-bar { height:2px; background:var(--b0); border-radius:1px; overflow:hidden; margin-top:5px; }
.lb-fill { height:100%; border-radius:1px; transition:width .6s ease; }
.lb-row.me .lb-fill { background:var(--accent)!important; }

/* EVENT CARD in right panel */
.ev-card {
  border-radius:7px; border:1px solid rgba(239,68,68,.25);
  background:rgba(239,68,68,.04); overflow:hidden; flex-shrink:0;
}
.ev-card-head { padding:8px 10px; border-bottom:1px solid rgba(239,68,68,.15); }
.ev-badge { font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:var(--red); margin-bottom:3px; display:flex; align-items:center; gap:4px; }
.ev-title { font-size:11px; font-weight:600; color:var(--text2); margin-bottom:2px; }
.ev-body { font-size:9px; color:var(--dim2); line-height:1.5; }
.ev-tag { display:inline-block; margin-top:5px; padding:1px 7px; border-radius:3px; font-size:8px; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.2); color:var(--red); }
.ev-card-foot { padding:7px 10px; }
.ev-impact-btn {
  width:100%; padding:5px 8px; border-radius:5px; border:1px solid rgba(239,68,68,.2);
  background:rgba(239,68,68,.06); color:var(--red); font-family:var(--font-m); font-size:9px;
  cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:5px;
}
.ev-impact-btn:hover { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.4); }
.ev-impact-btn.active { background:var(--red); color:#fff; }

/* MARKET SHARE */
.mks { display:flex; flex-direction:column; gap:5px; }
.mks-r { display:flex; align-items:center; gap:5px; }
.mks-n { font-size:9px; color:var(--dim2); width:56px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mks-b { flex:1; height:3px; background:var(--b0); border-radius:1px; overflow:hidden; }
.mks-f { height:100%; border-radius:1px; transition:width .5s ease; }
.mks-p { font-size:9px; font-weight:600; width:28px; text-align:right; }

/* PORTFOLIO */
.port-item {
  display:flex; align-items:center; gap:7px; padding:5px 8px;
  border-radius:5px; border:1px solid var(--b0); border-left:2px solid;
  background:var(--card); font-size:9px;
}
.pi-text { flex:1; color:var(--text); line-height:1.4; }
.pi-cost { font-size:9px; font-weight:700; font-family:var(--font-h); flex-shrink:0; }
.pi-rm { background:none; border:none; color:var(--dim); cursor:pointer; font-size:12px; padding:0 1px; flex-shrink:0; }
.pi-rm:hover { color:var(--red); }
.pi-type { font-size:8px; padding:1px 5px; border-radius:3px; background:var(--b0); color:var(--dim2); flex-shrink:0; }

/* HISTORY */
.hist { display:flex; flex-direction:column; gap:3px; }
.h-row { display:flex; justify-content:space-between; align-items:center; padding:5px 8px; border-radius:5px; border:1px solid var(--b0); background:var(--card); }
.h-row.cur { border-color:rgba(14,165,233,.3); }
.h-yr { font-size:9px; color:var(--dim2); }
.h-yr.cur{color:var(--accent);}
.h-pct { font-size:10px; font-weight:600; color:var(--green); }

/* ═══════════════════════════════════════
   FORECAST MODAL
═══════════════════════════════════════ */
.modal-ov {
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100;
  display:flex; align-items:center; justify-content:center; animation:fadeIn .2s ease;
}
.modal {
  background:var(--surface); border:1px solid var(--b1); border-radius:12px;
  width:500px; max-width:95vw; overflow:hidden;
  box-shadow:0 32px 80px var(--shadow);
}
.modal-hd { padding:16px 20px 12px; border-bottom:1px solid var(--b0); display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-family:var(--font-h); font-size:13px; font-weight:700; color:var(--text2); }
.modal-x { background:none; border:none; color:var(--dim2); cursor:pointer; font-size:16px; transition:color .15s; }
.modal-x:hover { color:var(--text); }
.modal-bd { padding:18px 20px 22px; }

.fc-tabs { display:flex; gap:6px; margin-bottom:14px; }
.fc-tab { flex:1; padding:8px; border-radius:6px; border:1px solid var(--b0); text-align:center; cursor:pointer; transition:all .15s; background:var(--card); }
.fc-tab.active { border-color:var(--accent); background:rgba(14,165,233,.06); }
.fc-tab-l { font-size:8px; color:var(--dim2); text-transform:uppercase; letter-spacing:1px; }
.fc-tab-v { font-size:15px; font-weight:700; color:var(--text2); font-family:var(--font-h); margin-top:2px; }
.fc-tab-d { font-size:9px; margin-top:1px; }

.fc-bars { display:flex; gap:5px; align-items:flex-end; height:110px; }
.fc-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.fc-bar-cont { flex:1; width:100%; display:flex; flex-direction:column; justify-content:flex-end; }
.fc-bar { border-radius:3px 3px 0 0; transition:height .5s ease; position:relative; min-height:6px; }
.fc-bar-lbl { position:absolute; top:-17px; left:0; right:0; text-align:center; font-size:9px; font-weight:600; color:var(--text2); white-space:nowrap; }
.fc-yr { font-size:9px; color:var(--dim2); }
.fc-yr.cur{color:var(--accent);}

.fc-drivers { margin-top:14px; }
.fc-dr-lbl { font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim2); margin-bottom:7px; }
.fc-dr-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.fc-dr { display:flex; justify-content:space-between; align-items:center; padding:4px 8px; border-radius:4px; background:var(--card); border:1px solid var(--b0); }
.fc-dr-n { font-size:9px; color:var(--dim2); }
.fc-dr-v { font-size:9px; font-weight:600; }

/* ═══════════════════════════════════════
   SCROLLBAR / ANIMATIONS
═══════════════════════════════════════ */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--b1); border-radius:2px; }

/* ═══════════════════════════════════════
   INITIATIVE MODAL v5
═══════════════════════════════════════ */

/* Overlay */
.init-modal-ov {
  position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:200;
  display:flex; align-items:center; justify-content:center;
  animation:fadeIn .2s ease; backdrop-filter:blur(4px);
}
.init-modal {
  background:var(--surface); border:1px solid var(--b1); border-radius:14px;
  width:520px; max-width:96vw; max-height:92vh; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 40px 100px rgba(0,0,0,.5);
}

/* Modal header */
.im-head {
  padding:16px 20px 12px; border-bottom:1px solid var(--b0);
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.im-title { font-family:var(--font-h); font-size:12px; font-weight:700; color:var(--text2); flex:1; }
.im-steps { display:flex; gap:6px; flex-shrink:0; }
.im-step {
  width:26px; height:26px; border-radius:50%; border:2px solid var(--b1);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:var(--dim2); transition:all .3s;
}
.im-step.active  { border-color:var(--accent); background:var(--accent); color:#fff; }
.im-step.done    { border-color:var(--green);  background:var(--green);  color:#fff; }
.im-x { background:none; border:none; color:var(--dim2); cursor:pointer; font-size:18px; line-height:1; transition:color .15s; }
.im-x:hover { color:var(--text); }

/* Modal body scroll */
.im-body { flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:14px; }

/* Steps visibility */
.im-s1, .im-s2, .im-s3 { display:none; flex-direction:column; gap:12px; }
.im-s1.active, .im-s2.active, .im-s3.active { display:flex; animation:slideUp .2s ease; }

/* Category selector */
.im-cat-row { display:flex; gap:5px; flex-wrap:wrap; }
.im-cat-chip {
  padding:5px 10px; border-radius:16px; border:1px solid var(--b0);
  background:var(--card); font-size:10px; cursor:pointer; transition:all .15s;
  color:var(--dim2);
}
.im-cat-chip:hover { border-color:var(--accent); color:var(--text); }
.im-cat-chip.sel { color:#fff; border-color:transparent; }

/* Text inputs */
.im-lbl { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim2); }
.im-input {
  width:100%; background:var(--bg); border:1px solid var(--b1); border-radius:6px;
  color:var(--text); font-family:var(--font-m); font-size:11px;
  padding:8px 11px; outline:none; transition:border-color .2s;
}
.im-input:focus { border-color:var(--accent); }
.im-input::placeholder { color:var(--dim); }
.im-textarea { resize:none; line-height:1.5; }

/* Hypothesis sliders */
.hyp-section { background:var(--card); border:1px solid var(--b0); border-radius:8px; padding:12px 14px; }
.hyp-title { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); margin-bottom:10px; font-weight:600; }
.hyp-kpi { margin-bottom:10px; }
.hyp-kpi:last-child { margin-bottom:0; }
.hyp-row { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.hyp-name { font-size:10px; color:var(--text); font-weight:500; flex:1; }
.hyp-val  { font-size:13px; font-weight:700; font-family:var(--font-h); min-width:52px; text-align:right; transition:color .2s; }
.hyp-val.pos { color:var(--green); }
.hyp-val.neg { color:var(--red); }
.hyp-val.zero{ color:var(--dim2); }
.hyp-track { position:relative; height:6px; background:var(--b0); border-radius:3px; }
.hyp-zero  { position:absolute; top:-3px; width:2px; height:12px; background:var(--b1); border-radius:1px; }
.hyp-fill  { position:absolute; top:0; height:100%; border-radius:3px; transition:all .15s; }
input.hyp-slider {
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; margin:0;
}
.hyp-range { display:flex; justify-content:space-between; margin-top:2px; }
.hyp-range span { font-size:8px; color:var(--dim); }

/* ── Step 2: Comparison ── */
.im-score-row { display:flex; align-items:center; gap:12px; }
.im-score-big { font-family:var(--font-h); font-size:32px; font-weight:700; line-height:1; }
.im-score-big.h { color:var(--green); } .im-score-big.m { color:var(--orange); } .im-score-big.l { color:var(--red); }
.im-score-info { flex:1; }
.im-score-tier { font-size:11px; font-weight:600; margin-bottom:3px; }
.im-score-fb   { font-size:10px; color:var(--dim2); line-height:1.5; }

/* Comparison bars */
.cmp-section { background:var(--card); border:1px solid var(--b0); border-radius:8px; padding:12px 14px; }
.cmp-title { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim2); margin-bottom:10px; }
.cmp-kpi { margin-bottom:12px; }
.cmp-kpi:last-child { margin-bottom:0; }
.cmp-kpi-name { font-size:10px; font-weight:500; color:var(--text); margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.cmp-tag { font-size:8px; padding:1px 5px; border-radius:3px; }
.cmp-tag.match { background:rgba(16,185,129,.15); color:var(--green); }
.cmp-tag.over  { background:rgba(239,68,68,.12); color:var(--red); }
.cmp-tag.under { background:rgba(245,158,11,.12); color:var(--orange); }

.cmp-bar-wrap { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.cmp-bar-lbl  { font-size:9px; width:22px; text-align:right; color:var(--dim2); flex-shrink:0; }
.cmp-bar-track{ flex:1; height:8px; background:var(--b0); border-radius:4px; overflow:hidden; position:relative; }
.cmp-bar-fill { height:100%; border-radius:4px; transition:width .6s cubic-bezier(.4,0,.2,1); }
.cmp-bar-val  { font-size:10px; font-weight:700; min-width:44px; font-family:var(--font-h); flex-shrink:0; }
.cmp-bar-fill.player { background:rgba(14,165,233,.5); }
.cmp-bar-fill.ai     { background:var(--accent); }
.cmp-bar-fill.ai.good{ background:var(--green); }
.cmp-bar-fill.ai.bad { background:var(--orange); }

/* Divergence pill */
.div-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:10px; font-size:9px; margin-top:4px; }
.div-pill.good { background:rgba(16,185,129,.1); color:var(--green); border:1px solid rgba(16,185,129,.2); }
.div-pill.warn { background:rgba(245,158,11,.1); color:var(--orange); border:1px solid rgba(245,158,11,.2); }
.div-pill.bad  { background:rgba(239,68,68,.1);  color:var(--red);    border:1px solid rgba(239,68,68,.2); }

/* AI comment */
.ai-comment {
  background:rgba(14,165,233,.05); border:1px solid rgba(14,165,233,.15);
  border-left:3px solid var(--accent); border-radius:0 6px 6px 0;
  padding:9px 12px; font-size:10px; color:var(--text); line-height:1.6;
}
.ai-comment-lbl { font-size:8px; text-transform:uppercase; letter-spacing:1.5px; color:var(--accent); margin-bottom:4px; font-weight:600; }

/* IP cost breakdown */
.ip-breakdown {
  background:var(--card2); border:1px solid var(--b0); border-radius:7px;
  padding:10px 14px; display:flex; align-items:center; gap:0;
}
.ip-part { flex:1; text-align:center; }
.ip-part + .ip-part { border-left:1px solid var(--b0); }
.ip-part-v { font-family:var(--font-h); font-size:18px; font-weight:700; }
.ip-part-l { font-size:8px; text-transform:uppercase; letter-spacing:1px; color:var(--dim2); margin-top:2px; }
.ip-eq { font-size:16px; color:var(--dim); padding:0 8px; }
.ip-total-big { font-family:var(--font-h); font-size:24px; font-weight:700; color:var(--accent); }

/* Accuracy meter */
.acc-meter { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--b0); border-radius:7px; padding:8px 12px; }
.acc-ring { width:42px; height:42px; flex-shrink:0; }
.acc-ring circle { transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); }
.acc-info { flex:1; }
.acc-val  { font-family:var(--font-h); font-size:16px; font-weight:700; }
.acc-lbl  { font-size:9px; color:var(--dim2); margin-top:1px; }

/* Modal footer */
.im-foot {
  padding:12px 20px; border-top:1px solid var(--b0); display:flex; gap:8px;
  flex-shrink:0; background:var(--surface);
}
.im-btn-eval {
  flex:1; padding:10px; border:none; border-radius:7px; cursor:pointer;
  font-family:var(--font-h); font-size:10px; font-weight:700; letter-spacing:.5px;
  background:var(--accent); color:#fff; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:6px;
}
.im-btn-eval:hover:not(:disabled) { filter:brightness(1.1); transform:translateY(-1px); }
.im-btn-eval:disabled { opacity:.4; cursor:wait; }
.im-btn-accept {
  flex:1; padding:10px; border:none; border-radius:7px; cursor:pointer;
  font-family:var(--font-h); font-size:10px; font-weight:700; letter-spacing:.5px;
  background:var(--green); color:#fff; transition:all .15s;
}
.im-btn-accept:hover { filter:brightness(1.1); }
.im-btn-accept:disabled { opacity:.35; cursor:not-allowed; background:var(--dim); }
.im-btn-back {
  padding:10px 16px; border:1px solid var(--b1); border-radius:7px; cursor:pointer;
  font-family:var(--font-m); font-size:10px; color:var(--dim2); background:none; transition:all .15s;
}
.im-btn-back:hover { border-color:var(--text); color:var(--text); }
.im-btn-cancel {
  padding:10px 14px; border:1px solid var(--b1); border-radius:7px; cursor:pointer;
  font-family:var(--font-m); font-size:10px; color:var(--dim2); background:none; transition:all .15s;
}
.im-btn-cancel:hover { border-color:var(--red); color:var(--red); }

/* ── Accuracy History (right panel) ── */
.acc-hist { display:flex; flex-direction:column; gap:4px; }
.acc-hist-row {
  display:flex; align-items:center; gap:7px; padding:5px 8px;
  border-radius:5px; border:1px solid var(--b0); background:var(--card);
}
.ahr-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ahr-text { flex:1; font-size:9px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ahr-acc { font-size:10px; font-weight:700; font-family:var(--font-h); flex-shrink:0; }
.ahr-bar-wrap { width:40px; height:3px; background:var(--b0); border-radius:2px; overflow:hidden; flex-shrink:0; }
.ahr-bar { height:100%; border-radius:2px; }

/* Avg accuracy badge in header */
.acc-badge {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 14px; border-left:1px solid var(--b0); flex-shrink:0;
}
.acc-badge-v { font-family:var(--font-h); font-size:15px; font-weight:700; }
.acc-badge-l { font-size:7px; text-transform:uppercase; letter-spacing:1px; color:var(--dim); margin-top:1px; }

/* ═══════════════════════════════════════
   LANDING PAGE — Forbes editorial style
═══════════════════════════════════════ */

#landingPage {
  position: fixed; inset: 0; z-index: 300;
  background: #141414;
  overflow-y: auto;
  display: flex; flex-direction: column;
  font-family: 'Golos Text', sans-serif;
  animation: fadeIn .4s ease;
}
#landingPage.hidden {
  animation: landingOut .4s ease forwards;
  pointer-events: none;
}
@keyframes landingOut {
  to { opacity: 0; transform: translateY(-20px); }
}

/* ── Nav ── */
.lp-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; height: 60px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: sticky; top: 0; background: rgba(20,20,20,.95);
  backdrop-filter: blur(12px); z-index: 10;
}
.lp-logo {
  display: flex; align-items: center; gap: 12px;
}
.lp-logo-forbes {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: #fff;
  letter-spacing: -.3px;
}
.lp-logo-div {
  width: 1px; height: 20px; background: rgba(255,255,255,.2);
}
.lp-logo-pa {
  font-family: 'Golos Text', sans-serif;
  font-size: 11px; font-weight: 600; color: #c9a84c;
  letter-spacing: 2px; text-transform: uppercase;
}
.lp-nav-badge {
  font-size: 10px; color: rgba(255,255,255,.4);
  letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.12);
  padding: 4px 12px; border-radius: 20px;
}

/* ── Hero ── */
.lp-hero {
  padding: 64px 40px 48px;
  max-width: 900px; margin: 0 auto; width: 100%;
  position: relative;
}
.lp-hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: #c9a84c; margin-bottom: 24px;
}
.lp-hero-tag::before {
  content: ''; width: 28px; height: 1px; background: #c9a84c;
}
.lp-hero-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800; line-height: 1.08;
  color: #fff; margin-bottom: 20px;
  letter-spacing: -.5px;
}
.lp-hero-h1 em {
  font-style: italic; color: #c9a84c;
}
.lp-hero-sub {
  font-size: 15px; line-height: 1.7;
  color: rgba(255,255,255,.6);
  max-width: 560px; margin-bottom: 36px;
}
.lp-hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: #c9a84c; color: #141414;
  font-family: 'Golos Text', sans-serif;
  font-size: 13px; font-weight: 700;
  padding: 14px 32px; border-radius: 2px;
  border: none; cursor: pointer;
  transition: all .2s; letter-spacing: .5px;
  text-transform: uppercase;
}
.lp-hero-cta:hover {
  background: #e8c96b; transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(201,168,76,.3);
}
.lp-hero-cta svg { width: 14px; height: 14px; }

/* ── Stats bar ── */
.lp-stats {
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; max-width: 900px; margin: 0 auto; width: 100%;
}
.lp-stat {
  flex: 1; padding: 20px 40px;
  border-right: 1px solid rgba(255,255,255,.07);
}
.lp-stat:last-child { border-right: none; }
.lp-stat-v {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 700; color: #c9a84c; line-height: 1;
  margin-bottom: 4px;
}
.lp-stat-l {
  font-size: 11px; color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: 1px;
}

/* ── Content grid ── */
.lp-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 1px; background: rgba(255,255,255,.07);
  max-width: 900px; margin: 40px auto; width: 100%;
  border: 1px solid rgba(255,255,255,.07);
}
.lp-card {
  background: #1a1a1a; padding: 28px 32px;
}
.lp-card-tag {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: #c9a84c; margin-bottom: 12px; display: flex;
  align-items: center; gap: 8px;
}
.lp-card-tag::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(201,168,76,.2);
}
.lp-card-h {
  font-family: 'Playfair Display', serif;
  font-size: 17px; font-weight: 700; color: #fff;
  margin-bottom: 12px; line-height: 1.3;
}
.lp-card-body {
  font-size: 12px; line-height: 1.75;
  color: rgba(255,255,255,.55);
}
.lp-card-body strong { color: rgba(255,255,255,.8); font-weight: 600; }

/* ── Video block ── */
.lp-video-wrap {
  max-width: 900px; margin: 0 auto 40px; width: 100%; padding: 0 0 0 0;
}
.lp-video-label {
  font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(255,255,255,.3); margin-bottom: 12px; padding: 0 40px;
}
.lp-video-frame {
  position: relative;
  background: #0e0e0e;
  border: 1px solid rgba(255,255,255,.07);
  aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
  margin: 0 40px;
}
.lp-video-frame::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,168,76,.06) 0%, transparent 60%);
}
.lp-video-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  position: relative; z-index: 1;
}
.lp-play-btn {
  width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid rgba(201,168,76,.6);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.lp-video-frame:hover .lp-play-btn {
  border-color: #c9a84c;
  background: rgba(201,168,76,.1);
  transform: scale(1.08);
}
.lp-play-btn svg { fill: #c9a84c; margin-left: 4px; }
.lp-video-text { font-size: 12px; color: rgba(255,255,255,.35); letter-spacing: 1px; }
.lp-video-url {
  position: absolute; inset: 0; z-index: 2;
  display: none; /* показываем iframe при наличии реального URL */
}

/* ── Timeline / Roles ── */
.lp-roles {
  max-width: 900px; margin: 0 auto 40px; width: 100%; padding: 0 40px;
}
.lp-roles-h {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 20px;
}
.lp-role-grid { display: flex; gap: 12px; }
.lp-role-card {
  flex: 1; background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.07);
  border-top: 2px solid;
  padding: 16px 20px; border-radius: 0;
}
.lp-role-card:nth-child(1) { border-top-color: #c9a84c; }
.lp-role-card:nth-child(2) { border-top-color: #7db88a; }
.lp-role-card:nth-child(3) { border-top-color: #c47b3a; }
.lp-role-card:nth-child(4) { border-top-color: #8ab4b8; }
.lp-role-icon { font-size: 20px; margin-bottom: 8px; }
.lp-role-name { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.lp-role-desc { font-size: 10px; color: rgba(255,255,255,.45); line-height: 1.5; }

/* ── Footer CTA ── */
.lp-footer {
  max-width: 900px; margin: 0 auto; width: 100%;
  padding: 32px 40px 60px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.07);
}
.lp-footer-text {
  font-size: 13px; color: rgba(255,255,255,.4);
}
.lp-footer-text strong { color: rgba(255,255,255,.7); }

/* ── scroll-reveal ── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }


/* ═══ Дополнительные стили (news modal, bell, light theme fixes) ═══ */

/* ═══ Bell + News Modal + Light fixes ═══ */
/* Bell */
.news-bell { position:relative; width:36px; height:36px; border-radius:50%; border:1px solid var(--b1); background:var(--card); color:var(--text2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; flex-shrink:0; }
.news-bell:hover { background:var(--red); color:#fff; border-color:transparent; transform:scale(1.05); }
.news-dot { position:absolute; top:4px; right:4px; width:8px; height:8px; border-radius:50%; background:var(--red); border:2px solid var(--surface); animation:bellPulse 2s ease infinite; }
@keyframes bellPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.35)} }

/* News preview in right panel */
.news-preview-card { background:var(--card); border:1px solid var(--b0); border-left:3px solid var(--red); border-radius:5px; padding:10px 12px; cursor:pointer; transition:background .15s; }
.news-preview-card:hover { background:var(--card2); }
.npc-badge { font-size:8px; font-weight:700; letter-spacing:1.5px; color:var(--red); margin-bottom:4px; }
.npc-title { font-size:11px; font-weight:600; color:var(--text2); margin-bottom:3px; }
.npc-sub   { font-size:9px; color:var(--dim2); }

/* BBQ News Modal */
.news-modal-ov { position:fixed; inset:0; z-index:250; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); animation:fadeIn .2s ease; }
.news-modal { width:580px; max-width:95vw; background:var(--surface); border:1px solid var(--b1); border-radius:3px; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.6); }
.nm-header { background:#c00; color:#fff; padding:9px 16px; display:flex; align-items:center; justify-content:space-between; }
.nm-brand { display:flex; align-items:center; gap:10px; }
.nm-brand-logo { font-family:'Playfair Display',serif; font-size:19px; font-weight:800; letter-spacing:-.5px; }
.nm-brand-sub { font-size:9px; letter-spacing:2px; text-transform:uppercase; opacity:.8; }
.nm-live { display:flex; align-items:center; gap:5px; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; border:1px solid rgba(255,255,255,.5); border-radius:2px; padding:2px 8px; }
.nm-live::before { content:''; width:6px; height:6px; border-radius:50%; background:#fff; animation:bellPulse 1s ease infinite; }
.nm-ticker-wrap { background:#111; overflow:hidden; height:28px; display:flex; align-items:center; border-bottom:2px solid #c00; }
.nm-ticker-label { background:#c00; color:#fff; font-size:9px; font-weight:700; letter-spacing:1px; padding:0 10px; height:100%; display:flex; align-items:center; flex-shrink:0; white-space:nowrap; }
.nm-ticker-track { flex:1; overflow:hidden; }
.nm-ticker-text { display:inline-block; white-space:nowrap; font-size:11px; color:#fff; animation:tickerScroll 28s linear infinite; padding-left:100%; font-family:'Golos Text',sans-serif; }
@keyframes tickerScroll { from{transform:translateX(0)} to{transform:translateX(-100%)} }
.nm-video { position:relative; background:#080808; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; }
.nm-video-iframe { position:absolute; inset:0; width:100%; height:100%; border:none; display:none; }
.nm-video-placeholder { display:flex; flex-direction:column; align-items:center; gap:14px; z-index:1; }
.nm-play { width:56px; height:56px; border-radius:50%; background:rgba(200,0,0,.8); border:3px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; transition:all .2s; }
.nm-video:hover .nm-play { background:#c00; transform:scale(1.08); }
.nm-play svg { fill:#fff; margin-left:3px; }
.nm-video-hint { font-size:11px; color:rgba(255,255,255,.45); letter-spacing:.5px; font-family:'Golos Text',sans-serif; }
.nm-body { padding:16px 20px 20px; }
.nm-category { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:#c00; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.nm-category::after { content:''; flex:1; height:1px; background:rgba(200,0,0,.15); }
.nm-news-title { font-family:'Playfair Display',serif; font-size:19px; font-weight:700; line-height:1.25; color:var(--text2); margin-bottom:10px; }
.nm-news-text { font-size:12px; line-height:1.75; color:var(--dim2); margin-bottom:14px; }
.nm-impact-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.nm-impact-chip { font-size:10px; font-weight:600; padding:4px 10px; border-radius:2px; border:1px solid; }
.nm-impact-bad  { background:rgba(201,112,112,.1); border-color:rgba(201,112,112,.3); color:var(--red); }
.nm-impact-warn { background:rgba(201,168,76,.08); border-color:rgba(201,168,76,.25); color:var(--accent); }
.nm-footer-row { display:flex; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px solid var(--b0); }
.nm-timestamp { font-size:9px; color:var(--dim2); }
.nm-close-btn { background:var(--accent); color:#fff; border:none; padding:8px 20px; font-family:'Golos Text',sans-serif; font-size:11px; font-weight:600; cursor:pointer; border-radius:2px; transition:all .15s; }
.nm-close-btn:hover { filter:brightness(1.1); }

/* Light mode text visibility fixes */
[data-theme="light"] .hk-l    { color:var(--dim2); }
[data-theme="light"] .sl-nm   { color:var(--text2); }
[data-theme="light"] .sl-desc { color:var(--dim2); font-size:10px; }
[data-theme="light"] .cat-nm  { color:var(--text2); }
[data-theme="light"] .tn-l    { color:var(--dim2); }
[data-theme="light"] .tn-v    { color:var(--text2); font-size:14px; }
[data-theme="light"] .lb-nm   { color:var(--text2); }
[data-theme="light"] .r-section { color:var(--dim2); font-weight:600; }
[data-theme="light"] .ip-lbl  { color:var(--dim2); }
[data-theme="light"] .preset-lbl { color:var(--dim2); }
[data-theme="light"] .root    { background:var(--card2); }

/* Global font boosts — handled in main header CSS */

/* Keyframes */
@keyframes nodePulse    { 0%{border-color:rgba(201,168,76,.7);box-shadow:0 0 8px rgba(201,168,76,.2)} 100%{border-color:var(--b0);box-shadow:none} }
@keyframes highlightPulse { 0%,100%{box-shadow:0 0 6px rgba(201,168,76,.2)} 50%{box-shadow:0 0 16px rgba(201,168,76,.5)} }
@keyframes fadeIn       { from{opacity:0} to{opacity:1} }
@keyframes slideUp      { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes dotP         { 0%,80%,100%{transform:scale(0);opacity:.3} 40%{transform:scale(1);opacity:1} }
@keyframes rootFlash    { 0%{box-shadow:0 0 0 0 rgba(201,168,76,.4)} 50%{box-shadow:0 0 24px 6px rgba(201,168,76,.2)} 100%{box-shadow:0 0 32px rgba(201,168,76,.07)} }
@keyframes barSlide     { from{width:0} }
@keyframes scoreCount   { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1)} }
@keyframes blink        { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes landingOut   { to{opacity:0;transform:translateY(-20px)} }

/* ── Session info in header ── */
.h-session-info { display:flex; flex-direction:column; justify-content:center; gap:1px; padding:0 14px; border-right:1px solid var(--b0); flex-shrink:0; max-width:220px; }
.h-session-name { font-size:10px; color:rgba(200,216,240,.5); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.h-round-badge { display:inline-block; font-size:9px; font-weight:700; color:var(--accent); background:rgba(201,168,76,.15); padding:1px 7px; border-radius:8px; letter-spacing:.5px; width:fit-content; }
.h-team-name { font-size:10px; color:rgba(200,216,240,.35); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Waiting screen ── */
#waitingScreen { display:none; position:fixed; inset:0; z-index:900; background:var(--bg); align-items:center; justify-content:center; }
.ws-container { text-align:center; max-width:500px; padding:40px 30px; }
.ws-icon { font-size:48px; margin-bottom:16px; animation:ws-pulse 2s ease-in-out infinite; }
@keyframes ws-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.ws-title { font-family:'Playfair Display',serif; font-size:28px; font-weight:700; color:var(--accent); margin-bottom:8px; }
.ws-round { font-size:14px; color:rgba(200,216,240,.6); margin-bottom:4px; }
.ws-subtitle { font-size:13px; color:rgba(200,216,240,.35); margin-bottom:32px; }
.ws-stats { display:flex; gap:24px; justify-content:center; margin-bottom:32px; }
.ws-stat { background:rgba(200,216,240,.04); border:1px solid rgba(200,216,240,.08); border-radius:12px; padding:16px 24px; min-width:120px; }
.ws-stat-v { font-size:28px; font-weight:700; color:var(--accent); }
.ws-stat-l { font-size:11px; color:rgba(200,216,240,.4); margin-top:4px; }
.ws-tips { background:rgba(201,168,76,.05); border:1px solid rgba(201,168,76,.12); border-radius:12px; padding:20px; margin-bottom:24px; }
.ws-tips-title { font-size:13px; font-weight:600; color:var(--accent); margin-bottom:10px; }
.ws-tip { font-size:13px; color:rgba(200,216,240,.55); line-height:1.6; min-height:40px; transition:opacity .4s; }
.ws-leaderboard { text-align:left; }
.ws-lb-title { font-size:13px; font-weight:600; color:rgba(200,216,240,.6); margin-bottom:10px; }
.ws-lb-list { display:flex; flex-direction:column; gap:6px; }

/* ── [BANK-KPI-IP] Вкладка «КПЭ команды» ────────────────────────────
   Раскладка «таблица динамики | блок БОНУС». Живёт в CSS, а не в inline-стиле,
   ровно из-за media-запроса: на узкой панели правые колонки таблицы («Прирост»,
   «Сверх плана», «Вес») уезжали за край — теперь блок бонуса встаёт над таблицей,
   и ничего не теряется. Цвета — только через CSS-переменные (Forbes-палитра). */
.kpi-vtb-wrap { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start; }
.kpi-vtb-wrap > div { min-width:0; overflow-x:auto; }
/* Типографика таблицы КПЭ живёт ЗДЕСЬ, а не в inline-стилях ячеек: строки рисует JS
   (game_stage15 renderBankKpiPanel), и без общего правила размер пришлось бы держать
   в двух местах — в разметке шапки и в шаблоне строки. Прежние 11/9px читались плохо. */
#kpiVtbTable { font-size:14px; }
#kpiVtbTable thead th { font-size:11px; letter-spacing:.6px; white-space:nowrap; }
#kpiVtbTable tbody td { padding:9px 8px; }
#kpiVtbTable .kpi-code { font-size:11px; color:var(--dim); margin-top:2px; }
@media (max-width:760px) {
  .kpi-vtb-wrap { grid-template-columns:1fr; }
  .kpi-vtb-wrap > aside { order:-1; }   /* бонус — главное число, ему первым быть */
}

/* ══════════════════════════════════════════════════════════════════════════
   [BANK-TREE-SEM · DEC-B19 фаза 2] БАНКОВСКОЕ ДЕРЕВО СТОИМОСТИ
   --------------------------------------------------------------------------
   Свой каркас вместо телеком-сетки (#bank-tree в index.html). Форма блоков
   несёт экономику: герой + единственное тождество умножения, ƒ-петля Гордона,
   вычитательный водопад прибыли, стоки-соседи с осью фондирования, полоса драйверов.

   Цвета — ТОЛЬКО через переменные :root/[data-theme]: дерево обязано выжить в
   светлой теме, а эталон-мокап нарисован дарк-онли. Соответствие ролей:
   золото тождества → --accent, ƒ-связь → --dim2 + --ghost-dash, ограничение → --red,
   зона юнит-экономики (фаза 3) → --teal.
   ══════════════════════════════════════════════════════════════════════════ */

/* Контейнерные запросы здесь НЕ применимы: .tree-panel — flex-column с
   align-items:center, и inline-size containment схлопывает блок в ноль (ширина
   считается без учёта содержимого). Поэтому ниже обычный медиазапрос; его известное
   ограничение — он мерит окно, а дерево живёт средней колонкой трёхколоночного
   layout, то есть реально уже. Ограничение смягчено тем, что основной механизм —
   auto-fit сетки, которые деградируют при ЛЮБОЙ ширине контейнера. */
#bank-tree { width:100%; max-width:1060px; margin:0 auto; display:flex; flex-direction:column;
  align-items:stretch; }
#bank-tree[hidden] { display:none; }

/* ── Герой ─────────────────────────────────────────────────────────────── */
.bt-hero { border:1.5px solid var(--accent); border-radius:14px; padding:16px 24px; text-align:center;
  max-width:470px; margin:0 auto; background:var(--card); box-shadow:0 0 30px rgba(201,168,76,.10); }
.bt-period { font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:.5px; font-weight:600; opacity:.85; margin-bottom:6px; }
.bt-hero-lbl { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.bt-hero-v { font-family:var(--font-h); font-size:38px; font-weight:700; line-height:1.1; }
.bt-hero-fmt { font-size:12px; color:var(--dim2); margin-top:6px; }
.bt-hero-d { font-size:11.5px; margin-top:4px; }
.bt-hero-d.up { color:var(--green); } .bt-hero-d.dn { color:var(--red); }

.bt-conn { width:1px; height:20px; background:var(--b1); margin:0 auto; }

/* ── Пара «Капитал × P/BV» ─────────────────────────────────────────────── */
.bt-eq { display:grid; grid-template-columns:1fr 56px 1fr; align-items:center; max-width:640px; margin:0 auto; }
.bt-card { background:var(--card); border:1px solid var(--b1); border-radius:10px; padding:11px 14px; text-align:center; position:relative; }
.bt-l { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim2); margin-bottom:5px; }
.bt-v { font-family:var(--font-h); font-size:22px; font-weight:700; }
.bt-s { font-size:10.5px; color:var(--dim2); margin-top:3px; }
.bt-d { font-size:10.5px; margin-top:3px; color:var(--dim); }
.bt-d.up { color:var(--green); } .bt-d.dn { color:var(--red); }
.bt-opcell { display:flex; align-items:center; justify-content:center; padding:4px 0; }

/* ── Чипы операторов. Три класса визуальной грамматики (DEC-B19 §2.2):
      op — тождество, сплошное золото; fn — функциональная связь, пунктир;
      hard — регуляторное ограничение, у карточки, а не на ребре. ────────── */
.bt-chip { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:20px;
  padding:0 7px; border-radius:11px; font:700 12px/1 var(--font-h); cursor:default; }
.bt-chip.op   { background:var(--accent); color:var(--on-accent); }
.bt-chip.fn   { background:transparent; border:var(--ghost-dash); border-color:var(--dim); color:var(--dim2); font-style:italic; }
.bt-chip.hard { background:transparent; border:1px solid var(--red); color:var(--red);
  font:600 10px/1 var(--font-m); letter-spacing:.05em; padding:0 8px; height:19px; border-radius:10px; }
.bt-chip.hard.ok { border-color:var(--green); color:var(--green); }
.bt-chip.bad  { background:var(--red); color:var(--on-fill); }

/* ── ƒ-петля ROE → P/BV ────────────────────────────────────────────────── */
.bt-floop { max-width:640px; margin:6px auto 0; font-size:11.5px; color:var(--dim2);
  display:flex; justify-content:flex-end; align-items:center; gap:8px; padding-right:8px; flex-wrap:wrap; }
.bt-fline { flex:0 0 110px; border-top:var(--ghost-dash); border-color:var(--dim); }
.bt-floop-roe b { color:var(--text); }

/* ── Водопад прибыли ───────────────────────────────────────────────────── */
.bt-wf { max-width:760px; margin:26px auto 0; width:100%; }
.bt-wf-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; gap:12px; flex-wrap:wrap; }
.bt-wf-t { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim2); }
.bt-wf-res { font-family:var(--font-h); font-size:14px; color:var(--text); }
.bt-wf-res b { color:var(--accent); }
.bt-wfbar { display:flex; height:32px; border-radius:6px; overflow:hidden; border:1px solid var(--b1); }
.bt-wfbar > div { display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:600;
  white-space:nowrap; overflow:hidden; }
/* auto-fit, а не фиксированные 5 колонок: .tree-panel — средняя колонка внутри
   трёхколоночного layout решений, поэтому её ФАКТИЧЕСКАЯ ширина заметно меньше
   половины вьюпорта, и медиазапрос по ширине ОКНА описывает не тот объект. */
.bt-wfrow { display:grid; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); gap:8px; margin-top:10px; }
.bt-wfcell { background:var(--card); border:1px solid var(--b1); border-radius:8px; padding:8px 9px; text-align:center; }
.bt-wfl { font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim2); }
.bt-wfv { font-family:var(--font-h); font-size:16px; font-weight:700; margin-top:3px; }
.bt-wfm { font-size:10px; color:var(--dim); margin-top:2px; }
.bt-wfcell.minus .bt-wfv { color:var(--red); }
.bt-wfcell.res { border-color:var(--accent); background:var(--card2); }
.bt-wfcell.res .bt-wfv { color:var(--accent); }
.bt-wfcell.res.loss .bt-wfv { color:var(--red); }

/* ── Стоки: соседи по балансу, оператора между ними НЕТ ────────────────── */
.bt-stocks { max-width:760px; width:100%; margin:26px auto 0; display:grid; grid-template-columns:1fr 128px 1fr; align-items:stretch; gap:0; }
.bt-hardline { display:flex; justify-content:center; gap:6px; margin-top:8px; flex-wrap:wrap; }
.bt-fund { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--dim); font-size:10.5px; }
.bt-vline { flex:1; min-height:22px; border-left:var(--ghost-dash); border-color:var(--b1); }
.bt-fund-v { color:var(--dim2); }

/* ── Полоса драйверов ──────────────────────────────────────────────────── */
.bt-kpis { max-width:900px; width:100%; margin:28px auto 0; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(108px, 1fr)); gap:8px; }
.bt-kpi { background:var(--card); border:1px solid var(--b1); border-radius:8px; padding:9px; text-align:center; }
.bt-kpi:hover { border-color:var(--accent); }
.bt-kl { font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim2); }
.bt-kv { font-family:var(--font-h); font-size:17px; font-weight:700; margin-top:3px; }
.bt-kt { font-size:9.5px; color:var(--dim); margin-top:3px; font-style:italic; }

.bt-hint { max-width:900px; margin:20px auto 0; font-size:11px; color:var(--dim); text-align:center; }

/* ── Тултипы. Своего [data-tip] в проекте не было; глоссарная модалка тяжела
      для наведения на знак, а title="" не умеет показать арифметику со статусом
      инварианта. Здесь тултип несёт живые числа и вердикт verifyTree. ─────── */
/* white-space:pre-wrap, а не nowrap мокапа: formulaTip рёбер A-2 и B-6 длиной под
   180 символов уехал бы за экран. Дублируется в title="" — карточка обрезается о
   .tree-panel{overflow-y:auto} у верхней кромки, и нативная подсказка там страхует. */
[data-tip] { position:relative; }
[data-tip]:hover::after { content:attr(data-tip); position:absolute; bottom:132%; left:50%; transform:translateX(-50%);
  background:var(--surface); color:var(--text); border:1px solid var(--accent); border-radius:6px; padding:7px 11px;
  font:11.5px/1.45 var(--font-m); white-space:pre-wrap; width:max-content; max-width:330px;
  z-index:9200; box-shadow:0 4px 18px var(--shadow); text-align:left; pointer-events:none; }
/* Верхняя треть дерева: карточка вниз, иначе её срежет кромка прокрутки. */
[data-tip][data-tip-pos="below"]:hover::after { bottom:auto; top:132%; }

/* ── Адаптив. Основной механизм — auto-fit выше: он деградирует при ЛЮБОЙ ширине
      контейнера, включая ту, что панель получает на 1280. Медиазапрос нужен только
      стокам: средняя колонка там не карточка, а вертикальная ось фондирования, её
      нельзя просто перенести. Число 1180 — то же, что у bank_briefing.js:256:
      это момент, когда тесно становится внешнему трёхколоночному layout решений,
      то есть причина и следствие совпадают. ─────────────────────────────────── */
@media (max-width:1180px) {
  /* Стоки: средняя колонка — не карточка, а вертикальная ось фондирования, её
     нельзя просто перенести, поэтому ось разворачивается в горизонтальную. */
  .bt-stocks { grid-template-columns:1fr; gap:10px; }
  .bt-fund { flex-direction:row; gap:10px; padding:6px 0; }
  .bt-vline { flex:1; min-height:0; min-width:20px; border-left:none; border-top:var(--ghost-dash); border-color:var(--b1); }
  .bt-floop { justify-content:flex-start; }
  .bt-fline { display:none; }
  /* Пара «Капитал × P/BV» складывается в столбец. Порядок в разметке —
     карточка, чип, карточка, поэтому чип сам встаёт МЕЖДУ ними: иначе тождество
     читалось бы как «Капитал ×» и отдельно «P/BV». */
  .bt-eq { grid-template-columns:1fr; gap:6px; }
}

/* Подписи в сегментах гасятся ОТДЕЛЬНЫМ, более низким порогом, чем раскладка:
   пороги в JS процентные, а ограничение пиксельное — на полосе ~500 px даже 21 %
   это ~105 px, и «44.7 · прибыль» ещё влезает, а ниже уже рвётся на полуслове.
   Ставить это в общий 1180-й запрос значило бы гасить подписи на ноутбуке, где они
   помещаются. Полоса тогда остаётся картинкой ПРОПОРЦИЙ: числа читаются в ячейках
   прямо под ней, полный текст сохраняется в title. */
@media (max-width:900px) {
  .bt-wfbar > div { font-size:0; }
}

/* ── Сегменты водопада. Цвета классами, а не инлайном из JS: CLAUDE.md §4
      запрещает хардкод-цвета в JS, и светлая тема иначе не переживёт. ────── */
.bt-wfbar { position:relative; }
.bt-seg-ni   { background:var(--accent); }
.bt-seg-prov { background:var(--co); }
.bt-seg-opex { background:var(--purple); }
.bt-seg-tax  { background:var(--dim); }
.bt-seg-ni { color:var(--on-accent); }
.bt-seg-prov, .bt-seg-opex { color:var(--on-fill); }
.bt-seg-tax { color:var(--text); }
/* Убыток: доход кончился раньше, чем расходы. Штриховка — уже занятая в проекте
   грамматика «это не обеспечено» (.fr010-hatch), поэтому читается без легенды. */
.bt-wf-loss { position:absolute; top:0; bottom:0; right:0; pointer-events:none;
  background:repeating-linear-gradient(45deg, transparent, transparent 6px, var(--red) 6px, var(--red) 7px);
  opacity:.38; border-left:2px solid var(--red); }
.bt-wf-notch { position:absolute; top:0; bottom:0; width:2px; background:var(--accent); pointer-events:none; }
.bt-wf-note { font-size:10.5px; color:var(--dim); margin-top:6px; text-align:center; }

/* ── [PATCH DS-ICONS] Значки дизайн-системы (Lucide-спрайт ds_icons.js) ──────
   Заменяют эмодзи в заголовках банковских категорий решений: карточка ДС
   `guidelines/icon-set.html` («Icon set · categories — Replacement for the
   emoji»), правило «Never an emoji». Цвет приходит обводкой из JS как
   CSS-переменная категории, поэтому здесь только геометрия.
   Скоуп раскладки — сгенерированные банковские категории (data-bank-gen);
   телеком-разметка .cat-nm не меняется. */
.ds-ic { flex-shrink:0; vertical-align:-.15em; }
.cat[data-bank-gen] .cat-nm { display:flex; align-items:center; gap:6px; }
.sl-desc .w .ds-ic { margin-right:4px; }