/* ============================================================
   TCP Design System — Trading CoPilot
   Drop into: static/tcp.css
   ============================================================ */

/* --- Плавные переходы между страницами ---
   Полная перезагрузка страницы (переход по меню / refresh) раньше «вспыхивала»
   резко. View Transitions делают мягкий кросс-фейд старой→новой страницы —
   нативно, без JS и без потери скорости (наложение ~180мс). Браузеры без
   поддержки получают лёгкий фолбэк-фейд контента. Уважаем prefers-reduced-motion. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 120ms; }

@supports not (view-transition-name: none) {
  @media (prefers-reduced-motion: no-preference) {
    .tcp-main { animation: tcp-page-fade 120ms ease both; }
  }
}
@keyframes tcp-page-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* --- Variables --- */
/* Бренд-токены Trading Copilot (design handoff 2026-06-26). Тёмная тема —
   основная. Палитра Apple-стиля: surface #141416, акцент positive #32D74B. */
:root {
  --bg-0: #08080A;
  --bg-1: #141416;
  --bg-2: #1C1C1E;
  --bg-3: #28282B;
  --border: rgba(255,255,255,0.07);
  --border-md: rgba(255,255,255,0.12);
  --text-1: #F5F5F7;
  --text-2: #98989D;
  --text-3: #6E6E73;
  --text-4: #48484B;
  --green: #32D74B;
  --green-hover: #5BDF6E;
  --green-active: #28B33E;
  --green-deep: #1D8A4E;
  --on-green: #06270F;          /* тёмный текст на ярко-зелёной кнопке */
  --red: #FF453A;
  --red-text: #FF6B61;
  --red-hover: #FF6256;
  --red-active: #E03A30;
  --amber: #FF9F0A;
  --amber-text: #FFB340;
  --green-dim: rgba(50,215,75,0.16);
  --red-dim: rgba(255,69,58,0.14);
  --amber-dim: rgba(255,159,10,0.14);
  --green-border: rgba(50,215,75,0.30);
  --red-border: rgba(255,69,58,0.28);

  /* Liquid-glass таб-бар (эталон Home Mobile — DEV-2), dark: */
  --glass: rgba(22,22,24,0.42);
  --glassLine: rgba(255,255,255,0.12);
  --handle: rgba(255,255,255,0.30);
  /* Insights mobile (эталон REFERENCE-insights-mobile), dark: */
  --blue: #0A84FF;
  --blue-soft: rgba(10,132,255,0.16);
  /* Цвета групп разделов (меню Sections + значки в шапках экранов), dark: */
  --sbBlue: #0A84FF;
  --sbAmber: #FF9F0A;
  /* Тайл = карточка +1 тон. У эталона card #1C1C1E → tile #2C2C2E; наша карточка
     темнее (#141416) → тот же шаг = #1C1C1E (иначе тайлы выбиваются, правка Отчима). */
  --tile: #1C1C1E;
  --amber-border: rgba(255,159,10,0.28);
  --f: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'SF Mono', ui-monospace, 'Cascadia Code', monospace;
  --r: 13px;
  --r-card: 18px;
  --r-btn: 11px;
  --r-sm: 8px;
  --r-xs: 6px;
  --sidebar-w: 252px;
  --topbar-h: 52px;
}

[data-theme="light"] {
  --bg-0: #F5F5F7;
  --bg-1: #FFFFFF;
  --bg-2: #F0F0F2;
  --bg-3: #EEEEF0;
  --border: rgba(0,0,0,0.06);
  --border-md: rgba(0,0,0,0.10);
  --text-1: #1D1D1F;
  --text-2: #6E6E73;
  --text-3: #A1A1A6;
  --text-4: #C7C7CC;
  /* На свету зелёный должен читаться и как текст, и как заливка → глубокий
     positive-deep. Семантика (зелёный рост) сохранена. */
  --green: #30A46C;
  --green-hover: #2B9460;
  --green-active: #257A52;
  --green-deep: #1D8A4E;
  --on-green: #FFFFFF;
  --green-border: rgba(48,164,108,0.30);

  /* Liquid-glass таб-бар (эталон Home Mobile — DEV-2), light: */
  --glass: rgba(252,252,253,0.48);
  --glassLine: rgba(0,0,0,0.06);
  --handle: rgba(0,0,0,0.20);
  /* Insights mobile (эталон REFERENCE-insights-mobile), light: */
  --blue: #2A6FDB;
  --blue-soft: rgba(42,111,219,0.12);
  /* Цвета групп разделов, light: */
  --sbBlue: #2A6FDB;
  --sbAmber: #C2701C;
  --tile: #FAFAFB;
  --red: #E5342B;
  --red-text: #E5342B;
  --red-hover: #CC2D25;
  --red-active: #B3271F;
  --amber: #B25E00;
  --amber-text: #B25E00;
  --green-dim: rgba(48,164,108,0.13);
  --red-dim: rgba(255,59,48,0.10);
  --amber-dim: rgba(255,159,10,0.12);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--f);
  background: var(--bg-0);
  color: var(--text-1);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* --- App Layout --- */
.tcp-app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 1fr;
  min-height: 100vh;
}

/* --- Topbar (только мобайл; на десктопе скрыт — лого/язык/тема в сайдбаре) --- */
.tcp-topbar {
  grid-column: 1 / -1;
  background: var(--bg-1);
  border-bottom: 0.5px solid var(--border-md);
  padding: 0 20px;
  display: none;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 200;
}

/* --- Шапка сайдбара: лого сверху, под ним язык + тема (по дизайну) --- */
.tcp-sidebar-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px 8px 14px;
  margin-bottom: 6px;
  border-bottom: 0.5px solid var(--border-md);
}
.tcp-sidebar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tcp-topbar-divider {
  width: 1px;
  height: 18px;
  background: var(--border-md);
  flex-shrink: 0;
}

.tcp-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Logo --- */
.tcp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.tcp-logo-img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  object-fit: cover;
  object-position: center center;
  flex-shrink: 0;
}

/* Показываем логотип под текущую тему. data-theme выставляется до отрисовки,
   поэтому нужный логотип виден сразу — без мерцания при загрузке/навигации. */
html[data-theme="light"] .tcp-logo-dark { display: none; }
html[data-theme="dark"] .tcp-logo-light { display: none; }

.tcp-logo-icon {
  width: 30px;
  height: 30px;
  background: #0A0A0B;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: -0.3px;
  color: transparent;
  background-image: linear-gradient(135deg, #C8C8CC 0%, #F5F5F7 50%, #A0A0A8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  flex-shrink: 0;
  /* Black square behind the text */
  background-color: #0A0A0B;
}

/* Override: apply black bg and gradient text separately */
.tcp-logo-icon {
  background-color: #0A0A0B;
  background-image: none;
  -webkit-text-fill-color: unset;
  color: transparent;
}

.tcp-logo-icon::after {
  content: 'TCP';
  position: absolute;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: -0.3px;
  background: linear-gradient(135deg, #C8C8CC 0%, #F5F5F7 50%, #A0A0A8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tcp-logo-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.15) 0%, transparent 60%);
  pointer-events: none;
}

.tcp-logo-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-1);
  white-space: nowrap;
}

.tcp-logo-name span {
  color: var(--text-2);
  font-weight: 400;
}

/* Логотип-плашка «tcp.», строго по эталону REFERENCE-sidebar. CSS-плашка (не SVG) =
   идеальное flex-центрирование текста по обеим осям. */
.tcp-logo-chip {
  width: 40px; height: 40px; flex: none;
  border-radius: 11px;
  background: #ECECEE;
  border: 1px solid rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; letter-spacing: -0.3px; line-height: 1;
  color: #1D1D1F;
}
.tcp-logo-dot { color: #30A46C; }
html[data-theme="dark"] .tcp-logo-chip { background: #26262A; border-color: rgba(255,255,255,0.10); color: #F5F5F7; }
.tcp-sidebar-header .tcp-logo-name { font-size: 18px; }

/* --- Lang Toggle --- */
.tcp-lang {
  display: flex;
  gap: 2px;
  background: var(--bg-2);
  border: 0.5px solid var(--border-md);
  border-radius: var(--r-sm);
  padding: 2px;
}

.tcp-lang-btn {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 6px;
  color: var(--text-3);
  transition: all 0.15s;
  letter-spacing: 0.2px;
  text-decoration: none;
}

.tcp-lang-btn:hover { color: var(--text-2); }
.tcp-lang-btn.active {
  background: var(--bg-1);
  color: var(--text-1);
  border: 0.5px solid var(--border-md);
}

/* --- Theme Toggle --- */
.tcp-theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 0.5px solid var(--border-md);
  background: var(--bg-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-size: 15px;
  transition: background 0.15s;
}

.tcp-theme-toggle:hover { background: var(--bg-3); }

/* --- Sidebar --- */
.tcp-sidebar {
  background: var(--bg-1);
  border-right: 0.5px solid var(--border-md);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* 3 зоны сайдбара (по REFERENCE-sidebar): шапка (fix) → nav (СКРОЛЛ) → футер (fix снизу) */
.tcp-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 -2px;
  padding: 0 2px;
}
.tcp-sidebar-foot {
  flex: none;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 0.5px solid var(--border-md);
}

.tcp-nav-section {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: var(--text-3);
  padding: 10px 8px 5px;
  text-transform: uppercase;
  margin-top: 4px;
}

.tcp-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-2);
  transition: all 0.12s;
  position: relative;
  letter-spacing: -0.1px;
  text-decoration: none;
  cursor: pointer;
}

.tcp-nav-item:hover {
  background: var(--bg-2);
  color: var(--text-1);
  text-decoration: none;
}

.tcp-nav-item.active {
  background: var(--bg-2);
  color: var(--text-1);
  font-weight: 500;
  border: 0.5px solid var(--border-md);
}

.tcp-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 2.5px;
  border-radius: 2px;
  background: var(--green);
}

.tcp-nav-item i {
  font-size: 15px;
  width: 17px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.7;
}

.tcp-nav-item.active i { opacity: 1; }

.tcp-nav-badge {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--green-dim);
  color: var(--green);
}

.tcp-nav-badge.warn {
  background: var(--red-dim);
  color: var(--red);
}

/* Sidebar bottom widget */
.tcp-sidebar-bottom {
  padding: 12px 13px;
  background: var(--bg-2);
  border-radius: 13px;
  border: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.tcp-risk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.tcp-risk-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}

.tcp-risk-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

.tcp-risk-value span {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
}

.tcp-risk-bar-wrap {
  height: 6px;
  background: #D7D7DD;
  border-radius: 3px;
  overflow: hidden;
}
html[data-theme="dark"] .tcp-risk-bar-wrap { background: rgba(255,255,255,0.16); }

.tcp-risk-bar {
  height: 100%;
  min-width: 7px;
  border-radius: 3px;
  background: var(--green);
  transition: width 0.2s ease, background 0.2s ease;
}

.tcp-risk-bar-high {
  background: var(--amber);
}

.tcp-risk-bar-over {
  background: var(--red);
}

.tcp-risk-sub {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--text-3);
  margin-top: 5px;
}

/* --- Main Content Area --- */
.tcp-main {
  background: var(--bg-0);
  padding: 20px 24px;
  /* НЕ ставить height:100vh + overflow-y:auto: вместе с flex-колонкой контента
     это создаёт внутренний скролл и режет строки таблицы. Высоту держит
     sticky-сайдбар (height:100vh), а main растёт естественно → скроллит страница. */
  min-height: 100vh;
  min-width: 0;
}

/* --- Flash Messages --- */
.tcp-flash {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 14px;
  letter-spacing: -0.1px;
  transition: opacity 0.3s, max-height 0.3s;
}
.tcp-flash.tcp-flash-hiding {
  opacity: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.tcp-flash i { font-size: 15px; flex-shrink: 0; }
.tcp-flash-text { flex: 1; }
.tcp-flash-close {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.tcp-flash-close:hover { opacity: 1; }

.tcp-flash-success {
  background: var(--green-dim);
  border: 0.5px solid var(--green-border);
  color: var(--green);
}

.tcp-flash-danger, .tcp-flash-error {
  background: var(--red-dim);
  border: 0.5px solid var(--red-border);
  color: var(--red);
}

.tcp-flash-warning {
  background: var(--amber-dim);
  border: 0.5px solid var(--amber-border);
  color: var(--amber);
}

.tcp-flash-info {
  background: var(--green-dim);
  border: 0.5px solid var(--green-border);
  color: var(--green);
}

/* --- Page Header --- */
.tcp-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}
/* Кнопка «назад» деталки — как на всех деталках (скип/день): текст-ссылка слева
   над заголовком, а не кнопка справа (правка Отчима: одинаково и там же везде). */
.tcp-page-header .back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 12px; text-decoration: none; }
.tcp-page-header .back:hover { color: var(--text-1); }
.tcp-page-header .back i, .tcp-page-header .back svg { width: 15px; height: 15px; }

/* Кастомный автокомплит (замена нативного datalist — тот не подсвечивает hover
   и не стилизуется). Свой список: hover/keyboard-подсветка, тема-осознанный. */
.tcp-ac { position: relative; }
.tcp-ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; max-height: 240px; overflow-y: auto; background: var(--bg-1); border: 1px solid var(--border-md); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.35); padding: 4px; }
.tcp-ac-opt { padding: 9px 12px; border-radius: 7px; font-size: 14px; color: var(--text-1); cursor: pointer; }
.tcp-ac-opt:hover, .tcp-ac-opt.is-active { background: var(--green-dim); color: var(--green); }
.tcp-ac-opt[hidden] { display: none; }

.tcp-page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: var(--text-1);
  line-height: 1;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
/* Иконка у заголовка страницы (та же, что в сайдбаре) — не больше текста. */
.tcp-page-title > i { font-size: 0.92em; flex: none; color: var(--text-2); }
.tcp-page-title > svg { width: 1em; height: 1em; flex: none; color: var(--text-2); }

.tcp-page-sub {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 3px;
  font-weight: 400;
  letter-spacing: -0.1px;
}

.tcp-page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* --- Buttons --- */
.tcp-app .btn-primary,
.tcp-app .btn-success {
  --bs-btn-bg: var(--green);
  --bs-btn-border-color: var(--green);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--green-hover);
  --bs-btn-hover-border-color: var(--green-hover);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--green-active);
  --bs-btn-active-border-color: var(--green-active);
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 0, 168, 104;
}

.tcp-app .btn-danger {
  --bs-btn-hover-bg: var(--red-hover);
  --bs-btn-hover-border-color: var(--red-hover);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--red-active);
  --bs-btn-active-border-color: var(--red-active);
}

.tcp-btn {
  font-family: var(--f);
  font-size: 13px;
  font-weight: 400;
  padding: 8px 16px;
  border-radius: var(--r-btn);
  border: 0.5px solid var(--border-md);
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.12s;
  letter-spacing: -0.1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  line-height: 1;
}

.tcp-btn:hover {
  background: var(--bg-3);
  color: var(--text-1);
  border-color: var(--border-md);
  text-decoration: none;
}

.tcp-btn-primary {
  background: var(--green);
  color: var(--on-green);
  border-color: var(--green);
  font-weight: 600;
}

.tcp-btn.tcp-btn-primary:hover,
.tcp-btn.tcp-btn-primary:focus-visible,
a.tcp-btn-primary:hover,
button.tcp-btn-primary:hover {
  background: var(--green-hover);
  border-color: var(--green-hover);
  color: var(--on-green);
  filter: none;
}

.tcp-btn-primary:active {
  background: var(--green-active);
  border-color: var(--green-active);
  color: var(--on-green);
}

.tcp-btn-danger {
  background: var(--red-dim);
  color: var(--red);
  border-color: var(--red-border);
}

.tcp-btn.tcp-btn-danger:hover,
.tcp-btn.tcp-btn-danger:focus-visible,
button.tcp-btn-danger:hover {
  background: var(--red-hover);
  border-color: var(--red-hover);
  color: #fff;
  filter: none;
}

.tcp-btn-danger:active {
  background: var(--red-active);
  border-color: var(--red-active);
  color: #fff;
}

.tcp-btn-sm {
  font-size: 12px;
  padding: 5px 11px;
}

.tcp-btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Cards --- */
.tcp-card {
  background: var(--bg-1);
  border: 0.5px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color 0.15s;
  margin-bottom: 14px;
}

/* В светлой теме карточки получают мягкую тень (по бренд-буку). */
[data-theme="light"] .tcp-card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 30px rgba(0,0,0,0.03);
}

.tcp-card:hover { border-color: var(--border-md); }

.tcp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px 11px;
  border-bottom: 0.5px solid var(--border);
}

.tcp-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.3px;
  margin: 0;
}

.tcp-card-meta {
  font-size: 12px;
  color: var(--text-3);
}

.tcp-card-body {
  padding: 14px 16px;
}

/* Шапка карточек настроек (крупный h2 с иконкой). Без своего правила заголовок
   прижимался к углу — выравниваем по левому краю контента (16px) и даём воздух
   сверху. Иконка и текст по центру через flex. */
.tcp-card-head {
  padding: 16px 16px 2px;
}
.tcp-card-head h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* --- Trading sessions schedule (dashboard) --- */
.tcp-session-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 12px;
  border: 0.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-0);
}
.tcp-session-pill-active {
  border-color: var(--green-border);
  background: rgba(50,215,75,0.08);
}
.tcp-session-pill-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.tcp-session-pill-active .tcp-session-pill-name { color: var(--green); }
.tcp-session-pill-hours {
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.tcp-session-entry {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--green);
  background: rgba(50,215,75,0.12);
  border-radius: 4px;
  padding: 1px 4px;
}

/* --- Metrics Grid --- */
.tcp-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.tcp-metric {
  background: var(--bg-1);
  border: 0.5px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  transition: border-color 0.15s;
}

.tcp-metric:hover { border-color: var(--border-md); }

.tcp-metric-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 7px;
  letter-spacing: -0.1px;
}

.tcp-metric-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--text-1);
}

.tcp-metric-value.pos { color: var(--green); }
.tcp-metric-value.neg { color: var(--red); }

/* Trade detail: bigger metric font with proportional $ suffix. */
.tcp-metrics-detail .tcp-metric-value {
  font-size: 32px;
}

.tcp-metrics-detail .tcp-metric-value .tc-pnl-usd {
  font-size: 0.6em;
  letter-spacing: -0.5px;
  opacity: 0.85;
  margin-left: 2px;
}

/* ── Backtest journal: a clean aligned stat grid (replaces a ragged flex-wrap
   that produced uneven 3-up / 2-up rows). Auto-fits 2 cols on a phone, more on
   desktop, every cell aligned to a column. ── */
.tcp-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 16px 18px;
}
.tcp-stat-grid.tcp-stat-grid-head {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 0.5px solid var(--border);
}
.tcp-stat {
  min-width: 0;
}
.tcp-stat-label {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: -0.1px;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tcp-stat-value {
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}
.tcp-stat-value.pos { color: var(--green); }
.tcp-stat-value.neg { color: var(--red); }

/* ── Backtest breakdowns: compact one-row-per-bucket (key + trades + WR + R),
   columns aligned via a fixed grid. Tiny aggregate tables shouldn't explode
   into tall card-per-row stacks on mobile. ── */
.tcp-bd-row {
  display: grid;
  grid-template-columns: 1fr 2.4rem 3.6rem 4rem;
  gap: 8px 12px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 0.5px solid var(--border);
}
.tcp-bd-row:first-child { border-top: 0; }
.tcp-bd-head {
  padding: 0 0 4px;
  border: 0;
}
.tcp-bd-head .tcp-bd-num,
.tcp-bd-head .tcp-bd-key {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-3);
  font-weight: 600;
}
.tcp-bd-key {
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tcp-bd-num {
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tcp-bd-num.muted { color: var(--text-3); }
.tcp-bd-num.r { font-weight: 600; }
.tcp-bd-num.pos { color: var(--green); }
.tcp-bd-num.neg { color: var(--red); }

.tcp-metric-delta {
  font-size: 12px;
  margin-top: 6px;
  color: var(--text-3);
  letter-spacing: -0.1px;
}

/* --- Badges --- */
.tcp-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 5px;
  letter-spacing: -0.1px;
  background: var(--bg-3);
  color: var(--text-2);
}

.tcp-badge-green {
  background: var(--green-dim);
  color: var(--green);
  border: 0.5px solid var(--green-border);
}

.tcp-badge-red {
  background: var(--red-dim);
  color: var(--red);
  border: 0.5px solid var(--red-border);
}

.tcp-badge-amber {
  background: var(--amber-dim);
  color: var(--amber);
  border: 0.5px solid var(--amber-border);
}

.tcp-badge-pill {
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 11px;
}

/* --- Table --- */
.tcp-table-wrap {
  overflow-x: auto;
}

.tcp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tcp-table thead th {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  padding: 11px 14px;
  text-align: left;
  border-bottom: 0.5px solid var(--border-md);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--bg-1);
}

.tcp-table tbody tr {
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}

.tcp-table tbody tr:last-child { border-bottom: none; }

.tcp-table tbody tr:hover { background: var(--bg-2); }

.tcp-table tbody td {
  padding: 10px 14px;
  color: var(--text-2);
  vertical-align: middle;
}

.tc-pnl-usd {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.92;
}

.tcp-table .tc-date {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  font-family: var(--f-mono);
}

.tcp-table .tc-pnl {
  font-family: var(--f);
  font-size: 13.5px;
  font-weight: 600;
}

.tcp-table .tc-pnl .mono {
  font-family: var(--f);
}

.tcp-table td.mono {
  font-size: 12px;
}

.tc-pos { color: var(--green); }
.tc-neg { color: var(--red); }

.tcp-session-dot {
  font-size: 10px;
  margin-right: 6px;
  vertical-align: middle;
  line-height: 1;
}

.tcp-session-dot-active {
  color: var(--green);
  filter: drop-shadow(0 0 4px rgba(0, 197, 122, 0.55));
}

.tcp-session-dot-inactive {
  color: var(--red);
}

/* --- Trading day chat --- */
.tcp-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
  margin-bottom: 14px;
  scroll-behavior: smooth;
}

.tcp-chat-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 88%;
}

.tcp-chat-msg-user {
  align-self: flex-end;
  align-items: flex-end;
}

.tcp-chat-msg-ai {
  align-self: flex-start;
  align-items: flex-start;
}

.tcp-chat-meta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tcp-chat-meta i {
  font-size: 11px;
}

.tcp-chat-bubble {
  font-family: var(--f);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-1);
  padding: 10px 13px;
  border-radius: 14px;
  border: 0.5px solid var(--border-md);
  background: var(--bg-2);
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.tcp-chat-msg-user .tcp-chat-bubble {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  border-bottom-right-radius: 4px;
}

[data-theme="light"] .tcp-chat-msg-user .tcp-chat-bubble {
  background: var(--green);
  color: #fff;
}

.tcp-chat-msg-ai .tcp-chat-bubble {
  border-bottom-left-radius: 4px;
}

.tcp-chat-form textarea.tcp-input {
  min-height: 80px;
  resize: vertical;
}

.tcp-chat-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-3);
}

.tcp-chat-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--text-3);
  border-top-color: var(--green);
  animation: tcp-spin 0.7s linear infinite;
}

/* Кнопка/ссылка разбора в состоянии «AI думает» (js-ai-analyze → .is-ai-busy):
   inline-flex гарантирует, что спиннер-span не схлопнется вне flex-контейнера. */
.is-ai-busy { display: inline-flex !important; align-items: center; gap: 7px; opacity: 0.96; cursor: default; pointer-events: none; }
.is-ai-busy .tcp-chat-spinner { flex: none; display: inline-block; }
.is-ai-busy .ai-busy-txt { white-space: nowrap; }

.tcp-spinner-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--text-3);
  border-top-color: var(--green);
  animation: tcp-spin 0.8s linear infinite;
}

@keyframes tcp-spin {
  to { transform: rotate(360deg); }
}

.tcp-btn.tcp-btn-loading {
  opacity: 0.7;
  pointer-events: none;
}

.tcp-chat-msg-pending .tcp-chat-bubble {
  background: transparent;
  border-style: dashed;
  color: var(--text-3);
  font-style: italic;
}

/* --- Accounts page --- */
.tcp-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.tcp-account-card {
  background: var(--bg-1);
  border: 0.5px solid var(--border);
  border-radius: var(--r);
  padding: 16px 18px;
  position: relative;
  border-left-width: 3px;
}

.tcp-account-card-green { border-left-color: var(--green); }
.tcp-account-card-yellow { border-left-color: var(--amber); }
.tcp-account-card-red { border-left-color: var(--red); }

.tcp-account-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.tcp-account-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 3px;
}

.tcp-account-card-meta {
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-3);
}

.tcp-account-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.tcp-account-balance {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 4px;
  line-height: 1.2;
}

.tcp-account-pnl {
  font-size: 12px;
  font-weight: 500;
  margin-left: 6px;
}

.tcp-pos { color: var(--green); }
.tcp-neg { color: var(--red); }

.tcp-account-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 14px;
}

.tcp-account-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tcp-account-status-green { background: var(--green); }
.tcp-account-status-yellow { background: var(--amber); }
.tcp-account-status-red { background: var(--red); }

.tcp-account-progress {
  margin-bottom: 14px;
}

.tcp-account-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 5px;
  letter-spacing: 0.3px;
}

.tcp-account-progress-bar {
  height: 6px;
  background: var(--bg-2);
  border-radius: 3px;
  overflow: hidden;
}

.tcp-account-progress-fill {
  height: 100%;
  background: var(--green);
  transition: width 0.3s ease;
}

.tcp-account-dd-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.tcp-account-dd {
  font-size: 11px;
}

.tcp-account-dd-label {
  color: var(--text-3);
  margin-bottom: 3px;
  letter-spacing: 0.3px;
}

.tcp-account-dd-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  margin-bottom: 5px;
}

.tcp-account-dd-limit {
  font-weight: 400;
  color: var(--text-3);
  font-size: 11px;
}

.tcp-account-dd-bar {
  height: 4px;
  background: var(--bg-2);
  border-radius: 2px;
  overflow: hidden;
}

.tcp-account-dd-fill {
  height: 100%;
  background: var(--amber);
  transition: width 0.3s ease;
}

.tcp-account-card-red .tcp-account-dd-fill { background: var(--red); }

.tcp-account-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 0.5px solid var(--border);
  font-size: 11px;
  color: var(--text-3);
}

.tcp-preset-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tcp-preset-pill {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 0.5px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  text-decoration: none;
  transition: all 0.15s;
}

.tcp-preset-pill:hover {
  border-color: var(--green);
  color: var(--text-1);
}

.tcp-preset-pill.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.tcp-link {
  color: var(--green);
  text-decoration: none;
  font-weight: 500;
}

.tcp-link:hover { text-decoration: underline; }

.tcp-form-hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.4;
}

.tcp-phase-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--text-2);
  border: 0.5px solid var(--border);
  margin-left: 6px;
  vertical-align: middle;
}

.tcp-phase-badge-phase1 { background: rgba(245, 158, 11, 0.15); color: var(--amber); border-color: var(--amber); }
.tcp-phase-badge-phase2 { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border-color: #60a5fa; }
.tcp-phase-badge-funded { background: rgba(34, 197, 94, 0.15); color: var(--green); border-color: var(--green); }
.tcp-phase-badge-personal { background: var(--bg-2); color: var(--text-3); border-color: var(--border); }

.tcp-trade-account-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 2px;
  letter-spacing: 0.2px;
  padding: 1px 6px;
  border: 0.5px solid var(--border);
  border-radius: 999px;
  background: var(--bg-2);
}

.tcp-trade-account-tag i { font-size: 10px; }

.tcp-trade-account-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.tcp-trade-account-tags .tcp-trade-account-tag { margin-top: 0; }

/* --- Aggregated account balance card --- */
.tcp-balance-card {
  border-color: var(--green-border);
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--green-dim) 100%);
  padding: 0;
}

.tcp-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
}

.tcp-balance-row-sep {
  border-top: 0.5px solid var(--border);
}

.tcp-balance-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}

.tcp-balance-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tcp-balance-currency-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--text-2);
  border: 0.5px solid var(--border);
}

.tcp-balance-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-1);
  line-height: 1.1;
}

.tcp-balance-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}

.tcp-balance-side-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: baseline;
}

.tcp-balance-side-row > span:first-child {
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0.3px;
}

.tcp-chat-error {
  margin: 10px 0;
  padding: 9px 12px;
  border: 0.5px solid var(--red);
  background: rgba(220, 38, 38, 0.08);
  color: var(--red);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
}

.tcp-learning-block {
  border-top: 0.5px solid var(--border);
  padding-top: 14px;
  margin-top: 18px;
}

.tcp-learning-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tcp-learning-hint {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.45;
  margin-bottom: 8px;
}
.tc-neu { color: var(--text-2); }

.tcp-table .tc-rr {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--text-3);
}

/* --- Filter Bar --- */
.tcp-filter {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 16px;
  background: var(--bg-1);
  border: 0.5px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
}

/* Компактный фильтр-«пилюля» (Счёт: Все ▾) — тулбар журнала сделок. */
.tcp-fpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 11px;
  font-size: 13px;
  color: var(--text-3);
  white-space: nowrap;
}
.tcp-fpill > span { color: var(--text-3); }
.tcp-fpill select,
.tcp-fpill input[type="date"] {
  background: transparent;
  border: 0;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  outline: none;
  padding: 2px 0;
  cursor: pointer;
}
/* Своя стрелка (⇅) вместо нативной — чтобы ширину можно было плотно подогнать
   под выбранный текст без обрезки (нативная стрелка ела непредсказуемо). */
.tcp-fpill select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M8 9l4-4 4 4'/><path d='M16 15l-4 4-4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 11px;
}
.tcp-fpill input[type="date"] { cursor: text; min-width: 116px; }

/* Карточки-варианты в пустом состоянии «Сделки» (по дизайн-спеку). */
.tcp-empty-tile {
  width: 268px;
  background: var(--bg-2);
  border: 1px solid var(--border-md);
  border-radius: 16px;
  padding: 20px;
  text-align: left;
  text-decoration: none;
  color: var(--text-1);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tcp-empty-tile.is-green:hover { border-color: rgba(48,164,108,0.5); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.tcp-empty-tile.is-blue:hover { border-color: rgba(42,111,219,0.5); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }

.tcp-filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 140px;
}

.tcp-filter-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: -0.1px;
}

/* --- Form Elements --- */
.tcp-input,
.tcp-select {
  font-family: var(--f);
  font-size: 13px;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  border: 0.5px solid var(--border-md);
  background: var(--bg-2);
  color: var(--text-1);
  outline: none;
  transition: border-color 0.15s;
  letter-spacing: -0.1px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.tcp-input:focus,
.tcp-select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(50,215,75,0.1);
}

.tcp-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238C8C99' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

.tcp-input::placeholder { color: var(--text-3); }

/* Number inputs — нативные «уёбищные» спиннеры скрыты во всех браузерах;
   вместо них свои аккуратные кнопки ↑/↓ (JS оборачивает в .tcp-num, см.
   base.html tcpEnhanceNumberSteppers). Одинаковый вид на Win/Mac. */
input[type="number"].tcp-input {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"].tcp-input::-webkit-inner-spin-button,
input[type="number"].tcp-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Степпер в стиле селекта: шевроны ↑↓ справа ВНУТРИ поля, серые #8C8C99 как
   chevron у select, тот же размер/толщина. Обёртка display:flex → её высота
   ГАРАНТИРОВАННО равна высоте инпута (нижний шеврон не уедет под поле). Кнопки
   absolute по вертикальному центру. Поле сохраняет рамку и скругление. */
.tcp-num {
  position: relative;
  display: flex;
  align-items: center;
  align-self: center;      /* не растягиваться по вертикали в flex-колонке form-group */
  width: 100%;
  min-width: 0;
}
.tcp-num > input[type="number"].tcp-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding-right: 26px;     /* место под шевроны */
}
.tcp-num-btns {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  pointer-events: none;    /* контейнер не перехватывает клики/выделение */
}
.tcp-num-btns button {
  pointer-events: auto;
  display: block;
  width: 12px;
  height: 7px;
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 0;
  background: transparent;
  color: #8C8C99;          /* как chevron у .tcp-select */
  cursor: pointer;
  transition: color 0.12s;
}
.tcp-num-btns button:hover { color: var(--green); }
.tcp-num-btns svg { display: block; width: 11px; height: 7px; margin: 0 auto; }

/* Инлайн «+ свой вариант» под группами пресетов (сетап/модель/триггеры) */
.tcp-custom-add {
  margin-top: 7px;
  max-width: 280px;
  font-size: 12px;
  padding: 6px 10px;
}

/* Кнопка удаления «×» на кастомном чипе (модель/тип сетапа/триггер) */
.tcp-chip-x {
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
  margin-left: 6px;
  padding: 0 1px;
  cursor: pointer;
  border-radius: 3px;
}
.tcp-chip-x:hover { color: var(--red); }
.tcp-chip-x:disabled { opacity: .4; cursor: default; }

/* --- Date inputs (native calendar picker) --- */
input[type="date"],
.tcp-input[type="date"] {
  background: var(--bg-1);
  color: var(--text-1);
  min-height: 34px;
}

html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] .tcp-input[type="date"] {
  color-scheme: dark;
}

html[data-theme="light"] input[type="date"],
html[data-theme="light"] .tcp-input[type="date"] {
  color-scheme: light;
}

input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  color: var(--text-1);
}

input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--text-1);
  padding: 0 2px;
}

input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus {
  background: var(--green-dim);
  color: var(--green);
  border-radius: 3px;
  outline: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 6px;
  border-radius: var(--r-xs);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300C57A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 0.15s, background-color 0.15s;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background-color: var(--green-dim);
}

input[type="date"]::-webkit-calendar-picker-indicator:active {
  background-color: var(--green-dim);
}

html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300C57A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.tcp-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.tcp-form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: -0.1px;
}
.tcp-form-label.required::after {
  content: " *";
  color: var(--red);
}

.tcp-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.tcp-form-section {
  background: var(--bg-1);
  border: 0.5px solid var(--border);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 14px;
}

.tcp-form-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.3px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--border);
}

.tcp-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--f);
  font-size: 13px;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  border: 0.5px solid var(--border-md);
  background: var(--bg-2);
  color: var(--text-1);
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  letter-spacing: -0.1px;
}

.tcp-textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(50,215,75,0.1);
}

/* Radio/Checkbox groups */
.tcp-radio-group,
.tcp-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tcp-radio-btn input[type="radio"],
.tcp-check-btn input[type="checkbox"] {
  display: none;
}

.tcp-radio-btn label,
.tcp-check-btn label {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  border: 0.5px solid var(--border-md);
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.12s;
  letter-spacing: -0.1px;
}

.tcp-radio-btn input:checked + label,
.tcp-check-btn input:checked + label {
  background: var(--green-dim);
  color: var(--green);
  border-color: var(--green-border);
}

/* --- Alert / Info bars --- */
.tcp-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 14px;
  letter-spacing: -0.1px;
}

.tcp-alert i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

.tcp-alert-warning {
  background: var(--amber-dim);
  border: 0.5px solid var(--amber-border);
  color: var(--amber);
}

.tcp-alert-danger {
  background: var(--red-dim);
  border: 0.5px solid var(--red-border);
  color: var(--red);
}

.tcp-alert-success {
  background: var(--green-dim);
  border: 0.5px solid var(--green-border);
  color: var(--green);
}

/* --- Rule Check Items --- */
.tcp-rule-list { padding: 0; }

.tcp-rule-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
  letter-spacing: -0.1px;
}

.tcp-rule-item:last-child { border-bottom: none; }

.tcp-rule-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tcp-rule-dot.ok  { background: var(--green); }
.tcp-rule-dot.warn { background: var(--amber); }
.tcp-rule-dot.fail { background: var(--red); }
.tcp-rule-dot.na  { background: var(--text-3); }

.tcp-rule-label { flex: 1; }

.tcp-rule-val {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-3);
}

/* --- Detail / KV pairs --- */
.tcp-kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 0.5px solid var(--border);
  font-size: 13px;
}

