/* ===== TradingHub Journal — design tokens (dataviz palette) ===== */
:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --surface-2: #ffffff;
  --surface-raised: #ffffff;
  --page: #f5f5f2;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11,11,11,0.09);
  --border-strong: rgba(11,11,11,0.16);

  --series-1: #2a78d6; /* blue */
  --series-2: #eb6834; /* orange */
  --series-3: #1baf7a; /* aqua */
  --series-4: #eda100; /* yellow */
  --series-5: #e87ba4; /* magenta */
  --series-6: #008300; /* green */
  --series-7: #4a3aa7; /* violet */
  --series-8: #e34948; /* red */

  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --success-text: #006300;

  /* бренд-акцент (індиго-віолет + бірюзовий відблиск) — керує "хромом" застосунку: кнопками,
     активними станами, іконками, склом карток. НЕ чіпає --series-1..8 вище — та палітра лишається
     окремою, валідованою під дані графіків, і акцент на неї не впливає. */
  --accent: #6d5ef5;
  --accent-2: #22d3ee;
  --glass-border: rgba(11,11,11,0.08);
  --glass-highlight: rgba(255,255,255,.55);
  --glass-surface: color-mix(in srgb, var(--surface-2) 68%, transparent);
  --glass-surface-strong: color-mix(in srgb, var(--surface-2) 86%, transparent);

  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(11,11,11,0.04), 0 8px 20px -6px rgba(11,11,11,0.08);
  --shadow-hover: 0 2px 6px rgba(11,11,11,0.06), 0 14px 32px -10px rgba(11,11,11,0.14);
  --shadow-pop: 0 12px 40px -8px rgba(11,11,11,0.28);
  --font: -apple-system, BlinkMacSystemFont, "Inter", system-ui, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2,.7,.3,1);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1: #17171a;
    --surface-2: #1c1c20;
    --surface-raised: #212126;
    --page: #101013;
    --text-primary: #f4f4f3;
    --text-secondary: #b7b6b0;
    --text-muted: #7d7c78;
    --grid: #29292d;
    --baseline: #3a3a3f;
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.14);
    --series-1: #4c93f0;
    --series-2: #e2712f;
    --series-3: #22b384;
    --series-4: #d99500;
    --series-5: #dd6795;
    --series-6: #2fae2f;
    --series-7: #9a90ee;
    --series-8: #ea7676;
    --success-text: #23c623;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -6px rgba(0,0,0,0.5);
    --shadow-hover: 0 2px 8px rgba(0,0,0,0.35), 0 18px 40px -10px rgba(0,0,0,0.55);
    --shadow-pop: 0 20px 60px -10px rgba(0,0,0,0.6);
    --accent: #8b7cf6;
    --accent-2: #38e0f5;
    --glass-border: rgba(255,255,255,0.10);
    --glass-highlight: rgba(255,255,255,.09);
    --glass-surface: color-mix(in srgb, var(--surface-2) 56%, transparent);
    --glass-surface-strong: color-mix(in srgb, var(--surface-2) 82%, transparent);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #17171a;
  --surface-2: #1c1c20;
  --surface-raised: #212126;
  --page: #101013;
  --text-primary: #f4f4f3;
  --text-secondary: #b7b6b0;
  --text-muted: #7d7c78;
  --grid: #29292d;
  --baseline: #3a3a3f;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --series-1: #4c93f0;
  --series-2: #e2712f;
  --series-3: #22b384;
  --series-4: #d99500;
  --series-5: #dd6795;
  --series-6: #2fae2f;
  --series-7: #9a90ee;
  --series-8: #ea7676;
  --success-text: #23c623;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -6px rgba(0,0,0,0.5);
  --shadow-hover: 0 2px 8px rgba(0,0,0,0.35), 0 18px 40px -10px rgba(0,0,0,0.55);
  --shadow-pop: 0 20px 60px -10px rgba(0,0,0,0.6);
  --accent: #8b7cf6;
  --accent-2: #38e0f5;
  --glass-border: rgba(255,255,255,0.10);
  --glass-highlight: rgba(255,255,255,.09);
  --glass-surface: color-mix(in srgb, var(--surface-2) 56%, transparent);
  --glass-surface-strong: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* overflow-x: hidden на html/body/#app виглядає нешкідливо, але має неочевидний побічний ефект:
   якщо overflow-y лишається "visible", браузер за специфікацією ЗМУШЕНИЙ негласно перевести
   overflow-y теж в "auto" — і html/body/#app раптом стають власними скрол-контейнерами.
   Це ламає position:sticky в лівому меню (воно "прилипає" вже не до вікна, а до цього
   внутрішнього контейнера, який рівно 100vh заввишки й тому одразу ж обрізає меню при
   прокрутці) і викликає періодичне сіпання сторінки — щоразу як JS оновлює якийсь блок
   (напр. живий P/L активних угод раз на ~10с), браузер перерахунковує зайвий скрол-контекст.
   overflow-x: clip клипає той самий горизонтальний "стрибок" ширини від TradingView-віджета,
   але, на відміну від hidden, не тягне за собою автоматичне перетворення overflow-y —
   тому лишаємо hidden лише як фолбек для зовсім старих браузерів, які clip не розуміють */
html { overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--page);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
}
#app { max-width: 100vw; overflow-x: hidden; overflow-x: clip; }

/* мінімалістичний скролбар */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- layout ---------- */
/* УВАГА: position:relative + z-index тут створює новий stacking context — усе, що лежить
   ВСЕРЕДИНІ #app (включно з .sidebar, навіть з position:fixed і високим z-index), більше не
   може візуально/по кліках перекрити елементи ПОЗА #app, хай там який в них z-index. Саме тому
   #sidebar-backdrop навмисно винесений усередину #app (перед .sidebar у index.html) — інакше
   мобільна висувна панель відкривається, але сам backdrop (сусід #app) перехоплює всі тапи по
   пунктах меню, і панель виглядає "непрацюючою". Модалки/тости не постраждали, бо їхні контейнери
   (#modal-root, #toast-root, #alert-root) лежать у DOM ПІСЛЯ #app, тобто поза цим контекстом. */
#app { display: flex; min-height: 100vh; position: relative; z-index: 0; }
/* декоративні розмиті плями бренд-кольору позаду всього застосунку — саме кольорове тло
   позаду робить розмиття (backdrop-filter) на склі карток/сайдбару взагалі помітним */
#app::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(680px 460px at 6% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%),
    radial-gradient(560px 420px at 97% 6%, color-mix(in srgb, var(--accent-2) 15%, transparent), transparent 60%),
    radial-gradient(640px 520px at 42% 105%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 65%);
}
:root:not([data-theme="light"]) #app::before,
:root[data-theme="dark"] #app::before {
  background:
    radial-gradient(680px 460px at 6% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 65%),
    radial-gradient(560px 420px at 97% 6%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 60%),
    radial-gradient(640px 520px at 42% 105%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%);
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--glass-surface-strong);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-right: 1px solid var(--glass-border);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .18s var(--ease);
}
/* ---- згорнута ліва панель — лишаються тільки іконки, підказки з назвами через title ---- */
.sidebar-collapse-btn {
  position: absolute; top: 20px; right: -12px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text-secondary); z-index: 5; padding: 0;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.sidebar-collapse-btn:hover { background: var(--border); color: var(--text-primary); }
.sidebar-collapse-btn svg { width: 13px; height: 13px; transition: transform .18s var(--ease); }
.sidebar.collapsed { width: 68px; }
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .sidebar-footer-text { display: none; }
.sidebar.collapsed .brand { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .navlink { justify-content: center; gap: 0; padding: 9px; }
.sidebar.collapsed .navlink.active::before { left: 0; }
@media (max-width: 900px) { .sidebar-collapse-btn { display: none; } }

/* ---------- мобільна шапка + висувна ліва панель ---------- */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }
@media (max-width: 860px) {
  .mobile-topbar {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 55;
    background: var(--glass-surface-strong);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--glass-border);
    padding: 10px 14px;
  }
  .mobile-menu-btn {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px;
    border: 1px solid var(--border); background: var(--surface-2);
    color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .mobile-menu-btn:active { background: var(--border); }
  .mobile-menu-btn svg { width: 19px; height: 19px; }
  .mobile-topbar .dot {
    width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .mobile-topbar .dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mobile-topbar-title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }

  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 70;
    width: 264px; max-width: 82vw; height: 100vh;
    transform: translateX(-100%);
    box-shadow: var(--shadow-pop);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  /* на мобільному шухляда завжди повнорозмірна — desktop-режим "тільки іконки" тут не діє */
  .sidebar.collapsed { width: 264px; }
  .sidebar.collapsed .brand-text,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-section-label,
  .sidebar.collapsed .sidebar-footer-text { display: initial; }
  .sidebar.collapsed .brand { justify-content: flex-start; padding-left: 8px; padding-right: 8px; }
  .sidebar.collapsed .navlink { justify-content: flex-start; gap: 11px; padding: 8px 10px; }

  .sidebar-backdrop.show {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(11,11,11,.45);
  }
}
.brand {
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  padding: 4px 8px 20px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.brand .dot {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 3px 10px -2px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
}
.brand .dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-section-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  padding: 14px 10px 6px;
  font-weight: 600;
}
.nav-section-label:first-of-type { padding-top: 4px; }
.navlink {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.navlink:hover { background: var(--border); color: var(--text-primary); }
.navlink.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
  color: var(--accent);
}
.navlink.active svg { color: var(--accent); }
.navlink.active::before {
  content: '';
  position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.navlink .ic { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.navlink .ic svg { width: 18px; height: 18px; }
.navlink:hover .ic { color: var(--text-secondary); }
.sidebar-footer {
  margin-top: auto;
  padding: 12px 10px 4px;
  font-size: 11.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: 14px;
  padding-top: 14px;
}

.main {
  flex: 1;
  min-width: 0;
  padding: 26px 32px 64px;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.topbar h1 {
  font-size: 22px; margin: 0; letter-spacing: -0.015em; font-weight: 700;
  /* легкий градієнтний перелив у бренд-акцент замість плаского кольору тексту */
  background: linear-gradient(135deg, var(--text-primary) 35%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topbar .sub { color: var(--text-secondary); font-size: 13px; margin-top: 3px; }

/* ---------- primitives ---------- */
/* картки — скло: напівпрозора поверхня, розмиття фону (backdrop-filter), тонка світла
   обвідка й "внутрішній блиск" зверху (inset-тінь), помітніший підйом на ховері. Кольорові
   плями позаду (#app::before) — те, що робить це розмиття взагалі видимим. */
.card {
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 18px;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow);
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.card + .card { margin-top: 14px; }
/* Всередині .grid картки вирівнюються самою сіткою (colonки/рядки) — скидаємо
   margin-top від сусіднього-селектора вище, інакше кожна картка в рядку, крім
   першої, "з'їжджає" на 14px вниз і рядок виглядає нерівним. */
.grid > .card + .card { margin-top: 0; }
.card:hover, .card[data-open-bt]:hover, a.card:hover {
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-hover);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--glass-border));
  transform: translateY(-3px);
}
.grid { display: grid; gap: 14px; align-items: stretch; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* картки-сутності (акаунти, бектести): контент і кнопки вирівнюються по нижньому краю,
   навіть коли опис/нотатки різної довжини — весь ряд лишається однакової висоти */
.entity-card { display: flex; flex-direction: column; height: 100%; }
.entity-card-footer { margin-top: auto; padding-top: 12px; }
@media (max-width: 1100px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--surface-1) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover { background: var(--border); border-color: var(--border-strong); }
.btn:active { transform: scale(0.97); }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 20px -4px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.primary:hover { filter: brightness(1.07); box-shadow: 0 6px 26px -4px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.danger { color: var(--critical); }
.btn.danger:hover { background: rgba(208,59,59,.1); border-color: rgba(208,59,59,.3); }
.btn.sm { padding: 5px 9px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.stat-tile { display: flex; flex-direction: column; gap: 8px; min-height: 96px; }
.stat-tile .icon-badge {
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
  color: var(--accent);
  margin-bottom: 2px;
}
.stat-tile .icon-badge svg { width: 16px; height: 16px; }
.stat-tile .icon-badge.tone-good { background: rgba(12,163,12,.14); color: var(--good); }
.stat-tile .icon-badge.tone-bad { background: rgba(208,59,59,.14); color: var(--critical); }
.stat-tile .icon-badge.tone-warn { background: rgba(250,178,25,.16); color: #b9820a; }
.stat-tile .label { color: var(--text-secondary); font-size: 12.5px; font-weight: 500; }
.stat-tile .value { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: proportional-nums; }
.stat-tile .delta { font-size: 12px; font-weight: 600; margin-top: auto; padding-top: 2px; }
.delta.up { color: var(--success-text); }
.delta.down { color: var(--critical); }

/* ---------- сучасна статистика бектесту (hero-картка, метрик-картки, стагер-анімація) ---------- */
@keyframes stat-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.stats-modern .card, .stats-modern .bt-hero, .stats-modern .metric-card {
  animation: stat-card-in .42s cubic-bezier(.16,.8,.3,1) both;
}
.stats-modern .card {
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.stats-modern .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(0,0,0,.4);
  border-color: color-mix(in srgb, var(--series-1) 25%, var(--grid));
}

.bt-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--series-1) 10%, var(--surface-2)), var(--surface-2) 60%);
  border: 1px solid var(--grid);
  flex-wrap: wrap;
}
.bt-hero-label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.bt-hero-value { font-size: 46px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; line-height: 1; font-variant-numeric: normal; }
.bt-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.bt-hero-kyiv { margin-top: 4px; font-variant-numeric: tabular-nums; }
.bt-hero-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface-1); border: 1px solid var(--grid);
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.bt-hero-spark { width: 220px; flex-shrink: 0; }
.bt-hero-spark-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; text-align: right; }
.sparkline-empty { height: 44px; }
/* картка "Зараз" (сторінка "Сьогодні") — таймлайн сесій нижче потребує колонкового
   макета замість звичного рядкового bt-hero (лейбл/ціна зліва, спарклайн справа) */
