/* ============================================================
   SFX KEY LEVEL — style.css (neumorphic gelap)
   Bg #1C1F20 • logo transparan kiri-kanan • responsive HP+desktop
   ============================================================ */

@font-face{
  font-family:'Montserrat Arabic';
  src:url('../fonts/MontserratArabic.ttf') format('truetype');
  font-display:swap;
}

[hidden]{display:none !important}
:root{
  --bg:#1C1F20;
  --deep:#181b1c;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --text:#e9e9e9;
  --muted:#9aa0a3;
  --ok:#57b98a;
  --danger:#e0654f;
  --gold:#e8b458;
  --plat:#9fd4ff;
  --font:'Montserrat Arabic','Montserrat',system-ui,sans-serif;
  --shadow-out:8px 8px 18px rgba(0,0,0,.5), -5px -5px 12px rgba(255,255,255,.035);
  --shadow-out-sm:4px 4px 10px rgba(0,0,0,.45), -3px -3px 8px rgba(255,255,255,.035);
  --shadow-in:inset 4px 4px 10px rgba(0,0,0,.5), inset -3px -3px 8px rgba(255,255,255,.03);
}
body, .modal-card, .pill-btn, .round-btn, .pair-btn, .kl-box, .labeled-box, .neo-input{
  transition:background .45s ease, color .45s ease, box-shadow .45s ease, border-color .45s ease;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* body TIDAK ikut scroll : scroll terjadi di dalam .screen supaya
   layar tidak "melar"/bergoyang saat digeser atas-bawah di HP */
html,body{
  height:100%;overflow:hidden;
  overscroll-behavior:none;position:fixed;inset:0;width:100%;
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
}

/* logo transparan kiri & kanan di background (semua layout) */
.bg-logo{
  position:fixed;width:72vmin;height:72vmin;z-index:0;
  background:url('../img/logo.png') center/contain no-repeat;
  opacity:.04;pointer-events:none;
}
.bg-logo.left{left:-28vmin;bottom:-16vmin}   /* kiri di bawah */
.bg-logo.right{right:-28vmin;top:-16vmin}    /* kanan di atas */

/* ---------- layout ---------- */
.screen{
  display:none;height:100dvh;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  position:relative;z-index:1;animation:screenIn .35s ease both;
}
.screen::-webkit-scrollbar{display:none}
.screen{scrollbar-width:none}
.screen.active{display:block}
@keyframes screenIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}

