/* ============================================
   Memecoin Bot — tema gelap (gaya SysComplex)
   ============================================ */
:root {
  color-scheme: dark;
  --bg: #111316; --bg2: #15181c; --card: #1a1e23; --card2: #21262c; --card3: #272d34;
  --ink: #eceff3; --muted: #8e97a3; --line: #2b323a; --line2: #353d47;
  --accent: #ff8a1f; --accent2: #ffc14d; --accent-ink: #1a1206; --accent-bg: rgba(255,138,31,.14);
  --side: #0d0f12; --side-ink: #b7bfc9;
  --ok: #3ddc84; --ok-bg: rgba(61,220,132,.14);
  --warn: #ffc14d; --warn-bg: rgba(255,193,77,.16);
  --bad: #ff5c5c; --bad-bg: rgba(255,92,92,.14);
  --info: #5db0ff; --info-bg: rgba(93,176,255,.14);
  --r: 8px; --rb: 6px;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 22px rgba(0,0,0,.45);
  --glow: 0 0 0 1px rgba(255,138,31,.45), 0 6px 18px rgba(255,138,31,.28);
  --font-d: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font-b: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-n: "JetBrains Mono", Consolas, "Courier New", monospace;
  --side-w: 236px; --top-h: 56px;
  /* alias lama */
  --green: var(--ok); --red: var(--bad); --amber: var(--warn); --text: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 14px/1.45 var(--font-b); color: var(--ink); background-color: var(--bg);
  background-image: linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: 28px 28px;
}
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--font-d); letter-spacing: .01em; }
h1 { font-size: 22px; margin: 6px 0; }
a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.num, .mono { font-family: var(--font-n); font-feature-settings: "tnum"; }
.up { color: var(--ok); } .down { color: var(--bad); } .warn { color: var(--warn); }
.addr { font-family: var(--font-n); font-size: 12px; color: var(--muted); word-break: break-all; }
.empty { color: var(--muted); text-align: center; padding: 22px; }

