/* ============================================================
   FEATURES CSS (P0.6) — style khusus fitur baru, terpisah dari
   style.css (hasil ekstraksi layout lama). Naikkan ?v= di
   index.html setiap file ini berubah.
   ============================================================ */

/* ---------- Toast (P3.5) ---------- */
#toastWrap{position:fixed; top:14px; right:14px; z-index:400; display:flex; flex-direction:column; gap:8px; max-width:320px;}
.qt-toast{
  display:flex; align-items:flex-start; gap:8px;
  background:#171a26; color:var(--text-1);
  border:1px solid rgba(255,255,255,.12); border-left:3px solid var(--accent);
  border-radius:9px; padding:10px 12px; font-size:12px; line-height:1.45;
  box-shadow:0 10px 26px rgba(0,0,0,.4);
  animation:qtToastIn .22s ease;
}
.qt-toast.out{animation:qtToastOut .25s ease forwards;}
.qt-toast.err{border-left-color:#F1495B;}
.qt-toast.ok{border-left-color:#2FD980;}
.qt-toast.warn{border-left-color:#f5a623; color:#ffa726;}
@keyframes qtToastIn{from{opacity:0; transform:translateX(16px);} to{opacity:1; transform:none;}}
@keyframes qtToastOut{to{opacity:0; transform:translateX(16px);}}

/* ---------- Modal umum (disclaimer, FAQ) ---------- */
.qt-modal{position:fixed; inset:0; background:rgba(4,5,10,.78); backdrop-filter:blur(3px); z-index:300; display:flex; align-items:center; justify-content:center; padding:16px;}
.qt-modal-card{
  background:#12141f; border:1px solid rgba(255,255,255,.1); border-radius:14px;
  width:100%; max-width:560px; max-height:88vh; overflow-y:auto; padding:22px;
}
.qt-modal-card h2{margin:0 0 6px; font-size:17px; color:#f2f2f8;}
.qt-modal-card h3{margin:16px 0 6px; font-size:13.5px; color:#E9D5FF;}
.qt-modal-card p, .qt-modal-card li{font-size:12.5px; line-height:1.65; color:rgba(242,242,248,.82);}
.qt-modal-card ul{margin:6px 0; padding-left:18px;}
.qt-modal-close-x{position:sticky; float:right; top:0; background:none; border:none; color:rgba(242,242,248,.6); font-size:20px; cursor:pointer; line-height:1;}
.qt-modal-actions{display:flex; gap:10px; margin-top:16px; align-items:center;}
.qt-btn-primary{
  padding:10px 16px; border-radius:9px; border:none; cursor:pointer;
  background:linear-gradient(90deg,#F97316,#F97316); color:#0b0c14; font-weight:700; font-size:12.5px;
}
.qt-btn-ghost{
  padding:9px 14px; border-radius:9px; border:1px solid rgba(255,255,255,.16);
  background:transparent; color:#e8e8f0; font-size:12.5px; cursor:pointer;
}
.qt-modal-note{font-size:11px; color:rgba(242,242,248,.55); margin-top:10px; line-height:1.5;}
.qt-disclaimer-ico{font-size:26px; margin-bottom:6px;}

/* ---------- Footer status bar tambahan (P0.5 + P3.5) ---------- */
footer.status-bar .qt-footer-link{cursor:pointer; color:#C4B5FD;}
footer.status-bar .qt-footer-link:hover{text-decoration:underline;}
footer.status-bar .qt-footer-warn{color:#f5a623; cursor:pointer;}
.qt-health-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:#4a5568; margin-right:5px; position:relative; top:1px;}
.qt-health-dot.ok{background:#2FD980;}
.qt-health-dot.bad{background:#F1495B;}

/* ---------- Label disclaimer mini dekat area actionable (P0.5) ---------- */
.qt-mini-disclaimer{
  display:flex; gap:6px; align-items:flex-start;
  font-size:10.5px; color:rgba(242,242,248,.55); line-height:1.5;
  padding:7px 10px; border:1px dashed rgba(245,166,35,.35); border-radius:8px;
  background:rgba(245,166,35,.06); margin:10px 0;
}
.qt-mini-disclaimer .qt-md-text b{color:rgba(245,166,35,.9); font-weight:600;}

/* ---------- Bot panel baru (P3) ---------- */
.bot-mode-row{display:flex; gap:8px; margin-bottom:12px;}
.bot-mode-btn{
  flex:1; padding:11px 10px; border-radius:10px; cursor:pointer; font-size:12.5px; font-weight:700;
  border:1px solid rgba(255,255,255,.14); background:transparent; color:var(--text-2);
  display:flex; align-items:center; justify-content:center; gap:7px; transition:all .15s ease;
}
.bot-mode-btn .mode-dot{width:9px; height:9px; border-radius:50%; background:#4a5568;}
.bot-mode-btn[data-mode="virtual"] .mode-dot{background:#4ade80;}
.bot-mode-btn[data-mode="real"] .mode-dot{background:#ef4444;}
.bot-mode-btn.active[data-mode="virtual"]{border-color:#4ade80; background:rgba(74,222,128,.08); color:#bbf7d0;}
.bot-mode-btn.active[data-mode="real"]{border-color:#ef4444; background:rgba(239,68,68,.08); color:#fecaca;}
.bot-mode-btn:disabled{opacity:.45; cursor:not-allowed;}
.bot-mode-hint{font-size:10.5px; color:var(--text-3); margin:-6px 0 12px; line-height:1.5;}

/* Toggle REAL/VIRTUAL di header panel Portfolio */
.portfolio-mode-toggle{display:flex; gap:4px;}
.portfolio-mode-btn{
  padding:3px 9px; border-radius:6px; cursor:pointer; font-size:10px; font-weight:800; letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.14); background:transparent; color:var(--text-3); transition:all .15s ease;
}
.portfolio-mode-btn:hover{color:var(--text-1);}
.portfolio-mode-btn.active[data-pmode="virtual"]{border-color:#4ade80; background:rgba(74,222,128,.1); color:#bbf7d0;}
.portfolio-mode-btn.active[data-pmode="real"]{border-color:#ef4444; background:rgba(239,68,68,.1); color:#fecaca;}

/* Toggle TP1/TP2/TP3 di form bot */
.tp-level-toggle-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:-4px 0 12px;}
.tp-level-toggle{display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--text-2); cursor:pointer; user-select:none;}
.tp-level-toggle input{width:15px; height:15px; accent-color:#4ade80; cursor:pointer;}
.tp-level-toggle:has(input:checked){color:var(--text-1);}
.tp-level-hint{font-size:10.5px; color:var(--text-3);}
.est-item-disabled{opacity:.4;}

.bot-real-confirm{
  display:none; align-items:flex-start; gap:7px; margin:0 0 8px;
  padding:7px 9px; border:1px solid rgba(239,68,68,.4); border-radius:8px; background:rgba(239,68,68,.07);
  font-size:10.5px; color:#fecaca; line-height:1.4; cursor:pointer;
}
.bot-real-confirm input{accent-color:#ef4444; margin-top:2px;}
.bot-real-confirm.visible{display:flex;}

.bot-exchange-account{display:none; flex-direction:column; gap:4px; margin:0 0 12px;}
.bot-exchange-account.visible{display:flex;}
.bot-exchange-account label{font-size:9.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; font-weight:600;}
.bot-exchange-account .select-sm{width:100%;}
.bot-exchange-account .hint{font-size:10.5px; color:rgba(242,242,248,.45);}

.sizing-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:9px; margin-bottom:12px;}
@media (max-width:900px){ .sizing-grid{grid-template-columns:repeat(2, 1fr);} }
.sizing-grid label{display:block; font-size:10.5px; color:var(--text-3); margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px;}
.sizing-grid .alloc-display{
  display:flex; align-items:center; min-height:32px; padding:0 9px;
  border-radius:8px; background:rgba(249,115,22,.07); border:1px solid rgba(249,115,22,.25);
  color:#F97316; font-weight:700; font-size:12.5px; font-family:var(--font-num);
}
.sizing-toggle{display:flex; align-items:center; gap:7px; font-size:11px; color:var(--text-3); margin:-4px 0 10px; cursor:pointer;}
.sizing-toggle input{accent-color:#F97316;}
.sizing-manual-field{display:none;}
.sizing-manual-field.visible{display:block;}

.bot-badges{display:flex; gap:7px; flex-wrap:wrap; margin:6px 0;}
.bot-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:700; letter-spacing:.4px;
  padding:4px 9px; border-radius:999px; border:1px solid;
}
.bot-badge.warn{color:#fbbf24; border-color:rgba(251,191,36,.4); background:rgba(251,191,36,.08);}
.bot-badge.limit{color:#f472b6; border-color:rgba(244,114,182,.4); background:rgba(244,114,182,.08);}
.bot-badge.hold{color:#22d3ee; border-color:rgba(34,211,238,.4); background:rgba(34,211,238,.08);}
.bot-badge.wait{color:#38bdf8; border-color:rgba(56,189,248,.4); background:rgba(56,189,248,.08);}

/* Estimate panel (P3 preview risiko) */
.estimate-panel{
  display:none; border:1px solid rgba(249,115,22,.3); border-radius:10px;
  padding:12px; margin-bottom:12px; background:rgba(249,115,22,.05);
}
.estimate-panel.visible{display:block;}
.estimate-title{font-size:11px; font-weight:700; letter-spacing:.5px; color:#C4B5FD; margin-bottom:8px; text-transform:uppercase;}
.estimate-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:8px;}
@media (max-width:900px){ .estimate-grid{grid-template-columns:repeat(2, 1fr);} }
.est-item .est-label{font-size:9.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px;}
.est-item .est-val{font-size:12px; font-weight:700; font-family:var(--font-num);}
.est-item .est-val.danger{color:#F1495B;}
.est-item .est-val.safe{color:#2FD980;}
.est-item .est-val.info{color:#F97316;}
.estimate-note{font-size:10px; color:var(--text-3); line-height:1.5;}

/* ---------- Bot Aktif button + popup (running time = biru) ---------- */
#botActiveBtn{position:relative; display:inline-flex; align-items:center; gap:6px;}
.bot-active-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background:#3B82F6; color:#fff; font-size:10px; font-weight:700; line-height:1;
}
.bot-active-count:empty, .bot-active-count[data-zero="1"]{background:#4a5568;}

/* Uptime & status jadi biru saat bot RUNNING (sebelumnya hijau) */
.bot-status-text.running{color:#3B82F6;}
.status-dot-lg.running{background:#3B82F6; box-shadow:0 0 0 4px rgba(59,130,246,.22);}
.bot-uptime.running{color:#3B82F6; font-weight:700;}

.bot-active-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border:1px solid rgba(59,130,246,.3); border-radius:9px;
  background:rgba(59,130,246,.07); margin-bottom:8px;
}
.bot-active-row .bar-left{display:flex; flex-direction:column; gap:2px;}
.bot-active-row .bar-symbol{font-size:13px; font-weight:700; color:#f2f2f8;}
.bot-active-row .bar-meta{font-size:10.5px; color:var(--text-3);}
.bot-active-row .bar-actions{display:flex; gap:6px; margin:0 10px;}
.bot-active-row .bar-btn{padding:5px 10px; font-size:11px; border-radius:7px;}
.bot-active-row .bar-time{font-size:13px; font-weight:700; color:#3B82F6; font-family:var(--font-num); white-space:nowrap;}
.bot-active-empty{font-size:12px; color:var(--text-3); text-align:center; padding:14px 0;}

/* ---------- Leverage select ---------- */
.lev-max-hint{font-size:9.5px; color:#F97316; text-transform:none; letter-spacing:0; margin-left:4px;}

/* ---------- Backtest note ---------- */
.bt-source-note{font-size:10.5px; color:var(--text-3); margin:8px 0 0; line-height:1.5;}
.bt-source-note b{color:#F97316; font-weight:600;}

/* ---------- Pair combobox (P3) ---------- */
.combo{position:relative; min-width:150px;}
.combo-input{
  width:100%; box-sizing:border-box; padding:7px 26px 7px 9px;
  border-radius:8px; border:1px solid rgba(255,255,255,.14); background:#0b0c14;
  color:#f2f2f8; font-size:12px; font-family:var(--font-ui);
}
.combo-input:focus{outline:none; border-color:#F97316;}
.combo::after{
  content:''; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--text-3);
  pointer-events:none;
}
.combo-list{
  display:none; position:absolute; z-index:60; left:0; right:0; top:calc(100% + 4px);
  background:#12141f; border:1px solid rgba(255,255,255,.14); border-radius:9px;
  max-height:420px; overflow-y:auto; box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.combo.open .combo-list{display:block;}
.combo-item{
  display:flex; align-items:center; gap:8px; padding:7px 10px; cursor:pointer;
  font-size:12px; color:var(--text-1); font-family:var(--font-ui);
}
.combo-item:hover{background:rgba(249,115,22,.12);}
.combo-item.selected{background:rgba(249,115,22,.1);}
.combo-item .ci-name{font-weight:600;}
.combo-item .ci-full{font-size:10px; color:var(--text-3); margin-left:auto;}
.combo-empty{padding:10px; font-size:11.5px; color:var(--text-3); text-align:center;}

/* Watchlist upgrade: search + pin + status dot (P3.5) */
.pair-search-wrap{
  position:sticky; top:0; z-index:2;
  padding:9px 12px 8px;
  background:var(--panel);
  border-bottom:1px solid var(--border-soft);
}
.pair-search-input{
  width:100%; box-sizing:border-box; padding:6px 9px; border-radius:8px;
  border:1px solid rgba(255,255,255,.14); background:#0b0c14; color:#f2f2f8; font-size:11px;
}
.pair-search-input:focus{outline:none; border-color:#F97316;}
.pair-search-results{max-height:220px; overflow-y:auto;}
.watchlist-row .wl-ws-dot{
  width:6px; height:6px; border-radius:50%; background:#4a5568; flex-shrink:0; margin-right:1px;
}
.watchlist-row .wl-ws-dot.live{background:#2FD980; box-shadow:0 0 4px rgba(47,217,128,.7);}
.watchlist-row .wl-pin{
  background:none; border:none; cursor:pointer; font-size:14px; line-height:1; color:#8a93ab;
  padding:1px 3px; border-radius:5px; flex-shrink:0;
}
.watchlist-row .wl-pin:hover{color:#C4B5FD; background:rgba(249,115,22,.12);}
.watchlist-row .wl-pin.pinned{color:#FBBF24;}
.wl-coin-icon{width:21px; height:21px; border-radius:50%; object-fit:cover; background:rgba(255,255,255,.08);}
.wl-coin-icon-wrap{
  width:21px; height:21px; border-radius:50%; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; color:#fff;
}
.wl-coin-icon-wrap img{width:100%; height:100%; border-radius:50%; object-fit:cover;}
.wl-coin-fallback{display:none; align-items:center; justify-content:center; width:100%; height:100%;}
.wl-coin-fallback.visible{display:flex;}
.pair-icon img{width:100%; height:100%; border-radius:50%; object-fit:cover;}

/* CSV export button */
.csv-export-btn{
  padding:6px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.16);
  background:transparent; color:#e8e8f0; font-size:11.5px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.csv-export-btn:hover{border-color:#F97316; color:#C4B5FD;}

/* Toolbar di atas tabel histori (signal history / posisi history) */
.history-toolbar{display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:9px 14px 0;}
.history-toolbar .history-note{font-size:10.5px; color:var(--text-3); margin-right:auto;}

/* ---------- Responsiveness audit kecil (P3.5) ---------- */
@media (max-width:768px){
  .qt-modal-card{max-width:100%; padding:18px;}
  .sizing-grid{grid-template-columns:1fr 1fr;}
  .bot-mode-row{flex-direction:row;}
  #toastWrap{left:14px; max-width:none;}
  .history-toolbar{flex-wrap:wrap;}
}

/* ============================================================
   LIVE BOT RUNNER — two-grid full-width layout
   Visual hierarchy follows the compact terminal reference while
   preserving the existing bot IDs and controller behavior.
   ============================================================ */
#mainTabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  padding:0;
  overflow:visible;
}
#mainTabs .tab-btn{
  width:100%;
  min-width:0;
  padding:11px 8px;
  border-radius:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
#mainTabs .tab-btn:nth-child(n+5){border-top:1px solid var(--border-soft);}
#mainTabs .tab-btn.active{background:rgba(249,115,22,.06);}
#mainTabs .tab-btn.active::after{left:0; right:0; bottom:0; height:2px;}

.bot-runner-shell{
  padding:14px;
  background:
    radial-gradient(circle at 14% 0%, rgba(249,115,22,.035), transparent 22rem),
    rgba(8,10,18,.38);
}
.bot-runner-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  padding:0 1px 13px;
  border-bottom:1px solid var(--border-soft);
}
.bot-runner-kicker,.bot-card-kicker,.bot-form-section-label{
  color:#F97316;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.15px;
  text-transform:uppercase;
}
.bot-runner-intro h2{
  margin:5px 0 3px;
  color:var(--text-1);
  font-size:16px;
  line-height:1.25;
}
.bot-runner-intro p,.bot-card-heading p{
  margin:0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.45;
}
.bot-runner-live-summary{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:28px;
  padding:3px 0 3px 8px;
  border:0;
  background:transparent;
  color:#63E6A4;
  font:600 10px var(--font-num);
  white-space:nowrap;
  cursor:pointer;
}
.bot-runner-live-summary:hover{color:#9af3c3;}
.bot-runner-live-summary .qt-health-dot{margin-right:1px;}
.bot-runner-live-summary .bot-active-count{
  min-width:auto;
  height:auto;
  padding:0;
  background:none;
  color:inherit;
  font:inherit;
}
.bot-summary-separator{color:var(--text-3);}

.bot-runner-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  padding-top:12px;
}
.bot-runner-card{
  min-width:0;
  border:1px solid var(--border);
  border-radius:11px;
  background:linear-gradient(145deg,rgba(14,18,31,.98),rgba(11,14,24,.98));
  padding:12px;
}
.bot-card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin:5px 0 12px;
}
.bot-card-heading h3{
  margin:0 0 3px;
  color:var(--text-1);
  font-size:13px;
  line-height:1.25;
}
.bot-list-count-inline{
  margin-left:4px;
  color:var(--text-3);
  font:500 9px var(--font-num);
}
.bot-card-index{
  flex:none;
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px 7px;
  color:var(--text-3);
  font:10px var(--font-num);
  white-space:nowrap;
}
.bot-builder-body{
  min-width:0;
}
.bot-builder-card .qt-mini-disclaimer{
  margin:0 0 12px;
  padding:8px 9px;
  background:rgba(79,51,0,.35);
  border-color:rgba(245,166,35,.38);
}
.bot-form-section-label{
  margin:6px 0 4px;
  color:var(--text-3);
  letter-spacing:.9px;
}
.bot-market-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(105px,.9fr) minmax(75px,.7fr);
  gap:7px;
  margin-bottom:9px;
}
.bot-market-grid .control-field,.sizing-grid .control-field{min-width:0;}
.bot-market-grid .select-sm,.bot-market-grid .combo,
.sizing-grid .input-sm,.sizing-grid .select-sm,
.sizing-grid .alloc-display{width:100%; min-width:0; box-sizing:border-box;}
.bot-mode-row{margin:0 0 7px; gap:7px;}
.bot-mode-btn{
  min-height:42px;
  padding:8px 6px;
  font-size:10px;
  letter-spacing:.2px;
}
.bot-mode-hint{
  margin:-1px 0 11px;
  font-size:9.5px;
}
.sizing-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-bottom:6px;
}
.sizing-grid label{font-size:8.5px; margin-bottom:2px;}
.sizing-grid .input-sm,.sizing-grid .select-sm{
  min-height:28px;
  padding:4px 7px;
  font-size:10px;
}
.sizing-grid .alloc-display{
  min-height:28px;
  padding:0 7px;
  font-size:10px;
}
.sizing-toggle{
  margin:0 0 8px;
  font-size:9.5px;
}
.estimate-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.bot-builder-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.bot-builder-actions .btn-primary,.bot-builder-actions .btn-ghost{
  min-height:29px;
  padding:5px 10px;
  font-size:10px;
}
.bot-builder-hint{
  margin-top:6px;
  color:var(--text-3);
  font-size:9px;
  line-height:1.4;
}
.bot-exchange-account{gap:3px; margin:0 0 8px;}
.bot-exchange-account label{font-size:8.5px;}
.bot-exchange-account .select-sm{min-height:28px; padding:4px 7px; font-size:10px;}
.bot-exchange-account .hint{font-size:9px; margin-top:1px; line-height:1.35;}
.tp-level-toggle-row{margin:-2px 0 7px; gap:8px;}
.tp-level-toggle{font-size:10.5px; gap:4px;}
.tp-level-toggle input{width:13px; height:13px;}
.tp-level-hint{font-size:9px;}

.bot-list-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) 84px;
  gap:7px;
  margin-bottom:7px;
}
.bot-list-search,.bot-list-filter{
  min-width:0;
  min-height:31px;
  box-sizing:border-box;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:7px;
  background:#0b0e18;
  color:var(--text-1);
  font:10.5px var(--font-ui);
}
.bot-list-filter{font-size:9.5px;}
.bot-list-search:focus,.bot-list-filter:focus{
  outline:none;
  border-color:#F97316;
  box-shadow:0 0 0 2px rgba(249,115,22,.1);
}
.bot-list-wrap{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}
.bot-list-cards{gap:6px;}
.bot-card{
  display:grid;
  grid-template-columns:8px minmax(0,1fr) auto auto auto;
  align-items:center;
  gap:8px;
  padding:9px 8px;
  border-color:var(--border);
  border-radius:8px;
  background:#101522;
}
.bot-card:hover{border-color:rgba(249,115,22,.55); filter:none;}
.bot-card.selected{
  border-color:#F97316;
  background:rgba(249,115,22,.08);
  box-shadow:0 0 0 1px rgba(249,115,22,.08);
}
.bot-card .bc-dot{width:7px; height:7px;}
.bot-card .bc-dot.running{background:#63E6A4; box-shadow:0 0 0 3px rgba(99,230,164,.15);}
.bot-card .bc-dot.paused{background:#FBBF24;}
.bot-card .bc-dot.waiting{background:#38bdf8; box-shadow:0 0 0 3px rgba(56,189,248,.15);}
.bot-card .bc-main{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:6px;
  min-width:0;
  overflow:hidden;
}
.bot-card .bc-symbol{
  flex:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:38%;
  font-size:10.5px;
}
.bc-chips{
  display:flex;
  align-items:center;
  gap:3px;
  min-width:0;
  overflow:hidden;
  flex-wrap:nowrap;
}
.bc-chip{
  flex:none;
  padding:1.5px 5px;
  border:1px solid var(--border-soft);
  border-radius:5px;
  background:#171d2c;
  color:var(--text-3);
  font-size:7.5px;
  line-height:1.5;
  white-space:nowrap;
}
.bc-chip:last-child{overflow:hidden; text-overflow:ellipsis;}
.bc-chip-real{color:#FF7185; border-color:rgba(255,113,133,.35); background:rgba(255,113,133,.08);}
.bc-performance,.bc-uptime-wrap,.bc-pnl-wrap{
  display:flex;
  align-items:baseline;
  white-space:nowrap;
}
.bc-pnl{font:700 10px var(--font-num);}
.bc-pnl.up{color:#63E6A4;}
.bc-pnl.down{color:#FF7185;}
.bc-uptime{color:var(--text-3); font:8px var(--font-num);}
.bot-card .bc-stats{gap:10px; margin-left:0;}
.bot-card .bc-stat{
  flex-direction:row;
  align-items:baseline;
  gap:3px;
}
.bot-card .bc-stat-label{font-size:8px;}
.bot-card .bc-stat-val{font-size:9.5px;}
.bot-card .bc-actions{display:none;}
.bot-list-empty{
  padding:18px 8px;
  border:1px dashed var(--border);
  border-radius:8px;
  text-align:center;
  font-size:10.5px;
}

.bot-selected-detail{
  margin:0 0 8px;
  padding:8px;
  border:1px solid var(--border-soft);
  border-radius:8px;
  background:#0d121e;
}
.bot-selected-detail--top{margin-bottom:9px;}
.bot-detail-topline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 8px;
  color:var(--text-1);
  font-size:10.5px;
}
.bot-detail-topline strong{white-space:nowrap;}
.bot-detail-topline .status-dot-lg{margin:0;}
.bot-status-text{font-size:9.5px;}
.bot-uptime{font-size:8.5px;}
.bot-detail-topline .bot-badges{margin:0; gap:5px;}
.bot-badge{font-size:8px; padding:2px 6px;}
.bot-detail-topline .bot-detail-actions{
  margin-left:auto;
  display:flex;
  gap:5px;
}
#botLogBtn{
  min-height:24px;
  padding:3px 8px;
  font-size:8.5px;
  border-radius:6px;
  white-space:nowrap;
}
.modal-box-log{width:min(420px, 92vw); max-height:80vh; display:flex; flex-direction:column;}
.bot-log-modal-title{font:700 12px var(--font-ui); color:var(--text-1); margin:0 0 10px;}
.log-list-modal{max-height:min(60vh, 440px); font-size:11px;}
.log-list-modal .log-item{font-size:11px;}
.log-list-modal .log-time{width:52px;}
.bot-selected-detail .stat-mini-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
  margin:7px 0 0;
}
.bot-selected-detail .stat-card{padding:6px; border-radius:7px;}
.bot-selected-detail .stat-card .sc-label{font-size:7.5px; white-space:nowrap;}
.bot-selected-detail .stat-card .sc-val{font-size:10.5px;}
.bot-detail-actions .btn-ghost,.bot-detail-actions .btn-danger{
  min-height:24px;
  padding:3px 8px;
  font-size:8.5px;
  border-radius:6px;
}
.bot-runner-footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:11px 1px 0;
  color:var(--text-3);
  font-size:8.5px;
}
.bot-footer-refresh{color:#F97316; cursor:pointer;}

@media (max-width:820px){
  .bot-runner-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  #mainTabs{grid-template-columns:repeat(2,minmax(0,1fr));}
  #mainTabs .tab-btn:nth-child(n+3){border-top:1px solid var(--border-soft);}
  .bot-runner-shell{padding:10px;}
  .bot-runner-intro{align-items:flex-start; flex-direction:column; gap:7px;}
  .bot-runner-live-summary{padding-left:0;}
  .bot-market-grid{grid-template-columns:1fr 1fr;}
  .bot-market-grid .control-field:first-child{grid-column:1 / -1;}
  .bot-list-toolbar{grid-template-columns:minmax(0,1fr) 96px;}
}

/* ---------- Bot info popup: open-position details ---------- */
#botInfoModalBox{
  width:min(760px,94vw);
  max-height:min(720px,88vh);
  overflow-y:auto;
  background:linear-gradient(145deg,#121624,#0e111d);
}
#botInfoModalBox .bot-info-meta{margin-bottom:12px;}
#botInfoModalBox .bot-info-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:14px;
}
#botInfoModalBox .bot-info-item{
  min-width:0;
  border:1px solid rgba(249,115,22,.1);
  background:rgba(23,26,42,.78);
  padding:8px 9px;
}
#botInfoModalBox .bot-info-item .label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8px;
}
#botInfoModalBox .bot-info-item .val{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}
.bot-info-positions-title{
  display:flex;
  align-items:center;
  gap:5px;
  margin:2px 0 7px;
  color:var(--text-1);
  font-size:11px;
  font-weight:700;
}
.bot-info-positions-title span{
  color:var(--text-3);
  font:10px var(--font-num);
}
.bot-info-position-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  max-height:320px;
  overflow-y:auto;
  padding-right:3px;
  margin-bottom:14px;
  scrollbar-color:var(--border) transparent;
}
.bot-info-position{
  padding:9px 10px;
  border:1px solid var(--border-soft);
  border-radius:9px;
  background:rgba(13,18,30,.8);
}
.bot-info-position-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
  color:var(--text-1);
  font-size:10px;
}
.bot-info-position-head span{
  flex:none;
  color:var(--text-3);
  font:9px var(--font-num);
}
.bot-info-position-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}
.bot-info-position-grid > div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.bot-info-position-grid .label{
  color:var(--text-3);
  font-size:8px;
  letter-spacing:.35px;
  text-transform:uppercase;
}
.bot-info-position-grid b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-1);
  font:600 10.5px var(--font-num);
}
.bot-info-position-grid b.up{color:var(--buy);}
.bot-info-position-grid b.down{color:var(--sell);}
.bot-info-empty{
  padding:14px 10px;
  border:1px dashed var(--border);
  border-radius:8px;
  color:var(--text-3);
  font-size:10.5px;
  text-align:center;
}
.bot-info-history-list{
  display:flex;
  flex-direction:column;
  gap:5px;
  max-height:250px;
  overflow-y:auto;
  padding-right:3px;
  margin-bottom:14px;
  scrollbar-color:var(--border) transparent;
}
.bot-info-history-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:rgba(13,18,30,.62);
}
.bot-info-history-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.bot-info-history-main strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-1);
  font-size:10px;
}
.bot-info-history-main span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-3);
  font-size:8.5px;
}
.bot-info-history-price,
.bot-info-history-result{
  white-space:nowrap;
  font:600 10.5px var(--font-num);
}
.bot-info-history-price{color:var(--text-2);}
.bot-info-history-result.open{color:#60a5fa;}
.bot-info-history-result.up{color:var(--buy);}
.bot-info-history-result.down{color:var(--sell);}
.bot-info-actions{
  margin:0;
  align-items:center;
}
.bot-info-actions .btn-danger,.bot-info-actions .btn-primary,.bot-info-actions .btn-ghost{
  min-height:36px;
}

@media (max-width:520px){
  #botInfoModalBox .bot-info-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bot-info-position-head{align-items:flex-start; flex-direction:column; gap:3px;}
  .bot-info-position-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bot-info-history-row{grid-template-columns:minmax(0,1fr) auto; gap:4px 9px;}
  .bot-info-history-result{grid-column:2; grid-row:1 / span 2;}
}

/* ============================================================
   BINANCE-STYLE VISUAL PASS — panel kiri Live Bot Runner (GRID KIRI)
   Scoped ke .bot-builder-card / .bot-market-grid / .sizing-grid supaya
   TIDAK menyentuh .control-field/.select-sm/.alloc-display generik yang
   juga dipakai tab lain (mis. Backtest). Tidak ada id/struktur HTML yang
   berubah — cuma tampilan, semua binding JS di js/features.js tetap jalan.
   ============================================================ */

/* -- Baris atas (Method/Pair/TF) jadi mirip badge Cross/20x/S Binance -- */
.bot-market-grid .control-field label{
  font-size:8px; letter-spacing:.5px; opacity:.7;
}
.bot-market-grid select.select-sm,
.bot-market-grid .combo-input{
  background:var(--panel-2,#161B27);
  border:1px solid var(--border,#1F2532);
  border-radius:8px;
  text-align:center;
  font-weight:700;
  transition:border-color .15s ease, background .15s ease;
}
.bot-market-grid .control-field:first-child select.select-sm{
  background:rgba(249,115,22,.08);
  border-color:rgba(249,115,22,.35);
  color:#F97316;
}
.bot-market-grid select.select-sm:hover,
.bot-market-grid .combo-input:hover{border-color:rgba(255,255,255,.28);}

/* -- Mode toggle: UANG VIRTUAL aktif jadi solid fill, senada tombol
      Beli/Long di Binance (bukan cuma border+dim seperti sebelumnya) -- */
.bot-mode-btn.active[data-mode="virtual"]{
  background:linear-gradient(100deg,#63E6A4,#F97316);
  border-color:transparent;
  color:#06170E;
  box-shadow:0 2px 14px rgba(249,115,22,.28);
}
.bot-mode-btn.active[data-mode="virtual"] .mode-dot{background:#06170E;}
.bot-mode-btn.active[data-mode="real"]{
  background:linear-gradient(100deg,#F1495B,#c93348);
  border-color:transparent;
  color:#2b0509;
}
.bot-mode-btn.active[data-mode="real"] .mode-dot{background:#2b0509;}

/* -- Margin/Entry: field yang paling penting (setara "Jumlah" di Binance)
      dibikin lebih menonjol — angka besar, unit USDT nempel di kanan.
      Duduk berdampingan dengan Total Modal (grid 2 kolom rapi), tidak lagi
      full-width, supaya sizing-grid jadi 3 baris x 2 kolom yang rapat. -- */
.sizing-grid .control-field:nth-child(2) .alloc-display{
  min-height:32px;
  font-size:12px;
  justify-content:space-between;
  padding:0 9px;
  background:linear-gradient(180deg, rgba(249,115,22,.1), rgba(249,115,22,.04));
  border-color:rgba(249,115,22,.35);
}
.sizing-grid .control-field:nth-child(2) .alloc-display::after{
  content:"USDT / entry";
  font-size:8.5px; font-weight:600; color:var(--text-3);
  font-family:var(--font-ui);
  letter-spacing:.2px;
}

/* -- Section label "RISK SETUP" + keterangan "Nilai per sesi" di kanan -- */
.bot-form-section-label-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.bot-form-section-sublabel{
  color:var(--text-3);
  font-size:9px;
  font-weight:500;
  letter-spacing:.2px;
  text-transform:none;
  opacity:.8;
}

/* -- Field display "Pair / Timeframe" — read-only, samakan gaya alloc-display -- */
#botPairTfDisplay{
  font-weight:700;
  color:var(--text-1);
}

/* -- CTA utama: samakan bobot visual dengan tombol Beli/Long Binance -- */
.bot-builder-actions .btn-primary{
  flex:1.4;
  font-size:13px;
  letter-spacing:.2px;
}