/* ============================================================
   Breakout Bot — темна тема інтерфейсу.

   ЩО ТУТ ЗМІНИЛОСЬ І ЧОМУ (освіження вигляду, 13.08)
   Палітра лишилась ТА САМА (--bg #0b0f16 збігається з theme-color
   у <head>, інакше на телефоні смуга браузера не в тон). Змінено те,
   що псувало акуратність:

   1. ЖОРСТКІ КОЛЬОРИ ВИНЕСЕНІ В ТОКЕНИ. #161d29, #2a1418, #0f2417,
      #16233a були розсипані по файлу десятками копій, і будь-яка
      правка відтінку означала пошук по всьому файлу. Тепер це
      --line-soft, --tint-red, --tint-green, --sel.
   2. ЦИФРИ МОНОШИРИННІ Й ТАБЛИЧНІ. У колонках обʼєму, NATR і P&L
      пропорційні цифри мають різну ширину, тому числа не вирівнюються
      по розряду і колонку неможливо читати поглядом зверху вниз.
   3. ЄДИНА СІТКА РАДІУСІВ І ВІДСТУПІВ. Було 5,6,7,8,9,10,12 px
      навперемін — тепер --r-sm/--r/--r-lg.
   4. ВИДИМИЙ ФОКУС. Раніше рамку при фокусі отримували лише поля
      введення, кнопки — нічого; з клавіатури неможливо було зрозуміти,
      де ти. Додано :focus-visible, який НЕ зсуває розмітку (outline,
      а не border).
   5. Густина не змінена: той самий кегль 13px, ті самі висоти рядків
      і padding. Задача була «чистіше», а не «просторіше».
   ============================================================ */

:root{
  /* тло й межі */
  --bg:#0b0f16; --bg2:#111722; --bg3:#151c29; --line:#1e2635;
  --line-soft:#161d29;          /* розділювач між рядками таблиць */
  --line-hi:#2d3a4f;            /* межа при наведенні */
  --sel:#16233a;                /* вибраний рядок */
  --row-hover:rgba(255,255,255,.04);

  /* текст */
  --txt:#d7dde7; --muted:#7a8698; --txt-hi:#fff;

  /* акценти */
  --accent:#22c55e; --accent2:#3b82f6; --accent2-hi:#2f6fd8;
  --red:#ef4444; --orange:#f59e0b; --green:#22c55e; --violet:#7c3aed;
  --yellow:#fcd34d;

  /* підкладки під стани (той самий вигляд, що був жорстко вписаний) */
  --tint-green:#0f2417; --tint-red:#2a1418; --tint-blue:#1a2333;
  --tint-orange:#2a2314; --tint-grey:#1a1f2a;
  --border-red:#3d1d22; --border-orange:#7c5c14;

  /* геометрія */
  --r-sm:6px; --r:8px; --r-lg:10px; --r-xl:12px;

  /* шрифти */
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:"Cascadia Mono","Cascadia Code",Consolas,"SF Mono",ui-monospace,monospace;

  /* фокус: outline, щоб не зсувати розмітку */
  --focus:0 0 0 2px rgba(59,130,246,.45);
}

*{box-sizing:border-box;margin:0;padding:0}