/* ── login ── */
.center { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(900px 500px at 85% -10%, rgba(255,138,31,.16), transparent 60%); }
.narrow { max-width: 380px; width: 100%; }
.login-card { padding: 26px; }
.login-card .eyebrow { font-size: 11px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.login-card .note { margin-top: 14px; padding: 10px 12px; border-radius: var(--rb); background: var(--info-bg);
  border: 1px solid rgba(93,176,255,.3); color: #cfe6ff; font-size: 13px; }

/* ── layout ── */
.top { position: fixed; inset: 0 0 auto 0; height: calc(var(--top-h) + env(safe-area-inset-top)); z-index: 20;
  display: flex; align-items: center; gap: 12px; padding: env(safe-area-inset-top) 14px 0;
  background: var(--side); border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 10px; align-items: center; min-width: 0; }
.brand .logo { width: 30px; height: 30px; border-radius: 7px; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font: 700 15px var(--font-d); flex: none; }
.brand b { font-family: var(--font-d); font-size: 15px; display: block; white-space: nowrap; }
.brand small { color: var(--muted); font-size: 11px; display: block; white-space: nowrap; }
.top .grow { flex: 1; }
.top select { max-width: 180px; }
.hamb { display: none; background: none; border: 0; color: var(--ink); font-size: 20px; padding: 4px 6px; cursor: pointer; }

.side { position: fixed; top: calc(var(--top-h) + env(safe-area-inset-top)); bottom: 0; left: 0; width: var(--side-w);
  background: var(--side); border-right: 1px solid var(--line); overflow-y: auto; padding: 10px 8px 24px; z-index: 15; }
.side .grp { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #5f6873; margin: 14px 10px 6px; }
.side a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--rb);
  color: var(--side-ink); font-size: 13.5px; text-decoration: none; }
.side a .ic { width: 18px; text-align: center; opacity: .85; }
.side a:hover { background: var(--card); color: var(--ink); }
.side a.on { background: var(--accent-bg); color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.side a .badge { margin-left: auto; }
.side .foot { margin-top: 18px; padding: 0 10px; }

main { margin-left: var(--side-w); padding: calc(var(--top-h) + env(safe-area-inset-top) + 18px) 24px 40px; max-width: 1320px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.page-head h1 { display: flex; align-items: center; gap: 10px; margin: 0; }
.page-head h1 .ic { color: var(--accent); }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

h2 { font-size: 14px; margin: 0; }
.sec-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 10px; }
.sec-title h2 { font-size: 14px; }

/* ── kartu ── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); }
.card + .card, .card + .grid, .grid + .card, .grid + .grid, .card + h2, .grid + h2 { margin-top: 14px; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .sec-title { padding: 14px 16px 0; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: 2fr 1fr; }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--shadow);
  position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--line2); }
.kpi.acc::before { background: var(--accent); } .kpi.ok::before { background: var(--ok); } .kpi.bad::before { background: var(--bad); }
.kpi > span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kpi b { display: block; font: 600 20px var(--font-n); margin-top: 4px; white-space: nowrap; }
.kpi small { color: var(--muted); font-size: 12px; }

.hero { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.big { font: 600 34px var(--font-n); letter-spacing: -.02em; }
.pnl { font-weight: 600; font-family: var(--font-n); }
.chart { width: 100%; height: 190px; margin-top: 12px; display: block; }

/* ── tabel ── */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  font-weight: 600; padding: 9px 12px; background: var(--bg2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl tbody tr[data-i] { cursor: pointer; }
.tbl tbody tr[data-i]:hover td { background: var(--card2); }
.tbl .t1 { font-weight: 600; }
.tbl .t2 { color: var(--muted); font-size: 12px; margin-top: 1px; }
.tbl td.num, .tbl td .num { font-family: var(--font-n); }
.tbl .go { color: var(--muted); text-align: right; width: 24px; }

/* ── label / chip ── */
.pill, .tag, .chip, .lbl, .badge { display: inline-flex; align-items: center; gap: 5px; font: 600 11px var(--font-n);
  padding: 2px 8px; border-radius: 4px; background: var(--card3); color: var(--muted); white-space: nowrap; letter-spacing: .02em; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.aktif, .chip.ok, .lbl.kuat, .chip.new { background: var(--ok-bg); color: var(--ok); }
.pill.jeda, .chip.warn, .lbl.lemah { background: var(--warn-bg); color: var(--warn); }
.pill.mati, .chip.bad, .chip.hot { background: var(--bad-bg); color: var(--bad); }
.pill.luar, .chip.info { background: var(--info-bg); color: var(--info); }
.tag { background: var(--accent-bg); color: var(--accent); }
.badge { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 1px 7px; }
.chip { margin-left: 4px; }

.banner, .warnbox { border-radius: var(--r); padding: 11px 14px; margin-bottom: 14px; font-size: 13.5px;
  background: var(--warn-bg); border: 1px solid rgba(255,193,77,.35); }
.banner.mati { background: var(--bad-bg); border-color: rgba(255,92,92,.4); }
.banner.luar { background: var(--info-bg); border-color: rgba(93,176,255,.35); }

/* ── form & tombol ── */
select, input { font: inherit; color: var(--ink); background: var(--bg2); border: 1px solid var(--line2);
  border-radius: var(--rb); padding: 8px 10px; }
select:focus, input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
input { width: 100%; }
#ca { font-family: var(--font-n); font-size: 13px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { font: 600 13px var(--font-b); border-radius: var(--rb); padding: 9px 14px; border: 1px solid var(--line2);
  background: var(--card2); color: var(--ink); cursor: pointer; transition: .15s; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-family: var(--font-d);
  letter-spacing: .04em; text-transform: uppercase; }
.btn.primary:hover { box-shadow: var(--glow); }
.btn.danger { color: var(--bad); border-color: rgba(255,92,92,.45); background: transparent; }
.btn.wide { width: 100%; margin-top: 8px; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
.dur { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; margin: 4px 0 10px; }
#dur-at { margin: 0 0 10px; }
#runinfo { margin-bottom: 10px; font-size: 13px; }

/* ── analisa ── */
.analyze-bar { display: flex; gap: 8px; }
.analyze-bar input { flex: 1; }
.bar { height: 6px; border-radius: 3px; background: var(--card3); overflow: hidden; margin: 6px 0 4px; }
.bar > i { display: block; height: 100%; }
.notes { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; }
.notes li { padding: 2px 0; }
.notes li::before { content: attr(data-s) " "; font-weight: 700; font-family: var(--font-n); }
.notes li[data-s="+"]::before { color: var(--ok); } .notes li[data-s="-"]::before { color: var(--bad); }
.decision { font: 700 22px var(--font-d); letter-spacing: .03em; }
.scorering { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.ring { --p: 0; --c: var(--accent); width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--card3) 0); }
.ring > div { width: 74px; height: 74px; border-radius: 50%; background: var(--card); display: grid; place-items: center;
  font: 600 22px var(--font-n); }
.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.cat .head { display: flex; justify-content: space-between; font-weight: 600; }
.cat .head b { font-family: var(--font-n); }

/* ── key-value (detail) ── */
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--rb); overflow: hidden; margin: 12px 0; }
.kv > div { background: var(--bg2); padding: 8px 10px; min-width: 0; }
.kv > div > span { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kv > div > b { display: block; font: 500 13.5px var(--font-n); word-break: break-word; }
.kv.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.timeline { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--line2); }
.timeline li { position: relative; padding: 4px 0 8px 8px; font: 12.5px var(--font-n); color: var(--side-ink); word-break: break-word; }
.timeline li::before { content: ""; position: absolute; left: -20px; top: 9px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--accent); }
.timeline li.sell::before { border-color: var(--bad); } .timeline li.buy::before { border-color: var(--ok); }

