:root{
  --bg:#0b0d12;--bg2:#111318;--bg3:#181c24;--bg4:#1f2430;--bg5:#252b38;
  --border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.11);
  --text:#dde1ea;--text2:#7a8499;--text3:#4a5268;
  --green:#00d395;--red:#f04f4f;--yellow:#f5a623;--blue:#4a9eff;--purple:#9b7fff;
  --font:'SF Pro Display','Segoe UI',system-ui,sans-serif;
  --mono:'SF Mono','Fira Code','Consolas',monospace;
  --r:10px;--r2:14px;
}
*{box-sizing:border-box;margin:0;padding:0}

/* TRADE AUDIT REPORT */
.audit-summary-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:8px;margin-bottom:12px;
}
.audit-card{
  background:linear-gradient(135deg,var(--bg3),var(--bg4));
  border:1px solid var(--border);border-radius:var(--r);
  padding:12px 14px;transition:transform .15s, border-color .15s;
}
.audit-card:hover{ transform:translateY(-1px); border-color:var(--border2); }
.audit-card-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.audit-card-val{font-size:22px;font-weight:700;color:var(--text);font-family:var(--mono);line-height:1.2}
.audit-card-sub{font-size:10px;color:var(--text3);margin-top:4px}

.audit-tbl{width:100%;font-size:11px}
.audit-tbl th{font-size:10px;color:var(--text3);font-weight:500;text-transform:uppercase;letter-spacing:.3px;padding:6px 8px;border-bottom:1px solid var(--border)}
.audit-tbl td{padding:7px 8px;border-bottom:1px solid var(--border);color:var(--text2)}
.audit-tbl tbody tr:hover{background:rgba(255,255,255,.02)}

.audit-bar-wrap{
  position:relative;background:var(--bg4);border-radius:6px;height:18px;
  overflow:hidden;width:100%;min-width:100px;
}
.audit-bar-fill{height:100%;border-radius:6px;transition:width .3s}
.audit-bar-lbl{position:absolute;top:0;left:8px;right:8px;line-height:18px;font-size:10px;color:var(--text);text-shadow:0 1px 2px rgba(0,0,0,.4);font-weight:600;font-family:var(--mono)}

.audit-mini-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.audit-mini-row + .audit-mini-row{border-top:1px solid var(--border)}

.audit-rec{
  display:flex;align-items:flex-start;gap:10px;padding:10px 12px;
  border-radius:var(--r);margin-bottom:6px;font-size:11px;line-height:1.5;
  border-left:3px solid var(--text3);background:var(--bg3);
}
.audit-rec-cat{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  background:var(--bg5);padding:2px 6px;border-radius:4px;color:var(--text2);
  flex-shrink:0;align-self:flex-start;white-space:nowrap;
}
.audit-rec-msg{color:var(--text);flex:1}
.audit-rec-danger{border-left-color:var(--red);background:rgba(240,79,79,.06)}
.audit-rec-danger .audit-rec-cat{background:rgba(240,79,79,.18);color:var(--red)}
.audit-rec-warn  {border-left-color:var(--yellow);background:rgba(245,166,35,.06)}
.audit-rec-warn  .audit-rec-cat{background:rgba(245,166,35,.18);color:var(--yellow)}
.audit-rec-info  {border-left-color:var(--blue);background:rgba(74,158,255,.06)}
.audit-rec-info  .audit-rec-cat{background:rgba(74,158,255,.18);color:var(--blue)}
.audit-rec-good  {border-left-color:var(--green);background:rgba(0,211,149,.06)}
.audit-rec-good  .audit-rec-cat{background:rgba(0,211,149,.18);color:var(--green)}

@media(max-width:640px){
  .audit-summary-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .audit-card-val{font-size:18px}
  .audit-rec{flex-direction:column;gap:4px}
}

/* PRINT / PDF mode — body.print-audit di-set saat tombol Print/PDF diklik.
   Sembunyikan semua section selain konten audit, hilangkan dark theme background
   (printer toner saver), enable page break di tiap card. */
