/* ============================================================
   FAMOUSONE — "Aurora Terminal" design system
   Base #1B1A23 · cyan → indigo → violet · Space Grotesk + Inter
   ============================================================ */

/* ============================================================
   TOKEN WARNA — FAMOUSONE
   ------------------------------------------------------------
   Palet dasar dari user: dark #1B1A23 · red #1EC1CB · green #1EC1CB.

   >>> TEMA AKTIF: "B — PRIMARY HIJAU, SECONDARY MERAH" <<<
       Aksen primer (tombol utama, highlight, active, glow, tint) = HIJAU #1EC1CB.
       Merah #1EC1CB dipakai untuk yang semantik: bahaya/loss/sell/error.
       Tema sebelumnya ("A — primary merah") ada di backup; untuk kembali:
       ganti 4 nilai token di bawah (--indigo, --violet, --purple, --grad,
       --grad-text, --grad-soft, --shadow-glow) + balik literal aksennya.
       Rincian cara rollback: AGENTS.md bagian "TEMA WARNA A/B".

   CATATAN PENTING:
   - Hijau #1EC1CB terlalu TERANG untuk teks putih → teks di atasnya WAJIB gelap
     (--teal-ink #14262A, kontras 7,9:1). Putih di atasnya hanya 2,2:1.
   - Merah #1EC1CB terlalu GELAP untuk teks di atas latar gelap (2,7:1) → teks
     merah memakai --red-soft #E08A67 (5,8:1). #A84A2F tetap untuk fill/border.
   ============================================================ */
:root {
  color-scheme: dark;
  --bg: #1B1A23;
  --bg-deep: #141319;
  --ink: #F5F2EE;
  --muted: #A9A29A;
  --faint: #6F6A62;

  /* --- dua hue utama --- */
  --rust: #A84A2F;
  --rust-light: #C25B37;
  --rust-2: #E08A67;          /* varian terang untuk TEKS di atas latar gelap */
  --teal: #1EC1CB;
  --teal-bright: #5FDCE6;
  --teal-ink: #14262A;        /* teks DI ATAS hijau (kontras 7,9:1) */

  /* --- peran lama dipertahankan namanya supaya seluruh CSS tetap berlaku --- */
  --cyan: #2ED8E2;            /* aksen/info (teal lebih terang) */
  --indigo: #1EC1CB;          /* PRIMER = hijau (tema B) */
  --violet: #18AFB8;
  --purple: #159FA9;

  --green: #1EC1CB;           /* sukses/win = "green" milik user */
  --red: #A84A2F;             /* gagal/loss = "red" milik user */
  --red-soft: #E08A67;        /* teks merah yang tetap terbaca */
  --amber: #D98E3F;           /* peringatan — keluarga hangat, turunan rust */

  /* --- tombol utama (SATU WARNA, bukan gradient) ---
     Tema B: PRIMARY = HIJAU. Merah turun jadi aksen sekunder. */
  --grad: #1EC1CB;
  --grad-text: #5FDCE6;          /* teks aksen = hijau terang (tema B) */
  --grad-soft: rgba(30, 193, 203, 0.14);  /* tint aksen primer (tema B: hijau) */

  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);

  --radius: 20px;
  --radius-sm: 13px;
  --radius-xs: 10px;
  --shadow: 0 22px 55px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 10px 34px rgba(30, 193, 203, 0.36);

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', var(--font-body);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  /* Ukuran dasar 14px (permintaan user) — lihat catatan di cms.css:
     hanya teks yang MEWARISI body yang berubah, `rem` tetap 16px. */
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(24,175,184, 0.5); color: #fff; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
svg { display: block; }

/* ---- Glow latar (HANYA dipakai landing /twf) ----
   Dashboard & CMS TIDAK memakai ini lagi: markup orb-nya sudah dihapus dan
   latarnya satu warna rata. Blok ini dibiarkan ada karena berkas ini dipakai
   BERSAMA landing (twf memuat style.css dashboard) dan twf/includes/layout.php
   masih memakai .orb/.bg-grid. Kalau latar landing juga ingin rata, hapus
   markup orb di twf/includes/layout.php (blok ini jadi tidak berefek). */
.orb {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .88;
  animation: drift 26s ease-in-out infinite alternate;
}
.orb-1 {
  width: 900px; height: 900px; top: -420px; left: -300px;
  /* SENGAJA tetap RUST (merah) walau tema B primary-nya hijau: ini latar
     landing yang mengikuti konsep warna referensi user (glow rust kiri-atas +
     glow teal kanan-bawah). Kalau ingin glow ini ikut jadi hijau, ganti
     rgba(30,193,203, ...) → rgba(30,193,203, ...) di orb-1 & orb-3. */
  background: radial-gradient(circle, rgba(30,193,203, 0.80), transparent 70%);
}
.orb-2 {
  width: 980px; height: 980px; bottom: -520px; right: -340px;
  background: radial-gradient(circle, rgba(30,193,203, 0.46), transparent 70%);
  animation-delay: -8s;
}
.orb-3 {
  width: 620px; height: 620px; top: 34%; left: 44%;
  background: radial-gradient(circle, rgba(30,193,203, 0.16), transparent 70%);
  animation-delay: -16s;
}
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 95% 70% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 70% at 50% 0%, #000 30%, transparent 100%);
}

/* ---------------- Background: SATU WARNA RATA ----------------
   Permintaan user: latar dashboard & CMS hanya SATU warna (tanpa glow
   merah/hijau). Glow rust/teal (3 orb) + garis grid SUDAH DIHAPUS dari sini
   dan dari markup (dash-header/header/header-min/cms-header/cms-login).
   Ingin glow dikembalikan? Ambil blok .orb/.orb-1/.orb-2/.orb-3/.bg-grid
   versi lama dari backup — lihat AGENTS.md bagian "PALET WARNA BARU". */
.bg-aurora {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background: var(--bg);
}

@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(40px, -30px) scale(1.08); }
  100% { transform: translate(-30px, 25px) scale(0.96); }
}

/* Aurora statis: latar tetap gradien tapi TIDAK beranimasi.
   Dipakai halaman berat ber-iframe (economic-calendar) supaya compositor
   tidak bekerja terus-menerus; nilai warna & posisi orb tetap sama. */
body.aurora-static .bg-aurora .orb,
body.aurora-static .bg-aurora .bg-grid { animation: none !important; }

/* ---------------- Layout ---------------- */
.container { width: min(1180px, 92%); margin-inline: auto; }

.page { min-height: 60vh; }

.section { padding: 76px 0; }
.section-sm { padding: 44px 0; }
.section-tight { padding: 0 0 76px; }

.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.gap-24 { gap: 24px; } .gap-32 { gap: 32px; }

/* ---------------- Typography ---------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.display-1 {
  font-size: clamp(2.2rem, 5vw, 3.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.display-2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; }
.display-3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; }

.lead { color: var(--muted); font-size: 1.06rem; max-width: 58ch; }

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.section-head { text-align: center; max-width: 700px; margin: 0 auto 50px; }
.section-head.left { margin: 0 0 34px; text-align: left; }
.section-head p { color: var(--muted); margin-top: 14px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: #ADE6EF;
  background: var(--grad-soft);
  border: 1px solid rgba(30,193,203, 0.4);
  padding: 6px 15px; border-radius: 999px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 10px var(--cyan);
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: 0.95rem;
  padding: 13px 26px; border-radius: 13px;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  background: var(--grad); color: #14262A;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover { box-shadow: 0 14px 44px rgba(30,193,203, 0.55); transform: translateY(-1px); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }

.btn-soft {
  background: rgba(46,216,226, 0.09);
  border-color: rgba(46,216,226, 0.35);
  color: #5FDCE6;
}
.btn-soft:hover { background: rgba(46,216,226, 0.16); box-shadow: 0 8px 26px rgba(46,216,226, 0.22); }

.btn-success { background: #1EC1CB; color: #14262A; box-shadow: 0 10px 28px rgba(30,193,203, .28); }
.btn-danger  { background: #A84A2F; color: #fff; box-shadow: 0 10px 28px rgba(30,193,203, .34); }

.btn-sm { padding: 9px 17px; font-size: 0.87rem; border-radius: 11px; }
.btn-lg { padding: 16px 34px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* ---------------- Badges & chips ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.73rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  color: #DAD5CF;
  white-space: nowrap;
}
.badge.cyan   { background: rgba(46,216,226, 0.12);  color: #5FDCE6; border-color: rgba(46,216,226, .32); }
.badge.violet { background: rgba(24,175,184, 0.15);  color: #6FE0EA; border-color: rgba(24,175,184, .36); }
.badge.green  { background: rgba(30,193,203, 0.12);  color: #5FDCE6; border-color: rgba(30,193,203, .3); }
.badge.red    { background: rgba(224,138,103, 0.12); color: #E08A67; border-color: rgba(224,138,103, .3); }
.badge.amber  { background: rgba(217,142,63, 0.12);  color: #E9B173; border-color: rgba(217,142,63, .3); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.82rem; font-weight: 600;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  color: var(--muted);
  transition: all .18s ease;
}
.chip:hover { color: var(--ink); border-color: var(--line-strong); background: rgba(255, 255, 255, .08); }
.chip.active {
  background: var(--grad-soft); border-color: rgba(30,193,203, .55);
  color: #F2EFE9; box-shadow: 0 0 0 3px rgba(30,193,203, .14);
}

/* ---------------- Cards ---------------- */
.card {
  position: relative;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  padding: 26px;
}