/* ── drawer detail ── */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 40; backdrop-filter: blur(2px); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); z-index: 41; background: var(--card);
  border-left: 1px solid var(--line2); box-shadow: -20px 0 40px rgba(0,0,0,.5); display: flex; flex-direction: column;
  animation: slide .18s ease-out; }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }
.drawer header { display: flex; align-items: center; gap: 10px; padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
  border-bottom: 1px solid var(--line); }
.drawer header h3 { margin: 0; font-size: 17px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer header .x { background: var(--card2); border: 1px solid var(--line2); color: var(--ink); width: 32px; height: 32px;
  border-radius: var(--rb); cursor: pointer; font-size: 16px; }
.drawer .body { padding: 16px 18px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; }
.drawer h4 { font: 600 12px var(--font-d); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 18px 0 6px; }
.links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.links a { font-size: 12.5px; padding: 6px 10px; border: 1px solid var(--line2); border-radius: var(--rb); background: var(--card2); color: var(--ink); }
.links a:hover { border-color: var(--accent); text-decoration: none; }
.copy { cursor: pointer; } .copy:hover { color: var(--accent2); }

/* ── sesi / langganan / aturan / belajar ── */
.session { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.session b { font: 600 16px var(--font-d); }
.conv { display: flex; justify-content: space-between; align-items: center; }
.conv b { font: 600 26px var(--font-n); }
.rsec { margin-bottom: 14px; }
.rsec h3 { font-size: 14px; margin: 0 0 6px; color: var(--accent2); }
.field { padding: 10px 0; border-top: 1px solid var(--line); }
.field:first-of-type { border-top: 0; }
.field label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 500; font-size: 13.5px; }
.field input[type=number], .field input[type=text] { width: 130px; margin: 0; text-align: right; font-family: var(--font-n); font-size: 13.5px; }
.field input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.field .help { font-size: 12px; color: var(--muted); margin-top: 3px; }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.rules-grid .rsec { margin: 0; }
.rows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.rows .r { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.rows .r input { width: 80px; margin: 0; text-align: right; font-family: var(--font-n); }
.rows .x { padding: 4px 9px; }
.savebar { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center; padding: 12px 0; margin-top: 14px;
  background: linear-gradient(transparent, var(--bg) 30%); }
.ltab { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 8px 0; }
.ltab th, .ltab td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line); font-family: var(--font-n); }
.ltab th:first-child, .ltab td:first-child { text-align: left; font-family: var(--font-b); }
.ltab th { color: var(--muted); font: 600 11px var(--font-b); letter-spacing: .06em; text-transform: uppercase; }
details.ins { margin-top: 8px; } details.ins summary { cursor: pointer; font-weight: 600; }
.sub .edit { margin-top: 8px; }
.r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.edit label { font-size: 12px; color: var(--muted); display: block; margin-top: 6px; }
.edit input { margin-top: 2px; }

