/* ================================================================
   JT SMART CHART — Style v2.0
   Reference: Gambar 4 (Smart Chart + News + Calendar)
================================================================ */

:root {
  --pri:    #0088ff;
  --sec:    #6366f1;
  --acc:    #00f2ff;
  --bg:     #060d1a;
  --bg2:    #0a1628;
  --bg3:    #0f1f35;
  --card:   rgba(10,22,40,.9);
  --border: rgba(255,255,255,.07);
  --ok:     #10b981;
  --warn:   #f59e0b;
  --err:    #ef4444;
  --txt:    #f8fafc;
  --txt2:   #8898aa;
  --txt3:   #475569;
  --sw:     200px;
}

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

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  color: var(--txt);
  overflow-x: hidden;
}

/* Background image */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url('../aset/bg.jpg'),url('../aset/bg.png'),url('../aset/bg.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.22;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:4px; }

/* ── GRADIENT TEXT ── */
.gt {
  background: linear-gradient(135deg,#fff 20%,var(--pri) 50%,var(--acc) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: gt 5s linear infinite;
}
@keyframes gt { to { background-position:200% center } }
.ag { background: linear-gradient(135deg,var(--pri),var(--sec)); }

/* ================================================================
   LAYOUT — Sidebar + Main
================================================================ */

/* TOP HEADER */
#topbar {
  position: fixed;
  top: 0; left: 200px; right: 0;
  height: 56px;
  background: rgba(6,13,26,.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  z-index: 200;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
}
#topbar-left { display:flex; align-items:center; gap:12px; }
#topbar-center { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; }
#topbar-right { display:flex; align-items:center; gap:10px; }

.market-status {
  display: flex; align-items:center; gap:6px;
  font-size: 9px; font-weight:800; color:var(--txt3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing:.05em;
}
.market-status .live-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--ok); animation:pulse 1.6s ease infinite;
}
.live-label { color:var(--ok); }

.topbar-title {
  display:flex; align-items:center; gap:8px;
}
.topbar-title .logo-icon {
  width:32px; height:32px;
  background: linear-gradient(135deg,var(--pri),var(--sec));
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:900; color:#fff;
}
.topbar-title h1 {
  font-size:14px; font-weight:900;
  letter-spacing:.05em; color:#fff;
}
.topbar-title span {
  font-size:9px; color:var(--txt3); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}

#tb-clock {
  font-family:'JetBrains Mono',monospace;
  font-size:18px; font-weight:700; color:var(--acc);
  letter-spacing:.05em;
}
#tb-date {
  font-size:9px; color:var(--txt3); font-family:'JetBrains Mono',monospace;
}

/* SIDEBAR */
#sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 200px;
  background: rgba(6,13,26,.99);
  border-right: 1px solid rgba(255,255,255,.08);
  z-index: 250;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
#sidebar::-webkit-scrollbar { width:0; }

