/* ============================================================
   base.css -- BTC Desk shared foundation
   Fase 1 (checklist-upgrade-pro-btc-desk.md): konsolidasi tokens
   & komponen bersama dari index.html, futures.html, options.html.

   Sumber kanonik token warna/tipografi: index.html (paling lengkap:
   cyan/pink/accent2/surface tiers). futures.html & options.html
   sebelumnya punya :root TERPISAH dengan NAMA VARIABEL BERBEDA
   (--panel/--txt/--grn/--amb/--acc/--line/--mono) walau nilainya
   nyaris sama. Alias di bawah menyambungkan nama lama itu ke token
   kanonik supaya kedua file itu tidak perlu ditulis ulang sekaligus,
   tapi sekarang cuma ada SATU sumber kebenaran warna, bukan dua.

   Update kontras (perbaikan keterbacaan): --muted & --dim sebelumnya
   (#71717a / #52525b) di atas --bg (#0a0a0f) hanya menghasilkan
   rasio kontras ~4.1:1 dan ~2.6:1 -- di bawah ambang WCAG AA 4.5:1
   untuk teks kecil, jadi label kartu/placeholder terasa pudar.
   Dinaikkan ke #a1a1aa (~7.7:1) dan #86868f (~5.1:1). --text tidak
   diubah karena sudah kontras tinggi (#e7e7f0 di atas --bg). ------

   Palet "Brass & Verdigris" (recolor total, checklist tersendiri):
   indigo/ungu generik SaaS diganti kuningan (brass, --accent) +
   teal verdigris (--cyan/--accent2) -- pasangan warna yang mengacu
   ke instrumen kuningan tua & patina tembaga meja trading fisik,
   bukan default gradient indigo-ungu. Hijau/merah/amber tetap
   secara semantik hijau/merah/amber (bullish/bearish/caution) tapi
   dengan rona yang lebih jenuh & berbeda dari default Tailwind.
   Neutral (bg/surface/text/muted/dim) digeser sedikit hangat
   (warm-neutral, bukan biru-dingin) sambil MEMPERTAHANKAN rasio
   kontras yang sama persis dengan perbaikan di atas -- --muted &
   --dim baru dicocokkan ke luminansi persepsi yang sama dengan
   nilai lama supaya tidak ada regresi aksesibilitas. ------------ */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* --- token kanonik (dari index.html) --- */
  --bg:#0c0d10;--surface:#15171b;--surface2:#1c1f24;--surface3:#262a31;
  --border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.11);
  --text:#efece4;--muted:#a5a190;--dim:#837f70;
  --accent:#d1a350;--accent2:#b97a4a;
  --green:#35c46a;--green-bg:rgba(53,196,106,0.1);--green-bd:rgba(53,196,106,0.3);
  --red:#e6483f;--red-bg:rgba(230,72,63,0.1);--red-bd:rgba(230,72,63,0.3);
  --amber:#e8973a;--amber-bg:rgba(232,151,58,0.1);--amber-bd:rgba(232,151,58,0.3);
  --blue:#5a9bd4;--cyan:#4fb8ac;--pink:#d98a6a;
  --font-mono:'Space Mono',monospace;--font:'Inter',system-ui,sans-serif;

  /* --- alias kompatibilitas untuk futures.html & options.html ---
     Sebelumnya file itu punya :root sendiri dengan nama-nama ini.
     Sekarang nilainya hanya mengikuti token kanonik di atas. */
  --panel:var(--surface);--panel2:var(--surface2);
  --line:var(--border);--txt:var(--text);
  --grn:var(--green);--amb:var(--amber);--acc:var(--accent);
  --mono:var(--font-mono);

  /* --- elevasi (Fase 3): 3 tingkat shadow lembut, dipakai bareng
     dengan tingkatan warna surface/surface2/surface3 supaya "naik
     level" terlihat dari shadow, bukan cuma dari warna latar.
     sm = level dasar (.card, --surface), md = kotak bersarang
     (--surface2, mis. .leg/.rcm/.rd-size-card di index.html),
     lg = disediakan untuk elemen --surface3 (badge/tag kecil
     sengaja tidak dipakaikan shadow -- lihat catatan di index.html). --*/
  --shadow-sm:0 2px 6px rgba(0,0,0,.3);
  --shadow-md:0 3px 10px rgba(0,0,0,.35);
  --shadow-lg:0 6px 18px rgba(0,0,0,.42);
  --shadow-card:0 10px 30px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.22);
  --shadow-card-hover:0 14px 34px rgba(0,0,0,.32),0 3px 10px rgba(0,0,0,.20);
}