.tcp-kv:last-child { border-bottom: none; }
.tcp-kv-key { color: var(--text-3); letter-spacing: -0.1px; }
.tcp-kv-val { color: var(--text-1); font-weight: 500; letter-spacing: -0.1px; }
.tcp-kv-val.mono { font-family: var(--f-mono); font-size: 12px; }

/* --- Empty State --- */
.tcp-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-3);
}

.tcp-empty i {
  font-size: 36px;
  margin-bottom: 12px;
  display: block;
  opacity: 0.4;
}

.tcp-empty-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.tcp-empty-sub {
  font-size: 13px;
  color: var(--text-3);
}

/* --- Mono text --- */
.tcp-mono {
  font-family: var(--f-mono);
  font-size: 12px;
}

/* --- Two col layout --- */
#dashEquityChart {
  width: 100% !important;
  height: 100% !important;
}

.tcp-dash-trade-card {
  display: block;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tcp-dash-trade-card:hover {
  border-color: var(--border-md);
  background: var(--bg-2);
}

@media (max-width: 900px) {
  /* Two compact KPI cards (trades / win-rate) stay side-by-side on phones —
     stacking them full-width left a tiny value beside a huge empty void. */
  .tcp-dash-week-grid {
    gap: 10px !important;
  }
  /* KPI cards: tighter so the pair reads as a compact stat row. */
  .tcp-dash-week-grid .tcp-card-body { padding: 12px 14px !important; }
}

/* Period filter: ragged multi-row pill wrap → single swipeable chip strip on
   phones (long labels like "Последние 6 месяцев" don't fit a tidy grid).
   Shared by the dashboard and the analytics page. */
@media (max-width: 768px) {
  #dash-period-bar,
  .tcp-period-strip {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -14px;
    margin-right: -14px;
    padding: 2px 14px;
    scroll-snap-type: x proximity;
  }
  #dash-period-bar::-webkit-scrollbar,
  .tcp-period-strip::-webkit-scrollbar { display: none; }
  #dash-period-bar > .tcp-btn,
  #dash-period-bar > .tcp-dash-period-btn,
  .tcp-period-strip > .tcp-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

@media (max-width: 640px) {
  /* "Сегодня" card: keep the weekday top-left, push the session name + time
     to the right so it reads on a diagonal like the desktop layout (on phones
     the block used to wrap full-width to the left). */
  #dash-session-now { margin-left: auto; }

  /* High-impact news warning banner: on phones the side "Открыть календарь"
     button left the layout lopsided. Stack it — text first, then a full-width
     centred button underneath. */
  .tcp-news-banner { flex-wrap: wrap; }
  .tcp-news-banner > a {
    flex: 1 0 100%;
    margin-top: 10px;
    justify-content: center;
    text-align: center;
  }

  /* Top banners (verify-email / paywall / trial / BYOK): the side button(s)
     squeezed the message into a narrow wrapping column. Stack on phones —
     icon+text on top, each button full-width below. */
  .tcp-verify-banner { flex-wrap: wrap; align-items: flex-start; }
  .tcp-verify-banner .tcp-flash-text { flex: 1 1 auto; }
  .tcp-verify-banner > .tcp-btn,
  .tcp-verify-resend {
    flex: 1 0 100%;
    margin-left: 0;
    margin-top: 8px;
  }
  .tcp-verify-banner > .tcp-btn { justify-content: center; }
  .tcp-verify-resend .tcp-btn { width: 100%; justify-content: center; }

  /* Trading-day timeframe cards (Daily/H4/H1/5M plan & review): a 2-col grid
     is too narrow on a phone — the per-TF "Dictate" mic button clipped off the
     card edge and the textareas got squeezed. One card per row. */
  .tcp-tf-grid { grid-template-columns: 1fr !important; }
}

.tcp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.tcp-three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* --- Utility --- */
.tc-muted { color: var(--text-3); }
.tc-dim   { color: var(--text-2); }

.tcp-divider {
  height: 0.5px;
  background: var(--border);
  margin: 0;
}

/* --- Override Bootstrap where still present --- */
.container { max-width: none !important; padding: 0 !important; }
.navbar { display: none !important; }

/* Keep Bootstrap form elements looking ok if still used */
.form-control, .form-select {
  font-family: var(--f) !important;
  background-color: var(--bg-2) !important;
  border: 0.5px solid var(--border-md) !important;
  color: var(--text-1) !important;
  border-radius: var(--r-sm) !important;
  font-size: 13px !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(50,215,75,0.1) !important;
  background-color: var(--bg-2) !important;
  color: var(--text-1) !important;
}

.form-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-2) !important;
  letter-spacing: -0.1px !important;
}

.btn {
  font-family: var(--f) !important;
  border-radius: var(--r-sm) !important;
  font-size: 13px !important;
  letter-spacing: -0.1px !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-md); }

/* --- Toggle Switch (rules page) --- */
.tcp-toggle {
  display: inline-block;
  width: 36px;
  height: 22px;
  background: var(--bg-2);
  border-radius: 11px;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
  border: 1px solid var(--border-md);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.tcp-toggle::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: #c8c8d4;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s, background 0.2s;
}

input:checked + .tcp-toggle {
  background: var(--green);
  border-color: var(--green);
}

input:checked + .tcp-toggle::after {
  transform: translateX(14px);
  background: #fff;
}

.tcp-pnl-unit-select,
select.tcp-pnl-unit-select.tcp-select {
  background-color: var(--bg-2);
  border-color: var(--border-md);
  color: var(--text-1);
}

.tcp-pnl-unit-select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(50,215,75,0.12);
}

.tcp-money-hint {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 4px;
  font-family: var(--f-mono);
  min-height: 14px;
}

/* Logo icon — light theme variant */
[data-theme="light"] .tcp-logo-icon {
  background-color: #1C1C1E;
}

/* ============================================================
   Auth + Onboarding (login / register / wizard)
   ============================================================ */
.tcp-auth-body { background: var(--bg-0); min-height: 100vh; margin: 0; }
.tcp-auth-shell { min-height: 100vh; display: flex; flex-direction: column; }
.tcp-auth-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 64px; border-bottom: 1px solid var(--border);
}
.tcp-auth-header .tcp-logo { display: flex; align-items: center; gap: 10px; color: var(--text-1); text-decoration: none; }
.tcp-auth-header .tcp-logo-chip { width: 34px; height: 34px; border-radius: 9px; font-size: 14px; }
.tcp-auth-header .tcp-logo-name { font-size: 20px; letter-spacing: -0.4px; }
.tcp-auth-header-actions { display: flex; align-items: center; gap: 12px; }
.tcp-auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.tcp-auth-flashes { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 40px)); z-index: 50; display: flex; flex-direction: column; gap: 8px; }
.tcp-auth-card {
  width: 100%; max-width: 420px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--r); padding: 36px 32px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.tcp-onboard-card {
  width: 100%; max-width: 560px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 22px; padding: 34px 40px 28px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04);
}
.tcp-auth-title { font-size: 24px; font-weight: 700; margin: 0 0 8px; color: var(--text-1); letter-spacing: -0.5px; }
.tcp-auth-sub { font-size: 14px; color: var(--text-2); margin: 0 0 28px; line-height: 1.5; }
.tcp-auth-form { display: flex; flex-direction: column; gap: 18px; }
.tcp-auth-field { display: flex; flex-direction: column; gap: 6px; }
.tcp-auth-field > span { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.tcp-auth-field input, .tcp-auth-field textarea, .tcp-auth-field select {
  background: var(--bg-2); border: 1px solid var(--border-md);
  border-radius: var(--r-sm); padding: 12px 14px;
  color: var(--text-1); font-family: var(--f); font-size: 14px;
  transition: border-color 0.15s;
}
.tcp-auth-field input:focus, .tcp-auth-field textarea:focus, .tcp-auth-field select:focus {
  outline: none; border-color: var(--green);
}
.tcp-auth-field textarea { resize: vertical; min-height: 80px; }
.tcp-auth-hint { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.tcp-auth-submit { margin-top: 8px; width: 100%; justify-content: center; }
.tcp-auth-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); text-align: center; font-size: 13px; color: var(--text-2); }
.tcp-auth-foot a { color: var(--green); text-decoration: none; font-weight: 600; margin-left: 6px; }
.tcp-auth-foot a:hover { color: var(--green-hover); }
.tcp-auth-forgot { text-align: right; margin-top: -8px; }
.tcp-auth-forgot a { font-size: 12px; color: var(--text-3); text-decoration: none; }
.tcp-auth-forgot a:hover { color: var(--green); }
.tcp-verify-banner { align-items: center; }
.tcp-verify-resend { margin-left: auto; }
.tcp-verify-resend .tcp-btn { font-size: 12px; padding: 4px 12px; }

/* Прогресс: пройденные — маленькие зелёные точки, текущий — широкая зелёная плашка,
   будущие — серые точки (1:1 по хэндоффу онбординга). */
.tcp-onboard-progress { display: flex; align-items: center; gap: 7px; margin-bottom: 22px; }
.tcp-onboard-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--border-md); }
.tcp-onboard-dot.done { width: 8px; background: var(--green); box-shadow: none; }
.tcp-onboard-dot.current { width: 22px; background: var(--green); box-shadow: none; }
.tcp-onboard-stepnum { margin-left: auto; font-size: 13px; color: var(--text-3); font-weight: 600; }
.tcp-onboard-form { display: flex; flex-direction: column; gap: 18px; }
.tcp-onboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tcp-onboard-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.tcp-onboard-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 1px solid var(--border-md);
  background: var(--bg-2); border-radius: 999px;
  font-size: 13px; color: var(--text-1); cursor: pointer;
  transition: all 0.15s;
}
.tcp-onboard-pill:hover { border-color: var(--green); }
.tcp-onboard-pill input { display: none; }
.tcp-onboard-pill:has(input:checked) {
  background: var(--green-dim); border-color: var(--green-border); color: var(--green);
}
.tcp-onboard-actions { display: flex; justify-content: space-between; margin-top: 12px; }

/* Чек-лист критериев сетапа (Score): кастомный чекбокс — тёмная галка (--on-green)
   на зелёном, как текст во всех зелёных кнопках (было: нативный accent-color = белая). */
.crit-cb { position: absolute; opacity: 0; width: 0; height: 0; }
.crit-box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--text-3);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.crit-check { display: none; font-size: 11px; line-height: 1; color: var(--on-green); }
.crit-chip:has(.crit-cb:checked) .crit-box { background: var(--green); border-color: var(--green); }
.crit-chip:has(.crit-cb:checked) .crit-check { display: block; }

/* ── Онбординг «Депозит» 1:1 по design_handoff_onb_deposit — бренд-палитра #1d8a4e,
   сегмент-тумблер, селекты с шевроном. Кнопка «Далее» (.tcp-btn-primary) и хедер
   НЕ трогаем — остаются как в проде. Scoped на .obx (другие экраны не задеты). ── */
.obx { --obg: #1d8a4e; --obgh: #16794a; }
.obx.tcp-onboard-card { max-width: 560px; border-radius: 22px; padding: 34px 40px 28px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04); }
.obx .tcp-auth-title { font-size: 27px; letter-spacing: -0.6px; margin-bottom: 10px; }
.obx .tcp-auth-sub { font-size: 14.5px; margin-bottom: 0; }
/* прогресс: точки #1d8a4e + широкая плашка + серая точка */
.obx .tcp-onboard-progress { gap: 7px; }
.obx .tcp-onboard-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--border-md); box-shadow: none; }
.obx .tcp-onboard-dot.done { width: 8px; background: var(--obg); }
.obx .tcp-onboard-dot.current { width: 22px; background: var(--obg); }
.obx .tcp-onboard-stepnum { font-size: 13px; }
/* «Пропустить настройку» — пилюля */
.obx .tcp-onboard-skipbtn { display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid var(--border-md); border-radius: 999px;
  padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.obx .tcp-onboard-skipbtn:hover { background: var(--bg-2); color: var(--text-1); }
.obx .tcp-onboard-skipbtn i { width: 15px; height: 15px; }
/* сегмент-тумблер типа счёта */
.obx .tcp-onboard-pills { gap: 12px; }
.obx .tcp-onboard-pill { height: 44px; padding: 0 22px; border-radius: 999px; font-size: 14.5px;
  font-weight: 600; border: 1px solid var(--border-md); background: var(--bg-1); color: var(--text-1); }
.obx .tcp-onboard-pill:hover { border-color: var(--text-3); }
.obx .tcp-onboard-pill:has(input:checked) { background: rgba(48,164,108,0.10);
  border-color: rgba(48,164,108,0.55); color: var(--obg); }
/* поля: uppercase-лейблы + фокус #1d8a4e */
.obx .tcp-auth-field > span { font-size: 11px; letter-spacing: 0.06em; }
.obx .tcp-auth-field input:focus, .obx .tcp-auth-field select:focus, .obx .tcp-auth-field textarea:focus {
  border-color: var(--obg); box-shadow: 0 0 0 3px rgba(29,138,78,0.16); }
/* селект с шевроном chevrons-up-down */
.obx .obx-select { position: relative; }
.obx .obx-select select { width: 100%; appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.obx .obx-chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  pointer-events: none; font-size: 16px; line-height: 1; color: var(--text-3); }
/* «Назад» ghost */
.obx .tcp-onboard-actions .tcp-btn-ghost:hover { background: var(--bg-2); color: var(--text-1); }
/* «Выйти» */
.obx .tcp-auth-foot a { color: var(--obg); font-weight: 600; }
.obx .tcp-auth-foot a:hover { color: var(--obgh); }
.tcp-btn-ghost {
  background: transparent; border: 1px solid var(--border-md); color: var(--text-2);
}
.tcp-btn-ghost:hover { color: var(--text-1); border-color: var(--green); }

/* Sidebar user block */
.tcp-sidebar-user {
  margin: 10px 0 2px;
  padding: 8px 6px;
  display: flex; align-items: center; gap: 10px;
}
/* Юзер-строка кликабельна → Настройки (аватар+инфо в ссылке; кнопка выхода отдельно). */
.tcp-sidebar-user-link {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  text-decoration: none; color: inherit; border-radius: 8px; padding: 4px; margin: -4px;
}
.tcp-sidebar-user-link:hover { background: var(--bg-2); }
.tcp-sidebar-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(160deg, var(--green), #1d8a4e);
  color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.tcp-sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tcp-sidebar-user-info { flex: 1; min-width: 0; }
.tcp-sidebar-user-email {
  font-size: 12px; color: var(--text-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.tcp-sidebar-user-name {
  font-size: 12px; color: var(--text-3); margin-top: 2px;
}
.tcp-sidebar-logout {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  border: 1px solid var(--border-md); background: var(--bg-2);
  color: var(--text-2); text-decoration: none; cursor: pointer;
  transition: all 0.15s;
}
.tcp-sidebar-logout:hover { color: var(--red); border-color: var(--red); }

@media (max-width: 480px) {
  .tcp-auth-card, .tcp-onboard-card { padding: 24px 20px; }
  .tcp-onboard-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CSV Import (onboarding step 6 + settings + preview)
   ============================================================ */
.tcp-import-instructions {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  margin-bottom: 18px;
}
.tcp-import-instructions .ti { color: var(--green); font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.tcp-import-instructions strong { display: block; color: var(--text-1); font-size: 13px; margin-bottom: 3px; }
.tcp-import-instructions div { font-size: 13px; color: var(--text-2); line-height: 1.5; }

.tcp-import-drop { margin-bottom: 14px; }
.tcp-import-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 36px 24px; cursor: pointer;
  background: var(--bg-2); border: 2px dashed var(--border-md);
  border-radius: var(--r); transition: all 0.15s; text-align: center;
}
.tcp-import-dropzone:hover { border-color: var(--green); background: var(--green-dim); }
.tcp-import-dropzone .ti { font-size: 36px; color: var(--text-3); margin-bottom: 4px; }
.tcp-import-dropzone:hover .ti { color: var(--green); }
.tcp-import-dropzone-text { font-size: 14px; font-weight: 600; color: var(--text-1); }
.tcp-import-dropzone-hint { font-size: 12px; color: var(--text-3); }
.tcp-import-skip-form { margin-top: 14px; text-align: center; }
.tcp-import-skip-form .tcp-btn { font-size: 13px; }

.tcp-import-later {
  margin-top: 18px; padding: 12px 14px; background: var(--bg-2);
  border-left: 2px solid var(--amber); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12px; color: var(--text-2); display: flex; gap: 8px; align-items: flex-start;
}
.tcp-import-later .ti { color: var(--amber); flex-shrink: 0; margin-top: 1px; }

.tcp-import-detected {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--green-dim);
  border: 1px solid var(--green-border); border-radius: 999px;
  font-size: 12px; color: var(--green); margin-bottom: 18px;
}
.tcp-import-preview-wrap {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: auto; max-height: 360px;
}
.tcp-import-preview { width: 100%; border-collapse: collapse; font-size: 12px; }
.tcp-import-preview th {
  background: var(--bg-2); color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.5px; font-size: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; text-align: left; font-weight: 600;
}
.tcp-import-preview td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  color: var(--text-1); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tcp-import-preview tr:last-child td { border-bottom: 0; }
.tcp-import-empty { text-align: center; color: var(--text-3); padding: 24px !important; }

/* Settings page two-column layout */
.tcp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .tcp-grid-2 { grid-template-columns: 1fr; } }
.tcp-settings-account { display: flex; flex-direction: column; gap: 12px; }
.tcp-settings-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.tcp-settings-row:last-child { border-bottom: 0; }
.tcp-settings-label { color: var(--text-2); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.tcp-settings-value { color: var(--text-1); font-size: 14px; font-weight: 500; }

/* ============================================================
   OAuth (Google sign-in button + divider)
   ============================================================ */
.tcp-oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px;
  background: var(--bg-2); border: 1px solid var(--border-md);
  border-radius: var(--r-sm); color: var(--text-1);
  font-family: var(--f); font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: all 0.15s;
}
.tcp-oauth-btn:hover {
  background: var(--bg-3); border-color: var(--green);
  color: var(--text-1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.tcp-oauth-btn svg { flex-shrink: 0; }

.tcp-oauth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 14px;
  font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 1px;
}
.tcp-oauth-divider::before,
.tcp-oauth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ============================================================
   Responsive — phones, tablets, laptops, desktops, 4K
   Breakpoints used across the app:
     ≤  480px  — small phone (iPhone SE, 320–414)
     ≤  640px  — phone / phablet
     ≤  768px  — small tablet
     ≤ 1024px  — tablet / hamburger threshold
     ≤ 1366px  — small laptop comfort
     ≥ 1440px  — desktop
     ≥ 1920px  — wide desktop
     ≥ 2560px  — 4K / ultra-wide
   ============================================================ */

/* The toggle checkbox itself is always invisible — its only job is to be
   the persistent state for the drawer via :checked. Hide from Tab order. */
.tcp-nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  clip: rect(0 0 0 0);
}

/* Hamburger button and overlay are HIDDEN on desktop. */
.tcp-nav-burger,
.tcp-nav-overlay,
.tcp-nav-close { display: none; }

/* ---------- ≤ 767px (телефоны): выезжающий drawer. iPad/планшеты (≥768px)
   получают ФИКСИРОВАННЫЙ сайдбар как на десктопе (не «прыгает»). ---------- */
@media (max-width: 767px) {
  /* Single-column layout — topbar (auto) + content (1fr). */
  .tcp-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  /* На мобиле топбар снова виден (бургер + лого). */
  .tcp-topbar { display: flex; }

  /* Show the hamburger button in topbar. */
  .tcp-nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: 4px;
    margin-left: -8px;
    border-radius: var(--r-sm);
    border: 0.5px solid transparent;
    background: transparent;
    color: var(--text-1);
    font-size: 22px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tcp-nav-burger:hover { background: var(--bg-2); }
  .tcp-nav-burger:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

  /* Slim down topbar inner padding on small screens. */
  .tcp-topbar { padding: 0 12px; gap: 8px; }
  .tcp-topbar-divider { display: none; }

  /* Sidebar becomes a slide-in drawer (off-canvas). */
  .tcp-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 82vw);
    height: 100dvh;
    z-index: 250;
    padding: 16px 12px;
    border-right: 0.5px solid var(--border-md);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.35);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Drawer open state. */
  .tcp-nav-toggle:checked ~ .tcp-sidebar {
    transform: translateX(0);
  }

  /* Dim overlay over the main content while drawer is open. */
  .tcp-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 240;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .tcp-nav-toggle:checked ~ .tcp-nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* Close-X button at the top of the drawer (mobile only). */
  .tcp-nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    align-self: flex-end;
    margin: -4px -4px 8px 0;
    border-radius: var(--r-sm);
    background: var(--bg-2);
    border: 0.5px solid var(--border);
    color: var(--text-1);
    font-size: 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Prevent body scroll while drawer is open. */
  body:has(.tcp-nav-toggle:checked) {
    overflow: hidden;
  }

  /* Touch-friendly nav items in the drawer. */
  .tcp-nav-item {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 15px;
    gap: 12px;
  }
  .tcp-nav-item i { font-size: 18px; width: 20px; }

  /* Main content padding tightens on small screens. */
  .tcp-main { padding: 16px 14px; }

  /* Page header stacks. */
  .tcp-page-header {
    flex-wrap: wrap;
    gap: 12px;
  }
  .tcp-page-actions { flex-wrap: wrap; }
}

/* ---------- ≤ 900px: stack 4-col grids to 2-col ---------- */
@media (max-width: 900px) {
  .tcp-metrics { grid-template-columns: repeat(2, 1fr); }
  .tcp-three-col { grid-template-columns: 1fr; }
  .tcp-two-col { grid-template-columns: 1fr; }
  .tcp-onboard-grid { grid-template-columns: 1fr; }
  .tcp-account-grid { grid-template-columns: 1fr; }

  /* Balance card switches to a stack instead of side-by-side. */
  .tcp-balance-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tcp-balance-side { width: 100%; }
}

/* ---------- ≤ 768px: tablet portrait ---------- */
@media (max-width: 768px) {
  .tcp-page-title { font-size: 20px; }
  .tcp-metric-value { font-size: 22px; }
  .tcp-metrics-detail .tcp-metric-value { font-size: 26px; }

  /* Filters wrap, each control gets full width. */
  .tcp-filter { flex-wrap: wrap; gap: 10px; }
  .tcp-filter-group { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .tcp-filter-group select,
  .tcp-filter-group input { width: 100%; min-width: 0 !important; }
}

/* ---------- ≤ 640px: trade table → card list ---------- */
@media (max-width: 640px) {
  /* Hamburger & topbar: hide the lang labels' uppercase letters? No,
     keep them — but tighten lang switcher. */
  .tcp-lang { padding: 1px; }
  .tcp-lang-btn { padding: 4px 8px; font-size: 12px; min-height: 32px; }
  .tcp-theme-toggle { width: 40px; height: 40px; }

  /* Keep KPI metrics 2-up even on phones — a single full-width column left a
     tiny value beside a huge empty void and ate endless vertical scroll. */
  .tcp-metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tcp-metric { padding: 12px 14px; }
  .tcp-metric-label { margin-bottom: 5px; }

  /* Trade list table → cards using data-label on td. */
  .tcp-table thead { display: none; }
  .tcp-table,
  .tcp-table tbody,
  .tcp-table tr,
  .tcp-table td { display: block; width: 100%; }

  .tcp-table tr {
    background: var(--bg-1);
    border: 0.5px solid var(--border);
    border-radius: var(--r);
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  .tcp-table td {
    padding: 6px 0;
    border: 0;
    text-align: right;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 32px;
  }

  /* Reveal the column label (set via data-label="…" in the template). */
  .tcp-table td::before {
    content: attr(data-label);
    color: var(--text-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    text-align: left;
    flex: 0 0 auto;
  }
  /* Cells without an explicit label (or first cell) become the card heading. */
  .tcp-table td:first-child {
    border-bottom: 0.5px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--text-1);
  }
  .tcp-table td:first-child::before { display: none; }

  /* Account cards keep their custom layout, just full width. */
  .tcp-account-card { padding: 14px; }

  /* Auth/onboarding cards take more of the viewport. */
  .tcp-auth-card,
  .tcp-onboard-card {
    max-width: none;
    padding: 22px 18px;
    border-radius: var(--r);
  }
  .tcp-auth-title { font-size: 22px; }

  /* Hide the "TCP" wordmark on phones to free up topbar room. */
  .tcp-logo-name { display: none; }
}

/* ---------- ≤ 480px: small phones (iPhone SE etc.) ---------- */
@media (max-width: 480px) {
  .tcp-main { padding: 12px 10px; }
  .tcp-page-title { font-size: 18px; }
  .tcp-page-sub { font-size: 12px; }
  .tcp-metric-value { font-size: 20px; }
  .tcp-metric { padding: 12px 14px; }
  .tcp-card-body { padding: 12px; }

  /* Filter cells go to a single column. */
  .tcp-filter-group { flex: 1 1 100%; }

  .tcp-balance-value { font-size: 22px !important; }

  /* Smaller padding on auth cards. */
  .tcp-auth-card,
  .tcp-onboard-card { padding: 18px 14px; }
}

/* ---------- ≥ 1440px: desktop comfort widths ---------- */
@media (min-width: 1440px) {
  .tcp-main { padding: 24px 32px; }
}

/* ---------- ≥ 1920px: wide desktop ---------- */
@media (min-width: 1920px) {
  :root { --sidebar-w: 240px; }
  .tcp-main {
    padding: 28px 40px;
    max-width: 1600px;
    margin: 0 auto;
  }
  .tcp-metric-value { font-size: 28px; }
}

/* ---------- ≥ 2560px: 4K ---------- */
@media (min-width: 2560px) {
  :root { --sidebar-w: 260px; }
  .tcp-main { padding: 32px 56px; max-width: 1920px; }
  .tcp-page-title { font-size: 26px; }
  .tcp-metric-value { font-size: 32px; }
}

/* ---------- Touch-friendly tap targets on coarse pointers ----------
   This catches phones, tablets, and laptops with touch screens regardless
   of width. WCAG recommends ≥44×44px hit areas; we apply it via min-height. */
@media (pointer: coarse) {
  .tcp-btn { min-height: 44px; padding: 10px 16px; }
  .tcp-btn-sm { min-height: 36px; padding: 6px 12px; }
  .tcp-btn-icon { width: 44px; height: 44px; }
  .tcp-nav-item { min-height: 44px; }
  .tcp-lang-btn { min-height: 32px; padding: 6px 10px; }
  .tcp-theme-toggle { width: 44px; height: 44px; }
  .tcp-select,
  .tcp-input,
  .tcp-auth-field input,
  .tcp-auth-field select { min-height: 44px; }
}

/* ---------- Make all charts / wide media fluid ---------- */
.tcp-chart,
.tcp-chart > svg,
.tcp-chart > canvas,
.tcp-card svg.tcp-fluid,
.tcp-card canvas.tcp-fluid,
.tcp-card img { max-width: 100%; height: auto; }

/* Existing wide blocks: allow horizontal scroll instead of overflow. */
.tcp-table-wrap { -webkit-overflow-scrolling: touch; }

/* Clickable row hover */
.tcp-row-hover { transition: background .12s; }
.tcp-row-hover:hover { background: var(--bg-2); }

/* ── PWA iOS install banner ────────────────────────────────────────────────── */
#tcpPwaBanner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--bg-2);
  border-top: 0.5px solid var(--border-md);
  color: var(--text-1);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
}
#tcpPwaBanner span { flex: 1; }
#tcpPwaBanner strong { color: var(--green); }
#tcpPwaBanner button {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem;
  flex-shrink: 0;
}

/* ============================================================
   Landing Page
   ============================================================ */

.tcp-landing-body {
  background: var(--bg-0);
  color: var(--text-1);
}

/* --- Landing header --- */
.tcp-landing-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,10,11,0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 0.5px solid var(--border-md);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
}
/* На светлой теме шапка была тёмной — тёмный текст логотипа сливался.
   Делаем фон светлым полупрозрачным, в тон странице. */
html[data-theme="light"] .tcp-landing-header {
  background: rgba(255,255,255,0.85);
}
.tcp-landing-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.tcp-landing-header a.tcp-btn-ghost-sm {
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  border: 1px solid var(--border-md);
  transition: color .15s, border-color .15s;
}
.tcp-landing-header a.tcp-btn-ghost-sm:hover {
  color: var(--text-1);
  border-color: var(--border-md);
}
.tcp-landing-header a.tcp-btn-green-sm {
  padding: 6px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--green);
  transition: background .15s;
}
.tcp-landing-header a.tcp-btn-green-sm:hover {
  background: var(--green-hover);
}

/* --- Hero --- */
.tcp-hero {
  text-align: center;
  padding: 100px 24px 80px;
  max-width: 760px;
  margin: 0 auto;
}
.tcp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  border-radius: 100px;
  padding: 4px 12px;
  margin-bottom: 28px;
}
.tcp-hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 0 20px;
  color: var(--text-1);
}
.tcp-hero h1 span {
  color: var(--green);
}
.tcp-hero-sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text-2);
  line-height: 1.65;
  margin: 0 0 40px;
}
.tcp-hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.tcp-btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--r);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--green);
  transition: background .15s, transform .1s;
}
.tcp-btn-hero-primary:hover {
  background: var(--green-hover);
  transform: translateY(-1px);
}
.tcp-btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--r);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
  background: var(--bg-2);
  border: 1px solid var(--border-md);
  transition: background .15s, transform .1s;
}
.tcp-btn-hero-ghost:hover {
  background: var(--bg-3);
  transform: translateY(-1px);
}
.tcp-hero-note {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-3);
}

/* --- Section wrapper --- */
.tcp-landing-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 24px;
}
.tcp-landing-section-title {
  text-align: center;
  margin-bottom: 56px;
}
.tcp-landing-section-title h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.tcp-landing-section-title p {
  font-size: 1rem;
  color: var(--text-2);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.65;
}

/* --- Feature grid --- */
.tcp-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.tcp-feature-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 24px;
  transition: border-color .2s, background .2s;
}
.tcp-feature-card:hover {
  border-color: var(--border-md);
  background: var(--bg-2);
}
.tcp-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
  background: var(--green-dim);
  color: var(--green);
}
.tcp-feature-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
}
.tcp-feature-card p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}

/* --- Profile section --- */
.tcp-profile-section {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 40px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 700px) {
  .tcp-profile-section { grid-template-columns: 1fr; padding: 28px 24px; gap: 28px; }
}
.tcp-profile-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.tcp-profile-section h2 {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  line-height: 1.25;
}
.tcp-profile-section p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.7;
  margin: 0 0 24px;
}
.tcp-profile-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tcp-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 10px;
}
.tcp-profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tcp-stat-box {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 16px 20px;
}
.tcp-stat-box .tcp-stat-val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: -.02em;
  display: block;
}
.tcp-stat-box .tcp-stat-desc {
  font-size: 12px;
  color: var(--text-3);
  display: block;
  margin-top: 2px;
}

/* --- How it works --- */
.tcp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
  counter-reset: step;
}
.tcp-step {
  padding: 28px 24px;
  border-right: 1px solid var(--border);
  position: relative;
}
.tcp-step:last-child { border-right: none; }
@media (max-width: 700px) {
  .tcp-steps { grid-template-columns: 1fr; }
  .tcp-step { border-right: none; border-bottom: 1px solid var(--border); }
  .tcp-step:last-child { border-bottom: none; }
}
.tcp-step-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}
.tcp-step h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
}
.tcp-step p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}

/* --- CTA bottom --- */
.tcp-landing-cta {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 64px 40px;
  text-align: center;
}
.tcp-landing-cta h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.tcp-landing-cta p {
  font-size: 15px;
  color: var(--text-2);
  margin: 0 0 32px;
}

/* --- Landing footer --- */
.tcp-landing-footer {
  border-top: 0.5px solid var(--border);
  padding: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
}
.tcp-landing-footer a {
  color: var(--text-2);
  transition: color .15s;
}
.tcp-landing-footer a:hover { color: var(--text-1); }

/* --- Pricing grid --- */
.tcp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
.tcp-pricing-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .tcp-pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .tcp-pricing-grid-2 { grid-template-columns: 1fr; }
}

/* --- BYOK explainer (под тарифами) --- */
.tcp-byok-explainer {
  margin: 40px auto 0;
  max-width: 880px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 28px 32px;
}
.tcp-byok-explainer h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tcp-byok-explainer-sub {
  font-size: 14px;
  color: var(--text-2);
  margin: 0 0 20px;
}
.tcp-byok-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tcp-byok-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.tcp-byok-step-num {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tcp-byok-step p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 3px 0 0;
}
.tcp-byok-explainer-note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-3);
}
@media (max-width: 900px) {
  .tcp-byok-explainer { padding: 22px 20px; }
  .tcp-byok-steps { grid-template-columns: 1fr; }
}
.tcp-pricing-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 28px 24px;
  position: relative;
  transition: border-color .2s;
}
.tcp-pricing-card:hover { border-color: var(--green-border); background: var(--bg-2); }
.tcp-pricing-featured {
  border-color: var(--green-border);
  background: linear-gradient(160deg, rgba(50,215,75,0.06) 0%, var(--bg-1) 60%);
}
.tcp-pricing-featured:hover { border-color: var(--green-border); background: var(--bg-2); }
.tcp-pricing-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  border-radius: 100px;
  padding: 3px 10px;
  margin-bottom: 12px;
}
.tcp-pricing-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 8px;
}
.tcp-pricing-price {
  margin-bottom: 10px;
  line-height: 1;
}
.tcp-pricing-amount {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text-1);
}
.tcp-pricing-period {
  font-size: 14px;
  color: var(--text-3);
  margin-left: 2px;
}
.tcp-pricing-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0 0 20px;
  min-height: 36px;
}
.tcp-pricing-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 24px;
}
.tcp-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tcp-pricing-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
}
.tcp-pricing-features li i {
  font-size: 14px;
  color: var(--green);
  flex-shrink: 0;
}
.tcp-pricing-features li.tcp-pricing-no {
  color: var(--text-3);
}
.tcp-pricing-features li.tcp-pricing-no i {
  color: var(--text-3);
}

/* --- Landing mobile --- */
@media (max-width: 600px) {
  /* Header: скрываем lang + тему, оставляем кнопки */
  .tcp-landing-header .tcp-lang { display: none; }
  .tcp-landing-header .tcp-theme-toggle { display: none; }
  .tcp-landing-header-actions { gap: 6px; }
  .tcp-landing-header a.tcp-btn-ghost-sm { display: none; }
  .tcp-landing-header a.tcp-btn-green-sm { padding: 6px 14px; }

  /* Hero: меньше отступы, компактнее текст */
  .tcp-hero { padding: 60px 20px 48px; }
  .tcp-hero-cta .tcp-btn-hero-primary,
  .tcp-hero-cta .tcp-btn-hero-ghost {
    padding: 11px 22px;
    font-size: 14px;
    width: 100%;
    justify-content: center;
  }
  .tcp-hero-cta { flex-direction: column; gap: 8px; }
  .tcp-pricing-cta { padding: 11px 22px; font-size: 14px; }

  /* Sections */
  .tcp-landing-section { padding: 48px 16px; }
  .tcp-landing-section-title { margin-bottom: 32px; }

  /* Feature grid: одна колонка */
  .tcp-feature-grid { grid-template-columns: 1fr; }

  /* Steps: уже есть 1fr, просто уменьшаем padding */
  .tcp-step { padding: 20px 16px; }

  /* Profile stats: 2 col остаётся но с меньшим gap */
  .tcp-profile-stats { gap: 10px; }
  .tcp-stat-box { padding: 14px 16px; }

  /* CTA */
  .tcp-landing-cta { padding: 40px 20px; }
  .tcp-landing-cta .tcp-hero-cta { flex-direction: column; }
  .tcp-landing-cta .tcp-btn-hero-primary,
  .tcp-landing-cta .tcp-btn-hero-ghost,
  .tcp-landing-cta .tcp-pricing-cta {
    width: 100%;
    justify-content: center;
  }

  /* Pricing */
  .tcp-pricing-amount { font-size: 2rem; }
}

/* ============================================================
   Alpha banner + feedback widget
   ============================================================ */