.sb-logo {
  padding: 14px 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items:center; gap:10px;
  cursor: pointer; flex-shrink:0;
}
.sb-logo-icon {
  width:34px; height:34px;
  background: linear-gradient(135deg,var(--pri),var(--sec));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:900; color:#fff;
  flex-shrink:0;
}
.sb-logo-text { font-size:13px; font-weight:900; color:#fff; letter-spacing:-.3px; white-space:nowrap; }
.sb-logo-sub  { font-size:8px;  font-weight:700; color:var(--txt3); letter-spacing:.15em; text-transform:uppercase; white-space:nowrap; }

.sb-section { padding:8px 6px 4px; flex-shrink:0; }
.sb-label {
  font-size:8px; font-weight:900; color:var(--txt3);
  letter-spacing:.15em; text-transform:uppercase;
  padding:0 8px 5px; display:block;
}

.sb-item {
  display:flex; align-items:center; gap:8px;
  padding:7px 8px; border-radius:8px;
  cursor:pointer; transition:.18s;
  color:var(--txt3); font-size:10px; font-weight:700;
  margin-bottom:2px; position:relative;
  border:1px solid transparent;
  background:none; width:100%; text-align:left;
  white-space:nowrap; overflow:hidden;
}
.sb-item:hover { background:rgba(255,255,255,.05); color:var(--txt2); }
.sb-item.on {
  background:rgba(0,136,255,.14);
  color:#38bdf8;
  border:1px solid rgba(0,136,255,.2);
}
.sb-item.on::before {
  content:'';
  position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  width:3px; height:60%;
  background:var(--pri); border-radius:2px;
}
.sb-item-icon {
  width:28px; height:28px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; flex-shrink:0;
  background:rgba(255,255,255,.05);
  transition:.18s;
}
.sb-item.on .sb-item-icon { background:rgba(0,136,255,.2); }
.sb-item-label { flex:1; }

.sb-badge {
  font-size:7px; font-weight:900; padding:2px 5px;
  border-radius:3px; text-transform:uppercase; letter-spacing:.05em;
}
.sb-badge.live { background:rgba(16,185,129,.2); color:var(--ok); animation:pulse 2s ease infinite; }
.sb-badge.new  { background:rgba(245,158,11,.2);  color:var(--warn); }
.sb-badge.hot  { background:rgba(239,68,68,.2);   color:var(--err); }

/* Smart Money Score box */
.sb-score-box {
  margin:8px 8px 0;
  background:rgba(0,136,255,.08);
  border:1px solid rgba(0,136,255,.2);
  border-radius:12px; padding:10px;
  flex-shrink:0;
}
.sb-score-title { font-size:8px; font-weight:900; color:var(--txt3); letter-spacing:.15em; text-transform:uppercase; margin-bottom:8px; }
.sb-score-val   { font-size:28px; font-weight:900; color:var(--acc); font-family:'JetBrains Mono',monospace; line-height:1; }
.sb-score-label { font-size:9px; font-weight:700; color:var(--ok); margin-top:4px; }
.sb-score-bar   { height:4px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden; margin-top:8px; }
.sb-score-fill  { height:100%; background:linear-gradient(90deg,var(--ok),var(--acc)); border-radius:4px; }

/* Premium box */
.sb-premium {
  margin:8px 8px 10px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(0,136,255,.2));
  border:1px solid rgba(99,102,241,.3);
  border-radius:12px; padding:12px; text-align:center;
}
.sb-premium p { font-size:9px; color:var(--txt3); line-height:1.5; margin-bottom:8px; }
.sb-premium-btn {
  display:block; width:100%;
  background:linear-gradient(135deg,var(--pri),var(--sec));
  color:#fff; border:none; border-radius:8px;
  padding:7px; font-size:10px; font-weight:800;
  cursor:pointer; text-transform:uppercase; letter-spacing:.1em;
}

/* MAIN CONTENT */
#mc {
  margin-left: 200px;
  margin-top: 56px;
  min-height: calc(100vh - 56px);
  padding: 16px;
  overflow-y: auto;    /* ← INI YANG FIX SCROLL */
  transition: margin .3s;
}

/* Chart mode - no padding, flex column */
#mc.chart-mode {
  padding: 0;
  height: calc(100vh - 56px - 40px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* PAGE */
.pp { display:none; }
.pp.on { display:block; }

/* Chart page fills mc */
#pg-jt-chart.on {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

/* ── PAGE HEADER ── */
.ph { margin-bottom:16px; }
.ph h2 { font-size:20px; font-weight:900; letter-spacing:-1px; color:var(--txt); margin-bottom:3px; }
.ph p  { font-size:10px; color:var(--txt3); font-weight:600; }
.bc    { font-size:8px; color:var(--txt3); font-weight:800; letter-spacing:.15em; text-transform:uppercase; margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.bc span { color:var(--txt3); }

/* ── CARDS ── */
.wc {
  background:rgba(10,22,40,.82);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  overflow:hidden;
  backdrop-filter:blur(8px);
}
.wh {
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.02);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px;
}
.wt {
  display:flex; align-items:center; gap:8px;
  font-size:9px; font-weight:900; letter-spacing:.15em;
  text-transform:uppercase; color:#38bdf8;
}

/* Stat card */
.stc {
  background:rgba(10,22,40,.8);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px; padding:14px 16px;
  backdrop-filter:blur(8px);
}
.stl { font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--txt3); }
.stv { font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:700; color:var(--txt); margin-top:4px; }
.sup { color:var(--ok);  font-size:10px; font-weight:700; margin-top:4px; display:flex; align-items:center; gap:4px; }
.sdn { color:var(--err); font-size:10px; font-weight:700; margin-top:4px; display:flex; align-items:center; gap:4px; }

