/* ============================================================
   PHOENIX CRYPTO TERMINAL v8 — rombak tipografi & kepadatan (2026-07-29)

   Apa yang berubah dari v7, dan kenapa:

   1. SKALA TEKS DINAIKKAN SATU TINGKAT.
      Di v7, 57% deklarasi font-size berada di bawah 11px (21 di antaranya
      8.5px) — sementara aplikasi Phoenix sendiri hanya 29%, didominasi
      11-13px. Halaman ini karena itu terbaca sesak dan terasa bukan bagian
      dari aplikasi yang sama. Semua ukuran kini lewat token --fs-* sehingga
      skalanya bisa disetel dari SATU tempat, bukan 125 tempat.

   2. KEPADATAN MENYESUAIKAN TEKS BARU.
      Teks lebih besar butuh ruang: fakta outlook 5→3 kolom, heatmap 6→4,
      faktor live 4→2 di HP, ringkasan flow 3→2. Tanpa ini, menaikkan teks
      justru bikin makin berdesakan.

   3. BREAKPOINT 10 → 3.
      v7 memakai 390/420/520/560/680/760/820/900/1024/1120 dan urutannya
      TIDAK menaik — @media(max-width:760px) ditulis SETELAH 390px, jadi di
      HP kecil aturan yang menang bukan yang paling spesifik. Sekarang:
      560 (HP) · 820 (tablet) · 1024 (desktop), selalu urut.

   YANG SENGAJA DIPERTAHANKAN dari v7 karena memang sudah benar:
   sistem token permukaan s1/s2, pemetaan tema terang, geometri gauge
   (ada perbaikan bug jarum menembus angka — jangan diutak-atik),
   dukungan prefers-reduced-motion, dan SELURUH nama kelas & id.
   Logika data di crypto-intelligence.js tidak disentuh sama sekali.
   ============================================================ */

.crypto-terminal{
  /* --- permukaan (gelap = bawaan) --- */
  --hair:rgba(255,255,255,.055);
  --edge:rgba(255,255,255,.10);
  --edge2:rgba(255,255,255,.17);
  --s1:rgba(255,255,255,.038);
  --s2:rgba(255,255,255,.065);
  --panel:#0B1120;
  --text2:#C2CADB;
  --gold2:#F5B740;
  --r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:22px;
  --sh1:0 2px 10px rgba(0,0,0,.30);
  --sh2:0 12px 34px rgba(0,0,0,.42);
  --e1:cubic-bezier(.22,1,.36,1);
  --e2:cubic-bezier(.4,0,.2,1);
  --t1:.16s;--t2:.26s;--t3:.42s;

  /* --- SKALA TEKS (satu sumber kebenaran) ---
     Disetarakan dengan index.html: label terkecil 10px (bukan 8.5px),
     teks isi 12.5px, angka 13.5px. Mau lebih besar/kecil? Ubah di sini saja. */
  --fs-micro:10px;    /* kicker & label huruf-besar   (v7: 8.5) */
  --fs-label:11px;    /* keterangan sekunder          (v7: 9-9.5) */
  --fs-meta:11.5px;   /* meta, waktu, sumber          (v7: 10) */
  --fs-body:12.5px;   /* teks isi & kalimat           (v7: 10.5-11) */
  --fs-val:13.5px;    /* angka & nilai                (v7: 11-12.5) */
  --fs-title:14.5px;  /* judul kartu                  (v7: 13) */

  /* --- jarak (dinaikkan agar teks baru punya ruang bernapas) --- */
  --pad-card:15px;
  --gap:11px;

  min-height:100%;color:var(--silver);padding-bottom:28px;
  animation-fill-mode:none!important; /* sisa transform slideFwd mengurung fixed nav */
}
html[data-theme="terang"] .crypto-terminal{
  --hair:rgba(20,40,90,.09);
  --edge:rgba(20,40,90,.15);
  --edge2:rgba(20,40,90,.24);
  --s1:#FFFFFF;
  --s2:#F2F5FB;
  --panel:#DDE3F0;
  --text2:#3A465C;
  --sh1:0 2px 10px rgba(20,40,90,.10);
  --sh2:0 12px 30px rgba(20,40,90,.14);
}
.crypto-terminal .up{color:var(--green)}
.crypto-terminal .down{color:var(--red)}

.crypto-page{padding-bottom:24px}
.crypto-appbar{position:sticky;top:0;z-index:9;background:linear-gradient(180deg,var(--bg) 70%,transparent);padding-bottom:9px;margin-bottom:4px}
.crypto-terminal .appbar .ttl{font-weight:800;letter-spacing:-.25px}

/* ============ header status ============ */
.term-header{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:var(--pad-card) 16px;margin:0 0 var(--gap);border:1px solid var(--hair);border-radius:var(--r-lg);
  background:var(--s1);box-shadow:var(--sh1)}
.term-brand{display:flex;align-items:center;gap:12px;min-width:0}
.term-brand-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#1A1206;
  background:linear-gradient(135deg,var(--gold),var(--gold2));box-shadow:0 8px 24px rgba(255,213,106,.22)}
.term-brand-icon .ms{font-size:23px;font-weight:600}
.term-brand b{display:block;font-size:var(--fs-title);font-weight:800;letter-spacing:-.02em}
.term-brand small{display:block;margin-top:2px;color:var(--muted2);font-size:var(--fs-label)}
.term-status{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;
  color:var(--muted);font-size:var(--fs-label);font-weight:800;letter-spacing:.05em}
.term-status small{font-weight:600;color:var(--muted2)}
.term-status button{border:1px solid var(--edge);background:var(--s1);color:var(--gold);
  border-radius:9px;padding:9px 12px;font:800 var(--fs-label)/1 inherit;cursor:pointer;
  transition:all var(--t1) var(--e2)}