.tcp-alpha-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--green-dim); border: 1px solid var(--green-border);
  color: var(--text-1); border-radius: var(--r-sm, 10px);
  padding: 10px 14px; margin-bottom: 14px; font-size: 13px;
}
.tcp-alpha-banner > i { color: var(--green); font-size: 18px; flex-shrink: 0; }
.tcp-alpha-banner > span { flex: 1; }
.tcp-alpha-cta {
  cursor: pointer; font-weight: 600; color: var(--green);
  white-space: nowrap; text-decoration: underline;
}
.tcp-alpha-close {
  background: none; border: 0; color: var(--text-3); font-size: 20px;
  line-height: 1; cursor: pointer; padding: 0 2px;
}
.tcp-alpha-close:hover { color: var(--text-1); }

/* Floating action button */
.tcp-fb-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 1200;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: var(--on-green); font-size: 13px; font-weight: 600;
  padding: 11px 16px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28); border: 0;
}
.tcp-fb-fab:hover { background: var(--green-hover); }
.tcp-fb-fab i { font-size: 18px; }

.tcp-fb-overlay, .tcp-fb-modal { display: none; }
.tcp-fb-toggle:checked ~ .tcp-fb-overlay {
  display: block; position: fixed; inset: 0; z-index: 1300;
  background: rgba(0,0,0,0.5);
}
.tcp-fb-toggle:checked ~ .tcp-fb-modal {
  display: block; position: fixed; z-index: 1301;
  right: 18px; bottom: 18px; width: min(420px, calc(100vw - 36px));
  background: var(--bg-1); border: 1px solid var(--bg-3);
  border-radius: 14px; padding: 20px; box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.tcp-fb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.tcp-fb-title { font-size: 15px; font-weight: 700; color: var(--text-1); }
.tcp-fb-close { cursor: pointer; color: var(--text-3); font-size: 18px; }
.tcp-fb-close:hover { color: var(--text-1); }
.tcp-fb-sub { font-size: 12px; color: var(--text-3); margin: 0 0 14px; }
.tcp-fb-kinds { display: flex; gap: 14px; margin-bottom: 10px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.tcp-fb-kinds label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

@media (max-width: 640px) {
  .tcp-fb-fab span { display: none; }
  .tcp-fb-fab { padding: 13px; }
}

/* ── Floating AI assistant ("CoPilot") — sits above the feedback FAB ── */
.tcp-asst-fab {
  position: fixed; right: 18px; bottom: 74px; z-index: 1200;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: var(--on-green); font-size: 13px; font-weight: 600;
  padding: 11px 16px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28); border: 0;
}
.tcp-asst-fab:hover { background: var(--green-hover); }
.tcp-asst-fab i { font-size: 18px; }

/* ⚠️ Ассистент ДОЛЖЕН быть доступен с телефона. Мобильные экраны глушили FAB
   (`.tcp-fb-fab, .tcp-asst-fab { display:none !important }` в их inline-стилях)
   → агент был недоступен с телефона вообще (жалоба Отчима). Форсим показ обратно:
   селектор `body .tcp-asst-fab` специфичнее `.tcp-asst-fab` → бьёт их !important.
   Позиция над плавающим таб-баром. */
@media (max-width: 767px) {
  body .tcp-asst-fab { display: inline-flex !important; bottom: 150px !important; }
}

.tcp-asst-overlay, .tcp-asst-panel { display: none; }
.tcp-asst-toggle:checked ~ .tcp-asst-overlay {
  display: block; position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,0.5);
}
.tcp-asst-toggle:checked ~ .tcp-asst-panel {
  display: flex; flex-direction: column; position: fixed; z-index: 1301;
  right: 18px; bottom: 18px; width: min(440px, calc(100vw - 36px));
  height: min(620px, calc(100vh - 36px));
  background: var(--bg-1); border: 1px solid var(--bg-3);
  border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.4); overflow: hidden;
}
.tcp-asst-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 0.5px solid var(--border); flex: none;
}
.tcp-asst-title { font-size: 15px; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 8px; }
.tcp-asst-close { cursor: pointer; color: var(--text-3); font-size: 18px; }
.tcp-asst-close:hover { color: var(--text-1); }
.tcp-asst-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.tcp-asst-foot { flex: none; border-top: 0.5px solid var(--border); padding: 12px 14px; }

@media (max-width: 640px) {
  .tcp-asst-fab span { display: none; }
  .tcp-asst-fab { padding: 13px; bottom: 78px; }
  .tcp-asst-toggle:checked ~ .tcp-asst-panel {
    right: 0; left: 0; bottom: 0; width: 100%; height: 86vh;
    border-radius: 16px 16px 0 0;
  }
}

/* ── Bulk-select trades (list) ── */
.tcp-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: var(--red-dim);
  border: 0.5px solid var(--red-border);
  border-radius: 10px;
}
.tcp-bulk-bar[hidden] { display: none; }
.tcp-bulk-count { font-size: 13px; color: var(--text-1); }
.tcp-check-col { width: 36px; text-align: center; padding-left: 6px !important; padding-right: 0 !important; }
.tcp-check-col input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }

/* ── Notion migration: inline steps ── */
.tcp-notion-steps {
  margin: 4px 0 16px;
  padding-left: 20px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}
.tcp-notion-steps li { margin-bottom: 4px; }
.tcp-notion-steps strong { color: var(--text-1); }

/* ── Notion import: column mapping ── */
.tcp-map-grid { display: flex; flex-direction: column; gap: 8px; }
.tcp-map-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px;
  align-items: center;
}
.tcp-map-head { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); padding-bottom: 2px; }
.tcp-map-field { font-size: 13px; color: var(--text-1); font-weight: 500; }
.tcp-map-sample { font-size: 11px; color: var(--text-3); margin-top: 3px; }
@media (max-width: 560px) {
  .tcp-map-row { grid-template-columns: 1fr; gap: 4px; }
  .tcp-map-head { display: none; }
}

/* ── Billing month/year toggle ── */
.tcp-bill-toggle {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 18px;
  gap: 4px;
  padding: 4px;
  background: var(--bg-2);
  border: 0.5px solid var(--border);
  border-radius: 999px;
}
.tcp-bill-toggle .bill-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tcp-bill-toggle .bill-tab.is-active { background: var(--green); color: var(--on-green); }
.bill-save { font-size: 11px; font-weight: 700; color: var(--green); }
.bill-tab.is-active .bill-save { color: var(--on-green); }
.tcp-pricing-yearnote { font-size: 12px; color: var(--text-3); margin-top: 2px; margin-bottom: 6px; }

/* ── Мобильный нижний таб-бар (design handoff): стеклянный, 5 пунктов ── */
.tcp-tabbar { display: none; }
@media (max-width: 767px) {
  .tcp-tabbar {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1100;
    align-items: center; justify-content: space-around;
    background: color-mix(in srgb, var(--bg-2) 86%, transparent);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-md); border-radius: 24px; padding: 8px 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  }
  .tcp-tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1;
    color: var(--text-3); text-decoration: none; min-height: 44px;
    justify-content: center; cursor: pointer;
  }
  .tcp-tab i { font-size: 23px; }
  .tcp-tab span { font-size: 10px; font-weight: 500; }
  .tcp-tab.active { color: var(--green); }
  .tcp-tab.active span { font-weight: 600; }
  .tcp-main { padding-bottom: 104px; }
  .tcp-asst-fab { bottom: 168px !important; }
  .tcp-fb-fab { bottom: 104px !important; }
}

/* ── Группы навигации в сайдбаре ── */
.tcp-nav-group {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); padding: 15px 14px 5px;
}
.tcp-nav-group:first-of-type { padding-top: 4px; }

/* ── Спрингборд «Разделы» (мобильное «Ещё») ── */
.tcp-springboard { display: none; }
.tcp-more-overlay { display: none; }
#tcpMoreToggle:checked ~ .tcp-more-overlay {
  display: block; position: fixed; inset: 0; z-index: 1190; background: rgba(0,0,0,0.4);
}
#tcpMoreToggle:checked ~ .tcp-springboard {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 1195;
  background: var(--bg-0); overflow-y: auto; padding: 22px 16px calc(120px + env(safe-area-inset-bottom,0px));
  animation: tcp-sb-up 0.18s ease;
  /* iOS: без contain жест уходит подложке на границе скролла → шит «скроллится
     через раз»; touch-scrolling для инерции. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Пока шит открыт — страница под ним не скроллится (перехватывала жесты). */
html:has(#tcpMoreToggle:checked) { overflow: hidden; }
html:has(#tcpMoreToggle:checked) body { overflow: hidden; }
@keyframes tcp-sb-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
/* FAB'ы не должны налезать на контент открытого спрингборда «Ещё» (перекрывали EN).
   FAB'ы лежат вне .tcp-app, тогглер — внутри → достаём через :has() на body. */
body:has(#tcpMoreToggle:checked) .tcp-fb-fab,
body:has(#tcpMoreToggle:checked) .tcp-asst-fab { display: none; }
/* Sections (шит «Ещё») — список группами 1:1 по REFERENCE-sections-mobile.
   Токены --sbBlue/--sbAmber теперь глобальные в :root (нужны и шапкам экранов). */
.tcp-sb-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 0; margin-bottom: 4px; }
.tcp-sb-title { font-size: 28px; font-weight: 700; letter-spacing: -0.7px; }
.tcp-sb-close { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-2); border: none; display: flex; align-items: center; justify-content: center; color: var(--text-2); cursor: pointer; }
.tcp-sb-group { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding: 14px 4px 9px; }
.tcp-sb-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.tcp-sb-row { display: flex; align-items: center; gap: 13px; height: 54px; padding: 0 16px; text-decoration: none; color: var(--text-1); }
.tcp-sb-row + .tcp-sb-row { border-top: 1px solid var(--border); }
.tcp-sb-row .ic { width: 24px; display: flex; align-items: center; justify-content: center; flex: none; }
.tcp-sb-row .t { flex: 1; font-size: 15px; font-weight: 500; letter-spacing: -0.2px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcp-sb-row .chev { color: var(--text-3); flex: none; }
.tcp-sb-row .tcp-sb-badge { flex: none; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.tcp-sb-lang { width: 100%; }
.tcp-sb-lang .tcp-lang-btn { flex: 1; text-align: center; font-size: 14px; padding: 11px 0; border-radius: 8px; }

/* Круглая мобильная «назад» (эталон header-mobile) — глобальный класс для экранов
   без собственного мобильного media-блока. Виден только ≤767px. */
a.tcp-mb-back { display: none; }
@media (max-width: 767px) {
  a.tcp-mb-back { display: flex; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-2); border: none; color: var(--text-2); align-items: center; justify-content: center; flex: none; align-self: center; }
  /* Шапки этих экранов — space-between + wrap: без этого back и тайтл разъезжаются.
     Тайтл-блок прижимается к «назад» (и сжимается, чтобы не переноситься под кнопку),
     правые кнопки уходят вправо. Для .fbx нужен селектор сильнее .fbx .head h1{margin:0}. */
  a.tcp-mb-back + div, a.tcp-mb-back + h1, .fbx .head a.tcp-mb-back + h1 { margin-right: auto; }
  /* basis 0 — иначе при flex-wrap широкий тайтл-блок переносится ПОД кнопку, а не сжимается;
     min-width 58% — широкие правые кнопки уходят на следующий ряд, не давя тайтл */
  a.tcp-mb-back + div { flex: 1 1 0%; min-width: 58%; }
}

/* ── Lucide-иконки: размер по контексту (em) + бренд-обводка 1.75 ── */
svg.lucide {
  width: 1.1em; height: 1.1em; stroke-width: 1.75;
  vertical-align: -0.14em; flex-shrink: 0; display: inline-block;
}

/* ============================================================
   Экран «Сделки» (UX) — дизайн-хэндофф design_handoff_sdelki.
   Классы дизайнера заскоуплены под .sdx (изоляция от Bootstrap/tcp).
   Переменные scoped: светлые литералы = эталон; дарк = наши токены.
   ============================================================ */
.sdx {
  --surface: #FFFFFF; --surface-2: #FAFAFB; --chip: #ECECEE; --chip-2: #F0F0F2;
  --sdx-text: #1D1D1F; --sdx-text2: #3a3a3d; --sdx-text3: #6E6E73; --sdx-muted: #86868B; --sdx-muted2: #A1A1A6;
  --sdx-green: #30A46C; --sdx-green-hover: #2b9460; --green-soft: rgba(48,164,108,0.12);
  --green-line: rgba(48,164,108,0.26); --green-glow: rgba(48,164,108,0.22); --sdx-blue: #2A6FDB;
  --sdx-bd: rgba(0,0,0,0.07); --sdx-bd2: rgba(0,0,0,0.10); --sdx-bg: #F5F5F7;
  --r-c: 16px; --r-b: 11px; --r-i: 13px;
  display: flex; flex-direction: column; gap: 18px;
}
html[data-theme="dark"] .sdx {
  --surface: #141416; --surface-2: #1c1c1e; --chip: #1c1c1e; --chip-2: #1c1c1e;
  --sdx-text: #F5F5F7; --sdx-text2: #C7C7CC; --sdx-text3: #98989D; --sdx-muted: #86868B; --sdx-muted2: #6E6E73;
  --sdx-bd: rgba(255,255,255,0.07); --sdx-bd2: rgba(255,255,255,0.10); --sdx-bg: #08080A;
  /* В тёмной теме зелёный = ЯРКИЙ #32D74B (как кнопки/чипы и как в Бэктесте) —
     иначе метрики оставались глубокими #30A46C и на странице было два зелёных
     («арлекино», жалоба Отчима). Теперь везде один зелёный. */
  --sdx-green: #32D74B; --sdx-green-hover: #5BDF6E;
}
.sdx .num { font-variant-numeric: tabular-nums; }

.sdx .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.sdx .page-head h1 { display: flex; align-items: center; gap: 11px; font-size: 30px; font-weight: 700; letter-spacing: -0.7px; margin: 0; color: var(--sdx-text); }
.sdx .page-head h1 i, .sdx .page-head h1 svg { width: 27px; height: 27px; color: var(--green); }
.sdx .page-head .sub { font-size: 14px; color: var(--sdx-muted); margin-top: 5px; }
.sdx .head-actions { display: flex; gap: 11px; }

.sdx .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; border-radius: var(--r-b); cursor: pointer; text-decoration: none; }
.sdx .btn--ghost { color: var(--sdx-text); background: var(--surface); border: 1px solid rgba(0,0,0,0.12); padding: 11px 17px; }
html[data-theme="dark"] .sdx .btn--ghost { border-color: rgba(255,255,255,0.12); }
.sdx .btn--ghost:hover { background: var(--sdx-bg); }
.sdx .btn--primary { color: #fff; background: var(--sdx-green); border: none; padding: 11px 19px; box-shadow: 0 2px 10px rgba(48,164,108,0.28); }
.sdx .btn--primary:hover { background: var(--sdx-green-hover); }
/* Отчим: в тёмной теме залитые зелёным CTA («Log trade», «Add skip») и активный
   чип-фильтр — в цвет FAB'ов Feedback/Assistant (яркий --green #32D74B + тёмный текст) */
html[data-theme="dark"] .sdx .btn--primary { background: var(--green); color: var(--on-green); box-shadow: 0 2px 12px rgba(50,215,75,0.30); }
html[data-theme="dark"] .sdx .btn--primary:hover { background: var(--green-hover); }
html[data-theme="dark"] .sdx .chip.is-active { background: var(--green); border-color: var(--green); color: var(--on-green); }
/* Отчим: во ВСЕХ зелёных залитых кнопках/чипах текст тёмный (--on-green), а не белый —
   солиднее и не слепит. Тема-осознанно: dark = тёмный текст (как у FAB), light оставляет
   белый (там зелёный глубокий #30A46C). */
html[data-theme="dark"] .tcp-app .btn-primary,
html[data-theme="dark"] .tcp-app .btn-success {
  --bs-btn-color: var(--on-green); --bs-btn-hover-color: var(--on-green); --bs-btn-active-color: var(--on-green);
}
html[data-theme="dark"] .skform .btn--primary,
html[data-theme="dark"] .dayx .btn-primary,
html[data-theme="dark"] .dayc .tcp-btn-primary,
html[data-theme="dark"] .accx .btn-primary,
html[data-theme="dark"] .acf .btn-primary,
html[data-theme="dark"] .ins .period.is-active,
html[data-theme="dark"] .ins .btn-find,
html[data-theme="dark"] .bkt .edge-verdict__badge,
html[data-theme="dark"] .bkt .btn-save,
html[data-theme="dark"] .bkt .btn-up,
html[data-theme="dark"] .bkt .bulk-btn,
html[data-theme="dark"] .stx .period.is-active,
html[data-theme="dark"] .rlx .btn-primary,
html[data-theme="dark"] .kbx .tab.is-active,
html[data-theme="dark"] .kbx .btn-upload,
html[data-theme="dark"] .vrx .btn-primary,
html[data-theme="dark"] .trx .btn-sm.primary,
html[data-theme="dark"] .ppx .follow .btn,
html[data-theme="dark"] .ppx .cta .btn,
html[data-theme="dark"] .fdx .filter.is-active,
html[data-theme="dark"] .fdx .btn-follow,
html[data-theme="dark"] .fdx .empty__btn,
html[data-theme="dark"] .nwx .imp-filter.is-active,
html[data-theme="dark"] .nwx .imp-filter.is-active i,
html[data-theme="dark"] .nwx .imp-filter.is-active svg,
html[data-theme="dark"] .stg .btn-primary {
  color: var(--on-green);
}
.sdx .btn i, .sdx .btn svg { width: 16px; height: 16px; }

.sdx .insight { display: flex; align-items: center; gap: 14px; background: linear-gradient(100deg, rgba(48,164,108,0.10), rgba(48,164,108,0.03) 60%, transparent); border: 1px solid rgba(48,164,108,0.22); border-radius: var(--r-c); padding: 15px 18px; }
.sdx .insight__ic { width: 38px; height: 38px; border-radius: 11px; background: rgba(48,164,108,0.14); color: var(--sdx-green); display: flex; align-items: center; justify-content: center; flex: none; }
.sdx .insight__ic i, .sdx .insight__ic svg { width: 19px; height: 19px; }
.sdx .insight__txt { flex: 1; min-width: 0; font-size: 14.5px; color: var(--sdx-text2); line-height: 1.5; }
.sdx .insight__txt b { color: var(--sdx-text); font-weight: 600; }
.sdx .insight__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sdx-muted); background: var(--chip-2); border-radius: 8px; padding: 7px 12px; white-space: nowrap; flex: none; }

.sdx .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sdx .kpi { background: var(--surface); border: 1px solid var(--sdx-bd); border-radius: var(--r-c); padding: 18px 20px; }
.sdx .kpi .lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sdx-muted); margin-bottom: 9px; }
.sdx .kpi .v { font-size: 27px; font-weight: 700; letter-spacing: -0.6px; color: var(--sdx-text); }
.sdx .kpi .v.is-green { color: var(--sdx-green); }
.sdx .kpi .s { font-size: 12px; color: var(--sdx-muted); margin-top: 5px; }

.sdx .card { background: var(--surface); border: 1px solid var(--sdx-bd); border-radius: var(--r-c); }
.sdx .card--pad { padding: 22px 24px; }
.sdx .card__title { font-size: 16px; font-weight: 600; color: var(--sdx-text); }

.sdx .metrics-money { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 16px; text-align: center; padding-bottom: 18px; border-bottom: 1px solid var(--sdx-bd); margin-top: 18px; }
.sdx .metrics-money .lbl { font-size: 12px; color: var(--sdx-text3); margin-bottom: 6px; }
.sdx .metrics-money .v { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; color: var(--sdx-text); white-space: nowrap; }
.sdx .metrics-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px 16px; padding-top: 18px; text-align: center; }
.sdx .metrics-grid .lbl { font-size: 12px; color: var(--sdx-text3); margin-bottom: 6px; }
.sdx .metrics-grid .v { font-size: 19px; font-weight: 700; color: var(--sdx-text); }
.sdx .is-green { color: var(--sdx-green); }
.sdx .is-muted { color: var(--sdx-muted2); }

.sdx .equity__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.sdx .equity__cum { font-size: 13px; color: var(--sdx-green); font-weight: 600; }
.sdx .equity svg { width: 100%; height: 180px; display: block; }

.sdx .breakdowns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.sdx .bd__title { font-size: 14px; font-weight: 600; padding: 15px 18px; border-bottom: 1px solid var(--sdx-bd); color: var(--sdx-text); }
.sdx .bd__head { display: grid; grid-template-columns: 1fr 72px 76px 72px; gap: 0 12px; padding: 11px 18px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sdx-muted2); }
.sdx .bd__head span:not(:first-child) { text-align: center; }
.sdx .bd__row { display: grid; grid-template-columns: 1fr 72px 76px 72px; gap: 0 12px; padding: 6px 18px 16px; align-items: center; font-size: 13.5px; }
.sdx .bd__row .k { color: var(--sdx-text); }
.sdx .bd__row .n { color: var(--sdx-muted); text-align: center; }
.sdx .bd__row .w { color: var(--sdx-text3); text-align: center; }
.sdx .bd__row .r { color: var(--sdx-green); font-weight: 600; text-align: center; }