.card-hover { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.card-hover:hover {
  transform: translateY(-5px);
  border-color: rgba(30,193,203, 0.5);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(46,216,226, 0.08);
}

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2-1 { grid-template-columns: 2fr 1fr; }

.icon-tile {
  width: 50px; height: 50px; border-radius: 15px;
  display: grid; place-items: center; font-size: 1.35rem;
  background: var(--grad-soft);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  margin-bottom: 18px;
}

.card h3 { font-size: 1.14rem; margin-bottom: 9px; }
/* Paragraf di dalam kartu: 14px (permintaan user).
   Aturan ini (0,1,1) MENANG atas kelas satu-tingkat seperti `.page-sub`,
   `.prod-tagline`, dan `.ds-text`, jadi sebelumnya SEMUA paragraf dalam kartu
   tampil 15,04px (0,94rem) dan ukuran 14px di kelas-kelas itu tidak pernah
   terpakai. Menurunkannya ke 14px sekaligus merapikan semuanya. */
.card p { color: var(--muted); font-size: 14px; }
.card .card-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-weight: 700; font-size: .9rem; color: #5FDCE6; transition: gap .18s ease, color .18s ease;
}
.card .card-link:hover { gap: 12px; color: #86E7EE; }

/* ---------------- Header / nav ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(27,26,35, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

.nav-wrap { display: flex; align-items: center; gap: 24px; height: 72px; }

.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--grad);
  box-shadow: 0 6px 18px rgba(46,216,226, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}
.brand-name { font-family: var(--font-display); font-size: 1.28rem; font-weight: 700; letter-spacing: -0.02em; }

.nav { display: flex; align-items: center; gap: 3px; margin-left: auto; }

.nav-link {
  font-size: 0.92rem; font-weight: 600; color: var(--muted);
  padding: 9px 15px; border-radius: 11px;
  transition: color .18s ease, background .18s ease;
}
.nav-link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.nav-link.active {
  color: #fff;
  background: var(--grad-soft);
  border: 1px solid rgba(30,193,203, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.nav-auth { display: flex; align-items: center; gap: 10px; }

.nav-user {
  display: flex; align-items: center; gap: 9px;
  font-size: .9rem; font-weight: 600; color: var(--ink);
  padding: 5px 10px 5px 5px; border: 1px solid var(--line);
  border-radius: 999px; background: rgba(255, 255, 255, 0.03);
  transition: border-color .18s ease, background .18s ease;
}
.nav-user:hover { border-color: rgba(30,193,203, .5); background: rgba(255, 255, 255, 0.06); }
.nav-user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 12px; display: grid; place-items: center;
  font-weight: 800; font-size: 0.95rem; color: #14262A;
  background: var(--grad);
}
.avatar-sm { width: 30px; height: 30px; font-size: 0.78rem; border-radius: 10px; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: 8px; margin-left: auto;
}
.nav-toggle span { width: 22px; height: 2.4px; border-radius: 2px; background: var(--ink); transition: all .25s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }

/* ---------------- Hero ---------------- */
.hero { padding: 92px 0 70px; position: relative; }
.hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 60px; align-items: center;
}
.hero h1 { margin: 20px 0 20px; }
.hero .lead { margin-bottom: 34px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 36px;
  margin-top: 46px; padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero-stat b {
  display: block; font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em;
}
.hero-stat span { font-size: 0.83rem; color: var(--muted); font-weight: 500; }

/* Hero panel (terminal) */
.hero-panel { position: relative; }
.hero-panel .card { padding: 22px; animation: float 7s ease-in-out infinite; }
.hero-panel::before {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  border-radius: 22px;
  background: rgba(30, 193, 203, 0.20);
  filter: blur(14px); opacity: .5;
}

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 10px;
}
.panel-head .dot-row { display: flex; gap: 6px; }
.panel-head .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.panel-head .dot:first-child { background: #18AFB8; }
.panel-head .dot:nth-child(2) { background: #D98E3F; }
.panel-head .dot:nth-child(3) { background: #1EC1CB; }
.panel-head .panel-tag { font-size: .72rem; color: var(--faint); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.hero-ticker-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 12px; padding: 11px 14px; margin-bottom: 9px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line); border-radius: 13px;
  transition: border-color .18s ease, background .18s ease;
}
.hero-ticker-row:hover { border-color: rgba(46,216,226, 0.4); }
.hero-ticker-row .sym { font-weight: 700; font-size: .95rem; }
.hero-ticker-row .sub { font-size: .75rem; color: var(--faint); }
.hero-ticker-row .price { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .98rem; }
.hero-ticker-row .chg { text-align: right; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.mini-chart { height: 78px; width: 100%; margin-top: 12px; }

/* ---------------- Ticker marquee ---------------- */
.ticker-wrap {
  overflow: hidden; position: relative;
  border-block: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(8px);
}
.ticker-track {
  display: flex; width: max-content;
  animation: marquee 48s linear infinite;
}
.ticker-wrap:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; font-size: 0.88rem; font-weight: 600;
  white-space: nowrap; border-right: 1px solid var(--line);
}
.ticker-item .tk-sym { color: var(--muted); }
.ticker-item .tk-price { font-variant-numeric: tabular-nums; font-weight: 700; }
.up { color: var(--green); }
.down { color: var(--red-soft); }

/* ---------------- Market cards ---------------- */
.market-card { overflow: hidden; }
.market-card::after {
  content: ""; position: absolute; inset: auto -30% -45% auto;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(46,216,226, 0.14), transparent 70%);
  pointer-events: none;
}
.market-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.market-card .mk-name { font-weight: 700; font-size: 1rem; }
.market-card .mk-sub { font-size: .76rem; color: var(--faint); }
.market-card .mk-price { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.market-card .mk-chg { font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.spark { width: 100%; height: 52px; margin-top: 14px; }

.inst-list { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.inst-list li {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .9rem; padding: 9px 13px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  border-radius: 11px;
}
.inst-list .inst-name { font-weight: 600; }
.inst-list .inst-price { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }

/* ---------------- Stat band ---------------- */
.stat-band {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding: 38px 40px; text-align: center;
}
.stat-num { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -0.02em; }
.stat-label { color: var(--muted); font-size: .88rem; margin-top: 4px; }

/* ---------------- Tables ---------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
table.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th {
  text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint); font-weight: 700; padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.table td { padding: 13px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.table tbody tr { transition: background .15s ease; }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.table tbody tr.row-active { background: rgba(30,193,203, 0.1); box-shadow: inset 3px 0 0 var(--indigo); }
.table .num { font-variant-numeric: tabular-nums; text-align: right; }
.table .mono { font-variant-numeric: tabular-nums; font-weight: 600; }

.sym-cell { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.sym-ico {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font-size: .7rem; font-weight: 800; color: #fff; flex: 0 0 auto;
}

/* ---------------- Forms ---------------- */
.field { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 600; color: #D8D3CD; }
.field .hint { font-size: 14px; color: var(--faint); line-height: 1.6; }

.input, select.input, textarea.input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--ink);
  padding: 12px 14px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input::placeholder { color: var(--faint); }
.input:focus {
  border-color: rgba(46,216,226, 0.65);
  box-shadow: 0 0 0 3px rgba(46,216,226, 0.14);
  background: rgba(255, 255, 255, 0.07);
}
select.input option { background: #232128; color: var(--ink); }
textarea.input { resize: vertical; min-height: 110px; }

.input-group { display: flex; }
.input-group .input { border-radius: 12px 0 0 12px; }
.input-group .input-suffix {
  display: flex; align-items: center; padding: 0 15px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-strong); border-left: 0;
  border-radius: 0 12px 12px 0; color: var(--muted); font-size: .86rem; font-weight: 600;
}

/* Buy/sell segmented */
.seg { display: flex; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button {
  flex: 1; padding: 10px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); font-weight: 700; font-size: .9rem;
  transition: all .18s ease;
}
.seg button.on-long  { background: #1EC1CB; color: #14262A; box-shadow: 0 6px 18px rgba(30,193,203, .3); }
.seg button.on-short { background: #A84A2F; color: #fff; box-shadow: 0 6px 18px rgba(30,193,203, .34); }
.seg button.on-mkt   { background: var(--grad); color: #14262A; box-shadow: 0 6px 18px rgba(30,193,203, .35); }

/* Tombol WIN / LOSS di modal Update Result: warnanya TETAP (WIN hijau,
   LOSS merah) berapa pun yang dipilih — `is-on` hanya menandai pilihan aktif
   dengan warna penuh, yang lain diredupkan. Permintaan user: saat trade
   RUNNING, kedua tombol tampil merah karena keduanya "tidak terpilih". */
.seg button.seg-win,
.seg button.seg-loss { opacity: .5; }
.seg button.seg-win  { background: #1EC1CB; color: #14262A; }
.seg button.seg-loss { background: #A84A2F; color: #fff; }
.seg button.seg-win.is-on,
.seg button.seg-loss.is-on { opacity: 1; }
.seg button.seg-win.is-on  { box-shadow: 0 6px 18px rgba(30,193,203, .3); }
.seg button.seg-loss.is-on { box-shadow: 0 6px 18px rgba(168,74,47, .38); }

/* Range slider */
.range-row { display: flex; align-items: center; gap: 14px; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; flex: 1;
  height: 6px; border-radius: 99px; outline: none;
  background: #1EC1CB;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 19px; height: 19px; border-radius: 50%;
  background: #fff; border: 4px solid var(--violet);
  cursor: pointer; box-shadow: 0 3px 12px rgba(0, 0, 0, .4);
}
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 4px solid var(--violet); cursor: pointer;
}

/* Checkbox (academy lessons) */
.check-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, 0.03); cursor: pointer;
  transition: all .18s ease;
}
.check-row:hover { background: rgba(255, 255, 255, 0.055); }
.check-row input[type="checkbox"] { accent-color: var(--violet); width: 17px; height: 17px; margin-top: 3px; cursor: pointer; }
.check-row.done { border-color: rgba(30,193,203, 0.35); background: rgba(30,193,203, 0.06); }
.check-row.done .check-title { color: var(--muted); text-decoration: line-through; }
.check-title { font-size: .92rem; font-weight: 600; }
.check-desc { font-size: .8rem; color: var(--faint); }

/* ---------------- Tabs ---------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp .35s ease both; }

/* ---------------- Alerts ---------------- */
/* Atribut `hidden` kalah oleh `display: flex` di atas → alert tersembunyi
   (mis. #urMsg di trade-log) sempat tetap tampil sebagai kotak kosong. */
.alert[hidden] { display: none !important; }
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 13px; margin-bottom: 20px;
  font-size: .9rem; font-weight: 500;
  border: 1px solid;
}
.alert.error   { background: rgba(199,90,60, .1); border-color: rgba(199,90,60, .35); color: #E08A67; }
.alert.success { background: rgba(24,175,184, .1); border-color: rgba(24,175,184, .35); color: #5FDCE6; }
.alert.info    { background: rgba(46,216,226, .08); border-color: rgba(46,216,226, .3); color: #4ADBE5; }
.flash-alert { margin-top: 22px; animation: fadeUp .3s ease both; }

/* ---------------- Progress ---------------- */
.progress { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 99px; background: var(--grad); transition: width .4s ease; }

/* ---------------- Result box (tools) ---------------- */
.result-box {
  margin-top: 22px; padding: 20px;
  background: var(--grad-soft);
  border: 1px solid rgba(30,193,203, 0.4);
  border-radius: 15px;
}
.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
.result-item .r-label { font-size: .76rem; color: var(--muted); font-weight: 600; }
.result-item .r-value { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.result-item .r-value.sm { font-size: 1rem; font-family: var(--font-body); font-weight: 700; }
.result-item .r-sub { font-size: .78rem; color: var(--faint); }

/* ---------------- Pricing ---------------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.plan { display: flex; flex-direction: column; position: relative; }
.plan.popular {
  border-color: rgba(30,193,203, 0.6);
  box-shadow: 0 0 0 1px rgba(30,193,203, 0.35), 0 28px 70px rgba(30,193,203, 0.22);
  transform: scale(1.03);
}
.plan-flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #14262A; font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 15px; border-radius: 999px;
  box-shadow: var(--shadow-glow); white-space: nowrap;
}
.plan-name { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; }
.plan-price {
  margin: 14px 0 4px; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em;
  font-family: var(--font-display);
  display: flex; align-items: baseline; gap: 6px;
}
.plan-price .cur { font-size: 1.1rem; color: var(--muted); font-weight: 600; }
.plan-price .per { font-size: .86rem; color: var(--faint); font-weight: 600; }
.plan-desc { color: var(--muted); font-size: .9rem; min-height: 44px; }
.plan-feats { list-style: none; margin: 20px 0 24px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: #DFDBD5; }
.plan-feats .feat-yes { color: var(--green); font-weight: 800; flex: 0 0 auto; }
.plan-feats .feat-no  { color: var(--faint); flex: 0 0 auto; }

.billing-toggle { display: inline-flex; align-items: center; gap: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; margin-bottom: 34px; }
.billing-toggle button { background: none; border: 0; font-weight: 700; font-size: .9rem; color: var(--muted); padding: 6px 12px; border-radius: 999px; transition: all .18s ease; }
.billing-toggle button.active { background: var(--grad); color: #14262A; box-shadow: var(--shadow-glow); }
.billing-toggle .save-tag { font-size: .72rem; font-weight: 700; color: #5FDCE6; }

.compare-table th:first-child, .compare-table td:first-child { text-align: left; font-weight: 600; }
.compare-table td, .compare-table th { text-align: center; }
.compare-table .tick-yes { color: var(--green); font-weight: 800; }
.compare-table .tick-no { color: var(--faint); }

.faq-item { border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.03); margin-bottom: 12px; overflow: hidden; }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 17px 20px; font-weight: 700; font-size: .97rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--cyan); font-weight: 600; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 20px 18px; color: var(--muted); font-size: .92rem; }

/* ---------------- Academy ---------------- */
.path-card { display: flex; gap: 18px; align-items: flex-start; }
.path-num {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px;
  display: grid; place-items: center; font-weight: 700; font-size: 1.1rem;
  font-family: var(--font-display);
  background: var(--grad-soft); border: 1px solid var(--line-strong); color: #E0DBD4;
}
.course-card { display: flex; flex-direction: column; }
.course-card .course-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--faint); margin-bottom: 14px; }
.course-card .progress-labels { display: flex; justify-content: space-between; font-size: .78rem; margin-bottom: 7px; }
.course-card .progress-labels .course-progress-txt { color: #5FDCE6; font-weight: 700; }

.lesson-group { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.03); }
.lesson-group summary { list-style: none; cursor: pointer; padding: 15px 18px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lesson-group summary::-webkit-details-marker { display: none; }
.lesson-group summary::after { content: "▾"; color: var(--cyan); transition: transform .2s ease; }
.lesson-group[open] summary::after { transform: rotate(180deg); }
.lesson-group .lesson-list { padding: 4px 14px 16px; display: flex; flex-direction: column; gap: 9px; }

/* ---------------- Forum / Komunitas ---------------- */
.forum-grid { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.side-card { padding: 22px; }
.side-nav { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.side-nav a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: 11px;
  font-size: .9rem; font-weight: 600; color: var(--muted);
  transition: all .18s ease;
}
.side-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.side-nav a.active { color: #fff; background: var(--grad-soft); border: 1px solid rgba(30,193,203, 0.4); }
.side-nav .cnt { font-size: .76rem; color: var(--faint); background: rgba(255,255,255,.06); border: 1px solid var(--line); padding: 1px 9px; border-radius: 999px; }

.thread-card { display: flex; gap: 16px; margin-bottom: 16px; }
.thread-main { flex: 1; min-width: 0; }
.thread-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin: 8px 0 6px; display: block; transition: color .15s ease; }
.thread-title:hover { color: #5FDCE6; }
.thread-excerpt { color: var(--muted); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thread-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; font-size: .8rem; color: var(--faint); }
.thread-meta .author { display: inline-flex; align-items: center; gap: 7px; color: #D8D3CD; font-weight: 600; }

.reply-card { display: flex; gap: 14px; }
.reply-body { flex: 1; min-width: 0; }
.reply-body p { white-space: pre-line; color: var(--muted); font-size: .93rem; }

/* ---------------- Auth ---------------- */
.auth-wrap { max-width: 480px; margin: 48px auto 80px; }
.auth-card { padding: 36px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 13px; padding: 4px; gap: 4px; margin-bottom: 26px; }
.auth-tabs a { text-align: center; padding: 11px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; font-size: .92rem; color: var(--muted); transition: all .18s ease; }
.auth-tabs a.active {
  background: var(--grad-soft); border: 1px solid rgba(30, 193, 203, .55);
  color: #F2EFE9; box-shadow: 0 0 0 3px rgba(30, 193, 203, .14);
}

/* ---------------- Terminal (Trading Room) ---------------- */
.room-bar {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  padding: 18px 24px; margin-bottom: 24px;
}
.terminal-grid {
  display: grid; grid-template-columns: 290px minmax(0, 1fr) 330px;
  gap: 20px; align-items: start;
}
.term-panel { padding: 20px; }
.term-panel h3 { font-size: 1rem; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.watch-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease;
}
.watch-item:hover { background: rgba(255, 255, 255, 0.045); }
.watch-item.active { background: var(--grad-soft); border-color: rgba(30,193,203, 0.45); }
.watch-item .w-sym { font-weight: 700; font-size: .9rem; }
.watch-item .w-name { font-size: .72rem; color: var(--faint); }
.watch-item .w-price { text-align: right; font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }
.watch-item .w-chg { text-align: right; font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.chart-box { position: relative; }
.chart-box canvas { width: 100%; display: block; }
.chart-hint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: .9rem; pointer-events: none; }

.order-calc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.order-calc .oc-label { font-size: .72rem; color: var(--muted); font-weight: 600; }
.order-calc .oc-value { font-family: var(--font-display); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }

.acc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
.acc-stat { padding: 18px 20px; }
.acc-stat .as-label { font-size: .74rem; color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.acc-stat .as-value { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

.guest-lock { text-align: center; padding: 40px 24px; }
.guest-lock .lock-ico { font-size: 2.2rem; margin-bottom: 12px; }

/* ---------------- CTA band ---------------- */
.cta-band {
  position: relative; overflow: hidden;
  padding: 56px 48px; text-align: center;
  border-radius: 24px;
  background: rgba(30, 193, 203, 0.12);
  border: 1px solid rgba(30,193,203, 0.45);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 300px at 50% 0%, rgba(46,216,226, 0.2), transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band h2 { margin-bottom: 12px; }
.cta-band p { color: var(--muted); max-width: 52ch; margin: 0 auto 28px; }

/* ---------------- Footer ---------------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 70px; padding: 58px 0 30px; background: rgba(20,19,25, 0.55); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; }

/* Footer 5 kolom (brand · Produk · Paket · Komunitas · Kontak) — SUSUNAN YANG
   SAMA dengan footer landing. Landing memuat twf.css setelah style.css dengan
   nilai identik, jadi tampilannya tidak berubah; aturan ini membuat halaman
   publik di app DASHBOARD yang tidak memuat twf.css (mis. /share) mendapat
   tata letak footer yang sama persis. */
.footer-grid.footer-cols-5 { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.25fr; }
@media (max-width: 1180px) { .footer-grid.footer-cols-5 { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 30px; } }
@media (max-width: 860px)  { .footer-grid.footer-cols-5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .footer-grid.footer-cols-5 { grid-template-columns: 1fr; } }
.footer-desc { color: var(--muted); font-size: .9rem; margin: 16px 0 14px; max-width: 34ch; }
.footer-badge { font-size: .8rem; color: var(--faint); border: 1px dashed var(--line-strong); border-radius: 10px; padding: 9px 12px; display: inline-block; }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: 6px; }
.footer-col a { color: var(--muted); font-size: .92rem; transition: color .15s ease; }
.footer-col a:hover { color: #5FDCE6; }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 44px; padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom p { color: var(--faint); font-size: .82rem; }

/* ---------------- Reveal animation ---------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------------- Keyframes ---------------- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(30,193,203, .55); } 50% { box-shadow: 0 0 0 7px rgba(30,193,203, 0); } }

.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); display: inline-block; animation: pulse-dot 1.8s infinite; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1080px) {
  .terminal-grid { grid-template-columns: 260px 1fr; }
  .terminal-grid .order-col { grid-column: 1 / -1; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .plan.popular { transform: none; }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .forum-grid { grid-template-columns: 1fr; }
  .acc-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 3px;
    background: rgba(27,26,35, 0.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    padding: 14px 4%;
    display: none;
  }
  .nav.open { display: flex; animation: fadeUp .25s ease both; }
  .nav-link { padding: 13px 16px; font-size: 1rem; }
  .nav-auth { display: none; }
  .grid-2, .grid-3, .grid-2-1 { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr; }
  .terminal-grid { grid-template-columns: 1fr; }
  .hero { padding: 64px 0 48px; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 560px) {
  .section { padding: 52px 0; }
  .grid-4 { grid-template-columns: 1fr; }
  .stat-band, .acc-stats { grid-template-columns: 1fr 1fr; padding: 24px 18px; }
  .hero-stats { gap: 22px; }
  .table th, .table td { padding: 10px 10px; }
  .cta-band { padding: 40px 24px; }
  .order-calc { grid-template-columns: 1fr; }
}

/* ============================================================
   Dashboard (app shell) — fullwidth, minimalis, 2 kolom
   ============================================================ */
.container-wide { width: min(1560px, 95%); margin-inline: auto; }

.dash-page { min-height: calc(100vh - 68px); }

.dash-topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(27,26,35, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.dash-topbar-inner {
  display: flex; align-items: center; gap: 30px; height: 68px;
}
.dash-topbar .brand-name { font-size: 1.14rem; letter-spacing: .01em; }

/* Kolom kiri: FAMOUSONE + search */
.dash-left { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }

/* Search */
.dash-search { position: relative; width: min(360px, 28vw); }
.dash-search .search-ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--faint); pointer-events: none; display: grid; place-items: center;
}
.dash-search input {
  width: 100%; padding: 9px 42px 9px 38px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); font-size: .9rem; outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.dash-search input::placeholder { color: var(--faint); }
.dash-search input:focus {
  border-color: rgba(46,216,226, 0.6);
  box-shadow: 0 0 0 3px rgba(46,216,226, 0.13);
  background: rgba(255, 255, 255, 0.07);
}
.search-kbd {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: .7rem; font-weight: 700; color: var(--faint);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 7px; pointer-events: none;
}

/* Kolom kanan: aksi minimalis */
.dash-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.dash-actions .btn { display: inline-flex; align-items: center; gap: 7px; }

.dash-icon-btn {
  position: relative; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  color: var(--muted); transition: all .18s ease;
}
.dash-icon-btn:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); }

.dash-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #1EC1CB;
  border: 2px solid var(--bg);
}
/* Notifikasi konten baru → titik HIJAU (merah dipakai untuk hal lain) */
.dash-dot.notif-on { background: #1EC1CB; box-shadow: 0 0 0 3px rgba(30,193,203, 0.18); }
/* titik hijau inbox (warna sama dengan notifikasi konten) */
.dash-dot.inbox-on { background: #1EC1CB; box-shadow: 0 0 0 3px rgba(30,193,203, 0.18); }
/* badge jumlah di menu "Inbox" (dropdown profil) */
.dash-menu-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: .68rem; font-weight: 800;
  color: #14262A; background: #1EC1CB;
}

/* ---- Panel notifikasi (bell di header) ---- */
.dash-notif { position: relative; }
.notif-panel {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 75;
  width: min(380px, 92vw);
  background: rgba(33,31,40, 0.96);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--line-strong); border-radius: 16px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.6);
  padding: 12px; display: none;
}
.dash-notif.open .notif-panel { display: block; animation: fadeUp .18s ease both; }

/* ============================================================
   Panel notifikasi & inbox — versi MOBILE
   Topbar wrap jadi 2 baris di layar kecil, sehingga ikon bell/inbox TIDAK lagi
   di tepi kanan layar → panel yang di-anchor `right: 0` ke tombolnya akan
   melewati tepi KIRI layar (terukur left=-199 px di 414px). Karena itu di
   layar kecil panel dijadikan fixed selebar viewport dengan margin 12px,
   di bawah topbar (--dash-top-h diukur JS). Berlaku untuk bell DAN inbox.
   PENTING: blok ini harus SETELAH aturan dasar .notif-panel di atas.
   ============================================================ */
@media (max-width: 860px) {
  .dash-notif { position: static; }
  .notif-panel {
    position: fixed; z-index: 90;
    top: calc(var(--dash-top-h, 60px) + 8px);
    left: 12px; right: 12px; width: auto; max-width: none;
  }
}
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 4px 4px 10px; border-bottom: 1px solid var(--line);
}
.notif-head b { font-family: var(--font-display); font-size: .95rem; }
.notif-empty { font-size: .82rem; color: var(--muted); line-height: 1.7; margin: 12px 4px 4px; }
.notif-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: min(58vh, 420px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
  padding: 8px 0;
}
.notif-list::-webkit-scrollbar { width: 6px; }
.notif-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 99px; }
.notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 11px; border-radius: 12px;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.notif-item:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--line); }
.notif-item.unread { background: rgba(30,193,203, 0.06); border-color: rgba(30,193,203, 0.26); }
.notif-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.notif-title { font-size: .86rem; font-weight: 600; color: #F0EDE7; line-height: 1.45; }
.notif-item.unread .notif-title { font-weight: 700; }
.notif-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .72rem; color: var(--faint); }
.notif-kind {
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
  color: #CCC7C0;
}
.notif-kind.green { color: #5FDCE6; border-color: rgba(30,193,203, 0.34); }
.notif-kind.amber { color: #E9B173; border-color: rgba(217,142,63, 0.34); }
.notif-kind.cyan  { color: #5FDCE6; border-color: rgba(46,216,226, 0.34); }
/* baris isi pesan inbox di panel (dipotong 2 baris) */
.notif-text {
  font-size: .78rem; color: var(--muted); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-foot { padding: 8px 4px 2px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }

/* ============================================================
   HALAMAN INBOX (dashboard/inbox.php)
   ============================================================ */
.inbox-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.inbox-page-title { font-family: var(--font-display); font-weight: 700; font-size: .98rem; }
.inbox-page-count { display: block; font-size: .76rem; color: var(--faint); margin-top: 2px; }
.inbox-page-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 46px 20px; text-align: center; color: var(--faint);
}
.inbox-page-empty svg { color: #5FDCE6; }
.inbox-page-empty b { color: #F0EDE7; font-size: .95rem; }
.inbox-page-empty span { font-size: .84rem; color: var(--muted); max-width: 46ch; line-height: 1.7; }
.inbox-page-list { display: flex; flex-direction: column; }
.inbox-row {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background .15s ease;
}
.inbox-row:last-child { border-bottom: 0; }
.inbox-row:hover { background: rgba(255, 255, 255, 0.03); }
.inbox-row-ico {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05);
}
.inbox-row-ico.badge-green { color: #5FDCE6; border-color: rgba(30,193,203, 0.32); background: rgba(30,193,203, 0.1); }
.inbox-row-ico.badge-amber { color: #E9B173; border-color: rgba(217,142,63, 0.32); background: rgba(217,142,63, 0.1); }
.inbox-row-ico.badge-cyan  { color: #5FDCE6; border-color: rgba(46,216,226, 0.32); background: rgba(46,216,226, 0.1); }
.inbox-row-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.inbox-row-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.inbox-row-top b { font-size: .92rem; color: #F0EDE7; }
.inbox-row.unread .inbox-row-top b { font-weight: 700; }
.inbox-row-text { font-size: .82rem; color: var(--muted); line-height: 1.65; white-space: pre-line; }
.inbox-row-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: .72rem; color: var(--faint); }
.inbox-row-date { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .inbox-row { padding: 13px 2px; }
  .inbox-row-text { white-space: normal; }
}
.notif-new {
  flex: 0 0 auto; align-self: center;
  font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #5FDCE6; background: rgba(30,193,203, 0.14);
  border: 1px solid rgba(30,193,203, 0.34);
  padding: 3px 8px; border-radius: 999px;
}

/* Today PnL — angka + persen vs kemarin */
.dash-pnl { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1; }
.dash-pnl-label {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
}
.dash-pnl-row { display: flex; align-items: center; gap: 8px; }
.dash-pnl-value {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dash-pct {
  font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 2px 7px; border-radius: 999px;
}
.dash-pct.pos  { color: #1EC1CB; background: rgba(30,193,203, 0.13); }
.dash-pct.neg  { color: #D97A55; background: rgba(224,138,103, 0.13); }
.dash-pct.flat { color: var(--faint); background: rgba(255, 255, 255, 0.06); }

/* Profil + dropdown — Today PnL di dalam pill */
.dash-profile { position: relative; }
.dash-account {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-family: inherit; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.dash-account:hover { border-color: rgba(30,193,203, 0.55); background: rgba(255, 255, 255, 0.08); }
.dash-acc-pnl { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.dash-acc-label {
  font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint);
}
.dash-acc-row { display: inline-flex; align-items: center; gap: 6px; }
.dash-acc-value { font-family: var(--font-display); font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-acc-pct { font-size: .62rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.dash-acc-pct.pos  { color: #1EC1CB; background: rgba(30,193,203, 0.13); }
.dash-acc-pct.neg  { color: #D97A55; background: rgba(224,138,103, 0.13); }
.dash-acc-pct.flat { color: var(--faint); background: rgba(255, 255, 255, 0.06); }
.dash-acc-chev { color: var(--faint); display: grid; place-items: center; }

/* Icon + (trade baru) lebih menonjol — circle, ukuran sama dgn notifikasi */
.dash-icon-btn.dash-add {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--grad);
  border-color: transparent;
  color: #14262A;
  box-shadow: 0 6px 18px rgba(30,193,203, 0.4);
}
.dash-icon-btn.dash-add:hover {
  /* teks tetap GELAP: putih di atas hijau hanya 2,2:1 (gagal kontras) */
  color: #0B1E22;
  background: #2ED8E2;
  box-shadow: 0 8px 22px rgba(30,193,203, 0.55);
  transform: translateY(-1px);
}

.dash-menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 70;
  min-width: 264px; padding: 8px;
  background: rgba(33,31,40, 0.94);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--line-strong); border-radius: 16px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55);
  display: none;
}
.dash-menu.open { display: block; animation: fadeUp .18s ease both; }

.dash-menu-head {
  display: flex; gap: 11px; align-items: center;
  padding: 10px 12px 13px;
  border-bottom: 1px solid var(--line); margin-bottom: 7px;
}
.dash-menu-name { font-weight: 700; font-size: .92rem; line-height: 1.3; }
.dash-menu-mail { font-size: .76rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; max-width: 190px; }

.dash-menu a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 11px;
  font-size: .9rem; font-weight: 600; color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
.dash-menu a svg { flex: 0 0 auto; color: var(--faint); transition: color .15s ease; }
.dash-menu a:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }
.dash-menu a:hover svg { color: #5FDCE6; }
.dash-menu a.dash-menu-danger { color: #E08A67; }
.dash-menu a.dash-menu-danger svg { color: #D97A55; }
.dash-menu a.dash-menu-danger:hover { background: rgba(199,90,60, 0.12); color: #F0C4B0; }
/* menu Inbox: badge jumlah pesan baru didorong ke kanan */
.dash-menu a.dash-menu-inbox { position: relative; }
.dash-menu-sep { height: 1px; background: var(--line); margin: 7px 6px; }

/* Footer dashboard */
.dash-foot { border-top: 1px solid var(--line); padding: 22px 0; margin-top: 60px; }
.dash-foot p { color: var(--faint); font-size: .8rem; text-align: center; }

/* Stage & placeholder */
.dash-stage { padding: 56px 0 40px; }
.dash-empty { text-align: center; max-width: 580px; margin: 0 auto; padding: 52px 32px; }
.dash-empty p { margin-top: 12px; }

/* Responsive dashboard */
@media (max-width: 1080px) {
  /* Topbar jadi 2 baris: baris 1 = brand + search, baris 2 = aksi */
  .dash-topbar-inner { flex-wrap: wrap; height: auto; padding: 12px 0; gap: 12px 18px; }
  .dash-left { width: 100%; }
  .dash-left .dash-search { flex: 1; width: auto; min-width: 0; }
  .dash-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; margin-left: 0; }
  .search-kbd { display: none; }
}

/* ============================================================
   Dashboard sidebar (navigasi kiri)
   ============================================================ */
.dash-layout {
  display: grid; grid-template-columns: 268px minmax(0, 1fr);
  gap: 28px; align-items: start;
  padding: 28px 0 40px;
  position: relative;
}
.dash-main { min-width: 0; position: relative; z-index: 1; }
.dash-stage { padding: 4px 0 0; }

/* Tombol buka sidebar (mobile) */
.dash-side-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: transparent; border: 1px solid transparent;
  color: var(--muted); transition: all .18s ease;
}
.dash-side-toggle:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); }

/* Panel sidebar */
.dash-side {
  position: sticky; top: 88px; z-index: 40;
  max-height: calc(100vh - 108px); overflow-y: auto; overflow-x: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 12px 10px 18px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
  transition: width .28s ease;
  width: 100%;
}
.dash-side::-webkit-scrollbar { width: 6px; }
.dash-side::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 99px; }

/* Header sidebar: logo teks + tombol toggle (<) — lihat seksi "Sidebar collapse" di bawah file */

/* Grup: label + item + garis horizontal pemisah */
.side-group { padding: 6px 0 10px; }
.side-group + .side-group {
  border-top: 1px solid var(--line);
  margin-top: 8px; padding-top: 14px;
}
.side-group-label {
  font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint); padding: 0 12px 9px;
  white-space: nowrap; overflow: hidden;
}
.side-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; margin-bottom: 2px; border-radius: 11px;
  font-size: .9rem; font-weight: 600; color: var(--muted);
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.side-item > span:not(.side-ico):not(.side-lock):not(.side-new) { overflow: hidden; text-overflow: ellipsis; }
.side-item .side-ico { display: grid; place-items: center; color: var(--faint); flex: 0 0 auto; transition: color .15s ease; }
.side-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.side-item:hover .side-ico { color: #5FDCE6; }
.side-item.active {
  background: var(--grad-soft);
  border-color: rgba(30,193,203, 0.45);
  color: #fff;
}
.side-item.active .side-ico { color: #5FDCE6; }

/* Backdrop sidebar (mobile) */
.dash-backdrop { display: none; }

/* Tombol hamburger sisi KANAN — hanya dipakai di layar kecil. */
.dash-side-toggle-r { display: none; margin-left: 2px; }

/* Off-canvas sidebar: top mengikuti tinggi topbar (diukur JS via --dash-top-h) */
@media (max-width: 1080px) {
  .dash-layout { grid-template-columns: 1fr; padding-top: 16px; }
  .dash-side-toggle { display: flex; }
  .dash-side {
    position: fixed; top: calc(var(--dash-top-h, 68px) + 10px); bottom: 0; left: 0;
    width: min(304px, 86vw); max-height: none; height: auto;
    z-index: 65; border-radius: 0 18px 0 0;
    background: rgba(27,26,35, 0.97);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    padding: 18px 14px 26px;
    transform: translateX(-104%);
    transition: transform .26s ease, box-shadow .26s ease;
  }
  .dash-side.open { transform: none; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
  .dash-backdrop.show {
    display: block; position: fixed; inset: var(--dash-top-h, 68px) 0 0 0;
    background: rgba(16,15,20, 0.55); z-index: 60;
    backdrop-filter: blur(2px);
  }
}

@media (max-width: 560px) {
  .dash-acc-label { display: none; }
  .dash-acc-pct { display: none; }
  .dash-actions { gap: 8px; }
  .dash-actions .btn { padding: 9px 13px; font-size: .82rem; }
  .dash-pnl-value { font-size: .9rem; }
  .dash-pct { font-size: .62rem; padding: 2px 5px; }
  .pair-groups { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .dash-pnl-label { display: none; }
  .dash-pct { display: none; }
}

/* ============================================================
   Journal — konten dinamis di kolom tengah dashboard
   ============================================================ */
.dash-stage.center {
  min-height: 55vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 20px 0;
}
.journal-view { width: min(720px, 100%); margin-inline: auto; }

.journal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.journal-title {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px;
}
.journal-card { padding: 20px; }

.journal-desc { color: var(--muted); font-size: .86rem; margin-bottom: 14px; }

/* Checklist pre-trade — form bertahap, daftar vertikal, toggle bullish/bearish */
.journal-checks { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }

.form-group { margin-bottom: 20px; }
.form-group-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--faint); padding: 0 2px 8px;
}

.brow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 2px;
}
.brow + .brow { border-top: 1px solid rgba(255, 255, 255, 0.055); }
.bname { font-weight: 600; font-size: .92rem; color: #E9E5DF; }

.btoggles { display: flex; gap: 6px; flex: 0 0 auto; }
.btoggle {
  padding: 6px 15px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  transition: all .15s ease;
}
.btoggle:hover { color: var(--ink); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.08); }
.btoggle.on.bull {
  background: rgba(30,193,203, 0.15);
  border-color: rgba(30,193,203, 0.5);
  color: #5FDCE6;
}
.btoggle.on.bear {
  background: rgba(224,138,103, 0.15);
  border-color: rgba(224,138,103, 0.5);
  color: #E08A67;
}

/* Toggle Market Narrative (3 pilihan, opsional) */
.ntoggles { display: flex; gap: 6px; flex: 0 0 auto; }
.ntoggle {
  padding: 6px 14px; border-radius: 999px;
  font-size: .76rem; font-weight: 700;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  transition: all .15s ease;
}
.ntoggle:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
.ntoggle.on {
  background: rgba(46,216,226, 0.14);
  border-color: rgba(46,216,226, 0.5);
  color: #5FDCE6;
}

/* Alert tambahan untuk hasil analisis mix */
.alert.warn {
  background: rgba(217,142,63, 0.1);
  border-color: rgba(217,142,63, 0.35);
  color: #E9B173;
}
#jResult { margin-top: 18px; margin-bottom: 0; }

/* Tahap isi trade */
.jresult-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.trade-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.trade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.trade-done-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px;
  margin-top: 16px; padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line); border-radius: 13px;
}
.trade-done-list .td-label { font-size: .74rem; color: var(--faint); font-weight: 600; }
.trade-done-list .td-value {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  font-variant-numeric: tabular-nums; word-break: break-word;
}

/* Seksi dalam form trade */
.sec-title {
  display: flex; align-items: center; gap: 9px;
  margin: 22px 0 14px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #C0BBB4;
}
.sec-title:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.sec-num {
  width: 20px; height: 20px; flex: 0 0 auto; border-radius: 7px;
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 800; color: #5FDCE6;
  background: var(--grad-soft); border: 1px solid rgba(30,193,203, .4);
}
.hint-inline { font-size: .72rem; color: var(--faint); font-weight: 500; text-transform: none; letter-spacing: 0; }
.input.static {
  background: rgba(255, 255, 255, 0.03);
  color: #5FDCE6; font-weight: 800; font-variant-numeric: tabular-nums;
  display: flex; align-items: center;
}
.input[type="date"] { color-scheme: dark; }

/* Validasi harga entry vs SL/TP */
.input.invalid {
  border-color: rgba(224,138,103, 0.75);
  box-shadow: 0 0 0 3px rgba(224,138,103, 0.14);
  background: rgba(224,138,103, 0.05);
}
.field-note {
  font-size: .78rem; font-weight: 600; color: var(--red-soft);
  margin: -4px 0 2px;
}

/* Checklist technical setup (text-only, warna berubah) */
.setup-checks { display: flex; flex-direction: column; gap: 4px; }
.scheck {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.scheck:hover { background: rgba(255, 255, 255, 0.05); }
.scheck.done { background: rgba(30,193,203, 0.08); border-color: rgba(30,193,203, 0.3); }
.scheck-input { position: absolute; opacity: 0; width: 0; height: 0; }
.scheck-name { font-weight: 600; font-size: .9rem; color: #E9E5DF; transition: color .15s ease; }
.scheck.done .scheck-name { color: #5FDCE6; }
.scheck-w {
  font-size: .7rem; font-weight: 700; color: var(--faint);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
  padding: 2px 8px; border-radius: 999px; transition: all .15s ease;
}
.scheck.done .scheck-w { color: #5FDCE6; border-color: rgba(30,193,203, 0.35); }
.setup-grade { margin-top: 12px; }

/* Psychology factor */
.psych-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pcheck {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 13px; border-radius: 11px; cursor: pointer;
  font-size: .86rem; font-weight: 600; color: #E9E5DF;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
  transition: all .15s ease;
}
.pcheck:hover { background: rgba(255, 255, 255, 0.06); }
.pcheck-input { position: absolute; opacity: 0; width: 0; height: 0; }
.pcheck.done {
  border-color: rgba(30,193,203, 0.55);
  background: rgba(30,193,203, 0.12);
  color: #fff;
}
.pcheck em { font-style: normal; font-weight: 800; font-size: .7rem; color: var(--faint); }
.pcheck.done.pos { border-color: rgba(30,193,203, 0.5); background: rgba(30,193,203, 0.1); }
.pcheck.done.pos em { color: #5FDCE6; }
.pcheck.done.neg { border-color: rgba(224,138,103, 0.5); background: rgba(224,138,103, 0.1); }
.pcheck.done.neg em { color: #E08A67; }
.psych-score { margin-top: 12px; font-size: .85rem; font-weight: 700; line-height: 1.55; }
.psych-score.green { color: #5FDCE6; }
.psych-score.cyan { color: #5FDCE6; }
.psych-score.amber { color: #E9B173; }
.psych-score.red { color: #E08A67; }

/* Hasil Cek Kualitas Trade */
.quality-card {
  border: 1px solid; border-radius: 16px; padding: 22px 18px;
  text-align: center; margin-bottom: 18px;
}
.quality-card.green { background: rgba(30,193,203, 0.1); border-color: rgba(30,193,203, 0.45); }
.quality-card.cyan  { background: rgba(46,216,226, 0.09); border-color: rgba(46,216,226, 0.4); }
.quality-card.amber { background: rgba(217,142,63, 0.1); border-color: rgba(217,142,63, 0.4); }
.quality-card.red   { background: rgba(224,138,103, 0.1); border-color: rgba(224,138,103, 0.45); }
.quality-emoji { font-size: 2.3rem; line-height: 1; }
.quality-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin: 10px 0 5px; }
.quality-card.green .quality-title { color: #5FDCE6; }
.quality-card.cyan .quality-title { color: #5FDCE6; }
.quality-card.amber .quality-title { color: #E9B173; }
.quality-card.red .quality-title { color: #E08A67; }
.quality-desc { color: var(--muted); font-size: .88rem; max-width: 54ch; margin: 0 auto; }
.quality-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }

/* Screenshot */
.shot-prev { margin-top: 10px; }
.shot-prev img { max-height: 150px; border-radius: 12px; border: 1px solid var(--line); }
.input[type="file"] { color: var(--muted); }
.input[type="file"]::file-selector-button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-strong); color: var(--ink);
  border-radius: 9px; padding: 6px 12px; margin-right: 10px;
  font-weight: 600; cursor: pointer;
}

/* Paste zone: tempel gambar langsung (Ctrl+V) */
.paste-zone {
  margin-top: 8px; padding: 18px 14px;
  border: 1.5px dashed var(--line-strong); border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--faint); font-size: .85rem; font-weight: 600; text-align: center;
  cursor: pointer; outline: none;
  transition: all .15s ease;
}
.paste-zone:hover, .paste-zone.ready {
  border-color: rgba(46,216,226, 0.6); color: #6FE0EA; background: rgba(46,216,226, 0.05);
}
.paste-zone.has {
  border-color: rgba(30,193,203, 0.6); color: #5FDCE6; background: rgba(30,193,203, 0.07);
}

@media (max-width: 560px) {
  .psych-grid { grid-template-columns: 1fr; }
  .trade-grid { grid-template-columns: 1fr; }
  .trade-done-list { grid-template-columns: 1fr; }
}

/* ============================================================
   Modal umum (update result, after, dll)
   ============================================================ */
.modal-open { overflow: hidden; }
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
  background: rgba(12,11,16, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeUp .18s ease both;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  width: min(540px, 100%);
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--line-strong); border-radius: 22px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.6);
  padding: 26px;
}
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.modal-close {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  color: var(--muted); transition: all .18s ease;
}
.modal-close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.1); }

/* ============================================================
   Trade Log — grid & card
   ============================================================ */
.tlog-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tfl-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 280px; }
.tfl-left .cselect { flex: 0 0 220px; }
.tlog-search { max-width: 240px; }
.tfl-right { display: flex; align-items: center; gap: 8px; }
.tlog-advanced {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-strong);
}
.tlog-advanced[hidden] { display: none; }
.tlog-count {
  margin-top: 12px; font-size: .84rem; color: var(--muted);
  padding-top: 10px; border-top: 1px dashed var(--line-strong);
}
.tlog-count strong { color: #5FDCE6; }

/* Bulk select bar */
.bulk-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; margin-bottom: 14px;
  background: var(--grad-soft); border: 1px solid rgba(30,193,203, 0.45);
  border-radius: 13px; font-size: .88rem; color: #F0EDE7;
  animation: fadeUp .2s ease both;
}
.bulk-bar[hidden] { display: none; }

/* Checkbox pilih card */
.tlog-select {
  position: relative;
  width: 32px; height: 32px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; cursor: pointer;
  background: rgba(27,26,35, 0.65);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all .15s ease;
}
.tlog-select:hover { background: rgba(27,26,35, 0.9); border-color: rgba(46,216,226, 0.6); }
.tlog-select input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.tlog-checkbox {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.6);
  transition: all .15s ease;
}
.tlog-box { display: block; }
.tlog-tick { display: none; }
.tlog-select:hover .tlog-checkbox { color: rgba(46,216,226, 0.9); }
.tlog-select input:checked + .tlog-checkbox {
  background: #1EC1CB;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(30,193,203, 0.3);
}
.tlog-select input:checked + .tlog-checkbox .tlog-box { display: none; }
.tlog-select input:checked + .tlog-checkbox .tlog-tick { display: block; }
.tlog-card.selected { border-color: rgba(30,193,203, 0.7); box-shadow: 0 0 0 1px rgba(30,193,203, 0.4), var(--shadow); }

.tlog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; align-items: stretch;
}
.tlog-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

/* Screenshot chart (Before) — UKURAN MENGIKUTI ASET (permintaan user):
   tanpa rasio tetap, jadi gambar 1:1, 3:4, atau 16:9 tampil apa adanya
   (tidak dipotong). `max-height` menjaga potret sangat tinggi tidak
   mendominasi kartu — di situ `object-fit: contain` memberi letterbox
   gelap, bukan memotong isi gambar. */
.tlog-shot { position: relative; background: rgba(255, 255, 255, 0.03); }
.tlog-shot img {
  width: 100%; height: auto;
  object-fit: contain; display: block;
  background: rgba(20, 19, 25, 0.62);
}
/* Tanpa gambar: kotak placeholder. Tingginya dipatok `min-height` karena
   `.tlog-shot` tidak lagi punya rasio tetap (height:100% akan jadi 0). */
.tlog-shot-empty {
  width: 100%; min-height: 220px; height: 100%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
  background: var(--grad-soft); color: #E0DBD4;
}
.tlog-ov-tl { position: absolute; top: 12px; left: 12px; display: flex; gap: 7px; z-index: 2; }
.tlog-ov-tr { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 7px; z-index: 2; }
/* Overlay badges — background gelap agar tetap terbaca di gambar terang maupun gelap */
.tlog-ov-tl .badge {
  background: rgba(20,19,25, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.tlog-ov-tl .badge.green  { color: #5FDCE6; border-color: rgba(30,193,203, 0.6); }
.tlog-ov-tl .badge.red    { color: #E08A67; border-color: rgba(224,138,103, 0.6); }
.tlog-ov-tl .badge.violet { color: #6FE0EA; border-color: rgba(24,175,184, 0.6); }
.tlog-ov-tl .badge.gray   { color: #CCC7C0; border-color: rgba(255, 255, 255, 0.35); }
/* RUNNING = status "hidup" → pil gelap + titik berdenyut.
   Latar `rgba(20,19,25,.82)` = warna "kaca gelap" yang sama dengan badge
   lain di atas gambar chart (permintaan user).
   1) `.badge.run-live` (umum) dipakai halaman publik share.php.
   2) `.tlog-ov-tl .badge.run-live` (3 kelas) khusus badge di atas gambar kartu
      Trade Log — perlu 3 kelas agar MENANG atas `.tlog-ov-tl .badge`.
   backdrop blur dipertahankan agar tetap terbaca di atas gambar chart. */
.badge.run-live {
  background: rgba(20, 19, 25, 0.82);
  border-color: rgba(30, 193, 203, 0.4);
  color: #5FDCE6;
}
.tlog-ov-tl .badge.run-live {
  background: rgba(20, 19, 25, 0.82);
  border-color: rgba(30, 193, 203, 0.4);
  color: #5FDCE6;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.tlog-ico {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(27,26,35, 0.65); border: 1px solid var(--line-strong);
  color: #fff; backdrop-filter: blur(6px);
  transition: all .15s ease;
}
.tlog-ico:hover { background: rgba(27,26,35, 0.9); border-color: rgba(46,216,226, 0.6); color: #5FDCE6; }

.tlog-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px 18px 6px;
}
.tlog-head-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tlog-pair { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.tlog-date { font-size: .78rem; color: var(--faint); }
.tlog-pnl { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Status RUNNING — sejajar gayanya dengan label Cancel (chip putus-putus) */
.tlog-run-label {
  /* Pil status RUNNING: latar gelap + titik berdenyut.
     ⚠️ Di kartu Trade Log label ini TIDAK lagi dirender (permintaan user:
     saat sudah Running, di sebelah tombol Cancel tidak perlu chip Running).
     Kelasnya TETAP dipakai kartu sinyal Telegram (dashboard/signal-card.php). */
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #5FDCE6;
  background: rgba(20, 19, 25, 0.82);
  border: 1px solid rgba(30, 193, 203, 0.4);
  padding: 3px 9px; border-radius: 999px;
}
/* titik berdenyut (sama dengan .hl-dot di landing) */
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: #1EC1CB;
  animation: hlPulse 1.6s ease-in-out infinite;
}
@keyframes hlPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
/* ikon di dalam chip running: jangan sampai menurunkan tinggi baris */
.tlog-run-label svg, .idea-status.st-run svg { display: block; }
/* Tombol aksi "Running" (pada kartu PLAN) memakai latar gelap yang sama
   dengan chip Running lainnya. */
.tlog-run-btn {
  background: rgba(20, 19, 25, 0.82);
  border-color: rgba(30, 193, 203, 0.42);
  color: #5FDCE6;
}
.tlog-run-btn:hover { background: rgba(34, 32, 44, 0.92); border-color: rgba(30, 193, 203, 0.6); }
.tlog-cancel-label {
  font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint);
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed var(--line-strong);
  padding: 4px 10px; border-radius: 999px;
}
.tlog-cancel-btn { border-color: rgba(224,138,103, 0.4); color: #E08A67; }
.tlog-cancel-btn:hover { border-color: rgba(224,138,103, 0.7); background: rgba(224,138,103, 0.1); color: #F0C4B0; }

.tlog-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 4px; }
.pill {
  font-size: .72rem; font-weight: 700; padding: 3px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
  color: #DAD5CF; white-space: nowrap;
}
.pill.green { background: rgba(30,193,203, 0.12); color: #5FDCE6; border-color: rgba(30,193,203, 0.3); }
.pill.red { background: rgba(224,138,103, 0.12); color: #E08A67; border-color: rgba(224,138,103, 0.3); }
.pill.amber { background: rgba(217,142,63, 0.12); color: #E9B173; border-color: rgba(217,142,63, 0.3); }

/* Icon di dalam pill — dikunci ukuran & line-height agar tidak membuat teks turun */
.pico {
  display: inline-block;
  margin-right: 5px;
  vertical-align: -0.12em;
  line-height: 1;
  font-size: .92em;
}

.tlog-prices {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 12px 18px;
}
.tlog-prices > div {
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  border-radius: 11px; padding: 8px 10px; text-align: center;
}
.tl-label { font-size: .66rem; color: var(--faint); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tl-value { font-family: var(--font-display); font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }
.tl-value.up { color: var(--green); }
.tl-value.down { color: var(--red-soft); }

.tlog-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 14px 18px 18px; margin-top: auto;
}
.tlog-actions .btn { flex: 1 1 auto; }
.tlog-after { flex: 0 0 auto !important; }

/* ---- Detail lengkap kartu Trade Log (HANYA tampil saat Preview / Copy / Download) ----
   Kartu di halaman dibuat ringkas (permintaan user); seluruh keterangan
   (Trade Log Setup, Bias & Fundamental Check, Checklist Entry Model,
   Psychology, Catatan) hidup di dalam blok ini dan baru tampil ketika kartu
   di-preview atau di-capture (.tlog-card.capturing). */
.tlog-detail {
  display: none;
  margin: 14px 18px 0; padding: 14px 15px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line); border-radius: 12px;
}
.tlog-card.capturing .tlog-detail { display: block !important; }
.tld-sec + .tld-sec { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--line); }
.tld-title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #6FE0EA; margin-bottom: 8px;
}
.tld-count { color: var(--faint); font-size: .68rem; font-variant-numeric: tabular-nums; }
.tld-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tld-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tld-k { font-size: .74rem; font-weight: 700; color: var(--faint); }
.tld-v { font-size: .8rem; font-weight: 700; color: #F0EDE7; text-align: right; min-width: 0; }
.tld-axis { font-weight: 800; }
.tld-axis.green { color: #5FDCE6; }
.tld-axis.red   { color: #E08A67; }
.tld-axis.amber { color: #E9B173; }
.tld-badge {
  display: inline-block; margin-right: 7px; padding: 2px 8px; border-radius: 99px;
  font-size: .62rem; font-weight: 800; letter-spacing: .03em;
}
.tld-badge.ok { color: #5FDCE6; background: rgba(30,193,203, 0.14); border: 1px solid rgba(30,193,203, 0.36); }
.tld-badge.no { color: #E08A67; background: rgba(199,90,60, 0.14);  border: 1px solid rgba(199,90,60, 0.36); }
/* Teks kutipan bias & Catatan: JENIS & UKURAN font disamakan dengan baris
   keterangan lain di blok ini (permintaan user).
   PENTING: selector harus `.tlog-detail .tld-note` (2 kelas) — aturan umum
   `.card p { font-size: .94rem; color: var(--muted) }` (0,1,1) MENGALAHKAN
   `.tld-note` (0,1,0), sehingga tanpa ini teksnya tampil lebih besar (15px)
   dan berbeda dari baris lain (12,8px). */
.tlog-detail .tld-note {
  margin: 9px 0 0;
  font-family: inherit; font-size: .8rem; font-weight: 600; font-style: normal;
  color: #F0EDE7; line-height: 1.65; text-align: left;
}
.tlog-detail .tld-note b { font-weight: 800; color: #6FE0EA; }
/* kutipan pesan bias: sama jenis & ukuran, hanya warnanya dibuat sedikit redup */
.tlog-detail .tld-note-quote { font-style: normal; color: #CAC5BE; }
.tld-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tld-check { display: flex; align-items: flex-start; gap: 7px; font-size: .78rem; color: var(--muted); line-height: 1.45; }
.tld-check-name { min-width: 0; }
.tld-check-ico {
  flex: 0 0 auto; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 5px;
  color: var(--faint); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
}
.tld-check-ico svg { display: block; }
/* item yang DICENTANG: hijau + teks terang; yang tidak dicentang tetap tampil (redup) */
.tld-check.on .tld-check-ico { color: #5FDCE6; background: rgba(30,193,203, 0.14); border-color: rgba(30,193,203, 0.36); }
.tld-check.on .tld-check-name { color: #F0EDE7; font-weight: 600; }
.tld-check:not(.on) .tld-check-name { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.22); }

/* ---- Modal Preview kartu Trade Log (tampilannya = hasil Copy/Download) ---- */
.tlp-box {
  width: min(660px, 100%);
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.tlp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--line);
}
.tlp-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tlp-title {
  font-weight: 800; font-size: .95rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tlp-head-r { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tlp-stage { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; background: rgba(12,11,16, 0.35); }
.tlp-stage .tlog-card { margin: 0 auto; }
/* Di layar sempit kartu (lebar aslinya mengikuti grid) dikecilkan agar tidak
   perlu menggulir ke samping — tinggi tetap otomatis. */
@media (max-width: 720px) { .tlp-stage .tlog-card { max-width: 100%; } }
.tlp-hint { margin: 0; padding: 10px 18px 14px; font-size: .74rem; color: var(--faint); text-align: center; }

/* ============================================================
   Frame FAMOUSONE (After)
   ============================================================ */
.famous-frame {
  position: relative; overflow: hidden;
  border-radius: 18px; padding: 14px;
  text-align: center;
  background:
    rgba(30, 193, 203, 0.13);
  border: 1px solid rgba(30,193,203, 0.55);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.famous-frame::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px;
  pointer-events: none;
}
.ff-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; position: relative; z-index: 1; text-align: left; }
.ff-user {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ff-avatar {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad); color: #14262A;
  font-size: .82rem; font-weight: 800;
  margin-right: 9px;
  -webkit-text-fill-color: #14262A; color: #14262A;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.ff-tag {
  font-size: .64rem; font-weight: 800; letter-spacing: .16em; color: #C0BBB4;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-strong);
  padding: 4px 10px; border-radius: 999px;
}
.famous-frame img {
  /* Screenshot HASIL AKHIR juga mengikuti ukuran aset (permintaan user):
     `width:100% + height:auto` = rasio SELALU sama dengan gambar aslinya.
     `object-fit: contain` hanya jaring pengaman supaya tidak pernah terpotong. */
  width: 100%; height: auto; object-fit: contain;
  border-radius: 12px; border: 1px solid var(--line-strong);
  position: relative; z-index: 1; display: block;
  background: rgba(20, 19, 25, 0.62);
}
.ff-result {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.95rem; letter-spacing: -0.01em;
  margin-top: 14px; position: relative; z-index: 1;
  font-variant-numeric: tabular-nums;
}
.ff-result.win { color: #1EC1CB; }
.ff-result.loss { color: #D97A55; }
/* Pesan motivasi (menggantikan badge RR lama) — teksnya panjang (kalimat),
   jadi dibuat paragraf dengan line-height enak dibaca, tetap di tengah. */
.ff-note {
  margin: 14px 8px 0; font-size: .86rem; font-weight: 700; line-height: 1.55;
  letter-spacing: .01em; position: relative; z-index: 1;
}
.ff-note.win  { color: #5FDCE6; }
.ff-note.loss { color: #E9B173; }

/* Dua kolom di bawah pesan: KIRI badge Pair + Buy/Sell (+ 2 baris tanggal di
   bawahnya), KANAN status Win/Loss.
   text-align di-set eksplisit karena .famous-frame memakai text-align:center
   (dan mode capture memaksa center juga). */
.ff-cols {
  display: grid; grid-template-columns: 1fr auto;
  /* start (bukan center): kolom kanan mulai dari ATAS sehingga tulisan
     WIN/LOSS sejajar dengan baris badge di kolom kiri. */
  align-items: start; gap: 12px;
  margin-top: 14px; position: relative; z-index: 1;
  text-align: left;
}
.ff-col-left {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; min-width: 0;
}
.ff-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-start; }
/* Baris tanggal: dibuat bertumpuk atas-bawah & rata kiri. */
.ff-dates { display: flex; flex-direction: column; gap: 4px; text-align: left; }
/* Baris tanggal: label kecil-kapital dengan lebar TETAP supaya tanggalnya
   sejajar satu kolom (rapi saat bertumpuk). */
.ff-date-row {
  display: flex; align-items: baseline; gap: 8px;
  font-size: .82rem; font-weight: 600; color: #DAD5CF; white-space: nowrap;
}
.ff-date-row b {
  flex: 0 0 auto; min-width: 62px; text-align: left;
  font-size: .64rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #8E887F;
}
.ff-date-row span { font-variant-numeric: tabular-nums; }
/* Baris "Closed" = waktu penutupan → dibuat lebih terang/menonjol, sebagai
   pembeda dari "Created" (info waktu mulai).
   PENTING: memakai KELAS (.ff-date-close), BUKAN :last-child — sejak tiap
   kolom hanya berisi satu baris, :last-child akan ikut menandai "Created". */
.ff-date-row.ff-date-close { color: #F0EDE7; font-weight: 700; }
.ff-date-row.ff-date-close b { color: #6FE0EA; }

/* Kolom kanan: status + tanggal "Closed", semuanya rata KANAN.
   padding kanan supaya tidak menempel tepi kanan frame (permintaan user). */
.ff-col-right {
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; padding-right: 12px; gap: 8px;
}
.ff-dates-right { align-items: flex-end; }
.ff-col-right .ff-date-row { justify-content: flex-end; }
.ff-col-right .ff-date-row b { min-width: 0; text-align: right; }
/* Nilai tanggal di kolom kanan WAJIB rata kanan DI DALAM kotaknya.
   Alasan: saat copy, html-to-image gagal meng-inline webfont sehingga glyph
   digambar memakai font pengganti yang lebih sempit — kalau teks dibiarkan
   rata kiri di dalam kotak (lebar mengikuti font layout), hasilnya menyisakan
   celah di kanan (terukur 18,5 px) sehingga tampak TIDAK rata kanan. */
.ff-col-right .ff-date-row span { display: inline-block; text-align: right; }
.ff-chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: .82rem;
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line-strong); color: #F0EDE7;
}
.ff-side.buy  { background: rgba(30,193,203, 0.14); border-color: rgba(30,193,203, 0.42); color: #5FDCE6; }
.ff-side.sell { background: rgba(224,138,103, 0.14); border-color: rgba(224,138,103, 0.42); color: #E08A67; }
/* Kolom kanan hanya berisi status → dibuat sedikit lebih besar & tebal. */
.ff-col-right .ff-result {
  margin-top: 0; font-size: 1.7rem; line-height: 1.05;
  /* digeser sedikit ke atas agar optis sejajar dengan baris badge
     (badge 35px; teks status lebih tinggi sehingga terlihat lebih turun) */
  margin-top: -2px;
}
/* Catatan: .ff-pnl (nominal P/L) SUDAH TIDAK DIPAKAI — angka dihapus dari
   frame Result atas permintaan user; aturan CSS-nya ikut dihapus. */
/* Catatan: .ff-meta (baris tanggal tunggal) SUDAH TIDAK DIPAKAI — tanggal kini
   dua baris (.ff-date-row) di kolom kiri. Aturan CSS-nya dihapus. */
/* Catatan: .ff-foot (tulisan "TRADE WITH FAMOUSONE" kedua) SUDAH TIDAK
   DIPAKAI — brand cukup sekali di header hasil copy. Aturan CSS-nya dihapus. */

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(16px);
  z-index: 120; max-width: 90vw;
  background: rgba(38,36,46, 0.95); border: 1px solid var(--line-strong);
  color: var(--ink); font-size: .88rem; font-weight: 600;
  padding: 12px 20px; border-radius: 13px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { border-color: rgba(224,138,103, 0.5); }

/* ============================================================
   Settings — pair & model manager
   ============================================================ */
.pair-list, .check-list { display: flex; flex-direction: column; gap: 8px; }

/* Account list */
.settings-stack { display: flex; flex-direction: column; gap: 24px; }

/* Form inline (tambah/edit menyatu dengan komponen) */
.inline-form {
  border: 1px solid rgba(30,193,203, 0.45);
  border-radius: 14px;
  background: var(--grad-soft);
  padding: 14px;
  margin-bottom: 12px;
  animation: fadeUp .18s ease both;
}
.if-title { font-weight: 800; font-size: .9rem; margin-bottom: 10px; color: #F0EDE7; }
.if-field { margin-bottom: 10px; }
.if-field label { font-size: .78rem; font-weight: 600; color: #D2CDC6; display: block; margin-bottom: 5px; }
.if-actions { display: flex; gap: 8px; justify-content: flex-end; }
.if-msg { font-size: .8rem; font-weight: 600; color: #E08A67; margin: 8px 0 0; }
.inline-form .input { padding: 9px 12px; font-size: .9rem; }

/* Account list */
.acc-list { display: flex; flex-direction: column; gap: 10px; }
.acc-item { border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, 0.03); padding: 12px 14px; }

/* Slider akun: 1 tampil + dots + prev/next */
/* Akun: grid untuk <= 3 akun (yang jumlahnya 1 tetap melebar) */
.acc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.acc-grid-1 { grid-template-columns: 1fr; }
.acc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.acc-slider-head {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 12px;
}
.acc-slider-count { font-size: .86rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
.acc-slider-viewport { overflow: hidden; }
.acc-track { display: flex; transition: transform .3s ease; }
.acc-slide { flex: 0 0 100%; min-width: 100%; }
.acc-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.acc-dot {
  width: 8px; height: 8px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.16); cursor: pointer;
  transition: all .25s ease;
}
.acc-dot:hover { background: rgba(255, 255, 255, 0.35); }
.acc-dot.active { width: 22px; background: var(--grad); }
/* Kartu akun = DUA KOLOM: kiri info (nama/ID/jenis/saldo), kanan aksi ikon. */
.acc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acc-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.acc-actions { flex: 0 0 auto; }
.acc-name { font-family: var(--font-display); font-weight: 700; font-size: .96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-id { font-size: .78rem; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Saldo Awal tetap satu baris di dalam kolom info */
.acc-bal {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 0; border: 0;
  font-size: .78rem; color: var(--faint); font-weight: 600;
}
.acc-bal-label { font-size: .78rem; color: var(--faint); font-weight: 600; }
.acc-bal-val { font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Rapihkan Pair — kelompok per instrumen */
.pair-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pgroup { border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.025); padding: 12px; }
.pgroup-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.pgroup-label { font-family: var(--font-display); font-weight: 700; font-size: .95rem; flex: 1; }
.pgroup-count { font-size: .72rem; font-weight: 700; color: var(--faint); background: rgba(255,255,255,.06); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; }
.pgroup-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 232px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
  padding-right: 2px;
}
.pgroup-list::-webkit-scrollbar { width: 5px; }
.pgroup-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 99px; }
.pgroup-empty { font-size: .78rem; color: var(--faint); padding: 6px 2px; }
.pgroup .pair-item { padding: 8px 10px; border-radius: 11px; }
.pgroup .pair-item .pair-sym { font-size: .9rem; }
.pair-item, .check-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color .15s ease, background .15s ease;
}
.pair-item.dragging { opacity: .45; border-color: rgba(46,216,226, 0.6); }
.pair-item.over { border-color: rgba(46,216,226, 0.7); background: rgba(46,216,226, 0.07); }
.pair-grip { color: var(--faint); cursor: grab; }
.pair-sym { font-family: var(--font-display); font-weight: 700; flex: 1; }
.pair-actions { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
/* Aksi BERBASIS TEKS (Pengaturan) — pengganti tombol ikon.
   Permintaan user: semua ikon di Pengaturan dihilangkan, aksinya berupa teks
   satu baris yang diletakkan SETELAH teks/namanya. */
.mini-txt {
  display: inline-flex; align-items: center;
  padding: 5px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.055); border: 1px solid var(--line);
  color: var(--muted); font-family: inherit; font-size: .72rem; font-weight: 700;
  line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: all .15s ease;
}
.mini-txt:hover { color: var(--ink); background: rgba(255, 255, 255, 0.11); }
.mini-txt.danger { color: #E08A67; border-color: rgba(224,138,103, 0.32); }
.mini-txt.danger:hover { color: #F0C4B0; background: rgba(224,138,103, 0.15); border-color: rgba(224,138,103, 0.55); }
.mini-txt.plus { color: #86E7EE; border-color: rgba(46,216,226, 0.32); }
.mini-txt.plus:hover { color: #C2F2F6; background: rgba(46,216,226, 0.14); border-color: rgba(46,216,226, 0.55); }
.mini-btn {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  color: var(--muted); font-size: .8rem;
  transition: all .15s ease;
}
.mini-btn:hover { color: var(--ink); background: rgba(255, 255, 255, 0.1); }
.mini-btn.danger:hover { color: #E08A67; border-color: rgba(224,138,103, 0.5); }
/* Tombol aksi "+" (tambah) — aksen cyan */
.mini-btn.plus { color: #86E7EE; }
.mini-btn.plus:hover { color: #C2F2F6; background: rgba(46,216,226, 0.14); border-color: rgba(46,216,226, 0.55); }

/* Entry Model: 3 kolom di desktop (permintaan user) */
/* Entry Model: 3 kolom, TINGGI KARTU SAMA (stretch) — tombol "Tambah
   Checklist" ikut sejajar di dasar kartu via margin-top:auto. */
.model-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.model-block {
  border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.025); padding: 14px;
  display: flex; flex-direction: column; height: 100%;
}
/* checklist: 4 item pertama tampil, sisanya di-scroll (wadah .check-items),
   sementara tombol "+ Tambah Checklist" berada DI LUAR wadah scroll sehingga
   selalu terlihat & sejajar di dasar kartu antar model. */
.model-block .check-list { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.model-block .check-items {
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; padding-right: 4px;   /* max-height diatur JS (4 item pertama) */
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.model-block .check-items::-webkit-scrollbar { width: 6px; }
.model-block .check-items::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 99px; }
/* Tombol "+ Tambah Checklist": margin-top:auto MENEMPELKAN-nya ke dasar kartu
   sehingga sejajar antar kartu model (kartu dalam satu baris grid sama tinggi).
   margin kanan 4px = lebar padding-right .check-items supaya tepi tombol
   sejajar dengan tepi kartu checklist di atasnya.
   PENTING: jangan pasang margin-top inline di JS — itu mengalahkan
   margin-top:auto di sini dan membuat posisinya ikut panjang-pendeknya
   jumlah checklist (bug lama). */
.model-block .check-list [data-act="add-check"] { margin: auto 4px 0 auto; flex: 0 0 auto; }
.model-block .check-list [data-act="add-check"].mini-btn { width: 28px; height: 28px; }
.model-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.model-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.model-actions { display: flex; gap: 6px; }
.model-meta { font-size: .78rem; color: var(--faint); margin: 6px 0 12px; }
.model-meta .badge { font-size: .66rem; }
.check-item .check-name { flex: 1; min-width: 0; font-weight: 600; font-size: .88rem; }
.check-item .check-w { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--faint); }
.w-inp {
  width: 52px; padding: 4px 6px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-strong);
  color: var(--ink); font-size: .82rem; font-weight: 700; text-align: center;
}

/* ============================================================
   Responsive Trade Log & Settings
   ============================================================ */
@media (max-width: 1180px) {
  .tlog-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
   Custom select (journal & trade log filter) — bertema gelap
   ============================================================ */
.cselect { position: relative; }
.cselect-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 13px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line-strong);
  color: var(--ink); font-family: inherit; cursor: pointer; text-align: left;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.cselect-btn:hover, .cselect.open .cselect-btn {
  border-color: rgba(46,216,226, 0.55);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(46,216,226, 0.12);
}
.cs-label { display: flex; flex-direction: column; min-width: 0; font-weight: 600; font-size: .9rem; }
.cs-ph { color: var(--faint); font-weight: 500; }
.cs-sub { font-style: normal; font-size: .7rem; color: var(--faint); font-weight: 600; margin-top: 1px; }
.cs-chev { color: var(--faint); flex: 0 0 auto; transition: transform .2s ease; }
.cselect.open .cs-chev { transform: rotate(180deg); }
.cselect-menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 999;
  background: rgba(33,31,40, 0.97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.6);
  padding: 6px; max-height: 260px; overflow-y: auto;
  display: none;
}
.cselect.open .cselect-menu { display: block; animation: fadeUp .16s ease both; }
.cs-item {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: 10px; border: 0;
  background: transparent; color: var(--ink); font-family: inherit; cursor: pointer; text-align: left;
  transition: background .15s ease;
}
.cs-item:hover { background: rgba(255, 255, 255, 0.07); }
.cs-item.active { background: var(--grad-soft); border: 1px solid rgba(30,193,203, 0.45); }
.cs-item-body { display: flex; flex-direction: column; min-width: 0; }
.cs-item-label { font-weight: 700; font-size: .88rem; color: #F0EDE7; }
.cs-item-sub { font-size: .7rem; color: var(--faint); font-weight: 600; }
.cs-check { color: #5FDCE6; font-weight: 800; flex: 0 0 auto; }

/* ============================================================
   Account picker (custom dropdown — tema gelap)
   ============================================================ */
.acc-picker { position: relative; }
.acc-picker-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  /* padding kanan lebih besar: chevron tidak menempel ke tepi kotak */
  padding: 10px 16px 10px 14px; border-radius: 13px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line-strong);
  color: var(--ink); font-family: inherit; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  text-align: left;
}
/* Chevron dropdown di "Pilih Akun" */
.acc-picker-btn .ap-chev {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-right: 2px; border-radius: 8px;
  color: var(--muted); background: rgba(255, 255, 255, 0.05);
  transition: transform .18s ease, color .18s ease, background .18s ease;
}
.acc-picker-btn:hover .ap-chev,
.acc-picker.open .acc-picker-btn .ap-chev { color: #5FDCE6; background: rgba(30, 193, 203, 0.14); }
.acc-picker.open .acc-picker-btn .ap-chev { transform: rotate(180deg); }
.acc-picker-btn:hover, .acc-picker.open .acc-picker-btn {
  border-color: rgba(46,216,226, 0.55);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(46,216,226, 0.12);
}
.ap-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ap-name-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ap-name { font-family: var(--font-display); font-weight: 700; font-size: .98rem; }
/* Bintang akun utama pada DISPLAY akun terpilih (bukan di dropdown) */
.ap-main-star { flex: 0 0 auto; display: inline-flex; align-items: center; color: #E9B173; }
.ap-main-star svg { display: block; }
.ap-main-star svg path { fill: currentColor; }
/* WAJIB: aturan `display` di atas mengalahkan gaya bawaan browser untuk
   [hidden], jadi atribut hidden tidak akan menyembunyikan elemen ini. */
.ap-main-star[hidden] { display: none !important; }
.ap-meta { font-size: .72rem; color: var(--faint); font-weight: 600; }
/* `.ap-check` (centang akun aktif) tetap tidak dipakai. `.ap-chev` DIPAKAI
   LAGI — chevron dropdown di "Pilih Akun" (permintaan user terbaru). */

.acc-picker-menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 999;
  background: rgba(33,31,40, 0.97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--line-strong); border-radius: 15px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.6);
  padding: 6px;
  display: none;
}
.acc-picker.open .acc-picker-menu { display: block; animation: fadeUp .16s ease both; }
/* Satu baris akun = link akun (kiri, melebar) + tombol BINTANG (kanan).
   Bintang ditandai sebagai AKUN UTAMA — hanya satu per user; klik bintang
   TIDAK memindah akun (klik badan baris yang memindah). */
.ap-row { display: flex; align-items: center; gap: 6px; }
.ap-row > .ap-item { flex: 1 1 auto; min-width: 0; }
.ap-star {
  flex: 0 0 auto; width: 32px; height: 32px; margin-right: 4px;
  display: grid; place-items: center;
  border-radius: 9px; border: 1px solid transparent;
  background: transparent; color: var(--faint); cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.ap-star svg { display: block; }
.ap-star:hover { color: #E9B173; background: rgba(217,142,63, 0.12); border-color: rgba(217,142,63, 0.35); }
/* Akun utama: bintang TERISI + warna amber */
.ap-star.on {
  color: #E9B173; background: rgba(217,142,63, 0.15); border-color: rgba(217,142,63, 0.45);
}
.ap-star.on svg path { fill: currentColor; }
.ap-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 11px;
  transition: background .15s ease;
}
.ap-item:hover { background: rgba(255, 255, 255, 0.07); }
.ap-item.active { background: var(--grad-soft); border: 1px solid rgba(30,193,203, 0.45); }
.ap-item-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ap-item-name { font-weight: 700; font-size: .9rem; color: #F0EDE7; }
.ap-item-meta { font-size: .7rem; color: var(--faint); font-weight: 600; }
.ap-item.ap-add { border-top: 1px solid var(--line); margin-top: 4px; border-radius: 0 0 10px 10px; padding-top: 10px; }
.ap-item.ap-add .ap-item-name { color: #5FDCE6; }

/* ============================================================
   Dashboard — summary, stats, quality, calendar, compare, slider
   ============================================================ */
.dash-summary {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 24px 26px;
  background: rgba(30, 193, 203, 0.13);
  border: 1px solid rgba(30,193,203, 0.4);
  border-radius: var(--radius);
}
.ds-icon {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px;
  display: grid; place-items: center; font-size: 1.3rem;
  background: var(--grad-soft); border: 1px solid var(--line-strong);
}
.ds-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.ds-text { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.ds-sub {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-strong);
  font-size: .86rem; color: #CAC5BE; font-weight: 600;
}

.dash-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.dash-stat { padding: 18px 20px; }
.dash-stat .ds-label { font-size: .72rem; color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.dash-stat .ds-value { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.dash-stat .ds-sub { font-size: .74rem; color: var(--muted); margin-top: 2px; }

/* Trade quality bars */
.quality-list { display: flex; flex-direction: column; gap: 16px; }
.quality-item .q-top { display: flex; justify-content: space-between; font-size: .86rem; font-weight: 700; margin-bottom: 6px; }
.quality-item .q-top span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.q-bar { height: 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.q-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--grad); transition: width .5s ease; }

/* Calendar */
/* Calendar header + Month-Year picker */
.cal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.cal-picker { display: flex; gap: 8px; align-items: center; }
.cal-cselect .cselect-btn { min-width: 118px; padding: 9px 12px; }
.cal-cselect[data-cs-cal="year"] .cselect-btn { min-width: 86px; }
.cal-cselect .cselect-menu { max-height: 240px; overflow-y: auto; min-width: 150px; }

/* CATATAN: kolom memakai minmax(0,...) supaya nilai panjang di panel kanan
   (mis. "1,500,000.00 USC" pada akun USC/IDR) TIDAK memaksa lebar grid
   melebihi kartunya — `1fr` biasa berarti minmax(auto,1fr) sehingga
   min-content anak bisa melebarkan seluruh halaman (overflow di mobile). */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { font-size: .68rem; font-weight: 800; text-align: center; color: var(--faint); text-transform: uppercase; padding: 4px 0; }
.cal-cell {
  position: relative; aspect-ratio: 1 / 1; border-radius: 9px;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700; color: var(--muted);
  background: rgba(255, 255, 255, 0.03); border: 1px solid transparent;
  transition: all .15s ease;
}
.cal-cell.has { background: rgba(255, 255, 255, 0.06); border-color: var(--line); cursor: pointer; }
.cal-cell.has:hover { border-color: rgba(46,216,226, 0.7); background: rgba(46,216,226, 0.08); }
.cal-cell.today { border-color: rgba(46,216,226, 0.7); box-shadow: 0 0 0 2px rgba(46,216,226, 0.15); color: #fff; }
.cal-cell.selected { border-color: rgba(30,193,203, 0.8); background: var(--grad-soft); color: #fff; }
.cal-dot { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; }
.cal-dot.pos { background: #1EC1CB; }
.cal-dot.neg { background: #D97A55; }
.cal-today {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  font-size: .85rem; color: var(--muted);
}
/* Panel detail kalender */
.cal-right { border-left: 1px solid var(--line); padding-left: 22px; min-height: 180px; }

/* Notes performa bulan berjalan */
.cal-month-notes {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
}
.cmn-title {
  font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #5FDCE6; margin-bottom: 10px;
}
.cmn-stat {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.cmn-stat span {
  font-size: .74rem; color: var(--faint); font-weight: 600;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 999px;
}
.cmn-stat b { font-variant-numeric: tabular-nums; margin-left: 4px; }
.cmn-note {
  padding: 10px 12px; margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  border-radius: 11px;
  font-size: .84rem; color: var(--muted); line-height: 1.6;
}
.cmn-note em {
  display: block; font-style: normal; font-weight: 800; font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 3px;
}
.cal-detail-date { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.cal-detail-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.cal-detail-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cal-detail-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, .9fr);
  gap: 8px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, 0.03); font-size: .8rem;
}
.cal-detail-row .cd-sym { font-weight: 700; }
.cal-detail-row .cd-pnl { text-align: right; font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 0; }
.cal-sugg {
  padding: 12px 14px; border-radius: 12px; font-size: .84rem;
  background: rgba(46,216,226, 0.08); border: 1px solid rgba(46,216,226, 0.3); color: #BCEEF3;
}
.cal-sugg.good { background: rgba(30,193,203, 0.08); border-color: rgba(30,193,203, 0.3); color: #BCEFE9; }
.cal-sugg.bad { background: rgba(224,138,103, 0.08); border-color: rgba(224,138,103, 0.3); color: #F0C9B8; }
.cal-sugg.flat { background: rgba(255, 255, 255, 0.05); border-color: var(--line); color: #D8D3CD; }
.cal-sugg strong { display: block; margin-bottom: 3px; }

/* Pair / compare */
.perf-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, 0.03); margin-bottom: 8px;
}
.perf-tag { font-size: .68rem; font-weight: 800; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; }
.perf-tag.good { background: rgba(30,193,203, 0.14); color: #5FDCE6; border: 1px solid rgba(30,193,203, 0.35); }
.perf-tag.bad { background: rgba(224,138,103, 0.14); color: #E08A67; border: 1px solid rgba(224,138,103, 0.35); }
.perf-name { flex: 1; font-weight: 700; font-size: .92rem; }
.perf-val { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }

.cmp-row {
  display: grid; grid-template-columns: 74px 1fr 1fr; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: .84rem;
}
.cmp-row:last-child { border-bottom: 0; }
.cmp-label { font-weight: 800; color: var(--faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.cmp-best em, .cmp-worst em { font-style: normal; font-size: .68rem; color: var(--faint); margin-right: 5px; }
.cmp-best { color: #D8D3CD; font-weight: 600; }
.cmp-worst { color: #D8D3CD; font-weight: 600; text-align: right; }
.cmp-worst b, .cmp-best b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* Performance per kategori (DAY/SESSION/SETUP) */
.perf-scroll { max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; padding-right: 4px; }
.perf-scroll::-webkit-scrollbar { width: 6px; }
.perf-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 99px; }
.perf-block { margin-bottom: 12px; }
.perf-block:last-child { margin-bottom: 0; }
.perf-block-title {
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #C0BBB4; margin-bottom: 5px;
}
.perf-table { width: 100%; border-collapse: collapse; font-size: .7rem; table-layout: fixed; }
.perf-table th {
  text-align: left; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); font-weight: 800; padding: 4px 6px;
  border-bottom: 1px solid var(--line);
}
.perf-table td { padding: 5px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-weight: 600; color: #D8D3CD; }
.perf-table tr:hover td { background: rgba(255, 255, 255, 0.03); }
.perf-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Kolom Nama 35%, sisanya (65%) dibagi rata 4 kolom — fixed grid rapi */
.perf-table th:first-child, .perf-table td:first-child { width: 35%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perf-table th:not(:first-child), .perf-table td:not(:first-child) { width: 16.25%; }
/* Win & Loss rata tengah konsisten di semua tabel (DAY/SESSION/SETUP) */
.perf-table th:nth-child(2), .perf-table td:nth-child(2),
.perf-table th:nth-child(3), .perf-table td:nth-child(3) { text-align: center; }

/* Recent trades slider — kolom rapi */
.rt-table { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.rt-nav { display: flex; align-items: center; gap: 10px; }
.rt-head, .rt-row {
  display: grid; grid-template-columns: 1.2fr .8fr .9fr .7fr 1.1fr .9fr;
  gap: 10px; align-items: center;
}
.rt-head {
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--line);
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint);
}
.rt-slide { display: none; }
.rt-slide.active { display: block; animation: fadeUp .25s ease both; }
.rt-row {
  padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.015);
}
.rt-row:last-child { border-bottom: 0; }
.rt-row:hover { background: rgba(255, 255, 255, 0.05); }
.rt-sym { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: #F0EDE7; transition: color .15s ease; }
.rt-sym:hover { color: #5FDCE6; }
.rt-date { font-size: .78rem; color: var(--faint); }
.rt-row .badge { justify-self: left; }
.rt-setup { display: flex; align-items: center; }
.rt-setup .badge { justify-self: start; }
.rt-pnl { font-family: var(--font-display); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.rt-head .num, .rt-pnl { text-align: right; }

@media (max-width: 1180px) {
  .dash-stats { grid-template-columns: repeat(3, 1fr); }
  .tlog-advanced { grid-template-columns: repeat(2, 1fr); }
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
  .cal-right { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
}
@media (max-width: 860px) {
  .tlog-grid { grid-template-columns: 1fr; }
  .tlog-card { max-width: 480px; margin-inline: auto; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .cmp-row { grid-template-columns: 60px 1fr; }
  .cmp-worst { text-align: left; grid-column: 2; }
  .tlog-advanced { grid-template-columns: repeat(2, 1fr); }
  .rt-head, .rt-row { grid-template-columns: 1.2fr .8fr .9fr 1.1fr .9fr; }
  .rt-head span:nth-child(4), .rt-row .rt-setup { display: none; }
  /* baris filter kanan (sort + Advanced + reset) bisa wrap agar tidak
     menyebabkan halaman scroll horizontal di layar sempit */
  .tfl-left, .tfl-right { flex: 1 1 100%; flex-wrap: wrap; }
  .tfl-left .cselect { flex: 1 1 100%; }
  .tlog-search { max-width: none; }
  /* Baris detail kalender di layar sempit: nilai P/L panjang (mis.
     "1,500,000.00 USC" pada akun USC/IDR) diberi barisnya SENDIRI supaya
     angkanya tidak terpotong / menumpuk kolom di sebelahnya. */
  .cal-detail-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cal-detail-row .cd-pnl { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .dash-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dash-stat { padding: 14px 16px; }
  .dash-stat .ds-value { font-size: 1.15rem; }
  .dash-summary { flex-direction: column; }
  .tlog-advanced { grid-template-columns: 1fr; }
}

/* Saat capture (html-to-image) / preview: sembunyikan tombol & tampilkan detail */
.tlog-card.capturing .tlog-actions,
.tlog-card.capturing .tlog-ov-tr,
.tlog-card.capturing .tlog-cancel-btn,
.tlog-card.capturing .tlog-run-btn { display: none !important; }
.tlog-card.capturing .tlog-detail { display: block !important; }

/* ============================================================
   Capture mode — hanya aktif saat card di-copy sebagai gambar
   (html2canvas tidak merender flex/gap dengan baik, jadi layout
   sementara diubah ke inline-block agar badge/pill sejajar)
   ============================================================ */
.capture-card .tlog-head,
.capture-card .tlog-ov-tl,
.capture-card .tlog-tags,
.capture-card .tlog-notes,
.capture-card .tlog-prices { display: block; }

.capture-card .tlog-head > div { display: inline-block; vertical-align: top; }
.capture-card .tlog-pnl { float: right; }

.capture-card .tlog-ov-tl .badge,
.capture-card .tlog-tags .pill {
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1.35 !important;
  white-space: nowrap;
  margin: 0 6px 6px 0;
}
.capture-card .pico {
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  margin-right: 5px;
}
.capture-card .tlog-prices > div {
  display: inline-block;
  width: 30%;
  margin-right: 1.5%;
  vertical-align: top;
}
.capture-card .tlog-prices > div:last-child { margin-right: 0; }
.capture-card .tlog-notes { max-height: none; overflow: visible; }

.journal-progress {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 16px;
  font-size: .8rem;
}
.journal-progress-txt { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.journal-status { font-weight: 600; color: var(--faint); }
.journal-status.green { color: var(--green); }

.journal-actions { display: flex; gap: 10px; }

@media (max-width: 480px) {
  .journal-head { flex-direction: column; align-items: stretch; }
  .journal-head .btn { align-self: flex-end; }
}

/* ============================================================
   Select & number inputs — native UI disamakan dengan tema gelap
   (color-scheme:dark membuat popup dropdown & spinner mengikuti
   warna gelap di Chromium; option & arrows di-style manual)
   ============================================================ */
select.input {
  color-scheme: dark;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background-color: #232128;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A84A2F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 8px;
  padding-right: 38px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
select.input:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background-color: rgba(255, 255, 255, 0.07);
}
select.input:focus {
  border-color: rgba(46,216,226, 0.6);
  box-shadow: 0 0 0 3px rgba(46,216,226, 0.13);
}
/* Popup daftar opsi — gelap sesuai tema */
select.input option {
  background: #212028;
  color: #E9E5DF;
  font-weight: 500;
}
select.input option:hover {
  background: rgba(30,193,203, 0.28);
  color: #fff;
}
select.input option:checked,
select.input option:active {
  background: rgba(30,193,203, 0.38);
  color: #fff;
}
select.input option[value=""] {
  color: var(--faint);
}

/* Number input — spin arrows bertema (cyan naik, violet turun) */
input[type="number"] {
  color-scheme: dark;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
}
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='22' viewBox='0 0 12 22'%3E%3Cpath d='M6 1.5L9.5 6h-7z' fill='%231EC1CB'/%3E%3Cpath d='M6 20.5L2.5 16h7z' fill='%23C25B37'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 20px;
  opacity: 0.65;
  cursor: pointer;
  transition: opacity .15s ease, background-color .15s ease;
}
input[type="number"]::-webkit-inner-spin-button:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 0 10px 10px 0;
}
input[type="number"]:hover::-webkit-inner-spin-button {
  opacity: 0.9;
}

/* ============================================================
   Academy Learning — daftar materi, overview, reader 2 kolom
   (v2: lega, proporsional, hierarki bersih, video full-size)
   ============================================================ */
/* ---- Utility umum ---- */
.page-title { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; line-height: 1.2; }
.page-sub { color: var(--muted); font-size: 14px; max-width: 64ch; margin-top: 8px; line-height: 1.6; }
.card-title { font-weight: 800; margin-bottom: 14px; }
/* Kepala kartu: judul kiri, tombol aksi kanan (dipakai Trading Checklist) */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.card-head .card-title { margin-bottom: 0; }
.card-head .card-title small { display: block; font-size: .68rem; font-weight: 600; color: var(--faint); letter-spacing: .04em; margin-top: 2px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; }
.badge.gray { background: rgba(255,255,255,.07); color: #CCC7C0; border-color: var(--line-strong); }

/* ---- Header halaman ---- */
.learning-head { padding: 10px 0 6px; }
.learning-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .84rem; font-weight: 600; color: var(--faint);
  transition: color .15s ease;
}
.learning-back:hover { color: #5FDCE6; }

/* ---- Grid daftar materi ---- */
/* 3 KOLOM (permintaan user) — sebelumnya `auto-fill minmax(310px,1fr)` yang
   jumlah kolomnya berubah mengikuti lebar. Media query WAJIB di bawah aturan
   dasar ini supaya tidak tertimpa. */
.learning-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1180px) { .learning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .learning-grid { grid-template-columns: 1fr; } }

/* ---- Katalog E-book (4 kolom per baris) ---- */
.ebook-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Responsif katalog e-book — WAJIB SETELAH aturan dasar di atas. Kalau
   diletakkan sebelum (seperti sebelumnya), aturan dasar 4-kolom yang muncul
   belakangan menang di SEMUA lebar layar dan kartu jadi ±77px di mobile. */
@media (max-width: 1180px) { .ebook-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1020px) { .ebook-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .ebook-grid { grid-template-columns: 1fr; } }
/* Badge kategori: lebar menyesuaikan teks (jangan stretch penuh) */
.ebook-body .badge { align-self: flex-start; width: fit-content; }
.ebook-card {
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ebook-card:hover {
  transform: translateY(-4px);
  border-color: rgba(30,193,203, 0.5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.ebook-cover {
  aspect-ratio: 3 / 4;
  background: #17161D;
  overflow: hidden;
}
.ebook-cover img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.ebook-cover-empty {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 3rem;
  background: var(--grad-soft);
  color: #CCC7C0;
}
.ebook-body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 22px 20px;
  flex: 1;
}
.ebook-title { font-size: 1.08rem; line-height: 1.35; }
.ebook-author { font-size: .78rem; color: var(--faint); font-weight: 600; }
.ebook-desc {
  color: var(--muted); font-size: .86rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Tombol Download: SATU baris penuh (lebar 100%) supaya ikon unduh tidak
   turun ke baris kedua di kartu yang sempit (permintaan user). */
.ebook-dl {
  margin-top: auto; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  white-space: nowrap;
  padding: 10px 14px; border-radius: 12px;
  font-size: .84rem; font-weight: 700;
  color: #5FDCE6;
  background: rgba(46,216,226, 0.10);
  border: 1px solid rgba(46,216,226, 0.32);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.ebook-dl svg { flex: 0 0 auto; }
.ebook-card:hover .ebook-dl {
  color: #86E7EE; background: rgba(46,216,226, 0.17);
  border-color: rgba(46,216,226, 0.5);
}
.learning-card {
  display: flex; flex-direction: column; gap: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 28px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.learning-card:hover {
  transform: translateY(-3px);
  border-color: rgba(30,193,203, 0.5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.lc-top { display: flex; gap: 8px; flex-wrap: wrap; }
.lc-title { font-size: 1.14rem; line-height: 1.35; margin-top: 2px; }
.lc-summary {
  color: var(--muted); font-size: .9rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.lc-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-top: 6px; }
.lc-progress { flex: 1; min-width: 0; }
.lc-bar { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.lc-fill { height: 100%; border-radius: 99px; background: var(--grad); }
.lc-pct { display: block; font-size: .74rem; color: var(--faint); margin-top: 7px; font-variant-numeric: tabular-nums; }
.lc-cta { font-size: .86rem; font-weight: 700; color: #5FDCE6; white-space: nowrap; }

/* ---- Overview materi: progress + TOC ---- */
.learning-progress {
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 24px;
}
.lp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .86rem; font-weight: 700; color: var(--muted); margin-bottom: 12px; }
.lp-pct { color: #5FDCE6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.lp-fill { height: 100%; border-radius: 99px; background: var(--grad); transition: width .4s ease; }

.learning-toc-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 32px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45);
}
.ltoc-module { padding: 18px 0; }
.ltoc-module + .ltoc-module { border-top: 1px solid var(--line); }
.ltoc-mod-head { display: flex; gap: 16px; align-items: flex-start; }
.ltoc-mod-num {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid rgba(30,193,203, 0.4);
  color: #5FDCE6; font-weight: 800; font-size: .86rem;
}
.ltoc-mod-title { font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.ltoc-mod-desc { font-size: .84rem; color: var(--faint); margin-top: 3px; line-height: 1.5; }
.ltoc-section { padding: 14px 0 4px 54px; }
.ltoc-sec-title {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 10px;
}
.ltoc-lessons { display: flex; flex-direction: column; gap: 7px; }
.ltoc-lesson {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 15px; border-radius: 12px;
  border: 1px solid transparent;
  font-size: .9rem; font-weight: 600; color: var(--muted);
  transition: all .15s ease;
}
.ltoc-lesson:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.ltoc-lesson.done { color: #5FDCE6; }
.ltoc-lesson.current { background: var(--grad-soft); border-color: rgba(30,193,203, 0.5); color: #fff; }
.ltoc-lesson.locked { color: var(--faint); cursor: not-allowed; opacity: .85; }
.ltoc-lesson.locked:hover { background: transparent; color: var(--faint); }
.ll-ico { width: 20px; text-align: center; flex: 0 0 auto; }
.ll-title { flex: 1; min-width: 0; }
.ltoc-lesson .badge { flex: 0 0 auto; }

/* ---- Video YouTube (full-size, berlaku di mana pun) ---- */
.youtube-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden; margin: 22px 0;
  border: 1px solid var(--line-strong);
  background: #0F0E14;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.youtube-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Reader: layout 2 kolom 72/28 ---- */
.lesson-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(280px, 1fr);
  gap: 32px;
  align-items: start;
  margin-top: 10px;
}
.lesson-main { min-width: 0; padding-top: 6px; }
.lesson-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 20px; }
.lesson-crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .76rem; font-weight: 700; letter-spacing: .04em;
  color: var(--faint); text-transform: uppercase;
}
.lesson-crumbs .crumb-sep { color: var(--line-strong); }
.lesson-crumbs .crumb-cur { color: #5FDCE6; }
.lesson-title { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-top: 12px; letter-spacing: -0.02em; line-height: 1.25; }
.lesson-summary { color: var(--muted); font-size: 1rem; margin-top: 10px; line-height: 1.65; max-width: 72ch; }

.lesson-body {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px 38px;
  font-size: 1rem; line-height: 1.8; color: var(--ink);
}
.lesson-body h2 { font-size: 1.4rem; margin: 26px 0 10px; }
.lesson-body h3 { font-size: 1.14rem; margin: 20px 0 8px; }
.lesson-body p { margin: 12px 0; }
.lesson-body ul, .lesson-body ol { padding-left: 26px; margin: 12px 0; }
.lesson-body li { margin: 5px 0; }
.lesson-body blockquote {
  border-left: 3px solid var(--indigo); padding: 12px 20px;
  color: var(--muted); margin: 16px 0;
  background: rgba(255, 255, 255, 0.04); border-radius: 0 12px 12px 0;
}
.lesson-body a { color: #5FDCE6; text-decoration: underline; }
.lesson-body img { max-width: 100%; border-radius: 14px; margin: 14px 0; }
.lesson-body code { background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 6px; font-size: .9em; }

/* ---- Insights sidebar ---- */
.lesson-insights { padding: 24px 26px; }
.lesson-insights .insight-block { padding: 12px 0; border-bottom: 1px solid var(--line); }
.lesson-insights .insight-block:last-child { border-bottom: none; padding-bottom: 2px; }
.insight-title {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #5FDCE6; margin-bottom: 6px;
}
.lesson-insights p { color: var(--muted); font-size: .87rem; line-height: 1.65; margin: 0; }

/* ---- TOC sidebar ---- */
.lesson-toc { padding: 24px 26px; }
.lesson-toc .toc-module { padding: 8px 0; }
.lesson-toc .toc-module + .toc-module { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px; }
.toc-mod-title { font-size: .82rem; font-weight: 700; margin-bottom: 6px; color: var(--ink); line-height: 1.35; }
.toc-sec-title {
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin: 10px 0 5px;
}
.toc-lesson {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 9px;
  font-size: .8rem; font-weight: 500; color: var(--muted);
  transition: all .13s ease;
}
.toc-lesson:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.toc-lesson.current { background: var(--grad-soft); color: #fff; }
.toc-lesson.locked { color: var(--faint); cursor: not-allowed; opacity: .8; }
.toc-lesson.locked:hover { background: transparent; }
.toc-ico { width: 15px; text-align: center; flex: 0 0 auto; font-size: .72rem; }
.toc-ltitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Nav sebelumnya / berikutnya ---- */
.lesson-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.ln-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  transition: all .15s ease;
}
.ln-item:hover { border-color: rgba(30,193,203, 0.5); background: rgba(255, 255, 255, 0.06); }
.ln-item.right { text-align: right; }
.ln-label { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ln-title { font-weight: 700; font-size: .92rem; color: var(--ink); }

/* Tombol Lanjut — lebar menyesuaikan teks, sejajar kanan (bukan setengah grid) */
.lesson-nav .ln-continue {
  grid-column: 2;
  justify-self: end;
  width: auto;
  min-width: 0;
  white-space: nowrap;
}

/* Hint tombol lanjut — di luar button, kecil, merah; hijau saat lengkap */
.lesson-continue-hint {
  margin-top: 12px; text-align: right;
  font-size: .78rem; font-weight: 600;
  color: var(--red-soft);
  line-height: 1.5;
}
.lesson-continue-hint.ok {
  color: var(--green);
}

/* ---- Quiz ---- */
.quiz-panel {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 30px;
}
.quiz-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.quiz-panel-head h3 { font-size: 1.15rem; }
.quiz-intro { color: var(--muted); font-size: .88rem; margin-bottom: 18px; }
.q-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.q-text { font-weight: 600; font-size: .95rem; margin-bottom: 12px; }
.q-num { color: #5FDCE6; font-weight: 800; }
.q-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px;
  border-radius: 10px; border: 1px solid transparent;
  font-size: .9rem; color: var(--muted); cursor: pointer;
  transition: all .14s ease;
}
.q-opt:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.q-opt input[type=radio] { accent-color: #1EC1CB; width: 16px; height: 16px; flex: 0 0 auto; }
.q-opt:has(input[type=radio]:checked) {
  background: var(--grad-soft); border-color: rgba(30,193,203, 0.55); color: #fff;
}
.quiz-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.quiz-msg {
  margin-top: 16px; padding: 14px 18px; border-radius: 13px;
  font-size: .9rem; font-weight: 600; line-height: 1.55;
  border: 1px solid var(--line);
}
.quiz-msg.ok   { border-color: rgba(30,193,203, .4);  background: rgba(30,193,203, 0.1);  color: #5FDCE6; }
.quiz-msg.bad  { border-color: rgba(217,142,63, .4);  background: rgba(217,142,63, 0.1);  color: #E9B173; }
.quiz-msg.error{ border-color: rgba(224,138,103, .4); background: rgba(224,138,103, 0.1); color: #E08A67; }
.quiz-msg.warn { border-color: rgba(217,142,63, .4);  background: rgba(217,142,63, 0.1);  color: #E9B173; }
.quiz-result.passed {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border: 1px solid rgba(30,193,203, .4);
  background: rgba(30,193,203, 0.09);
  border-radius: 14px; padding: 14px 18px;
  margin-bottom: 16px; font-size: .92rem; color: var(--ink);
}
.quiz-result .qr-ico { font-size: 1.1rem; margin-right: 6px; }
.quiz-result .qr-actions { margin: 0; }


/* Responsive learning & lesson */
@media (max-width: 1180px) {
  .lesson-layout { grid-template-columns: 1fr; gap: 24px; }
  .lesson-side { position: static; }
  .lesson-side .card { margin-top: 0; }
  .lesson-side .lesson-toc { margin-top: 0; }
}
@media (max-width: 560px) {
  .lesson-body { padding: 22px 18px; }
  .quiz-panel { padding: 20px 16px; }
  .learning-toc-card { padding: 18px 16px; }
  .ltoc-section { padding-left: 10px; }
  .lesson-nav { grid-template-columns: 1fr; }
  .learning-card { padding: 20px 20px; }
}

/* ---- Thumbnail materi (1920x1080, rasio 16:9) ---- */
.lc-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--grad-soft);
  margin: -2px 0 2px;
}
.lc-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lc-thumb-empty {
  display: grid; place-items: center;
  color: var(--faint);
}
.learning-hero {
  aspect-ratio: 16 / 5;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--grad-soft);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);
}
.learning-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 560px) {
  .learning-hero { aspect-ratio: 16 / 9; }
}

/* ============================================================
   Sidebar collapse (expand/collapse) — desktop
   ============================================================ */
.side-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 4px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.side-head .brand { gap: 9px; min-width: 0; }
.side-head .brand .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
.side-head .brand-name { font-size: .98rem; white-space: nowrap; }
.side-head .brand-badge {
  font-size: .56rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #5FDCE6;
  border: 1px solid rgba(46,216,226, .35);
  background: rgba(46,216,226, .1);
  padding: 2px 7px; border-radius: 999px;
  white-space: nowrap;
}

.side-collapse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--muted);
  transition: all .18s ease;
}
.side-collapse:hover { color: var(--ink); border-color: rgba(30,193,203, 0.5); background: rgba(255, 255, 255, 0.09); }
.side-collapse .ic-col { display: none; }

/* Transisi halus lebar kolom sidebar ↔ konten tengah */
.dash-layout {
  transition: grid-template-columns .3s cubic-bezier(.4, 0, .2, 1);
}
/* Selama boot (status collapse diterapkan sebelum paint) semua transisi
   layout dimatikan supaya tidak terlihat beranimasi dari terbuka → tertutup. */
.dash-layout[data-side-boot],
.dash-layout[data-side-boot] .dash-side { transition: none !important; }

/* Mode collapse — hanya berlaku desktop (>=1081px); mobile tetap full di off-canvas */
@media (min-width: 1081px) {
  .dash-layout.side-collapsed { grid-template-columns: 74px minmax(0, 1fr); }

  .dash-layout.side-collapsed .side-head { justify-content: center; border-bottom-color: transparent; padding-bottom: 8px; }
  .dash-layout.side-collapsed .side-head .brand { display: none; }

  .dash-layout.side-collapsed .side-collapse .ic-exp { display: none; }
  .dash-layout.side-collapsed .side-collapse .ic-col { display: block; }

  .dash-layout.side-collapsed .side-item { justify-content: center; padding: 10px 4px; }
  .dash-layout.side-collapsed .side-item .side-ico { margin: 0; }
  /* Label teks disembunyikan, TAPI titik hijau "ada konten baru" tetap tampil
     sebagai badge kecil di sudut kanan-atas ikon — kalau tidak, status konten
     baru hilang sama sekali saat sidebar diciutkan. */
  .dash-layout.side-collapsed .side-item span:not(.side-ico):not(.side-new) { display: none; }
  .dash-layout.side-collapsed .side-item .side-new {
    display: block; position: absolute; margin: 0;
    top: 7px; left: calc(50% + 5px);
    width: 7px; height: 7px;
    box-shadow: 0 0 0 2px rgba(20,19,25, 0.9);
  }
  /* kunci paket sinyal juga disembunyikan saat ciut (sudah ada aturannya) */

  .dash-layout.side-collapsed .side-group-label {
    height: 1px; padding: 0; margin: 10px 14px 6px;
    overflow: hidden; text-indent: -999px;
    background: var(--line); border-radius: 99px;
  }
  .dash-layout.side-collapsed .side-group { padding: 2px 0 8px; }
}

/* Tooltip saat collapsed (dibuat JS, fixed di body → selalu top layer) */
.side-tip {
  position: fixed; z-index: 9999;
  padding: 6px 12px; border-radius: 9px;
  background: rgba(35,33,42, 0.96);
  border: 1px solid var(--line-strong);
  color: var(--ink); font-size: .78rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity .15s ease, transform .15s ease;
}
.side-tip.show { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 1080px) {
  .side-collapse { display: none; }
}

/* ---- Deposit / Withdraw akun (dashboard) ---- */
/* ---- Modal akun (Pengaturan) ---- */
.acc-modal-opt {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--faint);
}
.acc-modal-err {
  margin: 4px 0 0; font-size: .82rem; font-weight: 600; color: #E08A67;
  padding: 9px 12px; border-radius: 10px;
  background: rgba(224,138,103, 0.1); border: 1px solid rgba(224,138,103, 0.3);
}
.acc-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
/* keterangan mata uang di modal akun (USD / USC / IDR) */
.acc-modal-hint {
  margin: -4px 0 4px; font-size: .74rem; line-height: 1.6; color: var(--faint);
}
.acc-modal-hint b { color: #D8D3CD; }

.acc-tx-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Kartu "Pilih Akun" (dashboard) — berisi picker + riwayat di dalamnya ---- */
.acc-head-card {
  padding: 14px 18px 6px; margin-bottom: 16px;
  position: relative; z-index: 40;           /* dropdown picker jangan tertutup konten bawah */
}
.acc-head-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.acc-head-label { font-weight: 700; font-size: .9rem; }
.acc-head-row .acc-picker { flex: 1; min-width: 280px; }

/* Riwayat Deposit/Withdraw — DI DALAM kartu Pilih Akun (mendapat latar kartu),
   tetap daftar baris polos (tanpa kotak per baris) supaya compact. */
.acc-tx-hist {
  flex: 1 1 100%; margin: 14px -18px 0; padding: 12px 18px 4px;
  border-top: 1px solid var(--line);
}
.acc-tx-hist-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.acc-tx-hist-title {
  font-size: .72rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: #D2CDC6;
}
.acc-tx-hist-count { font-size: .72rem; font-weight: 700; color: var(--faint); }
.acc-tx-empty { font-size: .82rem; color: var(--muted); margin: 2px 0 6px; }
.acc-tx-list { display: flex; flex-direction: column; }
.acc-tx-item {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.acc-tx-item:last-child { border-bottom: 0; }
/* Ikon Deposit/Withdraw di riwayat DIHAPUS — cukup teks berwarna */
.acc-tx-kind { font-size: .74rem; font-weight: 800; letter-spacing: .02em; min-width: 66px; white-space: nowrap; }
.acc-tx-kind.dep { color: #5FDCE6; }
.acc-tx-kind.wd  { color: #E9B173; }
.acc-tx-amt { font-family: var(--font-display); font-weight: 800; font-size: .92rem; font-variant-numeric: tabular-nums; min-width: 92px; }
.acc-tx-amt.up { color: #5FDCE6; }
.acc-tx-amt.down { color: #E08A67; }
.acc-tx-date { font-size: .76rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.acc-tx-note-txt { font-size: .78rem; color: var(--muted); }
.acc-tx-item .mini-txt { margin-left: auto; }
.acc-tx-opt {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--faint);
}
.acc-tx-err {
  margin: 4px 0 0; font-size: .82rem; font-weight: 600; color: #E08A67;
  padding: 9px 12px; border-radius: 10px;
  background: rgba(224,138,103, 0.1); border: 1px solid rgba(224,138,103, 0.3);
}
.acc-tx-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
@media (max-width: 860px) {
  .acc-tx-item { align-items: flex-start; }
  .acc-tx-item .mini-txt { margin-left: 0; }
}

/* Pengaturan — responsif grid (pair 4 kolom, model 3 kolom) */
@media (max-width: 1180px) {
  .pair-groups { grid-template-columns: repeat(3, 1fr); }
  .model-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1020px) {
  .pair-groups { grid-template-columns: repeat(2, 1fr); }
  .acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-grid-1 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .pair-groups { grid-template-columns: 1fr; }
  .model-list { grid-template-columns: 1fr; }
  .acc-grid { grid-template-columns: 1fr; }
}

/* Lesson body — tabel */
.lesson-body table {
  width: 100%; border-collapse: collapse; margin: 16px 0;
  font-size: .92rem;
}
.lesson-body table th,
.lesson-body table td {
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 9px 13px;
  vertical-align: top;
}
.lesson-body table th {
  background: rgba(30,193,203, 0.16);
  color: var(--ink); font-weight: 700; text-align: left;
}
.lesson-body table td { color: var(--muted); }
.lesson-body table tr:hover td { background: rgba(255, 255, 255, 0.03); }

/* ---- Refleksi Diri (checklist) ---- */
.lesson-reflect {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px 28px;
}
.reflect-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.reflect-head h3 { font-size: 1.08rem; }
.reflect-item-judul {
  font-weight: 700; font-size: .95rem; color: var(--ink);
  margin: 16px 0 8px;
}
.reflect-chk {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 13px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all .16s ease;
}
.reflect-chk:hover { border-color: rgba(30,193,203, 0.45); background: rgba(255, 255, 255, 0.05); }
.reflect-chk.done {
  border-color: rgba(30,193,203, 0.45);
  background: rgba(30,193,203, 0.08);
}
.reflect-box {
  flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px;
  accent-color: #1EC1CB; cursor: pointer;
}
.reflect-chk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.reflect-chk-line { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.reflect-chk.done .reflect-chk-line { color: var(--ink); }
.reflect-q {
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #5FDCE6;
}
.reflect-tick {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .82rem; font-weight: 800;
  color: transparent; background: transparent;
  border: 1px solid var(--line-strong);
  transition: all .16s ease;
}
.reflect-chk.done .reflect-tick {
  color: #14262A; background: var(--grad); border-color: transparent;
}
.reflect-status-line {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: .82rem; font-weight: 600; color: var(--faint);
}
.reflect-status-line.ok { color: #5FDCE6; }

/* Kotak status refleksi selesai (bab sudah dikerjakan — mode baca) */
.reflect-done-note {
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid rgba(30,193,203, 0.35);
  background: rgba(30,193,203, 0.07);
  border-radius: 12px;
  color: #5FDCE6; font-size: .85rem; font-weight: 600;
}
/* Checkbox refleksi disabled (mode baca) — tetap tampil jelas checked */
.reflect-chk input[disabled] + .reflect-tick { opacity: 1; }
.reflect-chk input[disabled] { cursor: default; }
@media (max-width: 560px) {
  .lesson-reflect { padding: 18px 16px; }
}


/* ---- Review hasil quiz (saat lulus) ---- */
.quiz-review { display: flex; flex-direction: column; gap: 14px; }
.qr-item {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px 16px;
}
.qr-q { font-weight: 600; font-size: .92rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qr-badge {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  padding: 2px 9px; border-radius: 999px;
}
.qr-item.right .qr-badge { color: #5FDCE6; background: rgba(30,193,203,.13); }
.qr-item.wrong .qr-badge { color: #E08A67; background: rgba(224,138,103,.13); }
.qr-opt {
  font-size: .86rem; color: var(--muted);
  padding: 6px 11px; border-radius: 9px; margin-bottom: 5px;
}
.qr-opt.correct {
  color: #5FDCE6; background: rgba(30,193,203,.1);
  border: 1px solid rgba(30,193,203,.35);
}
.qr-opt.wrong {
  color: #E08A67; background: rgba(224,138,103,.08);
  border: 1px solid rgba(224,138,103,.3);
  text-decoration: line-through;
}

/* ---- Modal (quiz belum lulus) — reuse gaya CMS ---- */
.cms-modal-bg {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(16,15,20, 0.6);
  backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.cms-modal-bg.open { display: flex; }
.cms-modal {
  width: min(440px, 100%);
  background: rgba(35,33,42, 0.97);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 26px 26px 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: fadeUp .18s ease both;
}
.cms-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* ---- Tombol Lanjut (lesson-nav) ---- */
.ln-continue {
  cursor: pointer;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  font-family: inherit; text-align: left;
}
.ln-continue:not(.is-disabled):hover {
  border-color: rgba(30,193,203, 0.55);
  background: rgba(30,193,203, 0.1);
}
.ln-continue:not(.is-disabled) .ln-label { color: #5FDCE6; }
.ln-continue.is-disabled {
  opacity: .55; cursor: not-allowed;
  background: rgba(255, 255, 255, 0.02);
}
.ln-continue.is-disabled .ln-label { color: var(--faint); }
.ln-continue.is-disabled .ln-title { color: var(--faint); font-weight: 500; }

/* ---- Carousel / slider gambar lesson ---- */
.lesson-carousel {
  position: relative;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
}
.lcar-viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.lcar-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease;
  margin: 0;
}
.lcar-slide.active { opacity: 1; visibility: visible; }
.lcar-slide img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.lcar-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(27,26,35, 0.75);
  color: #fff; font-size: 1rem;
  display: grid; place-items: center;
  cursor: pointer; z-index: 5;
  backdrop-filter: blur(6px);
  transition: all .15s ease;
}
.lcar-nav:hover { background: rgba(30,193,203, 0.85); }
.lcar-prev { left: 14px; }
.lcar-next { right: 14px; }
.lcar-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 12px;
}
.lcar-dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: none; padding: 0;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all .18s ease;
}
.lcar-dot.active { background: var(--grad); width: 22px; border-radius: 99px; }
.lcar-counter {
  position: absolute; top: 26px; right: 26px; z-index: 5;
  font-size: .72rem; font-weight: 800; color: var(--ink);
  background: rgba(27,26,35, 0.7);
  border: 1px solid var(--line-strong);
  padding: 3px 10px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
@media (max-width: 560px) {
  .lesson-carousel { padding: 10px; }
  .lcar-nav { width: 34px; height: 34px; }
}

/* ---- Learning Path: proteksi konten (klik kanan / simpan gambar) ---- */
body.learning-protected {
  -webkit-touch-callout: none; /* iOS: tahan lama pada gambar tidak menawarkan Save */
}
body.learning-protected .lesson-body img,
body.learning-protected .lesson-carousel img,
body.learning-protected .learning-hero img,
body.learning-protected .lc-thumb img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto;
}
body.learning-protected img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* ============================================================
   Coming Soon (menu yang belum ada kontennya)
   ============================================================ */
.cs-wrap { display: flex; justify-content: center; padding: 30px 0 60px; }
.cs-card {
  width: min(680px, 100%);
  text-align: center;
  padding: 52px 40px 44px;
  display: flex; flex-direction: column; align-items: center;
}
.cs-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #E9B173;
  background: rgba(217,142,63, 0.12);
  border: 1px solid rgba(217,142,63, 0.35);
  padding: 6px 15px; border-radius: 999px;
  margin-bottom: 22px;
}
.cs-ico {
  width: 74px; height: 74px; border-radius: 22px;
  display: grid; place-items: center;
  background: var(--grad-soft);
  border: 1px solid var(--line-strong);
  color: #5FDCE6;
  margin-bottom: 20px;
  box-shadow: 0 12px 34px rgba(30,193,203, 0.24);
}
.cs-title { font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.02em; }
.cs-group {
  margin-top: 8px;
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
}
.cs-desc { color: var(--muted); font-size: .96rem; line-height: 1.7; margin: 14px auto 0; max-width: 52ch; }
.cs-feats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px;
  margin: 26px 0 0; text-align: left; width: 100%; max-width: 520px;
}
.cs-feat {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .87rem; color: #D8D3CD;
  padding: 10px 13px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line); border-radius: 11px;
}
.cs-check { color: #5FDCE6; font-weight: 800; flex: 0 0 auto; line-height: 1.5; }
.cs-note { margin-top: 24px; font-size: .83rem; color: var(--faint); }
.cs-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }

@media (max-width: 560px) {
  .cs-card { padding: 38px 22px 34px; }
  .cs-feats { grid-template-columns: 1fr; }
}

/* ============================================================
   Halaman auth (login/register) — header & footer minimal
   ============================================================ */
.auth-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 72px;
}
.auth-nav .btn { display: inline-flex; align-items: center; gap: 8px; }
.auth-header { border-bottom: 1px solid var(--line); }
.auth-footer { margin-top: 40px; padding: 26px 0; text-align: center; }
.auth-footer-text { color: var(--faint); font-size: .82rem; }

@media (max-width: 560px) {
  .auth-nav { height: 64px; }
  .auth-nav .brand-name { font-size: 1.1rem; }
  .auth-nav .btn { padding: 8px 12px; font-size: .8rem; }
}

/* ============================================================
   Gating paket — menu terkunci di sidebar + halaman terkunci
   ============================================================ */
.side-item.locked { color: var(--faint); }
.side-item.locked .side-ico { color: var(--faint); opacity: .8; }
.side-item.locked:hover { background: rgba(255, 255, 255, 0.05); color: var(--muted); }
.side-item.locked:hover .side-ico { color: var(--muted); }
.side-lock {
  flex: 0 0 auto; margin-left: auto; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 7px;
  background: rgba(217,142,63, 0.12); color: var(--amber);
  border: 1px solid rgba(217,142,63, 0.28);
}
.dash-layout.side-collapsed .side-item.locked .side-lock { display: none; }

/* ============================================================
   Titik hijau "ada konten baru" di menu sidebar
   ------------------------------------------------------------
   Visual & animasi SAMA dengan .mi-dot di Market Intelligent supaya
   maknanya konsisten ("ada yang belum dibaca").
   Berlaku untuk: Trading Idea · Market Outlook · Learning Path ·
   E-book · Market Intelligent.
   ============================================================ */
.side-new {
  flex: 0 0 auto; margin-left: auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(30,193,203, 0.22);
  animation: miDotPulse 2.2s ease-in-out infinite;
}
/* saat sidebar diciutkan label hilang — titik tetap tampil di kanan ikon */
.dash-layout.side-collapsed .side-item .side-new { margin-left: auto; }
/* drawer mobile selalu lebar → perilaku normal */

/* Kartu "butuh paket" (halaman yang terkunci) */
.lock-card { border-color: rgba(217,142,63, 0.28); }
.lock-card .cs-badge { background: rgba(217,142,63, 0.12); color: var(--amber); border-color: rgba(217,142,63, 0.3); }
.lock-card .cs-ico { color: var(--amber); background: rgba(217,142,63, 0.1); }
.lock-price { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: #F0EDE7; margin-top: 6px; }
.lock-price b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lock-feats { margin-top: 22px; width: 100%; text-align: left; display: grid; gap: 10px; }
.lock-feat { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: #DFDBD5; }

/* ============================================================
   Status langganan (dashboard/subscription.php)
   ============================================================ */
.sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.sub-current { display: flex; flex-direction: column; padding: 26px 26px 24px; }
.sub-plan-name { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; margin-top: 10px; }
.sub-plan-price {
  font-size: .95rem; color: var(--muted); font-weight: 600; margin-top: 2px;
}
.sub-plan-price span { color: var(--faint); font-weight: 500; }
.sub-rows { display: flex; flex-direction: column; margin-top: 20px; }
.sub-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.08); font-size: .89rem;
}
.sub-row:last-child { border-bottom: 0; }
.sub-row span { color: var(--muted); }
.sub-row b { color: #F0EDE7; font-variant-numeric: tabular-nums; }
.sub-plans { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.sub-plan-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}
.sub-plan-item.active { border-color: rgba(30,193,203, 0.4); background: rgba(30,193,203, 0.07); }
.sub-plan-note { font-size: .8rem; color: var(--faint); font-weight: 600; margin-top: 2px; }
.dash-notice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 17px; border-radius: 14px;
  font-size: 14px; line-height: 1.65;
  background: rgba(217,142,63, 0.1); border: 1px solid rgba(217,142,63, 0.3); color: #F0D0A0;
}

.dash-notice code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem;
  background: rgba(0, 0, 0, 0.3); padding: 2px 6px; border-radius: 7px;
}
/* ---- Riwayat pembayaran = DAFTAR PADAT (pola sama dengan CMS → Users) ----
   Header keterangan kolom + tabel rapat: satu baris per transaksi, status
   berupa teks berwarna (bukan chip). */
.sub-list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 0 2px 9px; margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
.sub-list-head .sub-list-total { color: #5FDCE6; letter-spacing: .04em; }
.sub-list-empty { color: var(--faint); font-size: .8rem; padding: 18px 2px 4px; }
.pay-list { display: flex; flex-direction: column; gap: 12px; }
.pay-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 15px; border: 1px solid var(--line); border-radius: 13px; font-size: .88rem;
}
.pay-item .page-sub { font-size: .78rem; }

/* Teks status berwarna — padanan `.tx-*` milik CMS (dipakai daftar padat) */
.tx-green { color: var(--green); font-weight: 700; }
.tx-amber { color: var(--amber); font-weight: 700; }
.tx-red   { color: var(--red-soft); font-weight: 700; }
.tx-cyan  { color: #5FDCE6; font-weight: 700; }
.tx-muted { color: var(--faint); font-weight: 600; }
.tx-ink   { color: var(--ink); font-weight: 700; }
/* varian bersarang supaya tidak ditimpa aturan tabel lain (specificity) */
.table .tx-green { color: var(--green); font-weight: 700; }
.table .tx-amber { color: var(--amber); font-weight: 700; }
.table .tx-red   { color: var(--red-soft); font-weight: 700; }
.table .tx-cyan  { color: #5FDCE6; font-weight: 700; }
.table .tx-muted { color: var(--faint); font-weight: 600; }
.table .tx-ink   { color: var(--ink); font-weight: 700; }

/* Tabel rapat: baris rendah, satu baris teks (ellipsis) — sama seperti
   `.cms-table.compact` di CMS. Selector 2 kelas agar menang atas `.table td`. */
.table.tbl-compact { font-size: .74rem; }
.table.tbl-compact th { font-size: .66rem; padding: 9px 12px; white-space: nowrap; }
.table.tbl-compact td {
  padding: 8px 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.table.tbl-compact tbody tr:hover { background: rgba(255, 255, 255, .025); }
.table.tbl-compact .cell-mono { font-variant-numeric: tabular-nums; }
.table.tbl-compact .cell-strong { color: #F0EDE7; font-weight: 700; }
/* 🚩 warna teks WAJIB 3 kelas: `.table.tbl-compact td { color: var(--muted) }`
   bernilai (0,2,1) dan MENGALAHKAN `.table .tx-red` (0,2,0) — tanpa aturan ini
   semua status tampil abu-abu. */
.table.tbl-compact .tx-green { color: var(--green); }
.table.tbl-compact .tx-amber { color: var(--amber); }
.table.tbl-compact .tx-red   { color: var(--red-soft); }
.table.tbl-compact .tx-cyan  { color: #5FDCE6; }
.table.tbl-compact .tx-muted { color: var(--faint); }
.table.tbl-compact .tx-ink   { color: var(--ink); }
.table.tbl-compact .num { text-align: right; }
@media (max-width: 1080px) { .sub-grid { grid-template-columns: 1fr; } }
.sub-head { margin-bottom: 24px; }

/* ============================================================
   Langganan: produk, entitlement, tabel harga (dashboard)
   ============================================================ */
/* Kartu sambutan: padding bawah dilegakan + margin bawah supaya TIDAK
   menempel pada kartu di bawahnya (.sub-grid tidak punya margin sendiri). */
.sub-welcome { padding: 30px 30px 34px; margin-bottom: 22px; border-color: rgba(217,142,63, 0.35); }
.sub-welcome-title { font-family: var(--font-display); font-size: 1.35rem; margin: 14px 0 8px; }

.ent-list { display: flex; flex-direction: column; gap: 12px; }
.ent-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, 0.02);
}
.ent-meta { font-size: .8rem; color: var(--faint); margin-top: 3px; }
/* Baris entitlement + aksi (mis. Lanjutkan + ikon batalkan pesanan) */
.ent-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ent-del { display: inline-flex; margin: 0; }
.ent-del .tb-act { background: transparent; }
/* Catatan di bawah grid produk (mis. jumlah paket lifetime yang disembunyikan) */
.prod-grid-note {
  grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 7px;
  margin: 0; font-size: .8rem; color: var(--faint);
}
.prod-grid-note svg { color: #1EC1CB; flex: 0 0 auto; }

/* ============================================================
   Halaman hasil pembayaran (payment-success / payment-failed)
   ============================================================ */
/* Kartu MEMENUHI lebar konten; isinya di tengah lewat `.pay-result-inner`
   supaya baris teks tidak melebar mengikuti layar. */
.pay-result { width: 100%; max-width: none; text-align: center; padding: 38px 30px 32px; }
.pay-result-inner { max-width: 640px; margin: 0 auto; }
/* Baris nomor invoice di dalam kartu */
.pay-result-inv {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: center;
  margin: 20px auto 0; padding: 10px 16px; border-radius: 12px;
  border: 1px dashed rgba(30, 193, 203, .42); background: rgba(30, 193, 203, .07);
}
.pay-result.err .pay-result-inv {
  border-color: rgba(224, 138, 103, .42); background: rgba(224, 138, 103, .07);
}
.pay-result-inv .inv-label { font-size: .62rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); }
.pay-result-inv b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92rem; font-weight: 700; color: #F0EDE7; letter-spacing: .02em;
}
.pay-result.err { border-color: rgba(224, 138, 103, .38); }
.pay-result-ico {
  width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(30, 193, 203, .14); color: #1EC1CB;
  border: 1px solid rgba(30, 193, 203, .42);
}
.pay-result.err .pay-result-ico {
  background: rgba(224, 138, 103, .14); color: var(--red-soft);
  border-color: rgba(224, 138, 103, .42);
}
.pay-result-title { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 8px; }
.pay-result-sub { color: var(--muted); font-size: .9rem; line-height: 1.65; max-width: 52ch; margin: 0 auto; }
.pay-result-sum { text-align: left; margin-top: 24px; }
/* Info akses grup Telegram di halaman sukses (di dalam kartu) */
.pay-result-tg {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  margin-top: 22px; padding: 14px 16px; border-radius: 13px;
  border: 1px solid rgba(30, 193, 203, .30); background: rgba(30, 193, 203, .07);
}
.pay-result-tg-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; background: rgba(30, 193, 203, .16); color: #5FDCE6;
}
.pay-result-tg-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pay-result-tg-body b { font-size: .88rem; color: #F0EDE7; }
.pay-result-tg-body span { font-size: .8rem; color: var(--muted); line-height: 1.65; }
.pay-result-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.pay-result-foot {
  color: var(--faint); font-size: .78rem; line-height: 1.7; text-align: center;
  margin: 24px auto 0; padding-top: 18px; border-top: 1px solid var(--line);
  max-width: 62ch;
}
@media (max-width: 560px) {
  .pay-result { padding: 26px 20px 24px; }
  .pay-result-actions .btn { width: 100%; }
}

.prod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 18px; }
.prod-card { padding: 20px 20px 18px; display: flex; flex-direction: column; }
.prod-card.owned { border-color: rgba(30,193,203, 0.35); }
.prod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.prod-head b { font-size: .98rem; font-weight: 700; line-height: 1.35; }
.prod-tagline { color: var(--muted); font-size: .84rem; margin-top: 9px; flex: 1; }
.prod-prices { display: flex; flex-direction: column; gap: 7px; margin: 16px 0 16px; }
.prod-price-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; font-size: .82rem; color: var(--muted);
  transition: border-color .15s ease, background .15s ease;
}
.prod-price-row:hover { border-color: rgba(30,193,203, 0.5); background: var(--grad-soft); color: var(--ink); }
.prod-price-row b { color: #F0EDE7; font-variant-numeric: tabular-nums; }
.prod-price-row em { font-style: normal; font-size: .72rem; color: var(--faint); margin-left: 7px; }
.prod-card > .btn { margin-top: auto; }

/* Tabel harga (durasi × kategori) */
.price-matrix th, .price-matrix td { text-align: center; }
.price-matrix th:first-child, .price-matrix td:first-child { text-align: left; }
.price-matrix td { padding-top: 14px; padding-bottom: 14px; }
.pm-note { display: block; font-size: .7rem; color: var(--muted); margin-top: 3px; }
.pm-save {
  display: inline-block; font-size: .66rem; font-weight: 700; color: #5FDCE6;
  background: rgba(30,193,203, 0.12); border-radius: 999px; padding: 2px 7px; margin-top: 5px;
}

/* Daftar produk di halaman terkunci (menu sinyal) */
.lock-products { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; width: 100%; text-align: left; }
.lock-product {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px;
}
.lock-product-note { font-size: .76rem; color: var(--faint); margin-top: 3px; }

/* ============================================================
   Checkout (dashboard/checkout.php)
   ============================================================ */
/* Dua kolom: KIRI = info paket, KANAN = satu kolom berisi
   "Tambahkan paket lain" + "Ringkasan pesanan" (kolom kanan = <form>). */
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 22px; align-items: start; }
.co-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.co-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.co-sum { display: flex; flex-direction: column; margin-top: 14px; }
.co-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.08); font-size: .9rem;
}
.co-row:last-child { border-bottom: 0; }
.co-row span { color: var(--muted); }
.co-row b { color: #F0EDE7; font-variant-numeric: tabular-nums; }

/* Baris "Produk" — label di atas, daftar produk (utama + tambahan) di bawahnya */
.co-row-block { flex-direction: column; align-items: stretch; gap: 9px; }
.co-row-block > span {
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.co-prodlist { display: flex; flex-direction: column; gap: 9px; }
.co-prod { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; }
.co-prod-name { grid-column: 1; grid-row: 1; font-weight: 700; color: #F0EDE7; font-size: .88rem; min-width: 0; }
.co-prod-meta { grid-column: 1; grid-row: 2; font-size: .76rem; color: var(--faint); }
.co-prod-price {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-variant-numeric: tabular-nums; color: #F0EDE7; font-size: .9rem; white-space: nowrap;
}
.co-eff-note { font-size: .76rem; color: #5FDCE6; }
.co-total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px; }
.co-total b { font-family: var(--font-display); font-size: 1.3rem; }
.co-status { padding: 24px 24px 22px; }
.co-durs { margin-top: 20px; }
.co-durs-label { font-size: .76rem; color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.co-dur-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-top: 10px; }
.co-dur {
  display: flex; flex-direction: column; gap: 3px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 12px; font-size: .82rem; color: var(--muted);
}
.co-dur b { color: #F0EDE7; font-variant-numeric: tabular-nums; }
.co-dur.active { border-color: rgba(30,193,203, 0.55); background: var(--grad-soft); color: var(--ink); }
.co-dur:hover { border-color: rgba(255, 255, 255, 0.28); }
.dash-notice.err { background: rgba(224,138,103, 0.12); border-color: rgba(224,138,103, 0.35); color: #F2C7B4; }
.dash-notice.ok { background: rgba(30,193,203, 0.1); border-color: rgba(30,193,203, 0.32); color: #9FE9E1; }
.co-pay { margin-top: 20px; }
.co-pay-note { font-size: .78rem; margin-top: 12px; }
.co-side-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 1080px) { .co-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Blok harga terpisah: Paket Edukasi (kartu sendiri) + Paket Sinyal
   ============================================================ */
.price-block { margin-bottom: 46px; }
.price-block:last-of-type { margin-bottom: 0; }
.price-block-head { margin-bottom: 22px; max-width: 68ch; }
.pbh-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin-top: 8px; }
.pbh-desc { color: var(--muted); font-size: .93rem; margin-top: 7px; line-height: 1.65; }

/* Kartu Paket Edukasi: full width, 2 kolom */
.edu-card { padding: 30px 32px; border-color: rgba(24,175,184, 0.35); }
.edu-card.popular { border-color: rgba(30,193,203, 0.5); }
.edu-card-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 38px; align-items: start; }
.edu-card-head { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.edu-card-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; }
.edu-card-tagline { color: var(--muted); font-size: .92rem; margin-top: 10px; line-height: 1.65; }
.edu-card-price { display: flex; flex-direction: column; margin: 18px 0 20px; }
.edu-card-price .prod-price-amount { font-family: var(--font-display); font-size: clamp(1.8rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; }
.edu-card-price .prod-price-per { font-size: .85rem; color: #6FE0EA; font-weight: 600; margin-top: 3px; }
.edu-card-price .prod-price-note { font-size: .78rem; color: var(--faint); margin-top: 6px; }
.edu-highlights { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; }
.edu-highlights li { position: relative; padding-left: 24px; font-size: .88rem; color: #DFDBD5; }
.edu-highlights li::before { content: "✓"; position: absolute; left: 0; color: var(--cyan); font-weight: 800; }
.edu-card-note { font-size: .78rem; color: var(--faint); margin-top: 12px; text-align: center; }
.edu-card-note a { color: #5FDCE6; font-weight: 600; }
.edu-card-feats {
  border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 20px;
  background: rgba(255, 255, 255, 0.025);
}
.edu-feats-title {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 14px;
}
.edu-card-feats .plan-feats { margin: 0; }
@media (max-width: 1080px) {
  .edu-card-grid { grid-template-columns: 1fr; gap: 26px; }
  .edu-card { padding: 24px 22px; }
}

/* ============================================================
   Kontak kami (footer)
   ============================================================ */
.foot-contact .contact-link {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: .9rem; transition: color .15s ease;
}
.foot-contact .contact-link:hover { color: #5FDCE6; }
.contact-ico {
  display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 9px; background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line); color: var(--cyan);
}
.contact-body { display: flex; flex-direction: column; line-height: 1.25; }
.contact-body b { font-size: .84rem; color: #F0EDE7; font-weight: 700; }
.contact-body span { font-size: .8rem; color: var(--faint); }
.foot-contact-note { font-size: .74rem; color: var(--faint); margin-top: 12px; }

/* ============================================================
   Checkout — add-on / cross-selling
   ============================================================ */
.co-addons {
  margin-top: 16px;
}
.co-addons-head h4 { font-size: 1rem; font-weight: 800; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.co-save-tag {
  font-size: .68rem; font-weight: 700; color: #86E7EE;
  background: rgba(46,216,226, 0.14); border: 1px solid rgba(46,216,226, 0.3);
  border-radius: 999px; padding: 3px 9px; text-transform: none; letter-spacing: 0;
}
.co-addons-head .page-sub { margin-top: 6px; }
.co-addon-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.co-addon {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 15px; border: 1px solid var(--line); border-radius: 13px;
  background: rgba(255, 255, 255, 0.03); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.co-addon:hover { border-color: rgba(255, 255, 255, 0.24); }
.co-addon.picked { border-color: rgba(30,193,203, 0.45); background: rgba(30,193,203, 0.07); }
.co-addon-check { width: 18px; height: 18px; margin-top: 2px; accent-color: #1EC1CB; flex: 0 0 auto; cursor: pointer; }
.co-addon-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.co-addon-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.co-addon-top b { font-size: .93rem; }
.co-addon-tagline { font-size: .8rem; color: var(--faint); }
.co-addon-durs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.co-addon-dur {
  font-size: .72rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.co-addon-dur:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--ink); }
.co-addon-dur.active { background: var(--grad-soft); border-color: rgba(30,193,203, 0.55); color: #fff; }
.co-addon-price { font-weight: 800; color: #F0EDE7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-addon.picked .co-addon-price { color: #5FDCE6; }
.co-sum-total .co-row { font-size: .92rem; }

/* ---- Kode voucher di checkout ---- */
.co-voucher {
  margin-top: 20px; padding: 15px 16px;
  border: 1px dashed var(--line-strong); border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
}
.co-voucher-label {
  display: block; font-size: .74rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 9px;
}
.co-voucher-row { display: flex; gap: 9px; align-items: stretch; }
.co-voucher-row .input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: .06em; }
.co-voucher-row .btn { flex: 0 0 auto; }
.co-voucher-msg { margin: 10px 0 0; font-size: .82rem; line-height: 1.5; }
.co-voucher-msg.ok  { color: #5FDCE6; }
.co-voucher-msg.err { color: var(--red-soft); }
.co-disc { color: #5FDCE6 !important; }
@media (max-width: 480px) {
  .co-voucher-row { flex-direction: column; }
  .co-voucher-row .btn { width: 100%; }
}

/* Cross-sell setelah pembayaran sukses */
.co-upsell { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.co-upsell-title {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 12px;
}
.co-upsell-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.co-upsell-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, 0.03); transition: border-color .15s ease, transform .15s ease;
}
.co-upsell-card:hover { border-color: rgba(30,193,203, 0.5); transform: translateY(-1px); }
.co-upsell-card b { font-size: .88rem; }
.co-upsell-card span { font-size: .78rem; color: var(--faint); }

/* Footer dashboard: baris copyright + kontak */
.dash-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-foot-contact { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dash-foot-contact a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; color: var(--muted); transition: color .15s ease;
}
.dash-foot-contact a:hover { color: #5FDCE6; }
.dash-foot-contact svg { color: var(--cyan); }

/* ============================================================
   TRADING IDEA — ide dari akun master (per kategori + filter status)
   ============================================================ */
/* Pill switch kategori — dipakai Trading Idea (.idea-*) & Trade Log (.cat-*) */
.idea-tabs,
.cat-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px; margin-bottom: 22px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  width: fit-content; max-width: 100%;
}
.idea-tab,
.cat-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px;
  font-weight: 700; font-size: .88rem; color: var(--muted);
  /* WAJIB: tab Trading Idea adalah <button>, dan tanpa ini browser memakai
     latar default tombol (abu rgb(107,107,107) karena color-scheme:dark)
     sehingga pill yang TIDAK aktif tampak abu-abu — beda dari Trade Log /
     Market Intelligent yang elemennya <a>. */
  background: transparent;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.cat-tab { text-decoration: none; }
.idea-tab:hover,
.cat-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.idea-tab.active,
.cat-tab.active {
  /* sama seperti .mi-tab.active & .chip.active (tint, bukan hijau solid) */
  background: var(--grad-soft); border: 1px solid rgba(30, 193, 203, .55);
  color: #F2EFE9; box-shadow: 0 0 0 3px rgba(30, 193, 203, .14);
}
.idea-tab-ico,
.cat-ico { display: inline-flex; }
.idea-tab.locked { color: var(--faint); }
.idea-tab.locked:hover { color: var(--muted); }

/* Titik hijau di TAB KATEGORI: ada konten baru / berubah di kategori itu.
   Dihilangkan saat user selesai melihat kategori lalu berpindah tab. */
.idea-tab .idea-tab-dot {
  margin-left: 2px;                 /* sebaris chip, bukan di kanan jauh */
  width: 8px; height: 8px;
  box-shadow: 0 0 0 3px rgba(30,193,203, 0.20);
}
.idea-tab-lock {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 7px;
  background: rgba(217,142,63, 0.12); color: var(--amber);
  border: 1px solid rgba(217,142,63, 0.28);
}

.idea-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.idea-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.idea-pill-num,
.cat-num {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  margin-left: 7px; padding: 0 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line);
  font-size: .72rem; font-weight: 800; color: #DAD5CF;
}
/* Badge angka DI DALAM pill yang aktif (Commodity/Forex/Indices/Crypto &
   filter status). Latarnya hijau terang → teksnya WAJIB gelap; teks terang
   di sini hanya 1,43-1,91:1 (nyaris tak terbaca).
   CATATAN: markup Trading Idea memakai .idea-pill-num SEDANGKAN Trade Log
   memakai .cat-num — selektor lama hanya menyebut .cat-num sehingga badge di
   Trading Idea tidak pernah kena gaya "aktif" (bug lama, baru terlihat saat
   latarnya jadi hijau terang). Keduanya kini dicakup. */
.idea-tab.active .cat-num,
.idea-tab.active .idea-pill-num,
.cat-tab.active .cat-num,
.cat-tab.active .idea-pill-num {
  /* Tab aktif kini bertint gelap (bukan hijau solid) → badge WAJIB terang. */
  background: rgba(255, 255, 255, 0.18); color: #fff;
  border-color: rgba(255, 255, 255, 0.30);
}
.idea-pills .chip.active .idea-pill-num {
  /* BEDA dari tab kategori: latar chip aktif itu GELAP (tint hijau 14% di atas
     latar gelap), jadi badge-nya harus terang. Percobaan memakai gaya gelap
     di sini menghasilkan 1,16:1 (tidak terbaca). */
  background: rgba(255, 255, 255, 0.18); color: #fff;
  border-color: rgba(255, 255, 255, 0.30);
}
.idea-bar-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.idea-source {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .82rem; color: var(--faint); margin-bottom: 20px;
}
.idea-author-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line);
  color: #F0EDE7; font-weight: 700; font-size: .8rem;
}

.idea-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; align-items: stretch;
  /* semua baris (dan kartunya) disamakan tingginya */
  grid-auto-rows: 1fr;
}
.idea-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100%; }

/* ============================================================
   PENANDA KONTEN BARU / BERUBAH pada kartu
   ------------------------------------------------------------
   • titik hijau di pojok kanan overlay (sebaris dengan chip Buy/Sell &
     status) → untuk konten BARU maupun yang BERUBAH
   • bingkai hijau pada kartu → HANYA untuk konten yang benar-benar BARU
     (permintaan user: perubahan status cukup ikonnya saja)
   Dipakai di Trading Idea, Learning Path, E-book, dan Market Outlook.
   ============================================================ */
.idea-new-dot,
.card-new-dot {
  margin-left: auto;                 /* menempel ke kanan, sebaris chip */
  flex: 0 0 auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(30,193,203, 0.22), 0 2px 8px rgba(0, 0, 0, 0.45);
  animation: miDotPulse 2.2s ease-in-out infinite;
}
/* bingkai hijau = konten BARU */
.idea-card.is-new,
.learning-card.is-new,
.ebook-card.is-new,
.mo-card.is-new,
.cat-item.is-new {
  border-color: rgba(30,193,203, 0.62) !important;
  box-shadow: 0 0 0 1px rgba(30,193,203, 0.30), 0 12px 34px rgba(30,193,203, 0.10);
}
/* titik pada kartu daftar (Learning Path / E-book / Market Outlook):
   menempel pojok kanan-atas kartu */
.learning-card, .ebook-card { position: relative; }
.learning-card > .card-new-dot,
.ebook-card > .card-new-dot,
.cat-item > .card-new-dot {
  position: absolute; top: 12px; right: 12px; margin: 0; z-index: 3;
}
.idea-shot { aspect-ratio: 4 / 3; }
.idea-body {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 20px 20px;
  flex: 1 1 auto; min-height: 0;
}
.idea-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.idea-result { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.idea-result-verdict {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; letter-spacing: .02em;
}
.idea-result.win .idea-result-verdict { color: #5FDCE6; }
.idea-result.loss .idea-result-verdict { color: #E08A67; }
.idea-result-pips { font-size: .78rem; font-weight: 700; color: var(--muted); }
.idea-cancel-label {
  font-size: .74rem; font-weight: 700; color: var(--faint);
  padding: 4px 11px; border-radius: 999px;
  border: 1px dashed var(--line-strong);
}
.idea-author {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line);
}
.idea-author b { display: block; font-size: .85rem; color: #F0EDE7; }
/* span teks author — JANGAN mengenai .idea-avatar (display:block membuat
   huruf di dalam lingkaran keluar dari lingkarannya) */
.idea-author > span:not(.idea-avatar),
.idea-author > span:not(.idea-avatar) span { display: block; font-size: .74rem; color: var(--faint); }
.idea-author > span:not(.idea-avatar) b { font-size: .85rem; color: #F0EDE7; }
.idea-tags { margin: 0; }
.idea-note {
  border-top: 1px solid var(--line); padding-top: 12px;
}
.idea-note-head {
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 7px;
}
.idea-note-body {
  font-size: .84rem; color: #D8D3CD; line-height: 1.65;
  overflow: auto; white-space: pre-line;
}
.idea-note-body::-webkit-scrollbar { width: 6px; }
.idea-note-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 99px; }

/* Panel sub halaman terkunci + tabel harga */
.idea-lock { padding: 32px 34px 30px; }
.idea-lock-head { display: flex; flex-direction: column; align-items: flex-start; }
.idea-lock-head .cs-title { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.idea-lock-note {
  margin-top: 14px; font-size: .9rem; color: var(--muted); line-height: 1.7; max-width: 66ch;
}
.idea-price-wrap { margin-top: 24px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.idea-price-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.idea-price-table th {
  text-align: left; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); font-weight: 800; padding: 13px 18px;
  background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--line);
}
.idea-price-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.idea-price-table tr:last-child td { border-bottom: 0; }
.idea-price-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.idea-price-table td b { font-size: .95rem; }
.idea-save {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; color: #5FDCE6;
  background: rgba(30,193,203, 0.12); border: 1px solid rgba(30,193,203, 0.3);
}
.idea-price { font-weight: 800; color: #F0EDE7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.idea-permonth { color: var(--muted); font-size: .84rem; white-space: nowrap; }
.idea-dash { color: var(--faint); }
.idea-pick { text-align: right; }
.idea-lock-feats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px;
  margin-top: 24px;
}

@media (max-width: 1180px) {
  .idea-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .idea-grid { grid-template-columns: 1fr; }
  .idea-tabs,
  .cat-tabs { border-radius: 18px; width: 100%; }
  .idea-lock { padding: 26px 20px 24px; }
  .idea-lock-feats { grid-template-columns: 1fr; }
  .idea-pick { text-align: left; }
}


/* ============================================================
   TRADING IDEA — perbaikan tampilan (panel, filter, kartu seragam)
   ============================================================ */
.idea-panel { display: none; }
.idea-panel.active { display: block; animation: fadeUp .35s ease both; }
.idea-hidden { display: none !important; }

.idea-meta { font-size: .82rem; color: var(--faint); font-weight: 600; }
.idea-empty-msg { text-align: center; color: var(--faint); font-size: .88rem; padding: 26px 0 4px; }

/* Rekap kategori + filter bulan (paling kanan) */
.idea-stats {
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  padding: 16px 20px; margin-bottom: 20px;
  position: relative; z-index: 60; align-items: flex-end;
}
.idea-stats > div { display: flex; flex-direction: column; gap: 2px; }
.idea-stats .is-label { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.idea-stats b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.idea-stats b.up { color: var(--green); }
.idea-stats b.run { color: #1EC1CB; }
.idea-stats b.down { color: var(--red-soft); }
.idea-stats .is-month { margin-left: auto; min-width: 178px; }
.idea-stats .is-month .cselect-btn { padding: 8px 11px; }
.idea-stats .is-month .cs-cur { font-size: .84rem; }

/* Gambar: TIDAK terpotong (letterbox gelap) + bisa dipreview (lightbox) */
.idea-shot { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: rgba(20,19,25, 0.62); }

/* ---- Overlay kartu Trading Idea: sisi (Buy/Sell) + status (PLAN/WIN/LOSS/CANCEL) ----
   Dulu .idea-ov TIDAK punya aturan CSS sama sekali: posisinya static di sudut
   (padding 0) dan tertutup elemen gambar yang position:absolute, sehingga badge
   status tidak terbaca. Sekarang overlay diposisikan absolut dengan padding
   atas & kiri, diberi lapisan gelap agar tetap terbaca di atas chart terang. */
.idea-shot::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 92px;
  background: linear-gradient(180deg, rgba(20,19,25, 0.82), rgba(20,19,25, 0));
  pointer-events: none; z-index: 1;
}
.idea-ov {
  position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0; pointer-events: none;
}
.idea-ov > * { pointer-events: auto; }

/* Sisi order: chip ringan dengan panah arah */
.idea-side {
  display: inline-flex; align-items: center; gap: 5px;
  flex: 0 0 auto; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(20,19,25, 0.82); border: 1px solid rgba(255, 255, 255, 0.24); color: #fff;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.idea-side .is-arrow { font-size: .62rem; line-height: 1; }
.idea-side.buy  { color: #5FDCE6; border-color: rgba(30,193,203, 0.6); }
.idea-side.sell { color: #E08A67; border-color: rgba(224,138,103, 0.6); }

/* Status hasil: badge lebih tegas + titik warna + huruf kapital */
/* Gaya disamakan dengan badge overlay Trade Log (.tlog-ov-tl .badge):
   latar gelap transparan + border berwarna agar terbaca di atas chart apa pun. */
.idea-status {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 0 0 auto; white-space: nowrap;
  padding: 4px 11px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(20,19,25, 0.82); border: 1px solid rgba(255, 255, 255, 0.24); color: #fff;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.idea-status .is-dot {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
/* Warna per status = NILAI SAMA PERSIS dengan badge status di Trade Log
   (.tlog-ov-tl .badge.violet/.green/.red/.gray). Ubah keduanya bersamaan. */
.idea-status.st-plan   { color: #6FE0EA; border-color: rgba(24,175,184, 0.6); }
.idea-status.st-win    { color: #5FDCE6; border-color: rgba(30,193,203, 0.6); }
.idea-status.st-loss   { color: #E08A67; border-color: rgba(224,138,103, 0.6); }
.idea-status.st-cancel { color: #CCC7C0; border-color: rgba(255, 255, 255, 0.35); }
/* Status RUNNING (sinyal sudah berjalan, belum ada hasil) — latar gelap
   dengan teks/titik cyan supaya jelas beda dari PLAN (teal pudar). */
.idea-status.st-run    { color: #5FDCE6; background: rgba(20, 19, 25, 0.82); border-color: rgba(30, 193, 203, 0.4); }
/* titik di chip RUNNING ikut berdenyut (samakan dengan chip Live di landing) */
.idea-status.st-run .is-dot { animation: hlPulse 1.6s ease-in-out infinite; box-shadow: none; }

/* ---- Aksi kartu: tombol Chart (URL chart yang diisi di Trade Log) ---- */
.idea-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  /* `margin-top: auto` mendorong tombol ke DASAR kartu → sejajar antar kartu
     dalam satu baris grid (kartu-kartunya sama tinggi). Jarak minimum tetap
     ada dari `gap: 14px` milik .idea-body. */
  margin-top: auto;
  /* Nama host chart di KIRI, tombol "Chart" di KANAN (permintaan user).
     `margin-left:auto` pada tombol membuatnya tetap di kanan walau barisnya
     hanya berisi tombol (kartu yang chart-nya berupa link gambar). */
  justify-content: space-between;
}
.idea-actions .idea-chart-btn { margin-left: auto; }
.idea-chart-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 11px;
  font-size: .84rem; font-weight: 700; color: #14262A;
  background: var(--grad); box-shadow: var(--shadow-glow);
  border: 1px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.idea-chart-btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 14px 34px rgba(30,193,203, 0.5); }
.idea-chart-btn svg { flex: 0 0 auto; }
.idea-chart-btn .ic-ext { opacity: .85; }
.idea-chart-host {
  font-size: .74rem; color: var(--faint); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* Kartu tanpa gambar: beri ruang agar overlay tidak menempel tepi */
.idea-shot-empty { padding: 14px; }

@media (max-width: 560px) {
  .idea-ov { top: 10px; left: 10px; right: 10px; gap: 6px; }
  .idea-side, .idea-status { font-size: .66rem; padding: 3px 9px; }
}
.idea-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.idea-shot-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  background: var(--grad-soft); color: #E0DBD4;
}
.idea-shot-btn {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in; display: block;
}
.idea-shot-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; }
.idea-zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(20,19,25, 0.78); border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff; opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.idea-shot:hover .idea-zoom,
.idea-shot-btn:hover + .idea-zoom,
.idea-shot-btn:focus-visible + .idea-zoom { opacity: 1; }
.idea-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 24px;
  background: rgba(12,11,16, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: fadeUp .18s ease both;
}
.idea-lightbox[hidden] { display: none; }
.idea-lightbox img {
  max-width: min(1120px, 96vw); max-height: calc(100vh - 130px);
  width: auto; height: auto; object-fit: contain;
  border-radius: 16px; border: 1px solid var(--line-strong);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); background: #1B1A23;
}
.idea-lightbox-close {
  position: fixed; top: 20px; right: 20px;
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line-strong);
  color: var(--ink); cursor: pointer;
}
.idea-lightbox-close:hover { background: rgba(255, 255, 255, 0.14); }
.idea-lightbox-cap {
  position: fixed; left: 0; right: 0; bottom: 20px; text-align: center;
  font-size: .84rem; font-weight: 600; color: var(--muted); padding: 0 20px;
}
.idea-lightbox-cap b { color: #F0EDE7; font-family: var(--font-display); }

.idea-sym { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; }
.idea-date { font-size: .77rem; color: var(--faint); font-weight: 600; }
.idea-result.plan .idea-result-verdict { color: #6FE0EA; font-size: .95rem; }
.idea-result.run .idea-result-verdict { color: #1EC1CB; font-size: .95rem; }
.idea-result.cancel { align-items: flex-end; }

/* Avatar bulat "FA" — line-height & grid wajib agar huruf tetap di tengah */
.idea-avatar {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad); color: #14262A;
  font-family: var(--font-display); font-size: .72rem; font-weight: 800;
  line-height: 1; letter-spacing: 0; padding: 0; overflow: hidden;
}
.idea-author-chip .idea-avatar { width: 24px; height: 24px; font-size: .64rem; }
.idea-author .idea-avatar { margin-right: 2px; }

.idea-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.idea-prices > div {
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  border-radius: 11px; padding: 8px 10px; text-align: center;
}
/* Catatan: chip konteks (Struktur/Narrative/Entry Model) sekarang berada DI
   DALAM baris `.idea-tags` — kelas `.idea-ctx` tidak dipakai lagi. */

/* idea-tags: padding hanya atas-bawah (kiri/kanan mengikuti kartu) */
.idea-tags { padding-left: 0; padding-right: 0; }

/* Catatan analis: BLOK SELALU ADA (walau kosong) dengan tinggi tetap —
   selebihnya bisa di-scroll. Tujuannya supaya tombol "Chart" sejajar antar
   kartu (kalau blok catatan hanya muncul saat ada isi, kartu tanpa catatan
   jadi lebih pendek dan tombolnya naik).
   Tinggi = 3 baris (permintaan user), line-height 1.65. */
.idea-note { display: flex; flex-direction: column; flex: 0 0 auto; min-height: 0; }
.idea-note-body {
  flex: 0 0 auto;
  height: calc(1.65em * 3);
  overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.idea-note-body p { margin: 0 0 6px; }
.idea-note-body p:last-child { margin-bottom: 0; }
.idea-note-body::-webkit-scrollbar { width: 6px; }
.idea-note-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 99px; }

.idea-price-note a { color: #5FDCE6; font-weight: 600; }
/* Link chart sumber (shot berupa link, bukan gambar) */
.idea-link {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: .82rem; font-weight: 700; color: #5FDCE6;
}
.idea-link:hover { color: #86E7EE; }

@media (max-width: 1180px) { .idea-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .idea-grid { grid-template-columns: 1fr; }
  .idea-prices { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .idea-stats { gap: 12px 20px; }
  .idea-stats .is-month { margin-left: 0; width: 100%; min-width: 0; }
  .idea-lock { padding: 26px 20px 24px; }
  .idea-lock-feats { grid-template-columns: 1fr; }
  .idea-pick { text-align: left; }
}

/* ============================================================
   HEADER & FOOTER HASIL COPY / DOWNLOAD
   ------------------------------------------------------------
   Disisipkan ke dalam CLONE kartu oleh assets/js/copy-frame.js
   (FO_copyFrame.decorate) dari <template id="foCopyFrameTpl">
   (dashboard/includes/copy-frame.php), jadi TIDAK terlihat di halaman —
   hanya muncul di gambar/PDF hasil Copy & Download.
   ============================================================ */
.fo-copy-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap;
  padding: 15px 26px;
  background: rgba(30, 193, 203, 0.12);
  border-bottom: 1px solid var(--line-strong);
}
.fo-copy-brand {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.02rem; letter-spacing: .05em; color: #F5F2EE; white-space: nowrap;
}
.fo-copy-brand span {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Tanpa baris sosial (Trade Log) → tulisan header dibuat rata TENGAH dan
   diberi padding bawah (permintaan user).
   PENTING: brand dibuat `display:block; width:100%` + `text-align:center`,
   BUKAN sekadar flex-center. Saat copy, html-to-image gagal meng-inline webfont
   (Google Fonts cross-origin) sehingga glyph digambar pakai font pengganti yang
   lebih lebar; dengan elemen shrink-wrap (flex), kelebihan lebar itu meluber ke
   KANAN saja dan teks terlihat meleset ~8px. Sebagai block selebar header, line
   box tetap terpusat berapa pun metrik fontnya. */
.fo-copy-head--solo { justify-content: center; text-align: center; padding-bottom: 26px; }
/* Konten yang tepat berada di bawah header hasil copy TIDAK boleh menempel
   garis bawah header. Di frame Result, .ff-top tidak punya padding sehingga
   avatar/badge RESULTS menempel garis header (terukur jarak 0px) — inilah
   "tumpang tindih" yang terlihat di gambar. */
.fo-copy-head + .ff-top { margin-top: 16px; }
.fo-copy-head--solo .fo-copy-brand { display: block; width: 100%; text-align: center; }
.fo-copy-social { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fo-copy-soc {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 700; color: #E7E3DD;
}
.fo-copy-soc svg { color: var(--cyan); flex: 0 0 auto; }

.fo-copy-foot {
  /* rata KIRI (permintaan user) — tanpa ini teks ikut center karena frame
     Trade Log memakai text-align:center. */
  text-align: left;
  display: flex; flex-direction: column; gap: 12px;
  /* margin atas = jarak konten di atas ke GARIS footer; padding atas = jarak
     garis ke teks disclaimer. Keduanya diperlukan (permintaan user). */
  margin-top: 18px;
  padding: 30px 26px 20px;
  background: rgba(20,19,25, 0.6);
  border-top: 1px solid var(--line-strong);
}
.fo-copy-disc { font-size: .8rem; color: #CCC7C0; line-height: 1.6; }
/* Ikon + tulisan "Disclaimer :" dalam SATU baris sejajar (permintaan user).
   WAJIB flex: style.css punya aturan global `svg { display: block }` sehingga
   tanpa ini SVG ikon turun ke barisnya sendiri dan teksnya pindah ke bawah. */
.fo-copy-disc b {
  display: flex; align-items: center; gap: 7px;
  font-size: .85rem; font-weight: 800; color: #E9B173; margin-bottom: 5px;
}
.fo-copy-disc b svg { flex: 0 0 auto; }
.fo-copy-disc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fo-copy-disc li { position: relative; padding-left: 15px; }
.fo-copy-disc li::before {
  content: "\2022"; position: absolute; left: 0; top: 0;
  color: var(--cyan); font-weight: 800;
}
.fo-copy-tag {
  font-family: var(--font-display); font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; font-size: .72rem; color: #6FE0EA;
  border-top: 1px solid var(--line); padding-top: 11px;
}
.fo-copy-name {
  font-family: var(--font-display); font-weight: 800; letter-spacing: .14em;
  font-size: .84rem; color: #F0EDE7;
}

/* ============================================================
   ECONOMIC CALENDAR (widget TradingView) + tabel harga panel kunci
   ============================================================ */
.tv-cal-card { padding: 20px 22px 22px; }
.tv-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.tv-cal-title { display: flex; align-items: center; gap: 12px; }
.tv-cal-title b { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.tv-cal-title > div > span { display: block; font-size: .8rem; color: var(--faint); margin-top: 2px; }
.tv-cal-title .tv-cal-dot {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  margin-top: 0;
  background: var(--green); box-shadow: 0 0 0 4px rgba(30,193,203, 0.16);
}
/* Wadah widget: tinggi WAJIB eksplisit (widget minta height:100%; tanpa ini
   iframe jadi 0px). Latar bergaya aurora yang sama dengan background web +
   `mix-blend-mode: screen` di iframe membuat latar hitam widget tembus
   sehingga kalender menyatu dengan style web (detail di AGENTS.md). */
/* Tinggi diperkecil (dulu clamp 540–900px): kalender tetap nyaman dibaca
   tanpa memanjangkan halaman. Bila isi kalender lebih panjang dari kotak,
   ia bergulir DI DALAM kotak (overflow-y: auto), bukan memanjangkan page. */
.tv-cal-box {
  height: clamp(400px, 58vh, 620px);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 4% 0%, rgba(46,216,226, 0.08), transparent 55%),
    radial-gradient(circle at 96% 6%, rgba(30,193,203, 0.10), transparent 58%),
    radial-gradient(circle at 45% 106%, rgba(24,175,184, 0.09), transparent 60%),
    var(--bg);
}
.tv-cal-box .tradingview-widget-container {
  height: 100%; width: 100%;
  display: flex; flex-direction: column;
}
.tv-cal-box .tradingview-widget-container__widget {
  flex: 1 1 0; min-height: 0;
  overflow-y: auto; overflow-x: hidden;      /* konten panjang → scroll di dalam */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent;
}
.tv-cal-box .tradingview-widget-container__widget::-webkit-scrollbar { width: 10px; }
.tv-cal-box .tradingview-widget-container__widget::-webkit-scrollbar-track { background: transparent; }
.tv-cal-box .tradingview-widget-container__widget::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18); border-radius: 999px; border: 3px solid transparent;
  background-clip: content-box;
}
.tv-cal-box .tradingview-widget-container__widget::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); background-clip: content-box; }
/* iframe: biarkan FLEX yang menentukan tingginya (kotak dikurangi baris
   copyright). Jangan dipaksa height:100% — itu membuat iframe melebihi kotak
   dan baris copyright terpotong (pernah terjadi). Isi kalender yang panjang
   bergulir di dalam iframe itu sendiri. */
.tv-cal-box iframe {
  flex: 1 1 0; min-height: 0; height: auto !important;
  width: 100% !important;
  border: 0; display: block;
  mix-blend-mode: screen;   /* latar hitam widget → tembus ke background web */
}
.tv-cal-box .tradingview-widget-copyright {
  flex: 0 0 28px; height: 28px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: .74rem; color: #8E887F;
}
/* Indikator saat widget belum/tengah dimuat (lazy) */
.tv-cal-loading {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: var(--muted); text-align: center; padding: 24px;
}
.tv-cal-loading[hidden] { display: none; }
.tv-cal-loading b { font-family: var(--font-display); font-size: .98rem; color: #F0EDE7; }
.tv-cal-loading span { font-size: .8rem; color: var(--faint); }
.tv-cal-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.16); border-top-color: var(--cyan);
  animation: tvspin .9s linear infinite;
}
@keyframes tvspin { to { transform: rotate(360deg); } }

.tv-cal-fallback {
  margin-top: 14px; padding: 14px 16px; border-radius: 13px;
  background: rgba(217,142,63, 0.08); border: 1px solid rgba(217,142,63, 0.3);
  color: #E9B173; font-size: .86rem; line-height: 1.6;
}
.tv-cal-fallback a { color: #F0D0A0; font-weight: 700; }
.tv-cal-tips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.tv-tip {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; border-radius: 13px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line);
}
.tv-tip .tv-tip-ico {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center;
  line-height: 1; margin-top: 0;
  background: var(--grad-soft); border: 1px solid var(--line-strong); color: #5FDCE6;
}
.tv-tip b { display: block; font-size: .86rem; color: #F0EDE7; }
/* span TEKS ada di dalam <div>; batasi agar tidak ikut mengenai .tv-tip-ico */
.tv-tip > div > span { display: block; font-size: .79rem; color: var(--muted); line-height: 1.6; margin-top: 3px; }
.tv-tip a { color: #5FDCE6; font-weight: 600; }

/* Tabel harga di panel kunci: sel harga bisa diklik → checkout durasi itu */
.ec-price-table { min-width: 720px; }
.ec-price-table td.ec-cell { text-align: right; white-space: nowrap; }
.ec-price-table td.ec-cell a {
  display: inline-block; padding: 5px 11px; border-radius: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: .88rem;
  color: #E0DBD4; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  transition: all .16s ease;
}
.ec-price-table td.ec-cell a:hover {
  color: #fff; border-color: rgba(30,193,203, 0.6);
  background: var(--grad-soft); transform: translateY(-1px);
}

@media (max-width: 860px) {
  .tv-cal-card { padding: 16px 15px 18px; }
  .tv-cal-box { height: clamp(480px, 72vh, 720px); }
  .tv-cal-tips { grid-template-columns: 1fr; }
}

/* ============================================================
   CURRENCY CORRELATION (widget TradingView `tv-forex-table`)
   Berbeda dari widget kalender: komponen ini di-render di LIGHT DOM
   (bukan iframe), jadi CSS halaman bisa menjangkaunya. Widget diberi
   `theme="dark" transparent` sehingga latarnya TEMBUS ke background
   kartu — tidak perlu `mix-blend-mode`.
   ============================================================ */
.fx-tbl-card { padding: 20px 22px 22px; }
.fx-tbl-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.fx-tbl-title { display: flex; align-items: center; gap: 12px; }
.fx-tbl-title b { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.fx-tbl-title > div > span { display: block; font-size: .8rem; color: var(--faint); margin-top: 2px; }
.fx-tbl-title .fx-tbl-dot {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  margin-top: 0;
  background: var(--cyan); box-shadow: 0 0 0 4px rgba(46,216,226, 0.16);
}
/* Kotak widget: tinggi eksplisit; isi tabel yang panjang bergulir DI DALAM
   kotak, bukan memanjangkan halaman. Latar bergaya aurora yang sama dengan
   halaman supaya widget menyatu (transparan → latar ini yang terlihat). */
.fx-tbl-box {
  position: relative;
  height: clamp(380px, 56vh, 560px);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(circle at 4% 0%, rgba(46,216,226, 0.08), transparent 55%),
    radial-gradient(circle at 96% 6%, rgba(30,193,203, 0.10), transparent 58%),
    radial-gradient(circle at 45% 106%, rgba(24,175,184, 0.09), transparent 60%),
    var(--bg);
}
.fx-tbl-box tv-forex-table {
  display: block; width: 100%; height: 100%;
  padding: 10px 12px;
  overflow-y: auto; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent;
}
.fx-tbl-box tv-forex-table::-webkit-scrollbar { width: 10px; height: 10px; }
.fx-tbl-box tv-forex-table::-webkit-scrollbar-track { background: transparent; }
.fx-tbl-box tv-forex-table::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18); border-radius: 999px; border: 3px solid transparent;
  background-clip: content-box;
}
.fx-tbl-box tv-forex-table::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); background-clip: content-box; }
/* Selaraskan warna widget dengan tema Aurora (widget memakai var --tv-widget-*). */
.fx-tbl-box tv-forex-table {
  --tv-widget-border-color: rgba(255, 255, 255, 0.09);
  --tv-widget-scrollbar-color: rgba(255, 255, 255, 0.20);
  --tv-widget-attribution-border-color: rgba(255, 255, 255, 0.09);
}

/* Indikator saat widget belum selesai dimuat */
.fx-tbl-loading {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: var(--muted); text-align: center; padding: 24px;
}
.fx-tbl-loading[hidden] { display: none; }
.fx-tbl-loading b { font-family: var(--font-display); font-size: .98rem; color: #F0EDE7; }
.fx-tbl-loading span { font-size: .8rem; color: var(--faint); }
.fx-tbl-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.16); border-top-color: var(--cyan);
  animation: tvspin .9s linear infinite;
}

.fx-tbl-fallback {
  margin-top: 14px; padding: 14px 16px; border-radius: 13px;
  background: rgba(217,142,63, 0.08); border: 1px solid rgba(217,142,63, 0.3);
  color: #E9B173; font-size: .86rem; line-height: 1.6;
}
.fx-tbl-fallback a { color: #F0D0A0; font-weight: 700; }
.fx-tbl-tips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }

@media (max-width: 860px) {
  .fx-tbl-card { padding: 16px 15px 18px; }
  .fx-tbl-box { height: clamp(460px, 70vh, 700px); }
  .fx-tbl-box tv-forex-table { padding: 8px 6px; }
  .fx-tbl-tips { grid-template-columns: 1fr; }
}

/* ============================================================
   MARKET INTELLIGENT — tab + kartu Catalyst
   Kartu mengikuti rancangan: judul + badge IMPACT, lalu seksi
   WHAT HAPPENED / ECONOMIC + MARKET IMPACT / POLICY IMPLICATIONS /
   MARKET SENTIMENT / UPSIDE + DOWNSIDE RISKS dengan garis pemisah.
   ============================================================ */

/* ---- Toggle tab ---- */
.mi-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 7px; margin-bottom: 22px; width: fit-content; max-width: 100%;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.05);
}
.mi-tab {
  display: inline-flex; align-items: center; gap: 8px;
  /* border transparan di keadaan dasar → ukuran identik saat aktif */
  padding: 9px 17px; border: 1px solid transparent; border-radius: 999px; background: none;
  color: var(--muted); font-weight: 700; font-size: .88rem;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.mi-tab:hover { color: var(--ink); }
.mi-tab.active {
  /* Acuan permintaan user: tab aktif memakai gaya .chip.active (tint + border
     aksen), BUKAN hijau solid — supaya konsisten di dashboard & CMS. */
  background: var(--grad-soft); border: 1px solid rgba(30, 193, 203, .55);
  color: #F2EFE9; box-shadow: 0 0 0 3px rgba(30, 193, 203, .14);
}
.mi-tab-ico { display: grid; place-items: center; opacity: .9; }
.mi-tab-num {
  font-size: .7rem; font-weight: 800; padding: 1px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
.mi-tab.active .mi-tab-num { background: rgba(255, 255, 255, 0.18); color: #fff; border-color: rgba(255, 255, 255, 0.30); }
.mi-panel { display: none; }
.mi-panel.active { display: block; }

/* ---- Empty state (tab yang belum berisi) ---- */
.mi-empty { text-align: center; padding: 44px 26px; }
.mi-empty-ico { font-size: 2.3rem; margin-bottom: 12px; }
.mi-empty .display-3 { font-size: 1.15rem; }
.mi-empty p { color: var(--muted); font-size: .9rem; margin-top: 8px; }
.mi-soon { display: grid; gap: 10px; max-width: 520px; margin: 22px auto 0; text-align: left; }
.mi-soon-item { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: #DFDBD5; }

/* ---- Daftar kartu catalyst ---- */
.cat-list { display: flex; flex-direction: column; gap: 22px; }
.cat-card { padding: 0; overflow: hidden; }

/* Header kartu: DUA KOLOM 60/40 — kiri judul + label impact (+ analis),
   kanan negara/tanggal/tombol (semua rata ATAS). Grid (bukan flex) supaya
   proporsinya pasti 60:40 dan tidak bergeser mengikuti panjang judul. */
.cat-head {
  display: grid;
  grid-template-columns: 3fr 2fr;                /* = 60% / 40% */
  align-items: start;
  gap: 14px 20px;
  padding: 24px 26px 18px;
}
.cat-head-main { min-width: 0; }
.cat-title {
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 700;
  line-height: 1.35; letter-spacing: -0.01em;
}
.cat-head-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Badge impact (ikon + teks kapital) */
.cat-impact {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line-strong);
}
.cat-impact.low    { color: #5FDCE6; border-color: rgba(30,193,203, 0.45);  background: rgba(30,193,203, 0.10); }
.cat-impact.medium { color: #E9B173; border-color: rgba(217,142,63, 0.45);  background: rgba(217,142,63, 0.10); }
.cat-impact.high   { color: #E08A67; border-color: rgba(224,138,103, 0.45); background: rgba(224,138,103, 0.10); }
.cat-impact-ico { display: grid; place-items: center; }
.cat-date { font-size: .76rem; color: var(--faint); font-weight: 600; }

/* Nama analis (di kolom kanan, tepat di bawah tanggal) */
.cat-analyst {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .76rem; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.cat-analyst-av {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: .55rem; font-weight: 800; letter-spacing: .02em;
  color: #14262A; background: var(--grad); line-height: 1;
}

/* Blok kanan header detail — BERTUMPUK & rata atas:
   baris 1 negara + tanggal/jam, baris 2 nama analis, baris 3 tombol Copy & Share. */
.cat-head-right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 10px; text-align: right;
}
.cat-dates { display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.cat-date-time { font-variant-numeric: tabular-nums; }
/* tombol sebaris: Copy dulu, lalu Share (juga dipakai di header laporan) */
.cat-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* Tombol kecil di header (share & copy-as-image) */
/* Ikon saja (tanpa teks) — sama untuk Copy / Share / Download di semua
   halaman. Kotak 36x36 supaya seragam & rapi di samping kanan header. */
.cat-copy, .cat-share, .cat-download {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; padding: 0; gap: 0;
  border-radius: 10px; cursor: pointer;
  font-size: .8rem; font-weight: 700; color: var(--muted);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.cat-copy:hover, .cat-share:hover, .cat-download:hover { color: #fff; border-color: rgba(30,193,203, 0.55); background: var(--grad-soft); }
.cat-copy[disabled], .cat-download[disabled] { opacity: .6; cursor: default; }

/* Kolom kanan header Catalyst hanya 40% — pada lebar layar tertentu (munculnya
   sidebar desktop) kolom itu lebih sempit daripada dua tombol berlabel
   (butuh ±181px, tersedia ±151–178px) sehingga tombol akan TURUN BARIS.
   Supaya tetap SEBARIS: sembunyikan teksnya (ikon saja) di rentang itu.
   Tombol di header laporan tidak terdampak (kolomnya `auto`, selalu cukup). */
@media (max-width: 1359px) {
  .cat-head .cat-copy span,
  .cat-head .cat-share span,
  .cat-head .cat-download span { display: none; }
  .cat-head .cat-copy,
  .cat-head .cat-share,
  .cat-head .cat-download { padding: 8px 10px; }
}

/* ---- Isi kartu: seksi dengan garis pemisah ---- */
.cat-body { border-top: 1px solid var(--line); }
.cat-sec { padding: 18px 26px; }
.cat-sec + .cat-sec, .cat-pair { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.cat-pair { display: grid; grid-template-columns: 1fr 1fr; }
.cat-pair > .cat-sec + .cat-sec { border-left: 1px solid rgba(255, 255, 255, 0.07); }

.cat-sec-head {   /* elemen <h5> — margin direset agar tetap rapat */
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px;
  line-height: 1.4;
}
.cat-sec-ico { display: grid; place-items: center; flex: 0 0 auto; }
.cat-what      .cat-sec-head { color: #918B82; }
.cat-econ      .cat-sec-head { color: #5FDCE6; }
.cat-market    .cat-sec-head { color: #6FE0EA; }
.cat-policy    .cat-sec-head { color: #6FE0EA; }
.cat-sentiment .cat-sec-head { color: #E9B173; }
.cat-up        .cat-sec-head { color: #5FDCE6; }
.cat-down      .cat-sec-head { color: #E08A67; }

/* PENTING: pakai selektor .cat-card .cat-sec-text (2 kelas) karena aturan
   umum `.card p` (1 kelas + 1 tipe) lebih spesifik dan sempat menimpa
   ukuran+warna yang diminta (teks jadi 0.94rem & berwarna muted). */
.cat-card .cat-sec-text { font-size: 0.7rem; line-height: 1.8; color: #F0EDE7; }
.cat-card .cat-quote { font-style: italic; color: #F0EDE7; }

/* ---- Master–detail: daftar di kiri, detail di kanan ---- */
.cat-split {
  display: grid;
  /* lebar kolom kiri bisa ditimpa per halaman lewat --cat-side-w
     (dipakai Market Outlook yang kolom kiri-nya lebih kecil). Memakai
     variabel — bukan selector tambahan — supaya override mobile
     (@media 980px: 1 kolom) tetap menang di semua halaman. */
  grid-template-columns: minmax(280px, var(--cat-side-w, 380px)) minmax(0, 1fr);
  gap: 22px; align-items: start;
}
/* Market Outlook: kolom kiri sedikit lebih kecil (permintaan user) */
.cat-split.mo-split { --cat-side-w: 320px; }
.cat-side {
  display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 84px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  border-radius: 18px; padding: 14px;
}
/* pencarian */
.cat-search { position: relative; }
.cat-search-ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--faint); display: grid; place-items: center; pointer-events: none;
}
.cat-search-input {
  width: 100%; padding: 10px 12px 10px 36px; border-radius: 12px;
  background: rgba(20,19,25, 0.55); border: 1px solid var(--line);
  color: var(--ink); font-size: .88rem; font-family: inherit;
}
.cat-search-input:focus { outline: none; border-color: rgba(30,193,203, 0.6); }
.cat-search-input::placeholder { color: var(--faint); }

/* filter */
.cat-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cat-filter { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cat-filter-lab {
  font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.cat-filter select {
  width: 100%; padding: 8px 9px; border-radius: 10px; font-size: .78rem; font-weight: 600;
  background: rgba(20,19,25, 0.55); border: 1px solid var(--line); color: var(--ink);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12' fill='none' stroke='%236E6894' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px;
}
.cat-filter select:focus { outline: none; border-color: rgba(30,193,203, 0.6); }
.cat-filter option { background: #212028; color: #F5F2EE; }

/* daftar item */
.cat-list-items {
  display: flex; flex-direction: column; gap: 6px;
  max-height: min(62vh, 620px); overflow-y: auto; padding-right: 3px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
}
.cat-list-items::-webkit-scrollbar { width: 8px; }
.cat-list-items::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; }
.cat-item {
  position: relative;             /* titik "konten baru" diposisikan absolut */
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 11px 12px; border-radius: 12px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: inherit;
  transition: background .15s ease, border-color .15s ease;
}
/* PENTING: atribut `hidden` bawaan browser (display:none) KALAH oleh aturan
   `.cat-item { display: flex }` di atas — akibatnya item yang difilter tetap
   terlihat. Aturan ini mengembalikan perilaku sembunyi. */
.cat-item[hidden] { display: none !important; }
.cat-item:hover { background: rgba(255, 255, 255, 0.05); }
.cat-item.active {
  background: var(--grad-soft); border-color: rgba(30,193,203, 0.5);
}
.cat-item-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cat-item-title {
  font-size: .86rem; font-weight: 700; line-height: 1.4; color: #F0EDE7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-item-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-item-country {
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #5FDCE6; background: rgba(46,216,226, 0.1);
  border: 1px solid rgba(46,216,226, 0.25); border-radius: 6px; padding: 2px 6px;
}
.cat-item-time { font-size: .68rem; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
/* Baris MOOD pada daftar "Insight Kalender Ekonomi" — daftar 3 baris
   bertumpuk: Judul · Mood · Tanggal & Waktu (permintaan user). */
.cat-item-mood { font-size: .68rem; font-weight: 700; color: #5FDCE6; letter-spacing: .02em; }
.cat-item-imp {
  flex: 0 0 auto; font-size: .6rem; font-weight: 800; letter-spacing: .06em;
  border-radius: 6px; padding: 3px 7px; border: 1px solid var(--line-strong);
}
.cat-item-imp.low    { color: #5FDCE6; border-color: rgba(30,193,203, 0.45);  background: rgba(30,193,203, 0.10); }
.cat-item-imp.medium { color: #E9B173; border-color: rgba(217,142,63, 0.45);  background: rgba(217,142,63, 0.10); }
.cat-item-imp.high   { color: #E08A67; border-color: rgba(224,138,103, 0.45); background: rgba(224,138,103, 0.10); }
.cat-list-empty { font-size: .82rem; color: var(--faint); text-align: center; padding: 18px 8px; }

/* panel detail: hanya satu yang tampil */
.cat-detail { min-width: 0; }
.cat-card { display: none; }
.cat-card.active { display: block; }

/* Raw Source */
.cat-source-link {
  display: inline-block; font-size: .88rem; font-weight: 600; color: #5FDCE6;
  word-break: break-all;
}
.cat-source-link:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .cat-split { grid-template-columns: 1fr; }
  .cat-side { position: static; }
  .cat-list-items { max-height: 46vh; }
}

@media (max-width: 860px) {
  .cat-head { grid-template-columns: 1fr; padding: 20px 18px 16px; }
  .cat-title { font-size: 1.12rem; }
  /* di satu kolom, blok kanan ikut rata kiri supaya tetap rapi */
  .cat-head-right { align-items: flex-start; text-align: left; }
  .cat-dates, .cat-actions { justify-content: flex-start; gap: 8px; }
  .cat-card .cat-sec-text { font-size: 0.72rem; }
  .cat-sec { padding: 16px 18px; }
  .cat-pair { grid-template-columns: 1fr; }
  .cat-pair > .cat-sec + .cat-sec { border-left: 0; }
  .cat-copy span, .cat-share span, .cat-download span { display: none; }
  .cat-copy, .cat-share, .cat-download { padding: 8px 10px; }
}

/* Toast kecil untuk umpan balik copy-as-image */
.cat-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
  z-index: 4000; padding: 11px 18px; border-radius: 12px;
  background: rgba(39,37,48, 0.96); border: 1px solid var(--line-strong);
  color: var(--ink); font-size: .86rem; font-weight: 600;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.cat-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Saat kartu sedang ditangkap: sembunyikan tombol & pastikan latar gelap.
   Judul DIKUNCI (tinggi + jumlah baris) oleh catalyst-copy.js: di dalam gambar
   metrik font bisa berbeda dari halaman, dan tanpa kunci ini judul bisa butuh
   baris lebih banyak lalu menimpa badge impact di bawahnya. */
.cat-capturing .cat-copy,
.cat-capturing .cat-share,
.cat-capturing .cat-actions,
.cat-capturing .mb-actions { display: none !important; }
.cat-capturing .cat-title,
.cat-capturing .mb-title {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-capturing { background-color: #1B1A23; }

/* ============================================================
   Akun Saya — kartu ringkasan (identitas + paket aktif) & Data Profil
   ============================================================ */
.acc-sum {
  padding: 18px 22px;                 /* lebih ringkas */
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 24px; flex-wrap: wrap;
}
.acc-sum-user { display: flex; align-items: center; gap: 16px; min-width: 220px; }
.acc-sum-avatar { width: 46px; height: 46px; font-size: 1.15rem; }
.acc-sum-id { min-width: 0; }
.acc-sum-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.acc-sum-mail { font-size: .86rem; color: var(--muted); word-break: break-all; }

/* daftar paket di sisi kanan ringkasan: badge di atas, nama, lalu tanggal */
/* Daftar paket di kartu ringkasan: SATU KOLOM (permintaan user) — tiap paket
   menumpuk ke bawah, bukan berjajar ke samping. */
.acc-sum-pkgs {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 8px; margin-left: auto;
  width: min(360px, 100%);
}
/* Satu baris: badge · nama · tanggal — supaya kartu ringkasan tetap pendek */
.acc-pkg {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 13px; width: 100%;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
/* nama paket mengisi ruang, tanggal menempel kanan */
.acc-pkg .acc-pkg-name { flex: 1 1 auto; min-width: 0; }
.acc-pkg.sig { border-color: rgba(46,216,226, 0.28); background: rgba(46,216,226, 0.05); }
.acc-pkg-name { font-size: .88rem; font-weight: 700; color: #F0EDE7; line-height: 1.3; }
.acc-pkg-date { font-size: .74rem; color: var(--faint); white-space: nowrap; }
.acc-pkg-date::before { content: "·"; margin-right: 6px; color: var(--faint); }
/* Tanpa paket aktif: badge didorong ke KANAN (sejajar tepi kartu),
   bukan mengambang di tengah kolom daftar paket. */
.acc-sum-none { align-self: flex-end; text-align: right; }

.acc-empty { font-size: .88rem; color: var(--muted); }
.acc-empty a { color: #5FDCE6; font-weight: 600; }
.acc-note { font-size: .78rem; color: var(--faint); margin-top: 14px; }

/* Kedua kartu bawah sama tinggi (grid stretch) */
.acc-grid { align-items: stretch; }
.acc-grid > .card { height: 100%; }
.acc-profile { display: flex; flex-direction: column; }
.acc-profile .acc-note { margin-top: auto; }   /* catatan menempel dasar kartu */
.acc-note-flat { border-top: 0; padding-top: 0; }

@media (max-width: 900px) {
  .acc-grid { align-items: start; }            /* 1 kolom: tidak perlu dipaksa sama tinggi */
}
@media (max-width: 720px) {
  .acc-sum { padding: 16px 16px; }
  .acc-sum-pkgs { margin-left: 0; width: 100%; justify-content: flex-start; }
  .acc-pkg { flex: 1 1 100%; flex-wrap: wrap; }   /* tanggal turun rapi ke baris berikutnya */
  .acc-pkg-date::before { content: "·"; margin-right: 6px; }
  .acc-pkg-date { width: 100%; }
}

/* ============================================================
   Market Intelligent — tab Catalyst News (widget TradingView)
   Struktur & perilaku mengikuti Economic Calendar: tinggi eksplisit,
   scroll internal, indikator loading, dan fallback bila script diblokir.
   ============================================================ */
.tv-news-card { padding: 20px 22px 22px; }
.tv-news-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.tv-news-title { display: flex; align-items: center; gap: 12px; }
.tv-news-title b { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.tv-news-title > div > span { display: block; font-size: .8rem; color: var(--faint); margin-top: 2px; }
.tv-news-title .tv-news-dot {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  margin-top: 0;
  background: var(--cyan); box-shadow: 0 0 0 4px rgba(46,216,226, 0.16);
}

.tv-news-box {
  position: relative;
  height: clamp(420px, 62vh, 720px);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  /* Variabel yang dipakai widget TradingView untuk mewarnai latarnya.
     Di tema gelap ini kita set transparan supaya menyatu dengan halaman. */
  --tv-widget-background-color: rgba(0, 0, 0, 0);
  --tv-widget-perf-scale-fill-neutral: rgba(57, 57, 57, 0.24);
  background:
    radial-gradient(circle at 6% 0%, rgba(46,216,226, 0.07), transparent 55%),
    radial-gradient(circle at 94% 4%, rgba(30,193,203, 0.09), transparent 58%),
    var(--bg);
}
.tv-news-box .tradingview-widget-container {
  height: 100%; width: 100%;
  display: flex; flex-direction: column;
}
.tv-news-box .tradingview-widget-container__widget {
  flex: 1 1 0; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent;
}
.tv-news-box .tradingview-widget-container__widget::-webkit-scrollbar { width: 10px; }
.tv-news-box .tradingview-widget-container__widget::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
/* iframe: biarkan flex yang mengatur tinggi (jangan dipaksa 100%) supaya
   baris copyright tidak terpotong.
   `mix-blend-mode: screen` membuat latar HITAM widget jadi tembus ke
   background halaman (widget ini tidak bisa transparan sendiri — diuji:
   isTransparent:true menghasilkan latar putih 89%). */
.tv-news-box iframe {
  flex: 1 1 0; min-height: 0; height: auto !important;
  width: 100% !important; border: 0; display: block;
  mix-blend-mode: screen;
}
.tv-news-box .tradingview-widget-copyright {
  flex: 0 0 28px; height: 28px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: .74rem; color: #8E887F;
}
@media (max-width: 860px) {
  .tv-news-card { padding: 16px 15px 18px; }
  .tv-news-box { height: clamp(400px, 66vh, 640px); }
}

/* ============================================================
   Market Intelligent — tab Makro Harian (Morning Brief)
   Header: judul + Waktu + Dibuat oleh. Isi = rich text (termasuk divider).
   ============================================================ */
.mb-card { padding: 0; overflow: hidden; }
/* Header laporan: DUA KOLOM — kiri judul + meta, kanan tombol Copy & Share
   (kolom kanan hanya selebar tombolnya; `auto` supaya judul dapat ruang penuh). */
.mb-head {
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px 20px;
}
.mb-head-main { min-width: 0; }
.mb-title {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
  line-height: 1.35; letter-spacing: -0.01em; color: var(--ink);
}
.mb-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.mb-meta-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 600; color: var(--muted);
}
.mb-meta-item svg { color: var(--cyan); flex: 0 0 auto; }
/* baris tombol di header laporan (hanya akun master): sebaris, rata kanan-atas */
.mb-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* Isi konten (rich text) */
.mb-body {
  padding: 22px 26px 26px;
  font-size: .9rem; line-height: 1.85; color: #F0EDE7;
}
.mb-body > *:first-child { margin-top: 0; }
.mb-body > *:last-child { margin-bottom: 0; }
.mb-body p { margin: 10px 0; color: #F0EDE7; }
.mb-body strong { color: #fff; }
.mb-body h2 { font-family: var(--font-display); font-size: 1.15rem; margin: 18px 0 8px; }
.mb-body h3 { font-family: var(--font-display); font-size: 1rem; margin: 16px 0 6px; }
.mb-body ul, .mb-body ol { padding-left: 22px; margin: 10px 0; }
.mb-body li { margin: 5px 0; }
.mb-body a { color: #5FDCE6; text-decoration: underline; }
.mb-body img { max-width: 100%; border-radius: 12px; margin: 12px 0; }
.mb-body blockquote {
  border-left: 3px solid var(--indigo); padding: 8px 16px; margin: 14px 0;
  background: rgba(255, 255, 255, 0.04); border-radius: 0 10px 10px 0; color: var(--muted);
}
/* Divider (<hr>) dari tombol toolbar CMS */
.mb-body hr {
  border: 0; height: 1px; margin: 20px 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22) 20%, rgba(255, 255, 255, 0.22) 80%, transparent);
}
.mb-body table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: .85rem; }
.mb-body table th, .mb-body table td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; }
.mb-body table th { background: rgba(255, 255, 255, 0.05); font-weight: 700; }

/* ============================================================
   LAPORAN MAKRO (.mbr) — template default Makro Harian
   ------------------------------------------------------------
   WAJIB memakai awalan `.mbr-scope ` pada semua selektor: di halaman laporan
   ada aturan lama `.mb-body table { font-size: .85rem }` / `.cat-sec-rich table`
   yang specificity-nya lebih tinggi dari `.mbr-table` sehingga sempat MENANG
   (teks tabel jadi 13,6px, bukan skala Catalyst). Dengan `.mbr-scope .mbr-table`
   (2 kelas) aturan ini menang, dan ditempatkan setelahnya sebagai pengaman.

   CATATAN: awalan dulu `.mb-body ` — diganti menjadi `.mbr-scope ` supaya blok
   yang SAMA juga berlaku di halaman Market Outlook (di sana konten dibungkus
   `.cat-sec-rich`, bukan `.mb-body`). Kelas `mbr-scope` WAJIB ada di wadah
   laporan: dashboard/market-intelligent.php (`<div class="mb-body mbr-scope">`)
   dan dashboard/market-outlook.php (`<div class="cat-sec-rich mbr-scope">`).
   Tipografi mengikuti kartu Catalyst:
     badan teks  0.7rem Inter lh 1.8   (= .cat-card .cat-sec-text)
     judul seksi 0.72rem Inter 800 uppercase ls .12em (= .cat-sec-head)
     judul laporan 1.32rem Space Grotesk 700 (= .cat-title)
   Warna memakai token tema (var(--green)/var(--red-soft)/var(--amber)/…),
   TIDAK ada hex tema yang di-hardcode.
   ============================================================ */
.mbr-scope .mbr {
  font-family: var(--font-body);
  font-size: 0.7rem; line-height: 1.8; color: #F0EDE7;
}
.mbr-scope .mbr > *:first-child { margin-top: 0; }
.mbr-scope .mbr > *:last-child { margin-bottom: 0; }

/* Semua TABEL di dalam laporan harus mewarisi ukuran dasar .mbr.
   Aturan lama `.mb-body table { font-size: .85rem }` (13,6px) lebih spesifik
   daripada `.mbr-table`, jadi tabel layout (.mbr-2col/.mbr-3col), banner
   (.mbr-hero) dan baris item (.mbr-item) diam-diam memakai 13,6px — isinya
   (kotak catatan, bottom line) ikut mewarisi. Tiga kelas (30) mengalahkan 11
   sehingga ukuran benar-benar berasal dari skala Catalyst. */
.mbr-scope .mbr .mbr-table, .mbr-scope .mbr .mbr-mini, .mbr-scope .mbr .mbr-foot,
.mbr-scope .mbr .mbr-hero,  .mbr-scope .mbr .mbr-2col, .mbr-scope .mbr .mbr-item,
.mbr-scope .mbr .mbr-3col { font-size: inherit; }
.mbr-scope .mbr .mbr-table { font-size: .7rem; }
.mbr-scope .mbr .mbr-mini  { font-size: .7rem; }
.mbr-scope .mbr .mbr-foot  { font-size: .62rem; }

/* ---- Banner ---- */
.mbr-scope .mbr-hero {
  width: 100%; border-collapse: collapse; margin: 0 0 20px;
  background: linear-gradient(120deg, rgba(30, 193, 203, 0.16), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(30, 193, 203, 0.28); border-radius: 12px; overflow: hidden;
}
.mbr-scope .mbr-hero th, .mbr-scope .mbr-hero td { border: 0; background: none; }
.mbr-scope .mbr-hero-main { padding: 16px 18px; vertical-align: top; }
.mbr-scope .mbr-hero-title {
  margin: 0 0 6px; font-family: var(--font-display); font-size: 1.32rem;
  font-weight: 700; letter-spacing: .01em; color: var(--ink);
}
.mbr-scope .mbr-hero-sub { margin: 0; font-size: .7rem; color: var(--muted); }
.mbr-scope .mbr-hero-meta {
  padding: 16px 18px; vertical-align: top; text-align: right; width: 260px;
  border-left: 1px solid var(--line-strong); font-size: .62rem; color: var(--muted);
}
.mbr-scope .mbr-hero-date { display: block; font-weight: 800; color: var(--ink); }
.mbr-scope .mbr-hero-time { display: block; margin-bottom: 8px; }
.mbr-scope .mbr-hero-strong { color: var(--ink); }
.mbr-scope .mbr-hero-mood { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-strong); }
.mbr-scope .mbr-hero-meta .mood-up   { color: #5FDCE6; font-weight: 700; }
.mbr-scope .mbr-hero-meta .mood-down { color: var(--red-soft); font-weight: 700; }

/* ---- Judul seksi (gaya .cat-sec-head) ---- */
.mbr-scope .mbr-sec {
  margin: 22px 0 10px; padding-bottom: 6px;
  font-family: var(--font-body); font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: #5FDCE6; border-bottom: 1px solid var(--line-strong);
}

/* ---- Tabel data ---- */
.mbr-scope .mbr-table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: .7rem; }
/* Lebar kolom pasti (dipakai tabel 4 kolom: Event|Waktu|Deskripsi|Dampak) */
.mbr-scope .mbr-table.is-fixed { table-layout: fixed; }
.mbr-scope .mbr-table th {
  border: 0; border-bottom: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04);
  padding: 7px 10px; text-align: left; vertical-align: bottom;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.mbr-scope .mbr-table td {
  border: 0; border-bottom: 1px solid var(--line);
  padding: 7px 10px; vertical-align: top; color: #F0EDE7;
}
.mbr-scope .mbr-table tr:last-child td { border-bottom: 0; }
.mbr-scope .mbr-table .mbr-key { font-weight: 800; color: var(--ink); white-space: nowrap; }

/* ---- Badge bias ---- */
.mbr-scope .mbr-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .62rem; font-weight: 800; white-space: nowrap;
}
.mbr-scope .mbr-badge.is-bull  { background: rgba(30, 193, 203, 0.16);  color: #5FDCE6;       border: 1px solid rgba(30, 193, 203, 0.34); }
.mbr-scope .mbr-badge.is-bear  { background: rgba(224, 138, 103, 0.16); color: var(--red-soft); border: 1px solid rgba(224, 138, 103, 0.34); }
.mbr-scope .mbr-badge.is-mixed { background: rgba(233, 177, 115, 0.16); color: #E9B173;       border: 1px solid rgba(233, 177, 115, 0.34); }

/* ---- Layout 2 kolom ---- */
/* `table-layout: fixed` WAJIB: tanpa itu browser memakai lebar min-content
   sehingga kolom tidak benar-benar 50%–50% / 60%–40% (terukur 348 vs 329 px
   pada Market Outlook sebelum diperbaiki, sedangkan setelah fixed = sama). */
.mbr-scope .mbr-2col { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0 0 22px; }
.mbr-scope .mbr-2col > tbody > tr > td { border: 0; padding: 0; }
.mbr-scope .mbr-2col > tbody > tr > .mbr-col-main { width: 60%; vertical-align: top; padding-right: 16px; }
.mbr-scope .mbr-2col > tbody > tr > .mbr-col-side {
  width: 40%; vertical-align: top; padding-left: 16px; border-left: 1px solid var(--line);
}
/* 50%–50% (permintaan user): FOKUS MAKRO HARI INI vs FX HEATMAP & CATALYST
   MINGGU INI, dan ZONA POTENSIAL vs SKENARIO di Market Outlook.
   4 kelas → menang atas aturan dasar 60/40 di atas tanpa bergantung urutan. */
.mbr-scope .mbr-2col.is-even > tbody > tr > .mbr-col-main { width: 50%; }
.mbr-scope .mbr-2col.is-even > tbody > tr > .mbr-col-side { width: 50%; }
/* 70%–30% (Insight Kalender Ekonomi): kolom kiri fokus, kanan ringkasan. */
.mbr-scope .mbr-2col.is-7030 > tbody > tr > .mbr-col-main { width: 70%; }
.mbr-scope .mbr-2col.is-7030 > tbody > tr > .mbr-col-side { width: 30%; }

/* ---- Layout 3 kolom sama rata (Market Outlook: OUTLOOK UTAMA · NARRATIVE ·
   MARKET STRUCTURE) ---- */
.mbr-scope .mbr-3col { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0 0 22px; }
.mbr-scope .mbr-3col > tbody > tr > td { border: 0; padding: 0; }
.mbr-scope .mbr-3col > tbody > tr > td.mbr-col-third { width: 33.3333%; vertical-align: top; padding-right: 16px; }
.mbr-scope .mbr-3col > tbody > tr > td.mbr-col-third + td {
  border-left: 1px solid var(--line); padding-left: 16px;
}
.mbr-scope .mbr-3col > tbody > tr > td.mbr-col-third:last-child { padding-right: 0; }

@media (max-width: 780px) {
  .mbr-scope .mbr-2col, .mbr-scope .mbr-2col > tbody, .mbr-scope .mbr-2col > tbody > tr { display: block; width: 100%; }
  .mbr-scope .mbr-2col > tbody > tr > .mbr-col-main,
  .mbr-scope .mbr-2col > tbody > tr > .mbr-col-side {
    display: block; width: auto; padding: 0; border-left: 0;
  }
  /* Modifier 50/50 & 70/30 WAJIB didaftarkan ulang di sini: selector
     `.mbr-2col.is-even > …` (4 kelas) lebih spesifik daripada aturan umum
     `.mbr-2col > …` (3 kelas) di atas, sehingga TANPA baris ini punya
     `width: 70%/30%` tetap berlaku di mobile walau display-nya sudah block
     (terukur: kolom 233px & 100px di layar 390px, bukan selebar kartu). */
  .mbr-scope .mbr-2col.is-even > tbody > tr > .mbr-col-main,
  .mbr-scope .mbr-2col.is-even > tbody > tr > .mbr-col-side,
  .mbr-scope .mbr-2col.is-7030 > tbody > tr > .mbr-col-main,
  .mbr-scope .mbr-2col.is-7030 > tbody > tr > .mbr-col-side { width: auto; }
  .mbr-scope .mbr-col-side { margin-top: 18px; }
  .mbr-scope .mbr-3col, .mbr-scope .mbr-3col > tbody, .mbr-scope .mbr-3col > tbody > tr { display: block; width: 100%; }
  .mbr-scope .mbr-3col > tbody > tr > td.mbr-col-third {
    display: block; width: auto; padding: 0; border-left: 0;
  }
  .mbr-scope .mbr-3col > tbody > tr > td.mbr-col-third + td { margin-top: 20px; }
}

/* ---- Item fokus bernomor ---- */
.mbr-scope .mbr-item { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.mbr-scope .mbr-item td { border: 0; padding: 0; }
.mbr-scope .mbr-num-cell { width: 26px; vertical-align: top; }
.mbr-scope .mbr-num {
  display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center;
  border-radius: 6px; font-size: .66rem; font-weight: 800;
  background: rgba(30, 193, 203, 0.15); color: #5FDCE6; border: 1px solid rgba(30, 193, 203, 0.32);
}
.mbr-scope .mbr-item-body { vertical-align: top; padding-left: 8px; }
.mbr-scope .mbr-item-title { font-weight: 800; color: var(--ink); font-size: .72rem; }
/* "Title - Description" pada SATU baris (seksi CATALYST UTAMA / CATALYST
   MINGGU INI). Tanpa aturan ini, `.mbr-item-text` (yang display:block) akan
   turun ke baris baru — sedangkan yang diminta adalah satu baris dipisah "-".
   `font-weight: 400` (permintaan user): hanya TITLE yang bold, deskripsinya
   tidak — tanpa ini deskripsi ikut mewarisi 800 dari `.mbr-item-title`. */
.mbr-scope .mbr-item-title .mbr-item-text { display: inline; margin-top: 0; font-weight: 400; }
.mbr-scope .mbr-item-sep { color: var(--faint); font-weight: 700; padding: 0 2px; }
.mbr-scope .mbr-item-text  { color: var(--muted); margin-top: 2px; }
/* Baris meta (tanggal · jam · penulis) di seksi RINGKASAN UTAMA (Makro).
   Menggantikan banner hero lama supaya judul "RINGKASAN UTAMA" tidak dobel
   dengan seksi "RINGKASAN MAKRO HARIAN". */
.mbr-scope .mbr-metaline { font-size: .62rem; color: var(--faint); margin: 0 0 20px; }
.mbr-scope .mbr-metaline strong { color: var(--muted); font-weight: 700; }
/* Divider di dalam laporan (.mbr) — <hr> bawaan browser memakai border tebal
   + margin 0.5em sehingga terlihat janggal, terutama di dalam sel tabel.
   Disamakan dengan gaya divider di halaman lain (garis gradien tipis). */
.mbr-scope .mbr .rte-divider {
  border: 0; height: 1px; margin: 20px 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26) 18%, rgba(255, 255, 255, 0.26) 82%, transparent);
}
.mbr-scope .mbr-2col .rte-divider { margin: 18px 0; }
.mbr-scope .mbr-read       { color: var(--faint); margin-top: 5px; font-style: italic; }
.mbr-scope .mbr-read strong { color: var(--muted); }

/* ---- Kotak catatan & bottom line ---- */
.mbr-scope .mbr-note {
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line);
  border-left: 3px solid var(--amber); border-radius: 10px;
  padding: 12px 14px; margin: 0 0 16px;
}
.mbr-scope .mbr-note-title { margin: 0 0 8px; font-size: .7rem; font-weight: 800; color: var(--ink); }
.mbr-scope .mbr-list { margin: 0; padding-left: 16px; color: var(--muted); }
.mbr-scope .mbr-list li { margin-bottom: 6px; }
.mbr-scope .mbr-list li:last-child { margin-bottom: 0; }
.mbr-scope .mbr-list strong { color: var(--ink); }
/* Jarak atas-bawah antara JUDUL dan DESKRIPSI pada item fokus bernomor
   (Insight Kalender Ekonomi) — permintaan user: judul bold, deskripsi tidak,
   dan keduanya diberi jarak. */
.mbr-scope .mbr-cal .mbr-item-text { margin-top: 6px; }
/* Baris "Mood Pasar : …" di kepala laporan Insight Kalender Ekonomi */
.mbr-scope .mbr-cal-head { margin: 0 0 18px; }
.mbr-scope .mbr-side-head {
  margin: 0 0 8px; padding-bottom: 5px; font-size: .68rem; font-weight: 800;
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.mbr-scope .mbr-bottom {
  background: rgba(30, 193, 203, 0.07); border: 1px solid rgba(30, 193, 203, 0.22);
  border-left: 3px solid var(--green); border-radius: 10px; padding: 12px 14px;
}
.mbr-scope .mbr-bottom-title { margin: 0 0 5px; font-size: .68rem; font-weight: 800; color: var(--ink); }
.mbr-scope .mbr-quote { margin: 0 0 8px; font-style: italic; color: #F0EDE7; }

/* ---- Tabel kecil sidebar ---- */
.mbr-scope .mbr-mini { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: .7rem; }
.mbr-scope .mbr-mini td {
  border: 0; border-bottom: 1px solid var(--line); padding: 3px 0; color: var(--muted);
}
.mbr-scope .mbr-mini tr:last-child td { border-bottom: 0; }
.mbr-scope .mbr-mini strong { color: var(--ink); font-weight: 700; }

/* ---- Umum ---- */
.mbr-scope .mbr .ta-c { text-align: center; }
.mbr-scope .mbr .ta-r { text-align: right; }
.mbr-scope .mbr .is-up   { color: var(--green); font-weight: 800; }
.mbr-scope .mbr .is-down { color: var(--red-soft); font-weight: 800; }

/* ---- Footer laporan ---- */
.mbr-scope .mbr-foot {
  width: 100%; border-collapse: collapse; margin: 6px 0 0;
  border-top: 1px solid var(--line-strong); font-size: .62rem; color: var(--faint);
}
.mbr-scope .mbr-foot td { border: 0; padding: 10px 0 0; vertical-align: top; }
.mbr-scope .mbr-foot strong { color: var(--muted); }

@media (max-width: 860px) {
  /* satu kolom: judul+meta di atas, tombol Copy & Share turun ke bawah (rata kiri) */
  .mb-head { grid-template-columns: 1fr; padding: 18px 18px 15px; }
  .mb-actions { justify-content: flex-start; }
  .mb-title { font-size: 1.12rem; }
  .mb-body { padding: 18px; font-size: .88rem; }
}

/* ============================================================
   Market Intelligent — titik hijau konten baru + tombol Baca Semua
   ============================================================ */
.mi-tabs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 22px;
}
.mi-tabs-row .mi-tabs { margin-bottom: 0; }

/* titik hijau: menandakan ada konten baru yang belum dibuka */
.mi-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); margin-left: 2px;
  box-shadow: 0 0 0 3px rgba(30,193,203, 0.22);
  animation: miDotPulse 2.2s ease-in-out infinite;
}
.mi-dot[hidden] { display: none !important; }
@keyframes miDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(30,193,203, 0.22); }
  50%      { box-shadow: 0 0 0 6px rgba(30,193,203, 0.06); }
}

.mi-readall { flex: 0 0 auto; gap: 7px; }
.mi-readall svg { color: var(--green); }

@media (max-width: 720px) {
  .mi-tabs-row { margin-bottom: 18px; }
  .mi-readall { width: 100%; justify-content: center; }
}

/* Titik hijau per konten di daftar Catalyst:
   kanan-bawah, sejajar baris waktu (di bawah badge impact) */
.cat-item-side {
  flex: 0 0 auto; align-self: stretch;
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between; gap: 8px;
}
/* `margin-top:auto` membuat titik SELALU menempel di kanan-bawah (sejajar
   baris waktu) walau item tidak punya badge/tag di atasnya — pada Makro
   Harian `space-between` saja menaruh satu anak di ATAS. */
.cat-item-dot { width: 7px; height: 7px; margin-right: 4px; margin-top: auto; }

/* ============================================================
   Tag SESI (Sentimen Meter): Asia / London / New York
   ============================================================ */
.sess-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--line-strong); white-space: nowrap;
  background: rgba(255, 255, 255, 0.05); color: #CCC7C0;
}
/* warna berbeda per sesi agar mudah dibedakan */
.sess-tag.asia    { color: #E9B173; border-color: rgba(217,142,63, 0.45);  background: rgba(217,142,63, 0.10); }
.sess-tag.london  { color: #5FDCE6; border-color: rgba(46,216,226, 0.45);  background: rgba(46,216,226, 0.10); }
.sess-tag.newyork { color: #6FE0EA; border-color: rgba(24,175,184, 0.45);  background: rgba(24,175,184, 0.12); }
/* di daftar kiri: tag sesi di kanan-bawah item, sejajar baris waktu */
.cat-item-side .sess-tag { font-size: .62rem; padding: 2px 8px; }

/* ---- Divider (garis pemisah) di konten bacaan ---- */
.lesson-body hr,
.lesson-body hr.rte-divider {
  border: 0; height: 1px; margin: 22px 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26) 18%, rgba(255, 255, 255, 0.26) 82%, transparent);
}

/* ============================================================
   Market Outlook — filter (instrumen/pair/waktu) + konten rich
   Layout memakai pola Catalyst (.cat-split/.cat-side/.cat-item/.cat-card)
   ============================================================ */
.mo-filters {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 14px;
}
.mo-filters .cat-filter { display: block; }
.mo-filters select.mo-flt {
  width: 100%;
  padding: 9px 34px 9px 12px;
  background-color: #232128;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6894' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink); font-size: .84rem; font-weight: 600;
  outline: none; appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.mo-filters select.mo-flt:focus {
  border-color: rgba(46,216,226, 0.6);
  box-shadow: 0 0 0 3px rgba(46,216,226, 0.13);
}
.mo-filters select.mo-flt option { background: #212028; color: var(--ink); }
.mo-count {
  font-size: .74rem; font-weight: 700; color: var(--faint);
  letter-spacing: .02em; margin-bottom: 10px;
  padding: 0 2px;
}

/* Konten RTE (HTML) di dalam kartu detail — ikut gaya bacaan */
.cat-sec-rich { font-size: .94rem; line-height: 1.7; color: var(--muted); }
.cat-sec-rich h2 { font-size: 1.2rem; margin: 16px 0 8px; color: var(--ink); }
.cat-sec-rich h3 { font-size: 1.04rem; margin: 14px 0 6px; color: var(--ink); }
.cat-sec-rich p { margin: 9px 0; }
.cat-sec-rich ul, .cat-sec-rich ol { padding-left: 22px; margin: 9px 0; }
.cat-sec-rich li { margin: 4px 0; }
.cat-sec-rich strong { color: var(--ink); }
.cat-sec-rich a { color: #5FDCE6; text-decoration: underline; }
.cat-sec-rich img { max-width: 100%; border-radius: 13px; margin: 12px 0; display: block; }
.cat-sec-rich blockquote {
  border-left: 3px solid var(--indigo); padding: 8px 16px;
  margin: 12px 0; background: rgba(255, 255, 255, 0.04);
  border-radius: 0 12px 12px 0;
}
.cat-sec-rich table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.cat-sec-rich table th, .cat-sec-rich table td {
  border: 1px solid rgba(255, 255, 255, 0.16); padding: 8px 12px;
}
.cat-sec-rich table th { background: rgba(30,193,203, 0.14); color: var(--ink); text-align: left; }
.cat-sec-rich hr, .cat-sec-rich hr.rte-divider {
  border: 0; height: 1px; margin: 20px 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26) 18%, rgba(255, 255, 255, 0.26) 82%, transparent);
}
.cat-sec-rich .youtube-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; margin: 16px 0;
  border: 1px solid var(--line);
}
.cat-sec-rich .youtube-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Market Outlook: gambar utama (upload tersendiri) ---- */
/* Frame gambar Market Outlook.
   Sebelumnya: gambar menempel tepi kartu (padding kartu 0) sementara header/isi
   inset 26px, dan `max-height: 520px` MEMOTONG rasio — pada layar >=1920px frame
   jadi 860x520 (rasio 1,65) padahal gambar 1,55, sehingga muncul pita kosong
   kiri-kanan di dalam border (gambar "tidak sesuai frame").
   Sekarang: gambar ikut frame konten (margin = padding header) DAN memakai
   `aspect-ratio` tetap + `object-fit: contain` → ukuran frame selalu sama di
   semua kartu, gambar utuh (tidak terpotong/terdistorsi), tanpa pita aneh.
   Rasio 17/11 (permintaan user) + jarak BAWAH supaya frame gambar tidak
   menempel garis pemisah `.cat-body` di bawahnya. */
.mo-hero {
  margin: 18px 26px 20px;
}
.mo-hero img {
  width: 100%; height: auto;
  aspect-ratio: 17 / 11;
  object-fit: contain;
  border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  display: block;
}
@media (max-width: 860px) {
  /* samakan dengan padding .cat-head di layar kecil (20px 18px 16px) */
  .mo-hero { margin: 14px 18px 18px; }
}

/* ---- Market Outlook: penyesuaian blok kanan header (permintaan user) ----
   Di-scope ke KARTU (.cat-card.mo-card) — BUKAN ke halaman (.mo-split) — karena
   gambar hasil Copy dibuat dari CLONE kartu yang dipasang di luar halaman;
   selector yang butuh ancestor di halaman (`.mo-split ...`) TIDAK berlaku di
   gambar, sehingga tanggal & waktu tidak akan ikut terdorong ke bawah di hasil
   copy (pernah terjadi). Kelas `.mo-card` ada di kartunya sendiri sehingga
   ikut ter-clone. */
.cat-card.mo-card .cat-analyst { font-size: .95rem; font-weight: 700; color: #F0EDE7; }
.cat-card.mo-card .cat-analyst-av { width: 26px; height: 26px; font-size: .68rem; }
/* Kolom kanan memenuhi tinggi header + tanggal & waktu ditarik ke bawah
   (margin-top:auto). Header memakai `align-items: start`, jadi tanpa ini kolom
   kanan hanya setinggi isinya dan tanggal tidak benar-benar "di bawah". */
.cat-card.mo-card .cat-head-right { align-self: stretch; }
.cat-card.mo-card .cat-head-right .cat-dates { margin-top: auto; padding-top: 4px; }
/* Tiga tombol berlabel (Copy + Share + Download) butuh ±304px; kolom kanan baru
   cukup mulai viewport ±1560px. Di bawah itu label disembunyikan (ikon saja)
   supaya tombol tetap SATU BARIS — hanya untuk kartu Market Outlook. */
@media (max-width: 1559px) {
  .cat-card.mo-card .cat-actions .cat-copy span,
  .cat-card.mo-card .cat-actions .cat-share span,
  .cat-card.mo-card .cat-actions .cat-download span { display: none; }
  .cat-card.mo-card .cat-actions .cat-copy,
  .cat-card.mo-card .cat-actions .cat-share,
  .cat-card.mo-card .cat-actions .cat-download { padding: 8px 10px; }
}

/* ============================================================
   MARKET SESSION (sesi Tokyo / London / New York)
   ------------------------------------------------------------
   Kartu sesi menyala (is-active) bila waktu perangkat pengguna berada di
   dalam rentang sesi; sisanya dibuat redup (is-off). Status dihitung di
   assets/js/market-session.js.
   ============================================================ */
.ms-clock-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 22px; flex-wrap: wrap; margin-bottom: 16px; padding: 16px 22px;
}
.ms-clock { display: flex; flex-direction: column; gap: 2px; }
.ms-clock-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.ms-clock b {
  font-family: var(--font-display); font-size: 1.65rem; font-weight: 700;
  letter-spacing: .01em; font-variant-numeric: tabular-nums; color: #F0EDE7;
}
.ms-clock-date { font-size: .82rem; color: var(--muted); font-weight: 600; }
.ms-clock-right {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-end;
  text-align: right;
}
.ms-clock-local { font-size: .82rem; color: var(--muted); font-weight: 600; }
.ms-clock-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 700; color: var(--faint);
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
}
.ms-clock-status.on { color: #5FDCE6; border-color: rgba(30,193,203, 0.4); background: rgba(30,193,203, 0.1); }
.ms-clock-status.off { color: #E9B173; border-color: rgba(217,142,63, 0.38); background: rgba(217,142,63, 0.1); }

/* Pengaturan zona waktu */
.ms-tz { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.ms-tz-label {
  font-size: .64rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.ms-tz-select {
  color-scheme: dark;
  appearance: none; -webkit-appearance: none;
  padding: 8px 32px 8px 12px; border-radius: 11px;
  background-color: #232128;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%23A39CC4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  border: 1px solid var(--line-strong); color: var(--ink);
  font-family: inherit; font-size: .84rem; font-weight: 600;
  cursor: pointer; max-width: 230px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ms-tz-select:hover, .ms-tz-select:focus {
  border-color: rgba(46,216,226, 0.55); outline: none;
  box-shadow: 0 0 0 3px rgba(46,216,226, 0.12);
}
.ms-tz-select option { background: #232128; color: var(--ink); }

/* Keterangan pasar tutup (akhir pekan) */
.ms-closed {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 17px; border-radius: 13px; margin-bottom: 16px;
  background: rgba(217,142,63, 0.08); border: 1px solid rgba(217,142,63, 0.3);
  font-size: .86rem; color: #E9B173; line-height: 1.6;
}
.ms-closed b { color: #F0D0A0; }

.ms-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; align-items: stretch;
}
.ms-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 22px 20px;
  transition: border-color .25s ease, box-shadow .25s ease, opacity .25s ease, transform .25s ease;
}
/* Tidak aktif: dibuat redup supaya sesi yang berjalan langsung terlihat */
.ms-card.is-off {
  opacity: .55;
  border-color: var(--line);
  box-shadow: none;
  filter: grayscale(.35);
}
/* Aktif: ditekankan (accent indigo + glow) */
.ms-card.is-active {
  border-color: rgba(30,193,203, 0.6);
  box-shadow: 0 18px 46px rgba(30,193,203, 0.26);
  background: linear-gradient(170deg, rgba(30,193,203, 0.12), rgba(24,175,184, 0.06));
}
.ms-card.is-active .ms-name { color: #fff; }

.ms-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ms-head-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ms-name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; }
.ms-time { font-size: .84rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

.ms-state {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  color: var(--faint);
}
.ms-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: #6F6A62;
}
.ms-state.on {
  color: #5FDCE6; border-color: rgba(30,193,203, 0.42);
  background: rgba(30,193,203, 0.12);
}
.ms-state.on .ms-dot {
  background: #1EC1CB;
  box-shadow: 0 0 0 4px rgba(30,193,203, 0.18);
  animation: msPulse 1.6s ease-in-out infinite;
}
@keyframes msPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(30,193,203, 0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(30,193,203, 0.06); }
}

.ms-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-vol {
  font-size: .72rem; font-weight: 800; letter-spacing: .03em;
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: #DAD5CF;
}
.ms-vol-medium  { color: #5FDCE6; border-color: rgba(46,216,226, 0.35); background: rgba(46,216,226, 0.1); }
.ms-vol-high    { color: #E9B173; border-color: rgba(217,142,63, 0.35); background: rgba(217,142,63, 0.1); }
.ms-vol-highest { color: #E08A67; border-color: rgba(224,138,103, 0.35); background: rgba(224,138,103, 0.1); }
.ms-local { font-size: .74rem; font-weight: 600; color: var(--faint); }

.ms-pairs { display: flex; flex-direction: column; gap: 7px; }
.ms-pairs-label {
  font-size: .66rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.ms-pair-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-pair {
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  padding: 5px 11px; border-radius: 9px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  color: #F0EDE7;
}
.ms-card.is-active .ms-pair { border-color: rgba(30,193,203, 0.4); background: rgba(30,193,203, 0.12); }

.ms-note { font-size: .8rem; color: var(--muted); line-height: 1.6; margin: 0; }

.ms-bar {
  height: 4px; border-radius: 99px; overflow: hidden; margin-top: auto;
  background: rgba(255, 255, 255, 0.07);
}
.ms-bar span {
  display: block; height: 100%; width: 0;
  border-radius: 99px; background: var(--grad);
  transition: width .5s ease;
}

.ms-foot-note {
  font-size: .8rem; color: var(--faint); line-height: 1.7;
  margin-top: 18px; max-width: 78ch;
}

@media (max-width: 1180px) {
  .ms-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .ms-grid { grid-template-columns: 1fr; }
  .ms-clock-card { padding: 14px 16px; }
  .ms-clock b { font-size: 1.4rem; }
  .ms-clock-right { align-items: flex-start; text-align: left; }
  .ms-tz { align-items: flex-start; }
  .ms-tz-select { max-width: 100%; }
}

/* ============================================================
   PLAN ENTRIES
   ------------------------------------------------------------
   Layout 2 kolom: KIRI form rencana (akun → risiko → entry/SL/TP →
   lot disarankan), KANAN hasil (total RR, potensi profit/loss, risk per
   trade). Di bawahnya daftar rencana tersimpan.
   Rumus di includes/plan.php, pratinjau live di assets/js/plan-entries.js.
   ============================================================ */
.pe-wrap {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 22px; align-items: start;
}
.pe-form-card { padding: 22px; }
.pe-result-card { padding: 22px; position: sticky; top: 84px; }

.pe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.pe-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.pe-opt {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--faint);
}

/* Balance akun (auto terisi) */
.pe-balance {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 13px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line-strong);
}
.pe-balance b {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  color: #F0EDE7; font-variant-numeric: tabular-nums;
}
.pe-balance span { font-size: .72rem; color: var(--faint); }

/* ---- Kotak batas kerugian (nominal / %) ---- */
.pe-risk {
  margin-top: 18px; padding: 16px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line);
}
.pe-risk-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.pe-risk-title {
  font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.pe-risk-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  border: 1px solid var(--line); border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
}
.pe-risk-tabs button {
  padding: 7px 16px; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted); font-family: inherit;
  font-weight: 700; font-size: .82rem;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.pe-risk-tabs button:hover { color: var(--ink); }
.pe-risk-tabs button.active {
  background: var(--grad-soft); border: 1px solid rgba(30, 193, 203, .55);
  color: #F2EFE9; box-shadow: 0 0 0 3px rgba(30, 193, 203, .14);
}
.pe-risk-body { display: block; }
.pe-risk-nominal, .pe-risk-percent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: end; }
.pe-risk-percent .field:first-child { grid-column: 1 / -1; }

/* input dengan awalan mata uang */
.pe-input-money { display: flex; align-items: stretch; }
.pe-input-money > span {
  display: flex; align-items: center; padding: 0 13px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong);
  border-right: 0; border-radius: 12px 0 0 12px;
  color: var(--muted); font-weight: 700; font-size: .9rem;
}
.pe-input-money .input { border-radius: 0 12px 12px 0; }

/* preset risiko % */
.pe-preset { display: flex; flex-wrap: wrap; gap: 7px; }
.pe-preset-btn {
  padding: 8px 15px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  color: var(--muted); font-family: inherit; font-weight: 700; font-size: .84rem;
  transition: all .16s ease;
}
.pe-preset-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.pe-preset-btn.active { background: var(--grad-soft); border-color: rgba(30,193,203, 0.55); color: #fff; }

.pe-hint {
  margin: 16px 0 0; padding: 10px 13px; border-radius: 11px;
  font-size: .8rem; color: var(--muted); line-height: 1.6;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line);
}
.pe-hint b { color: #F0EDE7; }

/* ---- Lot disarankan (menonjol) ---- */
.pe-lot {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 16px;
  padding: 16px 18px; border-radius: 16px;
  background: rgba(30, 193, 203, 0.12);
  border: 1px solid rgba(30,193,203, 0.45);
}
.pe-lot-label {
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #6FE0EA;
}
.pe-lot b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 1.95rem); letter-spacing: -0.01em;
  color: #fff; font-variant-numeric: tabular-nums; margin-top: 2px;
}
.pe-lot-sub { display: block; font-size: .76rem; color: #CAC5BE; margin-top: 3px; }
.pe-lot-side { text-align: right; border-left: 1px solid rgba(255, 255, 255, 0.14); padding-left: 14px; }
.pe-lot-side-label {
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #E08A67;
}
.pe-lot-side b {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: #E08A67;
}
.pe-lot-side-sub { display: block; font-size: .76rem; color: #CAC5BE; margin-top: 3px; }

.pe-save {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
}
.pe-save .field { flex: 1 1 240px; margin: 0; }
.pe-save-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Panel hasil ---- */
.pe-res-label {
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 12px;
}
.pe-big {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 16px 18px; border-radius: 14px; margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
}
.pe-big-label { font-size: .72rem; font-weight: 700; color: var(--muted); }
.pe-big b {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 800; letter-spacing: -0.01em; color: #F0EDE7;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.pe-big-sub { font-size: .78rem; font-weight: 600; color: var(--faint); }
.pe-big.up { border-color: rgba(30,193,203, 0.42); background: rgba(30,193,203, 0.09); }
.pe-big.up b { color: #5FDCE6; }
.pe-big.up .pe-big-sub { color: #5FDCE6; }

.pe-rows { display: flex; flex-direction: column; }
.pe-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
  font-size: .86rem; color: var(--muted);
}
.pe-row b {
  font-family: var(--font-display); font-weight: 700; color: #F0EDE7;
  font-variant-numeric: tabular-nums; text-align: right;
}
.pe-row-profit b { color: #5FDCE6; }
.pe-row-loss b { color: #E08A67; }
.pe-row-note { border-bottom: 0; padding-top: 4px; }
.pe-row-note span, .pe-row-note b { font-size: .78rem; font-weight: 600; color: var(--faint); }

.pe-warn {
  display: flex; flex-direction: column; gap: 5px; margin-top: 14px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(217,142,63, 0.08); border: 1px solid rgba(217,142,63, 0.3);
  font-size: .8rem; color: #E9B173; line-height: 1.6;
}
.pe-warn b { color: #F0D0A0; }

/* ---- Daftar rencana tersimpan ---- */
.pe-list-card { margin-top: 22px; padding: 20px 22px 22px; }
.pe-list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.pe-empty { font-size: .86rem; color: var(--muted); line-height: 1.7; margin: 0; }
.pe-empty b { color: #F0EDE7; }
.pe-list { display: flex; flex-direction: column; gap: 10px; }
.pe-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line);
  transition: border-color .18s ease, background .18s ease;
}
.pe-item:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.055); }
.pe-item-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pe-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pe-item-top b { font-size: .95rem; color: #F0EDE7; }
.pe-item-meta { font-size: .78rem; color: var(--faint); }
.pe-item-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.pe-item-pots { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pe-item-pots span { font-family: var(--font-display); font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }
.pe-item-pots .up { color: #5FDCE6; }
.pe-item-pots .down { color: #E08A67; }
.pe-item-actions { display: flex; gap: 7px; }

.pe-foot {
  font-size: .8rem; color: var(--faint); line-height: 1.7;
  margin-top: 18px; max-width: 92ch;
}
.pe-foot b { color: var(--muted); }

@media (max-width: 1080px) {
  .pe-wrap { grid-template-columns: 1fr; }
  .pe-result-card { position: static; }
}
@media (max-width: 860px) {
  .pe-grid, .pe-grid-3, .pe-risk-nominal, .pe-risk-percent { grid-template-columns: 1fr; }
  .pe-lot { grid-template-columns: 1fr; }
  .pe-lot-side { text-align: left; border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 10px; }
  .pe-item { align-items: flex-start; }
  .pe-item-right { margin-left: 0; }
  .pe-item-pots { align-items: flex-start; }
}

/* ============================================================
   IKON OUTLINE (pengganti emoji)
   ------------------------------------------------------------
   Semua ikon dari includes/icons.php (icon_svg) & assets/js/icons.js
   (FOICON) memakai <svg stroke="currentColor" fill="none"> sehingga
   otomatis mengikuti warna teks elemen induknya. Aturan di bawah hanya
   mengatur PERATAAN (align) di dalam tombol/badge/pill agar tidak turun
   atau berubah ukuran.
   ============================================================ */
.btn svg,
.badge svg,
.pill svg,
.chip svg,
.mini-btn svg,
.cs-badge svg,
.cs-check svg,
.ln-label svg,
.pico svg,
.acc-tx-kind svg,
.acc-tx-err svg,
.acc-modal-err svg,
.alert svg,
.qr-ico svg,
.reflect-tick svg,
.toc-ico svg,
.perf-tag svg,
.cmn-title svg,
.ds-icon svg,
.empty-ico svg,
.mi-empty-ico svg,
.quality-emoji svg,
.lcar-nav svg,
.learning-back svg { flex: 0 0 auto; vertical-align: -0.15em; }

/* ikon yang berdiri sendiri di dalam tombol/badge: beri jarak dari teks */
.btn svg { margin-right: -2px; }
.pill svg, .pico svg { vertical-align: -0.18em; }

/* wadah ikon (bukan emoji lagi) — warnanya ikut aksen halaman */
.empty-ico { display: grid; place-items: center; color: #5FDCE6; }
.empty-ico svg { width: 26px; height: 26px; }
.quality-emoji { display: grid; place-items: center; color: inherit; }
.quality-emoji svg { width: 26px; height: 26px; }
.mini-btn svg { pointer-events: none; }
.cs-check { display: inline-flex; align-items: center; }
.qr-ico { display: inline-flex; align-items: center; color: #E9B173; }
.lcar-nav svg { width: 16px; height: 16px; }

/* ============================================================
   ATURAN PENEMPATAN TOMBOL (CMS & dashboard) — permintaan user
   ------------------------------------------------------------
     • PRIMARY (Simpan / Kirim / Buat Baru) selalu di KANAN
         - Simpan & Kirim  → bawah kanan (baris aksi di akhir form)
         - + Buat Baru     → atas kanan (di header kartu daftar)
     • SECONDARY (Batal / Cancel) tetap di kanan, TAPI SEBELUM primary.
   Baris aksi form disamakan perlakuan: rata kanan + urutan primary terakhir.
   ============================================================ */
.journal-actions,
.acc-tx-actions,
.pe-save-actions,
.quiz-actions { justify-content: flex-end; }
/* jangan melar memenuhi lebar (dulu .journal-actions .btn { flex: 1 }) */
.journal-actions .btn { flex: 0 0 auto; }
.journal-actions,
.acc-tx-actions,
.pe-save-actions,
.quiz-actions,
.acc-modal-actions,
.cms-modal-actions { flex-wrap: wrap; }
/* primary selalu paling kanan walau urutan markup berbeda */
.acc-modal-actions .btn-primary,
.cms-modal-actions .btn-primary,
.acc-modal-actions .btn-danger,
.cms-modal-actions .btn-danger { order: 2; }
.acc-modal-actions .btn-ghost,
.cms-modal-actions .btn-ghost { order: 1; }
@media (max-width: 560px) {
  .journal-actions, .acc-tx-actions, .pe-save-actions, .quiz-actions { justify-content: stretch; }
  .journal-actions .btn, .acc-tx-actions .btn, .pe-save-actions .btn { flex: 1 1 auto; }
}

/* Aksi list = ikon saja (aturan yang sama dengan CMS) */
.tb-act {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; padding: 0; border-radius: 9px;
  border: 1px solid transparent; background: transparent;
  color: var(--faint); cursor: pointer; text-decoration: none;
  transition: all .15s ease;
}
.tb-act:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.tb-act svg { display: block; pointer-events: none; }
.tb-act.act-view { border-color: rgba(30,193,203,.32); color: #5FDCE6; }
.tb-act.act-view:hover { background: rgba(30,193,203,.16); }
.tb-act.act-edit { border-color: rgba(255,255,255,.18); }
.tb-act.act-del { color: #E08A67; }
.tb-act.act-del:hover { background: rgba(199,90,60,.2); }

/* ============================================================
   TOMBOL LANJUT (Learning Path) — LABEL + IKON SATU BARIS
   ------------------------------------------------------------
   Permintaan user: ikon panah tidak boleh turun ke baris berikutnya.
   Penyebab sebelumnya: .ln-label adalah flex biasa tanpa nowrap sehingga
   teks panjang (mis. "Selesai — Kembali ke Materi") + ikon membungkus.
   ============================================================ */
.ln-continue .ln-label {
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.ln-continue .ln-label svg { flex: 0 0 auto; display: block; }
@media (max-width: 560px) {
  /* di layar sempit beri ruang supaya tetap satu baris */
  .lesson-nav .ln-continue { white-space: nowrap; }
  .ln-continue .ln-label { font-size: .82rem; }
}

/* ============================================================
   KARTU SINYAL (render server-side untuk auto-post Telegram)
   Tagline di dalam kartu, tepat di bawah badge Entry/SL/TP.
   ============================================================ */
.sig-tagline {
  margin: 16px 18px 20px; padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.sig-tagline-quote {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #E9B173;
}
.sig-tagline-brand {
  font-family: var(--font-display); font-weight: 800; letter-spacing: .06em;
  font-size: .86rem; color: var(--ink);
  background: var(--grad-soft); border: 1px solid rgba(30,193,203,.32);
  border-radius: 9px; padding: 4px 11px;
}

/* ============================================================
   SEARCHABLE COMBO (Timeframe MTF/LTF di form Journal)
   ------------------------------------------------------------
   Tombol bergaya sama dengan .cselect-btn, ditambah kolom SEARCH di bagian
   atas menu dan tombol "+" di kanan search saat tidak ada yang cocok.
   ============================================================ */
.tf-combo { position: relative; }
.tf-combo.open { z-index: 60; }
.tf-combo-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 13px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line-strong);
  color: var(--ink); font-family: inherit; font-weight: 600; font-size: .9rem;
  cursor: pointer; text-align: left;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.tf-combo-btn:hover, .tf-combo.open .tf-combo-btn {
  border-color: rgba(46,216,226, 0.55);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(46,216,226, 0.12);
}
.tf-combo-btn .tf-caret { color: var(--faint); flex: 0 0 auto; transition: transform .2s ease; }
.tf-combo.open .tf-combo-btn .tf-caret { transform: rotate(180deg); }

.tf-combo-menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 999;
  background: rgba(33,31,40, 0.97);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.6);
  padding: 8px; display: none;
}
.tf-combo.open .tf-combo-menu { display: block; animation: fadeUp .16s ease both; }

.tf-search-row { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.tf-search {
  flex: 1 1 auto; min-width: 0;
  padding: 8px 11px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  color: var(--ink); font-family: inherit; font-size: .84rem;
}
.tf-search::placeholder { color: var(--faint); }
.tf-search:focus { outline: none; border-color: rgba(46,216,226, 0.55); }
.tf-add {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  border-radius: 10px; cursor: pointer;
  background: var(--grad-soft); border: 1px solid rgba(30,193,203,.45);
  color: #5FDCE6; font-size: 1.1rem; font-weight: 800; line-height: 1;
}
.tf-add:hover { background: rgba(30,193,203,.22); color: #fff; }
.tf-add[hidden] { display: none; }

.tf-list { max-height: 220px; overflow-y: auto; }
.tf-opt {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: 10px; border: 0; background: transparent;
  color: var(--ink); font-family: inherit; font-weight: 600; font-size: .86rem;
  cursor: pointer; text-align: left; transition: background .15s ease;
}
.tf-opt:hover { background: rgba(255, 255, 255, 0.07); }
.tf-opt.active { background: var(--grad-soft); border: 1px solid rgba(30,193,203, 0.45); }
.tf-opt-check { color: #5FDCE6; font-weight: 800; }
.tf-empty { padding: 10px 11px; font-size: .82rem; color: var(--faint); }

/* ============================================================
   FORM JOURNAL — tata letak & keterangan (permintaan user)
   ------------------------------------------------------------
   1. Trade Execution: baris 1 = Harga Entry · Stop Loss · SL (pips) ·
      Take Profit · TP (pips) — 5 kolom (kolom pips lebih kecil),
      baris 2 = Risk · Est. Loss · Est. Win · RR (4 kolom).
   2. SEMUA keterangan/validasi/pesan form berada DI LUAR kotak (.card),
      sejajar tengah dengan baris tombol, di sisi KIRI.
   ============================================================ */
.exec-grid { display: grid; gap: 14px 16px; margin-bottom: 14px; }
.exec-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.exec-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Baris 1 Trade Execution (permintaan user):
   Harga Entry · Stop Loss · SL (pips) · Take Profit · TP (pips).
   Dua kolom PIPS sengaja LEBIH KECIL (0,7fr vs 1,3fr) karena isinya angka
   pendek hasil perhitungan otomatis. */
.exec-grid-5 {
  grid-template-columns:
    minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, .7fr)
    minmax(0, 1.3fr) minmax(0, .7fr);
}
.exec-grid .field { min-width: 0; }
/* Keterangan di bawah baris Risk · Est. Loss · Est. Win · RR.
   WAJIB 2 kelas (.journal-card .exec-note) karena `.card p` (0,1,1)
   mengalahkan selector satu kelas. */
.journal-card .exec-note { margin: -4px 0 14px; font-size: .78rem; line-height: 1.6; color: var(--faint); }
.journal-card .exec-note b { color: #D8D3CD; }

/* input nominal dengan awalan mata uang */
.money-input { position: relative; display: flex; align-items: center; }
.money-input .money-cur {
  position: absolute; left: 12px; color: var(--faint); font-weight: 700; font-size: .88rem;
  pointer-events: none;
}
.money-input .input { padding-left: 28px; }
/* Tanda + / − otomatis di modal Update Result (WIN → +, LOSS → −) */
.money-input.ur-sign .money-cur { font-size: .95rem; font-weight: 800; }
.money-input.ur-sign .money-cur.is-pos { color: #5FDCE6; }
.money-input.ur-sign .money-cur.is-neg { color: var(--red-soft); }
.money-input.ur-sign .input.is-neg { border-color: rgba(224, 138, 103, .45); }
/* Catatan kecil di bawah baris P/L · Pips · RR · Komisi sudah DIGANTI ikon
   info (permintaan user) — kelas ini disisakan untuk pemakaian lain. */
.ur-sign-note { margin: -4px 0 4px; font-size: .78rem !important; color: var(--faint); line-height: 1.6; }
.ur-sign-note b { color: #D8D3CD; }

/* ---------- Ikon info (i) di label Komisi $ ----------
   Teks catatan muncul saat ikon DI-HOVER atau DIKLIK (`.open`) dan
   diposisikan ke KIRI supaya tidak keluar dari tepi kartu modal. */
.ur-info-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ur-info-head > label { margin: 0; }
.ur-info-wrap { position: relative; display: inline-flex; align-items: center; }
.ur-info {
  width: 18px; height: 18px; border-radius: 50%; padding: 0;
  display: inline-grid; place-items: center; cursor: pointer;
  font-family: var(--font-display); font-size: .68rem; font-style: italic; font-weight: 800;
  line-height: 1; color: #5FDCE6;
  background: rgba(30, 193, 203, .12); border: 1px solid rgba(30, 193, 203, .4);
  transition: background .15s ease, border-color .15s ease;
}
.ur-info:hover, .ur-info-wrap.open .ur-info { background: rgba(30, 193, 203, .22); border-color: rgba(30, 193, 203, .7); }
.ur-info-tip {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: max-content; max-width: min(330px, 78vw);
  padding: 11px 13px; border-radius: 12px;
  background: rgba(33, 31, 40, .98); border: 1px solid var(--line-strong);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
  color: var(--muted); font-size: .78rem; line-height: 1.65; font-weight: 500;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  pointer-events: none;
}
.ur-info-tip b { color: #D8D3CD; }
.ur-info-wrap:hover .ur-info-tip,
.ur-info-wrap.open .ur-info-tip { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.input.static.is-empty { color: var(--faint); }

/* baris aksi + keterangan (di LUAR kartu) */
.form-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 18px;
}
/* Keterangan form: di LUAR kartu, sejajar tengah dgn tombol, di kiri.
   Tipografinya memakai gaya yang sama dengan keterangan lain di sistem
   (.journal-progress-txt / .journal-status / .hint). */
.form-foot .form-foot-msg {
  flex: 1 1 auto; min-width: 0;
  font-size: .8rem;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.form-foot .form-foot-msg #jcount,
.form-foot .form-foot-msg #tCount { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.form-foot .form-foot-msg #tError { font-weight: 600; color: var(--amber); }
.form-foot .form-foot-msg.is-ok { color: var(--green); }
.form-foot .form-foot-msg.is-warn { color: var(--amber); }
.form-foot .form-foot-msg.is-err { color: var(--red-soft); }
.form-foot .form-foot-actions { display: flex; gap: 10px; flex: 0 0 auto; margin-left: auto; }

/* pesan alert yang muncul di baris form-foot (gagal simpan, dll) */
.form-foot .alert { margin: 0; flex: 1 1 100%; }

@media (max-width: 900px) {
  .exec-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exec-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .exec-grid-3, .exec-grid-4 { grid-template-columns: 1fr 1fr; }
  .exec-grid-5 { grid-template-columns: 1fr 1fr; }
  .form-foot .form-foot-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* ============================================================
   AKUN, KEAMANAN & ONBOARDING
   ------------------------------------------------------------
   Dipakai oleh: login.php · forgot-password.php · reset-password.php
                 onboarding.php · oauth-google*.php
   Semua komponen di bawah ini SENGAJA memakai token tema yang sama
   (--grad, --teal, --red-soft, --amber) supaya seragam dengan
   halaman dashboard lainnya.
   ============================================================ */

/* ---- formulir autentikasi ---- */
.auth-form { display: block; }
.auth-form .field { margin-bottom: 14px; }
.auth-form .field .hint { line-height: 1.55; }

/* honeypot: disembunyikan dari manusia, tetap "terbaca" bot.
   JANGAN pakai display:none — sebagian bot melewatinya. */
.hp-field {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* baris kecil: "ingat saya" + tautan lupa password */
.auth-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 2px 0 16px;
}
.auth-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .84rem; color: var(--muted); cursor: pointer; user-select: none;
}
.auth-check input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; flex: 0 0 auto;
  accent-color: var(--grad); cursor: pointer;
}
.auth-link { color: #5FDCE6; font-weight: 600; font-size: .84rem; text-decoration: none; }
.auth-link:hover { color: #9BEAF1; text-decoration: underline; }

/* ---- captcha aritmatika ---- */
.captcha-row { display: flex; align-items: center; gap: 10px; }
.captcha-q {
  flex: 0 0 auto; min-width: 96px; text-align: center;
  padding: 11px 14px; border-radius: 12px;
  font-weight: 700; font-size: .95rem; letter-spacing: .04em;
  color: #F0EDE7; background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
}
.captcha-refresh {
  flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 11px; cursor: pointer;
  color: var(--muted); background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.captcha-refresh:hover { color: var(--ink); border-color: rgba(30, 193, 203, .5); background: rgba(30, 193, 203, .1); }
.captcha-refresh svg { display: block; }
.captcha-input { flex: 1 1 auto; min-width: 0; }

/* ---- indikator kekuatan password ---- */
.pw-meter { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pw-bars { display: flex; gap: 4px; flex: 1 1 auto; }
.pw-bar {
  height: 5px; flex: 1 1 0; border-radius: 99px;
  background: rgba(255, 255, 255, 0.09);
  transition: background .18s ease;
}
.pw-meter.is-weak .pw-bar.on   { background: var(--red); }
.pw-meter.is-medium .pw-bar.on { background: var(--amber); }
.pw-meter.is-strong .pw-bar.on { background: var(--green); }
.pw-label {
  flex: 0 0 auto; font-size: .76rem; font-weight: 700;
  color: var(--muted); min-width: 46px; text-align: right;
}
.pw-meter.is-weak .pw-label   { color: var(--red-soft); }
.pw-meter.is-medium .pw-label { color: var(--amber); }
.pw-meter.is-strong .pw-label { color: #5FDCE6; }

/* .field .hint punya specificity (0,2,0) → varian status WAJIB 2 kelas juga */
.field .hint.hint-ok  { color: #5FDCE6; }
.field .hint.hint-bad { color: var(--red-soft); }

/* ---- tombol Google OAuth ----
   Latar PUTIH (mengikuti pedoman merek Google) → teksnya WAJIB gelap.
   Sebelumnya memakai var(--ink) #F5F2EE (hampir putih) sehingga tulisan
   "Masuk dengan Google" nyaris tidak terlihat di atas latar putih. */
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 18px; border-radius: 12px;
  font-weight: 700; font-size: .92rem; color: #1B1A23; text-decoration: none;
  background: #FFFFFF; border: 1px solid rgba(255, 255, 255, .4);
  transition: transform .18s ease, box-shadow .18s ease;
}
.oauth-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, .35); color: #1B1A23; }
.oauth-btn svg { display: block; flex: 0 0 auto; }
.oauth-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px; font-size: .74rem; color: var(--faint);
}
.oauth-sep::before, .oauth-sep::after {
  content: ''; height: 1px; flex: 1 1 auto; background: var(--line);
}

/* ---- form dua/tiga kolom (dipakai onboarding) ----
   Kelas `.cms-form*` dipakai ulang oleh onboarding.php; di dashboard
   belum ada padanannya, jadi pola grid-nya didefinisikan di sini. */
.cms-form .field { margin-bottom: 16px; }
.cms-form label { font-size: .84rem; font-weight: 600; color: #D8D3CD; }
.cms-form label .req { color: var(--red-soft); }
.cms-form-row-3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 16px; align-items: start;
}
.cms-form-row-3 > .field { min-width: 0; }

/* Dua kolom — dipakai baris "Saldo Awal + Mata Uang" (onboarding,
   Pengaturan → akun, modal Deposit/Withdraw). */
.cms-form-row-2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px; align-items: start;
}
.cms-form-row-2 > .field { min-width: 0; }
/* varian: kolom pertama lebih lebar (angka nominal + pilihan mata uang) */
.cms-form-row-2.is-wide-first { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* ---- onboarding (4 langkah) ---- */
.ob-wrap { max-width: 760px; margin: 44px auto 80px; }
.ob-head { text-align: center; margin-bottom: 26px; }
.ob-steps {
  list-style: none; display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center; margin: 0 0 26px; padding: 0;
}
.ob-step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 8px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; color: var(--faint);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
}
.ob-step-no {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; flex: 0 0 auto;
  color: var(--muted); background: rgba(255, 255, 255, 0.08);
}
.ob-step.active { color: var(--ink); border-color: rgba(30, 193, 203, .45); background: var(--grad-soft); }
.ob-step.active .ob-step-no { color: var(--teal-ink); background: var(--grad); }
.ob-step.done { color: #5FDCE6; border-color: rgba(30, 193, 203, .3); }
.ob-step.done .ob-step-no { color: var(--teal-ink); background: var(--green); }
.ob-step .ob-step-no svg { display: block; }

.ob-card { padding: 30px 32px; }
.ob-title { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 8px; }
/* .card p (0,1,1) menang atas .ob-sub (0,1,0) → pakai 2 kelas */
.ob-card .ob-sub { font-size: .86rem; color: var(--muted); line-height: 1.7; margin: 0 0 22px; }
.ob-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.ob-ins { margin-bottom: 18px; }
.ob-ins-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.ob-ins-name { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; color: var(--ink); }
.ob-ins-name svg { display: block; }
.ob-pairs { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-pair {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-size: .78rem; font-weight: 600; color: var(--muted);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  transition: all .16s ease;
}
.ob-pair:hover { border-color: var(--line-strong); color: var(--ink); }
.ob-pair input { width: 14px; height: 14px; margin: 0; accent-color: var(--grad); cursor: pointer; }
.ob-pair:has(input:checked) { color: #5FDCE6; border-color: rgba(30, 193, 203, .45); background: var(--grad-soft); }

.ob-templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.ob-template {
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
  padding: 14px 15px; border-radius: 13px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  transition: all .18s ease;
}
.ob-template:hover { border-color: rgba(30, 193, 203, .45); background: rgba(30, 193, 203, .07); }
.ob-template b { font-size: .84rem; color: var(--ink); }
.ob-template span { font-size: .72rem; color: var(--faint); line-height: 1.5; }

.ob-checks { display: flex; flex-direction: column; gap: 9px; margin-bottom: 10px; }
.ob-check { display: flex; }
.ob-check .input { flex: 1 1 auto; }

.ob-done { display: flex; flex-direction: column; align-items: center; padding: 8px 0 2px; }
.ob-done-ico {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  margin-bottom: 16px; color: var(--teal-ink); background: var(--grad);
}
.ob-done-ico svg { display: block; }
.ob-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; margin-top: 20px; }
.ob-sum-item {
  display: flex; flex-direction: column; gap: 6px; text-align: center; padding: 16px 12px;
  border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
}
.ob-sum-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ob-sum-item b { font-family: var(--font-display); font-size: 1rem; color: var(--ink); }

/* ---- toast notifikasi real-time ---- */
.rt-toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 9998;
  max-width: min(340px, calc(100vw - 36px));
  padding: 12px 16px; border-radius: 13px;
  font-size: .85rem; font-weight: 600; color: var(--ink);
  background: rgba(32, 30, 42, .96); border: 1px solid var(--line-strong);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.rt-toast.show { opacity: 1; transform: translateY(0); }
/* titik header berdenyut saat ada pembaruan masuk tanpa reload */
.dash-dot.pulse { animation: pulse-dot 1.8s infinite; }

/* ---- Akun Saya: perangkat & riwayat aktivitas ---- */
.sess-list { display: flex; flex-direction: column; }
.sess-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sess-row:last-child { border-bottom: 0; }
.sess-ico {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
}
.sess-ico svg { display: block; }
.sess-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.sess-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sess-top b { font-size: .85rem; color: #F0EDE7; }
.sess-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .72rem; color: var(--faint); }
.sess-now {
  font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #5FDCE6; background: rgba(30, 193, 203, .14);
  border: 1px solid rgba(30, 193, 203, .34); padding: 3px 8px; border-radius: 999px;
}
.sess-actions { flex: 0 0 auto; }

@media (max-width: 780px) {
  .cms-form-row-3 { grid-template-columns: minmax(0, 1fr); }
  .cms-form-row-2, .cms-form-row-2.is-wide-first { grid-template-columns: minmax(0, 1fr); }
  .ob-templates { grid-template-columns: minmax(0, 1fr); }
  .ob-summary { grid-template-columns: minmax(0, 1fr); }
  .ob-card { padding: 24px 20px; }
  .ob-wrap { margin: 28px auto 60px; }
  .captcha-row { flex-wrap: wrap; }
  .captcha-input { flex: 1 1 100%; }
  .sess-row { flex-wrap: wrap; }
  .sess-actions { margin-left: 44px; }
}

/* ============================================================
   BOTTOM NAV BAR (layar kecil) — navigasi khas aplikasi mobile
   ------------------------------------------------------------
   Di layar kecil susunan header jadi:
     KIRI  : logo      KANAN : inbox · notifikasi · hamburger
   Tombol "+" (trade baru) dan akun DIPINDAH ke bar bawah ini.
   Bar-nya fixed di dasar layar; konten halaman diberi padding bawah
   supaya baris terakhir tidak tertutup (termasuk safe-area iOS).
   ============================================================ */
.dash-bnav { display: none; }

@media (max-width: 860px) {
  /* --- header: sisi kiri hanya logo, hamburger pindah ke kanan --- */
  .dash-left .dash-side-toggle { display: none; }
  .dash-side-toggle-r { display: flex; }
  /* tombol + dan pill akun tidak lagi di header (pindah ke bar bawah) */
  .dash-actions .dash-add { display: none; }
  .dash-actions .dash-profile { display: none; }

  .dash-topbar-inner { flex-wrap: nowrap; align-items: center; gap: 10px; }
  .dash-left { width: auto; flex: 1 1 auto; min-width: 0; }
  .dash-actions { width: auto; flex: 0 0 auto; margin-left: auto; flex-wrap: nowrap; }
  .dash-actions { gap: 6px; }

  /* --- ruang di dasar halaman untuk bar --- */
  /* tinggi bar terukur 79px (termasuk tombol + yang terangkat 14px) →
     beri 84px supaya baris konten terakhir tidak tertutup */
  body.has-bnav { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .dash-foot { margin-bottom: 0; }

  .dash-bnav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(20, 19, 25, 0.96);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .4);
  }
  .bnav-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 2px 6px; border-radius: 12px;
    color: var(--faint); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .bnav-item .bnav-ico { display: block; line-height: 0; }
  .bnav-item .bnav-ico svg { display: block; }
  .bnav-item .bnav-label { font-size: .62rem; font-weight: 700; letter-spacing: .02em; }
  .bnav-item.active { color: #5FDCE6; }
  .bnav-item.active .bnav-ico { color: #1EC1CB; }
  .bnav-item:active { background: rgba(255, 255, 255, 0.06); }

  /* tombol tengah: terangkat seperti FAB */
  .bnav-add {
    justify-self: center;
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    margin-bottom: 14px;
    color: var(--teal-ink); background: var(--grad);
    border: 3px solid rgba(20, 19, 25, .96);
    box-shadow: 0 8px 22px rgba(30, 193, 203, .35);
    cursor: pointer;
    transition: transform .16s ease;
  }
  .bnav-add svg { display: block; }
  .bnav-add:active { transform: scale(.94); }

  /* sidebar off-canvas berhenti di atas bar supaya bar tetap terpakai */
  .dash-side { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   TOOLS — CALENDAR · EMOSI · BACKTEST PLAYBOOK
   ------------------------------------------------------------
   Semua kelas baru berawalan `cl-` / `em-` / `emj-` / `bt-` / `btj-`.
   Padding, radius, ukuran teks, dan warna memakai nilai yang SAMA dengan
   komponen yang sudah ada (kartu 20–22px, radius 12–16px, teks 14px dasar,
   label `.72rem`, badge `.73rem`) supaya tidak ada gaya baru yang menyimpang.
   ============================================================ */

/* ---------- Calendar: toolbar bulan/tahun + akun ---------- */
.cl-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.cl-toolbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-toolbar-right { display: flex; align-items: center; gap: 10px; }
.cl-acc .cselect-btn { min-width: 190px; }
.cl-acc .cselect-menu { min-width: 200px; }

/* Label dengan IKON di dalamnya: `svg` global memakai `display: block`
   sehingga ikon mendorong teks ke baris berikutnya (label jadi 2 baris dan
   tingginya beda dengan label lain). Dibungkus inline-flex agar SATU baris,
   pola yang sama seperti komponen lain (mis. `.tv-cal-title`, `.mb-meta-item`). */
.cl-ico-label { display: inline-flex; align-items: center; gap: 6px; }
.cl-ico-label svg { flex: 0 0 auto; }

/* ---------- Calendar: kartu target bulanan ---------- */
.cl-target-card { padding: 22px; margin-bottom: 22px; }
.cl-target-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.cl-target-head .card-title { margin-bottom: 6px; }
.cl-target-sub { font-size: .82rem; color: var(--faint); line-height: 1.6; margin: 0; }
.cl-target-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.cl-target-hint { font-size: .7rem; color: var(--faint); line-height: 1.5; }
.cl-target-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; margin-top: 4px;
}
.cl-target-msg { font-size: .78rem; font-weight: 600; color: var(--faint); margin-right: auto; }
.cl-target-msg.ok { color: #5FDCE6; }
.cl-target-msg.err { color: var(--red-soft); }

/* progres target (memakai .progress yang sudah ada) */
.cl-progress {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
}
.cl-prog-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.cl-prog-label { font-size: .74rem; font-weight: 700; color: var(--muted); }
.cl-prog-val {
  font-size: .78rem; font-weight: 700; color: #F0EDE7;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cl-prog-val em { font-style: normal; font-weight: 600; color: var(--faint); }

/* ---------- Calendar: kalender + panel detail ---------- */
.cl-wrap {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 22px; align-items: start; margin-bottom: 22px;
}
.cl-cal-card { padding: 22px; }
.cl-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.cl-cal-head b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.cl-cal-sub { display: block; font-size: .74rem; color: var(--faint); margin-top: 3px; }
.cl-cal-foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.cl-legend { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--faint); }
.cl-legend .cal-dot { position: static; transform: none; }
.cl-legend-note { margin-left: auto; }

.cl-detail-card { padding: 22px; min-height: 240px; }
.cl-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; padding: 34px 12px; color: var(--faint);
}
.cl-empty svg { color: var(--faint); opacity: .8; }
.cl-empty b { color: #F0EDE7; font-size: .95rem; }
.cl-empty span { font-size: .82rem; line-height: 1.6; max-width: 34ch; }

.cl-detail-date { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; }
.cl-detail-day { font-size: .74rem; color: var(--faint); margin-top: 2px; }
.cl-detail-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.cl-detail-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cl-detail-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line);
}
.cl-detail-row .cd-sym { font-weight: 700; font-size: .84rem; }
.cl-detail-row .cd-pnl {
  text-align: right; font-family: var(--font-display); font-weight: 700;
  font-size: .84rem; font-variant-numeric: tabular-nums;
}
.cl-sugg {
  font-size: .8rem; line-height: 1.65; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); margin: 0;
}
.cl-sugg.good { background: rgba(30,193,203, 0.08); border-color: rgba(30,193,203, 0.3); color: #BCEFE9; }
.cl-sugg.bad  { background: rgba(224,138,103, 0.08); border-color: rgba(224,138,103, 0.3); color: #F0C9B8; }
.cl-sugg.flat { background: rgba(255, 255, 255, 0.05); border-color: var(--line); color: #D8D3CD; }
.cl-sugg strong { display: block; margin-bottom: 3px; color: #F0EDE7; }

/* ---------- Calendar: rekap per bulan ---------- */
.cl-months-card { padding: 22px; }
.cl-months-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.cl-month-link { font-weight: 700; color: #F0EDE7; }
.cl-month-link:hover { color: #5FDCE6; }
.cl-no-target { font-size: .72rem; color: var(--faint); }
.cl-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cl-table th, .cl-table td { font-size: .78rem; }
.cl-empty-line { font-size: .86rem; color: var(--muted); line-height: 1.7; margin: 0; }
.cl-empty-line a { color: #5FDCE6; font-weight: 700; }
.cl-foot-note, .em-foot-note, .bt-foot-note {
  font-size: .78rem; color: var(--faint); line-height: 1.7; margin: 20px 0 0;
}
.cl-foot-note b, .em-foot-note b, .bt-foot-note b { color: var(--muted); }

/* ---------- Emosi: KPI ---------- */
.em-filter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px;
}
.em-filter-label { font-size: .74rem; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.em-acc .cselect-btn { min-width: 190px; }
.em-acc .cselect-menu { min-width: 200px; }

.em-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.em-kpi-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.em-kpi-label {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
.em-kpi-value {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 700;
  color: #F0EDE7; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.em-kpi-value em { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--faint); margin-left: 2px; }
.em-kpi-sub { font-size: .74rem; color: var(--faint); }

.em-wrap {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 22px; align-items: start; margin-bottom: 22px;
}
.em-chart-card, .em-tiers-card, .em-moods-card { padding: 22px; }
.em-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.em-card-head .card-title { margin-bottom: 0; }
.em-chart-box { height: 168px; }
.em-chart-box canvas { width: 100%; height: 168px; display: block; }
.em-corrtxt { font-size: .8rem; color: var(--muted); line-height: 1.7; margin: 12px 0 0; }
.em-empty-line { font-size: .84rem; color: var(--muted); line-height: 1.7; margin: 0; }

.em-empty {
  padding: 40px 22px; display: flex; flex-direction: column;
  align-items: center; gap: 10px; text-align: center;
}
.em-empty-ico { font-size: 2rem; }
.em-empty b { font-family: var(--font-display); font-size: 1.1rem; }
.em-empty span { font-size: .86rem; color: var(--muted); line-height: 1.7; max-width: 56ch; }

.em-tiers { display: flex; flex-direction: column; gap: 12px; }
.em-tier-row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) 52px auto;
  align-items: center; gap: 10px;
}
.em-tier-name { font-size: .76rem; font-weight: 800; }
.em-tier-name.great { color: #5FDCE6; }
.em-tier-name.good  { color: #8FE3EA; }
.em-tier-name.warn  { color: #E9B173; }
.em-tier-name.bad   { color: var(--red-soft); }
.em-tier-name.flat  { color: var(--muted); }
.em-tier-bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.em-tier-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--grad); }
.em-tier-num { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.em-tier-meta { font-size: .72rem; color: var(--faint); white-space: nowrap; }

.em-table th, .em-table td { font-size: .78rem; }
.em-delta { white-space: nowrap; }

/* ---------- Emosi: jurnal harian ---------- */
.emj-wrap {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 22px; align-items: start; margin-bottom: 22px;
}
.emj-form-card, .emj-sum-card, .emj-list-card { padding: 22px; }
.emj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.emj-moods { display: flex; flex-wrap: wrap; gap: 8px; }
.emj-mood {
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font-size: .82rem; font-weight: 700;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong);
  color: var(--muted);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.emj-mood:hover { color: var(--ink); }
.emj-mood.active { border-color: rgba(30,193,203,.55); background: var(--grad-soft); color: #F2EFE9; }
.emj-mood.active.great { border-color: rgba(30,193,203,.7); }
.emj-mood.active.warn  { border-color: rgba(217,142,63,.6); background: rgba(217,142,63,.12); }
.emj-mood.active.bad   { border-color: rgba(224,138,103,.6); background: rgba(224,138,103,.12); }
.emj-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px;
}
.emj-msg { font-size: .78rem; font-weight: 600; color: var(--faint); margin-right: auto; }
.emj-msg.ok { color: #5FDCE6; }
.emj-msg.err { color: var(--red-soft); }

.emj-sum-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.emj-sum-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line);
  font-size: .82rem; color: var(--muted);
}
.emj-sum-row b { color: #F0EDE7; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.emj-dist { display: flex; flex-direction: column; gap: 9px; }
.emj-dist-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) 28px; align-items: center; gap: 10px; }
.emj-dist-name { font-size: .74rem; font-weight: 700; color: var(--muted); }
.emj-dist-name.great { color: #5FDCE6; }
.emj-dist-name.warn  { color: #E9B173; }
.emj-dist-name.bad   { color: var(--red-soft); }
.emj-dist-bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.emj-dist-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--grad); }
.emj-dist-num { font-size: .76rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.emj-sum-note { font-size: .76rem; color: var(--faint); line-height: 1.65; margin: 16px 0 0; }

.emj-list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.emj-list { display: flex; flex-direction: column; gap: 10px; }
.emj-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
  align-items: start; padding: 14px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line);
}
.emj-item-date b { display: block; font-size: .88rem; color: #F0EDE7; }
.emj-item-date span { display: block; font-size: .74rem; color: var(--faint); margin-top: 3px; }
.emj-item-note {
  grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--muted);
  line-height: 1.65; white-space: pre-line;
}
.emj-item-actions { display: flex; align-items: center; gap: 6px; }

/* ---------- Backtest: KPI ---------- */
.bt-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.bt-kpi-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.bt-kpi-label {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
.bt-kpi-value {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 700;
  color: #F0EDE7; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.bt-kpi-sub { font-size: .74rem; color: var(--faint); }

/* ---------- Backtest: playbook & jurnal ---------- */
.bt-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 22px; align-items: start;
}
.bt-form-card, .bt-list-card { padding: 22px; }
.bt-form-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.bt-form-head .card-title { margin-bottom: 0; }
.bt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.bt-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bt-form-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px;
}
.bt-msg { font-size: .78rem; font-weight: 600; color: var(--faint); margin-right: auto; }
.bt-msg.ok { color: #5FDCE6; }
.bt-msg.err { color: var(--red-soft); }
.bt-hint { font-size: .7rem; color: var(--faint); line-height: 1.5; }
.bt-opt {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--faint);
}
.bt-switch {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .84rem; color: var(--muted); cursor: pointer;
}
.bt-switch input { width: 16px; height: 16px; accent-color: #1EC1CB; }

.bt-rules-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.bt-rules { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.bt-rule { display: flex; align-items: center; gap: 8px; }
.bt-rule-no {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 800;
  background: rgba(30,193,203, 0.15); color: #5FDCE6;
  border: 1px solid rgba(30,193,203, 0.32);
}
.bt-rule .input { flex: 1 1 auto; min-width: 0; }

.bt-list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.bt-list { display: flex; flex-direction: column; gap: 12px; }
.bt-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
  align-items: start; padding: 15px 17px; border-radius: 15px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line);
}
.bt-item.is-off { opacity: .62; }
.bt-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.bt-item-top b { font-size: .92rem; color: #F0EDE7; }
.bt-item-desc { font-size: .8rem; color: var(--muted); line-height: 1.6; margin: 0 0 8px; }
.bt-item-rules { margin: 0 0 10px; padding-left: 18px; }
.bt-item-rules li { font-size: .78rem; color: var(--muted); line-height: 1.6; }
.bt-item-rules li.bt-more { color: var(--faint); font-style: italic; }
.bt-item-stats { display: flex; flex-wrap: wrap; gap: 14px; }
.bt-stat { font-size: .74rem; color: var(--faint); }
.bt-stat b { color: #F0EDE7; font-variant-numeric: tabular-nums; }
.bt-item-actions { display: flex; align-items: center; gap: 6px; }
.bt-empty { font-size: .86rem; color: var(--muted); line-height: 1.7; margin: 0; }
.bt-empty b { color: #F0EDE7; }
.bt-empty-card {
  padding: 40px 22px; display: flex; flex-direction: column;
  align-items: center; gap: 10px; text-align: center;
}
.bt-empty-card b { font-family: var(--font-display); font-size: 1.1rem; }
.bt-empty-card span { font-size: .86rem; color: var(--muted); line-height: 1.7; max-width: 52ch; }

.btj-results { display: flex; gap: 8px; flex-wrap: wrap; }
.btj-res {
  flex: 1 1 auto; min-width: 110px;
  padding: 10px 14px; border-radius: 11px; cursor: pointer;
  font-size: .84rem; font-weight: 700;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong);
  color: var(--muted);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.btj-res:hover { color: var(--ink); }
.btj-res.active.win  { background: rgba(30,193,203, 0.16); border-color: rgba(30,193,203,.55); color: #5FDCE6; }
.btj-res.active.loss { background: rgba(224,138,103, 0.16); border-color: rgba(224,138,103,.55); color: #E08A67; }
.btj-res.active.be   { background: rgba(255,255,255, 0.1); border-color: var(--line-strong); color: #F0EDE7; }

.bt-stats-wrap { margin-bottom: 22px; }
.bt-table th, .bt-table td { font-size: .78rem; }
.btj-list-wrap { display: flex; flex-direction: column; gap: 18px; }
.btj-group-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.btj-group-head b { font-size: .88rem; color: #F0EDE7; }
.btj-list { display: flex; flex-direction: column; gap: 8px; }
.btj-item {
  display: grid;
  grid-template-columns: 92px 96px auto auto auto auto minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line);
  font-size: .78rem;
}
.btj-date { color: var(--muted); white-space: nowrap; }
.btj-sym { font-weight: 700; color: #F0EDE7; white-space: nowrap; }
.btj-pips { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.btj-rr { color: var(--faint); white-space: nowrap; }
.btj-note {
  color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.btj-actions { display: flex; align-items: center; gap: 6px; }

/* ---------- responsif (sama seperti halaman Tools lain) ---------- */
@media (max-width: 1180px) {
  .cl-wrap, .em-wrap, .emj-wrap, .bt-wrap { grid-template-columns: minmax(0, 1fr); }
  .em-kpi, .bt-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cl-target-grid, .emj-grid, .bt-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btj-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .btj-note { grid-column: 1 / -1; white-space: normal; }
}
@media (max-width: 560px) {
  .cl-target-grid, .emj-grid, .bt-grid, .bt-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .em-kpi, .bt-kpi { grid-template-columns: minmax(0, 1fr); }
  .cl-prog-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .em-tier-row { grid-template-columns: 68px minmax(0, 1fr) 46px; }
  .em-tier-meta { grid-column: 1 / -1; }
  .btj-item { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   AKUN SAYA — LIST + SLIDER 10 BARIS
   ------------------------------------------------------------
   Permintaan user: kartu "Perangkat & Sesi Aktif" dan "Riwayat Aktivitas
   Login" ditampilkan sebagai LIST (pola sama seperti CMS → Users), hanya
   10 baris yang terlihat, sisanya lewat navigasi geser.

   Karena itu tinggi baris DIPAKU (`--accl-h`): satu baris = satu tinggi
   tetap, sehingga "10 baris terlihat" pasti — sama seperti daftar padat
   di CMS yang juga satu baris + ellipsis. Nilai yang sama dipakai JS
   (`ACCL_ROW_H`) untuk menghitung langkah geser, jadi kalau diubah di sini
   ubah juga di assets/js/account.js.
   ============================================================ */
.acclist { --accl-h: 38px; --accl-per: 10; }

/* kartu halaman Akun Saya = DUA KOLOM penuh.
   PENTING: `.acc-grid` (dipakai slider di Pengaturan) bernilai 3 kolom dan
   berada LEBIH AKHIR di berkas ini daripada `.grid-2`, sehingga dengan
   specificity yang sama aturan 3 kolom itu yang menang → kartu tampil
   sempit. Selector 2 kelas (`.grid.acc-grid`) mengembalikannya ke 2 kolom
   tanpa bergantung urutan dan TIDAK menyentuh slider di Pengaturan. */
.grid.acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Header keterangan kolom — pola sama dengan `.cms-list-head` di CMS */
.acclist-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 0 2px 9px; margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
.acclist-head .acclist-total { color: #5FDCE6; letter-spacing: .04em; }

/* Area tampil: TEPAT 10 baris (10 × --accl-h). Lebih dari itu digeser.
   `overflow-y:auto` (bukan hidden) supaya roda mouse tetap bisa menggeser;
   bilah gulirnya disembunyikan agar navigasi geser yang utama terlihat rapi. */
.acclist-view {
  max-height: calc(var(--accl-h) * 10);
  overflow-y: auto; overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.acclist-view::-webkit-scrollbar { width: 0; height: 0; }

/* Satu baris list = SATU baris teks (ellipsis), seperti daftar padat CMS */
.acclist-row {
  display: grid; align-items: center; gap: 10px;
  height: var(--accl-h);
  padding: 0 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-size: .74rem; color: var(--muted);
}
.acclist-row:last-child { border-bottom: 0; }
.acclist-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.acclist-row .acl-main { font-weight: 700; color: #F0EDE7; font-size: .78rem; }
.acclist-row .acl-mono { font-variant-numeric: tabular-nums; }
.acclist-row .acl-soft { color: var(--faint); }
.acclist-row .acl-time { color: var(--faint); text-align: right; }
.acclist-row .acl-act { display: flex; justify-content: flex-end; }
.acclist-row .acl-badges { display: flex; align-items: center; gap: 6px; overflow: hidden; }
.acclist-row .badge { font-size: .62rem; padding: 2px 8px; }
.acclist-row .sess-now { font-size: .58rem; padding: 2px 7px; }

/* Kolom per jenis list */
.acclist.is-sess .acclist-row    { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, .95fr) 74px 30px; }
.acclist.is-activity .acclist-row{ grid-template-columns: 92px minmax(0, 1.3fr) minmax(0, 1fr) 74px; }

/* Navigasi geser (hanya muncul kalau baris > 10) */
.acclist-nav {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.acclist-nav[hidden] { display: none !important; }
.acclist-page {
  font-size: .8rem; font-weight: 800; color: var(--muted);
  font-variant-numeric: tabular-nums; min-width: 46px; text-align: center;
}
.acclist-page b { color: #F0EDE7; }

@media (max-width: 1080px) {
  /* kartu kembali 1 kolom; list tetap 10 baris terlihat */
  .grid.acc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* layar sempit: kolom tambahan disembunyikan agar tetap SATU baris rapi */
  .acclist.is-sess .acclist-row    { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 30px; }
  .acclist.is-activity .acclist-row{ grid-template-columns: 88px minmax(0, 1fr) 70px; }
  .acclist-row .acl-hide-sm { display: none; }
}

/* ============================================================
   KERANJANG (halaman Langganan) — pilih beberapa paket sekaligus
   ------------------------------------------------------------
   Tiap kartu produk punya pemilih durasi + tombol "Keranjang".
   Pilihan dikumpulkan di bar keranjang lalu dikirim SEKALI ke checkout
   lewat ?cart=pk:dk,pk:dk (item pertama = produk utama, sisanya add-on).
   ============================================================ */
.cart-count {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #5FDCE6; background: rgba(30, 193, 203, .12);
  border: 1px solid rgba(30, 193, 203, .34); border-radius: 999px; padding: 4px 11px;
}

.cart-bar {
  margin: 16px 0 4px; padding: 14px 16px;
  border: 1px solid rgba(30, 193, 203, .34); border-radius: 14px;
  background: rgba(30, 193, 203, .06);
}
.cart-bar[hidden] { display: none !important; }
.cart-bar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cart-bar-head b { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: #F0EDE7; }
.cart-bar-head svg { color: #5FDCE6; }

.cart-items { display: flex; flex-direction: column; gap: 6px; }
.cart-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  font-size: .8rem;
}
.cart-item-name { font-weight: 700; color: #F0EDE7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-item-name small { font-weight: 600; color: var(--faint); margin-left: 6px; }
.cart-item-price { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }

.cart-bar-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid rgba(30, 193, 203, .22);
}
.cart-total { display: flex; flex-direction: column; gap: 2px; }
.cart-total span { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.cart-total b { font-family: var(--font-display); font-size: 1.1rem; color: #F0EDE7; font-variant-numeric: tabular-nums; }

.cart-hint { font-size: .8rem; color: var(--faint); line-height: 1.6; margin: 12px 0 0; }
.cart-hint b { color: var(--muted); }
.cart-hint[hidden] { display: none !important; }

/* Kaki kartu produk: tombol "+ Keranjang" + ikon hapus.
   TOMBOL HIJAU SEJAK AWAL (permintaan user) — warnanya tidak lagi menandai
   "sudah di keranjang", melainkan:
     • belum ada durasi dipilih  → HIJAU REDUP (disabled, opacity .5)
     • durasi sudah dipilih      → hijau penuh (aktif)
     • sudah masuk keranjang     → hijau + label "Di keranjang" (.is-added)
   Dasar stylenya sudah dari `.btn-primary`; di sini hanya keadaan disabled
   yang ditimpa supaya tetap hijau (bukan abu). */
.prod-cart-dur { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 2px; }
.prod-cart-dur .btn { margin-top: 0; }
.btn-cart { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
.btn-cart[disabled] {
  background: #1EC1CB; color: #14262A; border-color: #1EC1CB;
  box-shadow: none; opacity: .5; cursor: not-allowed; transform: none;
}
.btn-cart[disabled]:hover {
  background: #1EC1CB; color: #14262A; border-color: #1EC1CB;
  box-shadow: none; transform: none;
}
.btn-cart.is-added { box-shadow: 0 0 0 3px rgba(30, 193, 203, .16); }
.btn-cart-del { flex: 0 0 auto; }
.btn-cart-del[disabled] { opacity: .32; cursor: not-allowed; }
.btn-cart-del[disabled]:hover { background: transparent; color: var(--faint); }

/* Baris durasi yang sedang dipilih (belum tentu sudah di keranjang) */
.prod-price-row.is-picked {
  border-color: rgba(30, 193, 203, .55); background: var(--grad-soft);
  color: var(--ink); box-shadow: inset 3px 0 0 0 #1EC1CB;
}
.prod-price-row.is-picked b { color: #5FDCE6; }

/* Kilat singkat saat baris/keranjang berubah (outline agar tidak menimpa
   penanda "is-picked" yang memakai box-shadow) */
.prod-price-row.is-flash { outline: 2px solid rgba(30, 193, 203, .5); outline-offset: 1px; }
.cart-bar.is-flash { box-shadow: 0 0 0 3px rgba(30, 193, 203, .22); }

@media (max-width: 560px) {
  .prod-cart-dur { flex-wrap: nowrap; }
  .cart-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .cart-item-price { grid-column: 1; }
}

/* ============================================================
   TRADING CHECKLIST (Tools → check-in harian disiplin)
   ------------------------------------------------------------
   Tab: Hari Ini · Riwayat & Statistik. Kunjungi catatan aturan di
   dashboard/includes/checklist.php (ambang disiplin CHECKLIST_PASS).
   ============================================================ */
/* Kartu status + pilih tanggal */
.cl-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.cl-hero-main { min-width: 0; }
.cl-hero-date { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin-top: 6px; }
.cl-hero-sub { color: var(--muted); font-size: .86rem; margin-top: 8px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cl-hero-side { display: flex; flex-direction: column; gap: 7px; min-width: 210px; }
.cl-datelbl { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.cl-hero-hint { font-size: .72rem; color: var(--faint); line-height: 1.6; }

/* Progres */
.cl-progress {
  margin-top: 18px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .03);
}
.cl-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .78rem; color: var(--muted); }
.cl-progress-head b { font-family: var(--font-display); font-size: 1.2rem; color: #F0EDE7; }
.cl-bar { height: 9px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; margin: 10px 0 9px; }
.cl-fill { height: 100%; border-radius: 99px; background: var(--grad); transition: width .25s ease; }
.cl-fill.is-pass { background: #1EC1CB; }
.cl-progress-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .74rem; color: var(--faint); }
.cl-progress-foot b { color: var(--ink); }
.cl-pass-note { color: var(--faint); }

/* Daftar item */
.cl-card { margin-top: 22px; }
.cl-items { display: flex; flex-direction: column; gap: 10px; }
.cl-item {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px;
  background: rgba(255, 255, 255, .02); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.cl-item:hover { border-color: rgba(255, 255, 255, .22); }
.cl-item.done { border-color: rgba(30, 193, 203, .45); background: rgba(30, 193, 203, .07); }
.cl-check { position: absolute; opacity: 0; width: 0; height: 0; }
.cl-box {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px;
  border: 1.5px solid var(--line-strong); display: grid; place-items: center;
  color: transparent; background: rgba(255, 255, 255, .03); transition: all .15s ease;
}
.cl-box svg { display: block; }
.cl-item.done .cl-box { background: #1EC1CB; border-color: #1EC1CB; color: #14262A; }
.cl-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cl-label { font-weight: 700; color: #F0EDE7; font-size: .9rem; }
.cl-item.done .cl-label { color: #9FE9E1; }
.cl-hint { font-size: .76rem; color: var(--faint); line-height: 1.55; }
.cl-note-field { margin-top: 20px; }
.cl-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-top: 18px;
}
.cl-actions-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.cl-msg { font-size: .78rem; color: var(--muted); min-height: 18px; }
.cl-msg.ok  { color: #5FDCE6; }
.cl-msg.err { color: var(--red-soft); }
.cl-last { font-size: .72rem; color: var(--faint); margin-top: 12px; }
.cl-empty { color: var(--faint); font-size: .82rem; padding: 14px 2px; }

/* Panel kelola item */
.cl-manage[hidden] { display: none !important; }
.cl-manage { margin-top: 22px; }
.cl-mlist { display: flex; flex-direction: column; gap: 10px; }
.cl-mrow { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; }
.cl-mrow .input { font-size: .82rem; padding: 9px 12px; }
.cl-mtoggle { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted); white-space: nowrap; cursor: pointer; }
.cl-mtoggle input { accent-color: #1EC1CB; width: 15px; height: 15px; margin: 0; }
.cl-madd { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.cl-madd .input { font-size: .82rem; padding: 10px 13px; }

/* Trade pada tanggal terpilih */
.cl-daytrades { margin-top: 22px; }
.cl-daylist { display: flex; flex-direction: column; gap: 8px; }
.cl-dayrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, .02); font-size: .82rem;
}
.cl-dayrow b { color: #F0EDE7; }
.cl-dayrow-meta { color: var(--faint); font-size: .76rem; }

/* Tab 2 — KPI */
.cl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cl-kpi { padding: 18px 20px; }
.cl-kpi-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.cl-kpi-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin-top: 8px; color: #F0EDE7; font-variant-numeric: tabular-nums; }
.cl-kpi-value.up { color: var(--green); }
.cl-kpi-value.down { color: var(--red-soft); }
.cl-kpi-sub { font-size: .74rem; color: var(--muted); margin-top: 3px; }

@media (max-width: 1180px) { .cl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .cl-mrow { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .cl-madd { grid-template-columns: 1fr; }
  .cl-hero-side { min-width: 0; width: 100%; }
}
@media (max-width: 560px) {
  .cl-kpis { grid-template-columns: 1fr; }
  .cl-dayrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
}

/* Badge kedisiplinan di kartu Trade Log + chip catatan risk > 1-3% */
.tlog-cl, .tlog-riskwarn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.tlog-cl.ok  { color: #5FDCE6; background: rgba(30, 193, 203, .12); border: 1px solid rgba(30, 193, 203, .34); }
.tlog-cl.no,
.tlog-riskwarn { color: var(--red-soft); background: rgba(224, 138, 103, .12); border: 1px solid rgba(224, 138, 103, .34); }
.tlog-cl svg, .tlog-riskwarn svg { display: block; }

/* Kartu ringkasan disiplin di Dashboard */
.cl-dash { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cl-dash-main { min-width: 0; flex: 1 1 260px; }
.cl-dash-ring {
  flex: 0 0 auto; width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: conic-gradient(#1EC1CB calc(var(--pct, 0) * 1%), rgba(255, 255, 255, .08) 0);
}
.cl-dash-ring span {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  background: #17161d; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #F0EDE7;
}
.cl-dash-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.cl-dash-stat b { display: block; font-family: var(--font-display); font-size: 1.15rem; color: #F0EDE7; }
.cl-dash-stat span { font-size: .72rem; color: var(--faint); }

/* ============================================================
   VERIFIKASI EMAIL (kode 6 digit)
   Dipakai di halaman login (tahap verifikasi pendaftaran)
   dan di Akun Saya (ganti password).
   ============================================================ */
.ob-verify-note {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; margin-bottom: 18px;
  border: 1px solid rgba(30, 193, 203, .34); border-radius: 13px;
  background: rgba(30, 193, 203, .08);
}
.ob-verify-note b { font-size: .9rem; color: #F0EDE7; }
.ob-verify-note span { font-size: .8rem; color: var(--muted); line-height: 1.65; }

input.verify-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.35rem; font-weight: 700; letter-spacing: .42em; text-align: center;
  padding: 12px 10px;
}
.pw-otp-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.pw-otp-row .field { flex: 1 1 200px; margin-bottom: 0; }
.pw-otp-msg { font-size: .8rem; min-height: 18px; margin-top: 8px; }
.pw-otp-msg.ok  { color: #5FDCE6; }
.pw-otp-msg.err { color: var(--red-soft); }

/* ============================================================
   TOOLS — MARKET WATCHLIST
   ------------------------------------------------------------
   Kepala halaman: judul + deskripsi di KIRI, tombol "+ Tambah" di KANAN.
   Tiga kartu form (WATCHLIST · ZONE · CHECKLIST) memakai gaya `.mbr-sec`
   yang sama dengan laporan Market Intelligent/Makro.
   ============================================================ */
.wl-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 20px; align-items: start; margin-bottom: 24px;
}
.wl-head-main { min-width: 0; }
.wl-title {
  margin: 0; font-family: var(--font-display); font-size: 1.35rem;
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #F2EFE9;
}
.wl-desc { margin: 8px 0 0; font-size: .84rem; line-height: 1.7; color: var(--muted); max-width: 640px; }
.wl-head .wl-add { align-self: start; white-space: nowrap; }

.wl-card { padding: 22px; margin-bottom: 20px; }
.wl-card > .mbr-sec { margin-top: 0; }

/* baris form */
.wl-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.wl-grid-3 > .field { min-width: 0; }

.wl-rows-head {
  display: grid; gap: 10px; align-items: center;
  padding: 0 2px 8px; margin-bottom: 2px;
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); border-bottom: 1px solid var(--line);
}
.wl-rows-head-zone  { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 38px; }
.wl-rows-head-check { grid-template-columns: minmax(0, 1fr) 38px; }

.wl-rows { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 4px; }
.wl-row { display: grid; gap: 10px; align-items: start; }
.wl-row-zone  { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 38px; }
.wl-row-check { grid-template-columns: minmax(0, 1fr) 38px; }
.wl-cell { min-width: 0; }
.wl-cell-act { display: flex; align-items: center; justify-content: center; padding-top: 6px; }
.wl-row-del { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; color: var(--red-soft); }
.wl-row-del:hover { border-color: rgba(224,138,103,.6); background: rgba(224,138,103,.1); }

/* tombol + Tambah per kartu: ada jarak atas & bawah */
.wl-row-add { margin: 14px 0 4px; }

/* opsi combo dengan ikon hapus (x) di samping tiap item daftar */
.wl-opt-row { display: flex; align-items: center; gap: 4px; }
.wl-opt-row .tf-opt { flex: 1 1 auto; min-width: 0; }
.wl-opt-del {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--faint);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.wl-opt-del:hover { color: var(--red-soft); background: rgba(224,138,103,.12); border-color: rgba(224,138,103,.34); }
.wl-opt-del svg { display: block; }

/* daftar "Watchlist Saya" */
.wl-list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.wl-list-title { font-weight: 800; font-size: .95rem; }
.wl-list-count { font-size: .74rem; color: var(--faint); font-weight: 600; }
.wl-table td { vertical-align: middle; }
.wl-empty { text-align: center; color: var(--faint); padding: 22px 10px !important; white-space: normal !important; }
.wl-eye, .wl-del { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; }
.wl-del { color: var(--red-soft); }
.wl-del:hover { border-color: rgba(224,138,103,.6); background: rgba(224,138,103,.1); }

/* progress mini di tabel */
.wl-prog-mini {
  display: inline-block; vertical-align: middle; width: 64px; height: 6px;
  border-radius: 99px; background: rgba(255,255,255,.09); overflow: hidden; margin-right: 8px;
}
.wl-prog-mini-fill { display: block; height: 100%; background: var(--green); border-radius: 99px; transition: width .25s ease; }
.wl-prog-mini-text { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- Modal detail ---- */
.wl-m-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.wl-m-sec { margin-top: 18px; }
.wl-m-title {
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #5FDCE6; padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); margin-bottom: 10px;
}
.wl-m-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wl-m-rows li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,.03); font-size: .8rem;
}
.wl-m-k { font-weight: 700; color: #F0EDE7; }
.wl-m-v { color: var(--muted); font-size: .76rem; }
.wl-m-empty { margin: 0; font-size: .8rem; color: var(--faint); }
.wl-m-check {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,.03); font-size: .82rem; margin-bottom: 8px;
  transition: border-color .15s ease, background .15s ease;
}
.wl-m-check:last-child { margin-bottom: 0; }
.wl-m-check:hover { border-color: rgba(46,216,226,.4); }
.wl-m-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.wl-m-box {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 6px;
  border: 1.6px solid var(--line-strong); background: rgba(255,255,255,.04);
  display: grid; place-items: center; transition: all .15s ease;
}
.wl-m-box::after {
  content: ''; width: 9px; height: 5px; border-left: 2px solid #14262A; border-bottom: 2px solid #14262A;
  transform: rotate(-45deg) translateY(-1px); opacity: 0;
}
.wl-m-check.done .wl-m-box { background: var(--green); border-color: var(--green); }
.wl-m-check.done .wl-m-box::after { opacity: 1; }
.wl-m-check.done .wl-m-name { color: #F0EDE7; }
.wl-m-name { min-width: 0; }
.wl-m-prog { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.wl-prog { flex: 1 1 auto; height: 8px; border-radius: 99px; background: rgba(255,255,255,.09); overflow: hidden; }
.wl-prog-fill { display: block; height: 100%; background: var(--green); border-radius: 99px; transition: width .25s ease; }
.wl-prog-text { flex: 0 0 auto; font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* tanda wajib isi (form watchlist tidak memakai .cms-form) */
.field label .req { color: var(--red-soft); }

@media (max-width: 980px) {
  .wl-grid-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .wl-head { grid-template-columns: minmax(0, 1fr); }
  .wl-head .wl-add { justify-self: start; }
  .wl-row-zone, .wl-rows-head-zone { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px; }
  .wl-row-zone .wl-cell:nth-child(3), .wl-rows-head-zone > span:nth-child(3) { display: none; }
  .wl-card { padding: 18px; }
}

/* ============================================================
   Modal konfirmasi bersama (FOConfirm) — pengganti confirm() browser
   ============================================================ */
.fo-confirm-text { margin: 0 0 4px; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.fo-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ============================================================
   WATCHLIST — penyempurnaan (permintaan user)
   ------------------------------------------------------------
   1) SEMUA field dalam satu baris TINGGINYA SAMA dengan field teks
      (Terdekat/Terjauh = 45px). `.tf-combo-btn` & `.cselect-btn` default
      hanya 39px karena padding 10px vs `.input` 12px.
   2) Dropdown combo TIDAK mengapung menutupi baris di bawahnya: menu
      dibuat mengalir di dalam selnya (position: static) sehingga baris
      berikutnya terdorong turun — tidak ada lagi yang tumpang tindih.
   ============================================================ */
.wl-card .tf-combo-btn,
.wl-card .cselect-btn {
  padding: 13px 13px;
  min-height: 45px;
}
.wl-card .input,
.wl-card input.input,
.wl-card textarea.input { min-height: 45px; }
/* kolom aksi per baris dilebarkan supaya tombol (45px) sejajar field */
.wl-rows-head-zone   { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 45px; }
.wl-row-zone         { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 45px; }
.wl-rows-head-check  { grid-template-columns: minmax(0, 1fr) 45px; }
.wl-row-check        { grid-template-columns: minmax(0, 1fr) 45px; }
.wl-cell-act { padding-top: 0; }
.wl-row-del { width: 45px; height: 45px; }

/* dropdown mengalir (tidak menutupi baris lain) */
#wlForm .tf-combo-menu {
  position: static;
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
}
#wlForm .tf-combo.open { z-index: auto; }

/* Dropdown INSTRUMEN & BIAS juga MENGALIR di dalam kartunya.
   🚩 Kenapa: `.card` punya `backdrop-filter` sehingga tiap kartu menjadi
   stacking context tersendiri — menu yang melayang (`position:absolute`)
   dari kartu WATCHLIST selalu TERTUTUP oleh kartu ZONE yang berada
   setelahnya di DOM. Dengan `position: static` menunya mengalir di dalam
   selnya (perilaku sama dengan combo Zone/Checklist di halaman ini). */
#wlForm .cselect-menu {
  position: static;
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
}

/* baris tombol Simpan — rata KANAN di bawah baris Checklist
   (sejak mode form `?new=1`, di baris yang sama ada "Batalkan" di kirinya) */
.wl-save-row { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 16px 0 2px; }

/* Baris aksi pada tabel Watchlist: dua ikon SEBARIS & rata kanan.
   `.tb-acts` bawaan inline-flex tapi perlu align-items center supaya kedua
   tombol (ikon mata + ikon hapus) benar-benar sejajar tingginya. */
.wl-table .wl-acts { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.wl-table .wl-acts .btn { margin: 0; }