:root{
  --bg:#0B0B0D;
  --bg-panel:#151417;
  --bg-panel-2:#1D1C20;
  --line:#2E2C31;
  --gold:#C9A227;
  --gold-bright:#E8C468;
  --wheat:#F1EDE1;
  --sage:#9A938B;
  --green:#6FCF97;
  --red:#E5484D;
  --amber:#E8B93F;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background-color:var(--bg);
  background-image:url("../img/bg-pattern.svg");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  background-attachment:fixed;
  color:var(--wheat);
  font-family:'IBM Plex Sans', sans-serif;
}
@media (max-width: 820px){
  body{ background-attachment:scroll; background-size:1100px auto; }
}
a{ color:inherit; }
/* 1880px disamakan dengan .wrap di css/index.css (dipakai index.html &
   produk.html) -- SEBELUM INI beda-beda tiap halaman (1680 di sini, 1720 di
   daftar.css, 1780 di client-portal.css), jadi margin kiri/kanan terlihat
   "loncat" tiap pindah halaman walau lebar jendela browser sama persis. */
.wrap{ max-width:1880px; margin:0 auto; padding:0 clamp(18px, 4vw, 56px); }

/* ---------- Header / brand (dipakai di semua halaman) ---------- */
header{ border-bottom:1px solid var(--line); padding:20px 0; }
.brand{
  font-family:'Fraunces', serif; font-size:18px; font-weight:600; letter-spacing:0.5px;
  display:flex; align-items:center; gap:10px;
}
.brand svg{ width:26px; height:26px; }
.brand img, .brand-logo{ height:40px; width:auto; display:block; border-radius:6px; }
.brand span{
  color:var(--gold-bright);
  background:linear-gradient(180deg, #FBEFC2 0%, #E8C468 42%, #C9A227 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:2px;
  font-weight:600;
}
.brand small{ color:var(--gold-bright); font-weight:600; font-size:12.5px; letter-spacing:0.4px; font-family:'IBM Plex Sans', sans-serif; }

/* ---------- Pilihan bahasa (bendera) — pojok kanan atas, dipakai di semua halaman ---------- */
.lang-switcher{ display:flex; gap:4px; }
.lang-btn{
  background:transparent; border:1px solid var(--line); color:var(--sage);
  padding:9px 11px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer;
  font-family:'IBM Plex Sans', sans-serif;
}
.lang-btn:hover{ color:var(--wheat); border-color:var(--sage); }
.lang-btn.active{ background:var(--gold); border-color:var(--gold); color:#14210F; }

/* Header di HP: logo & tulisan diperkecil supaya brand + lang-switcher tetap
   muat SATU baris (bukan numpuk ke baris ke-2). Anak judul kecil (mis. "·
   Client Portal", "· Daftar Akun") disembunyikan di layar sangat sempit --
   halaman itu sendiri sudah jelas dari isinya tanpa label tambahan ini. */
@media (max-width:600px){
  .brand{ font-size:14px; gap:6px; }
  .brand img, .brand-logo{ height:28px; }
  .lang-btn{ padding:7px 8px; font-size:10.5px; }
}
@media (max-width:480px){
  .brand small{ display:none; }
}

/* ---------- Tombol umum ---------- */
.btn{
  background:var(--gold); color:#14210F; border:none; border-radius:6px;
  padding:10px 18px; font-weight:600; font-size:14px; cursor:pointer;
  font-family:'IBM Plex Sans', sans-serif;
}
.btn.secondary{ background:transparent; border:1px solid var(--line); color:var(--wheat); }
.btn.danger{ background:var(--red); color:#3A0F0A; }

/* ---------- Badge status ---------- */
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:11.5px; font-weight:600; font-family:'IBM Plex Mono', monospace;
}
.badge.aktif{ background:rgba(111,207,151,0.15); color:var(--green); }
.badge.expired{ background:rgba(232,119,106,0.15); color:var(--red); }
.badge.nonaktif{ background:rgba(143,163,150,0.15); color:var(--sage); }
.badge.belum_mulai{ background:rgba(232,185,63,0.15); color:var(--amber); }

/* ---------- Panel kontrol EA (dipakai admin & client portal) ---------- */
.ea-panel{ background:var(--bg-panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.ea-panel-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 26px; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:14px;
}
.ea-panel-head h3{ font-family:'Fraunces', serif; font-size:18px; margin:0; }
.master-toggle{ display:flex; align-items:center; gap:12px; }
.status-label{ font-size:13px; font-weight:600; color:var(--green); font-family:'IBM Plex Mono', monospace; }
.status-label.off{ color:var(--red); }

.toggle{
  width:52px; height:30px; border-radius:999px; background:var(--bg);
  border:1px solid var(--line); position:relative; cursor:pointer;
}
.toggle .knob{
  position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%;
  background:var(--sage); transition:left .18s ease, background .18s ease;
}
.toggle.active{ background:rgba(111,207,151,0.15); border-color:var(--green); }
.toggle.active .knob{ left:24px; background:var(--green); }

.ea-panel-body{ padding:6px 26px 4px; }
.ctrl-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:15px 0; border-bottom:1px dashed var(--line);
}
.ctrl-row:last-child{ border-bottom:none; }
.ctrl-row .label{ font-size:14px; }
.ctrl-row .ctrl-label{ font-size: 14px; color: var(--wheat); }
.ctrl-row .hint{ display:block; font-size:11.5px; color:var(--sage); margin-top:2px; }

.num-input{
  width:72px; background:var(--bg); border:1px solid var(--line); color:var(--gold-bright);
  font-family:'IBM Plex Mono', monospace; font-size:13.5px; text-align:center; border-radius:6px; padding:7px 4px;
}
.num-input:focus{ outline:none; border-color:var(--gold); }

.seg{ display:flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.seg-btn{
  padding:7px 12px; font-size:12.5px; font-weight:600; color:var(--sage); background:var(--bg);
  cursor:pointer; border-right:1px solid var(--line); font-family:'IBM Plex Mono', monospace;
}
.seg-btn:last-child{ border-right:none; }
.seg-btn.active{ background:#2E4A8A; color:#EAF0FF; }

.ea-panel-foot{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  padding:20px 26px; background:var(--bg-panel-2);
}
.ea-panel-foot p{ color:var(--sage); font-size:12.5px; margin:0; max-width:420px; }
.save-btn{
  background:var(--gold); color:#14210F; padding:10px 20px; border-radius:6px;
  font-weight:600; font-size:14px; border:none; cursor:pointer; font-family:'IBM Plex Sans', sans-serif;
}
.save-btn.saved{ background:var(--green); }

/* ---------- Modal umum ---------- */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; padding:20px; z-index:100; }
.overlay.show{ display:flex; }
.modal{ background:var(--bg-panel); border:1px solid var(--line); border-radius:10px; width:100%; max-width:520px; max-height:88vh; overflow-y:auto; }
.modal-head{ padding:20px 24px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.modal-head h3{ margin:0; font-family:'Fraunces', serif; font-size:18px; }
.modal-head button{ background:none; border:none; color:var(--sage); font-size:20px; cursor:pointer; }
.modal-body{ padding:22px 24px; }
.modal-foot{ padding:18px 24px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; color:var(--sage); margin-bottom:6px; }
.field input, .field select{
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--wheat);
  padding:10px 12px; border-radius:6px; font-size:14px; font-family:'IBM Plex Mono', monospace;
}
.field-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
@media (max-width:480px){ .field-row{ grid-template-columns:minmax(0,1fr); } }

/* Centang "perlihatkan password" di bawah tiap input password */
.show-pw{
  display:flex; align-items:center; gap:7px;
  margin-top:8px; font-size:12px; color:var(--sage);
  cursor:pointer; user-select:none; font-family:'IBM Plex Sans', sans-serif;
}
.show-pw input[type="checkbox"]{
  width:15px; height:15px; margin:0; flex-shrink:0;
  accent-color:var(--gold); cursor:pointer;
}
.section-title{ font-size:12.5px; color:var(--gold-bright); font-weight:600; margin:22px 0 12px; text-transform:lowercase; }
.section-title:first-child{ margin-top:0; }

.msg{ font-size:13px; margin-top:10px; }
.msg.err{ color:var(--red); }
.msg.ok{ color:var(--green); }

/* ============================================================================
   Simulator Lot, Risiko & Minimal Deposit
   Dipakai di daftar.html (Step 2, di dalam <details class="sim-panel">) DAN
   client-portal.html (menu "Simulator", pakai <div class="sim-panel">).
   Markup form + hasil dibuat oleh js/simulator.js.
   ========================================================================== */
.sim-panel{
  border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(180deg, rgba(232,196,104,0.05) 0%, rgba(17,17,20,0.35) 100%);
  padding:6px 20px 20px; margin-bottom:22px;
}
.sim-panel > summary{
  list-style:none; cursor:pointer; padding:14px 0 6px;
  font-family:'Fraunces', serif; font-size:16px; font-weight:600; color:var(--wheat);
  display:flex; align-items:center; gap:8px;
}
.sim-panel > summary::-webkit-details-marker{ display:none; }
.sim-panel > summary::before{
  content:"\25B8"; color:var(--gold-bright); font-size:12px; transition:transform .15s ease; flex-shrink:0;
}
.sim-panel[open] > summary::before{ transform:rotate(90deg); }
.sim-panel > summary:hover{ color:var(--gold-bright); }
.sim-panel > h2{
  font-family:'Fraunces', serif; font-size:20px; font-weight:600; color:var(--wheat);
  margin:14px 0 6px;
}
.sim-hint{
  font-style:normal; font-family:'IBM Plex Sans', sans-serif; font-weight:400;
  font-size:12px; color:var(--sage);
}
.sim-panel[open] .sim-hint{ display:none; }
@media (max-width:620px){ .sim-hint{ display:none; } }
.sim-sub{ font-size:12.5px; color:var(--sage); margin:2px 0 16px; line-height:1.6; max-width:78ch; }

.sim-form{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px;
}
/* Tiap field = kotak sendiri — rapi & terlihat mewah. Item dalam satu baris
   grid otomatis sama tinggi (align-items:stretch bawaan grid). */
.sim-form label{
  display:flex; flex-direction:column; gap:7px;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:11px;
  padding:13px 14px 14px;
  font-size:11px; color:var(--sage);
}
.sim-form label:focus-within{ border-color:rgba(232,196,104,0.45); }
.sim-form label > span:first-child{
  font-family:'IBM Plex Sans', sans-serif; font-size:11.5px; font-weight:600; color:var(--wheat);
}
.sim-form .sim-unit{ font-style:normal; font-weight:400; color:var(--sage); }
.sim-form input, .sim-form select{
  background:var(--bg); border:1px solid var(--line); border-radius:7px;
  color:var(--wheat); padding:9px 11px; font-size:13.5px;
  font-family:'IBM Plex Mono', monospace; color-scheme:dark;
}
.sim-form input:focus, .sim-form select:focus{ outline:none; border-color:var(--gold); }
.sim-help{
  font-family:'IBM Plex Sans', sans-serif; font-size:10px; line-height:1.45;
  color:var(--sage); opacity:0.8; margin-top:auto;
}
.sim-kurs-auto{
  font-family:'IBM Plex Sans', sans-serif; font-size:10px; line-height:1.4;
  color:var(--green); margin-top:2px;
}
.sim-kurs-auto:empty{ display:none; }

.sim-cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px; margin:20px 0 4px;
}
.sim-card{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:9px; padding:12px 14px;
  display:flex; flex-direction:column; gap:3px;
}
.sim-card span{ font-size:11px; color:var(--sage); line-height:1.4; }
.sim-card b{ font-family:'IBM Plex Mono', monospace; font-size:18px; color:var(--wheat); font-weight:500; }
.sim-card i{ font-style:normal; font-size:11px; color:var(--sage); }
.sim-card.sim-loss b{ color:var(--red); }
.sim-card.sim-dep{ border-color:rgba(232,196,104,0.4); }
.sim-card.sim-dep b{ color:var(--gold-bright); }
.sim-card.sim-ok b{ color:var(--green); }
.sim-card.sim-warn b{ color:var(--amber); }
.sim-card.sim-bad b{ color:var(--red); }

/* Tabel rincian per layer — dibungkus kotak dengan background sendiri
   supaya latar chart di belakang tidak menembus & senada dengan kartu lain. */
.sim-table-wrap{
  overflow-x:auto; margin-top:18px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:11px;
}
.sim-table{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:460px; }
.sim-table th, .sim-table td{
  text-align:right; padding:10px 16px; border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace;
}
.sim-table thead th{
  color:var(--sage); font-weight:600; font-size:10.5px;
  text-transform:uppercase; letter-spacing:0.04em;
  background:rgba(232,196,104,0.05);
  border-bottom-color:rgba(232,196,104,0.2);
}
.sim-table thead th:first-child{ border-top-left-radius:11px; }
.sim-table thead th:last-child{ border-top-right-radius:11px; }
.sim-table th:first-child, .sim-table td:first-child{ text-align:left; }
.sim-table td{ color:var(--wheat); }
.sim-table tbody tr:nth-child(even) td{ background:rgba(255,255,255,0.015); }
.sim-table tbody tr:hover td{ background:rgba(232,196,104,0.05); }
.sim-table tbody tr:last-child td{ border-bottom:none; }

.sim-note{ margin:14px 0 0; font-size:11px; line-height:1.6; color:var(--sage); max-width:80ch; }