.bt-hero-stack { flex-direction: column; align-items: stretch; }

/* ---- горизонтальна стрічка котирувань у шапці сторінки "Сьогодні" ---- */
.topbar-ticker {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; padding: 4px 2px;
  scrollbar-width: thin;
}
.topbar-ticker::-webkit-scrollbar { height: 5px; }
.topbar-ticker::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 999px; }
.ticker-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.ticker-chip.clickable { cursor: pointer; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.ticker-chip.clickable:hover { border-color: var(--tc); transform: translateY(-1px); }
.ticker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tc); flex-shrink: 0; }
.ticker-label { color: var(--text-muted); }
.ticker-value, .ticker-chg { font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
  .topbar { flex-wrap: wrap; }
  .topbar-ticker { order: 3; flex-basis: 100%; }
}

/* ---- таймлайн торгових сесій у картці "Зараз" ---- */
.sess-timeline { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--grid); }
.sess-timeline-rows { position: relative; display: flex; flex-direction: column; gap: 7px; }
.sess-row { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 10px; }
.sess-row-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap;
  transition: color .18s var(--ease);
}
.sess-row.active .sess-row-label { color: var(--text-primary); }
.sess-row-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc); flex-shrink: 0; }
.sess-row-track {
  position: relative; height: 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  overflow: hidden;
}
.sess-row-bar {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: var(--sc); opacity: .3;
  transition: opacity .18s var(--ease);
}
.sess-row.active .sess-row-bar { opacity: 1; box-shadow: 0 0 12px -1px color-mix(in srgb, var(--sc) 65%, transparent); }
.sess-now-line {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--text-primary); border-radius: 2px; pointer-events: none;
}
.sess-now-line::before {
  content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-primary) 18%, transparent);
}
.sess-now-label {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap;
  background: var(--surface-1); border: 1px solid var(--grid);
  padding: 1px 7px; border-radius: 6px;
}
.sess-timeline-axis { display: grid; grid-template-columns: 104px 1fr; margin-top: 10px; }
.sess-timeline-axis-track { position: relative; height: 14px; }
.sess-timeline-axis-track span {
  position: absolute; transform: translateX(-50%);
  font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .sess-row { grid-template-columns: 78px 1fr; }
  .sess-row-label { font-size: 10.5px; }
  .sess-timeline-axis { grid-template-columns: 78px 1fr; }
}

/* ---------- онлайн аналітика (волатильність, pivot-рівні) ---------- */
.mkt-vol-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mkt-vol-row:last-of-type { margin-bottom: 0; }
.mkt-vol-label { width: 68px; flex-shrink: 0; font-size: 12.5px; color: var(--text-muted); }
.mkt-vol-bar-track { flex: 1; height: 14px; border-radius: 7px; background: var(--surface-1); border: 1px solid var(--grid); overflow: hidden; }
.mkt-vol-bar { height: 100%; border-radius: 7px; background: var(--series-3); transition: width .3s var(--ease); }
.mkt-vol-bar.high { background: var(--series-2); }
.mkt-vol-bar.low { background: var(--series-1); }
.mkt-vol-bar.avg { background: var(--text-muted); opacity: .55; }
.mkt-vol-value { width: 56px; flex-shrink: 0; text-align: right; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

.mkt-pivot-table { display: flex; flex-direction: column; border: 1px solid var(--grid); border-radius: var(--radius-sm); overflow: hidden; }
.mkt-pivot-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px; font-size: 13px; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--grid); color: var(--text-secondary);
}
.mkt-pivot-row:last-child { border-bottom: none; }
.mkt-pivot-row.pp { font-weight: 700; color: var(--text-primary); background: var(--surface-1); }
.mkt-pivot-row.price {
  font-weight: 800; color: #fff; background: var(--series-1);
  border-radius: 6px; margin: 2px 6px; padding: 8px 12px;
}

/* ---- технічні індикатори (MA / RSI) на "Онлайн аналітиці" ---- */
.mkt-ma-rows { display: flex; flex-direction: column; gap: 8px; }
.mkt-ma-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border: 1px solid var(--grid); border-radius: var(--radius-sm);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.mkt-ma-label { font-weight: 700; width: 56px; flex-shrink: 0; color: var(--text-secondary); }
.mkt-ma-value { flex: 1; }
.mkt-ma-badge { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.mkt-ma-badge.above { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.mkt-ma-badge.below { color: var(--critical); background: color-mix(in srgb, var(--critical) 14%, transparent); }

.mkt-rsi-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.mkt-rsi-value { font-weight: 800; font-size: 15px; color: var(--text-primary); }
.mkt-rsi-track { position: relative; height: 10px; border-radius: 5px; overflow: hidden; display: flex; }
.mkt-rsi-zone { height: 100%; }
.mkt-rsi-zone.os { width: 30%; background: color-mix(in srgb, var(--series-1) 45%, var(--surface-1)); }
.mkt-rsi-zone.mid { width: 40%; background: var(--surface-1); }
.mkt-rsi-zone.ob { width: 30%; background: color-mix(in srgb, var(--critical) 45%, var(--surface-1)); }
.mkt-rsi-marker {
  position: absolute; top: -3px; width: 3px; height: 16px; border-radius: 2px;
  background: var(--text-primary); transform: translateX(-1.5px);
}
.mkt-rsi-labels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-muted); margin-top: 5px; }

/* ---- новини по обраній парі на "Онлайн аналітиці" ---- */
.mkt-news-list { display: flex; flex-direction: column; }
.mkt-news-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 4px; border-bottom: 1px solid var(--grid); font-size: 13px;
}
.mkt-news-row:last-child { border-bottom: none; }
.mkt-news-row.past { opacity: .5; }
.mkt-news-time { width: 42px; flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.mkt-news-title { flex: 1; }
.mkt-news-status { white-space: nowrap; }

/* ---- 52-тижневий діапазон ---- */
.mkt-52w-track { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--series-1), var(--surface-1) 50%, var(--series-8)); }
.mkt-52w-marker {
  position: absolute; top: -4px; width: 3px; height: 18px; border-radius: 2px;
  background: var(--text-primary); transform: translateX(-1.5px);
  box-shadow: 0 0 0 2px var(--surface-2);
}
.mkt-52w-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-top: 8px; }

/* ---- калькулятор розміру позиції ---- */
.mkt-calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 4px; }
.mkt-calc-result {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 12px; padding: 14px 18px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--series-1) 10%, var(--surface-2)); border: 1px solid var(--grid);
}
.mkt-calc-result-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.mkt-calc-result-value { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin-top: 2px; }

/* ---- метр сили валют ---- */
.mkt-strength-rows { display: flex; flex-direction: column; gap: 10px; }
.mkt-strength-row { display: grid; grid-template-columns: 40px 1fr 64px; align-items: center; gap: 10px; }
.mkt-strength-label { font-weight: 700; font-size: 13px; }
.mkt-strength-bar-track { position: relative; height: 8px; border-radius: 4px; background: var(--surface-1); overflow: visible; }
.mkt-strength-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--grid); }
.mkt-strength-bar { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.mkt-strength-bar.pos { left: 50%; background: var(--good); }
.mkt-strength-bar.neg { right: 50%; background: var(--critical); }
.mkt-strength-value { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }

/* ---- мої рівні (S/R) ---- */
.mkt-levels-list { display: flex; flex-direction: column; margin-bottom: 12px; }
.mkt-levels-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid var(--grid); font-size: 13px;
}
.mkt-levels-row:last-child { border-bottom: none; }
.mkt-levels-badge { flex-shrink: 0; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.mkt-levels-badge.sup { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.mkt-levels-badge.res { background: color-mix(in srgb, var(--critical) 16%, transparent); color: var(--critical); }
.mkt-levels-price { font-variant-numeric: tabular-nums; font-weight: 700; width: 90px; flex-shrink: 0; }
.mkt-levels-note { flex: 1; }
.mkt-levels-add { display: grid; grid-template-columns: 140px 120px 1fr auto; gap: 8px; }
@media (max-width: 720px) { .mkt-levels-add { grid-template-columns: 1fr 1fr; } }

/* ---- SMT-розбіжність (пара / DXY) ---- */
.mkt-smt-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 13.5px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.mkt-smt-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--grid); }
.mkt-smt-col-label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.mkt-smt-col-value { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; margin-top: 2px; }
@media (max-width: 720px) { .mkt-smt-compare { grid-template-columns: 1fr; } }

/* ---- "Режим ризику" — власний risk-on/neutral/risk-off індикатор на "Онлайн аналітиці" ---- */
.rr-tile { padding: 12px 14px; border: 1px solid var(--grid); border-radius: var(--radius-sm); background: var(--surface-1); }
.rr-tile-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.rr-tile-value { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; }
.rr-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rr-chart-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.rr-comp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rr-comp-tile { padding: 10px 12px; border: 1px solid var(--grid); border-radius: var(--radius-sm); background: var(--surface-1); }
.rr-comp-label { font-size: 10.5px; color: var(--text-muted); margin-bottom: 4px; }
.rr-comp-value { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rr-comp-stats { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .rr-comp-grid, #risk-regime-body .grid.cols-3, #risk-regime-body .grid.cols-2 { grid-template-columns: 1fr; } }

/* ---- "Онлайн аналітика" у стилі фінансового дашборду: кольоровий акцент зверху кожної
   картки + трохи повітря замінюють стандартний .card, самі дані/логіка лишаються ті ж ---- */
.analytics-page .dash-card { position: relative; overflow: hidden; padding-top: 20px; }
.analytics-page .dash-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent, var(--series-1));
}
.analytics-page .dash-kpi-card { position: relative; }

/* ---- огляд ринку (категоризовані котирування) — на сторінках "Онлайн аналітика" й "Сьогодні". ---- */
.mkt-overview { display: flex; flex-direction: column; gap: 16px; }
.mkt-ovw-group-label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.metric-card-clickable { cursor: pointer; }
.metric-card-clickable:active { transform: translateY(-1px) scale(.99); }

/* повний вигляд "Огляду ринку" (сторінка "Онлайн аналітика"): кожна категорія — своя "область"
   (рамка + кольоровий акцент), областi течуть рядком одна біля одної (flex-wrap) і займають
   рівно стільки місця, скільки потрібно їхнім тайлам — тому маленькі групи (напр. одна US10Y)
   більше не лишають порожнього простору праворуч на весь рядок */
