/* ============================================================
   SIGNAL HUB — Tema Emerald (Light: putih+hijau, Dark: hitam+hijau)
   ============================================================ */
:root{
  /* ===== MODE TERANG — putih bersih + hijau emerald ===== */
  --bg:#eef3f0; --bg-2:#f5faf7;
  --card:#ffffff; --card-2:#f3f8f5;
  --ink:#0d241b; --ink-soft:#3a5248; --ink-faint:#6a7d74;
  --line:#e1ebe6;
  /* --purple* = aksen hijau (nama dipertahankan karena banyak dipakai) */
  --purple:#0d8a4f; --purple-2:#14b869; --purple-soft:#e6f7ee;
  --pink:#e76f8a; --pink-soft:#fceef1;
  --amber:#f59e0b; --amber-soft:#fef3c7;
  --blue:#0ea5e9; --blue-soft:#e0f2fe;
  --green:#16a34a; --green-soft:#dcfce7;
  --red:#e5484d; --red-soft:#fdeaea;
  --bg-soft:#eef3f0; --text-dim:#3a5248; --yellow:#b7791f;
  --radius:22px; --radius-sm:16px; --radius-xs:12px;
  --shadow:0 10px 30px rgba(14,110,68,.12);
  --shadow-sm:0 4px 14px rgba(14,110,68,.10);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* ----- Sidebar — putih bersih, teks gelap, aksen hijau -----  */
  --side:#ffffff; --side-2:#f7faf8; --side-edge:#e8f0eb;
  --side-ink:#42574c; --side-muted:#93a89d;
  --side-brand:#0d241b; --side-hover-bg:var(--accent-soft); --side-hover-ink:#0d8a4f;
  --side-card-bg:#f2f8f4; --side-card-line:#e6efe9; --side-card-ink:#0d241b;
  --accent:#12a45f; --accent-2:#1cc275; --accent-soft:rgba(18,164,95,.12); --accent-soft2:#bde9d1;
  --app-bg:#eef3f0; --app-card:#ffffff; --app-line:#e1ebe6; --app-muted:#3a5248;
  --sidew:264px; --sidew-mini:84px;
}
/* ===== MODE GELAP — hitam pekat + emerald menyala ===== */
[data-theme="dark"]{
  --bg:#0a0f0c; --bg-2:#0d1512;
  --card:#111814; --card-2:#16211b;
  --ink:#e9f3ed; --ink-soft:#b3c8bd; --ink-faint:#7d9489;
  --line:#20302a;
  --purple:#16a34a; --purple-2:#22c55e; --purple-soft:#0f2419;
  --pink:#e76f8a; --pink-soft:#2d1a22;
  --amber:#f59e0b; --amber-soft:#2a1f08;
  --blue:#38bdf8; --blue-soft:#0c2733;
  --green:#34d17d; --green-soft:#0f2a1c;
  --red:#f4676c; --red-soft:#2a1414;
  --bg-soft:#0a0f0c; --text-dim:#b3c8bd; --yellow:#fbbf24;
  --shadow:0 10px 30px rgba(0,0,0,.6);
  --shadow-sm:0 4px 14px rgba(0,0,0,.5);
  --side:#070d0a; --side-2:#040806; --side-edge:#16281d;
  --side-ink:#c8dacf; --side-muted:#89a396;
  --side-brand:#ffffff; --side-hover-bg:rgba(255,255,255,.06); --side-hover-ink:#ffffff;
  --side-card-bg:rgba(255,255,255,.05); --side-card-line:rgba(255,255,255,.08); --side-card-ink:#ffffff;
  --accent:#1eb866; --accent-2:#2ad178; --accent-soft:rgba(34,197,94,.22); --accent-soft2:#123524;
  --app-bg:#0a0f0c; --app-card:#111814; --app-line:#20302a; --app-muted:#b3c8bd;
}
/* Toggle ikon: tampilkan matahari di mode gelap, bulan di mode terang */
[data-theme="dark"] .theme-ico-sun{ display:inline; }
[data-theme="dark"] .theme-ico-moon{ display:none; }
[data-theme="light"] .theme-ico-sun{ display:none; }
[data-theme="light"] .theme-ico-moon{ display:inline; }
.theme-ico-sun{ display:none; } .theme-ico-moon{ display:inline; } /* default light */

*{box-sizing:border-box;margin:0;padding:0;}
html,body{ max-width:100%; overflow-x:hidden; }
html{scroll-behavior:smooth;}
body{
  font-family:var(--font); color:var(--ink); line-height:1.6;
  background:var(--app-bg); min-height:100vh;
  -webkit-font-smoothing:antialiased; padding:0;
}
::selection{background:rgba(18,164,95,.25);}

/* ---------- App shell (layout flush ala dashboard) ---------- */
.layout{ display:flex; min-height:100vh; }

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidew); position:fixed; top:0; left:0; bottom:0; z-index:30;
  background:linear-gradient(180deg,var(--side),var(--side-2));
  color:var(--side-ink); display:flex; flex-direction:column;
  border-right:1px solid var(--side-edge); overflow-y:auto;
  transition:width .24s cubic-bezier(.4,0,.2,1), transform .24s cubic-bezier(.4,0,.2,1);
}
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:var(--side-edge); border-radius:3px; }
.sidebar .brand{ display:flex; align-items:center; gap:13px; padding:20px 18px; color:var(--side-brand); white-space:nowrap;
  text-decoration:none; transition:opacity .15s; }
.sidebar .brand:hover{ opacity:.85; }
.appbar-brand{ text-decoration:none; color:inherit; }
.sidebar .brand-ico{ width:44px; height:44px; min-width:44px; border-radius:13px; overflow:hidden;
  background:#fff; border:1px solid var(--side-edge); box-shadow:0 6px 16px rgba(15,90,58,.15); display:flex; align-items:center; justify-content:center; }
.sidebar .brand-ico img{ width:100%; height:100%; object-fit:cover; }
.sidebar .brand-text{ font-size:1.16rem; font-weight:800; line-height:1.15; }
.sidebar .brand-text small{ display:block; font-size:.66rem; font-weight:500; color:var(--side-muted); margin-top:2px; }
.sidebar nav{ flex:1; padding:8px 12px 16px; }
.sidebar nav .label{ font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--side-muted); padding:14px 12px 6px; white-space:nowrap; }
.sidebar nav a{ display:flex; align-items:center; gap:13px; padding:11px 13px; margin:2px 0; border-radius:12px;
  color:var(--side-ink); text-decoration:none; font-size:.9rem; font-weight:600; transition:background .15s,color .15s; }
