/* Pemburu Dollar – desain final (Plus Jakarta Sans, palet broker) */
:root {
  --di-naik: #FFFFFF; --di-turun: #FFFFFF;   /* warna tulisan di atas warna naik / turun (audit tampilan 12 Nov) */
  --navy: #141921; --navy-2: #1E232C; --navy-3: #31353C; --line-d: #262B35;
  --green: #25C660; --green-t: #12753C; --green-tint: #E5F7F2;
  --red: #C81E1E; --red-d: #F0616D; --red-tint: #FDECEC;
  --page: #F7F7F7; --border: #DEE3EA; --border-2: #E5E7EB;
  --ink: #18191F; --muted: #4B5563; --side-muted: #9CA3AF; --side-text: #D1D5DB;
  --input-bg: #F9FAFB; --input-border: #D1D5DC;
  --radius: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --top-h: 64px; --tab-h: 74px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
img, svg { display: block; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--green-t); } .down { color: var(--red); } .muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- gerak ---------- */
a, button, input, select, label { touch-action: manipulation; } /* tanpa jeda ketuk di HP */
a, button { transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease; -webkit-tap-highlight-color: transparent; }
button:active, .btn:active, .chip:active { transform: scale(.97); }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .22s var(--ease) both; animation-delay: min(calc(var(--d, 0ms) * .25), 60ms); } /* singkat supaya halaman terasa langsung siap */
@keyframes ping { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3); opacity: 0; } }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; display: inline-block; position: relative; }
.dot.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: ping 2.4s ease-out infinite; pointer-events: none; }
.dot.off { background: var(--side-muted); animation: none; }
@keyframes flashUp { 0% { background-color: var(--ka-37-198-96-_28); } 100% { background-color: var(--ka-37-198-96-0); } }
@keyframes flashDn { 0% { background-color: var(--ka-240-97-109-_28); } 100% { background-color: var(--ka-240-97-109-0); } }
.tick { border-radius: 6px; padding: 0 4px; margin: 0 -4px; }
.tick.f-up { animation: flashUp .9s ease-out; } .tick.f-dn { animation: flashDn .9s ease-out; }
@keyframes fill { from { transform: scaleX(0); } }
.fill { transform-origin: left; animation: fill .6s var(--ease) .1s both; }
@keyframes grow { from { transform: scaleY(0); } }
.grow { transform-origin: bottom; animation: grow .5s var(--ease) both; }

/* T-077: transisi antar halaman (View Transitions) dan prerender dihapus; macet di laptop pengguna. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- kerangka ---------- */
.logo { width: 32px; height: 32px; border-radius: 8px; display: block; flex: none; }
.top { position: sticky; top: 0; z-index: 30; background: var(--navy); }
.top-in { max-width: 1200px; margin: 0 auto; height: var(--top-h); display: flex; align-items: center; gap: 32px; padding: 0 24px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 17px; white-space: nowrap; }
.nav { display: flex; gap: 4px; }
.nav a { position: relative; padding: 8px 14px; border-radius: 8px; color: var(--side-text); font-weight: 600; }
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::before { content: ""; position: absolute; inset: 0; border-radius: 8px; background: var(--navy-3); z-index: -1; }
.nav a span { position: relative; }
/* Dropdown Berita: muncul saat kursor di atas / fokus keyboard */
.nav-dd { position: relative; }
.nav-dd > a { display: flex; align-items: center; gap: 6px; }
.nav-dd .dd-caret { position: relative; opacity: .7; transition: transform .2s var(--ease); }
.nav-dd:hover .dd-caret, .nav-dd:focus-within .dd-caret { transform: rotate(180deg); }
.dd-menu { position: absolute; top: calc(100% + 6px); left: -8px; min-width: 268px; padding: 6px; border-radius: 12px; background: var(--bg-fff); box-shadow: 0 14px 34px rgba(16,24,40,.22); border: 1px solid var(--border); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s var(--ease), visibility 0s .15s; z-index: 40; }
.dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } /* jembatan supaya menu tidak tertutup saat kursor turun */
.nav-dd:hover .dd-menu, .nav-dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s var(--ease); }
.dd-menu a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink); }
.dd-menu a:hover, .dd-menu a:focus-visible { background: var(--page); color: var(--ink); }
.dd-menu a.on { background: var(--green-tint); }
.dd-menu a::before { display: none; }
.dd-menu b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.dd-menu small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 500; }
.soon { display: inline-block; padding: 1px 6px; border-radius: 999px; background: var(--bg-fef3c7); color: var(--tx-92400e); font-size: 10px; font-weight: 800; letter-spacing: .02em; vertical-align: middle; }
/* Tab Berita / Kalender: kotak putih dengan dua pilihan, yang aktif navy (jelas terbaca sebagai menu) */
.main .news-tabs { display: inline-grid; grid-template-columns: auto auto; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--bg-fff); border: 1px solid var(--border); border-radius: 12px; }
.news-tabs a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 9px; color: var(--muted); font-weight: 700; font-size: 14px; white-space: nowrap; }
.news-tabs a:hover { background: var(--page); color: var(--ink); }
.news-tabs a[aria-current="page"] { background: var(--navy); color: #fff; }
.news-tabs a[aria-current="page"] svg { color: var(--green); }
@media (max-width: 860px) {
  .main .news-tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); position: sticky; top: calc(var(--top-h) + 8px); z-index: 5; box-shadow: 0 4px 14px rgba(20,25,33,.08); }
  .news-tabs a { padding: 11px 8px; font-size: 13px; gap: 6px; }
  .news-tabs a .soon { font-size: 9px; padding: 1px 5px; }
}
.top-title { display: none; color: #fff; font-weight: 700; font-size: 16px; flex: 1; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--side-text); font-size: 13px; font-weight: 600; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--navy-3); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.avatar[aria-current="page"] { background: var(--green); color: var(--navy); }
.main { max-width: 1200px; margin: 0 auto; padding: 24px 24px 56px; display: flex; flex-direction: column; gap: 20px; }
.tabbar { display: none; }

@media (max-width: 860px) {
  :root { --top-h: 56px; }
  .top-in { gap: 10px; padding: 0 16px; }
  .brand b { display: none; }
  .logo { width: 28px; height: 28px; }
  .nav, .live-pill { display: none; }
  .top-title { display: block; }
  .main { padding: 16px 16px calc(var(--tab-h) + 28px); gap: 16px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: calc(6px + env(safe-area-inset-bottom)); background: var(--bg-fff); border-top: 1px solid var(--border); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
  .tab-ic { display: flex; padding: 4px 16px; border-radius: 999px; }
  .tabbar a[aria-current="page"] { color: var(--green-t); }
  .tabbar a[aria-current="page"] .tab-ic { background: var(--green-tint); }
}

/* ---------- komponen ---------- */
.card { background: var(--bg-fff); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; min-width: 0; }
.card-dark { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 20px 22px; min-width: 0; }
.h2 { font-size: 16px; font-weight: 600; color: var(--muted); }
.h2-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.link { color: var(--green-t); font-weight: 700; }
.link:hover { text-decoration: underline; }
.page-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.page-title h1 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-fff); font-weight: 700; font-size: 14px; white-space: nowrap; }
.btn:hover { border-color: #C5CCD6; }
.btn-dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-dark:hover { background: #232a35; border-color: #232a35; }
.btn-green { background: var(--green); border-color: var(--green); color: var(--navy); }
.btn-green:hover { background: var(--k-20b456); border-color: var(--k-20b456); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--green-t); }
.btn-block { width: 100%; }
.btn-lg { min-height: 48px; font-size: 15px; }
.chip { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--bg-fff); color: var(--muted); border: 1px solid var(--border); }
.chip[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.badge-demo { background: var(--bg-fef3c7); color: var(--tx-92400e); }
.badge-hi { background: var(--red-tint); color: var(--red); }
.badge-buy { background: var(--green); color: var(--navy); padding: 4px 10px; font-size: 13px; }
.badge-sell { background: var(--red-d); color: var(--di-turun); padding: 4px 10px; font-size: 13px; }
.seg { display: flex; padding: 4px; border-radius: 10px; background: var(--page); gap: 2px; }
.seg button, .seg a { flex: 1; border: 0; background: transparent; padding: 7px 12px; border-radius: 7px; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; text-align: center; }
.seg [aria-pressed="true"], .seg [aria-current="page"] { background: var(--bg-fff); color: var(--ink); box-shadow: 0 1px 2px rgba(20,25,33,.12); }
.seg-dark { background: var(--navy-2); }
.seg-dark button { color: var(--side-muted); }
.seg-dark [aria-pressed="true"] { background: var(--navy-3); color: #fff; box-shadow: none; }
.snap { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.snap::-webkit-scrollbar { display: none; }
.snap > * { scroll-snap-align: start; flex: none; }
.f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; min-width: 0; }
.f input, .f select, .f textarea { min-height: 44px; width: 100%; padding: 0 14px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--input-bg); font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; }
.f textarea { padding: 10px 14px; min-height: 80px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); background: var(--bg-fff); }
.f small { font-weight: 400; font-size: 12px; color: var(--muted); }
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 96px; }
.pass-wrap button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--green-t); font-weight: 700; font-size: 13px; padding: 8px 10px; border-radius: 8px; }
.note { padding: 12px 14px; border-radius: 12px; font-size: 13px; }
.note-err { background: var(--red-tint); color: var(--red); font-weight: 600; }
.note-ok { background: var(--green-tint); color: var(--green-t); font-weight: 600; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { padding: 9px 10px; font-weight: 600; font-size: 12px; color: var(--muted); text-align: left; white-space: nowrap; }
.tbl thead th { background: var(--page); }
.tbl thead th:first-child { border-radius: 8px 0 0 8px; } .tbl thead th:last-child { border-radius: 0 8px 8px 0; }
.tbl td { padding: 12px 10px; border-bottom: 1px solid var(--border-2); white-space: nowrap; }
.tbl tbody tr { transition: background-color .15s; }
.tbl tbody tr:hover { background: var(--bg-f9fafb); }
.tbl .r { text-align: right; }
.tbl-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.switch { width: 44px; height: 26px; border-radius: 999px; background: var(--border); position: relative; flex: none; border: 0; padding: 0; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-fff); box-shadow: 0 1px 3px rgba(20,25,33,.25); transition: left .2s var(--ease); }
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"]::after { left: 21px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; z-index: 60; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; box-shadow: 0 10px 30px rgba(20,25,33,.3); transition: opacity .2s, transform .3s var(--ease); pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 860px) { .toast { bottom: calc(var(--tab-h) + 18px); } }

/* Sinyal: tangga level dan bar posisi */
.ladder { display: flex; flex-direction: column; gap: 6px; }
.ladder div { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 10px; border: 1px solid transparent; }
.ladder span { font-weight: 600; font-size: 13px; }
.ladder b { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.lv-tp { background: var(--green-tint); color: var(--green-t); }
.lv-en { background: var(--bg-fff); border-color: var(--border) !important; }
.lv-sl { background: var(--red-tint); color: var(--red); }
.sig-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sig-head .sym { font-size: 20px; font-weight: 800; }
.sig-head .when { margin-left: auto; color: var(--muted); font-size: 13px; }
.status { display: inline-flex; align-items: center; gap: 6px; color: var(--green-t); font-size: 13px; font-weight: 600; }
.range { position: relative; height: 8px; border-radius: 4px; margin-top: 16px; }
.range i { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--muted); }
.range .now { position: absolute; top: -3px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--green); border: 2px solid #fff; animation: ping 2s ease-out infinite; transition: left .5s var(--ease); }
.range-lbl { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; font-weight: 600; }
.lv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lv-grid div { padding: 10px 12px; border-radius: 10px; background: var(--page); }
.lv-grid span { display: block; color: var(--muted); font-size: 12px; }
.lv-grid b { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }

/* Chart (digambar sinyal.js) */
.chart { position: relative; color: var(--side-muted); }
.pane { display: flex; }
.pane .plot { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.pane .axis { position: relative; width: 70px; flex: none; }
.pane-main { height: 420px; }
.pane-vol { height: 56px; }
.pane-time { height: 24px; }
.inset { position: absolute; inset: 10px 0; }
.gl { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-d); }
.vl { position: absolute; top: 0; bottom: 0; border-left: 1px solid rgba(38,43,53,.6); }
.cdl { position: absolute; top: 0; bottom: 0; }
.cdl i { position: absolute; left: 50%; width: 1px; transform: translateX(-50%); }
.cdl b { position: absolute; left: 0; right: 0; min-height: 1px; border-radius: 1px; }
.vbar { position: absolute; bottom: 0; }
.lvl { position: absolute; left: 0; right: 0; border-top: 1px dashed; }
/* Indikator Engulfing v9: MA9 kuning, VWAP biru titik-titik, panah engulf (JOSS = aqua / oranye) */
.ind-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ind-svg polyline { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ind-svg .ma { stroke: #FFD400; stroke-width: 1.4; }
.ind-svg .vw { stroke: #1E90FF; stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.eng-mk { position: absolute; background: rgba(170,170,170,.33); pointer-events: none; }
.eng-ar { position: absolute; transform: translate(-50%, -50%); font-size: 12px; line-height: 1; pointer-events: none; text-shadow: 0 0 2px #0b0f14; }
.eng-ar.up { color: var(--k-00ff00); } .eng-ar.dn { color: var(--k-ff3b30); }
.eng-ar.up.joss { color: #00FFFF; font-size: 13px; } .eng-ar.dn.joss { color: #FFA500; font-size: 13px; }
.ind-leg { position: absolute; top: 6px; left: 8px; z-index: 2; display: flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.12); background: rgba(16,21,28,.78); color: #C9D1DB; font: inherit; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; cursor: pointer; }
.ind-leg[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
.ind-leg .k-ma, .ind-leg .k-vw { display: inline-block; width: 14px; margin-left: 4px; border-top: 2px solid #FFD400; }
.ind-leg .k-vw { border-top: 2px dotted #1E90FF; }
.ind-leg .k-up { color: var(--k-00ff00); margin-left: 4px; } .ind-leg .k-dn { color: var(--k-ff3b30); }
.ind-leg .k-joss { margin-left: 4px; padding: 0 4px; border-radius: 3px; background: rgba(0,255,255,.15); color: #00FFFF; }
.lvl.en { border-top-style: dashed; opacity: .9; }
.cur-line { position: absolute; left: 0; right: 0; border-top: 1px dotted; opacity: .8; }
.ax-l { position: absolute; left: 8px; transform: translateY(-50%); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ax-tag { position: absolute; left: 2px; right: 4px; transform: translateY(-50%); height: 18px; line-height: 18px; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; overflow: hidden; }
.in-tag { position: absolute; left: 6px; transform: translateY(-50%); height: 18px; line-height: 18px; padding: 0 7px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.t-l { position: absolute; top: 4px; transform: translateX(-50%); font-size: 12px; white-space: nowrap; }
.chart-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--side-muted); font-size: 12px; flex-wrap: wrap; }

/* ---------- Beranda ---------- */
.alert { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 12px; background: var(--red-tint); position: relative; overflow: hidden; }
.alert b.cd { color: var(--red); }
.alert .go { margin-left: auto; font-weight: 700; color: var(--red); white-space: nowrap; }
.alert.calm { background: var(--green-tint); }
.alert.calm b.cd, .alert.calm .go { color: var(--green-t); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.home-side { display: flex; flex-direction: column; gap: 20px; }
.sig-body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; align-items: center; }
.price-big { font-size: 36px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.prev-list a { display: grid; grid-template-columns: 100px 54px 1fr 110px 110px; gap: 12px; align-items: center; padding: 11px 6px; margin: 0 -6px; border-bottom: 1px solid var(--border-2); border-radius: 8px; }
.prev-list a:hover { background: var(--bg-f9fafb); }
.mkt a { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: center; padding: 10px 6px; margin: 0 -6px; border-top: 1px solid var(--border-2); border-radius: 8px; }
.mkt a:first-child { border-top: 0; }
.mkt a:hover { background: var(--bg-f9fafb); }
.mkt small { grid-column: 1; color: var(--muted); font-size: 13px; }
.mkt .chg { grid-row: 1 / span 2; grid-column: 2; font-weight: 700; text-align: right; }
.news3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 10px; }
.news3 a { display: block; padding-top: 12px; border-top: 2px solid var(--navy); }
.news3 a:hover b { text-decoration: underline; }
.news3 b { font-size: 15px; font-weight: 700; }
.news3 small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.checklist { list-style: none; margin: 12px 0 0; padding: 0; }
.checklist li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border-2); }
.checklist li:first-child { border-top: 0; }
.ck { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 1.5px solid var(--input-border); color: var(--muted); }
.ck.done { background: var(--green); border-color: var(--green); color: var(--navy); }
@media (max-width: 1000px) { .home-grid { grid-template-columns: 1fr; } .prev-list a { grid-template-columns: 1fr auto; } .prev-list .hide-s { display: none; } }
@media (max-width: 860px) {
  .home-hero { margin: -16px -16px 0; padding: 4px 16px 20px; background: var(--navy); border-radius: 0 0 22px 22px; color: #fff; }
  .home-hero .page-title h1 { color: #fff; }
  .home-hero .page-title span { color: var(--side-muted); }
  .home-hero:not(:has(.alert)) { padding-bottom: 10px; }
  .alert { margin-top: 14px; background: var(--navy-2); border: 1px solid var(--navy-3); color: var(--side-text); padding: 12px 14px; align-items: flex-start; }
  .alert b.cd { color: #fff; display: block; }
  .alert.calm { background: var(--navy-2); }
  .alert.calm b.cd { color: #fff; }
  .alert .go { display: none; }
  .sig-body { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
  .price-big { font-size: 28px; }
  .news3 { grid-template-columns: 1fr; gap: 0; }
  .news3 a { border-top: 0; border-bottom: 1px solid var(--border); padding: 12px 0; }
  .card { padding: 16px; }
  .mkt-card { padding: 0; background: transparent; border: 0; }
}

/* ---------- Sinyal ---------- */
/* Desktop: chart selebar halaman, kartu sinyal & hitung lot berjajar di bawah chart */
.sig-page { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "chips" "focus" "chart" "side"; gap: 20px; align-items: start; }
@media (min-width: 861px) { .sig-side { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; } }
.sig-top, .sig-panel, .sig-scroll { display: contents; }
.inst-bar { grid-area: chips; display: flex; gap: 10px; align-items: stretch; min-width: 0; }
.inst-wrap { position: relative; min-width: 0; flex: 1; }
/* Kolom cari pair */
.inst-search { flex: none; width: 168px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-fff); color: var(--muted); cursor: text; }
.inst-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--ka-37-198-96-_18); color: var(--ink); }
.inst-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); padding: 0; height: 100%; }
.inst-search input::-webkit-search-cancel-button { cursor: pointer; }
.inst-none { margin: 0; align-self: center; padding: 14px 4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.inst[hidden] { display: none; }
.inst-row { padding-bottom: 2px; }
/* Laptop: deretan pair digeser ke samping (roda mouse / tombol panah), ujungnya memudar kalau masih ada pair lain */
.inst-nav { position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -18px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-fff); color: var(--navy); font-size: 22px; line-height: 1; font-weight: 700; box-shadow: 0 2px 8px rgba(16,24,40,.12); cursor: pointer; }
.inst-nav.prev { left: -6px; } .inst-nav.next { right: -6px; }
.inst-nav:hover { background: var(--green); border-color: var(--green); }
/* 13 Nov: panah geser pair dulu memakai huruf "›" berwarna gelap (tidak terlihat di mode gelap, posisinya tidak di tengah). Sekarang digambar, selalu di tengah lingkaran. */
.inst-nav { margin-top: -17px; padding: 0; font-size: 0; color: var(--ink); display: grid; place-items: center; }
.inst-nav[hidden] { display: none; }
.inst-nav::before { content: ""; position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: 10px; height: 10px; border-top: 2.4px solid currentColor; border-right: 2.4px solid currentColor; transform: translate(-50%, -50%) translateX(-2px) rotate(45deg); }
.inst-nav.prev::before { transform: translate(-50%, -50%) translateX(2px) rotate(-135deg); }
.inst-nav.prev { left: 0; } .inst-nav.next { right: 0; }
.inst-nav:hover { color: var(--di-naik); }
.inst-wrap.fade-l .inst-row { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px); mask-image: linear-gradient(90deg, transparent 0, #000 48px); }
.inst-wrap.fade-r .inst-row { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.inst-wrap.fade-l.fade-r .inst-row { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent); }
@media (max-width: 860px) { .inst-nav { display: none; } .inst-wrap.fade-l .inst-row, .inst-wrap.fade-r .inst-row { -webkit-mask-image: none; mask-image: none; } }
.inst { padding: 9px 13px; border-radius: 12px; background: var(--bg-fff); border: 1px solid var(--border); text-align: left; }
.inst b { font-size: 13px; display: block; }
.inst span { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.inst[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--navy); }
.inst[aria-pressed="true"] span { color: var(--navy) !important; }
.chart-card { grid-area: chart; background: var(--navy); color: #fff; border-radius: var(--radius); padding: 18px 18px 12px; }
.chart-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chart-head .sym { font-size: 20px; font-weight: 800; }
.chart-head .px { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tfs { margin-left: auto; display: flex; gap: 2px; }
.tfs button { border: 0; background: transparent; color: var(--side-text); padding: 5px 10px; border-radius: 6px; font-size: 13px; font-weight: 700; min-height: 32px; }
.tfs button[aria-pressed="true"] { background: var(--green); color: var(--navy); }
.tfs button:hover:not([aria-pressed="true"]) { background: var(--navy-2); }
.sig-side { grid-area: side; display: flex; flex-direction: column; gap: 20px; }
.sig-hist { grid-area: hist; }
.grab { display: none; }
.hist-stats { display: flex; gap: 36px; margin: 14px 0 6px; flex-wrap: wrap; }
.hist-stats b { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hist-stats span { color: var(--muted); font-size: 13px; }
.lot-out { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-2); gap: 10px; }
.lot-out b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hist-m { display: none; }
.sc-list { list-style: none; margin: 10px 0 0; padding: 0; }
.sc-list li { display: grid; grid-template-columns: 52px 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border-2); font-size: 13px; }
.sc-list li:first-child { border-top: 0; }
.sc-list .sc-t { font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sc-list .sc-t small { display: block; color: var(--muted); font-weight: 600; font-size: 12px; }
.sc-list .sc-n { min-width: 0; line-height: 1.3; }
.sc-list .sc-n b { font-weight: 700; margin-right: 4px; }
.sc-list .sc-r { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.sc-list .sc-r small { display: block; color: var(--muted); font-weight: 600; font-size: 12px; }
.sc-list li.near { background: linear-gradient(90deg, rgba(240,140,46,.10), transparent); }
.sc-list li.near .sc-r { color: var(--tx-b45309); }
.sc-empty { color: var(--muted); font-size: 13px; padding: 10px 0; }
@media (max-width: 860px) {
  body.page-sinyal { overflow: hidden; height: 100dvh; }
  body.page-sinyal .main { padding: 0; max-width: none; height: calc(100dvh - var(--top-h) - var(--tab-h) - env(safe-area-inset-bottom)); }
  .sig-page { display: flex; flex-direction: column; height: 100%; gap: 0; }
  .sig-top { display: block; flex: none; background: var(--navy); padding: 10px 0 18px; }
  .inst-row { padding: 0 16px 0 0; }
  .inst-bar { gap: 8px; padding-left: 16px; }
  .inst-search { width: 104px; padding: 0 10px; gap: 6px; background: var(--navy-2); border-color: var(--navy-2); color: #9CA3AF; }
  .inst-search:focus-within { width: 150px; color: #fff; }
  .inst-search input { color: #fff; font-size: 16px; } /* 16px: iPhone tidak zoom otomatis saat mengetik */
  .inst-search input::placeholder { color: #9CA3AF; font-size: 13px; }
  .inst-none { color: #9CA3AF; }
  .inst { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
  .chart-card { border-radius: 0; padding: 12px 0 0; background: transparent; }
  .chart-head { padding: 0 16px; gap: 8px; }
  .chart-head .sym, .chart-head .nm { display: none; }
  /* HP: 7 timeframe di baris sendiri, lebar sama rata */
  .chart-head { flex-wrap: wrap; row-gap: 8px; }
  .chart-head .tfs { flex: 0 0 100%; margin-left: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .tfs button { padding: 4px 0; font-size: 12px; min-height: 32px; background: var(--navy-2); }
  .pane-main { height: 34vh; min-height: 200px; max-height: 300px; }
  .pane-vol, .chart-foot { display: none; }
  .pane .axis { width: 62px; }
  .sig-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: -18px; background: var(--bg-fff); border-radius: 22px 22px 0 0; position: relative; z-index: 2; box-shadow: 0 -6px 20px rgba(20,25,33,.18); }
  /* Panel putih bisa ditarik ke atas menutupi chart (dan ditarik turun lagi) */
  .sig-panel { transition: margin-top .24s var(--ease); }
  .sig-panel.dragging { transition: none; }
  .grab { display: block; flex: none; width: 100%; height: 26px; padding: 0; border: 0; background: transparent; touch-action: none; cursor: grab; }
  .grab::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: #C9CFD8; margin: 0 auto; }
  .sig-scroll { display: block; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 24px; }
  .sig-side { gap: 0; }
  .sig-side .card, .sig-hist { border: 0; border-radius: 0; padding: 6px 18px 16px; }
  .sig-side .card + .card { border-top: 1px solid var(--border-2); padding-top: 16px; }
  .sig-hist { border-top: 1px solid var(--border-2); padding-top: 16px; }
  .hist-d { display: none; }
  .hist-m { display: block; }
  .hist-m a { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .hist-stats { gap: 20px; }
  .hist-stats b { font-size: 18px; }
}

/* ---------- Berita ---------- */
.news-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.news-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.news-tools .snap { flex: 1; min-width: 0; }
.search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; width: 220px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--input-bg); color: var(--muted); }
.search input { border: 0; background: transparent; outline: 0; width: 100%; font-size: 14px; color: var(--ink); }
.feature { display: block; margin-top: 18px; padding: 20px; border-radius: 14px; background: var(--navy); color: #fff; }
.feature:hover { box-shadow: 0 10px 28px rgba(20,25,33,.18); transform: translateY(-1px); }
.feature h2 { font-size: 22px; font-weight: 800; margin-top: 10px; max-width: 640px; line-height: 1.3; }
.feature p { color: var(--side-text); margin-top: 6px; max-width: 640px; }
.feature small { display: block; color: var(--side-muted); font-size: 13px; margin-top: 10px; }
.news-item { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 8px; margin: 0 -8px; border-bottom: 1px solid var(--border-2); border-radius: 8px; }
.news-item:hover { background: var(--bg-f9fafb); }
.news-item .cat { color: var(--green-t); font-weight: 600; display: block; }
.news-item b { font-size: 16px; }
.ev { padding: 12px 0; border-bottom: 1px solid var(--border-2); }
.ev.next { padding: 12px; margin: 8px -12px 0; border-radius: 12px; background: var(--red-tint); border-bottom: 0; }
.ev-top { display: flex; justify-content: space-between; align-items: center; }
.ev-meta { display: flex; gap: 14px; color: var(--muted); font-size: 12px; margin-top: 2px; flex-wrap: wrap; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.dots.l3 i { background: var(--red); } .dots.l2 i:nth-child(-n+2), .dots.l1 i:first-child { background: var(--green); }
.news-tabs { display: none; }
@media (max-width: 1000px) { .news-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .news-tabs { display: flex; margin-bottom: 2px; }
  .news-grid[data-tab="berita"] .cal-card { display: none; }
  .news-grid[data-tab="kalender"] .news-card { display: none; }
  .search { width: 100%; order: 2; }
  .news-tools .snap { order: 1; flex-basis: 100%; margin: 0 -16px; padding: 0 16px; }
  .news-item { grid-template-columns: 1fr; gap: 4px; }
  .feature h2 { font-size: 18px; }
}

/* ---------- Jurnal ---------- */
.sum-strip { display: grid; grid-template-columns: repeat(6, 1fr); background: var(--bg-fff); border: 1px solid var(--border); border-radius: var(--radius); }
.sum-strip div { padding: 16px 20px; min-width: 0; }
.sum-strip div + div { border-left: 1px solid var(--border-2); }
.sum-strip span { color: var(--muted); font-size: 13px; display: block; }
.sum-strip b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.jr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.jr-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jr-tools .right { margin-left: auto; display: flex; gap: 8px; }
.lot-box { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--green-tint); }
.lot-box span { color: var(--green-t); font-size: 13px; font-weight: 600; }
.lot-box b { display: block; font-size: 28px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.lot-box small { color: var(--muted); font-size: 12px; }
.jr-m { display: none; }
.fab { display: none; }
@media (max-width: 1100px) { .sum-strip { grid-template-columns: repeat(3, 1fr); } .sum-strip div:nth-child(4) { border-left: 0; } .sum-strip div:nth-child(n+4) { border-top: 1px solid var(--border-2); } }
@media (max-width: 1000px) { .jr-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .sum-strip b { font-size: 17px; }
  .sum-strip div { padding: 12px 14px; }
  .jr-d { display: none; }
  .jr-m { display: block; }
  .jr-m a { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 13px 14px; margin-top: 10px; background: var(--bg-fff); border: 1px solid var(--border); border-radius: 14px; }
  .jr-tools .btn-green { display: none; }
  .jr-tools .right { margin-left: 0; }
  .fab { display: inline-flex; position: fixed; right: 18px; bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom)); z-index: 25; align-items: center; height: 52px; padding: 0 20px; border-radius: 999px; background: var(--green); color: var(--navy); font-weight: 800; border: 0; box-shadow: 0 10px 24px var(--ka-37-198-96-_35); }
}

/* ---------- Portofolio ---------- */
.growth-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.growth-head .big { font-size: 40px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pct { padding: 4px 10px; border-radius: 999px; background: var(--green-tint); color: var(--green-t); font-weight: 800; }
.stat8 { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg-fff); border: 1px solid var(--border); border-radius: var(--radius); }
.stat8 div { padding: 16px 20px; }
.stat8 div:not(:nth-child(4n+1)) { border-left: 1px solid var(--border-2); }
.stat8 div:nth-child(n+5) { border-top: 1px solid var(--border-2); }
.stat8 span { color: var(--muted); font-size: 13px; display: block; }
.stat8 b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.porto-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 20px; }
.hbar { display: grid; grid-template-columns: 72px 1fr 78px; gap: 10px; align-items: center; padding: 7px 0; }
.hbar .tr { height: 10px; border-radius: 5px; background: var(--border-2); position: relative; overflow: hidden; }
.hbar .tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.vbars { display: flex; align-items: flex-end; gap: 14px; height: 220px; padding-top: 8px; }
.vbars div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.vbars i { width: 100%; max-width: 56px; border-radius: 8px 8px 3px 3px; }
.vbars small { font-size: 12px; color: var(--muted); font-weight: 600; }
.vbars b { font-size: 12px; font-weight: 700; }
@media (max-width: 1000px) { .porto-row { grid-template-columns: 1fr; } .stat8 { grid-template-columns: repeat(2, 1fr); } .stat8 div { border-left: 0 !important; border-top: 1px solid var(--border-2); } .stat8 div:nth-child(2n) { border-left: 1px solid var(--border-2) !important; } .stat8 div:nth-child(-n+2) { border-top: 0; } }
@media (max-width: 860px) { .growth-head .big { font-size: 30px; } .stat8 b { font-size: 18px; } .stat8 div { padding: 12px 14px; } }

/* ---------- Akun ---------- */
.acc-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
.acc-col { display: flex; flex-direction: column; gap: 20px; }
.profile { display: flex; align-items: center; gap: 14px; }
.avatar-lg { width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; flex: none; }
.info-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border-2); }
.info-row span:first-child { color: var(--muted); }
.info-row span:last-child { font-weight: 600; text-align: right; }
.help { margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--page); }
.notif-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border-2); }
.notif-row div { flex: 1; }
.notif-row small { display: block; color: var(--muted); font-size: 13px; }
.meter { height: 6px; border-radius: 3px; background: var(--border-2); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--red-d); transition: width .3s var(--ease), background-color .3s; }
@media (max-width: 1000px) { .acc-grid { grid-template-columns: 1fr; } }

/* ---------- Login & Daftar ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: flex; background: var(--bg-fff); }
.auth-side { flex: 1; background: var(--navy); padding: 40px 56px; display: flex; flex-direction: column; color: #fff; }
.auth-side h1 { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.auth-side p { color: var(--side-text); font-size: 16px; margin-top: 12px; }
.auth-ticks { margin-top: 36px; display: flex; gap: 10px; }
.auth-ticks div { flex: 1; padding: 12px 14px; border-radius: 12px; background: var(--navy-2); }
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-box { width: 100%; max-width: 400px; }
.auth-box h2 { font-size: 30px; font-weight: 800; }
.form { display: flex; flex-direction: column; gap: 14px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.check input { width: 18px; height: 18px; accent-color: var(--green); }
.auth-m-head { display: none; }
@media (max-width: 860px) {
  .auth { flex-direction: column; }
  .auth-side { display: none; }
  .auth-m-head { display: block; background: var(--navy); padding: 22px 22px 30px; border-radius: 0 0 24px 24px; color: #fff; }
  .auth-m-head .brand { gap: 10px; font-size: 18px; }
  .auth-m-head .brand b { display: inline; }
  .auth-m-head .brand .logo { width: 36px; height: 36px; }
  .auth-m-head h1 { margin-top: 28px; font-size: 28px; font-weight: 800; line-height: 1.2; }
  .auth-m-head p { margin-top: 6px; color: var(--side-text); font-size: 14px; }
  .auth-main { align-items: flex-start; padding: 24px 22px; }
  .auth-box h2, .auth-box .sub { display: none; }
}
.join { max-width: 1120px; margin: 0 auto; padding: 40px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.join h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: flex; gap: 14px; padding-bottom: 22px; position: relative; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--border); }
.step:last-child::before { display: none; }
.step.done::before { background: var(--green); }
.step .n { width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; background: var(--bg-fff); border: 2px solid var(--border); color: var(--muted); position: relative; }
.step.done .n { background: var(--green); border-color: var(--green); color: var(--navy); }
.step.cur .n { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 0 0 4px var(--green-tint); }
.step .tx { flex: 1; padding-top: 4px; }
.step.cur .tx { padding: 14px 16px; margin-top: -6px; border-radius: 14px; background: var(--bg-fff); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(20,25,33,.06); }
.step .tx b { font-size: 16px; }
.step.done .tx b { color: var(--muted); }
.step .tx p { color: var(--muted); margin-top: 2px; }
.step .act { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.step-mark { border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; padding: 6px 4px; text-decoration: underline; }
.faq details { padding: 12px 0; border-top: 1px solid var(--border-2); }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { color: var(--muted); font-size: 13px; margin-top: 6px; }
@media (max-width: 900px) { .join { grid-template-columns: 1fr; gap: 24px; padding: 24px 18px 40px; } .join h1 { font-size: 26px; } }

.error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.error-page h1 { font-size: 28px; font-weight: 800; margin: 16px 0 8px; }
.error-page p { color: var(--muted); margin-bottom: 20px; }

/* ---------- dialog / bottom sheet ---------- */
.sheet { width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); border: 0; border-radius: 20px; padding: 20px 22px 22px; background: var(--bg-fff); color: var(--ink); box-shadow: 0 24px 60px rgba(20,25,33,.28); overflow-y: auto; }
.sheet::backdrop { background: rgba(20,25,33,.45); }
.sheet[open] { animation: sheetIn .32s var(--ease); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sheet-head b { font-size: 18px; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.seg-r { flex: 1; position: relative; }
.seg-r input { position: absolute; opacity: 0; inset: 0; }
.seg-r span { display: block; text-align: center; padding: 8px 12px; border-radius: 7px; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; }
.seg-r input:checked + span { background: var(--bg-fff); color: var(--ink); box-shadow: 0 1px 2px rgba(20,25,33,.12); }
.seg-r input[value="BUY"]:checked + span { color: var(--green-t); }
.seg-r input[value="SELL"]:checked + span { color: var(--red); }
.seg-r input:focus-visible + span { outline: 2px solid var(--green); }
@media (max-width: 860px) {
  .sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 92dvh; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); }
  .sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto 12px; }
  .sheet[open] { animation: sheetUp .34s var(--ease); }
  .g3 { grid-template-columns: 1fr 1fr; } .g3 label:last-child { grid-column: 1 / -1; }
}
@keyframes sheetUp { from { transform: translateY(100%); } }
.tbl tr.click { cursor: pointer; }
select.chip { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.sum-strip .link { display: inline-block; margin-top: 2px; }

/* ---------- kalender realtime ---------- */
.cal-day-h { position: sticky; top: 0; z-index: 1; background: var(--bg-fff); padding: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--border-2); }
.cal-next { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--navy); color: #fff; }
.cal-next small { color: var(--side-muted); font-size: 12px; display: block; }
.cal-next .cd-big { font-size: 28px; font-weight: 800; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.cal-next .cd-big.now { color: var(--red-d); }
.ev.past { opacity: .62; }
.ev.past:hover { opacity: 1; }
@keyframes evFlash { 0%, 30% { background: var(--ka-37-198-96-_22); } 100% { background: transparent; } }
.ev.fresh { animation: evFlash 3s ease-out; border-radius: 10px; }
.live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--green-t); }

/* ---------- kalender P/L portofolio ---------- */
.pcal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pcal-head b { font-size: 16px; min-width: 130px; text-align: center; }
.pcal-head .btn { min-height: 34px; padding: 0 12px; font-size: 18px; }
.pcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.pcal .dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding-bottom: 2px; }
.pd { min-height: 70px; border-radius: 12px; background: var(--page); border: 1px solid var(--border-2); padding: 8px 10px; display: flex; flex-direction: column; justify-content: space-between; }
.pd span { font-size: 13px; font-weight: 600; color: var(--muted); }
.pd b { font-size: 14px; font-weight: 800; }
.pd.blank { background: transparent; border: 0; }
.pd.pos { background: var(--green-tint); border-color: var(--k-c6ebd6); } .pd.pos span { color: var(--ink); } .pd.pos b { color: var(--green-t); }
.pd.neg { background: var(--red-tint); border-color: var(--k-f6cfcf); } .pd.neg span { color: var(--ink); } .pd.neg b { color: var(--red); }
.pd.today { outline: 2px solid var(--green); outline-offset: -1px; }
.pd.future { opacity: .55; }
@media (max-width: 860px) { .pcal { gap: 4px; } .pd { min-height: 52px; padding: 6px; border-radius: 9px; } .pd b { font-size: 12px; } .pd span { font-size: 12px; } }
.avatar img, .avatar-lg img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar { overflow: hidden; }
.photo-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.photo-row label.btn { cursor: pointer; }
/* level yang bisa disalin */
[data-copy][role="button"], .lv-grid [role="button"] { cursor: pointer; transition: transform .12s ease, box-shadow .18s ease; }
[data-copy][role="button"]:hover, .lv-grid [role="button"]:hover { box-shadow: 0 0 0 2px var(--ka-37-198-96-_35); }
[data-copy][role="button"]:active { transform: scale(.98); }
@keyframes copied { 0% { box-shadow: 0 0 0 0 var(--ka-37-198-96-_6); } 100% { box-shadow: 0 0 0 10px var(--ka-37-198-96-0); } }
.copied { animation: copied .6s ease-out; }
@media (max-width: 860px) { .sig-top { overflow: hidden; max-width: 100vw; } .inst-row { max-width: 100%; } }
.inst-row, .news-tools .snap { scroll-padding-inline: 16px; }
/* berita yang baru masuk */
@keyframes newsIn { 0% { background-color: var(--ka-37-198-96-_20); transform: translateY(-4px); } 100% { background-color: transparent; transform: none; } }
.news-new { animation: newsIn 2.4s var(--ease); border-radius: 10px; }
.feature.news-new { animation: none; box-shadow: 0 0 0 3px var(--ka-37-198-96-_6); }
#news-upd { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--green-t); font-weight: 600; }
.news-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.sym-tag { padding: 1px 7px; border-radius: 5px; background: var(--page); border: 1px solid var(--border); color: var(--ink); font-weight: 700; font-size: 12px; }
.sent { font-weight: 700; font-size: 12px; }

/* ---------- kalender mingguan ala Forex Factory ---------- */
.cal-week { padding: 20px 22px 16px; }
.calw-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.calw-head .seg { margin-left: auto; }
.up-next { display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--navy); color: #fff; flex-wrap: wrap; }
.up-next .un-l { color: var(--side-muted); font-size: 12px; font-weight: 600; }
.up-next .un-cd { font-size: 22px; font-weight: 800; letter-spacing: .01em; }
.up-next .un-n { font-size: 13px; font-weight: 600; color: var(--side-text); }
.up-next.soon .un-cd { color: var(--red-d); }
.up-next.live { box-shadow: 0 0 0 3px var(--ka-240-97-109-_35); }
.up-next.live .un-cd { animation: livePulse 1.2s ease-in-out infinite alternate; }
@keyframes livePulse { from { opacity: 1; } to { opacity: .6; } }
.calw-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.calw { width: 100%; border-collapse: collapse; font-size: 14px; }
.calw th { position: sticky; top: 0; background: var(--navy); color: var(--side-text); font-size: 12px; font-weight: 700; text-align: left; padding: 9px 12px; white-space: nowrap; }
.calw th.r, .calw td.r { text-align: right; }
.calw td { padding: 10px 12px; border-top: 1px solid var(--border-2); white-space: nowrap; vertical-align: middle; }
.calw tr.dayrow td { border-top: 1px solid var(--border); }
.calw .dcell { width: 74px; background: var(--page); border-right: 1px solid var(--border-2); vertical-align: top; }
.calw .dcell b { display: block; font-size: 13px; }
.calw .dcell span { font-size: 12px; color: var(--muted); }
.calw tr.today .dcell { background: var(--green-tint); }
.calw tr.today .dcell b { color: var(--green-t); }
.calw tr.empty td { height: 40px; }
.calw tr.pastday td:not(.dcell), .calw tr.past td:not(.dcell) { color: var(--muted); }
.calw .ename { white-space: normal; min-width: 200px; font-weight: 600; }
.calw tr.past .ename { font-weight: 500; }
.calw .tcell { width: 86px; font-weight: 700; }
.calw .row-cd { display: block; font-size: 12px; font-weight: 800; color: var(--red); }
.calw tr.nextrow td:not(.dcell) { background: var(--red-tint); }
.calw .act b { font-weight: 800; }
.calw .waiting { font-size: 12px; font-weight: 700; color: var(--red); animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.imp { display: inline-block; width: 16px; height: 12px; border-radius: 2px; vertical-align: middle; }
.imp3 { background: var(--k-c81e1e); } .imp2 { background: #F08C2E; } .imp1 { background: #F5C542; }
@keyframes rowFresh { 0%, 40% { background: var(--ka-37-198-96-_28); } 100% { background: transparent; } }
.calw tr.fresh td:not(.dcell) { animation: rowFresh 4s ease-out; }
@media (max-width: 860px) {
  .cal-week { padding: 14px 12px; }
  .calw-head .seg { margin-left: 0; width: 100%; }
  .up-next { width: 100%; }
  .calw-wrap { border: 0; border-radius: 0; overflow: visible; }
  .calw thead { display: none; }
  .calw, .calw tbody, .calw tr { display: block; width: 100%; }
  .calw tr { display: grid; grid-template-columns: 50px 40px 20px 1fr 1fr 1fr; column-gap: 8px; row-gap: 4px; padding: 9px 6px; border-top: 1px solid var(--border-2); align-items: center; }
  .calw td { display: block; padding: 0; border: 0 !important; white-space: normal; }
  .calw .dcell { grid-column: 1 / -1; background: transparent; padding: 6px 0 2px; border: 0; width: auto; }
  .calw .dcell b, .calw .dcell span { display: inline; font-size: 13px; margin-right: 6px; }
  .calw tr.dayrow { border-top: 2px solid var(--border); }
  .calw tr.today .dcell { background: transparent; }
  .calw .tcell { width: auto; font-size: 13px; }
  .calw .ename { min-width: 0; grid-column: 4 / 7; }
  .calw td.r { text-align: left; font-size: 12px; color: var(--muted); }
  .calw td.r:nth-last-child(2) { grid-column: 4 / 5; } .calw td.r:last-child { grid-column: 5 / 7; }
  .calw td.r::before { content: attr(data-l) " "; font-weight: 400; }
  .calw td.r:empty { display: none; }
  .calw td.act { grid-column: 1 / 4; }
  .calw tr.empty { display: grid; padding: 4px 6px; }
  .calw tr.empty td:not(.dcell) { display: none; }
  .calw tr.empty .dcell span::after { content: ", tidak ada jadwal"; color: var(--muted); }
  .calw tr.nextrow { background: var(--red-tint); border-radius: 10px; }
  .calw tr.nextrow td:not(.dcell) { background: transparent; }
}

/* kotak rilis berikutnya (besar) */
.up-next2 { background: var(--navy); color: #fff; border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; }
.un-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.un-l { font-size: 12px; font-weight: 700; color: var(--side-muted); }
.up-next2.live .un-l, .up-next2.soon .un-l { color: var(--red-d); }
.up-next2.done .un-l { color: var(--green); }
.un-top .un-n { font-size: 16px; }
.un-t { color: var(--side-text); font-size: 13px; }
.un-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 10px; margin-top: 12px; align-items: stretch; }
.un-cdbox, .un-stat { background: var(--navy-2); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; }
.un-cdbox span, .un-stat span { font-size: 12px; color: var(--side-muted); font-weight: 600; }
.un-cdbox b { font-size: 26px; font-weight: 800; letter-spacing: .01em; }
.un-stat b { font-size: 22px; font-weight: 800; }
.un-stat b.up { color: var(--green); } .un-stat b.down { color: var(--red-d); }
.up-next2.soon .un-cdbox b, .up-next2.live .un-cdbox b { color: var(--red-d); }
.up-next2.live .un-cdbox { box-shadow: inset 0 0 0 2px var(--ka-240-97-109-_55); }
.up-next2.live .un-cdbox b { animation: livePulse 1.2s ease-in-out infinite alternate; }
.up-next2.live #un-act { animation: blink 1s steps(2, start) infinite; }
.un-btn { background: var(--navy-3); border-color: var(--navy-3); color: #fff; min-height: 100%; }
.un-btn:hover { background: #3d424a; border-color: #3d424a; }
.un-v { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--side-text); }
.un-v.up { color: var(--green); } .un-v.down { color: var(--red-d); }
@keyframes boxFlash { 0% { box-shadow: 0 0 0 0 var(--ka-37-198-96-_7); } 100% { box-shadow: 0 0 0 14px var(--ka-37-198-96-0); } }
.up-next2.flash { animation: boxFlash 1s ease-out 1; }
/* baris kalender bisa dibuka */
.calw tr.evrow { cursor: pointer; }
@media (hover: hover) { .calw tr.evrow:hover td:not(.dcell) { background: var(--bg-f3f6f9); } }
.calw .chev { display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.calw tr.open .chev { transform: rotate(-135deg); }
.calw tr.detail-row td { padding: 0; background: var(--bg-f9fafb); white-space: normal; border-top: 0; }
.ev-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; padding: 14px 16px 18px; animation: rise .35s var(--ease); }
.ev-detail h3 { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.spec { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-2); font-size: 13px; }
.spec span { color: var(--muted); font-weight: 600; }
.hist { width: 100%; border-collapse: collapse; font-size: 13px; }
.hist th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 8px; background: transparent; position: static; }
.hist td { padding: 7px 8px; border-top: 1px solid var(--border-2); white-space: nowrap; }
.hist .r { text-align: right; }
.rel { display: block; padding: 8px 0; border-top: 1px solid var(--border-2); font-size: 13px; }
.rel b { display: block; font-weight: 600; }
.rel span { color: var(--muted); font-size: 12px; }
.rel:hover b { text-decoration: underline; }
@media (max-width: 860px) {
  .un-row { grid-template-columns: 1fr 1fr 1fr; }
  .un-cdbox { grid-column: 1 / -1; }
  .un-btn { grid-column: 1 / -1; min-height: 40px; }
  .un-stat b { font-size: 18px; }
  .calw tr.detail-row { display: block; padding: 0; border-top: 0; }
  .calw tr.detail-row td { display: block; }
  .ev-detail { grid-template-columns: 1fr; gap: 12px; padding: 12px 8px; }
  .spec { grid-template-columns: 1fr; gap: 2px; }
}

.sum-strip .sum-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 600; }

/* ---------- Bantuan website (tombol mengambang + chat) ---------- */
.help-fab { position: fixed; right: 28px; bottom: 28px; z-index: 50; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 15px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 10px 28px rgba(20,25,33,.35); transition: transform .2s var(--ease); }
.help-fab:hover { transform: translateY(-2px); }
.help-dim { display: none; }
.help-panel { position: fixed; right: 28px; bottom: 28px; z-index: 70; width: 380px; height: min(600px, calc(100dvh - 120px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--bg-fff); box-shadow: 0 24px 60px rgba(20,25,33,.32); font-size: 14px; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98); transform-origin: bottom right; transition: opacity .18s, transform .2s var(--ease), visibility 0s .2s; }
.help.open .help-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .2s var(--ease); }
.help.open .help-fab { opacity: 0; pointer-events: none; }
.help-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 14px 14px 16px; background: var(--navy); color: #fff; }
.help-av { width: 40px; height: 40px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; flex: none; }
.help-tt { flex: 1; min-width: 0; } .help-tt b { display: block; font-size: 15px; } .help-tt small { color: #9CA3AF; font-size: 12px; }
.help-head button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #31353C; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; flex: none; }
.help-head .help-reset { font-size: 16px; }
.help-log { flex: 1; overflow-y: auto; padding: 16px; background: var(--page); display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.help-msg { max-width: 86%; padding: 10px 12px; line-height: 1.5; animation: rise .25s var(--ease) both; }
.help-msg.bot { align-self: flex-start; background: var(--bg-fff); border: 1px solid var(--border); border-radius: 4px 14px 14px 14px; }
.help-msg.me { align-self: flex-end; background: var(--navy); color: #fff; border-radius: 14px 4px 14px 14px; }
.help-msg a { color: var(--green-t); font-weight: 700; }
.help-msg .help-tg { display: inline-flex; margin-top: 10px; padding: 7px 12px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 13px; }
.help-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.help-chips button { padding: 7px 11px; border-radius: 999px; background: var(--bg-fff); border: 1px solid var(--green); color: var(--green-t); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.help-chips button:hover { background: var(--green-tint); }
.help-form { flex: none; display: flex; gap: 8px; padding: 12px 14px 4px; border-top: 1px solid var(--border-2); background: var(--bg-fff); }
.help-in { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--bd-d1d5dc); background: var(--bg-f9fafb); font: inherit; font-size: 15px; }
.help-in:focus { outline: 2px solid var(--green); outline-offset: 0; background: var(--bg-fff); }
.help-form button { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--green); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.help-note { flex: none; margin: 0; padding: 6px 14px 12px; background: var(--bg-fff); color: var(--muted); font-size: 12px; text-align: center; }
.help-note a { color: var(--green-t); font-weight: 700; }
@media (max-width: 860px) {
  .help-fab { right: 16px; bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom)); width: 52px; height: 52px; padding: 0; justify-content: center; }
  .help-fab-l { display: none; }
  body:has(.fab) .help-fab { bottom: calc(var(--tab-h) + 80px + env(safe-area-inset-bottom)); }
  .help.open .help-dim { display: block; position: fixed; inset: 0; z-index: 69; background: rgba(20,25,33,.45); }
  .help-panel { left: 0; right: 0; bottom: 0; width: auto; height: 88dvh; border-radius: 22px 22px 0 0; transform: translateY(24px); transform-origin: bottom center; }
  .help-note { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .help-panel, .help-fab, .help-msg { transition: none; animation: none; } }

/* Portofolio: dua grafik batang berdampingan di laptop, bertumpuk di HP (tidak melebar keluar layar) */
.porto-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.porto-bars > .card { min-width: 0; }
.vbars div { min-width: 0; }
.vbars small, .vbars b { white-space: nowrap; }
@media (max-width: 860px) {
  .porto-bars { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vbars { gap: 8px; height: 190px; }
  .vbars b { font-size: 12px; }
}

/* Form di HP: kolom tanggal iPhone punya lebar minimum bawaan, jangan sampai mendorong form keluar layar */
.g2 > *, .g3 > * { min-width: 0; }
.f input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; text-align: left; line-height: 42px; }
.f input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.sheet { overflow-x: hidden; }
@media (max-width: 860px) {
  .sheet { width: 100%; box-sizing: border-box; touch-action: pan-y; }
  .sheet.dragging { transition: none; }
  .sheet.closing { transition: transform .2s ease-in; }
  .sheet::before { width: 44px; height: 5px; border-radius: 3px; background: #C9CFD8; margin: 2px auto 14px; }
}

/* Tombol Batal dapat fokus otomatis saat form dibuka: jangan tampilkan bingkai hijau kecuali pakai keyboard */
.sheet-head button:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* Kinerja: perubahan di dalam chart tidak memicu hitung ulang di luar chart */
.pane .plot, .pane .axis, .pane-vol, #time { contain: layout paint; }
.tick { will-change: background-color; }

/* Chart bisa digeser & di-zoom */
.pane-main .plot { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; outline: none; }
.pane-main .plot.grabbing { cursor: grabbing; }
.pane-main .plot:focus-visible { box-shadow: inset 0 0 0 2px var(--green); }
.c-latest { position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 6px 12px; border-radius: 999px; border: 0; background: var(--green); color: var(--navy); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.c-latest[hidden] { display: none; }

/* Bullseye v5.1 (PDBE): digambar bullseye.js, angka dari MT5 */
.be-box { position: absolute; pointer-events: none; opacity: .78; }
.be-box.rt { opacity: .55; }
.be-hl { position: absolute; height: 0; pointer-events: none; opacity: .9; }
.be-sr { position: absolute; left: 0; right: 0; height: 0; pointer-events: none; }
.be-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.be-svg polyline { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.be-txt { position: absolute; font: 600 11px/1 Consolas, ui-monospace, monospace; white-space: nowrap; pointer-events: none; text-shadow: 0 0 2px #000; }
.be-leg { position: absolute; top: 6px; right: 8px; z-index: 3; border: 1px solid rgba(255,195,30,.4); background: rgba(16,21,28,.82); color: #FFC31E; font: inherit; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; cursor: pointer; }
.be-leg[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
.be-panel { position: absolute; top: 32px; left: 8px; z-index: 2; width: 330px; max-width: calc(100% - 16px); background: #0b0b11; border-left: 3px solid #FFC31E; box-shadow: 4px 4px 0 #040407; color: #a5a5b9; font: 11px/1.35 Consolas, ui-monospace, monospace; pointer-events: auto; }
.be-panel.shut { width: auto; background: rgba(11,11,17,.85); box-shadow: none; }
.be-tog { display: block; width: 100%; text-align: left; background: #0f0f18; color: #c8c8dc; border: 0; font: inherit; font-weight: 700; padding: 5px 9px; cursor: pointer; }
.be-ma { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px; }
.be-ma span { font-size: 10px; }
.be-head { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px 8px; background: #0f0f18; border-bottom: 2px solid #1c1c2e; }
.be-t1 { color: #FFC31E; font-size: 14px; } .be-t2 { color: #a08c3c; font-size: 10px; }
.be-sm { color: #c8c8dc; margin-top: 3px; }
.be-ov { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 96px; border: 1px solid; border-radius: 4px; padding: 3px 6px; font-weight: 700; }
.be-ov small { color: #787896; font-weight: 400; }
.be-rows { width: 100%; border-collapse: collapse; }
.be-rows th { color: #4e4e69; font-weight: 400; font-size: 9px; text-align: left; padding: 3px 4px; border-bottom: 1px solid #161624; }
.be-rows td { padding: 5px 4px; vertical-align: top; white-space: nowrap; }
.be-rows tr:nth-child(odd) td { background: #0e0e16; } .be-rows tr:nth-child(even) td { background: #12121c; }
.be-rows td small { display: block; font-size: 8px; opacity: .9; }
.be-rows td.tf { color: #dcc364; font-weight: 700; }
.be-sig { display: inline-block; padding: 2px 4px; border-radius: 3px; font-weight: 700; }
.be-sig.b { background: var(--k-002818); } .be-sig.s { background: var(--k-2c0a0e); } .be-sig.w { background: #11111b; }
.be-ft { padding: 4px 9px; background: #10101c; border-top: 1px solid #161624; color: #a5a5b9; }
.be-ft b { color: #af9b4b; font-weight: 400; margin-right: 6px; }
.be-foot { padding: 5px 9px 7px; color: #3a3a50; font-size: 9px; border-top: 1px solid #1a1a2a; }
@media (max-width: 860px) { .be-panel { width: 290px; font-size: 10px; } .be-rows td { padding: 4px 3px; } }

/* ENGULF-OFF: tombol Engulfing dihapus, panel Bullseye naik ke atas */
.be-panel { top: 6px; }

/* PDBE-V5: sinyal entry aturan tim */
.be-en-l { position: absolute; right: 0; height: 0; pointer-events: none; opacity: .95; }
.be-en-t { position: absolute; right: 4px; transform: translateY(-110%); font: 700 10px/1 Consolas, ui-monospace, monospace; pointer-events: none; text-shadow: 0 0 3px #000; }
.be-en-ar { position: absolute; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; font-size: 14px; line-height: 1; pointer-events: none; text-shadow: 0 0 3px #000; }
.be-en-ar b { font: 800 9px/1.2 Consolas, ui-monospace, monospace; }
.be-en-ar.up { color: var(--k-00e676); } .be-en-ar.dn { color: var(--k-ff4d5e); transform: translate(-50%, -100%); flex-direction: column-reverse; }

/* TABLET-FIX: lembar Sinyal selebar layar; tablet portrait 2 kolom */
@media (max-width: 860px) {
  .sig-page { align-items: stretch; }
  .sig-panel { align-self: stretch; width: 100%; }
}
@media (min-width: 600px) and (max-width: 860px) {
  .sig-side { display: grid !important; grid-template-columns: 1fr 1fr; align-items: start; }
  .sig-side .card + .card { border-top: 0; border-left: 1px solid var(--border-2); padding-top: 6px; }
  .sig-side > :not(.card) { grid-column: 1 / -1; }
}

/* ANALISA-TESTER: zoom, analisa ringkas di sebelah chart, cara baca chart, tester sinyal */
.c-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 4; display: flex; gap: 4px; }
.c-zoom button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(16,21,28,.85); color: #fff; font: inherit; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; }
.c-zoom button:hover { background: var(--navy-3); }
.c-zoom button:focus-visible { outline: 2px solid var(--green); }
.an-card { grid-area: an; }

.tester-card { grid-area: tester; }
.run-card { grid-area: run; }
.param-card { grid-area: param; }
@media (min-width: 861px) { .sig-page { grid-template-areas: "chips" "focus" "chart" "run" "an" "tester"; } }
@media (min-width: 1200px) {
  .sig-page { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "chips chips" "focus focus" "chart run" "an an" "tester tester"; }
  .run-card, .an-card, .param-card { align-self: stretch; }
  .sig-side { grid-template-columns: 1fr !important; }
}
.ax-verdict { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--page); border-left: 4px solid var(--muted); }
.ax-verdict b { display: block; font-size: 15px; }
.ax-verdict span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.ax-verdict.buy { border-left-color: var(--green); background: var(--green-tint); }
.ax-verdict.sell { border-left-color: var(--red); background: var(--red-tint); }
.ax-verdict.soft { background: var(--page); }
.ax-verdict.wait { border-left-color: #F59E0B; }
.ax-list { list-style: none; margin: 12px 0 0; padding: 0; }
.ax-list li { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-2); font-size: 13px; }
.ax-list li:last-child { border-bottom: 0; }
.ax-list b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ax-list small { color: var(--muted); font-weight: 500; margin-left: 4px; }
.ax-i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--page); color: var(--muted); }
.ax-list .ok .ax-i { background: var(--green-tint); color: var(--green-t); }
.ax-list .no .ax-i { background: var(--red-tint); color: var(--red); }
.axk { color: var(--muted); }
.ax-ai { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-2); }
.ax-ai-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.ax-ai p { font-size: 13px; margin-top: 6px; line-height: 1.5; }
.ax-ai .ax-inv { color: var(--muted); font-size: 12px; }
.gd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; margin-top: 12px; }
.gd-grid > div { display: flex; gap: 10px; align-items: flex-start; }
.gd-grid p { font-size: 13px; color: var(--muted); line-height: 1.45; }
.gd-grid b { display: block; color: var(--ink); font-size: 13px; }
.sw { flex: none; width: 26px; height: 18px; border-radius: 4px; margin-top: 2px; }
.sw.ln { height: 0; border-top: 3px solid; border-radius: 0; margin-top: 10px; background: none; }
.sw.ar { background: none; color: var(--green); font-style: normal; font-weight: 800; text-align: center; }
.gd-steps { margin: 14px 0 0; padding: 12px 14px 12px 32px; border-radius: 12px; background: var(--page); font-size: 13px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 24px; }
.gd-steps li { color: var(--muted); }
.gd-steps b { color: var(--ink); }
.ts-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.ts-filters .seg { flex: none; }
.ts-sel { min-width: 140px; }
.ts-sel select { min-height: 38px; font-size: 13px; }
.ts-stats { display: grid; grid-template-columns: 1.6fr repeat(6, minmax(0, 1fr)); margin-top: 14px; border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; }
.ts-stats > div { padding: 12px 14px; border-left: 1px solid var(--border-2); display: flex; flex-direction: column; gap: 4px; }
.ts-stats > div:first-child { border-left: 0; }
.ts-stats span { font-size: 12px; color: var(--muted); font-weight: 600; }
.ts-stats b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ts-win b { font-size: 26px; }
.ts-win small { font-size: 12px; }
.ts-table { margin-top: 14px; overflow-x: auto; }
.ts-table table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.ts-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border-2); }
.ts-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-2); white-space: nowrap; }
.ts-table .r { text-align: right; }
@media (max-width: 1100px) { .ts-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ts-stats > div:nth-child(5) { border-left: 0; } .ts-stats > div:nth-child(n+5) { border-top: 1px solid var(--border-2); } .ts-win { grid-row: span 1; } }
@media (max-width: 1000px) { .gd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .sig-scroll > .card { border: 0; border-radius: 0; padding: 6px 18px 16px; border-top: 1px solid var(--border-2); }
  .sig-scroll > .run-card { border-top: 0; }
  .gd-grid { grid-template-columns: 1fr; gap: 10px; }
  .gd-steps { grid-template-columns: 1fr; }
  .ts-stats { grid-template-columns: 1fr 1fr; }
  .ts-stats > div { border-left: 0 !important; border-top: 1px solid var(--border-2); }
  .ts-stats > div:nth-child(2n+1):not(:first-child) { border-left: 1px solid var(--border-2) !important; }
  .ts-stats > .ts-win { grid-column: 1 / -1; border-top: 0; }
  .ts-filters .seg { width: 100%; }
  .ts-sel { flex: 1; min-width: 0; }
  .c-zoom button { width: 34px; height: 34px; }
}
.s-empty { margin-top: 12px; padding: 16px; border-radius: 12px; background: var(--page); }
.s-empty b { display: block; font-size: 15px; }
.s-empty span { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
#s-body[hidden], .s-empty[hidden] { display: none; }

/* FOKUS: pilihan pair + TF member */
.focus-bar { grid-area: focus; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--bg-fff); border: 1px solid var(--border-2); margin-top: -8px; }
.fb-l { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); flex: none; }
.fb-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; min-width: 0; font-size: 13px; }
.fb-pair { display: inline-flex; align-items: center; gap: 4px; }
.fb-pair b { font-size: 13px; margin-right: 2px; }
.fb-tf { position: relative; border: 1px solid var(--border); background: var(--bg-fff); border-radius: 7px; padding: 3px 8px; font: inherit; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; }
.fb-tf[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.fb-dot { position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px #fff; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; flex: none; }
.inst.fav b::after { content: '★'; color: #F59E0B; font-size: 10px; margin-left: 4px; vertical-align: 2px; }
.fx { margin-top: 14px; border-top: 1px solid var(--border-2); padding-top: 10px; }
.fx:empty { display: none; }
.fx-h, .fx-other summary { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); padding: 4px 0; }
.fx-other { margin-top: 8px; }
.fx-other summary { cursor: pointer; color: var(--muted); }
.fx-row { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 0; border: 0; border-bottom: 1px solid var(--border-2); background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--ink); }
.fx-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.fx-row .fx-st { grid-column: 2 / -1; font-size: 12px; color: var(--green-t); }
.fx-row .fx-st.muted { color: var(--muted); }
.fx-row:hover b { text-decoration: underline; }
.fx-empty { font-size: 13px; padding: 6px 0; }
.fk-h { font-size: 13px; font-weight: 800; margin-top: 16px; }
.fk-grid, .fk-tfs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fk-grid .chip, .fk-tfs .chip { cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }
.ts-fok td:first-child { box-shadow: inset 3px 0 0 var(--green); }
@media (max-width: 860px) {
  .focus-bar { margin: 8px 16px 0; padding: 6px 6px 6px 12px; gap: 8px; background: var(--navy-2); border-color: transparent; color: #fff; flex-wrap: nowrap; }
  .focus-bar .fb-l { display: none; }
  .fb-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 12px; white-space: nowrap; }
  .fb-chips::-webkit-scrollbar { display: none; }
  .fb-chips > .muted { white-space: normal; font-size: 12px; }
  .fb-pair { flex: none; }
  .focus-bar .muted { color: var(--side-muted); }
  .fb-l { color: var(--side-muted); }
  .fb-tf { background: transparent; border-color: rgba(255,255,255,.2); color: var(--side-muted); }
  .fb-tf[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--navy); }
  .fb-dot { box-shadow: 0 0 0 2px var(--navy-2); }
  .focus-bar .btn-sm { min-height: 30px; background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
}
/* HARGA-TERAKHIR: tidak ada tick baru (market tutup) */
.inst.stale span::after, .mkt a.stale small::after { content: 'terakhir'; margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 700; background: rgba(148,163,184,.22); color: var(--muted); vertical-align: 1px; }
.inst.stale[aria-pressed="true"] span::after { background: rgba(20,25,33,.18); color: inherit; }
.c-latest { right: 86px; }
/* PARAMETER SINYAL: panel indikator tim tampil di kartu, bukan di atas chart */
.pm-box { margin-top: 10px; }
.be-panel.be-static { position: static; width: auto; max-width: none; box-shadow: none; border-radius: 10px; overflow: hidden; }
.be-panel.be-static .be-rows { width: 100%; }
.ts-table[hidden] { display: none; }
#ts-sum { margin-top: 14px; }
.ax-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ax-meta > div { background: var(--page); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ax-meta span { font-size: 12px; color: var(--muted); font-weight: 600; }
.ax-meta b { font-size: 13px; }
.ax-meta .meter { display: block; height: 4px; margin-top: 4px; }
.ax-ai .ax-notes { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-2); color: var(--muted); font-size: 12px; }
.ax-ai .ax-notes b { display: block; color: var(--ink); font-size: 12px; margin-bottom: 2px; }
.ax-notes[hidden] { display: none; }
@media (max-width: 600px) { .ax-meta { grid-template-columns: 1fr 1fr; } .ax-meta > div:first-child { grid-column: 1 / -1; } }
/* HITUNG LOT: teks yang bisa dipencet, membuka jendela kalkulator */
.lot-link { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 6px 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--green-t); cursor: pointer; }
.lot-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.lot-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }
#dlg-lot .lot-out { margin-top: 16px; }
/* ANALISA GABUNGAN + REASON + PANDUAN CHART */
.an-grid { display: grid; gap: 16px; margin-top: 2px; }
@media (min-width: 1200px) { .an-grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); align-items: start; } .an-side { border-left: 1px solid var(--border-2); padding-left: 18px; } }
.an-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 0 2px; display: flex; gap: 8px; align-items: baseline; }
.an-h .muted { text-transform: none; letter-spacing: 0; font-weight: 600; }
.an-side .ax-list { margin-top: 2px; }
.ax-ai .ax-sum { font-size: 15px; font-weight: 700; line-height: 1.45; margin-top: 8px; color: var(--ink); }
.ax-pts { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.ax-pts li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-2); font-size: 13px; line-height: 1.5; }
.ax-pts .pk { font-size: 12px; font-weight: 700; color: var(--muted); padding-top: 1px; }
.ax-box { margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.ax-box b { display: block; font-size: 12px; margin-bottom: 2px; }
.ax-box[hidden] { display: none; }
.ax-batal { background: var(--red-tint); } .ax-batal b { color: var(--red); }
.ax-waspada { background: var(--bg-fef6e4); } .ax-waspada b { color: var(--tx-b45309); }
@media (max-width: 600px) { .ax-pts li { grid-template-columns: 1fr; gap: 2px; } }
/* RIWAYAT SINYAL */
.ts-split { font-size: 12px; margin-top: 8px; }
.ts-tag { display: inline-block; margin-right: 8px; padding: 1px 6px; border-radius: 6px; background: var(--page); color: var(--muted); font-size: 12px; font-weight: 700; }
.ts-more { margin-top: 12px; }
.ts-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--green-t); }
/* AGEN ALERT SINYAL (di atas tombol Bantuan website) */
.sig-alert { position: fixed; right: 28px; bottom: 96px; z-index: 49; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
body:has(.help.open) .sig-alert { opacity: 0; pointer-events: none; }
.sa-fab { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 15px; border: 0; border-radius: 999px; background: var(--bg-fff); color: var(--navy); font: inherit; font-weight: 700; font-size: 14px; box-shadow: 0 10px 28px rgba(20,25,33,.22); cursor: pointer; transition: transform .2s var(--ease); order: 3; }
.sa-fab:hover { transform: translateY(-2px); }
.sa-fab:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.sa-n { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red); color: var(--di-turun); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.sa-n[hidden] { display: none; }
.sa-toast { order: 2; display: flex; align-items: center; gap: 10px; max-width: 300px; padding: 10px 14px; border: 0; border-radius: 14px; background: var(--navy); color: #fff; font: inherit; text-align: left; box-shadow: 0 12px 30px rgba(20,25,33,.3); cursor: pointer; animation: sa-in .25s var(--ease); }
.sa-toast[hidden] { display: none; }
.sa-toast b { display: block; font-size: 13px; } .sa-toast small { color: #9CA3AF; font-size: 12px; }
@keyframes sa-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sa-panel { order: 1; width: 340px; max-height: min(460px, calc(100dvh - 220px)); display: none; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--bg-fff); box-shadow: 0 24px 60px rgba(20,25,33,.3); }
.sig-alert.open .sa-panel { display: flex; animation: sa-in .2s var(--ease); }
.sa-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border-2); }
.sa-head b { display: block; font-size: 15px; } .sa-head small { color: var(--muted); font-size: 12px; }
.sa-list { overflow-y: auto; padding: 4px 8px; }
.sa-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--border-2); background: none; font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.sa-row:last-child { border-bottom: 0; }
.sa-row:hover { background: var(--page); }
.sa-row.new { background: var(--green-tint); }
.sa-m b { display: block; font-size: 14px; } .sa-m small { color: var(--muted); font-size: 12px; }
.sa-row .num { font-size: 13px; font-weight: 700; }
.sa-empty { font-size: 13px; padding: 14px 8px; }
.sa-foot { font-size: 12px; color: var(--muted); padding: 8px 16px 12px; border-top: 1px solid var(--border-2); }
.fx-alert { display: block; width: 100%; margin-top: 10px; padding: 8px 0 0; border: 0; border-top: 1px solid var(--border-2); background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--green-t); text-align: left; cursor: pointer; }
@media (max-width: 860px) {
  .sig-alert { right: 16px; bottom: calc(var(--tab-h) + 80px + env(safe-area-inset-bottom)); }
  .sa-fab { width: 52px; padding: 0; justify-content: center; } .sa-l { display: none; }
  .sa-panel { width: calc(100vw - 32px); }
}
/* RENCANA SEMENTARA (belum ada sinyal aktif) */
.ax-plan { margin-top: 12px; }
.pl-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.pl-act { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.pl-act.wait { background: var(--bg-fef3c7); color: var(--tx-92400e); }
.pl-act.ready { background: var(--green-tint); color: var(--green-t); }
.pl-side { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--page); color: var(--muted); }
.pl-side.buy { background: var(--green-tint); color: var(--green-t); }
.pl-side.sell { background: var(--red-tint); color: var(--red); }
.pl-ai { background: var(--navy); color: #fff; }
.pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.pl-grid > div { background: var(--page); border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-grid span { font-size: 12px; color: var(--muted); font-weight: 600; }
.pl-grid b { font-size: 14px; line-height: 1.35; }
.pl-grid small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.pl-h { font-size: 12px; font-weight: 800; color: var(--muted); margin: 12px 0 4px; }
.pl-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; line-height: 1.5; }
.pl-foot { font-size: 12px; color: var(--muted); margin-top: 10px; }
.s-plan { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-2); }
.s-plan p { font-size: 13px; margin-top: 6px; color: var(--ink); line-height: 1.45; }
.s-plan .pl-area { color: var(--muted); }
.s-plan[hidden], .ax-plan[hidden] { display: none; }
@media (max-width: 600px) { .pl-grid { grid-template-columns: 1fr; } }
/* Alert sinyal: tanda notifikasi baru */
.has-new .sa-fab { background: var(--bg-fff5f5); color: var(--red); box-shadow: 0 0 0 2px var(--ka-240-68-56-_35), 0 10px 28px rgba(20,25,33,.22); }
.has-new .sa-fab svg { color: var(--red); animation: sa-ring 1.4s ease-in-out 2; transform-origin: 50% 10%; }
.has-new .sa-fab::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--red); animation: sa-pulse 1.6s ease-out 3; opacity: 0; pointer-events: none; }
@keyframes sa-ring { 0%, 50%, 100% { transform: rotate(0); } 10% { transform: rotate(16deg); } 20% { transform: rotate(-14deg); } 30% { transform: rotate(10deg); } 40% { transform: rotate(-6deg); } }
@keyframes sa-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
.sig-alert.ring .sa-fab { animation: sa-bump .5s var(--ease) 2; }
@keyframes sa-bump { 50% { transform: scale(1.08); } }
.sa-n { box-shadow: 0 0 0 2px #fff; }
@media (prefers-reduced-motion: reduce) { .has-new .sa-fab svg, .has-new .sa-fab::before, .sig-alert.ring .sa-fab { animation: none; } }
/* Alert sinyal: header rapi + ikon */
.sig-alert { gap: 12px; }
.sa-panel { width: 360px; }
.sa-head { display: block; padding: 12px 10px 10px 16px; }
.sa-tr { display: flex; align-items: center; gap: 4px; }
.sa-tr b { flex: 1; font-size: 15px; }
.sa-head .sa-sub { display: block; margin-top: 1px; padding-right: 8px; }
.sa-ib { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.sa-ib:hover { background: var(--page); color: var(--ink); }
.sa-ib:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.sa-snd[aria-pressed="true"] { color: var(--green-t); }
.sa-snd .off, .sa-snd[aria-pressed="false"] .on { display: none; }
.sa-snd[aria-pressed="false"] .off { display: inline; }
.sa-fab:focus:not(:focus-visible) { outline: none; }
.sa-r { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.sa-r small { font-size: 12px; color: var(--muted); }
/* Alert sinyal: teks berjalan di atas layar */
.sa-ticker { position: fixed; left: 0; right: 0; top: var(--top-h); z-index: 60; height: 40px; padding: 0; border: 0; overflow: hidden; background: linear-gradient(90deg, var(--k-0f7a3d), var(--k-14532d)); color: #fff; font: inherit; font-size: 14px; cursor: pointer; box-shadow: 0 6px 18px rgba(20,25,33,.25); }
.sa-ticker[hidden] { display: none; }
.sa-tk-in { position: absolute; top: 0; left: 0; height: 100%; display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; transform: translateX(100vw); will-change: transform; }
.sa-tk-in b { font-weight: 800; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.95); }
.sa-tk-in b.up { color: var(--green-t); } .sa-tk-in b.down { color: var(--red); }
.sa-tk-in i { font-style: normal; opacity: .6; }
.sa-tk-l { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; background: #FACC15; color: #1F2937; padding: 3px 9px; border-radius: 6px; }
.sa-tk-c { opacity: .8; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
@keyframes sa-marquee { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }
@media (max-width: 860px) { .sa-ticker { top: 0; height: 36px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .sa-tk-in { animation: none !important; transform: none; padding-left: 16px; } }
/* TREN PER TIMEFRAME (versi sederhana) */
.pm-box .tt-sum { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 9px 12px; border-radius: 10px; background: var(--page); font-size: 13px; }
.tt-sum b { font-size: 12px; letter-spacing: .04em; }
.tt-sum.up { background: var(--green-tint); } .tt-sum.up b { color: var(--green-t); }
.tt-sum.down { background: var(--red-tint); } .tt-sum.down b { color: var(--red); }
.tt-sum.wait { background: var(--bg-fef6e4); } .tt-sum.wait b { color: var(--tx-b45309); }
.tt-tab { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
.tt-tab th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px 6px; border-bottom: 1px solid var(--border-2); }
.tt-tab td { padding: 8px 6px; border-bottom: 1px solid var(--border-2); }
.tt-tab .r { text-align: right; }
.tt-tab tr.cur td { background: var(--page); } .tt-tab tr.cur td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.tt { font-weight: 700; color: var(--muted); } .tt.up { color: var(--green-t); } .tt.down { color: var(--red); }
.tk { display: inline-flex; gap: 2px; margin-right: 6px; vertical-align: middle; }
.tk i { width: 6px; height: 12px; border-radius: 2px; background: var(--border-2); } .tk i.on { background: #F59E0B; }
.ts { display: inline-block; min-width: 54px; text-align: center; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: var(--page); color: var(--muted); }
.ts.up { background: var(--green-tint); color: var(--green-t); } .ts.down { background: var(--red-tint); color: var(--red); }
/* chart tanpa data MT5 */
.c-none { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px; color: #9CA3AF; font-size: 13px; }
.c-none b { color: #E5E7EB; font-size: 15px; }
/* sub-window RSI / Stochastic seperti MT5 */
.pane-sub { height: 110px; border-top: 1px solid var(--line-d); }
.pane-sub[hidden] { display: none; }
.pane-sub .inset { inset: 6px 0; }
.pane-sub .ind-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sub-lbl { position: absolute; left: 8px; top: 4px; display: flex; gap: 10px; font-size: 11px; pointer-events: none; }
.sub-lbl b { font-weight: 700; }
@media (max-width: 860px) { .pane-sub { height: 76px; } .sub-lbl { font-size: 10px; } }
/* Alert indikator di kartu Analisa */
.ax-ev { margin-top: 12px; }
.ax-ev[hidden] { display: none; }
.ax-ev-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.ax-ev-list li { padding: 9px 12px; border-radius: 10px; background: var(--page); border-left: 3px solid var(--muted); font-size: 13px; line-height: 1.45; }
.ax-ev-list li.up { border-left-color: var(--green); } .ax-ev-list li.down { border-left-color: var(--red); }
.ev-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ev-h b { font-size: 13px; } .ev-h span { color: var(--muted); font-size: 12px; } .ev-h time { margin-left: auto; color: var(--muted); font-size: 12px; }
.ax-ev-list p { margin-top: 3px; } .ax-ev-list .ev-rule { color: var(--muted); }
/* tab di panel Alert */
.sa-tabs { display: flex; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid var(--border-2); }
.sa-tab { flex: 1; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); padding: 8px 4px; border-bottom: 2px solid transparent; cursor: pointer; }
.sa-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--green); }
.sa-tn { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: var(--di-turun); font-size: 10px; line-height: 16px; }
.sa-tn:empty { display: none; }
.sa-list[hidden] { display: none; }
.sa-ev { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--border-2); background: none; font: inherit; padding: 9px 8px; cursor: pointer; border-radius: 8px; }
.sa-ev:hover { background: var(--page); } .sa-ev.new { background: var(--green-tint); }
.sa-ev b { display: block; font-size: 13px; } .sa-ev small { color: var(--muted); font-size: 12px; }
.sa-ev .up { color: var(--green-t); } .sa-ev .down { color: var(--red); }
.ax-ev-list li p { color: var(--ink); } .ax-ev-list li .ev-rule { color: var(--muted); }
.sa-tn.dot { display: inline-block; width: 8px; height: 8px; min-width: 0; padding: 0; border-radius: 50%; vertical-align: 2px; margin-left: 2px; }
.ax-ev.flash .ax-ev-list li { animation: ev-flash 1.6s ease-out; }
@keyframes ev-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--green); } 100% { box-shadow: 0 0 0 0 transparent; } }
/* Cara baca chart: tombol kecil di header chart, isi muncul sebagai kotak di atas chart */
.chart-card { position: relative; }
.guide-pop { position: static; }
.guide-pop summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border-radius: 999px; background: var(--navy-2); color: #C9CED6; font-size: 12px; font-weight: 600; cursor: pointer; user-select: none; }
.guide-pop summary::-webkit-details-marker { display: none; }
.guide-pop summary:hover, .guide-pop[open] summary { color: #fff; background: #2A303B; }
.gp-i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; font-style: italic; font-family: Georgia, serif; }
.gp-box { position: absolute; z-index: 20; left: 18px; right: 18px; top: 58px; max-width: 520px; padding: 14px 16px; border-radius: 14px; background: #1E232C; border: 1px solid #2E3440; box-shadow: 0 16px 40px rgba(0,0,0,.45); color: #E5E7EB; font-size: 13px; }
.gp-h { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9CA3AF; margin-bottom: 8px; }
.gp-leg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.gp-leg li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.35; }
.gp-leg b { display: block; color: #fff; font-size: 13px; }
.gp-leg span { color: #AEB4BE; font-size: 12px; }
.gp-leg .sw { width: 18px; height: 12px; border-radius: 3px; flex: none; margin-top: 3px; }
.gp-leg .sw.ln { height: 0; border-top: 3px solid; border-radius: 0; margin-top: 8px; }
.gp-leg .sw.ar { color: var(--k-22c55e); font-style: normal; font-size: 12px; display: inline-flex; justify-content: center; margin-top: 0; }
.gp-steps { margin: 0; padding-left: 18px; display: grid; gap: 5px; line-height: 1.45; color: #D1D5DB; }
.gp-steps b { color: #fff; }
.gp-tip { margin-top: 10px; padding-top: 10px; border-top: 1px solid #2E3440; color: #9CA3AF; font-size: 12px; }
@media (max-width: 860px) { .gp-box { left: 12px; right: 12px; top: 92px; } .gp-leg { grid-template-columns: 1fr; } .guide-pop summary { height: 26px; } }
@media (min-width: 861px) {
  .guide-pop summary { width: 28px; height: 28px; padding: 0; justify-content: center; }
  .guide-pop .gp-l { display: none; }
  .gp-box { top: 56px; }
}

/* ---------- Jurnal versi template tim ---------- */
.page-jurnal .jr-tools { margin-bottom: 16px; }
.jr-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; margin-bottom: 16px; }
.page-jurnal .card + .card, .page-jurnal .jr-top + .card { margin-top: 16px; }
.page-jurnal .jr-top + .card { margin-top: 0; }
.page-jurnal section.card + section.card { margin-top: 16px; }
.jr-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin-top: 6px; }
.jr-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-2); min-width: 0; }
.jr-kv span { color: var(--muted); font-size: 13px; }
.jr-kv b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jr-kv .jr-lnk { border: 0; background: none; padding: 0; font-size: 12px; white-space: nowrap; }
.jr-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.jr-day { border: 1px solid var(--border-2); border-radius: 10px; padding: 6px 7px; min-width: 0; background: var(--page, var(--bg-f8f9fb)); }
.jr-day span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.jr-day b { display: block; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-day.win { background: var(--green-tint); border-color: transparent; } .jr-day.win b { color: var(--green-t); }
.jr-day.loss { background: var(--red-tint); border-color: transparent; } .jr-day.loss b { color: var(--red); }
.jr-day.be b { color: var(--navy); }
.jr-chart { margin-top: 10px; }
.jr-tbl th, .jr-tbl td { white-space: nowrap; font-size: 13px; }
.jr-tbl .jr-txt { white-space: normal; min-width: 150px; max-width: 260px; font-size: 12.5px; }
.jr-wl { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.jr-wl.win { background: var(--green-tint); color: var(--green-t); }
.jr-wl.loss { background: var(--red-tint); color: var(--red); }
.jr-wl.be { background: var(--border-2); color: var(--navy); }
.jr-year { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.jr-mo a { display: block; border: 1px solid var(--border-2); border-radius: 12px; padding: 10px 12px; text-decoration: none; color: inherit; min-width: 0; }
.jr-mo a span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.jr-mo a b { display: block; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-mo a small { color: var(--muted); font-size: 12px; }
.jr-mo.up a b { color: var(--green-t); } .jr-mo.down a b { color: var(--red); }
.jr-mo.cur a { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-tint); }
.jr-mo.muted a b { color: var(--muted); }
#hitung-lot summary::-webkit-details-marker { display: none; }
#hitung-lot summary { list-style: none; }
#hitung-lot summary::after { content: ' ▾'; color: var(--muted); font-size: 13px; }
#hitung-lot[open] summary::after { content: ' ▴'; }
@media (max-width: 1000px) { .jr-top { grid-template-columns: 1fr; } .jr-year { grid-template-columns: repeat(4, minmax(0, 1fr)); } .jr-lotg { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) {
  .jr-box { grid-template-columns: 1fr; gap: 0; }
  .jr-cal { gap: 4px; } .jr-day { padding: 5px 4px; border-radius: 8px; }
  .jr-day b { font-size: 0; } .jr-day b::after { content: attr(data-s); font-size: 12px; }   /* HP: angka ringkas supaya tidak terpotong */
  .jr-year { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jr-m .jr-wl { font-size: 12px; padding: 1px 7px; }
}

/* ---------- Berita versi ringkas (ala situs berita) ---------- */
body.page-berita { overflow: visible; height: auto; }   /* HP: halaman berita harus bisa digulir */
.page-berita .news-tools { margin-bottom: 14px; }
.news-tools .chips { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.news-tools .chips::-webkit-scrollbar { display: none; }
.news-tools .chips > * { flex: none; }
.news-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.news-card { padding: 6px 18px 14px; }
.news-top { display: block; padding: 16px 18px; margin: 12px -4px 4px; border-radius: 14px; background: var(--navy); color: #fff; }
.news-top .nt-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.news-top .badge { background: rgba(255,255,255,.14); color: #fff; }
.news-top .badge-hi { background: var(--red-d); color: var(--di-turun); }
.news-top .badge-en { background: rgba(255,255,255,.14); color: var(--side-muted); }
.news-top h2 { font-size: 19px; font-weight: 800; margin-top: 8px; line-height: 1.3; }
.news-top p { color: var(--side-text); margin-top: 4px; font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-top small { display: block; color: var(--side-muted); font-size: 12px; margin-top: 8px; }
.news-top:hover { box-shadow: 0 10px 28px rgba(20,25,33,.18); }
.news-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--border-2); color: inherit; text-decoration: none; }
.news-row:last-of-type { border-bottom: 0; }
.news-row:hover { background: var(--bg-f9fafb); }
.news-row .nr-t { color: var(--muted); font-size: 12px; font-weight: 600; padding-top: 2px; display: flex; flex-direction: column; gap: 4px; }
.nr-hi { width: 8px; height: 8px; border-radius: 50%; background: var(--red-d); display: inline-block; }
.news-row .nr-b { min-width: 0; }
.news-row b { display: block; font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-row .nr-sum { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-row small { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 4px; color: var(--muted); font-size: 12px; }
.news-row small .cat { color: var(--green-t); font-weight: 700; }
.news-row.news-new { background: var(--green-tint); }
#news-more { margin-top: 12px; }
.news-side .card { padding: 16px 18px; }
.news-side .nh { display: block; padding: 9px 0; border-bottom: 1px solid var(--border-2); color: inherit; }
.news-side .nh:last-child { border-bottom: 0; }
.news-side .nh b { display: block; font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-side .nh small { color: var(--muted); font-size: 12px; }
.news-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.news-src span { font-size: 12px; color: var(--muted); padding: 3px 9px; border-radius: 999px; background: var(--page); }
.news-src span b { color: var(--ink); font-weight: 700; }
@media (max-width: 1000px) { .news-wrap { grid-template-columns: 1fr; } .news-side { display: none; } }
@media (max-width: 600px) {
  .news-card { padding: 4px 12px 12px; }
  .news-top { padding: 14px; margin: 10px -2px 2px; } .news-top h2 { font-size: 17px; } .news-top p { display: none; }
  .news-row { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 10px 2px; }
  .news-row b { font-size: 14.5px; } .news-row .nr-sum { display: none; }
  .page-berita .search { width: 100%; }
}

/* ---------- Beranda: headline + hitung mundur rilis USD ---------- */
.hl { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin: 4px 0 20px; }
.hl-top { display: block; margin-top: 12px; padding: 16px 18px; border-radius: 14px; background: var(--navy); color: #fff; }
.hl-top .badge { background: rgba(255,255,255,.14); color: #fff; } .hl-top .badge-hi { background: var(--red-d); }
.hl-top h2 { font-size: 20px; font-weight: 800; line-height: 1.3; margin-top: 8px; }
.hl-top p { color: var(--side-text); font-size: 13.5px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hl-top small, .hl-more small { display: block; font-size: 12px; margin-top: 6px; color: var(--side-muted); }
.hl-more a { display: block; padding: 10px 0; border-bottom: 1px solid var(--border-2); color: inherit; }
.hl-more a:last-child { border-bottom: 0; }
.hl-more b { font-size: 14px; line-height: 1.35; } .hl-more small { color: var(--muted); margin-top: 2px; }
.hl-more .nr-hi { margin-right: 6px; vertical-align: middle; }
.usd-ev { padding: 10px 0; border-bottom: 1px solid var(--border-2); }
.usd-ev:last-child { border-bottom: 0; }
.usd-ev .ue-h { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.usd-ev .ue-h .muted { white-space: nowrap; font-size: 12px; }
.usd-ev .ue-v { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 3px; }
.usd-ev .ue-v b { color: var(--ink); font-variant-numeric: tabular-nums; }
.usd-ev.done { opacity: .75; } .usd-ev.done .ue-v span:first-child b { color: var(--green-t); }
.usd-ev.next { margin: 4px -10px; padding: 12px 10px; border-radius: 12px; background: var(--red-tint); border-bottom: 0; }
.ue-cd { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--navy); margin-top: 4px; }
.ue-cd.soon, .ue-cd.live { color: var(--red); }
@media (max-width: 1000px) { .hl { grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 860px) { .hl { margin-top: 14px; } }

/* ---------- Analisa Agen Berita (halaman Berita) ---------- */
.an-news { margin-bottom: 16px; }
.anb-pairs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 10px; padding-bottom: 2px; }
.anb-pairs::-webkit-scrollbar { display: none; } .anb-pairs > * { flex: none; }
.anb-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; margin-top: 12px; }
.anb-note { font-size: 15.5px; font-weight: 600; line-height: 1.5; padding: 12px 14px; border-radius: 12px; background: var(--green-tint); color: var(--navy); }
.anb-ev { margin-top: 8px; }
.anb-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-2); font-size: 13.5px; }
.anb-r:last-child { border-bottom: 0; } .anb-r .muted { font-size: 12px; white-space: nowrap; }
.anb-r .anb-v { grid-column: 2 / -1; font-size: 12px; color: var(--muted); } .anb-r .anb-v b { color: var(--green-t); }
.anb-r.done { opacity: .8; }
.anb-day { padding: 12px 14px; border-radius: 12px; background: var(--page); font-size: 13.5px; }
.anb-day p { margin-top: 4px; line-height: 1.5; }
@media (max-width: 860px) { .anb-body { grid-template-columns: 1fr; gap: 10px; } .anb-note { font-size: 14.5px; } }
.pane-vol[hidden], .pane[hidden] { display: none !important; }

/* zona pantau di kartu Sinyal berjalan */
.s-zone { display: grid; gap: 8px; margin: 10px 0 8px; }
.s-zone .sz { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg-fff); border: 1px solid var(--border-2); }
.s-zone .sz.buy { border-left: 3px solid var(--green); } .s-zone .sz.sell { border-left: 3px solid var(--red-d); }
.s-zone .sz b { font-size: 14px; font-variant-numeric: tabular-nums; }
.s-zone .sz small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.s-zone .sz-set { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; margin-top: 6px; font-size: 12.5px; }
.s-zone .sz-set > span { color: var(--muted); font-weight: 600; } .s-zone .sz-set .meter { grid-column: 1 / -1; grid-row: 2; }
.s-zone .sz-set .meter > i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.s-zone .sz-set b { grid-column: 3; grid-row: 1; font-size: 15px; } .s-zone .sz-set b.lo { color: var(--muted); } .s-zone .sz-set b.mid { color: var(--tx-92400e); } .s-zone .sz-set b.hi { color: var(--green-t); }
.s-zone .sz-set small { grid-column: 1 / -1; }
.s-zone .sz-rules { grid-column: 1 / -1; list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.s-zone .sz-rules li.ok { color: var(--green-t); font-weight: 700; }

/* =====================================================================
   UI BARU TAHAP 1 (Nov 2026): menu 3 item, lonceng di header, notifikasi
   gaya iPhone, menu samping di desktop, tab panel Sinyal, tab Jurnal.
   Hanya tampilan; logika chart/Bridge/agen tidak berubah.
   ===================================================================== */
.top-bell { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: var(--navy-2); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.top-bell:hover { background: var(--navy-3); }
.top-bell:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.top-bell.has-new svg { color: var(--green); animation: sa-ring 1.4s ease-in-out 2; transform-origin: 50% 10%; }
.tb-n { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--red); color: var(--di-turun); font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--navy); }
.tb-n[hidden] { display: none; }
.side-help { display: none; }

/* Alert: tombol melayang diganti lonceng; panel & notifikasi turun dari kanan atas */
.sa-fab { display: none !important; }
.sig-alert { top: calc(var(--top-h) + 12px); bottom: auto; right: 16px; }
.sa-panel { max-height: min(520px, calc(100dvh - var(--top-h) - 40px)); }
.sa-toast { width: 360px; max-width: calc(100vw - 32px); padding: 14px; border-radius: 22px; background: rgba(255,255,255,.74); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border: 1px solid rgba(255,255,255,.6); color: var(--ink); box-shadow: 0 18px 40px rgba(20,25,33,.22); animation: pd-drop .45s var(--ease); }
.sa-toast small { color: var(--tx-31353c) !important; }
@keyframes pd-drop { from { transform: translateY(-24px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sa-toast { background: var(--bg-fff); } }
@media (prefers-reduced-motion: reduce) { .sa-toast, .top-bell.has-new svg { animation: none; } }

/* HP: menu bawah 3 item, Sinyal di tengah */
@media (max-width: 860px) {
  .tabbar.tabbar-3 { grid-template-columns: repeat(3, 1fr); }
  .tabbar .tab-main .tab-ic { width: 60px; height: 60px; margin-top: -30px; padding: 0; border-radius: 50%; border: 5px solid var(--page); background: var(--navy); color: var(--green); align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(20,25,33,.25); }
  .tabbar .tab-main[aria-current="page"] .tab-ic { background: var(--navy); color: var(--green); }
  .tabbar .tab-main { font-weight: 700; }
  .sig-alert { top: calc(var(--top-h) + 8px); right: 12px; }
  .sa-toast { width: calc(100vw - 24px); }
  .top-bell { width: 38px; height: 38px; }
}

/* Desktop lebar: menu samping kiri (putih) */
@media (min-width: 861px) {
  :root { --top-h: 0px; --side-w: 248px; }
  body { padding-left: var(--side-w); }
  .top { position: fixed; left: 0; top: 0; bottom: 0; width: var(--side-w); z-index: 40; background: var(--bg-fff); border-right: 1px solid var(--border-2); }
  .top-in { height: 100%; max-width: none; margin: 0; flex-direction: column; align-items: stretch; gap: 6px; padding: 24px 16px 18px; }
  .brand { color: var(--ink); padding: 0 8px 22px; font-size: 16px; }
  .nav { flex-direction: column; gap: 6px; }
  .nav a { height: 48px; display: flex; align-items: center; padding: 0 16px; border-radius: 16px; color: var(--muted); font-weight: 700; font-size: 14px; }
  .nav a:hover { color: var(--ink); background: var(--page); }
  .nav a[aria-current="page"] { background: var(--navy); color: var(--green); font-weight: 800; }
  .nav a[aria-current="page"]::before { display: none; }
  .side-help { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 12px; border: 0; border-radius: 16px; background: var(--navy); color: #fff; font: inherit; text-align: left; cursor: pointer; }
  .side-help .sh-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--navy-2); display: grid; place-items: center; }
  .side-help b { display: block; font-size: 13px; } .side-help small { color: var(--side-muted); font-size: 12px; }
  .top-right { margin: 6px 0 0; padding: 10px; border-radius: 18px; background: var(--page); justify-content: space-between; }
  .top-right .avatar { width: 40px; height: 40px; order: -1; }
  .top-bell { background: var(--bg-fff); color: var(--ink); border: 1px solid var(--border-2); }
  .top-bell:hover { background: var(--page); }
  .tb-n { box-shadow: 0 0 0 2px #fff; }
  .help-fab { display: none; }
  .main { padding-top: 24px; }
}

/* Panel Sinyal: 5 tab */
.sig-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding: 4px; background: var(--bg-fff); border: 1px solid var(--border); border-radius: 20px; }
.sig-tabs button { min-height: 54px; border: 0; border-radius: 15px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; }
.sig-tabs button:hover { color: var(--ink); background: var(--page); }
.sig-tabs button[aria-selected="true"] { background: var(--navy); color: var(--green); }
.sig-tabs button:focus-visible { outline: 3px solid var(--green); outline-offset: 1px; }
.sig-panel[data-stab]:not([data-stab="sinyal"]) .run-card,
.sig-panel[data-stab]:not([data-stab="analisa"]):not([data-stab="tren"]) .an-card,
.sig-panel[data-stab]:not([data-stab="riwayat"]) .tester-card,
.sig-panel[data-stab="analisa"] .an-side,
.sig-panel[data-stab="tren"] .an-main { display: none; }
.sig-panel[data-stab="analisa"] .an-grid, .sig-panel[data-stab="tren"] .an-grid { grid-template-columns: minmax(0, 1fr) !important; }
/* Riwayat: tanpa win rate */
.ts-win, #ts-sum th:nth-child(6), #ts-sum td:nth-child(6) { display: none !important; }
.ts-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1px; background: var(--border-2); }
.ts-stats > div { background: var(--bg-fff); border: 0 !important; }
@media (min-width: 861px) {
  .sig-tabs { grid-area: tabs; }
  .run-card, .an-card, .tester-card { grid-area: side; }
  .sig-page { grid-template-areas: "chips" "focus" "chart" "tabs" "side"; }
}
@media (min-width: 1200px) {
  .sig-page { grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto auto auto minmax(0, 1fr); grid-template-areas: "chips chips" "focus focus" "chart tabs" "chart side"; }
  .run-card, .an-card, .tester-card { align-self: start; }
  .sig-panel .ts-table { overflow-x: auto; }
}
@media (max-width: 860px) {
  .sig-tabs { position: sticky; top: 0; z-index: 3; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(20,25,33,.06); }
  .sig-tabs button { min-height: 50px; font-size: 12px; }
}

/* Jurnal: tab Spreadsheet · Statistik */
.jr-head { align-items: center; }
.jr-tabs { display: inline-grid; grid-template-columns: auto auto; gap: 4px; padding: 4px; background: var(--bg-fff); border: 1px solid var(--border); border-radius: 999px; }
.jr-tabs a { padding: 8px 18px; border-radius: 999px; color: var(--muted); font-weight: 700; font-size: 14px; }
.jr-tabs a:hover { color: var(--ink); }
.jr-tabs a[aria-current="page"] { background: var(--navy); color: var(--green); }
@media (max-width: 860px) { .jr-tabs { display: grid; width: 100%; grid-template-columns: 1fr 1fr; order: 3; } .jr-tabs a { text-align: center; } }
.nav-ic { display: none; }
@media (min-width: 861px) { .nav a { gap: 12px; } .nav-ic { display: flex; } }
@media (max-width: 860px) { .sig-tabs { margin: 0 12px 12px; } }

/* =====================================================================
   UI BARU: SINYAL sesuai canvas (HP & desktop)
   ===================================================================== */
/* pil timeframe di chart (semua ukuran) */
.tf-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 3px 0 12px; border-radius: 999px; border: 1px solid var(--navy-3); background: rgba(30,35,44,.9); color: #F3F4F6; font-size: 13px; font-weight: 800; flex: none; }
.tp-b { height: 26px; display: inline-flex; align-items: center; gap: 3px; padding: 0 7px 0 10px; border: 0; border-radius: 999px; background: var(--green); color: var(--navy); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.tp-b:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.chart-head .tf-pill .tfs { position: absolute; left: 0; top: 40px; z-index: 20; width: 212px; margin: 0; display: none !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px; padding: 6px; border-radius: 18px; background: var(--navy-2); border: 1px solid var(--navy-3); box-shadow: 0 14px 30px rgba(0,0,0,.4); }
.tf-pill.open .tfs { display: grid !important; }
.chart-head .tf-pill .tfs button { min-height: 36px; padding: 0; border-radius: 999px; background: var(--navy-3); color: #F3F4F6; font-size: 12px; font-weight: 800; }
.chart-head .tf-pill .tfs button[aria-pressed="true"] { background: var(--green); color: var(--navy); }
.sig-fold { display: none; }

/* kartu sinyal berjalan (hijau) + level pil */
.sg-hero { position: relative; overflow: hidden; margin-top: 12px; padding: 16px 18px 18px; border-radius: 22px; background: var(--green); color: var(--navy); }
.sg-hero::after { content: ""; position: absolute; right: -40px; bottom: -70px; width: 190px; height: 190px; border-radius: 50%; border: 34px solid rgba(255,255,255,.18); pointer-events: none; }
.sg-hero .sig-head { position: relative; z-index: 1; margin: 0; display: flex; align-items: center; gap: 8px; }
.sg-hero .badge { background: var(--navy) !important; color: var(--green) !important; border: 0; }
.sg-hero .badge-sell { color: var(--red-d) !important; }
.sg-hero .sym { font-size: 13px; font-weight: 700; flex: 1; color: var(--navy); }
.sg-hero .status { color: var(--navy); font-weight: 700; font-size: 12px; }
.sg-hero .status .dot { background: var(--navy); }
.sg-entry { position: relative; z-index: 1; margin-top: 18px; display: flex; flex-direction: column; cursor: pointer; }
.sg-entry span { font-size: 12px; font-weight: 600; }
.sg-entry b { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sg-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.sg-mini article { min-height: 92px; padding: 14px; border-radius: 22px; display: flex; flex-direction: column; gap: 4px; }
.sg-conf { background: var(--green-tint); color: var(--green-t); }
.sg-conf span, .sg-rr span { font-size: 12px; font-weight: 600; }
.sg-conf b { font-size: 26px; font-weight: 800; margin-top: auto; }
.sg-conf .meter { height: 5px; background: var(--ka-18-117-60-_15); }
.sg-conf .meter i { background: var(--green-t); }
.sg-rr { background: var(--bg-fff); border: 1px solid var(--border-2); color: var(--muted); }
.sg-rr p { margin: auto 0 0; font-size: 12px; line-height: 1.45; color: var(--ink); font-weight: 600; }
.lv-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.lv { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 16px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--bg-fff); cursor: pointer; }
.lv:hover { border-color: #C5CCD6; }
.lv:focus-visible { outline: 3px solid var(--green); outline-offset: 1px; }
.lv-d { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lv-d.sl { background: var(--red); } .lv-d.tp { background: var(--green); }
.lv span { flex: 1; font-size: 13px; font-weight: 600; color: var(--muted); }
.lv b { font-size: 15px; font-weight: 800; color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.lv em { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-f3f4f6); display: grid; place-items: center; color: var(--ink); font-style: normal; }
.sg-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.sg-acts .btn { height: 50px; border-radius: 999px; }
.run-card .s-empty { border-radius: 20px; }

/* HP */
@media (max-width: 860px) {
  /* header putih untuk semua halaman HP */
  .top { background: var(--bg-fff); border-bottom: 1px solid var(--bd-eef0f3); }
  .top-title { color: var(--ink); }
  .top-bell { background: var(--bg-fff); color: var(--ink); border: 1px solid var(--border-2); width: 44px; height: 44px; }
  .tb-n { box-shadow: 0 0 0 2px #fff; }
  .top-right .avatar { width: 44px; height: 44px; }
  /* Sinyal: halaman bisa di-scroll biasa (bukan panel tarik) */
  body.page-sinyal { overflow: visible; height: auto; }
  body.page-sinyal .main { height: auto; padding: 0 0 calc(var(--tab-h) + 28px); }
  body.page-sinyal { --top-h: 68px; }
  body.page-sinyal .top { border-bottom: 0; }
  .tt-sig { display: flex !important; flex-direction: column; gap: 1px; min-width: 0; }
  .tt-l { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; }
  .tt-l b { color: var(--muted); font-weight: 700; }
  .tt-live { display: inline-flex; align-items: center; gap: 4px; color: var(--green-t); margin-left: 2px; }
  .tt-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
  .tt-live.off { color: var(--muted); } .tt-live.off i { background: #9CA3AF; }
  .tt-p { display: flex; align-items: center; gap: 8px; }
  .tt-bid { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .tt-chg { font-style: normal; background: var(--green-tint); color: var(--green-t); border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
  .tt-chg.dn { background: var(--red-tint); color: var(--red); }
  body.page-sinyal .brand { display: none; }
  .sig-page { display: block; height: auto; }
  .sig-top { background: transparent; padding: 0; overflow: visible !important; }
  .sig-top .inst-bar, .sig-top .focus-bar { background: var(--bg-fff); }
  .sig-top .inst-bar { padding: 4px 0 10px 16px; }
  .inst-search { background: var(--page); border-color: var(--border-2); color: var(--muted); }
  .inst-search input { color: var(--ink); }
  .inst { background: var(--bg-eef0f3); border: 0; color: var(--ink); border-radius: 999px; min-height: 0; height: 38px; padding: 0 14px; flex-direction: row; align-items: center; gap: 6px; }
  .inst b { font-size: 12px; }
  .inst span { font-size: 12px; font-weight: 700; }
  .inst[aria-pressed="true"], .inst.on { background: var(--green); color: var(--navy); }
  .inst[aria-pressed="true"] span, .inst.on span { color: var(--navy) !important; }
  .focus-bar { margin: 0; padding: 0 16px 18px; border: 0; border-radius: 0 0 28px 28px; box-shadow: 0 10px 24px rgba(20,25,33,.08); position: relative; z-index: 2; }
  .sig-top.folded .inst-bar { display: none; }
  .sig-top.folded .focus-bar > * { display: none; }
  .sig-top.folded .focus-bar { padding: 0 0 4px; min-height: 8px; }
  .sig-fold { display: grid; place-items: center; position: relative; z-index: 3; width: 76px; height: 30px; margin: -2px auto 0; border: 0; border-radius: 0 0 38px 38px; background: var(--bg-fff); color: var(--ink); box-shadow: 0 8px 12px rgba(20,25,33,.08); cursor: pointer; }
  .sig-top.folded .sig-fold svg { transform: rotate(180deg); }
  .chart-card { margin: 8px 12px 0; padding: 12px 8px 8px; background: var(--navy); border-radius: 24px; box-shadow: 0 10px 24px rgba(20,25,33,.15); }
  .chart-head { padding: 0 4px; flex-wrap: nowrap; }
  .chart-head .px, .chart-head #c-chg { display: none; }
  .chart-head .tf-pill .tfs { flex: none; }
  .pane-main { height: 300px; max-height: none; min-height: 0; }
  .sig-top.folded .pane-main { height: 420px; }
  .sig-panel { margin-top: 0 !important; background: transparent; border-radius: 0; box-shadow: none; transition: none; }
  .grab { display: none !important; }
  .sig-scroll { overflow: visible; padding: 16px 0 0; }
  .sig-tabs { position: static; margin: 0 16px 14px; box-shadow: none; }
  .sig-side .card, .sig-panel .card { background: transparent; border: 0; padding: 0 16px 8px; }
  .sig-panel .card + .card { border-top: 0; }
  .sig-panel .h2 { font-size: 17px; font-weight: 700; color: var(--ink); }
}

/* Desktop: pair jadi pil, kepala chart ringkas */
@media (min-width: 861px) {
  .inst { border-radius: 999px; }
  .chart-head .tfs { display: none; }
}
@media (max-width: 860px) { .inst span.up { color: var(--green-t) !important; } .inst span.down { color: var(--red) !important; } .inst span.muted { color: var(--muted) !important; } }
@media (min-width: 861px) { .chart-head > .sym { display: none; } }
@media (max-width: 860px) {
  .sig-top .focus-bar { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  .focus-bar .fb-l { display: block !important; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: 0; }
  .focus-bar .fb-chips { flex: 1 1 0; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; font-size: 12px; line-height: 1.4; }
  .focus-bar .fb-chips::-webkit-scrollbar { display: none; }
  .focus-bar #fb-edit { flex: 1 0 100%; height: 46px; border-radius: 999px; border: 0; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; }
  .inst-search { width: 44px; padding: 0 13px; flex: none; }
  .inst-search:focus-within { width: 150px; }
  .inst-search input::placeholder { color: transparent; }
  .inst-search:focus-within input::placeholder { color: #9CA3AF; }
}
@media (max-width: 860px) {
  .sig-top .focus-bar { color: var(--ink); }
  .sig-top .focus-bar .muted, .sig-top .fb-l { color: var(--muted) !important; }
  .sig-top .fb-tf { background: var(--bg-fff); border-color: var(--border-2); color: var(--ink); border-radius: 999px; }
  .sig-top .fb-tf[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--navy); }
  .sig-top .fb-dot { box-shadow: 0 0 0 2px #fff; }
}
@media (max-width: 860px) { .sig-top.folded .focus-bar .fb-l, .sig-top.folded .focus-bar #fb-edit { display: none !important; } }

/* =====================================================================
   UI BARU: BERITA sesuai canvas
   ===================================================================== */
.brt-title { align-items: center; }
.brt-title h1 { font-size: 26px; font-weight: 800; }
.brt-search { margin-left: auto; width: 280px; height: 44px; border-radius: 999px; background: var(--bg-fff); border-color: var(--border-2); }
.brt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.brt-main, .brt-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.brt-cal { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; }
.brt-cal > .brt-week { grid-column: 1 / -1; }
#cal-next.up-next2 { position: relative; overflow: hidden; margin: 0; background: var(--green); color: var(--navy); border-radius: 24px; padding: 18px 20px; }
#cal-next.up-next2::after { content: ""; position: absolute; right: -40px; bottom: -70px; width: 190px; height: 190px; border-radius: 50%; border: 34px solid rgba(255,255,255,.18); pointer-events: none; }
#cal-next .un-l, #cal-next .un-t, #cal-next .un-v { color: var(--navy) !important; }
#cal-next .un-row { grid-template-columns: 1.4fr 1fr 1fr 1fr; position: relative; z-index: 1; }
#cal-next .un-cdbox, #cal-next .un-stat { background: rgba(255,255,255,.22); }
#cal-next .un-cdbox span, #cal-next .un-stat span { color: var(--navy); opacity: .8; }
#cal-next .un-cdbox b { font-size: 30px; color: var(--navy) !important; }
#cal-next .un-btn { display: none; }
#cal-next[hidden] { display: none; }
.brt-tiles { display: grid; grid-template-columns: 1fr; gap: 12px; }
.brt-cal:has(#cal-next[hidden]) { grid-template-columns: 1fr; }
.brt-cal:has(#cal-next[hidden]) .brt-tiles { grid-template-columns: 1fr 1fr; }
.brt-tiles article { background: var(--bg-fff); border: 1px solid var(--border-2); border-radius: 22px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.brt-tiles span { font-size: 12px; font-weight: 600; color: var(--muted); }
.brt-tiles b { font-size: 28px; font-weight: 800; }
.brt-week { border-radius: 24px; }
.brt-week .h2-row .seg { margin-left: auto; }
.brt-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) auto; gap: 4px; margin: 14px 0 12px; }
.brt-days button { height: 52px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.brt-days button small { font-size: 12px; font-weight: 600; opacity: .85; }
.brt-days button.has { background: var(--green); color: var(--navy); }
.brt-days button.today { box-shadow: inset 0 0 0 2px var(--navy); }
.brt-days button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.brt-days button.all { padding: 0 14px; font-size: 12px; background: var(--bg-eef0f3); }
.brt-days button.all[aria-pressed="true"] { background: var(--navy); color: var(--green); }
.brt-news { border-radius: 24px; }
.brt-cats { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }
.brt-cats .chip, .anb-pairs .chip { border-radius: 999px; }
.brt-an { background: var(--navy); color: #fff; border-radius: 24px; padding: 18px 20px; margin: 0; }
.brt-an .h2 { color: #fff; }
.brt-an #anb-sym { color: var(--green); }
.brt-an .anb-pairs .chip { background: var(--line-d); border-color: var(--line-d); color: var(--side-text); }
.brt-an .anb-pairs .chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--navy); }
.brt-an .anb-body { grid-template-columns: 1fr; }
.brt-an .anb-note { background: var(--navy-2); color: #fff; font-size: 14px; }
.brt-an .anb-r { border-color: var(--line-d); color: var(--side-text); }
.brt-an .anb-r .muted, .brt-an .anb-r .anb-v { color: var(--side-muted); }
.brt-go { display: grid; place-items: center; height: 44px; margin-top: 12px; border-radius: 999px; background: var(--green); color: var(--navy); font-weight: 800; font-size: 13px; }
.brt-agent { border-radius: 24px; }
.brt-ag-h { display: flex; align-items: center; gap: 10px; }
.brt-ag-h b { font-size: 15px; }
.brt-bot { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; flex: none; }
.brt-agent p { margin-top: 8px; font-size: 13px; line-height: 1.6; }
.brt-hi { border-radius: 24px; }
.brt-warn { margin: 0; padding: 14px 16px; border-radius: 20px; background: var(--bg-fef6e4); color: var(--tx-8a5a00); font-size: 12px; line-height: 1.5; }
@media (max-width: 1100px) { .brt-grid { grid-template-columns: 1fr; } .brt-side { order: -1; } .brt-hi, .brt-warn { display: none; } }
@media (max-width: 860px) {
  .brt-title h1 { display: none; }
  .brt-title { flex-wrap: nowrap; }
  .brt-search { width: auto; flex: 1; margin: 0; }
  .brt-cal { grid-template-columns: 1fr; }
  .brt-tiles { grid-template-columns: 1fr 1fr; }
  #cal-next .un-row { grid-template-columns: 1fr 1fr 1fr; }
  #cal-next .un-cdbox { grid-column: 1 / -1; }
  .brt-days { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .brt-days button.all { grid-column: 1 / -1; height: 36px; }
  .brt-days button { height: 46px; font-size: 13px; }
  .brt-week .h2-row .seg { margin-left: 0; }
}
#cal-next .un-row { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
#cal-next .un-stat { padding: 10px; min-width: 0; }
#cal-next .un-stat b { font-size: 18px; overflow: hidden; text-overflow: ellipsis; }
#cal-next .un-stat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brt-cal { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 860px) { .brt-cal { grid-template-columns: 1fr; } #cal-next .un-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =====================================================================
   UI BARU: JURNAL sesuai canvas
   ===================================================================== */
.jr-cards { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.jr-cards > article { display: flex; align-items: center; gap: 12px; min-height: 86px; padding: 16px 18px; border-radius: 24px; margin: 0; }
.jr-cards b { display: block; font-size: 15px; } .jr-cards small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.jr-cards > article > span:nth-child(2), .jr-csv > span:first-child { flex: 1; min-width: 0; }
.jr-up { background: var(--navy); color: #fff; }
.jr-up small { color: var(--side-muted) !important; }
.jr-up-ic { width: 52px; height: 52px; flex: none; border-radius: 16px; background: var(--green); display: grid; place-items: center; }
.jr-gs-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--green-tint); color: var(--green-t); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.jr-cards .soon { flex: none; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; background: var(--bg-fef6e4); color: var(--tx-8a5a00); }
.jr-csv .btn { border-radius: 999px; }
.jr-sh { gap: 10px; }
.jr-sh .h2 { flex: 1; color: var(--ink); font-weight: 700; }
.jr-sh form { display: flex; gap: 6px; }
.jr-sh .chip { border-radius: 999px; }
.jr-modal { font-size: 13px; color: var(--muted); }
.jr-sh .btn { border-radius: 999px; }
.page-jurnal .tbl-wrap.jr-d { border-radius: 16px; }
.jr-tbl thead th { background: var(--navy); color: #fff; }
.jr-tbl th:nth-child(1), .jr-tbl td:nth-child(1) { position: sticky; left: 0; z-index: 1; background: var(--bg-fff); }
.jr-tbl th:nth-child(1) { background: var(--navy); z-index: 2; }
/* Statistik (bento) */
.st-bento { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(92px, auto); gap: 12px; }
.st-bento article { background: var(--bg-fff); border: 1px solid var(--border-2); border-radius: 22px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; }
.st-bento article span { font-size: 12px; font-weight: 600; color: var(--muted); }
.st-bento article b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-bento .st-hero { grid-row: span 2; position: relative; overflow: hidden; background: var(--green); border: 0; color: var(--navy); justify-content: flex-start; }
.st-hero::after { content: ""; position: absolute; right: -50px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; border: 38px solid rgba(255,255,255,.18); pointer-events: none; }
.st-hero span, .st-hero small, .st-hero em, .st-hero strong { position: relative; z-index: 1; color: var(--navy) !important; }
.st-bento .st-hero b { position: relative; z-index: 1; font-size: 38px; letter-spacing: -.02em; }
.st-hero small { font-size: 13px; font-weight: 700; }
.st-hero small a { text-decoration: underline; }
.st-hero em { margin-top: auto; font-style: normal; font-size: 12px; font-weight: 700; }
.st-hero strong { font-size: 22px; font-weight: 800; }
.st-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.st-row .card, .porto-bars .card { border-radius: 24px; }
.st-row .h2, .porto-bars .h2 { color: var(--ink); font-weight: 700; }
.pcal .pd { border-radius: 14px; }
@media (max-width: 1100px) { .st-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-bento .st-hero { grid-column: 1 / -1; grid-row: auto; min-height: 170px; } .st-row { grid-template-columns: 1fr; } .jr-cards { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .jr-d { display: block !important; }
  .jr-m { display: none !important; }
  .jr-tbl th:nth-child(2), .jr-tbl td:nth-child(2) { position: sticky; left: 44px; z-index: 1; background: var(--bg-fff); box-shadow: 1px 0 0 var(--border-2); }
  .jr-tbl th:nth-child(2) { background: var(--navy); z-index: 2; }
  .jr-tbl th, .jr-tbl td { padding: 9px 10px; font-size: 12px; }
  .jr-sh form { order: 3; width: 100%; } .jr-sh form select { flex: 1; }
  .jr-cards > article { min-height: 0; padding: 14px; }
}
.jr-cards > article { margin: 0 !important; align-self: stretch; }
.st-row { align-items: start; } .st-row > .card { margin: 0 !important; }
@media (max-width: 860px) { .jr-head h1, .jr-head > .muted { display: none; } }

/* =====================================================================
   UI BARU: AKUN sesuai canvas
   ===================================================================== */
.ak-title h1 { font-size: 26px; }
.ak-grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 18px; align-items: start; }
.ak-left, .ak-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ak-prof { background: var(--navy); color: #fff; border-radius: 26px; padding: 24px; }
.ak-prof form { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ak-av { width: 108px; height: 108px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--green); color: var(--navy); font-size: 36px; font-weight: 800; border: 4px solid var(--green); }
.ak-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-name { font-size: 22px; font-weight: 800; }
.ak-id { font-size: 13px; color: var(--side-muted); }
.ak-ph { display: flex; gap: 8px; width: 100%; margin-top: 6px; }
.ak-ph .btn { flex: 1; border-radius: 999px; background: transparent; border-color: var(--navy-3); color: #fff; cursor: pointer; }
.ak-ph .ak-del { flex: none; background: var(--ka-240-97-109-_15); border-color: transparent; color: var(--red-d); }
.ak-prof #ph-info { font-size: 12px; color: var(--side-muted); }
.ak-prof .f { width: 100%; text-align: left; color: var(--side-muted); font-size: 12px; font-weight: 700; }
.ak-prof .f input { background: var(--navy-2); border-color: var(--navy-3); color: #fff; border-radius: 14px; }
.ak-prof .btn-green { border-radius: 999px; height: 48px; }
.ak-info { border-radius: 24px; }
.ak-admin { display: flex; align-items: center; gap: 14px; background: var(--navy); color: #fff; border-radius: 24px; padding: 18px 20px; }
.ak-adm-ic { width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--green); color: var(--navy); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.ak-admin span:nth-child(2) { flex: 1; } .ak-admin b { display: block; font-size: 16px; } .ak-admin small { color: var(--side-muted); font-size: 12px; }
.ak-admin em { font-style: normal; color: var(--green); font-weight: 800; }
.ak-list { border-radius: 24px; display: flex; flex-direction: column; }
.ak-list .h2 { color: var(--ink); font-weight: 700; margin-bottom: 6px; }
.ak-row { display: flex; align-items: center; gap: 10px; min-height: 56px; border-top: 1px solid var(--border-2); font-weight: 700; font-size: 14px; }
.ak-row span { flex: 1; } .ak-row small { color: var(--muted); font-weight: 600; font-size: 12px; } .ak-row i { color: var(--muted); font-style: normal; font-size: 18px; }
.ak-out { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 56px; border: 0; border-top: 1px solid var(--border-2); background: none; color: var(--red); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; padding: 0; }
@media (max-width: 1000px) { .ak-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .ak-title { display: none; } }

/* =====================================================================
   UI BARU putaran 3: disamakan lagi dengan canvas (dibandingkan berdampingan)
   ===================================================================== */
.pd-bot { animation: pdBob 2.6s ease-in-out 3; transform-origin: 50% 80%; }
.pd-eyes { animation: pdBlink 4s ease-in-out 3; transform-origin: 50% 46%; transform-box: fill-box; }
@keyframes pdBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-4deg); } }
@keyframes pdBlink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.2); } }
@media (prefers-reduced-motion: reduce) { .pd-bot, .pd-eyes { animation: none; } }
/* avatar bawaan */
.avatar svg, .ak-av svg, .ak-pick svg { width: 100%; height: 100%; display: block; }
.avatar:has(svg) { background: transparent; padding: 0; }
.av-lbl { display: none; }
/* tombol bantuan = maskot */
.hf-bot { position: relative; display: grid; place-items: center; width: 32px; height: 32px; }
.hf-dot { position: absolute; top: -4px; right: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); border: 2px solid var(--navy); }
.help-fab { padding-left: 12px; }
@media (max-width: 860px) { .help-fab { width: 60px; height: 60px; padding: 0; justify-content: center; border-radius: 50%; } }
/* judul halaman: label kecil + judul */
.pt-t { display: flex; flex-direction: column; gap: 2px; }
.pt-t small { font-size: 12px; font-weight: 600; color: var(--muted); }
.pt-t h1 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
/* HP: header per halaman, menu tengah hijau saat di Sinyal */
@media (max-width: 860px) {
  .tt-pg { display: flex !important; flex-direction: column; gap: 1px; min-width: 0; }
  .tt-pg .tt-l { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; }
  .tt-big { font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:has(.tt-pg) .brand { display: none; }
  body:has(.tt-pg) { --top-h: 72px; }
  .pt-t { display: none; }
  .tabbar .tab-main .tab-ic { background: var(--navy); color: var(--green); }
  .tabbar .tab-main[aria-current="page"] .tab-ic { background: var(--green); color: var(--navy); }
}
/* Desktop lebar: lonceng di kanan atas, kartu akun dengan nama */
@media (min-width: 861px) {
  .top-right .top-bell { position: fixed; top: 22px; right: 28px; z-index: 41; width: 46px; height: 46px; }
  .page-title, .sig-price { padding-right: 64px; }
  .top-right { justify-content: flex-start; gap: 10px; }
  .av-lbl { display: flex; flex-direction: column; flex: 1; min-width: 0; color: var(--ink); }
  .av-lbl b { font-size: 13px; } .av-lbl small { font-size: 12px; color: var(--muted); }
  .top-right::after { content: "›"; color: var(--muted); font-size: 18px; margin-right: 6px; }
  .side-help .sh-ic { background: var(--navy-2); }
}

/* ---- Sinyal ---- */
.inst > span { font-size: 0 !important; }
.inst > span::after { content: attr(data-chg); font-size: 12px; font-weight: 700; }
.inst { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; height: 40px; min-height: 0 !important; padding: 0 16px !important; border-radius: 999px !important; border: 0 !important; background: var(--bg-eef0f3) !important; color: var(--muted) !important; white-space: nowrap; }
.inst b { font-size: 13px !important; color: inherit; }
.inst[aria-pressed="true"] { background: var(--green) !important; color: var(--navy) !important; }
.inst[aria-pressed="true"] > span { color: var(--navy) !important; }
.sig-price { display: none; }
.fb-guide { display: none; }
@media (max-width: 860px) {
  .inst-search { display: none !important; }
  .inst { color: var(--ink) !important; }
  .chart-head .guide-pop > summary { display: none; }
  .fb-guide { display: inline-flex; flex: 1 0 calc(50% - 5px); height: 46px; border-radius: 999px; gap: 8px; font-size: 13px; }
  .fb-guide .gp-i { width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid currentColor; display: grid; place-items: center; font-size: 12px; font-weight: 800; font-style: normal; }
  .focus-bar #fb-edit { flex: 1 0 calc(50% - 5px) !important; }
  .focus-bar .fb-chips > .muted { display: none; }
  .focus-bar .fb-chips:has(> .muted:only-child)::before { content: "Belum diatur"; color: var(--muted); }
}
@media (min-width: 861px) {
  .inst > span { display: none; }
  .chart-head .px, .chart-head #c-chg { display: none; }
  .inst-bar { align-items: center; }
  .inst-search { order: 2; height: 44px; width: 220px; border-radius: 999px; }
}
@media (min-width: 861px) {
  .sig-page { grid-template-columns: auto minmax(0, 1fr) 400px; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "price chips chips" "chart chart tabs" "chart chart side"; column-gap: 18px; }
  .sig-price { grid-area: price; display: flex; flex-direction: column; gap: 2px; padding-right: 0; }
  .sig-price .tt-l { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
  .sig-price .tt-live { display: inline-flex; align-items: center; gap: 4px; color: var(--green-t); }
  .sig-price .tt-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
  .sig-price .tt-live.off { color: var(--muted); } .sig-price .tt-live.off i { background: #9CA3AF; }
  .sig-price .tt-p { display: flex; align-items: center; gap: 10px; }
  .sig-price .tt-bid { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .sig-price .tt-chg { font-style: normal; background: var(--green-tint); color: var(--green-t); border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 700; }
  .sig-price .tt-chg.dn { background: var(--red-tint); color: var(--red); }
  .inst-bar { padding-right: 64px; }
  .pane-main { height: max(420px, calc(100vh - 250px)); }
  /* Fokus saya di menu samping */
  .focus-bar.in-side { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 18px 0 0; padding: 0 4px; border: 0; background: transparent; }
  .focus-bar.in-side .fb-l { padding: 0 4px; font-size: 12px; letter-spacing: 0; text-transform: none; }
  .focus-bar.in-side .fb-chips { flex-direction: column; align-items: stretch; gap: 4px; }
  .focus-bar.in-side .fb-chips > .muted { font-size: 12px; padding: 0 4px; }
  .focus-bar.in-side .fb-pair { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-radius: 14px; background: var(--page); }
  .focus-bar.in-side .fb-pair b { flex: 0 0 100%; }
  .focus-bar.in-side #fb-edit { align-self: flex-start; min-height: 32px; border-radius: 999px; font-size: 12px; }
}

/* ---- Berita ---- */
#cal-next.up-next2 { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "l l l" "cd cd cd" "cur n t" "v v v"; align-content: start; gap: 4px 8px; }
#cal-next .un-top { display: contents; }
#cal-next .un-l { grid-area: l; font-size: 12px; font-weight: 700; position: relative; z-index: 1; }
#cal-next #un-imp { display: none; }
#cal-next #un-cur { grid-area: cur; position: relative; z-index: 1; font-size: 13px; }
#cal-next .un-n { grid-area: n; position: relative; z-index: 1; font-size: 13px !important; }
#cal-next .un-t { grid-area: t; position: relative; z-index: 1; font-size: 13px; font-weight: 600; }
#cal-next .un-row { grid-area: cd; display: block; margin: 6px 0 4px; }
#cal-next .un-stat, #cal-next .un-btn, #cal-next .un-cdbox > span { display: none; }
#cal-next .un-cdbox { background: transparent !important; padding: 0; }
#cal-next .un-cdbox b { font-size: 42px !important; line-height: 1.05; letter-spacing: -.01em; }
#cal-next .un-v { grid-area: v; font-size: 12px; opacity: .85; }
.brt-tiles article:first-child { background: var(--green-tint); border-color: transparent; }
.brt-tiles article:first-child span, .brt-tiles article:first-child b { color: var(--green-t); }
.brt-week .calw-wrap { border: 0; }
.brt-week .calw th { background: transparent; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border-2); }
.brt-week .calw .dcell, .brt-week .calw th:first-child { display: none; }
.brt-week .calw tr.nextrow td:not(.dcell) { background: var(--green-tint); }
.brt-none { padding: 14px 4px; font-size: 13px; }
@media (max-width: 860px) {
  .brt-title { margin-bottom: -4px; }
  .brt-title #news-upd { display: none; }
  .brt-search { height: 52px; background: var(--navy); border-color: var(--navy); color: #9CA3AF; }
  .brt-search input { color: #fff; font-size: 16px; }
  .brt-search input::placeholder { color: #9CA3AF; }
  .brt-an { background: transparent; color: var(--ink); padding: 0; border-radius: 0; }
  .brt-an .h2 { color: var(--ink); font-size: 17px; font-weight: 700; }
  .brt-an .anb-pairs .chip { background: var(--bg-eef0f3); border-color: var(--bd-eef0f3); color: var(--muted); }
  .brt-an .anb-note { background: var(--bg-fff); color: var(--ink); border: 1px solid var(--border-2); border-radius: 20px; }
  .brt-an .brt-go { display: none; }
  .brt-an .anb-r { border-color: var(--border-2); color: var(--ink); }
  .brt-side .brt-agent { order: 3; }
  .brt-grid { gap: 14px; }
  .brt-main { display: contents; }
  .brt-grid { display: flex; flex-direction: column; }
  .brt-side { display: contents; }
  .brt-an { order: 1; } .brt-cal { order: 2; } .brt-agent { order: 3; } .brt-news { order: 4; }
  #cal-next .un-cdbox b { font-size: 48px !important; }
  #cal-next.up-next2 { min-height: 180px; }
}

/* ---- Jurnal ---- */
.jr-sec { display: none; }
.jr-tbl td { padding: 9px 10px !important; font-size: 12.5px; }
.jr-tbl .jr-txt { white-space: nowrap !important; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.jr-tbl tbody tr:nth-child(even) td { background: var(--bg-fbfbfc); }
.jr-head { align-items: flex-end; }
.jr-head .jr-tabs { margin-left: auto; }
@media (max-width: 860px) {
  .jr-head { margin-bottom: -4px; }
  .jr-head .jr-tabs { margin: 0; }
  .jr-cards { gap: 10px; }
  .jr-sec { display: block; margin-top: 8px; }
  .jr-sec > div { display: flex; align-items: baseline; justify-content: space-between; }
  .jr-sec h2 { font-size: 18px; font-weight: 700; }
  .jr-sec span { font-size: 13px; font-weight: 700; color: var(--ink); }
  .jr-sec p { margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.5; }
  .jr-csv { flex-wrap: wrap; background: transparent !important; border: 0 !important; padding: 0 !important; }
  .jr-csv > span:first-child { display: none; }
  .jr-csv .btn { flex: 1; height: 48px; background: var(--bg-fff); color: var(--ink); border: 1px solid var(--border); font-size: 13px; }
  .jr-up { position: relative; overflow: hidden; }
}

/* ---- Akun ---- */
.ak-lbl { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--side-muted); margin-top: 6px; }
.ak-picks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; }
.ak-pick { aspect-ratio: 1; border-radius: 50%; padding: 0; border: 1px solid var(--navy-3); background: transparent; overflow: hidden; cursor: pointer; display: grid; place-items: center; color: var(--side-muted); }
.ak-pick[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--navy), 0 0 0 6px var(--green); border-color: transparent; }
.ak-up { border: 1.5px dashed var(--side-muted); }
.ak-del { align-self: flex-start; border-radius: 999px; background: var(--ka-240-97-109-_15) !important; border-color: transparent !important; color: var(--red-d) !important; }
.ak-av { background: var(--green); }
@media (max-width: 860px) {
  .ak-prof { background: var(--bg-fff); color: var(--ink); border: 1px solid var(--border-2); }
  .ak-id, .ak-prof #ph-info, .ak-lbl { color: var(--muted); }
  .ak-pick { border-color: var(--border-2); color: var(--muted); }
  .ak-pick[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--green); }
  .ak-up { border-color: var(--bd-d1d5dc); }
  .ak-prof .f { color: var(--muted); }
  .ak-prof .f input { background: var(--bg-f9fafb); border-color: var(--bd-d1d5dc); color: var(--ink); }
  .ak-prof .btn-green { background: var(--navy); border-color: var(--navy); color: #fff; }
  .ak-del { background: var(--red-tint) !important; color: var(--red) !important; }
}
@media (max-width: 860px) { .sig-top .focus-bar .fb-chips { flex: 1 1 70%; } }
@media (max-width: 860px) {
  .tt-big { white-space: normal; font-size: 20px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  body.page-berita:has(.tt-pg) { --top-h: 84px; }
  .brt-an { min-width: 0; overflow: hidden; }
  .brt-an .anb-body { display: block; }
}
.hp-only { display: none; }
@media (max-width: 860px) {
  .hp-only { display: inline; }
  .page-jurnal section[aria-label="Daftar trade"] { background: transparent; border: 0; padding: 0; }
  .jr-sh .h2 { display: none; }
  .jr-sh { flex-wrap: wrap; }
  .jr-sh .jr-modal { flex: 1; }
  .page-jurnal .tbl-wrap.jr-d { background: var(--bg-fff); border: 1px solid var(--border-2); border-radius: 18px; margin-top: 10px !important; }
}
.ak-up svg { width: 20px !important; height: 20px !important; }
/* Akun: avatar di header jadi tombol tutup (seperti canvas) */
.avatar.av-close { position: relative; overflow: visible; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy); }
.avatar.av-close > svg, .avatar.av-close > img { border-radius: 50%; overflow: hidden; }
.av-x { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; border: 2px solid #fff; }
/* halaman Akun di HP: lonceng notifikasi tetap tampil */
/* kepala chart: pil TF · ◈ · (Cara baca) · zoom di kanan */
.chart-head { display: flex; align-items: center; gap: 8px; }
.chart-head .ch-sp { flex: 1; }
.chart-head .be-leg { position: static; width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 0; display: grid; place-items: center; border: 1px solid #5f5222; background: rgba(250,204,21,.1); }
.chart-head .be-leg::before { content: "◈"; font-size: 14px; color: #FACC15; }
.chart-head .be-leg[aria-pressed="false"] { opacity: .45; }
.chart-head .c-zoom { position: static; display: flex; gap: 6px; }
.chart-head .c-zoom button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--navy-3); background: var(--navy-2); font-size: 17px; }
.sg-hist { border: 0; background: none; padding: 6px 0; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; margin-left: auto; }
@media (max-width: 860px) {
  .pane-main, .sig-top.folded .pane-main { height: 290px; }   /* chart tidak memanjang saat panel dilipat */
  .sig-panel .run-card .h2-row { margin-bottom: 4px; }
}
.sg-hero .badge { text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 860px) {
  .focus-bar #fb-edit::before { content: ""; width: 14px; height: 14px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--green); box-shadow: inset 0 0 0 2.5px var(--navy), inset 0 0 0 6px var(--green); }
}
/* Tombol bantuan: maskot langsung tanpa bulatan gelap, garis tepi gelap ikut animasi */
.help-fab { width: auto !important; height: auto !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
.help-fab .help-fab-l { display: none; }
.help-fab .hf-bot { width: 58px; height: 58px; filter: drop-shadow(0 6px 10px rgba(20,25,33,.25)); }
.help-fab .hf-bot svg { width: 58px; height: 58px; overflow: visible; }
.help-fab .hf-dot { top: 2px; right: 0; width: 14px; height: 14px; border: 2.5px solid #fff; }
.help-fab:hover { transform: translateY(-2px); }
.help-fab:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; border-radius: 50% !important; }
/* logo hijau di label header HP (seperti canvas) */
.tt-logo { flex: none; margin-right: 2px; }
/* pil pair: perubahan % tetap tampil walau market tutup (tanpa label "terakhir"), tanpa efek pudar di tepi */
.inst.stale > span::after { content: attr(data-chg) !important; margin: 0 !important; padding: 0 !important; background: none !important; font-size: 12px !important; color: inherit; }
@media (max-width: 860px) {
  .inst-wrap .inst-row { -webkit-mask-image: none !important; mask-image: none !important; }
  /* Fokus saya: tiap chip "BTCUSD M5" seperti canvas */
  .sig-top .fb-pair > b { display: none; }
  .sig-top .fb-pair { gap: 6px; }
  .sig-top .fb-tf { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
  .sig-top .fb-tf::before { content: attr(data-sym) " "; white-space: pre; }
}
@media (max-width: 860px) { .inst.fav b::after { display: none; } }
/* Cegah halaman melebar ke samping di HP (isi panjang/tabel hanya bergulir di dalam kotaknya) */
.main > * { min-width: 0; max-width: 100%; }
.brt-grid, .brt-main, .brt-side, .brt-an, .brt-cal, .brt-week, .brt-news, .anb-pairs, .brt-cats { min-width: 0; max-width: 100%; }
.tbl-wrap, .calw-wrap { max-width: 100%; overflow-x: auto; }
.page-jurnal section[aria-label="Daftar trade"] { min-width: 0; max-width: 100%; }
@media (max-width: 860px) { body { overflow-x: hidden; } .brt-an { width: 100%; } .anb-r b { white-space: normal; } }
.page-jurnal section[aria-label="Daftar trade"], .tbl-wrap { overflow-x: clip; } .tbl-wrap.jr-d { overflow-x: auto; contain: paint; }
@media (max-width: 860px) { .jr-tbl th:nth-child(1), .jr-tbl td:nth-child(1) { width: 44px; min-width: 44px; max-width: 44px; padding-left: 8px !important; padding-right: 4px !important; box-sizing: border-box; } }
/* iPhone (Safari): kunci halaman supaya tidak bisa digeser ke samping sama sekali */
@media (max-width: 860px) { html, body { overflow-x: hidden; } @supports (overflow-x: clip) { html, body { overflow-x: clip; } } body { position: relative; max-width: 100vw; } }

/* =====================================================================
   PANEL ADMIN (/bosbesar) sesuai canvas
   ===================================================================== */
body.page-admin { background: var(--page); }
.adm { display: flex; min-height: 100dvh; }
.adm-side { position: sticky; top: 0; height: 100dvh; width: 250px; flex: none; background: var(--navy); color: var(--side-text); display: flex; flex-direction: column; gap: 4px; padding: 24px 14px; }
.adm-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 6px; color: #fff; font-size: 16px; }
.adm-sub { padding: 0 10px 18px; font-size: 12px; color: var(--side-muted); }
.adm-mi { height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 0; border-radius: 14px; background: transparent; color: var(--side-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.adm-mi i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.adm-mi span { flex: 1; } .adm-mi small { font-size: 12px; color: var(--side-muted); }
.adm-mi:hover { background: var(--navy-2); }
.adm-mi[aria-current="page"] { background: var(--navy-2); color: #fff; font-weight: 800; box-shadow: inset 3px 0 0 var(--green); }
.adm-back { height: 44px; border-radius: 14px; border: 1px solid var(--navy-3); color: var(--side-text); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.adm-main { flex: 1; min-width: 0; padding: 26px 30px 60px; display: flex; flex-direction: column; gap: 18px; }
.adm-hd { display: flex; align-items: center; gap: 14px; }
.adm-hd > div { flex: 1; } .adm-hd small { font-size: 12px; font-weight: 600; color: var(--muted); } .adm-hd h1 { font-size: 26px; font-weight: 800; }
.adm-x { display: none; }
.adm-sec { display: flex; flex-direction: column; gap: 16px; }
.adm-sec[hidden] { display: none; }
.adm-sec .card { border-radius: 24px; margin: 0 !important; }
.adm-sec .h2 { color: var(--ink); font-weight: 700; }
.adm-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.adm-kpi article { background: var(--bg-fff); border: 1px solid var(--border-2); border-radius: 22px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-kpi span { font-size: 12px; font-weight: 600; color: var(--muted); } .adm-kpi b { font-size: 24px; font-weight: 800; } .adm-kpi small { font-size: 12px; color: var(--muted); }
.adm-kpi .adm-hero { position: relative; overflow: hidden; background: var(--green); border: 0; color: var(--navy); }
.adm-kpi .adm-hero::after { content: ""; position: absolute; right: -30px; bottom: -50px; width: 130px; height: 130px; border-radius: 50%; border: 24px solid rgba(255,255,255,.18); }
.adm-kpi .adm-hero span, .adm-kpi .adm-hero small { color: var(--navy); }
.adm-kpi .adm-warn { background: var(--bg-fef6e4); border-color: transparent; } .adm-warn span, .adm-warn b { color: var(--tx-8a5a00); }
.adm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.adm-two > .card { margin: 0 !important; }
.adm-todo, .adm-morel { display: flex; flex-direction: column; margin-top: 8px; }
.adm-go { display: flex; align-items: center; min-height: 50px; border: 0; border-top: 1px solid var(--border-2); background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; }
.adm-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.adm-pill.on { background: var(--green-tint); color: var(--green-t); } .adm-pill.off { background: var(--bg-eef0f3); color: var(--muted); } .adm-pill.role-adm { background: var(--navy); color: var(--green); }
.adm-soon { display: inline-flex; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; background: var(--bg-fef6e4); color: var(--tx-8a5a00); }
.adm-av { display: block; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; } .adm-av svg { width: 100%; height: 100%; display: block; }
.adm-mtbl td small { display: block; font-size: 12px; }
.adm-tabs { display: none; }
.page-admin .cfg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-admin .bos-grid { gap: 16px; }
@media (max-width: 1100px) { .adm-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-two { grid-template-columns: 1fr; } .page-admin .cfg-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .adm-side { display: none; }
  .adm-main { padding: 16px 16px calc(84px + env(safe-area-inset-bottom) + 20px); gap: 14px; }
  .adm-hd { position: sticky; top: 0; z-index: 20; margin: -16px -16px 0; padding: 14px 16px; background: var(--bg-fff); border-bottom: 1px solid var(--bd-eef0f3); }
  .adm-hd h1 { font-size: 22px; }
  .adm-x { display: block; position: relative; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy); }
  .adm-x > svg, .adm-x > img { width: 44px; height: 44px; border-radius: 50%; display: block; }
  .adm-kpi article { padding: 14px; border-radius: 20px; } .adm-kpi b { font-size: 22px; }
  .adm-kpi .adm-hero { grid-column: 1 / -1; }
  .adm-tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(76px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--bg-fff); border-top: 1px solid var(--border-2); }
  .adm-tb { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; }
  .adm-tb span { width: 52px; height: 30px; border-radius: 15px; display: grid; place-items: center; }
  .adm-tb[aria-current="page"] { color: var(--ink); } .adm-tb[aria-current="page"] span { background: var(--navy); color: var(--green); }
  .adm-mtbl th:nth-child(6), .adm-mtbl td:nth-child(6) { display: none; }
}
.adm-hd-logo, .adm-hd-sub { display: none; }
.adm-st { display: flex; flex-direction: column; margin-top: 8px; }
.adm-st > div { display: flex; align-items: center; gap: 10px; min-height: 46px; border-top: 1px solid var(--border-2); font-size: 14px; }
.adm-st i { width: 9px; height: 9px; border-radius: 50%; flex: none; } .adm-st b { flex: 1; } .adm-st span { font-size: 12px; color: var(--muted); }
@media (max-width: 860px) {
  .adm-hd { background: var(--navy); color: #fff; border: 0; border-radius: 0 0 28px 28px; padding: 18px 18px 20px; gap: 12px; }
  .adm-hd-logo { display: block; filter: none; }
  .adm-hd-sub { display: inline; color: var(--side-muted); } .adm-hd-crumb { display: none; }
  .adm-hd h1 { color: #fff; }
  .adm-x { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy-2); color: #fff; box-shadow: none; }
  .adm-tb[aria-current="page"] span { background: var(--green-tint); color: var(--green-t); } .adm-tb[aria-current="page"] { color: var(--green-t); }
  .adm-st > div { border: 1px solid var(--border-2); border-radius: 999px; padding: 0 16px; margin-top: 8px; }
}
@media (max-width: 860px) { .adm-x > svg { width: 16px !important; height: 16px !important; border-radius: 0 !important; } }

/* =====================================================================
   STUDIO LIVE (/stream) sesuai canvas
   ===================================================================== */
body.page-studio { background: var(--bg-fff); }
.btn-red { background: var(--red); border-color: var(--red); color: var(--di-turun); }
.st { display: grid; grid-template-columns: 370px minmax(0, 1fr) 420px; min-height: 100dvh; }
.st-left { padding: 24px 20px; border-right: 1px solid var(--border-2); display: flex; flex-direction: column; gap: 10px; }
.st-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .st-brand b { font-size: 18px; flex: 1; }
.st-back { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--page); color: var(--ink); }
.st-role { background: var(--red); color: var(--di-turun); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800; }
.st-h { font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px; }
.st-lays { display: flex; flex-direction: column; gap: 10px; }
.st-lay { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; border: 1px solid var(--border-2); background: var(--bg-fff); text-align: left; font: inherit; cursor: pointer; }
.st-lay b { display: block; font-size: 15px; } .st-lay small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; } .st-lay em { margin-top: 6px; }
.st-lay[aria-pressed="true"] { border: 2px solid var(--green); background: var(--green-tint); }
.st-lay:disabled { cursor: default; opacity: .7; }
.st-thumb { width: 52px; height: 92px; flex: none; border-radius: 10px; background: var(--navy); padding: 5px; display: grid; grid-template-rows: 2fr .4fr .4fr 1.4fr; gap: 3px; }
.st-thumb i { border-radius: 3px; background: var(--navy-3); } .st-th-trader i:nth-child(2) { background: var(--green); } .st-th-trader i:nth-child(3) { background: var(--red); }
.st-th-chart i:nth-child(1) { grid-row: span 2; } .st-th-berita i:nth-child(1) { background: #FACC15; }
.st-mid { background: var(--page); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; }
.st-status { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.st-live { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--bg-fff); font-size: 13px; }
.st-live i { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.st-live.on { background: var(--red); color: var(--di-turun); } .st-live.on i { background: var(--bg-fff); animation: blink 1s steps(2, start) infinite; }
.st-prev { width: min(410px, 100%); aspect-ratio: 9 / 16; max-height: calc(100dvh - 160px); border-radius: 30px; overflow: hidden; background: #2A1F24; box-shadow: 0 20px 50px rgba(20,25,33,.25); }
.st-prev iframe { width: 100%; height: 100%; border: 0; display: block; }
.st-guide { border-radius: 999px; }
.st-right { padding: 24px 22px 30px; border-left: 1px solid var(--border-2); display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 100dvh; position: sticky; top: 0; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-chips button { height: 38px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--bg-eef0f3); color: var(--muted); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.st-chips button[aria-pressed="true"] { background: var(--green); color: var(--navy); }
.st-tgs { display: flex; flex-direction: column; }
.st-tg { display: flex; align-items: center; gap: 12px; min-height: 50px; border-top: 1px solid var(--border-2); cursor: pointer; }
.st-tg > span { flex: 1; } .st-tg b { display: block; font-size: 14px; } .st-tg small { font-size: 12px; color: var(--muted); }
.st-tg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-tg i { width: 46px; height: 28px; flex: none; border-radius: 14px; background: #D1D5DC; position: relative; transition: background .2s; }
.st-tg i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-fff); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s var(--ease); }
.st-tg input:checked + i { background: var(--green); } .st-tg input:checked + i::after { transform: translateX(18px); }
.st-tg input:focus-visible + i { outline: 3px solid var(--green); outline-offset: 2px; }
.st-msg { display: flex; align-items: center; gap: 10px; } .st-msg input { flex: 1; min-width: 0; height: 46px; border-radius: 14px; border: 1px solid var(--input-border); background: var(--input-bg); padding: 0 14px; font: inherit; font-size: 14px; }
.st-tg-in { border: 0; min-height: 0; }
.st-link { margin-top: 14px; background: var(--navy); color: #fff; border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.st-link code { background: var(--navy-2); border: 1px solid var(--navy-3); border-radius: 14px; padding: 12px 14px; font-size: 13px; color: var(--side-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-link-b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .st-link-b .btn { border-radius: 999px; } .st-link-b .btn:not(.btn-green) { background: transparent; color: #fff; border-color: var(--navy-3); }
.st-link small { font-size: 12px; color: var(--side-muted); line-height: 1.5; }
.st-go { margin-top: 12px; border-radius: 999px; min-height: 56px; font-size: 15px; font-weight: 800; }
@media (max-width: 1200px) { .st { grid-template-columns: 300px minmax(0, 1fr) 360px; } }
/* HP: remote — urutan: status + pratinjau, layout, kontrol */
@media (max-width: 900px) {
  .st { display: flex; flex-direction: column; }
  .st-left { order: 2; border: 0; padding: 0 16px; }
  .st-brand { order: -1; margin: 0; }
  .st-lays { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
  .st-lay { flex: none; width: 250px; }
  .st-mid { order: 1; padding: 16px; }
  .st-prev { width: min(260px, 70vw); max-height: none; }
  .st-right { order: 3; border: 0; max-height: none; position: static; padding: 6px 16px 28px; }
  .st-left .st-brand { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: var(--bg-fff); padding: 12px 16px; border-bottom: 1px solid var(--bd-eef0f3); }
  .st-mid { padding-top: 76px; }
  .st-go { position: sticky; bottom: 12px; box-shadow: 0 10px 24px rgba(20,25,33,.25); }
}
.ak-live { background: var(--k-c81e1e); } .ak-live .ak-adm-ic { background: var(--bg-fff); color: var(--k-c81e1e); font-size: 12px; } .ak-live small { color: var(--k-ffd5d5) !important; } .ak-live em { color: #fff; }
.adm-pill.role-str { background: var(--bg-fdecec); color: var(--k-c81e1e); }
.adm-pill.role-pdf { background: var(--bg-fef6e4); color: var(--tx-8a5a00); }
.st-live { white-space: nowrap; } .st-status { flex-wrap: wrap; justify-content: center; }
.st-back { width: 40px; height: 40px; flex: none; display: grid; place-items: center; line-height: 0; } .st-back svg { display: block; }

/* ================= Tahap 1b: splash, masuk, daftar, selamat datang, setup, tur ================= */
.splash { display: none; }
.splash-on .splash { position: fixed; inset: 0; z-index: 999; background: #0D1117; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; transition: opacity .25s; }
.splash-out .splash { opacity: 0; pointer-events: none; }
.sp-ring { transform-origin: 12px 12px; animation: spIn .5s var(--ease) both; }
.sp-ticks { animation: spFade .3s .2s both; }
.sp-dollar { transform-origin: 12px 12px; animation: spPop .3s .85s var(--ease) both; }
.sp-dollar path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: spDraw .45s .3s ease-out both; }
.sp-dollar path + path { animation-delay: .65s; animation-duration: .2s; }
@keyframes spDraw { 0% { opacity: 0; stroke-dashoffset: 1; } 1% { opacity: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes spPop { 0%, 100% { transform: none; } 50% { transform: scale(1.12); } }
.sp-wave circle { transform-origin: 12px 12px; animation: spWave 1.2s .3s ease-out 1 both; }
.sp-bar { width: 140px; height: 3px; border-radius: 2px; background: #262B35; overflow: hidden; }
.sp-bar i { display: block; height: 100%; width: 0; background: var(--green); border-radius: 2px; animation: spFill 1.1s cubic-bezier(.3,.1,.3,1) forwards; }
@keyframes spFill { to { width: 100%; } }
.sp-t { color: var(--side-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
@keyframes spIn { from { transform: scale(.4) rotate(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spWave { from { transform: scale(1); opacity: .8; } to { transform: scale(1.5); opacity: 0; } }
@keyframes spBar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* masuk */
.lg { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--bg-fff); }
.lg-hero, .dj-hero, .mu-hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: 44px 56px; display: flex; flex-direction: column; }
.lg-ring { position: absolute; right: -120px; top: -90px; width: 420px; height: 420px; border-radius: 50%; border: 56px solid var(--ka-37-198-96-_07); pointer-events: none; }
.lg-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; color: #fff; position: relative; }
.lg-brand svg { flex: none; }
.lg-hero h1 { margin-top: 64px; font-size: 44px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; position: relative; }
.lg-hero > p { margin-top: 12px; color: var(--side-text); font-size: 16px; position: relative; }
.lg-chart { margin-top: 36px; position: relative; border-radius: 20px; background: var(--navy-2); border: 1px solid var(--line-d); padding: 16px 16px 8px; }
.lg-pill { display: inline-flex; gap: 6px; align-items: center; background: var(--navy); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; } .lg-pill em { font-style: normal; background: var(--green); color: var(--navy); border-radius: 999px; padding: 1px 6px; font-size: 10px; }
.lg-live { float: right; font-size: 12px; color: var(--green); font-weight: 700; }
.lg-line { width: 100%; height: 150px; margin-top: 8px; }
.lg-warn { margin-top: auto !important; padding-top: 28px; font-size: 12px !important; color: var(--side-muted) !important; }
.lg-main { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 32px; gap: 14px; }
.lg-card { width: 100%; max-width: 420px; }
.lg-card h2 { font-size: 30px; font-weight: 800; letter-spacing: -.01em; } .lg-sub { margin: 4px 0 20px; }
.lg-card .form { display: flex; flex-direction: column; gap: 16px; }
.lg-card .f input { min-height: 52px; border-radius: 14px; }
.lg-card .pass-wrap button { background: var(--bg-eef0f3); color: var(--ink); border-radius: 999px; font-size: 12px; font-weight: 800; padding: 8px 12px; }
.lg-card .f input[aria-invalid="true"] { border-color: var(--red); background: var(--red-tint); }
.lg-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.lg-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lg-check i { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 2px solid var(--input-border); margin-top: 1px; display: grid; place-items: center; }
.lg-check input:checked + i { background: var(--green); border-color: var(--green); }
.lg-check input:checked + i::after { content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2.4px 2.4px; transform: rotate(-45deg) translate(1px, -1px); }
.lg-check input:focus-visible + i { outline: 2px solid var(--green); outline-offset: 2px; }
.lg-captcha { display: flex; justify-content: center; min-height: 65px; max-width: 100%; overflow: hidden; }
.lg-check b { display: block; font-size: 13px; } .lg-check small { font-size: 12px; color: var(--muted); }
.lg-go { margin-top: 4px; height: 56px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 12px; }
.lg-go span { width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: var(--navy); display: grid; place-items: center; }
.lg-go:hover { background: #000; } .lg-go:active { transform: scale(.98); }
.lg-go:disabled { background: var(--bg-eef0f3); color: var(--muted); cursor: not-allowed; } .lg-go:disabled span { background: #D1D5DC; color: #fff; }
.lg-note { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; padding: 12px 14px; font-size: 13px; margin-bottom: 16px; }
.lg-note > b { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; }
.lg-note.err { background: var(--red-tint); color: var(--k-8b1515); } .lg-note.err > b { background: var(--red); }
.lg-note.lock { background: var(--bg-fef6e4); color: var(--tx-6b4500); } .lg-note.lock > b { background: #D99A00; }
.lg-help { width: 100%; max-width: 420px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-2); border-radius: 999px; padding: 8px 14px 8px 8px; font-size: 13px; color: var(--muted); }
.lg-help u { color: var(--green-t); font-weight: 700; }
.lg-bot { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--navy); display: grid; place-items: center; }
.lg-join { font-size: 13px; color: var(--muted); } .lg-join a { color: var(--green-t); font-weight: 700; text-decoration: underline; }
@media (max-width: 860px) {
  .lg { display: block; background: var(--page); }
  .lg-hero { padding: 26px 22px 70px; border-radius: 0 0 28px 28px; }
  .lg-hero h1 { margin-top: 34px; font-size: 30px; }
  .lg-hero > p { font-size: 14px; }
  .lg-chart { background: none; border: 0; padding: 0; margin: 4px -22px -70px; }
  .lg-pill, .lg-live, .lg-warn { display: none; }
  .lg-line { height: 90px; }
  .lg-main { padding: 0 16px 28px; margin-top: -40px; position: relative; }
  .lg-card { background: var(--bg-fff); border-radius: 24px; padding: 18px 16px; box-shadow: 0 10px 30px rgba(20,25,33,.10); }
  .lg-card h2, .lg-sub { display: none; }
}

/* daftar */
.dj { min-height: 100dvh; background: var(--page); }
.dj-hero { padding: 26px 56px 30px; }
.dj-top { display: flex; align-items: center; justify-content: space-between; position: relative; gap: 12px; }
.dj-masuk { background: var(--navy-2); border: 1px solid var(--navy-3); color: #fff; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 800; }
.dj-hero h1 { margin-top: 30px; font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; position: relative; }
.dj-hero > p { margin-top: 8px; color: var(--side-text); position: relative; max-width: 520px; }
.dj-prog { margin-top: 18px; display: flex; align-items: center; gap: 12px; max-width: 520px; position: relative; }
.dj-prog .meter { flex: 1; background: var(--navy-3); } .dj-prog .meter i { background: var(--green); }
.dj-prog b { font-size: 13px; color: var(--green); white-space: nowrap; }
.dj-main { max-width: 1120px; margin: 0 auto; padding: 26px 32px 40px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.dj-q { display: block; font-size: 15px; margin-bottom: 10px; }
.dj-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--bg-eef0f3); border-radius: 18px; padding: 4px; margin-bottom: 16px; }
.dj-seg button { border: 0; background: transparent; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; align-items: center; color: var(--muted); }
.dj-seg button b { font-size: 14px; } .dj-seg button small { font-size: 12px; }
.dj-seg button[aria-selected="true"] { background: var(--navy); color: #fff; } .dj-seg button[aria-selected="true"] b { color: var(--green); } .dj-seg button[aria-selected="true"] small { color: var(--green); opacity: .8; }
.dj-steps { display: flex; flex-direction: column; gap: 12px; }
.dj-steps .step { background: var(--bg-fff); border: 1px solid var(--border-2); border-radius: 22px; padding: 18px; padding-bottom: 18px; }
.dj-steps .step::before, .dj-steps .step::after { display: none !important; }
.dj-steps .step .n { width: 40px; height: 40px; background: var(--bg-eef0f3); border: 0; color: var(--ink); }
.dj-steps .step.cur { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
.dj-steps .step.done .n { background: var(--green); color: var(--di-naik); }
.dj-steps .act .btn { border-radius: 999px; }
.dj-steps .step-mark { text-decoration: none; border: 1px solid var(--border-2); border-radius: 999px; padding: 8px 14px; color: var(--ink); font-weight: 700; }
.dj-steps .step-mark[aria-pressed="true"] { background: var(--green-tint); border-color: transparent; color: var(--green-t); }
.dj-tpl { margin-top: 10px; background: var(--bg-f3f4f6); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.dj-tpl p { font-size: 13px; color: var(--ink) !important; margin: 0 !important; }
.dj-tpl .btn { border-radius: 999px; }
.dj-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
.dj-side .faq { border-radius: 22px; }
.dj-help { display: flex; align-items: center; gap: 12px; background: var(--navy); color: #fff; border-radius: 22px; padding: 14px; }
.dj-help > span:nth-child(2) { flex: 1; } .dj-help b { display: block; font-size: 14px; } .dj-help small { color: var(--side-muted); font-size: 12px; }
.dj-help em { font-style: normal; background: var(--green); color: var(--navy); border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.dj-help .lg-bot { background: var(--navy-2); }
@media (max-width: 900px) {
  .dj-hero { padding: 22px 18px 24px; border-radius: 0 0 28px 28px; }
  .dj-hero h1 { font-size: 28px; margin-top: 24px; }
  .dj-hero > p { font-size: 13px; }
  .dj-main { display: flex; flex-direction: column; padding: 18px 14px 32px; }
  .dj-left, .dj-side { width: 100%; } .dj-side { position: static; }
}

/* selamat datang */
.mu { min-height: 100dvh; background: var(--page); }
.mu-hero { padding: 26px 56px 30px; }
.mu-skip { border: 0; background: transparent; color: var(--side-muted); font-size: 13px; font-weight: 700; padding: 6px; }
.mu-bot { margin-top: 28px; width: 72px; height: 72px; position: relative; }
.mu-bot svg { width: 72px; height: 72px; }
.mu-hero h1 { margin-top: 14px; font-size: 34px; font-weight: 800; line-height: 1.15; position: relative; }
.mu-hero > p { margin-top: 10px; color: var(--side-text); max-width: 520px; position: relative; }
.mu-main { max-width: 720px; margin: 0 auto; padding: 22px 16px 110px; }
.mu-main h2 { font-size: 18px; font-weight: 800; margin-bottom: 12px; }
.mu-list { display: flex; flex-direction: column; gap: 10px; }
.mu-row { display: flex; align-items: center; gap: 14px; background: var(--bg-fff); border: 1px solid var(--border-2); border-radius: 20px; padding: 14px; }
.mu-row:hover { border-color: var(--green); }
.mu-n { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--bg-eef0f3); display: grid; place-items: center; font-weight: 800; }
.mu-row > span:nth-child(2) { flex: 1; min-width: 0; } .mu-row b { display: block; font-size: 14px; } .mu-row b em { font-style: normal; font-size: 10px; font-weight: 800; color: var(--muted); background: var(--bg-eef0f3); border-radius: 999px; padding: 2px 7px; margin-left: 4px; vertical-align: 1px; }
.mu-row small { font-size: 12px; color: var(--muted); }
.mu-row > i { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid var(--border-2); display: grid; place-items: center; font-style: normal; font-weight: 800; }
.mu-go { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; width: min(688px, calc(100% - 32px)); height: 56px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 16px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(20,25,33,.25); }
@media (max-width: 900px) { .mu-hero { padding: 22px 18px 24px; border-radius: 0 0 28px 28px; } .mu-hero h1 { font-size: 28px; } .mu-hero > p { font-size: 13px; } }

/* setup */
.su { min-height: 100dvh; display: grid; grid-template-columns: 300px minmax(0, 1fr); background: var(--bg-fff); }
.su-side { background: var(--navy); color: #fff; padding: 28px 20px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100dvh; }
.su-side .lg-brand { margin-bottom: 22px; }
.su-nav { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; color: var(--side-text); text-align: left; padding: 10px; border-radius: 14px; font-weight: 700; }
.su-nav.cur { background: var(--navy-2); color: #fff; }
.su-dot { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid var(--navy-3); display: grid; place-items: center; font-size: 12px; }
.su-nav.cur .su-dot { border-color: var(--green); color: var(--green); } .su-nav.done .su-dot { background: var(--green); border-color: var(--green); color: var(--navy); }
.su-later { color: var(--side-muted); font-size: 13px; font-weight: 700; padding: 10px; }
.su-main { max-width: 640px; width: 100%; margin: 0 auto; padding: 32px 24px 40px; display: flex; flex-direction: column; gap: 16px; min-height: 100dvh; }
.su-hd { display: flex; align-items: center; gap: 12px; }
.su-hd > div { flex: 1; } .su-hd small { font-size: 12px; color: var(--muted); } .su-hd h1 { font-size: 22px; font-weight: 800; }
.su-back { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--border-2); background: var(--bg-fff); display: grid; place-items: center; line-height: 0; }
.su-nanti { font-size: 13px; font-weight: 700; color: var(--muted); }
.su-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } .su-bars i { height: 4px; border-radius: 2px; background: var(--bg-eef0f3); } .su-bars i.on { background: var(--green); }
.su-step { display: flex; flex-direction: column; gap: 14px; }
.su-av { display: grid; grid-template-columns: repeat(4, minmax(0, 72px)); gap: 14px; }
.su-av .ak-pick { border-color: var(--border-2); }
.su-av .ak-pick[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--green); }
.su-step .f input { min-height: 52px; border-radius: 14px; }
.su-req { align-self: flex-start; background: var(--green-tint); color: var(--green-t); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; }
.su-h { font-size: 13px; margin-bottom: -6px; }
.su-money { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.su-money input { height: 64px; border-radius: 16px; border: 1px solid var(--input-border); background: var(--input-bg); padding: 0 16px; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.su-quick { display: flex; gap: 8px; } .su-quick button { border: 1px solid var(--border-2); background: var(--bg-fff); border-radius: 999px; padding: 8px 14px; font-weight: 700; }
.su-gs { display: flex; gap: 12px; align-items: center; border: 1px solid var(--border-2); border-radius: 18px; padding: 14px; } .su-gs > span:nth-child(2) { flex: 1; } .su-gs b { display: block; } .su-gs small { font-size: 12px; color: var(--muted); }
.su-hint { margin-top: auto; text-align: center; font-size: 12px; color: var(--muted); }
.su-ft { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.su-ft .btn { height: 54px; border-radius: 999px; font-size: 15px; font-weight: 800; }
.su-ft .su-skipb[hidden] + .su-next { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .su { display: block; } .su-side { display: none; }
  .su-main { padding: 16px 16px 20px; }
  .su-ft { position: sticky; bottom: 12px; background: var(--bg-fff); }
  .su-av { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* tur fitur */
.tur { position: fixed; inset: 0; z-index: 300; background: rgba(13,17,23,.72); display: grid; place-items: center; padding: 16px; animation: spFade .25s both; }
.tur-c { width: min(420px, 100%); background: var(--navy); color: #fff; border-radius: 28px; padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.tur-hd { display: flex; justify-content: space-between; font-size: 12px; color: var(--side-muted); font-weight: 700; }
.tur-hd button { border: 0; background: transparent; color: var(--side-text); font-weight: 700; font-size: 13px; }
.tur-ill { height: 190px; border-radius: 20px; background: var(--navy-2); border: 1px solid var(--line-d); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tur-ill .ti-pill { align-self: flex-start; font-size: 12px; font-weight: 800; background: var(--navy); border-radius: 999px; padding: 4px 10px; } .tur-ill .ti-pill em { font-style: normal; background: var(--green); color: var(--navy); border-radius: 999px; padding: 0 5px; margin-left: 4px; }
.tur-ill .ti-z { height: 22px; border-radius: 4px; font-size: 9px; font-weight: 800; padding: 4px 8px; }
.tur-ill .ti-z.s { width: 60%; background: var(--ka-200-30-30-_5); color: var(--k-fca5a5); } .tur-ill .ti-z.d { width: 55%; margin-left: auto; background: rgba(37,99,235,.5); color: #BFDBFE; text-align: right; }
.tur-ill .ti-row { display: flex; gap: 8px; } .tur-ill .ti-row i { flex: 1; height: 26px; border-radius: 8px; background: var(--navy-3); } .tur-ill .ti-row i.g { background: var(--green); }
.tur-tag { align-self: flex-start; background: var(--green-t); color: var(--di-naik); border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 800; }
.tur-c h2 { font-size: 22px; font-weight: 800; } .tur-c p { color: var(--side-text); font-size: 14px; }
.tur-ft { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.tur-dots { display: flex; gap: 6px; } .tur-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--navy-3); transition: width .2s; } .tur-dots i.on { width: 22px; background: var(--green); }
.tur-next { border: 0; background: var(--green); color: var(--navy); border-radius: 999px; padding: 12px 22px; font-weight: 800; font-size: 15px; }
body.page-login, body.page-daftar, body.page-mulai, body.page-setup { padding-left: 0 !important; padding-bottom: 0 !important; }
body.page-admin, body.page-studio { padding-left: 0 !important; }
/* panel admin › kelola member */
.mm-bar { display: flex; gap: 8px; margin-top: 12px; }
.mm-bar input, .mm-bar select { min-height: 42px; border-radius: 999px; border: 1px solid var(--input-border); background: var(--input-bg); padding: 0 16px; font-size: 14px; }
.mm-bar input { flex: 1; min-width: 0; }
.mm-roles { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.mm-you { font-style: normal; font-size: 10px; font-weight: 800; background: var(--green-tint); color: var(--green-t); border-radius: 999px; padding: 1px 7px; vertical-align: 1px; }
.mm-kelola { border-radius: 999px; }
.mm-add { border-radius: 999px; }
.mm-form { display: flex; flex-direction: column; gap: 12px; }
.mm-h { display: block; font-size: 13px; margin: 16px 0 4px; }
.mm-wide { width: 100%; border-radius: 999px; min-height: 46px; }
.mm-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.mm-info div { background: var(--bg-f3f4f6); border-radius: 12px; padding: 8px 12px; } .mm-info span { display: block; font-size: 12px; color: var(--muted); } .mm-info b { font-size: 13px; }
.mm-danger { margin-top: 18px; border: 1px solid var(--k-f5c2c2); border-radius: 16px; padding: 10px 14px; }
.mm-danger summary { color: var(--red); font-weight: 800; cursor: pointer; }
.mm-danger p { font-size: 13px; color: var(--muted); margin: 8px 0; } .mm-danger .f { margin-bottom: 10px; }
.mp-box { margin-top: 12px; display: flex; align-items: center; gap: 10px; background: var(--navy); border-radius: 14px; padding: 12px 12px 12px 16px; }
.mp-box code { flex: 1; color: var(--green); font-size: 20px; font-weight: 800; letter-spacing: .04em; word-break: break-all; }
.mm-log { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; } .mm-log li { padding: 8px 0; border-top: 1px solid var(--border-2); display: flex; gap: 8px; flex-wrap: wrap; } .mm-log li:first-child { border-top: 0; }
@media (max-width: 860px) {
  .adm-mtbl thead { display: none; }
  .adm-mtbl, .adm-mtbl tbody { display: block; }
  .adm-mtbl tr { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border-2); }
  .adm-mtbl tr[hidden] { display: none; }
  .adm-mtbl td { padding: 0 !important; border: 0 !important; display: block !important; }
  .adm-mtbl td:nth-child(1) { grid-row: 1 / 3; }
  .adm-mtbl td:nth-child(2) { grid-column: 2; }
  .adm-mtbl td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .adm-mtbl td:nth-child(4) { grid-column: 3; grid-row: 1; justify-self: end; }
  .adm-mtbl td:nth-child(5), .adm-mtbl td:nth-child(6) { display: none !important; }
  .adm-mtbl td:nth-child(7) { grid-column: 3; grid-row: 2; }
  .adm-mtbl tr:first-child { border-top: 0; }
  .mm-add { padding: 0 12px; }
}
/* dampak berita (tab Analisa + badge kartu sinyal) */
.dmp { margin-top: 12px; }
.dmp-next { display: flex; align-items: center; gap: 12px; margin-top: 6px; background: var(--navy); color: #fff; border-radius: 16px; padding: 12px 14px; }
.dmp-next > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dmp-next small { font-size: 12px; color: #FACC15; font-weight: 700; } .dmp-next b { font-size: 14px; } .dmp-next .muted { color: var(--side-muted); font-size: 12px; }
.dmp-next em { font-style: normal; font-weight: 800; font-size: 18px; color: var(--green); white-space: nowrap; }
.dmp-none { margin-top: 6px; font-size: 13px; color: var(--muted); background: var(--bg-f3f4f6); border-radius: 12px; padding: 10px 12px; }
.dmp-list { margin-top: 6px; }
.dmp-r { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border-2); font-size: 13px; }
.dmp-r:first-child { border-top: 0; } .dmp-r b { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dmp-r.done { opacity: .5; }
.dmp-r .imp { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #D1D5DC; } .dmp-r .imp3 { background: var(--red); } .dmp-r .imp2 { background: #F59E0B; }
.dmp-note { margin-top: 8px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; background: var(--bg-fef6e4); } .dmp-note b { display: block; font-size: 12px; color: var(--tx-b45309); margin-bottom: 2px; }
.dmp-go { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--green-t); }
.dmp-badge { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; background: var(--bg-fef6e4); color: var(--tx-6b4500); border-radius: 12px; padding: 9px 12px; font-size: 12px; line-height: 1.45; }
.dmp-badge b { color: var(--tx-8a5a00); }
/* Jurnal › upload screenshot MT5 */
button.jr-up { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.jr-up-go { margin-left: auto; background: var(--navy); color: #fff; border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.sc-sheet { width: min(720px, calc(100vw - 32px)); }
.sc-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 2px dashed var(--k-b7e4c7); background: var(--green-tint); border-radius: 18px; padding: 22px; margin-top: 12px; cursor: pointer; text-align: center; }
.sc-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sc-drop:focus-within { outline: 2px solid var(--green); }
.sc-drop small { color: var(--muted); font-size: 12px; }
.sc-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sc-th { position: relative; width: 64px; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-2); }
.sc-th img { width: 100%; height: 100%; object-fit: cover; }
.sc-th button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(20,25,33,.75); color: #fff; font-size: 12px; display: grid; place-items: center; padding: 0; }
.sc-err { margin-top: 10px; background: var(--red-tint); color: var(--k-8b1515); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.sc-wide { width: 100%; margin-top: 12px; border-radius: 999px; min-height: 48px; }
.sc-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 0; text-align: center; } .sc-wait small { color: var(--muted); }
.sc-spin { width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--green-tint); border-top-color: var(--green); animation: scSpin .8s linear infinite; }
@keyframes scSpin { to { transform: rotate(360deg); } }
.sc-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; max-height: 55dvh; overflow-y: auto; }
.sc-row { border: 1px solid var(--border-2); border-radius: 16px; padding: 12px; }
.sc-row.dup { background: var(--bg-f7f7f7); }
.sc-chk { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.sc-chk input { width: 20px; height: 20px; accent-color: var(--green); flex: none; }
.sc-chk b { display: block; font-size: 14px; } .sc-chk small { font-size: 12px; color: var(--muted); }
.sc-row.dup .sc-chk small { color: var(--tx-8a5a00); font-weight: 700; }
.sc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.sc-grid label { display: flex; flex-direction: column; gap: 2px; font-size: 10px; font-weight: 700; color: var(--muted); min-width: 0; }
.sc-grid label:first-child { grid-column: span 2; }
.sc-grid input, .sc-grid select { width: 100%; min-width: 0; height: 36px; border-radius: 8px; border: 1px solid var(--input-border); background: var(--input-bg); padding: 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-grid label.uns input, .sc-grid label.uns select { background: var(--bg-fef3c7); border-color: #F59E0B; }
.sc-unsure-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--bg-fef3c7); border: 1px solid #F59E0B; vertical-align: -1px; }
.sc-ft { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 12px; } .sc-ft .btn { border-radius: 999px; min-height: 48px; }
@media (max-width: 600px) { .sc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sc-grid label:first-child { grid-column: span 3; } }
/* Pusat bantuan di desktop lebar: tetap tombol maskot mengambang (sama seperti HP), bukan kartu di menu samping */
@media (min-width: 861px) {
  .side-help { display: none !important; }
  .top-in > .top-right { margin-top: auto !important; }   /* profil tetap di pojok kiri bawah */
  .help-fab { display: flex !important; right: 28px; bottom: 28px; }
}
/* panel admin › spreadsheet member */
.ms-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 12px; padding-bottom: 2px; }
.ms-tabs::-webkit-scrollbar { display: none; }
.ms-tabs button { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--bg-eef0f3); color: var(--muted); font: inherit; font-size: 13px; font-weight: 800; }
.ms-tabs button[aria-selected="true"] { background: var(--navy); color: var(--green); }
.ms-wrap { margin-top: 10px; overflow: auto; max-height: 70dvh; border: 1px solid var(--border-2); border-radius: 14px; }
.ms-tbl { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; }
.ms-tbl th, .ms-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border-2); background: var(--bg-fff); text-align: left; vertical-align: middle; }
.ms-tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-f3f4f6); white-space: nowrap; }
.ms-tbl th button { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; white-space: nowrap; }
.ms-tbl .r { text-align: right; } .ms-tbl .nw { white-space: nowrap; }
.ms-tbl td small { display: block; font-size: 12px; color: var(--muted); }
.ms-tbl .stk { position: sticky; z-index: 1; } .ms-tbl thead .stk { z-index: 3; }
.ms-tbl .stk0 { left: 0; min-width: 44px; } .ms-tbl .stk1 { left: 44px; min-width: 150px; max-width: 190px; box-shadow: 1px 0 0 var(--border-2); }
.ms-tbl tfoot td { position: sticky; bottom: 0; background: var(--bg-f3f4f6); border-top: 1px solid var(--border); }
.ms-tbl tfoot .stk { z-index: 2; }
.ms-tbl .day { min-width: 84px; }
.ms-tbl td.up { color: var(--green-t); font-weight: 700; } .ms-tbl td.down { color: var(--red); font-weight: 700; }
.ms-name { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: var(--ink); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; display: block; }
.ms-name:hover { color: var(--green-t); text-decoration: underline; }
.ms-cell { cursor: pointer; } .ms-cell:hover { background: var(--green-tint) !important; }
.ms-cell.man { position: relative; } .ms-cell.man::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #F59E0B; }
.ms-man-key { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #F59E0B; vertical-align: 1px; }
.ms-in { width: 92px; height: 30px; border: 2px solid var(--green); border-radius: 8px; padding: 0 6px; font: inherit; font-size: 13px; text-align: right; }
.jc-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 12px; }
.jc-tg { flex: 1 1 260px; border-top: 0; }
.jc-f { width: 150px; } .jc-row .btn { border-radius: 999px; min-height: 44px; }
@media (max-width: 860px) { .ms-tbl .stk1 { min-width: 120px; max-width: 130px; } .ms-name { max-width: 116px; } .jc-f { width: calc(50% - 6px); } }
.jr-cards > button.jr-up { display: flex; align-items: center; gap: 12px; min-height: 86px; padding: 16px 18px; border-radius: 24px; margin: 0; border: 0; align-self: stretch; }
.jr-cards > button.jr-up > span:nth-child(2) { flex: 1; min-width: 0; }
.jr-cards > button.jr-up .jr-up-go { background: var(--green); color: var(--navy); }
@media (max-width: 860px) { .jr-cards > button.jr-up { min-height: 0; padding: 14px; } }
.mm-bar select { flex: none; max-width: 46%; }
@media (max-width: 600px) { .mm-bar select { width: 42%; } }
.sc-paste { margin-top: 6px; } .sc-paste kbd { font: inherit; font-size: 12px; font-weight: 800; background: var(--bg-fff); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; }
.sc-drop.over { border-color: var(--green); background: var(--bg-d1f2dc); }
@media (hover: none) { .sc-paste { display: none !important; } }
.sc-note { margin-top: 8px; background: var(--bg-fef6e4); color: var(--tx-6b4500); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; } .sc-note p + p { margin-top: 6px; }
.sc-tag { margin-left: auto; flex: none; font-style: normal; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 9px; }
.sc-tag.open { background: var(--bg-e0ecff); color: #1D4ED8; } .sc-tag.close { background: var(--green-tint); color: var(--green-t); }
.sc-chk > span { flex: 1; min-width: 0; }
.ms-cent { color: var(--tx-8a5a00) !important; font-weight: 700; }
/* Jurnal › kartu Google Sheet */
.jr-gs .btn { border-radius: 999px; }
.jr-gs-ok { font-style: normal; font-size: 10px; font-weight: 800; background: var(--green-tint); color: var(--green-t); border-radius: 999px; padding: 2px 8px; margin-left: 4px; vertical-align: 2px; }
.jr-gs-act { display: flex; gap: 6px; align-items: center; flex: none; }
.jr-gs-act form { margin: 0; }
.jr-gs-x { width: 34px; padding: 0; justify-content: center; color: var(--muted); }
.jr-cards > article.jr-gs.on { flex-wrap: wrap; row-gap: 8px; }
.jr-gs.on .jr-gs-act { flex-basis: 100%; padding-left: 56px; }
@media (max-width: 860px) { .jr-gs.on .jr-gs-act { padding-left: 0; } }
.tt-chg, .sig-price .tt-chg { white-space: nowrap; }
.tt-live { white-space: nowrap; }
.an-main > .dmp:last-child, .an-side > .dmp:last-child { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-2); }
/* panel admin › kecepatan data */
.dg-verdict { margin-top: 8px; font-size: 14px; font-weight: 600; border-radius: 12px; padding: 10px 12px; background: var(--bg-f3f4f6); }
.dg-verdict.ok { background: var(--green-tint); color: var(--green-t); } .dg-verdict.bad { background: var(--red-tint); color: var(--tx-991b1b); } .dg-verdict.warn { background: var(--bg-fef6e4); color: var(--tx-6b4500); }
.dg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.dg-grid div { background: var(--bg-f3f4f6); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.dg-grid span { display: block; font-size: 12px; color: var(--muted); font-weight: 700; } .dg-grid b { display: block; font-size: 20px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; } .dg-grid small { display: block; font-size: 12px; color: var(--muted); }
.dg-spark { display: flex; align-items: flex-end; gap: 1px; height: 60px; margin-top: 12px; background: var(--bg-f9fafb); border-radius: 8px; padding: 4px; }
.dg-spark i { flex: 1; min-width: 1px; background: var(--green); border-radius: 1px; } .dg-spark i.slow { background: var(--red); } .dg-spark i.be { background: #F59E0B; }
.adm-pill.warn { background: var(--bg-fef6e4); color: var(--tx-8a5a00); }
@media (max-width: 860px) { .dg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dg-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .dg-hd .muted { font-size: 12px; } .dg-hd .btn { border-radius: 999px; }
/* panel admin › kecocokan server vs MT5 */
.bc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.bc-grid div { background: var(--bg-f3f4f6); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.bc-grid div.ok { background: var(--green-tint); } .bc-grid div.warn { background: var(--bg-fef6e4); } .bc-grid div.bad { background: var(--red-tint); }
.bc-grid span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); } .bc-grid b { display: block; font-size: 22px; font-weight: 800; } .bc-grid small { display: block; font-size: 12px; color: var(--muted); }
.bc-diff { margin-top: 12px; overflow-x: auto; } .bc-diff b { font-size: 13px; } .bc-diff .tbl { margin-top: 6px; font-size: 12px; }
@media (max-width: 860px) { .bc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* kartu kecocokan: cek data candle */
#bc-data .pos { color: var(--green-t); font-weight: 600; } #bc-data .neg { color: var(--red); font-weight: 600; }
#bc-data ul { margin: 4px 0 0 18px; padding: 0; } #bc-data li { margin: 2px 0; word-break: break-word; }
/* kartu sumber Bullseye */
.bs-sw { display: flex; gap: 8px; margin-top: 10px; } .bs-sw .btn { min-width: 110px; }
.bs-pill { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--bg-f3f4f6); color: var(--ink); } .bs-pill.ok { background: var(--green-tint); color: var(--green-t); }
/* ---------- Admin › Aturan Bullseye (modul, aturan entry, uji aturan) ---------- */
[data-sec="be"] .pos { color: var(--green-t); font-weight: 600; } [data-sec="be"] .neg { color: var(--red); font-weight: 600; }
.ab-state { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--green-tint); color: var(--green-t); }
.ab-state.dirty { background: var(--bg-fef6e4); color: var(--tx-6b4500); }
.ab-warn { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-fef6e4); color: var(--tx-6b4500); font-size: 13px; }
.ab-pre, .ab-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.ab-act .btn:disabled { opacity: .45; cursor: default; }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; margin-top: 10px; }
.ab-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.ab-grid label.ck { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; }
.ab-grid input[type=number] { height: 38px; border: 1px solid var(--input-border); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--ink); background: var(--input-bg); width: 100%; }
.ab-grid input[type=checkbox], .ab-sw input { width: 18px; height: 18px; accent-color: var(--green); }
.ab-mods { display: grid; gap: 8px; margin-top: 8px; }
.ab-mod { border: 1px solid var(--border); border-radius: 14px; padding: 0 14px; background: var(--bg-fff); }
.ab-mod summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; }
.ab-mod summary::-webkit-details-marker { display: none; }
.ab-mod summary b::before { content: '›'; display: inline-block; width: 14px; transition: transform .15s; color: var(--muted); }
.ab-mod[open] summary b::before { transform: rotate(90deg); }
.ab-mod[open] { padding-bottom: 14px; }
.ab-role { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--bg-f3f4f6); color: var(--muted); white-space: nowrap; }
.r-wajib .ab-role { background: var(--navy); color: #fff; } .r-filter .ab-role { background: var(--bg-e8f0fe); color: #1D4ED8; }
.r-skor .ab-role { background: var(--green-tint); color: var(--green-t); } .r-mati .ab-role { background: var(--red-tint); color: var(--red); }
.ab-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.ab-row select, .au-f select { height: 38px; border: 1px solid var(--input-border); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; background: var(--input-bg); color: var(--ink); }
.ab-tag { font-size: 12px; font-weight: 700; color: var(--muted); }
.ab-bobot { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ab-bobot input { width: 64px; height: 38px; border: 1px solid var(--input-border); border-radius: 10px; padding: 0 8px; font: inherit; }
.ab-sw { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.ab-tfs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 12px; }
.ab-tfs.full { grid-column: 1 / -1; margin-top: 0; } .ab-tfs.full > span { color: var(--muted); margin-right: 4px; }
.ab-chip { height: 30px; min-width: 44px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-fff); font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.ab-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.au-f { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; }
.au-f label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.au-tf { display: flex; flex-wrap: wrap; gap: 6px; }
#au-res { margin-top: 12px; } #au-res .tbl td:first-child { white-space: nowrap; }
@media (max-width: 640px) { .ab-grid { grid-template-columns: 1fr 1fr; } .ab-act .btn { flex: 1 1 auto; } #ap .h2-row { flex-wrap: wrap; gap: 8px; } }
.ab-grid label.ck { align-self: end; min-height: 38px; color: var(--ink); font-size: 13px; }
.au-why { margin-top: 10px; display: grid; gap: 6px; } .au-why p { margin: 0; font-size: 13px; color: var(--muted); padding: 10px 12px; background: var(--bg-f7f8fa); border-radius: 12px; } .au-why b { color: var(--ink); }
.ab-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-top: 14px; border-radius: 999px; background: var(--bg-f3f4f6); }
.ab-tabs button { height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; }
.ab-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; }
.ab-note { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.ab-tabs { flex-wrap: wrap; }
.ab-tabs button i { font-style: normal; margin-left: 8px; opacity: .6; padding: 0 2px; } .ab-tabs button i:hover { opacity: 1; }
.ab-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; font-size: 13px; }
.ab-add select { height: 34px; border: 1px solid var(--input-border); border-radius: 10px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--input-bg); }
.as-in { width: 110px; height: 34px; border: 1px solid var(--input-border); border-radius: 10px; padding: 0 8px; font: inherit; }
.ac-t td { vertical-align: top; font-size: 13px; } .ac-t tr.ok td { background: var(--bg-f3fbf6); }
.ac-ok { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--green-tint); color: var(--green-t); }
.ac-warn { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--bg-fef6e4); color: var(--tx-6b4500); font-size: 13px; }
.au-f label.au-ck { flex-direction: row; align-items: center; gap: 6px; height: 38px; font-size: 13px; font-weight: 600; color: var(--ink); } .au-ck input { width: 18px; height: 18px; accent-color: var(--green); }
/* ---------- Cara baca chart (legenda) & tombol kepala chart, versi rapi ---------- */
.chart-head .guide-pop summary { width: 34px; height: 34px; padding: 0; justify-content: center; border: 1px solid var(--navy-3); background: var(--navy-2); color: #D1D5DB; }
.chart-head .guide-pop summary .gp-l { display: none; }
.chart-head .guide-pop .gp-i { width: 18px; height: 18px; font-size: 11px; font-style: normal; font-family: inherit; }
.chart-head .guide-pop[open] summary { background: #2A303B; color: #fff; border-color: #4B5263; }
.gp-box { width: min(460px, calc(100% - 24px)); max-width: none; right: auto; padding: 0; overflow: hidden; border-radius: 16px; background: #171B22; border: 1px solid #2E3440; }
.gp-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px 16px; border-bottom: 1px solid #262B35; }
.gp-top b { font-size: 14px; color: #fff; }
.gp-x { width: 28px; height: 28px; border-radius: 50%; border: 0; background: #262B35; color: #C9CED6; font-size: 18px; line-height: 1; cursor: pointer; }
.gp-x:hover { background: #31363F; color: #fff; }
.gp-sec { padding: 12px 16px 2px; }
.gp-sec + .gp-sec { border-top: 1px solid #22262E; }
.gp-box .gp-h { display: block; margin-bottom: 8px; font-size: 10.5px; letter-spacing: .08em; color: #8B93A1; }
.gp-box .gp-leg { grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 10px; }
.gp-box .gp-leg li { align-items: center; }
.gp-box .gp-leg li.wide { grid-column: 1 / -1; }
.gp-box .gp-leg b { font-size: 12.5px; margin-bottom: 1px; }
.gp-box .gp-leg span, .gp-box .gp-leg em { font-size: 12px; color: #9CA3AF; font-style: normal; line-height: 1.35; }
.gp-box .sw { width: 22px; height: 14px; margin: 0; border-radius: 4px; flex: none; }
.gp-box .sw.z-buy { background: rgba(49,121,245,.45); border: 1.5px solid #3179F5; }
.gp-box .sw.z-sell { background: var(--ka-247-124-128-_45); border: 1.5px solid var(--k-f77c80); }
.gp-box .sw.z-rt { background: rgba(255,160,40,.4); border: 1.5px solid #FFA028; }
.gp-box .sw.ln { height: 0; border-radius: 0; border-top: 3px solid; }
.gp-box .sw.ln.ma { border-color: #FFD71E; }
.gp-box .sw.ln.sr { border-top: 3px solid var(--k-3cb371); box-shadow: 0 5px 0 -1px var(--k-ff4d4d); }
.gp-box .sw.ar { height: 18px; display: grid; place-items: center; font-size: 13px; font-style: normal; border-radius: 6px; }
.gp-box .sw.ar.up { color: var(--k-22c55e); background: var(--ka-34-197-94-_12); } .gp-box .sw.ar.dn { color: var(--k-f05252); background: var(--ka-240-82-82-_12); }
.gp-box .gp-steps { margin: 0 0 12px; gap: 7px; font-size: 12.5px; counter-reset: gs; list-style: none; padding: 0; }
.gp-box .gp-steps li { position: relative; padding-left: 26px; color: #C9CED6; }
.gp-box .gp-steps li::before { counter-increment: gs; content: counter(gs); position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #262B35; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.gp-box .gp-tip { margin: 0; padding: 10px 16px 12px; border-top: 1px solid #22262E; font-size: 12px; color: #8B93A1; }
@media (max-width: 520px) { .gp-box .gp-leg { grid-template-columns: 1fr; } .gp-box { left: 8px; width: calc(100% - 16px); } }
@media (max-width: 860px) { .gp-box { max-height: min(62vh, 520px); overflow-y: auto; overscroll-behavior: contain; z-index: 70; } .gp-top { position: sticky; top: 0; background: #171B22; z-index: 1; } }
@media (max-width: 860px) { .gp-box { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(var(--tab-h) + 10px); width: auto; max-height: calc(100vh - var(--tab-h) - 90px); box-shadow: 0 -10px 40px rgba(0,0,0,.45); } }
.gp-box .sw.ln.now { border-top: 2px dotted var(--bd-e5e7eb); }

/* ---------- Ringkasan analisa di tab Sinyal ---------- */
.rk { margin: 4px 0 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-fff); }
.rk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.rk-more { font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--green-t); }
.rk-kes { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; line-height: 1.45; background: var(--input-bg); }
.rk-kes.buy { background: var(--green-tint); color: var(--green-t); }
.rk-kes.sell { background: var(--red-tint); color: var(--red); }
.rk-kes.warn { background: var(--bg-fef6e4); color: var(--tx-92400e); }
.rk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; line-height: 1.45; }
.rk-list li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; min-width: 0; }
.rk-list li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.rk-k { color: var(--muted); font-size: 12px; font-weight: 600; padding-top: 1px; }
.rk-note { color: var(--ink); }

/* ---------- Setelan chart di legenda: sembunyikan bagian, bid/ask, mode bebas ---------- */
.chart-card.hz-buy :is(.be-box.bull, .be-hl.bull, .be-txt.bull),
.chart-card.hz-sell :is(.be-box.bear, .be-hl.bear, .be-txt.bear),
.chart-card.hz-rt :is(.be-box.rt, .be-txt.rt),
.chart-card.hz-ma .be-svg,
.chart-card.hz-sr :is(.be-sr, .be-txt.sr),
.chart-card.hz-sigb :is(.be-en-l.buy, .be-en-t.buy, .be-en-ar.up),
.chart-card.hz-sigs :is(.be-en-l.sell, .be-en-t.sell, .be-en-ar.dn) { display: none; }
.gp-leg li[data-hz] { cursor: pointer; border-radius: 8px; margin: -4px -6px; padding: 4px 6px; transition: opacity .15s, background .15s; position: relative; }
.gp-leg li[data-hz]:hover { background: rgba(255,255,255,.06); }
.gp-leg li[data-hz][aria-checked="false"] { opacity: .38; }
.gp-leg li[data-hz][aria-checked="false"] b { text-decoration: line-through; }
.gp-leg li[data-hz]:focus-visible { outline: 2px solid var(--green); outline-offset: 0; }
.gp-set { display: grid; gap: 6px; }
.gp-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.03); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.gp-sw b { display: block; color: #fff; font-size: 13px; }
.gp-sw span { color: #AEB4BE; font-size: 12px; line-height: 1.35; }
.gp-sw i { flex: none; width: 34px; height: 20px; border-radius: 999px; background: #3A3F49; position: relative; transition: background .15s; }
.gp-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-fff); transition: transform .15s var(--ease); }
.gp-sw[aria-checked="true"] i { background: var(--green); }
.gp-sw[aria-checked="true"] i::after { transform: translateX(14px); }
.gp-reset { justify-self: start; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--green); cursor: pointer; }
.pane-main .axis { touch-action: none; cursor: ns-resize; user-select: none; -webkit-user-select: none; }
.cur-line.ask { opacity: .9; }
.c-free { position: absolute; left: 10px; bottom: 10px; z-index: 3; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,195,30,.5); background: rgba(16,21,28,.88); color: #FFC31E; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.c-free[hidden] { display: none; }
@media (min-width: 861px) { .gp-box { max-height: calc(100vh - 210px); overflow-y: auto; overscroll-behavior: contain; } .gp-top { position: sticky; top: 0; background: #171B22; z-index: 1; } }

/* ---------- Checklist setup kecil di tab Sinyal & tombol tandai dibaca di Alert ---------- */
.sc-ck { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--green-tint); border: 1px solid var(--k-c8ebdd); }
.sc-ck-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.sc-ck-h .muted { font-size: 12px; }
.sc-ck-l { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-ck-i { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-fff); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.sc-ck-i i { font-style: normal; color: var(--green-t); font-weight: 800; }
.sc-ck-i.ok { background: transparent; border-color: transparent; color: var(--muted); text-decoration: line-through; cursor: default; padding-left: 4px; }
.sa-read { border: 0; background: none; color: var(--green-t); font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 8px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.sa-read:hover { background: var(--green-tint); }
.ax-list[hidden], .an-h[hidden] { display: none !important; }

/* ---------- Aturan Bullseye: tata letak baru ---------- */
@media (min-width: 861px) { .ab-head { position: sticky; top: 8px; z-index: 6; box-shadow: 0 8px 24px rgba(20,25,33,.06); } }
.ab-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ab-top .h2 { margin: 0; }
.ab-top .ab-act { margin: 0 0 0 auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ab-act select { height: 38px; border: 1px solid var(--input-border); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; background: var(--input-bg); color: var(--ink); }
.ab-head .ab-tabs { margin-top: 12px; }
.ab-tabs .ab-plus { color: var(--green-t); }
.ab-add { margin-top: 8px; }
.ab-add select { height: 34px; border: 1px solid var(--input-border); border-radius: 10px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--input-bg); }
.ab-head .ab-note { margin: 8px 0 0; font-weight: 500; color: var(--muted); }
.ab-grupd { margin-top: 6px; font-size: 12.5px; }
.ab-grupd summary { cursor: pointer; color: var(--muted); width: max-content; }
.ab-grupd .ab-tfs { margin-top: 6px; }
.ab-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 10px; font-size: 12.5px; color: var(--muted); }
.ab-legend b { color: var(--ink); margin-right: 3px; }
.ab-mods { gap: 6px; }
.ab-mod { padding: 0; border-radius: 12px; overflow: hidden; }
.ab-mod.r-mati { background: var(--bg-fafafb); }
.ab-mod.r-mati .ab-mn b { color: var(--muted); }
.ab-mr { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 4px; min-height: 52px; }
.ab-mn { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; padding: 8px; border-radius: 8px; color: var(--ink); }
.ab-mn:hover { background: var(--bg-f7f8fa); }
.ab-mn b { font-size: 14px; }
.ab-mn b::before { content: '›'; display: inline-block; width: 14px; color: var(--muted); transition: transform .15s; }
.ab-mod.open .ab-mn b::before { transform: rotate(90deg); }
.ab-mn small { font-size: 12px; color: var(--muted); }
.ab-mc { display: flex; align-items: center; gap: 8px; flex: none; }
.ab-mc select { height: 34px; border: 1px solid var(--input-border); border-radius: 10px; padding: 0 8px; font: inherit; font-size: 13px; font-weight: 600; background: var(--input-bg); color: var(--ink); min-width: 86px; }
.ab-mod.r-wajib .ab-mc select { background: var(--navy); color: #fff; border-color: var(--navy); }
.ab-mod.r-filter .ab-mc select { background: var(--bg-eaf1ff); color: #1D4ED8; border-color: #C7D7FB; }
.ab-mod.r-skor .ab-mc select { background: var(--bg-fef6e4); color: var(--tx-92400e); border-color: #F5DFB0; }
.ab-mc .ab-tag { min-width: 86px; text-align: center; }
.ab-mc .ab-bobot { font-size: 12px; } .ab-mc .ab-bobot input { width: 52px; height: 34px; }
.ab-sw { position: relative; width: 38px; height: 22px; flex: none; cursor: pointer; }
.ab-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.ab-sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--bg-d1d5db); transition: background .15s; pointer-events: none; }
.ab-sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-fff); transition: transform .15s var(--ease); }
.ab-sw input:checked + i { background: var(--green); }
.ab-sw input:checked + i::after { transform: translateX(16px); }
.ab-sw input:focus-visible + i { outline: 2px solid var(--green); outline-offset: 2px; }
.ab-sw-ph { width: 38px; flex: none; }
.ab-mp { padding: 2px 14px 14px; border-top: 1px solid var(--border-2); }
.ab-ket { margin: 10px 0 6px; font-size: 12.5px; color: var(--muted); }
.ab-g { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; border-top: 1px dashed var(--border-2); }
.ab-g:first-of-type { border-top: 0; }
.ab-gt { font-size: 12px; font-weight: 700; color: var(--muted); padding-top: 9px; }
.ab-gi { display: grid; gap: 8px; min-width: 0; }
.ab-gi .ab-tfs { margin: 0; }
.ab-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px 8px; }
.ab-nums label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); min-width: 0; }
.ab-nums input { height: 34px; width: 100%; border: 1px solid var(--input-border); border-radius: 9px; padding: 0 8px; font: inherit; font-size: 14px; color: var(--ink); background: var(--input-bg); }
.ab-ck { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; min-height: 34px; }
.ab-ck input { width: 18px; height: 18px; flex: none; accent-color: var(--green); margin: 0; }
#ab-inti .ab-g:first-child { border-top: 0; }
.ab-sub { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.at-tabs { margin-top: 6px !important; }
.at-p { margin-top: 4px; }
.au-prog { font-size: 12px; align-self: center; }
.ab-cek > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.ab-cek > summary::-webkit-details-marker { display: none; }
.ab-cek > summary .h2::before { content: '›'; display: inline-block; width: 16px; color: var(--muted); transition: transform .15s; }
.ab-cek[open] > summary .h2::before { transform: rotate(90deg); }
.ab-cek .au-f { margin: 10px 0; }
@media (max-width: 600px) {
  .ab-top .ab-act { margin-left: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; } .ab-top .ab-act select { grid-column: 1 / -1; width: 100%; }
  .ab-head .ab-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; } .ab-head .ab-tabs button { flex: none; padding: 0 14px; }
  .ab-g { grid-template-columns: 1fr; gap: 4px; } .ab-gt { padding-top: 0; }
  .ab-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-mr { gap: 6px; padding-right: 8px; } .ab-mn { padding: 8px 4px; } .ab-mc { gap: 6px; } .ab-mc select { min-width: 78px; }
  .ab-mn small { flex-basis: 100%; padding-left: 14px; }
}
.ab-gy { display: grid; gap: 6px; margin-top: 8px; }
.ab-gy[hidden] { display: none; }
.ab-gyr { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: center; }
.ab-gyr > span { font-size: 12px; font-weight: 700; color: var(--muted); }
.ab-gyr .ab-tfs { margin: 0; }
@media (max-width: 600px) { .ab-gyr { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Revisi Sinyal 9 Nov: harga zona di chart, TF desktop, area pantau, Tren di kiri chart ---------- */
/* label harga batas zona di kanan chart (sama dengan angka di kartu Area pantau) */
.be-zp { position: absolute; right: 2px; z-index: 2; padding: 0 5px; border-left: 3px solid; border-radius: 3px; background: rgba(16,21,28,.88); font-size: 10.5px; font-weight: 800; line-height: 15px; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.be-zp.up { transform: translateY(-100%); } .be-zp.dn { transform: translateY(1px); }
.chart-card.hz-buy .be-zp.bull, .chart-card.hz-sell .be-zp.bear { display: none; }
/* tombol TF berjajar langsung di atas chart (PC); HP tetap menu turun */
@media (min-width: 861px) {
  .tf-pill { padding: 0 4px 0 12px; }
  .tf-pill .tp-b { display: none; }
  .chart-head .tf-pill .tfs { position: static; display: flex !important; width: auto; gap: 2px; padding: 0; margin: 0 0 0 4px; border: 0; background: transparent; box-shadow: none; }
  .chart-head .tf-pill .tfs button { min-height: 26px; height: 26px; padding: 0 9px; background: transparent; color: #9CA3AF; font-size: 12px; }
  .chart-head .tf-pill .tfs button:hover { color: #fff; background: rgba(255,255,255,.08); }
}
/* kartu Area pantau: angka harga besar & berwarna seperti kotak di chart */
.s-zone .sz { display: block; padding: 12px 14px; }
.s-zone .sz.buy { border-left: 4px solid #3179F5; } .s-zone .sz.sell { border-left: 4px solid var(--k-e5484d); }
.sz-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sz-tag { font-size: 12px; font-weight: 800; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; color: #fff; }
.sz.buy .sz-tag { background: #3179F5; } .sz.sell .sz-tag { background: var(--k-e5484d); }
.sz-st { font-size: 12px; font-weight: 700; color: var(--muted); }
.sz-st.in { color: #B7791F; }
.sz-px { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 6px; }
.sz-px > div { padding: 8px 10px; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--border-2); }
.sz-px small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.s-zone .sz-px b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sz.buy .sz-px b { color: #2563EB; } .sz.sell .sz-px b { color: var(--k-dc2626); }
.s-zone .sz .sz-dist { display: block; color: var(--muted); font-size: 12.5px; }
/* desktop lebar: chart lebih luas, kartu Tren per timeframe di kiri chart, tab Tren disembunyikan */
.tren-side[hidden] { display: none !important; }
@media (min-width: 1200px) {
  body.page-sinyal .main { max-width: 1680px; }
  .sig-page { grid-template-columns: 230px minmax(0, 1fr) 400px !important; grid-template-areas: "price chips chips" "tren chart tabs" "tren chart side" !important; }
  .tren-side { grid-area: tren; align-self: start; background: var(--bg-fff); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 14px 10px; }
  .tren-side .an-side { display: block !important; }
  .tren-side .tt-tab th:nth-child(3), .tren-side .tt-tab td:nth-child(3) { display: none; }
  .tren-side .tt-sum { font-size: 12.5px; }
  .sig-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sig-tabs [data-stab="tren"] { display: none; }
}
@media (max-width: 1199px) { .sig-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tester-card .ts-table { overflow-x: auto; }
@media (min-width: 861px) { .chart-head { flex-wrap: nowrap; } .chart-head .tf-pill { min-width: 0; } .chart-head .tf-pill .tfs button { padding: 0 7px; } }
@media (min-width: 1200px) and (max-width: 1599px) {
  .sig-page { grid-template-columns: 210px minmax(0, 1fr) 380px !important; column-gap: 14px; }
  .chart-head .tf-pill .tfs button { padding: 0 5px; font-size: 11.5px; }
  .chart-head { gap: 8px; }
}

.run-card > .rk { margin: 12px 0 0; }
/* Area pantau: BUY hijau, SELL merah */
.s-zone .sz.buy { border-left-color: var(--green); } .s-zone .sz.sell { border-left-color: var(--k-e5484d); }
.sz.buy .sz-tag { background: var(--green); color: var(--navy); } .sz.sell .sz-tag { background: var(--k-e5484d); color: var(--di-turun); }
.sz.buy .sz-px b { color: var(--green-t); } .sz.sell .sz-px b { color: var(--k-dc2626); }
.sz.buy .sz-px > div { background: var(--green-tint); border-color: var(--k-c8ebdd); } .sz.sell .sz-px > div { background: var(--red-tint); border-color: var(--k-f7d4d4); }
/* kartu Tren di kiri chart: rapi, tidak kejepit */
@media (min-width: 861px) {
  .tren-side { padding: 14px 12px 8px; }
  .tren-side .an-h { display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; font-size: 12px; letter-spacing: .04em; }
  .tren-side .an-h .muted { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; }
  .tren-side .tt-sum { padding: 10px 11px; line-height: 1.4; }
  .tren-side .tt-sum b { display: block; margin-bottom: 3px; }
  .tren-side .tt-tab { width: 100%; font-size: 13px; }
  .tren-side .tt-tab th, .tren-side .tt-tab td { padding: 8px 4px; }
  .tren-side .ts { padding: 3px 7px; font-size: 12px; }
  #an-card .an-main .dmp { margin-top: 14px; }
}
@media (min-width: 1200px) and (max-width: 1599px) { .sig-page { grid-template-columns: 228px minmax(0, 1fr) 360px !important; } }
.be-zp.sr { right: auto; left: 4px; transform: translateY(-50%); }
.chart-card.hz-sr .be-zp.sr { display: none; }
/* tombol sembunyikan menu samping (desktop lebar) */
.side-tog { display: none; }
@media (min-width: 861px) {
  .top-in { position: relative; }
  .side-tog { display: grid; place-items: center; position: absolute; top: 24px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
  .side-tog:hover { background: var(--page); color: var(--ink); }
  .brand { padding-right: 40px; }
  body.side-mini { --side-w: 76px; }
  body.side-mini .top-in { padding: 24px 10px 18px; align-items: center; }
  body.side-mini .side-tog { position: static; margin: 0 auto 10px; }
  body.side-mini .brand { padding: 0 0 10px; justify-content: center; }
  body.side-mini .brand b, body.side-mini .nav a > span:not(.nav-ic), body.side-mini .side-help > span:not(.sh-ic), body.side-mini .av-lbl, body.side-mini .focus-bar.in-side { display: none !important; }
  body.side-mini .nav a { width: 52px; padding: 0; justify-content: center; }
  body.side-mini .side-help { padding: 8px; justify-content: center; }
  body.side-mini .top-right { flex-direction: column; gap: 8px; padding: 8px; }
}
/* label harga zona & S/R di sumbu harga */
.ax-tag.be { font-size: 10.5px; padding: 0 4px; }
.chart-card.hz-buy .ax-tag.bull, .chart-card.hz-sell .ax-tag.bear, .chart-card.hz-sr .ax-tag.sr { display: none; }
.sz-px { grid-template-columns: 1fr; }
.s-zone .sz-px b { font-size: 22px; white-space: nowrap; }
/* label zona/S/R di sumbu harga boleh melebar ke kiri (angka tidak terpotong di HP) */
.ax-tag.be { left: auto; right: 2px; overflow: visible; min-width: calc(100% - 6px); text-align: center; }
@media (max-width: 860px) { .ax-tag.be { font-size: 10px; padding: 0 3px; } }
/* Zona pantau: harga sekarang di atas, lalu tangga harga area (Atas / Bawah) seperti di chart */
.sz-now { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 6px; padding: 7px 12px; border: 1px dashed var(--bd-d1d5db); border-radius: 10px; font-size: 12.5px; color: var(--muted); }
.s-zone .sz-now b { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.sz-lad { display: flex; flex-direction: column; border-radius: 10px; padding: 2px 12px; margin-bottom: 8px; border: 1.5px solid; }
.sz-lad > div { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; }
.sz-lad > div + div { border-top: 1px solid; }
.sz-lad span { font-size: 12px; font-weight: 600; color: var(--muted); }
.s-zone .sz-lad b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sz.buy .sz-lad { background: var(--green-tint); border-color: var(--green); } .sz.buy .sz-lad > div + div { border-color: var(--k-c8ebdd); } .sz.buy .sz-lad b { color: var(--green-t); }
.sz.sell .sz-lad { background: var(--red-tint); border-color: var(--k-dc2626); } .sz.sell .sz-lad > div + div { border-color: var(--k-f7d4d4); } .sz.sell .sz-lad b { color: var(--tx-b91c1c); }
/* area BUY di chart: hijau mint */
.be-box.bull { opacity: .55; }
.gp-box .sw.z-buy { background: var(--ka-52-211-153-_45); border-color: var(--k-34d399); }
/* ikon Zona (◈) digambar dengan CSS supaya tepat di tengah (glyph font tidak presisi) */
.chart-head .be-leg::before { content: ""; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid #FACC15; border-radius: 2px; transform: rotate(45deg); box-shadow: inset 0 0 0 1.5px #26241a, inset 0 0 0 5px #FACC15; }
/* ikon Zona: posisi absolut tepat di tengah (teks tombol yang disembunyikan tidak ikut menggeser di Safari iPhone) */
.chart-head .be-leg { position: relative; display: block; line-height: 0; color: transparent; overflow: hidden; }
.chart-head .be-leg::before { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%) rotate(45deg); }
.chart-head .be-leg { display: inline-flex; align-items: center; justify-content: center; align-self: center; flex: none; margin: 0; vertical-align: middle; box-sizing: border-box; }
.chart-head .be-leg { top: auto; right: auto; left: auto; bottom: auto; }
/* HP: "Cara baca" jadi ikon i di sebelah tombol Zona (bukan tombol di bawah Fokus saya) */
@media (max-width: 860px) {
  .chart-head .guide-pop > summary { display: inline-flex; }
  .chart-head .guide-pop { align-self: center; flex: none; }
  .fb-guide { display: none !important; }
  .focus-bar #fb-edit { flex: 1 0 100% !important; }
}
/* halaman Sinyal desktop: isi penuh lebar layar (termasuk saat menu samping disembunyikan) */
@media (min-width: 1200px) { body.page-sinyal .main { max-width: none; margin: 0; } }
/* Zona pantau: kesiapan setup cukup persentase + bar (rincian aturan disembunyikan) */
.s-zone .sz-set small, .s-zone .sz-rules { display: none; }
/* Jurnal: 3 tab dalam satu baris */
.jr-tabs { grid-template-columns: repeat(3, auto); white-space: nowrap; }
@media (max-width: 860px) { .jr-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .jr-tabs a { padding: 8px 6px; font-size: 13px; } }
.s-zone .sz .sz-more { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

/* ===== Siap entry: perkiraan Entry/SL/TP saat harga menyentuh zona pantau + kesiapan cukup ===== */
.lvl.sp { border-top-style: dashed; opacity: .75; }
.sz-siap { margin-top: 10px; border-radius: 12px; padding: 10px 12px; border: 1.5px dashed; }
.sz-siap.buy { border-color: var(--k-34d399); background: var(--ka-52-211-153-_08); } .sz-siap.sell { border-color: var(--k-f87171); background: var(--ka-248-113-113-_07); }
.sz-siap-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; margin-bottom: 6px; }
.sz-siap-h b { white-space: nowrap; }
.sz-siap-h b { font-size: 14px; } .sz-siap.buy .sz-siap-h b { color: var(--green-t); } .sz-siap.sell .sz-siap-h b { color: var(--k-dc2626); }
.sz-siap-h small { font-size: 12px; color: var(--muted); }
.sz-siap-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
.sz-siap-lot { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--bd-e5e7eb); font-size: 12.5px; }
.sz-siap-lot span { color: var(--muted); font-weight: 600; } .sz-siap-lot b { font-size: 15px; margin-left: auto; } .sz-siap-lot small { color: var(--muted); font-size: 12px; }
.sz-siap-g > div { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; }
.sz-siap-g span { color: var(--muted); font-weight: 600; } .sz-siap-g b { font-variant-numeric: tabular-nums; }
.sz-siap-n { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.45; }

/* ===== Alarm Bridge mati (/bosbesar › Telegram) ===== */
.jb-form { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line, var(--bd-e5e7eb)); }
.jb-form .h3 { font-size: 15px; font-weight: 800; margin: 0; }
.jb-form .f input[type=number] { max-width: 120px; }

/* ===== Halaman legal (S&K, Privasi, Disclaimer, Refund) + persetujuan ===== */
.page-legal { background: var(--bg, var(--bg-f7f7f7)); }
.lgl { max-width: 760px; margin: 0 auto; padding: 16px 16px 48px; }
.lgl-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0 14px; }
.lgl-top .lg-brand { color: var(--ink, var(--tx-18191f)); }
.lgl-back { font-size: 14px; font-weight: 700; color: var(--green-t, var(--tx-12753c)); background: none; border: 0; cursor: pointer; text-decoration: none; padding: 6px 0; }
.lgl-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.lgl-tabs a { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--bg-fff); border: 1px solid var(--bd-e5e7eb); font-size: 13.5px; font-weight: 700; color: var(--ink, var(--tx-18191f)); text-decoration: none; }
.lgl-tabs a[aria-current="page"] { background: #141921; color: #fff; border-color: #141921; }
.lgl-doc { padding: 22px 20px; line-height: 1.65; font-size: 15px; }
.lgl-doc h1 { font-size: 24px; font-weight: 800; margin: 0 0 2px; }
.lgl-doc h2 { font-size: 17px; font-weight: 800; margin: 22px 0 6px; }
.lgl-doc p { margin: 8px 0; } .lgl-doc ul { margin: 6px 0; padding-left: 20px; } .lgl-doc li { margin: 4px 0; }
.lgl-ok .lgl-list { list-style: none; padding: 0; display: grid; gap: 8px; margin: 14px 0; }
.lgl-ok .lgl-list li { margin: 0; padding: 10px 12px; border: 1px solid var(--bd-e5e7eb); border-radius: 12px; background: var(--bg-fff); }
.lgl-warn { background: var(--bg-fff7ed); border: 1px solid var(--bd-fed7aa); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.lgl-ok .lg-check { margin: 14px 0; } .lgl-ok .lg-go { width: 100%; }
.lgl-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 14px; font-size: 12.5px; }
.lgl-links a { color: var(--muted, var(--tx-6b7280)); text-decoration: none; } .lgl-links a:hover { text-decoration: underline; }
.dj-legal { font-size: 13px; color: var(--muted, var(--tx-6b7280)); margin: 12px 0 0; }
.lg-form { display: grid; gap: 10px; margin-top: 12px; }
.lg-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .lg-tabs .link { margin-left: auto; font-size: 13px; }
#lg-teks { width: 100%; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px 12px; border: 1px solid var(--bd-d1d5db); border-radius: 10px; resize: vertical; box-sizing: border-box; }

/* ===== Pengingat & catatan bukan saran finansial ===== */
.ingat { margin-top: 8px; display: grid; gap: 4px; font-size: 12px; line-height: 1.45; }
.ingat p { margin: 0; }
.ingat-w { background: var(--bg-fff7ed); border: 1px solid var(--bd-fed7aa); color: var(--tx-9a3412); border-radius: 8px; padding: 6px 8px; }
.ingat-l { color: var(--ink, var(--tx-18191f)); }
.ingat-d { color: var(--muted, var(--tx-6b7280)); font-size: 12px; } .ingat-d a { color: inherit; text-decoration: underline; }
.an-disc { margin: 12px 0 0; }
.ingat-br { background: var(--bg-fff7ed); border: 1px solid var(--bd-fed7aa); color: var(--tx-9a3412); border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
#bos-ingat { margin-top: 16px; } #ig-list { width: 100%; font: 13px/1.55 inherit; padding: 10px 12px; border: 1px solid var(--bd-d1d5db); border-radius: 10px; box-sizing: border-box; resize: vertical; }
.brt-disc { display: none; margin: 0; padding: 0 4px; }
@media (max-width: 1100px) { .brt-disc { display: block; } }

/* ===== Rekap hasil sinyal live (Jurnal › Riwayat sinyal) ===== */
.rk-live .h2-row { flex-wrap: wrap; gap: 8px; }
.rk-per { display: flex; gap: 6px; } .rk-per .chip { padding: 6px 12px; font-size: 13px; }
.rk-sim { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; }
.rk-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.rk-kpi > div { background: var(--bg-f7f7f7); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.rk-kpi span { font-size: 12px; color: var(--muted, var(--tx-6b7280)); font-weight: 600; }
.rk-kpi b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rk-kpi small { font-size: 12px; color: var(--muted, var(--tx-6b7280)); }
@media (max-width: 520px) { .rk-kpi { grid-template-columns: 1fr 1fr; } .rk-kpi > div:first-child { grid-column: 1 / -1; } }

/* ===== Halaman Tools ===== */
.nav-new { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--navy, #141921); background: var(--green); padding: 2px 8px; border-radius: 999px; }
.nav a { position: relative; }
.top-tools { display: none; position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--navy-2); color: var(--green); align-items: center; justify-content: center; }
.top-tools[aria-current="page"] { box-shadow: 0 0 0 2px var(--green); }
.tt-dot { position: absolute; top: 1px; right: 1px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); border: 2px solid var(--navy, #141921); }
@media (max-width: 860px) { .top-tools { display: inline-flex; } }
.tl-sub { margin: -8px 0 0; color: var(--muted); font-size: 15px; }
.tl-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.tl-card { background: var(--bg-fff); border: 1px solid var(--border-2, var(--bd-ecedf0)); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tl-card[hidden] { display: none; }
.tl-top { display: flex; justify-content: space-between; align-items: center; }
.tl-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.tl-kat { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.k-ea { background: var(--bg-e5f7f2); color: var(--tx-12753c); } .k-ai { background: var(--bg-eef0ff); color: #3B3FB6; } .k-langganan { background: var(--bg-fff4e5); color: #9A4D00; }
.tl-nama { font-size: 16.5px; line-height: 1.3; }
.tl-ket { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; flex: 1; }
.tl-bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tl-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--tx-92400e); }
.tl-st i { width: 7px; height: 7px; border-radius: 50%; background: #F59E0B; }
.tl-st.st-beta { color: #3B3FB6; } .tl-st.st-beta i { background: #6366F1; }
.tl-st.st-ada { color: var(--tx-12753c); } .tl-st.st-ada i { background: var(--green); }
.tl-ada { font-size: 12.5px; font-weight: 700; color: var(--green-t); }
.tl-btn { font: inherit; font-weight: 700; font-size: 13px; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--navy, #141921); color: #fff; cursor: pointer; }
.tl-btn[aria-pressed="true"] { background: var(--bg-e5f7f2); color: var(--tx-12753c); border: 1px solid var(--k-a7e3bc); }
.tl-btn:disabled { opacity: .6; }
@media (max-width: 860px) { .tl-grid { grid-template-columns: 1fr; gap: 12px; } .tl-card { padding: 14px; border-radius: 20px; } }
/* admin: daftar tools */
#bos-tools { margin-top: 16px; }
.tl-rows { display: grid; gap: 10px; margin-top: 12px; }
.tl-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 130px auto 44px auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--bd-e5e7eb); border-radius: 14px; }
.tl-row input.tl-n, .tl-row select, .tl-row textarea { font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--bd-d1d5db); border-radius: 10px; min-width: 0; }
.tl-row textarea { grid-column: 1 / -1; resize: vertical; }
.tl-del { background: none; border: 0; padding: 4px 6px; font: inherit; font-weight: 700; color: var(--tx-b91c1c); cursor: pointer; }   /* audit tampilan 13 Nov: tombol Hapus dulu memakai latar bawaan browser (abu) di mode gelap */
.tl-on { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.tl-m { text-align: center; font-weight: 800; color: var(--green-t); background: var(--bg-e5f7f2); border-radius: 999px; padding: 4px 0; }
@media (max-width: 860px) { .tl-row { grid-template-columns: 1fr 1fr; } .tl-row .tl-n { grid-column: 1 / -1; } }
@media (max-width: 860px) { .top-tools { width: 44px; height: 44px; background: var(--bg-fff); color: var(--green-t); border: 1px solid var(--border-2); box-sizing: border-box; } .tt-dot { border-color: #fff; } .top-tools[aria-current="page"] { background: var(--navy, #141921); color: var(--green); border-color: var(--navy, #141921); } }
@media (min-width: 861px) and (max-width: 1199px) { .nav-new { margin-left: 6px; } }
/* menu samping disembunyikan (mini): kartu akun cukup foto saja, tanpa tanda › */
@media (min-width: 861px) {
  body.side-mini .top-right::after { display: none; }
  body.side-mini .top-right { background: none; padding: 0; justify-content: center; }
  body.side-mini .nav-new { display: none; }
  body.side-mini .nav a { position: relative; }
}

/* ===== Siap entry v2: harga diketuk untuk menyalin, pilihan entry di area, kapan batal ===== */
.cp-px { font: inherit; font-weight: 800; font-size: 14.5px; color: var(--ink); background: none; border: 0; padding: 0 0 1px; border-bottom: 1.5px dashed currentColor; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-px.up { color: var(--green-t); } .cp-px.down { color: var(--k-dc2626); }
.cp-px:hover { opacity: .75; } .cp-px:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
.sp-list { display: flex; flex-direction: column; }
.sp-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--bd-eef0f3); }
.sp-k { width: 64px; flex: none; font-size: 12.5px; color: var(--muted); font-weight: 600; padding-top: 2px; }
.sp-v { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-v small { font-size: 12px; color: var(--muted); }
.sp-two { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; } .sp-two i { font-style: normal; color: var(--muted); }
.sz-siap .sz-siap-lot { margin-top: 0; border-top: 0; }
.sp-opsi { margin-top: 10px; background: var(--bg-f5f3ff); border: 1px dashed #A78BFA; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.sp-opsi > b { color: #6D28D9; font-size: 12.5px; } .sp-opsi > small { font-size: 12px; color: var(--muted); }
.sp-opsi > small:last-child { margin-top: 6px; line-height: 1.45; }
.sp-o { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #E9E5FB; font-size: 12.5px; }
.sp-o:last-of-type { border-bottom: 0; }
.sp-o > span { width: 52px; flex: none; color: var(--muted); }
.sp-o em { margin-left: auto; font-style: normal; font-weight: 700; white-space: nowrap; } .sp-o em.up { color: var(--green-t); }
.sp-batal { margin-top: 10px; background: var(--bg-fff7ed); border: 1px solid var(--bd-fed7aa); color: var(--tx-9a3412); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; line-height: 1.45; }

/* ===== Sinyal resmi: tahap keluar / TP 1 / selesai ===== */
.sg-meta { margin: 8px 2px 0; font-size: 12.5px; color: var(--muted); }
.sg-step { margin-top: 8px; background: var(--bg-f5f3ff); border: 1px dashed #A78BFA; border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
.sg-step.done { background: var(--bg-f7f7f7); border: 1px dashed var(--bd-d1d5db); }
.sg-res { position: relative; z-index: 1; margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.sg-res span { font-size: 12px; opacity: .8; } .sg-res b { font-size: 22px; font-weight: 800; } .sg-res small { font-size: 12px; opacity: .8; }
.sg-hero.done { background: var(--navy, #141921); color: #fff; }
.sg-hero.done .sym, .sg-hero.done .status, .sg-hero.done .sg-entry span, .sg-hero.done .sg-entry b { color: #fff; }
.sg-hero.done .status .dot { background: #9CA3AF; animation: none; }
.sg-hero.done .badge { background: var(--green) !important; color: var(--navy) !important; }
.sg-hero.done.win .sg-res b { color: var(--green); } .sg-hero.done.loss .sg-res b { color: var(--k-f87171); }
.sg-hero.done .sg-entry b { font-size: 22px; }
.lv.hit { background: var(--bg-e5f7f2); border-color: var(--k-a7e3bc); }
.lv.hit .lv-d { width: 16px; height: 16px; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.lv.hit-sl { background: var(--bg-fef2f2); border-color: var(--k-fca5a5); }
.lv b s { color: var(--muted); font-weight: 600; margin-right: 4px; }
.lv-lot { cursor: default; background: var(--bg-fafafb); } .lv-lot .lv-d.lot { background: #6366F1; }
.lv-lot small { font-size: 12px; color: var(--muted); margin-left: 6px; white-space: nowrap; }
.lv-lot b { margin-left: auto; }
.sg-acts[hidden] { display: none !important; }
.lv-lot[data-open] { cursor: pointer; }
.sp-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 4px; }
.sp-badge { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.sz-siap.buy .sp-badge { background: var(--green); color: var(--navy, #141921); } .sz-siap.sell .sp-badge { background: var(--k-ef4444); color: var(--di-turun); }
.sp-head small { font-size: 12px; color: var(--muted); }
.sp-row .sp-k { width: 76px; white-space: nowrap; }
.sp-row .sp-v { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sp-row .sp-two { display: flex; }
.k-cloud { background: var(--bg-e0f2fe); color: #075985; }
/* menu samping: animasi buka/tutup ringan + tombol tetap di posisi yang sama (kiri atas) */
@media (min-width: 861px) {
  .top { transition: width .18s ease; }
  body { transition: padding-left .18s ease; }
  body.side-mini .brand { visibility: hidden; }
  body.side-mini .side-tog { position: absolute; top: 24px; left: 21px; right: auto; margin: 0; }
  .nav a > span:not(.nav-ic), .side-help > span:not(.sh-ic), .av-lbl { transition: opacity .15s ease; }
}
@media (min-width: 861px) and (prefers-reduced-motion: reduce) { .top, body { transition: none; } }
/* Berita: tulisan "Live, dicek ..." sejajar dengan judul (bukan di tengah blok judul) */
.brt-title { align-items: flex-end; }
.brt-title #news-upd { padding-bottom: 5px; }
/* Berita › Dampak tinggi 24 jam: satu berita per baris */
.brt-hi .nh { display: block; padding: 9px 0; border-bottom: 1px solid var(--border-2); color: inherit; text-decoration: none; }
.brt-hi .nh:last-child { border-bottom: 0; }
.brt-hi .nh b { display: -webkit-box; font-size: 13.5px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brt-hi .nh small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.brt-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brt-title #news-upd { padding-bottom: 0; }
/* tombol sedang proses (loading) */
.btn.is-busy { display: inline-flex; align-items: center; gap: 8px; opacity: .85; cursor: progress; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 1.6s; } }
/* menu samping disembunyikan: ruang yang lowong (172px) diberikan ke kartu Tren per timeframe, ukuran chart tetap */
@media (min-width: 1200px) {
  body.side-mini .sig-page { grid-template-columns: 402px minmax(0, 1fr) 400px !important; }
}
@media (min-width: 1200px) and (max-width: 1599px) {
  body.side-mini .sig-page { grid-template-columns: 382px minmax(0, 1fr) 380px !important; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) { .sig-page { transition: none; } }
/* zona pantau: catatan zona lebih dekat yang dicoret / zona melawan arah; rencana agen yang areanya dicoret */
.sz-note { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--tx-92400e); background: var(--bg-fff7ed); border: 1px solid var(--bd-fed7aa); border-radius: 10px; padding: 7px 9px; }
.pl-coret { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--tx-92400e); background: var(--bg-fff7ed); border: 1px solid var(--bd-fed7aa); border-radius: 10px; padding: 8px 10px; }
/* desktop: kolom kiri chart = kartu Tren per timeframe + kartu Ringkasan analisa (dua kartu terpisah) */
@media (min-width: 861px) {
  .tren-side { background: none !important; border: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 14px; }
  .tren-side > .tren-blk { background: var(--bg-fff); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 14px 10px; }
  .tren-side > .rk { margin: 0; background: var(--bg-fff); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
}
/* catatan Agen Berita di kotak Dampak berita: ringkas 2 baris + link ke halaman Berita */
.dmp-note .dmp-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dmp-more { display: inline-block; margin-top: 6px; font-weight: 700; font-size: 13px; color: var(--green-t); text-decoration: none; }
.dmp-more:hover { text-decoration: underline; }
/* "Sinyal di fokusmu" di dalam panel Alert sinyal */
.fx-in-alert { padding: 8px 14px 10px; border-bottom: 1px solid var(--border-2, var(--bd-ecedf0)); max-height: 190px; overflow-y: auto; flex: none; }
.fx-in-alert .fx-h { margin: 0 0 4px; font-size: 12px; }
.fx-in-alert .fx-empty { margin: 2px 0 0; font-size: 12.5px; }
.fx-in-alert:empty { display: none; }
/* desktop: Dampak berita versi ringkas di kolom kiri chart */
@media (min-width: 861px) {
  .tren-side > .dmp { margin: 0; background: var(--bg-fff); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
  .tren-side > .dmp .an-h { margin-top: 0; font-size: 13px; }
  .tren-side > .dmp .dmp-next { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
  .tren-side > .dmp .dmp-next .muted { display: none; }
  .tren-side > .dmp .dmp-next em { font-size: 16px; }
  .tren-side > .dmp .dmp-r:nth-child(n+3) { display: none; }
  .tren-side > .dmp .dmp-note { display: none; }   /* catatan agen sudah ada di Ringkasan analisa (dengan link ke Berita) */
  .tren-side > .dmp .dmp-r { font-size: 12.5px; }
}
@media (min-width: 861px) { .tren-side > .rk .rk-berita { display: none; } }   /* desktop: info berita sudah ada di kartu Dampak berita tepat di bawahnya */
/* Ringkasan analisa: "Yang ditunggu" (dari rencana agen) */
.rk-wait { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-2); font-size: 12.5px; line-height: 1.45; }
.rk-wait b { display: block; font-size: 12px; margin-bottom: 3px; }
.rk-wait ol { margin: 0; padding-left: 18px; display: grid; gap: 3px; list-style: decimal; }
.rk-wait li::marker { color: var(--muted); font-weight: 700; }
.rk-wait li > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Alert indikator ringkas: 1 baris per alert, ketuk untuk penjelasan */
.ax-ev-list li { padding: 0; background: none; border-left: 0; border-bottom: 1px solid var(--border-2); border-radius: 0; }
.ax-ev-list li:last-child { border-bottom: 0; }
.ax-ev-list { gap: 0; }
.ax-ev-list .ev-h { width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; padding: 8px 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.ax-ev-list .ev-h b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-ev-list .ev-h span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ax-ev-list .ev-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.ax-ev-list li.up .ev-dot { background: var(--green); } .ax-ev-list li.down .ev-dot { background: var(--red); }
.ax-ev-list li.up .ev-h b { color: var(--green-t); } .ax-ev-list li.down .ev-h b { color: var(--red); }
.ax-ev-list li.open { padding-bottom: 8px; }
.ax-ev-list li.open > p { margin: 0 0 4px 16px; font-size: 12.5px; line-height: 1.5; }
.ev-all { border: 0; background: none; padding: 4px 0 0; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--green-t); cursor: pointer; }
.ev-all[hidden] { display: none; }
/* desktop: kolom kiri chart ringkas (Tren · Ringkasan · Dampak berita · Alert indikator) */
@media (min-width: 861px) {
  .tren-side { gap: 10px; }
  .tren-side > .tren-blk, .tren-side > .rk, .tren-side > .dmp, .tren-side > .ax-ev { margin: 0; background: var(--bg-fff); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
  .tren-side .an-h { flex-direction: row !important; justify-content: space-between; align-items: baseline; margin: 0 0 8px !important; }
  .tren-side .pm-box { margin-top: 0; }
  .tren-side .tt-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 6px 10px; font-size: 12px; margin-bottom: 8px; }
  .tren-side .tt-sum b { display: inline; margin: 0 6px 0 0; }
  .tren-side .tt-tab, .tren-side .tt-tab tbody { display: block; width: 100%; }
  .tren-side .tt-tab thead { display: none; }
  .tren-side .tt-tab tbody { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .tren-side .tt-tab tr { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 1px solid var(--border-2); border-radius: 10px; min-width: 0; }
  .tren-side .tt-tab tr.cur { border-color: var(--green); background: var(--green-tint); }
  .tren-side .tt-tab tr.cur td { background: none; box-shadow: none !important; }
  .tren-side .tt-tab td { padding: 0 !important; border: 0 !important; text-align: center; font-size: 12px; white-space: nowrap; }
  .tren-side .tt-tab td:nth-child(3) { display: none; }
  .tren-side .tt-tab .tt { font-size: 12px; }
  .tren-side .tt-tab .ts { padding: 1px 6px; font-size: 10.5px; }
  .tren-side > .rk .rk-top { margin-bottom: 6px; }
  .tren-side > .rk .rk-kes { font-size: 12.5px; padding: 7px 9px; margin-bottom: 6px; }
  .tren-side > .rk .rk-list { font-size: 12px; }
  .tren-side > .rk .rk-list li { grid-template-columns: 40px 1fr; }
  .tren-side > .dmp .dmp-go { margin-top: 6px; font-size: 12.5px; }
  .tren-side > .ax-ev .an-h { font-size: 12px; }
  .tren-side > .ax-ev .ev-h { padding: 6px 0; font-size: 12px; }
  .tren-side > .ax-ev .ev-h span { display: none; }
}
/* tab browser tidak dibuka: semua animasi berhenti */
html.pd-hidden *, html.pd-hidden *::before, html.pd-hidden *::after { animation-play-state: paused !important; }
/* kartu kolom kiri muncul halus (tanpa melompat) */
/* kolom kiri Sinyal: tanpa efek muncul (dulu diputar ulang tiap kotak dipindah → kedip) */
.tren-side > * { animation: none !important; }
.tren-side.ts-wait > * { visibility: hidden; }
.tren-side.ts-wait { min-height: 420px; background: linear-gradient(#fff, #fff) 0 0 / 100% 150px no-repeat, linear-gradient(#fff, #fff) 0 164px / 100% 240px no-repeat !important; border-radius: var(--radius); }
@media (min-width: 861px) {
  .tren-side .tt-sum { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; padding: 6px 10px !important; }
  .tren-side > .rk .rk-top b { white-space: nowrap; }
}
/* respon instan saat diketuk (HP): link & tombol langsung redup sedikit */
a:active { opacity: .7; transition: none; }
.btn:active, button:active { transition: none; }
/* garis "sedang memuat" saat pindah halaman */
.nav-load { position: fixed; left: 0; top: 0; z-index: 1000; height: 3px; width: 100%; background: var(--green); transform-origin: left; transform: scaleX(0); opacity: 0; pointer-events: none; }
.nav-load.on { opacity: 1; animation: navLoad 2.5s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes navLoad { 0% { transform: scaleX(0); } 20% { transform: scaleX(.45); } 100% { transform: scaleX(.92); } }
@media (prefers-reduced-motion: reduce) { .nav-load.on { animation: none; transform: scaleX(.6); } }
/* HP/tablet: tanpa efek pudar antar halaman, halaman baru langsung tampil */
/* Audit UI tahap 1 */
/* HP: tombol Bantuan minggir saat digulir + ruang bawah ekstra supaya isi paling bawah tidak tertutup */
@media (max-width: 860px) {
  .help-fab { transition: transform .2s var(--ease), opacity .2s ease; }
  .help.hf-hide .help-fab { transform: translateX(38px); opacity: .85; }   /* mengintip di tepi kanan, tetap bisa diketuk */
  .main { padding-bottom: calc(var(--tab-h) + 96px) !important; }
}
/* Audit UI tahap 2: halaman Sinyal di HP */
.sp-fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.sp-fold > summary::-webkit-details-marker { display: none; }
.sp-fold > summary::after { content: '›'; font-weight: 800; color: var(--muted); transition: transform .15s; }
.sp-fold[open] > summary::after { transform: rotate(90deg); }
.sp-fold > summary em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--green-t); margin-left: auto; }
.sp-fold:not([open]) { padding-bottom: 10px; }
.sp-batal.sp-fold { display: block; } .sp-batal.sp-fold > span { display: block; }
.sp-batal.sp-fold[open] > summary { margin-bottom: 4px; }
@media (max-width: 860px) {
  /* header: tombol Atur fokus jadi ikon di depan deretan pair, baris Fokus saya disembunyikan */
  .inst-wrap.has-fb { display: flex; align-items: center; gap: 8px; padding-left: 0; }
  .inst-wrap.has-fb .inst-row { flex: 1; min-width: 0; }
  .inst-wrap #fb-edit { flex: none; width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--navy); font-size: 0; display: grid; place-items: center; }
  .inst-wrap #fb-edit { position: relative; color: transparent; overflow: hidden; }
  .inst-wrap #fb-edit::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: 0; box-sizing: border-box; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--green); box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 7px var(--green); }
  .sig-top .focus-bar { padding: 0 0 10px !important; min-height: 0; }
  .sig-top .focus-bar > * { display: none !important; }
  .sig-fold { display: none !important; }
  .inst.fav b::before { content: '★ '; color: var(--tx-b45309); }
  .inst.fav b[data-tf]::after { display: inline-block !important; content: attr(data-tf); margin-left: 5px; padding: 0 5px; border-radius: 6px; background: var(--navy); color: var(--green); font-size: 11px; font-weight: 800; line-height: 18px; vertical-align: 1px; }
  /* Setup akun 1 baris: langkah yang sudah selesai disembunyikan */
  .sc-ck { padding: 8px 12px; }
  .sc-ck-h { margin-bottom: 6px; }
  .sc-ck-i.ok { display: none; }
  /* zona pantau: Siap entry tampil paling atas di kartu, catatan peringatan jadi teks kecil */
  .s-zone .sz { display: flex; flex-direction: column; align-items: stretch; }
  .s-zone .sz > * { text-align: left; }
  .s-zone .sz > .sz-siap { order: -1; margin: 0 0 12px; }
  .s-zone .sz-note { background: none; border: 0; padding: 0; margin-top: 4px; color: #C2410C; }
  .s-zone .sz-note b { display: inline; font-weight: 700; }
  .pane-main, .sig-top.folded .pane-main { height: 330px; }
}
.sp-opsi > summary b { color: #6D28D9; font-size: 12.5px; }
/* kotak zona Supply/Demand penuh sampai tepi kanan: lanjutan lebih tipis dari kotak awal */
.be-box.ext { opacity: .3; } .be-box.ext.bull { opacity: .2; }
.be-hl.ext { opacity: .6; }
/* Audit UI tahap 3: tablet (600–1199px) — tidak lagi tampilan HP yang ditarik lebar */
@media (min-width: 600px) and (max-width: 1199px) {
  .st-bento { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .st-bento .st-hero { grid-column: 1 / -1 !important; }
  .st-row, .porto-row.porto-bars { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: start; }
  .tl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .tl-card[data-kat="cloud"] { grid-column: 1 / -1; order: -1; }
  .ak-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px; }
  .ak-picks { grid-template-columns: repeat(auto-fill, 64px) !important; justify-content: center; }
}
/* Sinyal di tablet tegak (600–860px): chart lebih tinggi, isi Sinyal 2 kolom */
@media (min-width: 600px) and (max-width: 860px) {
  .pane-main, .sig-top.folded .pane-main { height: min(46vh, 520px) !important; }
  .sig-panel .run-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; align-items: start; }
  .sig-panel .run-card > * { grid-column: 1 / -1; }
  .sig-panel .run-card > #s-empty, .sig-panel .run-card > #s-body { grid-column: 1; }
  .sig-panel .run-card > #rk { grid-column: 2; grid-row: span 2; margin-top: 0; }
}

/* iPad mendatar & laptop kecil (861–1199px): gaya desktop (menu samping ikon) — Sinyal: chart lebar penuh, di bawahnya 2 kolom */
@media (min-width: 861px) and (max-width: 1199px) {
  body.page-sinyal .main { max-width: none; margin: 0; }
  .sig-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto !important; grid-template-areas: "price chips" "chart chart" "tabs tren" "side tren" !important; column-gap: 16px; row-gap: 14px; align-items: start; }
  .sig-price { grid-area: price; padding-right: 0 !important; }
  .inst-bar { padding-right: 56px; min-width: 0; }
  .tren-side { grid-area: tren; align-self: start; display: flex !important; flex-direction: column; gap: 10px; }
  .tren-side .an-side { display: block !important; }
  .tren-side .tt-tab th:nth-child(3), .tren-side .tt-tab td:nth-child(3) { display: none; }
  .sig-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sig-tabs [data-stab="tren"] { display: none !important; }
  .pane-main { height: min(52vh, 480px) !important; }
  .focus-bar:not(.in-side) { display: none !important; }
}
/* Audit UI tahap 4: lebar halaman seragam + layar lebar & ultrawide */
@media (min-width: 1200px) {
  .main { max-width: 1440px; }
  .adm-kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
  .main { max-width: 1680px; }
  /* Jurnal: kalender, grafik balance, hasil per bulan/hari berdampingan */
  body.page-jurnal .main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
  body.page-jurnal .main > * { grid-column: 1 / -1; }
  body.page-jurnal .main > .st-row { display: contents; }
  body.page-jurnal .st-row > .st-cal { grid-column: 1; grid-row: 4; }
  body.page-jurnal .st-row > .st-chart { grid-column: 2; grid-row: 4; }
  body.page-jurnal .main > .porto-row { grid-column: 3; grid-row: 4; grid-template-columns: minmax(0, 1fr) !important; }
  /* Berita: 3 kolom (kalender rilis · daftar berita · analisa agen) */
  .brt-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 400px !important; align-items: start; }
  .brt-main { display: contents; }
  .brt-main > .brt-cal { grid-column: 1; grid-row: 1; }
  .brt-main > .brt-news { grid-column: 2; grid-row: 1; margin-top: 0; }
  .brt-side { grid-column: 3; grid-row: 1; }
}
/* ultrawide: halaman Sinyal tidak melebar tanpa batas, kolom kiri & kanan lebih lega */
@media (min-width: 2200px) {
  body.page-sinyal .main { max-width: 2400px !important; margin: 0 auto !important; }
  .sig-page, body.side-mini .sig-page { grid-template-columns: 340px minmax(0, 1fr) 440px !important; }
}
/* menu samping terbuka: kolom kiri (Tren/Ringkasan/Dampak/Alert) tetap lega, yang mengecil chart-nya */
@media (min-width: 1600px) and (max-width: 2199px) { body:not(.side-mini) .sig-page { grid-template-columns: 380px minmax(0, 1fr) 400px !important; } }
@media (min-width: 1200px) and (max-width: 1599px) { body:not(.side-mini) .sig-page { grid-template-columns: 320px minmax(0, 1fr) 360px !important; } }
/* Audit UI tahap 5: laptop layar pendek — kolom kiri Sinyal bisa digulir sendiri (chart & panel kanan tetap di tempat) */
@media (min-width: 1200px) and (max-height: 900px) {
  .tren-side { position: sticky; top: 12px; max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 2px !important; }
  .tren-side::-webkit-scrollbar { width: 6px; } .tren-side::-webkit-scrollbar-thumb { background: var(--bg-d1d5db); border-radius: 3px; }
}
/* TV / monitor 4K (lebar >= 2560 dan tinggi >= 1400): semua tampilan diperbesar supaya terbaca dari jauh */
@media (min-width: 2560px) and (min-height: 1400px) { html { zoom: 1.5; } .pane-main { height: max(420px, calc(100vh / 1.5 - 250px)) !important; } .tren-side { max-height: none; } }
@media (min-width: 3400px) and (min-height: 1900px) { html { zoom: 2; } .pane-main { height: max(420px, calc(100vh / 2 - 250px)) !important; } }
/* chart sempit: TF jadi dropdown (seperti HP), kepala chart tidak keluar kotak */
.chart-card.tf-compact .chart-head { flex-wrap: nowrap; min-width: 0; }
.chart-card.tf-compact .tf-pill { padding: 0 3px 0 12px; }
.chart-card.tf-compact .tf-pill .tp-b { display: inline-flex !important; }
.chart-card.tf-compact .chart-head .tf-pill .tfs { position: absolute; left: 0; top: 40px; z-index: 20; width: 212px; margin: 0; display: none !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px; padding: 6px; border-radius: 18px; background: var(--navy-2); border: 1px solid var(--navy-3); box-shadow: 0 14px 30px rgba(0,0,0,.4); }
.chart-card.tf-compact .tf-pill.open .tfs { display: grid !important; }
.chart-card.tf-compact .chart-head .tf-pill .tfs button { min-height: 36px; height: auto; padding: 0; border-radius: 999px; background: var(--navy-3); color: #F3F4F6; font-size: 12px; font-weight: 800; }
.chart-card.tf-compact .chart-head .tf-pill .tfs button[aria-pressed="true"] { background: var(--green); color: var(--navy); }
/* layar 1200–1399px: kolom kiri & kanan Sinyal sedikit lebih sempit supaya chart tidak terlalu kecil */
@media (min-width: 1200px) and (max-width: 1399px) {
  .sig-page, body.side-mini .sig-page { grid-template-columns: 290px minmax(0, 1fr) 330px !important; }
  body:not(.side-mini) .sig-page { grid-template-columns: 260px minmax(0, 1fr) 320px !important; }
}
.chart-card.tf-tiny .tf-pill .tp-s { display: none; }
.chart-card.tf-tiny .tf-pill { padding-left: 3px; }
.chart-card.tf-tiny .chart-head { gap: 6px; }
@media (min-width: 861px) { .tren-side .tt-sum { max-height: calc(2.8em + 12px); } }
/* ===== Audit UI tahap 6: rapikan desain ===== */
/* tombol: bentuk pil (warna tetap: hitam = utama, hijau = trading, link = navigasi) */
.btn { border-radius: 999px; }
/* sudut kartu: kartu 16px */
.card, .card-dark, .sg-mini article, .run-card .s-empty, .brt-tiles article, .brt-week, .brt-news, .brt-an, .brt-agent, .brt-hi, .brt-warn,
.jr-cards > article, .jr-cards > button.jr-up, .st-bento article, .st-row .card, .porto-bars .card, .ak-info, .ak-admin, .ak-list, .adm-sec .card, .adm-kpi article,
.st-lay, .st-link, .dj-steps .step, .dj-side .faq, .dj-help, .mu-row, .tl-card, .tren-side > .tren-blk, .tren-side > .rk, .tren-side > .dmp, .tren-side > .ax-ev, .sz, .sz-siap { border-radius: 16px !important; }
/* pesan "belum ada data" satu bentuk: ikon + kalimat (+ aksi) */
.pd-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0 0; padding: 16px 14px; border: 1px dashed var(--bd-d1d5db); border-radius: 12px; background: transparent; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }
.pd-empty::before { content: ""; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-f0f1f3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / 18px no-repeat; flex: none; }
.pd-empty-lg { padding: 28px 16px; }
.brt-an .pd-empty { border-color: rgba(127,127,127,.35); color: inherit; opacity: .85; }
.brt-an .pd-empty::before { background-color: rgba(127,127,127,.2); }
/* Jurnal di HP: Balance + 3 angka utama, sisanya lewat "Lihat semua statistik" */
.st-more { display: none; }
@media (max-width: 599px) {
  .st-bento:not(.all) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .st-bento:not(.all) .st-hero { grid-column: 1 / -1; }
  .st-bento:not(.all) > article:nth-child(2), .st-bento:not(.all) > article:nth-child(5), .st-bento:not(.all) > article:nth-child(6), .st-bento:not(.all) > article:nth-child(7), .st-bento:not(.all) > article:nth-child(8) { display: none; }
  .st-bento:not(.all) > article:nth-child(9) { order: 1; }
  .st-more { display: inline-block; align-self: flex-start; margin: -6px 0 0; border: 0; background: none; padding: 4px 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--green-t); cursor: pointer; }
  /* Tools di HP: kartu ringkas 1 baris (Pemburu Cloud tetap kartu besar di atas) */
  .tl-card:not([data-kat="cloud"]) { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-areas: "ic nm bt" "ic st bt" "kt kt kt"; align-items: center; column-gap: 10px; row-gap: 1px; padding: 10px 12px; }
  .tl-card:not([data-kat="cloud"]) .tl-top, .tl-card:not([data-kat="cloud"]) .tl-bot { display: contents; }
  .tl-card:not([data-kat="cloud"]) .tl-ic { grid-area: ic; width: 38px; height: 38px; border-radius: 12px; }
  .tl-card:not([data-kat="cloud"]) .tl-ic svg { width: 20px; height: 20px; }
  .tl-card:not([data-kat="cloud"]) .tl-kat { display: none; }
  .tl-card:not([data-kat="cloud"]) .tl-nama { grid-area: nm; font-size: 14px; cursor: pointer; }
  .tl-card:not([data-kat="cloud"]) .tl-nama::after { content: ' ›'; color: var(--muted); }
  .tl-card:not([data-kat="cloud"]) .tl-st { grid-area: st; font-size: 12px; }
  .tl-card:not([data-kat="cloud"]) .tl-btn, .tl-card:not([data-kat="cloud"]) .tl-ada { grid-area: bt; min-height: 36px; padding: 0 12px; font-size: 12px; border-radius: 999px; }
  .tl-card:not([data-kat="cloud"]) .tl-ket { grid-area: kt; display: none; margin-top: 6px; font-size: 13px; }
  .tl-card.open .tl-ket { display: block; }
  .tl-card[data-kat="cloud"] { order: -1; background: var(--navy); color: #fff; border-color: var(--navy); }
  .tl-card[data-kat="cloud"] .tl-st { color: #FCD98A; }   /* 2E: "Segera hadir" terbaca di kartu gelap */
  .tl-card[data-kat="cloud"] .tl-ket { color: var(--side-text); }
  .tl-card[data-kat="cloud"] .tl-btn:not([aria-pressed="true"]) { background: var(--green); color: var(--navy); }
  .tl-grid { gap: 8px !important; }
}
/* Tools di HP sedang dibuka: tanda × kecil, ketuk lagi untuk menutup (sama seperti avatar Akun) */
.top-tools.tt-close { overflow: visible; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy) !important; }
.top-tools.tt-close .av-x { position: absolute; right: -4px; bottom: -4px; }
/* pesan kosong di tempat lain ikut gaya "belum ada data" */
.dmp-none, .sa-empty, .brt-none { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0 0; padding: 16px 14px; border: 1px dashed var(--bd-d1d5db); border-radius: 12px; background: transparent !important; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }
.dmp-none::before, .sa-empty::before, .brt-none::before { content: ""; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-f0f1f3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / 18px no-repeat; flex: none; }
.brt-none[hidden] { display: none; }
.tren-side .dmp-none { padding: 10px; font-size: 12px; flex-direction: row; text-align: left; }
.tren-side .dmp-none::before { width: 26px; height: 26px; background-size: 14px; }
/* halaman Admin ikut gaya baru: kartu 16px, tombol pil */
.adm-main .card, .adm-main article, .adm-sec, .adm-kpi article, .adm-list > *, .adm-hp-card { border-radius: 16px; }
.adm-main .btn, .adm-main button.btn { border-radius: 999px; }
/* tombol Bantuan bergaya seperti foto profil: lingkaran gelap, cincin putih, maskot putih di tengah */
.help-fab .hf-bot { position: relative; width: 56px !important; height: 56px !important; border-radius: 50%; background: var(--navy); display: grid; place-items: center; box-shadow: 0 0 0 3px #fff, 0 8px 20px rgba(20,25,33,.28); filter: none !important; }
.help-fab .hf-bot svg { width: 42px !important; height: 42px !important; overflow: visible; }
.help-fab .hf-dot { position: absolute; top: 0; right: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--green); border: 2.5px solid #fff; }
@media (max-width: 860px) { .help-fab .hf-bot { width: 52px !important; height: 52px !important; } .help-fab .hf-bot svg { width: 38px !important; height: 38px !important; } }
/* karakter Banteng CS di kepala chat bantuan & menu Pusat bantuan: latar gelap seperti avatar */
.help-av { background: var(--navy) !important; box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.help-av svg, .sh-ic svg, .lg-bot svg { width: 80%; height: 80%; }
@media (min-width: 861px) { .av-x { display: none; } .avatar.av-close { box-shadow: none; } }   /* tanda × hanya di HP */
/* Berita: rilis besar berikutnya disorot satu warna (hijau muda + garis hijau), bukan merah bercampur hijau */
.calw tr.nextrow td:not(.dcell), .brt-week .calw tr.nextrow td:not(.dcell) { background: var(--green-tint); }
.calw tr.nextrow td.tcell { box-shadow: inset 3px 0 0 var(--green); }
@media (max-width: 860px) {
  .calw tr.nextrow, .brt-week .calw tr.nextrow { background: var(--green-tint) !important; box-shadow: inset 3px 0 0 var(--green); }
  .calw tr.nextrow td:not(.dcell), .brt-week .calw tr.nextrow td:not(.dcell) { background: transparent !important; }
  .calw tr.nextrow td.tcell { box-shadow: none; }
}
/* HP: sel tabel kalender tanpa kotak latar (efek sentuh tidak menempel per sel); "selesai" tanpa label Aktual */
@media (max-width: 860px) { .calw tr.evrow:not(.nextrow) td:not(.dcell) { background: transparent !important; } }
.calw td.r:has(> .ev-done)::before { content: none; }
/* rilis yang sudah lewat lebih pudar supaya jelas beda dengan yang akan datang; "selesai" jadi label kecil */
.calw tr.past td:not(.dcell) { opacity: .5; }
.calw tr.past:hover td:not(.dcell) { opacity: .8; }
.ev-done { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--bg-eef0f3); color: var(--muted); font-size: 12px; font-weight: 700; }
.ev-done::before { content: '✓ '; }
/* acara tanpa angka yang sudah lewat: label "✓ Selesai" berwarna, beda dari rilis yang masih ditunggu */
.calw .ev-done { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--bg-e5e7eb); color: var(--tx-374151) !important; font-size: 12px; font-weight: 700; white-space: nowrap; }
.calw .ev-done::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--k-25c660) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; }

/* Trading Plan (form + kartu di Jurnal › Statistik) */
.tp-form { display: grid; gap: 16px; }
.tp-sec { display: grid; gap: 8px; }
.tp-h { font-size: 13px; font-weight: 800; color: var(--ink); }
.tp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tp-grid .f, .tp-form > .f { margin: 0; }
.tp-pairs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tp-pair { height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; background: var(--bg-e8f8ee); color: var(--tx-137a3a); font-size: 12px; font-weight: 800; }
.tp-pairs .link { margin-left: 4px; font-size: 13px; font-weight: 700; }
.tp-sum { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--bg-f4f5f7); font-size: 13px; line-height: 1.5; color: var(--ink); }
.tp-sum:empty { display: none; }
.tp-acts { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.tp-card { max-width: 760px; }
.su-step .tp-form { margin-top: 12px; }
@media (max-width: 600px) { .tp-grid { grid-template-columns: 1fr 1fr; } .tp-grid .f:last-child { grid-column: 1 / -1; } }
.tp-st { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; margin: 14px 0; }
.tp-st .tp-warn { grid-column: 1 / -1; padding: 12px 16px; border-radius: 16px; background: var(--bg-fff4e5); color: #8A4B00; font-size: 13px; line-height: 1.45; border: 1px solid #FCD9A8; }
.tp-main { background: var(--navy); color: #fff; border-radius: 24px; padding: 18px 20px; display: grid; gap: 12px; min-width: 0; }
.tp-top { display: flex; justify-content: space-between; align-items: center; }
.tp-top b { font-size: 15px; }
.tp-main .link { color: var(--k-6ee7a0); font-weight: 700; font-size: 13px; }
.tp-prog { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #C9CED6; flex-wrap: wrap; }
.tp-prog b { color: #fff; font-size: 14px; } .tp-prog small { color: #9AA3AF; font-weight: 600; }
.tp-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.tp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.tp-note { margin: 0; font-size: 13px; color: #C9CED6; }
.tp-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tp-kpi div { background: rgba(255,255,255,.07); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.tp-kpi span { font-size: 11.5px; color: #9AA3AF; } .tp-kpi b { font-size: 17px; } .tp-kpi small { font-size: 11.5px; color: #9AA3AF; }
.tp-kpi b.down { color: #FDBA74; }
.tp-rule { margin: 0; font-size: 12.5px; line-height: 1.5; color: #C9CED6; border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; white-space: pre-line; }
.tp-disc { background: var(--bg-fff); border-radius: 24px; padding: 18px 20px; display: grid; gap: 10px; align-content: start; }
.tp-disc > b { font-size: 15px; }
.tp-disc div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--border-2); }
.tp-disc div b { color: var(--ink); } .tp-disc div b.up { color: var(--tx-137a3a); } .tp-disc div b.down { color: #C2410C; }
.tp-none { grid-template-columns: 1fr auto; align-items: center; background: var(--bg-fff); border-radius: 24px; padding: 18px 20px; border: 1.5px dashed var(--border-2); }
.tp-none div { display: grid; gap: 4px; } .tp-none small { color: var(--muted); font-size: 13px; line-height: 1.45; }
@media (max-width: 860px) { .tp-st { grid-template-columns: 1fr; } .tp-none { grid-template-columns: 1fr; } .tp-kpi b { font-size: 15px; } .tp-main, .tp-disc { padding: 16px; } }
.gs-next { margin: 0 0 14px; display: grid; gap: 8px; }
.gs-next-l { display: grid; gap: 4px; }
.gs-next .mu-n.ok { background: var(--green); color: var(--navy); }
/* Pusat Bantuan gaya baru (canvas "Pusat Bantuan Baru") */
.help-panel { border-radius: 24px !important; background: var(--page) !important; box-shadow: 0 20px 48px rgba(20,25,33,.22) !important; width: 400px; height: min(680px, calc(100dvh - 80px)); }
.help-head { background: var(--bg-fff) !important; color: var(--ink) !important; padding: 14px 16px !important; gap: 12px !important; border-bottom: 1px solid var(--border-2); }
.help-av { position: relative; width: 44px !important; height: 44px !important; background: var(--navy) !important; box-shadow: none !important; overflow: visible; }
.help-av .hf-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); border: 2.5px solid #fff; }
.help-tt b { font-size: 16px !important; } .help-tt small { color: var(--muted) !important; }
.help-head button { width: 40px !important; height: 40px !important; background: var(--bg-fff) !important; color: var(--ink) !important; border: 1px solid var(--border) !important; display: grid; place-items: center; }
.help-head button:hover { border-color: var(--ink) !important; }
.help-log { background: var(--page) !important; gap: 12px !important; }
.help-hero { background: var(--navy); color: #fff; border-radius: 20px; padding: 16px 18px; display: grid; gap: 4px; animation: rise .25s var(--ease) both; }
.help-hero b { font-size: 17px; } .help-hero span { font-size: 13px; line-height: 1.5; color: #C9CED6; }
.help-lh { display: block; font-size: 13px; color: var(--muted); padding: 4px 4px 8px; }
.help-list > div { background: var(--bg-fff); border-radius: 20px; padding: 2px 14px; }
.help-list button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--border-2); background: none; font: inherit; color: var(--ink); cursor: pointer; text-align: left; min-height: 56px; }
.help-list button:last-child { border-bottom: 0; }
.hl-ic { width: 36px; height: 36px; flex: none; border-radius: 12px; background: var(--bg-e8f8ee); color: var(--tx-137a3a); display: grid; place-items: center; }
.hl-t { flex: 1; font-size: 14px; font-weight: 600; }
.help-list i { font-style: normal; color: #9AA3AF; font-size: 18px; }
@media (hover: hover) { .help-list button:hover .hl-t { color: var(--tx-137a3a); } }
.help-msg { font-size: 14px; }
.help-msg.bot { border: 0 !important; border-radius: 18px 18px 18px 6px !important; padding: 12px 14px !important; }
.help-msg.me { border-radius: 18px 18px 6px 18px !important; padding: 10px 14px !important; }
.help-msg .help-tg { height: 34px; align-items: center; padding: 0 14px !important; font-weight: 700; font-size: 12.5px !important; }
.help-chips button { border: 0 !important; box-shadow: 0 0 0 1px var(--border); color: var(--ink) !important; font-weight: 700 !important; font-size: 12.5px !important; padding: 0 14px !important; min-height: 36px; }
@media (hover: hover) { .help-chips button:hover { background: var(--bg-fff) !important; box-shadow: 0 0 0 1.5px var(--green); } }
.help-fb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.help-fb span { margin-right: 2px; }
.help-fb button { height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--bg-e5e7eb); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.help-form { padding: 12px 14px 6px !important; border-top: 1px solid var(--border-2) !important; }
.help-in { height: 46px; border-radius: 999px !important; border: 1px solid var(--border) !important; background: var(--page) !important; padding: 0 18px !important; }
.help-in:focus { outline: 2px solid var(--green) !important; outline-offset: 0; background: var(--bg-fff) !important; }
.help-form button { width: 46px !important; height: 46px !important; border-radius: 50% !important; background: var(--navy) !important; }
.help-note { display: flex !important; justify-content: center; align-items: center; gap: 6px; padding: 4px 14px 12px !important; text-decoration: none; color: var(--muted) !important; font-size: 12.5px !important; background: var(--bg-fff); }
.help-note b { color: var(--tx-137a3a); } .help-note i { font-style: normal; color: var(--tx-137a3a); font-weight: 700; }
@media (max-width: 860px) {
  .help-panel { width: auto !important; height: 90dvh !important; border-radius: 24px 24px 0 0 !important; }
  .help-panel::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--bg-d1d5db); z-index: 2; }
  .help-head { padding-top: 22px !important; border-bottom: 0; background: var(--page) !important; }
  .help-head button { width: 40px !important; height: 40px !important; }
  .help-form { border-radius: 20px 20px 0 0; }
  .help-note { padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
}
.help-tt small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.help-in:focus { outline: 0 !important; border-color: var(--green) !important; box-shadow: 0 0 0 3px var(--ka-37-198-96-_15); }
/* Kabar Tools ("Kabari saya") */
.tl-baru { display: inline-flex; vertical-align: 2px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--green); color: var(--navy); font-style: normal; font-size: 11px; font-weight: 800; }
.tl-kb { grid-column: 1 / -1; color: var(--tx-137a3a); font-weight: 700; font-size: 12.5px; }
.sa-kb { display: block; text-decoration: none; color: inherit; }
.sa-kb small { display: block; }
.sa-kb-b { background: var(--green); color: var(--navy); }
/* Zona berita (jeda dari Trading Plan) */
.dmp-badge.zone { background: var(--bg-ffedd5); color: var(--tx-7c2d12); border: 1px solid #FDBA74; }
.dmp-badge.zone b { color: var(--tx-9a3412); } .dmp-badge.zone a { color: var(--tx-9a3412); font-weight: 700; }
.z-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--bg-ffedd5); color: var(--tx-9a3412); font-size: 10.5px; font-weight: 800; vertical-align: 1px; }
.tp-news { margin: 0; font-size: 12.5px; color: #C9CED6; } .tp-news b { color: #fff; }
/* Catatan agen dirangkum: Intinya + mata uang + 3 poin + teks lengkap dilipat */
.anb-txt { font-size: 13px; line-height: 1.55; }
.brt-agent .anb-txt { margin-top: 10px; display: grid; gap: 10px; }
.anb-txt .rk-inti { background: var(--navy); color: #fff; border-radius: 16px; padding: 12px 14px; display: grid; gap: 4px; }
.anb-txt .rk-inti small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #FACC15; }
.anb-txt .rk-inti b { font-size: 14.5px; line-height: 1.45; }
.anb-txt .rk-cur { display: flex; flex-wrap: wrap; gap: 6px; }
.anb-txt .rk-cur span { height: 28px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px; background: var(--bg-eef0f3); color: var(--ink); font-size: 12px; font-weight: 800; }
.anb-txt .rk-cur span.up { background: var(--bg-e8f8ee); color: var(--tx-137a3a); } .anb-txt .rk-cur span.dn { background: var(--bg-fee2e2); color: var(--tx-991b1b); }
.anb-txt .rk-poin { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; color: var(--tx-374151); }
.anb-txt .rk-poin li { position: relative; padding-left: 16px; }
.anb-txt .rk-poin li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.anb-txt .rk-poin li.w::before { background: #EA580C; }
.anb-txt .rk-full summary { cursor: pointer; color: var(--tx-137a3a); font-weight: 700; font-size: 13px; list-style: none; }
.anb-txt .rk-full summary::-webkit-details-marker { display: none; }
.anb-txt .rk-full summary::after { content: ' ›'; } .anb-txt .rk-full[open] summary::after { content: ' ⌄'; }
.anb-txt .rk-full p { margin: 8px 0 0; color: var(--tx-4b5563); font-size: 13px; line-height: 1.6; }
/* versi di kotak Analisa berita (latar gelap di desktop) */
.brt-an .anb-note.anb-txt { display: grid; gap: 10px; font-weight: 500; font-size: 13px; }
.brt-an .anb-note .rk-inti { background: rgba(255,255,255,.08); padding: 10px 12px; }
.brt-an .anb-note .rk-poin, .brt-an .anb-note .rk-full p { color: #D1D5DB; }
.brt-an .anb-note .rk-full summary { color: var(--k-6ee7a0); }
.brt-an .anb-note .rk-cur span { background: rgba(255,255,255,.1); color: #fff; }
.brt-an .anb-note .rk-cur span.up { background: var(--ka-37-198-96-_2); color: var(--k-86efac); } .brt-an .anb-note .rk-cur span.dn { background: var(--ka-239-68-68-_2); color: var(--k-fca5a5); }
@media (max-width: 860px) {
  .brt-an .anb-note .rk-inti { background: var(--navy); }
  .brt-an .anb-note .rk-poin, .brt-an .anb-note .rk-full p { color: var(--tx-374151); }
  .brt-an .anb-note .rk-full summary { color: var(--tx-137a3a); }
  .brt-an .anb-note .rk-cur span { background: var(--bg-eef0f3); color: var(--ink); } .brt-an .anb-note .rk-cur span.up { background: var(--bg-e8f8ee); color: var(--tx-137a3a); } .brt-an .anb-note .rk-cur span.dn { background: var(--bg-fee2e2); color: var(--tx-991b1b); }
}
/* ===== Berita v2 (canvas "Halaman Berita Baru"): 2 kolom, berita di bawah kalender, rangkuman + saran di kanan ===== */
.brt-grid { grid-template-columns: minmax(0, 1fr) 420px; }
@media (min-width: 1600px) {
  .brt-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important; }
  .brt-main { display: flex !important; }
  .brt-main > .brt-cal, .brt-main > .brt-news, .brt-side { grid-column: auto !important; grid-row: auto !important; }
}
.brt-main > .brt-week { margin: 0; }
.cal-hl { margin: 6px 0 4px; padding: 8px 12px; border-radius: 12px; background: var(--bg-fff7e6); color: #7C4A03; font-size: 12.5px; line-height: 1.45; }
.calw tr.pairrow:not(.nextrow) td { background: var(--bg-fffbeb); }
/* filter bawaan Dampak tinggi 24 jam */
.brt-cats .chip-hi { display: inline-flex; align-items: center; gap: 6px; color: var(--tx-991b1b); border-color: var(--k-fca5a5); }
.brt-cats .chip-hi[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.brt-cats .chip-hi span { font-weight: 800; }
/* semua berita satu bentuk: gambar + judul + ringkasan 2 baris + sumber */
#news .news-row { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 4px; }
.nr-img { width: 112px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--bg-eef0f3); display: block; }
.nr-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nr-img.nr-ic { display: grid; place-items: center; font-weight: 800; font-size: 20px; color: var(--tx-4b5563); }
.nr-ic[data-c="Emas & Perak"] { background: var(--bg-fef3c7); color: var(--tx-92400e); } .nr-ic[data-c="Kripto"] { background: var(--bg-ede9fe); color: #5B21B6; }
.nr-ic[data-c="Bank Sentral"] { background: var(--bg-e0f2fe); color: #075985; } .nr-ic[data-c="Analisa"] { background: var(--bg-e8f8ee); color: var(--tx-137a3a); } .nr-ic[data-c="Forex"] { background: var(--bg-eef0f3); color: var(--tx-374151); }
#news .news-row .badge-hi { display: inline-block; margin-bottom: 4px; background: var(--red-d); color: var(--di-turun); font-size: 11px; padding: 2px 8px; border-radius: 6px; }
#news .news-row .nr-sum { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; margin-top: 3px; }
#news-all { margin-top: 10px; }
/* Rangkuman Agen Berita */
.brt-sum { border-radius: 24px; display: grid; gap: 12px; }
.brt-sum .brt-ag-h { display: flex; align-items: center; gap: 10px; } .brt-sum .brt-ag-h b { flex: 1; font-size: 15px; } .brt-sum .brt-ag-h small { font-size: 12px; }
.brt-sum .anb-txt { margin: 0; display: grid; gap: 10px; }
.sum-aset { display: grid; }
.sum-aset .sa-h { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.sa-row { display: grid; grid-template-columns: 62px 84px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--border-2); color: inherit; text-decoration: none; font-size: 13px; }
.sa-row:last-child { border-bottom: 0; }
.sa-row b { font-size: 13.5px; padding-top: 4px; }
.sa-d { height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.sa-d.up { background: var(--bg-e8f8ee); color: var(--tx-137a3a); } .sa-d.dn { background: var(--bg-fee2e2); color: var(--tx-991b1b); }
.sa-t { color: var(--tx-374151); line-height: 1.45; } .sa-t small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
@media (hover: hover) { .sa-row:hover .sa-t { color: var(--ink); text-decoration: underline; } }
/* kotak saran */
.saran { background: var(--bg-fff7ed); border: 1px solid var(--bd-fed7aa); border-radius: 16px; padding: 12px 14px; color: var(--tx-7c2d12); font-size: 13px; line-height: 1.5; }
.saran b { display: block; color: var(--tx-9a3412); font-size: 13px; margin-bottom: 4px; }
.saran ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.brt-an .saran-d { margin-top: 12px; background: rgba(251,146,60,.14); border-color: rgba(251,146,60,.35); color: #FED7AA; }
.brt-an .saran-d b { color: #FDBA74; }
.brt-an a.anb-ev { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 11px 14px; border-radius: 14px; background: rgba(255,255,255,.07); color: #fff; text-decoration: none; font-size: 13px; }
.brt-an a.anb-ev[hidden] { display: none; } .brt-an a.anb-ev i { font-style: normal; color: var(--k-6ee7a0); font-weight: 700; }
/* tablet & HP: satu kolom, urutan: rilis berikutnya → rangkuman → analisa pair → kalender → berita */
@media (max-width: 1100px) {
  .brt-grid { display: flex !important; flex-direction: column; gap: 14px; }
  .brt-main, .brt-side { display: contents !important; }
  .brt-cal { order: 0; } .ingat-br { order: 1; } .brt-sum { order: 2; } .brt-an { order: 3; } .brt-week { order: 4; } .brt-news { order: 5; } .brt-warn { order: 6; display: block !important; }
}
@media (max-width: 860px) {
  .brt-an .saran-d { background: var(--bg-fff7ed); border-color: var(--bd-fed7aa); color: var(--tx-7c2d12); } .brt-an .saran-d b { color: var(--tx-9a3412); }
  .brt-an a.anb-ev { background: var(--bg-fff); border: 1px solid var(--border-2); color: var(--ink); } .brt-an a.anb-ev i { color: var(--tx-137a3a); }
  #news .news-row { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .nr-img { width: 84px; height: 64px; }
  #news .news-row .nr-sum { display: -webkit-box !important; font-size: 12.5px; }
  .sa-row { grid-template-columns: 52px 78px minmax(0, 1fr); gap: 8px; }
}
.ev-none { font-size: 11.5px; font-weight: 600; color: #9AA3AF; white-space: nowrap; }
/* 3 kotak angka di samping Rilis berikutnya */
.brt-tiles { gap: 10px; }
.brt-tiles .bt-t { background: var(--bg-fff); border: 1px solid var(--border-2); border-radius: 20px; padding: 12px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; color: inherit; text-decoration: none; }
.brt-tiles .bt-t span { grid-column: 1; font-size: 12px; font-weight: 600; color: var(--muted); }
.brt-tiles .bt-t b { grid-column: 2; grid-row: 1 / span 2; font-size: 26px; font-weight: 800; }
.brt-tiles .bt-t small { grid-column: 1; font-size: 11.5px; color: var(--muted); }
.brt-tiles .bt-t:first-child { background: var(--green-tint); border-color: transparent; }
.brt-tiles .bt-t:first-child span, .brt-tiles .bt-t:first-child b, .brt-tiles .bt-t:first-child small { color: var(--green-t); }
.brt-tiles .bt-t:last-child b { color: var(--tx-b91c1c); }
@media (hover: hover) { .brt-tiles .bt-t:hover { border-color: var(--green); } }
.brt-cal:has(#cal-next[hidden]) .brt-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .brt-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .brt-tiles .bt-t { grid-template-columns: 1fr; padding: 10px 12px; } .brt-tiles .bt-t b { grid-column: 1; grid-row: auto; font-size: 22px; } .brt-tiles .bt-t small { display: none; } }
/* Berita 3 bagian (≥1200): kiri kalender + berita, tengah Rangkuman, kanan Analisa per pair — dua-duanya langsung terlihat */
@media (min-width: 1200px) {
  .brt-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.75fr) !important; }
  .brt-side { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; align-content: start; }
  .brt-side > .ingat-br { grid-column: 1 / -1; }
  .brt-side > .brt-sum { grid-column: 1; grid-row: 2 / span 3; }
  .brt-side > .brt-an { grid-column: 2; grid-row: 2; }
  .brt-side > .brt-warn { grid-column: 2; grid-row: 3; }
  .brt-sum { padding: 16px 18px; }
  .sa-row { grid-template-columns: 56px 78px minmax(0, 1fr); gap: 8px; }
  .brt-tiles .bt-t { padding: 10px 14px; } .brt-tiles .bt-t b { font-size: 24px; }
}
@media (min-width: 1200px) and (max-width: 1499px) {
  .brt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) !important; }
  .brt-cal { grid-template-columns: 1fr !important; }
  .brt-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .brt-tiles .bt-t { grid-template-columns: 1fr; } .brt-tiles .bt-t b { grid-column: 1; grid-row: auto; } .brt-tiles .bt-t small { display: none; }
}
/* Berita menyamping di paling atas (kartu kecil, bisa digeser); "Lihat semua" = daftar lengkap ke bawah */
.brt-strip { margin: 0 0 14px; padding: 12px 14px 10px; border-radius: 22px; }
.bs-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bs-head .h2 { margin: 0; font-size: 15px; flex: none; }
.bs-head .brt-cats { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; }
.bs-head .brt-cats::-webkit-scrollbar { display: none; }
.bs-head .brt-cats .chip { height: 32px; font-size: 12.5px; flex: none; }
.bs-nav { display: flex; gap: 6px; flex: none; }
.bs-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-fff); font-size: 18px; line-height: 1; cursor: pointer; color: var(--ink); }
.bs-all { flex: none; font-weight: 700; font-size: 13px; border: 0; background: none; color: var(--green-t); cursor: pointer; }
.brt-strip:not(.open) #news { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: 10px 0 4px; }
.brt-strip:not(.open) #news .news-row { flex: none; width: 280px; scroll-snap-align: start; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--border-2); border-radius: 16px; }
.brt-strip:not(.open) #news .news-row[hidden] { display: none; }
.brt-strip:not(.open) .nr-img { width: 68px; height: 56px; border-radius: 10px; }
.brt-strip:not(.open) .nr-img.nr-ic { font-size: 15px; }
.brt-strip:not(.open) #news .news-row b { font-size: 13px; -webkit-line-clamp: 2; }
.brt-strip:not(.open) #news .news-row .nr-sum { display: none !important; }
.brt-strip:not(.open) #news .news-row small { font-size: 11px; margin-top: 3px; }
.brt-strip:not(.open) #news .news-row small .cat { display: none; }
.brt-strip:not(.open) #news .news-row .badge-hi { font-size: 10px; padding: 1px 6px; margin-bottom: 3px; }
.brt-strip.open .bs-nav { display: none; }
.brt-strip.open #news { margin-top: 8px; }
@media (max-width: 860px) {
  .brt-strip { padding: 12px; }
  .bs-head { flex-wrap: wrap; } .bs-head .brt-cats { order: 3; flex-basis: 100%; } .bs-nav { display: none; } .bs-all { margin-left: auto; }
  .brt-strip:not(.open) #news .news-row { width: 240px; }
}
.brt-news.brt-strip { order: 0 !important; margin-bottom: 4px; }
.brt-strip:not(.open) #news .news-row .cat-w { display: none; }
/* nama situs panjang (mis. economictimes.indiatimes.com) tidak keluar kartu: dipotong "…", waktu tetap terlihat */
.brt-strip:not(.open) #news .news-row .nr-b { min-width: 0; }
.brt-strip:not(.open) #news .news-row small { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.brt-strip:not(.open) #news .news-row small .nr-site { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* kotak angka sekarang tombol (buka pop-up) */
.brt-tiles .bt-t { font: inherit; text-align: left; cursor: pointer; width: 100%; }
/* pop-up Berita & Rilis hari ini (desktop di tengah, HP dari bawah: gaya .sheet) */
.bp-dlg { width: min(580px, calc(100vw - 32px)); height: min(760px, calc(100dvh - 48px)); display: none; flex-direction: column; gap: 10px; padding: 16px 18px 18px; border-radius: 24px; }
.bp-dlg[open] { display: flex; }
.bp-dlg .sheet-head { margin: 0; }
.bp-dlg .sheet-head b { font-size: 17px; }
.bp-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-fff); font-size: 15px; cursor: pointer; color: var(--ink); flex: none; }
.bp-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; flex: none; }
.bp-tabs::-webkit-scrollbar { display: none; }
.bp-tabs .chip { flex: none; height: 34px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; }
.bp-tabs .chip span { font-weight: 800; }
.bp-tabs .chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.bp-search { flex: none; margin: 0; height: 42px; }
.bp-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.bp-list .news-row { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 2px; }
.bp-list .nr-img { width: 96px; height: 68px; }
.bp-list .news-row .badge-hi { display: inline-block; margin-bottom: 4px; background: var(--red-d); color: var(--di-turun); font-size: 10.5px; padding: 1px 7px; border-radius: 6px; }
.bp-list .news-row .nr-sum { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#dlg-rilis { height: auto; max-height: min(760px, calc(100dvh - 48px)); }
.rl-h { display: grid; gap: 2px; } .rl-h small { font-size: 12px; }
.rl-row { display: grid; grid-template-columns: 50px 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--border-2); cursor: pointer; font-size: 13.5px; border-radius: 10px; }
.rl-row .rl-n { display: grid; gap: 2px; min-width: 0; } .rl-row .rl-n small { color: var(--muted); font-size: 12px; }
.rl-row .rl-s { justify-self: end; font-size: 13px; white-space: nowrap; }
.rl-row.next { background: var(--green-tint); border-bottom-color: transparent; } .rl-row.next .rl-cd { color: var(--green-t); }
.rl-row.past { color: #9AA3AF; } .rl-row.past .rl-n b { color: #9AA3AF; font-weight: 600; }
.rl-det { padding: 4px 0 10px; border-bottom: 1px solid var(--border-2); }
.rl-det .ev-detail { grid-template-columns: 1fr; padding: 8px 0; }
#rl-saran { flex: none; } #rl-kal { flex: none; }
@media (max-width: 860px) { .bp-dlg { width: 100vw; height: 90dvh; border-radius: 22px 22px 0 0; } #dlg-rilis { height: auto; max-height: 90dvh; } .bp-list .news-row { grid-template-columns: 80px minmax(0, 1fr); } .bp-list .nr-img { width: 80px; height: 60px; } }
/* banner berita penting (gaya notifikasi HP, sama dengan pop-up Sinyal baru) */
.sa-toast.bb { display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px; gap: 12px; align-items: center; text-align: left; }
.sa-toast.bb[hidden] { display: none; }
.bb-img { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background: var(--bg-e5e7eb); display: block; } .bb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-n { width: 56px; height: 56px; border-radius: 14px; background: var(--k-ef4444); color: var(--di-turun); display: grid; place-items: center; font-weight: 800; font-size: 20px; }
.bb-b { display: grid; gap: 2px; min-width: 0; }
.bb-top { display: flex; align-items: center; gap: 6px; } .bb-top em { font-style: normal; background: var(--k-ef4444); color: var(--di-turun); border-radius: 5px; padding: 0 6px; font-size: 10.5px; font-weight: 800; } .bb-top small { font-size: 11px; color: var(--tx-6b7280); }
.sa-toast.bb b { font-size: 13.5px; line-height: 1.3; color: var(--ink); }
.bb-t2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bb-t { font-size: 12px; color: var(--tx-374151); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-toast.bb small { font-size: 11.5px; color: var(--tx-4b5563); }
.bb-x { font-style: normal; color: #9AA3AF; font-size: 14px; cursor: pointer; align-self: start; }
@media (max-width: 860px) { .sa-toast.bb { grid-template-columns: 48px minmax(0, 1fr) 18px; } .bb-img, .bb-n { width: 48px; height: 48px; border-radius: 12px; } }
/* kolom kiri Sinyal langsung tampil: tempat disiapkan supaya isi tidak melompat */
@media (min-width: 861px) {
  .tren-side #pm-box { min-height: 118px; }
  .tren-side > .rk { min-height: 150px; }
  .tren-side > .dmp { order: -1; }
}
/* Pengingat berita */
.dmp-next.zone { background: var(--bg-ffedd5); color: var(--tx-7c2d12); border: 1px solid #FDBA74; }
.dmp-next.zone small { color: #C2410C; } .dmp-next.zone b { color: var(--tx-7c2d12); } .dmp-next.zone span { font-size: 12px; color: var(--tx-9a3412); } .dmp-next.zone em { color: #C2410C; }
.dmp.dmp-kosong .an-h { margin-bottom: 0; }
.dmp.dmp-kosong .dmp-none { margin-top: 6px; padding: 8px 12px; font-size: 12.5px; }
@media (max-width: 860px) {
  .dmp { margin: 0 0 12px; padding: 12px 14px; background: var(--bg-fff); border: 1px solid var(--border); border-radius: 18px; }
  .dmp .dmp-list, .dmp .dmp-go { display: none; }
  .dmp .dmp-next { margin-top: 6px; padding: 10px 12px; }
  .dmp.dmp-kosong { padding: 10px 14px; } .dmp.dmp-kosong .an-h { font-size: 12px; }
}
/* status mesin sinyal di kartu kanan */
.s-mesin { margin: 0 0 12px; display: grid; gap: 8px; font-size: 13px; }
.s-mesin[hidden] { display: none; }
.sm-st { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; }
.sm-st i { width: 8px; height: 8px; border-radius: 50%; background: #9AA3AF; flex: none; }
.sm-st.on { color: var(--tx-137a3a); } .sm-st.on i { background: var(--green); }
.sm-st.off { color: var(--tx-4b5563); }
.sm-st.wait { color: var(--tx-4b5563); } .sm-st .sm-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--bd-d1d5db); border-top-color: var(--green); background: none; animation: pd-spin .8s linear infinite; }
@keyframes pd-spin { to { transform: rotate(360deg); } }
.s-mesin p { margin: 0; color: var(--muted); line-height: 1.5; }
.s-mesin .sm-go { justify-self: start; }
.s-mesin .sm-adm { font-size: 12.5px; font-weight: 700; }

/* Tombol mulai analisa Agen AI */
.ai-start{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:8px}
.ai-start p{margin:0;font-size:13px;color:var(--tx-4b5563)}
.ai-start small{font-size:11.5px}
.ai-start .ai-go{border-radius:999px;padding:9px 16px;font-weight:700}
.ai-start.mini{margin:0}

/* Penggaris pip di chart */
.c-zoom .c-rul { display: inline-flex; align-items: center; justify-content: center; }
.c-zoom .c-rul[aria-pressed="true"] { background: var(--green); color: #141921; border-color: var(--green); }
.pane-main .plot.ruling { cursor: crosshair; }
.ruler { position: absolute; inset: 10px 0; pointer-events: none; z-index: 3; }
.ruler .r-box { position: absolute; background: var(--ka-37-198-96-_12); border: 1px dashed var(--ka-37-198-96-_7); }
.ruler.dn .r-box { background: var(--ka-239-68-68-_12); border-color: var(--ka-239-68-68-_7); }
.ruler .r-ln { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ruler .r-ln line { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.ruler .r-lbl { position: absolute; transform: translate(10px, -110%); display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 10px; background: var(--k-25c660); color: #141921; font-size: 12px; white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.ruler.dn .r-lbl { background: var(--k-ef4444); color: var(--di-turun); }
.ruler .r-lbl.bawah { transform: translate(10px, 10%); }
.ruler .r-lbl.kiri { transform: translate(calc(-100% - 10px), -110%); }
.ruler .r-lbl.kiri.bawah { transform: translate(calc(-100% - 10px), 10%); }
.ruler .r-lbl b { font-size: 14px; }
/* Agen AI sedang menganalisa */
.ai-wait { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: var(--bg-f4f5f7); }
.ai-wait > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.ai-wait b { font-size: 13px; }
.ai-wait small { font-size: 12px; color: var(--tx-4b5563); line-height: 1.45; }
.ai-spin { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2.5px solid var(--bd-d1d5db); border-top-color: var(--k-25c660); animation: aiSpin .8s linear infinite; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ai-spin { animation-duration: 2.4s; } }
.ai-wait.gagal { background: var(--bg-fff7ed); }
.ai-wait.gagal b { color: var(--tx-9a3412); }
.ai-wait .ai-t { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: var(--tx-137a3a); }
.ai-wait .ai-t i { font-style: normal; }
/* Arah tren sejati (struktur) */
.at-big { display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 12px 14px; background: var(--bg-f4f5f7); }
.at-big.up { background: var(--bg-e8f8ee); } .at-big.down { background: var(--bg-fee2e2); }
.at-big .at-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; background: var(--bg-d1d5db); color: var(--tx-141921); }
.at-big.up .at-ic, .at-big.down .at-ic { background: none; width: 34px; }
.at-big .at-ic svg { width: 34px; height: 34px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.at-big.up .at-ic svg { stroke: var(--tx-137a3a); } .at-big.down .at-ic svg { stroke: var(--tx-991b1b); }   /* 13 Nov: ikon panah memakai warna tulisannya supaya terbaca di semua pilihan warna */
.at-big > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.at-big b { font-size: 18px; } .at-big.up b { color: var(--tx-137a3a); } .at-big.down b { color: var(--tx-991b1b); }
.at-big small { font-size: 12.5px; color: var(--tx-374151); }
.at-fase { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; border-radius: 14px; padding: 10px 12px; background: var(--bg-f4f5f7); font-size: 12.5px; line-height: 1.5; }
.at-fase.kor { background: var(--bg-fff7ed); border: 1px solid var(--bd-fed7aa); } .at-fase.kor b { color: var(--tx-9a3412); } .at-fase.kor span { color: var(--tx-7c2d12); }
.at-fase b { font-size: 13px; }
.at-rows { margin-top: 6px; display: flex; flex-direction: column; }
.at-rows > div { display: grid; grid-template-columns: 108px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--bd-ecedf0); font-size: 12.5px; }
.at-rows > div:last-child { border-bottom: 0; }
.at-rows span { color: var(--tx-4b5563); } .at-rows i { font-style: normal; font-weight: 700; color: var(--tx-4b5563); }
.at-rows i.up { color: var(--tx-137a3a); } .at-rows i.down { color: var(--tx-b91c1c); }
.at-info { display: block; font-size: 11.5px; color: var(--tx-6b7280); line-height: 1.5; margin-top: 4px; }
.at-old { margin-top: 10px; } .at-old summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--tx-4b5563); padding: 6px 0; }
/* kesiapan berbobot: poin per aturan */
.sz-rules .sz-pt { float: right; font-weight: 700; color: var(--tx-6b7280); font-size: 11.5px; }
.sz-rules li.ok .sz-pt { color: var(--tx-137a3a); }
.sg-now { display: inline-block; background: var(--k-25c660); color: #141921; border-radius: 6px; padding: 1px 8px; margin-right: 6px; font-size: 11.5px; letter-spacing: .04em; }
.sg-lewat { display: inline-block; background: #F59E0B; color: #141921; border-radius: 6px; padding: 1px 8px; margin-right: 6px; font-size: 11.5px; letter-spacing: .04em; }
.s-zone .sz.bobot .sz-set small { display: block; }
.s-zone .sz.bobot .sz-rules { display: flex; flex-direction: column; gap: 0; }
.s-zone .sz.bobot .sz-rules li { padding: 6px 0; border-bottom: 1px solid var(--line, var(--bd-ecedf0)); }
.s-zone .sz.bobot .sz-rules li:last-child { border-bottom: 0; }
/* /bosbesar: kesiapan berbobot */
.ab-bbnote { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--bg-fff7ed); border: 1px solid var(--bd-fed7aa); color: var(--tx-7c2d12); font-size: 12.5px; line-height: 1.5; }
.ab-tag.ab-pakai { background: var(--bg-e8f8ee); color: var(--tx-137a3a); border-radius: 999px; padding: 4px 10px; font-weight: 700; }
.ab-tag.ab-tdk { background: var(--bg-f4f5f7); color: var(--tx-6b7280); border-radius: 999px; padding: 4px 10px; }
.ab-mod.r-tdk .ab-mn b { color: #9CA3AF; }
/* Agen News (sebelum rilis CPI) */
.npre { padding: 20px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.np-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.np-head > b { font-size: 19px; flex: 1 1 260px; }
.np-tag { background: #141921; color: #FACC15; border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; }
.np-cd { background: var(--bg-fee2e2); color: var(--tx-991b1b); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 800; }
.np-hasil { background: var(--bg-e8f8ee); border-radius: 14px; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; }
.np-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.np-grid > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (max-width: 1100px) { .np-grid { grid-template-columns: 1fr; } }
.np-fc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.np-fc > div { background: var(--bg-f4f5f7); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.np-fc span { font-size: 11.5px; color: var(--tx-4b5563); } .np-fc b { font-size: 18px; } .np-fc b.act { color: var(--tx-137a3a); }
.np-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .np-sub b { font-size: 14.5px; } .np-sub small { font-size: 11.5px; color: var(--tx-4b5563); }
.np-bars { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; } .np-bars > span { font-weight: 700; color: var(--tx-4b5563); }
.np-bars > div { display: grid; grid-template-columns: 64px 1fr 64px; gap: 8px; align-items: center; }
.np-bars em { height: 9px; border-radius: 999px; background: var(--bg-eef0f3); position: relative; } .np-bars em i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--k-25c660); }
.np-bars b { text-align: right; }
.np-list > div, .np-area > div:not(.np-lv):not(.np-now) { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid var(--bd-ecedf0); font-size: 12.5px; }
.np-list b.warn { color: #C2410C; }
.np-kosong { font-size: 12.5px; color: var(--tx-4b5563); background: var(--bg-f4f5f7); border-radius: 12px; padding: 10px 12px; margin: 0; }
.np-ai { background: #141921; color: #fff; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.np-ai small { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #FACC15; } .np-ai b { font-size: 15px; line-height: 1.45; } .np-ai span { font-size: 12.5px; color: #D1D5DB; line-height: 1.5; }
.np-fak { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.5; }
.np-fak > div { display: grid; grid-template-columns: 72px 1fr; gap: 8px; }
.np-ef { border-radius: 8px; padding: 2px 6px; font-weight: 800; text-align: center; height: fit-content; background: var(--bg-f4f5f7); color: var(--tx-374151); }
.np-ef.naikkan { background: var(--bg-fee2e2); color: var(--tx-991b1b); } .np-ef.turunkan { background: var(--bg-e8f8ee); color: var(--tx-137a3a); }
.np-tren { display: flex; align-items: center; gap: 12px; background: var(--bg-f4f5f7); border-radius: 16px; padding: 10px 12px; }
.np-tren.up { background: var(--bg-e8f8ee); } .np-tren.down { background: var(--bg-fee2e2); }
.np-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; background: var(--bg-d1d5db); }
.np-tren.up .np-ic { background: var(--k-25c660); } .np-tren.down .np-ic { background: var(--k-ef4444); color: var(--di-turun); }
.np-tren > span:last-child { display: flex; flex-direction: column; } .np-tren small { font-size: 11px; font-weight: 700; color: var(--tx-374151); } .np-tren b { font-size: 16px; }
.np-tren.up b { color: var(--tx-137a3a); } .np-tren.down b { color: var(--tx-991b1b); }
.np-area { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; } .np-area > b { font-size: 14.5px; }
.np-lv { display: flex; justify-content: space-between; gap: 8px; border-radius: 12px; padding: 9px 12px; background: var(--bg-f4f5f7); flex-wrap: wrap; }
.np-lv.r { background: var(--bg-fee2e2); color: var(--tx-7f1d1d); } .np-lv.s { background: var(--bg-e8f8ee); color: var(--k-14532d); } .np-lv.z { background: var(--bg-fff); border: 2px solid var(--k-25c660); }
.np-now { text-align: center; font-weight: 700; color: var(--tx-4b5563); }
.np-sk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 800px) { .np-sk { grid-template-columns: 1fr; } }
.np-sk > div { border-radius: 16px; padding: 12px 14px; background: var(--bg-f4f5f7); display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.55; }
.np-sk > div.a { background: var(--bg-fff7ed); border: 1px solid var(--bd-fed7aa); } .np-sk > div.a b { color: var(--tx-9a3412); }
.np-entry { border: 1px solid var(--bd-ecedf0); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.np-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .np-3 { grid-template-columns: 1fr; } }
.np-3 > div { border-radius: 14px; padding: 11px 13px; background: var(--bg-f4f5f7); display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; line-height: 1.5; }
.np-3 > div.g { background: var(--bg-e8f8ee); } .np-3 > div.g > b { color: var(--tx-137a3a); }
.np-3 > div.o { background: var(--bg-fff7ed); border: 1px solid var(--bd-fed7aa); color: var(--tx-7c2d12); } .np-3 > div.o > b { color: var(--tx-9a3412); }
.np-3 > div > b { font-size: 13.5px; }
.np-cat { font-size: 12px; color: var(--tx-4b5563); }
.np-hati { background: #141921; color: #fff; border-radius: 14px; padding: 10px 14px; font-size: 13px; line-height: 1.5; } .np-hati b { color: #FACC15; }
.np-cdw { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .np-cdw small { font-size: 11px; font-weight: 700; color: var(--tx-4b5563); }
.np-cd.run { background: var(--k-25c660); color: #141921; font-size: 22px; font-variant-numeric: tabular-nums; padding: 4px 14px; letter-spacing: .02em; }
.np-ulang { align-self: flex-start; }
.ab-salin { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; font-size: 12.5px; } .ab-salin select { height: 32px; border-radius: 10px; border: 1px solid var(--bd-d1d5db); padding: 0 8px; font: inherit; }
.np-fcsrc { font-size: 11.5px; color: var(--tx-4b5563); }
.np-fcadm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; } .np-fcadm input { width: 90px; height: 32px; border: 1px solid var(--bd-d1d5db); border-radius: 10px; padding: 0 8px; font: inherit; }
.sz-tutup { display: block; font-size: 11px; color: var(--tx-6b7280); margin-top: 4px; }
.at-catatan { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--tx-9a3412); background: var(--bg-fff7ed); border-radius: 10px; padding: 7px 10px; }

/* alasan sinyal (kenapa arah ini, kenapa area ini, TP dari mana) */
.sg-kn{margin:8px 0 6px;padding-left:18px;display:grid;gap:3px}.sg-kn li{font-size:12.5px;line-height:1.4}.sg-kn-b{display:block;font-size:12px;opacity:.75}

/* notifikasi kecil saat sinyal menyentuh TP1 / TP2 / SL (15 detik, tidak menutupi apa pun) */
.sg-toast{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;margin:10px 0 4px;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.35;border:1px solid var(--border-2);background:var(--bg-ecfdf3);color:var(--k-14532d);animation:sgToastIn .35s ease-out}
.sg-toast[hidden]{display:none}
.sg-toast.sl{background:var(--bg-fef2f2);color:var(--tx-7f1d1d)}
.sg-toast b{font-weight:700}
.sg-toast .sg-toast-ic{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color: var(--di-naik);background:var(--k-16a34a);animation:sgToastPop .5s ease-out}
.sg-toast.sl .sg-toast-ic{background:var(--k-dc2626)}
.sg-toast::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:currentColor;opacity:.35;transform-origin:left;animation:sgToastBar 15s linear forwards}
@keyframes sgToastIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes sgToastPop{0%{transform:scale(.4)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes sgToastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.sg-toast,.sg-toast .sg-toast-ic{animation:none}}
/* /bosbesar › Riwayat sinyal (satu kartu) */
.rw .h2-row { flex-wrap: wrap; gap: 8px; }
.rw-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .rw-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rw-pip { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; margin: 0; }
.rw-pp { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rw-s { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--bg-f1f1f1); color: var(--muted); }
.rw-s.tunggu { background: var(--bg-fef6e4); color: var(--tx-92400e); }
.rw-s.aktif { background: var(--bg-e8f0fe); color: #1D4ED8; }
.rw-s.tp { background: var(--green-tint); color: var(--green-t); }
.rw-s.sl { background: var(--red-tint); color: var(--red); }
.rw .ts-table table { min-width: 0; }
.rw .ts-table th, .rw .ts-table td { padding-left: 6px; padding-right: 6px; }
.rw .ts-table td:first-child, .rw .ts-table th:first-child { padding-left: 2px; }
.rw .ts-table td small { font-size: 11px; }
.rw-act { text-align: right; white-space: nowrap; }
.rw-b { padding: 4px 9px; min-height: 0; font-size: 12.5px; }
.rw-sub { display: block; margin-top: 14px; font-size: 13px; }

.sg-prog { display: block; margin-bottom: 6px; padding: 5px 9px; border-radius: 8px; background: var(--green-tint); color: var(--green-t); font-size: 13px; }
.sg-prog b { margin-right: 6px; }

/* gelombang 1: zona stabil (zona yang sudah disentuh / selesai digambar redup) + kotak posisi sinyal */
.be-box.zs-redup { opacity: .22; } .be-box.ext.zs-redup { opacity: .1; } .be-hl.zs-redup { opacity: .35; }
.be-pos { position: absolute; right: 0; pointer-events: none; box-sizing: border-box; }
.be-pos.tp { background: var(--ka-37-198-96-_2); border: 1px solid var(--ka-37-198-96-_7); }
.be-pos.sl { background: var(--ka-240-97-109-_22); border: 1px solid var(--ka-240-97-109-_7); }
.be-pos.tunggu { border-style: dashed; }
.be-pos.tp.tunggu { background: var(--ka-37-198-96-_07); } .be-pos.sl.tunggu { background: var(--ka-240-97-109-_08); }
.be-pos span { position: absolute; left: 6px; font: 700 10px/1 Consolas, ui-monospace, monospace; color: var(--k-effff5); text-shadow: 0 0 3px #000; white-space: nowrap; }
.be-pos.sl span { color: var(--k-ffd9d4); }
.be-pos span.at { top: 4px; } .be-pos span.bw { bottom: 4px; }
.chart-card.hz-sigb .be-pos.buy, .chart-card.hz-sigs .be-pos.sell { display: none; }

/* Setup Meter: tanda lawan tren & setup melemah */
.sg-lt, .rw-lt { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .3px; padding: 2px 7px; border-radius: 999px; background: var(--bg-fef3c7); color: var(--tx-92400e); }
.sg-lm { color: var(--tx-b45309); } .rw-lm { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--bg-ffedd5); color: var(--tx-9a3412); }
.sz-note.sz-lt { background: var(--bg-fffbeb); border: 1px solid var(--bd-fde68a); color: var(--tx-78350f); }
.sz-ket { color: var(--tx-6b7280); font-weight: 500; }
.sg-toast.lm { background: var(--bg-fff7ed); color: var(--tx-7c2d12); }

.sg-meter { margin-top: 10px; border: 1px solid var(--bd-e5e7eb); border-radius: 14px; padding: 8px 12px; background: var(--bg-fff); }
.sg-meter summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--tx-374151); padding: 4px 0; }
.sg-meter small { display: block; font-size: 11.5px; color: var(--tx-6b7280); line-height: 1.5; margin-top: 6px; }
.sg-meter .sz-rules li { position: relative; padding-right: 54px; } .sg-meter .sz-pt { position: absolute; right: 0; }

/* status jarak di kartu zona pantau */
.sz-jr { margin: 8px 0; border-radius: 12px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--bd-e5e7eb); background: var(--bg-f4f5f7); }
.sz-jr b { font-size: 13.5px; color: var(--tx-141921); } .sz-jr span { font-size: 12.5px; color: var(--tx-4b5563); }
.sz-jr.dekat { background: var(--bg-fffbeb); border-color: var(--bd-fde68a); } .sz-jr.dekat b, .sz-jr.dekat span { color: var(--tx-78350f); }
.sz-jr.masuk { background: var(--bg-e8f8ee); border-color: var(--k-25c660); } .sz-jr.masuk b, .sz-jr.masuk span { color: var(--tx-137a3a); }

/* sinyal menunggu yang meternya turun + kartu zona pantau berikutnya */
.sg-tn { display: block; margin-top: 6px; padding: 7px 10px; border-radius: 10px; background: var(--bg-fffbeb); border: 1px solid var(--bd-fde68a); color: var(--tx-78350f); }
.sg-next { margin-top: 10px; border: 1px solid var(--bd-e5e7eb); border-radius: 14px; padding: 10px 12px; background: var(--bg-fff); display: flex; flex-direction: column; gap: 8px; }
.sg-next-h { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--tx-6b7280); }
.sg-next-h b { font-size: 11px; padding: 2px 9px; border-radius: 999px; color: #fff; letter-spacing: 0; } .sg-next-h b.buy { background: var(--k-16a34a); } .sg-next-h b.sell { background: var(--k-dc2626); }
.sg-next-p { border-radius: 12px; padding: 7px 12px; } .sg-next-p.buy { background: var(--bg-e8f8ee); } .sg-next-p.sell { background: var(--bg-fee2e2); }
.sg-next-p div { display: flex; justify-content: space-between; align-items: baseline; } .sg-next-p span { font-size: 12px; color: var(--tx-4b5563); } .sg-next-p b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sg-next-p.buy b { color: var(--tx-137a3a); } .sg-next-p.sell b { color: var(--tx-991b1b); }
.sg-next .sz-jr { margin: 0; }
.sg-next-m { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 700; } .sg-next-m b { font-size: 15px; color: var(--tx-137a3a); }
.sg-next .meter { display: block; height: 6px; border-radius: 999px; background: var(--bg-ecedf0); overflow: hidden; } .sg-next .meter i { display: block; height: 100%; background: var(--k-25c660); }

/* sinyal SELL: kepala kartu merah */
.sg-hero.sell { background: var(--k-e5484d); color: var(--di-turun); }
.sg-hero.sell .sym, .sg-hero.sell .status, .sg-hero.sell .sg-entry span, .sg-hero.sell .sg-entry b { color: #fff; }
.sg-hero.sell .status .dot { background: var(--bg-fff); }
.sg-hero.sell .badge { background: var(--bg-fff) !important; color: var(--tx-b91c1c) !important; }

/* kartu info sinyal hilang */
.sg-hilang { margin: 10px 0 4px; background: var(--bg-fffbeb); border: 1px solid var(--bd-fde68a); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; color: var(--tx-78350f); font-size: 12.5px; line-height: 1.45; }
.sg-hilang[hidden] { display: none; }
.sg-hl-j { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .sg-hl-j b { font-size: 14px; font-weight: 800; } .sg-hl-j small { font-size: 12px; white-space: nowrap; }
.sg-hilang p { margin: 0; } .sg-hilang ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.sg-hl-a { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.sg-hl-a button { font: inherit; font-size: 12px; font-weight: 700; border: 1px solid var(--bd-fde68a); background: var(--bg-fff); color: var(--tx-141921); border-radius: 999px; padding: 4px 12px; cursor: pointer; }

/* kartu info: SL dan TP masih bisa berubah selama menunggu */
.sg-tpinfo { margin: 10px 0 6px; background: var(--bg-eff6ff); border: 1px solid var(--bd-bfdbfe); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; color: var(--tx-1e3a8a); font-size: 12.5px; line-height: 1.45; }
.sg-tpinfo[hidden] { display: none; } .sg-tpinfo b { font-size: 13px; font-weight: 800; }

/* hitung mundur candle (seperti MT5): kapsul kecil di dalam chart, ujung kanan garis harga, di kiri label harga */
.ax-cd { position: absolute; right: 4px; transform: translateY(-50%); height: 16px; line-height: 16px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: #E5E7EB; background: #2A313C; z-index: 6; pointer-events: none; }
.ax-cd:empty, .ax-cd[hidden] { display: none; }

/* Kartu "Alert indikator" dihapus dari halaman Sinyal (keputusan user 12 Nov). Elemennya dibiarkan ada supaya skrip lama tidak galat; alert tetap masuk ke lonceng. */
.ax-ev { display: none !important; }

/* lipatan Rincian Setup Meter di kartu zona pantau */
.sz-fold { margin-top: 8px; border: 1px solid var(--bd-e5e7eb); border-radius: 12px; padding: 6px 12px; background: var(--bg-fff); }
.sz-fold summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--tx-374151); padding: 4px 0; }
.sz-fold-k { display: block; font-size: 11.5px; color: var(--tx-6b7280); line-height: 1.5; margin: 6px 0 2px; }

/* kotak sinyal di ruang kosong kanan chart: teks boleh turun baris */
.be-pos span { right: 4px; white-space: normal; line-height: 1.25; }
.be-pos span.at, .be-pos span.bw { top: 50%; bottom: auto; transform: translateY(-50%); }   /* teks di tengah kotak supaya tidak menimpa tulisan garis Entry / SL / TP di tepinya */

/* info high risk untuk sinyal lawan tren */
.sg-hr { display: block; margin-top: 6px; padding: 7px 10px; border-radius: 10px; background: var(--bg-fef2f2); border: 1px solid var(--bd-fecaca); color: var(--tx-7f1d1d); }

/* kotak teks kartu sinyal versi ringkas */
.sg-st { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.sg-in { display: block; margin-top: 3px; }
.sg-step .sg-tn, .sg-step .sg-hr { margin-top: 7px; }
.sg-knp { margin-top: 8px; border-top: 1px solid rgba(124, 58, 237, .25); padding-top: 6px; }
.sg-knp summary { cursor: pointer; font-weight: 700; font-size: 12.5px; color: var(--tx-4b5563); }
.sg-knp .sg-kn { margin-top: 6px; }

/* Riwayat admin: pilih banyak lalu hapus */
.rw-cb { width: 28px; text-align: center; } .rw-cb input { width: 16px; height: 16px; cursor: pointer; }
tr.rw-sel td { background: var(--bg-fff7f7); }
.rw-pilih { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg-fef2f2); border: 1px solid var(--bd-fecaca); border-radius: 12px; padding: 8px 12px; margin: 8px 0; color: var(--tx-7f1d1d); font-weight: 700; font-size: 13px; }
.rw-pilih[hidden] { display: none; } .rw-pilih > span:last-child { display: flex; gap: 6px; }
.rw-pilih-hapus { background: var(--k-dc2626); color: var(--di-turun); border: 0; }

/* kartu Zona terdekat (kolom kiri; HP: di bawah Ringkasan analisa) */
.zt { margin: 4px 0 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-fff); display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.45; }
.zt[hidden] { display: none !important; }
.tren-side > .zt { margin: 0; border-radius: var(--radius); padding: 12px; }
.zt-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.zt-h b { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .zt-h span { font-size: 12px; font-weight: 600; color: var(--muted); }
.zt-1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.zt-nm { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--tx-141921); }
.zt-ar { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; color: #fff; margin-right: 2px; } .zt-ar.buy { background: var(--k-16a34a); color: var(--di-naik); } .zt-ar.sell { background: var(--k-dc2626); color: var(--di-turun); }
.zt-pc { font-size: 15px; font-weight: 800; } .zt-pc.ok { color: var(--tx-137a3a); } .zt-pc.no { color: var(--tx-b91c1c); }
.zt-2 { color: var(--tx-4b5563); }
.zt-st { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; } .zt-st.ya { background: var(--bg-e8f8ee); color: var(--tx-137a3a); } .zt-st.tdk { background: var(--bg-f4f5f7); color: var(--tx-4b5563); border: 1px solid var(--bd-e5e7eb); }
.zt details > summary { cursor: pointer; font-weight: 700; color: var(--tx-4b5563); }
.zt-r { border-top: 1px solid var(--bd-ecedf0); padding-top: 9px; margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.zt-rin .sz-rules { margin-top: 6px; } .zt-rin .sz-rules li { position: relative; padding-right: 52px; } .zt-rin .sz-pt { position: absolute; right: 0; }

/* kepala kartu zona berikutnya: tanda BUY/SELL AREA tidak boleh turun baris atau tertimpa judul */
.sg-next-h { gap: 8px; } .sg-next-h span { min-width: 0; } .sg-next-h b { white-space: nowrap; flex: none; }

.zt-rin .sz-rules { list-style: none; padding-left: 0; margin-bottom: 0; }

/* Zona terdekat: tombol besar "Lihat zona lainnya" + tautan kecil "Rincian" per zona */
.zt-tbl { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 40px; font: inherit; font-size: 13px; font-weight: 800; color: var(--tx-141921); background: var(--bg-f4f5f7); border: 1px solid var(--bd-e5e7eb); border-radius: 10px; padding: 9px 12px; cursor: pointer; }
.zt-tbl:hover { background: var(--bg-ecedf0); } .zt-tbl:focus-visible, .zt-rnc:focus-visible { outline: 2px solid #1D4ED8; outline-offset: 2px; }
.zt-rnc { font: inherit; font-size: 12px; font-weight: 700; color: #1D4ED8; text-decoration: underline; background: none; border: 0; padding: 4px 0 4px 8px; cursor: pointer; white-space: nowrap; flex: none; }
.zt-3 { align-items: flex-start; flex-wrap: nowrap; } .zt-3 > .zt-2 { min-width: 0; }
.zt-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.zt-r.zt-r0 { border-top: 0; padding-top: 0; margin-top: 0; }
ul.zt-rin { list-style: none; padding-left: 0; margin: 4px 0 0; } ul.zt-rin li { position: relative; padding-right: 52px; } ul.zt-rin .sz-pt { position: absolute; right: 0; }

/* RIWAYAT-CHART: riwayat sinyal di chart seperti riwayat order MT5 (khusus admin) */
.rwc-btn { position: absolute; top: 6px; right: 76px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; flex: none; align-self: center; height: 34px; padding: 0 11px; border-radius: 999px; border: 1px solid #5f5222; background: rgba(250,204,21,.1); color: #FACC15; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; opacity: .55; }
.chart-head .rwc-btn { position: static; }
.rwc-btn[aria-pressed="true"] { opacity: 1; background: #FACC15; color: #1F1A05; border-color: #FACC15; }
.rwc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tf-tiny .rwc-btn span { display: none; } .tf-tiny .rwc-btn { width: 34px; padding: 0; justify-content: center; }
.rwc-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: hidden; }
.rwc-svg line { stroke-width: 1.4; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; fill: none; }
.rwc-svg line.u { stroke: var(--k-34d399); } .rwc-svg line.r { stroke: var(--k-f87171); }
.rwc-ar, .rwc-xk { position: absolute; z-index: 5; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; width: 22px; height: 22px; transform: translate(-50%, -50%); }
.rwc-ar::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; transform: translate(-50%, -50%); }
.rwc-ar.b::before { border-bottom: 10px solid #60A5FA; } .rwc-ar.s::before { border-top: 10px solid var(--k-f87171); }
.rwc-xk::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--k-34d399); background: #141922; transform: translate(-50%, -50%); }
.rwc-xk.r::before { border-color: var(--k-f87171); }
.rwc-ar:focus-visible, .rwc-xk:focus-visible { outline: 2px solid #fff; border-radius: 50%; }
.rwc-lb { position: absolute; z-index: 5; font-size: 10px; font-weight: 800; line-height: 15px; padding: 0 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; transform: translate(9px, -50%); }
.rwc-lb.ki { transform: translate(calc(-100% - 9px), -50%); }
.rwc-lb.u { background: var(--k-12301f); color: var(--k-7ce3a2); } .rwc-lb.r { background: #3A1A1A; color: var(--k-fca5a5); }
.rwc-pop { position: absolute; z-index: 7; display: flex; flex-direction: column; gap: 2px; width: 206px; box-sizing: border-box; background: var(--bg-f9fafb); color: var(--tx-141921); border-radius: 10px; padding: 9px 11px; font-size: 11.5px; line-height: 1.45; box-shadow: 0 6px 18px rgba(0,0,0,.45); transform: translateY(14px); }
.rwc-pop.at { transform: translateY(calc(-100% - 14px)); }
.rwc-pop b { font-size: 12.5px; } .rwc-pop .u { color: var(--k-047857); font-weight: 800; } .rwc-pop .r { color: var(--tx-b91c1c); font-weight: 800; } .rwc-pop small { color: var(--tx-6b7280); font-size: 10.5px; }

/* PIP BERJALAN: untung/rugi sementara sesudah sinyal aktif (kepala kartu sinyal + kapsul di garis Entry chart) */
.sg-pl { position: absolute; z-index: 1; right: 18px; bottom: 16px; display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding: 5px 10px; border-radius: 12px; background: var(--bg-fff); max-width: 48%; }
.sg-pl b { font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .sg-pl small { font-size: 11px; font-weight: 700; color: var(--tx-4b5563); }
.sg-pl.u b { color: var(--k-0e7a3b); } .sg-pl.r b { color: var(--tx-b91c1c); }
.be-en-t .be-pl { display: inline-block; font: 800 11px/16px Inter, system-ui, sans-serif; padding: 0 7px; border-radius: 999px; text-shadow: none; vertical-align: middle; }
.be-pl.u { background: var(--k-22c55e); color: var(--k-06280f); } .be-pl.r { background: var(--k-ef4444); color: var(--di-turun); }

/* TAHAP 2B: kartu Pantau TP3 + Strong Meter, nomor sinyal, banner alert */
.sg-no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #141921; color: #fff; font-size: 12px; font-weight: 800; flex: none; }
.sg-no[hidden] { display: none; }
.sg-hero.sell .sg-no { background: var(--bg-fff); color: var(--tx-b91c1c); }
.sg-tp3 { margin: 10px 0 4px; border: 1px solid var(--border-2, var(--bd-e5e7eb)); border-radius: 18px; background: var(--bg-fff); color: var(--tx-141921); }
.sg-tp3[hidden] { display: none; }
.sg-tp3 .t3-d > summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; font-size: 13.5px; }
.sg-tp3 .t3-d > summary::-webkit-details-marker { display: none; }
.sg-tp3 .t3-d > summary::after { content: "▾"; margin-left: auto; color: var(--tx-6b7280); font-size: 12px; }
.sg-tp3 .t3-d[open] > summary::after { content: "▴"; }
.sg-tp3 .t3-d > summary:focus-visible { outline: 2px solid #1D4ED8; outline-offset: 2px; border-radius: 12px; }
.sg-tp3 .t3-s { font-size: 12.5px; font-weight: 700; color: var(--tx-4b5563); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-tp3 .t3-d > summary b, .sg-tp3 .t3-d > summary .badge { flex: none; }
.sg-tp3 .t3-d[open] .t3-s { display: none; }
.sg-tp3 .t3-d > *:not(summary) { margin: 0 14px 12px; }
.sg-tp3 .t3-m { border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--bg-e8f8ee); color: var(--tx-137a3a); }
.sg-tp3 .t3-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sg-tp3 .t3-h span { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; } .sg-tp3 .t3-h b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sg-tp3 .t3-m .meter { height: 6px; border-radius: 999px; background: rgba(0,0,0,.1); overflow: hidden; } .sg-tp3 .t3-m .meter i { display: block; height: 100%; border-radius: 999px; background: var(--k-16a34a); }
.sg-tp3 .t3-m p { margin: 0; font-size: 12.5px; line-height: 1.45; }
.sg-tp3.lemah .t3-m { background: var(--bg-fffbeb); color: var(--tx-78350f); border: 1px solid var(--bd-fde68a); } .sg-tp3.lemah .t3-m .meter i { background: #D97706; }
.sg-tp3.alert .t3-m { background: var(--bg-fee2e2); color: var(--tx-991b1b); border: 1px solid var(--k-dc2626); } .sg-tp3.alert .t3-m .meter i { background: var(--k-dc2626); }
.sg-tp3.tunggu .t3-m { background: var(--bg-f4f5f7); color: var(--tx-4b5563); }
.sg-tp3 .t3-pl { display: flex; flex-direction: column; } .sg-tp3 .t3-pl b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; } .sg-tp3 .t3-pl small { font-size: 12px; color: var(--tx-4b5563); }
.sg-tp3 .t3-pl.u b { color: var(--k-0e7a3b); } .sg-tp3 .t3-pl.r b { color: var(--tx-b91c1c); }
.sg-tp3 .t3-r { list-style: none; margin: 6px 0 4px; padding: 0; } .sg-tp3 .t3-r li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--bd-e5e7eb); font-size: 12.5px; }
.sg-tp3 .t3-r li span { display: flex; flex-direction: column; min-width: 0; } .sg-tp3 .t3-r small { color: var(--tx-6b7280); font-size: 12px; } .sg-tp3 .t3-r em { font-style: normal; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg-tp3 .sg-meter small { display: block; color: var(--tx-6b7280); font-size: 12px; margin-top: 4px; }
.sg-a3.alert { background: var(--bg-fee2e2); border-color: var(--k-dc2626); color: var(--tx-7f1d1d); }
.pd-banner { position: fixed; z-index: 9999; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); width: min(440px, calc(100vw - 24px)); transform: translate(-50%, -160%); transition: transform .35s cubic-bezier(.2,.9,.3,1.1); display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border: 0; border-radius: 20px; background: rgba(20,25,33,.96); color: #fff; font: inherit; box-shadow: 0 12px 34px rgba(0,0,0,.35); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.pd-banner.on { transform: translate(-50%, 0); }
.pd-banner i { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--k-dc2626); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 18px; }
.pd-banner span { display: flex; flex-direction: column; min-width: 0; } .pd-banner b { font-size: 14px; } .pd-banner small { font-size: 12.5px; color: #D1D5DB; }
.pd-banner:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pd-banner { transition: none; } }
.be-no { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: var(--bg-f9fafb); color: var(--tx-141921); font: 800 11px/18px Inter, system-ui, sans-serif; text-align: center; font-style: normal; }
.be-pos.t3 { background: var(--ka-37-198-96-_28); }

/* PENGINGAT BERITA MELAYANG (HP): tombol di tepi kanan + pop-up */
.dmp-fab { position: fixed; z-index: 49; right: 0; bottom: calc(var(--tab-h, 64px) + 150px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 11px; border: 0; border-radius: 20px 0 0 20px; background: #141921; color: #fff; font: inherit; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 6px 16px rgba(0,0,0,.28); cursor: pointer; }
.dmp-fab[hidden], .dmp-pop[hidden] { display: none; }
.dmp-fab i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: #FBBF24; color: #141921; display: grid; place-items: center; font-size: 12px; }
.dmp-fab.merah { background: var(--k-dc2626); } .dmp-fab.merah i { background: var(--bg-fff); color: var(--k-dc2626); }
.dmp-fab:focus-visible, .dmp-pop-x:focus-visible { outline: 2px solid #1D4ED8; outline-offset: 2px; }
.dmp-pop { position: fixed; inset: 0; z-index: 120; background: rgba(10,13,18,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dmp-pop-k { position: relative; width: min(420px, 100%); max-height: 80vh; overflow: auto; background: var(--bg-fff); border-radius: 20px; padding: 14px 14px 12px; box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.dmp-pop-x { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--bg-f4f5f7); color: var(--tx-141921); font-size: 14px; font-weight: 800; cursor: pointer; z-index: 1; }
.dmp-pop-b .dmp { margin: 0; border: 0; padding: 0; box-shadow: none; background: none; }
.dmp-pop-b .dmp .an-h { padding-right: 40px; }
@media (min-width: 861px) { .dmp-fab { bottom: 104px; height: 44px; font-size: 13px; } }
.dmp-fab.sepi { background: #4B5563; } .dmp-fab.sepi i { background: #9CA3AF; color: #141921; }

/* RINGKASAN ANALISA baru: Technical · Berita · Plan */
.rk-sym { font-size: 12px; color: var(--muted); font-weight: 600; }
.rk3 { display: flex; flex-direction: column; }
.rk3 > div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.45; }
.rk3 > div:first-child { border-top: 0; padding-top: 4px; } .rk3 > div:last-child { padding-bottom: 2px; }
.rk3 .rk-k { font-size: 11px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding-top: 2px; }
.rk3 .rk-v { min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.rk-im { display: flex; gap: 6px; flex-wrap: wrap; } .rk-im i { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.rk-im .n { background: var(--bg-e8f8ee); color: var(--tx-137a3a); } .rk-im .t { background: var(--bg-fee2e2); color: var(--tx-991b1b); } .rk-im .z { background: var(--bg-f4f5f7); color: var(--tx-5b6472); border: 1px solid var(--bd-d9dee6); }
.rk-pl { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .3px; padding: 2px 10px; border-radius: 999px; background: #141921; color: #fff; }
.rk-pl.hj { background: var(--k-16a34a); } .rk-pl.kn { background: #FBBF24; color: #141921; } .rk-pl.mr { background: var(--k-dc2626); }
.rk-wr { color: var(--tx-92400e); font-weight: 600; }
/* tab Analisa dihapus: tab yang tersisa membagi lebar sama rata, berapa pun jumlahnya */
.sig-tabs { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

/* PANEL ADMIN › ATURAN SINYAL (tahap 2C) */
.as-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.as-k { border: 1px solid var(--border); border-radius: 16px; background: var(--bg-fff); min-width: 0; }
.as-k.buka { border-color: #1D4ED8; } .as-k.mati { opacity: .55; }
.as-h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; border-radius: 16px; color: inherit; }
.as-h:disabled { cursor: default; } .as-h:focus-visible { outline: 2px solid #1D4ED8; outline-offset: 2px; }
.as-h i { font-style: normal; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--bg-f4f5f7); border: 1px solid var(--border); }
.as-h b { font-size: 14px; flex: none; } .as-h span { margin-left: auto; font-size: 12.5px; color: var(--muted); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.as-b { border-top: 1px solid var(--border); padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.as-i { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.as-i > span:first-child { display: flex; flex-direction: column; min-width: 0; } .as-i b { font-size: 13.5px; } .as-i small { color: var(--muted); font-size: 12.5px; line-height: 1.4; } .as-i small em { font-style: normal; color: var(--tx-92400e); font-weight: 600; }
.as-n { display: inline-flex; align-items: center; gap: 6px; } .as-n em { font-style: normal; font-size: 12px; color: var(--muted); min-width: 62px; }
.as-n input, .as-bb input, .as-tb input { width: 84px; font: inherit; font-weight: 800; font-size: 14px; text-align: center; padding: 7px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-f4f5f7); font-variant-numeric: tabular-nums; }
.as-sak { width: 22px; height: 22px; accent-color: var(--k-16a34a); }
.as-lj { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; } .as-lj summary { cursor: pointer; font-weight: 700; font-size: 13px; padding: 2px 0; }
.as-bb { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 16px; margin-top: 10px; } .as-bb label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.as-tb input { width: 70px; } .as-jml { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--tx-137a3a); } .as-jml.salah, .as-tb b.salah { color: var(--tx-b91c1c); }
.as-t { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .as-p { font-size: 12.5px; font-weight: 700; color: var(--tx-137a3a); }
.as-c { margin: 0; font-size: 12.5px; color: var(--muted); }
.as-ch { display: flex; flex-wrap: wrap; gap: 6px; } .as-f { display: flex; gap: 8px; flex-wrap: wrap; } .as-f select { font: inherit; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-fff); }
.as-kd { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .as-kd div { background: var(--bg-f4f5f7); border-radius: 10px; padding: 8px 10px; } .as-kd span { display: block; font-size: 11.5px; color: var(--muted); } .as-kd b { font-size: 14px; font-variant-numeric: tabular-nums; }
.as-ls { list-style: none; margin: 0; padding: 0; } .as-ls li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.as-ls li span { display: flex; flex-direction: column; min-width: 0; } .as-ls small { color: var(--muted); font-size: 12.5px; } .as-ls em { font-style: normal; font-weight: 700; color: var(--muted); white-space: nowrap; } .as-ls em.ok { color: var(--tx-137a3a); }
.as-lama { margin-top: 12px; } .as-lama > summary { cursor: pointer; font-weight: 700; font-size: 13.5px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-fff); }
.as-lama[open] > summary { margin-bottom: 12px; } .as-lama > summary:focus-visible { outline: 2px solid #1D4ED8; outline-offset: 2px; }
/* Coba dulu (T-036): hasil uji sementara di dalam kartu */
.as-cp { align-items: center; } .as-cd:empty { display: none; } .as-cd { display: flex; flex-direction: column; gap: 8px; }
.as-cd .as-c.salah { color: var(--tx-b91c1c); font-weight: 700; } .as-ct th, .as-ct td { white-space: nowrap; padding: 8px 6px; font-size: 12.5px; } .as-ct td:first-child { white-space: normal; } .as-ct .pos { color: var(--tx-137a3a); font-weight: 700; } .as-ct .neg { color: var(--tx-b91c1c); font-weight: 700; } .as-ct .as-sel td { border-top: 2px solid var(--border); font-weight: 700; }
@media (max-width: 520px) { .as-i { grid-template-columns: 1fr; } .as-h span { display: none; } }

/* PANEL ADMIN › AGEN AI (tahap 2D): daftar agen + saklar */
.ag-list { margin-top: 10px; display: flex; flex-direction: column; }
.ag-r { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 13.5px; cursor: pointer; } .ag-r:first-child { border-top: 0; }
.ag-r span { display: flex; flex-direction: column; min-width: 0; } .ag-r small { color: var(--muted); font-size: 12.5px; } .ag-r em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.ag-r.off b { color: var(--muted); }
.ag-sw { appearance: none; -webkit-appearance: none; flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--bg-d9dee6); position: relative; cursor: pointer; margin: 0; transition: background .15s; }
.ag-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-fff); transition: transform .15s; }
.ag-sw:checked { background: var(--k-16a34a); } .ag-sw:checked::after { transform: translateX(16px); }
.ag-sw:focus-visible { outline: 2px solid #1D4ED8; outline-offset: 2px; } .ag-sw:disabled { opacity: .5; }
@media (max-width: 520px) { .ag-r { flex-wrap: wrap; } .ag-r em { margin-left: 52px; width: 100%; text-align: left; } }
@media (prefers-reduced-motion: reduce) { .ag-sw, .ag-sw::after { transition: none; } }

/* SESI PASAR (tahap 2D): kartu + kapsul dan garis di chart */
.ss-card { margin: 4px 0 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-fff); display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.45; }
.ss-card[hidden] { display: none; }
.ss-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .ss-h b { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .ss-h span { font-size: 12px; font-weight: 600; color: var(--muted); }
.ss-now { border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--bg-f4f5f7); border: 1px solid var(--bd-d9dee6); } .ss-now b { font-size: 13.5px; }
.ss-now.awas { background: var(--bg-fffbeb); border-color: var(--bd-fde68a); color: var(--tx-78350f); } .ss-now.ramai { background: var(--bg-e8f8ee); border-color: var(--k-16a34a); color: var(--tx-137a3a); } .ss-now.sepi { color: var(--tx-5b6472); }
.ss-l { list-style: none; margin: 0; padding: 0; } .ss-l li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); } .ss-l li:first-child { border-top: 0; }
.ss-l span { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; } .ss-l span.jl { color: var(--tx-137a3a); font-weight: 700; } .ss-card small { color: var(--muted); font-size: 11.5px; }
.ss-cap { position: absolute; left: 8px; top: 6px; z-index: 4; font-size: 11px; font-weight: 800; color: var(--tx-141921); background: var(--bg-e5e7eb); border-radius: 999px; padding: 3px 10px; pointer-events: none; white-space: nowrap; }
.ss-cap small { font-weight: 700; opacity: .8; font-size: 10.5px; } .ss-cap.awas { background: #FBBF24; } .ss-cap.ramai { background: var(--k-34d06f); } .ss-cap.sepi { background: #9CA3AF; }
.ss-ln { position: absolute; left: 0; right: 0; border-top: 1px dashed #93C5FD; opacity: .7; pointer-events: none; z-index: 1; } .ss-ln.k { border-color: #FBBF24; }
.ss-tx { position: absolute; left: 8px; z-index: 2; font-size: 11px; font-weight: 700; color: #93C5FD; transform: translateY(-115%); white-space: nowrap; pointer-events: none; text-shadow: 0 0 3px #000; } .ss-tx.k { color: #FBBF24; }
.ss-box { position: absolute; background: rgba(147,197,253,.07); border: 1px dashed rgba(147,197,253,.5); border-radius: 3px; box-sizing: border-box; pointer-events: none; z-index: 0; }
.ss-tx.bw { transform: translateY(15%); } .ss-ln { opacity: .45; }

/* PANEL ADMIN: isi "Lanjutan" sebagai daftar rapi (admin-lipat.js) */
.as-lama[open] { display: flex; flex-direction: column; gap: 12px; } .as-lama[open] > summary { margin-bottom: 0; }
.as-lama > .card { margin: 0; }
.lj-list { display: flex; flex-direction: column; gap: 8px; }
.lj-it { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-fff); min-width: 0; }
.lj-it[open] { border-color: #1D4ED8; }
.lj-it > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; border-radius: 14px; }
.lj-it > summary::-webkit-details-marker { display: none; }
.lj-it > summary::after { content: "▸"; margin-left: auto; color: var(--muted); font-size: 12px; } .lj-it[open] > summary::after { content: "▾"; }
.lj-it > summary span { display: flex; flex-direction: column; min-width: 0; } .lj-it > summary b { font-size: 14px; } .lj-it > summary small { font-size: 12.5px; color: var(--muted); }
.lj-it > summary:focus-visible { outline: 2px solid #1D4ED8; outline-offset: 2px; }
.lj-it > .lj-in { border: 0 !important; border-top: 1px solid var(--border) !important; border-radius: 0 0 14px 14px !important; box-shadow: none !important; margin: 0 !important; background: none !important; }
.lj-it > section.lj-in { padding: 14px; } .lj-it > details.lj-in > .lj-in { padding: 14px; border: 0 !important; }
.lj-it > .lj-in > h2:first-child, .lj-it > .lj-in > .h2-row:first-child > h2, .lj-it > details.lj-in > .lj-in > h2 { display: none; }
.lj-it > .lj-in > .h2-row:first-child { justify-content: flex-end; }

/* RINCIAN DIPINDAH KE ADMIN (12 Nov): di halaman member rincian Setup Meter / Strong Meter dan tautan Rincian zona tidak ditampilkan lagi */
.zt-rnc, .sz-fold[data-fold="meter"], .sg-meter { display: none !important; }
/* MODE HANYA CHART: kartu chart memenuhi layar, lainnya tertutup */
html.hanya-chart, html.hanya-chart body { overflow: hidden; background: #141922; }
html.hanya-chart .chart-card { position: fixed !important; inset: 0 !important; z-index: 99999; margin: 0 !important; border-radius: 0 !important; width: auto !important; height: auto !important; max-height: none !important; }
html.hanya-chart .help, html.hanya-chart .sa-fab, html.hanya-chart .dmp-fab, html.hanya-chart .pd-banner, html.hanya-chart .fab { display: none !important; }
/* PANEL ADMIN › PANTAU SINYAL */
.pn-bar { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; } .pn-ch { display: flex; gap: 6px; flex-wrap: wrap; }
.pn-g { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; margin-top: 12px; align-items: start; } .pn-k { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (max-width: 900px) { .pn-g { grid-template-columns: 1fr; } }
.pn-chart { position: relative; height: 460px; border-radius: 14px; overflow: hidden; background: #141922; } .pn-chart iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pn-b { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pn-j { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; } .pn-j b { font-size: 13.5px; } .pn-j em { font-style: normal; font-weight: 800; }
.pn-j em.ok { color: var(--tx-137a3a); } .pn-j em.kn { color: var(--tx-92400e); } .pn-j em.mr { color: var(--tx-b91c1c); } .pn-j em.ab { color: var(--muted); }
.pn-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; font-size: 12.5px; } .pn-r span { color: var(--muted); min-width: 0; } .pn-r b { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pn-b small { color: var(--muted); font-size: 12px; line-height: 1.45; } .pn-b .tbl td, .pn-b .tbl th { padding: 5px 8px 5px 0; font-size: 12.5px; vertical-align: top; }
.pn-tag { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; color: var(--di-turun); background: var(--k-dc2626); margin-right: 4px; } .pn-tag.b { background: var(--k-16a34a); }

/* kartu Arah tren: ruang kosong di bawah (sisa tinggi minimal tabel tren lama) dihilangkan */
.tren-side #pm-box { min-height: 0 !important; }
.tren-side > .ss-card { margin: 0; border-radius: 16px; }
@media (max-width: 860px) { .ss-card { margin: 0 12px 12px; } }

/* KARTU INFO: kumpulan info sinyal (ditarik, pantau TP3 selesai, SL/TP masih bisa berubah, TP/SL kena) */
.if-card { margin: 4px 0 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-fff); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.if-card[hidden] { display: none; }
.if-h b { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.if-b { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .if-b > * { margin: 0 !important; }
.tren-side > .if-card { margin: 0; }
@media (max-width: 860px) { .if-card { margin: 0 12px 12px; } }

/* PENGINGAT BERITA MELAYANG: pindah ke kiri atas; menyusut jadi logo saja, keluar saat diketuk (.buka) */
.dmp-fab { right: auto; bottom: auto; left: 0; top: 136px; height: 36px; border-radius: 0 18px 18px 0; padding: 0 4px 0 3px; gap: 0; transition: padding .18s ease; }
.dmp-fab i { width: 19px; height: 19px; flex: none; }
.dmp-fab span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .18s ease, opacity .18s ease, margin .18s ease; }
.dmp-fab.buka, .dmp-fab.dekat { padding-right: 12px; } .dmp-fab.buka span, .dmp-fab.dekat span { max-width: 90px; opacity: 1; margin-left: 6px; }
@media (min-width: 861px) { .dmp-fab { bottom: auto; top: 100px; height: 36px; } }
/* audit tampilan 13 Nov (pilihan A user): di HP / tablet pengingat berita pindah ke kiri bawah di atas menu bawah, supaya tidak menutup tombol timeframe */
@media (max-width: 860px) { .dmp-fab { top: auto; bottom: calc(var(--tab-h, 64px) + 14px + env(safe-area-inset-bottom, 0px)); } }
/* audit tampilan 12 Nov: di laptop / desktop / TV pengingat berita masuk ke kolom menu kiri supaya tidak menimpa judul kartu */
@media (min-width: 861px) {
  .dmp-fab { left: 12px !important; top: auto; bottom: 110px; width: calc(var(--side-w, 76px) - 24px); height: 40px; justify-content: flex-start; border-radius: 12px; padding: 0 10px; gap: 8px; }
  .dmp-fab span, .dmp-fab.buka span, .dmp-fab.dekat span { max-width: none; opacity: 1; margin: 0; font-size: 12.5px; }
  .dmp-fab.buka, .dmp-fab.dekat { padding: 0 10px; }
  body.side-mini .dmp-fab { left: 8px !important; width: calc(var(--side-w, 76px) - 16px); height: auto; min-height: 36px; flex-direction: column; justify-content: center; border-radius: 14px; padding: 8px 2px; gap: 0; }
  body.side-mini .dmp-fab span { max-height: 0; opacity: 0; font-size: 11px; line-height: 1.2; white-space: normal; text-align: center; transition: max-height .18s ease, opacity .18s ease, margin .18s ease; }
  body.side-mini .dmp-fab.buka span, body.side-mini .dmp-fab.dekat span { max-height: 34px; opacity: 1; margin: 4px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .dmp-fab, .dmp-fab span { transition: none; } }

/* KARTU SINYAL (canvas bagian 22): harga di bawah kotak langkah; Setup Meter jadi batang panjang; Risk reward dan info "SL dan TP masih bisa berubah" masuk kotak langkah */
.sg-mini { grid-template-columns: 1fr; margin-top: 10px; }
.sg-mini .sg-rr { display: none; }
.sg-mini article.sg-conf { min-height: 0; padding: 12px 14px; border-radius: 16px; background: var(--bg-fff); border: 1px solid var(--border-2); color: var(--ink); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 10px; }
.sg-conf span { font-size: 13px; font-weight: 800; } .sg-conf b { font-size: 15px; margin: 0; color: var(--green-t); }
.sg-conf .meter { grid-column: 1 / -1; height: 6px; }
.sg-ub { display: block; margin-top: 7px; padding: 7px 10px; border-radius: 10px; background: var(--bg-eff6ff); border: 1px solid var(--bd-bfdbfe); color: var(--tx-1e3a8a); }
.sg-step.done .sg-ub { display: none; }

/* Ringkasan analisa: keterangan berita singkat */
.rk-ket { font-weight: 600; }

/* KARTU INFO: info hasil trade, bisa ditutup, hilang sendiri 2 menit, ada riwayat */
.if-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.if-rw { border: 1px solid var(--border-2); background: var(--bg-fff); color: var(--ink); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.if-rw[hidden] { display: none; } .if-rw:focus-visible, .if-x:focus-visible { outline: 2px solid #1D4ED8; outline-offset: 2px; }
.if-b > [data-if-tutup] { display: none !important; } .if-b:empty { display: none; }
.if-sepi { margin: 0; font-size: 12.5px; color: var(--muted); } .if-sepi[hidden] { display: none; }
.if-x { margin-left: auto; align-self: center; flex: none; border: 1px solid rgba(0,0,0,.15); background: var(--bg-fff); color: var(--tx-141921); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.if-b .sg-toast { display: flex; align-items: flex-start; gap: 8px; } .if-b .sg-toast[hidden] { display: none; }
.if-pop-j { display: block; font-size: 15px; font-weight: 800; padding: 4px 40px 10px 2px; }
.if-pop-b { display: flex; flex-direction: column; gap: 8px; }
.if-it { border: 1px solid var(--border); border-left: 4px solid var(--k-16a34a); border-radius: 10px; padding: 8px 10px; background: var(--bg-fff); color: var(--tx-141921); }
.if-it.mr { border-left-color: var(--k-dc2626); } .if-it.kn { border-left-color: #F59E0B; }
.if-it small { color: var(--muted); font-size: 11.5px; font-weight: 700; } .if-it p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; }
.if-kos { margin: 0; color: var(--muted); font-size: 13px; } .if-pop-c { display: block; margin-top: 10px; color: var(--muted); font-size: 11.5px; }

/* notifikasi bisa diusap (atas / kiri / kanan) untuk menutup */
.sa-toast, .pd-banner { touch-action: none; -webkit-user-select: none; user-select: none; }

/* MENU BAWAH HP lebih pendek (permintaan user 12 Nov), dan mengecil jadi ikon saja saat halaman digulir ke bawah supaya layar lebih lega */
@media (max-width: 860px) {
  :root { --tab-h: 56px; }
  .tabbar { padding-bottom: env(safe-area-inset-bottom); transition: height .2s ease; }
  .tabbar a { gap: 0; font-size: 11px; line-height: 1.25; transition: font-size .2s ease; }
  .tabbar .tab-ic { padding: 2px 14px; }
  .tabbar .tab-main .tab-ic { width: 50px; height: 50px; margin-top: -24px; border-width: 4px; transition: width .2s ease, height .2s ease, margin .2s ease; }
  body.tab-turun { --tab-h: 38px; }
  body.tab-turun .tabbar a { font-size: 0; }
  body.tab-turun .tabbar .tab-main .tab-ic { width: 42px; height: 42px; margin-top: -12px; }
}
@media (prefers-reduced-motion: reduce) { .tabbar, .tabbar a, .tabbar .tab-main .tab-ic { transition: none !important; } }

/* TAB PER KARTU DI HP (canvas bagian 23): Sinyal · Ringkasan · Zona · Tren · Sesi. Desktop: tanpa tab. */
@media (min-width: 861px) { .sig-tabs { display: none !important; } }
@media (max-width: 860px) {
  .sig-tabs { position: sticky; top: var(--top-h); z-index: 6; transition: padding .2s ease; }
  .sig-tabs button { min-height: 46px; font-size: 11px; gap: 2px; transition: min-height .2s ease, font-size .2s ease; }
  .sig-tabs [data-stab="tren"] { display: flex !important; }
  body.tab-turun .sig-tabs button { min-height: 34px; font-size: 0; gap: 0; }
  .sig-panel[data-stab]:not([data-stab="sesi"]) .sig-scroll > #ss-card { display: none; }
  .sig-panel[data-stab="sinyal"] .sig-scroll .run-card > #rk, .sig-panel[data-stab="sinyal"] .sig-scroll .run-card > #zt { display: none; }
  .sig-panel[data-stab="ringkasan"] .sig-scroll > .run-card, .sig-panel[data-stab="zona"] .sig-scroll > .run-card { display: block; padding-top: 0; padding-bottom: 0; background: none; border: 0; box-shadow: none; }
  .sig-panel[data-stab="ringkasan"] .sig-scroll .run-card > :not(#rk), .sig-panel[data-stab="zona"] .sig-scroll .run-card > :not(#zt) { display: none !important; }
}
/* Hitung lot di Jurnal */
.jr-lot-f { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
a.lv { text-decoration: none; color: inherit; }

/* menu bawah mode hemat: bayangan tombol tengah tidak terpotong tepi layar; baris tab kartu menempel sedikit di bawah header */
@media (max-width: 860px) {
  body.tab-turun .tabbar .tab-main .tab-ic { box-shadow: 0 1px 4px rgba(20,25,33,.18); }
  .tabbar { overflow: visible; }
  .sig-tabs { top: calc(var(--top-h) + 6px); }
}

/* TAB INFO sendiri di HP + titik merah kalau ada info baru; garis pegangan usap di notifikasi (HP) */
@media (max-width: 860px) {
  .sig-tabs button { font-size: 10.5px; position: relative; }
  .sig-panel[data-stab]:not([data-stab="info"]) .sig-scroll > #if-card { display: none; }
  .sig-panel[data-info-baru="1"] .sig-tabs [data-stab="info"]::after { content: ""; position: absolute; top: 6px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--k-dc2626); }
  .sa-toast, .pd-banner { padding-bottom: 18px !important; }
  .sa-toast { position: relative; }
  .sa-toast::after, .pd-banner::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(120,126,138,.55); }
}

/* Lot kamu: isian Modal dan Risiko langsung di bawah barisnya */
.lot-in { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-2); border-radius: 16px; background: var(--bg-fff); }
.lot-in[hidden] { display: none; } .lot-in .f { min-width: 0; } .lot-in input { width: 100%; min-width: 0; }

/* harga Atas / Bawah zona bisa diketuk untuk disalin */
.sz-lad [data-copy], .sg-next-p [data-copy] { cursor: pointer; } .sz-lad [data-copy]:focus-visible, .sg-next-p [data-copy]:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 8px; }

/* NOTULEN HARIAN (canvas bagian 25 v5): layar gelap + pemberitahuan, lalu chat agen */
html.nt-kunci, html.nt-kunci body { overflow: hidden; }
.nt-lap { position: fixed; inset: 0; z-index: 10000; background: rgba(8,10,14,.86); display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); }
.nt-foto { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--bg-fff); border: 1px solid var(--bd-d9dee6); display: grid; place-items: center; font-style: normal; } .nt-foto svg { width: 68%; height: 68%; }
.nt-foto.kc { width: 26px; height: 26px; }
.nt-kartu { width: min(360px, 100%); background: var(--bg-fff); color: var(--tx-141921); border-radius: 24px; padding: 22px 20px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.5); animation: nt-naik .25s ease; }
.nt-kartu b { font-size: 17px; font-weight: 800; } .nt-kartu p { margin: 0; color: var(--tx-5b6472); font-size: 13.5px; line-height: 1.45; } .nt-kartu small { color: var(--tx-7a8391); font-size: 11.5px; }
.nt-buka { align-self: stretch; border: 0; border-radius: 999px; background: #141921; color: var(--k-34d06f); font: inherit; font-size: 14.5px; font-weight: 800; padding: 13px 0; cursor: pointer; margin-top: 4px; }
.nt-buka:focus-visible, .nt-tutup:focus-visible, .nt-sinyal:focus-visible, .nt-ulang:focus-visible { outline: 3px solid var(--k-25c660); outline-offset: 2px; }
.nt-chat { width: min(440px, 100%); max-height: min(640px, 100%); background: var(--bg-fff); color: var(--tx-141921); border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.5); animation: nt-naik .25s ease; }
.nt-kepala { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--bd-e5e7eb); } .nt-kepala .nt-foto { width: 38px; height: 38px; } .nt-kepala b { display: block; font-size: 14.5px; font-weight: 800; }
.nt-status { font-size: 12px; font-weight: 700; color: var(--k-16a34a); } .nt-status.ok { color: var(--tx-7a8391); }
.nt-isi { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 2px 2px 4px; }
.nt-tgl { align-self: center; font-size: 11px; font-weight: 700; color: var(--tx-5b6472); background: var(--bg-eef0f3); border-radius: 999px; padding: 2px 10px; }
.nt-ms { display: flex; gap: 7px; align-items: flex-end; animation: nt-naik .22s ease; }
.nt-gb { max-width: 84%; background: var(--bg-f1f4f8); border-radius: 18px 18px 18px 5px; padding: 9px 13px; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; } .nt-gb b { font-weight: 800; }
.nt-gb.hj { background: var(--bg-ddf5e6); } .nt-gb.kn { background: var(--bg-fff3cc); }
.nt-titik { display: inline-flex; gap: 4px; background: var(--bg-f1f4f8); border-radius: 18px 18px 18px 5px; padding: 12px 14px; } .nt-titik u { width: 6px; height: 6px; border-radius: 50%; background: #9AA3B0; text-decoration: none; animation: nt-kedip 1s infinite ease-in-out; } .nt-titik u:nth-child(2) { animation-delay: .15s; } .nt-titik u:nth-child(3) { animation-delay: .3s; }
.nt-aksi { display: flex; gap: 8px; } .nt-aksi[hidden] { display: none; }
.nt-tutup, .nt-sinyal { flex: 1; text-align: center; border-radius: 999px; padding: 11px 0; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; text-decoration: none; }
.nt-tutup { border: 1px solid var(--bd-d9dee6); background: var(--bg-fff); color: var(--tx-141921); } .nt-sinyal { border: 1px solid #141921; background: #141921; color: var(--k-34d06f); }
.nt-ulang { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-2); background: var(--bg-fff); color: var(--ink); border-radius: 999px; padding: 5px 14px 5px 6px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.nt-set { cursor: pointer; } .nt-set input { position: absolute; opacity: 0; width: 1px; height: 1px; } .nt-set small { font-weight: 600; color: var(--muted); font-size: 12px; }
.nt-sw { flex: none; width: 44px !important; height: 26px; border-radius: 999px; background: var(--bg-d1d5db); position: relative; transition: background .15s ease; } .nt-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-fff); transition: left .15s ease; }
.nt-set input:checked + .nt-sw { background: var(--k-22c55e); } .nt-set input:checked + .nt-sw::after { left: 21px; } .nt-set input:focus-visible + .nt-sw { outline: 3px solid var(--k-25c660); outline-offset: 2px; }
@keyframes nt-naik { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nt-kedip { 0%, 80%, 100% { opacity: .35; transform: scale(.85); } 40% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .nt-kartu, .nt-chat, .nt-ms, .nt-titik u { animation: none; } }

/* notulen: gelembung pertanyaan member di kanan */
.nt-mu { display: flex; justify-content: flex-end; animation: nt-naik .22s ease; }
.nt-gu { max-width: 78%; background: #141921; color: #fff; border-radius: 18px 18px 5px 18px; padding: 9px 13px; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .nt-mu { animation: none; } }

/* notulen: ukuran kotak tetap sejak awal, chat mulai dari bawah (permintaan user 12 Nov) */
.nt-chat { height: min(640px, 100%); max-height: none; }
.nt-isi > :first-child { margin-top: auto; }
.nt-aksi.nt-tunggu { visibility: hidden; }
/* notulen: tombol "Nanti saja" (T-075), selalu terlihat */
.nt-nanti { flex: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--bd-d9dee6); border-radius: 999px; background: var(--bg-fff); color: var(--tx-5b6472); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.nt-nanti:hover { color: var(--tx-141921); } .nt-nanti:focus-visible { outline: 3px solid var(--k-25c660); outline-offset: 2px; }
.nt-kartu .nt-nanti { align-self: stretch; border-color: transparent; }
.nt-kepala .nt-nanti { margin-left: auto; }

/* TAMPILAN (tahap 1, 12 Nov): warna yang ikut berganti mode. Nilai di sini = warna lama, jadi mode Terang tidak berubah. Dibuat otomatis oleh tema.py. */
:root {
  --bd-bfdbfe: #BFDBFE;
  --bd-d1d5db: #D1D5DB;
  --bd-d1d5dc: #D1D5DC;
  --bd-d9dee6: #D9DEE6;
  --bd-e5e7eb: #E5E7EB;
  --bd-ecedf0: #ECEDF0;
  --bd-eef0f3: #EEF0F3;
  --bd-fde68a: #FDE68A;
  --bd-fecaca: #FECACA;
  --bd-fed7aa: #FED7AA;
  --bg-d1d5db: #D1D5DB;
  --bg-ddf5e6: #DDF5E6;
  --bg-e5e7eb: #E5E7EB;
  --bg-e5f7f2: #E5F7F2;
  --bg-e8f8ee: #E8F8EE;
  --bg-ecedf0: #ECEDF0;
  --bg-eef0f3: #EEF0F3;
  --bg-eff6ff: #EFF6FF;
  --bg-f1f4f8: #F1F4F8;
  --bg-f3f4f6: #F3F4F6;
  --bg-f4f5f7: #F4F5F7;
  --bg-f5f3ff: #F5F3FF;
  --bg-f7f7f7: #F7F7F7;
  --bg-f9fafb: #F9FAFB;
  --bg-fdecec: #FDECEC;
  --bg-fee2e2: #FEE2E2;
  --bg-fef2f2: #FEF2F2;
  --bg-fef3c7: #FEF3C7;
  --bg-fef6e4: #FEF6E4;
  --bg-ffedd5: #FFEDD5;
  --bg-fff: #FFF;
  --bg-fff3cc: #FFF3CC;
  --bg-fff7ed: #FFF7ED;
  --bg-fffbeb: #FFFBEB;
  --tx-12753c: #12753C;
  --tx-137a3a: #137A3A;
  --tx-141921: #141921;
  --tx-18191f: #18191F;
  --tx-1e3a8a: #1E3A8A;
  --tx-31353c: #31353C;
  --tx-374151: #374151;
  --tx-4b5563: #4B5563;
  --tx-5b6472: #5B6472;
  --tx-6b4500: #6B4500;
  --tx-6b7280: #6B7280;
  --tx-78350f: #78350F;
  --tx-7a8391: #7A8391;
  --tx-7c2d12: #7C2D12;
  --tx-7f1d1d: #7F1D1D;
  --tx-8a5a00: #8A5A00;
  --tx-92400e: #92400E;
  --tx-991b1b: #991B1B;
  --tx-9a3412: #9A3412;
  --tx-b45309: #B45309;
  --tx-b91c1c: #B91C1C;
}
html[data-mode="gelap"] {
  color-scheme: dark;
  --page: #0F1319; --ink: #EEF1F5; --muted: #A3ACB9; --border: #2C333D; --border-2: #2C333D; --input-bg: #1A2029; --input-border: #3A424E;
  --green-tint: #12301F; --red-tint: #3A1A1A; --green-t: #7CE3A2; --red: #F87171;
  --bd-bfdbfe: #2B4A86;
  --bd-d1d5db: #3A424E;
  --bd-d1d5dc: #3A424E;
  --bd-d9dee6: #2C333D;
  --bd-e5e7eb: #2C333D;
  --bd-ecedf0: #2C333D;
  --bd-eef0f3: #2C333D;
  --bd-fde68a: #6B5516;
  --bd-fecaca: #6B2A2A;
  --bd-fed7aa: #6B4516;
  --bg-d1d5db: #3A424E;
  --bg-ddf5e6: #12301F;
  --bg-e5e7eb: #2C333D;
  --bg-e5f7f2: #12301F;
  --bg-e8f8ee: #12301F;
  --bg-ecedf0: #2C333D;
  --bg-eef0f3: #232A33;
  --bg-eff6ff: #1B2B4D;
  --bg-f1f4f8: #232A33;
  --bg-f3f4f6: #232A33;
  --bg-f4f5f7: #232A33;
  --bg-f5f3ff: #241F3D;
  --bg-f7f7f7: #232A33;
  --bg-f9fafb: #232A33;
  --bg-fdecec: #3A1A1A;
  --bg-fee2e2: #3A1A1A;
  --bg-fef2f2: #331818;
  --bg-fef3c7: #3D3110;
  --bg-fef6e4: #33290F;
  --bg-ffedd5: #3D2A10;
  --bg-fff: #1A2029;
  --bg-fff3cc: #3D3110;
  --bg-fff7ed: #33240F;
  --bg-fffbeb: #33290F;
  --tx-12753c: #7CE3A2;
  --tx-137a3a: #7CE3A2;
  --tx-141921: #EEF1F5;
  --tx-18191f: #EEF1F5;
  --tx-1e3a8a: #93B4FF;
  --tx-31353c: #C5CCD6;
  --tx-374151: #C5CCD6;
  --tx-4b5563: #A3ACB9;
  --tx-5b6472: #A3ACB9;
  --tx-6b4500: #FCD98A;
  --tx-6b7280: #A3ACB9;
  --tx-78350f: #FCD98A;
  --tx-7a8391: #A3ACB9;
  --tx-7c2d12: #FDBA74;
  --tx-7f1d1d: #FCA5A5;
  --tx-8a5a00: #FCD98A;
  --tx-92400e: #FCD98A;
  --tx-991b1b: #FCA5A5;
  --tx-9a3412: #FDBA74;
  --tx-b45309: #FCD98A;
  --tx-b91c1c: #FCA5A5;
}

/* Setelan Tampilan di Akun */
.tm-br { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--border-2); } .tm-br > span { font-weight: 700; font-size: 14px; } .tm-br small { color: var(--muted); font-size: 12px; }
.tm-pl { display: flex; gap: 6px; flex-wrap: wrap; } .tm-pl button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-2); background: var(--bg-fff); color: var(--ink); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; }
.tm-pl button[aria-pressed="true"] { background: var(--ink); color: var(--page); border-color: var(--ink); } .tm-pl button:disabled { cursor: default; opacity: 1; }
.tm-tt { display: inline-flex; } .tm-tt u { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(127,127,127,.6); } .tm-tt u + u { margin-left: -3px; }

/* TAMPILAN (tambahan): warna yang ikut berganti mode. Nilai di sini = warna lama, jadi mode Terang tidak berubah. Dibuat otomatis oleh tema.py. */
:root {
  --bg-d1f2dc: #D1F2DC;
  --bg-d9dee6: #D9DEE6;
  --bg-e0ecff: #E0ECFF;
  --bg-e0f2fe: #E0F2FE;
  --bg-e8f0fe: #E8F0FE;
  --bg-eaf1ff: #EAF1FF;
  --bg-ecfdf3: #ECFDF3;
  --bg-ede9fe: #EDE9FE;
  --bg-eef0ff: #EEF0FF;
  --bg-f0f1f3: #F0F1F3;
  --bg-f1f1f1: #F1F1F1;
  --bg-f3f6f9: #F3F6F9;
  --bg-f3fbf6: #F3FBF6;
  --bg-f7f8fa: #F7F8FA;
  --bg-f8f9fb: #F8F9FB;
  --bg-fafafb: #FAFAFB;
  --bg-fbfbfc: #FBFBFC;
  --bg-fff4e5: #FFF4E5;
  --bg-fff5f5: #FFF5F5;
  --bg-fff7e6: #FFF7E6;
  --bg-fff7f7: #FFF7F7;
}
html[data-mode="gelap"] {
  color-scheme: dark;
  --page: #0F1319; --ink: #EEF1F5; --muted: #A3ACB9; --border: #2C333D; --border-2: #2C333D; --input-bg: #1A2029; --input-border: #3A424E;
  --green-tint: #12301F; --red-tint: #3A1A1A; --green-t: #7CE3A2; --red: #F87171; --navy: #07090D;
  --bg-d1f2dc: #12301F;
  --bg-d9dee6: #2C333D;
  --bg-e0ecff: #1B2B4D;
  --bg-e0f2fe: #1B2B4D;
  --bg-e8f0fe: #1B2B4D;
  --bg-eaf1ff: #1B2B4D;
  --bg-ecfdf3: #12301F;
  --bg-ede9fe: #241F3D;
  --bg-eef0ff: #1B2B4D;
  --bg-f0f1f3: #232A33;
  --bg-f1f1f1: #232A33;
  --bg-f3f6f9: #232A33;
  --bg-f3fbf6: #12301F;
  --bg-f7f8fa: #232A33;
  --bg-f8f9fb: #232A33;
  --bg-fafafb: #232A33;
  --bg-fbfbfc: #232A33;
  --bg-fff4e5: #33290F;
  --bg-fff5f5: #331818;
  --bg-fff7e6: #33290F;
  --bg-fff7f7: #331818;
}

/* TAMPILAN mode Gelap: penyesuaian tangan untuk bagian yang tidak cukup dengan ganti variabel */
html[data-mode="gelap"] .top, html[data-mode="gelap"] .tabbar { background: #141921; border-color: #2C333D; }
html[data-mode="gelap"] .tabbar .tab-main .tab-ic { border-color: #141921; }
html[data-mode="gelap"] .btn-dark, html[data-mode="gelap"] .tm-pl button[aria-pressed="true"] { background: var(--green); color: var(--k-07130b); border-color: var(--green); }
html[data-mode="gelap"] .sig-tabs button[aria-selected="true"] { background: var(--green); color: var(--k-07130b); }
html[data-mode="gelap"] .card, html[data-mode="gelap"] .sig-tabs { box-shadow: none; }
html[data-mode="gelap"] ::placeholder { color: #7A8391; }
html[data-mode="gelap"] img.logo { filter: none; }

/* TAMPILAN (tahap 2+3, 12 Nov): warna naik / turun jadi variabel. Nilai di sini = warna lama. Dibuat otomatis oleh tema2.py. */
:root {
  --lilin-naik: #25C660; --lilin-turun: #F0616D;
  --k-002818: #002818;
  --k-00e676: #00E676;
  --k-00ff00: #00FF00;
  --k-047857: #047857;
  --k-06280f: #06280F;
  --k-07130b: #07130B;
  --k-0e7a3b: #0E7A3B;
  --k-0f7a3d: #0F7A3D;
  --k-12301f: #12301F;
  --k-14532d: #14532D;
  --k-16a34a: #16A34A;
  --k-20b456: #20B456;
  --k-22c55e: #22C55E;
  --k-25c660: #25C660;
  --k-2c0a0e: #2C0A0E;
  --k-34d06f: #34D06F;
  --k-34d399: #34D399;
  --k-3cb371: #3CB371;
  --k-6ee7a0: #6EE7A0;
  --k-7ce3a2: #7CE3A2;
  --k-86efac: #86EFAC;
  --k-8b1515: #8B1515;
  --k-a7e3bc: #A7E3BC;
  --k-b7e4c7: #B7E4C7;
  --k-c6ebd6: #C6EBD6;
  --k-c81e1e: #C81E1E;
  --k-c8ebdd: #C8EBDD;
  --k-dc2626: #DC2626;
  --k-e5484d: #E5484D;
  --k-ef4444: #EF4444;
  --k-effff5: #EFFFF5;
  --k-f05252: #F05252;
  --k-f5c2c2: #F5C2C2;
  --k-f6cfcf: #F6CFCF;
  --k-f77c80: #F77C80;
  --k-f7d4d4: #F7D4D4;
  --k-f87171: #F87171;
  --k-fca5a5: #FCA5A5;
  --k-ff3b30: #FF3B30;
  --k-ff4d4d: #FF4D4D;
  --k-ff4d5e: #FF4D5E;
  --k-ffd5d5: #FFD5D5;
  --k-ffd9d4: #FFD9D4;
  --ka-18-117-60-_15: rgba(18,117,60,.15);
  --ka-200-30-30-_5: rgba(200,30,30,.5);
  --ka-239-68-68-_12: rgba(239,68,68,.12);
  --ka-239-68-68-_2: rgba(239,68,68,.2);
  --ka-239-68-68-_7: rgba(239,68,68,.7);
  --ka-240-68-56-_35: rgba(240,68,56,.35);
  --ka-240-82-82-_12: rgba(240,82,82,.12);
  --ka-240-97-109-0: rgba(240,97,109,0);
  --ka-240-97-109-_08: rgba(240,97,109,.08);
  --ka-240-97-109-_15: rgba(240,97,109,.15);
  --ka-240-97-109-_22: rgba(240,97,109,.22);
  --ka-240-97-109-_28: rgba(240,97,109,.28);
  --ka-240-97-109-_35: rgba(240,97,109,.35);
  --ka-240-97-109-_55: rgba(240,97,109,.55);
  --ka-240-97-109-_7: rgba(240,97,109,.7);
  --ka-247-124-128-_45: rgba(247,124,128,.45);
  --ka-248-113-113-_07: rgba(248,113,113,.07);
  --ka-34-197-94-_12: rgba(34,197,94,.12);
  --ka-37-198-96-0: rgba(37,198,96,0);
  --ka-37-198-96-_07: rgba(37,198,96,.07);
  --ka-37-198-96-_12: rgba(37,198,96,.12);
  --ka-37-198-96-_15: rgba(37,198,96,.15);
  --ka-37-198-96-_18: rgba(37,198,96,.18);
  --ka-37-198-96-_2: rgba(37,198,96,.2);
  --ka-37-198-96-_20: rgba(37,198,96,.20);
  --ka-37-198-96-_22: rgba(37,198,96,.22);
  --ka-37-198-96-_28: rgba(37,198,96,.28);
  --ka-37-198-96-_35: rgba(37,198,96,.35);
  --ka-37-198-96-_6: rgba(37,198,96,.6);
  --ka-37-198-96-_7: rgba(37,198,96,.7);
  --ka-52-211-153-_08: rgba(52,211,153,.08);
  --ka-52-211-153-_45: rgba(52,211,153,.45);
}
html[data-warna="putih-hitam"] {
  --lilin-naik: #FFFFFF; --lilin-turun: #8A8A8A;
  --bd-fecaca: #E4E4E4;
  --bg-d1f2dc: #E2E2E2;
  --bg-ddf5e6: #E9E9E9;
  --bg-e5f7f2: #EEEEEE;
  --bg-e8f8ee: #F0F0F0;
  --bg-ecfdf3: #F4F4F4;
  --bg-f3fbf6: #F7F7F7;
  --bg-fdecec: #F4F4F4;
  --bg-fee2e2: #F0F0F0;
  --bg-fef2f2: #F8F8F8;
  --bg-fff5f5: #FAFAFA;
  --bg-fff7f7: #FBFBFB;
  --green: #D4D4D4;
  --green-t: #444444;
  --green-tint: #EEEEEE;
  --red: #454545;
  --red-d: #A8A8A8;
  --red-tint: #F4F4F4;
  --tx-12753c: #444444;
  --tx-137a3a: #464646;
  --tx-7c2d12: #474747;
  --tx-7f1d1d: #4E4E4E;
  --tx-991b1b: #5A5A5A;
  --tx-9a3412: #565656;
  --tx-b91c1c: #454545;
  --k-002818: #141414;
  --k-00e676: #D4D4D4;
  --k-00ff00: #D4D4D4;
  --k-047857: #3E3E3E;
  --k-06280f: #171717;
  --k-07130b: #0D0D0D;
  --k-0e7a3b: #444444;
  --k-0f7a3d: #444444;
  --k-12301f: #212121;
  --k-14532d: #343434;
  --k-16a34a: #D4D4D4;
  --k-20b456: #D4D4D4;
  --k-22c55e: #D4D4D4;
  --k-25c660: #D4D4D4;
  --k-2c0a0e: #1B1B1B;
  --k-34d06f: #D4D4D4;
  --k-34d399: #D4D4D4;
  --k-3cb371: #D4D4D4;
  --k-6ee7a0: #ABABAB;
  --k-7ce3a2: #B0B0B0;
  --k-86efac: #BBBBBB;
  --k-8b1515: #505050;
  --k-a7e3bc: #C5C5C5;
  --k-b7e4c7: #CECECE;
  --k-c6ebd6: #D8D8D8;
  --k-c81e1e: #454545;
  --k-c8ebdd: #DADADA;
  --k-dc2626: #454545;
  --k-e5484d: #454545;
  --k-ef4444: #454545;
  --k-effff5: #F7F7F7;
  --k-f05252: #454545;
  --k-f5c2c2: #DCDCDC;
  --k-f6cfcf: #E2E2E2;
  --k-f77c80: #BABABA;
  --k-f7d4d4: #E6E6E6;
  --k-f87171: #B4B4B4;
  --k-fca5a5: #D0D0D0;
  --k-ff3b30: #454545;
  --k-ff4d4d: #454545;
  --k-ff4d5e: #454545;
  --k-ffd5d5: #EAEAEA;
  --k-ffd9d4: #EAEAEA;
  --ka-18-117-60-_15: rgba(68,68,68,.15);
  --ka-200-30-30-_5: rgba(69,69,69,.5);
  --ka-239-68-68-_12: rgba(69,69,69,.12);
  --ka-239-68-68-_2: rgba(69,69,69,.2);
  --ka-239-68-68-_7: rgba(69,69,69,.7);
  --ka-240-68-56-_35: rgba(69,69,69,.35);
  --ka-240-82-82-_12: rgba(69,69,69,.12);
  --ka-240-97-109-0: rgba(168,168,168,0);
  --ka-240-97-109-_08: rgba(168,168,168,.08);
  --ka-240-97-109-_15: rgba(168,168,168,.15);
  --ka-240-97-109-_22: rgba(168,168,168,.22);
  --ka-240-97-109-_28: rgba(168,168,168,.28);
  --ka-240-97-109-_35: rgba(168,168,168,.35);
  --ka-240-97-109-_55: rgba(168,168,168,.55);
  --ka-240-97-109-_7: rgba(168,168,168,.7);
  --ka-247-124-128-_45: rgba(186,186,186,.45);
  --ka-248-113-113-_07: rgba(180,180,180,.07);
  --ka-34-197-94-_12: rgba(212,212,212,.12);
  --ka-37-198-96-0: rgba(212,212,212,0);
  --ka-37-198-96-_07: rgba(212,212,212,.07);
  --ka-37-198-96-_12: rgba(212,212,212,.12);
  --ka-37-198-96-_15: rgba(212,212,212,.15);
  --ka-37-198-96-_18: rgba(212,212,212,.18);
  --ka-37-198-96-_2: rgba(212,212,212,.2);
  --ka-37-198-96-_20: rgba(212,212,212,.20);
  --ka-37-198-96-_22: rgba(212,212,212,.22);
  --ka-37-198-96-_28: rgba(212,212,212,.28);
  --ka-37-198-96-_35: rgba(212,212,212,.35);
  --ka-37-198-96-_6: rgba(212,212,212,.6);
  --ka-37-198-96-_7: rgba(212,212,212,.7);
  --ka-52-211-153-_08: rgba(212,212,212,.08);
  --ka-52-211-153-_45: rgba(212,212,212,.45);
  /* audit tampilan 12 Nov: warna yang belum punya nilai gelap + warna tulisan di atas warna naik / turun */
  --di-naik: #141921;
  --di-turun: #FFFFFF;
}
html[data-warna="putih-hitam"][data-mode="gelap"] {
  --lilin-naik: #FFFFFF; --lilin-turun: #8A8A8A;
  --bg-d1f2dc: #212121;
  --bg-ddf5e6: #212121;
  --bg-e5f7f2: #212121;
  --bg-e8f8ee: #212121;
  --bg-ecfdf3: #212121;
  --bg-f3fbf6: #212121;
  --green: #F0F0F0;
  --green-t: #B0B0B0;
  --green-tint: #212121;
  --red: #B4B4B4;
  --red-d: #A8A8A8;
  --tx-12753c: #B0B0B0;
  --tx-137a3a: #B0B0B0;
  --tx-7f1d1d: #D0D0D0;
  --tx-991b1b: #D0D0D0;
  --tx-b91c1c: #D0D0D0;
  --k-002818: #141414;
  --k-00e676: #F0F0F0;
  --k-00ff00: #F0F0F0;
  --k-047857: #3E3E3E;
  --k-06280f: #171717;
  --k-07130b: #0D0D0D;
  --k-0e7a3b: #444444;
  --k-0f7a3d: #444444;
  --k-12301f: #212121;
  --k-14532d: #343434;
  --k-16a34a: #F0F0F0;
  --k-20b456: #F0F0F0;
  --k-22c55e: #F0F0F0;
  --k-25c660: #F0F0F0;
  --k-2c0a0e: #1B1B1B;
  --k-34d06f: #F0F0F0;
  --k-34d399: #F0F0F0;
  --k-3cb371: #F0F0F0;
  --k-6ee7a0: #ABABAB;
  --k-7ce3a2: #B0B0B0;
  --k-86efac: #BBBBBB;
  --k-8b1515: #505050;
  --k-a7e3bc: #C5C5C5;
  --k-b7e4c7: #CECECE;
  --k-c6ebd6: #D8D8D8;
  --k-c81e1e: #757575;
  --k-c8ebdd: #DADADA;
  --k-dc2626: #757575;
  --k-e5484d: #757575;
  --k-ef4444: #757575;
  --k-effff5: #F7F7F7;
  --k-f05252: #757575;
  --k-f5c2c2: #DCDCDC;
  --k-f6cfcf: #E2E2E2;
  --k-f77c80: #BABABA;
  --k-f7d4d4: #E6E6E6;
  --k-f87171: #B4B4B4;
  --k-fca5a5: #D0D0D0;
  --k-ff3b30: #757575;
  --k-ff4d4d: #757575;
  --k-ff4d5e: #757575;
  --k-ffd5d5: #EAEAEA;
  --k-ffd9d4: #EAEAEA;
  --ka-18-117-60-_15: rgba(68,68,68,.15);
  --ka-200-30-30-_5: rgba(117,117,117,.5);
  --ka-239-68-68-_12: rgba(117,117,117,.12);
  --ka-239-68-68-_2: rgba(117,117,117,.2);
  --ka-239-68-68-_7: rgba(117,117,117,.7);
  --ka-240-68-56-_35: rgba(117,117,117,.35);
  --ka-240-82-82-_12: rgba(117,117,117,.12);
  --ka-240-97-109-0: rgba(168,168,168,0);
  --ka-240-97-109-_08: rgba(168,168,168,.08);
  --ka-240-97-109-_15: rgba(168,168,168,.15);
  --ka-240-97-109-_22: rgba(168,168,168,.22);
  --ka-240-97-109-_28: rgba(168,168,168,.28);
  --ka-240-97-109-_35: rgba(168,168,168,.35);
  --ka-240-97-109-_55: rgba(168,168,168,.55);
  --ka-240-97-109-_7: rgba(168,168,168,.7);
  --ka-247-124-128-_45: rgba(186,186,186,.45);
  --ka-248-113-113-_07: rgba(180,180,180,.07);
  --ka-34-197-94-_12: rgba(240,240,240,.12);
  --ka-37-198-96-0: rgba(240,240,240,0);
  --ka-37-198-96-_07: rgba(240,240,240,.07);
  --ka-37-198-96-_12: rgba(240,240,240,.12);
  --ka-37-198-96-_15: rgba(240,240,240,.15);
  --ka-37-198-96-_18: rgba(240,240,240,.18);
  --ka-37-198-96-_2: rgba(240,240,240,.2);
  --ka-37-198-96-_20: rgba(240,240,240,.20);
  --ka-37-198-96-_22: rgba(240,240,240,.22);
  --ka-37-198-96-_28: rgba(240,240,240,.28);
  --ka-37-198-96-_35: rgba(240,240,240,.35);
  --ka-37-198-96-_6: rgba(240,240,240,.6);
  --ka-37-198-96-_7: rgba(240,240,240,.7);
  --ka-52-211-153-_08: rgba(240,240,240,.08);
  --ka-52-211-153-_45: rgba(240,240,240,.45);
  /* audit tampilan 12 Nov: warna yang belum punya nilai gelap + warna tulisan di atas warna naik / turun */
  --bd-fecaca: #4A4A4A;
  --bg-fdecec: #2A2A2A;
  --bg-fee2e2: #2A2A2A;
  --bg-fef2f2: #262626;
  --bg-fff5f5: #262626;
  --bg-fff7f7: #262626;
  --red-tint: #2A2A2A;
  --tx-7c2d12: #FDBA74;
  --tx-9a3412: #FDBA74;
  --di-naik: #141921;
  --di-turun: #FFFFFF;
}
html[data-warna="kuning-hitam"] {
  --lilin-naik: #F5C518; --lilin-turun: #FFFFFF;
  --bd-fecaca: #E4E4E4;
  --bg-d1f2dc: #F2EAD1;
  --bg-ddf5e6: #F5EFDD;
  --bg-e5f7f2: #F7F3E5;
  --bg-e8f8ee: #F8F4E8;
  --bg-ecfdf3: #FDF9EC;
  --bg-f3fbf6: #FBF9F3;
  --bg-fdecec: #F4F4F4;
  --bg-fee2e2: #F0F0F0;
  --bg-fef2f2: #F8F8F8;
  --bg-fff5f5: #FAFAFA;
  --bg-fff7f7: #FBFBFB;
  --green: #F5C114;
  --green-t: #755E12;
  --green-tint: #F7F3E5;
  --red: #3D3D3D;
  --red-d: #A8A8A8;
  --red-tint: #F4F4F4;
  --tx-12753c: #755E12;
  --tx-137a3a: #7A6213;
  --tx-7c2d12: #474747;
  --tx-7f1d1d: #4E4E4E;
  --tx-991b1b: #5A5A5A;
  --tx-9a3412: #565656;
  --tx-b91c1c: #3D3D3D;
  --k-002818: #281F00;
  --k-00e676: #F5C114;
  --k-00ff00: #F5C114;
  --k-047857: #785D04;
  --k-06280f: #282006;
  --k-07130b: #131007;
  --k-0e7a3b: #7A610E;
  --k-0f7a3d: #7A610F;
  --k-12301f: #302912;
  --k-14532d: #534414;
  --k-16a34a: #F5C114;
  --k-20b456: #F5C114;
  --k-22c55e: #F5C114;
  --k-25c660: #F5C114;
  --k-2c0a0e: #1B1B1B;
  --k-34d06f: #F5C114;
  --k-34d399: #F5C114;
  --k-3cb371: #F5C114;
  --k-6ee7a0: #E7CB6E;
  --k-7ce3a2: #E3CB7C;
  --k-86efac: #EFD686;
  --k-8b1515: #505050;
  --k-a7e3bc: #E3D5A7;
  --k-b7e4c7: #E4DAB7;
  --k-c6ebd6: #EBE2C6;
  --k-c81e1e: #3D3D3D;
  --k-c8ebdd: #EBE3C8;
  --k-dc2626: #3D3D3D;
  --k-e5484d: #3D3D3D;
  --k-ef4444: #3D3D3D;
  --k-effff5: #FFFBEF;
  --k-f05252: #3D3D3D;
  --k-f5c2c2: #DCDCDC;
  --k-f6cfcf: #E2E2E2;
  --k-f77c80: #BABABA;
  --k-f7d4d4: #E6E6E6;
  --k-f87171: #B4B4B4;
  --k-fca5a5: #D0D0D0;
  --k-ff3b30: #3D3D3D;
  --k-ff4d4d: #3D3D3D;
  --k-ff4d5e: #3D3D3D;
  --k-ffd5d5: #EAEAEA;
  --k-ffd9d4: #EAEAEA;
  --ka-18-117-60-_15: rgba(117,94,18,.15);
  --ka-200-30-30-_5: rgba(61,61,61,.5);
  --ka-239-68-68-_12: rgba(61,61,61,.12);
  --ka-239-68-68-_2: rgba(61,61,61,.2);
  --ka-239-68-68-_7: rgba(61,61,61,.7);
  --ka-240-68-56-_35: rgba(61,61,61,.35);
  --ka-240-82-82-_12: rgba(61,61,61,.12);
  --ka-240-97-109-0: rgba(168,168,168,0);
  --ka-240-97-109-_08: rgba(168,168,168,.08);
  --ka-240-97-109-_15: rgba(168,168,168,.15);
  --ka-240-97-109-_22: rgba(168,168,168,.22);
  --ka-240-97-109-_28: rgba(168,168,168,.28);
  --ka-240-97-109-_35: rgba(168,168,168,.35);
  --ka-240-97-109-_55: rgba(168,168,168,.55);
  --ka-240-97-109-_7: rgba(168,168,168,.7);
  --ka-247-124-128-_45: rgba(186,186,186,.45);
  --ka-248-113-113-_07: rgba(180,180,180,.07);
  --ka-34-197-94-_12: rgba(245,193,20,.12);
  --ka-37-198-96-0: rgba(245,193,20,0);
  --ka-37-198-96-_07: rgba(245,193,20,.07);
  --ka-37-198-96-_12: rgba(245,193,20,.12);
  --ka-37-198-96-_15: rgba(245,193,20,.15);
  --ka-37-198-96-_18: rgba(245,193,20,.18);
  --ka-37-198-96-_2: rgba(245,193,20,.2);
  --ka-37-198-96-_20: rgba(245,193,20,.20);
  --ka-37-198-96-_22: rgba(245,193,20,.22);
  --ka-37-198-96-_28: rgba(245,193,20,.28);
  --ka-37-198-96-_35: rgba(245,193,20,.35);
  --ka-37-198-96-_6: rgba(245,193,20,.6);
  --ka-37-198-96-_7: rgba(245,193,20,.7);
  --ka-52-211-153-_08: rgba(245,193,20,.08);
  --ka-52-211-153-_45: rgba(245,193,20,.45);
  /* audit tampilan 12 Nov: warna yang belum punya nilai gelap + warna tulisan di atas warna naik / turun */
  --di-naik: #141921;
  --di-turun: #FFFFFF;
}
html[data-warna="kuning-hitam"][data-mode="gelap"] {
  --lilin-naik: #F5C518; --lilin-turun: #FFFFFF;
  --bg-d1f2dc: #302912;
  --bg-ddf5e6: #302912;
  --bg-e5f7f2: #302912;
  --bg-e8f8ee: #302912;
  --bg-ecfdf3: #302912;
  --bg-f3fbf6: #302912;
  --green: #F6C31E;
  --green-t: #E3CB7C;
  --green-tint: #302912;
  --red: #B4B4B4;
  --red-d: #A8A8A8;
  --tx-12753c: #E3CB7C;
  --tx-137a3a: #E3CB7C;
  --tx-7f1d1d: #D0D0D0;
  --tx-991b1b: #D0D0D0;
  --tx-b91c1c: #D0D0D0;
  --k-002818: #281F00;
  --k-00e676: #F6C31E;
  --k-00ff00: #F6C31E;
  --k-047857: #785D04;
  --k-06280f: #282006;
  --k-07130b: #131007;
  --k-0e7a3b: #7A610E;
  --k-0f7a3d: #7A610F;
  --k-12301f: #302912;
  --k-14532d: #534414;
  --k-16a34a: #F6C31E;
  --k-20b456: #F6C31E;
  --k-22c55e: #F6C31E;
  --k-25c660: #F6C31E;
  --k-2c0a0e: #1B1B1B;
  --k-34d06f: #F6C31E;
  --k-34d399: #F6C31E;
  --k-3cb371: #F6C31E;
  --k-6ee7a0: #E7CB6E;
  --k-7ce3a2: #E3CB7C;
  --k-86efac: #EFD686;
  --k-8b1515: #505050;
  --k-a7e3bc: #E3D5A7;
  --k-b7e4c7: #E4DAB7;
  --k-c6ebd6: #EBE2C6;
  --k-c81e1e: #808080;
  --k-c8ebdd: #EBE3C8;
  --k-dc2626: #808080;
  --k-e5484d: #808080;
  --k-ef4444: #808080;
  --k-effff5: #FFFBEF;
  --k-f05252: #808080;
  --k-f5c2c2: #DCDCDC;
  --k-f6cfcf: #E2E2E2;
  --k-f77c80: #BABABA;
  --k-f7d4d4: #E6E6E6;
  --k-f87171: #B4B4B4;
  --k-fca5a5: #D0D0D0;
  --k-ff3b30: #808080;
  --k-ff4d4d: #808080;
  --k-ff4d5e: #808080;
  --k-ffd5d5: #EAEAEA;
  --k-ffd9d4: #EAEAEA;
  --ka-18-117-60-_15: rgba(117,94,18,.15);
  --ka-200-30-30-_5: rgba(128,128,128,.5);
  --ka-239-68-68-_12: rgba(128,128,128,.12);
  --ka-239-68-68-_2: rgba(128,128,128,.2);
  --ka-239-68-68-_7: rgba(128,128,128,.7);
  --ka-240-68-56-_35: rgba(128,128,128,.35);
  --ka-240-82-82-_12: rgba(128,128,128,.12);
  --ka-240-97-109-0: rgba(168,168,168,0);
  --ka-240-97-109-_08: rgba(168,168,168,.08);
  --ka-240-97-109-_15: rgba(168,168,168,.15);
  --ka-240-97-109-_22: rgba(168,168,168,.22);
  --ka-240-97-109-_28: rgba(168,168,168,.28);
  --ka-240-97-109-_35: rgba(168,168,168,.35);
  --ka-240-97-109-_55: rgba(168,168,168,.55);
  --ka-240-97-109-_7: rgba(168,168,168,.7);
  --ka-247-124-128-_45: rgba(186,186,186,.45);
  --ka-248-113-113-_07: rgba(180,180,180,.07);
  --ka-34-197-94-_12: rgba(246,195,30,.12);
  --ka-37-198-96-0: rgba(246,195,30,0);
  --ka-37-198-96-_07: rgba(246,195,30,.07);
  --ka-37-198-96-_12: rgba(246,195,30,.12);
  --ka-37-198-96-_15: rgba(246,195,30,.15);
  --ka-37-198-96-_18: rgba(246,195,30,.18);
  --ka-37-198-96-_2: rgba(246,195,30,.2);
  --ka-37-198-96-_20: rgba(246,195,30,.20);
  --ka-37-198-96-_22: rgba(246,195,30,.22);
  --ka-37-198-96-_28: rgba(246,195,30,.28);
  --ka-37-198-96-_35: rgba(246,195,30,.35);
  --ka-37-198-96-_6: rgba(246,195,30,.6);
  --ka-37-198-96-_7: rgba(246,195,30,.7);
  --ka-52-211-153-_08: rgba(246,195,30,.08);
  --ka-52-211-153-_45: rgba(246,195,30,.45);
  /* audit tampilan 12 Nov: warna yang belum punya nilai gelap + warna tulisan di atas warna naik / turun */
  --bd-fecaca: #4A4A4A;
  --bg-fdecec: #2A2A2A;
  --bg-fee2e2: #2A2A2A;
  --bg-fef2f2: #262626;
  --bg-fff5f5: #262626;
  --bg-fff7f7: #262626;
  --red-tint: #2A2A2A;
  --tx-7c2d12: #FDBA74;
  --tx-9a3412: #FDBA74;
  --di-naik: #141921;
  --di-turun: #141921;
}
html[data-warna="biru-abu"] {
  --lilin-naik: #3B82F6; --lilin-turun: #9AA3B0;
  --bd-fecaca: #E1E3E7;
  --bg-d1f2dc: #D1DEF2;
  --bg-ddf5e6: #DDE6F5;
  --bg-e5f7f2: #E5ECF7;
  --bg-e8f8ee: #E8EEF8;
  --bg-ecfdf3: #ECF3FD;
  --bg-f3fbf6: #F3F6FB;
  --bg-fdecec: #F3F4F6;
  --bg-fee2e2: #EEF0F2;
  --bg-fef2f2: #F7F8F9;
  --bg-fff5f5: #F9FAFB;
  --bg-fff7f7: #FBFBFB;
  --green: #3F84F3;
  --green-t: #123875;
  --green-tint: #E5ECF7;
  --red: #6E7887;
  --red-d: #A0A7B1;
  --red-tint: #F3F4F6;
  --tx-12753c: #123875;
  --tx-137a3a: #133A7A;
  --tx-7c2d12: #41464D;
  --tx-7f1d1d: #484D54;
  --tx-991b1b: #525962;
  --tx-9a3412: #4E555E;
  --tx-b91c1c: #6E7887;
  --k-002818: #000F28;
  --k-00e676: #3F84F3;
  --k-00ff00: #3F84F3;
  --k-047857: #043078;
  --k-06280f: #061328;
  --k-07130b: #070C13;
  --k-0e7a3b: #0E377A;
  --k-0f7a3d: #0F387A;
  --k-12301f: #121D30;
  --k-14532d: #142C53;
  --k-16a34a: #3F84F3;
  --k-20b456: #3F84F3;
  --k-22c55e: #3F84F3;
  --k-25c660: #3F84F3;
  --k-2c0a0e: #191B1D;
  --k-34d06f: #3F84F3;
  --k-34d399: #3F84F3;
  --k-3cb371: #3F84F3;
  --k-6ee7a0: #6E9CE7;
  --k-7ce3a2: #7CA3E3;
  --k-86efac: #86AEEF;
  --k-8b1515: #494F57;
  --k-a7e3bc: #A7BEE3;
  --k-b7e4c7: #B7C8E4;
  --k-c6ebd6: #C6D4EB;
  --k-c81e1e: #6E7887;
  --k-c8ebdd: #C8D5EB;
  --k-dc2626: #6E7887;
  --k-e5484d: #6E7887;
  --k-ef4444: #6E7887;
  --k-effff5: #EFF5FF;
  --k-f05252: #6E7887;
  --k-f5c2c2: #D8DBDF;
  --k-f6cfcf: #E0E2E5;
  --k-f77c80: #B2B8C1;
  --k-f7d4d4: #E3E5E8;
  --k-f87171: #ACB3BD;
  --k-fca5a5: #CBD0D6;
  --k-ff3b30: #6E7887;
  --k-ff4d4d: #6E7887;
  --k-ff4d5e: #6E7887;
  --k-ffd5d5: #E7EAED;
  --k-ffd9d4: #E7E9EC;
  --ka-18-117-60-_15: rgba(18,56,117,.15);
  --ka-200-30-30-_5: rgba(110,120,135,.5);
  --ka-239-68-68-_12: rgba(110,120,135,.12);
  --ka-239-68-68-_2: rgba(110,120,135,.2);
  --ka-239-68-68-_7: rgba(110,120,135,.7);
  --ka-240-68-56-_35: rgba(110,120,135,.35);
  --ka-240-82-82-_12: rgba(110,120,135,.12);
  --ka-240-97-109-0: rgba(160,167,177,0);
  --ka-240-97-109-_08: rgba(160,167,177,.08);
  --ka-240-97-109-_15: rgba(160,167,177,.15);
  --ka-240-97-109-_22: rgba(160,167,177,.22);
  --ka-240-97-109-_28: rgba(160,167,177,.28);
  --ka-240-97-109-_35: rgba(160,167,177,.35);
  --ka-240-97-109-_55: rgba(160,167,177,.55);
  --ka-240-97-109-_7: rgba(160,167,177,.7);
  --ka-247-124-128-_45: rgba(178,184,193,.45);
  --ka-248-113-113-_07: rgba(172,179,189,.07);
  --ka-34-197-94-_12: rgba(63,132,243,.12);
  --ka-37-198-96-0: rgba(63,132,243,0);
  --ka-37-198-96-_07: rgba(63,132,243,.07);
  --ka-37-198-96-_12: rgba(63,132,243,.12);
  --ka-37-198-96-_15: rgba(63,132,243,.15);
  --ka-37-198-96-_18: rgba(63,132,243,.18);
  --ka-37-198-96-_2: rgba(63,132,243,.2);
  --ka-37-198-96-_20: rgba(63,132,243,.20);
  --ka-37-198-96-_22: rgba(63,132,243,.22);
  --ka-37-198-96-_28: rgba(63,132,243,.28);
  --ka-37-198-96-_35: rgba(63,132,243,.35);
  --ka-37-198-96-_6: rgba(63,132,243,.6);
  --ka-37-198-96-_7: rgba(63,132,243,.7);
  --ka-52-211-153-_08: rgba(63,132,243,.08);
  --ka-52-211-153-_45: rgba(63,132,243,.45);
  /* audit tampilan 12 Nov: warna yang belum punya nilai gelap + warna tulisan di atas warna naik / turun */
  --di-naik: #141921;
  --di-turun: #FFFFFF;
}
html[data-warna="biru-abu"][data-mode="gelap"] {
  --lilin-naik: #3B82F6; --lilin-turun: #9AA3B0;
  --bg-d1f2dc: #121D30;
  --bg-ddf5e6: #121D30;
  --bg-e5f7f2: #121D30;
  --bg-e8f8ee: #121D30;
  --bg-ecfdf3: #121D30;
  --bg-f3fbf6: #121D30;
  --green: #498AF3;
  --green-t: #7CA3E3;
  --green-tint: #121D30;
  --red: #ACB3BD;
  --red-d: #A0A7B1;
  --tx-12753c: #7CA3E3;
  --tx-137a3a: #7CA3E3;
  --tx-7f1d1d: #CBD0D6;
  --tx-991b1b: #CBD0D6;
  --tx-b91c1c: #CBD0D6;
  --k-002818: #000F28;
  --k-00e676: #498AF3;
  --k-00ff00: #498AF3;
  --k-047857: #043078;
  --k-06280f: #061328;
  --k-07130b: #070C13;
  --k-0e7a3b: #0E377A;
  --k-0f7a3d: #0F387A;
  --k-12301f: #121D30;
  --k-14532d: #142C53;
  --k-16a34a: #498AF3;
  --k-20b456: #498AF3;
  --k-22c55e: #498AF3;
  --k-25c660: #498AF3;
  --k-2c0a0e: #191B1D;
  --k-34d06f: #498AF3;
  --k-34d399: #498AF3;
  --k-3cb371: #498AF3;
  --k-6ee7a0: #6E9CE7;
  --k-7ce3a2: #7CA3E3;
  --k-86efac: #86AEEF;
  --k-8b1515: #494F57;
  --k-a7e3bc: #A7BEE3;
  --k-b7e4c7: #B7C8E4;
  --k-c6ebd6: #C6D4EB;
  --k-c81e1e: #788391;
  --k-c8ebdd: #C8D5EB;
  --k-dc2626: #788391;
  --k-e5484d: #788391;
  --k-ef4444: #788391;
  --k-effff5: #EFF5FF;
  --k-f05252: #788391;
  --k-f5c2c2: #D8DBDF;
  --k-f6cfcf: #E0E2E5;
  --k-f77c80: #B2B8C1;
  --k-f7d4d4: #E3E5E8;
  --k-f87171: #ACB3BD;
  --k-fca5a5: #CBD0D6;
  --k-ff3b30: #788391;
  --k-ff4d4d: #788391;
  --k-ff4d5e: #788391;
  --k-ffd5d5: #E7EAED;
  --k-ffd9d4: #E7E9EC;
  --ka-18-117-60-_15: rgba(18,56,117,.15);
  --ka-200-30-30-_5: rgba(120,131,145,.5);
  --ka-239-68-68-_12: rgba(120,131,145,.12);
  --ka-239-68-68-_2: rgba(120,131,145,.2);
  --ka-239-68-68-_7: rgba(120,131,145,.7);
  --ka-240-68-56-_35: rgba(120,131,145,.35);
  --ka-240-82-82-_12: rgba(120,131,145,.12);
  --ka-240-97-109-0: rgba(160,167,177,0);
  --ka-240-97-109-_08: rgba(160,167,177,.08);
  --ka-240-97-109-_15: rgba(160,167,177,.15);
  --ka-240-97-109-_22: rgba(160,167,177,.22);
  --ka-240-97-109-_28: rgba(160,167,177,.28);
  --ka-240-97-109-_35: rgba(160,167,177,.35);
  --ka-240-97-109-_55: rgba(160,167,177,.55);
  --ka-240-97-109-_7: rgba(160,167,177,.7);
  --ka-247-124-128-_45: rgba(178,184,193,.45);
  --ka-248-113-113-_07: rgba(172,179,189,.07);
  --ka-34-197-94-_12: rgba(73,138,243,.12);
  --ka-37-198-96-0: rgba(73,138,243,0);
  --ka-37-198-96-_07: rgba(73,138,243,.07);
  --ka-37-198-96-_12: rgba(73,138,243,.12);
  --ka-37-198-96-_15: rgba(73,138,243,.15);
  --ka-37-198-96-_18: rgba(73,138,243,.18);
  --ka-37-198-96-_2: rgba(73,138,243,.2);
  --ka-37-198-96-_20: rgba(73,138,243,.20);
  --ka-37-198-96-_22: rgba(73,138,243,.22);
  --ka-37-198-96-_28: rgba(73,138,243,.28);
  --ka-37-198-96-_35: rgba(73,138,243,.35);
  --ka-37-198-96-_6: rgba(73,138,243,.6);
  --ka-37-198-96-_7: rgba(73,138,243,.7);
  --ka-52-211-153-_08: rgba(73,138,243,.08);
  --ka-52-211-153-_45: rgba(73,138,243,.45);
  /* audit tampilan 12 Nov: warna yang belum punya nilai gelap + warna tulisan di atas warna naik / turun */
  --bd-fecaca: #474A4E;
  --bg-fdecec: #282A2C;
  --bg-fee2e2: #282A2C;
  --bg-fef2f2: #242527;
  --bg-fff5f5: #242527;
  --bg-fff7f7: #242527;
  --red-tint: #282A2C;
  --tx-7c2d12: #FDBA74;
  --tx-9a3412: #FDBA74;
  --di-naik: #141921;
  --di-turun: #141921;
}
html[data-warna="ungu-emas"] {
  --lilin-naik: #A78BFA; --lilin-turun: #E0B34A;
  --bd-fecaca: #FEEDCA;
  --bg-d1f2dc: #DDD1F2;
  --bg-ddf5e6: #E6DDF5;
  --bg-e5f7f2: #ECE5F7;
  --bg-e8f8ee: #EEE8F8;
  --bg-ecfdf3: #F2ECFD;
  --bg-f3fbf6: #F6F3FB;
  --bg-fdecec: #FDF7EC;
  --bg-fee2e2: #FEF5E2;
  --bg-fef2f2: #FEFAF2;
  --bg-fff5f5: #FFFCF5;
  --bg-fff7f7: #FFFCF7;
  --green: #A779F6;
  --green-t: #361275;
  --green-tint: #ECE5F7;
  --red: #8F6410;
  --red-d: #F0C061;
  --red-tint: #FDF7EC;
  --tx-12753c: #361275;
  --tx-137a3a: #39137A;
  --tx-7c2d12: #7C5912;
  --tx-7f1d1d: #7F5E1D;
  --tx-991b1b: #996F1B;
  --tx-9a3412: #9A6D12;
  --tx-b91c1c: #B68116;
  --k-002818: #0F0028;
  --k-00e676: #A779F6;
  --k-00ff00: #A779F6;
  --k-047857: #2F0478;
  --k-06280f: #120628;
  --k-07130b: #0B0713;
  --k-0e7a3b: #360E7A;
  --k-0f7a3d: #360F7A;
  --k-12301f: #1D1230;
  --k-14532d: #2B1453;
  --k-16a34a: #A779F6;
  --k-20b456: #A779F6;
  --k-22c55e: #A779F6;
  --k-25c660: #A779F6;
  --k-2c0a0e: #2C210A;
  --k-34d06f: #A779F6;
  --k-34d399: #A779F6;
  --k-3cb371: #A779F6;
  --k-6ee7a0: #9A6EE7;
  --k-7ce3a2: #A27CE3;
  --k-86efac: #AD86EF;
  --k-8b1515: #8B6415;
  --k-a7e3bc: #BDA7E3;
  --k-b7e4c7: #C8B7E4;
  --k-c6ebd6: #D4C6EB;
  --k-c81e1e: #B68116;
  --k-c8ebdd: #D5C8EB;
  --k-dc2626: #B68116;
  --k-e5484d: #B68116;
  --k-ef4444: #B68116;
  --k-effff5: #F5EFFF;
  --k-f05252: #B68116;
  --k-f5c2c2: #F5E4C2;
  --k-f6cfcf: #F6E9CF;
  --k-f77c80: #F7CE7C;
  --k-f7d4d4: #F7EBD4;
  --k-f87171: #F8CB71;
  --k-fca5a5: #FCDFA5;
  --k-ff3b30: #B68116;
  --k-ff4d4d: #B68116;
  --k-ff4d5e: #B68116;
  --k-ffd5d5: #FFF1D5;
  --k-ffd9d4: #FFF1D4;
  --ka-18-117-60-_15: rgba(54,18,117,.15);
  --ka-200-30-30-_5: rgba(182,129,22,.5);
  --ka-239-68-68-_12: rgba(182,129,22,.12);
  --ka-239-68-68-_2: rgba(182,129,22,.2);
  --ka-239-68-68-_7: rgba(182,129,22,.7);
  --ka-240-68-56-_35: rgba(182,129,22,.35);
  --ka-240-82-82-_12: rgba(182,129,22,.12);
  --ka-240-97-109-0: rgba(240,192,97,0);
  --ka-240-97-109-_08: rgba(240,192,97,.08);
  --ka-240-97-109-_15: rgba(240,192,97,.15);
  --ka-240-97-109-_22: rgba(240,192,97,.22);
  --ka-240-97-109-_28: rgba(240,192,97,.28);
  --ka-240-97-109-_35: rgba(240,192,97,.35);
  --ka-240-97-109-_55: rgba(240,192,97,.55);
  --ka-240-97-109-_7: rgba(240,192,97,.7);
  --ka-247-124-128-_45: rgba(247,206,124,.45);
  --ka-248-113-113-_07: rgba(248,203,113,.07);
  --ka-34-197-94-_12: rgba(167,121,246,.12);
  --ka-37-198-96-0: rgba(167,121,246,0);
  --ka-37-198-96-_07: rgba(167,121,246,.07);
  --ka-37-198-96-_12: rgba(167,121,246,.12);
  --ka-37-198-96-_15: rgba(167,121,246,.15);
  --ka-37-198-96-_18: rgba(167,121,246,.18);
  --ka-37-198-96-_2: rgba(167,121,246,.2);
  --ka-37-198-96-_20: rgba(167,121,246,.20);
  --ka-37-198-96-_22: rgba(167,121,246,.22);
  --ka-37-198-96-_28: rgba(167,121,246,.28);
  --ka-37-198-96-_35: rgba(167,121,246,.35);
  --ka-37-198-96-_6: rgba(167,121,246,.6);
  --ka-37-198-96-_7: rgba(167,121,246,.7);
  --ka-52-211-153-_08: rgba(167,121,246,.08);
  --ka-52-211-153-_45: rgba(167,121,246,.45);
  /* audit tampilan 12 Nov: warna yang belum punya nilai gelap + warna tulisan di atas warna naik / turun */
  --di-naik: #141921;
  --di-turun: #141921;
}
html[data-warna="ungu-emas"][data-mode="gelap"] {
  --lilin-naik: #A78BFA; --lilin-turun: #E0B34A;
  --bg-d1f2dc: #1D1230;
  --bg-ddf5e6: #1D1230;
  --bg-e5f7f2: #1D1230;
  --bg-e8f8ee: #1D1230;
  --bg-ecfdf3: #1D1230;
  --bg-f3fbf6: #1D1230;
  --green: #AD82F7;
  --green-t: #A27CE3;
  --green-tint: #1D1230;
  --red: #F8CB71;
  --red-d: #F0C061;
  --tx-12753c: #A27CE3;
  --tx-137a3a: #A27CE3;
  --tx-7f1d1d: #FCDFA5;
  --tx-991b1b: #FCDFA5;
  --tx-b91c1c: #FCDFA5;
  --k-002818: #0F0028;
  --k-00e676: #AD82F7;
  --k-00ff00: #AD82F7;
  --k-047857: #2F0478;
  --k-06280f: #120628;
  --k-07130b: #0B0713;
  --k-0e7a3b: #360E7A;
  --k-0f7a3d: #360F7A;
  --k-12301f: #1D1230;
  --k-14532d: #2B1453;
  --k-16a34a: #AD82F7;
  --k-20b456: #AD82F7;
  --k-22c55e: #AD82F7;
  --k-25c660: #AD82F7;
  --k-2c0a0e: #2C210A;
  --k-34d06f: #AD82F7;
  --k-34d399: #AD82F7;
  --k-3cb371: #AD82F7;
  --k-6ee7a0: #9A6EE7;
  --k-7ce3a2: #A27CE3;
  --k-86efac: #AD86EF;
  --k-8b1515: #8B6415;
  --k-a7e3bc: #BDA7E3;
  --k-b7e4c7: #C8B7E4;
  --k-c6ebd6: #D4C6EB;
  --k-c81e1e: #D1941A;
  --k-c8ebdd: #D5C8EB;
  --k-dc2626: #D1941A;
  --k-e5484d: #D1941A;
  --k-ef4444: #D1941A;
  --k-effff5: #F5EFFF;
  --k-f05252: #D1941A;
  --k-f5c2c2: #F5E4C2;
  --k-f6cfcf: #F6E9CF;
  --k-f77c80: #F7CE7C;
  --k-f7d4d4: #F7EBD4;
  --k-f87171: #F8CB71;
  --k-fca5a5: #FCDFA5;
  --k-ff3b30: #D1941A;
  --k-ff4d4d: #D1941A;
  --k-ff4d5e: #D1941A;
  --k-ffd5d5: #FFF1D5;
  --k-ffd9d4: #FFF1D4;
  --ka-18-117-60-_15: rgba(54,18,117,.15);
  --ka-200-30-30-_5: rgba(209,148,26,.5);
  --ka-239-68-68-_12: rgba(209,148,26,.12);
  --ka-239-68-68-_2: rgba(209,148,26,.2);
  --ka-239-68-68-_7: rgba(209,148,26,.7);
  --ka-240-68-56-_35: rgba(209,148,26,.35);
  --ka-240-82-82-_12: rgba(209,148,26,.12);
  --ka-240-97-109-0: rgba(240,192,97,0);
  --ka-240-97-109-_08: rgba(240,192,97,.08);
  --ka-240-97-109-_15: rgba(240,192,97,.15);
  --ka-240-97-109-_22: rgba(240,192,97,.22);
  --ka-240-97-109-_28: rgba(240,192,97,.28);
  --ka-240-97-109-_35: rgba(240,192,97,.35);
  --ka-240-97-109-_55: rgba(240,192,97,.55);
  --ka-240-97-109-_7: rgba(240,192,97,.7);
  --ka-247-124-128-_45: rgba(247,206,124,.45);
  --ka-248-113-113-_07: rgba(248,203,113,.07);
  --ka-34-197-94-_12: rgba(173,130,247,.12);
  --ka-37-198-96-0: rgba(173,130,247,0);
  --ka-37-198-96-_07: rgba(173,130,247,.07);
  --ka-37-198-96-_12: rgba(173,130,247,.12);
  --ka-37-198-96-_15: rgba(173,130,247,.15);
  --ka-37-198-96-_18: rgba(173,130,247,.18);
  --ka-37-198-96-_2: rgba(173,130,247,.2);
  --ka-37-198-96-_20: rgba(173,130,247,.20);
  --ka-37-198-96-_22: rgba(173,130,247,.22);
  --ka-37-198-96-_28: rgba(173,130,247,.28);
  --ka-37-198-96-_35: rgba(173,130,247,.35);
  --ka-37-198-96-_6: rgba(173,130,247,.6);
  --ka-37-198-96-_7: rgba(173,130,247,.7);
  --ka-52-211-153-_08: rgba(173,130,247,.08);
  --ka-52-211-153-_45: rgba(173,130,247,.45);
  /* audit tampilan 12 Nov: warna yang belum punya nilai gelap + warna tulisan di atas warna naik / turun */
  --bd-fecaca: #6B552A;
  --bg-fdecec: #3A2F1A;
  --bg-fee2e2: #3A2F1A;
  --bg-fef2f2: #332A18;
  --bg-fff5f5: #332A18;
  --bg-fff7f7: #332A18;
  --red-tint: #3A2F1A;
  --tx-7c2d12: #FDBA74;
  --tx-9a3412: #FDBA74;
  --di-naik: #141921;
  --di-turun: #141921;
}
html[data-warna="biru-putih"] {
  --lilin-naik: #38BDF8; --lilin-turun: #F1F5F9;
  --bd-fecaca: #E0E3E8;
  --bg-d1f2dc: #D1E8F2;
  --bg-ddf5e6: #DDEDF5;
  --bg-e5f7f2: #E5F1F7;
  --bg-e8f8ee: #E8F3F8;
  --bg-ecfdf3: #ECF8FD;
  --bg-f3fbf6: #F3F8FB;
  --bg-fdecec: #F3F4F6;
  --bg-fee2e2: #EEF0F2;
  --bg-fef2f2: #F7F8F9;
  --bg-fff5f5: #F9FAFB;
  --bg-fff7f7: #FAFBFC;
  --green: #3BBBF7;
  --green-t: #125675;
  --green-tint: #E5F1F7;
  --red: #4B5563;
  --red-d: #9CA6B5;
  --red-tint: #F3F4F6;
  --tx-12753c: #125675;
  --tx-137a3a: #13597A;
  --tx-7c2d12: #3E4650;
  --tx-7f1d1d: #464D56;
  --tx-991b1b: #4F5865;
  --tx-9a3412: #4B5461;
  --tx-b91c1c: #4B5563;
  --k-002818: #001B28;
  --k-00e676: #3BBBF7;
  --k-00ff00: #3BBBF7;
  --k-047857: #045378;
  --k-06280f: #061D28;
  --k-07130b: #070F13;
  --k-0e7a3b: #0E587A;
  --k-0f7a3d: #0F587A;
  --k-12301f: #122630;
  --k-14532d: #143F53;
  --k-16a34a: #3BBBF7;
  --k-20b456: #3BBBF7;
  --k-22c55e: #3BBBF7;
  --k-25c660: #3BBBF7;
  --k-2c0a0e: #181B1E;
  --k-34d06f: #3BBBF7;
  --k-34d399: #3BBBF7;
  --k-3cb371: #3BBBF7;
  --k-6ee7a0: #6EC1E7;
  --k-7ce3a2: #7CC2E3;
  --k-86efac: #86CEEF;
  --k-8b1515: #464E5A;
  --k-a7e3bc: #A7D0E3;
  --k-b7e4c7: #B7D6E4;
  --k-c6ebd6: #C6DFEB;
  --k-c81e1e: #4B5563;
  --k-c8ebdd: #C8E0EB;
  --k-dc2626: #4B5563;
  --k-e5484d: #4B5563;
  --k-ef4444: #4B5563;
  --k-effff5: #EFFAFF;
  --k-f05252: #4B5563;
  --k-f5c2c2: #D7DBE0;
  --k-f6cfcf: #DFE2E6;
  --k-f77c80: #AFB8C4;
  --k-f7d4d4: #E3E5E8;
  --k-f87171: #A9B3C0;
  --k-fca5a5: #C9CFD8;
  --k-ff3b30: #4B5563;
  --k-ff4d4d: #4B5563;
  --k-ff4d5e: #4B5563;
  --k-ffd5d5: #E6E9EE;
  --k-ffd9d4: #E6E9ED;
  --ka-18-117-60-_15: rgba(18,86,117,.15);
  --ka-200-30-30-_5: rgba(75,85,99,.5);
  --ka-239-68-68-_12: rgba(75,85,99,.12);
  --ka-239-68-68-_2: rgba(75,85,99,.2);
  --ka-239-68-68-_7: rgba(75,85,99,.7);
  --ka-240-68-56-_35: rgba(75,85,99,.35);
  --ka-240-82-82-_12: rgba(75,85,99,.12);
  --ka-240-97-109-0: rgba(156,166,181,0);
  --ka-240-97-109-_08: rgba(156,166,181,.08);
  --ka-240-97-109-_15: rgba(156,166,181,.15);
  --ka-240-97-109-_22: rgba(156,166,181,.22);
  --ka-240-97-109-_28: rgba(156,166,181,.28);
  --ka-240-97-109-_35: rgba(156,166,181,.35);
  --ka-240-97-109-_55: rgba(156,166,181,.55);
  --ka-240-97-109-_7: rgba(156,166,181,.7);
  --ka-247-124-128-_45: rgba(175,184,196,.45);
  --ka-248-113-113-_07: rgba(169,179,192,.07);
  --ka-34-197-94-_12: rgba(59,187,247,.12);
  --ka-37-198-96-0: rgba(59,187,247,0);
  --ka-37-198-96-_07: rgba(59,187,247,.07);
  --ka-37-198-96-_12: rgba(59,187,247,.12);
  --ka-37-198-96-_15: rgba(59,187,247,.15);
  --ka-37-198-96-_18: rgba(59,187,247,.18);
  --ka-37-198-96-_2: rgba(59,187,247,.2);
  --ka-37-198-96-_20: rgba(59,187,247,.20);
  --ka-37-198-96-_22: rgba(59,187,247,.22);
  --ka-37-198-96-_28: rgba(59,187,247,.28);
  --ka-37-198-96-_35: rgba(59,187,247,.35);
  --ka-37-198-96-_6: rgba(59,187,247,.6);
  --ka-37-198-96-_7: rgba(59,187,247,.7);
  --ka-52-211-153-_08: rgba(59,187,247,.08);
  --ka-52-211-153-_45: rgba(59,187,247,.45);
  /* audit tampilan 12 Nov: warna yang belum punya nilai gelap + warna tulisan di atas warna naik / turun */
  --di-naik: #141921;
  --di-turun: #FFFFFF;
}
html[data-warna="biru-putih"][data-mode="gelap"] {
  --lilin-naik: #38BDF8; --lilin-turun: #F1F5F9;
  --bg-d1f2dc: #122630;
  --bg-ddf5e6: #122630;
  --bg-e5f7f2: #122630;
  --bg-e8f8ee: #122630;
  --bg-ecfdf3: #122630;
  --bg-f3fbf6: #122630;
  --green: #45BFF7;
  --green-t: #7CC2E3;
  --green-tint: #122630;
  --red: #A9B3C0;
  --red-d: #9CA6B5;
  --tx-12753c: #7CC2E3;
  --tx-137a3a: #7CC2E3;
  --tx-7f1d1d: #C9CFD8;
  --tx-991b1b: #C9CFD8;
  --tx-b91c1c: #C9CFD8;
  --k-002818: #001B28;
  --k-00e676: #45BFF7;
  --k-00ff00: #45BFF7;
  --k-047857: #045378;
  --k-06280f: #061D28;
  --k-07130b: #070F13;
  --k-0e7a3b: #0E587A;
  --k-0f7a3d: #0F587A;
  --k-12301f: #122630;
  --k-14532d: #143F53;
  --k-16a34a: #45BFF7;
  --k-20b456: #45BFF7;
  --k-22c55e: #45BFF7;
  --k-25c660: #45BFF7;
  --k-2c0a0e: #181B1E;
  --k-34d06f: #45BFF7;
  --k-34d399: #45BFF7;
  --k-3cb371: #45BFF7;
  --k-6ee7a0: #6EC1E7;
  --k-7ce3a2: #7CC2E3;
  --k-86efac: #86CEEF;
  --k-8b1515: #464E5A;
  --k-a7e3bc: #A7D0E3;
  --k-b7e4c7: #B7D6E4;
  --k-c6ebd6: #C6DFEB;
  --k-c81e1e: #738296;
  --k-c8ebdd: #C8E0EB;
  --k-dc2626: #738296;
  --k-e5484d: #738296;
  --k-ef4444: #738296;
  --k-effff5: #EFFAFF;
  --k-f05252: #738296;
  --k-f5c2c2: #D7DBE0;
  --k-f6cfcf: #DFE2E6;
  --k-f77c80: #AFB8C4;
  --k-f7d4d4: #E3E5E8;
  --k-f87171: #A9B3C0;
  --k-fca5a5: #C9CFD8;
  --k-ff3b30: #738296;
  --k-ff4d4d: #738296;
  --k-ff4d5e: #738296;
  --k-ffd5d5: #E6E9EE;
  --k-ffd9d4: #E6E9ED;
  --ka-18-117-60-_15: rgba(18,86,117,.15);
  --ka-200-30-30-_5: rgba(115,130,150,.5);
  --ka-239-68-68-_12: rgba(115,130,150,.12);
  --ka-239-68-68-_2: rgba(115,130,150,.2);
  --ka-239-68-68-_7: rgba(115,130,150,.7);
  --ka-240-68-56-_35: rgba(115,130,150,.35);
  --ka-240-82-82-_12: rgba(115,130,150,.12);
  --ka-240-97-109-0: rgba(156,166,181,0);
  --ka-240-97-109-_08: rgba(156,166,181,.08);
  --ka-240-97-109-_15: rgba(156,166,181,.15);
  --ka-240-97-109-_22: rgba(156,166,181,.22);
  --ka-240-97-109-_28: rgba(156,166,181,.28);
  --ka-240-97-109-_35: rgba(156,166,181,.35);
  --ka-240-97-109-_55: rgba(156,166,181,.55);
  --ka-240-97-109-_7: rgba(156,166,181,.7);
  --ka-247-124-128-_45: rgba(175,184,196,.45);
  --ka-248-113-113-_07: rgba(169,179,192,.07);
  --ka-34-197-94-_12: rgba(69,191,247,.12);
  --ka-37-198-96-0: rgba(69,191,247,0);
  --ka-37-198-96-_07: rgba(69,191,247,.07);
  --ka-37-198-96-_12: rgba(69,191,247,.12);
  --ka-37-198-96-_15: rgba(69,191,247,.15);
  --ka-37-198-96-_18: rgba(69,191,247,.18);
  --ka-37-198-96-_2: rgba(69,191,247,.2);
  --ka-37-198-96-_20: rgba(69,191,247,.20);
  --ka-37-198-96-_22: rgba(69,191,247,.22);
  --ka-37-198-96-_28: rgba(69,191,247,.28);
  --ka-37-198-96-_35: rgba(69,191,247,.35);
  --ka-37-198-96-_6: rgba(69,191,247,.6);
  --ka-37-198-96-_7: rgba(69,191,247,.7);
  --ka-52-211-153-_08: rgba(69,191,247,.08);
  --ka-52-211-153-_45: rgba(69,191,247,.45);
  /* audit tampilan 12 Nov: warna yang belum punya nilai gelap + warna tulisan di atas warna naik / turun */
  --bd-fecaca: #454A50;
  --bg-fdecec: #272A2D;
  --bg-fee2e2: #272A2D;
  --bg-fef2f2: #232528;
  --bg-fff5f5: #232528;
  --bg-fff7f7: #232528;
  --red-tint: #272A2D;
  --tx-7c2d12: #FDBA74;
  --tx-9a3412: #FDBA74;
  --di-naik: #141921;
  --di-turun: #141921;
}

/* Gaya warna selain Klasik: logo, maskot, dan avatar bawaan (hijau) ditampilkan tanpa warna, supaya tidak ada hijau / merah tersisa */
html[data-warna]:not([data-warna="klasik"]) :is(img.logo, svg.tt-logo, svg.pd-bot, .nt-foto svg, .hf-bot, .splash svg, .splash img) { filter: grayscale(1); }   /* foto/avatar profil member tidak diubah (permintaan user 12 Nov) */

/* notulen: tanya dulu sebelum keluar (pertama kali dibuka hari itu) */
.nt-chat { position: relative; }
.nt-keluar { position: absolute; inset: 0; border-radius: inherit; background: rgba(8,10,14,.72); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 2; }
.nt-keluar > div { width: min(300px, 100%); background: var(--bg-fff); color: var(--tx-141921); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 8px; text-align: center; box-shadow: 0 12px 34px rgba(0,0,0,.45); }
.nt-keluar b { font-size: 15.5px; font-weight: 800; } .nt-keluar p { margin: 0; color: var(--tx-5b6472); font-size: 13px; line-height: 1.45; }
.nt-keluar span { display: flex; gap: 8px; margin-top: 4px; }

/* ===== 2E rapikan tampilan (12 Nov): tulisan samar hasil audit tiap gaya warna ===== */
html[data-mode="gelap"] .cal-hl { color: #FCD98A; }
html[data-mode="gelap"]:not([data-warna="klasik"]) .saran { color: #F3E3B5; } html[data-mode="gelap"]:not([data-warna="klasik"]) .saran b { color: #FCD98A; }
html[data-mode="gelap"]:not([data-warna="klasik"]) .sz .sz-lad { background: rgba(255,255,255,.06); } html[data-mode="gelap"]:not([data-warna="klasik"]) .sz .sz-lad b { color: #EEF1F5; } html[data-mode="gelap"]:not([data-warna="klasik"]) .sz .sz-lad > div + div { border-color: rgba(255,255,255,.14); }
.brt-an #anb-sym { color: inherit; opacity: .62; }   /* ikut warna judul: terbaca di kartu terang (HP) dan kartu gelap (laptop) */
html[data-mode="gelap"] .k-cloud { color: #BAE6FD; } html[data-mode="gelap"] .k-ai { color: #C7D2FE; } html[data-mode="gelap"] .k-langganan { color: #FCD98A; }
html[data-warna="ungu-emas"][data-mode="gelap"] .sz.sell .sz-tag { color: #141921; }
/* gaya Putih Hitam: lilin turun kosong bergaris, lilin naik putih penuh */
html[data-warna="putih-hitam"] .cdl.turun b { background: #141922 !important; box-shadow: inset 0 0 0 1px #8A8A8A; }

/* 3B mode news: tanda data cepat di kaki chart */
.c-cepat { margin-left: 8px; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--bg-fff7e6); color: #7C4A03; }
html[data-mode="gelap"] .c-cepat { background: #33290F; color: #FCD98A; }

/* ===== 3D kartu NEWS di halaman Sinyal (canvas bagian 28) ===== */
.nw-card { display: flex; flex-direction: column; gap: 9px; }
.nw-card[hidden] { display: none !important; }
.nw-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .nw-hd b { font-size: 14.5px; font-weight: 800; }
.nw-tg { font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 2px 8px; border-radius: 999px; background: #141921; color: #FCD34D; }
.nw-cd { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13px; padding: 2px 8px; border-radius: 8px; background: var(--bg-f4f5f7, #F4F5F7); color: var(--tx-141921, #141921); }
.nw-lain { color: var(--muted); font-size: 11.5px; margin-top: -4px; }
.nw-ar { border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.nw-ar b { font-size: 20px; font-weight: 800; } .nw-ar small { font-size: 12px; font-weight: 600; }
.nw-ar.n { background: var(--green-tint); color: var(--green-t); } .nw-ar.t { background: var(--red-tint); color: var(--red); } .nw-ar.x { background: var(--bg-f4f5f7, #F4F5F7); color: var(--tx-141921, #141921); }
.nw-yk { height: 7px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; } .nw-yk i { display: block; height: 100%; border-radius: 99px; background: currentColor; }
.nw-ang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nw-ang div { border: 1px solid var(--line, #E5E7EB); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; min-width: 0; }
.nw-ang small { font-size: 10.5px; color: var(--muted); font-weight: 700; } .nw-ang b { font-size: 14px; }
.nw-kb { font-size: 12px; line-height: 1.5; border-left: 3px solid #FDE68A; background: var(--bg-fff7e6, #FFFBEB); color: #78350F; padding: 7px 9px; border-radius: 0 8px 8px 0; }
.nw-lv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 12.5px; } .nw-lv span { color: var(--muted); font-weight: 600; } .nw-lv b { font-variant-numeric: tabular-nums; min-width: 0; }
.nw-ai { font-size: 12.5px; line-height: 1.5; background: var(--bg-f4f5f7, #F4F5F7); border-radius: 10px; padding: 8px 10px; }
.nw-pop { border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: #141921; }
.nw-pop b { font-size: 15px; font-weight: 800; } .nw-pop small { font-size: 12px; font-weight: 600; }
.nw-pop.ok { color: #34D06F; } .nw-pop.no { color: #F87171; }
.nw-ket { font-size: 11.5px; color: var(--muted); }
html[data-mode="gelap"] .nw-kb { background: #33290F; color: #FCD98A; border-left-color: #6B5516; }
html[data-mode="gelap"] .nw-yk { background: rgba(255,255,255,.12); }
@media (max-width: 860px) { .sig-panel[data-stab]:not([data-stab="sinyal"]) .sig-scroll > .nw-card { display: none !important; } }

/* ===== GELOMBANG 4A: pengaman tampilan (canvas bagian 30) ===== */
.am-wm { position: fixed; inset: -60px; z-index: 9000; pointer-events: none; display: flex; flex-wrap: wrap; gap: 38px 52px; align-content: flex-start; transform: rotate(-24deg); overflow: hidden; mix-blend-mode: difference; }   /* difference: lebih gelap di latar terang, lebih terang di latar gelap (chart) */
.am-wm span { font-size: 12px; font-weight: 700; white-space: nowrap; color: rgba(255,255,255,.075); user-select: none; }
html.am-buram body > :not(.am-tutup):not(.am-wm):not(.am-tahan) { filter: blur(14px); pointer-events: none; }
.am-tutup { position: fixed; inset: 0; z-index: 9500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px; background: rgba(11,14,19,.55); color: #fff; }
.am-tutup b { font-size: 17px; font-weight: 800; } .am-tutup small { font-size: 13px; color: #C9CFD8; max-width: 260px; }
html.am-kunci body > :not(.am-tahan) { display: none !important; }
.am-tahan { position: fixed; inset: 0; z-index: 9999; background: #0B0E13; display: flex; align-items: center; justify-content: center; padding: 20px; }
.am-tahan > div { width: min(420px, 100%); border-radius: 20px; background: #141A22; border: 1px solid #2C333D; padding: 28px 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: #fff; }
.am-tahan i { font-style: normal; width: 52px; height: 52px; border-radius: 50%; background: #3A1A1A; color: #FCA5A5; display: grid; place-items: center; font-weight: 800; font-size: 24px; }
.am-tahan b { font-size: 19px; font-weight: 800; } .am-tahan p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #A3ACB9; }
.am-tahan span { font-size: 13px; font-weight: 800; color: #34D06F; border: 1px solid #1F5A38; background: #12301F; border-radius: 12px; padding: 10px 12px; }
body[data-aman-wm="1"] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body[data-aman-wm="1"] input, body[data-aman-wm="1"] textarea { -webkit-user-select: text; user-select: text; }
@media print { body[data-aman] > * { display: none !important; } body[data-aman]::after { content: "Halaman ini tidak bisa dicetak."; display: block; padding: 40px; font: 700 16px sans-serif; } }

/* ===== GELOMBANG 4B: panel admin Keamanan ===== */
#am-root { display: flex; flex-direction: column; gap: 12px; } .am-ip { font-size: 12.5px; margin: 0; }
.am-ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.am-ul li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-2); min-width: 0; } .am-ul li:first-child { border-top: 0; }
.am-ul li span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .am-ul li b { font-size: 13.5px; } .am-ul li small { font-size: 12px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.am-ul li .btn { flex: none; }
.am-l.sedot b, .am-l.tempat-ulang b { color: var(--red); }
.am-m { border-top: 1px solid var(--border-2); padding: 8px 0; } .am-m:first-of-type { border-top: 0; margin-top: 6px; }
.am-m summary { cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .am-m summary small { color: var(--muted); font-size: 12px; }
.am-ak { display: flex; gap: 8px; margin-top: 8px; }
.am-cfg { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 10px 0 12px; }
.am-cfg label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.am-cfg input { border: 1px solid var(--border-2); border-radius: 10px; padding: 8px 10px; font: inherit; font-weight: 700; color: inherit; background: var(--bg-fff); }

/* UKURAN CHART seperti YouTube: Biasa / Lebar / Teater (13 Nov). Hanya di layar >= 1200 px; di bawah itu chart sudah selebar halaman. */
.c-ukur { display: none; }
@media (min-width: 1200px) {
  .c-ukur { display: inline-flex; gap: 2px; margin-left: 10px; padding: 2px; border-radius: 9px; border: 1px solid rgba(255,255,255,.16); }
  .c-ukur button { display: grid; place-items: center; width: 30px; height: 24px; padding: 0; border: 0; border-radius: 7px; background: none; color: inherit; opacity: .7; cursor: pointer; }
  .c-ukur button:hover { opacity: 1; } .c-ukur button[aria-pressed="true"] { background: rgba(255,255,255,.18); color: #fff; opacity: 1; }
  .c-ukur button:focus-visible { outline: 2px solid #93C5FD; outline-offset: 1px; }
  html[data-ukur="lebar"] body .sig-page { grid-template-rows: auto auto auto !important; grid-template-areas: "price chips chips" "chart chart side" "tren tren side" !important; }
  html[data-ukur="teater"] body .sig-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto !important; grid-template-areas: "price chips" "chart chart" "side tren" !important; }
  html[data-ukur="lebar"] .tren-side, html[data-ukur="teater"] .tren-side { position: static; max-height: none; overflow: visible; }
  html[data-ukur="lebar"] .tren-side { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
}

/* audit ikon 13 Nov: ikon kategori berita Kripto dan Bank Sentral terlalu gelap di mode gelap */
html[data-mode="gelap"] .nr-ic[data-c="Kripto"] { color: #C4B5FD; } html[data-mode="gelap"] .nr-ic[data-c="Bank Sentral"] { color: #7DD3FC; }

/* FOOTER sniperkidz (13 Nov): blok gelap di akhir tiap halaman member; nama raksasa memenuhi lebar. */
.kaki { margin-top: 12px; border-radius: 22px; background: #141921; color: #EEF1F5; padding: 18px 20px 16px; border: 1px solid rgba(255,255,255,.07); overflow: clip; }
.kk-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 20px; font-size: 12.5px; line-height: 1.5; color: #A3ACB9; }
.kk-info b { display: block; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: #EEF1F5; margin-bottom: 3px; }
.kk-info a { color: #EEF1F5; text-decoration: underline; text-underline-offset: 2px; } .kk-info a:hover { color: var(--green); }
.kk-info a:focus-visible { outline: 2px solid #93C5FD; outline-offset: 2px; border-radius: 4px; }
.kk-nm { position: relative; margin-top: 16px; width: 100%; aspect-ratio: 4.8378; cursor: crosshair; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.kk-hrf { position: absolute; inset: 0; background: #F4EFE3; -webkit-mask: url("sniperkidz.png") center / 100% 100% no-repeat; mask: url("sniperkidz.png") center / 100% 100% no-repeat; transition: background-color .25s; }
.kk-nm.kunci .kk-hrf { background: var(--green); }
.kk-mt { position: absolute; aspect-ratio: 1; border-radius: 50%; background: #141921; transform: translate(-50%, -50%); will-change: transform; }
.kk-mt::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--green); opacity: 0; transition: opacity .2s; }
.kk-nm.kunci .kk-mt::after { opacity: 1; }
@media (max-width: 860px) { .kaki { border-radius: 18px; padding: 14px 14px 12px; } body.page-sinyal .kaki { display: none; } }   /* HP halaman Sinyal: tata letaknya setinggi layar, tidak ada tempat untuk footer */
html.hanya-chart .kaki { display: none !important; }

/* Peringatan TP lintas pair (T-037): 1 kartu, ditutup manual. HP: di atas tabbar, dengan jalur kiri 38 px (Pengingat berita) dan kanan 66 px (maskot bantuan) dibiarkan bebas; laptop: pojok kanan bawah di atas maskot. */
.pd-segera { position: fixed; z-index: 9990; left: 38px; width: calc(100vw - 104px); bottom: calc(var(--tab-h, 64px) + env(safe-area-inset-bottom, 0px) + 8px); display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
@media (min-width: 861px) { .pd-segera { bottom: 100px; left: auto; right: 20px; width: 380px; } }
.pd-sg { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 6px 2px 4px 10px; border-radius: 16px; background: #141921; color: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.35); touch-action: pan-x; }
.pd-sg.al { border: 2px solid var(--k-dc2626); }
.pd-sg i { flex: none; width: 26px; height: 26px; border-radius: 9px; background: #16a34a; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 14px; }
.pd-sg.al i { background: var(--k-dc2626); }
.pd-sg > a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; color: inherit; text-decoration: none; min-height: 44px; justify-content: center; }
.pd-sg b { font-size: 14px; line-height: 1.25; white-space: nowrap; }
.pd-sg em { font-style: normal; font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.pd-sg small { font-size: 11.5px; line-height: 1.25; color: #D1D5DB; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pd-sg small.pd-sg-fin { display: block; font-size: 10.5px; opacity: .85; }
.pd-sg-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #D1D5DB; font-size: 24px; line-height: 1; cursor: pointer; }
.pd-sg-foot { flex: 0 0 100%; order: 9; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 10px 0 0; font-size: 12px; font-weight: 700; }
.pd-sg-foot button { min-height: 36px; padding: 0 10px; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
html[data-tema="sniperkidz"] .pd-sg { background: var(--sk-ink); color: var(--sk-krm); border: 3px solid var(--sk-hitam); box-shadow: 4px 4px 0 var(--sk-hj); }
html[data-tema="sniperkidz"] .pd-sg.al { border-color: var(--sk-mrh); box-shadow: 4px 4px 0 var(--sk-mrh); }
html[data-tema="sniperkidz"] .pd-sg i { background: var(--sk-hj); color: var(--sk-ink); border-radius: 8px; }
html[data-tema="sniperkidz"] .pd-sg.al i { background: var(--sk-mrh); color: #fff; width: 34px; height: 34px; font-family: var(--sk-judul); font-size: 22px; clip-path: polygon(50% 0, 62% 18%, 82% 8%, 80% 30%, 100% 36%, 86% 54%, 98% 74%, 76% 76%, 70% 98%, 52% 84%, 32% 98%, 28% 76%, 4% 72%, 18% 52%, 2% 34%, 24% 30%, 28% 8%, 42% 20%); }
html[data-tema="sniperkidz"] .pd-sg b { font-family: var(--sk-judul); font-weight: 400; letter-spacing: .01em; }
html[data-tema="sniperkidz"] .pd-sg em { color: var(--sk-hj); }
html[data-tema="sniperkidz"] .pd-sg small { color: #B8BFCC; }
html[data-tema="sniperkidz"] .pd-sg-x, html[data-tema="sniperkidz"] .pd-sg-foot { color: var(--sk-krm); }

/* panel Sinyal tema basic: peringatan kecil di bawah kartu sinyal (T-061); di tema 18+ disembunyikan lewat sk/sniperkidz.css */
.sg-disc { margin: 10px 0 0; font-size: 12px; line-height: 1.45; }