.mkt-overview:not(.compact) { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.mkt-ovw-group-boxed {
  flex: 0 1 auto;
  background: color-mix(in srgb, var(--cat, var(--series-1)) 5%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--cat, var(--series-1)) 18%, var(--grid));
  border-radius: 14px;
  padding: 12px 14px 14px;
}
.mkt-ovw-group-boxed .mkt-ovw-group-label {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
.mkt-ovw-group-boxed .mkt-ovw-group-label::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cat, var(--series-1));
}

/* квадратні плитки всередині області — flex-wrap, а не CSS grid: ширина області вже підігнана
   під кількість тайлів (mkt-ovw-group-boxed росте по контенту), тож тайли просто течуть рядком
   і переносяться, якщо області не вистачає ширини контейнера сторінки */
.metric-grid-sq { display: flex; flex-wrap: wrap; gap: 10px; }
.metric-tile-sq {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  width: 182px; flex: 0 0 auto;
  padding: 12px 13px 10px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--grid);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.metric-tile-sq::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--mc, var(--series-1)); opacity: .8;
}
.metric-tile-sq:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(0,0,0,.4); border-color: color-mix(in srgb, var(--mc, var(--series-1)) 30%, var(--grid)); }
.mts-head { display: flex; align-items: center; gap: 8px; }
.mts-icon {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mc, var(--series-1)) 16%, transparent);
  color: var(--mc, var(--series-1));
}
.mts-icon svg { width: 12px; height: 12px; }
.mts-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mts-price { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.mts-change { font-size: 12px; font-weight: 700; }
.mts-range { display: flex; justify-content: space-between; gap: 4px; font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mts-range span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mts-range-empty { color: var(--text-muted); }
.mts-spark { width: 100%; height: 34px; margin-top: auto; opacity: .9; }
@media (max-width: 720px) {
  .mkt-overview:not(.compact) { flex-direction: column; }
  .mkt-ovw-group-boxed { width: 100%; }
  .metric-tile-sq { width: calc(50% - 5px); }
}

/* компактний режим — сторінка "Сьогодні": усі категорії в один горизонтальний рядок, дрібніші тайли */
.mkt-overview.compact { flex-direction: column; gap: 10px; }
.mkt-overview.compact .mkt-ovw-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mkt-overview.compact .mkt-ovw-group-label { margin-bottom: 0; white-space: nowrap; flex-shrink: 0; width: 66px; }
.mkt-overview.compact .metric-grid.compact { flex: 1; }
.metric-grid.compact { display: flex; flex-wrap: wrap; gap: 8px; }
.metric-card.compact {
  padding: 7px 12px 7px 14px; border-radius: 10px; gap: 8px;
}
.metric-card.compact .metric-icon { width: 24px; height: 24px; border-radius: 7px; }
.metric-card.compact .metric-icon svg { width: 12px; height: 12px; }
.metric-card.compact .metric-label { font-size: 10px; margin-bottom: 0; }
.metric-card.compact .metric-value { font-size: 12.5px; }
.metric-card.compact:hover { transform: none; box-shadow: none; }
@media (max-width: 900px) { .mkt-overview.compact .mkt-ovw-group { align-items: flex-start; } }

/* ---- живий свічний графік TradingView (Онлайн аналітика й Сьогодні) ---- */
#tv-chart-container, #today-chart-container { border-radius: var(--radius-sm); overflow: hidden; }
#tv-chart-container > div, #today-chart-container > div { border-radius: var(--radius-sm); overflow: hidden; }

/* ---- скринер валют TradingView (Онлайн аналітика) ---- */
#mkt-screener-container {
  height: 650px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--grid);
  background: var(--surface-2);
}
#mkt-screener-container .tradingview-widget-container,
#mkt-screener-container .tradingview-widget-container__widget { height: 100%; width: 100%; }
.tv-widget-copyright { margin-top: 8px; text-align: right; }
.tv-widget-copyright a { color: var(--accent-blue, var(--series-1)); text-decoration: none; }
.tv-widget-copyright a:hover { text-decoration: underline; }

/* ---- розгортання картки графіка на весь екран ---- */
.tv-chart-card { transition: none; }
.tv-chart-card.tv-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 500;
  margin: 0 !important;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  padding: 12px !important;
  box-shadow: none;
  overflow-y: auto;
}
.tv-chart-card.tv-fullscreen #tv-chart-container,
.tv-chart-card.tv-fullscreen #today-chart-container,
.tv-chart-card.tv-fullscreen #mkt-screener-container { flex: 1; min-height: 0; height: auto; }
.tv-chart-card.tv-fullscreen #tv-chart-container > div,
.tv-chart-card.tv-fullscreen #today-chart-container > div { height: 100% !important; }
body.tv-fullscreen-lock { overflow: hidden; }

/* ---- заголовок у тулбарі редактора малювання (лишається для схем стратегій) ---- */
.canvas-editor-toolbar .ce-group strong { color: var(--text-primary); }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.metric-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px 15px 18px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--grid);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.metric-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -16px rgba(0,0,0,.4);
  border-color: color-mix(in srgb, var(--mc, var(--series-1)) 30%, var(--grid));
}
.metric-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--mc, var(--series-1));
  opacity: .75;
}
.metric-icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mc, var(--series-1)) 15%, transparent);
  color: var(--mc, var(--series-1));
}
.metric-icon svg { width: 18px; height: 18px; }
.metric-body { min-width: 0; }
.metric-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; margin-bottom: 2px; }
.metric-value { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
/* міні-графік ціни всередині плитки "Огляд ринку" (тільки повний вигляд на "Онлайн аналітиці") —
   фіксована ширина, бо renderSparkline бере container.clientWidth ще до вставки в DOM-потік */
.metric-spark { width: 64px; height: 30px; flex-shrink: 0; margin-left: 6px; opacity: .9; }
.metric-card.has-spark { padding-right: 14px; }
.analytics-page #mkt-overview-body .metric-spark { width: 56px; height: 26px; }
.metric-value.text-good { color: var(--good); }
.metric-value.text-bad { color: var(--critical); }

.stats-section-head { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; }
.stats-section-head .icon-badge { width: 26px; height: 26px; border-radius: 8px; }
.stats-section-head .icon-badge svg { width: 14px; height: 14px; }
.stats-section-head h2 { font-size: 14px; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--grid);
  font-variant-numeric: tabular-nums;
}
th { color: var(--text-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
tr:hover td { background: var(--page); }
.table-wrap { overflow-x: auto; }
.row-clickable { cursor: pointer; }

/* ---------- бокова панель перегляду угоди (у стилі Notion) ---------- */
.panel-backdrop {
  position: fixed; inset: 0; background: rgba(11,11,11,.4);
  display: flex; justify-content: flex-end; z-index: 60;
}
.side-panel {
  width: 460px; max-width: 92vw; height: 100%; background: var(--surface-2);
  box-shadow: var(--shadow-pop); display: flex; flex-direction: column;
  animation: side-panel-in .18s var(--ease);
  border-left: 1px solid var(--border);
}
@keyframes side-panel-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.side-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 20px 22px 14px; border-bottom: 1px solid var(--grid);
}
.side-panel-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.side-panel-title-row h2 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.side-panel-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
.side-panel-actions {
  display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px;
  border-top: 1px solid var(--grid);
}
.view-pnl { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-bottom: 16px; }
.view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 6px; }
.view-row-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; margin-bottom: 3px; }
.view-row-value { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.view-tag-group { margin-top: 14px; }
.view-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--grid); }
.view-notes { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.view-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
.view-shot-card { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--page); }
.view-shot-card img { width: 100%; height: 110px; object-fit: cover; cursor: zoom-in; display: block; }
.view-shot-caption { padding: 7px 8px; }

/* ---------- «Поділитись угодою» — центрована модалка з живим прев'ю картки ---------- */
.share-trade-backdrop {
  position: fixed; inset: 0; background: rgba(11,11,11,.55);
  display: flex; justify-content: center; align-items: center; z-index: 80; padding: 20px;
}
.share-trade-modal {
  width: 780px; max-width: 100%; max-height: 92vh; overflow-y: auto;
  background: var(--surface-2); border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--border); box-shadow: var(--shadow-pop);
  animation: side-panel-in .18s var(--ease);
}
.share-trade-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--grid);
}
.share-trade-head h2 { margin: 0; font-size: 17px; }
.share-trade-body { display: flex; gap: 22px; padding: 22px; flex-wrap: wrap; }
.share-trade-settings { flex: 1 1 220px; min-width: 200px; }
.share-trade-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; margin-bottom: 8px; }
.share-trade-check { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; cursor: pointer; font-weight: 400; }
.share-trade-check input { width: auto; }
.share-trade-preview-wrap { flex: 1 1 320px; min-width: 280px; display: flex; align-items: flex-start; justify-content: center; }
.share-trade-preview, .share-trade-result { width: 100%; max-width: 440px; display: flex; justify-content: center; }
.share-trade-result-img {
  width: 100%; border-radius: 20px; display: block;
  opacity: 0; transform: scale(.94) translateY(8px);
  transition: opacity .38s var(--ease), transform .38s var(--ease);
}
.share-trade-result.share-reveal .share-trade-result-img { opacity: 1; transform: scale(1) translateY(0); }
.share-trade-actions {
  display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px;
  border-top: 1px solid var(--grid); flex-wrap: wrap;
}
@media (max-width: 720px) { .share-trade-body { flex-direction: column; } }

/* ---------- Календар ---------- */
.cal-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--grid);
}
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav h2 { margin: 0; font-size: 17px; min-width: 190px; text-align: center; }
.cal-view-toggle { display: flex; gap: 6px; }
/* Єдина CSS-grid-таблиця (149px картка тижня + 7 однакових колонок днів) — картка тижня
   і 7 днів того самого тижня лежать в ОДНОМУ grid-рядку, тому браузер сам вирівнює їх
   по висоті (найвищий елемент рядка задає висоту всього рядка). */