/* ── BUTTONS ── */
.aib {
  background:rgba(0,136,255,.18);
  border:1px solid rgba(0,136,255,.38);
  padding:6px 12px; border-radius:8px;
  font-size:9px; font-weight:800; color:#00f2ff;
  cursor:pointer; transition:.2s;
  display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap;
}
.aib:hover { background:var(--pri); color:#fff; }
.bsm {
  background:rgba(0,136,255,.18);
  border:1px solid rgba(0,136,255,.38);
  border-radius:7px; padding:6px 12px;
  color:#38bdf8; font-size:11px; font-weight:800;
  cursor:pointer; transition:.2s;
}
.bsm:hover { background:var(--pri); color:#fff; }
.wi {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px; padding:7px 10px;
  color:#fff; font-size:11px; font-weight:600;
  outline:none; transition:.2s;
}
.wi:focus { border-color:rgba(0,136,255,.5); }
.ni {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:6px; padding:5px 9px;
  color:var(--txt2); font-size:11px;
  width:100%; outline:none; transition:.2s;
}
.ni:focus { border-color:rgba(0,136,255,.4); color:#e2e8f0; }

/* ── TICKER ── */
#ticker {
  position:fixed; bottom:0; left:200px; right:0;
  height:40px; z-index:190;
  background:rgba(6,13,26,.96);
  border-top:1px solid var(--border);
  overflow:hidden;
}

/* ── TABS ── */
.tbar { display:flex; border-bottom:1px solid rgba(255,255,255,.05); }
.tbtn {
  padding:9px 14px; font-size:9px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt3); cursor:pointer;
  border-bottom:2px solid transparent; transition:.2s;
  border-top:none; border-left:none; border-right:none; background:none;
  white-space:nowrap;
}
.tbtn.on { color:#38bdf8; border-bottom-color:var(--pri); }
.tpane { display:none; }
.tpane.on { display:block; }

/* ── MISC ── */
.cs::-webkit-scrollbar { width:3px; }
.cs::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:10px; }
.ld { width:6px; height:6px; border-radius:50%; background:var(--ok); animation:pulse 1.6s ease infinite; display:inline-block; }
.tag { display:inline-block; padding:2px 8px; border-radius:5px; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.tag-b { background:rgba(0,136,255,.14); color:#38bdf8; border:1px solid rgba(0,136,255,.28); }
.ab { display:inline-block; padding:3px 10px; border-radius:6px; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:2px; cursor:pointer; }
.al { background:rgba(16,185,129,.15); color:var(--ok);  border:1px solid rgba(16,185,129,.3); }
.as { background:rgba(239,68,68,.15);  color:var(--err); border:1px solid rgba(239,68,68,.3); }
.an { background:rgba(245,158,11,.15); color:var(--warn);border:1px solid rgba(245,158,11,.3); }
.ai2{ background:rgba(99,102,241,.15); color:#818cf8;    border:1px solid rgba(99,102,241,.3); }
.sr { background:rgba(0,136,255,.07); border:1px solid rgba(0,136,255,.2); border-radius:14px; padding:16px; font-size:12px; color:#cbd5e1; line-height:1.8; }
.dz { border:2px dashed rgba(0,136,255,.25); border-radius:16px; padding:32px; text-align:center; transition:.3s; cursor:pointer; position:relative; }
.dz.over { border-color:var(--acc); background:rgba(0,136,255,.08); }
.fbw { height:4px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; margin-top:6px; }
.fbf { height:100%; border-radius:4px; transition:width 1s ease; }
.sc { background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:14px 16px; margin-bottom:8px; transition:.2s; }
.sc:hover { border-color:rgba(0,136,255,.25); }
.sc.bull { border-left:3px solid var(--ok); }
.sc.bear { border-left:3px solid var(--err); }
.sc.neut { border-left:3px solid var(--warn); }
.ci2 { background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px 14px; margin-bottom:8px; }

/* Correlation */
.cm { display:flex; flex-direction:column; gap:3px; }
.cr { display:flex; gap:3px; align-items:center; }
.clc { font-size:9px; font-weight:800; color:var(--txt3); width:38px; text-align:right; padding-right:6px; flex-shrink:0; }
.cc2 { width:42px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:700; cursor:pointer; transition:transform .2s; }
.cc2:hover { transform:scale(1.18); z-index:2; position:relative; }
.chl { font-size:9px; font-weight:800; color:var(--txt3); width:42px; text-align:center; }

/* Watchlist table */
.wlt { width:100%; border-collapse:collapse; font-size:12px; }
.wlt th { padding:8px 14px; font-size:8px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--txt3); border-bottom:1px solid var(--border); background:rgba(255,255,255,.025); text-align:left; white-space:nowrap; }
.wlt td { padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.03); vertical-align:middle; color:#e2e8f0; }
.wlt tr:hover td { background:rgba(255,255,255,.02); }

/* ================================================================
   JT SMART CHART
================================================================ */
.jtf { background:#141e35; border:1px solid #243052; color:#8898aa; padding:3px 9px; border-radius:5px; font-size:11px; cursor:pointer; font-family:'JetBrains Mono',monospace; transition:.15s; }
.jtf:hover,.jtf.on { background:rgba(79,195,247,.15); border-color:#4fc3f7; color:#4fc3f7; }
.jtt { width:32px; height:16px; background:#243052; border-radius:8px; cursor:pointer; position:relative; transition:background .2s; border:none; flex-shrink:0; }
.jtt.on { background:#1d9e75; }
.jtt::after { content:''; width:12px; height:12px; background:#fff; border-radius:50%; position:absolute; top:2px; left:2px; transition:left .2s; }
.jtt.on::after { left:18px; }
.jtn { background:#0b0f1c; border:1px solid #243052; color:#c9d1e0; padding:3px 6px; border-radius:4px; font-size:10px; width:52px; font-family:'JetBrains Mono',monospace; text-align:right; }
.jtn:focus { outline:none; border-color:#4fc3f7; }
#jt-draw-tb { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; background:#0b0f1c; border-right:1px solid #1c2540; width:34px; flex-shrink:0; }
.dt-btn { width:26px; height:26px; background:#141e35; border:1px solid #1c2540; border-radius:5px; color:#3d4f6a; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s; flex-shrink:0; }
.dt-btn:hover { border-color:#4fc3f7; color:#4fc3f7; }
.dt-btn.on { background:rgba(79,195,247,.15); border-color:#4fc3f7; color:#4fc3f7; }
.dt-sep { width:18px; height:1px; background:#1c2540; margin:2px 0; }
.pcard { background:#141e35; border:1px solid #1c2540; border-radius:7px; padding:9px; margin-bottom:6px; }
.pcard-title { font-size:8px; letter-spacing:2px; color:#4fc3f7; text-transform:uppercase; margin-bottom:6px; padding-bottom:5px; border-bottom:1px solid #1c2540; font-weight:900; font-family:'JetBrains Mono',monospace; }
.prow { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:5px; }
.prow:last-child { margin-bottom:0; }
.prow label { font-size:10px; color:#8898aa; flex:1; font-family:'JetBrains Mono',monospace; }
#jt-tf-dd { position:absolute; top:100%; left:0; background:#0f1628; border:1px solid #1c2540; border-radius:8px; padding:6px; z-index:500; display:none; box-shadow:0 8px 24px rgba(0,0,0,.6); min-width:160px; }
.tf-grp { font-size:8px; color:#3d4f6a; letter-spacing:1px; padding:3px 6px; font-family:'JetBrains Mono',monospace; }
.tf-item { padding:5px 10px; font-size:11px; font-family:'JetBrains Mono',monospace; color:#8898aa; cursor:pointer; border-radius:4px; }
.tf-item:hover { background:rgba(79,195,247,.1); color:#4fc3f7; }
.tf-item.on { color:#4fc3f7; font-weight:700; }
#jt-ctx { position:fixed; background:#141e35; border:1px solid #243052; border-radius:6px; padding:4px; z-index:999; display:none; min-width:130px; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.ctx-i { padding:6px 10px; font-size:10px; color:#c9d1e0; cursor:pointer; border-radius:4px; font-family:'JetBrains Mono',monospace; }
.ctx-i:hover { background:rgba(79,195,247,.1); color:#4fc3f7; }
.ctx-i.red { color:#d85a30; }
.ctx-i.red:hover { background:rgba(216,90,48,.1); }
/* =========================
   DEFAULT MENU
========================= */
.jt-price-default{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.jt-price-default span{
  font-family:'JetBrains Mono', monospace;
}

#jt-src-default{
  font-size:9px;
  color:#475569;
}

#jt-px-default{
  font-size:14px;
  font-weight:700;
  color:#f59e0b;
}


/* =========================
   SMART CHART ONLY
========================= */
.jt-smart-toolbar{
  display:flex;
  align-items:center;
  width:100%;
}

.jt-price-smart{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.jt-price-smart span{
  font-family:'JetBrains Mono', monospace;
}

#jt-src{
  font-size:10px;
  color:#64748b;
}

#jt-px{
  font-size:15px;
  font-weight:700;
  color:#22c55e;
}

/* Fullscreen chart */
#pg-jt-chart.fullscreen {
  position:fixed; inset:0; z-index:1000;
  margin:0; padding:0;
  background:var(--bg);
}
#pg-jt-chart.fullscreen .ph { display:none; }
#pg-jt-chart.fullscreen #jt-chart-wrap {
  height: 100vh !important;
}
#pg-jt-chart.fullscreen #jt-chart-main {
  height: calc(100vh - 100px) !important;
}
#pg-jt-chart.fullscreen #jt-chart-rsi {
  height: 100px !important;
}

/* ================================================================
   NEWS AGREGATOR
================================================================ */
.news-agg-grid { display:grid; grid-template-columns:280px 1fr 230px; gap:12px; height:580px; }
.news-col { display:flex; flex-direction:column; overflow:hidden; border-radius:12px; background:var(--card); border:1px solid var(--border); }
.news-col-hd { padding:9px 13px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.news-col-title { font-size:8px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:#38bdf8; display:flex; align-items:center; gap:6px; }
.news-col-body { flex:1; overflow-y:auto; }
.news-col-body::-webkit-scrollbar { width:3px; }
.news-col-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:3px; }
.tic { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.04); cursor:pointer; transition:.15s; border-left:3px solid transparent; }
.tic:hover { background:rgba(255,255,255,.03); }
.tic.h { border-left-color:var(--err); } .tic.m { border-left-color:var(--warn); } .tic.l { border-left-color:var(--ok); }
.tic-meta { display:flex; align-items:center; gap:5px; margin-bottom:5px; flex-wrap:wrap; }
.tic-time { font-size:8px; font-family:'JetBrains Mono',monospace; color:var(--txt3); }
.tic-title { font-size:11px; font-weight:700; color:#e2e8f0; line-height:1.45; margin-bottom:4px; }
.tic-desc { font-size:9px; color:var(--txt3); line-height:1.5; margin-bottom:5px; }
.tic-src { font-size:8px; color:var(--txt3); font-weight:700; }
.ibadge { display:inline-flex; align-items:center; gap:3px; padding:1px 6px; border-radius:4px; font-size:8px; font-weight:900; }
.ibadge.h { background:rgba(239,68,68,.15); color:var(--err); border:1px solid rgba(239,68,68,.3); }
.ibadge.m { background:rgba(245,158,11,.15); color:var(--warn); border:1px solid rgba(245,158,11,.3); }
.ibadge.l { background:rgba(16,185,129,.15); color:var(--ok); border:1px solid rgba(16,185,129,.3); }
.sbadge-b { display:inline-flex;align-items:center;gap:2px;padding:1px 5px;border-radius:3px;font-size:8px;font-weight:800;background:rgba(16,185,129,.12);color:var(--ok);border:1px solid rgba(16,185,129,.2); }
.sbadge-r { display:inline-flex;align-items:center;gap:2px;padding:1px 5px;border-radius:3px;font-size:8px;font-weight:800;background:rgba(239,68,68,.12);color:var(--err);border:1px solid rgba(239,68,68,.2); }
.sbadge-n { display:inline-flex;align-items:center;gap:2px;padding:1px 5px;border-radius:3px;font-size:8px;font-weight:800;background:rgba(100,116,139,.12);color:var(--txt3);border:1px solid rgba(100,116,139,.2); }
.lnt { width:100%; border-collapse:collapse; }
.lnt th { padding:7px 9px; font-size:8px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--txt3); border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; background:rgba(255,255,255,.02); position:sticky; top:0; z-index:1; }
.lnt td { padding:8px 9px; border-bottom:1px solid rgba(255,255,255,.03); vertical-align:middle; }
.lnt-title { font-size:11px; font-weight:600; color:#e2e8f0; line-height:1.4; }
.cat-b { display:inline-block; padding:1px 5px; border-radius:3px; font-size:8px; font-weight:800; text-transform:uppercase; }
.cat-crypto { background:rgba(79,195,247,.1); color:#4fc3f7; }
.cat-forex  { background:rgba(245,158,11,.1);  color:var(--warn); }
.cat-economy{ background:rgba(239,68,68,.1);   color:var(--err); }
.cat-stocks { background:rgba(16,185,129,.1);  color:var(--ok); }
.asset-tag { display:inline-block; padding:1px 4px; border-radius:3px; font-size:8px; font-weight:700; background:rgba(255,255,255,.06); color:var(--txt3); font-family:'JetBrains Mono',monospace; }
.mip-row { display:flex; align-items:center; justify-content:space-between; padding:7px 12px; border-bottom:1px solid rgba(255,255,255,.04); }
.mip-asset { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; color:#e2e8f0; }
.mip-ico { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
.ntab { padding:4px 10px; border-radius:5px; font-size:9px; font-weight:800; cursor:pointer; border:1px solid transparent; transition:.15s; color:var(--txt3); background:none; letter-spacing:.05em; }
.ntab.on { background:rgba(79,195,247,.12); border-color:rgba(79,195,247,.3); color:#4fc3f7; }
.ntab:hover { color:#c9d1e0; }
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--ok); animation:pulse 1.6s ease infinite; display:inline-block; }

/* ================================================================
   ECONOMIC CALENDAR
================================================================ */
.cal-ftb { padding:3px 10px; border-radius:5px; font-size:9px; font-weight:800; cursor:pointer; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:var(--txt3); transition:.2s; display:inline-flex; align-items:center; gap:4px; font-family:'JetBrains Mono',monospace; }
.cal-ftb.on { background:rgba(79,195,247,.12); border-color:rgba(79,195,247,.3); color:#4fc3f7; }
.cal-row { transition:.15s; }
.cal-row:hover td { background:rgba(255,255,255,.025); }
.cal-row td { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.035); vertical-align:middle; }
.imp-h { display:inline-block; padding:2px 8px; border-radius:4px; font-size:8px; font-weight:900; background:rgba(239,68,68,.15); color:var(--err); border:1px solid rgba(239,68,68,.3); }
.imp-m { display:inline-block; padding:2px 8px; border-radius:4px; font-size:8px; font-weight:900; background:rgba(245,158,11,.15); color:var(--warn); border:1px solid rgba(245,158,11,.3); }
.imp-l { display:inline-block; padding:2px 8px; border-radius:4px; font-size:8px; font-weight:900; background:rgba(16,185,129,.15); color:var(--ok); border:1px solid rgba(16,185,129,.3); }
.cal-act-b { color:var(--ok); font-weight:800; }
.cal-act-r { color:var(--err); font-weight:800; }
.cal-act-n { color:#8898aa; }

/* ================================================================
   CHAT
================================================================ */
#cp {
  position:fixed; bottom:50px; right:24px;
  width:380px; max-height:560px; height:70vh;
  z-index:300; display:flex; flex-direction:column;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.6);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden;
}
#cp.min { transform:translateY(calc(100% - 48px)); }
.cm2 { margin-bottom:10px; padding:12px; border-radius:14px; font-size:12.5px; line-height:1.65; word-wrap:break-word; }
.mu { background:rgba(0,136,255,.14); border:1px solid rgba(0,136,255,.28); align-self:flex-end; color:#fff; max-width:86%; }
.ma { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); align-self:flex-start; color:#cbd5e1; max-width:86%; }
.ld2::after { content:'.'; animation:ld 1.5s steps(5,end) infinite; }
@keyframes ld { 0%,20%{content:'.'}40%{content:'..'}60%{content:'...'}80%,100%{content:''} }
#fab {
  display:none; position:fixed; bottom:50px; right:24px;
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,var(--pri),var(--sec));
  border:none; cursor:pointer; z-index:301;
  box-shadow:0 8px 24px rgba(0,136,255,.4);
  align-items:center; justify-content:center; font-size:20px;
}

/* ================================================================
   LANDING PAGE
================================================================ */
#lv { padding-top:0; }
.ncta { background:linear-gradient(135deg,var(--pri),var(--sec)); padding:8px 18px; border-radius:10px; font-size:10px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:#fff; cursor:pointer; border:none; }
.glass { background:rgba(15,23,42,.55); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.08); }

/* ================================================================
   ANIMATIONS & MISC
================================================================ */
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }
@keyframes sp { to{transform:rotate(360deg)} }

.si-inp { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:9px; padding:6px 12px 6px 30px; color:#fff; font-size:11px; font-weight:600; outline:none; transition:.2s; width:150px; }
.si-inp:focus { border-color:rgba(0,136,255,.4); width:190px; }

/* ================================================================
   RESPONSIVE
================================================================ */
@media(max-width:1024px) {
  .news-agg-grid { grid-template-columns:1fr; height:auto; }
}
@media(max-width:1200px) {
  :root { --sw:0px; }
  #sidebar { transform:translateX(-200px); transition:transform .3s; }
  #topbar { left:0 !important; }
  #ticker { left:0 !important; }
  #mc { margin-left:0 !important; }
  #sidebar.open { transform:translateX(0); }
  #topbar { left:0; }
  #ticker { left:0; }
  #mc { margin-left:0; padding:12px; }a
  #hbg { display:flex !important; }
}

/* ================================================================
   LANDING PAGE NAV + BACKGROUND
================================================================ */
#lv {
  min-height: 100vh;
  background: transparent;
}
#lv-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60px; z-index: 200;
  background: rgba(6,13,26,.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items:center;
  padding: 0 24px; gap:14px;
}
.bg-anim {
  position:fixed; inset:0; z-index:-1; opacity:.05;
  background:url("data:image/svg+xml,%3Csvg width='1000' height='600' viewBox='0 0 1000 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 500 L100 450 L200 480 L300 350 L400 380 L500 200 L600 250 L700 150 L800 180 L900 50 L1000 80' fill='none' stroke='%230088ff' stroke-width='2'/%3E%3C/svg%3E") 0 0/50% 100%;
  animation:bgx 60s linear infinite;
}
@keyframes bgx{to{background-position:100% 0}}

/* ================================================================
   HEATMAP
================================================================ */
.hm-tab {
  padding:4px 10px; border-radius:5px; font-size:9px; font-weight:800;
  cursor:pointer; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04); color:#475569; transition:.2s;
  font-family:'JetBrains Mono',monospace;
}
.hm-tab.on {
  background:rgba(79,195,247,.12); border-color:rgba(79,195,247,.3); color:#4fc3f7;
}
.hm-tab:hover { color:#c9d1e0; }

/* ================================================================
   SMART MONEY TRACKER
================================================================ */
#smt-overview-grid .stc {
  border-top: 3px solid rgba(0,136,255,.3);
}
#mc.chart-mode {
  padding: 0 !important;
  height: calc(100vh - 56px - 40px) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#pg-jt-chart.on {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#jt-chart-area {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

#jt-chart-main {
  flex: 1 !important;
  min-height: 0 !important;
  width: 100% !important;
}
html, body {
  overflow: hidden;
  height: 100%;
}

#mc {
  margin-left: 220px;
  margin-top: 56px;
  height: calc(100vh - 56px - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  padding-bottom: 50px;
}
@media(max-width:1200px){
  /* Topbar fix */
  #topbar{
    left:0 !important;
    padding:0 10px !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
  }
  #topbar-center{
    display:none !important;
  }
  #topbar-left{gap:6px !important;}
  #topbar-right .tb-date{display:none !important;}
  #tb-clock{font-size:14px !important;}

  /* Main content */
  #mc{
    margin-left:0 !important;
    width:100% !important;
    padding:10px !important;
  }

  /* Sidebar */
  #sidebar{
    transform:translateX(-220px) !important;
    transition:transform .3s ease !important;
    z-index:300 !important;
  }
  #sidebar.open{
    transform:translateX(0) !important;
  }

  /* Ticker */
  #ticker{left:0 !important;}

  /* Grid layouts jadi single column */
  [style*="grid-template-columns:1fr 280px"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }

  /* Table overflow */
  .wc{overflow-x:auto !important;}
}