body{background:var(--bg);color:var(--txt);
  font:13px/1.45 var(--ui);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

button,input,select,textarea{font-family:inherit;font-size:13px;color:inherit}
button{line-height:1.2}

/* Числа вирівнюються по розряду всюди, де їх читають стовпчиком. */
.num,.pnl-value,.sc-pnl,.pnl-row-val,.rr-badge,.r-badge,.replay-now,
.coins td,.journal td{font-variant-numeric:tabular-nums}
.coins td.num,.journal td.num,.sc-pnl,.pnl-value{font-family:var(--mono);
  font-feature-settings:"tnum" 1}

::selection{background:rgba(59,130,246,.35);color:#fff}

/* Смуги прокрутки в тон темі: світлі системні смуги на темному тлі
   різали око сильніше за будь-який елемент інтерфейсу. */
*{scrollbar-width:thin;scrollbar-color:#263041 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#263041;border-radius:6px;
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#33415a;background-clip:content-box}

/* Єдине правило фокуса на всі інтерактивні елементи. */
button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus)}

/* ---------- шапка ---------- */
.topbar{display:flex;align-items:center;gap:24px;padding:0 18px;height:52px;
  background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.logo{font-weight:700;letter-spacing:.5px;color:var(--accent);font-size:15px;
  white-space:nowrap}
.tabs{display:flex;gap:4px}
.tab{background:none;border:none;color:var(--muted);padding:8px 16px;border-radius:var(--r);
  cursor:pointer;font-weight:600;transition:color .15s,background .15s}
.tab:hover{color:var(--txt);background:var(--bg3)}
.tab.active{background:var(--bg3);color:var(--txt-hi)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.indicator{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;
  white-space:nowrap}
.indicator.off{background:var(--tint-red);color:var(--red)}
/* 12.20: жовтий стан шапки — конфіги лаб/бот розійшлись */
.indicator.warn { background:#3a2f12; color:#f59e0b; border-color:#f59e0b; }

.indicator.on{background:var(--tint-green);color:var(--green)}

/* ---------- сторінки ---------- */
.page{display:none;padding:16px}
.page.active{display:block}

/* ---------- вочліст ---------- */
/* 4 колонки: інструменти · графік · роздільник · бокова панель.
   Ширина панелі живе в --side-w, її тягне мишею .side-resizer. */
.watchlist-layout{display:grid;grid-template-columns:48px 1fr 6px var(--side-w,520px);
  gap:12px;height:calc(100vh - 84px)}
.drawtools{display:flex;flex-direction:column;gap:6px;background:var(--bg2);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:6px}
.dtool{width:34px;height:34px;background:none;border:none;color:var(--muted);
  border-radius:var(--r);cursor:pointer;font-size:16px;
  transition:color .15s,background .15s}
.dtool:hover{background:var(--bg3);color:var(--txt)}
.dtool.active{background:var(--accent2);color:#fff}
.dtool.danger:hover{background:var(--tint-red);color:var(--red)}
/* магніт — окремий перемикач, не скидає активний інструмент */
.dtool.toggle.on{background:var(--violet);color:#fff}

.chart-area{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;flex-direction:column;overflow:hidden;position:relative}
.chart-head{display:flex;align-items:center;gap:14px;padding:8px 12px;
  border-bottom:1px solid var(--line)}
.chart-symbol{font-weight:700;font-size:14px;letter-spacing:.2px}
.tf-group{display:flex;gap:2px;background:var(--bg3);border-radius:var(--r);padding:2px}
.tf{background:none;border:none;color:var(--muted);padding:4px 10px;
  border-radius:var(--r-sm);cursor:pointer;transition:color .15s,background .15s}
.tf:hover{color:var(--txt)}
.tf.active{background:var(--accent2);color:#fff}
.chk{display:flex;align-items:center;gap:5px;color:var(--muted);cursor:pointer;font-size:12px}
.chk:hover{color:var(--txt)}
.chart-info{margin-left:auto;color:var(--muted);font-size:12px;
  font-variant-numeric:tabular-nums}
.chart{flex:1;min-height:300px}
.chart.dragging{cursor:grabbing}
.ruler-box{position:absolute;background:#3b82f6dd;color:#fff;padding:4px 8px;
  border-radius:var(--r-sm);font-size:12px;pointer-events:none;z-index:50;
  font-variant-numeric:tabular-nums}

/* ---------- таблиця монет ---------- */
.coinlist{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;flex-direction:column;overflow:hidden}
.coinlist-head{display:flex;gap:8px;padding:8px;border-bottom:1px solid var(--line)}
#coinSearch{flex:1;background:var(--bg3);border:1px solid var(--line);color:var(--txt);
  padding:7px 10px;border-radius:var(--r);transition:border-color .15s}
#coinSearch::placeholder{color:var(--muted)}
#coinSearch:focus{outline:none;border-color:var(--accent2)}
.mini{background:var(--bg3);border:1px solid var(--line);color:var(--muted);
  width:32px;border-radius:var(--r);cursor:pointer;transition:color .15s,border-color .15s}
.mini:hover{color:var(--txt);border-color:var(--line-hi)}
.coins{width:100%;border-collapse:collapse;display:block;overflow-y:auto}
.coins thead,.coins tbody{display:table;width:100%;table-layout:fixed}
.coins tbody{display:block;overflow-y:auto;max-height:calc(100vh - 180px)}
.coins tbody tr{display:table;width:100%;table-layout:fixed;cursor:pointer}
.coins th{text-align:left;padding:9px 10px;color:var(--muted);font-size:11px;
  font-weight:600;text-transform:uppercase;letter-spacing:.4px;cursor:pointer;
  user-select:none;border-bottom:1px solid var(--line);background:var(--bg2);
  white-space:nowrap;position:relative;transition:color .15s}
.coins th:hover{color:var(--txt)}
.coins th.num,.coins td.num{text-align:right}
.coins td{padding:8px 10px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.coins th,.coins td{overflow:hidden;text-overflow:ellipsis}
.coins tbody tr:hover{background:var(--bg3)}
.coins tbody tr.sel{background:var(--sel)}
.sym{font-weight:700;letter-spacing:.2px}
.pos{color:var(--green)} .neg{color:var(--red)}
.vol-hi{color:var(--accent);font-weight:600}
.arr{font-size:9px;opacity:.6;margin-left:3px}
.muted{color:var(--muted);text-align:center;padding:20px}

/* зміна ширини колонок мишею */
.col-resizer{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;
  z-index:5}
.col-resizer:hover{background:var(--accent2)}

/* роздільник ширини бокової панелі */
.side-resizer{cursor:col-resize;background:transparent;position:relative}
.side-resizer::after{content:'';position:absolute;inset:0 2px;background:var(--line);
  border-radius:2px;transition:background .15s}
.side-resizer:hover::after,.side-resizer.dragging::after{background:var(--accent2)}
body.resizing{cursor:col-resize;user-select:none}

/* фільтр і лічильник монет */
#coinFilter{background:var(--bg3);border:1px solid var(--line);color:var(--txt);
  border-radius:var(--r);padding:0 6px;cursor:pointer}
.coins-count{padding:7px 10px;border-top:1px solid var(--line);color:var(--muted);
  font-size:11px;font-variant-numeric:tabular-nums}
/* Чорний список і фільтр обʼєму лише ПОЗНАЧАЮТЬ монету, а не ховають:
   вочліст показує весь ринок (ЗАФІКСОВАНО §5). */
.coins tbody tr.is-excluded .sym{color:#6b7280;text-decoration:line-through}
.coins tbody tr.is-lowvol{opacity:.55}
.tag-x{font-size:9px;color:var(--red);margin-left:4px}

/* регулятор висоти обʼєму */
.vol-ctl{gap:7px}
.vol-ctl input[type=range]{width:80px;accent-color:var(--accent2);cursor:pointer}
#volHeightVal{min-width:30px;color:var(--txt);font-variant-numeric:tabular-nums}

/* ---------- панелі ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px}
.panel.wide{margin-top:14px}
.panel h3{font-size:12px;text-transform:uppercase;color:var(--muted);
  letter-spacing:.5px;margin:16px 0 10px}
.panel h3:first-child{margin-top:0}
.field{margin-bottom:10px}
.field label{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;background:var(--bg3);
  border:1px solid var(--line);color:var(--txt);padding:8px 10px;border-radius:var(--r);
  transition:border-color .15s}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-hi)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--accent2)}
.field input[type=number]{font-variant-numeric:tabular-nums}
.field.checkbox label{display:flex;align-items:center;gap:8px;color:var(--txt)}
.field.checkbox input{width:auto;accent-color:var(--accent2)}
.row-btns{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.btn{background:var(--bg3);border:1px solid var(--line);color:var(--txt);
  padding:9px 16px;border-radius:var(--r);cursor:pointer;font-weight:600;
  transition:background .15s,border-color .15s,color .15s}
.btn:hover{border-color:var(--line-hi)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent2);border-color:var(--accent2);color:#fff}
.btn.primary:hover{background:var(--accent2-hi);border-color:var(--accent2-hi)}
.btn.danger{background:var(--tint-red);border-color:var(--border-red);color:var(--red)}
.btn.danger:hover{border-color:var(--red)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.status{margin-top:10px;font-size:12px;color:var(--muted);min-height:18px}
.console{background:#080b11;border:1px solid var(--line);border-radius:var(--r);
  padding:12px;font:12px/1.5 var(--mono);color:#b9c4d4;
  max-height:420px;overflow:auto;white-space:pre-wrap;font-variant-numeric:tabular-nums}
.console.tall{max-height:calc(100vh - 160px)}
.hint-note{color:var(--muted);font-size:11px;line-height:1.5;
  background:var(--bg3);padding:8px 10px;border-radius:var(--r);
  border:1px solid var(--line)}
/* Звірка бектесту й бота: якщо шляхи коду розійшлись — це не «попередження»,
   а повідомлення про те, що всі числа нижче нічого не варті. Тому червоне
   і на видноті, а не сірим дрібним шрифтом серед підказок. */
.hint-note.danger{background:var(--tint-red);border-color:var(--border-red);
  color:var(--red)}

/* ---------- щоденник ---------- */
.journal-head{display:flex;align-items:center;gap:24px;margin-bottom:14px}
.journal-head h2{font-size:20px;letter-spacing:-.2px}
.pnl-cards{display:flex;gap:10px;margin-left:auto}
.pnl-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:9px 18px;text-align:center}
.pnl-label{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;
  letter-spacing:.4px}
.pnl-value{display:block;font-size:17px;font-weight:700;margin-top:2px}
.pnl-value.sm{font-size:13px}
.note{color:var(--muted);font-size:12px;margin-bottom:10px}
/* Попередження всередині картки угоди: сигнал, якого не надсилали */
.warn-note{color:var(--yellow);font-size:12px;line-height:1.5;margin-bottom:8px;
  border-left:2px solid var(--yellow);padding-left:8px}
.row-blocked{opacity:.45}
.journal{width:100%;border-collapse:collapse;background:var(--bg2);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.journal th{text-align:left;padding:10px 12px;color:var(--muted);font-size:11px;
  text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line)}
.journal th.num,.journal td.num{text-align:right}
.journal td{padding:9px 12px;border-bottom:1px solid var(--line-soft)}
.journal tbody tr:hover{background:var(--bg3)}
.journal .tick{color:var(--accent2);font-weight:700;cursor:pointer}
.journal .tick:hover{text-decoration:underline}
.badge{padding:2px 8px;border-radius:var(--r-sm);font-size:11px;font-weight:600;
  white-space:nowrap}
.badge.long{background:var(--tint-green);color:var(--green)}
.badge.short{background:var(--tint-red);color:var(--red)}
.badge.yes{background:var(--tint-green);color:var(--green)}
.badge.no{background:var(--tint-grey);color:var(--muted)}
.sys-tag{background:var(--bg3);color:var(--accent2);padding:2px 8px;
  border-radius:var(--r-sm);font-size:11px;font-weight:600}

/* ---------- P&L по системах ---------- */
.pnl-row{display:flex;align-items:baseline;gap:10px;padding:9px 10px;
  border-bottom:1px solid var(--line-soft)}
.pnl-row:last-child{border-bottom:none}
.pnl-row-name{font-weight:700;min-width:130px}
.pnl-row-val{color:var(--accent2);font-weight:600}
.pnl-row-sub{color:var(--muted);font-size:12px;margin-left:auto}
#pnlPeriod{background:var(--bg3);border:1px solid var(--line);color:var(--txt);
  border-radius:var(--r-sm);padding:2px 6px;font-size:13px;cursor:pointer}

/* ---------- підвкладки в Щоденнику ---------- */
.subtabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.subtab{background:none;border:none;color:var(--muted);padding:9px 18px;cursor:pointer;
  font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s,border-color .15s}
.subtab:hover{color:var(--txt)}
.subtab.active{color:var(--txt-hi);border-bottom-color:var(--accent2)}
.subpage{display:none}
.subpage.active{display:block}

/* ---------- модалка ---------- */
.modal{position:fixed;inset:0;background:#000000cc;display:flex;
  align-items:center;justify-content:center;z-index:200;
  backdrop-filter:blur(2px)}
.modal.hidden,.hidden{display:none}
.modal-inner{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-xl);
  width:min(1100px,94vw);height:min(680px,90vh);display:flex;flex-direction:column;
  overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.55)}
.modal-head{display:flex;align-items:center;gap:14px;padding:12px 16px;
  border-bottom:1px solid var(--line);font-weight:700}
.modal-head .mini{margin-left:auto}
.modal-hint{padding:6px 16px;color:var(--muted);font-size:11px;
  border-top:1px solid var(--line)}
.modal-inner .ruler-box{position:absolute;z-index:220}
.trade-summary{padding:14px 16px;border-top:1px solid var(--line);display:flex;
  gap:26px;flex-wrap:wrap;font-size:13px;font-variant-numeric:tabular-nums}
.trade-summary b{font-size:16px}
.sym-pnl{margin-left:auto;font-weight:700;font-size:13px}
.sym-pnl-sub{display:block;font-size:11px;font-weight:400;color:var(--muted);
  text-align:right}

/* показник R:R у підсумку угоди */
.rr-badge{background:var(--accent2);color:#fff;padding:4px 12px;border-radius:var(--r-sm);
  font-weight:700;font-size:14px;letter-spacing:.3px}
.r-badge{margin-left:8px;padding:4px 12px;border-radius:var(--r-sm);font-weight:700;
  font-size:14px;color:#fff}
.r-badge.pos-bg{background:var(--green)}
.r-badge.neg-bg{background:var(--red)}

/* лінійка (виділена область) на графіку */
.ruler-area{position:absolute;z-index:210;border:1px dashed;pointer-events:none;
  border-radius:2px}

/* інструменти малювання в модалці угоди */
.modal-tools{position:absolute;left:10px;top:56px;z-index:230;display:flex;
  flex-direction:column;gap:4px;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r);padding:4px}
.mtool{width:30px;height:30px;background:var(--bg3);border:1px solid var(--line);
  color:var(--txt);border-radius:var(--r-sm);cursor:pointer;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,background .15s}
.mtool:hover{border-color:var(--accent2)}
.mtool.active{background:var(--accent2);border-color:var(--accent2);color:#fff}

/* ---------- версія збірки ---------- */
.build-ver{background:var(--bg3);color:var(--muted);padding:5px 10px;
  border-radius:var(--r-sm);font-size:11px;font-weight:700;letter-spacing:.3px;
  font-variant-numeric:tabular-nums}

/* ---------- показові угоди ---------- */
.sc-symbol{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-lg);
  margin-bottom:10px;overflow:hidden}
.sc-symbol-head{display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:var(--bg3);font-weight:700}
.sc-symbol-head .cnt{color:var(--muted);font-weight:400;font-size:12px}
.sc-row{display:grid;grid-template-columns:110px 80px 1fr 120px 90px;
  gap:10px;align-items:center;padding:9px 14px;border-top:1px solid var(--line-soft);
  cursor:pointer;transition:background .15s}
.sc-row:hover{background:var(--bg3)}
.sc-row.empty{cursor:default;color:var(--muted)}
.cat{padding:3px 9px;border-radius:var(--r-sm);font-size:11px;font-weight:700;
  text-align:center}
.cat.best{background:var(--tint-green);color:var(--green)}
.cat.worst{background:var(--tint-red);color:var(--red)}
.cat.median{background:var(--tint-blue);color:var(--accent2)}
.cat.wick{background:var(--tint-orange);color:var(--orange)}
.sc-res{font-size:12px;color:var(--muted)}
.sc-pnl{font-weight:700;text-align:right}
.sc-pnl-sub{display:block;font-size:10px;font-weight:400;color:var(--muted)}

/* ---------- вкладка API ---------- */
.warn-box{background:var(--tint-orange);border:1px solid var(--border-orange);
  color:var(--yellow);padding:12px 14px;border-radius:var(--r);margin-bottom:14px;
  font-size:12px;line-height:1.6}
.warn-box code{background:#00000055;padding:1px 5px;border-radius:4px;
  font-family:var(--mono)}
.ex-card{background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);
  padding:12px;margin-bottom:10px}
.ex-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ex-name{font-weight:700}
.ex-badge{font-size:10px;padding:2px 7px;border-radius:var(--r-sm);font-weight:700}
.ex-badge.on{background:var(--tint-green);color:var(--green)}
.ex-badge.off{background:var(--tint-grey);color:var(--muted)}
.ex-badge.warn{background:var(--tint-orange);color:var(--orange)}
.ex-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.ex-fields input{background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  padding:7px 9px;border-radius:var(--r-sm);width:100%;font-size:12px;
  transition:border-color .15s}
.ex-fields input:focus{outline:none;border-color:var(--accent2)}
.ex-fields label{display:block;color:var(--muted);font-size:11px;margin-bottom:3px}
.ex-actions{display:flex;gap:6px;align-items:center}
.ex-actions .btn{padding:6px 12px;font-size:12px}
.ex-result{font-size:12px;color:var(--muted);margin-left:auto}

/* кнопки бірж */
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.ex-btn{background:var(--bg3);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 12px;cursor:pointer;text-align:left;color:var(--txt);
  display:flex;flex-direction:column;gap:4px;
  transition:border-color .15s,background .15s}
.ex-btn:hover{border-color:var(--accent2);background:var(--tint-blue)}
.ex-btn.ready{border-left:3px solid var(--green)}
.ex-btn-name{font-weight:700;font-size:14px}
.ex-btn-state{font-size:11px;color:var(--muted)}
.ex-btn.ready .ex-btn-state{color:var(--green)}
.ex-btn-warn{font-size:10px;color:var(--orange)}

/* вікно введення ключів */
.key-dialog{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-xl);
  width:min(440px,94vw);max-height:90vh;display:flex;flex-direction:column;
  overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.55)}