.term-status button:active{transform:scale(.94)}
html[data-theme="terang"] .term-status button{color:#A8760A}

.crypto-live-dot{width:8px;height:8px;border-radius:50%;background:#6d7890;box-shadow:0 0 0 4px rgba(109,120,144,.13);flex-shrink:0}
.crypto-live-dot.live{background:var(--green);box-shadow:0 0 0 4px rgba(47,227,160,.13),0 0 16px rgba(47,227,160,.5)}
.crypto-live-dot.connecting{background:var(--gold);box-shadow:0 0 0 4px rgba(255,213,106,.13)}
.crypto-live-dot.offline{background:var(--red);box-shadow:0 0 0 4px rgba(255,107,133,.13)}
.crypto-live-dot.partial{background:var(--gold);box-shadow:0 0 0 4px rgba(255,213,106,.13)}
.crypto-live-dot.server{background:#38c7ff;box-shadow:0 0 0 4px rgba(56,199,255,.14),0 0 16px rgba(56,199,255,.45)}

/* ============ statusbar ramping ============ */
.term-statusbar{display:flex;align-items:center;gap:9px;margin:0 0 var(--gap);padding:11px 14px;
  border:1px solid var(--hair);border-radius:var(--r-md);background:var(--s1);
  color:var(--muted);font-size:var(--fs-label);font-weight:800;letter-spacing:.05em}
.term-statusbar small{font-weight:600;color:var(--muted2);margin-left:auto;font-size:var(--fs-label)}
.term-statusbar button{border:1px solid var(--edge);background:var(--s1);color:var(--gold);
  border-radius:9px;padding:8px 12px;font:800 var(--fs-label)/1 inherit;cursor:pointer;flex-shrink:0}
html[data-theme="terang"] .term-statusbar button{color:#A8760A}
.term-statusbar #cryptoConnText{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ============ rel harga (geser horizontal) ============ */
.term-ticker-strip{display:flex;gap:9px;margin-bottom:var(--gap);overflow-x:auto;
  scrollbar-width:none;scroll-snap-type:x mandatory;padding-bottom:2px}
.term-ticker-strip::-webkit-scrollbar{display:none}
.term-ticker{flex:0 0 178px;scroll-snap-align:start;min-width:0;text-align:left;
  border:1px solid var(--hair);border-radius:var(--r-md);
  background:var(--s1);padding:13px 14px;color:inherit;cursor:pointer;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 9px;
  transition:transform var(--t2) var(--e1),border-color var(--t2),background var(--t2)}
.term-ticker:hover{border-color:var(--edge2);background:var(--s2);transform:translateY(-2px)}
.term-ticker:active{transform:scale(.97)}
.term-ticker span{order:1;font-size:var(--fs-meta);color:var(--text2);font-weight:800}
.term-ticker b{order:2;font-size:var(--fs-val);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term-ticker i{order:3;font-style:normal;font-size:var(--fs-label);font-weight:800;font-variant-numeric:tabular-nums}
.term-ticker small{order:4;flex:1 0 100%;margin-top:4px;color:var(--muted2);font-size:var(--fs-label);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term-widget-loading,.term-widget-error{height:100%;min-height:96px;display:grid;place-items:center;
  color:var(--muted2);font-size:var(--fs-body);text-align:center;padding:18px}
.term-widget-error{color:#d79a72}

/* ============ navigasi cepat ============ */
.term-nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 6px);z-index:30;display:flex;gap:7px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 9px;margin:0 0 var(--gap);
  border-radius:var(--r-md);background:rgba(10,15,27,.86);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border:1px solid var(--edge)}
.term-nav::-webkit-scrollbar{display:none}
/* Target ketuk 44px: ini saklar utama halaman, dipakai terus-menerus di HP. */
.term-nav button{flex:0 0 auto;border:1px solid var(--edge);background:var(--s1);color:var(--muted);
  font:600 var(--fs-body)/1 inherit;padding:13px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:all var(--t2) var(--e1)}
.term-nav button:active{transform:scale(.95)}
.term-nav button.on{background:linear-gradient(135deg,var(--gold),var(--gold2));border-color:transparent;
  color:#1A1206;font-weight:700;box-shadow:0 5px 18px rgba(255,213,106,.26)}
html[data-theme="terang"] .term-nav{background:rgba(255,255,255,.88);border-color:rgba(20,40,90,.12)}
/* fallback JS: sticky patah oleh transform ancestor -> .fix memakai position:fixed */
.term-nav.fix{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:12px;right:12px;
  max-width:456px;margin:0 auto;box-shadow:0 10px 30px rgba(3,6,14,.5)}
html[data-theme="terang"] .term-nav.fix{box-shadow:0 10px 30px rgba(20,40,90,.20)}

/* saklar tampilan: 4 segmen sejajar dgn ikon */
.term-viewnav{display:flex}
.term-viewnav button{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:13px 8px;min-width:0}
.term-viewnav button .ms{font-size:18px}
.term-viewnav button.on .ms{color:inherit}

/* ============ kartu makro 3 kolom ============ */
.term-macro-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:var(--gap) 0 4px}
.macro-tile{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:14px;display:flex;flex-direction:column;justify-content:space-between;gap:5px;min-height:96px}
.macro-tile .mt-l{color:var(--muted2);font-size:var(--fs-micro);font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.macro-tile .mt-v{color:var(--silver);font-size:20px;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.macro-tile .mt-s{font-size:var(--fs-meta);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.macro-tile .mt-s.pos{color:var(--green)}
.macro-tile .mt-s.neg{color:var(--red)}

/* ============ grid utama ============ */
.term-main-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(275px,.86fr);gap:var(--gap);align-items:start}
.term-main-column,.term-side-column{display:grid;gap:var(--gap);min-width:0}
.term-side-column{position:relative}

/* ============ kartu panel umum ============ */
.term-chart-card,.term-side-card,.term-news-card,.term-feed-panel,.term-overview-section,.term-heatmap-section{
  border:1px solid var(--hair);background:var(--s1);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh1)}
.term-panel-head,.term-card-head{display:flex;align-items:center;justify-content:space-between;gap:11px;
  padding:14px var(--pad-card);border-bottom:1px solid var(--hair)}
.term-panel-head>div,.term-card-head>div{min-width:0}
.term-panel-head span,.term-card-head span{display:flex;align-items:center;gap:7px;color:var(--muted2);
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.09em}
.term-panel-head span::before,.term-card-head span::before{content:'';width:3px;height:12px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold),var(--gold2));flex-shrink:0}
.term-panel-head b,.term-card-head b{display:block;color:var(--silver);font-size:var(--fs-title);font-weight:700;
  letter-spacing:-.02em;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term-panel-head small,.term-card-head small{display:block;color:var(--muted2);font-size:var(--fs-label);margin-top:3px}
.term-source-chip{border:1px solid var(--edge);border-radius:999px;padding:5px 10px;background:var(--s1);
  font-size:var(--fs-micro);font-weight:800;color:var(--muted);white-space:nowrap;letter-spacing:.04em}
.term-source-chip.live,.crypto-pill.live{color:var(--green);border-color:rgba(47,227,160,.28);
  background:rgba(47,227,160,.08)}
.crypto-pill{font-size:var(--fs-micro);font-weight:800;letter-spacing:.05em;border:1px solid var(--edge);
  color:var(--muted);background:var(--s1);padding:5px 10px;border-radius:999px;white-space:nowrap}
.crypto-pill.warning{color:var(--gold);border-color:rgba(255,213,106,.24);background:rgba(255,213,106,.07)}

/* ============ Phoenix AI Outlook (kartu hero — sengaja tetap gelap-emas
   di kedua tema sebagai aksen; warna teks di dalamnya dikunci) ============ */
.term-outlook{position:relative;overflow:hidden;border:1px solid rgba(255,213,106,.19);border-radius:var(--r-xl);
  background:radial-gradient(circle at 86% 12%,rgba(255,213,106,.15),transparent 36%),
             linear-gradient(135deg,#15130b,#0c0d11 63%);
  padding:19px;min-height:260px;box-shadow:var(--sh2)}
.term-outlook:after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 0 55%,rgba(255,213,106,.04));pointer-events:none}
.term-outlook-top{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.term-kicker{display:inline-flex;align-items:center;gap:7px;color:#F3D55E;font-size:var(--fs-micro);
  font-weight:800;letter-spacing:.11em}
.term-kicker::before{content:'';width:3px;height:12px;border-radius:2px;background:linear-gradient(180deg,#FFD56A,#F5B740)}
.term-outlook h2{font-size:20px;line-height:1.24;margin:9px 0 0;letter-spacing:-.02em;color:#F4F5F8}
.term-outlook-badge{padding:7px 12px;border:1px solid rgba(255,213,106,.23);border-radius:999px;
  background:rgba(255,213,106,.08);color:#EFD15E;font-size:var(--fs-micro);font-weight:800;
  white-space:nowrap;letter-spacing:.04em}
.term-outlook-badge.waiting{color:#AEB4C0;border-color:#343946;background:#1B1E25}
.term-outlook-badge.bullish{color:#47DDA0;border-color:rgba(71,221,160,.28);background:rgba(71,221,160,.10)}
.term-outlook-badge.bullish-moderate{color:#8FD9A5;border-color:rgba(143,217,165,.24);background:rgba(143,217,165,.08)}
.term-outlook-badge.bearish{color:#FF6B85;border-color:rgba(255,107,133,.28);background:rgba(255,107,133,.10)}
.term-outlook-badge.bearish-moderate{color:#E69A91;border-color:rgba(230,154,145,.24);background:rgba(230,154,145,.08)}
.term-outlook-badge.neutral{color:#EFD15E}
.term-outlook>p{position:relative;z-index:1;color:#9A958A;font-size:var(--fs-body);line-height:1.65;margin:10px 0 13px}
.term-outlook-summary{position:relative;z-index:1;color:#C3C0B6;font-size:var(--fs-body);
  line-height:1.72;margin:12px 0 0}
.term-outlook-meta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px 16px;margin:13px 0 14px;
  color:#9AA1AB;font-size:var(--fs-label)}
.term-outlook-meta span{display:inline-flex;align-items:center;gap:6px}
.term-outlook-meta .ms{font-size:14px;color:#C2A944}
.term-outlook-body{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:17px;align-items:start}
.term-outlook-copy{min-width:0}
.term-outlook-confidence{border:1px solid rgba(255,213,106,.13);border-radius:var(--r-md);padding:14px;background:rgba(0,0,0,.24)}
.term-outlook-confidence>span{display:block;color:#9AA0AE;font-size:var(--fs-micro);font-weight:800;letter-spacing:.09em}
.term-outlook-confidence strong{display:block;margin-top:7px;color:#F3D55E;font-size:30px;line-height:1;font-weight:800}
.term-outlook-confidence small{display:block;color:#868C98;font-size:var(--fs-label);line-height:1.55;margin-top:9px}
.term-confidence-bar{height:6px;border-radius:99px;background:#252934;overflow:hidden;margin-top:11px}
.term-confidence-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#F0B429,#E8D66A,#47D89C)}
.term-confidence-bar i.bullish,.term-confidence-bar i.bullish-moderate{background:linear-gradient(90deg,#2FE3A0,#79E5C2)}
.term-confidence-bar i.bearish,.term-confidence-bar i.bearish-moderate{background:linear-gradient(90deg,#FF6B85,#FFB46A)}
.term-confidence-bar i.neutral{background:linear-gradient(90deg,#8FB0FF,#9DBBF5)}
.term-outlook-risk{display:flex;gap:11px;margin-top:14px;padding:13px;
  border:1px solid rgba(255,190,70,.14);border-radius:var(--r-sm);background:rgba(255,190,70,.05)}
.term-outlook-risk>.ms{font-size:19px;color:#F0B429}
.term-outlook-risk b{font-size:var(--fs-micro);color:#E7CA65;text-transform:uppercase;letter-spacing:.07em}
.term-outlook-risk p{margin:5px 0 0;color:#ABA79C;font-size:var(--fs-label);line-height:1.65}
/* 5 kolom di v7 = tiap sel selebar ±60px. Dengan teks yang kini terbaca,
   3 kolom adalah batas wajar di desktop; HP turun ke 2 (lihat @560). */
.term-outlook-facts{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:15px}
.term-outlook-facts>div{min-width:0;padding:12px 13px;border:1px solid rgba(255,213,106,.09);
  border-radius:var(--r-sm);background:rgba(0,0,0,.24)}
.term-outlook-facts span{display:block;color:#9AA0AE;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.05em}
.term-outlook-facts b{display:block;margin-top:7px;color:#F0F2F6;font-size:var(--fs-body);line-height:1.35;overflow-wrap:anywhere}
.term-outlook-footer{position:relative;z-index:1;display:flex;justify-content:space-between;gap:11px;flex-wrap:wrap;
  margin-top:13px;padding-top:11px;border-top:1px solid rgba(255,255,255,.05);color:#868C98;font-size:var(--fs-label)}
.term-outlook-waiting{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin-top:14px;
  padding:14px;border:1px dashed rgba(255,213,106,.18);border-radius:var(--r-sm);background:rgba(255,213,106,.035)}
.term-outlook-waiting>.ms{font-size:24px;color:#D4B648}
.term-outlook-waiting b{display:block;font-size:var(--fs-body);color:#DED8C5}
.term-outlook-waiting small{display:block;margin-top:4px;color:#9AA0AE;font-size:var(--fs-label);line-height:1.55}
.term-outlook .crypto-meter{margin:0}
.term-outlook .crypto-mini-grid{position:relative;z-index:1;margin-top:12px}
.term-outlook .crypto-mini{background:rgba(0,0,0,.22);border-color:rgba(255,213,106,.09)}

.crypto-meter{height:8px;border-radius:99px;background:linear-gradient(90deg,#FF647D 0%,#FFD56A 45%,#2FE3A0 100%);position:relative}
.crypto-meter-pin{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;border:3px solid #fff;
  background:#10182B;transform:translate(-50%,-50%);box-shadow:0 2px 12px rgba(0,0,0,.45)}
.crypto-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:13px}
.crypto-mini-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.crypto-mini{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r-sm);padding:12px;min-width:0}
.crypto-mini span{display:block;font-size:var(--fs-micro);color:var(--muted2);letter-spacing:.05em;
  text-transform:uppercase;font-weight:700}
.crypto-mini b{display:block;margin-top:6px;font-size:var(--fs-val);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============ chart ============ */
.term-chart-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.term-chart-controls button{border:1px solid var(--edge);background:var(--s1);color:var(--muted);
  border-radius:9px;padding:9px 12px;font:800 var(--fs-label)/1 inherit;cursor:pointer;
  transition:all var(--t1) var(--e2)}
.term-chart-controls button.active{background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1A1206;border-color:transparent}
.term-chart-controls i{width:1px;height:20px;background:var(--edge);margin:0 4px}
.term-tv-chart{width:100%;min-height:430px;background:#080A0F;overflow:hidden}
.term-tv-chart iframe{width:100%;height:100%}

/* ============ kartu samping ============ */
.term-side-card{min-height:0}
.term-fng-body{padding:12px 14px 0}
/* Geometri gauge: pivot jarum TEPAT di pusat busur, angka DI BAWAH pivot.
   Jarum hanya menyapu setengah atas sehingga tak pernah menembus angkanya
   (bug lama: pivot terlalu rendah -> jarum melintasi angka).
   JANGAN mengubah angka-angka posisi di bawah tanpa menguji ulang jarumnya. */
.term-gauge{position:relative;width:190px;height:148px;margin:0 auto;overflow:hidden}
.term-gauge-arc{position:absolute;left:10px;top:6px;width:170px;height:170px;border-radius:50%;
  background:conic-gradient(from 270deg,#E75464 0 12.5%,#EF7B43 12.5% 25%,#D9A929 25% 37.5%,#C6C942 37.5% 50%,#68BD58 50% 62.5%,#28B67F 62.5% 75%,transparent 75% 100%);
  -webkit-mask:radial-gradient(circle at center,transparent 0 58%,#000 59%);
  mask:radial-gradient(circle at center,transparent 0 58%,#000 59%)}
.term-gauge-needle{position:absolute;left:93.5px;bottom:57px;width:3px;height:62px;border-radius:4px;
  background:var(--silver);transform-origin:50% 100%;transition:transform .55s ease;box-shadow:0 0 9px rgba(128,140,160,.35)}
.term-gauge-hub{position:absolute;left:87.5px;bottom:51px;width:15px;height:15px;border-radius:50%;
  background:var(--silver);border:4px solid var(--panel)}
.term-gauge-value{position:absolute;inset:auto 0 2px;text-align:center}
.term-gauge-value b{font-size:26px;color:var(--silver);font-weight:800}
.term-gauge-value span{display:inline-block;font-size:var(--fs-meta);color:var(--muted);font-weight:800;
  margin-left:8px;vertical-align:2px}
.term-live-factors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:2px 14px 14px}
.term-live-factors span{padding:10px 7px;border-radius:10px;background:var(--s2);border:1px solid var(--hair);
  font-size:var(--fs-micro);color:var(--muted2);text-align:center;font-weight:700}
.term-live-factors b{display:block;color:var(--silver);font-size:var(--fs-body);margin-top:4px}
.term-official-fng{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--s2)}
.term-official-fng span{display:block;color:var(--text2);font-size:var(--fs-meta);font-weight:800}
.term-official-fng small{display:block;color:var(--muted2);font-size:var(--fs-label);margin-top:3px}
.term-official-fng>b{font-size:22px;min-width:38px;text-align:right;font-weight:800}
.term-official-fng>b.extreme-fear,.term-official-fng>b.fear{color:var(--red)}
.term-official-fng>b.neutral{color:var(--gold)}
.term-official-fng>b.greed,.term-official-fng>b.extreme-greed{color:var(--green)}
.crypto-fng-history{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair)}
.crypto-fng-history>div{background:var(--s1);padding:12px 7px;text-align:center}
.crypto-fng-history span{display:block;color:var(--muted2);font-size:var(--fs-micro)}
.crypto-fng-history b{display:block;font-size:var(--fs-val);margin-top:4px;font-weight:800}
.crypto-fng-history small{display:block;color:var(--muted);font-size:var(--fs-label);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crypto-attribution{padding:11px 14px;color:var(--muted2);font-size:var(--fs-label);line-height:1.55;border-top:1px solid var(--hair)}

.crypto-idr-head{display:flex;justify-content:space-between;gap:10px;padding:var(--pad-card)}
.crypto-idr-head span{display:block;color:var(--muted2);font-size:var(--fs-meta);letter-spacing:.04em;font-weight:800}
.crypto-idr-head b{display:block;font-size:22px;margin-top:6px;font-weight:800;letter-spacing:-.02em}
.crypto-idr-head small{display:block;color:var(--muted2);font-size:var(--fs-label);margin-top:5px}
.crypto-idr-spread{text-align:right}
.crypto-idr-spread span{font-size:var(--fs-label);margin-bottom:5px;color:var(--muted)}
.crypto-idr-coins{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair)}
.crypto-idr-coins>div{padding:13px;border-right:1px solid var(--hair)}
.crypto-idr-coins>div:last-child{border-right:0}
.crypto-idr-coins span{display:block;font-size:var(--fs-micro);color:var(--muted2);font-weight:700}
.crypto-idr-coins b{display:block;font-size:var(--fs-body);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crypto-idr-coins small{display:block;font-size:var(--fs-label);margin-top:4px}

.term-moon-card .crypto-moon{margin:0;padding:var(--pad-card);border:0;border-radius:0;background:transparent}
.crypto-moon{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:center}
.crypto-moon-icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:35px;
  background:radial-gradient(circle at 35% 30%,rgba(107,132,216,.16),rgba(255,255,255,.02));
  border:1px solid var(--hair)}
.crypto-moon-body{min-width:0}
.crypto-moon b{font-size:var(--fs-val)}
.crypto-moon p{margin:6px 0 0;color:var(--muted);font-size:var(--fs-label);line-height:1.55}
.crypto-moon-dates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
.crypto-moon-dates>div{background:var(--s2);border:1px solid var(--hair);border-radius:10px;padding:11px}
.crypto-moon-dates span{display:block;color:var(--muted2);font-size:var(--fs-micro)}
.crypto-moon-dates b{display:block;font-size:var(--fs-meta);margin-top:4px}
.term-calendar-widget{height:330px;background:#090B10;overflow:hidden}
.term-calendar-widget iframe{height:330px;min-height:330px}

/* ============ berita market ============ */
.term-news-card{margin-top:var(--gap)}
.term-news-list{max-height:340px;overflow:auto;scrollbar-width:none}
.term-news-list::-webkit-scrollbar{display:none}
.term-news-row{display:grid;grid-template-columns:48px 8px 1fr auto;align-items:center;gap:10px;
  padding:13px var(--pad-card);border-top:1px solid var(--hair);color:var(--text2);text-decoration:none;
  transition:background var(--t1)}
.term-news-row:hover{background:var(--s2)}
.term-news-row:first-child{border-top:0}
.term-news-time{font:700 var(--fs-label) ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted2);
  font-variant-numeric:tabular-nums}
.term-news-dot{width:6px;height:6px;border-radius:50%;background:var(--muted2)}
.term-news-dot.hot{background:var(--gold);box-shadow:0 0 0 4px rgba(255,213,106,.10)}
/* Judul berita boleh 2 baris: dipotong satu baris seperti v7 membuat
   headline panjang jadi tak terbaca sama sekali. */
.term-news-row b{font-size:var(--fs-body);line-height:1.5;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.term-news-row .ms{font-size:15px;color:var(--muted2)}
.term-news-empty{padding:24px;text-align:center;color:var(--muted2);font-size:var(--fs-body)}

/* ============ seksi lebar (ringkasan/deriv/heatmap/history) ============ */
.crypto-section{margin-top:var(--gap)}
.term-overview-section,.term-heatmap-section,.term-deriv-section,.term-history-section{padding:var(--pad-card)}
.term-deriv-section,.term-history-section{border:1px solid var(--hair);background:var(--s1);
  border-radius:var(--r-lg);box-shadow:var(--sh1)}
.crypto-section-head{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.crypto-section-head h3{font-size:15.5px;margin:0;display:flex;align-items:center;gap:9px;
  font-weight:700;letter-spacing:-.02em}
.crypto-section-head h3::before{content:'';width:3px;height:15px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold),var(--gold2))}
.crypto-section-head p{font-size:var(--fs-label);color:var(--muted2);margin:3px 0 0}
.crypto-section-head>span,.crypto-section-head .crypto-pill{margin-left:auto}

.crypto-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.crypto-overview-item{background:var(--s2);border:1px solid var(--hair);border-radius:var(--r-sm);padding:13px;min-width:0}
.crypto-overview-item span{display:block;color:var(--muted2);font-size:var(--fs-micro);letter-spacing:.05em;
  text-transform:uppercase;font-weight:800}
.crypto-overview-item b{display:block;font-size:16px;margin-top:7px;font-weight:800;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crypto-overview-item small{display:block;color:var(--muted2);font-size:var(--fs-label);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crypto-funding-box{display:grid;grid-template-columns:1fr 1.5fr;gap:13px;align-items:center;margin-top:11px;
  padding:13px;border:1px solid var(--hair);border-radius:var(--r-sm);background:var(--s2)}
.crypto-funding-box>div:first-child b{display:block;font-size:var(--fs-val)}
.crypto-funding-box>div:first-child small{display:block;font-size:var(--fs-label);color:var(--muted2);margin-top:4px}
.crypto-funding-list{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.crypto-funding-list>div{display:flex;justify-content:space-between;gap:5px;background:var(--s1);
  border:1px solid var(--hair);border-radius:9px;padding:9px 10px}
.crypto-funding-list span,.crypto-funding-list b{font-size:var(--fs-label)}

.term-deriv{display:flex;flex-direction:column;gap:8px}
.deriv-total{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  border-radius:var(--r-sm);background:linear-gradient(135deg,rgba(91,134,255,.14),rgba(47,227,160,.06));margin-bottom:5px}
.deriv-total span{color:var(--muted);font-size:var(--fs-meta);font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.deriv-total b{color:var(--silver);font-size:19px;font-weight:800}
.deriv-cap{color:var(--muted2);font-size:var(--fs-micro);font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;margin:11px 2px 3px}
.deriv-oi,.deriv-ls{display:grid;grid-template-columns:58px minmax(0,1fr) 74px;align-items:center;gap:10px;
  font-size:var(--fs-body)}
.deriv-oi .s,.deriv-ls .s{color:var(--silver);font-weight:700}
.deriv-oi .v,.deriv-ls .v{color:var(--muted);text-align:right;font-family:ui-monospace,Menlo,monospace;
  font-size:var(--fs-label);font-variant-numeric:tabular-nums}
.deriv-oi .bar{height:8px;background:var(--s2);border-radius:5px;overflow:hidden;width:100%;min-width:0}
.deriv-oi .bar i{display:block;height:100%;background:linear-gradient(90deg,#5B86FF,#79E5C2);border-radius:5px}
.deriv-ls .lsbar{height:10px;display:flex;border-radius:5px;overflow:hidden;background:var(--s2)}
.deriv-ls .lsbar .lb{background:var(--green)}
.deriv-ls .lsbar .sb{background:var(--red)}
.term-history{padding:2px}
.hist-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.hist-head span{color:var(--silver);font-weight:700;font-size:var(--fs-val)}
.hist-head small{color:var(--muted2);font-size:var(--fs-label)}
.hist-svg{width:100%;height:72px;display:block}

/* ============ heatmap ============ */
.crypto-filter-row{display:flex;gap:7px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.crypto-filter-row::-webkit-scrollbar{display:none}
.crypto-filter-row button{border:1px solid var(--edge);background:var(--s1);color:var(--muted);
  border-radius:999px;padding:10px 15px;font:700 var(--fs-meta)/1 inherit;white-space:nowrap;cursor:pointer;
  transition:all var(--t2) var(--e1)}
.crypto-filter-row button:active{transform:scale(.95)}
.crypto-filter-row button.active{background:linear-gradient(135deg,var(--gold),var(--gold2));
  border-color:transparent;color:#1A1206;font-weight:800}
/* v7 memakai 6 kolom di desktop: tiap ubin ±90px untuk 4 baris teks.
   4 kolom memberi ruang yang cukup tanpa mengurangi jumlah aset. */
.crypto-heatmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.term-heatmap{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.crypto-heat{min-height:92px;border-radius:13px;padding:12px 13px;display:flex;flex-direction:column;
  justify-content:space-between;border:1px solid rgba(255,255,255,.10);overflow:hidden;color:#fff;
  transition:transform var(--t2) var(--e1)}
.crypto-heat:active{transform:scale(.97)}
.crypto-heat-top{display:flex;align-items:center;justify-content:space-between;gap:7px}
.crypto-heat-sym{font-size:var(--fs-body);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.crypto-heat-rank{font-size:var(--fs-micro);color:rgba(255,255,255,.65)}
.crypto-heat-pct{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
.crypto-heat-price{font-size:var(--fs-label);color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crypto-heat-volume{font-size:var(--fs-micro);color:rgba(255,255,255,.65);margin-top:4px}

/* ============ feed whale & likuidasi ============ */
.term-bottom-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:var(--gap);align-items:stretch}
.term-feed-panel{min-height:440px;display:flex;flex-direction:column}
.term-feed-panel>.crypto-liq-summary,.term-feed-panel>.crypto-flow-summary{margin:13px 13px 9px}
.term-feed-panel>.crypto-filter-row{margin:0 13px 9px}
.term-feed-panel>.crypto-feed-wrap{margin:0 13px 13px;flex:1;min-height:0}
.crypto-flow-summary,.crypto-liq-summary{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px}
.crypto-flow-summary>div,.crypto-liq-summary>div{border:1px solid var(--hair);background:var(--s2);
  border-radius:var(--r-sm);padding:12px}
.crypto-flow-summary span,.crypto-liq-summary span{display:block;color:var(--muted2);font-size:var(--fs-micro);font-weight:700}
.crypto-flow-summary b,.crypto-liq-summary b{display:block;font-size:var(--fs-val);margin-top:5px;font-weight:800}
.crypto-flow-summary small,.crypto-liq-summary small{display:block;color:var(--muted2);font-size:var(--fs-micro);margin-top:4px}
.crypto-flow-summary .buy b,.crypto-liq-summary .short b{color:var(--green)}
.crypto-flow-summary .sell b,.crypto-liq-summary .long b{color:var(--red)}
.crypto-feed-wrap{position:relative}
.crypto-feed{display:flex;flex-direction:column;gap:8px;min-height:96px}
.term-compact-feed{max-height:320px;overflow:auto;scrollbar-width:none}
.term-compact-feed::-webkit-scrollbar{display:none}
.crypto-event{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;
  background:var(--s2);border:1px solid var(--hair);border-radius:13px;padding:12px}
.crypto-event-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:17px;
  background:rgba(91,134,255,.12)}
.crypto-event-icon.buy,.crypto-event-icon.short{background:rgba(47,227,160,.13)}
.crypto-event-icon.sell,.crypto-event-icon.long{background:rgba(255,107,133,.13)}
.crypto-event-main{min-width:0}
.crypto-event-main b{font-size:var(--fs-body)}
.crypto-event-main small{display:block;color:var(--muted2);font-size:var(--fs-label);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crypto-event-value{text-align:right}
.crypto-event-value b{font-size:var(--fs-body);font-variant-numeric:tabular-nums}
.crypto-event-value small{display:block;color:var(--muted2);font-size:var(--fs-micro);margin-top:4px}
.crypto-side-buy,.crypto-side-short{color:var(--green)}
.crypto-side-sell,.crypto-side-long{color:var(--red)}

/* ============ whale scanner ============ */
.term-sniper-panel{padding-bottom:12px}
.term-sniper-empty{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;color:var(--muted)}
.term-sniper-empty .ms{font-size:36px;color:var(--muted2)}
.term-sniper-empty b{font-size:var(--fs-val);color:var(--text2);margin-top:11px}
.term-sniper-empty p{font-size:var(--fs-body);line-height:1.6;max-width:260px;color:var(--muted2);margin-top:6px}
.term-sniper-signal{padding:17px}
.term-sniper-top{display:flex;align-items:center;justify-content:space-between}
.term-sniper-top span{font-size:var(--fs-micro);font-weight:800;padding:7px 11px;border-radius:999px;
  background:var(--s2);letter-spacing:.05em}
.term-sniper-top span.neutral{color:var(--gold);background:rgba(255,213,106,.10)}
.term-sniper-top b{font-size:18px;font-weight:800}
.term-sniper-score{font-size:36px;font-weight:800;color:var(--gold);margin:18px 0 13px;letter-spacing:-.02em}
.term-sniper-score small{font-size:var(--fs-label);color:var(--muted2);font-weight:600}
.term-sniper-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.term-sniper-grid>div{padding:12px;border:1px solid var(--hair);border-radius:11px;background:var(--s2)}
.term-sniper-grid span{display:block;font-size:var(--fs-micro);color:var(--muted2);font-weight:700}
.term-sniper-grid b{display:block;font-size:var(--fs-body);margin-top:5px;font-weight:700}
.term-sniper-signal p{font-size:var(--fs-body);line-height:1.65;color:var(--muted2);margin-top:14px}
.term-sniper-live-meta{display:flex;align-items:center;gap:8px;margin-top:13px;padding:10px 12px;
  border:1px solid rgba(47,227,160,.14);border-radius:10px;background:rgba(47,227,160,.04);
  font-size:var(--fs-label);color:var(--muted)}
.term-sniper-live-meta .crypto-live-dot{width:6px;height:6px;flex:0 0 auto}

/* ============ lain-lain ============ */
.crypto-empty{border:1px dashed var(--edge);border-radius:var(--r-md);padding:24px 16px;text-align:center;
  color:var(--muted);font-size:var(--fs-body);line-height:1.65}
.crypto-vip-lock{position:absolute;inset:0;z-index:4;border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(7,11,20,.72),rgba(7,11,20,.96));backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;
  border:1px solid rgba(255,213,106,.14)}
.crypto-vip-lock .ms{font-size:30px;color:var(--gold)}
.crypto-vip-lock b{display:block;margin-top:9px;font-size:var(--fs-title);color:#F0F2F6}
.crypto-vip-lock p{font-size:var(--fs-body);color:#A6AEC0;line-height:1.6;margin:8px auto 14px;max-width:260px}
.crypto-vip-lock button{border:0;border-radius:11px;background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1A1206;padding:13px 18px;font:800 var(--fs-body)/1 inherit;cursor:pointer}
.crypto-source{margin-top:var(--gap);padding:15px;border:1px solid var(--hair);border-radius:var(--r-md);
  color:var(--muted2);font-size:var(--fs-label);line-height:1.7;background:var(--s1)}
.crypto-source b{color:var(--text2)}

/* ============ screener memecoin ============
   Memakai token --fs-* yang sama dengan seluruh halaman, jadi kalau skala
   teks disetel di atas, tab ini ikut tanpa perlu disentuh. */
.meme-refresh{border:1px solid var(--edge);background:var(--s1);color:var(--gold);border-radius:10px;
  width:42px;height:42px;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.meme-refresh .ms{font-size:19px}
.meme-refresh:active{transform:scale(.94)}
.meme-warn{display:flex;gap:11px;align-items:flex-start;margin:var(--pad-card);padding:13px;
  border:1px solid rgba(255,107,133,.3);border-radius:var(--r-md);background:rgba(255,107,133,.07)}
.meme-warn>.ms{font-size:19px;color:var(--red);flex-shrink:0}
.meme-warn b{display:block;color:var(--red);font-size:var(--fs-body);margin-bottom:4px}
.meme-warn div{font-size:var(--fs-label);line-height:1.65;color:var(--text2)}
.meme-list{display:flex;flex-direction:column;gap:9px;padding:0 var(--pad-card) var(--pad-card)}
.meme-row{display:flex;flex-direction:column;gap:10px;padding:13px;
  border:1px solid var(--hair);border-radius:var(--r-md);background:var(--s2);
  color:inherit;transition:border-color var(--t2),background var(--t2)}
.meme-row:hover{border-color:var(--edge2);background:var(--s1)}
.meme-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:11px}
.meme-row.tapable .meme-head{cursor:pointer}
.meme-row.tapable .meme-head:active{opacity:.72}

/* Ikon token: huruf awal sebagai lapisan dasar, <img> menimpanya. Kalau
   gambarnya gagal dimuat, img dihapus (onerror) dan hurufnya yang tampil —
   tidak pernah menyisakan kotak kosong. */
.meme-ico{position:relative;width:38px;height:38px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(145deg,rgba(255,213,106,.16),rgba(255,255,255,.04));
  border:1px solid var(--hair);display:grid;place-items:center}
.meme-ico span{font-size:var(--fs-val);font-weight:800;color:var(--gold)}
.meme-ico img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--panel)}

.meme-chev{font-size:20px;color:var(--muted2);transition:transform var(--t2) var(--e1);flex-shrink:0}
.meme-chev.on{transform:rotate(180deg);color:var(--gold)}

.meme-id{min-width:0}
.meme-sym{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.meme-sym b{font-size:var(--fs-val);font-weight:800;letter-spacing:-.01em}
.meme-id small{display:block;margin-top:4px;color:var(--muted2);font-size:var(--fs-label);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meme-tag{font-size:var(--fs-micro);font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:999px;
  border:1px solid var(--edge);color:var(--muted);white-space:nowrap}
.meme-tag.pump{color:#C9A227;border-color:rgba(255,213,106,.35);background:rgba(255,213,106,.10)}
.meme-tag.risk-terpantau{color:var(--green);border-color:rgba(47,227,160,.32);background:rgba(47,227,160,.08)}
.meme-tag.risk-tinggi{color:var(--gold);border-color:rgba(255,213,106,.32);background:rgba(255,213,106,.08)}
.meme-tag.risk-ekstrem{color:var(--red);border-color:rgba(255,107,133,.34);background:rgba(255,107,133,.10)}
/* Panel grafik: tertutup = tinggi 0 & tanpa border, jadi tidak menyisakan
   celah kosong di antara baris saat semua grafik tertutup. */
.meme-chart{display:none}
.meme-chart.on{display:block;height:340px;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--hair);background:#080A0F;position:relative}
.meme-chart iframe{width:100%;height:100%;border:0;display:block}
.meme-chart .term-widget-loading{position:absolute;inset:0;min-height:0}
.meme-ext{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  color:var(--bluetx);font-size:var(--fs-label);font-weight:700;text-decoration:none;
  padding:8px 0}
.meme-ext .ms{font-size:15px}

.meme-nums{text-align:right;white-space:nowrap}
.meme-nums b{display:block;font-size:var(--fs-val);font-variant-numeric:tabular-nums}
.meme-nums i{display:block;margin-top:3px;font-style:normal;font-size:var(--fs-label);font-weight:800;
  font-variant-numeric:tabular-nums}
.meme-nums i.up{color:var(--green)}
.meme-nums i.down{color:var(--red)}
.meme-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding-top:10px;border-top:1px solid var(--hair)}
.meme-stats span{display:block;color:var(--muted2);font-size:var(--fs-micro);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em}
.meme-stats b{display:block;margin-top:4px;color:var(--silver);font-size:var(--fs-body);
  font-weight:700;font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
.meme-flags{display:flex;flex-direction:column;gap:5px}
.meme-flags span{display:flex;align-items:flex-start;gap:6px;color:var(--red);
  font-size:var(--fs-label);line-height:1.5}
.meme-flags .ms{font-size:14px;flex-shrink:0}

/* hero Fear & Greed — kartu pembuka halaman */
.crypto-hero-card{border:1px solid var(--edge);border-radius:var(--r-xl);overflow:hidden;
  margin-bottom:var(--gap);box-shadow:var(--sh2);
  background:radial-gradient(circle at 88% 0%,rgba(255,213,106,.10),transparent 40%),
             linear-gradient(160deg,var(--s2),var(--s1))}
.crypto-hero-card .term-card-head{border-bottom-color:var(--hair)}
.crypto-hero-card .term-gauge{width:230px;height:170px}
.crypto-hero-card .term-gauge-arc{left:15px;top:8px;width:200px;height:200px}
.crypto-hero-card .term-gauge-needle{left:113.5px;bottom:62px;height:74px}
.crypto-hero-card .term-gauge-hub{left:107.5px;bottom:56px}
.crypto-hero-card .term-gauge-value b{font-size:32px}
.crypto-hero-card .term-fng-body{padding:16px 14px 4px}

/* sistem tampilan */
.crypto-view{display:none}
.crypto-view.on{display:block;animation:cvIn .26s var(--e1) backwards}
@keyframes cvIn{from{opacity:0;transform:translateY(8px)}}

/* pasangan kartu (IDR + Bulan) */
.crypto-duo{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--gap)}

/* ============================================================
   RESPONSIF — hanya 3 ambang, selalu URUT dari kecil ke besar.
   v7 memakai 10 ambang dengan urutan acak (760px ditulis setelah 390px),
   sehingga di HP kecil aturan yang menang bukan yang paling spesifik.
   ============================================================ */

/* ---------- HP (≤560px) ---------- */
@media(max-width:560px){
  .crypto-terminal{--pad-card:13px;--gap:10px}

  .term-header{padding:12px 14px;justify-content:space-between}
  .term-brand small{display:none}
  .term-brand-icon{width:34px;height:34px;border-radius:10px}
  .term-brand-icon .ms{font-size:19px}
  .term-brand{min-width:0;flex-shrink:1}
  .term-brand b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .term-status{width:auto;min-width:0;flex-wrap:nowrap;gap:8px;overflow:hidden}
  .term-status>span:not(.crypto-live-dot){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .term-status button{flex:0 0 auto}
  .term-status small{display:none}

  .term-ticker{flex:0 0 160px;padding:11px 12px}
  .term-viewnav button{flex-direction:column;gap:4px;padding:10px 4px;font-size:var(--fs-label)}
  .term-viewnav button .ms{font-size:19px}

  .term-macro-row{grid-template-columns:1fr 1fr;gap:8px}
  .macro-tile{min-height:84px;padding:12px}
  .macro-tile .mt-v{font-size:17px}

  .term-main-grid,.term-side-column{grid-template-columns:1fr}
  .term-bottom-grid{grid-template-columns:1fr;gap:10px}
  .term-sniper-panel{grid-column:auto}
  .term-feed-panel{min-height:400px}

  .term-outlook{padding:16px}
  .term-outlook h2{font-size:17px}
  .term-outlook-body{grid-template-columns:1fr;gap:13px}
  .term-outlook-facts{grid-template-columns:1fr 1fr}
  .term-outlook-meta{gap:7px 12px}
  .term-outlook-footer{display:block}
  .term-outlook-footer span{display:block;margin-top:5px}

  .crypto-overview-grid{grid-template-columns:1fr 1fr}
  .crypto-mini-grid,.crypto-mini-grid-4{grid-template-columns:1fr 1fr}
  .crypto-funding-box{grid-template-columns:1fr}
  .crypto-funding-list{grid-template-columns:1fr 1fr}
  .crypto-fng-history{grid-template-columns:1fr 1fr}
  .term-live-factors{grid-template-columns:1fr 1fr}
  /* Ringkasan flow: 3 kolom sempit tidak muat teks yang kini terbaca.
     Kolom pertama (label utama) melebar penuh, dua angka berbagi baris. */
  .crypto-flow-summary,.crypto-liq-summary{grid-template-columns:1fr 1fr}
  .crypto-flow-summary>div:first-child,.crypto-liq-summary>div:last-child{grid-column:1/-1}

  .crypto-heatmap,.term-heatmap{grid-template-columns:1fr 1fr}
  .crypto-idr-coins{grid-template-columns:1fr 1fr}
  .crypto-idr-coins>div:nth-child(2n){border-right:0}
  .crypto-idr-coins>div:nth-child(n+3){border-top:1px solid var(--hair)}

  .term-news-row{grid-template-columns:44px 6px 1fr;gap:9px}
  .term-news-row .ms{display:none}

  .term-panel-head,.term-card-head{align-items:flex-start;flex-direction:column;gap:9px}
  .term-panel-head .term-chart-controls{width:100%;justify-content:flex-start}
  .term-chart-controls i{display:none}
  .term-tv-chart{min-height:390px}
}

/* ---------- Tablet (561-820px) ---------- */
@media(min-width:561px) and (max-width:820px){
  .term-main-grid{grid-template-columns:1fr}
  .term-side-column{grid-template-columns:1fr 1fr}
  .term-calendar-card{grid-column:1/-1}
  .term-bottom-grid{grid-template-columns:1fr 1fr}
  .term-sniper-panel{grid-column:1/-1;min-height:280px}
  .term-sniper-empty{min-height:230px}
  .crypto-heatmap,.term-heatmap{grid-template-columns:repeat(3,minmax(0,1fr))}
  .crypto-overview-grid{grid-template-columns:1fr 1fr}
  .term-outlook-facts{grid-template-columns:1fr 1fr}
  .term-outlook-body{grid-template-columns:1fr}
  .term-chart-controls{justify-content:flex-start}
  .term-panel-head{align-items:flex-start;flex-direction:column;gap:9px}
  .term-panel-head .term-chart-controls{width:100%}
  .crypto-duo{grid-template-columns:1fr 1fr}
}

/* ---------- Desktop (≥821px) ---------- */
@media(min-width:821px){
  .crypto-duo{grid-template-columns:1fr 1fr}
  .term-main-grid{align-items:stretch}
  .term-main-column{display:flex;flex-direction:column;min-height:0}
  .term-main-column>.term-outlook{flex:0 0 auto}
  .term-main-column>.term-chart-card{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .term-chart-card>.term-panel-head{flex:0 0 auto}
  .term-chart-card>#cryptoTvChart,.term-chart-card>.term-tv-chart{flex:1 1 auto;height:auto;min-height:430px}
  .term-side-column{align-content:stretch;grid-template-rows:auto auto auto minmax(330px,1fr)}
  .term-side-column>.term-calendar-card{display:flex;flex-direction:column;min-height:0}
  .term-calendar-card>.term-card-head{flex:0 0 auto}
  .term-calendar-card>.term-calendar-widget{flex:1 1 auto;height:auto;min-height:330px}
  .term-calendar-widget .tradingview-widget-container{height:100%}
  .term-calendar-widget iframe{height:100%;min-height:330px}

  /* tiap tampilan menata dirinya sendiri */
  .crypto-view.on#cryptoViewPasar{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
  #cryptoViewPasar>.term-macro-row,#cryptoViewPasar>.term-overview-section,
  #cryptoViewPasar>.term-heatmap-section,#cryptoViewPasar>.crypto-duo{grid-column:1/-1}
  #cryptoViewPasar>.crypto-section{margin-top:0}
  #cryptoViewPasar>.term-macro-row{margin:0}
  #cryptoViewPasar>.crypto-duo{margin-top:0}
  .crypto-view.on#cryptoViewChart{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);
    gap:var(--gap);align-items:start}
  #cryptoViewChart>.term-chart-card{margin:0}
  .crypto-hero-card .term-gauge{width:250px;height:178px}
  .crypto-hero-card .term-gauge-arc{left:25px}
  .crypto-hero-card .term-gauge-needle{left:123.5px}
  .crypto-hero-card .term-gauge-hub{left:117.5px}
}

/* ---------- Desktop lebar (≥1024px) ---------- */
@media(min-width:1024px){
  body[data-tab="crypto"] .screen{max-width:1500px;padding-left:28px;padding-right:28px}
  body[data-tab="crypto"] .crypto-appbar{display:none}
  .crypto-heatmap,.term-heatmap{grid-template-columns:repeat(5,minmax(0,1fr))}
  .term-outlook-facts{grid-template-columns:repeat(5,minmax(0,1fr))}
}

@media(prefers-reduced-motion:reduce){
  .crypto-view.on{animation:none}
  .term-ticker,.crypto-heat,.term-nav button,.crypto-filter-row button{transition:none}
  .term-gauge-needle{transition:none}
}