.cal-grid-outer { display: grid; grid-template-columns: 149px repeat(7, 1fr); gap: 6px; align-items: stretch; }
.cal-grid-corner { }
.cal-weekday { font-size: 11px; color: var(--text-muted); text-align: center; padding: 4px 0; font-weight: 600; }
.cal-week-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--page);
  display: flex; flex-direction: column; justify-content: center; min-width: 0;
}
.cal-week-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; }
.cal-week-pnl { font-size: 15px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-week-pct { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cal-week-days { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.cal-day {
  /* min-width:0 — без цього grid-клітинка з довгим текстом (напр. "-1 246,55") не стискається
     до відведеної 1fr-колонки, а розтягує весь рядок і ламає сітку на вузьких екранах */
  border: 1px solid var(--border); border-radius: 10px; padding: 8px; min-height: 84px; min-width: 0;
  background: var(--page); display: flex; flex-direction: column; gap: 2px;
}
.cal-day[data-cal-date] { cursor: pointer; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.cal-day[data-cal-date]:hover { border-color: var(--series-1); transform: translateY(-1px); }
.cal-day-out { opacity: .35; }
.cal-day-today .cal-day-num { color: var(--series-1); font-weight: 800; }
.cal-day-win { background: rgba(12,163,12,.07); border-color: rgba(12,163,12,.22); }
.cal-day-loss { background: rgba(208,59,59,.07); border-color: rgba(208,59,59,.22); }
.cal-day-num { font-size: 12.5px; font-weight: 600; color: var(--text-secondary, inherit); }
.cal-day-count { font-size: 10px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-day-pnl { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-day-pct { font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-day-rr { font-size: 10px; color: var(--text-muted); margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .cal-grid-outer { grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .cal-grid-corner, .cal-week-card { display: none; }
  .cal-day { min-height: 66px; padding: 6px; }
}
/* ---- вузькі телефони: власний, ще щільніший тір — саме тут раніше "їхала" сітка ---- */
@media (max-width: 480px) {
  .cal-head { justify-content: center; text-align: center; }
  .cal-nav { width: 100%; justify-content: center; }
  .cal-nav h2 { min-width: 0; flex: 1 1 auto; font-size: 15px; }
  .cal-view-toggle { width: 100%; justify-content: center; }
  .cal-grid-outer { gap: 3px; }
  .cal-weekday { font-size: 9.5px; padding: 2px 0; }
  .cal-day { min-height: 58px; padding: 4px 3px; border-radius: 8px; gap: 0; }
  .cal-day-num { font-size: 11px; }
  .cal-day-count { display: none; } /* кількість угод лишається доступною в модалці дня по кліку */
  .cal-day-pnl { font-size: 10.5px; }
  .cal-day-pct { font-size: 9px; }
  .cal-day-rr { display: none; } /* найменш критична цифра — прибираємо першою, щоб не тіснити PnL */
}

.cal-body-mini { display: block; }
.cal-mini-months { display: grid; gap: 14px; }
.cal-mini-months-3 { grid-template-columns: repeat(3, 1fr); }
.cal-mini-months-year { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .cal-mini-months-year { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .cal-mini-months-3, .cal-mini-months-year { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cal-mini-months-3 { grid-template-columns: 1fr; } }
/* рік — 12 місяців: на телефоні лишаємо 2 колонки (а не 1), інакше прокрутка через увесь
   рік дуже довга; 3 місяці квартального виду й так добре читаються в 1 колонку */
@media (max-width: 560px) { .cal-mini-months-year { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
@media (max-width: 360px) { .cal-mini-months-year { grid-template-columns: 1fr; } }
.cal-mini-month { border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--page); min-width: 0; }
.cal-mini-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 6px; }
.cal-mini-title { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-mini-pnl { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-mini-weekdays, .cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-mini-weekdays div { font-size: 9px; color: var(--text-muted); text-align: center; }
.cal-mini-day {
  min-height: 30px; min-width: 0; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; font-size: 9px; color: var(--text-muted); background: var(--surface-2); padding: 2px 1px;
}
.cal-mini-months-year .cal-mini-day { min-height: 24px; }
.cal-mini-day[data-cal-date] { cursor: pointer; }
.cal-mini-daynum { line-height: 1; }
.cal-mini-daypnl { font-size: 7.5px; font-weight: 700; line-height: 1; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cal-mini-out { opacity: 0; pointer-events: none; }
.cal-mini-win { background: rgba(12,163,12,.5); color: #fff; }
.cal-mini-loss { background: rgba(208,59,59,.5); color: #fff; }
.cal-mini-be { background: color-mix(in srgb, var(--text-muted) 30%, transparent); }
.cal-mini-today { outline: 1.5px solid var(--series-1); outline-offset: -1.5px; }
/* на дуже вузьких екранах у 2-колоночному річному вигляді клітинкам дня замало місця для
   двох рядків (число + сума) — лишаємо тільки число, повну суму видно за кліком на день */
@media (max-width: 480px) {
  .cal-mini-months-year .cal-mini-daypnl { display: none; }
  .cal-mini-months-year .cal-mini-day { min-height: 20px; }
}

/* Більша версія міні-календаря — картка "Календар" на сторінці "Статистика" сама по собі
   не обмежена тісною сіткою 3 місяців поспіль, тому клітинки можуть бути просторішими */
.stat-cal-row { grid-template-columns: 1.35fr 1fr 0.85fr; }
@media (max-width: 1100px) { .stat-cal-row { grid-template-columns: 1fr 1fr; } .stat-cal-row .card:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .stat-cal-row { grid-template-columns: 1fr; } .stat-cal-row .card:last-child { grid-column: auto; } }
.cal-mini-lg .cal-mini-month { padding: 14px; }
.cal-mini-lg .cal-mini-title { font-size: 14px; }
.cal-mini-lg .cal-mini-pnl { font-size: 13px; }
.cal-mini-lg .cal-mini-weekdays { margin-bottom: 2px; }
.cal-mini-lg .cal-mini-weekdays div { font-size: 10.5px; }
.cal-mini-lg .cal-mini-grid { gap: 5px; }
.cal-mini-lg .cal-mini-day { min-height: 52px; border-radius: 7px; gap: 3px; padding: 4px 2px; }
.cal-mini-lg .cal-mini-daynum { font-size: 12px; }
.cal-mini-lg .cal-mini-daypnl { font-size: 10px; }

.cal-day-modal-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px solid var(--grid);
  cursor: pointer; font-size: 13px;
}
.cal-day-modal-row:last-child { border-bottom: none; }
.cal-day-modal-row:hover { background: var(--page); }
.cal-day-modal-symbol { font-weight: 700; min-width: 66px; }

/* ---------- Статистика: тікер-стрічка, hero-картки, gauge, серії, списки ---------- */
.stat-ticker { display: flex; flex-wrap: wrap; gap: 0; padding: 14px 20px; }
.stat-ticker-item {
  flex: 1 1 140px; padding: 0 20px; border-left: 1px solid var(--grid);
}
.stat-ticker-item:first-child { border-left: none; padding-left: 0; }
.stat-ticker-label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.stat-ticker-value { font-size: 19px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .stat-ticker-item { border-left: none; padding-left: 0; border-top: 1px solid var(--grid); padding-top: 10px; margin-top: 10px; } .stat-ticker-item:first-child { border-top: none; padding-top: 0; margin-top: 0; } }

.stat-hero { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stat-hero-label { width: 100%; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.stat-hero-value { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.stat-mini-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--grid); }
.stat-mini-row:last-child { border-bottom: none; }

.rr-gauge { height: 9px; border-radius: 5px; background: var(--critical); overflow: hidden; margin-top: 8px; }
.rr-gauge-fill { height: 100%; background: var(--good); border-radius: 5px 0 0 5px; }
.rr-gauge-labels { display: flex; justify-content: space-between; font-size: 11px; margin-top: 6px; font-weight: 600; }

.streak-row { display: flex; justify-content: space-around; text-align: center; padding: 10px 0; }
.streak-item { display: flex; flex-direction: column; gap: 4px; }
.streak-value { font-size: 26px; font-weight: 800; }

.stat-list-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--grid);
  font-size: 13px;
}
.stat-list-row:last-child { border-bottom: none; }
.stat-list-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.heatmap-wrap { overflow-x: auto; }
.heatmap-table { border-collapse: separate; border-spacing: 4px; width: 100%; }
.heatmap-table th { font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 4px 6px; text-align: center; }
.heatmap-table th:first-child { text-align: left; }
.heatmap-cell {
  border-radius: 8px; text-align: center; padding: 6px 4px; min-width: 62px;
  border: 1px solid var(--grid); transition: transform .12s ease;
}
.heatmap-cell:hover { transform: scale(1.04); }
.heatmap-wr { font-size: 13px; font-weight: 700; }
.heatmap-n { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.pill.good { color: var(--good); background: rgba(12,163,12,.1); border-color: transparent; }
.pill.bad { color: var(--critical); background: rgba(208,59,59,.1); border-color: transparent; }
.pill.neutral { color: var(--text-secondary); background: var(--page); }
.pill.warn { color: #8a5a00; background: rgba(250,178,25,.18); border-color: transparent; }

.tag {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--page);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-secondary);
  margin: 1px 3px 1px 0;
}
.tag.bad { color: var(--critical); background: rgba(208,59,59,.1); border-color: transparent; }
.tag.strategy { color: var(--series-1); background: color-mix(in srgb, var(--series-1) 12%, transparent); border-color: transparent; font-weight: 600; }
.trade-tags-cell { display: flex; flex-wrap: wrap; gap: 2px; max-width: 260px; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
  flex-wrap: wrap;
}
.section-head h2 { font-size: 15px; margin: 0; }
.section-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.empty {
  padding: 30px 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ---------- forms ---------- */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 4px; font-weight: 500; }
.field input[type=text], .field input[type=number], .field input[type=date],
.field input[type=time], .field select, .field textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
}
.field textarea { min-height: 64px; resize: vertical; }
.field .hint { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; }
.checklist { display: flex; flex-direction: column; gap: 6px; }
.checklist label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary); font-weight: 400; }
.textlist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.textlist-row { display: flex; align-items: center; gap: 6px; }
.textlist-row input[type="text"] { flex: 1 1 auto; }
.cl-stat-list { display: flex; flex-direction: column; gap: 10px; }
.cl-stat-row { display: grid; grid-template-columns: 1fr 90px 40px; column-gap: 10px; row-gap: 2px; align-items: center; }
.cl-stat-text { font-size: 13px; color: var(--text-primary); grid-column: 1; }
.cl-stat-bar-wrap { grid-column: 2; }
.cl-stat-pct { grid-column: 3; text-align: right; font-size: 12px; color: var(--text-secondary); }
.cl-stat-cmp { grid-column: 1 / -1; }
.cl-stat-compare { display: flex; gap: 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--grid); font-size: 12.5px; flex-wrap: wrap; }
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  font-size: 12px;
  cursor: pointer;
  color: var(--text-secondary);
  user-select: none;
}
.chip.active { background: var(--series-1); color: #fff; border-color: var(--series-1); }
.chip-tri-checked { background: rgba(12,163,12,.14); color: var(--good); border-color: var(--good); }
.chip-tri-unchecked { background: rgba(208,59,59,.14); color: var(--critical); border-color: var(--critical); }
.setup-stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.setup-stat-tile { background: var(--page); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.rating { display: flex; gap: 6px; }
.rating .rstar { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-1); cursor: pointer; font-size: 13px; display:flex; align-items:center; justify-content:center; color: var(--text-secondary); }
.rating .rstar.active { background: var(--series-4); border-color: var(--series-4); color: #1a1a19; font-weight: 700; }

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(11,11,11,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto; z-index: 61; /* вище мобільної шапки (55) і панелі перегляду (60) — модалка відкривається і з view-панелі теж */
}
.modal {
  /* трохи щільніше скло, ніж у карток (--glass-surface-strong, не --glass-surface) — у модалці
     здебільшого форми з текстовими полями, і надто прозоре тло заважало б читати */
  background: var(--glass-surface-strong);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-radius: 20px;
  width: 100%; max-width: 620px;
  padding: 20px 22px 18px;
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-pop);
  border: 1px solid var(--glass-border);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-close { cursor: pointer; color: var(--text-muted); font-size: 18px; background: none; border: none; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; border-top: 1px solid var(--grid); padding-top: 14px; }

.backup-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--grid); }
.backup-section-title { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.backup-section .hint { margin-bottom: 10px; }
.backup-section .hint[data-backup-status] { margin: 8px 0 0; min-height: 14px; }
.backup-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- сторінка "Налаштування" (пункт лівого меню, розділ "Система") ---------- */
/* На вузьких екранах вкладок (6 штук) забагато, щоб влізти в один рядок — даємо панелі
   горизонтальний скрол замість того, щоб останні пункти ("Зовнішні підключення",
   "Користувачі") просто обрізались і ставали недосяжними. */
.settings-tabbar {
  display: flex; gap: 4px; border-bottom: 1px solid var(--grid);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.settings-tabbar::-webkit-scrollbar { display: none; }
.settings-tab { background: none; border: none; cursor: pointer; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; flex-shrink: 0; white-space: nowrap; }
.settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.settings-tab:hover:not(.active) { color: var(--text-primary); }
.settings-integrations-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.settings-integrations-actions .hint { margin: 0; }

.settings-sessions-grid { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.settings-session-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-session-row label { font-size: 13px; font-weight: 600; }
.settings-session-times { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.settings-session-times input[type="time"] { width: 110px; }

.tg-connection-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.tg-connection-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tg-connection-name { font-weight: 700; font-size: 13.5px; }
.tg-connection-form { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-top: 4px; background: var(--page); }

/* ---------- charts ---------- */
.chart-wrap { position: relative; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; color: var(--text-secondary); }
.chart-legend .item { display: flex; align-items: center; gap: 6px; }
.chart-legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--text-primary);
  color: var(--surface-1);
  font-size: 11.5px;
  padding: 6px 9px;
  border-radius: 6px;
  transform: translate(-50%, -110%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .08s;
  z-index: 5;
}
.chart-tooltip.show { opacity: 1; }
.axis-text { fill: var(--text-muted); font-size: 10.5px; font-family: var(--font); }
.grid-line { stroke: var(--grid); stroke-width: 1; }
.baseline-line { stroke: var(--baseline); stroke-width: 1; }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.select-inline {
  padding: 6px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary); font-size: 12.5px;
}
.search-input {
  padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary); font-size: 12.5px; min-width: 180px;
}

/* панель фільтрів над великими таблицями (Журнал угод, угоди бектесту) — окрема картка під
   топбаром, щоб не перевантажувати основний toolbar кнопками дій. */
.filters-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 14px; margin-bottom: 14px;
}
.filters-date-range { display: flex; align-items: center; gap: 6px; }
.filters-bar input[type="date"].select-inline { min-width: 0; color-scheme: light; }
:root:not([data-theme="light"]) .filters-bar input[type="date"].select-inline { color-scheme: dark; }
.filters-bar #btn-filters-reset, .filters-bar #btn-bt-filters-reset { margin-left: auto; }

/* пагінація під великими таблицями — 50 угод на сторінку */
.pagination {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; padding: 12px 2px 2px; margin-top: 6px; border-top: 1px solid var(--grid);
}
.pagination-pages { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pg-btn { min-width: 30px; padding: 6px 9px; justify-content: center; }
.pg-num.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg-ellipsis { padding: 0 4px; color: var(--text-muted); font-size: 12.5px; }

.mono { font-variant-numeric: tabular-nums; }
.text-good { color: var(--success-text); }
.text-bad { color: var(--critical); }
.text-muted { color: var(--text-muted); }
.small { font-size: 12px; }
.row-actions { display: flex; gap: 6px; }
.divider { height: 1px; background: var(--grid); margin: 14px 0; border: none; }
.badge-dot { width: 8px; height: 8px; border-radius: 50%; display:inline-block; margin-right:6px; }

.toast {
  position: fixed; bottom: 20px; right: 20px; background: var(--text-primary); color: var(--surface-1);
  padding: 10px 16px; border-radius: var(--radius-sm); font-size: 13px; z-index: 100; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(6px); transition: all .15s;
  /* навіть невидимий (opacity:0) toast лишається в DOM і, без цього, перехоплював кліки по
     кнопках у правому нижньому куті (напр. "Редагувати" в бічній панелі) */
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

.kbd-hint { color: var(--text-muted); font-size: 11.5px; }

/* ---------- gallery / screenshots ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.shot-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  background: var(--page);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shot-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
  background: var(--grid);
  cursor: zoom-in;
}
.shot-card .shot-tf {
  width: 100%;
  padding: 5px 7px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 12px;
}
.shot-card .shot-note {
  width: 100%;
  min-height: 44px;
  padding: 5px 7px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--font);
  resize: vertical;
}
.shot-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.shot-thumbs img {
  width: 56px; height: 56px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--border); cursor: zoom-in;
}
.lightbox-backdrop {
  position: fixed; inset: 0; background: rgba(11,11,11,.8);
  display: flex; align-items: center; justify-content: center; z-index: 80; padding: 30px;
  cursor: zoom-out;
}
.lightbox-backdrop img { max-width: 100%; max-height: 100%; border-radius: 6px; }

.paste-zone {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
  padding: 16px 12px; text-align: center; color: var(--text-muted); font-size: 12.5px;
  cursor: pointer; background: var(--page); margin-bottom: 10px; transition: all .12s; outline: none;
}
.paste-zone svg { width: 15px; height: 15px; flex-shrink: 0; }
.paste-zone:hover, .paste-zone:focus { border-color: var(--accent); color: var(--text-primary); background: var(--surface-1); }

/* ---------- бібліотека: файлові статті (PDF та ін.) ---------- */
.lib-file-cover {
  display: flex; align-items: center; justify-content: center; gap: 6px; position: relative;
}
.lib-file-cover svg { width: 34px; height: 34px; }
.lib-file-ext {
  position: absolute; bottom: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; background: var(--surface-1); border-radius: 4px; padding: 1px 6px;
  border: 1px solid var(--border);
}
.lib-file-view { padding: 22px 26px; }
.lib-file-header { display: flex; align-items: center; gap: 16px; }
.lib-file-icon-big { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lib-file-icon-big svg { width: 46px; height: 46px; }
.lib-file-icon-big .lib-file-ext {
  position: absolute; bottom: 2px; font-size: 9px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; background: var(--surface-1); border-radius: 4px; padding: 1px 5px;
  border: 1px solid var(--border);
}
.lib-file-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.lib-file-frame {
  width: 100%; height: 72vh; border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-top: 16px; background: var(--page);
}
.lib-file-modal { max-width: 920px; }
.lib-file-modal .lib-file-frame { height: 68vh; }

/* ---------- бібліотека: відео з YouTube ---------- */
.lib-video-cover {
  position: relative; background-size: cover; background-position: center; background-color: var(--surface-2);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted); overflow: hidden;
}
.lib-video-cover svg { width: 30px; height: 30px; }
.lib-video-play-badge {
  position: absolute; inset: 0 auto auto 0; margin: auto; top: 0; bottom: 0; left: 0; right: 0;
  width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: transform .15s, background .15s;
}
.lib-video-play-badge svg { width: 16px; height: 16px; margin-left: 2px; }
.lib-article-card:hover .lib-video-play-badge { transform: scale(1.12); background: var(--critical); }
.lib-video-yt-badge {
  position: absolute; bottom: 8px; right: 8px; width: 22px; height: 22px; border-radius: 5px;
  background: rgba(0,0,0,.6); color: #fff; display: flex; align-items: center; justify-content: center;
}
.lib-video-yt-badge svg { width: 13px; height: 13px; }
.lib-article-grid.list-mode .lib-video-play-badge { width: 30px; height: 30px; }
.lib-article-grid.list-mode .lib-video-play-badge svg { width: 12px; height: 12px; }
.lib-video-modal { max-width: 960px; }
.lib-video-frame-wrap {
  position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: var(--radius-sm);
  overflow: hidden; margin-top: 4px;
}
.lib-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.lib-video-add-modal .field input { font-family: inherit; }
.lib-video-add-preview { margin-top: 14px; }
.lib-video-add-thumb {
  width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); background-size: cover;
  background-position: center; background-color: var(--surface-2); border: 1px solid var(--border);
}
.lightbox-caption {
  position: fixed; bottom: 24px; left: 0; right: 0; text-align: center;
  color: #fff; font-size: 13px; z-index: 81;
}

/* ---------- habit heatmap ---------- */
.heatmap { display: flex; gap: 3px; flex-wrap: wrap; }
.heatmap .hcell {
  width: 14px; height: 14px; border-radius: 3px; background: var(--grid);
  cursor: default;
}
.streak-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; background: rgba(235,104,52,.12); color: var(--series-2);
}

/* ---------- нотатник / цитати ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.quote-card {
  background: var(--page);
  border: 1px solid var(--border);
  border-left: 3px solid var(--series-7);
  border-radius: var(--radius-sm);
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.quote-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.quote-card .quote-mark { width: 20px; height: 20px; color: var(--series-7); opacity: .55; }
.quote-card .quote-text {
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.55;
  color: var(--text-primary);
  flex: 1;
  white-space: pre-wrap;
}
.quote-card .quote-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--grid);
  padding-top: 8px;
}
.quote-card .row-actions { opacity: 0; transition: opacity .15s var(--ease); }
.quote-card:hover .row-actions { opacity: 1; }

/* ---------- сторінка "Сьогодні": швидка нотатка, компактний план дня ---------- */
.quicknote-box { display: flex; flex-direction: column; gap: 8px; }
.quicknote-box textarea {
  width: 100%; resize: vertical; min-height: 52px;
  padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--grid); background: var(--surface-1);
  color: var(--text-primary); font: inherit; font-size: 13.5px;
}
.quicknote-box textarea:focus { outline: none; border-color: var(--series-1); }
.quicknote-box .btn { align-self: flex-end; }
.quicknote-recent-list { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--grid); display: flex; flex-direction: column; gap: 6px; }
.quicknote-recent-item { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; }

.dayplan-line { font-size: 13px; margin-top: 6px; line-height: 1.45; }
.dayplan-line.clamp2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- основний скріншот плану дня на картці "Сьогодні" (клік — lightbox) ---- */
.dayplan-shot {
  position: relative; margin-top: 4px; border-radius: var(--radius-sm); overflow: hidden;
  cursor: zoom-in; border: 1px solid var(--grid); background: var(--page);
}
.dayplan-shot img { display: block; width: 100%; max-height: 260px; object-fit: contain; background: var(--page); transition: transform .25s var(--ease); }
.dayplan-shot:hover img { transform: scale(1.03); }
.dayplan-shot-expand {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: color-mix(in srgb, var(--page) 78%, transparent);
  color: var(--text-primary); font-size: 12px; font-weight: 600;
  opacity: 0; transition: opacity .15s var(--ease);
}
.dayplan-shot:hover .dayplan-shot-expand { opacity: 1; }

/* ---------- бейджі: напрямок, сесія ---------- */
.dir-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.dir-badge.buy { color: var(--good); background: rgba(12,163,12,.1); }
.dir-badge.sell { color: var(--critical); background: rgba(208,59,59,.1); }
/* значок перед символом у Журналі угод і на картках Бектестів, щоб символ не був голим текстом
   (symbolIconBadge()). Основний варіант — .symbol-flags: справжні круглі SVG-прапорці валют пари
   (EUR/USD → прапор ЄС + прапор США, злегка внахлест) або офіційний лого монети для крипти —
   іконки самостійно розміщені у public/icons/ (circle-flags MIT, cryptocurrency-icons CC0),
   без залежності від CDN чи емодзі-шрифту ОС. .symbol-icon — фолбек для нестандартних символів
   (ручний ввід поза відомим списком): узагальнена кольорова іконка категорії. */
.symbol-flags {
  display: inline-flex; align-items: center; margin-right: 7px; vertical-align: -4px;
}
.symbol-flags img {
  width: 16px; height: 16px; border-radius: 50%; display: block;
  box-shadow: 0 0 0 1.5px var(--card-bg, #fff);
}
.symbol-flags.pair img.f2 { margin-left: -6px; }
h2 .symbol-flags img, h1 .symbol-flags img { width: 20px; height: 20px; }
h2 .symbol-flags.pair img.f2, h1 .symbol-flags.pair img.f2 { margin-left: -7px; }
h2 .symbol-flags, h1 .symbol-flags { vertical-align: -4px; }
.symbol-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 7px; flex-shrink: 0; margin-right: 6px;
  color: var(--si); background: color-mix(in srgb, var(--si) 16%, transparent);
  vertical-align: -5px;
}
h2 .symbol-icon, h1 .symbol-icon { vertical-align: -3px; }
.session-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* ---------- ревю угоди (чекбокс "переглянуто") ---------- */
.reviewed-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  cursor: pointer;
  accent-color: var(--good);
  flex-shrink: 0;
}
.reviewed-check.reviewed-alert {
  outline: 2px solid #ff1f4a;
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(255,31,74,.25), 0 0 10px 2px rgba(255,31,74,.55);
  animation: reviewed-pulse 1.4s ease-in-out infinite;
}
@keyframes reviewed-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,31,74,.25), 0 0 10px 2px rgba(255,31,74,.55); }
  50% { box-shadow: 0 0 0 5px rgba(255,31,74,.12), 0 0 16px 5px rgba(255,31,74,.8); }
}

/* ---------- архів сетапів/стратегій ---------- */
.setup-type-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.setup-type-dot.concept { background: var(--series-7); }
.setup-type-dot.strategy { background: var(--series-1); }

/* картки стратегій — з мініатюрою канвасу зверху, як у галереї */
.setup-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.setup-card {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.setup-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(0,0,0,.4); border-color: color-mix(in srgb, var(--series-1) 25%, var(--grid)); }
.setup-card-thumb {
  position: relative;
  height: 118px; background: var(--page); border-bottom: 1px solid var(--grid);
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
}
.setup-card-thumb[data-view-canvas] { cursor: zoom-in; }
.setup-card-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.setup-card-thumb-empty { color: var(--text-muted); opacity: .5; }
/* напис "Повний перегляд" зверху мініатюри — з'являється при наведенні, підказує,
   що маленьке прев'ю можна відкрити на весь екран і повністю розгледіти схему */
.setup-card-thumb-expand {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: color-mix(in srgb, var(--page) 78%, transparent);
  color: var(--text-primary); font-size: 12px; font-weight: 600;
  opacity: 0; transition: opacity .15s var(--ease);
}
.setup-card-thumb[data-view-canvas]:hover .setup-card-thumb-expand { opacity: 1; }
.setup-card-body { padding: 13px 14px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.setup-card-name { font-weight: 700; font-size: 14px; letter-spacing: -0.005em; }
.setup-card-desc {
  font-size: 12px; color: var(--text-secondary); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.setup-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.setup-usage-badge { font-size: 11px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setup-card-actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity .12s var(--ease); }
.setup-card:hover .setup-card-actions { opacity: 1; }

/* компактні "чіпи" концепцій/патернів — їх зазвичай багато й вони без схеми */
.setup-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.setup-chip-card {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 8px 7px 12px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.setup-chip-card:hover { border-color: var(--border-strong); background: var(--surface-1); }
.setup-chip-actions { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s var(--ease); margin-left: 2px; }
.setup-chip-card:hover .setup-chip-actions { opacity: 1; }
.setup-chip-actions button {
  border: none; background: none; cursor: pointer; padding: 3px;
  border-radius: 50%; color: var(--text-muted); display: inline-flex;
}
.setup-chip-actions button:hover { background: var(--border); color: var(--text-primary); }

/* перегляд схеми стратегії у бічній панелі */
.setup-view-canvas {
  position: relative;
  background: var(--page); border: 1px solid var(--grid); border-radius: var(--radius-sm);
  overflow: hidden; margin-bottom: 18px; display: flex; align-items: center; justify-content: center;
  min-height: 140px; cursor: zoom-in;
}
.setup-view-canvas img { width: 100%; display: block; }
.setup-view-canvas .setup-card-thumb-expand { opacity: 0; }
.setup-view-canvas:hover .setup-card-thumb-expand { opacity: 1; }

/* лічильник на вкладках "Стратегії"/"Концепції" */
.setup-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; margin-left: 2px;
  border-radius: 999px; font-size: 10.5px; font-weight: 700;
  background: color-mix(in srgb, currentColor 16%, transparent);
}

/* ---------- сторінка "Сьогодні": годинник, активна сесія, прогрес ---------- */
.live-clock {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 7px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--grid);
}
.icon-btn { padding: 8px 10px; display: inline-flex; align-items: center; gap: 6px; }
.icon-btn.active { background: color-mix(in srgb, var(--series-1) 14%, transparent); border-color: var(--series-1); color: var(--series-1); }
/* видимий текстовий підпис поряд з іконкою — на дотиковому екрані немає ховеру, тож сама
   іконка без title-тултипа незрозуміла (напр. дзвоник на "Сьогодні" — сповіщення, чи щось інше?) */
.icon-btn-label { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.active-session-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.active-session-pill {
  --sc: var(--series-1);
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc) 32%, transparent);
  flex: 1 1 200px;
}
.active-session-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--sc);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--sc) 22%, transparent);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.active-session-name { font-weight: 700; color: var(--sc); font-size: 14px; }
.active-session-time { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.checklist-progress-bar { height: 8px; border-radius: 6px; background: var(--grid); overflow: hidden; }
.checklist-progress-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--series-1), var(--series-3)); transition: width .4s var(--ease); }

