:root {
  --bg: #030811;
  --cyan: #00d4ff;
  --amber: #ffaa00;
  --green: #00ff88;
  --red: #ff3355;
  --text: #7ecfff;
  --text-dim: rgba(126,207,255,0.45);
  --glow-cyan: rgba(0,212,255,0.25);
  --glow-green: rgba(0,255,136,0.35);
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani','Share Tech Mono','Courier New',monospace;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Top bar ── */
.topbar {
  height: 36px;
  background: rgba(3,8,17,0.97);
  border-bottom: 1px solid rgba(0,212,255,0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  flex-shrink: 0;
}
.topbar-title { font-size:11px; letter-spacing:5px; color:var(--cyan); text-shadow:0 0 12px var(--cyan); font-weight:600; }
.topbar-status { display:flex; align-items:center; gap:6px; }
.status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.status-dot.online  { background:var(--green); box-shadow:0 0 8px var(--green); }
.status-dot.offline { background:var(--red);   box-shadow:0 0 8px var(--red); }
.status-txt { font-size:9px; letter-spacing:2px; color:var(--text-dim); }

/* ── SL Banner ── */
.sl-banner {
  background: rgba(255,51,85,0.15);
  border-bottom: 1px solid rgba(255,51,85,0.4);
  color: var(--red);
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 6px 18px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Main layout ── */
.trade-wrap {
  display: flex;
  gap: 14px;
  padding: 14px 18px 8px;
  flex: 1;
  min-height: 0;
}

/* ── Chart column ── */
.trade-chart-col { flex:1; display:flex; flex-direction:column; min-width:0; }
.trade-interval-bar { display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-shrink:0; }
.trade-interval-lbl { font-size:7px; letter-spacing:2px; color:var(--text-dim); margin-right:4px; }
.trade-iv-btn {
  background:transparent; border:1px solid rgba(0,212,255,0.15);
  border-radius:3px; color:var(--text-dim); font-family:inherit;
  font-size:10px; letter-spacing:0.5px; padding:2px 7px; cursor:pointer; transition:all 0.15s;
}
.trade-iv-btn:hover  { border-color:var(--cyan); color:var(--cyan); }
.trade-iv-btn.active { border-color:var(--cyan); color:var(--cyan); background:rgba(0,212,255,0.08); }
.trade-chart-status { font-size:10px; letter-spacing:1px; color:var(--text-dim); margin-left:auto; }
.trade-chart-wrap { position:relative; flex:1; min-height:0; }
.trade-chart-wrap canvas { width:100%; height:100%; display:block; cursor:crosshair; }
.trade-tooltip {
  position:absolute; top:8px; left:68px;
  background:rgba(3,8,20,0.92); border:1px solid rgba(0,212,255,0.2);
  border-radius:4px; padding:6px 10px; pointer-events:none; z-index:10;
}
.tt-row { display:flex; gap:8px; font-size:11px; }
.tt-lbl { color:var(--text-dim); width:12px; }
.tt-val { color:var(--text); }

/* ── Order form column ── */
.trade-order-col {
  width: 220px; flex-shrink:0; display:flex; flex-direction:column; gap:8px;
  overflow-y:auto; overflow-x:hidden;
}

/* Symbol search */
.trade-sym-wrap { position:relative; }
.trade-sym-input {
  background:rgba(0,212,255,0.05); border:1px solid rgba(0,212,255,0.25);
  border-radius:4px; color:var(--cyan); font-family:inherit; font-size:14px; font-weight:700;
  letter-spacing:1px; padding:4px 10px; width:100%; outline:none; user-select:text;
}
.trade-sym-input:focus { border-color:var(--cyan); box-shadow:0 0 8px var(--glow-cyan); }
.trade-sym-dropdown {
  position:fixed; background:rgba(3,8,20,0.98); border:1px solid rgba(0,212,255,0.25);
  border-radius:4px; width:220px; max-height:220px; overflow-y:auto; z-index:9999; display:none;
}
.trade-sym-dropdown.open { display:block; }
.trade-sym-item { padding:5px 10px; font-size:12px; letter-spacing:0.5px; color:var(--text-dim); cursor:pointer; }
.trade-sym-item:hover, .trade-sym-item.selected { background:rgba(0,212,255,0.1); color:var(--cyan); }

/* Price strip */
.trade-price-strip { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.trade-price-val { font-size:20px; font-weight:700; color:var(--cyan); letter-spacing:1px; }
.trade-price-change { font-size:12px; font-weight:600; }
.trade-price-change.up   { color:var(--green); }
.trade-price-change.down { color:var(--red); }
.trade-stat-item { display:flex; flex-direction:column; gap:1px; }
.trade-stat-lbl { font-size:7px; letter-spacing:1.5px; color:var(--text-dim); }
.trade-stat-num { font-size:11px; font-weight:600; color:var(--text); }
.trade-stat-num.green { color:var(--green); }
.trade-stat-num.red   { color:var(--red); }

/* Balance box */
.trade-balance-box {
  background:rgba(0,212,255,0.03); border:1px solid rgba(0,212,255,0.1);
  border-radius:4px; padding:8px 10px;
}
.trade-balance-hdr { font-size:7px; letter-spacing:2px; color:var(--text-dim); margin-bottom:5px; }
.trade-balance-row { display:flex; justify-content:space-between; font-size:11px; margin-bottom:3px; }
.tbl-asset { color:var(--text-dim); letter-spacing:0.5px; }
.tbl-free  { color:var(--text); font-weight:600; }
.trade-refresh-bal {
  background:transparent; border:1px solid rgba(0,212,255,0.15); border-radius:3px;
  color:var(--text-dim); font-family:inherit; font-size:9px; letter-spacing:1px;
  padding:2px 6px; cursor:pointer; width:100%; margin-top:4px; transition:all 0.15s;
}
.trade-refresh-bal:hover { border-color:var(--cyan); color:var(--cyan); }

/* Side / type toggles */
.trade-side-toggle { display:flex; border:1px solid rgba(0,212,255,0.15); border-radius:4px; overflow:hidden; }
.trade-side-btn {
  flex:1; background:transparent; border:none; font-family:inherit;
  font-size:11px; font-weight:700; letter-spacing:1.5px; padding:6px;
  cursor:pointer; transition:all 0.15s; color:var(--text-dim);
}
.trade-side-btn.buy.active  { background:rgba(0,255,136,0.12); color:var(--green); }
.trade-side-btn.sell.active { background:rgba(255,51,85,0.12);  color:var(--red); }
.trade-type-toggle { display:flex; border:1px solid rgba(0,212,255,0.1); border-radius:4px; overflow:hidden; }
.trade-type-btn {
  flex:1; background:transparent; border:none; font-family:inherit;
  font-size:10px; letter-spacing:1px; padding:4px; cursor:pointer;
  color:var(--text-dim); transition:all 0.15s;
}
.trade-type-btn.active { background:rgba(0,212,255,0.08); color:var(--cyan); }

/* Fields */
.trade-fields { display:flex; flex-direction:column; gap:6px; }
.trade-field-row { display:flex; flex-direction:column; gap:2px; }
.trade-field-lbl { font-size:8px; letter-spacing:1.5px; color:var(--text-dim); }
.trade-field-input {
  background:rgba(0,212,255,0.04); border:1px solid rgba(0,212,255,0.18);
  border-radius:3px; color:var(--text); font-family:inherit; font-size:12px;
  padding:5px 8px; outline:none; width:100%; user-select:text;
}
.trade-field-input:focus { border-color:var(--cyan); box-shadow:0 0 6px var(--glow-cyan); }
.trade-pct-row { display:flex; gap:4px; }
.trade-pct-btn {
  flex:1; background:transparent; border:1px solid rgba(0,212,255,0.12);
  border-radius:3px; color:var(--text-dim); font-family:inherit;
  font-size:9px; padding:3px 0; cursor:pointer; transition:all 0.15s;
}
.trade-pct-btn:hover { border-color:var(--cyan); color:var(--cyan); }

/* Bracket panel */
.trade-bracket-panel {
  background:rgba(0,212,255,0.04); border:1px solid rgba(0,212,255,0.15);
  border-radius:3px; padding:8px 10px;
}
.bracket-hdr { font-size:9px; letter-spacing:1.5px; color:var(--cyan); margin-bottom:6px; font-weight:600; }
.bracket-row { display:flex; align-items:center; gap:5px; margin-bottom:4px; font-size:9px; }
.bracket-lbl   { color:var(--text-dim); width:80px; flex-shrink:0; letter-spacing:0.3px; }
.bracket-price { font-weight:600; font-size:10px; flex:1; }
.bracket-pct   { font-size:9px; }
.bracket-split { margin-left:auto; color:var(--text-dim); font-size:9px; }
.bracket-note  { font-size:8px; color:var(--text-dim); margin:4px 0 2px; letter-spacing:0.3px; }
.bracket-clear-btn {
  background:transparent; border:1px solid rgba(255,51,85,0.25);
  border-radius:2px; color:rgba(255,51,85,0.5); font-family:inherit;
  font-size:9px; letter-spacing:0.5px; padding:2px 8px; cursor:pointer;
  margin-top:4px; transition:all 0.15s; width:100%;
}
.bracket-clear-btn:hover { border-color:var(--red); color:var(--red); }

/* Confirm button */
.trade-confirm-btn {
  width:100%; padding:8px; border:none; border-radius:4px;
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:2px;
  cursor:pointer; transition:all 0.2s; flex-shrink:0;
}
.trade-confirm-btn.buy  { background:rgba(0,255,136,0.15); color:var(--green); border:1px solid rgba(0,255,136,0.35); }
.trade-confirm-btn.sell { background:rgba(255,51,85,0.15);  color:var(--red);   border:1px solid rgba(255,51,85,0.35); }
.trade-confirm-btn.buy:hover  { background:rgba(0,255,136,0.25); box-shadow:0 0 12px var(--glow-green); }
.trade-confirm-btn.sell:hover { background:rgba(255,51,85,0.25);  box-shadow:0 0 12px rgba(255,51,85,0.35); }
.trade-confirm-btn:disabled { opacity:0.4; cursor:not-allowed; }
.trade-order-status {
  font-size:10px; letter-spacing:0.5px; text-align:center;
  min-height:16px; color:var(--text-dim);
}
.trade-order-status.ok   { color:var(--green); }
.trade-order-status.err  { color:var(--red); }
.trade-order-status.warn { color:var(--amber); }

/* ── Log section ── */
.trade-log-section {
  flex-shrink:0; border-top:1px solid rgba(0,212,255,0.1); display:flex; flex-direction:column;
  max-height: 220px;
}
.trade-log-tabs { display:flex; border-bottom:1px solid rgba(0,212,255,0.1); flex-shrink:0; }
.trade-log-tab {
  background:transparent; border:none; border-right:1px solid rgba(0,212,255,0.08);
  color:var(--text-dim); font-family:inherit; font-size:9px; letter-spacing:1.5px;
  padding:6px 12px; cursor:pointer; transition:all 0.15s;
}
.trade-log-tab:hover  { color:var(--text); background:rgba(0,212,255,0.04); }
.trade-log-tab.active { color:var(--cyan); background:rgba(0,212,255,0.06); border-bottom:1px solid var(--cyan); }
.trade-log-wrap { overflow-y:auto; }
.trade-log-table { width:100%; border-collapse:collapse; font-size:10px; letter-spacing:0.3px; }
.trade-log-table th {
  padding:4px 8px; text-align:left; font-size:8px; letter-spacing:1.5px;
  color:var(--text-dim); border-bottom:1px solid rgba(0,212,255,0.08);
  background:rgba(3,8,17,0.6); position:sticky; top:0;
}
.trade-log-table td { padding:4px 8px; border-bottom:1px solid rgba(0,212,255,0.04); }
.trade-log-table th.r, .trade-log-table td.r { text-align:right; }
.trade-log-empty { text-align:center; color:var(--text-dim); font-size:10px; padding:12px !important; }
.side-buy  { color:var(--green); }
.side-sell { color:var(--red); }
.tl-cancel-btn {
  background:transparent; border:1px solid rgba(255,51,85,0.3);
  border-radius:2px; color:rgba(255,51,85,0.6); font-family:inherit;
  font-size:8px; padding:1px 6px; cursor:pointer; transition:all 0.15s;
}
.tl-cancel-btn:hover { border-color:var(--red); color:var(--red); }
.mon-stop-btn {
  background:transparent; border:1px solid rgba(255,51,85,0.3);
  border-radius:2px; color:rgba(255,51,85,0.6); font-family:inherit;
  font-size:8px; padding:1px 6px; cursor:pointer; transition:all 0.15s;
}
.mon-stop-btn:hover { border-color:var(--red); color:var(--red); }

/* ── Balances tab ── */
.dust-controls {
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  border-bottom:1px solid rgba(0,212,255,0.08); font-size:9px; flex-wrap:wrap;
}
.dust-sell-btn {
  background:rgba(0,212,255,0.06); border:1px solid rgba(0,212,255,0.2);
  border-radius:3px; color:var(--cyan); font-family:inherit; font-size:9px;
  letter-spacing:1px; padding:3px 8px; cursor:pointer; transition:all 0.15s;
}
.dust-sell-btn:hover { background:rgba(0,212,255,0.12); }
.dust-sell-btn:disabled { opacity:0.4; cursor:not-allowed; }
.dust-sell-btn-secondary { color:var(--amber); border-color:rgba(255,170,0,0.3); background:rgba(255,170,0,0.05); }
.dust-sell-btn-secondary:hover { background:rgba(255,170,0,0.1); }
.dust-lbl { color:var(--text-dim); font-size:9px; }
.dust-input {
  background:rgba(0,212,255,0.05); border:1px solid rgba(0,212,255,0.2);
  border-radius:2px; color:var(--cyan); font-family:inherit; font-size:9px;
  padding:2px 4px; width:50px; text-align:center; user-select:text;
}
.dust-input:focus { outline:none; border-color:var(--cyan); }
.dust-refresh-btn {
  background:transparent; border:1px solid rgba(0,212,255,0.15); border-radius:2px;
  color:var(--text-dim); font-family:inherit; font-size:10px; padding:1px 6px; cursor:pointer;
}
.dust-refresh-btn:hover { border-color:var(--cyan); color:var(--cyan); }
.dust-status { font-size:9px; }
.dust-status.ok  { color:var(--green); }
.dust-status.err { color:var(--red); }
.bal-dust { font-size:7px; letter-spacing:1px; color:var(--amber); border:1px solid rgba(255,170,0,0.35); border-radius:2px; padding:0 3px; margin-left:4px; vertical-align:middle; }
.bal-sell-btn {
  background:transparent; border:1px solid rgba(255,51,85,0.35);
  border-radius:2px; color:rgba(255,51,85,0.7); font-family:inherit;
  font-size:8px; padding:1px 6px; cursor:pointer; transition:all 0.15s;
}
.bal-sell-btn:hover { border-color:var(--red); color:var(--red); }

/* ── Signals tab ── */
.signals-controls {
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  border-bottom:1px solid rgba(0,212,255,0.08); flex-wrap:wrap;
}
.signals-intervals { display:flex; gap:4px; }
.signals-lbl { font-size:8px; letter-spacing:1.5px; color:var(--text-dim); }
.sig-iv-btn {
  background:transparent; border:1px solid rgba(0,212,255,0.15);
  border-radius:3px; color:var(--text-dim); font-family:inherit;
  font-size:9px; padding:2px 6px; cursor:pointer; transition:all 0.15s;
}
.sig-iv-btn:hover  { border-color:var(--cyan); color:var(--cyan); }
.sig-iv-btn.active { border-color:var(--cyan); color:var(--cyan); background:rgba(0,212,255,0.08); }
.sig-scan-btn {
  background:rgba(0,212,255,0.08); border:1px solid rgba(0,212,255,0.3);
  border-radius:3px; color:var(--cyan); font-family:inherit; font-size:9px;
  letter-spacing:1px; padding:3px 10px; cursor:pointer; transition:all 0.15s;
}
.sig-scan-btn:hover { background:rgba(0,212,255,0.15); }
.sig-scan-btn:disabled { opacity:0.4; cursor:not-allowed; }
.sig-min-input {
  background:rgba(0,212,255,0.05); border:1px solid rgba(0,212,255,0.2);
  border-radius:2px; color:var(--cyan); font-family:inherit; font-size:9px;
  padding:2px 4px; width:38px; text-align:center; user-select:text;
}
.sig-min-input:focus { outline:none; border-color:var(--cyan); }
.sig-status-txt { font-size:9px; color:var(--text-dim); margin-left:auto; }
.signals-scroll { max-height:160px; overflow-y:auto; }
.sig-rank { font-size:9px; color:var(--text-dim); white-space:nowrap; }
.sig-badge { font-size:8px; letter-spacing:0.5px; padding:1px 5px; border-radius:2px; }
.sig-long    { color:var(--green); }
.sig-short   { color:var(--red); }
.sig-neutral { color:var(--text-dim); }
.sig-quality-ok { color:var(--green); font-size:10px; margin-left:3px; }
.sig-quality-no { color:var(--red);   font-size:10px; margin-left:3px; }
.sig-score   { font-size:9px; color:var(--text-dim); }
.sig-pct     { font-size:8px; color:var(--text-dim); }
.sig-ema     { font-size:9px; color:var(--text-dim); white-space:nowrap; }
.sig-amber   { color:var(--amber); }
.sig-pred-pos { color:var(--green); }
.sig-pred-neg { color:var(--red); }
.sig-sym-btn {
  background:transparent; border:1px solid rgba(0,212,255,0.2);
  border-radius:3px; color:var(--cyan); font-family:inherit; font-size:10px;
  letter-spacing:0.5px; padding:1px 6px; cursor:pointer; transition:all 0.15s;
}
.sig-sym-btn:hover { background:rgba(0,212,255,0.1); }
.sig-cross { color:var(--amber); font-size:9px; }