/* ---------- RESET ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:radial-gradient(900px 500px at 8% -10%,rgba(209,163,80,.055),transparent 62%),radial-gradient(800px 480px at 92% 4%,rgba(79,184,172,.045),transparent 60%),var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5}

/* ---------- ACCESSIBILITY ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--surface);color:#fff;padding:8px 14px;border-radius:6px;z-index:999}
.skip-link:focus{left:10px;top:10px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---------- FOCUS STATES (Fase 3) ----------
   Semua halaman berbagi base.css, jadi cukup didefinisikan sekali di
   sini: ring lembut (box-shadow warna accent, bukan outline kotak
   default browser) untuk keyboard focus di button/input/select/link,
   plus versi khusus untuk thumb slider (input[type=range]) yang
   butuh pseudo-element vendor sendiri. Dipicu hanya lewat
   :focus-visible supaya klik mouse biasa tidak memunculkan ring. */
button:focus-visible,.btn:focus-visible,a:focus-visible,
input:not([type=range]):focus-visible,select:focus-visible,
textarea:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(209,163,80,.35);
}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(209,163,80,.4)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(209,163,80,.4)}
input[type=range]:focus-visible::-ms-thumb{box-shadow:0 0 0 4px rgba(209,163,80,.4)}

/* ---------- AMBIENT GLOW (Fase 3) ----------
   Utility untuk "angka hero" (harga BTC, verdict utama) supaya ada
   blur radial lembut di baliknya -- kesan lebih premium daripada teks
   polos di atas background flat. Pasang class .glow-num di elemen
   yang teksnya sudah berwarna (mis. .verdict-main, yang warnanya
   berubah ikut state .hero.go/.cau/.nt) -- glow otomatis ikut warna
   teks lewat currentColor, jadi tidak perlu CSS per-state terpisah.
   Tambahkan .glow-accent kalau elemen teksnya netral (mis. .big harga
   yang warnanya var(--text)/putih) supaya glow tetap berwarna accent
   alih-alih putih pucat. isolation:isolate membuat stacking context
   baru supaya z-index:-1 hanya menyembunyikan glow di belakang teks
   elemen itu sendiri, bukan di belakang seluruh card. */
.glow-num{position:relative;isolation:isolate}
.glow-num::before{content:'';position:absolute;inset:-30% -20%;background:radial-gradient(ellipse at center,currentColor 0%,transparent 70%);opacity:.16;filter:blur(20px);z-index:-1;pointer-events:none}
.glow-num.glow-accent::before{background:radial-gradient(ellipse at center,var(--accent) 0%,transparent 70%)}

/* ---------- BUTTON (.btn) ---------- */
.btn{background:transparent;border:1px solid var(--border2);color:var(--text);font-family:var(--font-mono);font-size:10px;padding:7px 13px;min-height:34px;border-radius:8px;cursor:pointer;transition:transform .15s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;letter-spacing:.04em}
.btn:hover{background:var(--surface2);border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 1px rgba(209,163,80,.08),0 6px 16px rgba(0,0,0,.18)}

/* ---------- PILL (.pill-sm) ---------- */
.pill-sm{font-size:10px;padding:4px 10px;border-radius:999px;font-family:var(--font-mono)}
.pill-sm.ok{background:var(--green-bg);border:1px solid var(--green-bd);color:var(--green)}
.pill-sm.warn{background:var(--amber-bg);border:1px solid var(--amber-bd);color:var(--amber)}
.pill-sm.err{background:var(--red-bg);border:1px solid var(--red-bd);color:var(--red)}
.pill-sm.muted{background:var(--surface2);border:1px solid var(--border);color:var(--muted)}