/* ---------- швидкий чек-ін настрою (сторінка «Сьогодні») ---------- */
.mood-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mood-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--page); cursor: pointer; font-family: var(--font); transition: all .12s var(--ease);
  min-width: 76px;
}
.mood-btn:hover { border-color: var(--border-strong); background: var(--surface-1); transform: translateY(-1px); box-shadow: var(--shadow); }
.mood-btn:active { transform: translateY(0); }
.mood-btn svg { color: var(--text-secondary); }
.mood-btn:hover svg { color: var(--series-1); }
.mood-label { font-size: 11px; color: var(--text-secondary); }
.mood-log { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grid); }
.mood-log-item { font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; }
.mood-log-item svg { color: var(--text-secondary); flex-shrink: 0; }
.mood-log-del {
  border: none; background: none; cursor: pointer; padding: 2px; display: inline-flex;
  color: var(--text-muted); border-radius: 4px; opacity: .55; transition: opacity .12s, color .12s;
}
.mood-log-del:hover { opacity: 1; color: var(--critical); }
.open-trade-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--grid);
}
.open-trade-row:last-child { border-bottom: none; }
.ot-targets { margin-top: 2px; letter-spacing: .01em; }
.ot-live-col { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ot-live-block { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ot-live-price { font-size: 12px; opacity: .85; }
.ot-live-pnl { min-width: 66px; text-align: right; }
.ot-live-value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- сторінка «Сьогодні» — м'який світловий фон, щоб було приємно тут сидіти ---------- */
.today-page { position: relative; }
.today-page::before,
.today-page::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  opacity: .55;
}
.today-page::before {
  top: -80px; right: -60px; width: 340px; height: 340px;
  background: radial-gradient(circle, color-mix(in srgb, var(--series-1) 26%, transparent), transparent 72%);
  animation: today-glow-float 10s ease-in-out infinite;
}
.today-page::after {
  bottom: -60px; left: -40px; width: 280px; height: 280px;
  background: radial-gradient(circle, color-mix(in srgb, var(--series-3) 20%, transparent), transparent 72%);
  animation: today-glow-float 12s ease-in-out infinite reverse;
}
@keyframes today-glow-float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(24px) translateX(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .today-page::before, .today-page::after { animation: none; }
}

/* ---------- «наступна важлива новина» — рядок у hero-картці часу ---------- */
.hero-next-news {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--grid);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.hero-next-news .hn-label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.hero-next-news .hn-title { font-size: 13px; font-weight: 600; }
.hero-next-news .hn-eta { font-size: 12.5px; font-weight: 700; color: var(--series-1); }

/* ---------- список новин на сьогодні: майбутні одразу, минулі — згорнуті й прокручувані ---------- */
.news-past-toggle {
  display: flex; align-items: center; gap: 6px;
  width: 100%; margin-top: 8px; padding: 7px 0;
  background: none; border: none; border-top: 1px solid var(--grid);
  color: var(--text-muted); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  transition: color .12s var(--ease);
}
.news-past-toggle:hover { color: var(--text-secondary); }
.news-past-toggle .chev { transition: transform .18s var(--ease); display: inline-flex; }
.news-past-toggle.open .chev { transform: rotate(180deg); }
.news-scroll-box {
  max-height: 0; overflow: hidden;
  transition: max-height .25s var(--ease);
}
.news-scroll-box.open { max-height: 260px; overflow-y: auto; padding-right: 4px; margin-top: 4px; }
.news-scroll-box::-webkit-scrollbar { width: 5px; }
.news-scroll-box::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 3px; }

