/* =========================================================
   PONTAGE — sistem desain institusional
   Terang: kertas netral, tinta navy, garis rambut. Aksen merah tua hanya
   untuk logo & penanda kecil. Gelap: navy malam, tombol utama terang.
   ========================================================= */
:root {
  color-scheme: light;
  --paper: #f7f6f2; --paper-2: #efede7;
  --card: #ffffff; --card-2: #fafaf8; --card-3: #f2f1ec;
  --rule: #e6e3dc; --rule-2: #d5d1c7;
  --ink: #0d1526; --ink-2: #4a5163; --ink-3: #868b98;
  --navy: #0f1d3a; --navy-2: #16294f; --navy-ink: #f4f2ec; --navy-dim: #a7b1c5; --navy-rule: rgba(244, 242, 236, .1);
  --acc: #0f1d3a; --acc-hi: #1b2f5c; --acc-ink: #ffffff; --acc-wash: rgba(15, 29, 58, .05); --acc-line: rgba(15, 29, 58, .28);
  --brand: #b3362b; --brand-wash: rgba(179, 54, 43, .07);
  --up: #157347; --up-wash: rgba(21, 115, 71, .08);
  --down: #b42318; --down-wash: rgba(180, 35, 24, .07);
  --warn: #8f5b00; --warn-wash: rgba(176, 116, 0, .1);
  --info: #2b4fa3; --info-wash: rgba(43, 79, 163, .08);
  --shadow: 0 1px 2px rgba(13, 21, 38, .04), 0 6px 20px -12px rgba(13, 21, 38, .16);
  --shadow-lg: 0 24px 64px -24px rgba(13, 21, 38, .32);
  --scrim: rgba(13, 21, 38, .38);
  --f-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-num: "Geist", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-xl: 14px;
  --nav-h: 64px; --status-h: 32px; --tabbar-h: 0px;
  --max: 1280px; --gut: 28px;
}
:root[data-theme="dark"] {
  /* AMOLED premium: hitam murni, permukaan hampir-hitam, garis rambut, tombol putih */
  color-scheme: dark;
  --paper: #000000; --paper-2: #050506;
  --card: #0b0b0d; --card-2: #101013; --card-3: #17171b;
  --rule: #1d1d22; --rule-2: #2a2a31;
  --ink: #f5f5f7; --ink-2: #a1a1aa; --ink-3: #6e6e78;
  --navy: #0b0b0d; --navy-2: #111114; --navy-ink: #f5f5f7; --navy-dim: #8e8e98; --navy-rule: rgba(255, 255, 255, .07);
  --acc: #f5f5f7; --acc-hi: #ffffff; --acc-ink: #000000; --acc-wash: rgba(255, 255, 255, .05); --acc-line: rgba(255, 255, 255, .28);
  --brand: #e2574c; --brand-wash: rgba(226, 87, 76, .12);
  --up: #30d27f; --up-wash: rgba(48, 210, 127, .1);
  --down: #ff5a5f; --down-wash: rgba(255, 90, 95, .1);
  --warn: #f5a524; --warn-wash: rgba(245, 165, 36, .1);
  --info: #7aa7ff; --info-wash: rgba(122, 167, 255, .1);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -16px rgba(0, 0, 0, .9);
  --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, .95);
  --scrim: rgba(0, 0, 0, .72);
}
/* sentuhan premium khusus mode gelap */
:root[data-theme="dark"] body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 620px; pointer-events: none; z-index: 0; background: radial-gradient(60% 100% at 50% 0%, rgba(255, 255, 255, .055), transparent 70%); }
:root[data-theme="dark"] main, :root[data-theme="dark"] .nav { position: relative; z-index: 1; }
:root[data-theme="dark"] .nav { position: sticky; z-index: 40; background: rgba(0, 0, 0, .72); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .ledger, :root[data-theme="dark"] .trend-row, :root[data-theme="dark"] .cmp, :root[data-theme="dark"] .zero-list, :root[data-theme="dark"] .token-strip, :root[data-theme="dark"] .hero-main { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
:root[data-theme="dark"] .hero-main { border: 1px solid var(--rule-2); background: linear-gradient(180deg, #111114, #08080a); }
/* gradasi perak hanya pada baris utama; baris abu tetap warna polos */
:root[data-theme="dark"] .hero-copy h1 .g, :root[data-theme="dark"] .truth h2 .g, :root[data-theme="dark"] .ph h1, :root[data-theme="dark"] .prose h1 { background: linear-gradient(180deg, #ffffff 35%, #b9b9c2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy h1 .g, .truth h2 .g { color: var(--ink); }
:root[data-theme="dark"] .btn-acc { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 24px -10px rgba(255, 255, 255, .25); }
:root[data-theme="dark"] .status, :root[data-theme="dark"] .tabbar { background: #000; }
:root[data-theme="dark"] .ledger thead th { background: #0d0d10; }
:root[data-theme="dark"] .live-line { background: rgba(255, 255, 255, .03); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 15px/1.55 var(--f-ui); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh;
  padding-bottom: calc(var(--status-h) + var(--tabbar-h));
}
html, body { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.022em; font-weight: 600; }
p { margin: 0; }
b, strong { font-weight: 600; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "ss01"; letter-spacing: -.01em; }
.mono { font-family: var(--f-mono); font-size: .92em; letter-spacing: 0; }
.up { color: var(--up); } .down { color: var(--down); } .dim { color: var(--ink-3); } .muted { color: var(--ink-2); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--acc); color: var(--acc-ink); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.small-caps { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- tombol ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--r); font-weight: 550; font-size: 14px; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; border: 1px solid transparent; }
.btn-acc { background: var(--acc); color: var(--acc-ink); }
.btn-acc:hover { background: var(--acc-hi); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-line { border-color: var(--rule-2); background: var(--card); }
.btn-line:hover { border-color: var(--ink-3); }
.btn-ghost:hover { background: var(--card-3); }
.btn-lg { height: 46px; font-size: 15px; padding: 0 22px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .42; cursor: not-allowed; }
.link-arrow { font-weight: 550; font-size: 15px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-2); }
.icon-btn:hover { background: var(--card-3); color: var(--ink); }
.icon-btn svg, .search-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- navigasi ---------- */
.nav { position: sticky; top: 0; z-index: 40; height: var(--nav-h); background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); border-bottom: 1px solid var(--rule); }
.nav-in { max-width: var(--max); margin: 0 auto; height: 100%; padding: 0 var(--gut); display: flex; align-items: center; gap: 30px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 500; letter-spacing: .28em; font-size: 13.5px; color: var(--ink); }
.mark { width: 22px; height: 22px; flex: none; }
.mark .arch { fill: var(--ink); }
.mark .key { fill: var(--brand); }
/* logo bergerak: lengkung naik, keystone jatuh & mengunci; hover = keystone terangkat */
.mark .arch { transform-box: fill-box; transform-origin: 50% 100%; animation: archIn .7s cubic-bezier(.2, .8, .2, 1) both; }
.mark .key { transform-box: fill-box; transform-origin: 50% 50%; animation: keyDrop .75s cubic-bezier(.3, 1.45, .5, 1) .45s both; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.brand:hover .mark .key { transform: translateY(-1.6px); }
/* maskot di navigasi: muncul naik + sedikit miring saat disorot */
.mark-img { width: 28px; height: 28px; display: block; animation: keeperIn .8s cubic-bezier(.2, .9, .25, 1.15) both; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.brand:hover .mark-img { transform: rotate(-6deg) scale(1.06); }
@keyframes keeperIn { from { opacity: 0; transform: translateY(6px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes archIn { from { transform: scaleY(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes keyDrop { 0% { transform: translateY(-9px); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.links { display: flex; gap: 2px; }
.links a { padding: 7px 11px; border-radius: 7px; font-size: 14px; font-weight: 500; color: var(--ink-2); position: relative; }
.links a:hover { color: var(--ink); }
.links a.on { color: var(--ink); }
.links a.on::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -15px; height: 1.5px; background: var(--ink); }
.search-btn { margin-left: auto; display: flex; align-items: center; gap: 9px; width: min(320px, 28vw); height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--rule); background: var(--card); color: var(--ink-3); font-size: 13.5px; }
.search-btn:hover { border-color: var(--rule-2); }
.search-btn span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
kbd { font-family: var(--f-mono); font-size: 10.5px; border: 1px solid var(--rule-2); border-radius: 4px; padding: 0 5px; color: var(--ink-3); background: var(--card-2); }
.nav-r { display: flex; align-items: center; gap: 2px; }
.nav-r .btn { margin-left: 8px; height: 36px; }
.ca-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--rule); font-size: 12px; font-weight: 500; color: var(--ink-2); margin-right: 6px; white-space: nowrap; background: var(--card); }
.ca-chip b { color: var(--ink); font-weight: 600; }
.ca-chip.live b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--up); margin-right: 6px; vertical-align: 1px; }
.ca-chip.live .num { font-family: var(--f-mono); font-size: 11.5px; }
.acct { display: inline-flex; align-items: center; gap: 8px; }
.acct i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); }
.acct .num { font-family: var(--f-mono); font-size: 12.5px; }

/* ---------- status bar & tabbar ---------- */
.status { position: fixed; left: 0; right: 0; bottom: var(--tabbar-h); z-index: 39; height: var(--status-h); display: flex; align-items: center; gap: 12px; padding: 0 var(--gut); font-size: 12px; color: var(--ink-3); background: var(--paper); border-top: 1px solid var(--rule); }
.status b { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.status .sep { width: 1px; height: 12px; background: var(--rule-2); }
.status .live { display: inline-flex; align-items: center; gap: 7px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); display: inline-block; }
.dot.ok { background: var(--up); }
.dot.bad { background: var(--down); }
.st-r { margin-left: auto; display: flex; gap: 18px; }
.st-r a:hover { color: var(--ink); }
.tabbar { display: none; }

/* ---------- kerangka halaman ---------- */
main { outline: none; }
.page { padding-top: 34px; padding-bottom: 72px; animation: pageIn .25s ease-out; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.card-pad { padding: 18px 20px; }
.section { margin-top: 56px; }
.section-h { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.section-h h2 { font-size: 20px; font-weight: 600; }
.section-h .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ---------- HERO BAND: adegan sinematik selebar layar (selalu gelap) ---------- */
.page > .hero-band:first-child { margin-top: -34px; }
.hero-band { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: 0 calc(50vw - 50%); isolation: isolate; overflow: hidden; color: #f5f5f7;
  --ink: #f5f5f7; --ink-2: #b4b4bd; --ink-3: #7c7c86; --rule: #1d1d22; --rule-2: #2a2a31; --card: #0b0b0d; --acc: #f5f5f7; --acc-hi: #fff; --acc-ink: #000; }
.hero-art { position: absolute; inset: 0; z-index: -1; background: #000; }
.hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; transform: translateY(var(--py, 0)) scale(1.04); animation: heroDrift 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes heroDrift { from { transform: translateY(var(--py, 0)) scale(1.04); } to { transform: translateY(var(--py, 0)) scale(1.09) translateX(-1%); } }
.hero-art::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.86) 30%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.05) 75%),
  linear-gradient(0deg, var(--page-bg, #000) 0%, rgba(0,0,0,0) 26%),
  linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 18%); }
:root:not([data-theme="dark"]) .hero-art::after { --page-bg: #f7f6f2; }
.hero-band .hero { min-height: min(820px, 92vh); padding-top: 64px; padding-bottom: 56px; grid-template-columns: minmax(0, 1fr) 420px; align-items: end; }
.hero-band .hero-copy { align-self: center; padding-bottom: 80px; }
.hero-band .hero-copy h1 .g { background: linear-gradient(180deg, #ffffff 35%, #b9b9c2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-band .hero-copy h1 span:not(.g) { color: #7c7c86; -webkit-text-fill-color: #7c7c86; }
.hero-band .live-line { background: rgba(0, 0, 0, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, .12); color: #c9c9d1; }
.hero-band .live-line b { color: #fff; }
.hero-band .btn-acc { background: #f5f5f7; color: #000; }
.hero-band .link-arrow { color: #f5f5f7; }
.hero-band .hero-main { min-height: 0; margin-top: 300px; background: rgba(10, 10, 12, .72) !important; backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); }
.hero-band .lp-chart { height: 120px; }
.hero-band .lp-num { font-size: 34px; }
.hero-band + .proof-strip { margin-top: 8px; }
@media (max-width: 1180px) {
  .hero-band .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-band .hero-main { margin-top: 0; }
  .hero-band .hero-copy { padding: 220px 0 20px; }
  .hero-art img { object-position: 70% 20%; }
}
@media (max-width: 860px) {
  .page > .hero-band:first-child { margin-top: -22px; }
  .hero-art { bottom: auto; height: 420px; }
  .hero-art::after { background: linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 45%), linear-gradient(180deg, rgba(0,0,0,.5), transparent 25%); }
  :root:not([data-theme="dark"]) .hero-band { background: #000; }
  .hero-band { background: #000; }
  .hero-art img { object-position: 50% 30%; transform: none; animation: none; }
  .hero-band .hero-copy { padding: 250px 0 10px; }
  .hero-band .hero { padding-top: 0; }
}

/* ---------- HERO ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; align-items: stretch; padding-top: 18px; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 10px 0 18px; }
.live-line { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); align-self: flex-start; padding: 6px 12px 6px 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); }
.live-line b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-copy h1 { font-size: clamp(38px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.04em; margin-top: 26px; font-weight: 600; max-width: 15ch; }
.hero-copy h1 span { color: var(--ink-3); }
.hero-copy .lede { margin-top: 20px; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 50ch; }
.hero-cta { display: flex; gap: 18px; margin-top: 30px; flex-wrap: wrap; align-items: center; }

.hero-main { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--navy); color: var(--navy-ink); display: flex; flex-direction: column; min-height: 420px; isolation: isolate; }
:root[data-theme="dark"] .hero-main { border: 1px solid var(--rule-2); }
.hero-main::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 40%); }
.panel-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--navy-rule); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-dim); font-weight: 600; }
.panel-h .live { display: inline-flex; gap: 7px; align-items: center; letter-spacing: .08em; }
.panel-h .live i { width: 6px; height: 6px; border-radius: 50%; background: #4fd08e; }
/* panel live: angka bergulir, grafik area, daftar swap */
.lp { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 6px; min-height: 0; }
.lp-big small { display: block; font-size: 12.5px; color: var(--navy-dim); }
.lp-row { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.lp-num { font-size: 40px; font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--navy-ink); }
.lp-delta { font-size: 13px; color: #4fd08e; font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(4px); transition: opacity .5s, transform .5s; }
.lp-delta.on { opacity: 1; transform: none; }
.lp-chart { position: relative; height: 150px; margin: 14px -22px 0; padding: 0 22px; }
.lp-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lp-grid { stroke: var(--navy-rule); stroke-dasharray: 2 4; }
.lp-base { stroke: var(--navy-rule); }
.lp-line { fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.lp-ax { font-size: 10.5px; fill: var(--navy-dim); font-family: var(--f-ui); }
.lp-cross { stroke: rgba(255, 255, 255, .25); }
.lp-head { fill: var(--brand); }
.lp-ring { fill: none; stroke: var(--brand); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: lpPulse 2.4s ease-out infinite; }
@keyframes lpPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }
.lp-chart.draw .lp-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lpDraw 1.6s cubic-bezier(.4, 0, .2, 1) .15s forwards; }
.lp-chart.draw .lp-area { opacity: 0; animation: lpFade 1s ease .9s forwards; }
.lp-chart.draw .lp-head, .lp-chart.draw .lp-ring { opacity: 0; animation: lpFade .4s ease 1.6s forwards; }
.lp-chart.draw .lp-ring { animation: lpFade .4s ease 1.6s forwards, lpPulse 2.4s ease-out 2s infinite; }
@keyframes lpDraw { to { stroke-dashoffset: 0; } }
@keyframes lpFade { to { opacity: 1; } }
.lp-tip { position: absolute; top: -6px; width: 100px; padding: 6px 9px; border-radius: 7px; background: rgba(255, 255, 255, .96); color: #000; font-size: 12px; pointer-events: none; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.lp-tip[hidden] { display: none; }
.lp-tip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-tip span { color: #6e6e78; font-size: 11px; }
.lp-feed-h { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-dim); font-weight: 600; margin-top: 14px; padding: 10px 0 6px; border-top: 1px solid var(--navy-rule); }
.lp-feed { display: flex; flex-direction: column; }
.lp-item { display: grid; grid-template-columns: minmax(0, 1fr) 46px 70px 84px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--navy-rule); font-size: 13px; color: var(--navy-ink); }
.lp-item:first-child { border-top: 0; }
.lp-item:hover .lp-pair { text-decoration: underline; text-underline-offset: 3px; }
.lp-pair { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-side { font-size: 11.5px; color: var(--navy-dim); }
.lp-side.b::before, .lp-side.s::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.lp-side.b::before { background: #4fd08e; } .lp-side.s::before { background: #ff6b6b; }
.lp-size { text-align: right; color: var(--navy-dim); font-variant-numeric: tabular-nums; }
.lp-fee { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.lp-item.enter { animation: lpIn .6s cubic-bezier(.2, .7, .2, 1); }
.lp-item.enter .lp-fee { animation: lpGlow 1.6s ease; }
.lp-item.leave { opacity: 0; transition: opacity .4s; }
@keyframes lpIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes lpGlow { 0%, 30% { color: #4fd08e; } 100% { color: var(--navy-ink); } }
/* pita bukti di bawah hero */
.proof-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 40px; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule); }
.proof-strip > div { padding: 18px 20px 18px 0; min-width: 0; }
.proof-strip > div + div { padding-left: 20px; border-left: 1px solid var(--rule); }
.proof-strip small { display: block; font-size: 12.5px; color: var(--ink-3); }
.proof-strip .v { font-size: 26px; font-weight: 500; letter-spacing: -.03em; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.proof-strip .n { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.split-bar { height: 4px; border-radius: 4px; overflow: hidden; display: flex; background: var(--rule); margin-top: 10px; }
.split-bar i { display: block; height: 100%; }
.split-bar .pays { background: var(--ink); }
.split-bar .nopay { background: var(--rule-2); }
.split-legend { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }

/* ---------- "Volume isn't yield" ---------- */
.truth { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.truth h2 { font-size: 30px; letter-spacing: -.03em; line-height: 1.12; margin-top: 12px; }
.truth h2 span { color: var(--ink-3); }
.truth p { color: var(--ink-2); margin-top: 14px; max-width: 46ch; line-height: 1.6; }
.truth .acts { margin-top: 20px; }
.cmp { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--card); }
.cmp > div { padding: 16px 18px; }
.cmp > div + div { border-left: 1px solid var(--rule); }
.cmp small { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.cmp .v { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cmp-title { font-size: 13.5px; color: var(--ink-2); margin-bottom: 10px; }
.cmp-title a { color: var(--ink); font-weight: 600; }
.cmp-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.strike { text-decoration: line-through; text-decoration-color: var(--ink-3); text-decoration-thickness: 1px; color: var(--ink-3); }
.zero-list { margin-top: 14px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--card); overflow: hidden; }
.zero-list .zh { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; padding: 10px 16px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; background: var(--card-2); border-bottom: 1px solid var(--rule); }
.zero-list a { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.zero-list a:last-child { border-bottom: 0; }
.zero-list a:hover { background: var(--card-2); }
.zero-list .pr { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zero-list .tok-pair { width: 34px; height: 22px; } .zero-list .tok-pair .tok { width: 22px; height: 22px; font-size: 8px; } .zero-list .tok-pair .tok:last-child { left: 12px; }
.zero-list .r { text-align: right; min-width: 90px; }

/* ---------- langkah ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule-2); }
.steps { gap: 18px; border-top: 0; }
.step { padding: 0; display: block; }
.step + .step { padding-left: 0; border-left: 0; }
.step h4 { font-size: 16px; font-weight: 600; }
.step h4 span { color: var(--ink-3); margin-right: 8px; font-weight: 500; font-variant-numeric: tabular-nums; }
.step p { font-size: 14px; color: var(--ink-2); margin-top: 6px; line-height: 1.55; }

/* ---------- diagram "ke mana fee pergi" ---------- */
.ff { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: stretch; }
.ff > * { min-width: 0; }
.ff-pick { display: flex; flex-direction: column; gap: 8px; }
.ff-pick button { text-align: left; padding: 15px 16px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--card); display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; transition: border-color .2s, background .2s; }
.ff-pick button:hover { border-color: var(--rule-2); }
.ff-pick button.on { border-color: var(--ink); background: var(--card-2); }
.ff-pick b { font-size: 15px; font-weight: 600; }
.ff-pick small { grid-column: 1; color: var(--ink-3); font-size: 12.5px; }
.ff-lp { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 12px; font-weight: 600; color: var(--up); font-variant-numeric: tabular-nums; }
.ff-lp.zero { color: var(--down); }
.ff-stage { border-radius: var(--r-xl); background: var(--navy); color: var(--navy-ink); padding: 14px 18px 18px; display: flex; flex-direction: column; justify-content: center; }
:root[data-theme="dark"] .ff-stage { border: 1px solid var(--rule-2); background: linear-gradient(180deg, #111114, #08080a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.ff-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ff-svg text { font-family: var(--f-ui); }
.ff-node rect, .ff-node circle { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .2); }
.ff-node.fee circle { stroke: rgba(255, 255, 255, .45); }
.ff-k { fill: var(--navy-dim); font-size: 11px; }
.ff-v { fill: var(--navy-ink); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ff-v.sm { font-size: 14px; }
.ff-x { fill: var(--navy-dim); font-size: 10.5px; }
.ff-path { fill: none; stroke: rgba(255, 255, 255, .16); stroke-linecap: round; }
.ff-path.lp { stroke: rgba(79, 208, 142, .45); }
.ff-path.zero { stroke: rgba(255, 107, 107, .5); stroke-dasharray: 3 5; }
.ff-dot { fill: #fff; } .ff-dot.lp { fill: #4fd08e; }
.ff-dn { fill: var(--navy-ink); font-size: 13px; font-weight: 500; }
.ff-da { fill: var(--navy-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ff-dp { fill: var(--navy-dim); font-size: 10.5px; }
.ff-tr { fill: rgba(255, 255, 255, .08); }
.ff-br { fill: rgba(255, 255, 255, .8); transform-box: fill-box; transform-origin: 0 50%; }
.ff-dest.lp .ff-br { fill: #4fd08e; }
.ff-dest.lp.zero .ff-dp, .ff-dest.lp.zero .ff-da { fill: #ff6b6b; }
.ff-svg.in .ff-dest { animation: ffIn .55s cubic-bezier(.2, .8, .2, 1) both; }
.ff-svg.in .ff-dest:nth-of-type(2) { animation-delay: .06s; } .ff-svg.in .ff-dest:nth-of-type(3) { animation-delay: .12s; } .ff-svg.in .ff-dest:nth-of-type(4) { animation-delay: .18s; }
.ff-svg.in .ff-br { animation: ffBar .9s cubic-bezier(.2, .8, .2, 1) both; }
.ff-svg.in .ff-path { animation: ffPath .6s ease both; }
@keyframes ffIn { from { opacity: 0; transform: translateX(var(--tx, 0)) translateY(6px); } }
@keyframes ffBar { from { transform: scaleX(0); } }
@keyframes ffPath { from { opacity: 0; } }
.ff-note { font-size: 13.5px; line-height: 1.55; color: var(--navy-dim); margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--navy-rule); }

/* ---------- ilustrasi bergerak 3 langkah ---------- */
.ill-wrap { height: 156px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--card); margin-bottom: 18px; padding: 10px 14px; overflow: hidden; }
.ill { width: 100%; height: 100%; display: block; }
.ill text { font-family: var(--f-ui); }
.i-tok { fill: var(--card-3); stroke: var(--rule-2); stroke-width: 1; } .i-tok.b { fill: var(--rule-2); }
.i-txt { fill: var(--rule-2); }
.i-track { fill: var(--rule); }
.i-bar { fill: var(--ink); transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); }
.i-zero { fill: var(--down-wash); } .i-zero-t { fill: var(--down); font-size: 9px; font-weight: 600; }
.i-frame { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: .85; }
.i-mark { fill: var(--brand); }
.play .i-bar { animation: iBar 6s cubic-bezier(.2, .8, .2, 1) var(--d) infinite; }
.play .ip-scan { animation: iScan 6s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes iBar { 0% { transform: scaleX(0); } 14% { transform: scaleX(1); } 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes iScan { 0%, 12% { transform: translateY(0); opacity: 0; } 16% { opacity: 1; } 26% { transform: translateY(30px); } 36% { transform: translateY(60px); } 46% { transform: translateY(90px); } 60%, 90% { transform: translateY(30px); opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
.i-base { stroke: var(--rule-2); }
.i-band { fill: var(--ink); opacity: 0; }
.i-price { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.i-handle { stroke: var(--ink); stroke-width: 1.2; }
.i-grip { fill: var(--card); stroke: var(--ink); stroke-width: 1.2; }
.i-lab { font-size: 8.5px; letter-spacing: .12em; fill: var(--ink-3); font-weight: 600; }
.ir-h { opacity: 0; }
.i-now { fill: var(--brand); } .i-now-ring { fill: none; stroke: var(--brand); transform-box: fill-box; transform-origin: center; opacity: 0; }
.play .i-price { animation: iDraw 6s cubic-bezier(.4, 0, .2, 1) infinite; }
.play .ir-h.l { animation: iHandleL 6s cubic-bezier(.2, .9, .2, 1) infinite; }
.play .ir-h.r { animation: iHandleR 6s cubic-bezier(.2, .9, .2, 1) infinite; }
.play .i-band { animation: iBand 6s ease infinite; }
.play .i-now-ring { animation: iRing 2s ease-out infinite; }
@keyframes iDraw { 0% { stroke-dashoffset: 1; } 28% { stroke-dashoffset: 0; } 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes iHandleL { 0%, 26% { transform: translateX(-90px); opacity: 0; } 44%, 92% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes iHandleR { 0%, 26% { transform: translateX(80px); opacity: 0; } 44%, 92% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes iBand { 0%, 40% { opacity: 0; } 52%, 90% { opacity: .07; } 100% { opacity: 0; } }
@keyframes iRing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.4); opacity: 0; } }
.i-arch { fill: none; stroke: var(--ink); stroke-width: .5; }
.i-key { fill: var(--brand); }
.i-coin { fill: var(--brand); opacity: 0; }
.play .i-coin { animation: iCoin 2s cubic-bezier(.55, 0, .9, .5) calc(var(--k) * .66s) infinite; }
@keyframes iCoin { 0% { transform: translateY(4px); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(104px); opacity: 0; } }
.i-sep { stroke: var(--rule); }
.i-amt { fill: var(--up); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.i-tot-l { fill: var(--ink-3); font-size: 11px; }
.i-tot { fill: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ic-line { opacity: 0; }
.play .ic-line { animation: iLine 6s ease calc(var(--k) * .7s) infinite; }
@keyframes iLine { 0% { opacity: 0; transform: translateX(8px); } 8%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .i-bar { transform: none; } .i-price { stroke-dashoffset: 0; } .ir-h, .ic-line { opacity: 1; } }

/* ---------- kartu token ---------- */
.token-strip { display: flex; align-items: center; gap: 22px; padding: 16px 20px; border-radius: var(--r-lg); border: 1px solid var(--rule); background: var(--card); flex-wrap: wrap; }
.token-strip .tk { display: flex; align-items: center; gap: 14px; }
.coin { width: 40px; height: 40px; border-radius: 10px; background: #000; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.coin svg { width: 22px; height: 22px; }
.coin .mark-img { width: 30px; height: 30px; animation: none; }
.coin .arch { fill: #f5f5f7; } .coin .key { fill: #e2574c; }
.token-strip b { font-size: 15px; }
.token-strip .meta { display: flex; gap: 26px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.token-strip .meta small { display: block; font-size: 11.5px; color: var(--ink-3); }

.pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 550; letter-spacing: .01em; }
.pill-acc { background: var(--brand-wash); color: var(--brand); }
.pill-up { background: var(--up-wash); color: var(--up); }
.pill-warn { background: var(--warn-wash); color: var(--warn); }
.pill-info { background: var(--info-wash); color: var(--info); }
.pill-mute { background: var(--card-3); color: var(--ink-2); }

/* ---------- label status pool (datar) ---------- */
.stamp { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; line-height: 1; }
.stamp.zero { color: var(--down); background: var(--down-wash); }
.stamp.wash { color: var(--warn); background: var(--warn-wash); }
.stamp.hook { color: var(--info); background: var(--info-wash); }
.stamp.stock { color: var(--up); background: var(--up-wash); }
.stamp.new { color: var(--brand); background: var(--brand-wash); }
.stamp.mute { color: var(--ink-3); background: var(--card-3); }

/* ---------- trending ---------- */
.trend-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--card); scrollbar-width: thin; }
.tcard { scroll-snap-align: start; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--rule); transition: background .15s; min-width: 0; }
.tcard:last-child { border-right: 0; }
.tcard:hover { background: var(--card-2); }
.tcard .top { display: flex; align-items: center; gap: 10px; }
.tcard .rank { font-size: 12px; color: var(--ink-3); margin-left: auto; font-variant-numeric: tabular-nums; }
.tcard .yl { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.tcard .yl b { font-size: 26px; color: var(--ink); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tcard .yl small { display: block; font-size: 11.5px; color: var(--ink-3); }
.tcard .sub { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); padding-top: 10px; border-top: 1px solid var(--rule); }
.tcard .sub b { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- tabel pool ---------- */
.tbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tabs { display: flex; gap: 22px; align-items: baseline; margin-right: auto; }
.tabs button { font-size: 18px; font-weight: 600; color: var(--ink-3); letter-spacing: -.015em; padding: 2px 0; }
.tabs button:hover { color: var(--ink-2); }
.tabs button.on { color: var(--ink); }
.tabs button .cnt { font-size: 11px; font-weight: 500; color: var(--ink-3); vertical-align: 3px; margin-left: 4px; }
.field { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--rule); background: var(--card); color: var(--ink-3); }
.field:focus-within { border-color: var(--ink-3); }
.field input { border: 0; outline: 0; background: none; color: var(--ink); width: 100%; font-size: 14px; }
.field svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.seg { display: inline-flex; padding: 2px; border-radius: 8px; border: 1px solid var(--rule); background: var(--card); }
.seg button { height: 30px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.seg button.on { background: var(--card-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none; }
.toggle input { appearance: none; width: 28px; height: 16px; border-radius: 999px; background: var(--rule-2); position: relative; transition: background .15s; cursor: pointer; margin: 0; flex: none; }
.toggle input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.toggle input:checked { background: var(--ink); }
.toggle input:checked::after { transform: translateX(12px); }
:root[data-theme="dark"] .toggle input:checked::after { background: var(--paper); }

.ledger { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: clip; }
.ledger table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ledger thead th { position: sticky; top: var(--nav-h); z-index: 2; background: var(--card-2); text-align: right; font-weight: 500; font-size: 12px; color: var(--ink-3); padding: 11px 14px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.ledger thead th.l, .ledger td.l { text-align: left; }
.ledger thead th button { font: inherit; color: inherit; display: inline-flex; gap: 4px; align-items: center; }
.ledger thead th button:hover, .ledger thead th.sorted { color: var(--ink); }
.ledger thead th.sorted button::after { content: "↓"; }
.ledger thead th.sorted.asc button::after { content: "↑"; }
.ledger tbody td { padding: 13px 14px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; vertical-align: middle; font-variant-numeric: tabular-nums; }
.ledger tbody tr { cursor: pointer; transition: background .12s; }
.ledger tbody tr:hover td { background: var(--card-2); }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger td.idx { width: 48px; text-align: center; color: var(--ink-3); font-size: 12px; padding-left: 10px; padding-right: 6px; }
.star { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 6px; color: var(--rule-2); }
.star svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
tr:hover .star { color: var(--ink-3); }
.star.on, tr:hover .star.on { color: var(--ink); } .star.on svg { fill: currentColor; }
.star:hover { background: var(--card-3); }
.pair { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tok-pair { position: relative; width: 40px; height: 26px; flex: none; }
.tok { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 650; color: #fff; overflow: hidden; background: var(--ink-3); letter-spacing: 0; flex: none; }
.tok img { width: 100%; height: 100%; object-fit: cover; }
.tok-pair .tok { position: absolute; top: 0; box-shadow: 0 0 0 2px var(--card); }
.tok-pair .tok:first-child { left: 0; z-index: 1; }
.tok-pair .tok:last-child { left: 14px; }
.pair .nm { min-width: 0; }
.pair .nm b { font-size: 14px; font-weight: 600; }
.pair .nm b small { color: var(--ink-3); font-weight: 500; font-size: 13px; }
.pair .nm .meta { display: flex; gap: 5px; margin-top: 3px; align-items: center; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.chg { font-size: 12px; display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
.yield-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.yield-cell .num { font-weight: 500; }
.ybar { width: 64px; height: 3px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.ybar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.guess { font-size: 11px; }
.add-btn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--rule-2); display: inline-grid; place-items: center; color: var(--ink-2); font-size: 16px; line-height: 1; transition: all .12s; }
tr:hover .add-btn, .add-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.add-btn.no { opacity: .4; }
tr:hover .add-btn.no { background: var(--card-3); border-color: var(--rule-2); color: var(--ink-3); }
.spark { width: 84px; height: 26px; display: inline-block; vertical-align: middle; }
.tfoot { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-3); background: var(--card-2); }
.pager { margin-left: auto; display: flex; gap: 4px; }
.pager button { min-width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--rule); background: var(--card); font-size: 12.5px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.pager button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pager button[disabled] { opacity: .4; cursor: default; }
.mlist { display: none; }
.empty { padding: 48px 20px; text-align: center; color: var(--ink-3); }
.empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; font-weight: 600; }

/* ---------- footer landing ---------- */
.foot { margin-top: 64px; padding: 28px 0 10px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: start; }
.foot .brand { font-size: 12.5px; }
.foot p { font-size: 13px; color: var(--ink-3); max-width: 60ch; margin-top: 10px; line-height: 1.55; }
.foot-links { display: flex; flex-direction: column; gap: 6px; }
.foot-links .small-caps { margin-bottom: 4px; }
.foot-links a { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink); padding: 6px 0; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-links svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.foot-links svg.x { fill: currentColor; stroke: none; }
.foot-links .mono { color: var(--ink-3); font-size: 12px; }
.token-strip .links-row { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr; } }

/* ---------- skeleton ---------- */
.sk { display: inline-block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--rule) 25%, var(--card-3) 50%, var(--rule) 75%); background-size: 200% 100%; animation: sk 1.2s infinite linear; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- halaman pool ---------- */
.crumbs { font-size: 13px; color: var(--ink-3); display: flex; gap: 8px; }
.crumbs a:hover { color: var(--ink); }
.pool-head { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.pool-head .tok-pair { width: 54px; height: 38px; }
.pool-head .tok-pair .tok { width: 38px; height: 38px; }
.pool-head .tok-pair .tok:last-child { left: 18px; }
.pool-head h1 { font-size: 32px; font-weight: 600; letter-spacing: -.03em; }
.pool-head h1 small { color: var(--ink-3); font-weight: 500; }
.pool-head .tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.pool-head .acts { margin-left: auto; display: flex; gap: 8px; }
.pool-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 22px; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule); }
.pool-stats > div { padding: 16px 18px 16px 0; min-width: 0; }
.pool-stats > div + div { padding-left: 18px; border-left: 1px solid var(--rule); }
.pool-stats small { display: block; font-size: 12.5px; color: var(--ink-3); }
.pool-stats .v { font-size: 22px; font-weight: 500; letter-spacing: -.025em; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pool-stats .hl .v { color: var(--ink); }
.pool-stats .hl small::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-right: 6px; vertical-align: 1px; }
.pool-grid { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 22px; margin-top: 22px; align-items: start; }
.pool-grid > *, .simgrid > *, .hero > *, .truth > * { min-width: 0; }
.chart-card { padding: 14px 16px 10px; }
.chart-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chart-tools .r { margin-left: auto; display: flex; gap: 8px; }
.ohlc { font-size: 12px; color: var(--ink-3); margin: 10px 0 6px; min-height: 18px; display: flex; gap: 14px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.ohlc b { color: var(--ink-2); font-weight: 500; }
.chart { height: 420px; position: relative; }
.chart .msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: 13px; }
.chart-foot { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); padding-top: 6px; }
.chart-foot a { border-bottom: 1px dotted var(--ink-3); }
.subtabs { display: flex; gap: 22px; border-bottom: 1px solid var(--rule); padding: 0 2px; margin-top: 22px; }
.subtabs button { padding: 12px 0; font-weight: 500; color: var(--ink-3); position: relative; font-size: 14.5px; }
.subtabs button:hover { color: var(--ink-2); }
.subtabs button.on { color: var(--ink); }
.subtabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--ink); }
.subpanel { padding-top: 14px; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th { text-align: right; font-size: 12px; color: var(--ink-3); font-weight: 500; padding: 9px 12px; border-bottom: 1px solid var(--rule); background: var(--card-2); }
.mini-table td { text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mini-table th:first-child, .mini-table td:first-child { text-align: left; }
.mini-table a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mini-table .mono { font-size: 12px; }
.proof { font-size: 14px; line-height: 1.65; }
.proof .formula { font-family: var(--f-mono); font-size: 13px; background: var(--card-2); border: 1px solid var(--rule); border-radius: var(--r); padding: 14px 16px; margin: 12px 0; overflow-x: auto; white-space: pre; }
.proof dl { display: grid; grid-template-columns: 210px 1fr; gap: 8px 16px; margin: 14px 0 0; }
.proof dt { color: var(--ink-3); }
.proof dd { margin: 0; font-family: var(--f-mono); font-size: 12.5px; word-break: break-all; }
.proof dd a { color: var(--info); }
.proof code { font-family: var(--f-mono); font-size: 13px; background: var(--card-3); padding: 1px 5px; border-radius: 4px; }
.rail-info { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.rail-info > div { padding: 12px 16px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.rail-info > div:nth-child(2n) { border-right: 0; }
.rail-info small { display: block; font-size: 12px; color: var(--ink-3); }
.rail-info b { font-weight: 500; font-size: 14px; word-break: break-all; }
.rail-info .num { font-family: var(--f-mono); font-size: 13px; }

/* panel aksi */
.act { position: sticky; top: calc(var(--nav-h) + 16px); }
.act-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--rule); }
.act-tabs button { padding: 14px 0; font-weight: 550; color: var(--ink-3); font-size: 14px; position: relative; }
.act-tabs button:hover { color: var(--ink-2); }
.act-tabs button.on { color: var(--ink); }
.act-tabs button.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 1.5px; background: var(--ink); }
.act-body { padding: 18px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.lbl { font-size: 12.5px; font-weight: 500; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.presets button { padding: 8px 0 7px; border-radius: 7px; border: 1px solid var(--rule); background: var(--card); font-size: 12.5px; font-weight: 550; color: var(--ink-2); line-height: 1.2; }
.presets button small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.presets button:hover { border-color: var(--rule-2); }
.presets button.on { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 .5px var(--ink); }
.range-viz { height: 86px; border-radius: var(--r); background: var(--card-2); border: 1px solid var(--rule); position: relative; overflow: hidden; }
.range-viz svg { width: 100%; height: 100%; }
.range-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pricebox { border: 1px solid var(--rule); border-radius: var(--r); padding: 8px 10px; background: var(--card); display: block; }
.pricebox:focus-within { border-color: var(--ink-3); }
.pricebox small { display: block; font-size: 11px; color: var(--ink-3); }
.pricebox input { width: 100%; border: 0; outline: 0; background: none; font-size: 16px; font-weight: 500; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pricebox .pct { font-size: 11px; color: var(--ink-3); }
.amt { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; background: var(--card-2); }
.amt:focus-within { border-color: var(--ink-3); background: var(--card); }
.amt .row1 { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); }
.amt .row1 button { color: var(--ink); font-weight: 600; font-size: 12px; margin-left: 4px; }
.amt .row1 b { font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.amt .row2 { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.amt input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 24px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.amt .tsel { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--rule); font-weight: 600; font-size: 13.5px; }
.amt .tsel .tok { width: 24px; height: 24px; font-size: 8.5px; }
.amt .usd { font-size: 12px; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.amt.off { opacity: .5; }
.amt.off input { pointer-events: none; }
.flip { align-self: center; width: 32px; height: 32px; margin: -17px 0; border-radius: 8px; border: 1px solid var(--rule); background: var(--card); display: grid; place-items: center; z-index: 1; color: var(--ink-2); }
.flip:hover { color: var(--ink); border-color: var(--rule-2); }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); }
.kv b { color: var(--ink); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.kvs { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--rule); }
.note { font-size: 13px; line-height: 1.55; color: var(--ink-2); padding: 11px 13px; border-radius: var(--r); background: var(--card-2); border: 1px solid var(--rule); }
.note.warn { background: var(--warn-wash); border-color: transparent; color: var(--ink); }
.note.bad { background: var(--down-wash); border-color: transparent; color: var(--ink); }
.note.info { background: var(--info-wash); border-color: transparent; color: var(--ink); }
.note b { font-weight: 600; }
.note a { text-decoration: underline; text-underline-offset: 2px; }
.cant { padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.cant .stamp { align-self: flex-start; font-size: 11px; height: 22px; padding: 0 9px; }
.cant h3 { font-size: 19px; }
.cant p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.slip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.slip:hover { border-color: var(--rule-2); }
.slip b { font-weight: 500; font-variant-numeric: tabular-nums; }

/* simulator */
.slider { width: 100%; -webkit-appearance: none; appearance: none; height: 3px; border-radius: 3px; background: var(--rule-2); outline: 0; margin: 12px 0 4px; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--ink); cursor: pointer; box-shadow: var(--shadow); }
.slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--ink); cursor: pointer; }
.sim-out { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.sim-out > div { padding: 11px 13px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); background: var(--card); }
.sim-out > div:nth-child(2n) { border-right: 0; }
.sim-out small { display: block; font-size: 11.5px; color: var(--ink-3); }
.sim-out b { font-weight: 500; font-size: 17px; font-variant-numeric: tabular-nums; }
.sim-out .net { grid-column: span 2; display: flex; justify-content: space-between; align-items: center; border-bottom: 0; border-right: 0; background: var(--card-2); }
.sim-out .net b { font-size: 21px; }

/* ---------- posisi ---------- */
.pos-sum { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule); }
.kpi { min-width: 0; padding: 18px 20px 18px 0; }
.pos-sum .kpi + .kpi { padding-left: 20px; border-left: 1px solid var(--rule); }
.kpi .k { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.kpi .v { font-size: 26px; font-weight: 500; margin-top: 4px; letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi .n { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.pos-list { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.pos { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(240px, 1.6fr) repeat(2, minmax(110px, .8fr)) auto; gap: 20px; align-items: center; padding: 16px 20px; }
.pos .rb { position: relative; height: 36px; }
.pos .rb .track { position: absolute; left: 0; right: 0; top: 15px; height: 3px; background: var(--rule); border-radius: 3px; }
.pos .rb .band { position: absolute; top: 12px; height: 9px; border-radius: 3px; background: var(--acc-wash); border: 1px solid var(--ink-2); }
.pos .rb .now { position: absolute; top: 6px; width: 1.5px; height: 22px; background: var(--brand); }
.pos .rb .lab { position: absolute; top: 26px; font-size: 10.5px; color: var(--ink-3); transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pos .acts { display: flex; gap: 6px; }
.pos .acts .btn { height: 32px; padding: 0 12px; font-size: 13px; }
.connect-box { padding: 56px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.connect-box h2 { font-size: 24px; }
.connect-box p { color: var(--ink-2); max-width: 52ch; }

/* ---------- judul halaman ---------- */
.ph { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.ph h1 { font-size: clamp(30px, 3.4vw, 42px); font-weight: 600; letter-spacing: -.035em; }
.ph p { color: var(--ink-2); font-size: 16px; max-width: 62ch; margin-top: 10px; line-height: 1.6; }
.ph .r { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.simgrid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 22px; margin-top: 24px; align-items: start; }
.creategrid { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
.simchart { height: 360px; }
.simchart svg { width: 100%; height: 100%; overflow: visible; }
.picker { position: relative; }
.picker-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 300px; overflow: auto; background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r); box-shadow: var(--shadow-lg); }
.picker-list button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; text-align: left; font-size: 13.5px; }
.picker-list button:hover, .picker-list button.on { background: var(--card-3); }
.picker-list button .r { margin-left: auto; font-size: 12.5px; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- docs ---------- */
.docs { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 64px; justify-content: center; }
.docs > * { min-width: 0; }
.toc { position: sticky; top: calc(var(--nav-h) + 28px); align-self: start; max-height: calc(100vh - var(--nav-h) - 80px); overflow: auto; font-size: 13.5px; }
.toc .small-caps { display: block; margin-bottom: 12px; }
.toc a { display: block; padding: 5px 0 5px 12px; color: var(--ink-3); border-left: 1px solid var(--rule); }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--ink); border-left: 1.5px solid var(--ink); padding-left: 11.5px; font-weight: 500; }
.prose { font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.prose h1 { font-size: 40px; color: var(--ink); letter-spacing: -.035em; font-weight: 600; margin-bottom: 18px; }
.prose h2 { font-size: 24px; color: var(--ink); margin: 56px 0 14px; padding-top: 26px; border-top: 1px solid var(--rule); font-weight: 600; }
.prose h3 { font-size: 17px; color: var(--ink); margin: 26px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose b, .prose strong { color: var(--ink); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--ink); }
.prose code { font-family: var(--f-mono); font-size: 13px; background: var(--card-3); padding: 1px 6px; border-radius: 4px; color: var(--ink); word-break: break-all; }
.prose .ex { border-left: 2px solid var(--ink); background: var(--card); padding: 12px 16px; border-radius: 0 var(--r) var(--r) 0; margin: 0 0 16px; }
.prose figure { margin: 18px 0 22px; padding: 20px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.prose figure svg { width: 100%; height: auto; }
.prose figcaption { font-size: 13px; color: var(--ink-3); margin-top: 10px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 18px; }
.prose th, .prose td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.prose dl dt { font-weight: 600; color: var(--ink); margin-top: 12px; }
.prose dl dd { margin: 2px 0 0; }
.prose details { border-bottom: 1px solid var(--rule); padding: 13px 0; }
.prose summary { cursor: pointer; font-weight: 550; color: var(--ink); list-style: none; display: flex; justify-content: space-between; }
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after { content: "+"; color: var(--ink-3); }
.prose details[open] summary::after { content: "−"; }
.prose details p { margin: 10px 0 0; }

/* ---------- halaman token ---------- */
.ca-card { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.ca-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--card-2); border: 1px solid var(--rule); font-family: var(--f-mono); font-size: 14px; word-break: break-all; }
.ca-row .btn { margin-left: auto; flex: none; font-family: var(--f-ui); }

/* ---------- modal / ringkasan transaksi ---------- */
.modal-wrap { position: fixed; inset: 0; z-index: 80; background: var(--scrim); display: grid; place-items: center; padding: 20px; animation: fade .15s ease-out; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(460px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--card); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--rule); animation: pop .18s ease-out; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }
.modal-h { display: flex; align-items: center; padding: 18px 20px 6px; }
.modal-h h3 { font-size: 17px; }
.modal-h .x { margin-left: auto; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: var(--ink-3); font-size: 19px; }
.modal-h .x:hover { background: var(--card-3); color: var(--ink); }
.modal-b { padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.receipt { background: var(--card-2); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; font-size: 13px; }
.receipt .rh { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; font-weight: 600; }
.receipt .rh .num { letter-spacing: 0; font-weight: 500; }
.receipt .kv { padding: 4px 0; }
.receipt .tot { border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 9px; }
.stepper { display: flex; flex-direction: column; gap: 6px; }
.stepper .s { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--rule); }
.stepper .s i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--rule-2); display: grid; place-items: center; font-style: normal; font-size: 10.5px; color: var(--ink-3); flex: none; font-variant-numeric: tabular-nums; }
.stepper .s.run { border-color: var(--acc-line); }
.stepper .s.run i { border-color: var(--ink); border-top-color: transparent; animation: spin .8s linear infinite; }
.stepper .s.done i { background: var(--up); border-color: var(--up); color: #fff; }
.stepper .s.err i { background: var(--down); border-color: var(--down); color: #fff; }
.stepper .s a { margin-left: auto; font-size: 12px; color: var(--info); }
@keyframes spin { to { transform: rotate(360deg); } }
.wallets { display: flex; flex-direction: column; gap: 8px; }
.wallets button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--rule); font-weight: 550; text-align: left; }
.wallets button:hover { border-color: var(--ink-3); background: var(--card-2); }
.wallets img, .wallets .wi { width: 28px; height: 28px; border-radius: 7px; }
.wallets .wi { background: var(--card-3); display: grid; place-items: center; }
.wallets small { display: block; color: var(--ink-3); font-weight: 400; font-size: 12px; }

/* palet pencarian */
.spal { width: min(620px, 100%); align-self: start; margin-top: 10vh; }
.spal .field { height: 54px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; padding: 0 18px; }
.spal .field input { font-size: 16px; }
.spal .res { max-height: 56vh; overflow: auto; padding: 6px; }
.spal .res button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; text-align: left; }
.spal .res button.on, .spal .res button:hover { background: var(--card-3); }
.spal .res .r { margin-left: auto; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.spal .hint { display: flex; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-3); }

/* toast */
#toastRoot { position: fixed; right: 18px; bottom: calc(var(--status-h) + var(--tabbar-h) + 14px); z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast { min-width: 260px; max-width: 380px; background: var(--ink); color: var(--paper); padding: 12px 14px; border-radius: 10px; font-size: 13.5px; box-shadow: var(--shadow-lg); animation: pop .2s ease-out; display: flex; gap: 10px; align-items: flex-start; }
.toast.bad { background: var(--down); color: #fff; }
.toast a { text-decoration: underline; }

/* tooltip istilah */
[data-tip] { border-bottom: 1px dotted var(--ink-3); cursor: help; position: relative; }
.tipbox { position: fixed; z-index: 95; max-width: 280px; background: var(--ink); color: var(--paper); font-size: 12.5px; line-height: 1.5; padding: 9px 11px; border-radius: 8px; pointer-events: none; box-shadow: var(--shadow-lg); font-weight: 400; text-transform: none; letter-spacing: 0; text-align: left; white-space: normal; }

/* ---------- responsif ---------- */
@media (max-width: 1180px) {
  .ff { grid-template-columns: 1fr; }
  .ff-pick { flex-direction: row; overflow-x: auto; }
  .ff-pick button { min-width: 230px; }
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .proof-strip { grid-template-columns: repeat(3, 1fr); }
  .proof-strip > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .proof-strip > div:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .truth { grid-template-columns: 1fr; gap: 24px; }
  .pool-grid { grid-template-columns: 1fr; }
  .act { position: static; }
  .pool-stats { grid-template-columns: repeat(3, 1fr); }
  .pool-stats > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .pool-stats > div:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .ledger .h-age, .ledger .h-trend { display: none; }
  .simgrid, .creategrid { grid-template-columns: 1fr; }
  .pos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  :root { --gut: 16px; --tabbar-h: 62px; --nav-h: 58px; }
  .links, .search-btn, #themeBtn, .st-r a:not(:first-child) { display: none; }
  .nav-r .icon-btn[data-social] { width: 32px; height: 32px; }
  .nav-in { gap: 10px; }
  .nav-r { margin-left: auto; }
  .nav-r .btn { margin-left: 4px; padding: 0 12px; height: 34px; }
  .ca-chip { height: 28px; font-size: 11px; padding: 0 8px; margin-right: 2px; }
  .ca-chip span:not(.num) { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom); background: var(--card); border-top: 1px solid var(--rule); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--ink-3); font-weight: 500; }
  .tabbar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar .on { color: var(--ink); }
  .status .sep:nth-of-type(2), .status span:nth-of-type(3) { display: none; }
  .page { padding-top: 22px; }
  .hero-copy h1 { margin-top: 20px; }
  .hero-main { min-height: 0; }
  .lp-num { font-size: 32px; }
  .lp-item { grid-template-columns: minmax(0, 1fr) 42px 64px 76px; font-size: 12.5px; }
  .proof-strip { grid-template-columns: 1fr 1fr; }
  .proof-strip > div { padding-left: 0 !important; border-left: 0 !important; border-top: 1px solid var(--rule); }
  .proof-strip > div:nth-child(2n) { padding-left: 16px !important; border-left: 1px solid var(--rule) !important; }
  .proof-strip > div:nth-child(-n+2) { border-top: 0; }
  .proof-strip > div:last-child { grid-column: span 2; padding-left: 0 !important; border-left: 0 !important; }
  .proof-strip .v { font-size: 21px; }
  .cmp > div { padding: 12px; } .cmp .v { font-size: 17px; }
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .ledger table { display: none; }
  .mlist { display: block; }
  .mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 13px 14px; border-bottom: 1px solid var(--rule); }
  .mrow .yl { text-align: right; }
  .mrow .yl b { font-weight: 500; font-size: 16px; font-variant-numeric: tabular-nums; }
  .mrow .yl small { display: block; font-size: 11px; color: var(--ink-3); }
  .mrow .facts { grid-column: span 2; display: flex; gap: 14px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
  .mrow .facts b { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
  .tabs { gap: 16px; }
  .tabs button { font-size: 16px; }
  .tbar .field { flex: 1 1 100%; order: 3; }
  .tfoot > span:nth-child(2) { display: none; }
  .tfoot { flex-wrap: wrap; gap: 8px; }
  .pool-stats { grid-template-columns: repeat(2, 1fr); }
  .pool-stats > div { padding-left: 0 !important; border-left: 0 !important; border-top: 1px solid var(--rule); }
  .pool-stats > div:nth-child(2n) { padding-left: 14px !important; border-left: 1px solid var(--rule) !important; }
  .pool-stats > div:nth-child(-n+2) { border-top: 0; }
  .pool-head h1 { font-size: 26px; }
  .pool-head .acts { margin-left: 0; width: 100%; }
  .chart { height: 300px; }
  .chart-tools .r { display: none; }
  .subtabs { overflow-x: auto; gap: 16px; }
  .subtabs button { white-space: nowrap; }
  .docs { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
  .prose h1 { font-size: 32px; }
  .prose table { display: block; overflow-x: auto; }
  .prose ul, .prose ol { padding-left: 18px; }
  .pos-sum { grid-template-columns: 1fr 1fr; }
  .pos-sum .kpi { padding-left: 0 !important; border-left: 0 !important; border-top: 1px solid var(--rule); }
  .pos-sum .kpi:nth-child(2n) { padding-left: 16px !important; border-left: 1px solid var(--rule) !important; }
  .pos-sum .kpi:nth-child(-n+2) { border-top: 0; }
  .pos { grid-template-columns: 1fr; }
  .ph .r { margin-left: 0; flex-wrap: wrap; }
  .proof dl { grid-template-columns: 1fr; gap: 2px; }
  .proof dd { margin-bottom: 8px; }
  #out.sim-out { grid-template-columns: 1fr 1fr !important; }
  #out.sim-out > div { grid-column: auto !important; }
  .modal-wrap { place-items: end center; padding: 0; }
  .modal { width: 100%; border-radius: 16px 16px 0 0; max-height: 92vh; }
  .spal { margin-top: 0; align-self: end; }
  #toastRoot { left: 12px; right: 12px; }
}
@media (max-width: 480px) {
  .brand span { display: none; }
  .nav-r #themeBtn { display: none; }
  .cmp { grid-template-columns: 1fr; }
  .cmp > div + div { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}