.sidebar nav a:hover{ background:var(--side-hover-bg); color:var(--side-hover-ink); }
.sidebar nav a.active{ color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 20px rgba(18,164,95,.30); }
.sidebar nav a.active:hover{ color:#fff; }
.sidebar nav a .ico{ width:24px; min-width:24px; height:24px; display:flex; align-items:center; justify-content:center; }
.sidebar nav a .ico svg{ width:20px; height:20px; display:block; }
.sidebar nav a .txt{ overflow:hidden; text-overflow:ellipsis; flex:1; }
.nav-badge{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; font-size:.68rem; font-weight:800;
  background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.layout.collapsed .sidebar nav a .nav-badge{ position:absolute; top:6px; right:8px; min-width:16px; height:16px; font-size:.6rem; }
.layout.collapsed .sidebar nav a{ position:relative; }
.sidebar-foot{ padding:12px; margin-top:auto; border-top:1px solid var(--side-edge); }
.token-card{ background:var(--side-card-bg); border:1px solid var(--side-card-line);
  border-radius:14px; padding:13px; text-align:center; }
.token-card .tk-row{ display:flex; align-items:center; justify-content:center; gap:7px; font-weight:800; font-size:.86rem; color:var(--side-card-ink); }
.token-card .tk-sub{ font-size:.68rem; color:var(--side-muted); margin:4px 0 10px; line-height:1.4; }
.token-card .tk-link{ display:inline-block; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
  text-decoration:none; font-weight:700; font-size:.76rem; padding:7px 16px; border-radius:999px; }
.token-card.warn{ border-color:rgba(245,191,66,.4); }
.token-card.off{ border-color:rgba(255,120,120,.4); }

/* ---------- Main + appbar ---------- */
.main{ flex:1; min-width:0; margin-left:var(--sidew); display:flex; flex-direction:column;
  min-height:100vh; background:var(--app-bg); transition:margin-left .24s cubic-bezier(.4,0,.2,1); }
.appbar{ position:sticky; top:0; z-index:20; min-height:64px; background:var(--app-card);
  display:flex; align-items:center; gap:14px; padding:10px 22px;
  box-shadow:0 1px 0 var(--app-line),0 4px 16px rgba(16,24,40,.04); }
.menu-toggle{ width:42px; height:42px; border:none; cursor:pointer; border-radius:11px;
  background:var(--app-bg); color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
  transition:background .15s,color .15s; }
.menu-toggle:hover{ background:var(--accent); color:#fff; }
.menu-toggle svg{ width:21px; height:21px; }
.appbar-brand{ display:none; align-items:center; gap:10px; font-weight:800; color:var(--ink); }
.appbar-brand img{ width:30px; height:30px; border-radius:8px; object-fit:cover; }
.appbar-search{ position:relative; margin-left:4px; }
.appbar-search .as-ico{ position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:var(--app-muted); display:flex; pointer-events:none; }
.appbar-search .as-ico svg{ width:17px; height:17px; }
.appbar-search input{ width:230px; padding:10px 14px 10px 40px; border:1px solid var(--app-line);
  border-radius:11px; font-size:.86rem; font-family:inherit; background:var(--app-bg); color:var(--ink); transition:.15s; }
.appbar-search input::placeholder{ color:var(--app-muted); }
.appbar-search input:focus{ outline:none; width:280px; background:var(--app-card);
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
@media(max-width:760px){ .appbar-search{ display:none; } }
.appbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
/* Tombol dark/light mode — ikon SVG bergaya */
.theme-toggle{ width:42px; height:42px; border:none; cursor:pointer; border-radius:12px;
  background:var(--card-2); display:flex; align-items:center; justify-content:center;
  transition:background .18s, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .18s; }
.theme-toggle:hover{ transform:rotate(-18deg) scale(1.08); }
/* Mode terang → bulan sabit hijau dengan glow lembut */
.theme-toggle .theme-ico-moon{ color:var(--accent);
  filter:drop-shadow(0 2px 5px rgba(18,164,95,.35)); animation:moonFloat 4s ease-in-out infinite; }
.theme-toggle:hover{ background:var(--accent-soft); box-shadow:0 4px 14px rgba(18,164,95,.22); }
.tm-star{ opacity:.85; animation:starTwinkle 2.4s ease-in-out infinite; }
.tm-star-2{ animation-delay:1.2s; }
@keyframes moonFloat{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-1.5px) rotate(-6deg); } }
@keyframes starTwinkle{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
/* Mode gelap → matahari kuning menyala */
[data-theme="dark"] .theme-toggle{ background:var(--card-2); }
[data-theme="dark"] .theme-toggle .theme-ico-sun{ color:#fbbf24;
  filter:drop-shadow(0 2px 6px rgba(251,191,36,.4)); animation:sunSpin 14s linear infinite; }
[data-theme="dark"] .theme-toggle:hover{ background:rgba(251,191,36,.14); box-shadow:0 4px 14px rgba(251,191,36,.2); }
@keyframes sunSpin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
.tk-pill{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:999px;
  font-size:.8rem; font-weight:700; background:var(--app-bg); color:var(--ink-soft); }
.tk-pill.ok{ background:var(--green-soft); color:#1f9d63; }
.tk-pill.warn{ background:var(--amber-soft); color:#b9821f; }
.tk-pill.off{ background:var(--red-soft); color:#d35563; }
.page-body{ flex:1; min-width:0; padding:14px 18px; display:flex; flex-direction:column; gap:12px; }

/* ---------- Sidebar collapsed (icon-only) ---------- */
.layout.collapsed .sidebar{ width:var(--sidew-mini); }
.layout.collapsed .main{ margin-left:var(--sidew-mini); }
.layout.collapsed .sidebar .brand{ justify-content:center; padding:20px 0; }
.layout.collapsed .sidebar .brand-text{ display:none; }
.layout.collapsed .sidebar nav{ padding:6px 0 16px; }
.layout.collapsed .sidebar nav .label{ display:none; }
.layout.collapsed .sidebar nav a{ justify-content:center; padding:0; margin:8px auto; width:52px; height:52px; gap:0; border-radius:15px; }
.layout.collapsed .sidebar nav a .txt{ display:none; }
.layout.collapsed .sidebar-foot{ padding:10px 8px; }
.layout.collapsed .token-card{ padding:10px 6px; }
.layout.collapsed .token-card .tk-sub, .layout.collapsed .token-card .tk-link{ display:none; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.topbar h1{ font-size:1.5rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.tb-head{ display:flex; flex-direction:column; gap:2px; }
.tb-sub{ font-size:.82rem; color:var(--ink-soft); margin:0; }
.topbar .tools{ display:flex; align-items:center; gap:10px; }
.t-badge{ background:#fff; border-radius:999px; padding:8px 14px; font-size:.78rem; font-weight:700;
  box-shadow:var(--shadow-sm); display:inline-flex; align-items:center; gap:7px; color:var(--ink-soft); }
.t-avatar{ width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--purple-2),var(--purple));
  color:#fff; font-weight:800; display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); font-size:.85rem; overflow:hidden;}
.t-avatar img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Welcome banner ---------- */
.welcome{
  background:linear-gradient(120deg,#c9ead9,#b3e2cc); border-radius:var(--radius);
  padding:26px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.welcome h2{ font-size:1.5rem; font-weight:800; color:#0d3d29; margin-bottom:6px; }
.welcome p{ color:#2f5a48; font-size:.92rem; margin-bottom:16px; max-width:420px; }
.welcome img{ width:clamp(90px,14vw,140px); height:auto; filter:drop-shadow(0 12px 24px rgba(15,90,58,.35)); }
.btn{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--purple-2),var(--purple));
  color:#fff; text-decoration:none; font-weight:700; font-size:.9rem; padding:12px 22px; border-radius:999px;
  border:none; cursor:pointer; box-shadow:0 8px 18px rgba(15,76,58,.30); transition:transform .08s,filter .15s; }
.btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.btn-ghost{ background:#fff; color:var(--purple); box-shadow:var(--shadow-sm); }

/* ---------- Stat cards ---------- */
.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:760px){ .stats-row{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:420px){ .stats-row{ grid-template-columns:1fr; } }
.stat-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; box-shadow:var(--shadow-sm); }
/* Kotak ikon — tint dari warna aksennya, terlihat jelas di mode terang & gelap */
.stat-card .ic{ width:46px; height:46px; border-radius:14px; display:inline-flex; align-items:center;
  justify-content:center; font-size:1.35rem; margin-bottom:12px; }
.stat-card.p .ic{ background:color-mix(in srgb, var(--purple-2) 20%, transparent); }
.stat-card.k .ic{ background:color-mix(in srgb, var(--pink)    22%, transparent); }
.stat-card.a .ic{ background:color-mix(in srgb, var(--amber)   22%, transparent); }
.stat-card.b .ic{ background:color-mix(in srgb, var(--blue)    22%, transparent); }
.stat-card .lbl{ font-size:.8rem; color:var(--ink-soft); font-weight:600; }
.stat-card .val{ font-size:1.6rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; margin-top:2px; }
.stat-card .sub{ font-size:.74rem; color:var(--green); font-weight:700; margin-top:3px; }
.stat-card .sub.down{ color:var(--red); }

/* ---------- Chart card (dashboard) ---------- */
.chart-card{ background:var(--app-card); border:1px solid var(--app-line); border-radius:var(--radius-sm);
  padding:12px 14px; box-shadow:var(--shadow-sm); }
.chart-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.chart-head h3{ font-size:1.05rem; font-weight:800; color:var(--ink); }
.chart-sub{ font-size:.78rem; color:var(--ink-soft); margin-top:2px; }
.chart-legend{ display:flex; gap:14px; font-size:.78rem; color:var(--ink-soft); font-weight:600; }
.chart-legend .lg{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.chart-legend .lg-total{ background:var(--accent-soft2); }
.chart-legend .lg-buy{ background:var(--accent); }
.chart-svg{ width:100%; height:auto; display:block; }
.chart-base{ stroke:var(--app-line); stroke-width:1.5; }
.bar-total{ fill:var(--accent-soft2); }
.bar-buy{ fill:var(--acc
  ent); }
.bar-val{ fill:var(--ink-soft); font-size:13px; font-weight:700; }
.bar-lbl{ fill:var(--app-muted); font-size:12px; }
.chart-empty{ padding:34px; text-align:center; color:var(--ink-soft); font-size:.9rem; }

/* ---------- Toast (notif JS) ---------- */
.toast-wrap{ position:fixed; top:18px; right:18px; z-index:1000; display:flex; flex-direction:column; gap:10px; max-width:340px; }
.toast{ background:var(--app-card); color:var(--ink); border:1px solid var(--app-line); border-left:4px solid var(--accent);
  border-radius:12px; padding:13px 16px; font-size:.86rem; font-weight:600; box-shadow:0 12px 30px rgba(15,76,58,.18);
  opacity:0; transform:translateX(20px); transition:opacity .28s,transform .28s; }
.toast.show{ opacity:1; transform:translateX(0); }
.toast-warn{ border-left-color:var(--amber); }
.toast-error{ border-left-color:var(--red); }
.toast-success{ border-left-color:var(--green); }
@media(max-width:560px){ .toast-wrap{ left:12px; right:12px; max-width:none; } }
.stat-card .sub.muted{ color:var(--ink-faint); }

/* ---------- Panels ---------- */
.panel{ background:var(--card); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow-sm); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.panel-head h3{ font-size:1.05rem; font-weight:800; color:var(--ink); }
.panel-head .see{ font-size:.78rem; color:var(--purple); text-decoration:none; font-weight:700; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:760px){ .grid-2{ grid-template-columns:1fr; } }

/* form */
label{ display:block; font-size:.74rem; color:var(--ink-soft); margin-bottom:8px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
textarea,select,input[type=text],input[type=password]{
  width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:14px;
  color:var(--ink); padding:13px 14px; font-size:.9rem; outline:none; transition:border .15s,box-shadow .15s; font-family:var(--font);
}
textarea{ font-family:var(--mono); resize:vertical; min-height:80px; line-height:1.6; }
textarea:focus,select:focus,input:focus{ border-color:var(--purple-2); box-shadow:0 0 0 4px rgba(18,164,95,.15); }
select{ width:auto; cursor:pointer; }
.btn-row{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.hint{ font-size:.78rem; color:var(--ink-faint); margin-top:10px; }
.note-outside{ margin:12px 2px 0; display:flex; align-items:center; gap:7px; }
.note-outside::before{ content:"ℹ️"; font-size:.85rem; }

/* ---------- Formula library ---------- */
.flist{ display:flex; flex-direction:column; gap:12px; }
.fitem{ background:var(--card); border:1px solid var(--app-line); border-radius:var(--radius-sm); padding:16px 18px; box-shadow:var(--shadow-sm); }
.fhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
/* Filter mode formula */
.fm-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.fm-filter{ display:inline-flex; align-items:center; gap:7px; padding:7px 16px; border-radius:999px;
  font-size:.82rem; font-weight:700; background:var(--card); border:1px solid var(--line);
  color:var(--ink-soft); text-decoration:none; transition:.15s; }
.fm-filter:hover{ border-color:var(--accent); color:var(--accent); }
.fm-filter.active{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
  border-color:transparent; box-shadow:0 4px 12px var(--accent-soft); }
.fm-badge{ display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:999px; font-size:.7rem; font-weight:800;
  background:rgba(255,255,255,.25); color:inherit; }
.fm-filter:not(.active) .fm-badge{ background:var(--card-2); color:var(--ink-faint); }

.fname{ font-weight:800; color:var(--ink); font-size:1rem; display:flex; align-items:center; gap:8px; }
.fmode{ font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:2px 9px; border-radius:999px; }
.fmode.scalping{ background:var(--blue-soft); color:#3a86d4; }
.fmode.swing{ background:var(--green-soft); color:#1f9d6b; }
.fmode.broker-flow{ background:var(--amber-soft); color:#b9821f; }
.fbtns{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fcode{ font-family:var(--mono); font-size:.82rem; color:var(--ink-soft); background:var(--bg-2); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; white-space:pre-wrap; word-break:break-word; line-height:1.55; margin:0; }
.btn-sm{ padding:8px 13px; font-size:.8rem; box-shadow:none; }
.btn-icon{ padding:8px; width:34px; justify-content:center; }
.btn-danger{ color:var(--red); }
.btn-danger:hover{ background:var(--red-soft); }
.fname-row{ display:flex; align-items:baseline; gap:10px; margin-bottom:4px; }
.fname-main{ font-weight:800; color:var(--ink); font-size:.95rem; }
.fname-sub{ font-size:.76rem; color:var(--ink-faint); }
.fm-row2{ display:flex; gap:12px; margin-top:14px; align-items:flex-end; flex-wrap:wrap; }
.fcell{ max-width:620px; font-family:var(--mono); font-size:.8rem; color:var(--ink-soft); white-space:pre-wrap; word-break:break-word; line-height:1.55; }
.table-card .fbtns{ flex-wrap:nowrap; }
.page-toolbar{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.form-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }

/* ---------- Modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(10,30,24,.55); display:none; align-items:flex-start; justify-content:center; padding:48px 16px; z-index:9999; overflow-y:auto; pointer-events:auto; }
.modal-overlay.open{ display:flex; }
.modal{ background:var(--app-card); border-radius:18px; width:100%; max-width:560px; box-shadow:0 24px 60px rgba(10,40,30,.32); overflow:hidden; animation:modalin .18s ease; }
@keyframes modalin{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--app-line); }
.modal-head h3{ font-size:1.1rem; font-weight:800; color:var(--ink); }
.modal-x{ background:none; border:none; font-size:1.5rem; line-height:1; cursor:pointer; color:var(--ink-soft); width:34px; height:34px; border-radius:9px; }
.modal-x:hover{ background:var(--bg-2); color:var(--ink); }
.modal-body{ padding:20px; }

/* alerts */
.alert{ padding:13px 16px; border-radius:14px; font-size:.88rem; margin-bottom:14px; }
.alert-success{ background:var(--green-soft); color:#1f8a5f; }
.alert-error{ background:var(--red-soft); color:#c0414c; }
.alert-info{ background:var(--blue-soft); color:#3a6ea5; }

/* status chips */
.acc{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 16px; border-radius:14px; font-size:.84rem; margin-bottom:12px; flex-wrap:wrap; }
.acc strong{ font-weight:800; }
.acc-note{ font-size:.76rem; opacity:.85; }
.acc-ok{ background:var(--green-soft); color:#1f8a5f; }
.acc-trial{ background:var(--blue-soft); color:#3a6ea5; }
.acc-bad{ background:var(--red-soft); color:#c0414c; }
.chip{ display:inline-block; background:var(--purple-soft); color:var(--purple); font-weight:700; font-size:.78rem; padding:6px 12px; border-radius:999px; text-decoration:none; }

/* ---------- Tables ---------- */
table{ width:100%; border-collapse:collapse; font-size:.86rem; }
th{ text-align:left; padding:10px 12px; color:var(--ink-faint); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; border-bottom:2px solid var(--line); white-space:nowrap; }
td{ padding:12px; border-bottom:1px solid var(--line); white-space:nowrap; color:var(--ink-soft); }
tr:last-child td{ border-bottom:none; }
tbody tr{ transition:background .12s; }
tbody tr:hover td{ background:var(--bg-2); }
.code{ font-weight:800; color:var(--ink); }
.muted{ color:var(--ink-faint); }
.up,.pos{ color:#1f9d6b; font-weight:700; } .down,.neg{ color:#e0566a; font-weight:700; }

/* badges / pills */
.pill,.badge{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:.74rem; font-weight:700; }
.cl,.clb{ padding:3px 11px; border-radius:10px; font-weight:800; font-size:.8rem; }
.cl-a,.bias-down,.pill.red,.pill-red{ background:var(--red-soft); color:#d65462; }
.cl-b,.pill.yellow,.pill-yellow,.bias-flat{ background:var(--amber-soft); color:#c8902f; }
.cl-c,.pill.green,.pill-green,.bias-up{ background:var(--green-soft); color:#1f9d6b; }
.cl-d,.pill.blue,.pill-blue{ background:var(--blue-soft); color:#3a86d4; }
.pill-total{ background:var(--card); color:var(--ink-soft); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
/* Ikon SVG inline berlabel (Lucide) + dot status berwarna — pengganti emoji. */
.ico-inline{ display:inline-flex; align-items:center; gap:5px; vertical-align:middle; }
.ico-inline svg{ display:block; flex-shrink:0; }
.dot-g,.dot-r,.dot-y,.dot-b,.dot-n{ width:9px; height:9px; border-radius:50%; display:inline-block; vertical-align:middle; flex-shrink:0; }
.dot-g{ background:var(--green); } .dot-r{ background:var(--red); } .dot-y{ background:var(--amber); }
.dot-b{ background:var(--blue); } .dot-n{ background:var(--ink-faint); }
.tag{ font-family:var(--mono); font-weight:800; }
.tag.a{ color:#d65462;} .tag.b{ color:#c8902f;} .tag.c{ color:#1f9d6b;} .tag.d{ color:#3a86d4;}
.empty{ text-align:center; padding:48px 20px; color:var(--ink-faint); }

/* ---------- Page header (judul + subjudul tiap halaman) ---------- */
.wrap > h1{ font-size:1.6rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.2; }
.wrap > .sub{ color:var(--ink-soft); font-size:.9rem; margin:4px 0 10px; line-height:1.55; max-width:680px; }

/* ---------- Elegant table card ---------- */
.table-card{ padding:0; overflow:hidden; }
.table-scroll{ overflow-x:auto; }
.table-card thead th{ background:var(--purple-soft); color:var(--ink-soft); border-bottom:1px solid var(--line); }
.table-card th, .table-card td{ padding:9px 12px; }
.table-card td{ vertical-align:top; }
.table-card th:first-child, .table-card td:first-child{ padding-left:14px; }
.table-card th:last-child, .table-card td:last-child{ padding-right:14px; }
.table-card tbody tr:nth-child(even) td{ background:rgba(15,76,58,.022); }
.table-card tbody tr:hover td{ background:var(--purple-soft); }

/* ---------- DataTables 2.x — selaras tema emerald ---------- */
.table-card div.dt-container{ padding:10px 12px; font-size:.86rem; color:var(--ink-soft); }
.table-card div.dt-container .dt-layout-row{ align-items:center; row-gap:8px; column-gap:10px; margin:0 0 10px; }
.table-card div.dt-container .dt-layout-row:last-child{ margin:10px 0 0; }
.table-card div.dt-container .dt-layout-table{ overflow-x:auto; }
.table-card div.dt-container .dt-search label,
.table-card div.dt-container .dt-length label{ font-size:.8rem; color:var(--ink-soft); font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.table-card div.dt-container .dt-input{ background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:9px 13px; font-size:.84rem; color:var(--ink); font-family:var(--font); box-shadow:var(--shadow-sm); }
.table-card div.dt-container .dt-search input{ min-width:210px; }
.table-card div.dt-container select.dt-input{ padding:9px 36px 9px 13px; cursor:pointer; -webkit-appearance:none; appearance:none;
  background:var(--card) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23728179" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') no-repeat right 13px center; }
.table-card div.dt-container .dt-input:focus{ outline:none; border-color:var(--purple-2); box-shadow:0 0 0 3px var(--accent-soft); }
.table-card div.dt-container .dt-info{ color:var(--ink-faint); font-size:.8rem; }
.table-card div.dt-container table.dataTable{ width:100% !important; margin:0; border-collapse:collapse; }
.table-card div.dt-container table.dataTable thead>tr>th{ background:var(--purple-soft); color:var(--ink-soft);
  border-bottom:1px solid var(--line); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; }
.table-card div.dt-container .dt-paging .dt-paging-button{ min-width:34px; padding:.5em .9em !important; margin-left:4px !important;
  border-radius:9px !important; border:1px solid var(--line) !important; background:var(--card) !important;
  color:var(--ink-soft) !important; font-weight:700; }
.table-card div.dt-container .dt-paging .dt-paging-button:hover{ background:var(--purple-soft) !important; color:var(--purple) !important; border-color:var(--line) !important; }
.table-card div.dt-container .dt-paging .dt-paging-button.current,
.table-card div.dt-container .dt-paging .dt-paging-button.current:hover{ background:var(--accent) !important; color:#fff !important; border-color:transparent !important; }
.table-card div.dt-container .dt-paging .dt-paging-button.disabled{ opacity:.42; color:var(--ink-faint) !important; }
.table-card div.dt-container td.col-no, .table-card div.dt-container th.col-no{ width:42px; text-align:center; color:var(--ink-faint); font-weight:700; }

/* signal list (recent) */
.siglist{ display:flex; flex-direction:column; gap:8px; }
.sigitem{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:14px; background:var(--bg-2); }
.sigitem .av{ width:38px; height:38px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.78rem; flex-shrink:0; }
.sigitem .nm{ flex:1; min-width:0; }
.sigitem .nm .c{ font-weight:800; color:var(--ink); }
.sigitem .nm .s{ font-size:.74rem; color:var(--ink-faint); }
.sigitem .pr{ text-align:right; font-weight:700; font-size:.86rem; }

/* cluster mini donut legend */
.legend{ display:flex; flex-direction:column; gap:8px; }
.legend .row{ display:flex; align-items:center; gap:10px; font-size:.84rem; }
.legend .dot{ width:11px; height:11px; border-radius:50%; }
.legend .v{ margin-left:auto; font-weight:800; color:var(--ink); }

/* stat (key:val) inline */
.stats{ display:flex; gap:20px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.stat{ font-size:.82rem; }
.stat .k{ color:var(--ink-faint); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:2px; }
.stat .v{ color:var(--ink); font-weight:700; }

/* stock cards (Scalping) */
.stock{ background:var(--bg-2); border-radius:var(--radius-sm); padding:16px 18px; margin-bottom:10px; }
.stock-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.stock-code{ font-size:1.2rem; font-weight:800; color:var(--ink); }
.stock-price{ font-weight:700; }
.chg{ font-size:.78rem; font-weight:800; padding:3px 10px; border-radius:999px; }
.chg.up{ background:var(--green-soft); color:#1f9d6b;} .chg.down{ background:var(--red-soft); color:#d65462; }
.signal-pill{ margin-left:auto; font-weight:800; font-size:.8rem; padding:6px 13px; border-radius:11px; }
.sp-a{ background:var(--red-soft); color:#d65462;} .sp-b{ background:var(--amber-soft); color:#c8902f; }
.sp-c{ background:var(--green-soft); color:#1f9d6b;} .sp-d{ background:var(--blue-soft); color:#3a86d4; }
.sp-none{ background:var(--purple-soft); color:var(--ink-faint); }
.rangebar-wrap{ margin:14px 0 6px; }
.rangebar{ position:relative; height:30px; border-radius:10px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr 1fr 1fr; }
.rb-d{ background:#cfe3fb;} .rb-c{ background:#cdeede;} .rb-b{ background:#fdeccb;} .rb-a{ background:#fdd6db; }
.rb-seg-label{ font-size:.62rem; font-weight:800; color:rgba(60,50,90,.45); text-align:center; line-height:30px; }
.rb-marker{ position:absolute; top:-3px; width:3px; height:36px; background:var(--ink); border-radius:2px; }
.rb-marker::after{ content:'▼'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); color:var(--ink); font-size:.58rem; }
.rangebar-axis{ display:flex; justify-content:space-between; font-size:.7rem; color:var(--ink-faint); margin-top:6px; font-family:var(--mono); }
.no-cluster{ font-size:.8rem; color:var(--ink-faint); margin:10px 0 2px; padding:9px 12px; background:var(--purple-soft); border-radius:12px; }

/* ---------- Kartu hasil screener — ramah dibaca (besar & jelas) ---------- */
.scard{ background:var(--card); border:1px solid var(--app-line); border-left-width:5px; border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); margin-bottom:8px; overflow:hidden; }
.scard.v-buy{ border-left-color:#2bb07a; } .scard.v-wait{ border-left-color:#e0a73c; }
.scard.v-avoid{ border-left-color:#df5f6b; } .scard.v-na{ border-left-color:var(--app-line); }
.scard.v-watch{ border-left-color:#3a86d4; }   /* PANTAU — biru */
.scard.v-warn{ border-left-color:#e05c20; }     /* WASPADA — oranye */
.scard .shead{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; flex-wrap:wrap; }
/* Kartu identitas emiten: ikon + kode + nama + harga */
.em-datebar{ text-align:right; font-size:.76rem; color:var(--ink-faint); font-weight:600;
  font-variant-numeric:tabular-nums; margin:8px 2px 0; }
/* Baris: banner corp action (kiri) + tanggal (kanan) sejajar */
.em-topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:8px 2px 0; }
.em-topbar .em-topbar-l{ min-width:0; }
.em-topbar .corp-note{ margin-top:0; }
.stitle{ display:flex; align-items:center; gap:13px; min-width:0; }
.stitle-ico{ width:48px; height:48px; min-width:48px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; font-size:1.5rem; font-weight:900; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 6px 16px var(--accent-soft); }
.stitle-info{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.stitle-top{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.stitle-code{ font-size:1.5rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; line-height:1; }
.stitle-name{ font-size:.78rem; color:var(--ink-faint); font-weight:500; }
.stitle-info .sprice{ margin-top:0; font-size:1.2rem; font-weight:800; color:var(--ink); }
/* Nama perusahaan (kepanjangan emiten) */
.sname{ font-size:.72rem; color:var(--ink-faint); font-weight:500; margin-top:1px; line-height:1.3; max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ob-sname{ font-size:.72rem; color:var(--side-muted); font-weight:500; margin-top:1px; }
.scard .scode{ font-size:1.7rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1; }
.scard .sprice{ font-size:1.1rem; font-weight:700; color:var(--ink-soft); margin-top:0; }
.schg{ font-weight:800; font-size:.92rem; padding:2px 10px; border-radius:999px; margin-left:8px; }
.schg.up{ background:var(--green-soft); color:#1f9d6b; } .schg.down{ background:var(--red-soft); color:#d65462; }
.sverdict{ display:flex; align-items:center; gap:12px; padding:11px 16px; border-radius:14px; }
.sverdict .sv-emoji{ font-size:1.7rem; line-height:1; }
.sverdict .sv-aksi{ display:block; font-size:1.3rem; font-weight:900; line-height:1.05; }
.sverdict .sv-desc{ display:block; font-size:.76rem; font-weight:600; opacity:.85; margin-top:2px; }
.v-buy .sverdict{ background:var(--green-soft); color:#178a5c; }
.v-wait .sverdict{ background:var(--amber-soft); color:#b9821f; }
.v-avoid .sverdict{ background:var(--red-soft); color:#d35563; }
.v-na .sverdict{ background:var(--bg-2); color:var(--ink-soft); }
.v-watch .sverdict{ background:var(--blue-soft); color:#2c6cb0; }   /* PANTAU */
.v-warn .sverdict{ background:#fff0e8; color:#c04a10; }              /* WASPADA */
[data-theme="dark"] .v-warn .sverdict{ background:#2a1408; color:#f07030; }
/* bar posisi harga (termurah → tertinggi) */
.sbar-wrap{ padding:2px 14px 10px; }
.sbar-label{ font-size:.82rem; color:var(--ink-soft); font-weight:600; margin-bottom:8px; }
.sbar{ position:relative; height:12px; border-radius:999px; background:linear-gradient(90deg,#bfe6d3,#fbe6bd,#f8c9cf); }
.sbar-dot{ position:absolute; top:50%; width:20px; height:20px; border-radius:50%; background:#fff;
  border:3px solid var(--ink); transform:translate(-50%,-50%); box-shadow:0 2px 6px rgba(0,0,0,.22); }
.sbar-axis{ display:flex; justify-content:space-between; font-size:.76rem; color:var(--ink-faint); font-weight:600; margin-top:8px; }
/* baris info utama */
.srows{ padding:0 18px; }
.srow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-top:1px solid var(--line); }
.srow .sk{ font-size:.95rem; color:var(--ink-soft); font-weight:600; }
.srow .sv{ font-size:1.05rem; font-weight:800; color:var(--ink); text-align:right; }
.srow .sv.up{ color:#1f9d6b; } .srow .sv.down{ color:#d65462; }
.srow .sv .pct{ font-size:.82rem; font-weight:700; opacity:.8; }
/* bandar */
/* --- 4 mini stat box --- */
.sinfo{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:10px 14px; border-top:1px solid var(--line); }
@media(max-width:640px){ .sinfo{ grid-template-columns:repeat(2,1fr); } }
.sinfo-box{ background:var(--app-bg); border:1px solid var(--app-line); border-radius:12px; padding:8px 10px; }
.sib-ico{ font-size:1.2rem; line-height:1; margin-bottom:6px; }
.sib-lbl{ font-size:.72rem; color:var(--ink-faint); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.sib-val{ font-size:.98rem; font-weight:800; color:var(--ink); margin-top:4px; }
.sib-val.muted{ color:var(--ink-soft); }
.sib-sub{ font-size:.76rem; font-weight:700; margin-top:2px; }
/* Volume di bawah Market Activity — chip beraksen biar menonjol & beda dari sub lain */
.sib-vol{ display:inline-flex; align-items:center; gap:4px; margin-top:1px; padding:2px 8px; border-radius:7px;
  font-size:.72rem; font-weight:800; color:var(--accent); background:var(--accent-soft);
  border:1px solid rgba(18,164,95,.22); font-variant-numeric:tabular-nums; letter-spacing:.01em; }

/* --- Header Order Book (judul pill + konteks harga, gaya kartu polos spt Screener) --- */
.ob-header{ margin-bottom:12px; }
.ob-header-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.ob-title{ font-size:1.08rem; font-weight:800; display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap; color:var(--ink); }
.ob-title-lvl{ font-size:.78rem; font-weight:700; color:var(--ink-faint); }
.ob-ratio{ font-size:.78rem; font-weight:800; padding:5px 13px; border-radius:999px;
  background:var(--card-2); border:1px solid var(--line); color:var(--ink-soft); }
.ob-ratio.up{ color:var(--green); } .ob-ratio.down{ color:var(--red); }
.ob-seeall{ background:var(--card-2); border:1px solid var(--line); color:var(--ink-soft);
  font-weight:700; font-size:.8rem; padding:7px 18px; border-radius:999px; cursor:pointer; transition:border-color .15s,color .15s; }
.ob-seeall:hover{ border-color:var(--accent); color:var(--accent); }
.ob-ctx{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ctx-box{ background:var(--card-2); border:1px solid var(--line); border-radius:11px;
  padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ctx-l{ font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); white-space:nowrap; }
.ctx-v{ font-size:.86rem; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; color:var(--ink); }
@media(max-width:420px){ .ctx-box{ flex-direction:column; align-items:flex-start; gap:2px; } .ctx-v{ text-align:left; } }

/* --- Zona Cluster ladder (emiten + screener) --- */
.czone-notice{ padding:7px 14px; background:var(--amber-soft); color:var(--yellow);
  font-size:.78rem; font-weight:600; border-top:1px solid var(--line); }
.czone-wrap{ border-top:1px solid var(--line); padding:14px 18px 16px; }
.czone-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.czone-title{ font-size:.92rem; font-weight:800; color:var(--ink); }
.czone-basis{ font-size:.74rem; color:var(--ink-faint); font-weight:700; font-variant-numeric:tabular-nums; }
/* Judul section — chip lembut beraksen warna + ikon; tiap section warna beda biar jelas & tak kaku.
   Ikon disuntik via ::before agar markup bersih. Tint pakai rgba → aman di light & dark. */
.sec-pill{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px 7px 11px; border-radius:11px;
  font-size:.76rem; font-weight:800; letter-spacing:.02em; line-height:1; text-transform:uppercase;
  border:1px solid transparent; }
.sec-pill::before{ font-size:.95rem; line-height:1; }
.sec-pill-cluster{ background:rgba(18,164,95,.14);  color:var(--green); border-color:rgba(18,164,95,.22); }
.sec-pill-cluster::before{ content:'🎯'; }
.sec-pill-ob{      background:rgba(37,99,235,.13);  color:#3b82f6; border-color:rgba(37,99,235,.22); }
.sec-pill-ob::before{ content:'📖'; }
.sec-pill-broker{  background:rgba(139,92,246,.15); color:#8b5cf6; border-color:rgba(139,92,246,.24); }
.sec-pill-broker::before{ content:'🏦'; }
.sec-pill-tb{      background:rgba(20,184,166,.15); color:#14b8a6; border-color:rgba(20,184,166,.26); }
.sec-pill-tb::before{ content:'🧾'; }
.sec-pill-zone{    background:rgba(217,119,6,.16);  color:#e0982e; border-color:rgba(217,119,6,.26); }
.sec-pill-zone::before{ content:'📊'; }
.sec-pill-rt{      background:rgba(236,72,153,.14); color:#ec4899; border-color:rgba(236,72,153,.24); }
.sec-pill-rt::before{ content:'📺'; }
.czones{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; }
@media(max-width:520px){ .czones{ grid-template-columns:1fr; gap:7px; } }
.czone{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); background:var(--card-2); position:relative; transition:.15s; }
.cz-badge{ width:30px; height:30px; min-width:30px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:.98rem; color:#fff; }
.cz-meta{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.cz-act{ font-size:.74rem; font-weight:700; color:var(--ink-soft); }
.cz-rng{ font-size:.98rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.cz-mid{ font-size:.72rem; font-weight:700; color:var(--ink-faint); margin-left:6px; font-variant-numeric:tabular-nums; }
.cz-here{ font-size:.7rem; font-weight:800; padding:5px 11px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:0 4px 10px var(--accent-soft); }
.cz-a{ border-left:4px solid var(--red); }    .cz-a .cz-badge{ background:var(--red); }
.cz-b{ border-left:4px solid var(--amber); }  .cz-b .cz-badge{ background:var(--amber); }
.cz-c{ border-left:4px solid var(--green); }  .cz-c .cz-badge{ background:var(--green); }
.cz-d{ border-left:4px solid var(--blue); }   .cz-d .cz-badge{ background:var(--blue); }
.czone.on{ box-shadow:0 0 0 2px var(--accent); }
.cz-a.on{ background:var(--red-soft); }   .cz-b.on{ background:var(--amber-soft); }
.cz-c.on{ background:var(--green-soft); } .cz-d.on{ background:var(--blue-soft); }

/* --- B.Avg / S.Avg bar --- */
.savg{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 18px; background:var(--app-bg); border-top:1px solid var(--line); }
.savg-lbl{ font-size:.82rem; color:var(--ink-soft); font-weight:600; }
.savg-vals{ display:flex; align-items:center; gap:10px; font-size:.95rem; font-weight:800; }
.savg-sep{ color:var(--ink-faint); }

/* --- Broker panels --- */
.sbroker{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); }
@media(max-width:560px){ .sbroker{ grid-template-columns:1fr; } }
.sbg{ padding:10px 14px 12px; }
.sbg:first-child{ border-right:1px solid var(--line); }
.sbg-buy .sbg-h{ color:#1f9d6b; } .sbg-sell .sbg-h{ color:#d65462; }
.sbg-h{ margin-bottom:10px; }
.sbg-title{ font-size:.92rem; font-weight:800; }
.bk-head{ display:grid; grid-template-columns:40px 1fr 1fr; gap:6px;
  font-size:.65rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-weight:700;
  padding-bottom:6px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.bk-head span:nth-child(2), .bk-head span:last-child{ text-align:right; }
.bk-row{ display:grid; grid-template-columns:40px 1fr 1fr; gap:6px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line); }
.bk-row:last-child{ border-bottom:none; }
.bk-c{ font-weight:800; color:var(--ink); font-size:.9rem; }
.bk-p{ color:var(--ink-soft); font-size:.88rem; text-align:right; font-variant-numeric:tabular-nums; }
.bk-v{ font-weight:700; color:var(--ink); font-size:.88rem; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Varian broker 4 kolom: kode · val · lot · avg (dipakai Orderbook & Screener) */
.bkr4 .bk-head, .bkr4 .bk-row{ grid-template-columns:32px 1fr 1fr 1fr; }
.bkr4 .bk-head span:nth-child(n+2){ text-align:right; }

/* --- Panel best bid/offer ringkas di kartu screener --- */
/* Tombol Pantau (tambah ke Alert) */
.btn-alert{ margin-top:8px; display:flex; width:100%; align-items:center; justify-content:center; gap:5px; cursor:pointer;
  font-size:.76rem; font-weight:800; padding:6px 13px; border-radius:999px; text-align:center;
  background:var(--accent-soft); color:var(--accent); border:1px solid transparent; transition:.15s; }
.btn-alert:hover{ background:var(--accent); color:#fff; }
.btn-alert.on{ background:var(--green-soft); color:var(--green); cursor:default; }
.btn-alert:disabled{ opacity:.9; }
/* Halaman Alert */
.alert-status{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
/* Toggle bentuk notifikasi Telegram: teks / gambar */
.fmt-toggle{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.fmt-toggle .fmt-lbl{ font-size:.8rem; color:var(--ink-faint); font-weight:600; }
.fmt-btn{ border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
  font-family:inherit; font-size:.82rem; font-weight:700; padding:6px 12px; border-radius:999px;
  cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.fmt-btn:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.fmt-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 3px 10px var(--accent-soft); }
.fmt-btn:disabled{ opacity:.45; cursor:not-allowed; }
.alert-code{ font-weight:800; font-size:1.05rem; color:var(--ink); }
a.scode-link:hover .alert-code{ color:var(--accent); }

/* Filter cluster — tab (round) dengan badge jumlah */
.cl-filter{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.cl-tab{ display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--card-2); color:var(--ink-soft); border:1px solid var(--line);
  border-radius:999px; font-size:.82rem; font-weight:700; padding:7px 15px; transition:.15s; }
.cl-tab:hover{ border-color:var(--accent); color:var(--accent); }
.cl-tab.active{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
  border-color:transparent; box-shadow:0 4px 12px var(--accent-soft); }
.cl-tab-n{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  padding:0 6px; border-radius:999px; font-size:.72rem; font-weight:800; font-variant-numeric:tabular-nums;
  background:var(--app-bg); color:var(--ink-soft); }
.cl-tab.active .cl-tab-n{ background:rgba(255,255,255,.28); color:#fff; }

/* Imbalance Bid vs Offer (screener card) */
.sob2{ margin:4px 14px 12px; }
.sob2-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:.82rem; margin-bottom:6px; }
.sob2-bid{ color:var(--green); font-weight:700; } .sob2-off{ color:var(--red); font-weight:700; }
.sob2-bid b, .sob2-off b{ color:var(--ink); font-weight:800; }
.sob2-spread{ font-size:.68rem; color:var(--ink-faint); font-weight:700; white-space:nowrap;
  background:var(--card-2); padding:3px 9px; border-radius:999px; }
.sob2-bar{ display:flex; height:26px; border-radius:9px; overflow:hidden; font-size:.72rem; font-weight:800;
  color:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.sob2-b{ background:linear-gradient(90deg,var(--green),#34c98a); display:flex; align-items:center; padding:0 9px; }
.sob2-o{ background:linear-gradient(90deg,#e56b78,var(--red)); display:flex; align-items:center; justify-content:flex-end; padding:0 9px; margin-left:auto; }
.sob2-lots{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:.72rem;
  color:var(--ink-soft); margin-top:6px; font-variant-numeric:tabular-nums; }
.sob2-lots .up{ color:var(--green); font-weight:800; } .sob2-lots .down{ color:var(--red); font-weight:800; }
/* Kode saham klik → Cek Emiten */
a.scode-link{ text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
a.scode-link:hover .scode{ color:var(--accent); }
.scode-arrow{ font-size:.9rem; color:var(--ink-faint); font-weight:700; transition:.15s; }
a.scode-link:hover .scode-arrow{ color:var(--accent); transform:translate(2px,-2px); }

.sbo{ display:grid; grid-template-columns:1fr auto 1fr; gap:6px; align-items:center; margin:4px 14px 10px; }
.sbo-side{ border-radius:10px; padding:8px 12px; display:flex; flex-direction:column; gap:1px; }
.sbo-side.bid{ background:var(--green-soft); }
.sbo-side.off{ background:var(--red-soft); text-align:right; }
.sbo-lbl{ font-size:.62rem; font-weight:800; letter-spacing:.04em; color:var(--ink-faint); }
.sbo-px{ font-size:1.05rem; font-weight:800; }
.sbo-side.bid .sbo-px{ color:var(--green); } .sbo-side.off .sbo-px{ color:var(--red); }
.sbo-lot{ font-size:.72rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.sbo-mid{ text-align:center; font-size:.68rem; font-weight:800; color:var(--ink-soft); padding:0 2px; line-height:1.3; }

/* --- 4 badge bawah --- */
.sbadge{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); }
@media(max-width:640px){ .sbadge{ grid-template-columns:repeat(2,1fr); } }
.sbadge-item{ display:flex; align-items:flex-start; gap:8px; padding:9px 12px; border-right:1px solid var(--line); }
.sbadge-item:last-child{ border-right:none; }
.sb-ico{ font-size:1.3rem; flex-shrink:0; margin-top:1px; }
.sb-t{ font-size:.8rem; font-weight:800; color:var(--ink); }
.sb-d{ font-size:.72rem; color:var(--ink-faint); margin-top:2px; line-height:1.4; }

/* ---------- Cek Emiten ---------- */
.em-search{ display:flex; gap:10px; align-items:center; }
.em-search input{ flex:1; font-size:1.1rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; border-radius:14px; padding:13px 16px; }
.em-search .btn{ white-space:nowrap; flex-shrink:0; }
.em-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.em-chip{ font-size:.8rem; padding:6px 13px; }
.em-chip.active{ background:var(--purple); color:#fff; }
.em-date{ font-size:.78rem; color:var(--ink-faint); font-weight:500; margin-left:10px; }
.shead-right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.btn-tg{ background:linear-gradient(135deg,#229ed9,#1a85b9); box-shadow:0 6px 16px rgba(34,158,217,.30); }
.btn-tg:hover{ filter:brightness(1.08); }
.em-empty{ text-align:center; padding:56px 20px; color:var(--ink-soft); }
.em-empty-ico{ font-size:3rem; margin-bottom:14px; }
.em-empty-t{ font-size:1.1rem; font-weight:800; color:var(--ink); margin-bottom:6px; }
.em-empty-d{ font-size:.9rem; color:var(--ink-faint); }

/* ---------- Panduan ---------- */
.guide-flow{ display:flex; flex-direction:column; gap:4px; }
.gf-step{ display:flex; align-items:flex-start; gap:14px; padding:10px 0;
  border-bottom:1px solid var(--line); font-size:.95rem; }
.gf-step:last-child{ border-bottom:none; }
.gf-ico{ font-size:1.3rem; flex-shrink:0; width:32px; text-align:center; }
.gf-arr{ text-align:center; color:var(--ink-faint); font-size:1.1rem; padding:2px 0; }
.guide-formula{ background:var(--app-bg); border:1px solid var(--app-line); border-radius:14px; padding:14px 16px; }
.gf-name{ font-weight:800; font-size:.9rem; color:var(--accent); margin-bottom:8px; }
.gf-code{ display:block; font-family:var(--mono); font-size:.8rem; color:var(--ink); line-height:1.7;
  white-space:pre-wrap; word-break:break-word; }
.gf-exp{ margin-top:10px; font-size:.86rem; color:var(--ink-soft); line-height:1.65;
  padding-top:10px; border-top:1px solid var(--app-line); }

/* controls */
.controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.controls select{ background:var(--card) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23728179" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') no-repeat right 14px center;
  border-color:var(--line); box-shadow:var(--shadow-sm); font-weight:600; padding:11px 40px 11px 16px; -webkit-appearance:none; appearance:none; }
.controls select:hover{ border-color:var(--purple-2); }
.pills{ display:flex; gap:8px; flex-wrap:wrap; }
.stp-pill{ padding:3px 11px; border-radius:999px; font-size:.74rem; font-weight:800; }
.st-win{ background:var(--green-soft); color:#1f9d6b;} .st-loss{ background:var(--red-soft); color:#d65462; }
.st-open{ background:var(--amber-soft); color:#c8902f;} .st-na{ background:var(--purple-soft); color:var(--ink-faint); }
.rr-MENARIK{ color:#1f9d6b; font-weight:800;} .rr-CUKUP{ color:#c8902f; font-weight:800;} .rr-KURANG{ color:#d65462; font-weight:800; }
.biasb{ padding:3px 11px; border-radius:999px; font-size:.76rem; font-weight:800; }
.plan{ color:var(--ink); font-weight:700; }
.stp{ padding:3px 11px; border-radius:999px; font-size:.74rem; font-weight:800; }

/* backtest stat grid */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:18px; }
.sc{ background:var(--card); border-radius:var(--radius-sm); padding:16px; box-shadow:var(--shadow-sm); }
.sc .label{ font-size:.7rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.sc .val{ font-size:1.6rem; font-weight:800; color:var(--ink); }
.sc .val.green{ color:#1f9d6b;} .sc .val.red{ color:#d65462;} .sc .val.blue{ color:#3a86d4; }

/* catatan (docs) — reuse panel */
.toc{ position:sticky; top:14px; align-self:start; }
.toc-title{ color:var(--ink-faint); text-transform:uppercase; font-size:.68rem; letter-spacing:.1em; margin-bottom:10px; font-weight:800; }
.toc a{ display:block; color:var(--ink-soft); text-decoration:none; padding:7px 12px; border-radius:10px; font-size:.85rem; margin-bottom:2px; }
.toc a:hover,.toc a.active{ background:var(--purple-soft); color:var(--purple); }
.docs-grid{ display:grid; grid-template-columns:200px 1fr; gap:20px; }
@media(max-width:860px){ .docs-grid{ grid-template-columns:1fr; } .toc{ display:none; } }
section{ margin-bottom:40px; }
h2{ font-size:1.3rem; font-weight:800; color:var(--ink); margin-bottom:8px; display:flex; align-items:center; }
.sec-num{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; background:linear-gradient(135deg,var(--purple-2),var(--purple)); color:#fff; border-radius:10px; font-weight:800; font-size:.85rem; margin-right:12px; }
.sec-lead{ color:var(--ink-soft); margin:0 0 22px 42px; }
@media(max-width:860px){ .sec-lead{ margin-left:0; } }
h3{ font-size:1rem; font-weight:800; color:var(--ink); margin:24px 0 12px; }
p{ color:var(--ink-soft); margin-bottom:12px; }
strong{ color:var(--ink); }
.callout{ display:flex; gap:12px; padding:14px 16px; border-radius:14px; font-size:.9rem; margin:16px 0; }
.callout.tip{ background:var(--blue-soft); color:#3a6ea5;} .callout.warn{ background:var(--amber-soft); color:#a8761f;} .callout.good{ background:var(--green-soft); color:#1f8a5f; }
.ladder{ display:flex; flex-direction:column; border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.rung{ display:grid; grid-template-columns:54px 110px 1fr; align-items:center; padding:16px 18px; gap:14px; position:relative; }
.rung.a{ background:var(--red-soft);} .rung.b{ background:var(--amber-soft);} .rung.c{ background:var(--green-soft);} .rung.d{ background:var(--blue-soft); }
.rung+.rung{ border-top:3px solid #fff; }
.rung-letter{ font-size:1.4rem; font-weight:900; text-align:center; }
.rung.a .rung-letter{color:#d65462;} .rung.b .rung-letter{color:#c8902f;} .rung.c .rung-letter{color:#1f9d6b;} .rung.d .rung-letter{color:#3a86d4;}
.rung-price{ font-family:var(--mono); font-weight:800; color:var(--ink); }
.rung-action{ font-weight:800; font-size:.92rem;} .rung-note{ font-size:.8rem; color:var(--ink-soft); }
.price-marker{ position:absolute; right:18px; top:50%; transform:translateY(-50%); background:var(--accent); color:#fff; font-weight:700; font-size:.72rem; padding:4px 10px; border-radius:999px; }
.ob{ display:grid; grid-template-columns:1fr 70px 1fr; border-radius:14px; overflow:hidden; border:1px solid var(--line); font-size:.85rem; }
.ob-h{ padding:10px; text-align:center; background:var(--purple-soft); font-weight:700; font-size:.7rem; text-transform:uppercase; color:var(--ink-soft); }
.ob-c{ padding:9px 14px; border-top:1px solid var(--line); }
.ob-bid{ background:var(--green-soft); text-align:right; color:#1f8a5f;} .ob-offer{ background:var(--red-soft); text-align:left; color:#c0414c; }
.ob-px{ text-align:center; border-top:1px solid var(--line); padding:9px; font-weight:800; color:var(--ink-soft); font-family:var(--mono); }
.ob-px.best{ background:var(--purple); color:#fff; }
.steps .stp{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); border-radius:0; background:none; font-size:1rem; }
.steps .stp:last-child{ border-bottom:none; }
.steps .stp::before{ counter-increment:s; content:counter(s); width:30px; height:30px; flex-shrink:0; border-radius:50%; background:var(--purple-soft); color:var(--purple); font-weight:800; font-size:.85rem; display:flex; align-items:center; justify-content:center; }
.steps{ counter-reset:s; }
.stp-t{ font-weight:800; color:var(--ink); margin-bottom:2px;} .stp-d{ font-size:.86rem; color:var(--ink-soft); }
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media(max-width:600px){ .compare{ grid-template-columns:1fr; } }
.summary{ background:linear-gradient(135deg,#c9ead9,#b3e2cc); border-radius:18px; padding:36px 28px; text-align:center; }
.summary p{ font-size:1.2rem; color:#0d3d29; margin:0; font-weight:600; }
.formula{ background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:16px 18px; font-family:var(--mono); font-size:.86rem; color:var(--purple-2); line-height:2; overflow-x:auto; }
.formula .dim{ color:var(--ink-faint);} .formula b{ color:var(--ink); }
.kicker{ color:var(--ink-faint); font-size:.76rem; text-align:center; margin-bottom:14px; text-transform:uppercase; letter-spacing:.05em; }
.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media(max-width:600px){ .info-grid{ grid-template-columns:1fr; } }
.trade{ display:grid; grid-template-columns:80px 1fr auto auto; gap:8px 16px; padding:13px 0; border-bottom:1px solid var(--line); align-items:center; font-size:.84rem; }
.trade:last-child{ border-bottom:none; }
.win{ color:#1f9d6b; font-weight:800;} .open{ color:#c8902f; font-weight:800; }
.card{ background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); margin-bottom:16px; }
.note-item{ padding:9px 13px; border-radius:12px; line-height:1.5; font-size:.85rem; }
.note-item.done{ background:var(--green-soft); color:#1f8a5f;} .note-item.pending{ background:var(--amber-soft); color:#a8761f;} .note-item.todo{ background:var(--purple-soft); color:var(--ink-faint); }
.res-head{ display:flex; justify-content:space-between; align-items:baseline; margin:6px 0; }
.res-head .count{ color:var(--ink-faint); font-size:.85rem; }
.section-label{ font-size:.74rem; color:var(--ink-faint); font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin:6px 0 12px; }


/* ---------- Page content wrapper (di dalam main) ---------- */
.wrap{ display:block; }
.wrap.docs{ display:grid; grid-template-columns:200px 1fr; gap:20px; align-items:start; }
@media(max-width:860px){ .wrap.docs{ grid-template-columns:1fr; } }
.content{ min-width:0; }
/* Tabel dokumentasi (Panduan/Catatan) tak punya pembungkus scroll — di layar
   sempit bikin overflow horizontal. display:block+overflow-x:auto → bisa digeser,
   tak memaksa lebar halaman. Tak berdampak di desktop bila tabel muat. */
.wrap.docs table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- Icon styling ---------- */
.sb-nav .ic{ display:inline-flex; align-items:center; justify-content:center; width:20px; }
.sb-nav .ic svg{ display:block; }
.stat-card .ic svg, .t-badge svg, .btn svg{ display:block; }
.btn svg, .t-badge svg{ flex-shrink:0; }
.stat-card.p .ic{ color:var(--purple); }
.stat-card.k .ic{ color:#ff7d97; }
.stat-card.a .ic{ color:#f0a93e; }
.stat-card.b .ic{ color:#5aa6ee; }
.t-badge{ color:var(--purple); }

/* ---------- Footer ---------- */
.appfoot{ padding:18px 26px; display:flex; justify-content:space-between; align-items:center;
  gap:14px; flex-wrap:wrap; color:var(--app-muted); font-size:.8rem;
  border-top:1px solid var(--app-line);
  background:linear-gradient(180deg, var(--app-card), var(--card-2)); position:relative; }
/* garis aksen tipis di tepi atas footer */
.appfoot::before{ content:""; position:absolute; top:-1px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent); opacity:.5; }
.appfoot .af-brand{ display:inline-flex; align-items:center; gap:8px; font-size:.86rem; color:var(--ink-soft); }
.appfoot .af-logo{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; }
.appfoot .af-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.appfoot .af-brand b{ font-weight:800; letter-spacing:.01em; color:var(--ink); }
.appfoot .af-copy{ text-align:center; flex:1 1 auto; font-weight:500; }
.appfoot .af-author{ font-weight:800; text-decoration:none; position:relative;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  transition:opacity .15s; }
.appfoot .af-author::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.appfoot .af-author:hover::after{ transform:scaleX(1); }
.appfoot .af-live{ display:inline-flex; align-items:center; gap:7px; font-weight:700; color:var(--green);
  background:var(--green-soft); padding:5px 12px; border-radius:999px; font-size:.74rem;
  letter-spacing:.02em; text-transform:uppercase; }
.appfoot .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block;
  box-shadow:0 0 0 0 var(--green); animation:af-pulse 2s infinite; }
@keyframes af-pulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5); } 70%{ box-shadow:0 0 0 7px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); } }
.appfoot a{ color:var(--accent); text-decoration:none; font-weight:600; }
@media (max-width:640px){
  .appfoot{ flex-direction:column; text-align:center; gap:10px; padding:16px; }
  .appfoot .af-copy{ order:3; }
}

/* Strip "Data hari ini (penutupan)" — tampil di atas order book historis saat pasar tutup */
.rt-strip{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 18px;
  background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  margin-top:10px; font-size:.88rem; font-variant-numeric:tabular-nums; }
.rts-lbl{ font-size:.72rem; font-weight:800; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }
.rts-pair{ display:flex; align-items:center; gap:8px; font-weight:800; }
.rts-bid{ color:var(--green); } .rts-off{ color:var(--red); }
.rts-sep{ color:var(--ink-faint); }
.rts-px{ margin-left:auto; font-weight:800; color:var(--ink); font-size:.95rem; }
.rts-px .up{ color:var(--green); } .rts-px .down{ color:var(--red); }
/* Badge "book per <waktu>" — order book historis saat pasar tutup */
.databadge{ display:inline-block; font-size:.68rem; font-weight:700; padding:2px 9px; border-radius:20px;
  background:var(--amber-soft); color:var(--yellow); margin-left:8px; vertical-align:middle; letter-spacing:.01em; }
/* Baris "data hari ini" (penutupan) di atas order book pre-market */
.panel table.tbk tr.rt-row td{ background:var(--card-2) !important; border-bottom:2px solid var(--accent); }
.panel table.tbk tr.rt-row:hover td{ background:var(--accent-soft) !important; }
/* %change dari prev close di bawah harga Bid/Ask */
.ob-pct{ display:block; font-size:.65rem; font-weight:700; font-family:var(--font);
  color:var(--ink-faint); line-height:1.2; margin-top:2px; font-variant-numeric:tabular-nums; }
.ob-pct.up{ color:var(--green); } .ob-pct.down{ color:var(--red); }
/* Order book: level tanpa antrian tetap tampil, hanya diredupkan (bukan disembunyikan) */
.panel table.tbk .z{ color:var(--ink-faint); font-weight:500; opacity:.7; }
.panel table.tbk .c-px.z{ color:var(--ink-faint); font-weight:700; }
.panel table.tbk tr.lvl-empty td{ opacity:.62; }
.panel table.tbk tr.lvl-empty:hover td{ opacity:1; }

/* ---------- Mobile: sidebar off-canvas (geser dari kiri) ---------- */
.sidebar-backdrop{ display:none; }
@media(max-width:860px){
  .sidebar{ transform:translateX(-100%); box-shadow:0 18px 50px rgba(0,0,0,.4); }
  .main{ margin-left:0; }
  .layout.sidebar-open .sidebar{ transform:translateX(0); }
  .layout.sidebar-open .sidebar-backdrop{ display:block; position:fixed; inset:0; z-index:25;
    background:rgba(10,25,20,.5); -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px); }
  .appbar-brand{ display:flex; }
  /* Appbar rapat + tak overflow */
  .appbar{ gap:10px; padding:9px 14px; }
  .appbar-right{ gap:7px; }
  .tk-pill{ padding:7px 11px; font-size:.74rem; }
}
@media(max-width:640px){
  .wrap > h1{ font-size:1.35rem; }
  .wrap > .sub{ font-size:.85rem; margin-bottom:16px; }
  .panel{ padding:16px; border-radius:var(--radius-sm); }
  .page-body{ padding:16px 12px; gap:14px; }
  /* Form cari: input + tombol turun baris kalau sempit */
  .em-search{ flex-wrap:wrap; }
  .em-search input{ min-width:100%; font-size:1rem; }
  .em-search .btn, .em-search .btn-tg{ flex:1; justify-content:center; }
  /* Best bid/offer & konteks: kecilkan angka besar */
  .bo-px{ font-size:1.3rem !important; }
  .bo-side{ padding:12px 12px !important; }
  .ob-ticker{ font-size:1.2rem !important; padding:6px 13px !important; }
  .ob-quote .px{ font-size:1.05rem !important; }
  .res-head{ flex-wrap:wrap; gap:6px; }
  /* Definisi info-panel: label & isi menumpuk biar tak sempit */
  .ib-di{ grid-template-columns:1fr; gap:1px; }
  .ib-di .k{ font-size:.85rem; }
}
@media(max-width:560px){
  .topbar h1{ font-size:1.25rem; }
  .stat-card .val{ font-size:1.35rem; }
}
/* Tabel lebar → bisa digeser horizontal di mobile (order book, broker, dll) */
@media(max-width:600px){
  .table-scroll, .table-card{ -webkit-overflow-scrolling:touch; }
  /* Order book (di-style inline dlm .panel) — dikecilkan agar 7 kolom muat di HP.
     Pakai .panel … agar menang spesifisitas atas <style> inline halaman. */
  .panel table.tbk{ font-size:.72rem; }
  .panel table.tbk td{ padding:6px 4px; }
  .panel table.tbk th{ padding:7px 3px; font-size:.6rem; }
  .panel table.tbk .c-num{ width:22px; }
  .panel table.tbk .c-freq{ width:34px; font-size:.64rem; }
  .panel table.tbk .c-px{ width:auto; }
  /* Kotak konteks harga 2 kolom penuh di HP */
  .sum-box{ min-width:calc(50% - 6px); }
  /* Best bid/offer: kurangi jarak */
  .bo-grid{ gap:8px; }
  /* DataTables (Jurnal/Plan): kontrol & kolom rapat, search full-width */
  .table-card div.dt-container{ padding:12px; }
  .table-card div.dt-container .dt-search input{ min-width:0; width:100%; }
  .table-card th, .table-card td{ padding:10px 10px; }
  .table-card th:first-child, .table-card td:first-child{ padding-left:12px; }
  .table-card th:last-child, .table-card td:last-child{ padding-right:12px; }
}
@media(max-width:380px){
  .sum-box{ min-width:100%; }
  .bo-grid{ grid-template-columns:1fr 1fr; }   /* spread pindah ke bawah bila terlalu sempit */
  .bo-mid{ grid-column:1 / -1; order:3; }
}

/* ===== Info panel keterangan (buka-tutup) — dipakai di tiap menu ===== */
.infobox{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  margin:0 0 16px; box-shadow:var(--shadow-sm); overflow:hidden; }
.infobox>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px;
  padding:12px 16px; font-weight:700; font-size:.9rem; color:var(--ink); -webkit-user-select:none; user-select:none; }
.infobox>summary::-webkit-details-marker{ display:none; }
.infobox>summary:hover{ background:var(--card-2); }
.infobox .ib-ic{ font-size:1rem; }
.infobox .ib-t{ flex:1; }
.infobox .ib-ar{ color:var(--ink-faint); transition:transform .15s; font-size:.8rem; }
.infobox[open] .ib-ar{ transform:rotate(180deg); }
.infobox .ib-body{ padding:14px 16px 16px; font-size:.87rem; line-height:1.65; color:var(--ink-soft);
  border-top:1px solid var(--line); }
.infobox .ib-body b,.infobox .ib-body strong{ color:var(--ink); font-weight:700; }
/* Kalimat pembuka */
.ib-lead{ font-size:.92rem; color:var(--ink); margin:0 0 14px; line-height:1.6; }
.ib-lead b{ color:var(--accent); }
/* Blok seksi — dipisah divider + judul kecil beraksen (mudah dipindai) */
.ib-sec{ margin:14px 0 0; padding:13px 0 0; border-top:1px dashed var(--line); }
.ib-sec:first-child{ margin-top:0; padding-top:0; border-top:none; }
.ib-h{ display:flex; align-items:center; gap:7px; font-size:.72rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent); margin:0 0 8px; }
.ib-h .ib-hic{ font-size:1rem; }
.ib-sec>p{ margin:6px 0; }
.ib-sec>p:last-child{ margin-bottom:0; }
/* Baris istilah → penjelasan (zona, jam sesi, ambang, dsb) */
.ib-dl{ display:grid; gap:7px; margin:2px 0 0; }
.ib-di{ display:grid; grid-template-columns:minmax(96px,auto) 1fr; gap:12px; align-items:baseline; }
.ib-di .k{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.ib-di .d{ color:var(--ink-soft); }
/* Daftar poin rapi dengan marker aksen */
.infobox .ib-body ul{ margin:6px 0 0; padding:0; list-style:none; }
.infobox .ib-body li{ position:relative; margin:8px 0; padding-left:18px; }
.infobox .ib-body li::before{ content:"›"; position:absolute; left:3px; top:-1px;
  color:var(--accent); font-weight:800; font-size:1.05rem; }
/* Callout penting */
.ib-note{ display:flex; gap:8px; margin:10px 0 0; padding:9px 12px; border-radius:9px;
  font-size:.84rem; line-height:1.55; }
.ib-note b{ color:inherit !important; }
.ib-note.warn{ background:var(--amber-soft); color:var(--yellow); }
.ib-note.info{ background:var(--green-soft); color:var(--green); }
.ib-note.tip{ background:var(--purple-soft); color:var(--purple); }
/* Chip inline (sumber/status) */
.infobox .ib-body .tag{ display:inline-block; font-size:.72rem; font-weight:700; padding:1px 8px;
  border-radius:20px; background:var(--purple-soft); color:var(--purple); vertical-align:middle; }
.infobox .ib-body .warn{ background:var(--amber-soft); color:var(--yellow); }
.infobox .ib-body .tag.ok{ background:var(--green-soft); color:var(--green); }

/* ============================================================
   SEKTOR — chip sektor emiten + panel "Peta Sektor"
   ============================================================ */
.sec-chip{ display:inline-flex; align-items:center; gap:4px; margin-top:5px;
  font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:20px;
  background:var(--card-2); color:var(--ink-soft); border:1px solid var(--line);
  max-width:100%; }
.sec-chip .sec-chip-ind{ color:var(--ink-faint); font-weight:600; }

.secmap{ background:var(--card-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:14px 16px; }
.secmap-head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.secmap-title{ font-size:.95rem; font-weight:800; color:var(--ink); }
.secmap-sub{ font-size:.72rem; font-weight:600; color:var(--ink-faint); }
.secmap-list{ display:flex; flex-direction:column; gap:12px; }

.secrow{ display:flex; flex-direction:column; gap:5px; }
.secrow-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.secname{ font-size:.82rem; font-weight:700; color:var(--ink); }
.secchg{ font-size:.82rem; font-weight:800; font-variant-numeric:tabular-nums; }
.secchg.up{ color:var(--green); } .secchg.down{ color:var(--red); } .secchg.flat{ color:var(--ink-faint); }

.secrow-bar{ display:flex; height:8px; border-radius:5px; overflow:hidden; background:var(--line); }
.secrow-bar > div{ height:100%; }
.secrow-bar .sb-akum{ background:var(--green); }
.secrow-bar .sb-dist{ background:var(--red); }
.secrow-bar .sb-net{ background:var(--ink-faint); opacity:.5; }

.secrow-meta{ display:flex; gap:14px; font-size:.72rem; font-weight:600; color:var(--ink-faint);
  font-variant-numeric:tabular-nums; }
.secrow-meta .up{ color:var(--green); } .secrow-meta .down{ color:var(--red); }

/* Penanda aksi korporasi (RI / Stock Split yang belum lewat) */
.corp-flag{ display:inline-block; margin-left:3px; color:var(--amber); font-weight:900;
  font-size:1.1em; line-height:1; cursor:help; vertical-align:top; }
.corp-note{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:6px 13px;
  border-radius:999px; background:var(--amber-soft); color:var(--yellow); font-size:.76rem;
  font-weight:700; text-decoration:none; border:1px solid transparent; transition:.15s; }
.corp-note:hover{ border-color:var(--amber); }

/* ============================================================
   RESPONSIVE + POLISH GLOBAL (Web / Tablet / HP)
   Berlaku ke SEMUA menu lewat style.css bersama. Additive & aman:
   fokus menutup celah responsif + kerapian, tanpa mengubah tata letak
   yang sudah jalan.
   ============================================================ */

/* 1) Cegah elemen meluber keluar layar (gambar, svg, media). Tabel TIDAK
      dibatasi lebarnya supaya bisa digeser horizontal (lihat #2). */
img, svg, video, canvas, iframe { max-width:100%; height:auto; }
svg { height:auto; }                 /* biar ikon inline tak ketarik */
.ico-inline svg, .btn svg, .stat-card .ic svg, .sec-ico svg { height:auto; }
.wrap, .page-body, .card, .panel, .stat-card { min-width:0; }   /* izinkan anak mengecil di grid/flex */
* { -webkit-tap-highlight-color:rgba(0,0,0,0); }

/* 2) Semua pembungkus tabel bisa digeser horizontal di layar sempit
      (tanpa memaksa min-width → tabel teks/dokumentasi tetap membungkus). */
.table-card, .table-scroll, .mk-tbl-scroll, .table-responsive {
  overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* 3) Scrollbar tipis & rapi (WebKit) — kesan profesional. */
.table-card::-webkit-scrollbar, .table-scroll::-webkit-scrollbar,
.mk-tbl-scroll::-webkit-scrollbar { height:8px; width:8px; }
.table-card::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb,
.mk-tbl-scroll::-webkit-scrollbar-thumb { background:var(--line); border-radius:8px; }
.table-card::-webkit-scrollbar-thumb:hover, .table-scroll::-webkit-scrollbar-thumb:hover,
.mk-tbl-scroll::-webkit-scrollbar-thumb:hover { background:var(--ink-faint); }

/* 4) Fokus keyboard yang terlihat (aksesibilitas) tanpa mengganggu klik mouse. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* 5) TABLET (≤ 1024px): rapatkan sedikit, ikon tetap sejajar. */
@media (max-width:1024px){
  .page-body{ gap:16px; }
  .stats-row{ gap:11px; }
}

/* 6) TABLET kecil / HP besar (≤ 720px): heading & tab lebih ringkas. */
@media (max-width:720px){
  .btn-row{ flex-wrap:wrap; }
  .btn-row > .btn, .tp-tabs .tp-tab, .bk-tabs .bk-tab, .sr-tab { flex:0 1 auto; }
}

/* 7) HP (≤ 560px): target sentuh nyaman, teks proporsional. */
@media (max-width:560px){
  .page-body{ padding:14px 11px; }
  .wrap > h1{ font-size:1.3rem; line-height:1.25; }
  .wrap > .sub{ font-size:.85rem; }
  .btn, .btn-sm{ min-height:38px; }         /* tap target ≥ ~38px */
  .btn-icon{ width:38px; min-height:38px; }
  .stat-card{ padding:13px; }
  .stat-card .ic{ width:40px; height:40px; border-radius:12px; }
  .sec-head{ margin:20px 2px 11px; }
  /* Chip/kartu jangan terpotong, biarkan membungkus */
  .card, .panel{ border-radius:14px; }
}

/* 8) HP kecil (≤ 400px): satu kolom penuh utk ringkasan. */
@media (max-width:400px){
  .stats-row{ grid-template-columns:1fr; }
  .wrap > h1{ font-size:1.2rem; }
}