/* ---------- новини / економічний календар ---------- */
/* Фіксована сітка на 7 колонок (по одній на день тижня) — при auto-fit останній
   неповний рядок розтягувався нерівномірно і картка понеділка "з'їжджала"
   відносно решти; з repeat(7,1fr) усі 7 карток завжди в один рядок і однакової ширини. */
.news-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  align-items: stretch;
}
/* Без цього скидання загальне правило `.card + .card { margin-top: 14px }` додає
   відступ зверху кожній картці, крім першої (понеділка) — усередині сітки це не
   зсуває сусідні картки вниз рядком, а "з'їдає" їхню висоту знизу, через що
   картка понеділка виглядає вищою й зсунутою відносно решти днів. */
.news-week-grid .card + .card { margin-top: 0; }
@media (max-width: 1200px) { .news-week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .news-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .news-week-grid { grid-template-columns: 1fr; } }
.news-day-card { padding: 14px; min-width: 0; display: flex; flex-direction: column; }
.news-day-head span:last-child { white-space: nowrap; }
.news-day-card.today { border-color: var(--series-1); box-shadow: 0 0 0 1px var(--series-1) inset; }
.news-day-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-weight: 700; font-size: 13px;
  margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--grid);
}
.news-day-items { flex: 1; overflow-y: auto; max-height: 420px; padding-right: 2px; }
.news-day-items::-webkit-scrollbar { width: 5px; }
.news-day-items::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 3px; }
.news-item { padding: 8px 0; border-bottom: 1px solid var(--grid); }
.news-item:last-child { border-bottom: none; }
.news-item.past { opacity: .5; }
.news-item-top { display: flex; align-items: center; gap: 8px; }
.news-item-title { font-size: 12.5px; font-weight: 600; margin-top: 3px; }

/* ---- сторінка "Сьогодні" — двоколонковий layout: основний контент + прилипла бічна
   колонка з Telegram-новинами, що йде поруч і з "зараз"-блоком, і з графіком ---- */
.today-layout { display: grid; grid-template-columns: 1fr 320px; gap: 14px; align-items: start; transition: grid-template-columns .18s var(--ease); }
.today-layout.tg-collapsed { grid-template-columns: 1fr 0fr; gap: 0; }
.today-layout.tg-collapsed .tg-sidebar { opacity: 0; pointer-events: none; overflow: hidden; }
@media (max-width: 1100px) { .today-layout { grid-template-columns: 1fr; } .today-layout.tg-collapsed .tg-sidebar { display: none; } }
.tg-sidebar { position: sticky; top: 14px; }
.tg-sidebar-card {
  display: flex; flex-direction: column;
  max-height: calc(100vh - 28px);
}
.tg-sidebar-list { flex: 1; overflow-y: auto; padding-right: 4px; margin-right: -4px; }
.tg-sidebar-list::-webkit-scrollbar { width: 5px; }
.tg-sidebar-list::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 3px; }
@media (max-width: 1100px) { .tg-sidebar { position: static; } .tg-sidebar-card { max-height: 460px; } }

/* ---- панель керування списком Telegram-каналів (гвинтик у стрічці новин на "Сьогодні") ---- */
.tg-news-manage { border-bottom: 1px solid var(--grid); padding-bottom: 10px; margin-bottom: 6px; }
.tg-news-manage-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 2px; }
.tg-news-manage-add { display: flex; gap: 6px; margin-top: 8px; }
.tg-news-manage-add input { flex: 1; min-width: 0; }

/* ---- окремі пости в стрічці Telegram-новин — повний текст, без обрізання ---- */
.tg-news-item {
  display: block; padding: 11px 4px; border-bottom: 1px solid var(--grid);
  text-decoration: none; color: inherit;
}
.tg-news-item:first-child { padding-top: 2px; }
.tg-news-item:last-child { border-bottom: none; }
.tg-news-item:hover .tg-news-item-text { color: var(--series-1); }
.tg-news-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.tg-news-channel { font-size: 11.5px; font-weight: 700; color: var(--series-1); }
.tg-news-item-text {
  font-size: 12.5px; line-height: 1.5; white-space: pre-line; color: var(--text-primary);
  transition: color .12s var(--ease);
}
.impact-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  border: 1px solid; white-space: nowrap;
}
.impact-dots { display: inline-flex; gap: 2px; }
.impact-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }

/* ---------- бібліотека: папки, статті ---------- */
.field textarea[name="content"] { min-height: 220px; }
.lib-breadcrumb { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--text-muted); margin-top: 6px; flex-wrap: wrap; }
.lib-breadcrumb a { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); cursor: pointer; text-decoration: none; }
.lib-breadcrumb a:hover { color: var(--text-primary); text-decoration: underline; }
.lib-breadcrumb a.active { color: var(--text-primary); font-weight: 600; }
.lib-breadcrumb .sep { color: var(--baseline); }

.lib-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.lib-folder-card {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 14px 16px;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow);
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.lib-folder-card:hover { box-shadow: var(--shadow-hover); border-color: var(--border-strong); transform: translateY(-2px); }
.lib-folder-card { border-top: 3px solid var(--f-color, var(--series-4)); }
.lib-folder-icon { color: var(--f-color, var(--series-4)); margin-bottom: 8px; display: flex; justify-content: center; }
.lib-folder-icon svg { width: 34px; height: 34px; }
.lib-folder-name { font-weight: 600; font-size: 13.5px; margin-bottom: 3px; word-break: break-word; }
.lib-folder-actions { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .15s var(--ease); }
.lib-folder-card:hover .lib-folder-actions { opacity: 1; }