/* ---------- CARD BASE (.card) ----------
   futures.html/options.html sebelumnya punya .card sendiri dengan
   padding:14px (uniform). index.html pakai 14px 16px. Disamakan ke
   14px 16px di sini -- beda 2px horizontal, perubahan kecil yang
   disengaja sebagai bagian dari audit Fase 1.
   Fase 2: box-shadow ditambahkan supaya card punya depth tipis di
   ketiga halaman -- sebelumnya 0 dipakai sama sekali di manapun.
   Fase 3: nilai shadow dipindah ke var(--shadow-sm) (nilainya sama
   persis, cuma sekarang satu sumber token elevasi -- lihat :root). */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-card);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.card-title{font-size:11px;color:#b8b3a5;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px;font-weight:500;display:flex;align-items:center;gap:6px}
.card-title .dot{width:5px;height:5px;border-radius:50%}

/* ---------- MODAL SHELL ----------
   Dipindah dari index.html. Konten spesifik panduan (guide-h, .gc,
   .gf, dll) TETAP di index.html karena itu konten, bukan komponen
   struktural -- tapi shell modal ini reusable untuk futures/options
   kalau nanti butuh modal juga. */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{background:var(--surface);border:1px solid var(--border2);border-radius:16px;width:min(740px,94vw);box-shadow:0 24px 70px rgba(0,0,0,.55);max-height:85vh;overflow-y:auto;padding:28px 30px;position:relative;scrollbar-width:thin;scrollbar-color:var(--surface3) transparent}
.modal-box::-webkit-scrollbar{width:4px}.modal-box::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:2px}
.modal-close{position:absolute;top:16px;right:16px;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:var(--font-mono);font-size:10px;padding:4px 10px;border-radius:5px;cursor:pointer;transition:all .15s}
.modal-close:hover{border-color:var(--accent);color:var(--accent)}
.modal-title{font-family:var(--font-mono);font-size:17px;font-weight:700;color:var(--accent);margin-bottom:3px}
.modal-sub{font-size:11px;color:var(--muted);margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--border)}

/* ---------- ICON (shared inline-SVG sizing) (Fase 4) ----------
   ui.js / futures.js / options.js semua merender ikon lewat inline
   SVG (bukan emoji glyph) memakai stroke/fill="currentColor" supaya
   warna otomatis ikut teks/verdict di sekelilingnya. Aturan
   vertical-align disatukan di sini supaya tiap file tidak perlu
   mengulang inline style="vertical-align:...". Dipakai juga oleh
   ikon statis di modal-title/tombol (index.html) -- makanya
   .modal-title & .modal-close sekarang flex (lihat di bawah) supaya
   ikon dan teksnya sejajar rapi. */
.ic{vertical-align:-2px;flex-shrink:0}
.modal-title{display:flex;align-items:center;gap:7px}
.modal-close{display:inline-flex;align-items:center;gap:5px}

/* ---------- SKELETON LOADING PLACEHOLDER (Fase 4) ----------
   Dipasang lewat class="skel" di HTML pada elemen yang nilai awalnya
   cuma placeholder ("—"). Menyembunyikan teks placeholder itu
   sendiri (color:transparent) dan menaruh shimmer di baliknya supaya
   terlihat seperti "sedang memuat", bukan angka kosong yang diam.
   Dilepas otomatis oleh animate.js: animateValue() melepasnya per
   elemen begitu elemen itu menerima angka pertamanya, dan
   clearSkeletons() melepas sisanya (medan yang di-set lewat
   textContent biasa, bukan animateValue) begitu render pertama
   selesai -- lihat main.js/futures.js/options.js. Menghormati
   prefers-reduced-motion lewat aturan global di atas (animation-duration
   dipotong ke .01ms), jadi tidak perlu override terpisah di sini. */
.skel{color:transparent !important;background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%);background-size:200% 100%;animation:skel-shimmer 1.4s ease-in-out infinite;border-radius:4px;display:inline-block;min-width:2.4em}
@keyframes skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- BUTTON / TOGGLE PRESS STATE (Fase 4) ----------
   :hover sudah ada di base.css (.btn:hover) dan di futures.html/
   options.html (button:hover{border-color:...}). Menambahkan :active
   di sini supaya SEMUA tombol & toggle di ketiga halaman dapat umpan
   balik "ditekan" yang jelas (bukan cuma warna hover saat mouse
   diam di atasnya) tanpa perlu menambahkan aturan itu berulang di
   tiap file. Skala kecil (.96) terasa sebagai "tekanan" tanpa
   memindahkan layout di sekitarnya. :disabled dikecualikan supaya
   tombol nonaktif tidak ikut "menekan". */