.sdx .toolbar { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.sdx .search { position: relative; flex: 1; min-width: 280px; }
.sdx .search i, .sdx .search svg { width: 17px; height: 17px; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #9B9BA0; }
.sdx .search input { width: 100%; height: 46px; background: var(--surface); border: 1px solid var(--sdx-bd2); border-radius: var(--r-i); padding: 0 16px 0 42px; color: var(--sdx-text); font-size: 14px; outline: none; font-family: inherit; }
.sdx .select { display: flex; align-items: center; gap: 9px; height: 46px; background: var(--surface); border: 1px solid var(--sdx-bd2); border-radius: var(--r-i); padding: 0 15px; font-size: 13.5px; font-weight: 500; cursor: pointer; position: relative; }
.sdx .select:hover { background: var(--sdx-bg); }
.sdx .select i.lead, .sdx .select svg.lead { width: 16px; height: 16px; color: var(--sdx-muted); }
.sdx .select .lbl { color: var(--sdx-muted); }
.sdx .select .val { font-weight: 600; color: var(--sdx-text); }
.sdx .select i.chev, .sdx .select svg.chev { width: 15px; height: 15px; color: #9B9BA0; }
.sdx .select select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; }

.sdx .chips { display: flex; gap: 9px; flex-wrap: wrap; }
.sdx .chip { font-size: 13.5px; font-weight: 600; color: var(--sdx-text2); background: var(--surface); border: 1px solid var(--sdx-bd2); border-radius: var(--r-b); padding: 9px 17px; cursor: pointer; text-decoration: none; }
.sdx .chip.is-active { color: #fff; background: var(--sdx-green); border-color: var(--sdx-green); }

.sdx .tbl-head, .sdx .tbl-row { display: grid; grid-template-columns: 24px 80px 80px 90px 110px 64px 48px 150px 210px; justify-content: space-between; align-items: center; justify-items: center; text-align: center; white-space: nowrap; }
.sdx .tbl-head { padding: 14px 20px; border-bottom: 1px solid var(--sdx-bd); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sdx-muted2); }
.sdx .tbl-row { padding: 16px 20px; font-size: 14px; color: var(--sdx-text); border-top: 1px solid var(--sdx-bd); cursor: pointer; text-decoration: none; }
.sdx .tbl-row:first-of-type { border-top: 0; }
.sdx .tbl-row:hover { background: var(--surface-2); }
.sdx .checkbox { width: 18px; height: 18px; border: 1.5px solid #C7C7CC; border-radius: 5px; accent-color: var(--sdx-green); margin: 0; cursor: pointer; }
.sdx .cell-setup { display: flex; align-items: center; gap: 8px; }
.sdx .tag-setup { font-size: 12px; font-weight: 700; color: var(--sdx-green); background: var(--green-soft); border-radius: 7px; padding: 3px 9px; }
.sdx .cell-setup .cnt { font-size: 12px; color: var(--sdx-muted2); }
.sdx .cell-dir { display: flex; align-items: center; gap: 6px; color: var(--sdx-green); font-weight: 600; }
.sdx .cell-dir.is-short { color: var(--red, #D70015); }
.sdx .cell-dir i, .sdx .cell-dir svg { width: 12px; height: 12px; fill: currentColor; }
.sdx .cell-dim { color: var(--sdx-text2); }
.sdx .is-red { color: #D70015; }
.sdx .rules-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--sdx-green); background: rgba(48,164,108,0.10); border: 1px solid var(--green-line); border-radius: 9px; padding: 6px 11px; width: fit-content; }
.sdx .rules-ok i, .sdx .rules-ok svg { width: 14px; height: 14px; }
.sdx .cell-muted { color: var(--sdx-muted2); }

.sdx .disclaimer { font-size: 12px; color: #B0B0B5; text-align: center; line-height: 1.6; max-width: 920px; margin: 6px auto 0; }

/* ── Скипы: специфика поверх .sdx (сетки/ячейки 1:1 по REFERENCE-skipy-ux) ── */
.sdx.skx .breakdowns { grid-template-columns: 1fr 1fr; }
.sdx.skx .bd__head, .sdx.skx .bd__row { grid-template-columns: 1fr 90px 110px; gap: 0; justify-content: space-between; }
.sdx.skx .bd__head { padding: 11px 18px 6px; }
.sdx.skx .bd__row { padding: 8px 18px; border-top: 1px solid var(--sdx-bd); }
.sdx.skx .bd__row .ok { color: var(--sdx-green); font-weight: 600; text-align: center; }
/* Спека Отчима, буква в букву. Сетка одинаковая для шапки и строк. */
.sdx.skx .tbl-head, .sdx.skx .tbl-row { display: grid; grid-template-columns: 24px 96px 96px 76px 200px 120px 220px; justify-content: space-between; align-items: center; justify-items: center; text-align: center; }
.sdx.skx .tbl-head { padding: 14px 24px; }
.sdx.skx .tbl-row { padding: 15px 24px; }
.sdx.skx .tbl-head > *, .sdx.skx .tbl-row > * { min-width: 0; overflow-wrap: anywhere; }
.sdx.skx .num, .sdx.skx .tag-setup, .sdx.skx .cell-would { white-space: nowrap; }
.sdx.skx .tag-setup { color: var(--sdx-text3); background: var(--chip-2); }
/* Дата/Инструмент/Сетап (2–4) — по центру (justify-items: center выше).
   Причина пропуска / Что было бы / Заметка (5–7) — по левому краю. */
.sdx.skx .tbl-head > *:nth-child(n+5), .sdx.skx .tbl-row > *:nth-child(n+5) { justify-self: start; text-align: left; }
.sdx.skx .cell-reason { display: inline-flex; align-items: center; gap: 7px; color: var(--sdx-text2); white-space: normal; }
.sdx.skx .cell-reason i, .sdx.skx .cell-reason svg { width: 15px; height: 15px; color: var(--sdx-muted); flex: none; }
.sdx.skx .cell-would { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.sdx.skx .cell-would i, .sdx.skx .cell-would svg { width: 14px; height: 14px; }
.sdx.skx .cell-would.is-saved { color: var(--sdx-green); }
.sdx.skx .cell-would.is-missed { color: #D70015; }
.sdx.skx .col-note-head { text-align: left; }
.sdx.skx .cell-note { color: var(--sdx-muted); font-size: 13px; white-space: normal; text-align: left; }
/* нижний отступ — чтобы последние строки/дисклеймер не уходили под FAB-кнопки. */
.sdx.skx { padding-bottom: 96px; }
/* Узкий центрированный контейнер для форм (новый скип и т.п.): не растягивается на
   широком мониторе, стоит по центру свободного пространства, а не прижат влево. */
.tcp-narrow { max-width: 1060px; margin: 0 auto; width: 100%; }
/* Широкий центрированный контейнер (карточка торгового дня и т.п.): по центру
   свободного пространства, не прижат влево с пустой полосой справа. */
.tcp-wide { max-width: 1280px; margin: 0 auto; width: 100%; }

/* ============================================================
   Форма нового/редактирования скипа — 1:1 по REFERENCE-noviy-skip.
   Глобальные токены (--bg-*/--text-*/--green/--red/--border) → авто тёмная тема.
   ============================================================ */
.skform { max-width: 1060px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 18px; padding-bottom: 110px; }
.skform .back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 12px; text-decoration: none; }
.skform .back:hover { color: var(--text-1); }
.skform .back i, .skform .back svg { width: 15px; height: 15px; }
.skform h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.7px; color: var(--text-1); margin: 0; }
.skform .subtitle { font-size: 14px; color: var(--text-3); margin-top: 5px; }
.skform .card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 18px; padding: 22px 24px; }
.skform .card__title { font-size: 16px; font-weight: 600; color: var(--text-1); }
.skform .card__hint { font-size: 13px; color: var(--text-3); margin-top: 5px; }
.skform .field-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--text-1); }
.skform .req { color: var(--red); }
.skform .input, .skform select.input { width: 100%; height: 46px; background: var(--bg-1); border: 1px solid var(--border-md); border-radius: 11px; padding: 0 14px; color: var(--text-1); font-size: 14px; outline: none; font-family: inherit; }
.skform select.input { cursor: pointer; }
.skform textarea.input { height: auto; min-height: 120px; padding: 14px; line-height: 1.55; resize: vertical; }
.skform .input:focus, .skform textarea.input:focus, .skform select.input:focus { border-color: var(--green); }
.skform .input::placeholder, .skform textarea.input::placeholder { color: var(--text-3); opacity: .8; }
.skform .input-wrap { position: relative; }
.skform .input-wrap > i, .skform .input-wrap > svg { width: 17px; height: 17px; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9B9BA0; pointer-events: none; }
.skform .input--lead { padding-left: 40px; }
/* AI quick-fill */
.skform .ai { background: linear-gradient(120deg, rgba(48,164,108,0.07), rgba(48,164,108,0.015) 55%, transparent); border: 1px solid rgba(48,164,108,0.22); border-radius: 18px; padding: 18px 20px; }
.skform .ai__row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.skform .ai__hint { font-size: 12.5px; color: var(--text-3); margin-top: 11px; line-height: 1.5; }
/* buttons */
.skform .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; border-radius: 11px; cursor: pointer; text-decoration: none; border: none; }
.skform .btn--primary { color: #fff; background: var(--green); padding: 11px 18px; box-shadow: 0 2px 10px rgba(48,164,108,0.28); }
.skform .btn--primary:hover { background: var(--green-hover, #2b9460); }
.skform .btn--ghost { color: var(--text-1); background: var(--bg-1); border: 1px solid var(--border-md); padding: 11px 16px; }
.skform .btn--ghost:hover { background: var(--bg-0); }
.skform .btn i, .skform .btn svg { width: 17px; height: 17px; }
/* params grid */
.skform .params-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 18px; align-items: start; }
.skform .dir { display: flex; gap: 9px; }
/* нативные radio/checkbox прячем — их представляют label-чипы (форма постит штатно) */
.skform input[type=radio], .skform input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.skform .chips { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.skform .chip { font-size: 13.5px; font-weight: 600; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; user-select: none; }
.skform .chip.setup { font-weight: 700; padding: 9px 18px; }
.skform input:checked + .chip { color: var(--green); background: rgba(48,164,108,0.1); border-color: rgba(48,164,108,0.5); }
.skform .dir-btn { display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 17px; font-size: 14px; font-weight: 600; border-radius: 11px; cursor: pointer; color: var(--text-3); background: var(--bg-1); border: 1px solid var(--border-md); user-select: none; }
.skform input:checked + .dir-btn.long { color: var(--green); background: rgba(48,164,108,0.1); border-color: rgba(48,164,108,0.5); }
.skform input:checked + .dir-btn.short { color: var(--red); background: rgba(215,0,21,0.08); border-color: rgba(215,0,21,0.45); }
.skform .chip-input { height: 40px; min-width: 150px; background: var(--bg-1); border: 1px dashed rgba(0,0,0,0.18); border-radius: 10px; padding: 0 14px; color: var(--text-1); font-size: 13.5px; outline: none; font-family: inherit; }
html[data-theme="dark"] .skform .chip-input { border-color: rgba(255,255,255,0.18); }
.skform .chip-input--full { width: 100%; height: 44px; margin-top: 14px; }
/* outcome radios */
.skform .outcomes { display: flex; gap: 11px; flex-wrap: wrap; }
.skform .outcome { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--bg-1); border: 1px solid var(--border-md); border-radius: 12px; padding: 12px 18px; cursor: pointer; user-select: none; }
.skform input:checked + .outcome { color: var(--text-1); background: rgba(48,164,108,0.08); border-color: rgba(48,164,108,0.5); }
.skform .outcome .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C7C7CC; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.skform input:checked + .outcome .radio { border-color: var(--green); }
.skform .outcome .radio b { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: none; }
.skform input:checked + .outcome .radio b { display: block; }
/* кнопка удаления кастомного значка × */
.skform .tcp-chip-x { margin-left: 2px; border: none; background: transparent; color: var(--text-3); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.skform .tcp-chip-x:hover { color: var(--red); }
/* screenshots / actions */
.skform .shots-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.skform .actions { display: flex; gap: 11px; margin-top: 4px; }
.skform .actions .btn { padding: 12px 22px; }
@media (max-width: 760px) {
  .skform .params-grid, .skform .shots-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Карточка скипа (детали) — 1:1 по REFERENCE-skip-card. 2 колонки 1fr 1fr,
   справа AI-анализ в ЗАПОЛНЕННОМ виде. Глобальные токены → авто тёмная тема.
   ============================================================ */
.skd { display: flex; flex-direction: column; gap: 20px; padding-bottom: 110px; }
.skd .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.skd .back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 12px; text-decoration: none; }
.skd .back:hover { color: var(--text-1); }
.skd .back i, .skd .back svg { width: 15px; height: 15px; }
.skd h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.7px; color: var(--text-1); margin: 0; }
.skd .subtitle { font-size: 14px; color: var(--text-3); margin-top: 6px; }
.skd .head-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.skd .head-actions form { margin: 0; }
.skd .btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; border-radius: 11px; padding: 10px 15px; cursor: pointer; background: var(--bg-1); border: 1px solid var(--border-md); color: var(--text-1); text-decoration: none; }
.skd .btn:hover { background: var(--bg-0); }
.skd .btn i, .skd .btn svg { width: 15px; height: 15px; color: var(--text-3); }
.skd .btn.icon-green i, .skd .btn.icon-green svg { color: var(--green); }
.skd .btn.danger { color: var(--red); background: rgba(215,0,21,0.07); border-color: rgba(215,0,21,0.25); }
.skd .btn.danger:hover { background: rgba(215,0,21,0.12); }
.skd .btn.danger i, .skd .btn.danger svg { color: var(--red); }
.skd .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.skd .card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 18px; }
.skd .card--pad { padding: 22px 24px; }
.skd .card__title { font-size: 16px; font-weight: 600; color: var(--text-1); }
.skd .param-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.skd .param-row .k { font-size: 14px; color: var(--text-3); }
.skd .param-row .v { font-size: 14.5px; font-weight: 600; color: var(--text-1); }
.skd .section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.skd .reason-chip { font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; padding: 7px 13px; }
.skd .note-text { font-size: 14px; color: var(--text-2); line-height: 1.55; white-space: pre-wrap; }
.skd .shot-link { font-size: 13px; font-weight: 600; color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.skd .shot-link i, .skd .shot-link svg { width: 13px; height: 13px; }
/* AI card */
.skd .ai-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 16px; border-bottom: 1px solid var(--border); }
.skd .ai-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--green); background: rgba(48,164,108,0.12); border-radius: 8px; padding: 5px 10px; }
.skd .ai-badge i, .skd .ai-badge svg { width: 13px; height: 13px; }
.skd .ai-body { padding: 20px 22px; }
.skd .verdict { display: flex; align-items: center; gap: 13px; }
.skd .verdict__ic { width: 44px; height: 44px; border-radius: 13px; background: rgba(48,164,108,0.13); color: var(--green); display: flex; align-items: center; justify-content: center; flex: none; }
.skd .verdict__ic.miss { background: rgba(215,0,21,0.12); color: var(--red); }
.skd .verdict__ic i, .skd .verdict__ic svg { width: 22px; height: 22px; }
.skd .verdict__t { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; color: var(--text-1); }
.skd .verdict__s { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.skd .ai-lead { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin-top: 16px; }
.skd .ai-lead b { color: var(--text-1); font-weight: 600; }
.skd .ai-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 18px; }
.skd .ai-stat { background: var(--bg-2); border: 1px solid var(--border); border-radius: 13px; padding: 13px 14px; }
.skd .ai-stat .k { font-size: 11px; color: var(--text-3); margin-bottom: 6px; }
.skd .ai-stat .v { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; color: var(--text-1); }
.skd .ai-stat .v.green { color: var(--green); }
.skd .ai-stat .v.red { color: var(--red); }
.skd .checks { margin-top: 18px; display: flex; flex-direction: column; gap: 11px; }
.skd .check { display: flex; align-items: flex-start; gap: 11px; }
.skd .check i, .skd .check svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.skd .check.ok i, .skd .check.ok svg { color: var(--green); }
.skd .check.info i, .skd .check.info svg { color: var(--text-3); }
.skd .check span { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.skd .reco { display: flex; gap: 12px; background: linear-gradient(100deg, rgba(48,164,108,0.08), rgba(48,164,108,0.02) 60%, transparent); border: 1px solid rgba(48,164,108,0.2); border-radius: 14px; padding: 15px 16px; margin-top: 20px; }
.skd .reco i, .skd .reco svg { width: 18px; height: 18px; color: var(--green); flex: none; margin-top: 1px; }
.skd .reco div { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.skd .reco b { font-weight: 600; color: var(--text-1); }
.skd .ai-empty { padding: 26px 22px; font-size: 13.5px; color: var(--text-3); }
@media (max-width: 900px) { .skd .cols { grid-template-columns: 1fr; } }

/* ============================================================
   Список «Торговый день» — 1:1 по REFERENCE-trading-day.
   Таблица: фикс-колонки + justify-content:space-between (НЕ 1fr).
   ============================================================ */
.dayx { display: flex; flex-direction: column; gap: 18px; padding-bottom: 110px; }
.dayx .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dayx h1 { display: flex; align-items: center; gap: 11px; font-size: 30px; font-weight: 700; letter-spacing: -0.7px; color: var(--text-1); margin: 0; }
.dayx h1 i, .dayx h1 svg { width: 27px; height: 27px; color: var(--green); }
.dayx .subtitle { font-size: 14px; color: var(--text-3); margin-top: 6px; max-width: 560px; line-height: 1.5; }
.dayx .head-right { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.dayx .datebox { display: flex; align-items: center; gap: 9px; height: 46px; background: var(--bg-1); border: 1px solid var(--border-md); border-radius: 11px; padding: 0 15px; }
.dayx .datebox i, .dayx .datebox svg { width: 17px; height: 17px; color: var(--text-3); }
.dayx .datebox input { border: none; background: transparent; color: var(--text-1); font-size: 14px; font-weight: 600; outline: none; font-family: inherit; min-width: 130px; }
.dayx .btn-primary { display: inline-flex; align-items: center; gap: 8px; height: 46px; font-size: 14px; font-weight: 600; color: #fff; background: var(--green); border: none; border-radius: 11px; padding: 0 19px; cursor: pointer; box-shadow: 0 2px 10px rgba(48,164,108,0.28); }
.dayx .btn-primary:hover { background: var(--green-hover, #2b9460); }
.dayx .btn-primary i, .dayx .btn-primary svg { width: 17px; height: 17px; }
.dayx .insight { display: flex; align-items: center; gap: 14px; background: linear-gradient(100deg, rgba(48,164,108,0.10), rgba(48,164,108,0.03) 60%, transparent); border: 1px solid rgba(48,164,108,0.22); border-radius: 16px; padding: 15px 18px; }
.dayx .insight__ic { width: 38px; height: 38px; border-radius: 11px; background: rgba(48,164,108,0.14); color: var(--green); display: flex; align-items: center; justify-content: center; flex: none; }
.dayx .insight__ic i, .dayx .insight__ic svg { width: 19px; height: 19px; }
.dayx .insight__txt { flex: 1; min-width: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.5; }
.dayx .insight__txt b { color: var(--text-1); font-weight: 600; }
.dayx .insight__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); background: var(--bg-2); border-radius: 8px; padding: 7px 12px; white-space: nowrap; flex: none; }
.dayx .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dayx .kpi { background: var(--bg-1); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; }
.dayx .kpi .lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); margin-bottom: 9px; }
.dayx .kpi .v { font-size: 27px; font-weight: 700; letter-spacing: -0.6px; color: var(--text-1); }
.dayx .kpi .v.green { color: var(--green); }
.dayx .kpi .s { font-size: 12px; color: var(--text-3); margin-top: 5px; }
/* table */
.dayx .tbl { background: var(--bg-1); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.dayx .tbl-head, .dayx .tbl-row { display: grid; grid-template-columns: 24px 130px 170px 150px 150px 150px 44px; justify-content: space-between; align-items: center; gap: 18px; }
.dayx .tbl-head { padding: 14px 22px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.dayx .tbl-head .c-center { text-align: center; }
.dayx .tbl-row { padding: 15px 22px; font-size: 14px; border-top: 1px solid var(--border); cursor: pointer; }
.dayx .tbl-row:first-of-type { border-top: 0; }
.dayx .tbl-row:hover { background: var(--bg-2); }
.dayx .checkbox { width: 18px; height: 18px; border: 1.5px solid #C7C7CC; border-radius: 5px; accent-color: var(--green); margin: 0; cursor: pointer; }
.dayx .cell-date { font-weight: 600; color: var(--text-1); }
.dayx .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; border-radius: 8px; padding: 5px 11px; }
.dayx .badge.green { color: var(--green); background: rgba(48,164,108,0.12); }
.dayx .badge.grey { color: var(--text-3); background: var(--bg-2); }
.dayx .badge.empty { color: var(--text-3); background: var(--bg-2); }
.dayx .badge i, .dayx .badge svg { width: 13px; height: 13px; }
.dayx .empty { color: #C7C7CC; }
.dayx .cell-score { text-align: center; }
.dayx .cell-score .v { font-size: 14.5px; font-weight: 700; }
.dayx .score-green { color: var(--green); }
.dayx .score-dark { color: var(--text-1); }
.dayx .cell-exec { justify-self: center; width: 100%; max-width: 120px; text-align: center; }
.dayx .exec { display: flex; align-items: center; gap: 8px; justify-content: center; }
.dayx .exec .track { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; max-width: 74px; }
.dayx .exec .track > i { display: block; height: 100%; }
.dayx .exec .pct { font-size: 12.5px; font-weight: 700; }
.dayx .exec-green { color: var(--green); } .dayx .exec-green-bg { background: var(--green); }
.dayx .exec-dark { color: var(--text-1); } .dayx .exec-dark-bg { background: var(--text-1); }
.dayx .cell-chevron { text-align: right; }
.dayx .cell-chevron i, .dayx .cell-chevron svg { width: 17px; height: 17px; color: #C7C7CC; }
/* пустое состояние */
.dayx .day-empty { background: var(--bg-1); border: 1px solid var(--border); border-radius: 16px; padding: 60px 24px; text-align: center; }
.dayx .day-empty i, .dayx .day-empty svg { width: 34px; height: 34px; color: #9B9BA0; }
.dayx .day-empty .t { font-size: 18px; font-weight: 700; color: var(--text-1); margin-top: 14px; }
.dayx .day-empty .s { font-size: 14px; color: var(--text-3); margin-top: 7px; }
@media (max-width: 980px) {
  .dayx .kpis { grid-template-columns: repeat(2, 1fr); }
  .dayx .table { overflow-x: auto; }
  .dayx .tbl-head, .dayx .tbl-row { min-width: 880px; }
}

/* ============================================================
   Карточка «Торговый день» — бренд-рестайл под REFERENCE-trading-day-card.
   Скоуп .dayc поверх существующей структуры (вся функциональность цела).
   ============================================================ */
.dayc .tcp-card { border-radius: 18px; border: 1px solid var(--border); }
.dayc > .tcp-card,
.dayc form > .tcp-card,
.dayc > a + .tcp-card { background: var(--bg-1); }
/* заголовок карточки: иконка → зелёная плашка */
.dayc .tcp-card-header { padding: 20px 24px 0; border: 0; background: transparent; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dayc .tcp-card-title { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--text-1); }
/* Значки заголовков дня — БЕЗ фон-плашки, только зелёный значок (правка Отчима). */
.dayc .tcp-card-title > i:first-child,
.dayc .tcp-card-title > svg:first-child { width: 20px; height: 20px; background: none; color: var(--green); display: inline-flex; align-items: center; justify-content: center; margin-right: 0 !important; flex: none; }
.dayc .tcp-card-body { padding: 14px 24px 22px; }
/* инпуты/текстарии */
.dayc .tcp-input { border-radius: 12px; border: 1px solid var(--border-md); background: var(--bg-1); font-size: 14px; }
.dayc textarea.tcp-input { line-height: 1.55; padding: 13px 14px; }
.dayc .tcp-input:focus { border-color: var(--green); outline: none; }
/* кнопки */
.dayc .tcp-btn { border-radius: 11px; }
.dayc .tcp-btn-primary { background: var(--green); color: #fff; border: none; box-shadow: 0 2px 10px rgba(48,164,108,0.28); }
.dayc .tcp-btn-primary:hover { background: var(--green-hover, #2b9460); }
/* ТФ-карточки (вложенные tcp-card в tcp-tf-grid) → как .tf в референсе */
.dayc .tcp-tf-grid > .tcp-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; }
.dayc .tcp-tf-grid > .tcp-card .tcp-card-body { padding: 14px 16px; }
.dayc .tcp-tf-grid { gap: 16px !important; }
/* мелкие панели (голос/распределение) на bg-2 */
.dayc #plan-voice-panel, .dayc #bias-card .tcp-card, .dayc #plan-snap-panel { border-radius: 13px; }
/* позиции дня: строки-ссылки уже инлайн-стилизованы — лёгкий ховер */
.dayc .tcp-row-hover:hover { background: var(--bg-2); }
/* шапка: ссылка «К торговым дням» над заголовком, дата через серую точку, «Удалить» красным */
.dayc .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.dayc .page-head .back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 12px; text-decoration: none; }
.dayc .page-head .back:hover { color: var(--text-1); }
.dayc .page-head .back i, .dayc .page-head .back svg { width: 15px; height: 15px; }
.dayc .page-head h1 { display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 700; letter-spacing: -0.6px; color: var(--text-1); margin: 0; flex-wrap: wrap; }
.dayc .page-head h1 .dot { color: var(--text-3); font-weight: 500; }
.dayc .page-head .subtitle { font-size: 14px; color: var(--text-3); margin-top: 6px; max-width: 680px; line-height: 1.5; }
.dayc .page-head form { margin: 0; }
.dayc .btn-del { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--red); background: rgba(215,0,21,0.07); border: 1px solid rgba(215,0,21,0.25); border-radius: 11px; padding: 10px 15px; cursor: pointer; }
.dayc .btn-del:hover { background: rgba(215,0,21,0.12); }
.dayc .btn-del i, .dayc .btn-del svg { width: 15px; height: 15px; }
/* «Память AI / учить системе» → янтарный блок как в референсе (.mem) */
.dayc .tcp-learning-block { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.dayc .tcp-learning-title { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--amber, #C2701C); margin-bottom: 6px; }
.dayc .tcp-learning-title i, .dayc .tcp-learning-title svg { width: 17px; height: 17px; color: var(--amber, #C2701C); }
.dayc .tcp-learning-hint { font-size: 13px; color: var(--text-3); line-height: 1.5; margin-bottom: 12px; }
.dayc .tcp-learning-block textarea.tcp-input { background: #FFFBF6; border: 1px solid rgba(194,112,28,0.25); border-radius: 13px; }
html[data-theme="dark"] .dayc .tcp-learning-block textarea.tcp-input { background: rgba(194,112,28,0.06); border-color: rgba(194,112,28,0.35); }
.dayc .tcp-learning-block .tcp-btn { color: var(--amber, #C2701C); background: rgba(194,112,28,0.08); border: 1px solid rgba(194,112,28,0.3); }
.dayc .tcp-learning-block .tcp-btn:hover { background: rgba(194,112,28,0.14); }
.dayc .tcp-learning-block .tcp-btn i, .dayc .tcp-learning-block .tcp-btn svg { color: var(--amber, #C2701C); }
/* Адаптив: на узких экранах фикс-сетка (832px) не влезает → карточку делаем
   горизонтально-прокручиваемой, таблица не сплющивается и не ломается.
   justify-content:normal убирает space-between (на узком распределять нечего). */
@media (max-width: 980px) {
  .sdx.skx .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sdx.skx .tbl-head, .sdx.skx .tbl-row { justify-content: normal; column-gap: 18px; min-width: 940px; }
}

/* ── Скипы: пустой onboarding-экран (1:1 по REFERENCE-skipy-empty) ── */
.skx .empty { flex: 1; background: var(--surface); border: 1px solid var(--sdx-bd); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; min-height: 520px; }
.skx .empty__ic { width: 78px; height: 78px; border-radius: 20px; background: var(--chip-2); display: flex; align-items: center; justify-content: center; color: #9B9BA0; margin-bottom: 22px; }
.skx .empty__ic i, .skx .empty__ic svg { width: 34px; height: 34px; }
.skx .empty__title { font-size: 23px; font-weight: 700; letter-spacing: -0.4px; color: var(--sdx-text); }
.skx .empty__sub { font-size: 15px; color: var(--sdx-muted); margin-top: 9px; text-align: center; max-width: 500px; line-height: 1.55; }
.skx .paths { display: flex; gap: 18px; margin-top: 30px; flex-wrap: wrap; justify-content: center; }
.skx .path-card { width: 268px; background: var(--surface-2); border: 1px solid var(--sdx-bd2); border-radius: 16px; padding: 20px; cursor: pointer; transition: border-color .15s, box-shadow .15s; text-decoration: none; display: block; }
.skx .path-card:hover { border-color: rgba(48,164,108,0.5); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.skx .path-card.is-blue:hover { border-color: rgba(42,111,219,0.5); }
.skx .path-card__ic { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.skx .path-card__ic.green { background: rgba(48,164,108,0.13); color: var(--sdx-green); }
.skx .path-card__ic.blue { background: rgba(42,111,219,0.13); color: var(--sdx-blue); }
.skx .path-card__ic i, .skx .path-card__ic svg { width: 23px; height: 23px; }
.skx .path-card__t { font-size: 16px; font-weight: 600; color: var(--sdx-text); }
.skx .path-card__d { font-size: 13px; color: var(--sdx-muted); margin-top: 5px; line-height: 1.5; }
.skx .why { display: flex; gap: 26px; margin-top: 34px; flex-wrap: wrap; justify-content: center; max-width: 720px; }
.skx .why-item { display: flex; align-items: center; gap: 10px; color: var(--sdx-text3); }
.skx .why-item i, .skx .why-item svg { width: 18px; height: 18px; color: var(--sdx-green); }
.skx .why-item span { font-size: 13px; }

@media (max-width: 1100px) {
  .sdx .kpis { grid-template-columns: repeat(2, 1fr); }
  .sdx .metrics-grid { grid-template-columns: repeat(3, 1fr); }
  .sdx .breakdowns { grid-template-columns: 1fr; }
  .sdx.skx .breakdowns { grid-template-columns: 1fr; }
  .sdx .tbl-head { display: none; }
  .sdx .tbl-row { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
}

/* ── Модалка «Импорт» на странице «Сделки» (чекбокс-тогл, без JS) ── */
.imp-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 300; }
.imp-modal { display: none; position: fixed; z-index: 301; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, 92vw); background: var(--bg-1); border: 1px solid var(--border-md); border-radius: 18px; padding: 24px; box-shadow: 0 24px 64px rgba(0,0,0,0.28); }
#tcpImportToggle:checked ~ .imp-overlay,
#tcpImportToggle:checked ~ .imp-modal { display: block; }
.imp-modal h3 { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--text-1); letter-spacing: -0.3px; }
.imp-modal .imp-sub { font-size: 13px; color: var(--text-2); margin: 0 0 18px; }
.imp-close { position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; border-radius: 8px; background: var(--bg-2); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2); }
.imp-close:hover { color: var(--text-1); }
.imp-tile { display: block; border: 1px solid var(--border-md); border-radius: 14px; padding: 16px; margin-bottom: 12px; text-decoration: none; color: var(--text-1); }
/* Видимый в ОБЕИХ темах hover (был var(--border-strong)=undef → фолбэк rgba(0,0,0,.18)
   невидим на тёмном фоне → казалось, что подсвечивается соседняя карточка). */
.imp-tile:hover { border-color: var(--text-3); background: var(--bg-2); }
.imp-row { display: flex; align-items: center; gap: 12px; }
.imp-ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
.imp-file { width: 100%; margin-top: 12px; font-size: 13px; color: var(--text-2); }

/* ============================================================
   Экран «Торговые счета» (UX) — дизайн-хэндофф REFERENCE-accounts-2.
   Классы дизайнера заскоуплены под .accx (изоляция от Bootstrap/tcp).
   Светлые литералы = эталон референса; дарк = наши токены.
   Сетка auto-fill (1 счёт или 20) · DD-полосы окрашиваются по близости к лимиту.
   ============================================================ */
.accx {
  --surface: #FFFFFF; --surface-2: #FAFAFB; --chip: #ECECEE; --chip-2: #F0F0F2;
  --acc-text: #1D1D1F; --acc-text3: #6E6E73; --acc-muted: #86868B; --acc-muted2: #A1A1A6;
  --acc-green: #30A46C; --acc-green-hover: #2b9460; --acc-green-dark: #1d8a4e;
  --acc-red: #D70015; --acc-amber: #C2701C;
  --acc-bd: rgba(0,0,0,0.07); --acc-bd-soft: rgba(0,0,0,0.06); --acc-bg: #F5F5F7;
  --acc-shadow-green: 0 2px 10px rgba(48,164,108,0.28);
  --r-c: 16px; --r-b: 11px;
  display: flex; flex-direction: column; gap: 18px;
}
html[data-theme="dark"] .accx {
  --surface: #141416; --surface-2: #1c1c1e; --chip: #1c1c1e; --chip-2: #1c1c1e;
  --acc-text: #F5F5F7; --acc-text3: #98989D; --acc-muted: #86868B; --acc-muted2: #6E6E73;
  --acc-green: #32D74B; --acc-green-hover: #5BDF6E; --acc-green-dark: #32D74B;
  --acc-red: #FF453A; --acc-amber: #FF9F0A;
  --acc-bd: rgba(255,255,255,0.07); --acc-bd-soft: rgba(255,255,255,0.06); --acc-bg: #08080A;
}
.accx .num { font-variant-numeric: tabular-nums; }

.accx .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.accx .page-head h1 { display: flex; align-items: center; gap: 11px; font-size: 30px; font-weight: 700; letter-spacing: -0.7px; margin: 0; color: var(--acc-text); }
.accx .page-head h1 i, .accx .page-head h1 svg { width: 27px; height: 27px; color: var(--green); }
.accx .page-head .subtitle { font-size: 14px; color: var(--acc-muted); margin-top: 6px; }
.accx .btn-primary { display: inline-flex; align-items: center; gap: 8px; height: 46px; font-size: 14px; font-weight: 600; color: #fff; background: var(--acc-green); border: none; border-radius: var(--r-b); padding: 0 19px; cursor: pointer; box-shadow: var(--acc-shadow-green); text-decoration: none; }
.accx .btn-primary:hover { background: var(--acc-green-hover); }
.accx .btn-primary i, .accx .btn-primary svg { width: 17px; height: 17px; }

/* aggregate summary */
.accx .summary { background: linear-gradient(105deg, rgba(48,164,108,0.10), rgba(48,164,108,0.02) 55%, var(--surface)); border: 1px solid rgba(48,164,108,0.18); border-radius: 18px; padding: 22px 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.accx .summary__lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc-text3); }
.accx .summary__total { font-size: 38px; font-weight: 700; letter-spacing: -1.4px; margin-top: 8px; color: var(--acc-text); }
.accx .summary__stats { display: flex; gap: 48px; flex-wrap: wrap; }
.accx .summary__stat { text-align: center; }
.accx .summary__stat .k { font-size: 12px; color: var(--acc-muted); }
.accx .summary__stat .v { font-size: 18px; font-weight: 700; margin-top: 4px; color: var(--acc-text); }
.accx .summary__stat .v.green { color: var(--acc-green); }
.accx .summary__stat .v.red { color: var(--acc-red); }

/* accounts grid — auto-fill: 1 счёт или 20, раскладка сама подстраивается */
.accx .accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.accx .acc { background: var(--surface); border: 1px solid var(--acc-bd); border-left: 3px solid var(--acc-green); border-radius: var(--r-c); padding: 20px 22px; display: flex; flex-direction: column; }
.accx .acc.inactive { border-left-color: #C7C7CC; }
.accx .acc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.accx .acc-name-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.accx .acc-name { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; color: var(--acc-text); }
.accx .acc-phase { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; border-radius: 6px; padding: 3px 8px; }
.accx .acc-phase.amber { color: var(--acc-amber); background: rgba(255,159,10,0.12); border: 1px solid rgba(255,159,10,0.4); }
.accx .acc-phase.green { color: var(--acc-green-dark); background: rgba(48,164,108,0.12); border: 1px solid rgba(48,164,108,0.4); }
.accx .acc-phase.grey { color: var(--acc-text3); background: var(--chip-2); border: 1px solid var(--acc-bd-soft); }
.accx .acc-broker { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--acc-muted2); margin-top: 6px; }
.accx .acc-actions { display: flex; gap: 7px; flex: none; }
.accx .acc-icon-btn { width: 32px; height: 32px; border-radius: 9px; background: var(--acc-bg); border: 1px solid var(--acc-bd); color: var(--acc-text3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.accx .acc-icon-btn:hover { background: var(--chip); }
.accx .acc-icon-btn.del:hover { background: rgba(215,0,21,0.1); color: var(--acc-red); }
.accx .acc-icon-btn i, .accx .acc-icon-btn svg { width: 15px; height: 15px; }
.accx .acc-bal { display: flex; align-items: baseline; gap: 11px; margin-top: 14px; flex-wrap: wrap; }
.accx .acc-bal .v { font-size: 25px; font-weight: 700; letter-spacing: -0.8px; color: var(--acc-text); }
.accx .acc-bal .pnl { font-size: 13px; font-weight: 600; }
.accx .acc-bal .pnl.green { color: var(--acc-green); }
.accx .acc-bal .pnl.red { color: var(--acc-red); }
.accx .acc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--acc-green); background: rgba(48,164,108,0.12); border-radius: 7px; padding: 4px 10px; margin-top: 9px; }
.accx .acc-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc-green); }
.accx .acc-status.off { color: var(--acc-muted2); background: var(--chip-2); }
.accx .acc-status.off .dot { background: var(--acc-muted2); }
.accx .acc-goal-head { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.accx .acc-goal-head .k { font-size: 12px; color: var(--acc-text3); }
.accx .acc-goal-head .v { font-size: 12px; font-weight: 600; color: var(--acc-text); }
.accx .track { height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; margin-top: 8px; }
.accx .track > i { display: block; height: 100%; background: var(--acc-green); }
.accx .acc-dd { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.accx .acc-dd .k { font-size: 12px; color: var(--acc-text3); margin-bottom: 5px; }
.accx .acc-dd .row { display: flex; align-items: baseline; gap: 5px; }
.accx .acc-dd .row .v { font-size: 15px; font-weight: 700; }
.accx .acc-dd .row .lim { font-size: 11px; color: var(--acc-muted2); }
.accx .track-sm { height: 4px; border-radius: 2px; background: var(--chip); overflow: hidden; margin-top: 7px; }
.accx .track-sm > i { display: block; height: 100%; }
.accx .dd-green { color: var(--acc-green); } .accx .dd-green-bg { background: var(--acc-green); }
.accx .dd-amber { color: var(--acc-amber); } .accx .dd-amber-bg { background: var(--acc-amber); }
.accx .dd-red { color: var(--acc-red); } .accx .dd-red-bg { background: var(--acc-red); }
.accx .acc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--acc-bd-soft); }
.accx .acc-foot .trades { font-size: 12.5px; color: var(--acc-muted); }
.accx .acc-foot a { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--acc-green); }
.accx .acc-foot a:hover { opacity: .8; }
.accx .acc-foot a i, .accx .acc-foot a svg { width: 14px; height: 14px; }

/* add card */
.accx .acc-add { background: transparent; border: 1.5px dashed var(--acc-bd); border-radius: var(--r-c); padding: 20px; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; color: var(--acc-muted); text-decoration: none; }
.accx .acc-add:hover { border-color: rgba(48,164,108,0.5); color: var(--acc-green); background: rgba(48,164,108,0.03); }
.accx .acc-add .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--chip-2); display: flex; align-items: center; justify-content: center; }
.accx .acc-add .ic i, .accx .acc-add .ic svg { width: 24px; height: 24px; }
.accx .acc-add span { font-size: 14px; font-weight: 600; }

/* empty state */
.accx .acc-empty { background: var(--surface); border: 1px solid var(--acc-bd); border-radius: var(--r-c); padding: 48px 24px; text-align: center; }
.accx .acc-empty .ic { font-size: 40px; color: var(--acc-muted2); margin-bottom: 12px; }
.accx .acc-empty .t { font-size: 16px; font-weight: 600; color: var(--acc-text); margin-bottom: 6px; }
.accx .acc-empty .h { font-size: 13px; color: var(--acc-muted); margin-bottom: 20px; }

/* ============================================================
   Форма счёта (новый / редактирование) — дизайн-хэндофф REFERENCE-edit-account.
   Скоуп .acf (изоляция от Bootstrap/tcp). Форма центрирована max-width:1180.
   Поля Тип/Фаза/Статус/Валюта/Проп-фирма — НАСТОЯЩИЕ <select> (chevron справа).
   Пресеты проп-фирм — бренд-бейджи с монограммой (.pmark; позже → <img class="pmark">).
   ============================================================ */
.acf {
  --surface: #FFFFFF; --surface-2: #FAFAFB; --chip: #ECECEE; --chip-2: #F0F0F2;
  --acf-text: #1D1D1F; --acf-text2: #3a3a3d; --acf-text3: #6E6E73; --acf-muted: #86868B; --acf-muted2: #A1A1A6; --acf-hint: #B0B0B5;
  --acf-green: #30A46C; --acf-green-hover: #2b9460; --acf-red: #D70015;
  --acf-bd: rgba(0,0,0,0.07); --acf-bd-soft: rgba(0,0,0,0.06); --acf-bd2: rgba(0,0,0,0.12);
  --acf-shadow-green: 0 2px 10px rgba(48,164,108,0.28);
  --r-card: 18px; --r-btn: 11px;
  max-width: 1180px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; gap: 18px;
}
html[data-theme="dark"] .acf {
  --surface: #141416; --surface-2: #1c1c1e; --chip: #1c1c1e; --chip-2: #1c1c1e;
  --acf-text: #F5F5F7; --acf-text2: #C7C7CC; --acf-text3: #98989D; --acf-muted: #86868B; --acf-muted2: #6E6E73; --acf-hint: #6E6E73;
  --acf-green: #32D74B; --acf-green-hover: #5BDF6E; --acf-red: #FF453A;
  --acf-bd: rgba(255,255,255,0.07); --acf-bd-soft: rgba(255,255,255,0.06); --acf-bd2: rgba(255,255,255,0.12);
}
.acf .num { font-variant-numeric: tabular-nums; }
.acf input, .acf textarea, .acf select { font-family: inherit; }
.acf input::placeholder, .acf textarea::placeholder { color: var(--acf-hint); }

.acf .back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--acf-muted); margin-bottom: 12px; text-decoration: none; }
.acf .back:hover { color: var(--acf-text); }
.acf .back i, .acf .back svg { width: 15px; height: 15px; }
.acf h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.7px; color: var(--acf-text); margin: 0; }
.acf .subtitle { font-size: 14px; color: var(--acf-muted); margin-top: 5px; }

/* presets card */
.acf .card { background: var(--surface); border: 1px solid var(--acf-bd); border-radius: var(--r-card); }
.acf .presets { padding: 20px 22px; }
.acf .presets__lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acf-muted2); margin-bottom: 12px; }
.acf .presets__row { display: flex; gap: 10px; flex-wrap: wrap; }
.acf .preset { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--acf-text2); background: var(--surface); border: 1px solid var(--acf-bd2); border-radius: 12px; padding: 10px 15px; cursor: pointer; text-decoration: none; }
.acf .preset:hover { background: var(--surface-2); }
.acf .preset.is-active { color: var(--acf-text); background: rgba(48,164,108,0.06); border-color: rgba(48,164,108,0.5); }
.acf .pmark { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 10.5px; letter-spacing: -0.3px; flex: none; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); object-fit: cover; }
.acf .pmark.the5ers { background: linear-gradient(160deg, #34b27a, #1d8a4e); }
.acf .pmark.ftmo { background: #13294B; }
.acf .pmark.fundednext { background: #F59E0B; }
.acf .pmark.fundingpips { background: #6D5AE6; }
.acf .pmark.myforexfunds { background: #0EA5A5; }
.acf .pmark.generic { background: #5a5a60; }
.acf .pmark.custom { background: var(--chip); color: var(--acf-text3); box-shadow: none; }

/* form */
.acf .form { padding: 24px 26px; }
.acf .grid { display: grid; gap: 18px; }
.acf .g-4 { grid-template-columns: 2fr 1fr 1fr 1fr; }
.acf .g-2a { grid-template-columns: 2fr 1fr; }
.acf .g-2 { grid-template-columns: 1fr 1fr; }
.acf .g-3 { grid-template-columns: 1fr 1fr 1fr; }
.acf .mt20 { margin-top: 20px; }
.acf label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--acf-text); }
.acf label .req { color: var(--acf-red); }
.acf .field { position: relative; }
.acf .input { width: 100%; height: 46px; background: var(--surface); border: 1px solid var(--acf-bd2); border-radius: var(--r-btn); padding: 0 14px; color: var(--acf-text); font-size: 14px; outline: none; }
.acf .input:focus { border-color: rgba(48,164,108,0.55); }
.acf .input.bold { font-weight: 600; }
.acf select.input { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; background-image: none; }
.acf .input.has-chevron { padding-right: 38px; }
.acf .chevron { width: 16px; height: 16px; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: #9B9BA0; pointer-events: none; }
.acf .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acf-green); position: absolute; right: 32px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.acf .status-dot.amber { background: #F59E0B; } .acf .status-dot.red { background: var(--acf-red); } .acf .status-dot.blue { background: #2A6FDB; }
.acf .input.has-status { padding-right: 48px; }
.acf .prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--acf-muted); font-size: 14px; pointer-events: none; }
.acf .input.has-prefix { padding-left: 26px; }
.acf .suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--acf-muted); font-size: 14px; pointer-events: none; }
.acf .input.has-suffix { padding-right: 34px; }
.acf .help { font-size: 12px; color: var(--acf-muted); margin-top: 7px; }

/* live summary (лимиты в деньгах) */
.acf .summary { display: flex; align-items: center; gap: 14px; background: var(--surface-2); border: 1px solid var(--acf-bd-soft); border-radius: 13px; padding: 13px 16px; margin-top: 20px; flex-wrap: wrap; }
.acf .summary > i, .acf .summary > svg { width: 17px; height: 17px; color: var(--acf-muted); flex: none; }
.acf .summary .txt { font-size: 13px; color: var(--acf-text2); }
.acf .summary .txt b { color: var(--acf-text); }
.acf .lim { font-size: 12.5px; font-weight: 600; color: var(--acf-text2); background: var(--surface); border: 1px solid var(--acf-bd-soft); border-radius: 8px; padding: 5px 11px; }
.acf .lim.goal { color: var(--acf-green); background: rgba(48,164,108,0.1); border-color: rgba(48,164,108,0.25); }

.acf .ta { width: 100%; min-height: 96px; background: var(--surface); border: 1px solid var(--acf-bd2); border-radius: 12px; padding: 13px 14px; color: var(--acf-text); font-size: 14px; line-height: 1.55; outline: none; resize: vertical; }
.acf .ta:focus { border-color: rgba(48,164,108,0.55); }

.acf .actions { display: flex; gap: 11px; margin-top: 22px; flex-wrap: wrap; }
.acf .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; border-radius: var(--r-btn); cursor: pointer; text-decoration: none; border: none; }
.acf .btn-primary { color: #fff; background: var(--acf-green); padding: 12px 22px; box-shadow: var(--acf-shadow-green); }
.acf .btn-primary:hover { background: var(--acf-green-hover); }
.acf .btn-primary i, .acf .btn-primary svg { width: 17px; height: 17px; }
.acf .btn-ghost { color: var(--acf-text); background: var(--surface); border: 1px solid var(--acf-bd2); padding: 12px 22px; }
.acf .btn-ghost:hover { background: var(--surface-2); }

@media (max-width: 760px) {
  .acf .g-4, .acf .g-2a, .acf .g-2, .acf .g-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Экран «Insights» — дизайн-хэндофф REFERENCE-insights.
   Скоуп .ins (изоляция от Bootstrap/tcp). Win Rate + AI-анализ (заполнено) +
   Pattern Finder (3 карточки). loading/empty — отдельные состояния.
   ============================================================ */
.ins {
  --surface: #FFFFFF; --surface-2: #FAFAFB; --chip-2: #F0F0F2;
  --ins-text: #1D1D1F; --ins-text2: #3a3a3d; --ins-text3: #6E6E73; --ins-muted: #86868B; --ins-muted2: #A1A1A6; --ins-hint: #B0B0B5;
  --ins-green: #30A46C; --ins-green-hover: #2b9460; --ins-red: #D70015; --ins-amber: #C2701C; --ins-blue: #2A6FDB;
  --ins-bd: rgba(0,0,0,0.07); --ins-bd-soft: rgba(0,0,0,0.06); --ins-bd2: rgba(0,0,0,0.10);
  --ins-shadow-green: 0 2px 10px rgba(48,164,108,0.28);
  --r-card: 18px; --r-btn: 11px;
  display: flex; flex-direction: column; gap: 18px; max-width: 1360px; margin: 0 auto; width: 100%;
}
html[data-theme="dark"] .ins {
  --surface: #141416; --surface-2: #1c1c1e; --chip-2: #1c1c1e;
  --ins-text: #F5F5F7; --ins-text2: #C7C7CC; --ins-text3: #98989D; --ins-muted: #86868B; --ins-muted2: #6E6E73; --ins-hint: #6E6E73;
  --ins-green: #32D74B; --ins-green-hover: #5BDF6E; --ins-red: #FF453A; --ins-amber: #FF9F0A; --ins-blue: #4C8BF5;
  --ins-bd: rgba(255,255,255,0.07); --ins-bd-soft: rgba(255,255,255,0.06); --ins-bd2: rgba(255,255,255,0.10);
}
.ins .num { font-variant-numeric: tabular-nums; }
.ins h1 { display: flex; align-items: center; gap: 11px; font-size: 30px; font-weight: 700; letter-spacing: -0.7px; color: var(--ins-text); margin: 0; }
.ins h1 i, .ins h1 svg { width: 26px; height: 26px; color: var(--sbBlue); }
.ins .subtitle { font-size: 14px; color: var(--ins-muted); margin-top: 6px; }

/* period filters */
.ins .periods { display: flex; gap: 9px; flex-wrap: wrap; }
.ins .period { font-size: 13.5px; font-weight: 600; color: var(--ins-text2); background: var(--surface); border: 1px solid var(--ins-bd2); border-radius: var(--r-btn); padding: 9px 17px; cursor: pointer; text-decoration: none; }
.ins .period:hover { background: var(--surface-2); }
.ins .period.is-active { color: #fff; background: var(--ins-green); border-color: var(--ins-green); }

/* tabs */
.ins .tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--ins-bd2); }
.ins .tab { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; color: var(--ins-muted); background: transparent; border: none; padding: 0 2px 12px; cursor: pointer; text-decoration: none; }
.ins .tab:hover { color: var(--ins-text); }
.ins .tab.is-active { color: var(--ins-text); font-weight: 600; border-bottom: 2px solid var(--ins-green); margin-bottom: -1px; }
.ins .tab i, .ins .tab svg { width: 17px; height: 17px; }
.ins .tab .cnt { font-size: 12px; font-weight: 700; border-radius: 7px; padding: 2px 8px; }
.ins .tab.is-active .cnt { color: var(--ins-green); background: rgba(48,164,108,0.12); }
.ins .tab .cnt.grey { color: var(--ins-muted); background: var(--chip-2); }

/* cards & cols */
.ins .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.ins .card { background: var(--surface); border: 1px solid var(--ins-bd); border-radius: var(--r-card); }
.ins .card--pad { padding: 22px 24px; }
.ins .card__title { font-size: 16px; font-weight: 600; color: var(--ins-text); }

/* win rate */
.ins .wr-head { display: flex; align-items: center; justify-content: space-between; }
.ins .wr-badge { font-size: 12px; font-weight: 700; color: var(--ins-green); background: rgba(48,164,108,0.12); border-radius: 8px; padding: 5px 10px; }
.ins .wr-big { font-size: 52px; font-weight: 700; letter-spacing: -2px; margin: 14px 0 6px; color: var(--ins-text); }
.ins .wr-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--ins-bd-soft); }
.ins .wr-row .k { font-size: 14px; color: var(--ins-muted); }
.ins .wr-row .v { font-size: 15px; font-weight: 700; }
.ins .v-green { color: var(--ins-green); } .ins .v-red { color: var(--ins-red); } .ins .v-amber { color: var(--ins-amber); } .ins .v-grey { color: var(--ins-muted2); } .ins .v-dark { color: var(--ins-text); }

/* AI analysis */
.ins .ai-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 18px 22px 16px; border-bottom: 1px solid var(--ins-bd-soft); }
.ins .ai-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--ins-green); background: rgba(48,164,108,0.12); border-radius: 8px; padding: 5px 10px; }
.ins .ai-badge i, .ins .ai-badge svg { width: 13px; height: 13px; }
.ins .ai-body { padding: 20px 22px; }
.ins .verdict { display: flex; align-items: center; gap: 13px; }
.ins .verdict__ic { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex: none; background: rgba(215,0,21,0.1); color: var(--ins-red); }
.ins .verdict__ic.amber { background: rgba(255,159,10,0.12); color: var(--ins-amber); }
.ins .verdict__ic.green { background: rgba(48,164,108,0.12); color: var(--ins-green); }
.ins .verdict__ic i, .ins .verdict__ic svg { width: 22px; height: 22px; }
.ins .verdict__t { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; color: var(--ins-text); }
.ins .verdict__s { font-size: 13px; color: var(--ins-muted); margin-top: 2px; }
.ins .ai-lead { font-size: 14.5px; color: var(--ins-text2); line-height: 1.6; margin-top: 16px; }
.ins .ai-lead b { color: var(--ins-text); font-weight: 600; }
.ins .ai-sec-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin: 18px 0 9px; }
.ins .checks { margin-top: 12px; display: flex; flex-direction: column; gap: 11px; }
.ins .check { display: flex; align-items: flex-start; gap: 11px; }
.ins .check i, .ins .check svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ins .check.red i, .ins .check.red svg { color: var(--ins-red); }
.ins .check.amber i, .ins .check.amber svg { color: var(--ins-amber); }
.ins .check.green i, .ins .check.green svg { color: var(--ins-green); }
.ins .check.blue i, .ins .check.blue svg { color: var(--ins-blue); }
.ins .check span { font-size: 14px; color: var(--ins-text2); line-height: 1.5; }
.ins .reco { display: flex; gap: 12px; background: linear-gradient(100deg, rgba(48,164,108,0.08), rgba(48,164,108,0.02) 60%, transparent); border: 1px solid rgba(48,164,108,0.2); border-radius: 14px; padding: 15px 16px; margin-top: 18px; }
.ins .reco i, .ins .reco svg { width: 18px; height: 18px; color: var(--ins-green); flex: none; margin-top: 1px; }
.ins .reco div { font-size: 13.5px; color: var(--ins-text2); line-height: 1.55; }
.ins .reco b { font-weight: 600; color: var(--ins-text); }
.ins .ai-summary { background: var(--surface-2); border: 1px solid var(--ins-bd-soft); border-radius: 12px; padding: 12px 14px; margin-top: 16px; }
.ins .ai-summary .lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ins-text3); margin-bottom: 6px; }
.ins .ai-summary .txt { font-size: 13px; color: var(--ins-text2); line-height: 1.6; }