/* ---- перемикач вигляду плитка/список у бібліотеці ---- */
.lib-folder-grid.list-mode, .lib-article-grid.list-mode { display: flex; flex-direction: column; gap: 8px; }
.lib-folder-grid.list-mode .lib-folder-card {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 10px 14px; border-top: none; border-left: 3px solid var(--f-color, var(--series-4));
}
.lib-folder-grid.list-mode .lib-folder-icon { margin-bottom: 0; }
.lib-folder-grid.list-mode .lib-folder-icon svg { width: 24px; height: 24px; }
.lib-folder-grid.list-mode .lib-folder-name { margin-bottom: 0; }
.lib-folder-grid.list-mode .small.text-muted { margin-left: auto; flex-shrink: 0; white-space: nowrap; }
.lib-folder-grid.list-mode .lib-folder-actions { position: static; opacity: 1; margin-left: 10px; }
.lib-article-grid.list-mode .lib-article-card { flex-direction: row; align-items: center; }
.lib-article-grid.list-mode .lib-article-cover { width: 76px; height: 54px; flex-shrink: 0; }
.lib-article-grid.list-mode .lib-article-cover svg { width: 20px; height: 20px; }
.lib-article-grid.list-mode .lib-article-body { padding: 8px 14px; flex-direction: row; align-items: center; gap: 14px; }
.lib-article-grid.list-mode .lib-article-title { margin-bottom: 0; }
.lib-article-grid.list-mode .lib-article-summary { display: none; }
.lib-article-grid.list-mode .lib-article-body > .small.text-muted { margin-top: 0 !important; padding-top: 0 !important; margin-left: auto; white-space: nowrap; }
.lib-article-grid.list-mode .lib-article-actions { position: static; opacity: 1; margin: 0 12px 0 0; order: 3; }

/* ---- перетягування (drag-n-drop) папок/статей у бібліотеці ---- */
.lib-folder-card[draggable="true"], .lib-article-card[draggable="true"] { cursor: grab; }
.lib-folder-card.dragging, .lib-article-card.dragging { opacity: .38; }
.lib-folder-card.drag-over {
  outline: 2px dashed var(--series-1); outline-offset: -2px;
  background: color-mix(in srgb, var(--series-1) 12%, var(--surface-2));
}
.lib-breadcrumb a.drag-over {
  background: var(--series-1); color: #fff; border-radius: 6px; padding: 2px 8px;
}

/* ---- модалка-дерево для переміщення папки/статті ---- */
.lib-move-modal { max-width: 440px; }
.lib-tree { max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.lib-tree-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer;
  font-size: 13px; border-bottom: 1px solid var(--border); transition: background-color .12s var(--ease);
}
.lib-tree-row:last-child { border-bottom: none; }
.lib-tree-row:hover { background: var(--surface-2); }
.lib-tree-row.selected { background: var(--series-1); color: #fff; }
.lib-tree-row.selected .lib-tree-icon { color: #fff !important; }
.lib-tree-row.selected .small.text-muted { color: rgba(255,255,255,.8); }
.lib-tree-row.current { opacity: .55; }
.lib-tree-icon { display: flex; flex-shrink: 0; }
.lib-tree-name { flex: 1; word-break: break-word; }

/* ---- вибір кольору (напр. для папок бібліотеки) ---- */
.color-swatch-row { display: flex; gap: 8px; flex-wrap: wrap; }
.color-swatch-btn {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent;
  background: var(--sw); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px var(--border);
  transition: transform .12s var(--ease), border-color .12s var(--ease);
}
.color-swatch-btn:hover { transform: scale(1.12); }
.color-swatch-btn.active { border-color: var(--text-primary); transform: scale(1.12); }

.lib-article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.lib-article-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.lib-article-card { position: relative; }
.lib-article-card:hover { box-shadow: var(--shadow-hover); border-color: var(--border-strong); transform: translateY(-2px); }
.lib-article-actions { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .15s var(--ease); z-index: 2; }
.lib-article-card:hover .lib-article-actions { opacity: 1; }
.lib-article-cover { height: 120px; background-size: cover; background-position: center; background-color: var(--page); }
.lib-article-cover-empty { display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.lib-article-cover-empty svg { width: 30px; height: 30px; }
.lib-article-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.lib-article-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.lib-article-summary { line-height: 1.4; }

.lib-article-view { padding: 0; overflow: hidden; }
.lib-hero { height: 280px; background-size: cover; background-position: center; cursor: zoom-in; background-color: var(--page); }
/* колонка тексту обмежена по ширині й відцентрована — інакше на широких екранах рядки
   розтягуються на всю ширину картки, і читати стає важко (за замовчуванням картка займає
   всю ширину основного контенту сторінки, а це може бути 1000-1500px) */
.lib-article-content { max-width: 720px; margin: 0 auto; padding: 34px 26px; font-size: 15.5px; line-height: 1.8; color: var(--text-primary); }
.lib-article-content p { margin: 0 0 16px; }
.lib-article-content p:last-child { margin-bottom: 0; }
.lib-article-view .divider { max-width: 720px; margin: 4px auto 22px; }
.lib-image-grid { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding: 0 26px 26px; }
.lib-image-item { margin: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); cursor: zoom-in; background: var(--page); }
.lib-image-item img { width: 100%; height: 140px; object-fit: cover; display: block; }
.lib-image-item figcaption { padding: 8px 10px; font-size: 12px; color: var(--text-muted); }

/* ---------- перемикач теми ---------- */
.sidebar-footer { display: flex; flex-direction: column; gap: 10px; }
.theme-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-secondary); font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: var(--font);
}
.theme-toggle:hover { background: var(--border); color: var(--text-primary); }
.theme-toggle svg { flex-shrink: 0; }
.sidebar-footer-text { font-size: 11.5px; color: var(--text-muted); }
.sidebar.collapsed .theme-toggle { justify-content: center; padding: 8px; }
.sidebar.collapsed .theme-toggle span { display: none; }
.sidebar-footer-row { display: flex; gap: 8px; align-items: stretch; }
.sidebar-footer-row .theme-toggle { flex: 1; min-width: 0; }
.sidebar-logout-btn {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-secondary); cursor: pointer;
}
.sidebar-logout-btn svg { width: 16px; height: 16px; }
.sidebar-logout-btn:hover { background: rgba(208,59,59,.12); border-color: transparent; color: var(--critical); }
.sidebar.collapsed .sidebar-logout-btn { display: none; }

/* ---------- перемикач вигляду (таблиця / календар) ---------- */
.view-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; font-size: 12.5px;
  background: var(--surface-1); color: var(--text-secondary);
  border: none; border-right: 1px solid var(--border); cursor: pointer; font-family: var(--font);
}
.view-toggle-btn:last-child { border-right: none; }
.view-toggle-btn:hover { background: var(--border); }
.view-toggle-btn.active { background: var(--series-1); color: #fff; }

/* ---------- календарний вигляд журналу угод ---------- */
.cal-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cal-month-label { font-weight: 700; font-size: 14px; text-transform: capitalize; min-width: 150px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-grid-head { margin-bottom: 4px; }
.cal-dow { text-align: center; font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 4px 0; }
.cal-cell {
  /* min-width:0 — та сама причина, що й у .cal-day вище: без цього довгий PnL розтягує
     колонку понад 1fr і сітка "виїжджає" за межі екрана на вузьких телефонах */
  min-height: 78px; min-width: 0; border-radius: var(--radius-sm); border: 1px solid var(--border);
  padding: 8px; background: var(--surface-1);
  transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.cal-cell-empty { background: transparent; border-color: transparent; }
.cal-cell.has-trades { cursor: pointer; }
.cal-cell.has-trades:hover { border-color: var(--border-strong); background: var(--page); }
.cal-cell.is-today { border-color: var(--series-1); }
.cal-cell.is-selected { border-color: var(--series-1); background: color-mix(in srgb, var(--series-1) 8%, transparent); box-shadow: 0 0 0 1px var(--series-1) inset; }
.cal-daynum { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.cal-pnl { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-count { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }
.cal-day-detail { margin-top: 2px; }
.cal-trade-row {
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--grid);
}
.cal-trade-row:last-child { border-bottom: none; }
@media (max-width: 900px) {
  .cal-cell { min-height: 54px; padding: 6px; }
  .cal-count { display: none; }
  .cal-trade-row { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 480px) {
  .cal-toolbar { justify-content: center; }
  .cal-month-label { min-width: 0; font-size: 13px; }
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 46px; padding: 4px 3px; border-radius: 8px; }
  .cal-daynum { font-size: 10.5px; margin-bottom: 1px; }
  .cal-pnl { font-size: 10px; }
}

/* ---------- алерти (ліміт збитку, нагадування про новини) ---------- */
#alert-root {
  position: fixed; top: 18px; right: 18px; z-index: 90;
  display: flex; flex-direction: column; gap: 10px;
  width: 340px; max-width: calc(100vw - 36px);
}
.alert-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: var(--shadow-pop);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  animation: alert-in .25s var(--ease);
}
@keyframes alert-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.alert-banner.warning { border-left-color: var(--warning); }
.alert-banner.critical { border-left-color: var(--critical); }
.alert-banner.good { border-left-color: var(--good); }
.alert-banner-icon { color: var(--warning); margin-top: 1px; flex-shrink: 0; }
.alert-banner.critical .alert-banner-icon { color: var(--critical); }
.alert-banner.good .alert-banner-icon { color: var(--good); }
.alert-banner-body { flex: 1; min-width: 0; }
.alert-banner-title { font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.alert-banner-text { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.alert-banner-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 0 2px; flex-shrink: 0; }
.alert-banner-close:hover { color: var(--text-primary); }

/* ---------- richtext-редактор (статті бібліотеки: текст + зображення в потоці) ---------- */
.richtext-toolbar { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.richtext-toolbar button {
  min-width: 30px; height: 30px; padding: 0 9px;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-secondary);
  cursor: pointer; font-size: 12.5px; font-family: var(--font);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.richtext-toolbar button:hover { background: var(--border); color: var(--text-primary); }
.richtext-toolbar-sep { width: 1px; height: 20px; background: var(--grid); margin: 0 4px; }
.richtext-editor {
  min-height: 260px;
  max-height: 520px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 13.5px;
  line-height: 1.65;
}
.richtext-editor:focus { outline: 2px solid var(--series-1); outline-offset: -1px; }
.richtext-editor img { max-width: 100%; border-radius: 8px; display: block; margin: 10px 0; cursor: default; }
.richtext-editor p { margin: 0 0 10px; }
.richtext-editor h3 { font-size: 16px; margin: 4px 0 8px; }
.richtext-editor:empty:before { content: attr(data-placeholder); color: var(--text-muted); }

.lib-article-content img { max-width: 100%; border-radius: 10px; display: block; margin: 18px 0; cursor: zoom-in; box-shadow: var(--shadow); }
.lib-article-content h3 { font-size: 17px; margin: 22px 0 10px; letter-spacing: -0.01em; }
.lib-article-content ul { margin: 0 0 14px; padding-left: 20px; }
.lib-article-content li { margin-bottom: 4px; }

/* ---------- поле "канвас" у формі сетапу/стратегії (мініпрев'ю + кнопка) ---------- */
.canvas-field-preview {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--page); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; margin-bottom: 8px;
}
.canvas-field-preview img { width: 100%; display: block; }
.canvas-field-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-muted); font-size: 12px; padding: 26px 10px;
}
/* ---------- канвас стратегії — повноекранний SVG-вайтборд ---------- */
.canvas-editor-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: var(--page);
  display: flex; flex-direction: column;
  animation: side-panel-in .15s var(--ease);
}
.canvas-editor-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); box-shadow: var(--shadow);
  position: relative; z-index: 2;
}
.ce-group { display: flex; align-items: center; gap: 6px; }
.ce-group-right { margin-left: auto; }
.ce-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-secondary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s var(--ease);
}
.ce-btn:hover { background: var(--border); color: var(--text-primary); }
.ce-btn.active { background: var(--series-1); border-color: var(--series-1); color: #fff; }
.ce-btn:disabled { opacity: .4; cursor: not-allowed; }
.ce-colors { padding: 0 4px; border-left: 1px solid var(--grid); border-right: 1px solid var(--grid); }
.ce-swatch {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent;
  background: var(--sw); cursor: pointer; padding: 0; box-shadow: 0 0 0 1px var(--grid);
}
.ce-swatch.active { border-color: var(--surface-2); box-shadow: 0 0 0 2px var(--sw); }
.ce-color-custom {
  width: 24px; height: 24px; border: none; border-radius: 50%; padding: 0;
  background: none; cursor: pointer; overflow: hidden;
}
.ce-zoom-label { min-width: 40px; text-align: center; }
.canvas-editor-stage { position: relative; flex: 1; overflow: hidden; background: var(--page); }
.canvas-editor-svgwrap { position: absolute; inset: 0; }
.canvas-editor-svg { display: block; cursor: default; touch-action: none; }
.canvas-viewer-svgwrap { cursor: grab; }
.canvas-viewer-svgwrap:active { cursor: grabbing; }
/* pointer-events:all — інакше фігури з fill="none" (рамки без заливки) ловлять клік
   лише точно по контуру лінії, а не всередині своєї площі, і перетягнути їх мишкою
   за "порожню" середину неможливо */
.canvas-el { cursor: move; pointer-events: all; }
.canvas-el-text { cursor: text; user-select: none; }
.canvas-selection-box {
  fill: none; stroke: var(--series-1); stroke-width: 1.2; stroke-dasharray: 5 3;
  pointer-events: none; vector-effect: non-scaling-stroke;
}
.canvas-selection-line { stroke: var(--series-1); stroke-width: 1.2; stroke-dasharray: 5 3; pointer-events: none; vector-effect: non-scaling-stroke; }
.canvas-handle { fill: var(--surface-2); stroke: var(--series-1); stroke-width: 1.4; cursor: pointer; vector-effect: non-scaling-stroke; pointer-events: all; }
/* "серединні" ручки на лінії/стрілці — перетягни, щоб додати згин; тонші й напівпрозорі,
   щоб візуально не змагались з основними ручками-вершинами */
.canvas-handle-mid { fill: var(--surface-2); stroke: var(--text-muted); stroke-width: 1.1; opacity: .65; cursor: copy; }
.canvas-handle-mid:hover { opacity: 1; stroke: var(--series-1); }
.canvas-text-edit {
  position: absolute; z-index: 3; min-width: 60px; min-height: 1.4em;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  border: 1.5px dashed var(--series-1); border-radius: 4px;
  padding: 0 2px; font-family: var(--font); font-weight: 600;
  resize: none; outline: none; line-height: 1.25;
}
@media (max-width: 900px) {
  .canvas-editor-toolbar { gap: 8px; }
  .ce-group-right { width: 100%; justify-content: flex-end; order: 10; }
}

/* ---------- детальний звіт за період (журнал угод / бектести) ---------- */
.report-doc { max-width: 980px; }
.report-header { padding: 6px 2px 22px; border-bottom: 2px solid var(--text-primary); margin-bottom: 20px; }
.report-header-brand { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 10px; }
.report-header h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: -0.02em; }
.report-period { font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.report-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.report-kpis { margin-bottom: 14px; }
.report-section-head { margin: 22px 0 10px; }
.report-section-head h2 { margin: 0; }
.report-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.report-highlight {
  border-radius: var(--radius); padding: 14px 16px; border: 1px solid var(--border);
  background: var(--surface-2);
}
.report-highlight.good { border-color: color-mix(in srgb, var(--good) 35%, transparent); background: color-mix(in srgb, var(--good) 7%, var(--surface-2)); }
.report-highlight.bad { border-color: color-mix(in srgb, var(--critical) 35%, transparent); background: color-mix(in srgb, var(--critical) 7%, var(--surface-2)); }
.rh-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 6px; }
.rh-main { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.rh-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.report-tag-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--grid); }
.report-tag-row:last-child { border-bottom: none; }