/* ── nav bawah (HP) ── */
.tabs { display: none; }

/* ── responsif ── */
@media (max-width: 1180px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .hamb { display: block; }
  .side { transform: translateX(-100%); transition: transform .2s; z-index: 30; box-shadow: 20px 0 40px rgba(0,0,0,.5); }
  body.nav-open .side { transform: none; }
  body.nav-open .scrim.nav { display: block; }
  main { margin-left: 0; padding: calc(var(--top-h) + env(safe-area-inset-top) + 14px) 14px calc(84px + env(safe-area-inset-bottom)); }
  .g2, .g3, .rules-grid { grid-template-columns: 1fr; }
  .brand small { display: none; }
  .tabs { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: var(--side);
    border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .tabs button { flex: 1; background: none; border: 0; color: var(--muted); font: inherit; font-size: 18px;
    padding: 8px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
  .tabs button span { font: 600 10.5px var(--font-b); }
  .tabs button.on { color: var(--accent); }
  /* tabel jadi kartu di HP */
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tr { padding: 10px 14px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl td { padding: 0; border: 0; }
  .tbl td.r { text-align: right; }
  .tbl td.opt { display: none; }
  .tbl td.wide { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
  .tbl .go { display: none; }
  .drawer { top: auto; height: 88vh; width: 100%; border-left: 0; border-top: 1px solid var(--line2);
    border-radius: 14px 14px 0 0; animation-name: rise; }
  @keyframes rise { from { transform: translateY(40px); opacity: 0; } }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cats { grid-template-columns: 1fr; }
  .big { font-size: 28px; }
  .top select { max-width: 110px; }
  .kv.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analyze-bar { flex-direction: column; }
}
.scrim.nav { display: none; z-index: 25; }

/* filter kandidat (Analisa token) */
.cand-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.cand-filter .btn.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* ── detail coin: chart + data semua menu ── */
.coin-chart { margin: 12px 0 4px; border: 1px solid var(--line); border-radius: var(--rb); overflow: hidden; background: var(--card2); }
.coin-chart iframe { display: block; width: 100%; height: 380px; border: 0; }
.coin-rel h4 { margin-top: 16px; }
.coin-rel .small { margin: 3px 0; line-height: 1.45; }
.bars { margin-top: 8px; display: grid; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: 8px; font-size: 12px; }
.bar { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--warn); }
.bar i.ok { background: var(--ok); } .bar i.bad { background: var(--bad); }
.bar-row b { text-align: right; }
.bar-note { margin: -2px 0 2px 100px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; max-width: calc(100% - 32px);
  background: var(--card2); color: var(--ink); border: 1px solid var(--line2); border-radius: var(--rb); padding: 10px 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35); font-size: 13px; }
@media (max-width: 640px) { .coin-chart iframe { height: 300px; } .bar-row { grid-template-columns: 78px 1fr 30px; } .bar-note { margin-left: 86px; } }
.chart-src { margin: 4px 0 0; }
.coin-chart { height: 380px; position: relative; }
.chart-src { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) { .coin-chart { height: 300px; } }