/* AI loading / empty states */
.ins .ai-loading { text-align: center; padding: 40px 20px; }
.ins .ai-empty { text-align: center; padding: 44px 22px; }
.ins .ai-empty i, .ins .ai-empty svg { width: 34px; height: 34px; color: var(--ins-muted2); }
.ins .ai-empty .t { font-size: 15px; font-weight: 600; color: var(--ins-text); margin-top: 12px; }
.ins .ai-empty .s { font-size: 13px; color: var(--ins-muted); margin-top: 5px; }
.ins .spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ins-bd2); border-top-color: var(--ins-green); animation: ins-spin 0.8s linear infinite; margin: 0 auto 14px; }
@keyframes ins-spin { to { transform: rotate(360deg); } }

/* generic AI sub-list (skips tab & lists) */
.ins .ai-line { font-size: 13.5px; color: var(--ins-text2); padding: 5px 0; border-bottom: 1px solid var(--ins-bd-soft); line-height: 1.5; }
.ins .ai-none { font-size: 13px; color: var(--ins-text3); }
.ins .bar-row { margin-bottom: 10px; }
.ins .bar-row .head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--ins-text2); margin-bottom: 4px; }
.ins .bar-track { background: var(--chip-2); height: 6px; border-radius: 3px; overflow: hidden; }
.ins .bar-track > i { display: block; height: 100%; }
.ins .kv { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--ins-bd-soft); font-size: 13.5px; }
.ins .kv .k { color: var(--ins-muted); } .ins .kv .v { font-weight: 700; color: var(--ins-text); }

/* refresh button */
.ins .btn-mini { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ins-text2); background: var(--surface); border: 1px solid var(--ins-bd2); border-radius: var(--r-btn); padding: 8px 13px; cursor: pointer; text-decoration: none; }
.ins .btn-mini:hover { background: var(--surface-2); }
.ins .btn-mini i, .ins .btn-mini svg { width: 14px; height: 14px; }

/* pattern finder */
.ins .pf-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ins .pf-title-row { display: flex; align-items: center; gap: 11px; }
.ins .pf-ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(48,164,108,0.12); color: var(--ins-green); display: flex; align-items: center; justify-content: center; flex: none; }
.ins .pf-ic i, .ins .pf-ic svg { width: 18px; height: 18px; }
.ins .pf-desc { font-size: 13px; color: var(--ins-muted); margin-top: 2px; }
.ins .btn-find { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #fff; background: var(--ins-green); border: none; border-radius: var(--r-btn); padding: 11px 18px; cursor: pointer; box-shadow: var(--ins-shadow-green); }
.ins .btn-find:hover { background: var(--ins-green-hover); }
.ins .btn-find:disabled { opacity: 0.65; cursor: default; }
.ins .btn-find i, .ins .btn-find svg { width: 16px; height: 16px; }
.ins .pf-summary { font-size: 13.5px; color: var(--ins-text2); background: var(--surface-2); border: 1px solid var(--ins-bd-soft); border-radius: 12px; padding: 12px 14px; line-height: 1.55; margin-top: 18px; }
.ins .pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.ins .pf-card { background: var(--surface-2); border: 1px solid var(--ins-bd); border-radius: 14px; padding: 18px; }
.ins .pf-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ins .pf-card-ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
.ins .pf-card-ic i, .ins .pf-card-ic svg { width: 16px; height: 16px; }
.ins .pf-freq { font-size: 12px; font-weight: 700; border-radius: 7px; padding: 4px 9px; }
.ins .pf-card-title { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ins-text); }
.ins .pf-card-desc { font-size: 13px; color: var(--ins-muted); line-height: 1.5; margin-top: 7px; }
.ins .pf-card-reco { font-size: 12.5px; color: var(--ins-text2); line-height: 1.45; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ins-bd-soft); }
.ins .pf-card-reco b { color: var(--ins-green); font-weight: 700; }
.ins .ic-red { color: var(--ins-red); background: rgba(215,0,21,0.1); }
.ins .ic-amber { color: var(--ins-amber); background: rgba(255,159,10,0.12); }
.ins .ic-blue { color: var(--ins-blue); background: rgba(42,111,219,0.1); }
.ins .pf-alert { font-size: 13px; color: var(--ins-amber); background: rgba(255,159,10,0.10); border: 1px solid rgba(255,159,10,0.28); border-radius: 12px; padding: 12px 14px; margin-top: 16px; }

@media (max-width: 900px) {
  .ins .cols { grid-template-columns: 1fr; }
  .ins .pf-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Экран «Бэктест» — дизайн-хэндофф REFERENCE-backtest (вкладка «Мой бэктест»).
   Скоуп .bkt (изоляция от Bootstrap/tcp). Порядок: сводные метрики →
   сохранённый бэктест+сравнение+AI → CSV-импорт → форма → «Сделки из импорта».
   AI-блоки — заполненное состояние. Формы/имена полей/JS-хуки не тронуты.
   ============================================================ */
.bkt {
  --surface: #FFFFFF; --surface-2: #FAFAFB; --chip: #ECECEE; --chip-2: #F0F0F2;
  --bkt-text: #1D1D1F; --bkt-text2: #3a3a3d; --bkt-text3: #6E6E73; --bkt-muted: #86868B; --bkt-muted2: #A1A1A6; --bkt-hint: #B0B0B5;
  --bkt-green: #30A46C; --bkt-green-hover: #2b9460; --bkt-red: #D70015; --bkt-amber: #C2701C; --bkt-blue: #2A6FDB;
  --bkt-bd: rgba(0,0,0,0.07); --bkt-bd-soft: rgba(0,0,0,0.06); --bkt-bd2: rgba(0,0,0,0.12);
  --bkt-shadow-green: 0 2px 10px rgba(48,164,108,0.28);
  --r-card: 18px; --r-btn: 11px;
  max-width: 1440px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; gap: 18px;
}
html[data-theme="dark"] .bkt {
  --surface: #141416; --surface-2: #1c1c1e; --chip: #1c1c1e; --chip-2: #1c1c1e;
  --bkt-text: #F5F5F7; --bkt-text2: #C7C7CC; --bkt-text3: #98989D; --bkt-muted: #86868B; --bkt-muted2: #6E6E73; --bkt-hint: #6E6E73;
  --bkt-green: #32D74B; --bkt-green-hover: #5BDF6E; --bkt-red: #FF453A; --bkt-amber: #FF9F0A; --bkt-blue: #4C8BF5;
  --bkt-bd: rgba(255,255,255,0.07); --bkt-bd-soft: rgba(255,255,255,0.06); --bkt-bd2: rgba(255,255,255,0.12);
}
.bkt .num { font-variant-numeric: tabular-nums; }
.bkt h1 { display: flex; align-items: center; gap: 11px; font-size: 30px; font-weight: 700; letter-spacing: -0.7px; color: var(--bkt-text); margin: 0; }
.bkt h1 i, .bkt h1 svg { width: 27px; height: 27px; color: var(--sbBlue); }
.bkt .subtitle { font-size: 14px; color: var(--bkt-muted); margin-top: 6px; }

/* tabs */
.bkt .tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--bkt-bd2); }
.bkt .tab { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; color: var(--bkt-muted); background: transparent; border: none; padding: 0 2px 12px; cursor: pointer; text-decoration: none; }
.bkt .tab:hover { color: var(--bkt-text); }
.bkt .tab.is-active { color: var(--bkt-text); font-weight: 600; border-bottom: 2px solid var(--bkt-green); margin-bottom: -1px; }
.bkt .tab i, .bkt .tab svg { width: 17px; height: 17px; }

/* cards */
.bkt .card { background: var(--surface); border: 1px solid var(--bkt-bd); border-radius: var(--r-card); }
.bkt .card--pad { padding: 22px 24px; }
.bkt .card__title { font-size: 16px; font-weight: 600; color: var(--bkt-text); }
.bkt .card__title .muted { color: var(--bkt-muted); font-weight: 400; }

/* summary — переопределяем классы макета _metrics_block под референс */
.bkt .tcp-stat-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 18px 16px; }
.bkt .tcp-stat-grid:not(.tcp-stat-grid-head) { text-align: center; }
/* шрифты метрик под эталон REFERENCE-backtest (.mgrid .k=12px / .v=19px); денежный ряд НЕ трогаем */
.bkt .tcp-stat-grid:not(.tcp-stat-grid-head) .tcp-stat-label { font-size: 12px; }
.bkt .tcp-stat-grid:not(.tcp-stat-grid-head) .tcp-stat-value { font-size: 19px; }
/* деньги-ряд: 3 колонки на всю ширину + центр (compound-селектор бьёт 5-кол .tcp-stat-grid) */
.bkt .tcp-stat-grid.tcp-stat-grid-head { grid-template-columns: repeat(3,1fr); column-gap: 16px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.14); }
/* линии-разделители чуть заметнее (денежный ряд + перед кривой доходности), обе темы */
.bkt .bt-eqsep { border-top: 1px solid rgba(0,0,0,0.14); }
html[data-theme="dark"] .bkt .tcp-stat-grid.tcp-stat-grid-head { border-bottom-color: rgba(255,255,255,0.16); }
html[data-theme="dark"] .bkt .bt-eqsep { border-top-color: rgba(255,255,255,0.16); }
.bkt .tcp-bd-row { display: grid; grid-template-columns: 1fr 72px 82px 72px; gap: 0 10px; align-items: center; }
/* значения (и заголовки) колонок Сделок/Винрейт/R — по центру трека */
.bkt .tcp-bd-num, .bkt .tcp-bd-num.r { text-align: center; }
.bkt .tcp-card-title .muted { color: var(--bkt-muted); font-weight: 400; }

/* Edge verdict — блок вердикта эджа (верх «Мой бэктест») */
.bkt .edge-verdict { background: linear-gradient(130deg, rgba(48,164,108,0.09), rgba(48,164,108,0.02) 55%, var(--surface)); border: 1px solid rgba(48,164,108,0.28); border-radius: 20px; padding: 22px 24px; }
.bkt .edge-verdict.neg { background: linear-gradient(130deg, rgba(215,0,21,0.08), rgba(215,0,21,0.02) 55%, var(--surface)); border-color: rgba(215,0,21,0.26); }
.bkt .edge-verdict__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bkt .edge-verdict__title-row { display: flex; align-items: center; gap: 14px; }
.bkt .edge-verdict__ic { width: 46px; height: 46px; border-radius: 13px; background: rgba(48,164,108,0.14); color: var(--bkt-green); display: flex; align-items: center; justify-content: center; flex: none; }
.bkt .edge-verdict.neg .edge-verdict__ic { background: rgba(215,0,21,0.1); color: var(--bkt-red); }
.bkt .edge-verdict__ic i, .bkt .edge-verdict__ic svg { width: 24px; height: 24px; }
.bkt .edge-verdict__title { font-size: 19px; font-weight: 700; letter-spacing: -0.4px; color: var(--bkt-text); }
.bkt .edge-verdict__sub { font-size: 14px; color: var(--bkt-text3); margin-top: 3px; }
.bkt .edge-verdict__badge { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: #fff; background: var(--bkt-green); border-radius: 9px; padding: 8px 15px; white-space: nowrap; }
.bkt .edge-verdict.neg .edge-verdict__badge { background: var(--bkt-red); }
.bkt .edge-verdict__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 20px; }
.bkt .edge-metric { background: rgba(255,255,255,0.7); border: 1px solid rgba(0,0,0,0.05); border-radius: 14px; padding: 16px 18px; }
html[data-theme="dark"] .bkt .edge-metric { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
.bkt .edge-metric__k { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bkt-muted); margin-bottom: 10px; }
.bkt .edge-metric__v { font-size: 28px; font-weight: 700; letter-spacing: -0.8px; font-variant-numeric: tabular-nums; color: var(--bkt-text); }
.bkt .edge-metric__v.green { color: var(--bkt-green); }
.bkt .edge-metric__v.dark { color: var(--bkt-text); }
.bkt .edge-metric__s { font-size: 12.5px; color: var(--bkt-muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .bkt .edge-verdict__grid { grid-template-columns: repeat(2,1fr); } }

/* saved backtest card */
.bkt .bt-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bkt .bt-tag { font-size: 12px; font-weight: 700; color: var(--bkt-text2); background: var(--chip-2); border-radius: 8px; padding: 5px 11px; }
.bkt .bt-date { font-size: 13px; color: var(--bkt-muted); }
.bkt .bt-actions { display: flex; gap: 9px; }
.bkt .btn-refresh { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--bkt-text); background: var(--surface); border: 1px solid var(--bkt-bd2); border-radius: 10px; padding: 9px 14px; cursor: pointer; }
.bkt .btn-refresh:hover { background: var(--surface-2); }
.bkt .btn-refresh i, .bkt .btn-refresh svg { width: 15px; height: 15px; color: var(--bkt-green); }
.bkt .btn-del { width: 36px; height: 36px; border-radius: 10px; background: var(--surface); border: 1px solid rgba(215,0,21,0.25); color: var(--bkt-red); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bkt .btn-del:hover { background: rgba(215,0,21,0.08); }
.bkt .btn-del i, .bkt .btn-del svg { width: 15px; height: 15px; }
.bkt .bt-metrics { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; margin-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--bkt-bd); }
.bkt .bt-metrics .k, .bkt .cmp .k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bkt-muted2); margin-bottom: 7px; }
.bkt .bt-metrics .v { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; color: var(--bkt-text); }
.bkt .bt-metrics .v.green, .bkt .cmp .v.green { color: var(--bkt-green); }
.bkt .bt-metrics .v.red, .bkt .cmp .v.red { color: var(--bkt-red); }
.bkt .bt-metrics .sub, .bkt .cmp .sub { font-size: 11px; color: var(--bkt-muted); margin-top: 3px; }
.bkt .cmp-title { display: flex; align-items: center; gap: 9px; margin: 18px 0 14px; }
.bkt .cmp-title i, .bkt .cmp-title svg { width: 17px; height: 17px; color: var(--bkt-text3); }
.bkt .cmp-title span { font-size: 15px; font-weight: 600; color: var(--bkt-text); }
.bkt .cmp { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
.bkt .cmp .v { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; color: var(--bkt-text); }
.bkt .cmp .v.amber { color: var(--bkt-amber); } .bkt .cmp .v.grey { color: var(--bkt-muted2); }

/* AI verdict */
.bkt .ai { background: var(--surface-2); border: 1px solid var(--bkt-bd); border-radius: 16px; padding: 20px 22px; margin-top: 20px; }
.bkt .ai-verdict { display: flex; align-items: center; gap: 13px; }
.bkt .ai-ic { width: 44px; height: 44px; border-radius: 13px; background: rgba(215,0,21,0.1); color: var(--bkt-red); display: flex; align-items: center; justify-content: center; flex: none; }
.bkt .ai-ic.green { background: rgba(48,164,108,0.12); color: var(--bkt-green); }
.bkt .ai-ic.amber { background: rgba(255,159,10,0.12); color: var(--bkt-amber); }
.bkt .ai-ic i, .bkt .ai-ic svg { width: 22px; height: 22px; }
.bkt .ai-t { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bkt .ai-t b { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; color: var(--bkt-text); }
.bkt .ai-badge { font-size: 11px; font-weight: 700; color: var(--bkt-red); background: rgba(215,0,21,0.1); border-radius: 7px; padding: 3px 9px; }
.bkt .ai-badge.green { color: var(--bkt-green); background: rgba(48,164,108,0.12); }
.bkt .ai-s { font-size: 13px; color: var(--bkt-muted); margin-top: 2px; }
.bkt .ai-lead { font-size: 14.5px; color: var(--bkt-text2); line-height: 1.6; margin-top: 16px; }
.bkt .ai-lead b { color: var(--bkt-text); font-weight: 600; }
.bkt .ai-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bkt-muted2); margin: 18px 0 10px; }
.bkt .diffs { display: flex; flex-direction: column; gap: 11px; }
.bkt .diff { display: flex; align-items: flex-start; gap: 11px; }
.bkt .diff i, .bkt .diff svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.bkt .diff.red i, .bkt .diff.red svg { color: var(--bkt-red); }
.bkt .diff.amber i, .bkt .diff.amber svg { color: var(--bkt-amber); }
.bkt .diff.green i, .bkt .diff.green svg { color: var(--bkt-green); }
.bkt .diff span { font-size: 14px; color: var(--bkt-text2); line-height: 1.5; }
.bkt .diff span b { color: var(--bkt-text); font-weight: 600; }
.bkt .reco { display: flex; gap: 12px; background: linear-gradient(100deg, rgba(48,164,108,0.08), rgba(48,164,108,0.02) 60%, transparent); border: 1px solid rgba(48,164,108,0.2); border-radius: 14px; padding: 15px 16px; margin-top: 18px; }
.bkt .reco i, .bkt .reco svg { width: 18px; height: 18px; color: var(--bkt-green); flex: none; margin-top: 1px; }
.bkt .reco div { font-size: 13.5px; color: var(--bkt-text2); line-height: 1.55; }
.bkt .reco b { font-weight: 600; color: var(--bkt-text); }

/* section header with icon */
.bkt .sec-ic-head { display: flex; align-items: center; gap: 10px; }
.bkt .sec-ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(48,164,108,0.12); color: var(--bkt-green); display: flex; align-items: center; justify-content: center; flex: none; }
.bkt .sec-ic i, .bkt .sec-ic svg { width: 17px; height: 17px; }
.bkt .sec-desc { font-size: 13.5px; color: var(--bkt-muted); line-height: 1.5; margin: 8px 0 12px; }
.bkt .sec-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--bkt-green); cursor: pointer; }
.bkt .sec-link i, .bkt .sec-link svg { width: 14px; height: 14px; }
.bkt .sec-link > summary { list-style: none; }
.bkt .sec-link > summary::-webkit-details-marker { display: none; }

/* form fields */
.bkt .form-head { display: flex; align-items: center; gap: 9px; }
.bkt .form-head i, .bkt .form-head svg { width: 19px; height: 19px; color: var(--bkt-text); }
.bkt .form-title { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; color: var(--bkt-text); }
.bkt .g-2-1-1 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 18px; margin-top: 20px; }
.bkt .g-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.bkt .g-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.bkt .g-3 + .g-3 { margin-top: 18px; }
.bkt .sec-title { font-size: 15px; font-weight: 600; margin: 24px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--bkt-bd); color: var(--bkt-text); }
.bkt label.fld { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--bkt-text); }
.bkt label.fld.sm { font-size: 12.5px; color: var(--bkt-text3); margin-bottom: 7px; }
.bkt .req { color: var(--bkt-red); }
.bkt .field { position: relative; }
.bkt .in { width: 100%; height: 46px; background: var(--surface-2); border: 1px solid var(--bkt-bd2); border-radius: 11px; padding: 0 14px; color: var(--bkt-text); font-size: 14px; outline: none; }
.bkt .in:focus { border-color: rgba(48,164,108,0.55); }
.bkt .in.bold { font-weight: 600; }
.bkt select.in { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; padding-right: 38px; }
.bkt .chevron { width: 16px; height: 16px; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: #9B9BA0; pointer-events: none; }
.bkt .in-sm { width: 100%; height: 44px; background: var(--surface); border: 1px solid var(--bkt-bd2); border-radius: 10px; padding: 0 13px; color: var(--bkt-text); font-size: 14px; outline: none; }
.bkt .hint { font-size: 12px; color: var(--bkt-muted); margin-top: 7px; }
.bkt .setup-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.bkt .setup-tile { background: var(--surface-2); border: 1px solid var(--bkt-bd2); border-radius: 14px; padding: 16px 18px; }
.bkt .setup-tile .name { font-size: 14px; font-weight: 700; margin-bottom: 14px; color: var(--bkt-text); }
.bkt .setup-tile .in-sm { margin-bottom: 14px; }
.bkt .setup-tile .in-sm:last-child { margin-bottom: 0; }
.bkt .ta { width: 100%; min-height: 96px; background: var(--surface-2); border: 1px solid var(--bkt-bd2); border-radius: 12px; padding: 13px 14px; color: var(--bkt-text); font-size: 14px; line-height: 1.55; outline: none; resize: vertical; }
.bkt .ta:focus { border-color: rgba(48,164,108,0.55); }
.bkt .btn-save, .bkt .btn-up { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #fff; background: var(--bkt-green); border: none; border-radius: 11px; padding: 12px 22px; cursor: pointer; box-shadow: var(--bkt-shadow-green); }
.bkt .btn-save:hover, .bkt .btn-up:hover { background: var(--bkt-green-hover); }
.bkt .btn-save:disabled { opacity: 0.65; cursor: default; }
.bkt .btn-save i, .bkt .btn-save svg, .bkt .btn-up i, .bkt .btn-up svg { width: 17px; height: 17px; }

/* CSV file input (native, restyled) */
.bkt .csv-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.bkt .csv-form input[type=file] { flex: 1; min-width: 260px; max-width: 440px; height: 46px; background: var(--surface-2); border: 1px solid var(--bkt-bd2); border-radius: 11px; padding: 11px 12px; color: var(--bkt-text2); font-size: 13px; }
.bkt .csv-form input[type=file]::file-selector-button { font-size: 13px; font-weight: 600; color: var(--bkt-text); background: var(--chip); border: none; border-radius: 8px; padding: 7px 13px; margin-right: 12px; cursor: pointer; }
.bkt .import-banner { border: 1px solid var(--bkt-green-border, rgba(48,164,108,0.3)); background: rgba(48,164,108,0.06); border-radius: 14px; padding: 14px 16px; }

/* Сделки из импорта */
.bkt .trades-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bkt .tcount { font-size: 12px; font-weight: 700; color: var(--bkt-text2); background: var(--chip-2); border-radius: 7px; padding: 3px 9px; }
.bkt .tcount.green { display: inline-flex; align-items: center; gap: 4px; color: var(--bkt-green); background: rgba(48,164,108,0.12); }
.bkt .tcount i, .bkt .tcount svg { width: 12px; height: 12px; }
.bkt .bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: linear-gradient(100deg, rgba(48,164,108,0.08), rgba(48,164,108,0.02) 60%, transparent); border: 1px solid rgba(48,164,108,0.2); border-radius: 13px; padding: 12px 16px; margin-top: 16px; flex-wrap: wrap; }
.bkt .bulk-bar .lhs { display: flex; align-items: center; gap: 9px; }
.bkt .bulk-bar .lhs i, .bkt .bulk-bar .lhs svg { width: 17px; height: 17px; color: var(--bkt-green); }
.bkt .bulk-bar .lhs strong { font-size: 14px; font-weight: 600; color: var(--bkt-text); }
.bkt .bulk-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #fff; background: var(--bkt-green); border: none; border-radius: 10px; padding: 9px 16px; cursor: pointer; box-shadow: var(--bkt-shadow-green); }
.bkt .bulk-btn:hover { background: var(--bkt-green-hover); }
.bkt .bulk-btn i, .bkt .bulk-btn svg { width: 15px; height: 15px; }
.bkt .bulk-bar-wrap { flex-basis: 100%; height: 6px; background: rgba(0,0,0,0.06); border-radius: 999px; overflow: hidden; }
html[data-theme="dark"] .bkt .bulk-bar-wrap { background: rgba(255,255,255,0.08); }
.bkt .bulk-bar-fill { height: 100%; width: 0%; background: var(--bkt-green); transition: width .25s ease; }
.bkt .trow { border-top: 1px solid var(--bkt-bd-soft); padding-top: 18px; margin-top: 18px; }
.bkt .trow-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bkt .trow-meta .idx { font-size: 13px; font-weight: 700; color: var(--bkt-muted); }
.bkt .trow-meta .date { font-size: 13.5px; font-weight: 600; color: var(--bkt-text); }
.bkt .trow-meta .tag { font-size: 12px; font-weight: 700; color: var(--bkt-text2); background: var(--chip-2); border-radius: 7px; padding: 3px 9px; }
.bkt .trow-meta .dir { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; }
.bkt .trow-meta .dir.long { color: var(--bkt-green); } .bkt .trow-meta .dir.short { color: var(--bkt-red); }
.bkt .trow-meta .res { font-size: 12px; font-weight: 700; border-radius: 7px; padding: 3px 9px; }
.bkt .trow-meta .res.green { color: var(--bkt-green); background: rgba(48,164,108,0.12); }
.bkt .trow-meta .res.red { color: var(--bkt-red); background: rgba(215,0,21,0.1); }
.bkt .trow-meta .res.grey { color: var(--bkt-text2); background: var(--chip-2); }
.bkt .trow-meta .rr { font-size: 13px; color: var(--bkt-text3); }
.bkt .trow-meta .pnl { font-size: 13px; font-weight: 700; }
.bkt .trow-meta .pnl.green { color: var(--bkt-green); } .bkt .trow-meta .pnl.red { color: var(--bkt-red); }
.bkt .trow-desc { font-size: 13px; color: var(--bkt-muted); line-height: 1.5; margin-top: 9px; }
.bkt .chart-form { display: flex; gap: 9px; margin-top: 12px; flex-wrap: wrap; }
.bkt .chart-form input[type=url] { flex: 1; min-width: 240px; height: 44px; background: var(--surface-2); border: 1px solid var(--bkt-bd2); border-radius: 11px; padding: 0 14px; color: var(--bkt-text2); font-size: 13.5px; outline: none; }
.bkt .btn-check { display: inline-flex; align-items: center; gap: 7px; height: 44px; font-size: 13.5px; font-weight: 600; color: var(--bkt-text); background: var(--surface); border: 1px solid var(--bkt-bd2); border-radius: 11px; padding: 0 15px; cursor: pointer; }
.bkt .btn-check i, .bkt .btn-check svg { width: 15px; height: 15px; color: var(--bkt-green); }
.bkt .btn-ext { width: 44px; height: 44px; border-radius: 11px; background: var(--surface); border: 1px solid var(--bkt-bd2); color: var(--bkt-text3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bkt .btn-ext i, .bkt .btn-ext svg { width: 16px; height: 16px; }
.bkt .ai-shot { background: var(--surface-2); border: 1px solid var(--bkt-bd); border-radius: 14px; padding: 16px 18px; margin-top: 12px; }
.bkt .ai-shot-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; flex-wrap: wrap; }
.bkt .ai-shot-head i, .bkt .ai-shot-head svg { width: 17px; height: 17px; color: var(--bkt-text3); }
.bkt .ai-shot-head strong { font-size: 14px; font-weight: 600; color: var(--bkt-text); }
.bkt .shot-verdict { font-size: 11.5px; font-weight: 700; border-radius: 7px; padding: 3px 10px; }
.bkt .shot-verdict.valid { color: var(--bkt-green); background: rgba(48,164,108,0.12); }
.bkt .shot-verdict.invalid { color: var(--bkt-red); background: rgba(215,0,21,0.1); }
.bkt .shot-verdict.questionable { color: var(--bkt-amber); background: rgba(255,159,10,0.12); }
.bkt .ai-shot-lead { font-size: 14px; color: var(--bkt-text2); line-height: 1.55; }
.bkt .checkline { display: flex; align-items: flex-start; gap: 9px; margin-top: 9px; }
.bkt .checkline i, .bkt .checkline svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.bkt .checkline.ok i, .bkt .checkline.ok svg { color: var(--bkt-green); }
.bkt .checkline.no i, .bkt .checkline.no svg { color: var(--bkt-red); }
.bkt .checkline.q i, .bkt .checkline.q svg { color: var(--bkt-text3); }
.bkt .checkline span { font-size: 13px; color: var(--bkt-text2); line-height: 1.5; }
.bkt .checkline span b { color: var(--bkt-text); }
.bkt .shot-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bkt-muted2); margin: 15px 0 9px; }
.bkt .shot-sub.red { color: var(--bkt-red); }
.bkt .bullet { display: flex; align-items: flex-start; gap: 9px; margin-top: 7px; }
.bkt .bullet .dot { width: 5px; height: 5px; border-radius: 50%; background: #C7C7CC; flex: none; margin-top: 7px; }
.bkt .bullet.red .dot { background: var(--bkt-red); }
.bkt .bullet span { font-size: 13px; color: var(--bkt-text2); line-height: 1.5; }
.bkt .trow-status { display: none; margin-top: 6px; font-size: 11px; color: var(--bkt-text3); }
.bkt .bkt-empty { text-align: center; padding: 44px 22px; }
.bkt .bkt-empty i, .bkt .bkt-empty svg { width: 34px; height: 34px; color: var(--bkt-muted2); }
.bkt .bkt-empty p { font-size: 14px; color: var(--bkt-muted); margin: 12px 0 0; }

@media (max-width: 980px) {
  .bkt .bt-metrics, .bkt .cmp { grid-template-columns: repeat(3,1fr); }
  .bkt .g-4 { grid-template-columns: repeat(2,1fr); }
  .bkt .tcp-stat-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 720px) {
  .bkt .g-2-1-1, .bkt .g-3, .bkt .setup-grid { grid-template-columns: 1fr; }
  .bkt .bt-metrics, .bkt .cmp { grid-template-columns: repeat(2,1fr); }
}

/* ============================================================
   Экран «Статистика» — дизайн-хэндофф REFERENCE-stats.
   Скоуп .stx (изоляция от Bootstrap/tcp). Графики — простой CSS/SVG.
   R-статистика показывается даже без $ P&L (1R = 1%).
   ============================================================ */
.stx {
  --surface: #FFFFFF; --surface-2: #FAFAFB; --chip: #ECECEE; --chip-2: #F0F0F2;
  --stx-text: #1D1D1F; --stx-text2: #3a3a3d; --stx-text3: #6E6E73; --stx-muted: #86868B; --stx-muted2: #A1A1A6; --stx-hint: #B0B0B5;
  --stx-green: #30A46C; --stx-green-hover: #2b9460; --stx-red: #D70015; --stx-amber: #C2701C;
  --stx-bd: rgba(0,0,0,0.07); --stx-bd-soft: rgba(0,0,0,0.06); --stx-bd2: rgba(0,0,0,0.10);
  --r-card: 18px; --r-btn: 11px;
  max-width: 1440px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; gap: 18px;
}
html[data-theme="dark"] .stx {
  --surface: #141416; --surface-2: #1c1c1e; --chip: #28282B; --chip-2: #1c1c1e;
  --stx-text: #F5F5F7; --stx-text2: #C7C7CC; --stx-text3: #98989D; --stx-muted: #86868B; --stx-muted2: #6E6E73; --stx-hint: #6E6E73;
  --stx-green: #32D74B; --stx-green-hover: #5BDF6E; --stx-red: #FF453A; --stx-amber: #FF9F0A;
  --stx-bd: rgba(255,255,255,0.07); --stx-bd-soft: rgba(255,255,255,0.06); --stx-bd2: rgba(255,255,255,0.10);
}
.stx .num { font-variant-numeric: tabular-nums; }
.stx h1 { display: flex; align-items: center; gap: 11px; font-size: 30px; font-weight: 700; letter-spacing: -0.7px; color: var(--stx-text); margin: 0; }
.stx h1 i, .stx h1 svg { width: 27px; height: 27px; color: var(--sbBlue); }
.stx .subtitle { font-size: 14px; color: var(--stx-muted); margin-top: 6px; }

/* period filters */
.stx .periods { display: flex; gap: 9px; flex-wrap: wrap; }
.stx .period { font-size: 13.5px; font-weight: 600; color: var(--stx-text2); background: var(--surface); border: 1px solid var(--stx-bd2); border-radius: var(--r-btn); padding: 9px 17px; cursor: pointer; text-decoration: none; }
.stx .period:hover { background: var(--surface-2); }
.stx .period.is-active { color: #fff; background: var(--stx-green); border-color: var(--stx-green); }

/* insight */
.stx .insight { display: flex; align-items: center; gap: 14px; background: linear-gradient(100deg, rgba(215,0,21,0.07), rgba(215,0,21,0.02) 60%, transparent); border: 1px solid rgba(215,0,21,0.2); border-radius: 16px; padding: 15px 18px; }
.stx .insight.ok { background: linear-gradient(100deg, rgba(48,164,108,0.08), rgba(48,164,108,0.02) 60%, transparent); border-color: rgba(48,164,108,0.22); }
.stx .insight__ic { width: 38px; height: 38px; border-radius: 11px; background: rgba(215,0,21,0.1); color: var(--stx-red); display: flex; align-items: center; justify-content: center; flex: none; }
.stx .insight.ok .insight__ic { background: rgba(48,164,108,0.12); color: var(--stx-green); }
.stx .insight__ic i, .stx .insight__ic svg { width: 19px; height: 19px; }
.stx .insight__txt { flex: 1; min-width: 0; font-size: 14.5px; color: var(--stx-text2); line-height: 1.5; }
.stx .insight__txt b { color: var(--stx-text); font-weight: 600; }
.stx .insight__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--stx-red); background: rgba(215,0,21,0.1); border-radius: 8px; padding: 7px 12px; white-space: nowrap; flex: none; }
.stx .insight.ok .insight__tag { color: var(--stx-green); background: rgba(48,164,108,0.12); }

