/* ===================== polish pass ===================== */
  :root{ color-scheme:dark;
         /* type: Sora (display/brand) + Inter Tight (UI/label) + Chivo Mono (angka/instrumen) */
         --font-display:'Sora','Inter Tight',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
         --font-sans:'Inter Tight',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
         /* angka pakai Chivo Mono (monospace, tabular figures) */
         --font-num:'Chivo Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
         --mono:var(--font-num);   /* alias lama → satu sumber kebenaran */
         --shadow:0 10px 30px rgba(0,0,0,.5); --ring:rgba(59,130,246,.35); }
  body.light{ color-scheme:light; --shadow:0 8px 22px rgba(22,33,55,.12); --ring:rgba(37,99,235,.28); }

  /* angka/data: Chivo Mono (monospace) dgn tabular figures agar rata */
  .clock,.price,.stat .v,#tfinfo,#curprice,#status,table td,input[type=number]{
    font-family:var(--mono); font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums; }

  /* tinggi kontrol seragam + focus ring jelas */
  .toolbar input,.toolbar select,.toolbar > button{ height:30px; }
  input:focus-visible,select:focus-visible,button:focus-visible,textarea:focus-visible{
    outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--ring); }
  ::selection{ background:var(--accent); color:#fff; }

  /* wordmark → dipindah ke dalam chart (pojok kiri-bawah), gaya watermark ala TradingView */
  .chart-brand{ position:absolute; bottom:28px; left:12px; z-index:7; /* kiri-bawah ala TradingView: kiri bebas (sumbu harga selalu di kanan), bottom 28px lolos sumbu waktu (~22px) */
    display:inline-flex; align-items:center; gap:7px;
    font-weight:700; font-size:13px; letter-spacing:-.01em; color:var(--txt);
    opacity:.85; pointer-events:none; user-select:none; }
  .chart-brand .glyph{ width:17px; height:17px; display:block; color:var(--luna-glow);
    filter:drop-shadow(0 0 6px rgba(174,185,232,.5)); }
  .chart-brand .glyph .luna-disc{ fill:currentColor; }
  .vsep{ width:1px; height:20px; background:var(--border); }
  /* header price block (tenang) — harga live instrumen aktif menyatu di toolbar */
  .hdr-px{ display:none; align-items:baseline; gap:9px; min-width:0; }   /* header price block disembunyikan (harga live tetap di chart/panel) */
  .hdr-last{ font-family:var(--font-num); font-size:15px; font-weight:700; letter-spacing:-.01em;
             font-variant-numeric:tabular-nums; color:var(--txt);
             text-shadow:0 0 10px rgba(174,185,232,.16); }
  .hdr-chg{ font-family:var(--font-num); font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .hdr-chg.up{ color:var(--green); }
  .hdr-chg.down{ color:var(--red); }
  .hdr-ba{ font-family:var(--font-num); font-size:10.5px; color:var(--muted);
           font-variant-numeric:tabular-nums; letter-spacing:.02em; white-space:nowrap; }
  @media (max-width:900px){ .hdr-ba{ display:none; } }
  /* ===== Luna Instrument Picker (ganti <select> native) ============================
     Signature: tiap pair = dua chip mata uang menyatu (base di atas quote). Metal/kripto
     dapat warna metaliknya. Baris aktif dapat bar crescent-glow --luna-glow. Select asli
     tetap ada (hidden) sbg sumber kebenaran → kode lama ($('#instrument').value/.onchange) utuh. */
  #instrument[hidden]{ display:none; }
  .ipick{ position:relative; }
  .ipick-trg{ display:flex; align-items:center; gap:8px; height:30px; padding:0 8px 0 7px; cursor:pointer;
    border:1px solid var(--border); border-radius:8px; background:var(--btn);
    transition:border-color .14s ease, background .14s ease, box-shadow .14s ease; }
  .ipick-trg:hover{ border-color:var(--btn-border-hover); background:var(--btn-hover); }
  .ipick-trg.open{ border-color:var(--luna-glow); box-shadow:0 0 0 1px var(--luna-glow), 0 0 16px rgba(174,185,232,.35); }
  .ipick-trg:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
  .ipick-tick{ font-family:var(--font-num); font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--txt); }
  .ipick-chev{ width:14px; height:14px; color:var(--muted); transition:transform .18s ease; flex:none; }
  .ipick-trg.open .ipick-chev{ transform:rotate(180deg); }

  /* fused dual-chip */
  .ipick-pair{ display:inline-flex; align-items:center; flex:none; }
  .ipick-chip{ width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-num); font-weight:700; font-size:9px; letter-spacing:.02em; color:#e7eaf2;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(0,0,0,.35); }
  .ipick-pair .ipick-chip+.ipick-chip{ margin-left:-7px; }
  .ipick-pair .ipick-chip:first-child{ position:relative; z-index:2;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 2px var(--panel), 0 1px 2px rgba(0,0,0,.4); }
  .ipick-trg .ipick-pair .ipick-chip:first-child{ box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 2px var(--btn), 0 1px 2px rgba(0,0,0,.4); }
  body.light .ipick-trg .ipick-pair .ipick-chip:first-child{ box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 2px var(--btn), 0 1px 2px rgba(0,0,0,.4); }
  .ipk-c-EUR{ background:linear-gradient(155deg,#2c3a5c,#1f2942); }
  .ipk-c-USD{ background:linear-gradient(155deg,#20423a,#173029); }
  .ipk-c-GBP{ background:linear-gradient(155deg,#352c54,#241d3c); }
  .ipk-c-JPY{ background:linear-gradient(155deg,#4a2b33,#331d24); }
  .ipk-c-AUD{ background:linear-gradient(155deg,#463a20,#302816); }
  .ipk-c-CAD{ background:linear-gradient(155deg,#452e24,#2f1f18); }
  .ipk-c-NZD{ background:linear-gradient(155deg,#1c3f3c,#122b29); }
  .ipk-c-CHF{ background:linear-gradient(155deg,#4a2626,#331a1a); }
  .ipk-c-XAU{ background:linear-gradient(155deg,#6a531f,#4a3915); color:#f0cf76; }
  .ipk-c-XAG{ background:linear-gradient(155deg,#3a4048,#2a2f36); color:#dfe6f0; }
  .ipk-c-BTC{ background:linear-gradient(155deg,#5c3a13,#40290d); color:#f7a53a; }
  .ipk-c-ETH{ background:linear-gradient(155deg,#343b63,#242848); color:#b9c2f0; }
  .ipk-c-LTC{ background:linear-gradient(155deg,#2b3440,#1d232c); color:#b9c6d6; }
  .ipk-c-BCH{ background:linear-gradient(155deg,#1f4030,#153021); color:#7fdca8; }
  .ipk-c-DXY{ background:linear-gradient(155deg,#28356a,#1c2648); color:#9fb1ff; }
  /* indeks: satu warna slate bersama — teks kode indeks yang membedakan */
  .ipk-c-SPX,.ipk-c-NAS,.ipk-c-DJI,.ipk-c-RUT,.ipk-c-DAX,.ipk-c-FTSE,.ipk-c-CAC,.ipk-c-STOXX,.ipk-c-NKY,.ipk-c-ASX,.ipk-c-HSI{
    background:linear-gradient(155deg,#2b3444,#1d2431); color:#c3ccdb; }

  /* dropdown panel */
  .ipick-panel{ position:absolute; top:calc(100% + 8px); left:0; width:308px; max-width:calc(100vw - 24px); z-index:1300;
    background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
    overflow:hidden; transform-origin:top left; opacity:0; transform:translateY(-6px) scale(.98);
    pointer-events:none; transition:opacity .16s ease, transform .16s ease; }
  .ipick-panel.open{ opacity:1; transform:none; pointer-events:auto; }
  .ipick-search{ display:flex; align-items:center; gap:8px; padding:11px 12px 10px; border-bottom:1px solid var(--line); }
  .ipick-box{ flex:1; display:flex; align-items:center; gap:8px; height:34px; padding:0 11px;
    background:var(--inset); border:1px solid var(--border); border-radius:8px;
    transition:border-color .12s ease, box-shadow .12s ease; }
  .ipick-box:focus-within{ border-color:#eef1f7; box-shadow:0 0 0 1px #eef1f7, 0 0 13px rgba(174,185,232,.5); }
  body.light .ipick-box:focus-within{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 0 13px rgba(90,108,196,.4); }
  .ipick-box svg{ width:14px; height:14px; color:var(--muted); flex:none; }
  .ipick-box input{ flex:1; min-width:0; border:0; background:transparent; outline:none; color:var(--txt); font:13px var(--font-sans); }
  .ipick-box input::placeholder{ color:var(--muted); }
  .ipick-kbd{ font-family:var(--font-num); font-size:10px; color:var(--muted); border:1px solid var(--border);
    border-radius:5px; padding:2px 5px; background:var(--btn); }
  .ipick-list{ max-height:376px; overflow-y:auto; padding:5px 5px 7px; }
  .ipick-list::-webkit-scrollbar{ width:9px; }
  .ipick-list::-webkit-scrollbar-thumb{ background:#2f2f35; border-radius:6px; border:2px solid var(--panel); }
  body.light .ipick-list::-webkit-scrollbar-thumb{ background:#cfd5de; border-color:var(--panel); }
  .ipick-eye{ display:flex; align-items:center; gap:8px; padding:11px 9px 5px; }
  .ipick-eye .lbl{ font-family:var(--font-display); font-weight:600; font-size:10px; letter-spacing:.15em;
    text-transform:uppercase; color:var(--hdr); }
  .ipick-eye .rule{ flex:1; height:1px; background:var(--line); }
  .ipick-eye .cnt{ font-family:var(--font-num); font-size:10px; color:var(--muted); }
  .ipick-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px;
    padding:7px 9px; border-radius:9px; cursor:pointer; position:relative; transition:background .1s ease; }
  .ipick-row:hover, .ipick-row.cursor{ background:var(--btn-hover); }
  .ipick-row.on{ background:rgba(174,185,232,.11); }
  body.light .ipick-row.on{ background:rgba(90,108,196,.12); }
  .ipick-row.on::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; border-radius:2px;
    background:var(--luna-glow); box-shadow:0 0 8px rgba(174,185,232,.7); }
  .ipick-row .id{ min-width:0; }
  .ipick-row .sym{ font-family:var(--font-num); font-weight:700; font-size:12.5px; letter-spacing:.02em; color:var(--txt); }
  .ipick-row .name{ font-size:11px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ipick-row .px{ text-align:right; font-family:var(--font-num); }
  .ipick-row .last{ font-size:12.5px; font-weight:700; color:var(--txt); font-variant-numeric:tabular-nums; }
  .ipick-row .chg{ font-size:10.5px; margin-top:1px; display:flex; align-items:center; gap:3px; justify-content:flex-end; font-variant-numeric:tabular-nums; }
  .ipick-row .chg.up{ color:var(--green); } .ipick-row .chg.down{ color:var(--red); }
  .ipick-row .chg .arw{ font-size:8px; }
  .ipick-empty{ padding:26px 12px; text-align:center; color:var(--muted); font-size:12px; }
  @media (prefers-reduced-motion:reduce){ .ipick-panel{ transition:opacity .12s ease; transform:none; } .ipick-chev{ transition:none; } }

  /* Placeholder bulan statis: identitas lunar sejak paint pertama (sebelum klinecharts
     load & loadInit jalan). Dihapus via JS saat chart pertama ter-render. */
  .chart-boot{ position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
    background:var(--bg); color:var(--luna-glow); pointer-events:none;
    filter:drop-shadow(0 0 8px rgba(174,185,232,.4)); }
  .chart-boot .cl-disc{ fill:currentColor; }

  /* ===== Moon loader: momen lunar saat ganti instrument ===== */
  /* Overlay di area chart. Signature: bulan sabit brand yg "berubah fase"
     (cutout mask bergeser → sabit menebal/menipis) + glow lembut ber-pulse. */
  .chart-loading{ position:absolute; inset:0; z-index:40; pointer-events:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    background:rgba(14,15,20,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
    opacity:0; visibility:hidden; transition:opacity .28s ease, visibility 0s linear .28s; }
  .chart-loading.is-on{ opacity:1; visibility:visible; transition:opacity .28s ease; }
  body.light .chart-loading{ background:rgba(244,246,249,.55); }
  .cl-moon{ position:relative; width:56px; height:56px;
    animation:cl-rise .5s cubic-bezier(.2,.7,.2,1) both; }
  .chart-loading.is-on .cl-moon{ animation:cl-rise .5s cubic-bezier(.2,.7,.2,1) both; }
  .cl-glow{ position:absolute; inset:-45%; border-radius:50%;
    background:radial-gradient(circle at 50% 50%, rgba(174,185,232,.5), rgba(174,185,232,0) 68%);
    animation:cl-pulse 2.4s ease-in-out infinite; }
  .cl-moon svg{ position:relative; width:56px; height:56px; overflow:visible;
    color:var(--luna-glow); filter:drop-shadow(0 0 8px rgba(174,185,232,.45)); }
  .cl-moon .cl-disc{ fill:currentColor; }
  .cl-moon .cl-cut{ animation:cl-phase 2.4s ease-in-out infinite alternate; }
  .cl-label{ font-family:var(--font-display); font-size:12px; letter-spacing:.02em;
    color:var(--muted); display:flex; align-items:baseline; gap:6px; }
  .cl-label .cl-sym{ color:var(--luna-glow); font-weight:600; letter-spacing:.01em; }
  .cl-label .cl-dots::after{ content:''; animation:cl-dots 1.4s steps(4,end) infinite; }
  @keyframes cl-phase{ from{ cx:16.4px; } to{ cx:12.9px; } }
  @keyframes cl-pulse{ 0%,100%{ opacity:.35; transform:scale(.9); } 50%{ opacity:.85; transform:scale(1.06); } }
  @keyframes cl-rise{ from{ opacity:0; transform:translateY(8px) scale(.94); } to{ opacity:1; transform:none; } }
  @keyframes cl-dots{ 0%{ content:''; } 25%{ content:'·'; } 50%{ content:'··'; } 75%{ content:'···'; } 100%{ content:''; } }
  @media (prefers-reduced-motion: reduce){
    .cl-moon,.cl-glow,.cl-moon .cl-cut,.cl-label .cl-dots::after{ animation:none; }
    .cl-glow{ opacity:.6; }
  }

  /* toggle jadi ghost button */
  #replayToggle,#bottomToggle{ background:transparent; border-color:transparent; color:var(--muted); padding:4px 9px; }
  #replayToggle:hover,#bottomToggle:hover{ color:var(--txt); background:var(--btn-hover); }

  /* stat cards */
  .stat{ transition:border-color .15s; }
  .stat:hover{ border-color:var(--btn-border-hover); }
  .stat .k{ letter-spacing:.05em; }
  .stat .v{ font-size:18px; letter-spacing:-.01em; }

  /* judul section + accent tick */
  .bp-title,.panel h3{ display:flex; align-items:center; gap:7px; }
  .bp-title::before,.panel h3::before{ content:""; width:3px; height:11px; border-radius:2px; background:var(--accent); flex:none; }

  /* BUY/SELL lebih tegas */
  .bp-trade .buy,.bp-trade .sell{ font-weight:700; letter-spacing:.03em; min-width:76px; }

  /* label data huruf kecil-kapital */
  .rlabel{ text-transform:uppercase; letter-spacing:.05em; font-size:10px; opacity:.85; }

  /* scrollbar tipis bertema */
  .journal-wrap,.bottompanel{ scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
  .journal-wrap::-webkit-scrollbar,.bottompanel::-webkit-scrollbar{ width:10px; height:10px; }
  .journal-wrap::-webkit-scrollbar-thumb,.bottompanel::-webkit-scrollbar-thumb{
    background:var(--border); border-radius:6px; border:3px solid transparent; background-clip:padding-box; }

  .ctxmenu{ box-shadow:var(--shadow); }

  /* badge akun (paper/live) — pemisahan jelas dari mode chart, ala TradingView */
  .acct-badge{ display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 11px; border-radius:7px;
    border:1px solid var(--border); background:var(--btn); color:var(--muted);
    font-size:11px; font-weight:700; letter-spacing:.04em; }
  .acct-badge.demo{ color:var(--accent); }
  .acct-badge.live{ color:var(--green); }
  /* jam + pemilih timezone di pojok kanan-bawah chart (ala TradingView) */
  .tz-clock{ position:absolute; bottom:3px; right:3px; z-index:7; cursor:pointer; user-select:none;
    background:var(--btn); border:1px solid var(--border); color:var(--muted);
    font:600 10px/1 var(--mono); padding:4px 7px; border-radius:5px; white-space:nowrap; }
  .tz-clock:hover{ color:var(--txt); }
  .tz-menu{ position:absolute; bottom:30px; right:3px; z-index:30; display:none;
    background:var(--panel); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow);
    max-height:55vh; overflow:auto; min-width:210px; padding:4px; }
  .tz-menu.open{ display:block; }
  .tz-item{ display:flex; align-items:center; gap:8px; padding:6px 9px; border-radius:6px;
    font-size:12px; color:var(--txt); cursor:pointer; white-space:nowrap; }
  .tz-item:hover{ background:var(--btn-hover); }
  .tz-item .ck{ width:13px; color:var(--accent); }
  .tz-item .off{ color:var(--muted); font-family:var(--mono); font-size:11px; min-width:62px; }
  /* kontrol playback lama di toolbar — kini DIKONSOLIDASI ke floating pill bawah (.replaypill).
     Elemen tetap ada di DOM (jd sumber nilai #speed + handler lama), tapi tak pernah tampil. */
  #replayCtrls{ display:none; align-items:center; gap:5px; }
  #replayCtrls.on{ display:none; }
  #replayCtrls button{ padding:5px 9px; }
  #replayCtrls .rlabel{ margin-left:3px; }
  #replayCtrls select{ height:28px; padding:2px 6px; border-radius:6px; background:var(--btn);
                       border:1px solid var(--border); color:var(--txt); font-size:12px; cursor:pointer; }