button:not(:disabled):active,.btn:active{transform:scale(.96)}

/* Toggle arah (LONG/SHORT di futures.html): sebelumnya cuma state
   .active yang punya style berbeda -- sisi yang TIDAK aktif terasa
   mati saat di-hover (tidak ada umpan balik apa pun kalau pointer
   ada di atasnya sebelum diklik). Tambahkan hover halus di sini,
   satu sumber untuk komponen yang dipakai di futures.html. */
.dir-toggle button:not(.active):hover{background:rgba(255,255,255,.05);color:var(--text)}

/* ---------- PROBABILITY GAUGE (Fase 5 checklist item 1) ----------
   Dulu ada 2 varian probabilitas di ketiga halaman: (a) odds-table
   di index.html pakai <span class="odds-bar"> lebar STATIS dalam px
   (tidak animasi sama sekali, cuma dihitung sekali saat render), dan
   (b) tabel kurva barrier di futures.html cuma teks persen berwarna,
   tanpa bar apapun. Keduanya diganti dengan komponen SVG yang sama:
   sebuah garis (path) dengan stroke-dasharray tetap dan
   stroke-dashoffset yang di-transition -- BUKAN width, supaya
   animasinya GPU-friendly dan warnanya (stroke) bisa berubah halus
   terpisah dari panjang isinya.
   Markup-nya (lihat ui.js/futures.js probGaugeHtml()) SELALU dibuat
   dengan stroke-dashoffset = panjang penuh (kosong) dulu; caller lalu
   memanggil animateProbGauges() satu tick kemudian (requestAnimationFrame)
   supaya browser sempat melukis state "kosong" itu sebelum transition
   ke nilai target berjalan -- pola yang sama dengan #heroConfBar yang
   sudah ada (width:0% dulu, br diisi lewat setTimeout). */
.prob-gauge{vertical-align:middle;overflow:visible;flex-shrink:0}
.prob-gauge-track{stroke:rgba(255,255,255,.08)}
.prob-gauge-fill{transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1),stroke .35s ease}

/* ---------- CTA BUTTON GRADIENT (Fase 6 checklist item 2) ----------
   Checklist: "Tambahkan gradient tipis di tombol CTA utama (Segarkan,
   Long/Short, submit)". Aplikasi ini tidak punya tombol "submit"
   terpisah -- semua kontrol (slider retail plan, slider strangle,
   input equity/risk) live-update lewat oninput/onchange, tidak ada
   form dengan submit button, jadi bagian itu tidak berlaku di sini.
   Yang ada: tombol Segarkan/refresh (ketiga halaman) dan toggle
   Long/Short (futures.html, di-handle terpisah lewat dir-toggle
   button.active.long/.short karena butuh warna hijau/merah, bukan
   accent).
   .btn-cta dipasang sebagai class TAMBAHAN (bukan pengganti) di atas
   .btn (index.html) atau di atas style `button{}` lokal futures.html/
   options.html -- specificity class (0,1,0 / 0,2,0 saat :hover)
   otomatis menang atas selector element polos (`button`, `.btn`) di
   semua kombinasi, jadi tidak perlu !important. Gradiennya sengaja
   low-opacity ("tipis") meneruskan bahasa visual border-gradient yang
   sudah dipakai sejak Fase 3 (.hero.go/.cau/.nt, .v-sell dkk), bukan
   tombol filled solid ala CTA marketing yang akan terasa asing di
   desk minimal begini. */
.btn-cta{
  background:linear-gradient(135deg,rgba(209,163,80,.16),rgba(79,184,172,.10));
  border-color:rgba(209,163,80,.4);
  color:var(--text);
}
.btn-cta:hover{
  background:linear-gradient(135deg,rgba(209,163,80,.26),rgba(79,184,172,.18));
  border-color:var(--accent);
  color:var(--accent);
}

/* Premium interaction layer: depth without layout movement. */
.card:hover{border-color:rgba(255,255,255,.10);box-shadow:var(--shadow-card-hover)}
.btn-cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 5px 16px rgba(0,0,0,.22)}
input[type=range]{height:18px}
@media(max-width:720px){.card{border-radius:12px}}