/* KPIs */
.stx .kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.stx .kpi { background: var(--surface); border: 1px solid var(--stx-bd); border-radius: 16px; padding: 18px 20px; }
.stx .kpi .lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--stx-muted); margin-bottom: 9px; }
.stx .kpi .v { font-size: 27px; font-weight: 700; letter-spacing: -0.6px; color: var(--stx-text); }
.stx .kpi .v.red { color: var(--stx-red); } .stx .kpi .v.green { color: var(--stx-green); }
.stx .kpi .s { font-size: 12px; color: var(--stx-muted); margin-top: 5px; }

.stx .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.stx .card { background: var(--surface); border: 1px solid var(--stx-bd); border-radius: var(--r-card); padding: 22px 24px; }
.stx .card__title { font-size: 16px; font-weight: 600; color: var(--stx-text); }

/* winrate */
.stx .wr-head { display: flex; align-items: center; justify-content: space-between; }
.stx .wr-badge { font-size: 12px; font-weight: 700; color: var(--stx-red); background: rgba(215,0,21,0.1); border-radius: 8px; padding: 5px 10px; }
.stx .wr-badge.ok { color: var(--stx-green); background: rgba(48,164,108,0.12); }
.stx .wr-big { font-size: 44px; font-weight: 700; letter-spacing: -1.5px; margin: 12px 0 4px; color: var(--stx-text); }
.stx .wr-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--stx-bd-soft); }
.stx .wr-row .k { font-size: 14px; color: var(--stx-text3); width: 96px; flex: none; }
.stx .wr-row .track { flex: 1; height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.stx .wr-row .track > i { display: block; height: 100%; }
.stx .wr-row .v { font-size: 15px; font-weight: 700; width: 32px; text-align: right; flex: none; }
.stx .g { color: var(--stx-green); } .stx .g-bg { background: var(--stx-green); }
.stx .r { color: var(--stx-red); } .stx .r-bg { background: var(--stx-red); }
.stx .mu { color: var(--stx-muted2); } .stx .mu-bg { background: var(--stx-muted2); }
.stx .dk { color: var(--stx-text); } .stx .dk-bg { background: var(--stx-text); }

/* averages */
.stx .avg-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--stx-bd-soft); }
.stx .avg-row .k { font-size: 14px; color: var(--stx-text3); }
.stx .avg-row .v { font-size: 15px; font-weight: 700; color: var(--stx-text); }

/* cumulative + instruments */
.stx .cum-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.stx .cum-val { font-size: 13px; font-weight: 700; }
.stx .cum svg { width: 100%; height: 180px; display: block; }
.stx .instr-row { display: flex; align-items: center; gap: 12px; }
.stx .instr-row .sym { font-size: 13.5px; font-weight: 600; color: var(--stx-text); width: 70px; flex: none; }
.stx .instr-row .track { flex: 1; position: relative; height: 24px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.stx .instr-row .track > i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px; }
.stx .instr-row .v { font-size: 13.5px; font-weight: 700; width: 64px; text-align: right; flex: none; }

/* months bar chart */
.stx .legend { display: flex; gap: 16px; }
.stx .legend span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--stx-text3); }
.stx .legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.stx .months { display: flex; align-items: flex-end; gap: 20px; height: 200px; padding-top: 10px; }
.stx .month { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.stx .month .bars { display: flex; align-items: flex-end; gap: 5px; width: 100%; justify-content: center; height: 100%; }
.stx .month .bars .win { width: 26%; background: var(--stx-green); border-radius: 5px 5px 0 0; }
.stx .month .bars .loss { width: 26%; background: var(--stx-red); border-radius: 5px 5px 0 0; }
.stx .month .lbl { font-size: 12px; color: var(--stx-muted); }

.stx .stx-empty { background: var(--surface); border: 1px solid var(--stx-bd); border-radius: var(--r-card); padding: 48px 24px; text-align: center; }
.stx .stx-empty i, .stx .stx-empty svg { width: 34px; height: 34px; color: var(--stx-muted2); }
.stx .stx-empty .t { font-size: 16px; font-weight: 600; color: var(--stx-text); margin: 12px 0 6px; }
.stx .stx-empty .s { font-size: 13px; color: var(--stx-muted); margin-bottom: 18px; }

@media (max-width: 900px) {
  .stx .kpis { grid-template-columns: repeat(2,1fr); }
  .stx .cols { grid-template-columns: 1fr; }
}

/* ============================================================
   Экран «Мои торговые правила» — дизайн-хэндофф REFERENCE-rules.
   Скоуп .rlx (изоляция от Bootstrap/tcp). Точная копия существующего экрана.
   ============================================================ */
.rlx {
  --surface: #FFFFFF; --surface-2: #FAFAFB; --field: #FFFFFF; --chip: #ECECEE; --chip-2: #F0F0F2;
  --rlx-text: #1D1D1F; --rlx-text2: #3a3a3d; --rlx-text3: #6E6E73; --rlx-muted: #86868B; --rlx-muted2: #A1A1A6; --rlx-hint: #B0B0B5;
  --rlx-green: #30A46C; --rlx-green-hover: #2b9460; --rlx-green-dark: #1d7a50; --rlx-red: #D70015; --rlx-amber: #C2701C; --rlx-blue: #2A6FDB;
  --rlx-bd: rgba(0,0,0,0.07); --rlx-bd-soft: rgba(0,0,0,0.06); --rlx-bd2: rgba(0,0,0,0.10); --rlx-bd3: rgba(0,0,0,0.12);
  --rlx-shadow-green: 0 2px 10px rgba(48,164,108,0.28);
  --r-card: 18px; --r-btn: 11px; --r-field: 10px;
  max-width: 1440px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; gap: 16px;
}
html[data-theme="dark"] .rlx {
  --surface: #141416; --surface-2: #1c1c1e; --field: #1c1c1e; --chip: #28282B; --chip-2: #1c1c1e;
  --rlx-text: #F5F5F7; --rlx-text2: #C7C7CC; --rlx-text3: #98989D; --rlx-muted: #86868B; --rlx-muted2: #6E6E73; --rlx-hint: #6E6E73;
  --rlx-green: #32D74B; --rlx-green-hover: #5BDF6E; --rlx-green-dark: #32D74B; --rlx-red: #FF453A; --rlx-amber: #FF9F0A; --rlx-blue: #4C8BF5;
  --rlx-bd: rgba(255,255,255,0.07); --rlx-bd-soft: rgba(255,255,255,0.06); --rlx-bd2: rgba(255,255,255,0.10); --rlx-bd3: rgba(255,255,255,0.14);
}
.rlx .num { font-variant-numeric: tabular-nums; }
.rlx input, .rlx textarea, .rlx select { font-family: inherit; }
.rlx input::placeholder, .rlx textarea::placeholder { color: var(--rlx-hint); }
.rlx h1 { display: flex; align-items: center; gap: 11px; font-size: 30px; font-weight: 700; letter-spacing: -0.7px; color: var(--rlx-text); margin: 0; }
.rlx h1 i, .rlx h1 svg { width: 27px; height: 27px; color: var(--sbAmber); }
.rlx .subtitle { font-size: 14px; color: var(--rlx-muted); margin-top: 6px; }
.rlx .time-banner { display: flex; align-items: center; gap: 9px; background: rgba(48,164,108,0.08); border: 1px solid rgba(48,164,108,0.2); border-radius: 12px; padding: 12px 16px; }
.rlx .time-banner i, .rlx .time-banner svg { width: 16px; height: 16px; color: var(--rlx-green); }
.rlx .time-banner span { font-size: 13.5px; font-weight: 600; color: var(--rlx-green-dark); }

.rlx .card { background: var(--surface); border: 1px solid var(--rlx-bd); border-radius: var(--r-card); }
.rlx .card--pad { padding: 22px 24px; }
.rlx .card__title { font-size: 16px; font-weight: 600; color: var(--rlx-text); }
.rlx .section-title { font-size: 15px; font-weight: 600; color: var(--rlx-text); }
.rlx .section-desc { font-size: 12.5px; color: var(--rlx-muted); line-height: 1.5; }

.rlx .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--rlx-text); }
.rlx .field .req { color: var(--rlx-red); }
.rlx .input { width: 100%; height: 44px; background: var(--field); border: 1px solid var(--rlx-bd3); border-radius: var(--r-field); padding: 0 14px; color: var(--rlx-text); font-size: 14px; outline: none; }
.rlx .input:focus { border-color: rgba(48,164,108,0.5); }
.rlx textarea.input { height: auto; padding: 13px 14px; line-height: 1.6; resize: vertical; }
.rlx .input-wrap { position: relative; }
.rlx .input-wrap .chev { width: 15px; height: 15px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #9B9BA0; pointer-events: none; }
.rlx select.input { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; padding-right: 34px; }
.rlx .unit { font-size: 13px; color: var(--rlx-muted); white-space: nowrap; }
.rlx .help { font-size: 12px; color: var(--rlx-muted); margin-top: 7px; line-height: 1.45; }
/* align-items:end — чтобы инпуты выравнивались по низу, даже если один лейбл в 2 строки
   (иначе поля «разъезжаются» по высоте). */
.rlx .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.rlx .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.rlx .grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 18px; }
.rlx .ta { width: 100%; background: var(--field); border: 1px solid var(--rlx-bd3); border-radius: 12px; padding: 13px 14px; color: var(--rlx-text); font-size: 14px; line-height: 1.6; outline: none; resize: vertical; }
.rlx .ta:focus { border-color: rgba(48,164,108,0.5); }

/* rule rows */
.rlx .rules-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--rlx-bd-soft); gap: 12px; flex-wrap: wrap; }
.rlx .rule { padding: 20px 24px; border-bottom: 1px solid var(--rlx-bd-soft); }
.rlx .rule:last-child { border-bottom: none; }
.rlx .rule-head { display: flex; align-items: center; gap: 13px; }
.rlx .toggle { width: 42px; height: 24px; border-radius: 12px; background: var(--rlx-green); position: relative; flex: none; cursor: pointer; transition: background .15s; }
.rlx .toggle > i { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: right .15s, left .15s; }
.rlx .toggle.off { background: var(--chip); }
.rlx .toggle.off > i { right: auto; left: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.rlx .rule-name { font-size: 15px; font-weight: 600; flex: 1; color: var(--rlx-text); cursor: pointer; }
.rlx .rule-on { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--rlx-green); }
.rlx .rule-on.off { color: var(--rlx-muted2); }
.rlx .rule-desc { font-size: 13.5px; color: var(--rlx-muted); padding-left: 55px; }
.rlx .rule-body { padding-left: 55px; }

/* buttons */
.rlx .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; border-radius: var(--r-btn); cursor: pointer; text-decoration: none; border: none; }
.rlx .btn-primary { color: #fff; background: var(--rlx-green); box-shadow: var(--rlx-shadow-green); }
.rlx .btn-primary:hover { background: var(--rlx-green-hover); }
.rlx .btn-sm { padding: 9px 16px; font-size: 13.5px; }
.rlx .btn-lg { padding: 12px 22px; }
.rlx .btn i, .rlx .btn svg { width: 15px; height: 15px; }
.rlx .btn-lg i, .rlx .btn-lg svg { width: 17px; height: 17px; }

/* currency chips */
.rlx .cur-row { display: flex; gap: 9px; flex-wrap: wrap; max-width: 560px; }
.rlx .cur { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--rlx-text2); background: var(--field); border: 1px solid var(--rlx-bd3); border-radius: 10px; padding: 8px 14px; cursor: pointer; }
.rlx .cur input { position: absolute; opacity: 0; width: 0; height: 0; }
.rlx .cur .box { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid #C7C7CC; display: flex; align-items: center; justify-content: center; flex: none; }
.rlx .cur .box i, .rlx .cur .box svg { width: 11px; height: 11px; color: #fff; display: none; }
.rlx .cur:has(input:checked) { color: #1D4ED8; background: rgba(42,111,219,0.08); border-color: rgba(42,111,219,0.35); }
html[data-theme="dark"] .rlx .cur:has(input:checked) { color: var(--rlx-blue); }
.rlx .cur:has(input:checked) .box { background: var(--rlx-blue); border-color: var(--rlx-blue); }
.rlx .cur:has(input:checked) .box i, .rlx .cur:has(input:checked) .box svg { display: block; }

/* notifications box */
.rlx .notif { border: 1px solid var(--rlx-bd2); border-radius: 14px; padding: 16px 18px; margin-top: 18px; max-width: 520px; }
.rlx .notif-head { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--rlx-bd-soft); }
.rlx .notif-head i, .rlx .notif-head svg { width: 15px; height: 15px; color: var(--rlx-text3); }
.rlx .notif-head .t { font-size: 13.5px; font-weight: 600; color: var(--rlx-text); }
.rlx .notif-head .r { font-size: 12px; color: var(--rlx-muted); margin-left: auto; }
.rlx .notif-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; cursor: pointer; }
.rlx .notif-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.rlx .notif-row .chk { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #C7C7CC; display: flex; align-items: center; justify-content: center; flex: none; }
.rlx .notif-row .chk i, .rlx .notif-row .chk svg { width: 12px; height: 12px; color: #fff; display: none; }
.rlx .notif-row:has(input:checked) .chk { background: var(--rlx-blue); border-color: var(--rlx-blue); }
.rlx .notif-row:has(input:checked) .chk i, .rlx .notif-row:has(input:checked) .chk svg { display: block; }
.rlx .notif-row .lbl { font-size: 13.5px; font-weight: 600; color: var(--rlx-text); }
.rlx .notif-row .lbl.dim { color: var(--rlx-text2); }
.rlx .notif-row .meta { font-size: 12.5px; color: var(--rlx-muted); }
.rlx .notif-row .soon { font-size: 12px; color: var(--rlx-muted2); }
.rlx .notif-row .grow { flex: 1; }
.rlx .notif-btns { display: flex; gap: 9px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--rlx-bd-soft); flex-wrap: wrap; align-items: center; }
.rlx .notif-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--rlx-text); background: var(--field); border: 1px solid var(--rlx-bd2); border-radius: 9px; padding: 9px 14px; cursor: pointer; text-decoration: none; }
.rlx .notif-btn:hover { background: var(--chip); }
.rlx .notif-btn:disabled { opacity: 0.55; cursor: default; }
.rlx .notif-btn i, .rlx .notif-btn svg { width: 14px; height: 14px; }

/* criteria */
.rlx .crit-list { display: flex; flex-direction: column; gap: 9px; }
.rlx .crit { display: flex; align-items: center; gap: 10px; }
.rlx .crit .grip { width: 16px; height: 16px; color: #C7C7CC; flex: none; cursor: grab; font-size: 15px; user-select: none; }
.rlx .crit .input { flex: 1; }
.rlx .crit-type { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-flex; align-items: center; height: 44px; font-size: 13px; font-weight: 600; border-radius: var(--r-field); padding: 0 32px 0 14px; cursor: pointer; white-space: nowrap; flex: none; width: 170px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239B9BA0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.rlx .crit-type.obj { color: var(--rlx-blue); background-color: rgba(42,111,219,0.08); border: 1px solid rgba(42,111,219,0.30); }
.rlx .crit-type.subj { color: var(--rlx-amber); background-color: rgba(255,159,10,0.10); border: 1px solid rgba(255,159,10,0.35); }
.rlx .crit-del { width: 38px; height: 38px; border-radius: 9px; background: transparent; border: none; color: var(--rlx-muted2); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; font-size: 18px; line-height: 1; }
.rlx .crit-del:hover { background: var(--chip-2); color: var(--rlx-red); }
.rlx .crit-add { height: 44px; font-size: 13.5px; font-weight: 600; color: var(--rlx-text2); background: var(--field); border: 1px dashed var(--rlx-bd3); border-radius: var(--r-field); cursor: pointer; margin-top: 4px; padding: 0 16px; }
.rlx .crit-add:hover { background: var(--chip); color: var(--rlx-text); }

/* upload */
.rlx .upload { border: 1px solid var(--rlx-bd2); border-radius: 14px; padding: 16px 18px; margin-top: 18px; }
.rlx .upload-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; margin-bottom: 12px; color: var(--rlx-text); }
.rlx .upload-title i, .rlx .upload-title svg { width: 16px; height: 16px; color: var(--rlx-text3); }
.rlx .file { position: relative; display: inline-flex; align-items: center; background: var(--field); border: 1px solid var(--rlx-bd2); border-radius: var(--r-field); overflow: hidden; height: 44px; flex: 1; min-width: 280px; max-width: 460px; cursor: pointer; }
.rlx .file input[type=file] { position: absolute; width: 0; height: 0; opacity: 0; }
.rlx .file .btn-file { font-size: 13.5px; font-weight: 600; color: var(--rlx-text); background: var(--chip); padding: 0 14px; height: 100%; display: flex; align-items: center; border-right: 1px solid var(--rlx-bd-soft); flex: none; transition: background .12s, color .12s; }
.rlx .file .name { font-size: 13.5px; color: var(--rlx-muted); padding: 0 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rlx .file:hover { border-color: rgba(48,164,108,0.4); }
.rlx .file:hover .btn-file { background: rgba(48,164,108,0.12); color: var(--rlx-green-dark); }
.rlx .ok-line { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--rlx-green); margin-top: 11px; }
.rlx .ok-line i, .rlx .ok-line svg { width: 15px; height: 15px; }
.rlx .pine { border-top: 1px solid var(--rlx-bd); margin-top: 24px; padding-top: 22px; }

@media (max-width: 820px) {
  .rlx .grid-4 { grid-template-columns: 1fr 1fr; }
  .rlx .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rlx .grid-2, .rlx .grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   Экран «База знаний» — дизайн-хэндофф REFERENCE-kb.
   Скоуп .kbx. Две вкладки (Моя база / Общая база). Таблица — фикс-колонки.
   ============================================================ */
.kbx {
  --surface: #FFFFFF; --surface-2: #FAFAFB; --field: #F5F5F7; --chip: #ECECEE; --chip-2: #F0F0F2;
  --kbx-text: #1D1D1F; --kbx-text2: #3a3a3d; --kbx-text3: #6E6E73; --kbx-muted: #86868B; --kbx-muted2: #A1A1A6; --kbx-hint: #B0B0B5;
  --kbx-green: #30A46C; --kbx-green-hover: #2b9460; --kbx-green-dark: #1d7a50; --kbx-red: #D70015; --kbx-amber: #C2701C;
  --kbx-bd: rgba(0,0,0,0.07); --kbx-bd-soft: rgba(0,0,0,0.06); --kbx-bd2: rgba(0,0,0,0.10); --kbx-bd3: rgba(0,0,0,0.12);
  --kbx-shadow-green: 0 2px 10px rgba(48,164,108,0.28);
  --r-card: 18px; --r-btn: 11px;
  max-width: 1440px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; gap: 18px;
}
html[data-theme="dark"] .kbx {
  --surface: #141416; --surface-2: #1c1c1e; --field: #1c1c1e; --chip: #28282B; --chip-2: #1c1c1e;
  --kbx-text: #F5F5F7; --kbx-text2: #C7C7CC; --kbx-text3: #98989D; --kbx-muted: #86868B; --kbx-muted2: #6E6E73; --kbx-hint: #6E6E73;
  --kbx-green: #32D74B; --kbx-green-hover: #5BDF6E; --kbx-green-dark: #32D74B; --kbx-red: #FF453A; --kbx-amber: #FF9F0A;
  --kbx-bd: rgba(255,255,255,0.07); --kbx-bd-soft: rgba(255,255,255,0.06); --kbx-bd2: rgba(255,255,255,0.10); --kbx-bd3: rgba(255,255,255,0.14);
}
.kbx .num { font-variant-numeric: tabular-nums; }
.kbx h1 { display: flex; align-items: center; gap: 11px; font-size: 30px; font-weight: 700; letter-spacing: -0.7px; color: var(--kbx-text); margin: 0; }
.kbx h1 i, .kbx h1 svg { width: 27px; height: 27px; color: var(--sbAmber); }
.kbx .subtitle { font-size: 14px; color: var(--kbx-muted); margin-top: 6px; }
.kbx .note { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--kbx-muted2); margin-top: 10px; max-width: 900px; line-height: 1.5; }
.kbx .note i, .kbx .note svg { width: 14px; height: 14px; margin-top: 2px; flex: none; }

/* tabs */
.kbx .tabs { display: flex; gap: 11px; flex-wrap: wrap; }
.kbx .tab { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--kbx-text2); background: var(--surface); border: 1px solid var(--kbx-bd3); border-radius: var(--r-btn); padding: 11px 18px; cursor: pointer; text-decoration: none; }
.kbx .tab i, .kbx .tab svg { width: 17px; height: 17px; }
.kbx .tab .cnt { font-size: 12.5px; font-weight: 700; color: var(--kbx-text3); background: var(--chip-2); border-radius: 7px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
.kbx .tab.is-active { color: #fff; background: var(--kbx-green); border-color: var(--kbx-green); }
.kbx .tab.is-active .cnt { color: #fff; background: rgba(255,255,255,0.25); }
html[data-theme="dark"] .kbx .tab.is-active .cnt { color: var(--on-green); background: rgba(0,0,0,0.16); }

.kbx .card { background: var(--surface); border: 1px solid var(--kbx-bd); border-radius: var(--r-card); }
.kbx .card--pad { padding: 22px 24px; }
.kbx .card__title { font-size: 16px; font-weight: 600; color: var(--kbx-text); }

/* upload */
.kbx .upload-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kbx .upload-head-l { display: flex; align-items: center; gap: 10px; }
.kbx .upload-head-l i, .kbx .upload-head-l svg { width: 19px; height: 19px; color: var(--kbx-text3); }
.kbx .admin-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--kbx-amber); background: rgba(255,159,10,0.12); border: 1px solid rgba(255,159,10,0.4); border-radius: 8px; padding: 5px 11px; }
.kbx .upload-lbl { font-size: 13px; font-weight: 600; color: var(--kbx-text2); margin: 18px 0 8px; }
.kbx .file { position: relative; display: inline-flex; align-items: center; background: var(--field); border: 1px solid var(--kbx-bd2); border-radius: 11px; overflow: hidden; height: 48px; width: 100%; max-width: 640px; cursor: pointer; }
.kbx .file input[type=file] { position: absolute; width: 0; height: 0; opacity: 0; }
.kbx .file .btn-file { font-size: 14px; font-weight: 600; color: var(--kbx-text); background: var(--chip); padding: 0 16px; height: 100%; display: flex; align-items: center; border-right: 1px solid var(--kbx-bd-soft); flex: none; transition: background .12s, color .12s; }
.kbx .file .name { font-size: 14px; color: var(--kbx-muted); padding: 0 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbx .file:hover { border-color: rgba(48,164,108,0.4); }
.kbx .file:hover .btn-file { background: rgba(48,164,108,0.12); color: var(--kbx-green-dark); }
.kbx .upload-help { font-size: 12.5px; color: var(--kbx-muted); margin-top: 12px; line-height: 1.5; }
.kbx .btn-upload { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #fff; background: var(--kbx-green); border: none; border-radius: 11px; padding: 11px 20px; cursor: pointer; box-shadow: var(--kbx-shadow-green); margin-top: 18px; }
.kbx .btn-upload:hover { background: var(--kbx-green-hover); }
.kbx .btn-upload:disabled { opacity: 0.65; cursor: default; }
.kbx .btn-upload i, .kbx .btn-upload svg { width: 16px; height: 16px; }
.kbx .readonly-hint { display: flex; gap: 10px; align-items: flex-start; padding: 18px 20px; }
.kbx .readonly-hint i, .kbx .readonly-hint svg { width: 18px; height: 18px; color: var(--kbx-text3); margin-top: 1px; flex: none; }
.kbx .readonly-hint span { font-size: 13px; color: var(--kbx-text2); line-height: 1.5; }

/* documents */
.kbx .docs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; flex-wrap: wrap; }
.kbx .sort { display: flex; align-items: center; gap: 12px; margin: 0; }
.kbx .sort .lbl { font-size: 12.5px; color: var(--kbx-muted); }
.kbx .sort select { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 13px; font-weight: 600; color: var(--kbx-text); background-color: var(--field); border: 1px solid var(--kbx-bd2); border-radius: 10px; padding: 8px 32px 8px 13px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239B9BA0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
.kbx .sort select:hover { background-color: var(--chip); }
.kbx .sort .cnt { font-size: 12.5px; color: var(--kbx-muted); }
.kbx .doc-head, .kbx .doc-row { display: grid; grid-template-columns: 1fr 90px 130px 150px 96px; gap: 16px; align-items: center; }
.kbx .doc-head { padding: 12px 24px; border-top: 1px solid var(--kbx-bd-soft); border-bottom: 1px solid var(--kbx-bd-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kbx-muted2); }
.kbx .doc-row { padding: 15px 24px; border-top: 1px solid var(--kbx-bd-soft); }
.kbx .doc-row:first-of-type { border-top: none; }
.kbx .doc-row:hover { background: var(--surface-2); }
.kbx .doc-name { min-width: 0; }
.kbx .doc-name .n { font-size: 14.5px; font-weight: 600; color: var(--kbx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbx .doc-name .sub { font-size: 12px; color: var(--kbx-muted2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbx .doc-cell { font-size: 14px; color: var(--kbx-text2); font-variant-numeric: tabular-nums; }
.kbx .doc-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.kbx .doc-actions form { margin: 0; display: inline-flex; }
.kbx .icon-btn { width: 38px; height: 38px; border-radius: 10px; background: var(--field); border: 1px solid var(--kbx-bd2); color: var(--kbx-text3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.kbx .icon-btn:hover { background: var(--chip); color: var(--kbx-text); }
.kbx .icon-btn.del:hover { background: rgba(215,0,21,0.1); color: var(--kbx-red); }
.kbx .icon-btn i, .kbx .icon-btn svg { width: 16px; height: 16px; }
.kbx .kb-empty { padding: 40px 24px; text-align: center; }
.kbx .kb-empty i, .kbx .kb-empty svg { width: 32px; height: 32px; color: var(--kbx-muted2); }
.kbx .kb-empty .t { font-size: 14px; font-weight: 600; color: var(--kbx-text); margin-top: 10px; }
.kbx .kb-empty .s { font-size: 12px; color: var(--kbx-muted); margin-top: 4px; }

@media (max-width: 720px) {
  .kbx .doc-head { display: none; }
  .kbx .doc-row { grid-template-columns: 1fr auto; }
}

/* ============================================================
   Верификатор результатов — .vrx (1:1 REFERENCE-verifier)
   ============================================================ */
.vrx {
  --surface: #FFFFFF; --field: #FFFFFF; --chip: #ECECEE; --chip-2: #F0F0F2;
  --text: #1D1D1F; --text-2: #3a3a3d; --text-3: #6E6E73; --muted: #86868B; --muted-2: #A1A1A6; --hint: #B0B0B5;
  --green: #30A46C; --green-hover: #2b9460; --green-dark: #1d7a50; --red: #D70015; --amber: #C2701C;
  --border: rgba(0,0,0,0.07); --border-soft: rgba(0,0,0,0.06); --border-2: rgba(0,0,0,0.12);
  --shadow-green: 0 2px 10px rgba(48,164,108,0.28);
  --r-card: 18px; --r-btn: 11px;
  display: flex; flex-direction: column; gap: 16px; padding-bottom: 80px;
}
html[data-theme="dark"] .vrx {
  --surface: #141416; --field: #1c1c1e; --chip: #1c1c1e; --chip-2: #1c1c1e;
  --text: #F5F5F7; --text-2: #c7c7cc; --text-3: #98989D; --muted: #86868B; --muted-2: #6E6E73; --hint: #6E6E73;
  --green: #32D74B; --green-hover: #5BDF6E; --green-dark: #32D74B; --red: #FF453A; --amber: #FF9F0A;
  --border: rgba(255,255,255,0.09); --border-soft: rgba(255,255,255,0.06); --border-2: rgba(255,255,255,0.14);
  --shadow-green: 0 2px 10px rgba(50,215,75,0.22);
}
.vrx .num { font-variant-numeric: tabular-nums; }
.vrx a { text-decoration: none; color: inherit; }

.vrx h1 { display: flex; align-items: center; gap: 11px; font-size: 30px; font-weight: 700; letter-spacing: -0.7px; margin: 0; color: var(--text); }
.vrx h1 i, .vrx h1 svg { width: 27px; height: 27px; color: var(--sbAmber); stroke-width: 1.9; }
.vrx .subtitle { font-size: 14px; color: var(--muted); margin-top: 6px; max-width: 900px; line-height: 1.5; }

.vrx .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 22px 24px; }
.vrx .card__title { font-size: 16px; font-weight: 600; color: var(--text); }
.vrx .sec-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.vrx .sec-head .ic { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.vrx .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.vrx .badge-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--green-dark); background: rgba(48,164,108,0.12); border-radius: 8px; padding: 4px 10px; }
.vrx .badge-ok i, .vrx .badge-ok svg { width: 13px; height: 13px; }
.vrx .badge-mut { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-3); background: var(--chip-2); border-radius: 8px; padding: 4px 10px; }
.vrx .badge-mut i, .vrx .badge-mut svg { width: 13px; height: 13px; }
.vrx .badge-err { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--red); background: rgba(215,0,21,0.10); border-radius: 8px; padding: 4px 10px; }
.vrx .badge-err i, .vrx .badge-err svg { width: 13px; height: 13px; }
.vrx .pill-count { font-size: 12px; font-weight: 700; color: var(--green-dark); background: rgba(48,164,108,0.12); border-radius: 8px; padding: 5px 11px; }
.vrx .chip-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--green-dark); background: rgba(48,164,108,0.12); border-radius: 8px; padding: 6px 11px; }
.vrx .chip-ok i, .vrx .chip-ok svg { width: 14px; height: 14px; }
.vrx .desc { font-size: 13.5px; color: var(--text-3); line-height: 1.55; }
.vrx .info { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.vrx .info i, .vrx .info svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }

/* trust card */
.vrx .trust { background: rgba(48,164,108,0.06); border: 1px solid rgba(48,164,108,0.22); border-radius: 16px; padding: 18px 20px; }
.vrx .trust-title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.vrx .trust-title i, .vrx .trust-title svg { width: 18px; height: 18px; color: var(--green); }
.vrx .trust-row { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin-top: 8px; }
.vrx .trust-row:first-of-type { margin-top: 0; }
.vrx .trust-row i, .vrx .trust-row svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.vrx .trust-foot { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(48,164,108,0.18); }
.vrx .trust-foot i, .vrx .trust-foot svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }

/* fields */
.vrx .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vrx .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.vrx .input { width: 100%; height: 46px; background: var(--field); border: 1px solid var(--border-2); border-radius: 11px; padding: 0 14px; color: var(--text); font-size: 14px; outline: none; }
.vrx .input:focus { border-color: var(--green); }
.vrx select.input { appearance: none; -webkit-appearance: none; cursor: pointer; }
.vrx .input-wrap { position: relative; }
.vrx .input-wrap .chev { width: 15px; height: 15px; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: #9B9BA0; pointer-events: none; }
.vrx .help { font-size: 12px; color: var(--muted); margin-top: 7px; }
.vrx .prefix { font-size: 13.5px; color: var(--muted); white-space: nowrap; }

/* checkbox line (native input hidden, .box rendered) */
.vrx .checkline { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.vrx .checkline > input { position: absolute; opacity: 0; width: 0; height: 0; }
.vrx .checkline .box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #C7C7CC; flex: none; display: flex; align-items: center; justify-content: center; }
.vrx .checkline .box i, .vrx .checkline .box svg { width: 12px; height: 12px; color: #fff; display: none; }
.vrx .checkline > input:checked ~ .box { background: var(--green); border-color: var(--green); }
.vrx .checkline > input:checked ~ .box i, .vrx .checkline > input:checked ~ .box svg { display: block; }
/* Отчим: галочка в чекбоксе — тёмная (--on-green) на ярко-зелёном, как текст на кнопках */
html[data-theme="dark"] .vrx .checkline .box i, html[data-theme="dark"] .vrx .checkline .box svg { color: var(--on-green); }
.vrx .checkline > input:focus-visible ~ .box { outline: 2px solid var(--green); outline-offset: 2px; }
.vrx .checkline .t { font-size: 14px; color: var(--text-2); }

/* buttons */
.vrx .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; border-radius: var(--r-btn); cursor: pointer; text-decoration: none; }
.vrx .btn i, .vrx .btn svg { width: 16px; height: 16px; }
.vrx .btn-primary { color: #fff; background: var(--green); border: none; padding: 11px 18px; box-shadow: var(--shadow-green); }
.vrx .btn-primary:hover { background: var(--green-hover); }
.vrx .btn-ghost { color: var(--text); background: var(--chip-2); border: 1px solid var(--border-2); padding: 10px 16px; }
.vrx .btn-ghost:hover { background: var(--chip); }
.vrx .btn-ghost i, .vrx .btn-ghost svg { color: var(--text-3); }
.vrx .btn-sm { font-size: 13px; padding: 9px 15px; }
.vrx .btn-remove { color: var(--red); background: rgba(215,0,21,0.07); border: 1px solid rgba(215,0,21,0.25); padding: 9px 14px; }
.vrx .btn-remove:hover { background: rgba(215,0,21,0.12); }
.vrx .btn-remove i, .vrx .btn-remove svg { color: var(--red); }

/* avatar */
.vrx .avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(160deg, var(--green), #1d8a4e); color: #06270f; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.vrx .avatar i, .vrx .avatar svg { width: 22px; height: 22px; color: #06270f; }
.vrx .avatar img { width: 100%; height: 100%; object-fit: cover; }

/* file control */
.vrx .file { display: flex; align-items: center; background: var(--field); border: 1px solid var(--border-2); border-radius: 11px; overflow: hidden; height: 46px; cursor: pointer; }
.vrx .file input[type=file] { display: none; }
.vrx .file .btn-file { font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--chip); padding: 0 15px; height: 100%; display: flex; align-items: center; border-right: 1px solid var(--border-2); white-space: nowrap; }
.vrx .file .name { font-size: 13.5px; color: var(--muted); padding: 0 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrx .file:hover .btn-file { background: var(--chip-2); }

/* trade lock list */
.vrx .tlist { max-height: 300px; overflow-y: auto; border: 1px solid var(--border-2); border-radius: 11px; }
.vrx .tlist label { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); cursor: pointer; font-size: 13px; color: var(--text-2); }
.vrx .tlist label:last-child { border-bottom: none; }
.vrx .tlist .d { color: var(--text-3); font-size: 11px; min-width: 78px; }
.vrx .tlist .mono { margin-left: auto; font-variant-numeric: tabular-nums; }

/* history rows / collapsible */
.vrx details { border-top: 1px solid var(--border-soft); }
.vrx details:first-of-type { border-top: none; }
.vrx summary { list-style: none; cursor: pointer; }
.vrx summary::-webkit-details-marker { display: none; }
.vrx .hist-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; flex-wrap: wrap; }
.vrx .hist-row .name { font-size: 14px; font-weight: 700; color: var(--text); }
.vrx .hist-row .tr { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.vrx .hist-row .rg { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vrx .hist-row .grow { flex: 1; }
.vrx .sync-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--chip-2); border: 1px solid var(--border-2); border-radius: 9px; padding: 7px 12px; flex: none; }
.vrx .sync-btn i, .vrx .sync-btn svg { width: 14px; height: 14px; color: #9B9BA0; }
.vrx .hist-detail { padding: 8px 16px 12px 28px; border-top: 1px dashed var(--border); }
.vrx .hist-detail .l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.vrx .hist-detail .sha { margin-left: auto; font-family: var(--font-mono, ui-monospace, monospace); }

/* empty state */
.vrx .empty { padding: 26px; text-align: center; }
.vrx .empty i, .vrx .empty svg { width: 32px; height: 32px; color: var(--text-3); display: block; margin: 0 auto 8px; }
.vrx .empty .t { font-size: 13px; color: var(--text-3); }

/* reset (danger) */
.vrx .reset { background: rgba(215,0,21,0.03); border: 1px solid rgba(215,0,21,0.25); border-radius: 18px; padding: 22px 24px; }
.vrx .reset-title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: var(--red); }
.vrx .reset-title i, .vrx .reset-title svg { width: 17px; height: 17px; }
.vrx .btn-danger { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--red); background: var(--surface); border: 1px solid rgba(215,0,21,0.4); border-radius: 11px; padding: 11px 18px; cursor: pointer; margin-top: 16px; }
.vrx .btn-danger:hover { background: rgba(215,0,21,0.06); }
.vrx .btn-danger i, .vrx .btn-danger svg { width: 16px; height: 16px; }

@media (max-width: 720px) {
  .vrx .grid-2 { grid-template-columns: 1fr; }
  .vrx h1 { font-size: 25px; }
}

/* ============================================================
   Трейдеры — .trx (1:1 REFERENCE-traders)
   ============================================================ */
.trx {
  --surface: #FFFFFF; --bg: #F5F5F7; --chip: #ECECEE; --chip-2: #F0F0F2;
  --text: #1D1D1F; --text-3: #6E6E73; --muted: #86868B; --muted-2: #A1A1A6; --hint: #B0B0B5;
  --green: #30A46C; --green-hover: #2b9460; --green-dark: #1d7a50; --red: #D70015;
  --border: rgba(0,0,0,0.07); --border-soft: rgba(0,0,0,0.06); --border-2: rgba(0,0,0,0.12);
  --r-card: 18px; --r-btn: 11px;
  display: flex; flex-direction: column; gap: 18px; padding-bottom: 80px;
}
html[data-theme="dark"] .trx {
  --surface: #141416; --bg: #08080A; --chip: #1c1c1e; --chip-2: #1c1c1e;
  --text: #F5F5F7; --text-3: #98989D; --muted: #86868B; --muted-2: #6E6E73; --hint: #6E6E73;
  --green: #32D74B; --green-hover: #5BDF6E; --green-dark: #32D74B; --red: #FF453A;
  --border: rgba(255,255,255,0.09); --border-soft: rgba(255,255,255,0.06); --border-2: rgba(255,255,255,0.14);
}
.trx .num { font-variant-numeric: tabular-nums; }
.trx a { text-decoration: none; color: inherit; }

.trx .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.trx h1 { display: flex; align-items: center; gap: 11px; font-size: 30px; font-weight: 700; letter-spacing: -0.7px; margin: 0; color: var(--text); }
.trx h1 i, .trx h1 svg { width: 27px; height: 27px; color: var(--sbAmber); stroke-width: 1.9; }
.trx .subtitle { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); margin-top: 6px; flex-wrap: wrap; }
.trx .subtitle .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); display: inline-block; flex: none; }