/* ---------- загальна адаптація під мобільні екрани (навмисно в самому кінці файлу,
   щоб гарантовано переважати базові правила .modal/.side-panel/table і т.д. вище) ---------- */
@media (max-width: 860px) {
  .main { padding: 16px 14px 40px; }
  .topbar { margin-bottom: 16px; }
  .topbar h1 { font-size: 19px; }
  .topbar .toolbar { width: 100%; }
  .toolbar > .btn, .toolbar > .search-input, .toolbar > .select-inline, .toolbar > .view-toggle { flex: 1 1 auto; }
  .filters-bar { padding: 10px; }
  .filters-bar > .select-inline, .filters-bar > .search-input, .filters-bar > .filters-date-range { flex: 1 1 100%; }
  .filters-bar #btn-filters-reset, .filters-bar #btn-bt-filters-reset { margin-left: 0; flex: 1 1 100%; justify-content: center; }
  .filters-date-range input[type="date"] { flex: 1 1 0; min-width: 0; }
  .pagination { justify-content: center; }
  .pagination-range { flex: 1 1 100%; text-align: center; order: 2; }
  .pagination-pages { margin-left: 0; order: 1; width: 100%; justify-content: center; }
  .card { padding: 14px; }
  .btn { min-height: 38px; }
  .modal-backdrop { padding: 14px; align-items: center; }
  .modal { padding: 16px 16px 14px; max-height: calc(100vh - 28px); overflow-y: auto; }
  .side-panel { width: 100%; max-width: 100%; }
  .view-grid { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  table { font-size: 12.5px; }
  th, td { padding: 8px 8px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
  .topbar h1 { font-size: 17px; }
  .bt-hero-value { font-size: 34px; }
  .view-grid { grid-template-columns: 1fr; }
  .stat-tile .value { font-size: 22px; }
  .side-panel-body, .modal { padding-left: 14px; padding-right: 14px; }
  /* позначки годин на таймлайні сесій на вузьких екранах зливаються — лишаємо кожну другу (0/6/12/18) */
  .sess-timeline-axis-track span:nth-child(even) { display: none; }
}

@media print {
  .sidebar, .no-print, #toast-root, #alert-root { display: none !important; }
  .main { margin: 0 !important; padding: 0 !important; }
  body, .page { background: #fff !important; }
  .report-doc { max-width: 100% !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
  .report-highlight { break-inside: avoid; }
  a[href]:after { content: ''; }
}

/* ---------- багатокористувацькі права доступу ---------- */
.readonly-banner {
  display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--series-2) 14%, transparent);
  color: var(--text); border: 1px solid color-mix(in srgb, var(--series-2) 35%, var(--border));
  border-radius: 10px; padding: 9px 14px; font-size: 12.5px; margin-bottom: 14px;
}
.perm-matrix { width: 100%; border-collapse: collapse; }
.perm-matrix th, .perm-matrix td { padding: 6px 8px; text-align: left; font-size: 12.5px; }
.perm-matrix th { color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border); }
.perm-matrix tr + tr td { border-top: 1px solid var(--border); }
.perm-level-group { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.perm-level-group button {
  border: none; background: var(--surface-2); color: var(--text-muted); font-size: 11.5px; font-weight: 600;
  padding: 5px 10px; cursor: pointer;
}
.perm-level-group button + button { border-left: 1px solid var(--border); }
.perm-level-group button.active { background: var(--series-1); color: #fff; }
.perm-level-group button.active.level-none { background: var(--text-muted); }
.perm-level-group button.active.level-read { background: var(--series-2); }
.perm-level-group button.active.level-write { background: var(--good); }
.user-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.user-card-name { font-weight: 700; }
.user-card-role { font-size: 11.5px; color: var(--text-muted); }
.user-role-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--series-1) 16%, transparent); color: var(--series-1);
}

/* ---- План дня — компактні картки, що розгортаються ---- */
.plan-card { padding: 14px 20px; }
.plan-card > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 2px 0;
}
.plan-card > summary::-webkit-details-marker { display: none; }
.plan-summary-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.plan-chevron {
  color: var(--text-muted); font-size: 12px; transition: transform .15s var(--ease);
  flex-shrink: 0; display: inline-block;
}
.plan-card[open] .plan-chevron { transform: rotate(180deg); }
.plan-date { font-weight: 700; }
.plan-account { color: var(--text-muted); font-size: 13px; }
.plan-badge {
  font-size: 12px; color: var(--text-muted); background: var(--glass-surface);
  border: 1px solid var(--glass-border); padding: 2px 9px; border-radius: 20px;
}
.plan-summary .actions { flex-shrink: 0; margin-left: auto; }
.plan-body { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--glass-border); }

/* ---- Монте-Карло симуляція ---- */
.mc-advanced > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mc-advanced > summary::-webkit-details-marker { display: none; }
.mc-advanced > summary::after { content: '▾'; color: var(--text-muted); font-size: 13px; transition: transform .15s var(--ease); flex-shrink: 0; }
.mc-advanced[open] > summary::after { transform: rotate(180deg); }
.mc-stress-fields.disabled { opacity: .42; pointer-events: none; }
.mc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mc-tile {
  position: relative; overflow: hidden; background: var(--surface-2); border: 1px solid var(--grid);
  border-radius: 14px; padding: 16px 18px;
}
.mc-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mc, var(--series-1)); opacity: .8; }
.mc-tile-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.mc-tile-value { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; margin-top: 6px; line-height: 1; }
.mc-tile-sqn { margin-top: 7px; font-size: 12.5px; }
.mc-dd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.mc-dd-tile { background: var(--page); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.mc-dd-tile .mc-tile-value { font-size: 19px; margin-top: 5px; }
.mc-inline-num {
  width: 48px; padding: 2px 5px; font-size: 12px; margin: 0 2px; display: inline-block;
  border-radius: 6px; border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-primary); font-family: var(--font);
}
.mc-sqn-legend summary { cursor: pointer; }
.mc-sqn-table { margin-top: 8px; font-size: 12.5px; border-collapse: collapse; }
.mc-sqn-table td { padding: 3px 14px 3px 0; color: var(--text-secondary); }
@media (max-width: 900px) { .mc-tiles { grid-template-columns: 1fr; } }

/* ---------- «Вплив новин» — довідник ключових релізів ---------- */
.ni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.ni-card {
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--grid); border-radius: var(--radius);
  padding: 15px 16px; display: flex; flex-direction: column; gap: 10px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.ni-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ac, var(--series-1)); opacity: .8;
}
.ni-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--ac, var(--series-1)) 30%, var(--grid)); }
.ni-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ni-asset-badge {
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px;
  color: var(--ac, var(--series-1)); background: color-mix(in srgb, var(--ac, var(--series-1)) 15%, transparent);
  white-space: nowrap;
}
.ni-stars { color: var(--warning); font-size: 14px; letter-spacing: 1px; }
.ni-card-title { font-size: 15px; font-weight: 650; letter-spacing: -0.005em; line-height: 1.3; }
.ni-card-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 2px; }

/* деталі — широка центрована модалка (перевикористовує .share-trade-* каркас) */
.ni-detail-modal { width: 920px; max-width: 100%; }
.ni-detail-head { align-items: flex-start; }
.ni-detail-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ni-detail-title-row h2 { margin: 0; font-size: 21px; letter-spacing: -0.01em; }
.ni-detail-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.ni-detail-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-height: 70vh; overflow-y: auto; }
.ni-col { padding: 18px 22px; }
.ni-col:first-child { border-right: 1px solid var(--grid); }
.ni-col-label {
  display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 14px;
}
.ni-section { margin-bottom: 16px; }
.ni-section:last-child { margin-bottom: 0; }
.ni-section-heading { font-size: 13px; font-weight: 650; color: var(--text-primary); margin-bottom: 5px; }
.ni-section-body { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); }
.ni-section-body p { margin: 0 0 8px; }
.ni-section-body p:last-child { margin-bottom: 0; }
.ni-section-body ul, .ni-section-body ol { margin: 6px 0 8px; padding-left: 20px; }
.ni-section-body strong { color: var(--text-primary); }
@media (max-width: 760px) {
  .ni-detail-body { grid-template-columns: 1fr; max-height: 75vh; }
  .ni-col:first-child { border-right: none; border-bottom: 1px solid var(--grid); }
}


/* =====================================================================================
   Дрібні акцентні штрихи глобального "скляного" стилю, для яких немає готового
   базового селектора вище (сам стиль карток/кнопок/сайдбару/фону вже вбудований у
   відповідні базові правила по всьому файлу — це просто добірка дрібниць).
   ===================================================================================== */
.pill.info, select.select-inline:focus {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}