.page{
  width:100%;max-width:470px;margin:0 auto;min-height:100dvh;
  padding:calc(26px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
/* BERANDA & LAYAR INPUT : konten dipusatkan & TIDAK bergerak saat digeser
   (sama seperti layar login) */
#screen-home,#screen-input{overflow:hidden}
#screen-home .page,#screen-input .page{height:100dvh;justify-content:center}
#screen-home .footer-pill,#screen-input .footer-pill{margin-top:0}
/* HP layar pendek : tetap boleh digeser supaya konten tidak terpotong */
@media(max-height:700px){
  #screen-home,#screen-input{overflow-y:auto}
  #screen-home .page,#screen-input .page{height:auto;min-height:100dvh}
}
.center-wrap{
  width:100%;max-width:470px;margin:0 auto;min-height:100dvh;
  padding:calc(24px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
}
/* di layar login kartu benar-benar di tengah : footer didorong ke bawah tanpa menarik kartu */
.center-wrap .login-card{margin-top:auto}
.center-wrap .footer-pill{margin-top:auto;margin-bottom:8px}
/* desktop tetap simetris di tengah */
@media(min-width:760px){
  .page,.center-wrap{max-width:520px}
}

/* ---------- kartu ---------- */
.neo-card{
  width:100%;position:relative;
  background:var(--bg);
  border:1px solid var(--line-soft);
  border-radius:34px;
  box-shadow:var(--shadow-out);
  padding:28px 20px 26px;
  display:flex;flex-direction:column;align-items:center;gap:20px;
}

/* ---------- logo ---------- */
.logo{width:76px;height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}
.logo.big{width:96px}
.logo.center{animation:logoFloat 4.5s ease-in-out infinite}
.glow-in{animation:glowIn 1.1s cubic-bezier(.2,.9,.3,1) both}
@keyframes glowIn{from{opacity:0;transform:scale(.6)}60%{transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.app-name{font-weight:800;letter-spacing:.24em;font-size:1rem;text-align:center}
.app-sub{font-size:.58rem;letter-spacing:.36em;color:var(--muted);font-weight:600;text-align:center}

/* ---------- tombol ---------- */
.pill-btn{
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--text);
  border-radius:999px;
  box-shadow:var(--shadow-out-sm);
  font-family:var(--font);font-weight:700;letter-spacing:.2em;
  padding:14px 30px;font-size:.8rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  position:relative;overflow:hidden;
  transition:transform .13s ease, box-shadow .2s, border-color .2s;
}
.pill-btn:hover{border-color:rgba(255,255,255,.28)}
.pill-btn:active{transform:scale(.95);box-shadow:var(--shadow-in)}
.pill-btn.big{padding:16px 54px;font-size:1.02rem;letter-spacing:.24em}
.pill-btn.wide{width:100%;padding:14px}
.pill-btn.small{padding:10px 16px;font-size:.64rem}
.pill-btn.ghosted{color:var(--muted)}
.pill-btn.danger{color:var(--danger);border-color:rgba(224,101,79,.4)}
.pill-btn img{flex:none}
.pill-btn:disabled{opacity:.55;pointer-events:none}

.link-btn{
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-family:var(--font);font-size:.68rem;letter-spacing:.08em;
  text-decoration:underline;opacity:.8;
}

.round-btn{
  width:46px;height:46px;border-radius:16px;flex:none;
  background:var(--bg);border:1px solid var(--line-soft);
  box-shadow:var(--shadow-out-sm);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--text);font-size:1.15rem;
  transition:transform .14s ease, box-shadow .2s;
  position:relative;
}
.round-btn img{width:21px;height:21px}
.round-btn:active{transform:scale(.88);box-shadow:var(--shadow-in)}
.round-btn.corner{position:absolute;top:16px;right:16px;z-index:2}
.round-btn.corner.left{right:auto;left:16px}

/* lencana merah belum terbaca */
.badge-dot{
  position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;
  background:#e0654f;color:#fff;border-radius:99px;
  font-size:.56rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  padding:0 5px;box-shadow:0 3px 8px rgba(224,101,79,.5);
  animation:pop .3s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.tab-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;background:#e0654f;color:#fff;
  border-radius:99px;font-size:.52rem;font-weight:800;padding:0 4px;margin-left:4px;
}

/* ---------- grid pair ---------- */
.pair-grid{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px}
.pair-btn{
  padding:13px 4px;border-radius:999px;
  background:var(--bg);border:1px solid var(--line);
  box-shadow:var(--shadow-out-sm);
  color:var(--text);font-family:var(--font);font-size:.66rem;font-weight:700;
  letter-spacing:.1em;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .12s ease, box-shadow .2s, border-color .2s;
  animation:rowIn .35s ease both;
}
.pair-btn:active{transform:scale(.92);box-shadow:var(--shadow-in)}
.pair-btn.selected{box-shadow:var(--shadow-in);border-color:rgba(255,255,255,.4)}

/* ---------- counter & baris icon ---------- */
.counter-row{
  display:flex;align-items:center;font-size:.64rem;color:var(--muted);
  letter-spacing:.05em;background:var(--bg);border:1px solid var(--line-soft);
  border-radius:999px;padding:9px 18px;box-shadow:var(--shadow-out-sm);
  white-space:nowrap;max-width:100%;
}
.counter-row span{color:var(--text);font-weight:700}
.dot-online{
  width:8px;height:8px;border-radius:50%;background:var(--ok);
  margin-right:8px;flex:none;box-shadow:0 0 8px var(--ok);
  animation:blink 2s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.mini-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
#theme-ico{font-size:1rem;line-height:1}
.bot-mark{opacity:.55;font-size:.62rem;margin-left:2px}
/* ---------- LIQUID GLASS : kilau lembut mengalir di kartu & tombol utama ---------- */
.modal-card,.neo-card,.pill-btn.wide,.paket-card{position:relative;overflow:hidden}
.modal-card::before,.neo-card::before,.pill-btn.wide::before,.paket-card::before{
  content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.014) 45%,rgba(255,255,255,.028) 50%,rgba(255,255,255,.014) 55%,transparent 100%);
  transform:skewX(-18deg);pointer-events:none;
  animation:liquidSheen 7s ease-in-out infinite;
}
.pill-btn.wide::before{animation-duration:5.2s}
@keyframes liquidSheen{
  0%{left:-70%} 55%{left:130%} 100%{left:130%}
}
@media (prefers-reduced-motion:reduce){
  .modal-card::before,.neo-card::before,.pill-btn.wide::before,.paket-card::before{animation:none;display:none}
}
/* ---------- TUTORIAL ---------- */
.howto-item{
  border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px;
  box-shadow:var(--shadow-out-sm);display:flex;flex-direction:column;gap:9px;
}
.howto-title{font-weight:800;letter-spacing:.08em;font-size:.8rem}
.howto-text{font-size:.7rem;line-height:1.65;color:var(--muted)}
.howto-img{width:100%;border-radius:12px}
.howto-video{position:relative;width:100%;padding-top:56.25%;border-radius:12px;overflow:hidden}
.howto-video iframe{position:absolute;inset:0;width:100%;height:100%}
/* ---------- FEEDBACK FEED (di dalam modal feedback) ---------- */
.fb-feed{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto}
.fb-item{
  border:1px solid var(--line-soft);border-radius:12px;padding:9px 12px;
  font-size:.64rem;line-height:1.6;color:var(--muted);box-shadow:var(--shadow-out-sm);
}
.fb-item b{color:var(--text);font-weight:700}
.fb-photo{display:block;max-width:70%;border-radius:12px;margin-top:8px;border:1px solid var(--line-soft)}
/* tab di modal pesan */
.inbox-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.inbox-tab{
  padding:11px 0;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font-family:inherit;font-weight:700;
  letter-spacing:.1em;font-size:.62rem;box-shadow:var(--shadow-out-sm);
}
.inbox-tab.on{color:var(--text);border-color:rgba(255,255,255,.4);box-shadow:var(--shadow-in)}
/* foto di chat */
.chat-photo{display:block;max-width:82%;border-radius:14px;margin:4px 0 6px;border:1px solid var(--line-soft)}
.chat-imgbtn{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;font-size:1.05rem;
  border:1px solid var(--line);background:transparent;box-shadow:var(--shadow-out-sm);
}
.chat-imgbtn:active{box-shadow:var(--shadow-in);transform:scale(.93)}
.fb-item{position:relative;padding-right:38px}
.fb-del{
  position:absolute;top:50%;right:8px;transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;
  border:1px solid rgba(224,101,79,.4);background:transparent;color:#e0654f;
  font-size:.62rem;line-height:1;box-shadow:var(--shadow-out-sm);
}
.fb-del:active{box-shadow:var(--shadow-in);transform:translateY(-50%) scale(.9)}
/* folder outlook */
.ol-folder{
  display:flex;align-items:center;gap:14px;width:100%;
  border:1px solid var(--line);border-radius:18px;padding:16px;
  box-shadow:var(--shadow-out);background:transparent;color:var(--text);
  font-family:inherit;text-align:left;
}
.ol-folder:active{box-shadow:var(--shadow-in);transform:scale(.985)}
.ol-folder .ic{font-size:1.6rem}
.ol-folder .tt{font-weight:700;font-size:.74rem;letter-spacing:.08em}
.ol-folder .ss{color:var(--muted);font-size:.6rem;margin-top:3px}
/* label validitas */
.flag{font-size:.5rem;letter-spacing:.08em;font-weight:700;border-radius:999px;padding:3px 9px;border:1px solid}
.flag.TERBARU{color:#e9c886;border-color:rgba(212,175,110,.55)}
.flag.VALID{color:#7ddfa8;border-color:rgba(125,223,168,.5)}
.flag.INVALID{color:#e0654f;border-color:rgba(224,101,79,.5)}
/* ---------- SIGNAL OUTLOOK ---------- */
.ol-card{
  border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:10px;
  box-shadow:var(--shadow-out-sm);
}
.ol-top{font-size:.78rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ol-tf{color:var(--muted);font-size:.62rem;letter-spacing:.08em}
.ol-meta{color:var(--muted);font-size:.6rem;margin-top:4px}
.ol-acts{display:flex;gap:8px;margin-top:9px}
.ol-line{
  display:flex;justify-content:space-between;align-items:center;
  border:1px solid var(--line-soft);border-radius:12px;padding:9px 13px;margin-top:7px;
  font-size:.68rem;color:var(--muted);
}
.ol-line b{color:var(--text)}
.ol-line.tp b{color:var(--ok)}
.ol-line.sl b{color:var(--danger)}
.ol-img{display:block;width:100%;border-radius:14px;margin-top:8px;border:1px solid var(--line-soft)}
.ol-cmt{
  border:1px solid var(--line-soft);border-radius:12px;padding:9px 34px 9px 12px;margin-bottom:8px;
  font-size:.64rem;color:var(--muted);position:relative;line-height:1.6;
}
.ol-cmt b{color:var(--text)}
.check-row{display:flex;gap:10px;align-items:center;font-size:.64rem;color:var(--muted);margin-bottom:10px}
.check-row input{width:17px;height:17px}
/* video panduan */
.video-frame{position:relative;width:100%;padding-bottom:56.25%;border-radius:14px;overflow:hidden;border:1px solid var(--line-soft)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-el{display:block}
.video-views{margin-top:12px;text-align:center;color:var(--muted);font-size:.66rem;letter-spacing:.04em}
.video-views .eye{font-size:.9rem;margin-right:4px}
/* persetujuan */
.tos-text{font-size:.68rem;line-height:1.75;color:var(--muted)}
.tos-text b{color:var(--text)}
/* pdf viewer */
.pdf-frame{width:100%;height:52vh;border:1px solid var(--line-soft);border-radius:14px;background:#fff}
.pdf-frame.big{height:66vh}
.pdfjs-wrap{max-height:68vh;overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
.pdf-page{display:block;width:100%;margin-bottom:8px;border-radius:10px;background:#0d1220}
.pdf-card{max-width:560px}
/* daftar modul */
.modul-item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px;
  background:transparent;color:var(--text);font-family:inherit;box-shadow:var(--shadow-out-sm);
}
.modul-item:active{box-shadow:var(--shadow-in);transform:scale(.985)}
.modul-item.locked{opacity:.55}
.modul-item .mi-ic{font-size:1.15rem}
.modul-item .mi-tt{flex:1;font-weight:700;font-size:.7rem;letter-spacing:.05em}
.modul-item .mi-go{font-size:.56rem;color:var(--muted);letter-spacing:.1em}
/* ---------- EDITOR SIGNAL (baris dinamis) ---------- */
.sg-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.sg-row input{
  flex:1;min-width:0;background:transparent;border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;color:var(--text);font-family:inherit;font-size:.68rem;box-shadow:var(--shadow-in);
}
.sg-row .sg-name{flex:1.3;letter-spacing:.04em}
.sg-row .sg-val{flex:1}
/* pilih pair untuk template fibo */
.pair-picks{display:flex;flex-wrap:wrap;gap:8px}
.pair-pick{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font-family:inherit;font-size:.6rem;
  letter-spacing:.08em;font-weight:700;box-shadow:var(--shadow-out-sm);
}
.pair-pick.on{color:var(--text);border-color:rgba(255,255,255,.45);box-shadow:var(--shadow-in)}
.sg-row .tpl-name{flex:1.3}
.sg-row .tpl-val{flex:1}
.sg-row input.tpl-val{text-align:center}
/* tombol aksi user (ban / izinkan / hapus) */
.user-acts{display:flex;gap:6px;flex-shrink:0}
.mini-btn.ok{color:#7ddfa8;border-color:rgba(125,223,168,.55)}
.mini-btn.ok:active{box-shadow:var(--shadow-in);transform:scale(.94)}
/* catatan owner di halaman hasil */
.hasil-note{
  border:1px dashed var(--line);border-radius:14px;padding:12px 14px;margin-top:4px;
  font-size:.64rem;line-height:1.7;color:var(--muted);letter-spacing:.02em;
}

/* ---------- sosial & footer ---------- */
.social-block{display:flex;flex-direction:column;gap:12px;width:100%}
.social-label{font-size:.68rem;color:var(--text);letter-spacing:.04em;font-weight:600;padding-left:8px}
.social-row{display:flex;gap:13px;justify-content:center}
.social-btn{
  width:50px;height:50px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line);
  box-shadow:var(--shadow-out-sm);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .15s ease, box-shadow .2s;position:relative;overflow:hidden;
}
.social-btn img{width:21px;height:21px}
.social-btn:active{transform:scale(.85);box-shadow:var(--shadow-in)}
.footer-pill{
  font-size:.62rem;color:var(--muted);letter-spacing:.05em;
  border:1px solid var(--line-soft);border-radius:999px;
  padding:9px 22px;box-shadow:var(--shadow-out-sm);
  margin-top:auto;white-space:nowrap;
}

/* ---------- trial banner (ikut alur halaman, bukan menutupi) ---------- */
.trial-banner{
  display:flex;align-items:center;justify-content:center;
  width:100%;
  background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:13px 18px;
  box-shadow:var(--shadow-out-sm);
  font-size:.62rem;font-weight:700;letter-spacing:.16em;color:var(--text);
  white-space:nowrap;
}
.trial-banner.warn{border-color:var(--gold);color:var(--gold)}
.trial-banner.warn span{animation:blink 1.6s ease-in-out infinite}
.trial-banner[hidden]{display:none}

/* ---------- box label pill ---------- */
.labeled-box{
  width:100%;position:relative;margin-top:14px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow-in);
  padding:24px 16px 14px;
}
.box-label{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:5px 14px;white-space:nowrap;
  font-size:.6rem;font-weight:700;letter-spacing:.18em;color:var(--text);
  box-shadow:var(--shadow-out-sm);z-index:1;
}
.labeled-box.has-copy{padding-right:58px}
.neo-input{
  width:100%;background:transparent;border:none;outline:none;resize:none;
  color:var(--text);font-family:var(--font);font-size:.9rem;font-weight:600;
  text-align:center;line-height:1.5;
}
.neo-input::placeholder{color:var(--muted);font-style:italic;font-weight:400;font-size:.8rem}
.labeled-box.err{border-color:var(--danger)}
.neo-select{
  width:100%;background:var(--deep);border:1px solid var(--line);
  border-radius:11px;color:var(--text);font-family:var(--font);
  padding:11px;font-size:.76rem;outline:none;font-weight:600;
}
.input-pair-label{font-size:.72rem;font-weight:800;letter-spacing:.3em;color:var(--muted)}

/* ---------- login / paywall ---------- */
.login-card{padding:42px 26px}
.login-note{font-size:.66rem;color:var(--muted);text-align:center;line-height:1.7}
.login-note b{color:var(--text)}
.demo-note{font-size:.6rem;color:var(--gold);text-align:center;border:1px dashed rgba(232,180,88,.4);border-radius:10px;padding:8px 12px}
.paywall-title{font-size:.84rem;font-weight:800;letter-spacing:.2em;text-align:center}
.paywall-sub{font-size:.66rem;color:var(--muted);text-align:center;margin-top:-10px}
.package-list{width:100%;display:flex;flex-direction:column;gap:18px}
.package-card{
  position:relative;border:1px solid var(--line);border-radius:26px;
  background:var(--bg);box-shadow:var(--shadow-out);
  padding:26px 20px 20px;text-align:center;
  display:flex;flex-direction:column;gap:8px;animation:rowIn .4s ease both;
}
.package-card .pk-name{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:5px 16px;font-size:.6rem;font-weight:800;letter-spacing:.22em;
  box-shadow:var(--shadow-out-sm);white-space:nowrap;
}
.package-card .pk-price{font-size:1.3rem;font-weight:800;margin-top:4px}
.package-card .pk-dur{font-size:.6rem;color:var(--muted);letter-spacing:.12em}
.package-card .pk-benefits{font-size:.68rem;line-height:1.8;white-space:pre-line}
.package-card.best{border-color:rgba(232,180,88,.5)}
.package-card.best .pk-name{color:var(--gold);border-color:rgba(232,180,88,.5)}
.pay-package{text-align:center;font-size:.76rem;font-weight:800;letter-spacing:.12em}
.pay-rek{text-align:center;font-size:.84rem;font-weight:700;line-height:1.7}
.pay-note{font-size:.62rem;color:var(--muted);text-align:center;line-height:1.7;margin-top:8px}
.pay-note b{color:var(--text)}
.file-input{width:100%;color:var(--muted);font-family:var(--font);font-size:.68rem}
.file-input::file-selector-button{
  border:1px solid var(--line);background:var(--deep);color:var(--text);
  border-radius:999px;padding:8px 14px;margin-right:10px;cursor:pointer;
  font-family:var(--font);font-size:.62rem;letter-spacing:.1em;font-weight:700;
}

/* ---------- animasi ---------- */
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.22);
  transform:scale(0);animation:ripple .55s ease-out forwards;
}
@keyframes ripple{to{transform:scale(3);opacity:0}}
.shake{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;
  background:rgba(8,10,10,.78);backdrop-filter:blur(5px);z-index:50;
}
.modal.open{display:flex;animation:fadeIn .25s ease}
/* pop up persetujuan : di TENGAH layar */
#modal-tos{align-items:center;padding:18px}
#modal-tos .modal-card.slim{margin:auto;max-height:86vh;overflow-y:auto}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{
  width:100%;max-width:480px;max-height:90dvh;overflow-y:auto;overflow-x:hidden;
  background:var(--bg);border:1px solid var(--line);
  border-radius:30px 30px 0 0;padding:26px 20px 32px;position:relative;
  box-shadow:0 -18px 50px rgba(0,0,0,.6);
  animation:slideUp .32s cubic-bezier(.2,.9,.3,1) both;
  display:flex;flex-direction:column;gap:13px;
}
/* jangan biarkan isi modal (baris tab dll) tergencet/terpotong */
.modal-card>*{flex-shrink:0}
.modal-card{scrollbar-width:none;overscroll-behavior:contain}
.modal-card::-webkit-scrollbar{display:none}
@keyframes slideUp{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
/* kartu modal ringkas : tidak memenuhi layar (dipakai hasil analisa, pilih posisi, loading) */
.modal-card.slim{
  width:calc(100% - 36px);max-width:430px;border-radius:26px;
  padding:24px 20px 26px;margin:0 auto 26px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
/* --- pilih posisi BUY / SELL --- */
.dir-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dir-btn{
  padding:16px 0;border-radius:18px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font-family:inherit;font-weight:700;
  letter-spacing:.12em;font-size:.78rem;box-shadow:var(--shadow-out-sm);
  transition:transform .12s ease, color .2s ease, border-color .2s ease;
}
.dir-btn:active{transform:scale(.95);box-shadow:var(--shadow-in)}
.dir-btn.buy.on{color:#7ddfa8;border-color:rgba(125,223,168,.6)}
.dir-btn.sell.on{color:#e88a75;border-color:rgba(232,138,117,.6)}
/* --- loading --- */
.loading-card{align-items:center;text-align:center;gap:16px;padding:34px 20px}
.spinner{
  width:42px;height:42px;border-radius:50%;
  border:3px solid rgba(255,255,255,.12);border-top-color:var(--text);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:.66rem;letter-spacing:.14em;color:var(--muted)}
/* --- status aktif member (panel owner) --- */
.dot-on,.dot-off{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}
.dot-on{background:#5fd39a;box-shadow:0 0 7px rgba(95,211,154,.8)}
.dot-off{background:#6b7070}
@media(min-width:540px){
  .modal{align-items:center;padding:24px}
  .modal-card{border-radius:30px}
}
.modal-close{
  position:absolute;top:14px;right:16px;width:36px;height:36px;
  border-radius:50%;border:1px solid var(--line);background:var(--bg);
  box-shadow:var(--shadow-out-sm);
  color:var(--muted);font-size:1.15rem;cursor:pointer;line-height:1;
  transition:transform .15s ease;z-index:3;
}
.modal-close:active{transform:scale(.85)}
.modal-title{font-size:.78rem;font-weight:800;letter-spacing:.3em;text-align:center;margin-bottom:2px}

/* ---------- HASIL ---------- */
.hasil-title{
  align-self:center;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-out-sm);
  padding:12px 42px;font-size:1.25rem;font-weight:800;letter-spacing:.18em;
}
.result-pair{text-align:center;font-size:.76rem;font-weight:800;letter-spacing:.2em}
.result-swing{text-align:center;font-size:.6rem;color:var(--muted);margin-top:-6px}
.dir-chip{
  align-self:center;margin:10px auto 0;display:block;width:fit-content;
  border:1px solid var(--line);border-radius:999px;
  box-shadow:var(--shadow-out-sm);
  padding:7px 24px;font-size:.6rem;font-weight:800;letter-spacing:.26em;
}
.dir-chip.buy{color:var(--ok);border-color:rgba(87,185,138,.4)}
.dir-chip.sell{color:var(--danger);border-color:rgba(224,101,79,.4)}
.kl-box{
  position:relative;margin-top:17px;
  border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-in);
  padding:24px 62px 18px 18px;min-height:64px;
  display:flex;align-items:center;animation:rowIn .4s ease both;
}
.kl-box .kl-price{font-size:1rem;font-weight:700;letter-spacing:.06em;width:100%;text-align:center}
.kl-box.tp .kl-price{color:var(--ok)}
.kl-box.sl{border-color:rgba(224,101,79,.35)}
.kl-box.sl .kl-price,.kl-box.sl .box-label{color:var(--danger)}
.copy-price{
  width:40px;height:40px;border-radius:13px;flex:none;
  border:1px solid var(--line);background:var(--bg);
  box-shadow:var(--shadow-out-sm);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  position:absolute;right:11px;top:50%;transform:translateY(-50%);overflow:hidden;
  transition:transform .15s ease;
}
.copy-price img{width:16px;height:16px;filter:grayscale(1) brightness(1.5)}
.copy-price:active{transform:translateY(-50%) scale(.82)}
.copy-price.done{border-color:var(--ok)}
.copy-price.done img{filter:none}
.announce-box{margin-top:20px;padding:26px 18px 16px}
.announce-text{font-size:.7rem;color:var(--muted);line-height:1.75;white-space:pre-line;text-align:left}
.guide-text{font-size:.8rem;line-height:1.8;white-space:pre-line}

/* ---------- stats & histori ---------- */
.history-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.history-stats.cols5{grid-template-columns:repeat(5,1fr)}
.history-stats.cols3{grid-template-columns:repeat(3,1fr)}
.stat-box{
  background:var(--bg);border:1px solid var(--line-soft);border-radius:14px;
  box-shadow:var(--shadow-out-sm);padding:11px 3px;text-align:center;
}
.stat-box .num{font-size:.95rem;font-weight:800;word-break:break-all}
.stat-box .lbl{font-size:.48rem;letter-spacing:.12em;color:var(--muted);margin-top:3px;font-weight:700}
.stat-box.run .num{color:var(--gold)}
.stat-box.win .num{color:var(--ok)}
.stat-box.loss .num{color:var(--danger)}
.history-empty{text-align:center;color:var(--muted);font-size:.74rem;padding:26px 10px;line-height:1.7}
.history-item{
  background:var(--bg);border:1px solid var(--line-soft);border-radius:18px;
  box-shadow:var(--shadow-out-sm);padding:14px 15px;animation:rowIn .3s ease both;
  margin-bottom:10px;
}
.history-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.history-pair{font-weight:800;font-size:.78rem;letter-spacing:.1em;flex:1}
.status-badge{padding:3px 11px;border-radius:99px;font-size:.52rem;font-weight:800;letter-spacing:.12em;border:1px solid;white-space:nowrap}
.status-badge.RUNNING{color:var(--gold);border-color:var(--gold)}
.status-badge.PROFIT,.status-badge.selesai{color:var(--ok);border-color:var(--ok)}
.status-badge.LOSS,.status-badge.baru{color:var(--danger);border-color:var(--danger)}
.status-badge.BE{color:var(--muted);border-color:var(--muted)}
.history-date{font-size:.56rem;color:var(--muted);margin-bottom:8px}
.history-levels{
  font-size:.64rem;line-height:1.8;border:1px dashed var(--line);
  border-radius:12px;padding:8px 11px;margin-bottom:9px;box-shadow:var(--shadow-in);
}
.history-actions{display:flex;gap:6px;flex-wrap:wrap}
.status-btn{
  padding:7px 11px;border-radius:99px;cursor:pointer;font-size:.54rem;font-weight:800;
  letter-spacing:.08em;border:1px solid var(--line);background:var(--bg);color:var(--muted);
  box-shadow:var(--shadow-out-sm);transition:all .15s;position:relative;overflow:hidden;
  font-family:var(--font);
}
.status-btn:active{transform:scale(.92);box-shadow:var(--shadow-in)}
.status-btn.run.on{color:var(--gold);border-color:var(--gold)}
.status-btn.win.on{color:var(--ok);border-color:var(--ok)}
.status-btn.loss.on{color:var(--danger);border-color:var(--danger)}
.status-btn.hapus{margin-left:auto;color:var(--danger);border-color:rgba(224,101,79,.4)}

/* ---------- journal ---------- */
.journal-card,.admin-card,.history-card,.chat-card{max-height:92dvh}
.jtab-btn{
  flex:none;padding:9px 15px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg);color:var(--muted);cursor:pointer;box-shadow:var(--shadow-out-sm);
  font-family:var(--font);font-size:.64rem;font-weight:700;
  transition:all .2s;position:relative;overflow:hidden;
}
.jtab-btn.active{color:var(--text);box-shadow:var(--shadow-in);border-color:rgba(255,255,255,.3)}
.jtab{display:none;flex-direction:column;gap:12px}
.jtab.active{display:flex}
canvas{width:100%;display:block}
.photo-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.photo-thumb{
  position:relative;width:64px;height:64px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-out-sm);
}
.photo-thumb img{width:100%;height:100%;object-fit:cover}
.photo-thumb .del{
  position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;
  background:rgba(0,0,0,.7);color:#fff;border:none;font-size:.6rem;cursor:pointer;line-height:1;
}
.photo-full{max-width:100%;border-radius:12px;margin-top:6px}
.j-photos{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.j-photos img{width:70px;height:70px;object-fit:cover;border-radius:10px;border:1px solid var(--line);cursor:pointer}

/* ---------- chat global ---------- */
.chat-card{height:88dvh}
.chat-list{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;
  padding:8px 2px;border:1px solid var(--line-soft);border-radius:16px;
  box-shadow:var(--shadow-in);padding:12px;
}
.chat-msg{display:flex;gap:9px;align-items:flex-start;animation:rowIn .3s ease both}
.chat-msg.me{flex-direction:row-reverse}
.chat-ava{
  width:36px;height:36px;border-radius:50%;flex:none;overflow:hidden;
  border:2px solid var(--muted);background:var(--deep);
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:800;color:var(--text);
}
.chat-ava img{width:100%;height:100%;object-fit:cover}
.chat-ava.tier-trial{border-color:#8a9299}
.chat-ava.tier-silver{border-color:#c9ccd1;box-shadow:0 0 8px rgba(201,204,209,.5)}
.chat-ava.tier-gold{border-color:var(--gold);box-shadow:0 0 9px rgba(232,180,88,.55)}
.chat-ava.tier-platinum{border-color:var(--plat);box-shadow:0 0 10px rgba(159,212,255,.6)}
.chat-ava.tier-owner{border-color:var(--gold);box-shadow:0 0 12px rgba(232,180,88,.85),0 0 24px rgba(232,180,88,.35)}
.chat-ava{position:relative;overflow:hidden}
.chat-ava img{position:absolute;inset:0;border-radius:50%}
.tier-tag.owner{color:var(--gold);border-color:var(--gold);background:rgba(232,180,88,.12);font-weight:800}
.chat-quote{
  border-left:3px solid rgba(255,255,255,.25);background:rgba(255,255,255,.04);
  border-radius:6px;padding:4px 8px;margin:4px 0 6px;font-size:.62rem;color:var(--muted);
}
.chat-quote b{color:var(--text)}
.chat-actions{display:flex;gap:10px;margin-top:6px}
.chat-act{
  background:none;border:none;color:var(--muted);font-size:.56rem;letter-spacing:.06em;
  cursor:pointer;padding:2px 0;font-family:inherit;
}
.chat-act.del{color:#e0654f}
.chat-replybar{
  display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;
  padding:7px 10px;font-size:.62rem;color:var(--muted);box-shadow:var(--shadow-in);
}
.chat-replybar[hidden]{display:none}
.chat-replyinfo{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chat-replyinfo b{color:var(--text)}
.chat-bubble{
  max-width:75%;background:var(--deep);border:1px solid var(--line-soft);
  border-radius:14px;padding:8px 12px;font-size:.72rem;line-height:1.55;
  box-shadow:var(--shadow-out-sm);
}
.chat-msg.me .chat-bubble{border-color:rgba(255,255,255,.2)}
.chat-name{font-size:.56rem;font-weight:800;letter-spacing:.06em;margin-bottom:3px;display:flex;gap:6px;align-items:center}
.chat-name .tier-tag{font-size:.44rem;padding:1px 6px;border-radius:99px;border:1px solid;letter-spacing:.1em}
.tier-tag.trial{color:#8a9299;border-color:#8a9299}
.tier-tag.silver{color:#c9ccd1;border-color:#c9ccd1}
.tier-tag.gold{color:var(--gold);border-color:var(--gold)}
.tier-tag.platinum{color:var(--plat);border-color:var(--plat)}
.chat-input-row{display:flex;gap:8px;align-items:center}
.chat-avatar-btn{
  width:42px;height:42px;border-radius:50%;flex:none;overflow:hidden;
  border:1px solid var(--line);background:var(--deep);cursor:pointer;padding:0;
  box-shadow:var(--shadow-out-sm);
}
.chat-avatar-btn img{width:100%;height:100%;object-fit:cover}
.chat-input{
  flex:1;background:var(--bg);border:1px solid var(--line);border-radius:999px;
  box-shadow:var(--shadow-in);padding:12px 16px;color:var(--text);
  font-family:var(--font);font-size:.78rem;outline:none;min-width:0;
}
.chat-send{
  width:44px;height:44px;border-radius:50%;flex:none;border:none;cursor:pointer;
  background:#e9e9e9;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-out-sm);transition:transform .15s ease;
  position:relative;overflow:hidden;
}
.chat-send:active{transform:scale(.85)}
.chat-send img{width:19px;height:19px}
.profile-ava-wrap{
  width:88px;height:88px;border-radius:50%;overflow:hidden;margin:4px auto;
  border:3px solid var(--gold);box-shadow:0 0 16px rgba(232,180,88,.4);
}
.profile-ava-wrap img{width:100%;height:100%;object-fit:cover}

/* ---------- inbox ---------- */
.notif-del{
  position:absolute;top:8px;right:10px;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(224,101,79,.4);background:transparent;color:#e0654f;
  font-size:.7rem;line-height:1;box-shadow:var(--shadow-out-sm);
}
.notif-del:active{box-shadow:var(--shadow-in);transform:scale(.92)}
.inbox-item{position:relative;
  border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--shadow-out-sm);
  padding:13px 14px;margin-bottom:10px;animation:rowIn .3s ease both;
}
.inbox-item.unread{border-color:rgba(224,101,79,.45)}
.inbox-text{font-size:.72rem;line-height:1.65}
.inbox-date{font-size:.54rem;color:var(--muted);margin-top:5px}
.inbox-code{
  display:flex;align-items:center;gap:8px;margin-top:8px;
  border:1px dashed var(--line);border-radius:12px;padding:9px 12px;
  box-shadow:var(--shadow-in);
}
.inbox-code b{flex:1;letter-spacing:.12em;font-size:.78rem;word-break:break-all}

/* ---------- admin ---------- */
.admin-tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.admin-tabs::-webkit-scrollbar{display:none}
.tab-btn{
  flex:none;padding:9px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg);color:var(--muted);cursor:pointer;box-shadow:var(--shadow-out-sm);
  font-family:var(--font);font-size:.62rem;font-weight:700;
  transition:all .2s;position:relative;overflow:hidden;
  display:inline-flex;align-items:center;
}
.tab-btn.active{color:var(--text);box-shadow:var(--shadow-in);border-color:rgba(255,255,255,.3)}
.tab{display:none;flex-direction:column;gap:12px}
.tab.active{display:flex}
.admin-note{font-size:.62rem;color:var(--muted);line-height:1.6;border:1px dashed var(--line);border-radius:12px;padding:10px 12px}
.fibo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{display:flex;flex-direction:column;gap:6px;width:100%}
.field label{font-size:.56rem;letter-spacing:.18em;color:var(--muted);font-weight:800}
.field input,.field textarea{
  width:100%;padding:12px 14px;border-radius:13px;
  background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow-in);
  color:var(--text);font-family:var(--font);font-size:.8rem;font-weight:600;outline:none;
}
.field textarea{resize:vertical;font-weight:400;line-height:1.55}
.field input:focus,.field textarea:focus{border-color:rgba(255,255,255,.35)}
.pair-admin-row,.pkg-admin-row{
  border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--shadow-out-sm);
  padding:13px;display:flex;flex-direction:column;gap:9px;margin-bottom:11px;
}
.pair-admin-row .row,.pkg-admin-row .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pair-admin-row input,.pkg-admin-row input,.pkg-admin-row textarea{
  width:100%;padding:9px 10px;border-radius:10px;background:var(--bg);
  border:1px solid var(--line);box-shadow:var(--shadow-in);color:var(--text);
  font-family:var(--font);font-size:.72rem;font-weight:600;outline:none;
}
.pkg-admin-row textarea{resize:vertical;font-weight:400}
.mini-label{font-size:.5rem;letter-spacing:.12em;color:var(--muted);font-weight:800}
.pair-admin-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.mini-btn{
  padding:7px 11px;border-radius:99px;border:1px solid var(--line);
  background:var(--bg);color:var(--muted);cursor:pointer;font-size:.66rem;
  box-shadow:var(--shadow-out-sm);transition:all .15s;position:relative;overflow:hidden;
  font-family:var(--font);
}
.mini-btn:active{transform:scale(.9);box-shadow:var(--shadow-in)}
.mini-btn.del{color:var(--danger);border-color:rgba(224,101,79,.4)}
.admin-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.code-item{
  display:flex;align-items:center;gap:8px;border:1px solid var(--line-soft);
  border-radius:14px;box-shadow:var(--shadow-out-sm);
  padding:11px 13px;margin-bottom:9px;font-size:.68rem;flex-wrap:wrap;
}
.code-item .code-text{font-weight:800;letter-spacing:.08em;flex:1;min-width:120px;word-break:break-all}
.code-item .code-meta{font-size:.52rem;color:var(--muted);display:block;font-weight:400;margin-top:2px}
.code-item.used{opacity:.55}

/* pesanan owner */
.order-item{
  border:1px solid var(--line-soft);border-radius:18px;box-shadow:var(--shadow-out-sm);
  padding:14px;margin-bottom:12px;display:flex;flex-direction:column;gap:8px;
}
.order-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.order-head b{font-size:.72rem;flex:1;min-width:120px;word-break:break-all}
.order-proof{max-width:100%;border-radius:12px;border:1px solid var(--line)}
.order-chat{
  border:1px dashed var(--line);border-radius:12px;box-shadow:var(--shadow-in);
  padding:9px 11px;font-size:.64rem;line-height:1.7;max-height:130px;overflow-y:auto;
}
.order-chat b{color:var(--gold)}
.order-send{display:flex;gap:6px}
.order-send input{
  flex:1;background:var(--bg);border:1px solid var(--line);border-radius:999px;
  box-shadow:var(--shadow-in);padding:9px 14px;color:var(--text);
  font-family:var(--font);font-size:.7rem;outline:none;min-width:0;
}

/* ---------- maintenance ---------- */
.maint-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(15,17,18,.97);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.maint-overlay[hidden]{display:none}

/* ---------- marquee & toast ---------- */
.marquee{
  position:fixed;left:0;right:0;bottom:0;z-index:35;
  background:rgba(22,25,26,.62);border-top:1px solid var(--line-soft);
  overflow:hidden;padding:9px 0 calc(9px + env(safe-area-inset-bottom));
  backdrop-filter:blur(6px);
}
.marquee[hidden]{display:none}
.marquee-track{
  display:inline-flex;gap:60px;white-space:nowrap;
  animation:marquee 110s linear infinite;
  font-size:.66rem;color:var(--muted);will-change:transform;padding-left:100vw;
}
.marquee-track b{color:var(--text);font-weight:700}
@keyframes marquee{to{transform:translateX(-100%)}}
.toast{
  position:fixed;left:50%;bottom:64px;transform:translateX(-50%) translateY(80px);
  background:var(--bg);border:1px solid rgba(255,255,255,.3);color:var(--text);
  padding:11px 20px;border-radius:99px;font-size:.72rem;
  z-index:99;opacity:0;transition:all .3s cubic-bezier(.2,.9,.3,1);
  box-shadow:0 12px 30px rgba(0,0,0,.6);max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:var(--danger)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}