.trx .btn-feed { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-btn); padding: 10px 16px; cursor: pointer; text-decoration: none; }
.trx .btn-feed:hover { background: var(--bg); }
.trx .btn-feed i, .trx .btn-feed svg { width: 16px; height: 16px; color: var(--text-3); }

.trx .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.trx .t-head, .trx .t-row { display: grid; grid-template-columns: 1fr 140px 80px; gap: 16px; align-items: center; padding: 16px 24px; }
.trx .t-head { border-bottom: 1px solid var(--border-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); }
.trx .t-head .r { text-align: right; }
.trx .t-row { border-top: 1px solid var(--border-soft); }
.trx .t-row:first-of-type { border-top: none; }
.trx .t-row:hover { background: #FAFAFB; }
.trx .t-trader { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.trx .t-ava { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(160deg,#30A46C,#1d8a4e); overflow: hidden; }
.trx .t-ava img { width: 100%; height: 100%; object-fit: cover; }
.trx .t-trader .name { font-size: 15px; font-weight: 700; color: var(--text); }
.trx .t-trader a.name:hover { color: var(--green); }
.trx .badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--green-dark); background: rgba(48,164,108,0.12); border-radius: 8px; padding: 5px 11px; }
.trx .badge .live { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(48,164,108,0.18); flex: none; }
.trx .t-subs { font-size: 15px; font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.trx .t-you { font-size: 13px; font-weight: 600; color: var(--muted-2); text-align: right; }
.trx .t-cta { display: flex; justify-content: flex-end; }
.trx .t-cta form { display: inline; }
.trx .btn-sm { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; border-radius: 9px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.trx .btn-sm.primary { color: #fff; background: var(--green); border: none; }
.trx .btn-sm.primary:hover { background: var(--green-hover); }
.trx .btn-sm.ghost { color: var(--text); background: var(--surface); border: 1px solid var(--border-2); }
.trx .btn-sm.ghost:hover { background: var(--bg); }
.trx .btn-sm i, .trx .btn-sm svg { width: 14px; height: 14px; }
.trx .btn-sm.icon { padding: 8px 10px; }
/* Unfollow — загорается красным на hover (как кнопка выхода в сайдбаре). */
.trx .btn-sm.ghost.unfollow:hover { color: var(--red); border-color: var(--red); background: var(--surface); }
/* спецификация выше, чем у html[data-theme=dark] .ppx .follow .btn — иначе текст не краснеет */
.ppx .follow .btn.unfollow:hover,
html[data-theme="dark"] .ppx .follow .btn.unfollow:hover { color: var(--red); border-color: var(--red); }
.ppx .follow .btn.unfollow:hover i, .ppx .follow .btn.unfollow:hover svg,
html[data-theme="dark"] .ppx .follow .btn.unfollow:hover i,
html[data-theme="dark"] .ppx .follow .btn.unfollow:hover svg { color: var(--red); }
.trx .btn-sm.icon i, .trx .btn-sm.icon svg { width: 16px; height: 16px; }

.trx .empty { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 40px 24px; text-align: center; }
.trx .empty .t { font-size: 14px; color: var(--muted); }

html[data-theme="dark"] .trx .t-row:hover { background: #1c1c1e; }

@media (max-width: 720px) {
  .trx .t-head, .trx .t-row { grid-template-columns: 1fr 84px 88px; padding: 14px 16px; gap: 10px; }
  .trx h1 { font-size: 25px; }
}

/* ============================================================
   Публичный профиль трейдера — .ppx (1:1 REFERENCE-public-profile)
   Центрированная узкая колонка max-width:640px.
   ============================================================ */
.ppx {
  --surface: #FFFFFF; --surface-2: #FAFAFB; --bg: #F5F5F7; --chip: #ECECEE; --chip-2: #F0F0F2;
  --text: #1D1D1F; --text-2: #3a3a3d; --text-3: #6E6E73; --muted: #86868B; --muted-2: #A1A1A6; --hint: #B0B0B5;
  --green: #30A46C; --green-hover: #2b9460; --green-dark: #1d7a50; --red: #D70015;
  --border: rgba(0,0,0,0.07); --border-soft: rgba(0,0,0,0.06); --border-2: rgba(0,0,0,0.12);
  --shadow-green: 0 2px 10px rgba(48,164,108,0.28);
  --r-card: 16px;
  display: flex; flex-direction: column; align-items: center; padding-bottom: 60px;
}
html[data-theme="dark"] .ppx {
  --surface: #141416; --surface-2: #1c1c1e; --bg: #08080A; --chip: #1c1c1e; --chip-2: #1c1c1e;
  --text: #F5F5F7; --text-2: #c7c7cc; --text-3: #98989D; --muted: #86868B; --muted-2: #6E6E73; --hint: #6E6E73;
  --green: #32D74B; --green-hover: #5BDF6E; --green-dark: #32D74B; --red: #FF453A;
  --border: rgba(255,255,255,0.09); --border-soft: rgba(255,255,255,0.06); --border-2: rgba(255,255,255,0.14);
}
.ppx .col { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.ppx .num { font-variant-numeric: tabular-nums; }
.ppx a { text-decoration: none; color: inherit; }
.ppx .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.ppx .mono { font-family: var(--font-mono, ui-monospace, monospace); }

/* back strip (owner only) */
.ppx .back-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ppx .back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ppx .back:hover { color: var(--text); }
.ppx .back i, .ppx .back svg { width: 15px; height: 15px; }
.ppx .back-strip .hint { font-size: 13px; color: var(--muted); }

/* profile header */
.ppx .prof { padding: 26px 24px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ppx .prof .ava { width: 66px; height: 66px; border-radius: 50%; background: linear-gradient(160deg, var(--green), #1d8a4e); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.ppx .prof .ava i, .ppx .prof .ava svg { width: 30px; height: 30px; color: #eafff2; }
.ppx .prof .ava img { width: 100%; height: 100%; object-fit: cover; }
.ppx .prof .name { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; margin-top: 12px; color: var(--text); }
.ppx .badge-verified { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--green-dark); background: rgba(48,164,108,0.12); border-radius: 9px; padding: 6px 13px; margin-top: 10px; }
.ppx .badge-verified i, .ppx .badge-verified svg { width: 15px; height: 15px; }
.ppx .badge-self { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 6px 13px; margin-top: 10px; }
.ppx .badge-self i, .ppx .badge-self svg { width: 15px; height: 15px; }
.ppx .self-note { font-size: 11px; color: var(--text-3); margin-top: 8px; max-width: 440px; line-height: 1.5; }
.ppx .src-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 420px; margin-top: 18px; }
.ppx .src { border-radius: 14px; padding: 14px; text-align: center; }
.ppx .src.on { background: rgba(48,164,108,0.08); border: 1px solid rgba(48,164,108,0.35); }
.ppx .src.off { background: var(--surface-2); border: 1px solid var(--border); }
.ppx .src .v { font-size: 22px; font-weight: 700; }
.ppx .src.on .v { color: var(--green-dark); }
.ppx .src.off .v { color: var(--text); }
.ppx .src .k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 4px; line-height: 1.35; }
.ppx .src.on .k { color: var(--green); }
.ppx .src.off .k { color: var(--muted-2); }
.ppx .trust { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.ppx .trust .lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ppx .trust .bars { display: flex; gap: 2px; }
.ppx .trust .bars i { width: 9px; height: 14px; border-radius: 2px; display: block; }
.ppx .trust .pct { font-size: 13px; font-weight: 700; }
.ppx .share { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.ppx .share button, .ppx .share a { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; padding: 9px 15px; cursor: pointer; }
.ppx .share button:hover, .ppx .share a:hover { background: var(--bg); }
.ppx .share button i, .ppx .share button svg, .ppx .share a i, .ppx .share a svg { width: 15px; height: 15px; color: var(--text-3); }
.ppx .follow { display: flex; justify-content: center; margin-top: 16px; }
.ppx .follow .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; border-radius: 11px; padding: 10px 18px; cursor: pointer; color: #fff; background: var(--green); border: none; box-shadow: var(--shadow-green); }
.ppx .follow .btn:hover { background: var(--green-hover); }
.ppx .follow .btn.ghost { color: var(--text); background: var(--surface); border: 1px solid var(--border-2); box-shadow: none; }
.ppx .follow .btn i, .ppx .follow .btn svg { width: 16px; height: 16px; }

/* KPIs */
.ppx .kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.ppx .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px; text-align: center; }
.ppx .kpi .v { font-size: 26px; font-weight: 700; letter-spacing: -0.7px; }
.ppx .kpi .v.red { color: var(--red); }
.ppx .kpi .v.green { color: var(--green); }
.ppx .kpi .v.dark { color: var(--text); }
.ppx .kpi .k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

/* take/period minis */
.ppx .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ppx .mini { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px 18px; }
.ppx .mini-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.ppx .mini-row + .mini-row { border-top: 1px solid var(--border-soft); }
.ppx .mini-row .k { font-size: 13px; color: var(--muted); }
.ppx .mini-row .v { font-size: 14px; font-weight: 700; }
.ppx .v-green { color: var(--green); }
.ppx .v-red { color: var(--red); }
.ppx .v-grey { color: var(--muted-2); }
.ppx .period { display: flex; flex-direction: column; justify-content: center; }
.ppx .period .k { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.ppx .period .v { font-size: 14.5px; font-weight: 600; line-height: 1.4; }

/* trades */
.ppx .trades-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--border-soft); }
.ppx .trades-head .t { display: flex; align-items: center; gap: 9px; }
.ppx .trades-head .t i, .ppx .trades-head .t svg { width: 17px; height: 17px; color: var(--text-3); }
.ppx .trades-head .t b { font-size: 15px; font-weight: 600; color: var(--text); }
.ppx .trades-head .t span { font-size: 11px; color: var(--muted-2); }
.ppx .trades-head .cnt { font-size: 12px; font-weight: 700; color: var(--text-3); background: var(--chip-2); border-radius: 7px; padding: 3px 9px; }
.ppx .tcolg { display: grid; grid-template-columns: 88px 1fr 74px 84px; gap: 10px; align-items: center; }
.ppx .trades-cols { padding: 11px 20px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); }
.ppx .trades-cols .r { text-align: right; }
.ppx .trades-scroll { max-height: 470px; overflow-y: auto; }
.ppx details.trade { border-top: 1px solid var(--border-soft); }
.ppx details.trade > summary { list-style: none; cursor: pointer; }
.ppx details.trade > summary::-webkit-details-marker { display: none; }
.ppx details.trade > summary:hover, .ppx details.trade[open] > summary { background: var(--surface-2); }
.ppx .trow { padding: 11px 20px; }
.ppx .trow .date { font-size: 12.5px; color: var(--text-3); }
.ppx .trow .inst { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ppx .trow .inst .dir { width: 11px; height: 11px; flex: none; }
.ppx .trow .inst .dir.long { color: var(--green); fill: var(--green); }
.ppx .trow .inst .dir.short { color: var(--red); fill: var(--red); transform: rotate(180deg); }
.ppx .trow .inst .dir.flat { color: var(--text-3); }
.ppx .trow .inst .sym { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.ppx .trow .inst .chk { width: 13px; height: 13px; flex: none; }
.ppx .trow .inst .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.ppx .trow .inst .chev { width: 13px; height: 13px; color: var(--text-3); flex: none; margin-left: 2px; transition: transform .15s; }
.ppx details.trade[open] .chev { transform: rotate(180deg); }
.ppx .trow .rr { font-size: 13px; color: var(--muted-2); text-align: right; }
.ppx .trow .pnl { font-size: 13.5px; font-weight: 700; text-align: right; }
.ppx .tdetail { padding: 6px 20px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 12px; }
.ppx .tdetail .kv { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--border); padding-bottom: 3px; }
.ppx .tdetail .kv .k { color: var(--text-3); }
.ppx .tdetail .kv .v { font-weight: 600; text-align: right; font-family: var(--font-mono, ui-monospace, monospace); color: var(--text); }
.ppx .why { padding: 0 20px 12px; font-size: 12px; line-height: 1.5; }
.ppx .why .lbl { color: var(--text-3); text-transform: uppercase; font-size: 10px; letter-spacing: .5px; }
.ppx .why .txt { margin-top: 3px; color: var(--text); }
.ppx .snaps { padding: 0 20px 14px; }
.ppx .snaps .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin-bottom: 8px; }
.ppx .snaps .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 8px; }
.ppx .snaps .snap { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface-2); }
.ppx .snaps .snap .tf { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin-bottom: 4px; }
.ppx .snaps .snap a { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-size: 12px; font-weight: 600; }
.ppx .snaps .snap a i, .ppx .snaps .snap a svg { width: 13px; height: 13px; }

/* proofs */
.ppx .proofs { padding: 18px 20px; }
.ppx .proofs-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ppx .proofs-head i, .ppx .proofs-head svg { width: 17px; height: 17px; color: var(--green); }
.ppx .proofs-head b { font-size: 15px; font-weight: 600; color: var(--text); }
.ppx details.proof-grp { border-top: 1px solid var(--border-soft); }
.ppx details.proof-grp > summary { list-style: none; cursor: pointer; }
.ppx details.proof-grp > summary::-webkit-details-marker { display: none; }
.ppx .proof { padding: 13px 0; }
.ppx .proof-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ppx .proof-top i, .ppx .proof-top svg { width: 15px; height: 15px; }
.ppx .proof-top .br { font-size: 14px; font-weight: 700; color: var(--text); }
.ppx .proof-top .tag { font-size: 11.5px; font-weight: 600; border-radius: 7px; padding: 3px 9px; }
.ppx .proof-top .tag.on { color: var(--green-dark); background: rgba(48,164,108,0.12); }
.ppx .proof-top .tag.off { color: var(--text-3); background: var(--surface-2); }
.ppx .proof .l1 { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.ppx .proof .l2 { font-size: 12.5px; color: var(--muted-2); margin-top: 2px; line-height: 1.5; }
.ppx .proof-item { padding: 8px 0 10px 24px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--text-3); }
.ppx .recompute { margin-top: 8px; }
.ppx .recompute > summary { list-style: none; font-size: 12px; color: var(--green); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ppx .recompute > summary::-webkit-details-marker { display: none; }
.ppx .recompute .body { font-size: 11px; color: var(--text-3); margin-top: 8px; line-height: 1.5; }
.ppx .recompute .sha { margin-top: 8px; font-family: var(--font-mono, ui-monospace, monospace); color: var(--text-3); word-break: break-all; font-size: 10px; }
.ppx .note { display: flex; gap: 9px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 13px 14px; margin-top: 14px; }
.ppx .note i, .ppx .note svg { width: 16px; height: 16px; color: var(--muted); flex: none; margin-top: 1px; }
.ppx .note div { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.ppx .note div b { font-weight: 600; }
.ppx .proof-foot { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 12px; }

/* CTA + footer */
.ppx .cta { background: linear-gradient(120deg, rgba(48,164,108,0.10), rgba(48,164,108,0.03) 60%, var(--surface)); border: 1px solid rgba(48,164,108,0.28); border-radius: var(--r-card); padding: 20px; text-align: center; }
.ppx .cta .t { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text); }
.ppx .cta .t i, .ppx .cta .t svg { width: 18px; height: 18px; color: var(--green); }
.ppx .cta .d { font-size: 13px; color: var(--text-3); margin-top: 7px; line-height: 1.5; max-width: 420px; margin-left: auto; margin-right: auto; }
.ppx .cta .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #fff; background: var(--green); border: none; border-radius: 11px; padding: 11px 20px; cursor: pointer; margin-top: 15px; box-shadow: var(--shadow-green); }
.ppx .cta .btn:hover { background: var(--green-hover); }
.ppx .cta .btn i, .ppx .cta .btn svg { width: 16px; height: 16px; }
.ppx .powered { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 2px; }
.ppx .powered a { font-weight: 700; color: var(--green); }

@media (max-width: 560px) {
  .ppx .kpis { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .ppx .kpi { padding: 14px 8px; }
  .ppx .kpi .v { font-size: 22px; }
  .ppx .two { grid-template-columns: 1fr; }
}

/* ============================================================
   Лента (соц-фид) — .fdx (1:1 REFERENCE-lenta)
   Раскладка: grid 1fr 340px (лента + правый sticky-рейл).
   ============================================================ */
.fdx {
  --surface: #FFFFFF; --surface-2: #FAFAFB; --bg: #F5F5F7; --chip: #ECECEE; --chip-2: #F0F0F2;
  --text: #1D1D1F; --text-2: #3a3a3d; --text-3: #6E6E73; --muted: #86868B; --muted-2: #A1A1A6; --hint: #B0B0B5;
  --green: #30A46C; --green-dark: #1d8a4e; --green-deep: #1d7a50; --green-hover: #2b9460; --red: #D70015;
  --border: rgba(0,0,0,0.07); --border-soft: rgba(0,0,0,0.06); --border-2: rgba(0,0,0,0.10);
  --r-card: 18px; --r-btn: 11px;
  display: flex; flex-direction: column; gap: 18px; padding-bottom: 80px;
}
html[data-theme="dark"] .fdx {
  --surface: #141416; --surface-2: #1c1c1e; --bg: #08080A; --chip: #1c1c1e; --chip-2: #1c1c1e;
  --text: #F5F5F7; --text-2: #c7c7cc; --text-3: #98989D; --muted: #86868B; --muted-2: #6E6E73; --hint: #6E6E73;
  --green: #32D74B; --green-dark: #32D74B; --green-deep: #32D74B; --green-hover: #5BDF6E; --red: #FF453A;
  --border: rgba(255,255,255,0.09); --border-soft: rgba(255,255,255,0.06); --border-2: rgba(255,255,255,0.14);
}
.fdx .num { font-variant-numeric: tabular-nums; }
.fdx a { text-decoration: none; color: inherit; }

.fdx .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fdx h1 { display: flex; align-items: center; gap: 11px; font-size: 30px; font-weight: 700; letter-spacing: -0.7px; margin: 0; color: var(--text); }
.fdx h1 i, .fdx h1 svg { width: 27px; height: 27px; color: var(--sbAmber); }
.fdx .subtitle { font-size: 14px; color: var(--muted); margin-top: 6px; }
.fdx .btn-all { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-btn); padding: 10px 16px; cursor: pointer; }
.fdx .btn-all:hover { background: var(--bg); }
.fdx .btn-all i, .fdx .btn-all svg { width: 16px; height: 16px; color: var(--text-3); }

/* layout */
.fdx .wrap { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.fdx .feed { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* filter chips */
.fdx .filters { display: flex; gap: 9px; flex-wrap: wrap; }
.fdx .filter { font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; padding: 8px 15px; cursor: pointer; }
.fdx .filter:hover { background: var(--bg); }
.fdx .filter.is-active { color: #fff; background: var(--green); border-color: var(--green); }

/* feed card */
.fdx .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.fdx .post { padding: 18px 20px; }
.fdx .post-head { display: flex; align-items: center; gap: 12px; }
.fdx .post-av { width: 42px; height: 42px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.fdx .post-av img { width: 100%; height: 100%; object-fit: cover; }
.fdx .post-id { min-width: 0; flex: 1; }
.fdx .post-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fdx .post-name { font-size: 15px; font-weight: 700; color: var(--text); }
.fdx .vbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--green-deep); background: rgba(48,164,108,0.12); border-radius: 7px; padding: 3px 8px; }
.fdx .vbadge i, .fdx .vbadge svg { width: 12px; height: 12px; }
.fdx .post-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.fdx .post-r { font-size: 19px; font-weight: 800; letter-spacing: -0.4px; flex: none; }
.fdx .r-green { color: var(--green); }
.fdx .r-red { color: var(--red); }

.fdx .trade-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.fdx .sym { font-size: 15px; font-weight: 700; color: var(--text); }
.fdx .dir { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; border-radius: 7px; padding: 4px 9px; }
.fdx .dir i, .fdx .dir svg { width: 13px; height: 13px; }
.fdx .dir.long { color: var(--green); background: rgba(48,164,108,0.12); }
.fdx .dir.short { color: var(--red); background: rgba(215,0,21,0.10); }
.fdx .tag { font-size: 12.5px; font-weight: 600; color: var(--text-3); background: var(--chip-2); border-radius: 7px; padding: 4px 9px; }
.fdx .tag.win { color: var(--green-deep); background: rgba(48,164,108,0.12); }
.fdx .tag.loss { color: var(--red); background: rgba(215,0,21,0.10); }

.fdx .stats3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }
.fdx .stat { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 11px 13px; }
.fdx .stat .k { font-size: 11px; color: var(--muted); }
.fdx .stat .v { font-size: 15px; font-weight: 700; margin-top: 3px; color: var(--text); }
.fdx .stat .v.green { color: var(--green); }
.fdx .stat .v.red { color: var(--red); }

.fdx .post-note { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin-top: 14px; }
.fdx .post-actions { display: flex; align-items: center; gap: 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.fdx .act { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-3); background: transparent; border: none; cursor: pointer; }
.fdx .act i, .fdx .act svg { width: 16px; height: 16px; }
.fdx .act:hover { color: var(--green); }
.fdx .spacer { flex: 1; }

/* right rail */
.fdx .rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 30px; }
.fdx .rail-title { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; color: var(--text); }
.fdx .rail-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; margin-bottom: 6px; }
.fdx .sug { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.fdx .sug-av { width: 38px; height: 38px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.fdx .sug-av img { width: 100%; height: 100%; object-fit: cover; }
.fdx .sug-id { flex: 1; min-width: 0; }
.fdx .sug-name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--text); }
.fdx .sug-name i, .fdx .sug-name svg { width: 14px; height: 14px; color: var(--green); }
.fdx .sug-stat { font-size: 12px; color: var(--muted); margin-top: 1px; }
.fdx .btn-follow { font-size: 12.5px; font-weight: 600; color: #fff; background: var(--green); border: 1px solid var(--green); border-radius: 9px; padding: 7px 13px; cursor: pointer; flex: none; }
.fdx .btn-follow:hover { background: var(--green-hover); }
.fdx .sug-empty { font-size: 12.5px; color: var(--muted); padding: 12px 0; border-top: 1px solid var(--border-soft); line-height: 1.5; }
.fdx .trust { background: linear-gradient(140deg, rgba(48,164,108,0.09), rgba(48,164,108,0.02) 60%, var(--surface)); border: 1px solid rgba(48,164,108,0.18); border-radius: var(--r-card); padding: 18px; }
.fdx .trust-head { display: flex; align-items: center; gap: 9px; }
.fdx .trust-ic { width: 32px; height: 32px; border-radius: 9px; background: rgba(48,164,108,0.14); color: var(--green-dark); display: flex; align-items: center; justify-content: center; flex: none; }
.fdx .trust-ic i, .fdx .trust-ic svg { width: 17px; height: 17px; }
.fdx .trust-t { font-size: 14px; font-weight: 700; color: var(--text); }
.fdx .trust-body { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-top: 10px; }

/* empty state */
.fdx .empty { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; }
.fdx .empty__ic { width: 72px; height: 72px; border-radius: 20px; background: var(--chip-2); display: flex; align-items: center; justify-content: center; color: #9B9BA0; margin-bottom: 20px; }
.fdx .empty__ic i, .fdx .empty__ic svg { width: 32px; height: 32px; }
.fdx .empty__title { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; color: var(--text); }
.fdx .empty__sub { font-size: 14px; color: var(--muted); margin-top: 8px; max-width: 460px; line-height: 1.55; }
.fdx .empty__btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14px; font-weight: 600; color: #fff; background: var(--green); border: none; border-radius: var(--r-btn); padding: 11px 20px; }
.fdx .empty__btn:hover { background: var(--green-hover); }
.fdx .empty__btn i, .fdx .empty__btn svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .fdx .wrap { grid-template-columns: 1fr; }
  .fdx .rail { position: static; }
}

/* ============================================================
   Новости / Экономический календарь — .nwx (1:1 REFERENCE-news)
   Сетка колонок одна на шапке+строках: 90px 90px 1fr 120px.
   Синий = ТОЛЬКО баннер уведомлений.
   ============================================================ */
.nwx {
  --surface: #FFFFFF; --surface-2: #FAFAFB; --bg: #F5F5F7; --chip: #ECECEE; --chip-2: #F0F0F2;
  --text: #1D1D1F; --text-2: #3a3a3d; --text-3: #6E6E73; --muted: #86868B; --muted-2: #A1A1A6; --hint: #B0B0B5;
  --green: #30A46C; --green-hover: #2b9460; --red: #D70015; --amber: #C2701C; --blue: #2A6FDB;
  --border: rgba(0,0,0,0.07); --border-soft: rgba(0,0,0,0.06); --border-2: rgba(0,0,0,0.10);
  --shadow-green: 0 2px 10px rgba(48,164,108,0.28);
  --r-card: 18px; --r-btn: 11px;
  display: flex; flex-direction: column; gap: 18px; padding-bottom: 80px;
}
html[data-theme="dark"] .nwx {
  --surface: #141416; --surface-2: #1c1c1e; --bg: #08080A; --chip: #1c1c1e; --chip-2: #1c1c1e;
  --text: #F5F5F7; --text-2: #c7c7cc; --text-3: #98989D; --muted: #86868B; --muted-2: #6E6E73; --hint: #6E6E73;
  --green: #32D74B; --green-hover: #5BDF6E; --red: #FF453A; --amber: #FF9F0A; --blue: #4c8bf5;
  --border: rgba(255,255,255,0.09); --border-soft: rgba(255,255,255,0.06); --border-2: rgba(255,255,255,0.14);
}
.nwx .num { font-variant-numeric: tabular-nums; }
.nwx a { text-decoration: none; color: inherit; }

.nwx .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.nwx h1 { display: flex; align-items: center; gap: 11px; font-size: 30px; font-weight: 700; letter-spacing: -0.7px; margin: 0; color: var(--text); }
.nwx h1 i, .nwx h1 svg { width: 27px; height: 27px; color: var(--text-2); }
.nwx .subtitle { font-size: 14px; color: var(--muted); margin-top: 6px; }
.nwx .btn-refresh { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-btn); padding: 10px 16px; cursor: pointer; }
.nwx .btn-refresh:hover { background: var(--bg); }
.nwx .btn-refresh i, .nwx .btn-refresh svg { width: 16px; height: 16px; color: var(--text-3); }

/* notification banner — the only blue accent */
.nwx .banner { display: flex; align-items: center; gap: 16px; background: linear-gradient(100deg, rgba(42,111,219,0.09), rgba(42,111,219,0.02) 60%, var(--surface)); border: 1px solid rgba(42,111,219,0.22); border-radius: 16px; padding: 18px 20px; flex-wrap: wrap; }
.nwx .banner__ic { width: 46px; height: 46px; border-radius: 13px; background: rgba(42,111,219,0.12); color: var(--blue); display: flex; align-items: center; justify-content: center; flex: none; }
.nwx .banner__ic i, .nwx .banner__ic svg { width: 23px; height: 23px; }
.nwx .banner__body { flex: 1; min-width: 220px; }
.nwx .banner__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nwx .banner__title { font-size: 16px; font-weight: 700; color: var(--text); }
.nwx .banner__badge { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--blue); background: rgba(42,111,219,0.12); border-radius: 7px; padding: 4px 9px; text-transform: uppercase; }
.nwx .banner__desc { font-size: 13.5px; color: var(--text-2); line-height: 1.5; margin-top: 5px; }
.nwx .banner .tcp-btn { flex: none; }

/* impact filters */
.nwx .imp-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nwx .imp-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-btn); padding: 11px 18px; cursor: pointer; }
.nwx .imp-filter:hover { background: var(--bg); }
.nwx .imp-filter.is-active { color: #fff; background: var(--green); border-color: var(--green); }
.nwx .imp-filter i, .nwx .imp-filter svg { width: 16px; height: 16px; }
.nwx .imp-filter.is-active i, .nwx .imp-filter.is-active svg { color: #fff; }

/* filter note */
.nwx .filter-note { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: -6px; }
.nwx .filter-note .txt { font-size: 13px; color: var(--muted); }
.nwx .filter-note .txt b { font-weight: 700; color: var(--text); }
.nwx .filter-note .txt a { color: var(--green); font-weight: 600; }
.nwx .filter-note .cfg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.nwx .filter-note .cfg:hover { color: var(--text); }
.nwx .filter-note .cfg i, .nwx .filter-note .cfg svg { width: 14px; height: 14px; }

/* day group */
.nwx .day { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.nwx .day-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 24px; background: var(--surface-2); border-bottom: 1px solid var(--border-soft); }
.nwx .day-date { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--text); }
.nwx .day-date i, .nwx .day-date svg { width: 17px; height: 17px; color: #9B9BA0; }
.nwx .day-count { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--chip); border-radius: 999px; min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; }
.nwx .cal-head, .nwx .cal-row { display: grid; grid-template-columns: 90px 90px 1fr 120px; gap: 16px; align-items: center; padding: 0 24px; }
.nwx .cal-head { padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--border-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); }
.nwx .cal-head .r { text-align: right; }
.nwx .cal-row { padding-top: 15px; padding-bottom: 15px; border-top: 1px solid var(--border-soft); }
.nwx .cal-row:hover { background: var(--surface-2); }
.nwx .cal-time { font-size: 14px; font-weight: 600; color: var(--text); }
.nwx .cal-cur { font-size: 13px; font-weight: 700; color: var(--text-3); background: var(--chip-2); border-radius: 7px; padding: 4px 10px; justify-self: start; }
.nwx .cal-name { font-size: 14.5px; font-weight: 600; color: var(--text); }
.nwx .cal-data { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.nwx .imp { justify-self: end; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; border-radius: 8px; padding: 5px 11px; border: 1px solid; white-space: nowrap; text-align: center; }
.nwx .imp.high { color: var(--red); background: rgba(215,0,21,0.08); border-color: rgba(215,0,21,0.28); }
.nwx .imp.medium { color: var(--amber); background: rgba(255,159,10,0.10); border-color: rgba(255,159,10,0.4); }
.nwx .imp.low { color: var(--text-3); background: var(--chip-2); border-color: var(--border-2); }

/* empty */
.nwx .empty { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 44px 24px; text-align: center; }
.nwx .empty i, .nwx .empty svg { width: 32px; height: 32px; color: var(--text-3); display: block; margin: 0 auto 10px; }
.nwx .empty .t { font-size: 14px; font-weight: 600; color: var(--text-2); }
.nwx .empty .s { font-size: 12px; color: var(--text-3); margin-top: 4px; }

@media (max-width: 640px) {
  .nwx .cal-head, .nwx .cal-row { grid-template-columns: 64px 64px 1fr 92px; gap: 10px; padding: 0 16px; }
  .nwx .day-head { padding: 13px 16px; }
  .nwx h1 { font-size: 25px; }
}

/* ============================================================
   Настройки — .stg (1:1 REFERENCE-settings)
   ОДНА центрированная колонка max-width:960px; секции full-width.
   ============================================================ */
.stg {
  --surface: #FFFFFF; --surface-2: #FAFAFB; --bg: #F5F5F7;
  --text: #1D1D1F; --text-2: #86868B; --text-3: #A1A1A6; --text-strong: #3a3a3d;
  --border: rgba(0,0,0,0.07); --border-strong: rgba(0,0,0,0.12); --border-soft: rgba(0,0,0,0.06);
  --green: #30A46C; --green-hover: #2b9460; --green-deep: #1d8a4e;
  --red: #D70015; --chip: #ECECEE; --chip-2: #F0F0F2;
  --shadow-green: 0 2px 10px rgba(48,164,108,0.28);
  max-width: 960px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; gap: 18px; padding-bottom: 60px;
}
html[data-theme="dark"] .stg {
  --surface: #141416; --surface-2: #1c1c1e; --bg: #08080a;
  --text: #f5f5f7; --text-2: #98989d; --text-3: #6E6E73; --text-strong: #d6d6da;
  --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); --border-soft: rgba(255,255,255,0.06);
  --green: #32d74b; --green-hover: #2fb045; --green-deep: #28a53c;
  --red: #ff453a; --chip: #2a2a2d; --chip-2: #242427;
  --shadow-green: 0 2px 12px rgba(50,215,75,0.22);
}
.stg .num { font-variant-numeric: tabular-nums; }
.stg a { text-decoration: none; color: inherit; }

.stg .page-head { display: flex; flex-direction: column; }
.stg .page-title { display: flex; align-items: center; gap: 11px; font-size: 30px; font-weight: 700; letter-spacing: -0.7px; margin: 0; color: var(--text); }
.stg .page-title i, .stg .page-title svg { width: 27px; height: 27px; color: var(--text-2); }
.stg .page-sub { font-size: 14px; color: var(--text-2); margin-top: 8px; }

.stg .card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px 24px; }
.stg .card-title { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: -0.3px; color: var(--text); }
.stg .card-title i, .stg .card-title svg { width: 21px; height: 21px; color: var(--text-3); }
.stg .card-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin-top: 6px; }