.key-dialog-head{display:flex;align-items:center;padding:14px 16px;font-weight:700;
  border-bottom:1px solid var(--line)}
.key-dialog-head .mini{margin-left:auto}
.key-dialog-body{padding:16px;overflow-y:auto}
.key-dialog-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;
  border-top:1px solid var(--line)}
.key-dialog-result{margin-top:10px;font-size:12px;color:var(--muted);
  min-height:16px;line-height:1.5}

/* ---------- прогони ---------- */
.run-row{cursor:pointer}
.run-row:hover{background:var(--row-hover)}
#equityCanvas{display:block;width:100%;border-radius:var(--r-sm)}

/* Провал тунелю має виглядати як провал, а не як нейтральний статус:
   раніше помилка мовчки викидалась, і людина чекала на адресу, якої
   вже не буде. */
.access-status.err{background:var(--tint-red);border-color:var(--border-red);
  color:var(--red)}

/* ---- РЕПЛЕЙ: панель відмотування під шапкою графіка ---- */
.replay-bar{display:flex;align-items:center;gap:6px;padding:6px 10px;
  background:var(--bg2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.replay-bar.hidden{display:none}
.replay-bar .rbtn{background:var(--bg3);border:1px solid var(--line);color:#b8bfc9;
  border-radius:var(--r-sm);padding:3px 9px;cursor:pointer;font-size:13px;
  transition:background .15s,color .15s}
.replay-bar .rbtn:hover{background:#1b2433;color:#e2e8f0}
.replay-slider{flex:1;min-width:180px;accent-color:var(--accent2)}
.replay-now{font:12px var(--mono);color:var(--orange);min-width:210px}
#replayDays{background:var(--bg3);border:1px solid var(--line);color:#b8bfc9;
  border-radius:var(--r-sm);padding:2px 4px}

/* Стара версія коду в памʼяті — смуга на всю ширину, її неможливо
   не помітити. Саме непомітність і була проблемою: три прогони
   виконались старим кодом, і ніде про це не було сказано. */
.stale-banner{background:#7f1d1d;color:#fee2e2;border-bottom:1px solid #b91c1c;
  padding:10px 16px;font-size:14px;line-height:1.45;font-weight:600}

/* ================= ТЕЛЕФОН ================= */
@media (max-width: 900px){
  .topbar{height:auto;flex-wrap:wrap;gap:10px;padding:10px 12px}
  .tabs{order:3;width:100%;overflow-x:auto;padding-bottom:2px}
  .tab{padding:7px 12px;font-size:13px;white-space:nowrap}
  .topbar-right{margin-left:auto}
  .page{padding:10px}

  /* графік і список монет — один під одним */
  .watchlist-layout{grid-template-columns:1fr;height:auto;gap:10px}
  .drawtools{flex-direction:row;overflow-x:auto}
  .chart-area{height:52vh}
  .side-resizer{display:none}
  .coinlist{max-height:60vh}
  .coins tbody{max-height:52vh}
  .chart-head{flex-wrap:wrap;gap:8px}
  .chart-info{width:100%;margin-left:0;font-size:11px}

  /* панелі в один стовпець */
  .two-col{grid-template-columns:1fr;gap:10px}
  .console{max-height:300px;font-size:11px}
  .console.tall{max-height:400px}

  /* щоденник: горизонтальна прокрутка замість стиснення */
  .journal{display:block;overflow-x:auto;white-space:nowrap}
  .journal-head{flex-wrap:wrap;gap:12px}
  /* ⚠️ СІМ ПЛИТОК НЕ ВЛІЗАЮТЬ У ОДИН РЯД НА ТЕЛЕФОНІ (12.66).
     Було flex:1 без переносу: на екрані ~390px кожна плитка діставала
     близько 47px, і підпис разом зі значенням просто не поміщались.
     Через це додана плитка «Просадка» на телефоні була невидима, і
     рядок виглядав так само, як до неї. Тепер плитки переносяться. */
  .pnl-cards{margin-left:0;width:100%;flex-wrap:wrap;gap:6px;
    justify-content:flex-start}
  .pnl-card{flex:1 1 calc(33.333% - 4px);padding:8px 6px;min-width:0}
  .pnl-label{font-size:10px;letter-spacing:.2px}
  .pnl-value{font-size:15px}

  /* показові угоди */
  .sc-row{grid-template-columns:90px 1fr 80px;gap:6px;font-size:12px}
  .sc-row span:nth-child(3){display:none}

  /* модалка на весь екран */
  .modal-inner{width:100vw;height:100vh;border-radius:0}
  .modal-head{flex-wrap:wrap;gap:8px;font-size:14px}
  .trade-summary{gap:12px;font-size:12px;padding:10px}

  /* вкладка API */
  .ex-fields{grid-template-columns:1fr}
  .subtabs{overflow-x:auto}
  .subtab{white-space:nowrap;padding:8px 12px;font-size:13px}

  /* інструменти модалки — в рядок, щоб не закривали графік */
  .modal-tools{flex-direction:row;left:8px;top:auto;bottom:60px}
}

@media (max-width: 480px){
  .chart-area{height:44vh}
  .btn{padding:8px 12px;font-size:12px}
  h2{font-size:16px}
}

/* Рухи вимикаємо тим, хто про це попросив у системі. */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
  .btn:active{transform:none}
}


/* ── ТЕСТОВІ УГОДИ: перехід до списку угод монети ────────────────────
   Заголовок монети став кнопкою. Підказка й стрілка потрібні саме тут:
   без них клікабельність невидима, і вкладка виглядає як була. */
.sc-head-click { cursor: pointer; }
.sc-head-click:hover { background: rgba(59,130,246,.10); }
.sc-more { color: #3b82f6; }
.btn-back {
  background: none; border: 1px solid #3b82f6; color: #3b82f6;
  border-radius: 6px; padding: 2px 10px; cursor: pointer;
  font-size: 13px; margin-right: 10px;
}
.btn-back:hover { background: rgba(59,130,246,.12); }
.sc-note { padding: 4px 10px 8px; color: #94a3b8; font-size: 12px; }
.cat.sample { background: rgba(59,130,246,.15); color: #3b82f6; }

/* ============ ПРОФІЛЬ ПРОГОНУ: ОСНОВНИЙ / ШВИДКИЙ (11.98) ============
   Форма одна на два режими, тому режим має бути видно з будь-якої
   точки сторінки — інакше легко покрутити ручки не в тому файлі.
   Рамка навколо всієї вкладки коштує один клас і помітна периферійним
   зором, на відміну від активної кнопки вгорі. */
#tab-backtest.bt-fast {
  box-shadow: inset 0 0 0 2px #b8860b;
  border-radius: 8px;
}
#tab-backtest.bt-fast #btProfilePanel {
  border-left: 4px solid #b8860b;
}
#tab-backtest.bt-fast #runBacktest {
  background: #8a6508;
}
#btProfileDiff code { font-size: 12px; }

/* ============ СТРІЛКИ МІЖ ТЕСТОВИМИ УГОДАМИ (11.99) ============
   По боках вікна, поверх графіка. Напівпрозорі, щоб не заважати
   дивитись на свічки, і виразні при наведенні. */
.sc-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 38px;
  height: 64px;
  border: none;
  border-radius: 6px;
  background: rgba(20, 24, 33, 0.62);
  color: #cbd5e1;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.sc-nav:hover { background: rgba(59, 130, 246, 0.85); color: #fff; }
.sc-nav-prev { left: 6px; }
.sc-nav-next { right: 6px; }
.sc-nav.hidden { display: none; }

/* ============ РОЗМІТКА РІВНІВ (WATCHLIST-LEVEL-LABELING-V1) ============
   Панель навмисно компактна й НАД графіком, а не збоку: рішення
   ухвалюється очима по свічках, і панель не має відбирати ширину в
   самого графіка. */
.label-panel {
  position: relative;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: #131a26;
  border: 1px solid #24304a;
  border-radius: 8px;
  margin: 0 0 6px 0;
  font-size: 12px;
  color: #cbd5e1;
}
.label-panel.hidden { display: none; }
.label-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.label-title { font-weight: 700; color: #e2e8f0; letter-spacing: .3px; }
.label-where { color: #93c5fd; }
.label-counters { color: #a3a3a3; }
.label-history { color: #a3a3a3; }
.label-candidate {
  font: 12px/1.4 Consolas, monospace;
  color: #e2e8f0;
}
.label-msg { color: #fca5a5; }
.label-msg.ok { color: #86efac; }
.lbtn {
  border: 1px solid #2b3a55;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
  background: #1b2536;
}
.lbtn:disabled { opacity: .45; cursor: default; }
.lbtn.ok { background: #14532d; border-color: #166534; }
.lbtn.no { background: #4c1d24; border-color: #7f1d1d; }
.lbtn.add { background: #1e293b; }
.lbtn.armed { outline: 2px solid #f59e0b; }
/* CORRECTION-2 (WL-C2-DATA-001): дві причини «НЕ БРАТИ» безпосередньо
   під головною кнопкою. Меню накладається поверх графіка (absolute),
   тому не змінює ні висоту панелі, ні розмір контейнера графіка —
   відкриття/закриття не може зсунути видиму область. */
.label-reject-wrap { position: relative; display: inline-block; }
.label-reject-menu {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 30;
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px; border: 1px solid #7f1d1d; border-radius: 6px;
  background: #0f172a; box-shadow: 0 6px 18px rgba(0,0,0,.45);
  white-space: nowrap;
}
.label-reject-menu.hidden { display: none; }
.lbtn.sub { font-size: 11px; padding: 4px 10px; text-align: left; }
#labelReject.open { outline: 2px solid #ef4444; }
#labelToggle.on { background: #1d4ed8; color: #fff; }