@media print {
  body.print-audit{ background:#fff !important; color:#000 !important; }
  body.print-audit .topbar,
  body.print-audit .tabs,
  body.print-audit .mob-nav,
  body.print-audit #audit-actions,
  body.print-audit .adm-subtabs,
  body.print-audit .adm-save-bar,
  body.print-audit #audit-empty,
  body.print-audit .tab-pane:not(#tab-admin),
  body.print-audit #adm-sub-general,
  body.print-audit #adm-sub-risk,
  body.print-audit #adm-sub-strategy,
  body.print-audit #adm-sub-users,
  body.print-audit #authBox,
  body.print-audit #lastUpdate{ display:none !important; }
  body.print-audit #adm-sub-audit{ display:block !important; }
  body.print-audit .card{
    background:#fff !important; color:#000 !important;
    border:1px solid #ccc !important;
    page-break-inside:avoid;
    margin-bottom:8px !important;
    box-shadow:none !important;
  }
  body.print-audit .card-hd{ color:#000 !important; }
  body.print-audit .audit-card{
    background:#f6f6f6 !important; color:#000 !important;
    border:1px solid #ccc !important;
  }
  body.print-audit .audit-card-lbl,
  body.print-audit .audit-card-sub{ color:#555 !important; }
  body.print-audit .audit-card-val{ color:#000 !important; }
  body.print-audit .audit-tbl th{ color:#333 !important; border-bottom:1px solid #999 !important; }
  body.print-audit .audit-tbl td{ color:#000 !important; border-bottom:1px solid #ddd !important; }
  body.print-audit .audit-tbl tbody tr:hover{ background:transparent !important; }
  body.print-audit .audit-bar-wrap{ background:#eee !important; border:1px solid #ccc !important; }
  body.print-audit .audit-bar-lbl{ color:#000 !important; text-shadow:none !important; }
  body.print-audit .audit-rec{ border:1px solid #ccc !important; }
  body.print-audit .audit-rec-cat{ background:#eee !important; color:#000 !important; }
  body.print-audit .audit-rec-msg{ color:#000 !important; }
  body.print-audit .badge{ border:1px solid #999 !important; }
  /* Force charts canvas tampil — Chart.js sudah render */
  body.print-audit canvas{ max-height:240px !important; }
  /* Page setup */
  @page{ margin:1.2cm; size:A4; }
}

/* RBAC — non-admin tidak boleh akses kolom Aksi & Pair Control aktif.
   Backend juga sudah enforce; ini sekedar UX consistency. */
body.role-view-demo .col-aksi,
body.role-view-intelligence .col-aksi,
body.role-view-analytics .col-aksi { display:none !important; }
.pair-toggle-btn.pair-locked{
  opacity:0.55; cursor:not-allowed !important;
  filter:grayscale(40%);
}
.pair-toggle-btn.pair-locked::after{
  content:'🔒'; position:absolute; top:4px; right:6px; font-size:10px;
}
.pair-toggle{ position:relative; }
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;min-height:100vh;overflow-x:hidden}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:4px}
.shell{max-width:1600px;margin:0 auto;padding:0 16px 40px;overflow-wrap:break-word;word-break:break-word}

/* TOPBAR */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0 0;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand-name{font-size:16px;font-weight:700;letter-spacing:-.3px}
.brand-sub{font-size:11px;color:var(--text2)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:ping 1.8s infinite;flex-shrink:0}
@keyframes ping{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}
.status-chip{background:var(--bg3);border:1px solid var(--border2);border-radius:20px;padding:4px 12px;font-size:11px;color:var(--text2);display:flex;align-items:center;gap:6px}

/* TABS */
.tabs{display:flex;gap:2px;background:var(--bg3);border-radius:var(--r2);padding:3px;border:1px solid var(--border);margin:14px 0 0;width:fit-content}
.tab{padding:7px 18px;border-radius:var(--r);border:none;background:transparent;color:var(--text2);font-size:12px;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .15s;white-space:nowrap;display:flex;align-items:center;gap:6px}
.tab.on{background:var(--bg5);color:var(--text);font-weight:600}
.tab-pane{display:none}.tab-pane.on{display:block}

/* CARDS */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:14px 16px}
.card-hd{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text2);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;row-gap:4px}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600;letter-spacing:.3px}
.b-bull{background:rgba(0,211,149,.14);color:var(--green)}
.b-bear{background:rgba(240,79,79,.14);color:var(--red)}
.b-warn{background:rgba(245,166,35,.14);color:var(--yellow)}
.b-neu{background:var(--bg4);color:var(--text2)}
.b-blue{background:rgba(74,158,255,.14);color:var(--blue)}
.b-purple{background:rgba(155,127,255,.14);color:var(--purple)}

/* STAT CARD */
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:16px}
.stat-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.stat-val{font-size:24px;font-weight:700;line-height:1}
.stat-sub{font-size:10px;margin-top:5px}

/* GRID LAYOUTS */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g21{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.g12{display:grid;grid-template-columns:1fr 2fr;gap:10px}
.g6{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.gap{margin-bottom:10px}

/* SCORE HERO */
.score-hero{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;min-width:0}
.score-glow{position:absolute;width:180px;height:180px;border-radius:50%;opacity:.08;filter:blur(50px);pointer-events:none;top:50%;left:50%;transform:translate(-50%,-50%)}
.score-num{font-size:56px;font-weight:700;letter-spacing:-2px;line-height:1;position:relative}
.score-lbl{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.7px;margin-top:4px}
.score-verdict{margin-top:10px;padding:5px 16px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:.3px;position:relative;max-width:100%}
.score-conf{margin-top:6px;font-size:9px;color:var(--text3);position:relative;overflow-wrap:break-word;word-break:break-word;line-height:1.5;max-width:100%;padding:0 4px}

/* PILLS */
.pills{display:flex;flex-direction:column;gap:6px}
.pill{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:8px 12px;display:flex;align-items:flex-start;gap:10px}
.pill-icon{font-size:15px;flex-shrink:0;margin-top:1px}
.pill-inner{flex:1;min-width:0}
.pill-row{display:flex;align-items:center;gap:8px}
.pill-name{font-size:11px;color:var(--text2);width:84px;flex-shrink:0}
.pill-track{flex:1;height:5px;background:var(--bg5);border-radius:3px;overflow:hidden;min-width:0}
.pill-fill{height:100%;border-radius:3px}
.pill-val{font-size:12px;font-weight:600;width:26px;text-align:right;flex-shrink:0}
.pill-lbl{font-size:9px;color:var(--text3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* METRICS */
.ms-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;min-width:0;overflow:hidden}
.ms-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.ms-val{font-size:16px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-sub{font-size:10px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* LS BAR */
.ls-bar{display:flex;height:22px;border-radius:4px;overflow:hidden}
.ls-l{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--green);background:rgba(0,211,149,.18)}
.ls-s{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--red);background:rgba(240,79,79,.18)}

/* FUNDING */
.fr-big{font-size:26px;font-weight:700;font-family:var(--mono);margin:6px 0}
.fr-track{background:var(--bg4);height:6px;border-radius:3px;position:relative;margin:10px 0 4px;overflow:hidden}
.fr-fill{height:100%;border-radius:3px;position:absolute;top:0}
.fr-hist{display:flex;align-items:flex-end;gap:3px;height:38px;margin-top:10px}
.fr-bar{flex:1;border-radius:2px 2px 0 0;min-height:2px}

/* ORDER BOOK */
.ob-row{display:flex;align-items:center;gap:6px;height:18px}
.ob-px{font-family:var(--mono);font-size:11px;width:70px;text-align:right;flex-shrink:0;overflow:hidden;text-overflow:ellipsis}
.ob-bw{flex:1;height:12px;border-radius:2px;overflow:hidden;position:relative;min-width:0}
.ob-bf{height:100%;border-radius:2px;position:absolute}
.ob-qty{font-size:10px;color:var(--text2);width:48px;text-align:right;flex-shrink:0;font-family:var(--mono)}
.ob-spread{text-align:center;padding:4px 0;font-size:10px;color:var(--text2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:3px 0}
.imbal-track{height:6px;border-radius:3px;overflow:hidden;display:flex;margin-top:6px}

/* TRADE TABLE */
.tbl{width:100%;font-size:11px;border-collapse:collapse}
.tbl th{color:var(--text3);font-weight:500;padding:0 8px 8px 0;text-align:left;text-transform:uppercase;letter-spacing:.4px;font-size:10px;border-bottom:1px solid var(--border)}
.tbl td{padding:8px 8px 8px 0;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(255,255,255,.02)}

/* TRADE SIGNAL */
.signal-main{background:var(--bg3);border-radius:var(--r);padding:14px;text-align:center;margin-bottom:10px}
.signal-dir{font-size:28px;font-weight:800;letter-spacing:-1px}

/* MINI STAT */
.mini-stat{background:var(--bg3);border-radius:var(--r);padding:8px 10px;min-width:0;overflow:hidden}
.mini-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-val{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* NOTE */
.note{font-size:10px;color:var(--text3);line-height:1.6;margin-top:6px}

/* BOT STATUS */
.bot-item{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;display:flex;align-items:center;gap:10px}
.bot-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-running{background:var(--green);box-shadow:0 0 8px var(--green);animation:ping 2s infinite}
.dot-stopped{background:var(--text3)}
.dot-error{background:var(--red)}

/* CONFLUENCE TABLE (legacy) */
.conf-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.conf-row:last-child{border-bottom:none}
.conf-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* CONFLUENCE LIST v2 — grouped by category */
.conf-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;padding:10px 12px;background:var(--bg3);border-radius:var(--r);border:1px solid var(--border)}
.conf-summary-num{font-size:22px;font-weight:700;line-height:1;color:var(--text);font-family:var(--mono)}
.conf-summary-total{font-size:13px;color:var(--text3);font-weight:500}
.conf-summary-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}

.conf-section{margin-bottom:14px}
.conf-section:last-child{margin-bottom:0}
.conf-section-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 2px 8px;border-bottom:1px solid var(--border);margin-bottom:8px}
.conf-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text2)}
.conf-section-body{display:grid;gap:6px}

.conf-item{padding:8px 10px;background:var(--bg3);border:1px solid var(--border);border-left:3px solid var(--red);border-radius:8px;min-width:0}
.conf-item.pass{border-left-color:var(--green)}
.conf-item-hd{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:8px;min-width:0}
.conf-item-status{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:700;flex-shrink:0;background:rgba(240,79,79,.15);color:var(--red)}
.conf-item.pass .conf-item-status{background:rgba(0,211,149,.15);color:var(--green)}
.conf-item-name{font-size:11.5px;font-weight:600;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conf-item-score{font-size:13px;font-weight:700;font-family:var(--mono);flex-shrink:0;min-width:24px;text-align:right}
.conf-item-bar{height:3px;background:var(--bg5);border-radius:2px;margin:6px 0 5px;overflow:hidden}
.conf-item-fill{height:100%;border-radius:2px;transition:width .35s ease}
.conf-item-desc{font-size:10px;color:var(--text3);line-height:1.45;word-break:break-word;overflow-wrap:anywhere}

@media(max-width:640px){
  .conf-item-name{white-space:normal;line-height:1.3}
  .conf-summary-num{font-size:20px}
}

/* SPIN */
.spin{width:14px;height:14px;border:2px solid var(--bg5);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* PAIR TABS */
.pair-tabs{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.pair-tab{background:var(--bg4);border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:11px;color:var(--text2);cursor:pointer;transition:all .15s}
.pair-tab.on{background:var(--blue);color:#fff;border-color:var(--blue)}

/* SENTIMENT RADAR */
.sent-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sent-name{font-size:11px;color:var(--text2);width:80px;flex-shrink:0}
.sent-track{flex:1;height:4px;background:var(--bg4);border-radius:2px;overflow:hidden}
.sent-fill{height:100%;border-radius:2px}
.sent-val{font-size:11px;font-weight:600;width:28px;text-align:right}

/* DECISION FLOW */
.flow-step{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.flow-step:last-child{border-bottom:none}
.flow-num{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;margin-top:1px}
.flow-content{flex:1;min-width:0}
.flow-title{font-size:12px;font-weight:600;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flow-desc{font-size:10px;color:var(--text3);line-height:1.5;overflow-wrap:break-word;word-break:break-word}

/* ALERT */
.alert{padding:10px 14px;border-radius:var(--r);font-size:12px;display:flex;align-items:flex-start;gap:8px;margin-bottom:10px;overflow-wrap:break-word;word-break:break-word;flex-wrap:wrap}
.alert-info{background:rgba(74,158,255,.1);border:1px solid rgba(74,158,255,.25);color:var(--blue)}
.alert-warn{background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.25);color:var(--yellow)}
.alert-ok{background:rgba(0,211,149,.1);border:1px solid rgba(0,211,149,.25);color:var(--green)}

@media(max-width:1200px){.g4{grid-template-columns:1fr 1fr}.g6{grid-template-columns:repeat(3,1fr)}.g5{grid-template-columns:repeat(3,1fr)}}
/* ── 1400px: kolom 4 chart (OnChain) → 2 kolom, score hero adaptif ─── */
@media(max-width:1400px){
  #tab-onchain [style*="grid-template-columns:2fr 1fr 1fr 1fr"]{display:grid!important;grid-template-columns:1fr 1fr!important}
  /* Signal Intelligence: confluence 2/1 → 1/1 di layar lebih kecil */
  #tab-intelligence .g21{grid-template-columns:1fr 1fr}
}
/* ── 1024px: lebih agresif ─── */
@media(max-width:1024px){
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"]{display:grid!important;grid-template-columns:1fr 1fr!important}
  .fr-big{font-size:20px}
  .g21{grid-template-columns:1fr}
  /* OnChain composite score row: stack */
  [style*="grid-template-columns:180px 1fr"]{display:grid!important;grid-template-columns:1fr!important}
}
@media(max-width:768px){.g4,.g3,.g2,.g21,.g12{grid-template-columns:1fr}.g6,.g5{grid-template-columns:repeat(2,1fr)}.tabs{flex-wrap:wrap}}

/* ── OnChain & Signal Intelligence: prevent overflow ──────────────── */
#tab-onchain, #tab-intelligence{overflow-x:hidden}
#tab-onchain .card, #tab-intelligence .card{min-width:0;overflow:hidden}
/* Score hero: shrink-friendly */
#tab-intelligence .score-hero{padding:16px 12px}
#tab-intelligence .score-num{font-size:48px}
@media(max-width:1400px){
  #tab-intelligence .score-num{font-size:40px}
  #tab-intelligence .score-hero{padding:14px 10px}
  #tab-intelligence .score-conf{font-size:9px;line-height:1.4}
}
/* Confluence list v2: grouped layout — lihat .conf-section / .conf-item di bawah */
/* Decision flow: izinkan title wrap, gunakan line-clamp jika perlu */
#tab-intelligence .flow-title{white-space:normal;line-height:1.35}
/* Score verdict & conf: prevent overflow ke samping */
#tab-intelligence .score-verdict{font-size:11px;padding:4px 12px}
/* OnChain header: fr/oi badge text wrap di layar sempit */
#ocFrOi{white-space:normal!important;line-height:1.5}
/* Recommendation card: SL/TP1/TP2 boxes — prevent label clip */
#ocSl, #ocTp1, #ocTp2{font-size:11px}
@media(max-width:1280px){
  #ocSl, #ocTp1, #ocTp2{font-size:10px}
}
/* OnChain pair tabs: scrollable, status chip jangan dorong tab keluar */
#tab-onchain .pair-tabs{flex:1;min-width:0;overflow-x:auto;flex-wrap:nowrap}
/* OnChain confluence list rows (jika ada) wrap */
#ocReasons{font-size:10px;line-height:1.5;color:var(--text3)}
/* Pills: panjang text wrap */
.pill-name{word-break:break-word}
/* Decision box buttons (mini-stat 2x2): allow shrink */
#ig-decision-box .mini-val{font-size:12px}

/* ── MOBILE (≤640px) ───────────────────────────────────── */
.mob-nav{display:none}
@media(max-width:640px){
  /* Shell & spacing */
  .shell{padding:0 10px 76px}
  body{font-size:12px}

  /* Topbar stack vertikal */
  .topbar{flex-direction:column;align-items:stretch;padding:10px 0 0;gap:6px}
  .topbar > div:last-child{display:flex;flex-wrap:wrap;gap:6px;justify-content:space-between}
  .brand-name{font-size:14px}
  .brand-sub{font-size:10px}

  /* Sembunyikan tab desktop, tampilkan bottom nav */
  .tabs{display:none}
  .mob-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;
    background:var(--bg2);border-top:1px solid var(--border2);
    padding:6px 0 calc(6px + env(safe-area-inset-bottom));
    z-index:60;justify-content:space-around;
  }
  .mob-tab{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    background:none;border:none;color:var(--text2);font-size:9px;
    font-family:var(--font);cursor:pointer;padding:4px 12px;
    border-radius:var(--r);transition:color .15s;min-width:64px;
  }
  .mob-tab.on{color:var(--blue)}
  .mob-tab-icon{font-size:20px;line-height:1}

  /* Cards */
  .card{padding:12px}
  .stat-card{padding:12px}

  /* Score hero responsive */
  .score-num{font-size:42px}
  .score-hero{padding:14px 10px}

  /* Grid override */
  .g6,.g5{grid-template-columns:repeat(2,1fr)}

  /* Pill: sembunyikan label di mobile */
  .pill-lbl{display:none}
  .pill-name{width:72px}

  /* Buttons touch-friendly */
  button{min-height:36px}
  .tab{padding:8px 12px}

  /* Onchain chart row: stack */
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"]{display:grid!important;grid-template-columns:1fr!important}
  /* Komponen Score + score-hero: stack vertically */
  [style*="grid-template-columns:180px 1fr"]{display:grid!important;grid-template-columns:1fr!important}

  /* Pair tabs scroll */
  .pair-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .pair-tab{flex-shrink:0}

  /* Status chip kecil */
  .status-chip{padding:3px 8px;font-size:10px}

  /* Login modal responsive */
  .login-box{width:calc(100vw - 32px)!important;max-width:340px}

  /* Refresh + auth di satu baris */
  #authStatus{font-size:10px}

  /* ── ADMIN PAGE mobile ─────────── */
  /* Cegah horizontal scroll di tab admin */
  #tab-admin{overflow-x:hidden}
  /* Overview stats: 2×2 tetap, bukan 1×4 */
  #tab-admin .g4{grid-template-columns:repeat(2,1fr)}
  /* Card header: izinkan wrap jika konten terlalu panjang */
  #tab-admin .card-hd{flex-wrap:wrap;row-gap:6px}
  /* Inner 2-col grid (Risk Mgmt, Trading Activity): collapse to 1 col */
  #tab-admin .card .g2{grid-template-columns:1fr}
  /* Trading pairs checkboxes: 2 kolom */
  #adm-pair-grid{grid-template-columns:repeat(2,1fr)!important}
  /* API key form: stack label+button */
  #adm-apikey-section [style*="justify-content:space-between"]{flex-direction:column;align-items:flex-start}
  /* Save button: full-width touch target */
  #tab-admin .adm-mode-btn{font-size:13px;padding:12px 10px}
  /* Long label text: wrap normally */
  #tab-admin .adm-label{word-break:break-word}
  /* Checkbox spans: allow wrap */
  #tab-admin .adm-field label span{word-break:break-word}
  /* Sub-tabs: izinkan wrap, tidak full flex:1 */
  .adm-subtabs{padding:3px}
  .adm-subtab{flex:1 1 calc(50% - 4px);min-width:0;padding:8px 10px;font-size:11px}

  /* ── Sub-tab Users & Bots: stack vertikal ──────────────── */
  .adm-users-grid{grid-template-columns:1fr!important}

  /* ── User & Bot tables → card layout di mobile ─────────── */
  /* Hapus default table layout — render setiap row sebagai card */
  .tbl-stack,
  .tbl-stack thead,
  .tbl-stack tbody,
  .tbl-stack tr,
  .tbl-stack td{display:block;width:100%}
  .tbl-stack thead{display:none}                              /* sembunyikan header */
  .tbl-stack tbody{padding:0}
  .tbl-stack tr{
    background:var(--bg3);
    border:1px solid var(--border);
    border-radius:var(--r);
    padding:10px 12px;
    margin-bottom:8px;
    box-sizing:border-box
  }
  .tbl-stack tr:last-child{margin-bottom:0}
  .tbl-stack tr:hover td{background:transparent}              /* matikan hover di mobile */
  .tbl-stack td{
    padding:5px 0;
    border:none;
    text-align:left!important;
    white-space:normal!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:24px
  }
  /* Label "Email", "Status", dll dari data-label */
  .tbl-stack td::before{
    content:attr(data-label);
    font-size:10px;
    font-weight:500;
    color:var(--text3);
    text-transform:uppercase;
    letter-spacing:.4px;
    flex-shrink:0
  }
  /* Primary cell (email / nama bot): tampil sebagai heading, tanpa label */
  .tbl-stack td.td-primary{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding:0 0 6px;
    margin-bottom:6px;
    border-bottom:1px solid var(--border);
    font-size:13px;
    font-weight:600;
    color:var(--text);
    word-break:break-all
  }
  .tbl-stack td.td-primary::before{display:none}
  /* Pairs cell: full width text wrap, label di atas */
  .tbl-stack td.td-pairs{
    flex-direction:row;
    flex-wrap:wrap;
    color:var(--text3);
    font-size:11px;
    word-break:break-word
  }
  /* Action cell: tombol full row, justify end */
  .tbl-stack td.td-actions{
    flex-wrap:wrap;
    gap:6px;
    justify-content:flex-end;
    padding-top:8px;
    margin-top:4px;
    border-top:1px solid var(--border)
  }
  .tbl-stack td.td-actions::before{display:none}
  .tbl-stack td.td-actions .adm-btn{flex:1;min-width:90px;text-align:center;font-size:11px;padding:7px 10px}
  .tbl-stack td.td-actions .adm-btn:only-child{flex:0 1 auto;min-width:60px}

  /* Worker Health 2×2 stats grid → 1 kolom */
  #adm-worker-health > div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important
  }
  /* Worker Health card-hd: tombol Refresh + Restart wrap di bawah title */
  #tab-admin .card-hd > div[style*="display:flex"]{flex-wrap:wrap;gap:6px}

  /* User Management add-form: full width inputs sudah ok, just ensure */
  #adm-add-form{padding:10px}
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* LOGIN PAGE (full-screen, z-index above everything) */
#loginPage{display:flex;position:fixed;inset:0;background:var(--bg);z-index:200;align-items:center;justify-content:center;padding:20px;flex-direction:column}
.lp-input{width:100%;background:var(--bg4);border:1px solid var(--border2);border-radius:var(--r);padding:11px 13px;font-size:13px;color:var(--text);outline:none;font-family:var(--font);display:block;box-sizing:border-box}
.lp-input:focus{border-color:var(--blue)}
.lp-btn{width:100%;background:var(--blue);color:#fff;border:none;border-radius:var(--r);padding:12px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);transition:opacity .15s}
.lp-btn:hover{opacity:.88}
.lp-btn:disabled{opacity:.5;cursor:not-allowed}

/* Close manual button */
.btn-close-trade{background:rgba(240,79,79,.12);border:1px solid rgba(240,79,79,.4);color:var(--red);border-radius:6px;padding:4px 10px;font-size:10px;cursor:pointer;font-family:var(--font);transition:background .15s;white-space:nowrap}
.btn-close-trade:hover{background:rgba(240,79,79,.25)}
/* PAIR CONTROL */
.pair-toggle{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:72px}
.pair-toggle-btn{border-radius:8px;padding:7px 10px;font-size:11px;font-weight:600;font-family:var(--font);cursor:pointer;border:1px solid;transition:all .18s;width:100%;text-align:center;line-height:1.3}
.pair-toggle-btn.enabled{background:rgba(0,211,149,.14);border-color:rgba(0,211,149,.45);color:var(--green)}
.pair-toggle-btn.disabled{background:var(--bg4);border-color:var(--border);color:var(--text3)}
.pair-toggle-btn:disabled{opacity:.5;cursor:not-allowed}
.session-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:10px;font-weight:600}
.session-best{background:rgba(0,211,149,.15);border:1px solid rgba(0,211,149,.35);color:var(--green)}
.session-good{background:rgba(74,158,255,.12);border:1px solid rgba(74,158,255,.3);color:var(--blue)}
.session-low{background:var(--bg4);border:1px solid var(--border);color:var(--text3)}
/* TRADE PAGINATION */
.trade-pagination{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 0 2px;font-size:11px;color:var(--text3)}
.trade-pagination button{background:var(--bg4);border:1px solid var(--border);color:var(--text2);border-radius:6px;padding:4px 12px;font-size:11px;font-family:var(--font);cursor:pointer;transition:background .15s}
.trade-pagination button:hover:not(:disabled){background:var(--bg3);color:var(--text)}
.trade-pagination button:disabled{opacity:.35;cursor:not-allowed}

/* ADMIN */
.adm-input{width:100%;background:var(--bg4);border:1px solid var(--border2);border-radius:var(--r);padding:8px 10px;color:var(--text);font-size:12px;font-family:var(--font);outline:none;box-sizing:border-box}
.adm-input:focus{border-color:var(--blue)}
.adm-label{font-size:11px;color:var(--text2);display:block;margin-bottom:4px}
.adm-btn{background:var(--bg4);border:1px solid var(--border2);color:var(--text2);border-radius:6px;padding:4px 10px;font-size:10px;cursor:pointer;font-family:var(--font);transition:background .15s;white-space:nowrap}
.adm-btn:hover{background:var(--bg3)}
.adm-btn-green{background:rgba(0,211,149,.12);border:1px solid rgba(0,211,149,.4);color:var(--green)}
.adm-btn-green:hover{background:rgba(0,211,149,.22)}
.adm-btn-red{background:rgba(240,79,79,.12);border:1px solid rgba(240,79,79,.4);color:var(--red)}
.adm-btn-red:hover{background:rgba(240,79,79,.22)}
.adm-section{display:flex;flex-direction:column;gap:10px}
.adm-field{margin-bottom:10px}
.adm-mode-btn{flex:1;padding:10px;border-radius:var(--r);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .18s}

/* ADMIN SUB-TABS */
.adm-subtabs{display:flex;gap:4px;background:var(--bg3);border-radius:var(--r2);padding:4px;border:1px solid var(--border);margin:14px 0;overflow-x:auto;flex-wrap:wrap}
.adm-subtab{padding:8px 14px;border-radius:var(--r);border:none;background:transparent;color:var(--text2);font-size:12px;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .15s;white-space:nowrap;flex:1;min-width:140px}
.adm-subtab:hover{color:var(--text)}
.adm-subtab.on{background:var(--bg5);color:var(--text);font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.adm-subpane{display:none}
.adm-subpane.on{display:block}
/* 2-column layout untuk sub-tabs settings (memaksimalkan ruang di monitor PC) */
.adm-sub-general .adm-section,
#adm-sub-general > .adm-section,
#adm-sub-risk > .adm-section,
#adm-sub-strategy > .adm-section{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
@media(max-width:900px){
  #adm-sub-general > .adm-section,
  #adm-sub-risk > .adm-section,
  #adm-sub-strategy > .adm-section{grid-template-columns:1fr}
}

/* SAVE BAR — sticky di atas footer, hanya visible di settings sub-tabs */
.adm-save-bar{display:flex;flex-direction:column;gap:4px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:12px;margin:14px 0 10px;position:sticky;bottom:10px;z-index:5;box-shadow:0 -4px 16px rgba(0,0,0,.35)}
.adm-save-btn{width:100%;background:var(--blue);color:#fff;border:none;border-radius:var(--r);padding:12px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);transition:opacity .15s}
.adm-save-btn:hover{opacity:.88}
.adm-save-status{text-align:center;font-size:11px;color:var(--text3);min-height:14px}
/* Hide save bar saat di sub-tab Users (tidak ada field setting) */
#tab-admin.adm-sub-users-active #adm-save-bar{display:none}