/* Account rows */
.stg .acc-list { margin-top: 16px; }
.stg .acc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid var(--border-soft); }
.stg .acc-row .k { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-3); text-transform: uppercase; }
.stg .acc-row .v { font-size: 15px; font-weight: 600; color: var(--text); text-align: right; }

/* Inputs */
.stg .field { display: block; }
.stg .field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.stg .input { width: 100%; height: 46px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 11px; padding: 0 14px; font-size: 14px; color: var(--text); outline: none; }
.stg .input:focus { border-color: var(--green); }
.stg .input::placeholder { color: var(--text-3); }
.stg .stack { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }

/* Buttons */
.stg .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; border: none; border-radius: 11px; cursor: pointer; text-decoration: none; }
.stg .btn i, .stg .btn svg { width: 16px; height: 16px; }
.stg .btn-primary { color: #fff; background: var(--green); padding: 12px 20px; box-shadow: var(--shadow-green); }
.stg .btn-primary:hover { background: var(--green-hover); }
html[data-theme="dark"] .stg .btn-primary { color: #06270f; }
.stg .btn-left { align-self: flex-start; }
.stg .btn-right { align-self: flex-end; margin-left: auto; }

/* Callouts */
.stg .callout { display: flex; align-items: center; gap: 11px; background: rgba(48,164,108,0.07); border: 1px solid rgba(48,164,108,0.2); border-radius: 13px; padding: 14px 16px; margin-top: 16px; }
.stg .callout i, .stg .callout svg { width: 19px; height: 19px; color: var(--green-deep); flex: none; }
.stg .callout span { font-size: 14px; color: var(--text-strong); }
.stg .callout.warn { align-items: flex-start; }
.stg .callout.warn i, .stg .callout.warn svg { width: 17px; height: 17px; margin-top: 1px; }
.stg .callout.warn span { font-size: 12.5px; line-height: 1.5; }

.stg .link-green { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--green); margin-top: 12px; }
.stg .link-green i, .stg .link-green svg { width: 14px; height: 14px; }

.stg .inline-row { display: flex; gap: 11px; margin-top: 14px; flex-wrap: wrap; }
.stg .inline-row .input { flex: 1; min-width: 180px; }
.stg .btn-inline { padding: 0 18px; height: 46px; flex: none; }

.stg .empty-note { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 13px 15px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; font-size: 13px; color: var(--text-2); }
.stg .empty-note i, .stg .empty-note svg { width: 15px; height: 15px; color: var(--text-3); flex: none; }

/* Invites create row */
.stg .inv-create { display: flex; align-items: flex-end; gap: 11px; margin-top: 14px; flex-wrap: wrap; }
.stg .inv-create .lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--text-3); margin-bottom: 7px; text-transform: uppercase; }
.stg .inv-create .col-uses { flex: none; }
.stg .inv-create .col-uses .input { width: 90px; }
.stg .inv-create .col-note { flex: 1; min-width: 150px; }

/* Invites table — fixed columns (NOT 1fr) */
.stg .inv-table { margin-top: 18px; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; }
.stg .inv-head, .stg .inv-row { display: grid; grid-template-columns: 150px 72px 72px minmax(100px,1fr) 120px 190px; gap: 12px; align-items: center; padding: 14px 18px; }
.stg .inv-head { padding: 12px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border-soft); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.stg .inv-head .c-center, .stg .inv-row .c-center { text-align: center; }
.stg .inv-row { border-top: 1px solid var(--border-soft); }
.stg .inv-row:hover { background: var(--surface-2); }
.stg .inv-code { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.stg .inv-num { font-size: 13.5px; color: var(--text-3); }
.stg .inv-note { font-size: 13.5px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg .inv-status { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.stg .inv-status .sdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.stg .inv-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.stg .inv-actions form { display: inline; margin: 0; }
.stg .chip-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-3); background: var(--chip-2); border: none; border-radius: 8px; padding: 6px 9px; cursor: pointer; }
.stg .chip-btn:hover { background: var(--chip); }
.stg .chip-btn i, .stg .chip-btn svg { width: 13px; height: 13px; }
.stg .chip-btn.danger { color: var(--red); background: rgba(215,0,21,0.08); padding: 6px 11px; }
.stg .chip-btn.danger:hover { background: rgba(215,0,21,0.14); }

/* Dropzone */
.stg .dropzone { border: 1.5px dashed var(--border-strong); border-radius: 14px; padding: 34px 20px; margin-top: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; background: var(--surface-2); }
.stg .dropzone:hover { border-color: rgba(48,164,108,0.5); background: rgba(48,164,108,0.03); }
.stg .dropzone i, .stg .dropzone svg { width: 40px; height: 40px; color: var(--text-3); }
.stg .dropzone .dz-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin-top: 12px; }
.stg .dropzone .dz-sub { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }

/* Notion steps */
.stg .steps { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.stg .step { display: flex; gap: 11px; }
.stg .step .n { width: 22px; height: 22px; border-radius: 50%; background: var(--chip); color: var(--text-3); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.stg .step .t { font-size: 14px; color: var(--text-strong); line-height: 1.45; }
.stg .step .t b { color: var(--text); font-weight: 600; }

/* Danger zone */
.stg .card.danger { border-color: rgba(215,0,21,0.28); }
.stg .card.danger .card-title { font-size: 17px; letter-spacing: -0.2px; color: var(--red); }
.stg .card.danger .card-title i, .stg .card.danger .card-title svg { width: 19px; height: 19px; color: var(--red); }
.stg .danger-fields { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.stg .danger-fields .field { flex: 1; min-width: 240px; max-width: 420px; }
.stg .btn-danger { color: var(--red); background: rgba(215,0,21,0.08); border: 1px solid rgba(215,0,21,0.28); padding: 12px 20px; margin-top: 16px; }
.stg .btn-danger:hover { background: rgba(215,0,21,0.14); }

/* BYOK connected status + api-key new callout reuse acc-row/callout above.
   Billing card keeps its global tcp-* inner markup; only the shell is .card. */
.stg .card .tcp-bill-toggle { margin-top: 10px; }

@media (max-width: 720px) {
  .stg .inv-head { display: none; }
  .stg .inv-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stg .inv-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .stg .page-title { font-size: 25px; }
}

/* ============================================================
   Фидбэк (admin) — .fbx (1:1 REFERENCE-feedback)
   Строка-мета: статус ЗАКРЕПЛЁН справа (.st flex:none); тип+почта+
   дата+роут в .left (flex:1) с внутренним flex-wrap. KPI — 4 колонки.
   ============================================================ */
.fbx {
  --surface: #FFFFFF; --surface-2: #F5F5F7; --bg: #F5F5F7;
  --text: #1D1D1F; --text-2: #86868B; --text-3: #A1A1A6;
  --border: rgba(0,0,0,0.07); --border-soft: rgba(0,0,0,0.06); --border-strong: rgba(0,0,0,0.10);
  --chip: #ECECEE; --chip-2: #F0F0F2;
  --green: #30A46C; --green-hover: #2b9460; --green-soft: rgba(48,164,108,0.10);
  --red: #D70015; --red-soft: rgba(215,0,21,0.08);
  --amber: #B26A00; --amber-dot: #E8912A; --amber-soft: rgba(245,158,11,0.12);
  max-width: 1120px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; gap: 18px; padding-bottom: 60px;
}
html[data-theme="dark"] .fbx {
  --surface: #1A1A1C; --surface-2: #151517; --bg: #0E0E10;
  --text: #F5F5F7; --text-2: #98989D; --text-3: #6E6E73;
  --border: rgba(255,255,255,0.09); --border-soft: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.14);
  --chip: #26262A; --chip-2: #202024;
  --green: #3DD68C; --green-hover: #33c07d; --green-soft: rgba(61,214,140,0.12);
  --red: #FF5A5A; --red-soft: rgba(255,90,90,0.12);
  --amber: #E8B463; --amber-dot: #E8912A; --amber-soft: rgba(232,180,99,0.14);
}
.fbx .num { font-variant-numeric: tabular-nums; }
.fbx .mono { font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); }
.fbx a { text-decoration: none; color: inherit; }

.fbx .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fbx .head h1 { display: flex; align-items: center; gap: 11px; font-size: 30px; font-weight: 700; letter-spacing: -0.7px; margin: 0; color: var(--text); }
.fbx .head h1 i, .fbx .head h1 svg { width: 27px; height: 27px; color: var(--text-2); }
.fbx .head .desc { font-size: 14px; color: var(--text-2); margin-top: 8px; }

.fbx .card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }

/* verdict */
.fbx .verdict { padding: 18px 22px; display: flex; flex-direction: row; align-items: center; gap: 16px; text-align: left; }
.fbx .verdict .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--green-soft); display: flex; align-items: center; justify-content: center; flex: none; }
.fbx .verdict .ico i, .fbx .verdict .ico svg { width: 22px; height: 22px; color: var(--green); }
.fbx .verdict .body { flex: 1; min-width: 0; }
.fbx .verdict .cap { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; color: var(--text-3); margin-bottom: 3px; }
.fbx .verdict .txt { font-size: 15.5px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.45; color: var(--text); }
.fbx .verdict .pill { display: flex; align-items: center; gap: 6px; background: var(--amber-soft); color: var(--amber); font-size: 13px; font-weight: 600; border-radius: 999px; padding: 7px 14px; flex: none; }
.fbx .verdict .pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber-dot); display: inline-block; }
.fbx .verdict .pill.done { background: var(--green-soft); color: var(--green); }
.fbx .verdict .pill.done i { background: var(--green); }

/* KPI — 4 columns */
.fbx .kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.fbx .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; }
.fbx .kpi .lbl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.fbx .kpi .lbl i, .fbx .kpi .lbl svg { width: 15px; height: 15px; }
.fbx .kpi .v { font-size: 27px; font-weight: 700; letter-spacing: -0.6px; margin-top: 8px; color: var(--text); }

/* toolbar */
.fbx .toolbar { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-top: 2px; }
.fbx .segments { display: flex; background: var(--chip); border-radius: 11px; padding: 3px; gap: 2px; }
.fbx .segments button { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); background: transparent; border: none; border-radius: 9px; padding: 7px 14px; cursor: pointer; }
.fbx .segments button i, .fbx .segments button svg { width: 14px; height: 14px; }
.fbx .segments button.active { color: var(--text); background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.fbx .search { position: relative; flex: 1; min-width: 220px; }
.fbx .search i, .fbx .search svg { width: 17px; height: 17px; color: var(--text-3); position: absolute; left: 13px; top: 50%; transform: translateY(-50%); }
.fbx .search input { width: 100%; height: 44px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; padding: 0 14px 0 38px; font-size: 14px; color: var(--text); outline: none; }
.fbx .search input:focus { border-color: var(--green); }
.fbx .status-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; font-size: 14px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; padding: 0 15px; cursor: pointer; }
.fbx .status-btn .mut { color: var(--text-2); }
.fbx .status-btn i, .fbx .status-btn svg { width: 15px; height: 15px; color: var(--text-2); }
.fbx .status-btn select { appearance: none; -webkit-appearance: none; border: none; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; outline: none; padding: 0; }

/* feedback list */
.fbx .list { overflow: hidden; }
.fbx .fb { padding: 18px 22px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 9px; }
.fbx .fb:first-child { border-top: none; }
.fbx .fb.is-resolved { opacity: 0.6; }
.fbx .fb .meta { display: flex; align-items: flex-start; gap: 12px; }
.fbx .fb .meta .left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1; min-width: 0; }
.fbx .type { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; border-radius: 8px; padding: 4px 10px; }
.fbx .type i, .fbx .type svg { width: 14px; height: 14px; }
.fbx .type.bug { color: var(--red); background: var(--red-soft); }
.fbx .type.idea { color: var(--amber); background: var(--amber-soft); }
.fbx .type.other { color: var(--text-3); background: var(--chip); }
.fbx .fb .em { font-size: 14px; font-weight: 600; color: var(--text); }
.fbx .fb .ts { font-size: 12.5px; color: var(--text-3); }
.fbx .fb .route { font-size: 12px; color: var(--text-3); background: var(--chip-2); border-radius: 6px; padding: 2px 8px; }
.fbx .st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 5px 12px; flex: none; }
.fbx .st i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.fbx .st.proc { color: var(--amber); background: var(--amber-soft); }
.fbx .st.proc i { background: var(--amber-dot); }
.fbx .st.done { color: var(--green); background: var(--green-soft); }
.fbx .st.done i { background: var(--green); }
.fbx form.st-form { margin: 0; flex: none; }
.fbx button.st { border: none; cursor: pointer; font-family: inherit; }
.fbx button.st:hover { filter: brightness(0.96); }
.fbx .fb .txt { font-size: 14.5px; color: var(--text); line-height: 1.55; white-space: pre-line; max-width: 820px; }

/* empty */
.fbx .empty { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 48px 24px; text-align: center; color: var(--text-3); font-size: 14px; }

@media (max-width: 720px) {
  .fbx .kpis { grid-template-columns: 1fr 1fr; }
  .fbx .head h1 { font-size: 25px; }
  .fbx .search { order: 3; flex: 1 1 100%; }
}

/* ============================================================
   Расход AI по юзерам (admin) — .aix (1:1 REFERENCE-rashod)
   Обе таблицы: header и строки делят ОДНУ grid-template-columns.
   .main — обычный поток (НЕ height:100vh + flex overflow).
   ============================================================ */
.aix {
  --surface: #FFFFFF; --bg: #F5F5F7;
  --text: #1D1D1F; --text2: #86868B; --text3: #A1A1A6; --muted: #6E6E73;
  --green: #30A46C; --amber: #B26A00; --violet: #8A5CD1;
  --border: rgba(0,0,0,0.07); --divider: rgba(0,0,0,0.06); --chip: #ECECEE; --chip2: #F0F0F2;
  display: flex; flex-direction: column; gap: 18px; padding-bottom: 60px;
}
html[data-theme="dark"] .aix {
  --surface: #141416; --bg: #08080A;
  --text: #F5F5F7; --text2: #98989D; --text3: #6E6E73; --muted: #98989D;
  --green: #32D74B; --amber: #E8B463; --violet: #B99CE8;
  --border: rgba(255,255,255,0.09); --divider: rgba(255,255,255,0.07); --chip: #1c1c1e; --chip2: #202024;
}
.aix .num { font-variant-numeric: tabular-nums; }
.aix a { text-decoration: none; color: inherit; }

.aix .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.aix .head__title { display: flex; align-items: center; gap: 13px; }
.aix .head__title i, .aix .head__title svg { width: 27px; height: 27px; color: var(--text-2); }
.aix .head__title h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; margin: 0; color: var(--text); }
.aix .head__sub { font-size: 13.5px; color: var(--text2); max-width: 440px; line-height: 1.5; text-align: right; margin-top: 4px; }

.aix .periods { display: flex; gap: 8px; flex-wrap: wrap; }
.aix .chip { padding: 7px 15px; border-radius: 9px; font-size: 13.5px; cursor: pointer; background: var(--chip); color: var(--muted); font-weight: 500; border: none; text-decoration: none; }
.aix .chip.is-active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
html[data-theme="dark"] .aix .chip.is-active { box-shadow: none; border: 1px solid var(--border); }

/* verdict */
.aix .verdict { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 22px; display: flex; flex-direction: row; align-items: center; gap: 16px; text-align: left; }
.aix .verdict__ic { width: 44px; height: 44px; flex: none; border-radius: 11px; background: rgba(48,164,108,0.12); display: flex; align-items: center; justify-content: center; color: var(--green); }
.aix .verdict__ic i, .aix .verdict__ic svg { width: 22px; height: 22px; }
.aix .verdict__body { flex: 1; min-width: 0; }
.aix .verdict__k { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; color: var(--text3); margin-bottom: 4px; }
.aix .verdict__t { font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--text); }
.aix .verdict__pill { flex: none; display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 99px; background: rgba(178,106,0,0.12); color: var(--amber); font-size: 13px; font-weight: 600; }
.aix .verdict__pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #E8912A; flex: none; }

/* KPIs */
.aix .kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.aix .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; }
.aix .kpi__l { font-size: 12.5px; color: var(--text2); margin-bottom: 10px; }
.aix .kpi__v { font-size: 28px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.aix .kpi__v.green { color: var(--green); }
.aix .kpi__v.sm { font-size: 21px; letter-spacing: -0.3px; }
.aix .kpi__v .sep { color: #C7C7CC; font-weight: 500; }
.aix .kpi__h { font-size: 11.5px; color: var(--text3); margin-top: 6px; }

/* section title */
.aix .sec { display: flex; align-items: center; gap: 11px; margin-top: 8px; }
.aix .sec i, .aix .sec svg { width: 24px; height: 24px; color: var(--text); }
.aix .sec h2 { font-size: 23px; font-weight: 700; letter-spacing: -0.4px; margin: 0; color: var(--text); }

/* tables — header + rows share ONE grid-template-columns */
.aix .card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow-x: auto; }
.aix .thead, .aix .trow { display: grid; gap: 16px; align-items: center; padding: 13px 22px; }
.aix .thead { padding: 14px 22px; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; color: var(--text3); }
.aix .trow { border-top: 1px solid var(--divider); }
.aix .r { text-align: right; }
.aix .l { text-align: left; }

/* feature table */
.aix .tbl-feat .thead, .aix .tbl-feat .trow { grid-template-columns: minmax(0,1fr) 150px 120px 110px 210px; min-width: 780px; }
.aix .fname { font-size: 14px; color: var(--text); }
.aix .fmono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12.5px; background: var(--chip2); color: var(--muted); padding: 3px 9px; border-radius: 6px; display: inline-block; }
.aix .cell-plat { font-size: 14px; font-weight: 600; color: var(--green); }
.aix .cell-plat.zero { color: var(--text3); font-weight: 600; }
.aix .cell-sec { font-size: 14px; color: var(--muted); }
.aix .share { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.aix .bar { flex: 1; max-width: 120px; height: 6px; border-radius: 99px; background: var(--chip); overflow: hidden; }
.aix .bar > i { display: block; height: 100%; border-radius: 99px; background: var(--green); }
.aix .share__v { width: 36px; text-align: right; font-size: 13.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* user table */
.aix .tbl-user .thead, .aix .tbl-user .trow { grid-template-columns: minmax(0,1fr) 128px 104px 92px 116px 116px 128px; min-width: 900px; }
.aix .uemail { display: flex; align-items: center; gap: 9px; min-width: 0; }
.aix .uemail > span:first-child { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aix .byok { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; color: var(--violet); background: rgba(138,92,209,0.12); padding: 2px 7px; border-radius: 6px; }
.aix .tok { font-size: 13.5px; color: var(--text2); }

.aix .empty { padding: 40px 22px; text-align: center; color: var(--text3); font-size: 14px; }
.aix .foot { font-size: 12px; color: var(--text3); text-align: center; max-width: 760px; margin: 6px auto 0; line-height: 1.5; }

@media (max-width: 720px) {
  .aix .kpis { grid-template-columns: 1fr 1fr; }
  .aix .head__sub { text-align: left; }
  .aix .head__title h1 { font-size: 25px; }
}

/* ============================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ «Сделки» (≤767px) — карточка «Метрики ТС по
   сделкам» 1:1 по хэндоффу design_handoff_mobile_deals. Только @media;
   десктоп/базовый CSS и HTML не тронуты (лишние метрики скрыты, 6 нужных
   переставлены order'ом). Порядок div'ов в .metrics-grid (шаблон trades.html):
   1 Сделок · 2 Винрейт · 3 Expectancy · 4 Профит-фактор · 5 RR ·
   6 Макс.просадка · 7 Recovery · 8 Сумма R · 9 Avg W/L · 10 Loss streak.
   ============================================================ */
@media (max-width: 767px) {
  /* Верхняя строка Депозит / Net Profit / Баланс — на мобиле убрана. */
  .sdx .metrics-money { display: none; }

  /* Заголовок карточки метрик = .metrics-head из эталона (не трогаем equity). */
  .sdx .card--pad:not(.equity) .card__title {
    font-size: 15px; font-weight: 600;
    margin-bottom: 16px; padding-bottom: 16px;
    border-bottom: 1px solid var(--sdx-bd);
  }

  /* 6 метрик сеткой 3×2, gap 20/12; лишние 4 скрыты. */
  .sdx .metrics-grid { grid-template-columns: repeat(3, 1fr); gap: 20px 12px; padding-top: 0; }
  .sdx .metrics-grid > div:nth-child(3),
  .sdx .metrics-grid > div:nth-child(7),
  .sdx .metrics-grid > div:nth-child(9),
  .sdx .metrics-grid > div:nth-child(10) { display: none; }

  /* Порядок ПО РЯДАМ: Сделок·Профит-фактор·Макс.просадка / Винрейт·RR·Сумма R.
     Выравнивание ПО КОЛОНКАМ: left / center / right (края симметричны). */
  .sdx .metrics-grid > div:nth-child(1) { order: 1; text-align: left; }
  .sdx .metrics-grid > div:nth-child(4) { order: 2; text-align: center; }
  .sdx .metrics-grid > div:nth-child(6) { order: 3; text-align: right; }
  .sdx .metrics-grid > div:nth-child(2) { order: 4; text-align: left; }
  .sdx .metrics-grid > div:nth-child(5) { order: 5; text-align: center; }
  .sdx .metrics-grid > div:nth-child(8) { order: 6; text-align: right; }

  .sdx .metrics-grid .lbl { font-size: 12px; color: var(--sdx-text3); margin-bottom: 5px; }
  .sdx .metrics-grid .v { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; }
}

/* Мобильные карточки сделок — по умолчанию скрыты (десктоп = таблица). */
.sdx .trades-cards { display: none; }
/* Мобильные карточки торговых дней — по умолчанию скрыты (десктоп = таблица). */
.dayx .day-cards { display: none; }
/* Мобильные карточки скипов — по умолчанию скрыты (десктоп = таблица). */
.skx .skip-cards { display: none; }

/* ============================================================
   МОБИЛЬНЫЙ ВИД «как в прилке» (≤767px): убираем сайдбар/бургер,
   оставляем нижнее меню (tabbar) + верхний app bar (лого+язык+тема);
   таблица «Сделки» → карточки. Только @media, десктоп не тронут.
   ============================================================ */
@media (max-width: 767px) {
  /* Навигация: сайдбар/бургер/оверлей убраны — нав через нижнее меню. */
  .tcp-nav-burger { display: none; }
  .tcp-sidebar { display: none; }
  .tcp-nav-overlay { display: none; }
  .tcp-topbar { height: 54px; padding: 0 16px; }
  .tcp-topbar-ctrls { display: flex; align-items: center; gap: 8px; margin-left: auto; }

  /* «Сделки»: Макс.просадка — только % (R-часть скрыта). */
  .sdx .metrics-grid .dd-r { display: none; }

  /* KPI 2×2 под спеку. */
  .sdx .kpis { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sdx .kpi .v { font-size: 23px; }

  /* «Торговый день»: KPI 2×2, таблица → карточки. */
  .dayx .kpis { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dayx .kpi .v { font-size: 23px; }
  .dayx .tbl { display: none; }
  .dayx .day-cards { display: flex; flex-direction: column; gap: 12px; }
  .dayx .day-card { display: block; background: var(--bg-1); border: 1px solid var(--border); border-radius: 16px; padding: 15px 16px; color: var(--text-1); }
  .dayx .day-card .dc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .dayx .day-card .dc-date { font-size: 16px; font-weight: 700; color: var(--text-1); }
  .dayx .day-card .dc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
  .dayx .day-card .dc-grid .k { font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
  .dayx .day-card .dc-grid .v { font-size: 15px; font-weight: 600; color: var(--text-1); }

  /* ── «Скипы» 1:1 по REFERENCE-mobile-app (§skips) ── */
  /* Шапка: заголовок слева + 44×44 зелёная «+» справа (не стекать в столбец). */
  .skx.sdx .page-head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .skx.sdx .head-actions { width: auto; }
  .skx.sdx .head-actions .btn--primary { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 13px; flex: none; overflow: hidden; box-shadow: 0 2px 10px rgba(48,164,108,0.28); }
  .skx.sdx .head-actions .btn--primary .btn-label { display: none; }
  .skx.sdx .head-actions .btn--primary i, .skx.sdx .head-actions .btn--primary svg { width: 20px; height: 20px; }
  /* Чего нет в эталоне на мобиле — скрываем (разбивки, селекты, чипы-фильтры). Поиск остаётся. */
  .skx .breakdowns { display: none; }
  .skx .toolbar { display: block; }
  .skx .toolbar .select { display: none; }
  .skx .chips { display: none; }
  /* Таблица → карточки. */
  .skx .skip-cards { display: flex; flex-direction: column; gap: 10px; }
  .skx .sc-list-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); padding: 2px 2px 0; }
  .skx .skip-card { display: block; background: var(--bg-1); border: 1px solid var(--border); border-radius: 16px; padding: 15px 16px; color: var(--text-1); }
  .skx .skip-card .sc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .skx .skip-card .sc-l { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .skx .skip-card .sc-l .sym { font-size: 16px; font-weight: 700; color: var(--text-1); }
  .skx .skip-card .sc-l .setup { font-size: 12px; font-weight: 700; color: var(--text-3); background: var(--bg-2); border-radius: 7px; padding: 3px 9px; flex: none; }
  .skx .skip-card .sc-date { font-size: 12px; color: var(--text-2); flex: none; }
  .skx .skip-card .sc-chips { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
  .skx .skip-card .sc-reason-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); background: var(--bg-2); border-radius: 9px; padding: 6px 10px; }
  .skx .skip-card .sc-reason-chip i, .skx .skip-card .sc-reason-chip svg { width: 14px; height: 14px; color: var(--text-2); flex: none; }
  .skx .skip-card .sc-would { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; border-radius: 9px; padding: 6px 10px; }
  .skx .skip-card .sc-would i, .skx .skip-card .sc-would svg { width: 14px; height: 14px; }
  .skx .skip-card .sc-would.is-saved { color: var(--green); background: var(--green-dim); }
  .skx .skip-card .sc-would.is-missed { color: var(--red); background: var(--red-dim); }
  .skx .skip-card .sc-note { font-size: 12.5px; color: var(--text-2); margin-top: 10px; line-height: 1.5; }

  /* Таблица → карточки. */
  .sdx .card:has(> .tbl-head) { display: none; }
  .sdx .trades-cards { display: flex; flex-direction: column; gap: 12px; }
  .sdx .trade-card { display: block; background: var(--surface); border: 1px solid var(--sdx-bd); border-radius: 16px; padding: 15px 16px; color: var(--sdx-text); }
  .sdx .trade-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .sdx .trade-top .tc-l { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .sdx .trade-top .sym { font-size: 16px; font-weight: 700; }
  .sdx .trade-top .setup { font-size: 12px; font-weight: 700; color: var(--sdx-green); background: var(--green-soft); border-radius: 7px; padding: 3px 9px; flex: none; }
  .sdx .trade-top .dir { display: flex; align-items: center; gap: 6px; color: var(--sdx-green); font-weight: 600; font-size: 14px; flex: none; }
  .sdx .trade-top .dir.is-short { color: #D70015; }
  .sdx .trade-top .dir i, .sdx .trade-top .dir svg { width: 12px; height: 12px; }
  .sdx .trade-meta { font-size: 12.5px; color: var(--sdx-muted); margin-top: 6px; }
  .sdx .trade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sdx-bd); }
  .sdx .trade-grid .k { font-size: 11px; color: var(--sdx-muted); margin-bottom: 4px; }
  .sdx .trade-grid .v { font-size: 15px; font-weight: 600; color: var(--sdx-text3); }
  .sdx .trade-grid .v.g { font-weight: 700; color: var(--sdx-green); white-space: nowrap; }
  .sdx .trade-grid .v.r { font-weight: 700; color: #D70015; white-space: nowrap; }
  .sdx .trade-card .rules { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--sdx-green); background: var(--green-soft); border: 1px solid var(--sdx-bd); border-radius: 10px; padding: 9px 12px; }
  .sdx .trade-card .rules i, .sdx .trade-card .rules svg { width: 15px; height: 15px; }
  .sdx .trade-card .rules.bad { color: #D70015; background: rgba(215,0,21,0.10); }
}

@media (max-width: 767px) {
  /* Шапка «Сделки» стекается, кнопки на всю ширину (фикс переполнения). */
  .sdx .page-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .sdx .page-head h1 { font-size: 25px; letter-spacing: -0.6px; }
  .sdx .page-head h1 i, .sdx .page-head h1 svg { width: 23px; height: 23px; }
  .sdx .head-actions { width: 100%; gap: 10px; }
  .sdx .head-actions .btn--primary { flex: 1; justify-content: center; }
  /* Чипы-фильтры — горизонтальный скролл в пределах экрана. */
  .sdx .chips { overflow-x: auto; scrollbar-width: none; }
  .sdx .chips::-webkit-scrollbar { display: none; }
}

/* Панель уведомлений (колокольчик) — фича ТОЛЬКО для мобилки. Глобально скрыта,
   чтобы на десктопе (где нет топбара/колокола) её разметка не рендерилась блоком
   вверху страницы. Показ включается ниже, в @media ≤767px по чекбоксу. */
.tcp-notif-panel, .tcp-notif-overlay { display: none !important; }
@media (max-width: 767px) {
  body:has(#tcpNotifToggle:checked) .tcp-notif-overlay { display: block !important; }
  body:has(#tcpNotifToggle:checked) .tcp-notif-panel { display: flex !important; }
}

/* ============================================================
   МОБИЛЬНАЯ ОБОЛОЧКА по хэндоффу handoff-mobile (REFERENCE-mobile-app):
   app-bar (§1) + плоский нижний таб-бар (§2). Только @media ≤767px
   (брейкпоинт оболочки — все телефоны; 430 в спеке = ширина мок-девайса).
   Цвета — существующие tcp.css переменные (--card→--bg-1, --chip→--bg-2,
   --tabIdle→--text-3, --handle→--text-3@opacity). Десктоп не тронут.
   ============================================================ */
@media (max-width: 767px) {
  /* App-bar §1: 54px, лого слева, bell+moon справа. */
  .tcp-topbar { height: 54px; padding: 0 18px; gap: 11px; background: var(--bg-1); border-bottom: 1px solid var(--border); }
  /* Брендмарк по эталону Home Mobile: чип 34×34 r10 + «Trading Copilot» рядом. */
  .tcp-topbar .tcp-logo { gap: 11px; }
  .tcp-topbar .tcp-logo-chip { width: 34px; height: 34px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border-md); font-size: 12px; font-weight: 800; letter-spacing: -0.6px; color: var(--text-1); }
  .tcp-topbar .tcp-logo-name { display: inline; font-size: 16px; font-weight: 700; letter-spacing: -0.3px; }
  .tcp-topbar .tcp-logo-name span { font-weight: 500; color: var(--text-2); }
  .tcp-appbar-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--bg-2); border: none; color: var(--text-3); cursor: pointer; text-decoration: none; }
  .tcp-appbar-btn i { font-size: 18px; }
  .tcp-appbar-dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid var(--bg-2); }
  .tcp-appbar-badge { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; border: 2px solid var(--bg-1); }

  /* ── Панель уведомлений (колокольчик) — дропдаун (правка Отчима: колокол =
     уведомления как в нормальных приложениях, а не переход на новости) ── */
  /* Показ/скрытие — глобальными !important-правилами выше (мобилка-only); здесь
     только стиль/позиция панели и оверлея. */
  .tcp-notif-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.32); }
  .tcp-notif-panel { position: fixed; top: 60px; right: 12px; z-index: 61; width: min(360px, calc(100vw - 24px)); max-height: 72vh; flex-direction: column; background: var(--bg-1); border: 1px solid var(--border-md); border-radius: 16px; box-shadow: 0 24px 60px -16px rgba(0,0,0,0.5); overflow: hidden; animation: tcp-notif-in .16s ease; }
  @keyframes tcp-notif-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
  .tcp-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid var(--border); flex: none; }
  .tcp-notif-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: -0.2px; color: var(--text-1); }
  .tcp-notif-title i, .tcp-notif-title svg { color: var(--green); }
  .tcp-notif-close { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-2); display: flex; align-items: center; justify-content: center; color: var(--text-2); cursor: pointer; flex: none; }
  .tcp-notif-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .tcp-notif-group { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding: 12px 14px 6px; }
  .tcp-notif-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 14px; text-decoration: none; color: var(--text-1); border-top: 1px solid var(--border); }
  .tcp-notif-row:first-of-type { border-top: 0; }
  .tcp-notif-row:active { background: var(--bg-2); }
  .tcp-notif-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--red-dim); color: var(--red); display: flex; align-items: center; justify-content: center; flex: none; }
  .tcp-notif-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .tcp-notif-t { font-size: 13.5px; line-height: 1.35; color: var(--text-1); }
  .tcp-notif-t b { font-weight: 700; }
  .tcp-notif-sub { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
  .tcp-notif-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 20px; color: var(--text-3); text-align: center; font-size: 13px; }
  .tcp-notif-empty i, .tcp-notif-empty svg { color: var(--text-4); }
  .tcp-notif-foot { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 13px; font-size: 13px; font-weight: 600; color: var(--green); text-decoration: none; border-top: 1px solid var(--border); flex: none; }

  /* Нижний таб-бар — «liquid glass» плавающая пилюля (эталон Home Mobile — DEV-2).
     Контент скроллится ПОД баром (бар поверх скролла, не в потоке). */
  .tcp-tabbar {
    left: 14px; right: 14px; bottom: 24px;
    z-index: 5;
    background: var(--glass);
    backdrop-filter: blur(26px) saturate(1.8); -webkit-backdrop-filter: blur(26px) saturate(1.8);
    border: 1px solid var(--glassLine);
    border-radius: 30px;
    padding: 9px 8px;
    box-shadow: 0 18px 44px -16px rgba(0,0,0,0.38);
    justify-content: space-around;
  }
  .tcp-tab { min-height: 0; gap: 4px; padding: 4px 0; border-radius: 22px; }
  .tcp-tab i { font-size: 22px; }
  .tcp-tab span { font-size: 10.5px; letter-spacing: -0.1px; }
  /* Полоску home-индикатора убрали (правка Отчима 2026-07-04): на реальном
     телефоне есть системная — наша дублировала. Элемент удалён из base.html. */

  /* Контент: место под плавающий таб-бар (эталон: 108px). */
  .tcp-main { padding-bottom: 108px; }
  .tcp-asst-fab { bottom: 150px !important; }
  .tcp-fb-fab { bottom: 92px !important; }
}

/* ── /share мобилка: колонка RR% скрыта (у брокерских сделок RR нет — вся колонка «—»),
     ширина уходит инструменту (правка Отчима 2026-07-05). RR остаётся в раскрывашке сделки. ── */
@media (max-width: 767px) {
  .ppx .tcolg { grid-template-columns: 78px minmax(0, 1fr) 84px; gap: 8px; }
  .ppx .trades-cols span:nth-child(3) { display: none; }   /* заголовок RR% */
  .ppx .trow .rr { display: none; }                        /* ячейка RR */
}


/* ── Мини-markdown в пузырях AI-ассистента ── */
.tcp-chat-bubble .md-h { display: block; font-weight: 700; margin: 8px 0 2px; }
.tcp-chat-bubble .md-hr { display: block; border-top: 1px solid var(--border-md); margin: 9px 0; }
.tcp-chat-bubble b { font-weight: 700; }
.tcp-chat-bubble code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 0.92em; color: var(--text-1); background: var(--bg-2); border-radius: 5px; padding: 1px 5px; }
/* Markdown-таблицы в ответах AI (| a | b | / |---|---|) → настоящая таблица.
   Обёртка со скроллом, чтобы широкая таблица не ломала узкий пузырь на мобиле. */
.tcp-chat-bubble .md-tw { display: block; overflow-x: auto; margin: 8px 0; -webkit-overflow-scrolling: touch; }
.tcp-chat-bubble .md-tbl { border-collapse: collapse; width: 100%; font-size: 12.5px; white-space: normal; }
.tcp-chat-bubble .md-tbl th, .tcp-chat-bubble .md-tbl td { border: 0.5px solid var(--border-md); padding: 5px 9px; text-align: left; vertical-align: top; }
.tcp-chat-bubble .md-tbl th { font-weight: 700; background: rgba(128, 128, 128, 0.14); }